/* Self-hosted from ./fonts/ (served by the backend's /fonts/{filename}
   route) instead of a fonts.googleapis.com <link> — that link made every
   page load depend on a third-party CDN request succeeding at runtime,
   silently falling back to a system font with no visible error if it
   was blocked (ad-blocker/corporate proxy) or slow. Same bug class
   already fixed in shieldx-platform-frontend and
   shieldx-conversational-ai; this frontend has no build step, so the
   actual .woff2 files are fetched once and committed rather than
   resolved via next/font. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('./fonts/outfit-300.woff2') format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/outfit-400.woff2') format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/outfit-500.woff2') format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/outfit-600.woff2') format('woff2');}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/dm-serif-display-400-normal.woff2') format('woff2');}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url('./fonts/dm-serif-display-400-italic.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/dm-mono-400.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/dm-mono-500.woff2') format('woff2');}
:root{
  /* Type scale. Was 20 sizes from 9-30px including half-pixel steps no
     eye can resolve; these 7 are the only ones now. Add a step only if a
     real role needs one - never a one-off px value. */
  --fs-micro:10px;
  --fs-sm:11px;
  --fs-meta:12px;
  --fs-body:13px;
  --fs-lg:15px;
  --fs-title:20px;
  --fs-hero:28px;

  --ink:#0A0B0D; --panel:#121316; --raised:#181A1E; --raised2:#20232A;
  --line:rgba(255,255,255,0.07); --line2:rgba(255,255,255,0.13);
  --white:#EDEFF2; --mute:#9BA1AC; --faint:#868EA0;
  --brand:#5C88C4; --brand-dark:#4A72A8; --brand-soft:rgba(92,136,196,0.14);
  --amber:#C79A3E; --gold:#B08430; --amber-soft:rgba(199,154,62,0.14); --gold-soft:rgba(176,132,48,0.14);
  --teal:#4FBF95; --teal-soft:rgba(79,191,149,0.12);
  --red:#DD6152; --red-soft:rgba(221,97,82,0.13);
  --serif:'DM Serif Display',Georgia,serif; --sans:'Outfit',system-ui,sans-serif; --mono:'DM Mono',monospace;
}
:root[data-theme="light"]{
  --ink:#F4F5F7; --panel:#FFFFFF; --raised:#EEF0F3; --raised2:#E4E7EC;
  --line:rgba(15,23,42,0.08); --line2:rgba(15,23,42,0.14);
  --white:#161A1F; --mute:#5B6472; --faint:#5E6672;
  --brand:#3D6CB0; --brand-dark:#2F5590; --brand-soft:rgba(61,108,176,0.10);
  --amber:#A9791E; --gold:#8F6A18; --amber-soft:rgba(169,121,30,0.12); --gold-soft:rgba(143,106,24,0.12);
  --teal:#22876A; --teal-soft:rgba(34,135,106,0.10);
  --red:#C1442B; --red-soft:rgba(193,68,43,0.10);
}
:root[data-theme="light"] .lg path[fill="#F5F4F1"]{fill:#17160F}
:root[data-theme="light"] .lg path[fill="#D4A843"]{fill:#8F6A18}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--ink);color:var(--white);font-family:var(--sans);font-weight:300;font-size:var(--fs-lg);line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .15s,color .15s}
::selection{background:var(--brand-soft);color:var(--white)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}

/* ---------- login gate ---------- */
.login-overlay{position:fixed;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;z-index:100}
.login-overlay[hidden]{display:none}
.login-box{width:340px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:32px}
.login-brand{margin-bottom:18px}
.login-brand .lg{height:30px;width:auto;display:block}
.login-box h2{font-family:var(--sans);font-weight:400;font-size:var(--fs-lg);color:var(--mute);margin-bottom:22px}
.login-box .tx-field{margin-bottom:14px}
.login-box button.primary{margin-top:6px}

/* ---------- sidebar ---------- */
.side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:24px 22px 22px;border-bottom:1px solid var(--line)}
/* === ShieldX logotype. To use the official asset, replace the <svg class="u1"> below with the white logotype SVG used in the decisioning demo. === */
.logo{display:flex;align-items:center;gap:10px}
.logo .lg{height:25px;width:auto;display:block}
.eyebrow{margin-top:11px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:2.4px;color:var(--brand-dark);text-transform:uppercase}
/* overflow-y:auto: .side is sticky + height:100vh, so once the nav's own
   content (Analytics/Monitor/Operations/Admin groups, especially with
   Collections expanded) exceeds the viewport height, the
   items below the fold were simply unreachable - nothing to scroll them
   into view with. This lets the nav scroll on its own, independent of
   the main content, while .brand (logo) stays pinned above it. */
.nav{padding:16px 12px;flex:1;overflow-y:auto}
.nav-label{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1.8px;color:var(--faint);text-transform:uppercase;padding:6px 12px 10px}
.nav button{width:100%;display:flex;align-items:center;gap:12px;background:none;border:none;color:var(--mute);font-family:var(--sans);font-size:var(--fs-lg);font-weight:400;padding:11px 12px;border-radius:8px;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.nav button:hover{background:var(--raised);color:var(--white)}
.nav button.on{background:var(--brand-soft);color:var(--white)}
.nav button.on .ic{color:var(--brand)}
.nav .ic{width:17px;height:17px;flex:none;color:var(--faint)}
.nav-parent{padding:11px 12px 2px;font-family:var(--sans);font-size:var(--fs-lg);color:var(--mute)}
.nav button.nav-sub{padding-left:28px;font-size:var(--fs-body);color:var(--faint)}

/* ---------- main ---------- */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 32px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(10,10,10,.82);backdrop-filter:blur(10px);z-index:5}
:root[data-theme="light"] .topbar{background:rgba(247,246,243,.86)}
.topbar h1{font-family:var(--serif);font-size:var(--fs-hero);font-weight:400;letter-spacing:.2px}
.topbar .sub{color:var(--mute);font-size:var(--fs-body);margin-top:2px}
.search-wrap{position:relative;flex:1;max-width:380px}
.search-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--faint);pointer-events:none}
.search-input{width:100%;background:var(--raised);border:1px solid var(--line2);border-radius:20px;padding:9px 14px 9px 36px;color:var(--white);font-family:var(--sans);font-size:var(--fs-body);font-weight:300}
.search-input::placeholder{color:var(--faint)}
.search-input:focus{outline:2px solid var(--brand);outline-offset:1px}
.badges{display:flex;align-items:center;gap:10px;flex:none}
.badge{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.4px;padding:6px 11px;border:1px solid var(--line2);border-radius:20px;color:var(--mute);white-space:nowrap}
.badge-sev.ok{border-color:rgba(93,202,165,.4);color:var(--teal)}
.badge-sev.warn{border-color:rgba(199,154,62,.4);color:var(--amber)}
.badge-sev.bad{border-color:rgba(224,101,78,.4);color:var(--red)}
button.badge{background:none;cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm)}
button.badge:hover{background:var(--raised);border-color:var(--line2)}
.notif-wrap{position:relative}
.notif-btn{position:relative;display:inline-flex;align-items:center;padding:7px 10px}
.notif-count{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-family:var(--mono);font-size:var(--fs-micro);line-height:1;padding:3px 4px;border-radius:8px;min-width:14px;text-align:center}
.notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-height:420px;overflow-y:auto;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:30;padding:8px}
.notif-panel[hidden]{display:none}
.notif-head{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1.2px;color:var(--faint);text-transform:uppercase;padding:8px 10px 10px}
.notif-item{padding:9px 10px;border-radius:8px;cursor:pointer;text-align:left}
.notif-item:hover{background:var(--raised)}
.notif-item .nref{font-family:var(--mono);font-size:var(--fs-sm);color:var(--brand)}
.notif-item .ntxt{font-size:var(--fs-meta);margin-top:2px;color:var(--white)}
.account-btn{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px}
.avatar-circle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-family:var(--mono);font-size:var(--fs-sm);font-weight:600;text-transform:uppercase}
.account-menu-head{padding:6px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.account-menu-head .amh-user{font-size:var(--fs-body);color:var(--white)}
.account-menu-head .amh-inst{font-size:var(--fs-sm);color:var(--faint);margin-top:2px}
.account-menu-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 10px;border-radius:8px;cursor:pointer;text-align:left;background:none;border:none;font-family:inherit;font-size:var(--fs-meta);color:var(--white)}
.account-menu-item:hover{background:var(--raised)}
.view{padding:28px 32px 56px;max-width:1180px}
.view[hidden]{display:none}
.settings-layout{display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:start}
.settings-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:104px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px}
.settings-nav button{width:100%;display:block;background:none;border:none;color:var(--mute);font-family:var(--sans);font-size:var(--fs-body);padding:9px 12px;border-radius:8px;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.settings-nav button:hover{background:var(--raised);color:var(--white)}
.settings-nav button.on{background:var(--brand-soft);color:var(--white)}
.settings-content{min-width:0}
@media (max-width:760px){.settings-layout{grid-template-columns:1fr}.settings-nav{flex-direction:row;flex-wrap:wrap;position:static}}

/* ---------- api status banner ---------- */
.apibanner{display:flex;align-items:center;gap:12px;padding:11px 32px;background:var(--red-soft);border-bottom:1px solid rgba(224,101,78,.35);color:var(--white);font-size:var(--fs-body)}
.apibanner[hidden]{display:none}
.apibanner .dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;box-shadow:0 0 0 3px rgba(224,101,78,.2)}
.apibanner b{font-weight:500}
.apibanner button{margin-left:auto;background:none;border:1px solid var(--line2);color:var(--white);font-family:var(--sans);font-size:var(--fs-meta);padding:5px 12px;border-radius:16px;cursor:pointer}
.apibanner button:hover{background:var(--raised)}

/* ---------- kpis ---------- */
.kpis{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-bottom:26px}
.kpi .k-sub-link{cursor:pointer}
.kpi .k-sub-link:hover{color:var(--white);text-decoration:underline}
.k-delta{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:var(--fs-sm);margin-left:8px;padding:2px 7px;border-radius:20px;vertical-align:middle}
.k-delta.good{background:var(--teal-soft);color:var(--teal)}
.k-delta.bad{background:var(--red-soft);color:var(--red)}
.k-delta.flat{background:var(--raised);color:var(--faint)}
.kpi{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--faint);border-radius:12px;padding:16px 16px 15px}
.kpi.clickable{cursor:pointer;transition:border-top-color .12s,border-right-color .12s,border-bottom-color .12s,background .12s,transform .12s}
.kpi.clickable:hover{border-top-color:var(--mute);border-right-color:var(--mute);border-bottom-color:var(--mute);background:var(--raised);transform:translateY(-1px)}
.kpi .k-lab{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1.2px;color:var(--faint);text-transform:uppercase;margin-bottom:9px}
.kpi .k-val{font-family:var(--serif);font-size:var(--fs-hero);line-height:1;letter-spacing:.3px}
.kpi .k-val small{font-size:var(--fs-lg);color:var(--mute);font-family:var(--sans)}
.kpi .k-sub{font-size:var(--fs-meta);color:var(--mute);margin-top:7px}
/* A second .k-sub straight after the first is a continuation line (the
   PTP funnel's missed/pending under its honor rate), so it sits tighter
   than the 7px that separates a k-sub from the value above it. */
.kpi .k-sub+.k-sub{margin-top:4px}

/* ---------- My account rows. The card around these predates the CSP work
   and sets its layout inline; these classes exist so the MFA reset added
   below does not deepen that, and so the same shape is reusable when the
   older rows are eventually converted. ---------- */
.acct-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.acct-row .acct-grow{flex:1;min-width:150px}
.acct-row .acct-btn{width:auto;margin-top:0;padding:0 16px;white-space:nowrap}
.acct-msg{font-size:var(--fs-meta);margin-top:8px;min-height:15px}

/* Toggled by JS, so deliberately NOT folded into a generated utility class.
   These elements were hidden with an inline display:none and revealed with
   .style.display='' - which removes the inline declaration and falls back to
   the stylesheet. Once that fallback IS a rule, clearing stops revealing
   anything and the app boots to a blank page. Found exactly that way. */
.is-hidden.is-hidden{display:none}
.tx-err-slot.tx-err-slot{color:var(--red)}

/* Export control in a card header. margin-left:auto pushes it to the
   right edge, matching the chip Conversations has carried since before
   any of the other exports existed. */
.export-chip{margin-left:auto}
.export-msg{font-size:var(--fs-sm);color:var(--faint);margin-left:10px}
.kpi.accent{border-left-color:var(--brand)}
.kpi.accent .k-val{color:var(--brand)}
.kpi.good{border-left-color:var(--teal)}
.kpi.good .k-val{color:var(--teal)}
.kpi.warn{border-left-color:var(--amber)}
.kpi.warn .k-val{color:var(--amber)}
.kpi.alert{border-left-color:var(--red)}
.kpi.alert .k-val{color:var(--red)}

/* ---------- needs-a-decision panel (Pulse) ---------- */
.dq-row{display:flex;gap:14px;align-items:flex-start;padding:13px 4px;border-top:1px solid var(--line);cursor:pointer;transition:background .12s;margin:0 -4px;border-radius:6px}
.dq-row:first-child{border-top:none}
.dq-row:hover{background:var(--raised)}
.dq-sev{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px}
.dq-sev.high{background:var(--red)}
.dq-sev.med{background:var(--amber)}
.dq-body{flex:1;min-width:0;padding:0 4px}
.dq-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.dq-kind{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.6px;text-transform:uppercase;padding:2px 8px;border-radius:5px}
.dq-kind.compliance{background:var(--red-soft);color:var(--red)}
.dq-kind.pattern{background:var(--amber-soft);color:var(--amber)}
.dq-kind.vendor{background:var(--brand-soft);color:var(--brand)}
.dq-kind.roll{background:var(--raised2);color:var(--mute)}
.dq-title{font-size:var(--fs-body);color:var(--white);font-weight:400}
/* Customer Timeline event-type badges - same pill language as .dq-kind,
   own namespace since the two never appear on the same page. cdr is
   deliberately the quietest (--mute on --raised2) - it's the noisiest,
   least individually-meaningful event type, not one to visually compete
   with an actual call/payment. */
.ev-kind{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.6px;text-transform:uppercase;padding:2px 8px;border-radius:5px;flex:none}
.ev-kind.call{background:var(--brand-soft);color:var(--brand)}
.ev-kind.payment{background:var(--teal-soft);color:var(--teal)}
.ev-kind.cdr{background:var(--raised2);color:var(--mute)}
.ev-kind.allocation{background:var(--gold-soft);color:var(--gold)}
.ev-kind.vendor_claim{background:var(--amber-soft);color:var(--amber)}
/* Brief flash on a card that just got new content from a click elsewhere
   on the page (e.g. Cost &amp; Claims' Claim detail card) - scrollIntoView
   alone doesn't make it obvious content actually changed if the card was
   already fully in view. */
@keyframes flash-highlight{0%{background:var(--brand-soft)}100%{background:transparent}}
.flash-highlight{animation:flash-highlight 1.1s ease-out}
.dq-why{font-size:var(--fs-meta);color:var(--mute);margin-top:3px}
.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:760px){.rings{grid-template-columns:1fr}}
.ring-item{display:flex;align-items:center;gap:14px;cursor:pointer;border-radius:10px;padding:6px;margin:-6px;transition:background .12s}
.ring-item:hover{background:var(--raised)}
.ring-item svg{flex:none}
.ring-label{font-size:var(--fs-body);color:var(--white);font-weight:400}
.ring-sub{font-size:var(--fs-sm);color:var(--faint);margin-top:2px}
.voc-row{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:center}
@media (max-width:760px){.voc-row{grid-template-columns:1fr}}

/* ---------- curve - a value moving across an ordered axis (attempt
   number, week, bucket). The app ships no charting library and doesn't
   need one for a handful of points; a shared inline-SVG component is
   cheaper than a dependency and themes for free off the same tokens.
   Everything below is set with SVG presentation attributes rather than
   a style attribute, so reusing this adds nothing to the 1,176 inline
   style attributes currently holding CSP on 'unsafe-inline'. ---------- */
.curve{width:100%;height:auto;display:block;margin:4px 0 2px;overflow:visible}
.curve .cv-grid{stroke:var(--line);stroke-width:1}
.curve .cv-area{fill:var(--brand);opacity:.12}
.curve .cv-line{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.curve .cv-dot{fill:var(--panel);stroke:var(--brand);stroke-width:2}
.curve .cv-dot-last{fill:var(--gold);stroke:var(--gold)}
/* No font-size here on purpose. Inside a viewBox, a CSS font-size resolves
   in USER UNITS, not CSS pixels, so the type scale's 10px rendered ~3x too
   big once the SVG was stretched to the card width. The text elements carry
   a unitless font-size attribute instead, and the viewBox below is sized so
   one user unit is about one pixel at a typical card width. */
.curve .cv-tick{fill:var(--faint);font-family:var(--mono)}
.curve .cv-val{fill:var(--mute);font-family:var(--mono)}
.curve-legend{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--fs-micro);color:var(--faint);margin-bottom:10px}

/* ---------- panels ---------- */
.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px}
/* gap, not just space-between: in a narrow card (the Products grid) both
   the title and the meta wrap, and with nothing between them the wrapped
   title runs straight into the meta text. The meta is also right-aligned
   so its own second line stays under the first rather than drifting left
   into the gap. */
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:18px}
.card-h h2{font-family:var(--serif);font-size:var(--fs-title);font-weight:400}
.card-h .meta{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);letter-spacing:.5px;text-align:right}
.section-eye{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:2px;color:var(--brand-dark);text-transform:uppercase;margin-bottom:13px}


/* ---------- bars list ---------- */
/* ---------- rate cell - a percentage with a bar under it, for table
   columns that are all 0-100 and otherwise scan as a wall of digits. The
   bar carries the comparison (who is low, who is high, at a glance); the
   number stays because the exact value still matters and is what gets
   read aloud in a review. Colour uses the same 75/50 band as the ring
   gauges rather than a new vocabulary. Width is set from data-w by JS
   after render, the pattern the funnel already uses, so this adds no
   inline style attributes and nothing to the CSP finding. ---------- */
.cbar{display:block;height:3px;border-radius:2px;background:var(--line);margin-top:5px;overflow:hidden}
.cbar i{display:block;height:100%;width:0;border-radius:2px;background:var(--faint);transition:width .5s ease}
.cbar i[data-band="good"]{background:var(--teal)}
.cbar i[data-band="mid"]{background:var(--amber)}
.cbar i[data-band="bad"]{background:var(--red)}

.bars{display:flex;flex-direction:column;gap:13px}
.bar-row .br-top{display:flex;justify-content:space-between;font-size:var(--fs-body);margin-bottom:6px}
.bar-row .br-top span:last-child{font-family:var(--mono);color:var(--mute)}
.bar-row.clickable{cursor:pointer;border-radius:6px;transition:background .12s;margin:0 -6px;padding:0 6px}
.bar-row.clickable:hover{background:var(--raised)}
.lchip.clickable{cursor:pointer;transition:border-color .12s,background .12s}
.lchip.clickable:hover{border-color:var(--mute);background:var(--raised)}
.track{height:8px;background:var(--raised);border-radius:5px;overflow:hidden}
.track i{display:block;height:100%;border-radius:5px;width:0;background:var(--brand);transition:width .9s cubic-bezier(.22,1,.36,1)}
.track i.t2{background:var(--teal)}

/* lang chips */
.langs{display:flex;flex-wrap:wrap;gap:8px}
.lchip{font-family:var(--mono);font-size:var(--fs-meta);padding:6px 11px;border:1px solid var(--line);border-radius:20px;color:var(--mute)}
.lchip b{color:var(--brand);font-weight:500;margin-left:5px}

/* ---------- calls table ---------- */
.filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.4px;padding:7px 13px;border:1px solid var(--line2);border-radius:20px;color:var(--mute);background:none;cursor:pointer;transition:.15s}
.chip:hover{color:var(--white);border-color:var(--mute)}
.chip.on{background:var(--white);color:var(--ink);border-color:var(--white);font-weight:500}
.chip.ghost-chip{color:var(--teal);border-color:rgba(93,202,165,.35)}
.chip.ghost-chip:hover{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--white)}
.tbl th.sortable .arrow{display:inline-block;margin-left:4px;opacity:.6;font-size:var(--fs-micro)}
.tbl{width:100%;border-collapse:collapse}
.tbl thead th{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);text-align:left;padding:0 14px 12px;font-weight:400}
.tbl tbody tr{border-top:1px solid var(--line);cursor:pointer;transition:background .12s}
.tbl tbody tr:hover{background:var(--raised)}
.tbl-static tbody tr{cursor:default}
.tbl-static tbody tr:hover{background:none}
.tbl tbody tr.sel{background:var(--brand-soft)}
.tbl td{padding:14px;font-size:var(--fs-body);vertical-align:middle;font-variant-numeric:tabular-nums}
/* Numbers were rendering in three different faces: serif for the hero KPI
   values, mono for refs/DPD/scores, and - by omission rather than decision -
   the body sans for every other table cell, since .tbl td set no
   font-family at all. So a mono column header sat over a mono ref column
   beside sans figures, in one table.

   Resolved as a rule about ROLE rather than one face for everything:
   mono for identifiers and codes (.ref, .dpd - already the case), serif for
   the single hero figure per card (.kpi .k-val - a display size nobody
   reads down a column), and the body sans for quantities in tables.

   Blanket mono was tried and rejected on evidence: DM Mono's zero is
   SLASHED as its default glyph, and neither font-feature-settings:'zero' 0
   nor font-variant-numeric:normal turns it off - it is not an optional
   feature. Every currency figure in the product would have carried it, and
   a slashed zero in a vendor's billing table reads as a defect.

   tabular-nums is the half that actually mattered and is free. Outfit is
   proportional: measured at 40px, "111111" renders 81.13px against
   "888888" at 132.48px, so no column of figures has ever lined up. With
   tabular-nums both are 141.61px. It was previously set on exactly two
   rules in the entire file. */
.tbl .ref{font-family:var(--mono);color:var(--white)}
.tbl .dpd{font-family:var(--mono);color:var(--mute);font-size:var(--fs-meta)}
.pill{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.6px;padding:3px 9px;border-radius:6px;text-transform:uppercase;white-space:nowrap}
.pill.done{background:var(--teal-soft);color:var(--teal)}
.pill.skip{background:rgba(255,255,255,.06);color:var(--faint)}
.pill.ok{background:var(--teal-soft);color:var(--teal)}
.pill.warn{background:var(--amber-soft);color:var(--amber)}
.pill.bad{background:var(--red-soft);color:var(--red)}
.entag{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.4px;color:var(--teal);border:1px solid rgba(93,202,165,.4);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.score{font-family:var(--mono);font-size:var(--fs-body)}
.score.ok{color:var(--teal)} .score.warn{color:var(--amber)} .score.bad{color:var(--red)}
.disp{color:var(--mute);font-size:var(--fs-meta)}

/* ---------- detail drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s;z-index:20}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:560px;max-width:94vw;background:var(--panel);border-left:1px solid var(--line2);transform:translateX(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);z-index:21;display:flex;flex-direction:column}
.drawer.show{transform:none}

/* ---------- audio playback ---------- */
.playbtn{background:var(--raised2);border:1px solid var(--line2);color:var(--brand);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:var(--fs-sm);line-height:1;display:inline-flex;align-items:center;justify-content:center}
.playbtn:hover{background:var(--brand-soft);border-color:var(--brand)}
.audiobar{position:fixed;left:248px;right:0;bottom:0;display:flex;align-items:center;gap:16px;padding:12px 24px;background:var(--panel);border-top:1px solid var(--line2);z-index:22;box-shadow:0 -6px 24px rgba(0,0,0,.35)}
.audiobar[hidden]{display:none}
.audiobar-label{font-family:var(--mono);font-size:var(--fs-meta);color:var(--brand);white-space:nowrap}
.audiobar audio{flex:1;height:36px}
.audiobar .x{background:none;border:none;color:var(--mute);font-size:var(--fs-title);cursor:pointer;line-height:1;padding:0 4px}
.audiobar .x:hover{color:var(--white)}
@media (max-width:900px){.audiobar{left:0}}
.dr-head{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.dr-head .ref{font-family:var(--mono);font-size:var(--fs-body);color:var(--brand);letter-spacing:.5px}
.dr-head h3{font-family:var(--serif);font-size:var(--fs-title);font-weight:400;margin-top:5px}
.dr-head .disp-line{font-size:var(--fs-meta);color:var(--mute);margin-top:5px}
.dr-head .x{background:none;border:1px solid var(--line2);color:var(--mute);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:var(--fs-lg);flex:none}
.dr-head .x:hover{color:var(--white);border-color:var(--mute)}
.dr-body{padding:22px 26px;overflow-y:auto;flex:1}
.dr-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.dr-glance{display:flex;align-items:center;gap:10px;padding:13px 26px;background:var(--raised);border-bottom:1px solid var(--line);flex-wrap:wrap}
.dr-glance .glance-line{font-size:var(--fs-body);color:var(--white)}
.dr-glance .pill{font-size:var(--fs-micro);padding:4px 10px;flex:none}
.dr-glance .glance-scores{font-size:var(--fs-meta);color:var(--mute);white-space:nowrap}
.dr-glance .glance-scores .score{font-size:var(--fs-body);font-weight:600;margin-right:3px}
.dr-block{margin-bottom:24px}
.dr-block .be{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1.6px;color:var(--brand-dark);text-transform:uppercase;margin-bottom:11px}
.summary{font-size:var(--fs-lg);color:var(--white);line-height:1.65}
.transcript{display:flex;flex-direction:column;gap:11px}
.turn{display:flex;gap:11px;align-items:flex-start}
.turn .who{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.6px;text-transform:uppercase;padding:3px 7px;border-radius:5px;flex:none;margin-top:2px;min-width:64px;text-align:center}
.turn.agent .who{background:var(--brand-soft);color:var(--brand)}
.turn.cust .who{background:rgba(255,255,255,.06);color:var(--mute)}
.turn .txt{font-size:var(--fs-body);color:var(--white);line-height:1.55}
.turn.flag{background:var(--red-soft);border-radius:8px;padding:9px 11px;margin:0 -11px}
.turn.flag .txt{color:#f0b3a5}
.turn .txt{flex:1}
.turn-edit-btn{flex:none;background:none;border:1px solid var(--line2);color:var(--mute);width:22px;height:22px;border-radius:6px;cursor:pointer;font-size:var(--fs-sm);line-height:1;margin-top:1px}
.turn-edit-btn:hover{color:var(--brand);border-color:var(--brand)}
.txt-edit{width:100%;background:var(--raised);border:1px solid var(--line2);border-radius:7px;color:var(--white);font-family:var(--sans);font-size:var(--fs-body);line-height:1.5;padding:8px 10px;resize:vertical}
.turn-edit-actions{display:flex;align-items:center;gap:8px;margin-top:6px}
.corrected-badge{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.4px;text-transform:uppercase;color:var(--teal);border:1px solid rgba(93,202,165,.3);border-radius:9px;padding:1px 7px;margin-left:8px;cursor:help}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--mono);font-size:var(--fs-sm);padding:5px 10px;border-radius:7px;background:var(--raised);color:var(--mute);border:1px solid var(--line)}
.tag.voc{border-color:rgba(93,202,165,.3);color:var(--teal)}
.tag.approach{border-color:rgba(92,136,196,.35);color:var(--brand)}
.flagrow{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--red-soft);border:1px solid rgba(224,101,78,.3);border-radius:9px;margin-bottom:9px}
.flagrow .sev{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.6px;padding:3px 7px;border-radius:5px;background:var(--red);color:#fff;text-transform:uppercase;flex:none}
.flagrow .ftxt{font-size:var(--fs-body)}
.flagrow .ftxt small{display:block;color:var(--mute);font-size:var(--fs-sm);font-family:var(--mono);margin-top:2px}
.flagrow.ok{background:var(--teal-soft);border-color:rgba(93,202,165,.3)}
.flagrow.ok .sev{background:var(--teal);color:#04241b}
.flagrow.info{background:var(--raised2);border-color:var(--line2)}
.flagrow.info .sev{background:var(--faint);color:var(--panel)}
.flagrow.ai{background:var(--amber-soft);border-color:rgba(199,154,62,.35)}
.flagrow.ai .sev{background:var(--amber);color:#2a1f04}
/* Medium severity gets its own color (gold), distinct from both high-severity
   red and the unrelated "AI · unconfirmed" amber - a "High" and a "Medium"
   violation used to render pixel-identical (both plain .flagrow/red), which
   is exactly the "everything looks like the same fire" problem a severity
   section exists to prevent. */
.flagrow.med{background:var(--gold-soft);border-color:rgba(176,132,48,.35)}
.flagrow.med .sev{background:var(--gold);color:#fff}
/* Timeline row - a dedicated component for Customer Timeline's contact-
   attempt feed, distinct from .flagrow above: .flagrow is a single dense
   line (fine for a short alert/tag), but a contact attempt genuinely
   carries 3 different kinds of information (when, what happened, who/
   billing detail) that read as one illegible run-on line when crammed into
   one - this gives each its own row/weight instead. */
.tl-row{display:flex;align-items:flex-start;gap:14px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:9px;margin-bottom:8px}
.tl-row.clickable{cursor:pointer;transition:background .12s,border-color .12s}
.tl-row.clickable:hover{background:var(--raised);border-color:var(--line2)}
.tl-when{flex:none;width:72px;padding-top:1px}
.tl-when .tl-date{font-family:var(--mono);font-size:var(--fs-meta);font-weight:600;color:var(--white);line-height:1.3}
.tl-when .tl-time{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);line-height:1.3;margin-top:1px}
.tl-kind{flex:none;margin-top:1px}
.tl-body{flex:1;min-width:0}
.tl-main{font-size:var(--fs-body);color:var(--white);line-height:1.5}
.tl-main .pill{margin-left:6px}
.tl-sub{font-size:var(--fs-meta);color:var(--mute);margin-top:4px}
.tl-annot{font-size:var(--fs-sm);color:var(--faint);font-family:var(--mono);margin-top:5px}
.tl-action{flex:none;font-size:var(--fs-sm);color:var(--brand);white-space:nowrap;margin-top:2px}
/* Over-contact warning - same left-accent-border convention .kpi.alert
   already uses for severity, applied here to a contacted-account row that
   crossed the over-contact threshold (>3 contacts), replacing the old
   flagrow's full red background (too heavy for a list where most rows are
   perfectly normal - a border accent flags the few that need a second look
   without making the whole list read as an alert). */
.tl-row.tl-warn{border-left:3px solid var(--red);background:var(--red-soft)}
.advisory-block{border:1px dashed var(--line2);border-radius:9px;padding:12px 13px;margin-top:10px}
.advisory-block .adv-lab{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.8px;color:var(--amber);text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.advisory-block .adv-lab::before{content:"✦";font-size:var(--fs-sm)}
.advisory-block .adv-cat{display:inline-block;background:var(--amber-soft);color:var(--amber);font-size:var(--fs-meta);padding:3px 9px;border-radius:6px;margin:0 6px 6px 0}
.advisory-block .adv-cat.ok{background:var(--teal-soft);color:var(--teal)}
.advisory-block .adv-cat.bad{background:var(--red-soft);color:var(--red)}
.advisory-block .adv-rationale{font-size:var(--fs-meta);color:var(--mute);margin-top:6px}
.advisory-block .adv-note{font-size:var(--fs-sm);color:var(--faint);margin-top:8px;font-style:italic}
.qa{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qa-item{background:var(--raised);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.qa-item .ql{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.8px;color:var(--faint);text-transform:uppercase;margin-bottom:7px}
.qa-item .qv{font-family:var(--serif);font-size:var(--fs-title)}
.qa-item .qv.ok{color:var(--teal)} .qa-item .qv.warn{color:var(--amber)} .qa-item .qv.bad{color:var(--red)}

/* scorecards */
.sc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
/* .sc-grid's own display:grid otherwise beats the browser's built-in
   [hidden]{display:none} rule - author CSS always overrides the
   user-agent stylesheet regardless of specificity, so a plain `hidden`
   attribute on a .sc-grid element silently does nothing without this. */
.sc-grid[hidden]{display:none}
.scard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.scard.clickable{cursor:pointer;transition:border-color .12s,background .12s}
.scard.clickable:hover{border-color:var(--mute);background:var(--raised)}
.scard .st{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.scard .sn{font-family:var(--mono);font-size:var(--fs-body);color:var(--white)}
.scard .sg{font-family:var(--serif);font-size:var(--fs-hero)}
.scard .sg.ok{color:var(--teal)} .scard .sg.warn{color:var(--amber)} .scard .sg.bad{color:var(--red)}
.metr{display:flex;justify-content:space-between;font-size:var(--fs-meta);color:var(--mute);padding:5px 0;border-top:1px solid var(--line)}
.metr b{font-family:var(--mono);color:var(--white);font-weight:500}

/* ---------- info-tip: click/hover-reliable tooltip, doesn't depend on the
   browser's native title-attribute dwell delay (found unreliable live) ---------- */
.info-tip{position:relative}
.info-tip .info-tip-bubble{
  display:none;position:absolute;left:0;bottom:calc(100% + 8px);
  width:300px;max-width:calc(100vw - 60px);
  /* Fixed dark-on-light regardless of page theme - a tooltip needs to read
     as a floating overlay, not blend into the page; var(--ink)/var(--white)
     invert per-theme (by design, for the .chip.on accent trick) which made
     this wash out to near-invisible contrast in light mode. */
  background:#1a1c20;color:#f4f5f7;
  font-size:var(--fs-sm);line-height:1.45;font-family:var(--sans);font-weight:400;
  text-transform:none;letter-spacing:normal;
  padding:10px 12px;border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  z-index:80;
}
.info-tip:hover .info-tip-bubble,.info-tip:focus-within .info-tip-bubble{display:block}

/* ---------- Agent DNA card - a distinct feature, not another .dr-block ---------- */
.dna-card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:12px;padding:18px 20px}
.dna-card .dna-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.dna-card .dna-title{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:1.4px;color:var(--brand);text-transform:uppercase}
.dna-row{padding:9px 0}
.dna-row+.dna-row{border-top:1px solid var(--line)}
.dna-row-top{display:grid;grid-template-columns:170px 1fr;gap:12px;align-items:center}
.dna-row .dna-label{font-size:var(--fs-meta)}
.dna-row .dna-count{font-family:var(--mono);font-size:var(--fs-body);text-align:right}
.dna-compare{display:flex;flex-direction:column;gap:5px}
.dna-compare-row{display:grid;grid-template-columns:40px 1fr 26px;gap:8px;align-items:center}
.dna-compare-row .dna-tag{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.5px;color:var(--faint);text-transform:uppercase}
.track-sm{height:5px}
@media(max-width:760px){.dna-row-top{grid-template-columns:1fr}}

/* ---------- Operational metrics zone: Performance + this cycle + productivity, one contained group instead of three anonymous card rows ---------- */
.metrics-zone{background:var(--raised);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.metrics-zone .zone-title{font-family:var(--sans);font-weight:600;font-size:var(--fs-lg);color:var(--white);margin-bottom:3px}
.metrics-zone .zone-sub{font-size:var(--fs-meta);color:var(--mute);margin-bottom:20px}
.metrics-zone .subhead{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1.2px;color:var(--faint);text-transform:uppercase;margin:22px 0 12px}
.metrics-zone .subhead:first-of-type{margin-top:0}
.metrics-zone .kpi{background:var(--panel)}
.status-banner{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:10px}
.status-banner .sicon{font-size:var(--fs-lg);flex:none}
.status-banner .stext{font-size:var(--fs-meta);line-height:1.5}
.status-banner .stext b{font-family:var(--mono)}
.status-banner .scycle{font-size:var(--fs-sm);color:var(--faint);margin-top:2px}
.status-banner.risk{background:var(--red-soft)}
.status-banner.risk .stext{color:var(--red)}
.status-banner.ok{background:var(--teal-soft)}
.status-banner.ok .stext{color:var(--teal)}

/* ---------- ring gauges - a value out of a fixed max, shown as a filled ring instead of a bare number ---------- */
.ringwrap{position:relative;flex:none}
.ringwrap svg{position:absolute;top:0;left:0;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:var(--line2)}
.ring-fill{fill:none;stroke-linecap:round}
.ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ring-center .rv{font-family:var(--serif)}
.ring-tick{position:absolute;left:50%;top:0;width:2px;background:var(--white);margin-left:-1px;border-radius:1px}
/* transform-origin is set inline per instance (see _ringGauge()) since it must match that ring's own center, which varies with size */

/* ---------- peer-comparison scorecard row - a divider-separated strip of ring gauges, not repeated bordered boxes ---------- */
.peer-score-row{display:flex;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.peer-score-item{flex:1;min-width:130px;padding:0 16px;border-left:1px solid var(--line)}
.peer-score-item:first-child{border-left:none;padding-left:0}
@media(max-width:700px){.peer-score-item{min-width:45%;border-left:none;border-top:1px solid var(--line);padding:12px 0 0;margin-top:12px}.peer-score-item:first-child{border-top:none;margin-top:0;padding-top:0}}

@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto}
  .brand{border-bottom:none;border-right:1px solid var(--line);padding:16px}
  .nav{display:flex;padding:8px}.nav-label{display:none}.nav button{white-space:nowrap}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:560px){.kpis{grid-template-columns:repeat(2,1fr)}.view{padding:20px}.topbar{padding:16px 20px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---------- transcribe panel ---------- */
.tx-field{margin-bottom:16px}
.tx-field>label{display:block;font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.6px;color:var(--mute);text-transform:uppercase;margin-bottom:8px}
.tx-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.adv-details{border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.adv-details summary{cursor:pointer;font-size:var(--fs-body);font-weight:500;list-style:none;display:flex;align-items:center;gap:8px}
.adv-details summary::-webkit-details-marker{display:none}
.adv-details summary::before{content:"▸";font-size:var(--fs-sm);color:var(--faint);transition:transform .12s}
.adv-details[open] summary::before{transform:rotate(90deg)}
select,.txt{width:100%;background:var(--raised);border:1px solid var(--line);color:var(--white);font-family:var(--sans);font-size:var(--fs-lg);padding:11px 12px;border-radius:9px;cursor:pointer}
select:focus,.txt:focus{border-color:var(--brand)}
.txt::placeholder{color:var(--faint)}
.drop{border:1.5px dashed var(--line2);border-radius:12px;padding:24px;text-align:center;cursor:pointer;transition:.15s;margin-bottom:12px}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-soft)}
.drop-in{display:flex;align-items:center;justify-content:center;gap:14px}
.drop-ic{width:38px;height:38px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:var(--fs-title);flex:none}
.drop-in b{font-weight:500}.drop-in small{color:var(--faint);font-family:var(--mono);font-size:var(--fs-sm)}
button.primary{width:100%;background:var(--brand);color:#fff;border:none;font-family:var(--sans);font-weight:600;font-size:var(--fs-lg);padding:12px;border-radius:9px;cursor:pointer;transition:.15s}
button.primary:hover{background:var(--brand-dark)}
button.primary:disabled{opacity:.5;cursor:not-allowed}
button.ghost{width:100%;background:var(--raised);color:var(--white);border:1px solid var(--line2);font-family:var(--sans);font-size:var(--fs-lg);padding:11px;border-radius:9px;cursor:pointer;margin-top:10px;transition:.15s}
button.ghost:hover{border-color:var(--brand);color:var(--brand)}
button.ghost:disabled{opacity:.45;cursor:not-allowed;color:var(--mute)}
button.ghost:disabled:hover{border-color:var(--line2);color:var(--mute)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.settings-row:first-of-type{border-top:none;padding-top:2px}
.settings-row.clickable{cursor:pointer;margin:0 -8px;padding:12px 8px;border-radius:6px;transition:background .12s}
.settings-row.clickable:hover{background:var(--raised)}
.sr-name{font-size:var(--fs-lg);color:var(--white)}
.sr-sub{font-size:var(--fs-meta);color:var(--faint);margin-top:2px;line-height:1.5}
/* Opt back into mono for the handful of .sr-sub values that really are
   identifiers or paths rather than sentences. */
.sr-sub.mono,.mono{font-family:var(--mono)}
/* Fact bar: the few figures a reader needs before anything else -
   large, tabular, above the detail rather than buried inside it. */
.factbar{display:flex;flex-wrap:wrap;gap:34px;padding:16px 0 22px;border-bottom:1px solid var(--line);margin-bottom:20px}
.fact-lab{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.fact-val{font-size:var(--fs-title);color:var(--white);margin-top:5px;font-variant-numeric:tabular-nums}
.fact-sub{font-size:var(--fs-meta);color:var(--mute);margin-top:1px;font-variant-numeric:tabular-nums}
.case-title{font-family:var(--mono);font-size:var(--fs-hero);color:var(--white);letter-spacing:.02em;margin-top:4px}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line2);border-top-color:var(--brand);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}
.tx-out{font-family:var(--sans);font-size:var(--fs-lg);line-height:1.7;color:var(--white);background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:16px;white-space:pre-wrap;word-break:break-word}
.tx-err{color:var(--red);background:var(--red-soft);border:1px solid var(--red);border-radius:10px;padding:14px;font-size:var(--fs-lg)}
.tx-tag{display:inline-block;font-family:var(--mono);font-size:var(--fs-sm);color:var(--mute);background:var(--raised2);border:1px solid var(--line);border-radius:6px;padding:4px 8px;margin:0 6px 8px 0}
.tx-file{border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:10px}
.tx-file .fn{font-family:var(--mono);font-size:var(--fs-meta);color:var(--brand);margin-bottom:6px}
.tx-check{display:flex;align-items:center;gap:9px;cursor:pointer;font-family:var(--sans);font-size:var(--fs-lg);color:var(--white);text-transform:none;letter-spacing:0}
.tx-check input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.tx-trans{margin-top:12px}
.tx-trans .lbl{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.6px;color:var(--brand);text-transform:uppercase;margin-bottom:6px}
.turn.neutral{background:var(--raised);border-left:2px solid var(--line2)}
.turn.neutral .who{color:var(--faint);font-family:var(--mono)}

/* ---------- generated utility classes ----------
   One class per distinct declaration that was an inline style attribute.
   The point is CSP, not tidiness: style-src cannot drop 'unsafe-inline'
   while a single style attribute survives in parsed markup, and a nonce
   does not apply to style attributes at all.

   Selectors are doubled (.u1.u1) deliberately. An inline style beat every
   rule in this file; a single class would lose to any two-class rule it
   collided with and silently change the page. Doubling gives 0-2-0 and,
   emitted last, reproduces the old precedence without putting !important
   on hundreds of rules.

   Generated - do not hand-edit. Values computed at render time (a bar
   width, a score colour) are not here: they carry data-style and are
   applied through CSSOM by paintDataStyles(), which CSP does not
   restrict. Elements whose visibility JS toggles are not here either -
   see .is-hidden above for why that distinction matters. ---------- */
.u1.u1{display:none}
.u2.u2{margin-top:10px;min-height:15px}
.u3.u3{margin-top:10px;text-align:center}
.u4.u4{font-size:var(--fs-meta);color:var(--faint)}
.u5.u5{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;display:flex;gap:8px}
.u6.u6{flex:1;font-size:var(--fs-meta)}
.u7.u7{width:auto;margin-top:0;padding:0 12px;font-size:var(--fs-meta);white-space:nowrap}
.u8.u8{color:var(--red);margin-top:10px;min-height:15px}
.u9.u9{padding:2px 0 14px}
.u10.u10{max-width:440px}
.u11.u11{width:180px;height:180px;margin:0 auto 14px;background:#fff;border-radius:8px;padding:10px;box-sizing:border-box}
.u12.u12{margin-bottom:14px}
.u13.u13{font-size:var(--fs-meta);color:var(--faint);cursor:pointer}
.u14.u14{margin-top:10px}
.u15.u15{font-size:var(--fs-sm);margin:-6px 0 4px}
.u16.u16{color:var(--brand)}
.u17.u17{font-family:var(--mono);font-size:var(--fs-lg);line-height:1.9;background:var(--raised);border-radius:8px;padding:14px 16px;margin-bottom:14px}
.u18.u18{cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.u19.u19{display:inline-block;vertical-align:-4px;margin-right:8px}
.u20.u20{width:12px;height:12px;flex:none;transition:transform .15s;transform:rotate(-90deg)}
.u21.u21{margin-top:14px}
.u22.u22{width:14px;height:14px}
.u23.u23{width:250px;padding:8px}
.u24.u24{margin-bottom:18px}
.u25.u25{grid-template-columns:repeat(3,1fr)}
.u26.u26{font-weight:400}
.u27.u27{font-size:var(--fs-meta);margin:4px 0 8px}
.u28.u28{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--raised2)}
.u29.u29{background:var(--teal);width:0%;transition:width .3s}
.u30.u30{background:var(--amber);width:0%;transition:width .3s}
.u31.u31{background:var(--red);width:0%;transition:width .3s}
.u32.u32{font-size:var(--fs-meta);margin-top:8px}
.u33.u33{font-size:var(--fs-meta);margin-top:8px;min-height:15px}
.u34.u34{background:var(--brand);width:0%;transition:width .3s}
.u35.u35{font-size:var(--fs-meta);margin-top:10px}
.u36.u36{font-size:var(--fs-meta);margin-top:4px}
.u37.u37{margin-top:24px}
.u38.u38{font-size:var(--fs-meta);margin:-6px 0 14px}
.u39.u39{font-size:var(--fs-meta);margin-top:6px;min-height:15px}
.u40.u40{max-width:170px}
.u41.u41{margin-left:auto}
.u42.u42{text-align:center;margin-top:10px}
.u43.u43{margin-top:16px}
.u44.u44{padding:2px 0 12px}
.u45.u45{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.u46.u46{font-size:var(--fs-sm);color:var(--faint);display:flex;flex-direction:column;gap:3px}
.u47.u47{min-width:150px}
.u48.u48{min-width:190px}
.u49.u49{min-width:140px}
.u50.u50{min-width:170px}
.u51.u51{font-size:var(--fs-sm);color:var(--faint);display:flex;flex-direction:column;gap:3px;margin-top:10px}
.u52.u52{margin-top:12px;display:flex;gap:10px;align-items:center}
.u53.u53{width:auto;padding:0 16px}
.u54.u54{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.u55.u55{margin-top:8px}
.u56.u56{padding:2px 0 10px}
.u57.u57{width:auto;padding:0 14px;margin-bottom:14px}
.u58.u58{margin-bottom:18px;border-left:3px solid var(--amber)}
.u59.u59{font-size:var(--fs-lg)}
.u60.u60{padding:2px 0}
.u61.u61{align-items:flex-end}
.u62.u62{max-width:160px}
.u63.u63{max-width:150px}
.u64.u64{margin-left:auto;font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);align-self:center}
.u65.u65{margin-bottom:24px}
.u66.u66{margin:0 0 18px}
.u67.u67{margin:-4px 0 14px}
.u68.u68{max-width:260px}
.u69.u69{padding:8px 2px}
.u70.u70{display:flex;gap:8px;margin-top:14px;border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap}
.u71.u71{flex:1;min-width:150px}
.u72.u72{flex:none;max-width:130px}
.u73.u73{width:auto;margin-top:0;padding:0 16px;white-space:nowrap}
.u74.u74{display:flex;gap:8px;margin-top:14px;border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap;align-items:center}
.u75.u75{flex:1;min-width:180px}
.u76.u76{font-size:var(--fs-sm);margin-top:6px}
.u77.u77{text-decoration:underline;cursor:pointer}
.u78.u78{margin-bottom:18px;padding:12px 16px}
.u79.u79{display:flex;gap:8px;align-items:center;flex-wrap:wrap;row-gap:8px}
.u80.u80{font-size:var(--fs-sm);color:var(--faint)}
.u81.u81{width:auto;min-width:140px;padding:0 10px;height:30px}
.u82.u82{width:auto;min-width:120px;padding:0 10px;height:30px}
.u83.u83{font-size:var(--fs-sm);color:var(--faint);display:flex;align-items:center;gap:6px}
.u84.u84{width:auto;padding:0 8px;height:30px}
.u85.u85{width:auto;padding:0 16px;height:30px}
.u86.u86{height:30px}
.u87.u87{width:1px;align-self:stretch;background:var(--line);margin:0 2px}
.u88.u88{margin:0}
.u89.u89{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.u90.u90{overflow-x:auto}
.u91.u91{margin-top:18px}
.u92.u92{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);margin-bottom:12px}
.u93.u93{margin-bottom:8px}
.u94.u94{grid-template-columns:1fr 1fr auto}
.u95.u95{margin-bottom:0}
.u96.u96{align-self:end}
.u97.u97{margin:24px 0 8px}
.u98.u98{font-size:var(--fs-sm);margin-bottom:12px}
.u99.u99{grid-template-columns:1fr 1fr 1fr auto}
.u100.u100{display:flex;gap:8px;margin-bottom:14px;align-items:flex-end;flex-wrap:wrap}
.u101.u101{font-size:var(--fs-sm);color:var(--faint);display:flex;flex-direction:column;gap:3px;flex:1;min-width:140px}
.u102.u102{font-size:var(--fs-sm);color:var(--faint);display:flex;flex-direction:column;gap:3px;width:110px}
.u103.u103{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.u104.u104{align-items:flex-start}
.u105.u105{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.u106.u106{width:130px;padding:6px 8px}
.u107.u107{width:56px;padding:6px 8px}
.u108.u108{width:auto;padding:0 12px;font-size:var(--fs-sm)}
.u109.u109{padding:0 0 10px;font-size:var(--fs-sm)}
.u110.u110{gap:8px;align-items:flex-end;margin:4px 0 14px;padding-top:10px;border-top:1px solid var(--line)}
.u111.u111{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.u112.u112{width:auto;min-width:150px}
.u113.u113{font-size:var(--fs-sm);color:var(--faint);display:flex;flex-direction:column;gap:3px;flex:1;min-width:200px}
.u114.u114{align-self:end;width:auto;padding:0 16px}
.u115.u115{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);margin-top:7px}
.u116.u116{grid-column:1/-1}
.u117.u117{grid-template-columns:1fr 1fr}
.u118.u118{grid-template-columns:2fr 1fr 1fr;align-items:flex-end}
.u119.u119{color:var(--faint)}
.u120.u120{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.u121.u121{margin-bottom:10px}
.u122.u122{overflow-x:auto;margin-bottom:18px}
.u123.u123{display:flex;gap:8px}
.u124.u124{margin-top:12px}
.u125.u125{display:flex;gap:8px;margin-top:8px}
.u126.u126{flex:2}
.u127.u127{flex:1}
.u128.u128{grid-template-columns:1fr 1fr 1fr}
.u129.u129{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);margin-top:5px}
.u130.u130{margin-top:6px}
.u131.u131{padding:8px 0}
.u132.u132{margin-bottom:14px;padding:12px 16px}
.u133.u133{width:auto;min-width:170px;padding:0 10px;height:30px}
.u134.u134{width:auto;min-width:130px;padding:0 10px;height:30px}
.u135.u135{font-size:var(--fs-sm);padding:8px 0 0}
.u136.u136{cursor:pointer;text-decoration:underline}
.u137.u137{margin-bottom:16px}
.u138.u138{padding:2px 0 10px;display:inline-block}
.u139.u139{width:auto;padding:0 16px;align-self:end}
.u140.u140{display:flex;gap:8px;align-items:center;flex-wrap:wrap;row-gap:8px;margin-bottom:16px}
.u141.u141{width:auto;min-width:110px;max-width:130px;padding:0 10px;height:30px}
.u142.u142{width:auto;min-width:100px;max-width:120px;padding:0 10px;height:30px}
.u143.u143{width:auto;padding:0 14px;height:30px}
.u144.u144{height:30px;margin-left:auto}
.u145.u145{display:flex;gap:8px;flex-wrap:wrap}
.u146.u146{padding:14px 0 8px;border-top:1px solid var(--line);margin-top:14px}
.u147.u147{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.u148.u148{flex:1;min-width:120px}
.u149.u149{display:flex;align-items:center;gap:6px;font-size:var(--fs-meta);color:var(--faint);white-space:nowrap}
.u150.u150{padding:6px 0 14px}
.u151.u151{grid-column:1/-1;margin:0 0 4px}
.u152.u152{grid-column:1/-1;padding:0}
.u153.u153{grid-column:span 1}
.u154.u154{padding:2px 0 14px;display:inline-block}
.u155.u155{display:flex;gap:8px;margin-top:14px;border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap;align-items:flex-end}
.u156.u156{font-size:var(--fs-sm);color:var(--faint);display:flex;flex-direction:column;gap:3px;flex:1;min-width:160px}
.u157.u157{max-width:90px}
.u158.u158{max-width:110px}
.u159.u159{font-size:var(--fs-sm);color:var(--faint);display:flex;flex-direction:column;gap:3px;flex:1;min-width:150px}
.u160.u160{max-width:100px}
.u161.u161{font-size:var(--fs-sm);color:var(--faint);display:flex;flex-direction:column;gap:3px;min-width:180px}
.u162.u162{font-size:var(--fs-sm);color:var(--faint);display:flex;flex-direction:column;gap:3px;flex:2;min-width:220px}
.u163.u163{font-size:var(--fs-sm);color:var(--faint);display:flex;flex-direction:column;gap:3px;flex:1;min-width:130px}
.u164.u164{font-size:var(--fs-sm);color:var(--faint);display:flex;flex-direction:column;gap:3px;width:130px}
.u165.u165{font-size:var(--fs-meta);min-height:15px}
.u166.u166{margin-bottom:2px}
.u167.u167{max-width:130px}
.u168.u168{margin-bottom:6px}
.u169.u169{font-size:var(--fs-sm);color:var(--faint);display:flex;flex-direction:column;gap:3px;width:70px}
.u170.u170{border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.u171.u171{flex-direction:column;align-items:stretch;gap:9px;border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.u172.u172{display:flex;align-items:center;justify-content:space-between}
.u173.u173{width:auto;margin-top:0;white-space:nowrap;padding:0 16px}
.u174.u174{display:flex;gap:28px;padding:2px 0 16px}
.u175.u175{font-family:var(--mono);font-size:var(--fs-title);margin-top:2px}
.u176.u176{font-size:var(--fs-sm);margin-top:10px}
.u177.u177{display:flex;gap:8px;align-items:center}
.u178.u178{color:var(--faint);font-size:var(--fs-meta);white-space:nowrap}
.u179.u179{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.u180.u180{max-height:340px;overflow-y:auto}
.u181.u181{width:auto;padding:0 16px;margin-top:10px}
.u182.u182{align-items:start}
.u183.u183{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}
.u184.u184{font-size:var(--fs-sm);margin-top:4px}
.u185.u185{padding:20px 4px}
.u186.u186{padding:16px 14px;text-align:center}
.u187.u187{padding:26px 14px}
.u188.u188{width:auto;display:inline-block;padding:0 10px;margin:0 0 0 10px;font-size:var(--fs-micro);height:22px;line-height:20px}
.u189.u189{font-size:var(--fs-meta);margin-top:6px}
.u190.u190{border-radius:20px;width:auto;padding:0 12px;gap:6px}
.u191.u191{display:flex;gap:8px;margin-top:12px}
.u192.u192{width:auto;padding:0 12px;height:24px;font-size:var(--fs-sm);margin-top:0}
.u193.u193{font-size:var(--fs-sm)}
.u194.u194{font-size:var(--fs-sm);margin-top:2px}
.u195.u195{grid-template-columns:repeat(3,1fr);margin-bottom:18px}
.u196.u196{border-left-color:var(--gold)}
.u197.u197{color:var(--gold)}
.u198.u198{cursor:pointer}
.u199.u199{color:var(--brand);font-family:var(--mono)}
.u200.u200{margin-left:10px}
.u201.u201{padding:10px 0;align-items:flex-start}
.u202.u202{font-style:italic}
.u203.u203{margin-top:4px}
.u204.u204{white-space:nowrap;padding-left:12px}
.u205.u205{padding:10px 0 0}
.u206.u206{display:flex;gap:8px;align-items:center;margin-top:6px}
.u207.u207{max-width:300px}
.u208.u208{width:auto;padding:0 12px;font-size:var(--fs-sm);margin-top:8px}
.u209.u209{max-width:320px}
.u210.u210{padding:0 0 4px}
.u211.u211{padding:2px 0 6px}
.u212.u212{padding:6px 0 0}
.u213.u213{padding:0 0 10px}
.u214.u214{padding:0 0 8px}
.u215.u215{padding:4px 0}
.u216.u216{padding-top:6px}
.u217.u217{min-width:180px}
.u218.u218{padding:14px;text-align:center}
.u219.u219{grid-template-columns:repeat(4,1fr)}
.u220.u220{width:auto;padding:0 20px}
.u221.u221{width:auto;padding:0 20px;margin-top:8px}
.u222.u222{width:auto;padding:0 12px}
.u223.u223{padding:0 0 16px}
.u224.u224{font-size:var(--fs-title)}
.u225.u225{margin-top:20px}
.u226.u226{padding:6px 0}
.u227.u227{padding:0 0 6px}
.u228.u228{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
.u229.u229{min-width:160px}
.u230.u230{resize:vertical}
.u231.u231{color:var(--faint);font-weight:400}
.u232.u232{padding:10px}
.u233.u233{color:var(--warn,#c77)}
.u234.u234{align-items:flex-start;flex-wrap:wrap}
.u235.u235{color:var(--red);font-size:var(--fs-sm)}
.u236.u236{flex:1;min-width:220px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.u237.u237{max-width:220px}
.u238.u238{flex-basis:100%;margin-top:8px}
.u239.u239{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint);margin-bottom:6px}
.u240.u240{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.u241.u241{font-family:var(--mono);font-size:var(--fs-meta);min-width:120px}
.u242.u242{color:var(--red)}
.u243.u243{align-items:flex-start;cursor:pointer}
.u244.u244{min-width:70px}
.u245.u245{margin-bottom:16px;padding:8px 6px}
.u246.u246{min-width:96px}
.u247.u247{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.u248.u248{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.u249.u249{text-transform:none;font-weight:400}
.u250.u250{cursor:pointer;text-decoration:underline;font-size:var(--fs-sm);font-family:var(--sans);text-transform:none;letter-spacing:normal;color:var(--mute)}
.u251.u251{grid-template-columns:repeat(2,1fr);margin-bottom:14px}
.u252.u252{display:flex;justify-content:space-between;gap:8px;margin-top:2px}
.u253.u253{font-family:var(--serif);font-size:var(--fs-title)}
.u254.u254{font-size:var(--fs-micro);color:var(--faint);letter-spacing:.5px}
.u255.u255{margin:-6px 0 16px;padding-left:6px}
.u256.u256{grid-template-columns:repeat(4,1fr);margin-bottom:14px}
.u257.u257{color:var(--bad,#c77)}
.u258.u258{color:var(--ok,#7a7)}
.u259.u259{margin-top:24px;margin-bottom:14px}
.u260.u260{min-width:110px}
.u261.u261{margin-bottom:20px}
.u262.u262{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.5px;color:var(--faint);text-transform:uppercase;margin-bottom:10px}
.u263.u263{display:flex;align-items:center;gap:8px}
.u264.u264{grid-template-columns:repeat(3,1fr);margin-bottom:14px}
.u265.u265{padding:0 0 14px;display:flex;justify-content:flex-end}
.u266.u266{cursor:pointer;text-decoration:underline;font-size:var(--fs-meta)}
.u267.u267{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-body)}
.u268.u268{display:flex;justify-content:space-between}
.u269.u269{font-size:var(--fs-micro);color:var(--faint);text-align:right;margin-top:-4px}
.u270.u270{margin:0 0 8px}
.u271.u271{background:var(--brand-soft);color:var(--brand);white-space:nowrap}
.u272.u272{white-space:nowrap}
.u273.u273{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.u274.u274{cursor:pointer;text-decoration:underline;font-size:var(--fs-sm);color:var(--brand)}
.u275.u275{padding:2px 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.u276.u276{grid-template-columns:repeat(4,1fr);margin-top:14px}
.u277.u277{grid-template-columns:repeat(2,1fr);margin-top:10px}
.u278.u278{margin-top:16px;margin-bottom:8px}
.u279.u279{padding:2px 0 8px}
.u280.u280{grid-template-columns:repeat(5,1fr);margin-bottom:16px}
.u281.u281{background:var(--raised2);color:var(--mute)}
.u282.u282{display:flex;gap:18px}
.u283.u283{color:var(--white);font-family:var(--mono);font-weight:500}
.u284.u284{opacity:.8;padding:9px 14px}
.u285.u285{width:64px}
.u286.u286{font-size:var(--fs-meta)}
.u287.u287{margin:0 0 6px}
.u288.u288{width:130px}
.u289.u289{width:110px}
.u290.u290{width:140px}
.u291.u291{display:inline}
.u292.u292{background:var(--amber-soft)}
.u293.u293{padding:6px 0 4px}
.u294.u294{margin:0 6px 6px 0}
.u295.u295{padding:0 0 18px;display:block}
.u296.u296{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.u297.u297{width:52px;height:52px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:var(--fs-title);flex:none}
.u298.u298{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.u299.u299{grid-template-columns:repeat(2,1fr)}
.u300.u300{text-transform:none;letter-spacing:0;color:var(--mute);font-weight:400}
.u301.u301{margin:6px 0 14px}
.u302.u302{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px;font-size:var(--fs-sm);color:var(--mute)}
.u303.u303{display:inline-block;width:12px;height:12px;border-radius:2px;background:var(--line)}
.u304.u304{display:inline-block;width:12px;height:12px;border-radius:2px;background:var(--amber);margin-left:8px}
.u305.u305{display:inline-block;width:12px;height:12px;border-radius:2px;background:var(--teal);margin-left:8px}
.u306.u306{display:inline-block;width:12px;height:12px;border-radius:2px;background:var(--red);margin-left:8px;position:relative}
.u307.u307{position:absolute;top:1px;right:1px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.u308.u308{margin:0 0 10px}
.u309.u309{font-size:var(--fs-sm);margin-bottom:8px}
.u310.u310{grid-template-columns:repeat(5,1fr)}
.u311.u311{font-size:var(--fs-sm);margin-top:8px}
.u312.u312{font-family:var(--serif);font-size:var(--fs-title);line-height:1.4;color:var(--white);max-width:66ch;margin-bottom:20px}
.u313.u313{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.u314.u314{display:flex;flex-wrap:wrap;gap:7px}
.u315.u315{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.u316.u316{font-size:var(--fs-micro);margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.u317.u317{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.u318.u318{flex:1;display:flex;align-items:flex-end;justify-content:center;height:90px;width:100%}
.u319.u319{width:60%;max-width:28px;height:12px;border-radius:4px;border:1.5px dashed var(--line2)}
.u320.u320{font-size:var(--fs-micro);color:var(--faint);font-weight:500}
.u321.u321{font-size:var(--fs-micro);color:var(--faint)}
.u322.u322{flex:1;display:flex;align-items:flex-end;justify-content:center;height:90px;width:100%;position:relative}
.u323.u323{color:var(--faint);font-size:var(--fs-sm)}
.u324.u324{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.u325.u325{font-weight:500}
.u326.u326{display:flex;gap:16px;font-size:var(--fs-sm);color:var(--mute)}
.u327.u327{color:var(--white)}
.u328.u328{color:var(--faint);text-transform:none;letter-spacing:0;font-size:var(--fs-micro)}
.u329.u329{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.u330.u330{margin-bottom:4px}
.u331.u331{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1px;color:var(--faint);text-transform:uppercase;margin-bottom:9px}
.u332.u332{display:flex;gap:22px;flex-wrap:wrap}
.u333.u333{display:flex;align-items:center;gap:12px;max-width:240px}
.u334.u334{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:1px;color:var(--faint);text-transform:uppercase}
.u335.u335{font-size:var(--fs-micro);color:var(--mute);margin-top:3px;line-height:1.4}
.u336.u336{margin-top:11px}
.u337.u337{margin-top:5px}
.u338.u338{display:flex;justify-content:space-between;gap:10px;margin-top:2px}
.u339.u339{text-decoration:underline}
.u340.u340{color:var(--teal)}
.u341.u341{font-size:var(--fs-micro)}
.u342.u342{background:var(--faint)}
.u343.u343{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.8px;color:var(--faint);text-transform:uppercase;margin-bottom:10px}
.u344.u344{display:inline-block}
.u345.u345{font-size:var(--fs-micro);color:var(--mute);margin-top:8px}
.u346.u346{display:inline-block;margin-bottom:14px;white-space:normal;text-transform:none;letter-spacing:normal;font-size:var(--fs-sm);padding:6px 10px}
.u347.u347{font-size:var(--fs-sm);margin-top:16px}
.u348.u348{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:3px;max-width:600px}
.u349.u349{color:var(--mute);font-weight:400}
.u350.u350{cursor:pointer;font-weight:500;white-space:nowrap}
.u351.u351{font-size:var(--fs-title);color:var(--faint)}
.u352.u352{cursor:pointer;text-decoration:underline;font-size:var(--fs-sm);color:var(--faint)}
.u353.u353{text-align:center}
.u354.u354{font-size:var(--fs-micro);color:var(--faint);margin-top:5px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px}
.u355.u355{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:16px}
.u356.u356{font-size:var(--fs-meta);margin:12px 0}
.u357.u357{font-family:var(--mono);font-size:var(--fs-sm);white-space:nowrap;color:var(--mute)}
.u358.u358{font-size:var(--fs-meta);margin:16px 0}
.u359.u359{margin-top:26px;margin-bottom:10px}
.u360.u360{font-size:var(--fs-meta);margin-bottom:12px}
.u361.u361{width:auto;padding:2px 12px;font-size:var(--fs-sm);vertical-align:middle;margin-left:6px}
.u362.u362{grid-template-columns:repeat(2,1fr);margin-top:14px}
.u363.u363{padding:14px 0 10px;display:inline-block}
.u364.u364{display:flex;justify-content:space-between;align-items:center}
.u365.u365{flex-direction:column;align-items:stretch;gap:8px}
.u366.u366{width:auto;margin-top:0;padding:0 12px;font-size:var(--fs-sm)}
.u367.u367{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.u368.u368{width:auto;padding:0 14px}
.u369.u369{align-items:center}
.u370.u370{font-family:var(--serif);font-size:var(--fs-lg)}
.u371.u371{width:auto;margin-top:0;padding:0 10px;font-size:var(--fs-sm)}
.u372.u372{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.u373.u373{margin-left:6px}
.u374.u374{color:var(--amber)}
.u375.u375{display:flex;gap:6px}
.u376.u376{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.u377.u377{font-family:var(--mono);font-size:var(--fs-sm)}
.u378.u378{display:flex;align-items:center;gap:6px;font-size:var(--fs-meta)}
.u379.u379{width:auto;margin-top:0;padding:0 16px}
.u380.u380{font-family:var(--mono)}
.u381.u381{margin-bottom:6px;line-height:1.5}
.u382.u382{border-color:var(--brand);color:var(--brand)}
.u383.u383{margin-top:10px;border-color:var(--teal);color:var(--teal)}
.u384.u384{width:100%;height:100%}
.u385.u385{width:auto;padding:2px 9px;font-size:var(--fs-sm);flex:none}
.u386.u386{cursor:default}