/* Gemeinsames Stylesheet der Prognoseseiten (Traunsee, Mondsee) */
:root {
  --bg: #f6f7f9; --surface: #ffffff; --border: #dfe3e8; --text: #1b1f24; --muted: #5f6873;
  --accent: #1f7ae0; --grid: rgba(0,0,0,.07); --grid-strong: rgba(0,0,0,.28);
  --night: rgba(30,45,80,.07); --night-strong: rgba(30,45,80,.15); --day: rgba(240,170,40,.10);
  --ir: #2fa7e0; --tg: #8a9099; --thr: #e5484d; --okta: #1b1f24;
  --cl-h: #c3cfdf; --cl-m: #7f93ad; --cl-l: #3d4c63;
  --cloud-rgb: 60,70,85;
  --good: #1f9d55; --mid: #d99a1e; --bad: #9aa3ad; --now: #e5484d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101317; --surface: #181c22; --border: #2b313a; --text: #e6e9ed; --muted: #98a2ae;
    --accent: #5aa2f0; --grid: rgba(255,255,255,.07); --grid-strong: rgba(255,255,255,.3);
    --night: rgba(120,150,220,.08); --night-strong: rgba(120,150,220,.17); --day: rgba(240,170,40,.10);
    --ir: #5cc4f2; --tg: #9aa1ab; --thr: #ff6b6f; --okta: #e6e9ed;
    --cl-h: #4a5568; --cl-m: #7f93ad; --cl-l: #c3cfdf;
    --cloud-rgb: 205,215,230;
    --good: #3ccb7f; --mid: #f0b440; --bad: #6b7480; --now: #ff6b6f;
  }
}
:root[data-theme="dark"] {
  --bg: #101317; --surface: #181c22; --border: #2b313a; --text: #e6e9ed; --muted: #98a2ae;
  --accent: #5aa2f0; --grid: rgba(255,255,255,.07); --grid-strong: rgba(255,255,255,.3);
  --night: rgba(120,150,220,.08); --night-strong: rgba(120,150,220,.17); --day: rgba(240,170,40,.10);
  --ir: #5cc4f2; --tg: #9aa1ab; --thr: #ff6b6f; --okta: #e6e9ed;
  --cl-h: #4a5568; --cl-m: #7f93ad; --cl-l: #c3cfdf;
  --cloud-rgb: 205,215,230;
  --good: #3ccb7f; --mid: #f0b440; --bad: #6b7480; --now: #ff6b6f;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; }
h1 { font-size: 1.45rem; margin: 0 0 2px; letter-spacing: -.01em; }
.sub { color: var(--muted); margin: 0 0 16px; font-size: .92rem; }
/* Modellauswahl haftet ab dem Abschnitt Modellprognose am oberen Rand */
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px;
  position: sticky; top: 0; z-index: 30; background: var(--bg); padding: 8px 0; }
@media (max-width: 640px) {
  /* mobil eine seitlich wischbare Zeile ohne Untertitel; Abrufzeit ausgeblendet, „Aktualisieren" bleibt */
  .bar { flex-wrap: nowrap; }
  .bar .seg { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bar .seg::-webkit-scrollbar { display: none; }
  .bar .seg button { white-space: nowrap; flex: none; }
  .bar .seg button small { display: none; }
  .bar .tools { margin-left: 0; flex: none; }
  .bar .tools #fetched { display: none; }
}
.seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px; }
.seg button { border: 0; background: transparent; color: var(--text); padding: 6px 11px; border-radius: 7px;
  cursor: pointer; font: inherit; font-size: .9rem; line-height: 1.2; text-align: left; }
.seg button small { display: block; color: var(--muted); font-size: .72rem; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.seg button[aria-pressed="true"] small { color: rgba(255,255,255,.85); }
.tools { margin-left: auto; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .82rem; }
.tools button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; font: inherit; font-size: .85rem; }
.status { color: var(--muted); font-size: .85rem; min-height: 1.2em; margin-bottom: 8px; }
.status.err { color: var(--thr); }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
.day { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.day h3 { margin: 0 0 6px; font-size: .9rem; font-weight: 600; }
.ix { display: flex; align-items: baseline; gap: 6px; font-size: .85rem; margin-top: 4px; }
.ix b { font-variant-numeric: tabular-nums; min-width: 2ch; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; transform: translateY(1px); }
.ix .why { display: block; color: var(--muted); font-size: .74rem; margin: 1px 0 0 15px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 10px 4px; margin-bottom: 10px; }
.card h2 { font-size: .85rem; font-weight: 600; margin: 2px 4px 2px; color: var(--muted); }
.chart { position: relative; width: 100%; }
.h-cloud { height: 240px; } .h-dp { height: 290px; } .h-wind { height: 230px; }
table.cmp { border-collapse: collapse; width: 100%; font-size: .82rem; }
.cmpwrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; }
table.cmp th, table.cmp td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
table.cmp th { color: var(--muted); font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; font-variant-numeric: tabular-nums; }
details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-top: 14px; }
details summary { cursor: pointer; font-weight: 600; }
details p, details li { color: var(--text); font-size: .9rem; }
.legend-line { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 5px; border-radius: 2px; }
footer { color: var(--muted); font-size: .78rem; margin-top: 18px; }
h2.sec { font-size: 1.1rem; margin: 22px 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
h2.sec small { color: var(--muted); font-weight: 400; font-size: .8rem; }
.hint { background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; color: var(--muted); font-size: .88rem; }
.season { background: var(--surface); border: 1px solid var(--mid); border-radius: 10px; padding: 8px 12px; color: var(--mid); font-size: .88rem; margin-bottom: 10px; }
.nc { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-bottom: 10px; }
.nc .card { padding: 12px 14px; margin: 0; }
.nc-head { display: flex; align-items: center; gap: 10px; }
.nc-score { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.nc-title { font-weight: 600; }
.nc-title small { display: block; color: var(--muted); font-weight: 400; font-size: .78rem; }
.nc-status { margin: 8px 0 2px; font-size: .86rem; }
.nc-status.run { color: var(--good); font-weight: 600; }
.nc-when { margin: 0 0 4px; font-size: .84rem; color: var(--accent); font-weight: 600; }
.ix .why.when { color: var(--accent); font-weight: 600; }
.fac { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 2px 10px; align-items: center; font-size: .8rem; margin-top: 8px; }
.fac .lab b { font-weight: 600; }
.fac .lab span { display: block; color: var(--muted); font-size: .74rem; overflow-wrap: anywhere; }
.fac .barw { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.fac .barw i { display: block; height: 100%; background: var(--accent); }
.note { font-size: .78rem; color: var(--mid); margin-top: 6px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: .8rem; }
.tile.stale { opacity: .55; }
.tile h4 { margin: 0 0 4px; font-size: .84rem; }
.tile h4 small { color: var(--muted); font-weight: 400; }
.tile .big { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile .wind { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.tile .meta { color: var(--muted); font-size: .72rem; }
.tile .tag { color: var(--mid); font-weight: 600; }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 10px; }
.fig { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: .8rem; }
.fig b.v { font-size: 1.15rem; font-variant-numeric: tabular-nums; display: block; }
.fig code { font-size: .74rem; overflow-wrap: anywhere; display: block; color: var(--muted); }
.strip { overflow-x: auto; }
.strip table { border-collapse: separate; border-spacing: 2px; font-size: .7rem; }
.strip th { text-align: left; font-weight: 600; color: var(--muted); padding-right: 6px; white-space: nowrap; }
.strip td { width: 26px; min-width: 26px; text-align: center; padding: 3px 0; border-radius: 3px; font-variant-numeric: tabular-nums; }
.strip td.now { outline: 2px solid var(--now); }
.h-live { height: 210px; }
.strip tr.sat th { color: var(--accent); font-weight: 500; padding-left: 10px; }
.strip tr.sat td.has { box-shadow: inset 0 -2px 0 var(--accent); }
.map { height: 480px; border-radius: 8px; background: var(--border); position: relative; isolation: isolate; }
.map .plabel { display: inline-block; color: #111; font: 600 11px/16px system-ui, sans-serif; white-space: nowrap;
  text-shadow: 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff; padding: 0 2px; }
.wicon { background: transparent; border: 0; }
.wmark { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,.88); color: #1b1f24; border-radius: 9px;
  padding: 1px 6px 1px 3px; font: 600 11px/14px system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.wmark svg { display: block; }
.wmark.faint { opacity: .45; }
.mapnote { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 1200; background: var(--surface);
  color: var(--thr); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; font-size: .8rem; }
.satbar { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 4px 4px 8px; font-size: .8rem; }
.satbar .grp { display: flex; gap: 4px; align-items: center; }
.satbar .grp > span { color: var(--muted); margin-right: 3px; }
.satbar button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 7px; padding: 4px 9px; cursor: pointer; font: inherit; }
.satbar button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.satbar input[type="range"] { width: 90px; }
.satbar .chk { gap: 5px; cursor: pointer; }
.satbar .chk input { margin: 0; accent-color: var(--accent); }
.tbar { margin: 8px 4px 2px; }
.tscale { height: 7px; border-radius: 4px; margin: 0 38px 3px; background: var(--border); }
.trow { display: flex; gap: 6px; align-items: center; }
.trow input[type="range"] { flex: 1; min-width: 0; margin: 0; }
.trow button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 7px; padding: 2px 8px; cursor: pointer; font: inherit; }
.tlabel { font-size: .85rem; font-weight: 600; margin: 4px 4px 0; min-height: 1.3em; }
.tlabel.err { color: var(--thr); }
/* Wetterstreifen: Silhouette der Region mit Symbolen und Temperatur je Modellpunkt; Tag, Dämmerung und Nacht nach Sonnenstand */
/* Höhe folgt der Breite (Seitenverhältnis der Silhouette 1000 : 190); schmaler als 1000 px bleibt die Mindesthöhe, die Silhouette sitzt unten und darüber ist Himmel */
.pano .scene { position: relative; width: 100%; height: auto; aspect-ratio: 1000 / 190; min-height: 190px; border-radius: 8px; overflow: hidden; background: var(--sky);
  --sky: linear-gradient(#86c1ef, #dcedf9 72%); --sky-mtn: #8498b0; --sky-rock: #c3cbd4; --sky-rock-line: rgba(50,60,75,.35); --sky-shade: rgba(30,40,55,.22);
  --sky-hill: #5c9454; --sky-land: #b4cf8c; --sky-lake: #2d8fdc; --sky-wave: rgba(255,255,255,.45);
  --bldg-wall: #f6f2ea; --bldg-roof: #8b4a3c; --villa: #e9c55f; --villa-light: #f3dc8c; --villa-roof: #6f6a63; --win: #7a6a50; --star: transparent;
  --pano-text: #1b1f24; --pano-halo: rgba(255,255,255,.85); }
.pano .scene.dusk { --sky: linear-gradient(#2d3d72, #b86a5e 58%, #f2b06a 100%); --sky-mtn: #4b4868; --sky-rock: #7b7088; --sky-rock-line: rgba(0,0,0,.3); --sky-shade: rgba(20,20,40,.35);
  --sky-hill: #35503e; --sky-land: #6d7a52; --sky-lake: #5a6ca2; --sky-wave: rgba(255,200,140,.5);
  --bldg-wall: #d9d0c1; --bldg-roof: #5e342c; --villa: #c9a452; --villa-light: #e0c070; --villa-roof: #4e4a44; --win: #ffd27a; --star: rgba(232,238,252,.5);
  --pano-text: #fff; --pano-halo: rgba(0,0,0,.6); }
.pano .scene.night { --sky: linear-gradient(#060b1c, #182642 70%); --sky-mtn: #1d2739; --sky-rock: #2c374c; --sky-rock-line: rgba(0,0,0,.45); --sky-shade: rgba(0,0,10,.45);
  --sky-hill: #12221a; --sky-land: #1c2a20; --sky-lake: #0c2040; --sky-wave: rgba(190,210,255,.22);
  --bldg-wall: #8a877f; --bldg-roof: #42282a; --villa: #6b5a30; --villa-light: #7d6a3c; --villa-roof: #2f2c29; --win: #ffd27a; --star: #e8eefc;
  --pano-text: #fff; --pano-halo: rgba(0,0,0,.7); }
.pano .scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pano .mtn { fill: var(--sky-mtn); } .pano .hill { fill: var(--sky-hill); } .pano .lake { fill: var(--sky-lake); } .pano .land { fill: var(--sky-land); }
.pano .mtn.far { opacity: .8; } .pano .mtn.rock { fill: var(--sky-rock); } .pano .ridge { stroke: var(--sky-rock-line); stroke-width: 1.5; } .pano .mtn.rock.shade { fill: var(--sky-shade); }
.pano .wave { stroke: var(--sky-wave); fill: none; }
.pano .river { stroke: var(--sky-lake); }
.pano .stars circle { fill: var(--star); }
.pano .church .wall { fill: var(--bldg-wall); } .pano .church .roof { fill: var(--bldg-roof); } .pano .church .cross { stroke: #5a3a30; stroke-width: 1.5; }
.pano .villa .main, .pano .villa .wing { fill: var(--villa); } .pano .villa .portico { fill: var(--villa-light); } .pano .villa .roof { fill: var(--villa-roof); } .pano .villa .column { stroke: #b89a45; stroke-width: 1.4; }
.pano .saline .hall { fill: var(--bldg-wall); } .pano .saline .hall.low { fill: var(--villa-light); } .pano .saline .hallroof { fill: var(--villa-roof); }
.pano .saline .stack { fill: #8a6a52; } .pano .saline .smoke { fill: #e9edf2; } .pano .scene.night .saline .smoke, .pano .scene.dusk .saline .smoke { fill: #6c7482; }
.pano .castle .wall { fill: var(--bldg-wall); } .pano .castle .roof { fill: var(--villa-roof); }
.pano .win { fill: var(--win); }
.pano .bldg .wall { fill: var(--bldg-wall); } .pano .bldg .roof { fill: var(--bldg-roof); } .pano .bldg .tower { fill: var(--villa-light); } .pano .bldg .spire { fill: var(--villa-roof); }
.pano .bridge .deck { stroke: #7a5a45; stroke-width: 2.4; fill: none; } .pano .bridge .pier { stroke: #7a5a45; stroke-width: 1.6; fill: none; }
.pano .bridge.wood .deck { stroke: #a07a55; stroke-width: 2; } .pano .bridge.wood .pier { stroke: #a07a55; stroke-width: 1.2; }
.pano .scene.night .win, .pano .scene.dusk .win { filter: drop-shadow(0 0 2px #ffd27a); }
.pano .pts { position: absolute; inset: 0; pointer-events: none; }
.pano .pt { position: absolute; top: 8px; bottom: 6px; transform: translateX(-50%); text-align: center; width: 90px; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; }
.pano .name { margin-top: auto; }  /* Ortsname immer ganz unten */
.pano .sym svg { width: 46px; height: 46px; display: block; margin: 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.pano .sym .none { display: block; height: 46px; line-height: 46px; font-size: 1.2rem; color: #fff; }
.pano .s-sun { fill: #f6b321; stroke: #f6b321; } .pano .s-moon { fill: #f1e8b8; }
.pano .s-cloud { fill: #f5f7fa; stroke: #b8c2cc; stroke-width: 1.2; }
.pano .s-fog { stroke: #d5dce3; } .pano .s-rain { stroke: #3d8de0; } .pano .s-snow { stroke: #e9f2fb; }
.pano .tmp { font-size: 1.15rem; font-weight: 700; color: var(--pano-text); text-shadow: 0 0 3px var(--pano-halo), 0 1px 2px var(--pano-halo); font-variant-numeric: tabular-nums; }
.pano .name { font-size: .72rem; color: var(--pano-text); text-shadow: 0 0 3px var(--pano-halo); white-space: nowrap; }
/* Modellwind an der Düse: Pfeil entlang der Seeachse (links = nach Norden), Grundwind | Böen */
.pano .wnd { display: flex; align-items: center; justify-content: center; gap: 4px; height: 18px; font-size: .74rem; font-weight: 600;
  color: var(--pano-text); text-shadow: 0 0 3px var(--pano-halo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pano .wnd:empty { display: none; }
.pano .wnd svg { width: 18px; height: 18px; filter: drop-shadow(0 0 2px var(--pano-halo)); }
.pano .wnd .arr.lo { color: #b8c2cc; } .pano .wnd .arr.mid { color: #5aa9f5; } .pano .wnd .arr.hi { color: #ff6b6f; }
/* Modus Wetter (Symbol) oder Wolken (Reihen hoch/mittel/tief); Temperatur in beiden Modi darunter */
.pano.mode-weather .rows, .pano.mode-weather .axis, .pano.mode-clouds .sym { display: none; }
.pano .satbar { margin: 0 4px 6px; }
.pano .axis { position: absolute; left: 6px; top: 8px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.pano .axis .row { height: 30px; line-height: 30px; font-size: .7rem; color: var(--pano-text); text-shadow: 0 0 3px var(--pano-halo); }
.pano .rows .row { display: flex; align-items: center; justify-content: center; gap: 4px; height: 30px; margin-bottom: 4px; }
.pano .cl svg { width: 28px; height: 28px; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.pano .pc { font-size: .8rem; font-weight: 600; min-width: 36px; text-align: left; color: var(--pano-text); text-shadow: 0 0 3px var(--pano-halo); font-variant-numeric: tabular-nums; }
.pano .rain { display: flex; align-items: center; justify-content: center; gap: 3px; height: 20px; font-size: .72rem; font-weight: 600; color: var(--pano-text); text-shadow: 0 0 3px var(--pano-halo); }
.pano .rain svg { width: 20px; height: 20px; }
.pano .laxis { display: none; font-size: .7rem; color: var(--muted); margin: 4px 4px 0; }
.pano .trow { margin: 8px 4px 0; }
.pano .pnote { font-size: .74rem; color: var(--muted); margin: 2px 4px 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pano .scene:not(.dusk):not(.night) { --sky: linear-gradient(#2a3d58, #4c6078 72%); --sky-mtn: #4e5f74; --sky-rock: #76859a; --sky-hill: #3e5c48; --sky-land: #55704c; --sky-lake: #2c5f94; --pano-text: #fff; --pano-halo: rgba(0,0,0,.65); }
}
:root[data-theme="dark"] .pano .scene:not(.dusk):not(.night) { --sky: linear-gradient(#2a3d58, #4c6078 72%); --sky-mtn: #4e5f74; --sky-rock: #76859a; --sky-hill: #3e5c48; --sky-land: #55704c; --sky-lake: #2c5f94; --pano-text: #fff; --pano-halo: rgba(0,0,0,.65); }
@media (max-width: 640px) {
  .pano .scene { min-height: 170px; }
  .pano .pt { width: 64px; }
  .pano .sym svg, .pano .sym .none { width: 36px; height: 36px; line-height: 36px; }
  .pano .tmp { font-size: .98rem; }
  .pano .name { font-size: .62rem; }
  .pano .rows .row, .pano .axis .row { height: 24px; line-height: 24px; margin-bottom: 2px; }
  .pano .cl svg { width: 22px; height: 22px; }
  .pano .pc { font-size: .66rem; min-width: 28px; }
  .pano .axis { display: none; }   /* zu wenig Platz neben dem ersten Punkt; Legende unter dem Streifen */
  .pano.mode-clouds .laxis { display: block; }
  .pano .rain { font-size: .6rem; height: 18px; }
  .pano .wnd { font-size: .62rem; height: 16px; } .pano .wnd svg { width: 14px; height: 14px; }
}
nav.top { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; margin-bottom: 6px; }
nav.top a[aria-current="page"] { font-weight: 600; text-decoration: none; }
a { color: var(--accent); }
@media (max-width: 640px) {
  .h-cloud { height: 200px; } .h-dp { height: 250px; } .h-wind { height: 210px; }
  .map { height: 360px; }
}

/* Neuigkeiten und Handbuch: Badge im Menü, Einträge und Kapitel mit Label links, Inhalt rechts */
nav.top .badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff;
  font-size: .7rem; line-height: 18px; text-align: center; font-weight: 600; vertical-align: 1px; }
.doc { margin-top: 12px; }
.doc .card { padding: 14px 16px 10px; }
.doc .card h2 { font-size: 1.05rem; color: var(--text); margin: 2px 0 6px; }
.doc .meta { color: var(--muted); font-size: .8rem; }
.doc .meta code { font-size: .78rem; }
.doc .summary { margin: 0 0 10px; }
.doc .rows { border-top: 1px solid var(--border); }
.doc .row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.doc .row:last-child { border-bottom: 0; }
.doc .lab { color: var(--muted); font-size: .85rem; font-weight: 600; }
.doc .txt { font-size: .92rem; }
.doc .toc { margin: 0; padding-left: 22px; columns: 2; column-gap: 24px; font-size: .9rem; }
.doc .toc li { break-inside: avoid; margin: 2px 0; }
@media (max-width: 640px) {
  .doc .row { grid-template-columns: 1fr; gap: 2px; }
  .doc .toc { columns: 1; }
}

nav.top .badge[hidden] { display: none; }