/* The GitHub Pages site's one stylesheet: the landing page, the docs and the
   testing report each load it after theme.css. Colours come only from
   theme.css roles. The base comes first and every page uses it as it is; each
   page's block after it holds only that page's own pieces, and the few places
   it differs from the base, keyed on that page's own elements. The
   typeface's @font-face rules are in each page's <head>, at the font
   files' versioned names (xtask/src/pages/site_assets.rs). */

/* ============================================================
   Base: the page, text and links
   ============================================================ */
:root{--space-2xl:40px}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:500 16px/1.6 var(--font-ui);overflow-x:hidden}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent-text)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
p{margin:0}
code{font-family:var(--font-mono);font-size:.88em;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.05em .35em;overflow-wrap:anywhere}
.mono{font-family:var(--font-mono);font-size:.86em}
pre{margin:0;padding:var(--space-md) var(--space-lg);overflow-x:auto;background:var(--surface-sunken);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-md);font:14px/1.6 var(--font-mono)}
pre code{border:0;padding:0;background:none;font-size:inherit}
.muted{color:var(--muted)}
.small{font-size:14px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============================================================
   Base: layout
   ============================================================ */
main{max-width:1120px;margin:0 auto;padding:var(--space-2xl) var(--space-lg) 80px;display:flex;flex-direction:column;gap:var(--space-xl)}
.card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);min-width:0;overflow:hidden}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}
@media (max-width:820px){.grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:680px){.two{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   Base: controls
   ============================================================ */

/* Tabs: links to pages (aria-current) or buttons over panels (aria-selected),
   the current one underlined; .c is a count beside the label. */
.tabs{display:flex;gap:var(--space-xs);box-shadow:inset 0 -2px 0 var(--line);overflow-x:auto;scrollbar-width:thin}
.tabs>a,.tabs>[role=tab]{flex:none;padding:10px var(--space-lg);border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);font:700 15px var(--font-ui);text-decoration:none;white-space:nowrap;cursor:pointer}
.tabs>a:focus-visible,.tabs>[role=tab]:focus-visible{outline-offset:-2px}
.tabs>a[aria-current="page"],.tabs>[role=tab][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--tab-current)}
.tabs .c{font-weight:600;color:var(--muted);font-size:12px;margin-left:4px}


/* Tables: .tbl scrolls one sideways on a narrow screen; .r is a number column.
   Rows a line apart, flush with their card: none of ui.css's table look
   (its margin, a border round every cell, the head's fill, the stripes). */
.tbl{overflow-x:auto}
table{width:100%;margin:0;border-collapse:collapse;font-size:14px;text-align:left}
th,td{text-align:left;vertical-align:top;padding:var(--space-sm) var(--space-md);border:0;border-bottom:1px solid var(--line)}
th{font-weight:700;background:none;color:inherit}
tr:nth-child(even) td{background:none}
thead th{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.card table>tbody>tr:last-child>td{border-bottom:0}

/* ============================================================
   Landing page (/, xtask/src/pages/landing/): the hero, the tiles,
   and the install steps with their commands
   ============================================================ */
main.home{max-width:1040px;gap:56px}
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-xl);align-items:center}
.hero .mark{color:var(--ink)}
.hero h1{font-size:clamp(32px,5.5vw,52px);margin-bottom:var(--space-md)}
.hero .lead{font-size:18px;color:var(--muted);max-width:40em}
.actions{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-xl)}

.section-title{margin-bottom:var(--space-xl)}
.section-title h2{font-size:clamp(26px,4vw,34px)}
.section-title p{color:var(--muted);margin-top:var(--space-xs)}
.home h3{font-size:18px;margin-bottom:var(--space-sm)}
.grid p{color:var(--muted)}

.install{display:flex;flex-direction:column;gap:var(--space-lg)}
.install ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-xl)}
.install ol>li{display:flex;gap:var(--space-lg)}
.install ol>li>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-sm)}
.num{flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--tint-highlight);border:1px solid var(--accent-text);color:var(--ink);font-weight:800}
/* A command after a tile's words; a step's gap spaces its own. */
.install .box>.mk-copy-block{margin-top:var(--space-sm)}
.req{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xs)}
.req span{padding:var(--pill-pad-y) var(--pill-pad-x);border-radius:999px;background:var(--surface-sunken);border:1px solid var(--line);font-size:14px;font-weight:700}
.apk-files{margin:var(--space-sm) 0 0;padding-left:20px}
.path{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;align-self:flex-start;padding:2px 10px;border-radius:var(--radius-sm);background:var(--surface-sunken);border:1px solid var(--line);font-weight:700;font-size:15px}
.path.inline{display:inline;padding:1px 8px}
.path b{color:var(--accent-text)}
.path em{font-style:normal;text-decoration:underline;text-underline-offset:3px}
.target-pick{margin-top:var(--space-md);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm)}
.target-pick label{font-weight:700}

@media (max-width:820px){
  main.home{gap:40px}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero .mark{width:56px;height:56px}
}
@media (max-width:520px){
  .install ol>li{gap:var(--space-sm)}
}

/* ============================================================
   Docs (/docs/, xtask/src/pages/docs.rs): a tab per guide above
   its Markdown, at a reading width
   ============================================================ */
main.docs-page{max-width:900px;gap:var(--space-lg)}
article h1{font-size:clamp(28px,4.5vw,38px);margin:0 0 var(--space-md)}
article h2{font-size:1.4rem;margin:var(--space-xl) 0 var(--space-sm)}
article h3{font-size:1.05rem;margin:var(--space-xl) 0 var(--space-xs)}
article p,article pre,article .tbl{margin:var(--space-lg) 0}
article ol,article ul{padding-left:1.4em}
article li{margin:var(--space-xs) 0}
article blockquote{margin:var(--space-lg) 0;padding:var(--space-md) var(--space-lg);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-sunken)}
article blockquote p{margin:0}
article .tbl{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-md)}
article .tbl tr:last-child>td{border-bottom:0}
article td:first-child{white-space:nowrap}
/* A walkthrough step's change: the file, then each line, the added ones
   on the success tint. */
pre.diff{padding:0;white-space:pre}
pre.diff span{display:block;padding:0 var(--space-lg)}
pre.diff .file{background:var(--surface-sunken);color:var(--muted);padding-top:2px;padding-bottom:2px;border-bottom:1px solid var(--line)}
pre.diff .add{background:var(--tint-success)}
pre.diff .ctx{color:var(--muted)}

/* ============================================================
   Testing report (/testing/, xtask/src/pages/render/): a status
   line, a row of headline figures, then section tabs; each section
   opens from a summary into the specifics (area > group > test,
   crate > file, target > scenarios, screen > shapes)
   ============================================================ */
.intro{display:flex;flex-direction:column;gap:var(--space-sm)}
.intro h1{font-size:clamp(28px,4.5vw,42px)}
.intro .lead{color:var(--muted);max-width:68ch}
.runline{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;margin-top:var(--space-sm);font-size:13px}
.pill{display:inline-flex;align-items:center;gap:var(--pill-gap);padding:var(--pill-pad-y-roomy) var(--pill-pad-x-roomy);border-radius:999px;border:1px solid var(--line);background:var(--paper-raised);font-weight:700;white-space:nowrap;font-size:13px}
.pill.ok{background:var(--tint-success);border-color:color-mix(in srgb,var(--success) 40%,var(--line))}
.pill.ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success)}

.figs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-md)}
.fig{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-lg);display:flex;flex-direction:column;gap:2px;min-width:0}
.fig .k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fig .v{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fig .s{font-size:13px;color:var(--muted)}
.fig .meter{margin-top:6px}
.meter{height:6px;border-radius:999px;background:var(--surface-sunken);overflow:hidden;display:flex}
.meter i{display:block;height:100%;background:var(--accent)}
.meter i.skip{background:var(--line-strong)}
.meter.ok i{background:var(--success)}

section.view{display:flex;flex-direction:column;gap:var(--space-xl)}
.vhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--space-lg)}
.vhead h2{font-size:22px}
.vhead h2.sub{font-size:18px}
.vhead p{color:var(--muted);max-width:72ch;margin-top:var(--space-xs)}
.tag{font-size:11px;font-weight:700;padding:var(--pill-pad-y) var(--pill-pad-x);border-radius:999px;background:var(--surface-sunken);color:var(--muted);white-space:nowrap}

/* one chevron for every expander: a rotated square corner, so it pivots on its own centre */
.tree summary::before{content:"";display:inline-block;flex:none;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.tree details[open]>summary::before{transform:rotate(45deg)}

/* overview areas */
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.area{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-lg);background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);min-width:0}
.area:hover{border-color:var(--line-strong)}
.area:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.area .t{display:flex;justify-content:space-between;gap:var(--space-sm);align-items:baseline}
.area h3{font-size:16px}
.area .n{font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent-text);white-space:nowrap}
.area p{font-size:13px;color:var(--muted)}
.area ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:13px}
.area li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area li::before{content:"✓";color:var(--success);margin-right:6px;font-weight:800}
.area-tree:target>summary{background:var(--tint-hover)}
.suites{display:flex;gap:4px;flex-wrap:wrap}

/* tests explorer */
.filters{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}
.search{flex:1 1 260px;min-width:0;display:flex}
.search input{flex:1;min-width:0;font:inherit;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--paper-raised);color:var(--ink)}
.chip{all:unset;cursor:pointer;padding:var(--pill-pad-y) var(--pill-pad-x);border:1px solid var(--line);border-radius:999px;background:var(--paper-raised);font-size:13px;font-weight:700;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg{display:inline-flex;max-width:100%;border:1px solid var(--line);border-radius:var(--radius-md);overflow-x:auto;background:var(--paper-raised)}
.seg button{all:unset;cursor:pointer;padding:6px 12px;font-size:13px;font-weight:700;color:var(--muted)}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fpanel{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg);background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg)}
.frow{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--space-md);align-items:center}
.frow>span{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.frow+.frow{padding-top:var(--space-md);border-top:1px solid var(--line)}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;justify-content:space-between}
.toolbar .grp{display:flex;gap:var(--space-sm);flex-wrap:wrap;align-items:center}

/* grouped tree: name | tests | time in fixed columns, headed once */
.tree{display:flex;flex-direction:column}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px;gap:var(--space-md);align-items:center}
.treehead{padding:8px var(--space-lg) 8px 46px;border-bottom:1px solid var(--line);font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.treehead span:not(:first-child),.tree .cnt,.tree .tim{text-align:right}
.tree details{border-top:1px solid var(--line)}
.tree>details:first-of-type{border-top:0}
.tree summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:12px var(--space-lg)}
.tree summary::-webkit-details-marker{display:none}
.tree summary .cols{flex:1;min-width:0}
.tree summary .nm{font-weight:700;min-width:0;overflow-wrap:anywhere}
.tree .cnt{font-weight:800;font-variant-numeric:tabular-nums}
.tree .tim{font:12px var(--font-mono);color:var(--muted);white-space:nowrap}
.tree .mods{padding:0 var(--space-lg) var(--space-md) 38px;display:flex;flex-direction:column}
.tree .mods details{border:0;border-top:1px dashed var(--line)}
.tree .mods details:first-child{border-top:0}
.tree .mods summary{padding:7px 8px;margin:0 -8px;border-radius:var(--radius-sm)}
.tree summary:hover{background:var(--tint-hover)}
.tree .mods summary .nm{font:600 13px var(--font-mono)}
.tlist{margin:0 0 var(--space-sm) 21px;padding:0;list-style:none;display:flex;flex-direction:column}
.tlist li{display:grid;grid-template-columns:16px minmax(0,1fr) 92px;gap:var(--space-md);padding:5px 0;border-bottom:1px dashed var(--line);font-size:13.5px;align-items:baseline}
.tlist li:last-child{border-bottom:0}
.st{font-weight:800;color:var(--success)}
.st.skipped{color:var(--warning)}
.st.failed{color:var(--error)}
.tlist .tim{text-align:right}
.tlist .label+.tag{margin-left:6px}
.raw{display:block;font:11px var(--font-mono);color:var(--muted);overflow-wrap:anywhere}
.desc{display:block;font-size:12.5px}
.empty,.unavail{padding:var(--space-xl);color:var(--muted)}

/* the report's tables: rows centred on their meters */
.tbl td,.tbl th{vertical-align:middle}
.covcell{display:flex;align-items:center;gap:var(--space-sm);min-width:160px}
.covcell .meter{flex:1;height:8px}
.covcell b{width:52px;text-align:right;font-variant-numeric:tabular-nums}
.files{padding:var(--space-md) var(--space-lg) var(--space-lg)}
.files.obs{padding:var(--space-lg)}
.files table{font-size:13px}
.files td{padding:5px var(--space-sm)}
.files td:first-child{font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere}
.lowtag{font-size:11px;font-weight:700;padding:var(--pill-pad-y) var(--pill-pad-x);border-radius:999px;background:var(--tint-warning)}
.table-note{padding:var(--space-md) var(--space-lg)}
/* coverage: crate | lines | covered / total | branches, the files inside each crate */
.ccols{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,1.1fr) 130px 76px;gap:var(--space-md);align-items:center}
.ccols .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cov summary .ccols{flex:1;min-width:0}
.cov .treehead span:not(:first-child){text-align:right}
.cov .treehead span:nth-child(2){text-align:left}
.cov .row{padding:12px var(--space-lg) 12px 46px;border-top:1px solid var(--line)}
.cov .grp{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--paper);padding:8px var(--space-lg);border-top:1px solid var(--line)}

/* key figures inside a tab: the label carries the context, the value stays short */
.kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md);margin:0}
.kv div{padding:var(--space-md) var(--space-lg);background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-md);min-width:0}
.kv dt{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kv dd{margin:0;font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kv dd small{font-weight:600;font-size:12px;color:var(--muted)}

/* properties */
.read{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-xl);align-items:start}
.read h3{font-size:15px;margin-bottom:var(--space-sm)}
.read p{font-size:14px;color:var(--muted)}
.read p+p{margin-top:var(--space-sm)}
.example{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);background:var(--paper);font-size:13.5px}
.example .obsrow{padding:2px 0}
.example .ann{margin-top:var(--space-sm);display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--space-md);font-size:12.5px;color:var(--muted)}
.example .ann b{color:var(--ink);font-weight:700}
.obs{display:flex;flex-direction:column;gap:var(--space-xl)}
.obs h3{font-size:15px;margin-bottom:var(--space-sm)}
.obs p.why{font-size:13px;color:var(--muted);margin:2px 0 var(--space-sm)}
.why.after{margin-top:8px}
.obshead,.obsrow{display:grid;grid-template-columns:minmax(0,1fr) 110px 62px 54px;gap:var(--space-sm);align-items:center}
.obshead{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-bottom:4px;border-bottom:1px solid var(--line);margin-bottom:2px}
.obshead span:nth-child(n+3),.obsrow .r{text-align:right;font-variant-numeric:tabular-nums}
.obsrow{font-size:13.5px;padding:3px 0}
.obsrow .meter{height:7px}
.obsrow .r{color:var(--muted);font-size:12.5px}
.obsrow .r.n{color:var(--ink);font-weight:700}
.legend{display:flex;gap:var(--space-lg);flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span::before{content:"";display:inline-block;width:10px;height:7px;border-radius:2px;background:var(--accent);margin-right:6px;vertical-align:middle}
.legend span.sk::before{background:var(--line-strong)}
.callout{display:flex;gap:var(--space-md);padding:var(--space-lg);border-radius:var(--radius-md);background:var(--surface-sunken);font-size:14px}
.callout b{white-space:nowrap}

/* load */
.chart{padding:var(--space-xl)}
.chart h3{font-size:15px;margin-bottom:4px}
.chart>p{margin-bottom:12px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart text{fill:var(--muted);font:12px var(--font-ui)}
.chart .lbl{fill:var(--ink);font-weight:800}
.chart .axis{stroke:var(--line)}
.chart .gridline{stroke:var(--line);stroke-dasharray:2 4}
.chart .barfill{fill:var(--accent)}
.strip{display:flex;align-items:flex-end;gap:3px;height:56px}
.strip i{flex:1;min-width:6px;background:var(--line-strong);border-radius:2px 2px 0 0}
.strip i.f{background:var(--accent)}
.faults{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.fault{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-lg)}
.fault h3{font-size:15px;margin-bottom:var(--space-sm)}
.fault p{font-size:13px;color:var(--muted)}
.fault dl{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:2px var(--space-md);margin:0;font-size:13px}
.fault dt{color:var(--muted)}
.fault dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.fault .cap{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.next{border:1px dashed var(--line-strong);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm)}
.next h3{font-size:16px}
.next p{font-size:14px;color:var(--muted)}

/* gallery */
.gallery{display:flex;flex-direction:column;gap:32px}
.gsec{display:flex;flex-direction:column;gap:var(--space-md)}
.gsec h3{font-size:17px;display:flex;align-items:baseline;gap:var(--space-sm)}
.gsec h3 span{font-size:13px;font-weight:600;color:var(--muted)}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-md)}
.gallery[data-device="phone"] .ggrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.gcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:0}
.gcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-md)}
.gcard .frame{position:relative;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-sunken);aspect-ratio:16/11}
.gcard .frame.phone{aspect-ratio:9/17}
/* Which picture a card shows: the device's frame, in the theme picked (auto follows the reader's scheme). */
.gallery[data-device="main"] .frame.phone,.gallery[data-device="phone"] .gcard[data-phone] .frame.main{display:none}
.gallery[data-device="main"] .nophone{display:none}
.gallery[data-theme="light"] .frame img.dark:not(:only-child),.gallery[data-theme="dark"] .frame img.light:not(:only-child),.gallery[data-theme="auto"] .frame img.dark:not(:only-child){display:none}
/* As specific as the rule above, or a dark reader sees neither picture. */
@media (prefers-color-scheme:dark){.gallery[data-theme="auto"] .frame img.dark:not(:only-child){display:block}.gallery[data-theme="auto"] .frame img.light:not(:only-child){display:none}}
.gallery[data-theme="both"] .frame{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.gcard img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;max-width:100%}
.gcard:hover .frame{border-color:var(--line-strong)}
.gcard .nm{font-size:13.5px;font-weight:700}
.gcard .meta{font-size:12px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dot{width:7px;height:7px;border-radius:50%;background:var(--success);display:inline-block}

dialog.viewer{border:0;padding:0;background:transparent;max-width:min(1200px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);color:var(--ink)}
dialog.viewer::backdrop{background:var(--scrim)}
.vbox{background:var(--paper-raised);border-radius:var(--radius-lg);display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden}
.vtop{display:flex;justify-content:space-between;gap:var(--space-md);align-items:flex-start;padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--line);flex-wrap:wrap}
.vtop h3{font-size:18px}
.vtop p{font-size:13px;color:var(--muted);margin-top:2px}
.vtop .grp{display:flex;gap:var(--space-sm)}
.vtools{display:flex;gap:var(--space-sm);flex-wrap:wrap;padding:var(--space-md) var(--space-xl);border-bottom:1px solid var(--line);align-items:center}
.vimg{overflow:auto;padding:var(--space-lg);background:var(--surface-sunken);display:flex;gap:var(--space-lg);justify-content:center;align-items:flex-start;flex:1;min-height:200px}
.vimg figure{margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.vimg img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-raised)}
.vimg figcaption{font-size:12px;color:var(--muted);text-align:center}
.vimg img.pending{filter:blur(3px)}
.vimg figcaption .ld{color:var(--accent-text);font-weight:700}
@media (prefers-reduced-motion:no-preference){.vimg img{transition:filter .2s}}
.vfoot{display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) var(--space-xl);font-size:13px;color:var(--muted);flex-wrap:wrap;align-items:center}

.foot{color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:var(--space-lg)}

@media (max-width:980px){.figs{grid-template-columns:repeat(3,minmax(0,1fr))}.areas,.faults{grid-template-columns:repeat(2,minmax(0,1fr))}.kv{grid-template-columns:repeat(2,minmax(0,1fr))}.read{grid-template-columns:minmax(0,1fr)}}
@media (max-width:680px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}.fig:first-child{grid-column:span 2}.areas,.faults{grid-template-columns:minmax(0,1fr)}
  .frow{grid-template-columns:minmax(0,1fr);gap:6px}
  .seg button{padding:6px 9px}.obshead,.obsrow{grid-template-columns:minmax(0,1fr) 64px 54px 44px}.fig .v{font-size:24px}.cols{grid-template-columns:minmax(0,1fr) 64px 72px}.tlist li{grid-template-columns:16px minmax(0,1fr) 72px}.treehead{padding-left:38px}
  .ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery[data-device="phone"] .ggrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ccols{grid-template-columns:minmax(0,1fr) minmax(90px,1fr) 64px}.ccols>:nth-child(3){display:none}.cov .row{padding-left:var(--space-lg)}}
@media (prefers-reduced-motion:reduce){.tree summary::before{transition:none}}