/* Signoff Voice. A night-shift switchboard for testing a clinic's phone agent.
   Navy ground, three call signals (amber live, teal passed, coral failed), the brand lime only on the
   logo and primary actions. Bricolage Grotesque for headings and numbers, Geist for the interface. */
:root {
  --bg: #0C1524; --bg-2: #09111E; --panel: #111D31; --panel-2: #172640; --hover: #1C2E4C;
  --line: #22355A; --line-2: #1A2A47;
  --fg: #ECF2FB; --fg-2: #A8B8D0; --mut: #7086A6;
  --acc: #C6FF3D; --acc-ink: #0C1524; --acc-2: rgba(198,255,61,.12);
  --live: #F5B544; --live-bg: rgba(245,181,68,.13);
  --ok: #3DD6B0; --ok-bg: rgba(61,214,176,.12); --no: #FF6B6B; --no-bg: rgba(255,107,107,.12); --warn: #F5B544; --warn-bg: rgba(245,181,68,.12);
  --violet: #8B7BFF; --cyan: #4FD1E8; --pink: #FF7EB6;
  --d1: #8B7BFF; --d2: #4FD1E8; --d3: #FF7EB6;
  --heard: #4FD1E8; --thought: #8B7BFF; --did: #FF7EB6; --dropped: #F5B544; --engine: #FF8A5B;
  --shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 18px 40px -24px rgba(2,6,14,.9);
  --glow: 0 0 0 1px rgba(198,255,61,.4), 0 10px 30px -10px rgba(198,255,61,.35);
  --r: 16px; --r-s: 10px;
  --display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01";
  background-image: radial-gradient(1100px 520px at 70% -220px, #16305A 0%, transparent 70%); background-repeat: no-repeat; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); }
h1 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.05; margin: 0 0 8px; font-weight: 750; letter-spacing: -.025em; font-variation-settings: "opsz" 96; }
h2 { font-size: 19px; line-height: 1.2; margin: 0 0 12px; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 15px; margin: 0 0 8px; color: var(--fg-2); font-weight: 650; }
p.lead { color: var(--fg-2); margin: 0 0 24px; max-width: 68ch; font-size: 16px; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(12,21,36,.86); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1320px; margin: 0 auto; padding: 0 32px; min-height: 64px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); font-family: var(--display); font-weight: 750; font-size: 19px; letter-spacing: -.03em; text-decoration: none !important; }
.brand .dim { color: var(--mut); font-weight: 500; }
.brand .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--acc); display: grid; place-items: center; }
.brand .logo svg { width: 19px; height: 19px; }
.brand .tag { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--fg-2); border-left: 1px solid var(--line); padding-left: 12px; margin-left: 4px; }
nav { display: flex; gap: 2px; flex-wrap: wrap; }
nav a { position: relative; color: var(--fg-2); padding: 9px 13px; border-radius: 9px; font-weight: 500; font-size: 14.5px; }
nav a:hover { background: var(--hover); text-decoration: none; color: var(--fg); }
nav a.on { color: var(--fg); background: var(--panel-2); }
nav a.on::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--acc); }
.who { margin-left: auto; font-size: 13px; color: var(--mut); display: flex; gap: 8px; align-items: center; }
main { max-width: 1320px; margin: 0 auto; padding: 34px 32px 80px; min-height: 70vh; }
@media (max-width: 640px) { main, .top-in, .foot, .runstrip-in { padding-left: 16px !important; padding-right: 16px !important; } .brand .tag { display: none; } }
.foot { max-width: 1320px; margin: 0 auto; padding: 22px 32px 34px; color: var(--mut); font-size: 13px; border-top: 1px solid var(--line); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

/* the live run strip: under the navigation on every page while a run is on */
.runstrip { position: sticky; top: 64px; z-index: 15; background: linear-gradient(180deg, #13223B, #101C31); border-bottom: 1px solid var(--line); }
.runstrip-in { max-width: 1320px; margin: 0 auto; padding: 12px 32px; display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: 22px; align-items: center; }
@media (max-width: 980px) { .runstrip-in { grid-template-columns: 1fr; gap: 10px; } }
.rs-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rs-state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--live); white-space: nowrap; }
.rs-state.done { color: var(--ok); } .rs-state.bad { color: var(--no); }
.rs-label { font-family: var(--display); font-weight: 750; font-size: 18px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.rs-mode { font-size: 12.5px; color: var(--mut); white-space: nowrap; }
.rs-rail { display: flex; gap: 4px; align-items: stretch; min-width: 0; }
.rs-seg { flex: 1 1 0; min-width: 14px; height: 34px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; font: 600 11px var(--mono); color: var(--mut); text-decoration: none !important; position: relative; overflow: hidden; }
.rs-seg.pass { background: var(--ok-bg); border-color: rgba(61,214,176,.55); color: var(--ok); }
.rs-seg.fail { background: var(--no-bg); border-color: rgba(255,107,107,.55); color: var(--no); }
.rs-seg.exception { background: var(--warn-bg); border-color: rgba(245,181,68,.45); color: var(--warn); }
.rs-seg.running { background: var(--live-bg); border-color: var(--live); color: var(--live); }
a.rs-seg:hover { filter: brightness(1.25); }
.rs-seg .wave { position: absolute; inset: auto 6px 4px; height: 8px; display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
.rs-seg .wave i { width: 2px; background: var(--live); border-radius: 1px; animation: wave 1s ease-in-out infinite; }
.rs-seg .wave i:nth-child(2) { animation-delay: .12s; } .rs-seg .wave i:nth-child(3) { animation-delay: .24s; } .rs-seg .wave i:nth-child(4) { animation-delay: .36s; } .rs-seg .wave i:nth-child(5) { animation-delay: .48s; }
.rs-seg.running .id { transform: translateY(-4px); }
@keyframes wave { 0%, 100% { height: 2px; } 50% { height: 8px; } }
.rs-tally { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--fg-2); white-space: nowrap; }
.rs-tally b { font-family: var(--display); font-size: 20px; font-weight: 750; color: var(--fg); font-variant-numeric: tabular-nums; margin-right: 4px; }
.rs-now { grid-column: 1 / -1; font-size: 13px; color: var(--fg-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: -4px; }
.rs-now .id { font-family: var(--mono); color: var(--live); font-weight: 600; }
.rs-x { background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 6px; }
.rs-x:hover { color: var(--fg); background: var(--hover); }

/* surfaces */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px; }
.panel h2:first-child { margin-top: 0; }
.grid { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-live { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
@media (max-width: 980px) { .g-live { grid-template-columns: 1fr; } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .g4 { grid-template-columns: 1fr; } }
.stat { padding: 18px 20px; }
.stat .k { font-size: 13px; color: var(--fg-2); }
.stat .v { font-family: var(--display); font-size: 32px; line-height: 1.1; font-weight: 750; margin-top: 4px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 12.5px; color: var(--mut); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sp { flex: 1; }
.muted { color: var(--mut); }
.small { font-size: 13px; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: var(--fg-2); white-space: nowrap; border: 1px solid transparent; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.no { background: var(--no-bg); color: var(--no); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.acc { background: var(--live-bg); color: var(--live); }
.pill.vi { background: rgba(139,123,255,.14); color: #B9AEFF; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.live-dot { background: var(--live); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(245,181,68,.6); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.btn { font: inherit; font-size: 14.5px; font-weight: 600; border: 1px solid var(--line); background: var(--panel-2); color: var(--fg); height: 40px; padding: 0 18px; border-radius: 10px; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn:hover { background: var(--hover); border-color: #2E4670; }
.btn:active { transform: translateY(1px); }
.btn.pri { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn.pri:hover { background: #D4FF66; border-color: #D4FF66; box-shadow: var(--glow); }
.btn.danger { color: var(--no); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.chip { height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; border-radius: 8px; }
.btn.chip.pri { color: var(--acc-ink); }
input[type=text], input[type=password], select, textarea { font: inherit; font-size: 14.5px; color: var(--fg); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; transition: border-color .15s; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(135deg, var(--fg-2) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; cursor: pointer; }
input:hover, select:hover, textarea:hover { border-color: #2E4670; }
input::placeholder { color: var(--mut); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: transparent; }
label.f { display: block; font-size: 13.5px; font-weight: 600; margin: 0 0 6px; color: var(--fg); }
.field { margin-bottom: 18px; }
.hint { font-size: 12.5px; color: var(--mut); margin-top: 6px; line-height: 1.5; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.seg button { font: inherit; font-size: 13.5px; border: 0; background: transparent; color: var(--fg-2); padding: 8px 14px; cursor: pointer; }
.seg button.on { background: var(--panel-2); color: var(--fg); font-weight: 600; box-shadow: inset 0 -2px 0 var(--acc); }

/* week board */
.board-wrap { overflow-x: auto; }
table.board { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; font-size: 12.5px; }
.board th { position: sticky; top: 0; background: var(--panel); font-family: var(--display); font-weight: 650; font-size: 13px; color: var(--fg-2); padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.board td { border-bottom: 1px solid var(--line-2); border-left: 1px solid var(--line-2); padding: 3px; vertical-align: top; height: 36px; }
.board td.t { border-left: 0; color: var(--mut); font-family: var(--mono); font-size: 11.5px; width: 56px; padding-top: 9px; }
.board tr.gap td { height: 10px; padding: 0; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.board td.closed { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(34,53,90,.45) 6px 12px); }
.chip-a { display: flex; align-items: center; gap: 5px; border-radius: 7px; padding: 3px 7px; margin: 1px 0; font-size: 11.5px; line-height: 1.35; color: var(--fg); background: var(--panel-2); border-left: 3px solid var(--c, var(--mut)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chip-a.new { animation: pop 1.4s ease-out; }
@keyframes pop { 0% { background: rgba(245,181,68,.35); box-shadow: 0 0 0 1px var(--live); } 100% { background: var(--panel-2); box-shadow: none; } }
.chip-a.cx { text-decoration: line-through; opacity: .5; }
.chip-a.blk { border-left-color: var(--mut); color: var(--mut); font-style: italic; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-2); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c); display: inline-block; }

/* activity feed */
.feed { display: flex; flex-direction: column; gap: 8px; max-height: 660px; overflow-y: auto; }
.ev { border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; font-size: 13px; background: var(--bg-2); }
.ev .h { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.ev .p { color: var(--mut); font-family: var(--mono); font-size: 11.5px; margin-top: 4px; word-break: break-word; }
.ev .m { margin-top: 4px; color: var(--fg-2); }
.ev.in { animation: slidein .5s cubic-bezier(.2,.8,.2,1); }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px); background: rgba(245,181,68,.14); } to { opacity: 1; transform: none; } }
.ev.fault { border-color: rgba(245,181,68,.5); background: var(--warn-bg); }
.empty { color: var(--mut); text-align: center; padding: 32px 12px; font-size: 14px; }

/* tables */
.tbl-wrap { overflow-x: auto; }
table.tbl { border-collapse: collapse; width: 100%; font-size: 14px; }
.tbl th { text-align: left; font-size: 12.5px; color: var(--mut); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--panel-2); }
.bar { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; min-width: 90px; }
.bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; color: var(--fg); display: block; }
a.card:hover { text-decoration: none; border-color: #3A5786; background: var(--panel-2); }
.card .t { font-weight: 600; margin: 6px 0 2px; font-size: 14.5px; }
.card .d { color: var(--mut); font-size: 13px; }
.card.pass { box-shadow: inset 3px 0 0 var(--ok); } .card.fail { box-shadow: inset 3px 0 0 var(--no); } .card.exc { box-shadow: inset 3px 0 0 var(--warn); }

.sc { padding: 20px; }
.sc dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 10px 0 0; font-size: 14px; }
.sc dt { color: var(--mut); }
.sc dd { margin: 0; }
ul.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
ul.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }

/* call page */
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 76%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.msg.a { align-self: flex-start; background: var(--panel-2); border-top-left-radius: 4px; }
.msg.u { align-self: flex-end; background: #1D2B57; border-top-right-radius: 4px; }
.msg .who { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fg-2); margin-bottom: 3px; }
.msg.tool { align-self: center; max-width: 92%; background: transparent; border: 1px dashed var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--mut); }
.msg .heard { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px dashed rgba(255,255,255,.14); font-size: 13px; color: var(--fg-2); }
.msg .heard.mismatch { color: var(--did); }
audio { width: 100%; margin-top: 6px; }
.console { background: var(--bg-2); color: #C7D3E6; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 12px; border-radius: 10px; padding: 12px 14px; height: 340px; overflow: auto; white-space: pre-wrap; }
.crumbs { font-size: 13.5px; color: var(--mut); margin-bottom: 12px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; z-index: 60; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); }
.playbtn { margin-left: 4px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); color: var(--live); font-size: 9px; cursor: pointer; line-height: 1; display: inline-grid; place-items: center; }
.playbtn:hover, .playbtn.on { background: var(--live); color: var(--bg); border-color: var(--live); }

/* setup */
.copybox { position: relative; margin-top: 6px; }
.copybox textarea { font-family: var(--mono); font-size: 12px; line-height: 1.5; resize: vertical; background: var(--bg-2); color: #C7D3E6; border: 1px solid var(--line-2); padding-right: 74px; }
.copybox .btn { position: absolute; top: 8px; right: 8px; }
ol.steps { margin: 6px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
ol.steps li::marker { color: var(--acc); font-weight: 700; }
.notice { border-color: rgba(245,181,68,.45); background: var(--warn-bg); color: var(--fg); }
.notice a { font-weight: 600; }
.slotrow select, .slotrow input { width: auto; flex: 0 1 auto; min-width: 0; }
.prompt { white-space: pre-wrap; word-break: break-word; max-height: 440px; overflow: auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 13px; line-height: 1.6; margin: 10px 0 0; color: #D4DEED; }
.chosen { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg-2); }
.modehelp { font-size: 13px; color: var(--fg-2); margin-top: 8px; line-height: 1.5; }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 8px; background: var(--bg-2); }
.pickgrid h4 { grid-column: 1 / -1; margin: 8px 0 2px; font-size: 13px; color: var(--fg-2); font-family: var(--display); }
.pickgrid label { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }

#app.enter { animation: enter .28s ease-out; }
@keyframes enter { from { opacity: 0; } to { opacity: 1; } }

/* failure causes */
.cause { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); white-space: nowrap; }
.cause::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.cause.heard { --c: var(--heard); } .cause.thought { --c: var(--thought); } .cause.did { --c: var(--did); } .cause.dropped { --c: var(--dropped); } .cause.engine { --c: var(--engine); } .cause.none { --c: var(--ok); }
.digits { font-family: var(--mono); font-size: 13px; }
.digits b { color: var(--did); background: rgba(255,126,182,.15); border-radius: 3px; padding: 0 1px; font-weight: 600; }
.stack { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--panel-2); min-width: 120px; }
.stack i { display: block; height: 100%; transition: width .9s cubic-bezier(.2,.8,.2,1); }

/* rings */
.ring { transform: rotate(-90deg); }
.ring .trk { stroke: var(--panel-2); }
.ring .val { transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); stroke-linecap: round; }
.ringbox { position: relative; display: inline-grid; place-items: center; }
.ringbox .lbl { position: absolute; text-align: center; font-family: var(--display); }
.ringbox .lbl b { display: block; font-size: var(--fs, 36px); font-weight: 750; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ringbox .lbl span { font-size: 12.5px; color: var(--mut); font-family: var(--sans); }
.grow { width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1); }

/* compare */
.tax-hero { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; }
.tax-num { font-family: var(--display); font-weight: 800; font-size: clamp(60px, 9vw, 112px); line-height: .9; letter-spacing: -.05em; color: var(--did); font-variant-numeric: tabular-nums; }
.tax-num.gain { color: var(--ok); }
.tax-sub { color: var(--fg-2); max-width: 56ch; }
.duel { display: grid; grid-template-columns: 90px 1fr 70px; gap: 8px 14px; align-items: center; font-size: 14px; }
.duel .lane { position: relative; height: 26px; background: var(--panel-2); border-radius: 7px; overflow: hidden; }
.duel .lane i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.duel .lane i.a { background: rgba(139,123,255,.55); }
.duel .lane i.b { background: var(--ok); top: 7px; bottom: 7px; border-radius: 4px; }
.duel .gap { font-family: var(--display); font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
.duel .lang { font-weight: 600; }
.keyline { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--fg-2); }
.keyline span { display: inline-flex; gap: 6px; align-items: center; }
.matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.cell { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; background: var(--bg-2); }
.cell .id { font-family: var(--mono); font-weight: 600; font-size: 12px; }
.cell .pp { display: flex; gap: 6px; margin-top: 6px; }
.cell .pp i { width: 16px; height: 16px; border-radius: 5px; display: inline-block; background: var(--panel-2); }
.cell .pp i.pass { background: var(--ok); } .cell .pp i.fail { background: var(--no); } .cell .pp i.exception { background: var(--warn); }
.cell.lost { border-color: rgba(255,126,182,.6); box-shadow: inset 0 0 0 1px rgba(255,126,182,.25); }

/* judge stage (kept for older pages) */
.stage { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .stage { grid-template-columns: 1fr; } .tax-hero { grid-template-columns: 1fr; } }
.dial { text-align: center; padding: 22px 18px; }
.dial .num { font-family: var(--display); font-size: 30px; font-weight: 750; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.qr { width: 184px; height: 184px; margin: 14px auto 6px; padding: 10px; background: #fff; border-radius: 14px; display: grid; place-items: center; }
.qr img, .qr canvas { width: 164px !important; height: 164px !important; }
.langs { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.mission { position: relative; text-align: left; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: var(--panel); }
.mission.can { cursor: pointer; }
.mission.can:hover { border-color: #3A5786; }
.mission .mt { font-family: var(--display); font-size: 19px; font-weight: 750; margin: 6px 0; }
.mission p { margin: 0; color: var(--fg-2); font-size: 14px; }
.onair { border-color: var(--live); box-shadow: 0 0 0 1px var(--live); }
.timer { font-family: var(--display); font-size: 44px; font-weight: 750; font-variant-numeric: tabular-nums; }
.tally { display: flex; gap: 6px; flex-wrap: wrap; }
.tally i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.tally i.p { background: var(--ok); } .tally i.f { background: var(--no); }

/* scorecard and report */
.veil { position: fixed; inset: 0; background: rgba(5,9,18,.72); backdrop-filter: blur(6px); z-index: 70; display: grid; place-items: center; padding: 16px; animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.score { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow); animation: rise .45s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { transform: translateY(18px) scale(.98); opacity: 0; } }
.score h2 { font-size: 26px; margin: 0; }
.score .verdict { font-family: var(--display); font-weight: 750; font-size: 15px; }
.score ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.score li { display: flex; gap: 10px; align-items: flex-start; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; font-size: 14px; }
.score li.show { opacity: 1; transform: none; }
.tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.tick.ok { background: var(--ok-bg); color: var(--ok); } .tick.no { background: var(--no-bg); color: var(--no); }
canvas.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
.rep-hero { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; }
@media (max-width: 760px) { .rep-hero { grid-template-columns: 1fr; } }
.rep-langs { display: flex; gap: 22px; flex-wrap: wrap; }
.catrow { display: grid; grid-template-columns: 110px 1fr 52px; gap: 12px; align-items: center; font-size: 14px; margin: 8px 0; }
.catrow .bar { height: 10px; }
.badge-prev { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* diagnose and fix */
.heal { border-color: rgba(139,123,255,.5); }
.rule { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.rule input[type=text] { flex: 1; }
.diff { font-family: var(--mono); font-size: 12px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; white-space: pre-wrap; max-height: 260px; overflow: auto; color: var(--mut); }
.diff .add { color: var(--ok); display: block; background: rgba(61,214,176,.08); }
.thinking { display: inline-flex; gap: 5px; align-items: center; color: var(--fg-2); }
.thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: blink 1.1s infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; transform: scale(.8); } 40% { opacity: 1; transform: none; } }
.gen-out .card { animation: rise .4s cubic-bezier(.2,.8,.2,1) both; }

/* run tests page */
.prog { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--panel-2); margin: 4px 0 10px; }
.prog i { transition: width .5s; }
.prog .p { background: var(--ok); } .prog .f { background: var(--no); } .prog .e { background: var(--warn); }
.runcard { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; background: var(--bg-2); }
.rc-label { font-family: var(--display); font-size: 20px; font-weight: 750; letter-spacing: -.015em; }
.rc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.rc-n { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-width: 0; }
.rc-v { font-family: var(--display); font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1; }
.rc-v.acc { color: var(--live); }
.rc-k { font-size: 12.5px; color: var(--mut); margin-top: 4px; line-height: 1.3; }

/* engine trace and timing */
.tbl.trace td { vertical-align: top; }
.tbl.trace .trace-what { word-break: break-word; max-width: 900px; }
.tbl.trace tr.tr-caller td, .tbl.trace tr.tr-heard td, .tbl.trace tr.tr-agent td { background: rgba(23,38,64,.55); }
.trace-scroll { max-height: 540px; overflow: auto; }
.latbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--panel-2); margin: 14px 0 12px; }
.latbar i { display: block; height: 100%; }
.latkeys { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 18px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Attempts at a call (re-runs): a small trail of verdict chips, oldest first */
.trail { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.row > .trail { margin: 0 0 0 10px; }
.att { display: inline-flex; align-items: center; gap: 5px; font: 600 11px var(--mono); padding: 2px 8px 2px 3px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-2); background: var(--panel-2); white-space: nowrap; }
.att b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--line); color: var(--fg); font-size: 10px; }
.att.ok { color: var(--ok); border-color: rgba(61,214,176,.45); background: var(--ok-bg); } .att.ok b { background: rgba(61,214,176,.25); }
.att.no { color: var(--no); border-color: rgba(255,107,107,.45); background: var(--no-bg); } .att.no b { background: rgba(255,107,107,.25); }
.att.warn { color: var(--warn); border-color: rgba(245,181,68,.45); background: var(--warn-bg); } .att.warn b { background: rgba(245,181,68,.25); }
.att.live { color: var(--live); border-color: var(--live); background: var(--live-bg); animation: pulse 1.4s ease-in-out infinite; }
.trail .arr, .rs-rr .arr { color: var(--mut); font-size: 13px; }
tr.now td { background: var(--hover); }

/* The re-run panel */
.rr-list { display: grid; gap: 6px; }
.rr-row { display: grid; grid-template-columns: auto 52px minmax(120px, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: pointer; }
.rr-row:hover { border-color: var(--warn); }
.rr-row .trail { margin: 0; }
.rr-row .rr-why { grid-column: 2 / -1; overflow-wrap: anywhere; }
.rr-id { color: var(--warn); }
.rr-to { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 10px; border: 1px dashed rgba(245,181,68,.6); background: var(--warn-bg); }
.rr-to > div:first-child { flex: 1; min-width: 240px; }
.rr-to[hidden] { display: none; }
.rs-rr { gap: 14px; }
.rr-was { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) {
  .rr-row { grid-template-columns: auto 1fr; }
  .rr-row .rr-t, .rr-row .trail, .rr-row .rr-why { grid-column: 2; }
}

/* Harness chips: which harness a run or call used */
.hchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.hchip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hchip.shipped { color: #A9B6CC; border-color: rgba(169,182,204,.4); background: rgba(169,182,204,.08); }
.hchip.alpha { color: #7FB8FF; border-color: rgba(127,184,255,.45); background: rgba(127,184,255,.1); }
.hchip.beta { color: #C9A2FF; border-color: rgba(201,162,255,.45); background: rgba(201,162,255,.1); }

/* Results: passed, failed and exception counts */
td.num { font-family: var(--display); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
td.ok-n { color: var(--ok); } td.no-n { color: var(--no); } td.ex-n { color: var(--warn); }

/* Competitor chips: engine and harness */
.hchip b { font-weight: 750; }
.hchip .sep { opacity: .55; margin: 0 -1px; }
.hchip.dograh { color: #FFB86B; border-color: rgba(255,184,107,.45); background: rgba(255,184,107,.1); }
.hchip.cloud { color: #6EE7F9; border-color: rgba(110,231,249,.4); background: rgba(110,231,249,.08); }

/* Links to the main Signoff sites */
.xlinks { display: flex; gap: 6px; margin-left: auto; margin-right: 10px; }
.xlinks a { font-size: 13px; font-weight: 600; color: var(--fg-2); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; white-space: nowrap; }
.xlinks a span { margin-left: 4px; opacity: .7; }
.xlinks a:hover { color: var(--fg); background: var(--hover); text-decoration: none; }
.foot-links { display: inline-flex; gap: 16px; }
@media (max-width: 900px) { .xlinks { display: none; } }
.xlinks + .who { margin-left: 0; }
@media (max-width: 900px) { .xlinks + .who { margin-left: auto; } }

/* keep Admin and Sign out on the header line next to the site links */
.who { white-space: nowrap; flex-wrap: nowrap; }
.xlinks { margin-right: 4px; }
@media (max-width: 1500px) { .brand .tag { display: none; } .top-in { gap: 16px; } .xlinks a { padding: 6px 8px; } }
@media (max-width: 1180px) { .xlinks { display: none; } .xlinks + .who { margin-left: auto; } }

.avgcell b { font-family: var(--display); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.avgcell { white-space: nowrap; }

/* ===================================================================================================
   v7.5 field style: matches signoff.space. Near-black ground, hairline rules, square corners,
   Inter Tight headings, Figtree text, uppercase JetBrains Mono labels, an orbiting node field behind
   the page and a 1px scroll-progress line. Call colours (amber live, teal passed, coral failed) stay.
   =================================================================================================== */
:root {
  --bg: #08090B; --bg-2: #050608; --panel: rgba(11,14,18,.86); --panel-2: #111419; --hover: rgba(242,241,238,.06);
  --line: rgba(242,241,238,.12); --line-2: rgba(242,241,238,.06);
  --fg: #F2F1EE; --fg-2: rgba(242,241,238,.72); --mut: #8A8F98;
  --acc-ink: #08090B; --ok: #7FD4C1; --ok-bg: rgba(127,212,193,.12);
  --shadow: none; --glow: none; --r: 0px; --r-s: 0px;
  --display: "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
  --sans: "Figtree", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.16,1,.3,1);
}
html { background: var(--bg); }
body { background: transparent; background-image: none; font: 15.5px/1.6 var(--sans); font-feature-settings: normal; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(242,241,238,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(242,241,238,.05) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(120% 80% at 50% 10%, #000 15%, transparent 70%); mask-image: radial-gradient(120% 80% at 50% 10%, #000 15%, transparent 70%); }
.field-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.field-layer > div { position: absolute; inset: 0; transform: translate(min(320px, 18vw), 0) scale(.8); opacity: .55; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 1px; background: rgba(242,241,238,.06); z-index: 60; }
.progress > span { display: block; height: 100%; width: 0; background: var(--acc); }
h1, h2, h3 { font-family: var(--display); font-variation-settings: normal; }
h1 { font-weight: 600; letter-spacing: -.03em; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.02; animation: line-in .7s var(--ease) both; }
h2 { font-weight: 600; letter-spacing: -.015em; }
h3 { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); }
@keyframes line-in { 0% { transform: translateY(24px); opacity: 0; } 100% { transform: none; opacity: 1; } }
code, .mono { font-family: var(--mono); }
:focus-visible { outline: 1px solid var(--ok); border-radius: 0; }

/* header: thin, blurred, uppercase mono navigation with a lime underline on the current page */
.top { top: 1px; background: rgba(8,9,11,.82); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-in { min-height: 56px; max-width: 1440px; }
.brand { font-family: var(--display); font-weight: 600; font-size: 17px; }
.brand .logo { width: 22px; height: 22px; border-radius: 6px; }
.brand .logo svg { width: 15px; height: 15px; }
.brand .tag { font: 400 11px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mut); }
nav { gap: 22px; }
nav a { font: 400 11px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mut); padding: 4px 0 3px; border-radius: 0; border-bottom: 1px solid transparent; transition: color .24s var(--ease), border-color .24s var(--ease); }
nav a:hover { background: none; color: var(--fg); }
nav a.on { background: none; color: var(--fg); border-bottom-color: var(--acc); }
nav a.on::after { display: none; }
.xlinks a { font: 400 11px/1.4 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; }
main { max-width: 1440px; }
.foot { max-width: 1440px; font-size: 13px; }
.runstrip { top: 57px; background: rgba(11,14,18,.94); backdrop-filter: blur(8px); }

/* square, hairline surfaces */
.panel, .card, .btn, .btn.chip, .seg, .chip-a, .console, .toast, .runcard, .hchip, .pill, .badge-prev, .msg, .cell, .att, .rr-row,
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea { border-radius: 0 !important; }
.panel { background: var(--panel); backdrop-filter: blur(6px); box-shadow: none; }
.card { background: var(--panel); backdrop-filter: blur(6px); transition: border-color .24s var(--ease), background-color .24s var(--ease); }
.card:hover { border-color: rgba(242,241,238,.24); }
.btn { font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; background: transparent; border-color: rgba(242,241,238,.24); height: 38px; transition: color .24s var(--ease), background-color .24s var(--ease), border-color .24s var(--ease); }
.btn:hover { background: rgba(242,241,238,.06); border-color: var(--fg); }
.btn.pri { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn.pri:hover { background: var(--acc); border-color: var(--acc); box-shadow: none; }
.btn.chip { font-size: 10.5px; height: 30px; }
.stat .k, .tbl th { font: 400 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.stat .v { font-family: var(--display); font-weight: 600; }
.tbl td { border-bottom-color: var(--line-2); }
.tbl tr.click:hover td { background: rgba(242,241,238,.03); }
.tbl.trace tr.tr-caller td, .tbl.trace tr.tr-heard td, .tbl.trace tr.tr-agent td { background: rgba(242,241,238,.03); }
p.lead { color: var(--fg-2); font-size: 16.5px; }
@media (prefers-reduced-motion: reduce) { h1 { animation: none; } }

/* ---------------------------------------------------------------- Results leaderboard (v7.5) */
.lbx-head { margin-bottom: 8px; }
.lbx-kick { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); margin-bottom: 14px; display: flex; align-items: center; gap: 14px; }
.lbx-kick::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lbx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 6px 0 28px; }
.lbx-kpis > div { padding: 18px 20px 18px 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lbx-kpis > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.lbx-kpis span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.lbx-kpis b { font: 600 clamp(28px, 3vw, 44px)/.95 var(--display); letter-spacing: -.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.lbx-kpis b.acc { color: var(--acc); }
.lbx-kpis em { font-style: normal; font-size: 13px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .lbx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lbx-kpis > div:nth-child(3) { padding-left: 0; border-left: 0; } .lbx-kpis > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

.lbx { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.lbx-row { position: relative; display: grid; grid-template-columns: 74px minmax(200px, 1.25fr) minmax(220px, 1.2fr) minmax(230px, 1.25fr) 170px minmax(170px, .9fr); gap: 0; align-items: stretch;
  border-bottom: 1px solid var(--line); background: rgba(11,14,18,.62); backdrop-filter: blur(6px); cursor: pointer; transition: background-color .24s var(--ease), box-shadow .24s var(--ease);
  animation: lbx-in .6s var(--ease) both; }
.lbx-row:nth-child(2) { animation-delay: 60ms; } .lbx-row:nth-child(3) { animation-delay: 120ms; } .lbx-row:nth-child(4) { animation-delay: 180ms; } .lbx-row:nth-child(n+5) { animation-delay: 240ms; }
@keyframes lbx-in { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
.lbx-row:hover, .lbx-row:focus-visible { background: rgba(242,241,238,.035); box-shadow: inset 2px 0 0 var(--acc); outline: none; }
.lbx-row > div { padding: 22px 20px; min-width: 0; }
.lbx-row > div + div { border-left: 1px solid var(--line-2); }
.lbx-rank { font: 600 34px/1 var(--display); letter-spacing: -.03em; color: var(--mut); font-variant-numeric: tabular-nums; }
.lbx-row.top .lbx-rank { color: var(--acc); }
.lbx-name { font: 600 22px/1.15 var(--display); letter-spacing: -.02em; color: var(--fg); }
.lbx-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.lbx-sub .mono { font-size: 11.5px; color: var(--fg-2); overflow-wrap: anywhere; }
.lbx-meta { margin-top: 8px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.lbx-pct { display: flex; align-items: baseline; gap: 2px; }
.lbx-pct b { font: 600 46px/.9 var(--display); letter-spacing: -.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.lbx-row.top .lbx-pct b { color: var(--acc); }
.lbx-pct small { font: 500 16px var(--display); color: var(--mut); }
.lbx-seg { display: flex; height: 8px; margin-top: 14px; background: rgba(242,241,238,.06); overflow: hidden; }
.lbx-seg i { display: block; height: 100%; width: 0; transition: width .9s var(--ease); }
.lbx-seg i.p { background: var(--ok); } .lbx-seg i.f { background: var(--no); } .lbx-seg i.x { background: var(--warn); }
.lbx-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 11px; color: var(--mut); }
.lbx-counts .p { color: var(--ok); } .lbx-counts .f { color: var(--no); } .lbx-counts .x { color: var(--warn); }
.lbx-lab { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin-bottom: 10px; }
.lbx-strip { display: grid; grid-template-columns: repeat(auto-fill, 15px); gap: 4px; }
.lbx-dot { width: 15px; height: 15px; display: block; transition: transform .2s var(--ease); }
.lbx-dot:hover { transform: scale(1.35); text-decoration: none; }
.lbx-dot.pass, .lbx-cell.pass, .lbx-key.pass { background: var(--ok); }
.lbx-dot.fail, .lbx-cell.fail, .lbx-key.fail { background: var(--no); }
.lbx-dot.exc, .lbx-cell.exc, .lbx-key.exc { background: var(--warn); }
.lbx-dot.none, .lbx-cell.none, .lbx-key.none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.lbx-langs { display: flex; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--fg-2); }
.lbx-langs i { font-style: normal; color: var(--mut); margin-right: 5px; font-size: 10px; letter-spacing: .1em; }
.lbx-tv { font: 600 24px/1 var(--display); letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.lbx-tv.sm { font-size: 18px; }
.lbx-tv small { font-size: 12px; color: var(--mut); font-weight: 500; }
.lbx-tb { height: 3px; margin-top: 8px; background: rgba(242,241,238,.06); }
.lbx-tb i { display: block; height: 100%; width: 0; background: rgba(242,241,238,.45); transition: width .9s var(--ease); }
.lbx-tb.t i { background: var(--ok); opacity: .7; }
.lbx-why .stack { height: 8px; }
.lbx-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.lbx-acts .btn { text-decoration: none; display: inline-flex; align-items: center; }
.lbx-rank { grid-area: r; } .lbx-who { grid-area: w; } .lbx-score { grid-area: s; } .lbx-calls { grid-area: c; } .lbx-time { grid-area: t; } .lbx-why { grid-area: y; }
.lbx-row { grid-template-areas: "r w s c t y"; }
@media (max-width: 1240px) {
  .lbx-row { grid-template-columns: 64px repeat(6, minmax(0, 1fr)); grid-template-areas: "r w w w s s s" "r c c t t y y"; }
  .lbx-row > div + div { border-left: 0; }
  .lbx-calls, .lbx-time, .lbx-why { border-top: 1px solid var(--line-2); }
  .lbx-time, .lbx-why { border-left: 1px solid var(--line-2) !important; }
}
@media (max-width: 640px) {
  .lbx-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "w w" "s s" "c c" "t y"; }
  .lbx-row > div { padding: 18px 16px; }
  .lbx-rank { position: absolute; top: 18px; right: 16px; padding: 0 !important; font-size: 24px; }
  .lbx-meta { display: none; }
  .lbx-pct b { font-size: 38px; }
  .lbx-time { border-left: 0 !important; }
  .lbx-acts .btn { padding: 0 10px; }
}

.lbx-matrix { margin-top: 28px; }
.lbx-mhead { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.lbx-mhead h2 { margin: 0; }
.lbx-key { width: 10px; height: 10px; display: inline-block; }
.lbx-mt { border-collapse: separate; border-spacing: 4px; width: 100%; }
.lbx-mt th { font: 400 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); text-align: center; padding: 0 0 6px; white-space: nowrap; }
.lbx-mt th .e { color: var(--warn); }
.lbx-mt tbody th { text-align: left; padding: 0 14px 0 0; font: 600 14px/1.25 var(--display); letter-spacing: -.01em; color: var(--fg); text-transform: none; white-space: nowrap; }
.lbx-mt tbody th .mono { font-size: 10.5px; color: var(--mut); font-weight: 400; letter-spacing: .02em; }
.lbx-mt td { padding: 0; }
.lbx-mt td.r, .lbx-mt th.r { text-align: right; padding-left: 12px; font-family: var(--display); font-size: 16px; color: var(--fg); }
.lbx-cell { display: grid; place-items: center; min-width: 30px; height: 34px; font: 600 11px var(--mono); color: rgba(8,9,11,.75); text-decoration: none !important; transition: transform .2s var(--ease), filter .2s var(--ease); }
.lbx-cell:hover { transform: scale(1.08); filter: brightness(1.12); }
.lbx-cell.none { color: transparent; }
@media (prefers-reduced-motion: reduce) { .lbx-row { animation: none; } }

/* company logos on the leaderboard, bare: no tile or border */
.lbx-name { display: flex; align-items: center; gap: 10px; }
.lbx-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; background: transparent; border: 0; }
.lbx-mname { display: inline-flex; align-items: center; gap: 8px; }
.lbx-mname .lbx-logo { width: 16px; height: 16px; }
.lbx-kpis em { display: inline-flex; align-items: center; gap: 7px; }
.lbx-kpis em .lbx-logo { width: 15px; height: 15px; }