/* EchoWatch dashboard - vertciti.com design DNA (site v6, 2026-10-20).
 *
 * Inherited verbatim from the official site: black/white institutional
 * editorial palette, Nunito Sans, square corners (radius 0), 800-weight
 * headings, 13px uppercase eyebrows, black utility bar with an orange
 * current-page underline, 4px nav underlines, black square CTAs that go
 * orange on hover, a black KPI band with light 300-weight numerals and
 * 4px progress bars, 4px black top rules on tiles, yellow <mark>, and the
 * brand's honesty material: square status dots (green = verified /
 * measured, yellow = in progress / estimated, outline = planned / pending).
 *
 * Product additions (DealDesk spec): numbered zones in decision order,
 * verdict hero, evidence-quality bar, caliber badges on every number,
 * 44px touch targets, print stylesheet = the one-page situation sheet.
 *
 * Color semantics: orange is the brand's attention color, so it carries
 * "negative" and "alert"; green carries "positive" and "measured";
 * yellow carries "estimated" and "elevated". No other hues.
 */
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:300 800;font-display:swap;
  src:url(/static/fonts/nunito-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#FFFFFF;--fg:#000000;--fg-2:#3F3F3F;--fg-3:#6B6B6B;--soft:#F5F5F5;--line:#DEDEDE;--bad:#C62828;
  --strong:#000000;--card:#FFFFFF;--orange:#FF4713;--yellow:#FFCE00;--green:#1D8348;--verd:#2B7363;
  --band:#000000;--band-fg:#FFFFFF;--band-2:#A9A9A9;--band-line:#333333;
  --font:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --w:1200px;--gut:clamp(16px,4.5vw,64px);--sec:clamp(40px,5vw,64px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000;--fg:#FFFFFF;--fg-2:#D0D0D0;--fg-3:#A3A3A3;--soft:#141414;--line:#2E2E2E;--bad:#EF6B6B;
    --strong:#FFFFFF;--card:#0A0A0A;--green:#3FB872;--band:#FFFFFF;--band-fg:#000000;--band-2:#555555;--band-line:#D6D6D6;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000;--fg:#FFFFFF;--fg-2:#D0D0D0;--fg-3:#A3A3A3;--soft:#141414;--line:#2E2E2E;--bad:#EF6B6B;
  --strong:#FFFFFF;--card:#0A0A0A;--green:#3FB872;--band:#FFFFFF;--band-fg:#000000;--band-2:#555555;--band-line:#D6D6D6;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.7;
  letter-spacing:.01em;font-variant-numeric:lining-nums tabular-nums;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.wrap{max-width:calc(var(--w) + 2*var(--gut));margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.skip{position:absolute;left:-999px;top:0;background:var(--strong);color:var(--bg);padding:10px 14px;font-weight:800;z-index:100}
.skip:focus{left:12px}
.dash{color:var(--fg-3)}

/* ---- utility bar (site: black, 44px, orange current underline) ---- */
.utility{background:#000;color:#fff;font-size:13px}
.utility .wrap{display:flex;align-items:stretch;justify-content:space-between;gap:16px;min-height:44px}
.utility nav{display:flex;overflow-x:auto;scrollbar-width:none}
.utility nav a{display:inline-flex;align-items:center;padding:0 14px;text-decoration:none;font-weight:700;color:#BDBDBD;
  white-space:nowrap;border-bottom:3px solid transparent;min-height:44px}
.utility nav a:first-child{padding-left:0}
.utility nav a[aria-current]{color:#fff;border-bottom-color:var(--orange)}
.utility nav a:hover{color:#fff}
.utility .right{display:flex;align-items:center;gap:18px;white-space:nowrap;color:#BDBDBD}
.utility .right a{color:#fff;font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.utility .right a:hover{text-decoration:underline}
.utility .mcp{display:inline-flex;align-items:center;gap:7px}

/* ---- header (site: white, 76px, wordmark with orange period) ---- */
header.site{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.hbar{display:flex;align-items:center;gap:24px;min-height:72px}
.logo{display:inline-flex;align-items:baseline;min-height:44px;color:var(--fg);text-decoration:none;font-weight:800;
  font-size:26px;letter-spacing:-.03em;line-height:1}
.logo i{color:var(--orange);font-style:normal}
.mainnav{display:flex;align-items:stretch;align-self:stretch;min-width:0;overflow-x:auto;scrollbar-width:none}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{display:inline-flex;align-items:center;gap:8px;border-bottom:4px solid transparent;padding:4px 12px 0;
  font-weight:700;font-size:15px;white-space:nowrap;text-decoration:none}
.mainnav a:hover{border-bottom-color:var(--strong)}
.mainnav a[aria-current]{border-bottom-color:var(--orange)}
.mainnav em{font-style:normal;font-size:11px;font-weight:800;background:var(--soft);padding:0 7px;line-height:20px}
.acts{margin-left:auto;display:flex;align-items:center;gap:10px}
.qbox{display:flex;align-items:stretch;border:2px solid var(--strong);min-height:44px}
.qbox input{border:0;background:var(--bg);color:var(--fg);font:inherit;font-size:14px;padding:0 12px;width:200px;min-width:0}
.qbox input:focus{outline:none}
.qbox button{border:0;background:var(--strong);color:var(--bg);font:inherit;font-weight:800;font-size:14px;padding:0 14px;cursor:pointer}
.qbox button:hover{background:var(--orange);color:#000}
.cta-s{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;background:var(--strong);color:var(--bg);
  font-weight:800;font-size:14px;text-decoration:none;border:2px solid var(--strong);cursor:pointer;font-family:inherit}
.cta-s:hover{background:var(--orange);border-color:var(--orange);color:#000}
.cta-s.ghost{background:transparent;color:var(--fg)}
.cta-s.ghost:hover{background:var(--soft);border-color:var(--strong);color:var(--fg)}

/* ---- alert strip (site: soft gray, 48px) ---- */
.alert{background:var(--soft);border-bottom:1px solid var(--line);font-size:14px}
.alert .wrap{display:flex;align-items:center;gap:12px;min-height:48px;padding-top:6px;padding-bottom:6px}
.alert .wrap > span:last-child{min-width:0}
.alert b{font-weight:800}

/* ---- type ---- */
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.015em}
.eyebrow{display:block;font-size:13px;line-height:20px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px;color:var(--fg)}
.eyebrow .zn{font-family:var(--mono);color:var(--fg-3);margin-right:8px;letter-spacing:.04em}
.lede{font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:var(--fg-2);max-width:44em;margin:0}
.note{font-size:13px;color:var(--fg-3);margin:10px 0 0;line-height:1.6}
.howto{font-size:14px;color:var(--fg-2);margin:28px 0 0}
.howto b{color:var(--fg);font-weight:800}

/* ---- scope bar: site qtabs (orange 4px underline on the pressed tab) ---- */
.scope{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);margin-top:20px}
.qtabs{display:flex;flex-wrap:wrap;gap:4px 24px}
.qtabs a{display:inline-flex;align-items:center;min-height:48px;border-bottom:4px solid transparent;margin-bottom:-1px;
  font-weight:600;color:var(--fg-2);text-decoration:none}
.qtabs a[aria-current]{color:var(--fg);font-weight:800;border-bottom-color:var(--orange)}
.qtabs a:hover{color:var(--fg);border-bottom-color:var(--strong)}
.qlabel{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);align-self:center;margin-right:-8px}

/* ---- sections ---- */
.zone{padding:var(--sec) 0;border-top:1px solid var(--line)}
.zone:first-of-type{border-top:0}
.zhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.zhead h2{font-size:clamp(24px,2.4vw,32px);line-height:1.2}
.zhead .note{margin:0}

/* ---- Zone 1 verdict hero ---- */
.verdict{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;padding:40px 0 var(--sec)}
.vword{font-size:clamp(56px,8vw,104px);line-height:1;font-weight:800;letter-spacing:-.04em;margin:0 0 18px;white-space:nowrap}
.vword .vk{display:inline-block;width:.32em;height:.32em;margin-right:.18em;vertical-align:.12em}
.v-calm .vk{background:var(--green)} .v-watch .vk{background:var(--fg)} .v-elevated .vk{background:var(--yellow);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.v-alert .vk{background:var(--orange)} .v-na .vk{box-shadow:inset 0 0 0 3px var(--fg-3)}
.v-alert .vword-t{color:var(--orange)} .v-na .vword-t{color:var(--fg-3)}
.conf{margin:28px 0 0;max-width:520px}
.conf-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.conf-top b{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.conf-top span{font-size:28px;font-weight:300;letter-spacing:-.02em}
.bar{display:block;height:4px;background:var(--line);margin-top:6px}
.bar i{display:block;height:100%;background:var(--orange)}
.reasons{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.reasons li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--fg-2)}
.side{border-top:4px solid var(--strong);padding-top:20px}
.side h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.legend{list-style:none;margin:0;padding:0}
.legend li{display:flex;gap:10px;font-size:14px;color:var(--fg-2);padding:6px 0}

/* brand honesty material: square status dots */
.sdot{display:inline-block;width:10px;height:10px;flex:0 0 auto;margin-top:7px}
.sdot.ok{background:var(--green)}
.sdot.wip{background:var(--yellow);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.sdot.plan{box-shadow:inset 0 0 0 2px var(--fg-3)}
.sdot.neg{background:var(--orange)}
.cal{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.cal .sdot{margin-top:0;width:8px;height:8px}

/* ---- Zone 2 KPI band (site .kband/.kstat) ---- */
.kband{background:var(--band);color:var(--band-fg);padding:clamp(40px,5vw,64px) 0}
.kband .eyebrow{color:var(--band-fg)} .kband .eyebrow .zn{color:var(--band-2)}
.kstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--band-line)}
.kstat{display:flex;flex-direction:column;gap:8px;padding:28px 24px 28px 0;color:var(--band-fg);text-decoration:none;border-bottom:1px solid var(--band-line);min-width:0}
.kstat + .kstat{padding-left:24px;border-left:1px solid var(--band-line)}
.kstat .v{font-weight:300;font-size:clamp(48px,5.6vw,88px);line-height:1;letter-spacing:-.04em}
.kstat .v small{font-size:.4em;letter-spacing:0;margin-left:4px}
.kstat .k{font-weight:700;font-size:17px}
.kstat .s{font-size:13px;color:var(--band-2);line-height:1.5}
.kstat .s .up{color:var(--band-fg);font-weight:800}
.kstat .bar{background:var(--band-line);margin-top:auto}
.kstat .cal{color:var(--band-2)}
.kstat.na .v{opacity:.45}
a.kstat:hover .k{text-decoration:underline;text-decoration-color:var(--orange)}

/* ---- charts ---- */
.charts{display:grid;grid-template-columns:3fr 2fr;gap:32px}
.chart{min-width:0;border-top:4px solid var(--strong);padding-top:16px}
.chart h3{font-size:15px;margin-bottom:4px}
.chart svg{width:100%;height:auto;display:block;margin-top:12px}
.split{display:flex;height:16px;margin:18px 0 12px;background:var(--line)}
.split i{display:block;height:100%}
.split .p{background:var(--green)} .split .u{background:var(--fg-3);opacity:.45} .split .n{background:var(--bad)}
.splitnums{display:flex;gap:22px;flex-wrap:wrap;font-size:14px}
.splitnums a{text-decoration:none;display:inline-flex;gap:8px;align-items:baseline;min-height:32px}
.splitnums b{font-size:22px;font-weight:300}
.splitnums a:hover span{text-decoration:underline}

/* ---- grid 2 ---- */
.two{display:grid;grid-template-columns:3fr 2fr;gap:48px}
.two > *{min-width:0}

/* ---- story rows (site .tile vocabulary: 4px rule, orange line on hover) ---- */
.stories{list-style:none;margin:0;padding:0;border-top:4px solid var(--strong)}
.story{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 100px;gap:16px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line)}
.story::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--orange);transition:width .3s}
.story:hover::before{width:100%}
.story .rk{font-size:22px;font-weight:300;color:var(--fg-3)}
.story .rk.top{color:var(--fg);font-weight:800}
.story b{display:block;font-size:15.5px;line-height:1.45;font-weight:800}
.story b a{text-decoration:none}
.story b a:hover{text-decoration:underline;text-decoration-color:var(--orange)}
.story small{display:block;font-size:13px;color:var(--fg-3);margin-top:4px}
.story small .hot{color:var(--fg);font-weight:800}
.story svg{width:100px;height:auto}

/* ---- tables (site .data-table rhythm) ---- */
.tscroll{overflow-x:auto}
table.dt{width:100%;border-collapse:collapse;border-top:4px solid var(--strong);font-size:14px}
table.dt th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);font-weight:800;
  padding:12px 10px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
table.dt td{padding:12px 10px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.dt code{overflow-wrap:anywhere}
table.dt .num{text-align:right;font-variant-numeric:tabular-nums}
table.dt tbody tr:hover{background:var(--soft)}
td .st{display:inline-flex;gap:8px;align-items:center}
td .st .sdot{margin-top:0}
.minibar{display:block;height:4px;background:var(--line);margin-top:6px;min-width:60px}
.minibar i{display:block;height:100%;background:var(--fg)}

/* ---- details (Zone 7 accordion) ---- */
details.zone > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px}
details.zone > summary::-webkit-details-marker{display:none}
details.zone > summary h2{font-size:clamp(24px,2.4vw,32px)}
details.zone > summary::after{content:"+";font-size:28px;font-weight:300}
details.zone[open] > summary::after{content:"\2212"}
details.zone .body{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
details.zone .body > *{min-width:0}

/* ---- mention list (site .sres: yellow mark) ---- */
.filters{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center;margin:24px 0 8px}
.filters select{min-height:44px;border:2px solid var(--strong);background:var(--bg);color:var(--fg);font:inherit;font-size:14px;padding:0 10px;border-radius:0}
.sres{list-style:none;margin:0;padding:0;border-top:4px solid var(--strong);overflow-wrap:anywhere}
.sres li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.sres b{display:block;font-size:16px;line-height:1.45;font-weight:800}
.sres b a{text-decoration:none}
.sres b a:hover{text-decoration:underline;text-decoration-color:var(--orange)}
.sres p{margin:6px 0 0;font-size:14px;color:var(--fg-2)}
.sres .meta{font-size:13px;color:var(--fg-3);margin-top:6px}
.sres .pol{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:13px;white-space:nowrap}
.pol-pos{color:var(--green);font-weight:800} .pol-neg{color:var(--bad);font-weight:800} .pol-neu{color:var(--fg-3);font-weight:700}
mark{background:var(--yellow);color:#000;padding:0 2px}

.empty{padding:28px;border:1px solid var(--line);color:var(--fg-2)}
.pagehead{padding:40px 0 8px}
.pagehead h1{font-size:clamp(36px,4.4vw,56px);line-height:1.1}
.pagehead .lede{margin-top:12px}
code{font-family:var(--mono);font-size:13px;background:var(--soft);padding:1px 6px}
pre.cfg{font-family:var(--mono);font-size:13px;background:#000;color:#eaeaea;padding:16px;overflow-x:auto;margin:12px 0 0}

/* ---- footer (site: 4px black top rule, legal honesty line) ---- */
footer.site{border-top:4px solid var(--strong);padding:48px 0 36px;font-size:14px;margin-top:var(--sec)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:32px}
.fbrand .logo{font-size:24px}
.fbrand p{color:var(--fg-2);margin:12px 0 0;max-width:30em}
.vline{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--fg-2);margin-top:12px}
.vline i{width:8px;height:8px;background:var(--green);display:inline-block}
footer.site h2{font-size:15px;font-weight:800;margin:0 0 6px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li a{display:flex;min-height:36px;align-items:center;text-decoration:none;font-weight:600}
footer.site li a:hover{text-decoration:underline}
.legal{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;color:var(--fg-3);font-size:12.5px;line-height:1.75}
.legal p{margin:0 0 8px}
.legal b{color:var(--fg-2)}

/* ---- responsive (site breakpoints 1080 / 760 / 390) ---- */
@media (max-width:1080px){
  .qbox input{width:140px}
  .verdict{grid-template-columns:1fr;gap:32px}
  .charts,.two{grid-template-columns:1fr;gap:40px}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hbar{flex-wrap:wrap;gap:8px 16px;padding-top:10px;padding-bottom:0}
  .mainnav{order:3;width:100%;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--gut));padding:0 var(--gut)}
  .mainnav a{min-height:44px;padding:0 10px}
  .mainnav a:first-child{padding-left:0}
  .acts .cta-s{display:none}
  .qbox input{width:120px}
  header.site{position:static}
  .kstats{grid-template-columns:1fr 1fr}
  .kstat:nth-child(3){padding-left:0;border-left:0}
  details.zone .body{grid-template-columns:1fr}
  .story{grid-template-columns:28px minmax(0,1fr)}
  .story svg{display:none}
  .sres li{grid-template-columns:1fr}
  .sres .pol{flex-direction:row;align-items:center;justify-content:flex-start}
  .utility .right .stamp,.utility .right .mcp{display:none}
}
@media (max-width:390px){
  .logo{font-size:22px}
  .qbox input{width:96px}
  .fgrid{grid-template-columns:1fr}
}

/* ---- print = one-page situation sheet ---- */
@media print{
  .utility,header.site .acts,.mainnav,.scope,.skip,.filters,.alert{display:none !important}
  header.site{position:static;border-bottom:4px solid #000}
  :root{--bg:#fff;--fg:#000;--fg-2:#333;--fg-3:#555;--line:#ccc;--band:#fff;--band-fg:#000;--band-2:#444;--band-line:#999}
  body{font-size:12px}
  .zone,.kband,.verdict{break-inside:avoid;padding:16px 0}
  .kband{border-top:4px solid #000;border-bottom:1px solid #000}
  .vword{font-size:56px}
  details.zone .body{display:grid !important}
  footer.site{margin-top:16px;padding-top:16px}
  a{text-decoration:none}
}

/* ---- v2.1 components: flash, chips, triage, forms, SoV, AI answers ---- */
.mainnav a{padding:4px 10px 0;font-size:14.5px}
.flash{background:var(--fg);color:var(--bg);font-size:14px;font-weight:700}
.flash .wrap{min-height:44px;display:flex;align-items:center}
.flash.err{background:var(--orange);color:#000}
.demo-bar{background:var(--yellow);color:#000;font-size:14px}
.demo-bar .wrap{min-height:40px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.demo-bar a{color:#000;font-weight:800}
.vacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.reasons li.next{color:var(--fg)}
.receipt code{font-size:15px;font-weight:700;background:transparent;padding:0;letter-spacing:.04em}
.notes{list-style:none;margin:10px 0 0;padding:0;font-size:13px;color:var(--fg-2)}
.notes b{display:inline-block;min-width:18px;background:var(--orange);color:#000;text-align:center;margin-right:6px;font-size:11px}
.annot{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.annot input,.form input,.form select,.form textarea,.filters input{min-height:44px;border:2px solid var(--strong);background:var(--bg);color:var(--fg);
  font:inherit;font-size:14px;padding:0 10px;border-radius:0;min-width:0}
.form textarea{padding:8px 10px;resize:vertical}
.annot input[type=text]{flex:1 1 200px}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line);background:var(--bg);color:var(--fg-2);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;list-style:none}
.chip:hover{border-color:var(--strong);color:var(--fg)}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
summary.chip::-webkit-details-marker{display:none}
.acts-cell{white-space:nowrap}
.acts-cell form{display:inline-block;margin:0 4px 0 0}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:24px 0 8px}
.chip.off{opacity:1;cursor:default;background:var(--soft);border:2px dashed var(--fg-3);color:var(--fg-2)}
.bulkbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 12px}
.sres li{grid-template-columns:28px minmax(0,1fr) auto}
.pick{display:flex;align-items:flex-start;padding-top:4px}
.pick input{width:18px;height:18px;accent-color:var(--fg)}
.tri{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;margin-top:10px}
.tri form{margin:0}
details.more{min-width:0;max-width:100%}
details.more[open]{flex-basis:100%}
details.more:not([open])>:not(summary){display:none}
.tagform{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.tagform input{min-height:40px;border:2px solid var(--strong);background:var(--bg);color:var(--fg);font:inherit;font-size:13px;padding:0 8px;flex:1 1 160px;min-width:0;width:0}
.tagchip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;border:1px solid var(--fg-3);padding:0 6px;margin-left:6px;color:var(--fg-2)}
.tagchip.must{border-color:var(--fg);color:var(--fg)} .tagchip.ex{border-color:var(--orange);color:var(--orange)}
.notechip{margin-left:8px;color:var(--fg-2)}
.tstat{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px}
.ts-todo{background:var(--yellow);color:#000} .ts-done{background:var(--green);color:#fff} .ts-ignored{color:var(--fg-3);box-shadow:inset 0 0 0 1px var(--fg-3)} .ts-new{color:var(--fg-3)}
.sres li.st-done,.sres li.st-ignored{opacity:.62}
.qchips .tagchip{margin:0 4px 4px 0}
.acts2{display:flex;gap:6px;align-items:center}
.acts2 form{margin:0}
.form{display:flex;flex-direction:column;gap:12px;border-top:4px solid var(--strong);padding-top:16px;min-width:0}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.form label.check{flex-direction:row;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;min-height:36px}
.form fieldset{border:1px solid var(--line);padding:8px 12px;margin:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.form legend{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.form.inline{flex-direction:row;flex-wrap:wrap;border-top:0;padding-top:0;margin-top:12px}
.form.inline input{flex:1 1 160px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.preview{border:2px solid var(--strong);padding:14px 16px;background:var(--soft)}
.preview .pv b{font-size:32px;font-weight:300}
.preview ol{margin:8px 0 0;padding-left:20px;font-size:14px}
.sov{display:flex;height:44px;background:var(--line);overflow:hidden}
.sov i{display:flex;align-items:center;height:100%;overflow:hidden;white-space:nowrap;font-style:normal;font-size:12px;font-weight:800;padding:0 8px;border-right:2px solid var(--bg)}
.sov-0{background:var(--fg);color:var(--bg)} .sov-1{background:var(--fg-3);color:var(--bg)} .sov-2{background:var(--yellow);color:#000} .sov-3{background:var(--line);color:var(--fg)}
.answers{list-style:none;margin:0;padding:0;border-top:4px solid var(--strong)}
.answers li{padding:20px 0;border-bottom:1px solid var(--line)}
.answers .q{font-weight:800;margin:0 0 8px}
.answers blockquote{margin:0;padding:0 0 0 16px;border-left:4px solid var(--yellow);white-space:pre-wrap;color:var(--fg-2)}
.answers .meta{font-size:13px;color:var(--fg-3);margin:8px 0 0}
@media (max-width:1280px){.qbox input{width:140px}.mainnav a{padding:4px 9px 0}}
@media (max-width:760px){.row3{grid-template-columns:1fr 1fr}.sres li{grid-template-columns:24px minmax(0,1fr)}.sres .pol{grid-column:2}}
@media print{.annot,.vacts,.bulkbar,.tri,.pick,form{display:none !important}}

.onboard{border:4px solid var(--strong);padding:24px 28px;margin-top:28px;background:var(--soft)}
.onboard h2{font-size:clamp(22px,2.2vw,30px);margin-bottom:12px}
.onboard ol{margin:0;padding-left:22px;font-size:15px}
.onboard li{padding:6px 0}
.onboard.guide summary{list-style:none;cursor:pointer}
.onboard.guide summary::-webkit-details-marker{display:none}
.onboard.guide summary h2{margin:4px 0 12px}
.onboard.guide summary h2::after{content:" ▾";font-size:.6em;color:var(--fg-3)}
.onboard.guide:not([open]) summary h2{margin-bottom:0}
.onboard.guide:not([open]) summary h2::after{content:" ▸"}
.onboard .chip{display:inline-block;border:2px solid var(--strong);padding:0 10px;margin:2px 2px;font-weight:800;text-decoration:none;line-height:28px}
.onboard .chip:hover{background:var(--yellow)}
.live-search{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 0 16px}
.live-search .note{margin:0}
.live-search button[disabled]{opacity:.7;cursor:progress}
/* disabled: readable, not faded (opacity made labels unreadable, esp. iOS) - dashed border + muted ink says "off" */
/* !important: a disabled state must beat any variant (.chip.on, .cta-s:hover …) or its colours mix */
.cta-s[disabled],button[disabled]{opacity:1 !important;cursor:not-allowed;background:var(--soft) !important;border:2px dashed var(--fg-3) !important;
  color:var(--fg-2) !important;-webkit-text-fill-color:var(--fg-2) !important;box-shadow:none !important}
input:disabled,select:disabled,textarea:disabled{opacity:1 !important;background:var(--soft) !important;border-style:dashed !important;
  color:var(--fg-2) !important;-webkit-text-fill-color:var(--fg-2) !important}
.filters input:not([type=checkbox]){min-width:0}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* accounts: signed-in identity in the utility bar, inline forms, one-time token reveal */
.utility .who{color:#fff;opacity:.85}
.inline-form{display:inline-flex;margin:0}
.linkbtn{background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.utility .linkbtn{color:#fff}
.reveal{border:2px solid var(--orange);padding:16px 20px;margin:0 0 24px}
.reveal pre{user-select:all;word-break:break-all;white-space:pre-wrap}
ul.plain{padding-left:18px;margin:0 0 16px}
ul.plain li{margin:4px 0}
.dt select{min-height:32px;padding:0 6px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:14px}
/* English nav labels are about twice as wide as Chinese: give them their own row on tablet and desktop */
@media (min-width:761px){
  html[lang|="en"] .hbar{flex-wrap:wrap;column-gap:24px;row-gap:4px;align-content:flex-start;padding-top:12px}
  html[lang|="en"] .mainnav{order:3;flex-basis:100%;margin:0 calc(-1*12px)}
  html[lang|="en"] .mainnav a{min-height:44px}
}
