/* CIT Tools, design C "Road Atlas" (3 Nov 2026 redesign). The shared look of every page.
   The idea: San Andreas as a printed road atlas. Pale map paper, a light-blue frame band at the top and bottom,
   and the white-on-green guide signs of the state's roads for the things you steer by: group headings, ID plaques,
   the main button and the answer. Blue is for the legend (filters, table heads, tips), yellow only for warnings.
   Tool stylesheets load after this file and use only the tokens below (CONTRACT.md section 4).
   Light is the home scheme ("Paper map"); [data-theme="dark"] is "Night map". Specs and contrast: design/c/SPEC.md. */

/* ------------------------------------------------------------------ fonts
   OFL 1.1 subsets of the server's own Barlow, Barlow Condensed and JetBrains Mono files (assets/ui/fonts/LICENSES.txt).
   The two preloaded files use exactly the preload URL (no ?v), so the browser downloads them once. Latin Extended and
   Vietnamese letters come from the "-ext" files, which load only on a page that shows such a letter. */
@font-face{font-family:"UI Body";src:url("/CITtools/assets/ui/fonts/ui-body.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"UI Body";src:url("/CITtools/assets/ui/fonts/ui-body-ext.woff2?v=r1") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0301,U+0303,U+0309,U+0323,U+1D00-1DBF,U+1E00-1E9F,U+1EA0-1EF9,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"UI Body";src:url("/CITtools/assets/ui/fonts/ui-body-bold.woff2?v=r1") format("woff2");font-weight:600 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"UI Body";src:url("/CITtools/assets/ui/fonts/ui-body-bold-ext.woff2?v=r1") format("woff2");font-weight:600 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0301,U+0303,U+0309,U+0323,U+1D00-1DBF,U+1E00-1E9F,U+1EA0-1EF9,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"UI Head";src:url("/CITtools/assets/ui/fonts/ui-head.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"UI Head";src:url("/CITtools/assets/ui/fonts/ui-head-ext.woff2?v=r1") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0301,U+0303,U+0309,U+0323,U+1D00-1DBF,U+1E00-1E9F,U+1EA0-1EF9,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"UI Mono";src:url("/CITtools/assets/ui/fonts/ui-mono.woff2?v=r1") format("woff2");font-weight:100 900;font-style:normal;font-display:optional;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201E,U+2026,U+2212}
/* metric-matched stand-ins while the files load (size-adjust and overrides measured with fontTools, design/c/SPEC.md) */
@font-face{font-family:"UI Body Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");font-weight:400;size-adjust:96.77%;ascent-override:103.34%;descent-override:20.67%;line-gap-override:0%}
@font-face{font-family:"UI Body Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");font-weight:700;size-adjust:92.39%;ascent-override:108.24%;descent-override:21.65%;line-gap-override:0%}
@font-face{font-family:"UI Head Fallback";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold");font-weight:700;size-adjust:92.77%;ascent-override:107.79%;descent-override:21.56%;line-gap-override:0%}
@font-face{font-family:"UI Head Fallback 2";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");font-weight:700;size-adjust:76.08%;ascent-override:131.43%;descent-override:26.29%;line-gap-override:0%}

/* ------------------------------------------------------------------ tokens: "Paper map" (light, the home scheme) */
:root,
:root[data-theme="light"]{
  --scheme:light;
  color-scheme:light;
  --theme-color:#d5e3f0;
  /* map paper, sheets, legend panels */
  --bg:#edf2ea;
  --bg-art:none;
  --surface:#ffffff;
  --surface-2:#e4edf5;
  --surface-3:#ffffff;
  --line:#c3d0c0;
  --line-strong:#5f7487;
  /* ink */
  --text:#14202b;
  --text-2:#4a5a66;
  --text-3:#5f6d78;
  --link:#1f5c9e;
  --link-hover:#123f70;
  /* sign green: the one action colour; service-sign blue as the sparing second one */
  --accent:#1e5e3b;
  --accent-ink:#ffffff;
  --accent-2:#1f5c9e;
  --ok:#1e6b3f;
  --ok-ink:#ffffff;
  --warn:#6b4e00;
  --warn-ink:#ffffff;
  --bad:#b42318;
  --bad-ink:#ffffff;
  --info:#1f5c9e;
  --money:#246b2c;
  --star:#865a00;
  --focus:#1f5c9e;
  --select:#ffe58a;
  --shadow:0 6px 16px rgba(20,32,43,.18);
  --overlay:rgba(20,32,43,.55);
  /* design C only (tool stylesheets do not use these) */
  --top:#d5e3f0;
  --top-text:#14202b;
  --frame-rule:#83a7c9;
  --select-ink:#14202b;
  --sign-rim:#ffffff;
  --zebra:#f6f9f4;
  --row-hover:#eef4f9;
  --ok-bg:#e3f1e7;
  --warn-bg:#fff4cc;
  --bad-bg:#fce8e6;
  --tip-bg:#eaf1f8;
  --warn-sign:#f5c400;
  --warn-sign-ink:#14202b;
  --warn-sign-edge:#14202b;
  --hi:#fff3b0;
  --icon-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%2314202b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234a5a66' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ tokens: "Night map" (dark) */
:root[data-theme="dark"]{
  --scheme:dark;
  color-scheme:dark;
  --theme-color:#1b2a38;
  --bg:#10171d;
  --bg-art:none;
  --surface:#18222b;
  --surface-2:#22303d;
  --surface-3:#0c1217;
  --line:#33434f;
  --line-strong:#7e95ab;
  --text:#e8edf0;
  --text-2:#aebbc6;
  --text-3:#93a2ae;
  --link:#8ec0f0;
  --link-hover:#bcdaf7;
  --accent:#2a7a4e;
  --accent-ink:#ffffff;
  --accent-2:#3d7cc0;
  --ok:#8fd3a6;
  --ok-ink:#0c1217;
  --warn:#f5c400;
  --warn-ink:#0c1217;
  --bad:#ff9a8f;
  --bad-ink:#0c1217;
  --info:#8ec0f0;
  --money:#9bd68a;
  --star:#f5c400;
  --focus:#8ec0f0;
  --select:#f5c400;
  --shadow:0 6px 16px rgba(0,0,0,.5);
  --overlay:rgba(4,8,12,.72);
  --top:#1b2a38;
  --top-text:#e8edf0;
  --frame-rule:#6f89aa;
  --select-ink:#0c1217;
  --sign-rim:#ffffff;
  --zebra:#1c2731;
  --row-hover:#213141;
  --ok-bg:#15291e;
  --warn-bg:#2a2410;
  --bad-bg:#331a18;
  --tip-bg:#1a2a3a;
  --warn-sign:#f5c400;
  --warn-sign-ink:#0c1217;
  --warn-sign-edge:#f5c400;
  --hi:#3a3312;
  --icon-select:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23e8edf0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23aebbc6' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ tokens that do not change with the scheme */
:root{
  --font-body:"UI Body","UI Body Fallback",Arial,"Segoe UI",Tahoma,sans-serif;
  --font-head:"UI Head","UI Head Fallback","UI Head Fallback 2","Arial Narrow",Arial,"Segoe UI",Tahoma,sans-serif;
  --font-num:"UI Body","UI Body Fallback",Arial,"Segoe UI",sans-serif;
  --font-mono:"UI Mono","JetBrains Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --fs-xs:13px;
  --fs-sm:15px;
  --fs-md:18px;
  --fs-lg:21px;
  --fs-xl:26px;
  --fs-2xl:34px;
  --fs-3xl:44px;
  --lh-body:1.5;
  --lh-tight:1.15;
  --head-weight:700;
  --head-case:none;
  --head-track:0;
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --radius-sm:4px;
  --radius:6px;
  --radius-lg:8px;
  --bw:1px;
  --maxw:1200px;
  --maxw-text:34em;
  --tap:44px;
  --gutter:24px;
  --head-h:64px;
}
@media (max-width:720px){
  :root{--fs-md:17px;--fs-lg:19px;--fs-xl:23px;--fs-2xl:28px;--fs-3xl:34px;--gutter:16px}
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh-body);font-kerning:normal;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
body > main{flex:1 0 auto}
[hidden]{display:none!important}
img,svg,video,canvas{max-width:100%}
img{height:auto}
img,video{display:block}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
p,ul,ol,dl,figure,blockquote,pre{margin:0 0 var(--sp-4)}
:where(p,ul,ol,dl,figure,blockquote,pre):last-child{margin-bottom:0}
ul,ol{padding-inline-start:1.4em}
li + li{margin-top:var(--sp-1)}
dt{font-weight:700}
dd{margin:0}
hr{border:0;border-top:var(--bw) solid var(--line);margin:var(--sp-6) 0}
b,strong{font-weight:700}
small{font-size:var(--fs-sm)}
abbr[title]{text-decoration:underline dotted;text-underline-offset:3px}
::selection{background:var(--select);color:var(--select-ink)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:target{scroll-margin-top:var(--sp-5)}

/* headings: Barlow Condensed, like the letters on the state's road signs */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:var(--head-weight);line-height:var(--lh-tight);letter-spacing:var(--head-track);text-transform:var(--head-case);color:var(--text);margin:0 0 var(--sp-3);text-wrap:balance}
h1{font-size:var(--fs-3xl);line-height:1.05}
h2{font-size:var(--fs-xl);margin-top:var(--sp-7)}
h3{font-size:var(--fs-lg);margin-top:var(--sp-5)}
h4{font-size:var(--fs-md);margin-top:var(--sp-4)}
:where(h2,h3,h4):first-child{margin-top:0}

/* links: blue like the water on the map, always underlined in running text */
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--link-hover);text-decoration-thickness:2px}

/* code and keys */
code,kbd,samp,pre{font-family:var(--font-mono);font-size:max(.88em,13px)}
code{padding:.1em .35em;border-radius:3px;background:var(--surface-2);color:var(--text);overflow-wrap:anywhere;font-variant-ligatures:none}
kbd{display:inline-block;min-width:1.8em;padding:.05em .45em;border:var(--bw) solid var(--line-strong);border-bottom-width:2px;border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:max(.85em,13px);font-weight:700;line-height:1.5;text-align:center;white-space:nowrap}
pre.code,.code-wrap pre{position:relative;margin:0;padding:var(--sp-3) var(--sp-4);border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface-2);color:var(--text);overflow-x:auto;line-height:1.55;white-space:pre;tab-size:2}
pre code{padding:0;background:none;border-radius:0;overflow-wrap:normal;font-size:1em}

/* ------------------------------------------------------------------ small shared parts */
.visually-hidden,.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.skip,.skip-link{position:absolute;left:var(--sp-3);top:var(--sp-3);z-index:200;padding:var(--sp-3) var(--sp-4);border:2px solid var(--text);border-radius:var(--radius);background:var(--surface);color:var(--text);font-weight:700;text-decoration:none;transform:translateY(-200%)}
.skip:focus,.skip-link:focus,.skip:focus-visible,.skip-link:focus-visible{transform:none}
.muted{color:var(--text-2)}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums lining-nums}
td.num,th.num{text-align:end}
.money{color:var(--money);font-variant-numeric:tabular-nums lining-nums}

/* ------------------------------------------------------------------ the header: the light-blue frame band of the map */
.site-head{position:relative;z-index:50;background:var(--top);color:var(--top-text);border-bottom:4px solid var(--frame-rule)}
.site-head__in,.site-head:not(:has(.site-head__in)){display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);min-height:var(--head-h);max-width:var(--maxw);margin-inline:auto;padding:var(--sp-2) var(--gutter)}
.site-head:not(:has(.site-head__in)){max-width:none;width:100%;margin-inline:0;padding-inline:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)))}
.brand{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);margin-inline-end:auto;color:var(--top-text);text-decoration:none}
.brand:hover{color:var(--top-text);text-decoration:none}
.brand:hover .brand__name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* the CIT mark as a small guide sign: white letters on green, the white inner border */
.brand__mark{display:inline-grid;place-items:center;flex:none;min-width:48px;height:34px;padding:0 var(--sp-2);border:var(--bw) solid var(--accent);border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 2px var(--accent),inset 0 0 0 3.5px var(--sign-rim);font:700 20px/1 var(--font-head);letter-spacing:.02em}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__name{font:700 23px/1.05 var(--font-head);color:var(--top-text)}
.brand__sub{font-size:var(--fs-xs);line-height:1.3;color:var(--text-2)}
.site-nav{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--sp-5)}
.site-nav a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--top-text);font-size:17px;font-weight:400;text-decoration:none}
.site-nav a:hover{color:var(--top-text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.site-nav a[aria-current="page"]{font-weight:700;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--accent);text-underline-offset:6px}
/* the Play bar's two parts (playbar.js and playbar.css, not ours): Discord keeps the nav link look, the green
   "Play CIT" pill keeps its own look; here they only get room and the line they sit on */
.site-nav .citpb-header-discord{gap:0;min-width:var(--tap);justify-content:center}
.site-nav a.citpb-hplay{margin-inline-start:var(--sp-1)!important}
@media (max-width:720px){
  .site-head__in,.site-head:not(:has(.site-head__in)){gap:0 var(--sp-4);padding-block:var(--sp-1)}
  .brand__mark{min-width:44px;height:32px;font-size:18px}
  .brand__name{font-size:21px}
  .site-nav{flex:1 0 100%;gap:0 var(--sp-4)}
  .site-nav a{font-size:16px}
}
/* small phones: tighter gaps so Discord and the Play CIT pill still fit on the nav row (playbar.js floats
   Play over the page when the header would grow) */
@media (max-width:400px){
  .site-nav{gap:0 var(--sp-2)}
  .site-nav a.citpb-hplay{margin-inline-start:0!important}
}
@media (max-width:340px){
  .site-nav a{font-size:15px}
}

/* ------------------------------------------------------------------ the page */
.page,body > main:not([class]){width:100%;max-width:var(--maxw);margin-inline:auto;padding:var(--sp-4) var(--gutter) var(--sp-7)}
body > main:not([class]) > .page,.page .page{max-width:none;padding:0;margin:0}
.reading{max-width:var(--maxw-text)}

/* breadcrumb: the route you came by; the separators are drawn, so screen readers do not read them */
.crumbs{margin:0 0 var(--sp-3);font-size:var(--fs-sm);color:var(--text-2)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-2);margin:0;padding:0;list-style:none}
.crumbs li{display:inline-flex;align-items:center;gap:var(--sp-2);margin:0}
.crumbs li + li::before{content:"";flex:none;width:7px;height:7px;border-top:1.5px solid var(--text-2);border-right:1.5px solid var(--text-2);transform:rotate(45deg);margin-inline-end:var(--sp-1)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--link)}
.crumbs [aria-current="page"]{color:var(--text);font-weight:700}

/* the title block. The kicker (the old "eyebrow") is a plain line of context in sentence case, set like the
   breadcrumb above it, never small spaced capitals (research/03-ai-slop.md section 3.2) */
.page-head{margin:0 0 var(--sp-5);max-width:52rem}
.kicker,.eyebrow{margin:0 0 var(--sp-1);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--text-2)}
.page-head h1{margin:0}
.page-head h1 .sub{display:block;margin-top:var(--sp-1);font-family:var(--font-body);font-size:var(--fs-lg);font-weight:400;line-height:1.3;color:var(--text-2)}
.lede{margin:var(--sp-3) 0 0;max-width:var(--maxw-text);font-size:var(--fs-lg);line-height:1.4;color:var(--text)}
.page-head > p:not(.kicker):not(.eyebrow):not(.lede){margin-top:var(--sp-2);color:var(--text-2);max-width:var(--maxw-text)}

/* section links under the title (a row of related pages) */
.subnav{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-5);padding:0}
.subnav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-4);border:var(--bw) solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);font-weight:700;text-decoration:none}
.subnav a:hover{background:var(--row-hover);color:var(--text)}
.subnav a[aria-current="page"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 2px var(--accent),inset 0 0 0 3.5px var(--sign-rim)}

/* ------------------------------------------------------------------ layout */
.stack > * + *{margin-top:var(--sp-4)}
.stack > :is(h2,h3) + *{margin-top:var(--sp-2)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5);align-items:start}
.cols-3{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5);align-items:start}
@media (min-width:620px){.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){
  .split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.wide{grid-column:1 / -1}
.split + *,.cols-3 + *,.panel + *,.toolbar + *,.table-wrap + *{margin-top:var(--sp-5)}
/* inside a grid the gap already spaces the cells; a margin would push the second column down */
:is(.split,.cols-3) > *{margin-top:0}

/* ------------------------------------------------------------------ panels: white sheets; the head is a legend strip */
.panel{min-width:0;margin:0;border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface)}
.panel:not(:has(> .panel__head)):not(:has(> .panel__body)):not(.panel--flat){padding:var(--sp-5)}
.panel__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);padding:var(--sp-3) var(--sp-5);border-bottom:var(--bw) solid var(--line);border-radius:var(--radius) var(--radius) 0 0;background:var(--surface-2)}
.panel__title{margin:0;font-size:var(--fs-lg);line-height:1.2}
.panel__sub{flex:1 1 100%;order:3;margin:0;font-size:var(--fs-sm);color:var(--text-2)}
.panel__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-inline-start:auto}
.panel__body{padding:var(--sp-5)}
.panel > .table-wrap{border:0;border-radius:0 0 var(--radius) var(--radius)}
.panel--flat{border:0;border-radius:0;background:none;padding:0}
.panel--flat > .panel__head{padding:0;border:0;background:none;margin-bottom:var(--sp-3)}
.panel--flat > .panel__body{padding:0}
@media (max-width:720px){
  .panel:not(:has(> .panel__head)):not(:has(> .panel__body)):not(.panel--flat){padding:var(--sp-4)}
  .panel__head{padding:var(--sp-3) var(--sp-4)}
  .panel__body{padding:var(--sp-4)}
}

/* ------------------------------------------------------------------ forms */
.field{display:grid;gap:var(--sp-2);align-content:start;min-width:0}
:where(.field){margin:0}
.field > *{order:2;min-width:0;margin:0}
.field > .label,.field > .hint{order:0}
.field > .error{order:1}
.field > :is(.seg,.chips,.stepper,.check,.switch,.btn,.cluster){justify-self:start}
.field + .field{margin-top:var(--sp-4)}
.cols-3 > .field + .field,.split > .field + .field{margin-top:0}
.label{display:block;margin:0;font-family:var(--font-head);font-size:var(--fs-md);font-weight:700;line-height:1.25;color:var(--text)}
.hint{margin:0;font-size:var(--fs-sm);line-height:1.4;color:var(--text-2);max-width:var(--maxw-text)}
.error{display:flex;align-items:flex-start;gap:var(--sp-2);margin:0;font-size:var(--fs-sm);font-weight:700;line-height:1.4;color:var(--bad)}
.error::before{content:"!";flex:none;display:inline-grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--bad);color:var(--bad-ink);font:700 14px/1 var(--font-body)}
.error[hidden]{display:none}

.input,.select,.textarea{display:block;width:100%;min-height:48px;margin:0;padding:var(--sp-2) var(--sp-3);border:var(--bw) solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-3);color:var(--text);font-family:var(--font-body);font-size:var(--fs-md);line-height:1.35}
.input::placeholder,.textarea::placeholder{color:var(--text-2);opacity:1}
.input:hover,.select:hover,.textarea:hover{border-color:var(--text)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--text)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"],.is-invalid .input,.is-invalid .select,.is-invalid .textarea,.input:user-invalid{border:2px solid var(--bad);padding:calc(var(--sp-2) - 1px) calc(var(--sp-3) - 1px)}
.input:disabled,.select:disabled,.textarea:disabled{border-style:dashed;background:var(--bg);color:var(--text-3);cursor:not-allowed}
.input.num,.input[inputmode="numeric"],.input[inputmode="decimal"]{font-variant-numeric:tabular-nums}
.input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.textarea{min-height:120px;resize:vertical;line-height:var(--lh-body)}
.select{appearance:none;-webkit-appearance:none;padding-inline-end:40px;background-image:var(--icon-select);background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;cursor:pointer}
.select option{background:var(--surface);color:var(--text)}

/* checkbox (a label around the box) */
.check{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);cursor:pointer;line-height:1.3}
.check input[type="checkbox"],.check input[type="radio"]{appearance:none;-webkit-appearance:none;flex:none;display:inline-grid;place-items:center;width:24px;height:24px;margin:0;border:2px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-3);cursor:pointer}
.check input[type="radio"]{border-radius:50%}
.check input:checked{border-color:var(--accent);background:var(--accent)}
.check input[type="checkbox"]:checked::after{content:"";width:12px;height:7px;margin-top:-3px;border-left:2.5px solid var(--accent-ink);border-bottom:2.5px solid var(--accent-ink);transform:rotate(-45deg)}
.check input[type="radio"]:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent-ink)}
.check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.check input:disabled{border-style:dashed;cursor:not-allowed}
.check:has(input:disabled){color:var(--text-3);cursor:not-allowed}

/* switch (acts at once; the label never changes) */
.switch{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);cursor:pointer;line-height:1.3}
.switch input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:48px;height:28px;margin:0;border:2px solid var(--line-strong);border-radius:14px;background:var(--surface-3);cursor:pointer;transition:background-color .15s,border-color .15s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--text-2);transition:transform .15s}
.switch input:checked{border-color:var(--accent);background:var(--accent)}
.switch input:checked::after{background:var(--accent-ink);transform:translateX(20px)}
.switch input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.switch input:disabled{border-style:dashed;cursor:not-allowed}

/* stepper: − box + */
.stepper{display:inline-flex;align-items:stretch;max-width:100%}
.stepper .input{width:auto;min-width:5.5em;max-width:10em;border-radius:0;text-align:center;flex:1 1 auto}
.stepper__btn{flex:none;display:inline-grid;place-items:center;width:48px;min-height:48px;margin:0;padding:0;border:var(--bw) solid var(--line-strong);background:var(--surface);color:var(--text);font:700 24px/1 var(--font-body)}
.stepper__btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);border-inline-end:0}
.stepper__btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-inline-start:0}
.stepper__btn:hover{background:var(--row-hover)}
.stepper__btn:active{background:var(--surface-2)}
.stepper__btn:disabled{color:var(--text-3);cursor:not-allowed;background:var(--bg)}
.stepper :focus-visible{position:relative;z-index:1}

/* segmented control: joined boxes, the chosen one is sign green */
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;border-radius:var(--radius)}
.seg__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.35em;min-height:var(--tap);margin:0 0 0 -1px;padding:var(--sp-2) var(--sp-4);border:var(--bw) solid var(--line-strong);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:var(--fs-md);font-weight:400;line-height:1.2;white-space:nowrap}
.seg__btn:first-child{margin-inline-start:0;border-radius:var(--radius) 0 0 var(--radius)}
.seg__btn:last-child{border-radius:0 var(--radius) var(--radius) 0}
.seg__btn:only-child{border-radius:var(--radius)}
.seg__btn:hover{background:var(--row-hover);z-index:1}
.seg__btn[aria-pressed="true"],.seg__btn[aria-checked="true"],.seg__btn.is-current{z-index:2;border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:700;box-shadow:inset 0 0 0 2px var(--accent),inset 0 0 0 3.5px var(--sign-rim)}
.seg__btn:focus-visible{z-index:3}
.seg__btn:disabled{color:var(--text-3);cursor:not-allowed;background:var(--bg)}
.seg__btn small{font-size:inherit;font-weight:400;font-variant-numeric:tabular-nums}
@media (max-width:720px){.seg__btn{padding-inline:var(--sp-3)}}

/* filter chips: pressed ones get the legend-blue fill, a dark edge and a tick */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:0;padding:0;border:0}
.chip{display:inline-flex;align-items:center;gap:.4em;min-height:32px;margin:0;padding:var(--sp-1) var(--sp-3);border:var(--bw) solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:var(--fs-sm);font-weight:400;line-height:1.25;text-decoration:none;white-space:nowrap}
button.chip,label.chip,a.chip{min-height:var(--tap);padding-inline:var(--sp-4);font-size:var(--fs-md)}
button.chip:hover,label.chip:hover,a.chip:hover{background:var(--row-hover);color:var(--text)}
.chip[aria-pressed="true"],.chip[aria-checked="true"],.chip.is-current,input:checked + label.chip{border:2px solid var(--text);padding-inline:calc(var(--sp-4) - 1px);background:var(--surface-2);font-weight:700}
.chip[aria-pressed="true"]::before,.chip[aria-checked="true"]::before,input:checked + label.chip::before{content:"";width:12px;height:7px;margin:-3px .1em 0 0;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg)}
.chip:disabled{color:var(--text-3);border-style:dashed;cursor:not-allowed}

/* ------------------------------------------------------------------ buttons */
.btn,.theme-switch{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--tap);margin:0;padding:var(--sp-2) var(--sp-4);border:var(--bw) solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:17px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .12s,border-color .12s}
.btn:hover,.theme-switch:hover{background:var(--row-hover);border-color:var(--text);color:var(--text);text-decoration:none}
.btn:active,.theme-switch:active{background:var(--surface-2)}
.btn[aria-pressed="true"]{border:2px solid var(--text);background:var(--surface-2)}
/* the main button is a small guide sign: white letters on green with the white inner border */
.btn--primary{min-height:48px;padding-inline:var(--sp-5);border-color:var(--accent);background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 3px var(--accent),inset 0 0 0 5px var(--sign-rim);font-family:var(--font-head);font-size:20px;letter-spacing:.01em}
.btn--primary:hover{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 3px var(--accent),inset 0 0 0 5px var(--sign-rim),0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.btn--primary:active{box-shadow:inset 0 0 0 4px var(--accent),inset 0 0 0 6px var(--sign-rim)}
.btn--quiet{border-color:transparent;background:none;color:var(--link);font-weight:400;text-decoration:underline;text-underline-offset:3px;padding-inline:var(--sp-2)}
.btn--quiet:hover{border-color:transparent;background:var(--row-hover);color:var(--link-hover);text-decoration-thickness:2px}
.btn--danger{border-color:var(--bad);background:var(--bad);color:var(--bad-ink)}
.btn--danger:hover{border-color:var(--bad);background:var(--bad);color:var(--bad-ink);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--bad)}
.btn--small{min-height:36px;padding:var(--sp-1) var(--sp-3);font-size:var(--fs-sm)}
.btn--icon{width:var(--tap);min-width:var(--tap);padding:0;font-size:22px;line-height:1}
.btn:disabled,.btn[aria-disabled="true"],.theme-switch:disabled{border-style:dashed;border-color:var(--line-strong);background:var(--bg);color:var(--text-3);box-shadow:none;cursor:not-allowed}
.btn--primary:disabled{border-style:solid;border-color:var(--line-strong)}

/* copy buttons: "Copy" turns into "Copied" with a tick for a moment */
.copy{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:36px;min-width:36px;margin:0;padding:var(--sp-1) var(--sp-3);border:var(--bw) solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer}
.copy:hover{background:var(--row-hover);border-color:var(--text)}
.copy.is-done,.copy.done{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.copy.is-done::before,.copy.done::before{content:"";width:11px;height:6px;margin-top:-3px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg)}
.code-wrap{position:relative}
.code-wrap > .copy{position:absolute;top:var(--sp-2);right:var(--sp-2)}
.code-wrap > pre{padding-right:96px}

/* ------------------------------------------------------------------ search, filters and counts: the legend panel */
.toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-3) var(--sp-5);margin:0 0 var(--sp-5);padding:var(--sp-4);border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.toolbar > .field,.toolbar > .search{flex:1 1 18rem;min-width:min(100%,16rem)}
.toolbar > .count{flex:1 1 100%;margin:0}
.search{position:relative;display:block;min-width:0}
.search > .input,.search > input{padding-inline-start:44px;background-image:var(--icon-search);background-repeat:no-repeat;background-position:14px center;background-size:18px 18px}
.search:has(> kbd) > .input,.search:has(> kbd) > input{padding-inline-end:48px}
.search > kbd{position:absolute;top:50%;right:12px;transform:translateY(-50%);pointer-events:none;color:var(--text-2)}
@media (hover:none),(max-width:720px){.search > kbd{display:none}}
.count{margin:0;font-size:var(--fs-sm);color:var(--text-2);font-variant-numeric:tabular-nums}
.count b,.count strong{color:var(--text)}

/* ------------------------------------------------------------------ results: the answer is a green distance sign */
.result{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--sp-1) var(--sp-4);padding:var(--sp-4) var(--sp-5);border:var(--bw) solid var(--accent);border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 4px var(--accent),inset 0 0 0 6px var(--sign-rim)}
.result__label{font-family:var(--font-head);font-size:var(--fs-lg);font-weight:700;line-height:1.2}
.result__value{grid-column:2;grid-row:1;font-family:var(--font-head);font-size:52px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums lining-nums;text-align:end;overflow-wrap:anywhere}
.result__note{grid-column:1 / -1;font-size:var(--fs-sm);line-height:1.4;color:var(--accent-ink)}
.result .money,.result .num{color:inherit}
.result a{color:var(--accent-ink)}
@media (max-width:720px){.result{padding:var(--sp-3) var(--sp-4)}.result__value{font-size:42px}}
/* smaller answers: a mileage table, label and note on the left, the number on the right */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:0;margin:0;border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--sp-3) var(--sp-4);box-shadow:inset -1px 0 0 var(--line),inset 0 -1px 0 var(--line)}
.stat__label{font-size:var(--fs-sm);color:var(--text-2);line-height:1.3}
.stat__value{font-family:var(--font-head);font-size:var(--fs-xl);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.stat__note{font-size:var(--fs-sm);color:var(--text-2);line-height:1.35}
output{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ facts list (label and value) */
/* flex, not grid: the last row stretches, so there is never an empty ruled cell after the last fact */
dl.facts{display:flex;flex-wrap:wrap;gap:0;margin:0;border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
dl.facts > div{flex:1 1 13rem;min-width:min(100%,13rem);padding:var(--sp-3) var(--sp-4);box-shadow:inset -1px 0 0 var(--line),inset 0 -1px 0 var(--line)}
dl.facts dt{font-size:var(--fs-sm);font-weight:400;color:var(--text-2);line-height:1.3}
dl.facts dd{margin:2px 0 0;color:var(--text);font-weight:700;overflow-wrap:anywhere}
ul.facts{margin:0;padding-inline-start:1.2em}
ul.facts li::marker{color:var(--text-2)}

/* ------------------------------------------------------------------ tables: legend-blue head, zebra rows */
.table-wrap{position:relative;max-width:100%;overflow-x:auto;margin:0;border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface);-webkit-overflow-scrolling:touch}
.table-wrap:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-md);line-height:1.35;font-variant-numeric:tabular-nums}
.table caption{caption-side:top;padding:var(--sp-3) var(--sp-4);text-align:start;font-family:var(--font-head);font-size:var(--fs-lg);font-weight:700;color:var(--text);border-bottom:var(--bw) solid var(--line)}
.table th,.table td{padding:var(--sp-3) var(--sp-4);text-align:start;vertical-align:top;border-bottom:var(--bw) solid var(--line)}
.table thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);font-family:var(--font-head);font-size:var(--fs-md);font-weight:700;line-height:1.2;color:var(--text);vertical-align:bottom;border-bottom:var(--bw) solid var(--line-strong)}
.table tbody tr:nth-child(even) > *{background:var(--zebra)}
.table tbody tr:hover > *{background:var(--row-hover)}
.table tbody tr:last-child > *{border-bottom:0}
.table tbody th{font-weight:700}
.table th.num,.table td.num{text-align:end;white-space:nowrap}
.table tr.is-current > *{background:var(--hi)!important;font-weight:700}
.table tr.is-current > :first-child{box-shadow:inset 4px 0 0 var(--accent)} /* D7 exception: one meaning, the current row (DESIGN-BRIEF 3.5) */
.table :is(thead th,th[aria-sort]) button{all:unset;display:inline-flex;align-items:center;gap:var(--sp-1);min-height:32px;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.table :is(thead th,th[aria-sort]) button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.table--compact th,.table--compact td{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm)}
.table--compact thead th{font-size:var(--fs-sm)}
@media (max-width:720px){.table th,.table td{padding:var(--sp-2) var(--sp-3)}}

/* ------------------------------------------------------------------ pictures: white tiles, the ID on a green exit plaque */
.pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:var(--sp-4);margin:0;padding:0;list-style:none}
.pic{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;border:var(--bw) solid var(--line);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden}
li.pic{margin:0}
.pic:hover,.pic:focus-within{border-color:var(--line-strong)}
.pic__link{display:flex;flex-direction:column;flex:1;color:var(--text);text-decoration:none}
.pic__link:hover{color:var(--text);text-decoration:none}
.pic__link:hover .pic__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pic__link:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
.pic__img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;background:var(--surface-2)}
.pic__cap{display:flex;flex-direction:column;gap:2px;padding:var(--sp-2) var(--sp-3) var(--sp-3);min-width:0}
.pic__id{position:absolute;top:var(--sp-2);left:var(--sp-2);z-index:1;display:inline-flex;align-items:center;max-width:calc(100% - 64px);min-height:28px;padding:2px 9px;border:var(--bw) solid var(--accent);border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent),inset 0 0 0 2.5px var(--sign-rim);font-family:var(--font-head);font-size:19px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere;pointer-events:none}
.pic__name{display:block;padding:var(--sp-2) var(--sp-3) var(--sp-3);font-size:16px;font-weight:400;line-height:1.3;color:var(--text);overflow-wrap:anywhere}
.pic__cap .pic__name{padding:0}
.pic__link > .pic__name:last-child{flex:1}
/* any extra caption line a list puts in the tile (Interiors: "Interior 4 · Mulholland") lines up with the name */
.pic__link > :is(span,i,small,p):not([class]){display:block;margin:0;padding:0 var(--sp-3) var(--sp-3);font-size:var(--fs-sm);font-style:normal;line-height:1.4;color:var(--text-2);overflow-wrap:anywhere}
.pic__link > .pic__name:has(+ :is(span,i,small,p):not([class])){padding-bottom:var(--sp-1)}
.pic__copy{position:absolute;top:var(--sp-2);right:var(--sp-2);z-index:2}

/* ------------------------------------------------------------------ list rows: index lines of the atlas */
.rows{margin:0;padding:0;list-style:none;border-top:var(--bw) solid var(--line)}
.row{margin:0;border-bottom:var(--bw) solid var(--line)}
.row__link{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:var(--sp-2) 44px var(--sp-2) var(--sp-3);color:var(--text);text-decoration:none}
.row__link::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-5px;border-top:2px solid var(--text-2);border-right:2px solid var(--text-2);transform:rotate(45deg)}
.row__link:hover{background:var(--row-hover);color:var(--text);text-decoration:none}
.row__link:hover .row__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.row__link[aria-current="page"],.row.is-current .row__link{background:var(--surface-2);box-shadow:inset 4px 0 0 var(--accent)} /* D7 exception: the current item (DESIGN-BRIEF 3.5) */
.row__title{font-weight:700;font-size:var(--fs-md);line-height:1.3}
.row__meta{font-size:var(--fs-sm);color:var(--text-2);line-height:1.4}

/* ------------------------------------------------------------------ notes: each starts with its road sign */
.note{position:relative;display:block;margin:0;padding:var(--sp-3) var(--sp-4);border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text);max-width:52rem}
.note__title{font-weight:700;color:var(--text)}
.note--tip,.note--warn,.note--bad{padding-inline-start:56px;min-height:52px}
.note--tip::before,.note--warn::before,.note--bad::before{position:absolute;left:var(--sp-3);top:var(--sp-3);display:grid;place-items:center;font-family:var(--font-head);font-weight:700;line-height:1}
/* tip: the blue square service sign with a white "i" */
.note--tip{border-color:var(--line);background:var(--tip-bg)}
.note--tip::before{content:"i";width:28px;height:28px;border-radius:var(--radius-sm);background:var(--info);color:#fff;box-shadow:inset 0 0 0 2px var(--info),inset 0 0 0 3px #fff;font-size:20px;font-style:normal}
:root[data-theme="dark"] .note--tip::before{background:#1f5c9e;box-shadow:inset 0 0 0 2px #1f5c9e,inset 0 0 0 3px #fff}
/* careful, not checked yet: the yellow warning diamond with its black edge and "!" */
.note--warn{border-color:var(--line);background:var(--warn-bg)}
.note--warn::before{content:"!";left:15px;top:15px;width:22px;height:22px;border:2px solid var(--warn-sign-edge);border-radius:3px;background:var(--warn-sign);color:var(--warn-sign-ink);font-size:17px;transform:rotate(45deg)}
.note--warn::after{content:none}
/* careful where the player can lose something: the red sign */
.note--bad{border-color:var(--bad);background:var(--bad-bg)}
.note--bad::before{content:"!";width:28px;height:28px;border-radius:50%;background:#b42318;color:#fff;box-shadow:inset 0 0 0 2px #b42318,inset 0 0 0 3px #fff;font-size:19px}
.note > :first-child{margin-top:0}
.note > p + p{margin-top:var(--sp-2)}
p.note,div.note{line-height:1.45}
.note + *,.note + .note{margin-top:var(--sp-3)}
.page-head + .note{margin-top:0}
/* the "!" in the diamond is drawn upright again (the diamond itself is turned) */
.note--warn::before{text-indent:0}

/* ------------------------------------------------------------------ tabs */
.tabs{display:flex;flex-wrap:wrap;gap:0 var(--sp-1);margin:0;border-bottom:var(--bw) solid var(--line-strong)}
.tab{position:relative;display:inline-flex;align-items:center;min-height:var(--tap);margin:0 0 -1px;padding:var(--sp-2) var(--sp-4);border:0;border-bottom:4px solid transparent;background:none;color:var(--text-2);font-family:var(--font-body);font-size:var(--fs-md);font-weight:400;text-decoration:none}
.tab:hover{color:var(--text);border-bottom-color:var(--line-strong)}
.tab[aria-selected="true"],.tab[aria-current="page"]{color:var(--text);font-weight:700;border-bottom-color:var(--accent)}
.tab:focus-visible{outline-offset:-2px}
.tabpanel{padding-top:var(--sp-4)}
.tabpanel:focus-visible{outline-offset:4px}

/* ------------------------------------------------------------------ disclosure */
details.more{margin:0;border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface)}
details.more > summary{position:relative;display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);padding:var(--sp-2) var(--sp-4);font-weight:700;cursor:pointer;list-style:none;border-radius:var(--radius)}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::before{content:"";flex:none;width:9px;height:9px;margin-inline:2px 4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.more[open] > summary::before{transform:rotate(45deg)}
details.more > summary:hover{background:var(--row-hover)}
details.more[open] > summary{border-bottom:var(--bw) solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
details.more > :not(summary){margin:var(--sp-3) var(--sp-4)}
details.more > :not(summary):last-child{margin-bottom:var(--sp-4)}

/* ------------------------------------------------------------------ empty state */
.empty{margin:0;padding:var(--sp-5);border:var(--bw) dashed var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--text)}
.empty__title{margin:0 0 var(--sp-2);font-family:var(--font-head);font-size:var(--fs-lg);font-weight:700;line-height:1.2}
.empty > p{max-width:var(--maxw-text)}
.empty > .btn,.empty > button{margin-top:var(--sp-3)}

/* ------------------------------------------------------------------ badges: small plaques */
.badge{display:inline-flex;align-items:center;min-height:22px;padding:1px 7px;border:var(--bw) solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:var(--fs-xs);font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none;vertical-align:.12em;white-space:nowrap}
.badge--new{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.badge--test{border-color:var(--line-strong);background:var(--surface-2);color:var(--text)}
.badge--warn{border-color:var(--warn-sign-edge);background:var(--warn-sign);color:var(--warn-sign-ink)}

/* ------------------------------------------------------------------ the footer: the frame band again */
.site-foot{margin-top:auto;background:var(--top);color:var(--top-text);border-top:4px solid var(--frame-rule)}
.site-foot__in{display:grid;gap:var(--sp-2);max-width:var(--maxw);margin-inline:auto;padding:var(--sp-5) var(--gutter) var(--sp-6);font-size:var(--fs-sm);line-height:1.45}
.site-foot__in > p{margin:0;max-width:var(--maxw-text)}
.site-foot__src{color:var(--top-text)}
.site-foot__note,.site-foot__legal{color:var(--text-2)}
.site-foot__nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-5);margin-top:var(--sp-1)}
.site-foot__nav a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--top-text)}
.site-foot__nav a:hover{color:var(--top-text)}
.theme-switch{min-height:40px;padding:var(--sp-1) var(--sp-4);font-size:var(--fs-sm)}
.site-foot__nav .theme-switch{margin-inline-start:auto}
@media (max-width:720px){.site-foot__nav .theme-switch{margin-inline-start:0}}

/* ------------------------------------------------------------------ the sources block and short link lists */
.sources{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:var(--bw) solid var(--line-strong)}
.sources h2{margin:0 0 var(--sp-3);font-size:var(--fs-xl)}
.sources ul,.sources ol{font-size:var(--fs-sm);color:var(--text)}
.sources p{font-size:var(--fs-sm);color:var(--text-2)}

/* ------------------------------------------------------------------ motion, contrast modes, print */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .brand__mark,.btn--primary,.result,.pic__id,.seg__btn[aria-pressed="true"],.subnav a[aria-current="page"]{border:2px solid CanvasText}
  .seg__btn[aria-pressed="true"],.chip[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .note--tip::before,.note--warn::before,.note--bad::before{forced-color-adjust:none;border:2px solid CanvasText}
  .switch input,.check input{border:2px solid CanvasText}
  .switch input:checked,.check input:checked{forced-color-adjust:none;background:Highlight}
}
@media print{
  .site-head,.site-foot,.skip,.copy,.cid,.theme-switch{display:none!important}
  body{background:#fff;color:#000}
  .panel,.table-wrap{border-color:#888}
}