/* Admin additions on top of the portal's app.css; everything else is the portal's own grammar. */
.brand, .me { gap: 10px; text-decoration: none; }
.brand .tagline { font-size: 12px; font-weight: 500; color: var(--faint); padding-left: 10px; border-left: 1px solid var(--line); }
.nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.nums > div { padding: 14px 0; border-top: 1px solid var(--line); }
.nums > div:nth-child(-n+2) { border-top: 0; }
.nums b { display: block; font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.nums small { display: block; font-size: 13px; color: var(--faint); }
.nums .k { font-size: 13px; color: var(--muted); }
.row .why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.word { flex: none; width: 76px; font-size: 13px; font-weight: 500; color: var(--ink); }
.word.need { color: var(--acc); }
.bottom-tabs a svg { width: 20px; height: 20px; }

/* sign-in and refusal screens: the portal's sign-in card on the same ground */
/* Sign-in: one centred glass card on the admin ground, logo above, the usual pattern for an internal sign-in page. */
.signin { background: none; color: var(--ink); display: grid; place-items: center; padding: 24px 16px; overflow: auto; }
.signin .stack { width: min(440px, 100%); display: grid; justify-items: center; gap: 28px; }
.signin .top { position: static; height: 28px; filter: none; }
:root[data-theme="dark"] .signin .top, :root:not([data-theme]) .signin .top { filter: invert(1) brightness(2); }
.si-card { position: relative; inset: auto; transform: none; width: 100%; padding: 44px 40px 32px; border-radius: 28px; text-align: center;
  color: var(--ink); animation: rise .5s var(--ease-arrive) both;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 55%), rgba(18,19,22,.42);
  -webkit-backdrop-filter: blur(44px) saturate(1.8); backdrop-filter: blur(44px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.18), 0 30px 80px rgba(0,0,0,.40); }
:root[data-theme="light"] .si-card {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.62) 60%), rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.06), 0 30px 80px -20px rgba(0,0,0,.18); }
.si-card .h { font-size: 44px; line-height: 48px; }
.si-card .h .acc { color: var(--acc); }
.si-card .sub { margin: 14px 0 32px; color: var(--muted); }
.si-card .btn.quiet { width: 100%; margin-top: 0; color: var(--ink); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.si-card .fine { margin: 24px 0 0; font-size: 12px; line-height: 18px; color: var(--faint); }
/* Google's own button styling (neutral surface, full-colour G), per Google's sign-in branding guidelines. */
.g-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: #121316; color: rgba(255,255,255,.90); font: 500 15px/1 var(--font-sans); cursor: pointer; transition: background .15s, box-shadow .15s; }
.g-btn:hover { background: #232329; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.g-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
:root[data-theme="light"] .g-btn { border-color: rgba(0,0,0,.14); background: #fff; color: #111; }
:root[data-theme="light"] .g-btn:hover { background: #f5f5f7; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.signin footer { position: static; justify-content: center; color: var(--faint); }
@media (max-width: 640px) {
  .si-card { padding: 32px 22px 24px; border-radius: 24px; animation-name: rise; }
  .si-card .h { font-size: 36px; line-height: 40px; }
}
/* Phone: four tabs plus More (the portal's bar is six columns wide). */
@media (max-width: 760px) { .bottom-tabs { grid-template-columns: repeat(5, 1fr); } }
.row .mono svg { width: 18px; height: 18px; }
.nums.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nums.four > div:nth-child(-n+4) { border-top: 0; }
@media (max-width: 760px) { .nums.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nums.four > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
/* Cost page: vendor sparks, month chart, money columns. Colours from the chart tokens. */
.cost-row { gap: 14px; align-items: center; }
.cost-row .cn { flex: none; width: 84px; text-align: right; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cost-row .cn.strong { color: var(--ink); font-weight: 500; }
.cost-row.head { padding-top: 0; padding-bottom: 6px; }
.cost-row.head .cn, .spark.lbl i { font-size: 12px; color: var(--faint); font-style: normal; }
.spark { flex: none; display: flex; align-items: flex-end; gap: 2px; width: 150px; height: 28px; }
.spark.lbl { height: auto; align-items: center; }
.spark.lbl i { background: none; text-align: center; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 4px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .cost-row .spark, .cost-row .mini { display: none; }
  .cost-row { flex-wrap: nowrap; }
  .cost-row .grow { min-width: 0; }
  .cost-row.v .cn:nth-last-child(2) { display: none; }
  .cost-row .cn { width: 64px; font-size: 13px; }
}
.blk .sect .seg { margin-left: auto; }
.seg.sm button { height: 30px; padding: 0 12px; font-size: 13px; }
/* Expense ledger */
.cost-row.exp .dt { flex: none; width: 52px; font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.needw { color: var(--acc); }

/* ---------- Look v2 (4 Nov 2026): a skyline that changes daily behind real Connectry glass ----------
   Six approved skylines (no people, so glass never sits on a face), one per day (admin.js sets --city).
   Light: the photo faded far back under a pale veil. Dark: the photo under the app icon's gradient, blue high right,
   warm low left, deeper than the portal's. Rail and stage are glass with the design system's lens; panels stay tonal. */
:root { --city: url("img/city/1.jpg"); }
:root[data-theme="light"] .ambient {
  background: radial-gradient(120% 90% at 70% 0%, rgba(245,245,247,.55), rgba(245,245,247,.86) 70%), var(--city) center / cover no-repeat, var(--bg); }
:root[data-theme="dark"] .ambient, :root:not([data-theme]) .ambient {
  background:
    radial-gradient(85% 75% at 100% 0%, rgba(74,111,165,.56), transparent 70%),
    radial-gradient(75% 70% at 0% 100%, rgba(255,217,176,.16), transparent 70%),
    linear-gradient(160deg, rgba(14,15,17,.58) 0%, rgba(14,15,17,.70) 55%, rgba(5,5,5,.80) 100%),
    var(--city) center / cover no-repeat, #0e0f11; }
.ambient::after { background: none; }
.ambient { animation: cityin 1.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cityin { from { opacity: 0 } }
/* The lens: plain chain first (Safari), then the convex map where it is supported. */
.rail.glass, .stage.glass, .bottom-tabs {
  -webkit-backdrop-filter: blur(18px) saturate(1.7) brightness(1.04);
  backdrop-filter: blur(18px) saturate(1.7) brightness(1.04);
  backdrop-filter: url(#lens) blur(18px) saturate(1.7) brightness(1.04); }
:root[data-theme="light"] .rail.glass, :root[data-theme="light"] .stage.glass {
  background: linear-gradient(180deg, var(--glass-tint-top, rgba(255,255,255,.40)), var(--glass-tint-bottom, rgba(255,255,255,.26))); }
:root[data-theme="dark"] .rail.glass, :root[data-theme="dark"] .stage.glass {
  background: linear-gradient(180deg, rgba(18,19,22,.62), rgba(14,15,17,.70)); }
:root[data-theme="dark"] .stage.glass { background: linear-gradient(180deg, rgba(18,19,22,.46), rgba(14,15,17,.58)); }

/* Overview: environment health strips and the spend spark on Key numbers */
.health { display: grid; gap: 14px; }
.hl { text-decoration: none; color: inherit; border-radius: 8px; }
.hl:hover { background: var(--panel-hover); }
.stackcol { display: grid; gap: 20px; align-content: start; }
.hl { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; gap: 14px; align-items: center; font-size: 13px; }
.hl > span:first-child { color: var(--ink); font-weight: 500; }
.hl small { color: var(--faint); font-variant-numeric: tabular-nums; }

/* Grader labels (P6): one answer at a time, five large letter buttons, a 40-dot jump grid. Phone first. */
.p6-count { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.p6-count b { font-size: 26px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; }
.p6-case .sect { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.p6-k { margin: 18px 0 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.p6-v { font-size: 15px; line-height: 22px; color: var(--ink); overflow-wrap: anywhere; }
.p6-f.q .p6-v { font-size: 18px; line-height: 26px; font-weight: 500; }
.p6-f.ans { margin-top: 18px; padding: 2px 0 2px 14px; border-left: 3px solid var(--acc); }
.p6-f.ans .p6-k { margin-top: 0; color: var(--acc); }
.p6-mem { align-items: flex-start; }
.p6-mem .t { overflow-wrap: anywhere; }
.p6-n { flex: none; width: 24px; padding-top: 2px; font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.p6-pick { display: grid; gap: 8px; margin-top: 22px; }
.p6-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 16px; border: 0; border-radius: 16px; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s; }
.p6-opt:hover { background: var(--panel-hover); }
.p6-opt:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.p6-opt b { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; font-size: 16px; font-weight: 600; background: var(--line); color: var(--ink); }
.p6-opt .t { display: block; font-size: 15px; font-weight: 500; }
.p6-opt .s { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--faint); }
.p6-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--acc); }
.p6-opt[aria-pressed="true"] b { background: var(--acc); color: var(--on-ink); }
.p6-opt[disabled] { opacity: var(--opacity-disabled); cursor: default; }
.p6-status { margin-top: 12px; font-size: 13px; color: var(--muted); }
.p6-status.err { color: var(--danger); }
.p6-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.p6-dots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.p6-dot { height: 32px; border: 0; border-radius: 10px; cursor: pointer; font: 500 12px/1 var(--font-sans); font-variant-numeric: tabular-nums;
  color: var(--muted); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.p6-dot.done { color: var(--ink); background: var(--line); box-shadow: none; }
.p6-dot[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--acc); color: var(--ink); }
@media (max-width: 760px) {
  .p6-opt { min-height: 64px; }
  .p6-dots { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

/* ---------- Look v3 (8 Nov 2026): data first ----------
   Every page opens with a strip of headline numbers (label, value, trend, context), then charts whose titles ask the
   question they answer, then detail tables. Status colour only for meaning, always beside its word. Panels stay tonal;
   glass stays on the shell only. One type scale: 12 label, 13 small, 14 body, 15 section, 30 value, 40 page title. */
.kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); padding: 18px 0 16px; }
.kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 2px 22px 0; border-left: 1px solid var(--line); }
.kpi:first-child { border-left: 0; }
.kpi .lbl { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.kpi .val { font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .val.none { font-size: 20px; line-height: 36px; font-weight: 400; color: var(--faint); letter-spacing: 0; }
.kpi .ctx { font-size: 13px; line-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dl { font-weight: 500; }
.dl.good { color: var(--ok); }
.dl.bad { color: var(--danger); }
.dl.flat { color: var(--muted); }
/* State: a dot and its word. good, watch, bad from the portal's status tokens; idle is grey. */
.st { flex: none; display: inline-flex; align-items: center; gap: 7px; min-width: 96px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.st i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--chart-step-1); }
.st.good i { background: var(--s-ok); }
.st.watch i { background: var(--s-warn); }
.st.bad i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M-1 1l2-2M0 4l4-4M3 5l2-2' stroke='white' stroke-opacity='.45' stroke-width='1.2'/%3E%3C/svg%3E"), var(--s-danger); }
.st.active i { background: var(--chart-accent); }
.st.idle { color: var(--muted); font-weight: 400; }
.legend .st { min-width: 0; font-size: 12px; font-weight: 400; color: var(--muted); }
.row .r.num { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.row .r.fills { color: var(--faint); }
.empty-row .grow .s { color: var(--muted); }
/* Health and progress bars carry the same meaning as the dots. */
.sh-body > .kpis { grid-column: 1 / -1; }
/* Rows keep their content height; a tall window leaves space below instead of stretching every panel. */
.sh-body { align-content: start; }
@media (max-width: 960px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; padding: 16px 0 14px; }
  .kpi { padding: 0 16px; }
  .kpi:nth-child(odd) { border-left: 0; }
}
@media (max-width: 760px) {
  .kpi { padding: 0 12px; }
  .kpi .val { font-size: 26px; line-height: 32px; }
  .st { min-width: 0; }
  .row > .st { align-self: flex-start; padding-top: 2px; }
}

/* ---------- Board (8 Nov 2026): four columns of cards, a sheet to edit one. Cards are tonal, the sheet is the one glass overlay. ---------- */
.sh-head .act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.bwrap { grid-column: 1 / -1; min-width: 0; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bcol { min-width: 0; padding: 14px 12px 12px; border-radius: 20px; background: var(--panel); box-shadow: var(--panel-shadow); }
.bhead { display: flex; align-items: baseline; gap: 8px; padding: 0 6px 10px; }
.bhead h2 { font-size: 15px; line-height: 20px; font-weight: 500; }
.bhead em, .bcolseg em { font-style: normal; color: var(--faint); font-variant-numeric: tabular-nums; }
.blist { display: grid; gap: 8px; min-height: 48px; }
.bcard { display: grid; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; text-align: left; cursor: grab;
  font: inherit; color: var(--ink); background: var(--field); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s; }
.bcard:hover { background: var(--panel-hover); }
.bcard:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.bcard .bt { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.bcard .bm { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; line-height: 16px; color: var(--muted); }
.bcard .bm .st { min-width: 0; font-size: 12px; gap: 5px; }
.bcard .bm .st i { width: 6px; height: 6px; }
.bcard .who { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--ink); background: var(--line); }
.bcard .who.none { color: var(--faint); }
.bcard .tag { padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.bcard .bid { margin-left: auto; color: var(--faint); font-variant-numeric: tabular-nums; }
.due.soon { color: var(--warn); font-weight: 500; }
.due.late { color: var(--danger); font-weight: 500; }
.lowp { color: var(--faint); }
.bempty { padding: 8px 6px 4px; font-size: 13px; color: var(--faint); }
.bghost { opacity: .35; }
.bdrag { box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.bwrap > .fine { margin-top: 14px; }
.bcolseg { display: none; }
/* Sheet colour from the portal's own .modal.brainpop; rendered outside the stage so it covers the tab bar. */
.modal.brainpop.bmodal { width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; gap: 14px; }
.bmhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bf { display: grid; gap: 6px; }
.bf > span { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.bf select.field { -webkit-appearance: none; appearance: none; cursor: pointer; }
.bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bnotes { font-family: var(--font-sans); font-size: 14px; min-height: 110px; }
.bhist { display: grid; gap: 4px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 12px; line-height: 18px; color: var(--muted); }
.bhist b { font-weight: 500; color: var(--ink); }
.bhist span { color: var(--faint); }
.berr { font-size: 13px; color: var(--danger); }
.bmodal .acts { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bmodal .acts .grow { flex: 1; }
@media (max-width: 1100px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .bcolseg { display: flex; width: 100%; margin-bottom: 12px; overflow-x: auto; }
  .bcolseg button { flex: 1; white-space: nowrap; }
  .board { grid-template-columns: 1fr; }
  .bcol { display: none; }
  .bcol.on { display: block; }
  .bcard { cursor: pointer; }
  .sh-head .act { justify-content: flex-start; }
  .bgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Board activity: who is working on what now, and what got done. */
.nowrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; padding-bottom: 8px; }
.nowrow { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.nowrow .t { font-size: 15px; font-weight: 500; color: var(--ink); }
.nowrow .t em { font-style: normal; font-weight: 400; color: var(--faint); margin-left: 8px; font-size: 13px; }
.nowrow ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.nowrow li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; min-width: 0; }
.nowrow li .st { min-width: 0; padding-top: 6px; }
.nowrow li b { display: block; font-weight: 400; color: var(--ink); overflow-wrap: anywhere; }
.nowrow li small { display: block; font-size: 12px; color: var(--faint); }
.nowrow li.idle { color: var(--faint); font-size: 13px; }
.who.big, .drow .who { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--ink); background: var(--line); }
.drow .who { width: 24px; height: 24px; font-size: 10px; }
.drow { align-items: flex-start; gap: 12px; }
.drow .dt { flex: none; width: 64px; padding-top: 2px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.dday h3 { margin: 14px 0 2px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.tag.tlink { flex: none; padding: 1px 8px; border: 0; border-radius: 999px; font: 500 12px/18px var(--font-sans); color: var(--muted); background: none; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.tag.tlink:hover { color: var(--ink); }
@media (max-width: 760px) {
  .nowrows { grid-template-columns: 1fr; }
  .drow .dt { width: 52px; }
}

/* ---------- Charts v2.2 (9 Nov 2026): SVG from cx-chart.js, two data colours, one glass tooltip ----------
   Proposal for the design system: knowledge/design/proposals/CHART-KIT-2026-11.md (Fabian reviews, board T-13).
   Status tones are their own tokens: warning and danger differ in lightness (colour-blind ΔE above 21), danger is hatched. */
:root {
  --c-accent: var(--blue-light, #7fa3d6); --c-comp: #6e6f78; --c-grid: rgba(255,255,255,.07); --c-base: rgba(245,245,247,.42);
  --c-band: rgba(255,255,255,.045); --c-area: rgba(127,163,214,.14); --c-ring: #1c1d21;
  --s-ok: #7cc896; --s-warn: #f5c95a; --s-danger: #e5534b; --s-idle: #4a4b52;
  --tip-top: rgba(36,37,42,.62); --tip-bottom: rgba(24,25,29,.72); --tip-rim: rgba(255,255,255,.14); --tip-line: rgba(255,255,255,.10);
  --tip-shadow: 0 18px 48px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
}
:root[data-theme="light"] {
  --c-accent: var(--chart-accent); --c-comp: var(--chart-comparison); --c-grid: var(--chart-grid); --c-base: rgba(29,29,31,.55);
  --c-band: rgba(0,0,0,.035); --c-area: rgba(74,111,165,.10); --c-ring: #fff;
  --s-ok: #2f7d4f; --s-warn: #d39b1f; --s-danger: #b42318; --s-idle: var(--chart-step-1);
  --tip-top: rgba(255,255,255,.74); --tip-bottom: rgba(255,255,255,.62); --tip-rim: rgba(255,255,255,.95); --tip-line: rgba(0,0,0,.07);
  --tip-shadow: 0 18px 48px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.06);
}
.cxc { min-width: 0; margin-top: 6px; }
.cxc.sp { height: 34px; margin-top: auto; padding-top: 8px; box-sizing: content-box; }
.cxc.segs { margin: 0; }
svg.cx { display: block; overflow: visible; outline: none; touch-action: pan-y; cursor: crosshair; }
svg.cx:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.cx .grid { stroke: var(--c-grid); stroke-width: 1; } .cx .grid.base { stroke: var(--c-base); }
.cx .ax { font: 500 12px var(--font-sans); fill: var(--faint); font-variant-numeric: tabular-nums; }
.cx .val { font: 500 13px var(--font-sans); fill: var(--ink); font-variant-numeric: tabular-nums; }
.cx .lbl { font: 400 13px var(--font-sans); fill: var(--muted); }
.cx .m.accent { fill: var(--c-accent); } .cx .m.comp { fill: var(--c-comp); } .cx .m.outline { fill: none; stroke: var(--c-base); stroke-width: 1.5; }
.cx .m.ok { fill: var(--s-ok); } .cx .m.warn { fill: var(--s-warn); } .cx .m.danger { fill: url(#cx-hatch); } .cx .m.idle { fill: var(--s-idle); }
.cx .track { fill: var(--c-grid); }
.cx .band, .cx .hit { fill: transparent; } .cx .col.on .band { fill: var(--c-band); }
.cx .m, .cx .val { transition: opacity .16s ease; }
.cx.hovering .col:not(.on) .m, .cx.hovering .col:not(.on) .val { opacity: .38; }
.cx .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .cx .ln.accent { stroke: var(--c-accent); } .cx .ln.comp { stroke: var(--c-comp); } .cx .ln.dash { stroke-dasharray: 4 4; }
.cx .area.accent { fill: var(--c-area); }
.cx .xh { stroke: var(--c-base); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.cx .dot { opacity: 0; stroke: var(--c-ring); stroke-width: 2; } .cx .dot.accent { fill: var(--c-accent); } .cx .dot.comp { fill: var(--c-comp); }
.cx .dot.last { opacity: 1; stroke-width: 1.5; }
.cx.xon .xh, .cx.xon .dot { opacity: 1; } .cx.xon .dot.last { opacity: 0; }
svg.mini { flex: none; width: 150px; height: 28px; }
svg.mini rect { fill: var(--c-accent); } svg.mini.alt rect { fill: var(--c-comp); } svg.mini rect:hover { opacity: .7; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 4px; font-size: 12px; color: var(--muted); }
.sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
.sw.accent { background: var(--c-accent); } .sw.comp { background: var(--c-comp); } .sw.outline { box-shadow: inset 0 0 0 1.5px var(--c-base); }
.sw.ok { background: var(--s-ok); } .sw.warn { background: var(--s-warn); } .sw.idle { background: var(--s-idle); } .sw.none { background: none; }
.sw.danger { background: repeating-linear-gradient(135deg, var(--s-danger) 0 2px, color-mix(in srgb, var(--s-danger) 55%, var(--c-ring)) 2px 4px); }
.sw.line { width: 14px; height: 2px; border-radius: 1px; background: var(--c-comp); } .sw.line.accent { background: var(--c-accent); }
/* The one glass in a data view: the tooltip, a lens over the chart it explains. */
.cx-tip { position: fixed; left: 0; top: 0; z-index: 80; min-width: 200px; max-width: 280px; padding: 12px 14px 10px; border-radius: 12px; pointer-events: none;
  background: linear-gradient(180deg, var(--tip-top), var(--tip-bottom));
  -webkit-backdrop-filter: blur(16px) saturate(1.7); backdrop-filter: blur(16px) saturate(1.7);
  box-shadow: inset 0 1px 0 var(--tip-rim), inset 0 0 0 1px var(--tip-line), var(--tip-shadow);
  opacity: 0; transition: opacity .14s ease, transform .08s ease-out; font-size: 13px; color: var(--muted); }
.cx-tip.on { opacity: 1; }
.cx-tip p { margin: 0; }
.cx-tt { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px !important; }
.cx-tr, .cx-tf { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.cx-tr span, .cx-tf span { flex: 1; } .cx-tr b, .cx-tf b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.cx-tr.dim { color: var(--faint); } .cx-tr.dim b { color: var(--muted); font-weight: 400; }
.cx-tf { border-top: 1px solid var(--tip-line); margin-top: 6px !important; padding-top: 7px; }
@media (prefers-reduced-motion: reduce) { .cx-tip, .cx .m { transition: none; } }

/* Agent page (T-49): kind tabs, then a split view, list on the left and the reader on the right. */
.agent { padding: 16px 0 0; overflow: hidden; }
.atabs { display: flex; margin: 0 18px 12px; max-width: calc(100% - 36px); overflow-x: auto; scrollbar-width: none; }
.atabs button { flex: none; }
.atabs button em { font-style: normal; color: var(--faint); font-size: 12px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.asplit { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); border-top: 1px solid var(--line); height: min(78vh, 900px); }
.aside-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.afilt { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.afilt .field { height: 36px; font-size: 14px; }
.afilt .seg { align-self: flex-start; }
/* No overscroll-behavior here: at the top or bottom of the list the wheel must carry on to the page. */
.alist { flex: 1; overflow-y: auto; }
/* Folder headers: click to open or close; Review folder marks every open item in it at once. */
.agrp { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; background: var(--pop); border-bottom: 1px solid var(--line); }
.agrp.sub { position: static; background: none; }
.agrp-t { display: flex; flex: 1; min-width: 0; align-items: center; gap: 6px; padding: 9px 8px 9px calc(10px + var(--d, 0) * 16px); border: 0; background: none; color: var(--muted); font: 500 12px/17px var(--font-sans); text-align: left; cursor: pointer; }
.agrp-t:hover { color: var(--ink); }
.agrp-t .grow { min-width: 0; overflow-wrap: anywhere; }
.agrp-t em { flex: none; font-style: normal; font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }
.achev { flex: none; color: var(--faint); transition: transform .15s ease; }
.agrp.open .achev { transform: rotate(90deg); }
.agrp-r, .alink { flex: none; border: 0; background: none; padding: 6px 10px; color: var(--acc); font: 500 12px/17px var(--font-sans); cursor: pointer; border-radius: 8px; }
.agrp-r:hover, .alink:hover { background: var(--panel-hover); }
.alink { align-self: flex-start; padding: 4px 8px; margin-left: -8px; }
.alink[disabled] { opacity: .5; cursor: default; }
.arow2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.arow2 .alink { margin-left: 0; }
.abatch { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--field); border-bottom: 1px solid var(--line); }
.afilt .abatch { margin: 0 -14px -12px; border-top: 1px solid var(--line); border-bottom: 0; }
.abatch .s { font-size: 13px; line-height: 19px; color: var(--muted); overflow-wrap: anywhere; }
.abatch .s b { font-weight: 500; color: var(--ink); }
.abatch .field { height: 34px; font-size: 13px; }
.abtns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.abtns .rvb { height: 30px; padding: 0 12px; font-size: 13px; }
.abtns .rvb.good { box-shadow: inset 0 0 0 1.5px var(--s-ok); }
.abtns .rvb.watch { box-shadow: inset 0 0 0 1.5px var(--s-warn); }
.abtns .rvb.bad { box-shadow: inset 0 0 0 1.5px var(--s-danger); }
.aundo { font-size: 13px; color: var(--muted); }
.aundo .alink { margin-left: 2px; }
/* About card: the agent's profile from the registry, the same layout for every agent. */
.aprof { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 32px; }
.aprof .akv { margin: 4px 0 0; border-bottom: 0; padding-bottom: 0; }
.acan { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 16px; }
.acan .label { font-size: 12px; color: var(--faint); margin-bottom: 6px; }
.aplist { margin: 0; padding-left: 18px; font-size: 13px; line-height: 19px; color: var(--ink); }
.aplist li + li { margin-top: 5px; }
.anotes { margin-top: 12px; }
/* Folded to one line: name, purpose (cut off), account and owner, Details. On a phone it wraps instead. */
.afold { flex-direction: row; align-items: baseline; gap: 4px 14px; padding: 12px 22px; }
.afold h2 { flex: none; font-size: 15px; line-height: 20px; font-weight: 500; }
.afold-p { flex: 0 1 auto; min-width: 35%; font-size: 14px; line-height: 20px; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afold-m { flex: 0 1 auto; min-width: 0; font-size: 13px; line-height: 20px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afold .alink { align-self: center; margin: -4px -8px -4px auto; }
.aabout-card .sect .alink { align-self: center; margin: -4px -8px -4px 0; }
/* Review progress: one line at the top of the review panel, in place of a row of numbers. */
.aprog { margin: 0 18px 12px; }
.aprog p { margin-top: 8px; font-size: 13px; line-height: 19px; color: var(--muted); font-variant-numeric: tabular-nums; }
.aprog p b { font-weight: 500; color: var(--ink); }
.btn em.bn { font-style: normal; margin-left: 6px; opacity: .7; font-variant-numeric: tabular-nums; }
/* Fix and drop list. */
.afix .anote-r { margin: 6px 0 4px; font-size: 14px; line-height: 20px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.arow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.arow:hover { background: var(--panel-hover); }
.arow.on { background: var(--active); box-shadow: inset 3px 0 0 var(--acc); }
.arow .grow { min-width: 0; }
.arow .t { display: block; font-size: 14px; line-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow .s { display: block; font-size: 12px; line-height: 17px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow .st { min-width: 0; font-size: 12px; }
.adot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--s-warn); }
.adot.bad { background: var(--s-danger); }
.apad { padding: 16px 14px; }
.aread { min-width: 0; overflow-y: auto; padding: 18px 22px 28px; }
.aread.empty { display: grid; place-items: center; text-align: center; }
.ahead { display: flex; gap: 12px; align-items: flex-start; }
.ahead h2 { font-size: 20px; line-height: 26px; font-weight: 500; overflow-wrap: anywhere; }
.ahead .label { font-size: 12px; color: var(--faint); }
.ahead .s { font-size: 13px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.aback { display: none; }
.rvbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 10px; }
.rvb { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--field); color: var(--ink); font: 500 14px/1 var(--font-sans); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.rvb kbd { font: 500 11px/1 var(--font-sans); color: var(--faint); }
.rvb[aria-pressed="true"].good { box-shadow: inset 0 0 0 2px var(--s-ok); }
.rvb[aria-pressed="true"].watch { box-shadow: inset 0 0 0 2px var(--s-warn); }
.rvb[aria-pressed="true"].bad { box-shadow: inset 0 0 0 2px var(--s-danger); }
.aread .anote { width: 100%; font: 14px/20px var(--font-sans); min-height: 64px; resize: vertical; font-size: 14px; line-height: 20px; padding: 10px 12px; }
.aabout { margin: 12px 0 0; font-size: 14px; line-height: 21px; color: var(--muted); }
.akv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 19px; }
.akv span { color: var(--faint); }
.akv b { font-weight: 400; color: var(--ink); overflow-wrap: anywhere; }
.atext, .amd pre { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--field); font: 12.5px/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.amd { margin-top: 12px; font-size: 15px; line-height: 24px; color: var(--ink); overflow-wrap: anywhere; }
.amd h3 { font-size: 19px; line-height: 26px; font-weight: 500; margin: 18px 0 6px; }
.amd h4, .amd h5, .amd h6 { font-size: 15px; font-weight: 500; margin: 14px 0 4px; }
.amd p, .amd blockquote { margin: 0 0 10px; }
.amd blockquote { padding-left: 12px; border-left: 2px solid var(--line); color: var(--muted); }
.amd ul, .amd ol { margin: 0 0 10px; padding-left: 22px; }
.amd code { font: 13px var(--font-mono); padding: 1px 5px; border-radius: 6px; background: var(--field); }
.amd pre.fm, .amd pre.tbl { font-size: 12px; color: var(--muted); }
.amd .wl { color: var(--acc); }
.amd a { color: var(--acc); }
@media (max-width: 900px) {
  .aprof, .acan { grid-template-columns: 1fr; }
  .afold { flex-wrap: wrap; row-gap: 2px; padding: 8px 16px 10px; }
  .afold-p { flex-basis: 100%; order: 3; white-space: normal; }
  .afold-m { flex-basis: 100%; order: 4; white-space: normal; }
  .asplit { grid-template-columns: minmax(0, 1fr); height: auto; }
  .aside-list { border-right: 0; }
  .alist { max-height: 70vh; }
  .asplit .aread.empty { display: none; }
  .asplit.picked .aside-list { display: none; }
  .aback { display: inline-flex; }
  .aread { padding: 16px; }
}

/* AI services tab: rows open to the registry facts. */
.ai-row > summary { list-style: none; }
.ai-row > summary::-webkit-details-marker { display: none; }
.ai-row > summary .grow { min-width: 0; }
.ai-row > summary > .r { flex: 0 1 34%; max-width: 34%; white-space: normal; text-align: right; }
.ai-row .r small { color: var(--muted); font-size: 12px; }
.ai-more { padding: 0 0 12px 110px; }
.ai-more .row .s { margin: 0 0 2px; }
.ai-red { color: var(--danger); font-weight: 500; }
@media (max-width: 760px) { .ai-more { padding-left: 0; } .ai-row > summary > .r { flex-basis: 100%; max-width: none; text-align: left; } }
/* OpenAI panels refresh in place inside #oai; its children sit in the page grid. */
.oai { display: contents; }