/* Suppress source-language content until the selected dictionary projection is ready. */
html[data-active-dictionary="de"][data-dictionary-page="pending"] #entry-content,
html[data-active-dictionary="de"][data-dictionary-page="pending"] main > .detail-card{visibility:hidden}
.dictionary-context-notice{border:1px solid var(--rule);border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));padding:1rem;margin-block:1rem;font-size:1rem;line-height:1.55}
.context-sense{border-bottom:1px solid var(--rule);padding:.6rem 0}.context-sense:first-child{padding-top:0}.context-sense p{margin:.35rem 0;line-height:1.6;font-size:1rem}.dictionary-character{min-width:0}.dictionary-character .word-identity h1,.dictionary-character .word-identity h2{font-size:clamp(3.5rem,7vw,6rem)}.dictionary-character .reading small{display:block;margin-top:.5rem}.dictionary-character .catalog-record-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:.65rem}.dictionary-character .detail-card{min-width:0}.dictionary-character .pack-head-links{display:flex;flex-wrap:wrap;gap:.6rem}.dictionary-character .context-sense a{overflow-wrap:anywhere}

/* The initial HTML preview belongs to English; wait for a German projection. */
html[data-active-dictionary="de"] #collection-entry:not([data-dictionary="de"]),
html[data-active-dictionary="de"] #field-fallback:not([data-dictionary="de"]),
html[data-active-dictionary="de"] #collection-word-list:not([data-dictionary="de"]){visibility:hidden}

/* ── zimai 0.17 rendered-audit repairs ─────────────────────────────────────────
   Found in a real Chromium render at 320–1440 px (RENDERED-QA-0.17.0.md). This block
   loads last on every static and server-rendered page; keep rules narrow and named. */

/* Search: the bar is the focus indicator; the field inside must not draw a second ring. */
html body .search-form input:focus-visible{outline:none}
html body .search-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 0 4px var(--tint)}
@media (forced-colors:active){html body .search-form:focus-within{outline:2px solid Highlight;outline-offset:2px}}

/* Main navigation: when it scrolls sideways, fade the trailing edge so hidden items are evident. */
.site-nav[data-overflow]:not([data-at-end]){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}

/* Graph controls: selects wrap to a new line instead of truncating their own labels. */
.connection-controls-row{flex-wrap:wrap}
.connection-controls-row>.connection-group-label{flex:1 1 13rem}
.connection-controls-row>label:not(.connection-group-label){flex:0 0 auto}
.connection-controls-row>label:not(.connection-group-label) select{width:auto;min-width:9.5rem}
/* iOS zooms into form controls below 16 px. Selects were 11–14 px on touch; text inputs keep
   their own (larger) sizes, so only selects are raised. */
@media (pointer:coarse){html body select{font-size:16px}}

/* Legibility floor: uppercase labels ≥11 px, metadata ≥12 px, translations ≥15 px. */
html body :is(.section-tag,.eyebrow,.exact-eyebrow),html body :is(.collection-heading,.sentence-reader-top) .section-tag{font-size:11px}
html body .search-recents>span:first-child{font-size:11px}
html body .field-notes,html body .field-notes :is(p,a,strong,small),html body .network-actions :is(a,span),html body .connection-status{font-size:12px}
html body .depth-facts dt a,html body .classical-provenance dt,html body .reading-guide summary small,html body .entry-provenance,html body .entry-provenance :is(a,b,summary){font-size:12px}
html body .sentence-result-language{font-size:12px}
html body .tone-syllable small,html body .tone-card-heading span,html body .dictionary-reading-value small,html body .connection-export :is(span,button),html body .field-zoom output{font-size:11px}
html body .field-corner-label small{font-size:10px}
html body .mini-word>span:nth-child(3),html body .lexical-characters dd{font-size:15px;line-height:1.45}

/* Character identity facts: the label column fits "Cantonese" with a real gap. */
html body .identity-facts>div,html body .identity-facts>div:last-child{grid-template-columns:minmax(5.6rem,max-content) minmax(0,1fr);column-gap:12px}

/* Internal module versions are not reader information (baked into older static pages). */
.connection-version{display:none}

/* Inline sample queries read as links, without button padding before punctuation. */
html body .search-empty button[data-search-sample]{display:inline;min-height:0;margin:0;padding:0;border:0;background:none;color:var(--accent);font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}

/* Empty search: one clear message with explicit alternatives. */
.search-none{margin:14px 0;padding:14px 16px;border:1px solid var(--rule);border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));border-radius:6px;background:var(--white)}
.search-none p{margin:0 0 6px;font-size:15px;line-height:1.55}.search-none p:last-child{margin:0}

/* Other varieties: reference-only guides collapse to compact rows instead of tall empty boxes. */
html body .reading-guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:6px}
html body .reading-guide>summary{padding-block:6px}
html body .reading-guide>summary small{display:inline;margin-left:.45em}

/* Lists: the standing storage notice stays in flow; only a fresh status follows the viewport. */
#study-notice{position:static}
#study-notice[data-fresh]{position:sticky}

/* Split workspace on wide screens: fill the viewport below the sticky search bar, so the
   graph is not squeezed to ~200 px. The page scrolls once to bring it fully into view. */
@media (min-width:851px){.collection-app{height:max(560px,calc(100dvh - var(--search-bar-height,150px) - 16px))}}
/* Wide split view: the selected-node summary repeats the dictionary pane, so it takes one line
   (76 → 46 px returned to the map). The remaining toolbar stack needs a controls redesign (Z-014). */
@media (min-width:851px){
 .collection-app .network-summary{padding-block:5px;min-height:0}
 .collection-app .network-summary [data-network-focus]{font-size:26px;line-height:1.1}
 .collection-app .network-summary>div>div{display:flex;align-items:baseline;gap:.6em;min-width:0}
 .collection-app .network-summary [data-network-gloss]{margin:0;max-height:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
/* Best-match block (search): headword and reading on one line, the definition at full width
   beneath, a plain label for why it matched. Works from a 280 px pane to a full page. */
html body a.exact-result.best-match{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"why arrow" "head head" "gloss gloss" "source source";gap:2px 12px;align-items:baseline;padding:12px 16px 13px;margin:10px 0 16px;border:1px solid var(--rule);border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));border-radius:8px;background:var(--white);color:var(--ink);text-decoration:none}
html body a.exact-result.best-match .best-match-why{grid-area:why;font-size:12px;letter-spacing:.01em;color:var(--muted)}
html body a.exact-result.best-match .best-match-arrow{grid-area:arrow;color:var(--accent)}
html body a.exact-result.best-match .best-match-head{grid-area:head;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;min-width:0;margin-top:2px}
html body a.exact-result.best-match .exact-glyph{font-size:clamp(34px,9vw,46px);line-height:1.15;max-width:none;overflow-wrap:anywhere}
html body a.exact-result.best-match .best-match-reading{font:500 19px/1.3 var(--sans);color:var(--accent)}
html body a.exact-result.best-match .best-match-gloss{grid-area:gloss;font:400 17px/1.5 var(--sans);margin-top:4px;overflow-wrap:anywhere}
html body a.exact-result.best-match .best-match-source{grid-area:source;font-size:12px;color:var(--muted);margin-top:4px}
html body a.exact-result.best-match mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-underline-offset:.18em}
@media (hover:hover) and (pointer:fine){html body a.exact-result.best-match:hover{background:var(--ui-hover,var(--white));box-shadow:inset 0 0 0 1px var(--accent)}}
/* Result-type tabs scroll sideways in narrow panes instead of wrapping one tab onto a new row. */
html body #collection-search-results .search-type-tabs,html body .search-type-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
html body .search-type-tabs::-webkit-scrollbar{display:none}
html body .search-type-tabs>a{flex:0 0 auto;white-space:nowrap}
html body a.exact-result.best-match>span:not(.best-match-arrow),html body a.exact-result.best-match .exact-glyph{color:var(--ink)}
html body a.exact-result.best-match>.best-match-why,html body a.exact-result.best-match>.best-match-source{color:var(--muted)}
/* In narrow panes a long multi-sense gloss (e.g. 水) stops after four lines; the entry has it all. */
@media (max-width:600px){html body a.exact-result.best-match .best-match-gloss{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}}
@container dictionary (max-width:520px){html body a.exact-result.best-match .best-match-gloss{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}}