/* AGENTS BANK - the agent's own exchange board.
 *
 * The world: the agent's figures are quoted on a deep-navy board, ruled by a
 * faint construction grid taken from the pixels of the CampusNect mark; the
 * detail sits below it on a cool ledger. Square corners and square cells
 * everywhere, because the mark is built of squares. Bright blue (#19a3ff on
 * navy, #1557d6 on paper) is spent on what can be pressed, and on the agent's
 * own share - nothing else is that colour.
 *
 * Faces, self-hosted: Big Shoulders Display (figures and headings - a
 * condensed board face), Onest (everything read).
 */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-latin.e1ffd6608051.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-latin.3db826ed1c5d.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink-0: #040b22;
  --board: #06102e;
  --navy: #0b1f5c;
  --navy-2: #15307a;
  --blue: #1557d6;
  --live: #19a3ff;
  --on-board: #ffffff;
  --on-board-2: #a9b9e0;
  --board-line: rgba(169, 185, 224, .18);
  --paper: #f1f4fa;
  --sheet: #ffffff;
  --ink: #0d1a3f;
  --ink-2: #4e5b7c;
  --line: #dde4f1;
  --line-2: #c5d0e6;
  --good: #0d7a4e;
  --good-bg: #e2f4eb;
  --warn: #855400;
  --warn-bg: #fff1d6;
  --bad: #b3261e;
  --bad-bg: #fde8e6;
  --display: "Big Shoulders Display", "Onest", system-ui, sans-serif;
  --text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 4px;
  --lift: 0 1px 2px rgba(6, 16, 46, .05), 0 10px 28px -14px rgba(6, 16, 46, .22);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-press: 120ms;
  --t-state: 220ms;
  --t-enter: 640ms;
  --dock-h: 68px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-2) transparent; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 400 15.5px/1.55 var(--text);
  font-feature-settings: "tnum" 1;
  caret-color: var(--blue);
  padding-bottom: calc(var(--dock-h) + 28px + env(safe-area-inset-bottom));
}
body.no-dock { padding-bottom: 0; }
::selection { background: rgba(25, 163, 255, .28); color: inherit; }
a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
img, svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 900px) { .wrap { padding-inline: 32px; } }

/* ---------------------------------------------------------------------- */
/* The board                                                               */
/* ---------------------------------------------------------------------- */

.board {
  position: relative;
  color: var(--on-board);
  background:
    radial-gradient(60% 90% at 88% -10%, rgba(25, 163, 255, .20), rgba(25, 163, 255, 0) 60%),
    radial-gradient(50% 70% at 0% 120%, rgba(21, 87, 214, .28), rgba(21, 87, 214, 0) 70%),
    linear-gradient(rgba(169, 185, 224, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(169, 185, 224, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--board);
  padding-bottom: 28px;
}
/* The mark's pixels, stepping down off the home board's edge. */
.board-home::after {
  content: "";
  position: absolute;
  right: max(24px, calc(50% - 560px));
  bottom: -14px;
  width: 14px; height: 14px;
  background: var(--live);
  box-shadow: -24px -12px 0 -2px var(--navy-2), 20px -18px 0 -4px #5cb8ff, -4px -26px 0 -4px var(--blue);
}
.board a { color: #cfe3ff; }

.topbar { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none; }
.brand img { width: 34px; height: auto; display: block; }
.brand b {
  display: block;
  font: 800 1.3rem/1 var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.brand small {
  display: block;
  margin-top: 3px;
  font: 600 .6rem/1 var(--text);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--on-board-2);
}
.account { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.account .who { text-align: right; font-size: .8rem; line-height: 1.3; color: var(--on-board-2); }
.account .who strong { display: block; color: #fff; font-weight: 600; font-size: .86rem; }
.account .who a { color: var(--on-board-2); }
.initials {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r);
  background: var(--navy-2);
  border: 1px solid rgba(169, 185, 224, .3);
  font: 800 1rem/1 var(--display);
  letter-spacing: .04em;
  color: #fff;
}
.signout {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r);
  border: 1px solid var(--board-line);
  color: var(--on-board-2) !important;
}
.signout:hover { color: #fff !important; border-color: rgba(169, 185, 224, .45); }
@media (max-width: 640px) { .account .who { display: none; } }

.board-head { padding-top: 10px; }
.board-head h1 {
  margin: 0;
  font: 800 clamp(2.1rem, 7vw, 3.2rem)/1 var(--display);
  letter-spacing: .01em;
  color: #fff;
  text-wrap: balance;
}
.board-head p { margin: .45rem 0 0; color: var(--on-board-2); max-width: 62ch; }

/* ---------------------------------------------------------------------- */
/* Home: the purse and the year                                            */
/* ---------------------------------------------------------------------- */

.board-main {
  display: grid;
  gap: 18px;
  padding-top: 14px;
}
@media (min-width: 960px) {
  .board-main { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: stretch; padding-top: 22px; }
}

.purse { display: flex; flex-direction: column; justify-content: center; padding: 6px 0; }
.cap { margin: 8px 0 0; font-size: .95rem; color: var(--on-board-2); }
.purse .tag { margin: 0; font: 600 .78rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--on-board-2); }
.figure {
  margin: 6px 0 0;
  display: flex; align-items: flex-start; gap: .14em;
  font: 800 clamp(3.7rem, 17vw, 6.6rem)/.86 var(--display);
  letter-spacing: .005em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.figure .cur { font-size: .3em; line-height: 1; margin-top: .16em; letter-spacing: .08em; color: var(--on-board-2); font-weight: 700; }
.figure.neg { color: #ffc2b8; }
.figure .num { font-variant-numeric: tabular-nums; }

.purse-sub { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; padding: 0; list-style: none; }
.purse-sub li { font-size: .88rem; color: var(--on-board-2); }
.purse-sub b { display: block; color: #fff; font: 700 1.3rem/1.1 var(--display); letter-spacing: .02em; }
.purse-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.go {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 0; border-radius: var(--r);
  background: var(--live);
  color: var(--ink-0) !important;
  font: 800 1.2rem/1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(25, 163, 255, .7);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s;
}
.go:hover { background: #45b5ff; box-shadow: 0 14px 30px -10px rgba(25, 163, 255, .85); }
.go:active { transform: translateY(1px) scale(.985); }
.go svg { width: 20px; height: 20px; }
.ghost {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 0 18px;
  border-radius: var(--r);
  border: 1px solid var(--board-line);
  color: #fff !important;
  font-weight: 600; font-size: .92rem;
  text-decoration: none;
}
.ghost:hover { border-color: rgba(169, 185, 224, .5); background: rgba(255, 255, 255, .04); }

.year {
  position: relative;
  padding: 18px 18px 16px;
  border: 1px solid var(--board-line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
}
.year h2 { margin: 0; font: 800 1.5rem/1.05 var(--display); letter-spacing: .02em; color: #fff; }
.year .note { margin: 4px 0 0; font-size: .84rem; color: var(--on-board-2); }
/* The hero: the agent's share of the company as a hundred squares, built
   from the bottom up like the mark's own pixels. */
.share { display: grid; gap: 16px; margin-top: 12px; }
@media (min-width: 520px) {
  .share { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: end; gap: 24px; }
}
.share .pct { margin: 0; font: 800 clamp(4rem, 19vw, 6rem)/.84 var(--display); color: #fff; letter-spacing: -.005em; }
.share .pct small { font-size: .38em; margin-left: .04em; color: var(--live); }
.pct-n { font-variant-numeric: tabular-nums; }
.share .of { margin: 10px 0 0; font: 500 .86rem/1.4 var(--text); color: var(--on-board-2); max-width: 30ch; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; font-size: .74rem; color: var(--on-board-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 1px; }
.legend .k-me { background: var(--live); box-shadow: 0 0 8px rgba(25, 163, 255, .6); }
.legend .k-co { background: rgba(169, 185, 224, .2); }
.waffle {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 340px;
  justify-self: end;
  transform: scaleY(-1);          /* square 1 sits bottom-left: it is built upward */
}
@media (max-width: 519px) { .waffle { justify-self: stretch; max-width: none; } }
.waffle i { aspect-ratio: 1; background: rgba(169, 185, 224, .13); border-radius: 1px; }
.waffle i.on { background: var(--live); box-shadow: 0 0 10px rgba(25, 163, 255, .5); }
.waffle i.part { background: linear-gradient(90deg, var(--live) calc(var(--f) * 100%), rgba(169, 185, 224, .13) 0); }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; border-top: 1px solid var(--board-line); }
.quotes > div { padding: 12px 12px 2px 0; }
.quotes > div + div { padding-left: 12px; border-left: 1px solid var(--board-line); }
.quotes dt { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-board-2); }
.quotes dd { margin: 4px 0 0; font: 700 1.45rem/1.05 var(--display); color: #fff; letter-spacing: .01em; overflow-wrap: anywhere; }
.quotes dd small { font: 600 .7rem/1 var(--text); color: var(--on-board-2); letter-spacing: .06em; margin-right: 3px; }
@media (max-width: 420px) {
  .quotes { grid-template-columns: 1fr 1fr; }
  .quotes > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--board-line); padding-bottom: 12px; }
  .quotes > div:nth-child(2) { padding-left: 0; border-left: 0; }
}

/* The leading moment - only for the agent who is first this year. */
.year.is-leading { border-color: rgba(25, 163, 255, .7); box-shadow: 0 0 0 1px rgba(25, 163, 255, .35), 0 24px 60px -30px rgba(25, 163, 255, .8); }
.crown {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  margin: -18px -18px 14px;
  padding: 12px 18px;
  background: linear-gradient(90deg, var(--blue), #1b86f0);
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
}
.crown svg { flex: none; width: 34px; height: 34px; }
.crown p { margin: 0; font: 800 1.2rem/1.1 var(--display); letter-spacing: .03em; color: #fff; }
.crown p span { display: block; font: 500 .8rem/1.3 var(--text); letter-spacing: 0; color: #dcebff; }
.crown > * { position: relative; z-index: 1; }
/* a slow band of light across the leading banner, every few seconds */
.crown::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 65%);
  transform: translateX(-100%);
  animation: shimmer 6s var(--ease-in-out) 1.2s infinite;
  pointer-events: none;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 38%, 100% { transform: translateX(100%); } }

/* ---------------------------------------------------------------------- */
/* The ledger                                                              */
/* ---------------------------------------------------------------------- */

.ledger { padding-top: 30px; }
.ledger-grid { display: grid; gap: 30px; }
@media (min-width: 960px) {
  .ledger-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
}
.col-stack { display: grid; gap: 30px; align-content: start; }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.sec-head h2, .ledger h2 {
  margin: 0;
  font: 800 1.7rem/1.05 var(--display);
  letter-spacing: .01em;
  color: var(--navy);
  text-wrap: balance;
}
.sec-head a { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.sec-head .count { font: 700 1rem/1 var(--display); color: var(--ink-2); letter-spacing: .04em; }

.sheet {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--lift);
}
.sheet + .sheet { margin-top: 14px; }

/* Clients by service */
.family-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title total" "kinds total";
  align-items: center;
  gap: 6px 14px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.family-head h3 { grid-area: title; margin: 0; font: 800 1.25rem/1.1 var(--display); letter-spacing: .02em; color: var(--navy); }
.family-head .kinds { grid-area: kinds; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.family-head .total { grid-area: total; margin: 0; text-align: right; font-size: .78rem; color: var(--ink-2); }
.family-head .total b { display: block; font: 700 1.15rem/1.1 var(--display); color: var(--ink); letter-spacing: .02em; }

.client { border-top: 1px solid var(--line); }
.client:first-of-type { border-top: 0; }
.client summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.client summary::-webkit-details-marker { display: none; }
.client summary:hover { background: #f7f9fd; }
.client .nm { font-weight: 600; color: var(--ink); line-height: 1.3; }
.client .meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; font-size: .8rem; color: var(--ink-2); }
.client .amt { text-align: right; font-size: .76rem; color: var(--ink-2); line-height: 1.25; }
.client .amt b { display: block; font: 700 1.35rem/1.05 var(--display); color: var(--ink); letter-spacing: .02em; }
.client .chev { width: 18px; height: 18px; color: var(--ink-2); transition: transform .25s var(--ease-out); }
.client[open] .chev { transform: rotate(180deg); }
.client .lines { padding: 0 16px 14px; }
@media (max-width: 560px) {
  .client summary { grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: "who chev" "amt amt"; row-gap: 8px; }
  .client summary > div:first-child { grid-area: who; }
  .client .amt { grid-area: amt; display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .client .amt b { display: inline; }
  .client .chev { grid-area: chev; }
}
.client .empty { margin: 0; padding: 0 16px 16px; font-size: .86rem; color: var(--ink-2); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  border-radius: 2px;
  font: 600 .72rem/1.35 var(--text);
  letter-spacing: .02em;
  background: #eaf0fb;
  color: var(--navy-2);
  white-space: nowrap;
}
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.once { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-2); }
.chip.once::before { content: ""; width: 6px; height: 6px; background: var(--blue); }

/* Commission lines */
.lineitems { margin: 0; padding: 0; list-style: none; }
.lineitems li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.lineitems li:first-child { border-top: 0; }
.lineitems .when { text-align: center; line-height: 1; color: var(--ink-2); }
.lineitems .when b { display: block; font: 800 1.45rem/1 var(--display); color: var(--navy); }
.lineitems .when span { font: 600 .66rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.lineitems .what { min-width: 0; }
.lineitems .what strong { display: block; font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineitems .what span { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 3px; font-size: .78rem; color: var(--ink-2); }
.lineitems .how { text-align: right; }
.lineitems .how b { display: block; font: 700 1.25rem/1.1 var(--display); letter-spacing: .02em; }
.lineitems .how s { color: var(--ink-2); }
.lineitems .how .chip { margin-top: 4px; }
.sheet-foot { padding: 12px 16px; border-top: 1px solid var(--line); font-size: .88rem; }

/* Targets: a measure made of the mark's cells */
.target { padding: 14px 16px; border-top: 1px solid var(--line); }
.target:first-child { border-top: 0; }
.target .row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.target .row strong { font-weight: 600; }
.target .row b { font: 800 1.3rem/1 var(--display); color: var(--navy); }
.cells { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; margin: 10px 0 8px; }
.cells i { height: 12px; background: #e3e9f5; border-radius: 1px; }
.cells i.on { background: var(--blue); }
.cells i.part { background: linear-gradient(90deg, var(--blue) calc(var(--f) * 100%), #e3e9f5 0); }
.target.met .cells i.on { background: var(--good); }
.target .small { font-size: .8rem; color: var(--ink-2); }

/* Leads */
.leadlist { margin: 0; padding: 0; list-style: none; }
.leadlist li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); }
.leadlist li:first-child { border-top: 0; }
.leadlist strong { font-weight: 600; font-size: .92rem; }
.leadlist .sub { display: block; font-size: .78rem; color: var(--ink-2); }

/* Install card - always offered; hidden once opened as the app */
.install {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border-radius: var(--r);
  color: #fff;
  background:
    linear-gradient(rgba(169, 185, 224, .06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(169, 185, 224, .06) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--board);
  box-shadow: var(--lift);
}
.install[hidden] { display: none; }
.install .tile-icon { width: 56px; height: 56px; border-radius: 12px; }
.install h3 { margin: 0; font: 800 1.3rem/1.1 var(--display); letter-spacing: .02em; }
.install p { margin: 4px 0 0; font-size: .86rem; color: var(--on-board-2); }
.install p strong { color: #fff; }
.install .go { margin-top: 12px; min-height: 46px; font-size: 1.05rem; }

/* Empty states */
.blank { padding: 18px 16px; color: var(--ink-2); font-size: .92rem; }
.blank strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* ---------------------------------------------------------------------- */
/* The shared vocabulary every other page is written in                    */
/* ---------------------------------------------------------------------- */

.ledger > h1, .ledger .box > h1 {
  margin: 0 0 .3rem;
  font: 800 clamp(2rem, 6vw, 2.6rem)/1.02 var(--display);
  letter-spacing: .01em;
  color: var(--navy);
}
.lede { margin: 0 0 1.1rem; color: var(--ink-2); max-width: 68ch; }
.card {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--lift);
  padding: 18px 16px;
  margin-bottom: 16px;
}
.card h2 { font-size: 1.4rem; margin-bottom: .6rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.tile { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--lift); }
.tile .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); font-weight: 600; }
.tile .v { margin-top: 4px; font: 800 1.6rem/1.05 var(--display); color: var(--navy); letter-spacing: .01em; }
.tile .s { font-size: .8rem; color: var(--ink-2); }
.tile.lead { background: var(--board); border-color: var(--board); }
.tile.lead .k, .tile.lead .s { color: var(--on-board-2); }
.tile.lead .v { color: #fff; }
.tile.lead a { color: var(--live) !important; font-weight: 600; }

.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); font-weight: 600; }
.table td.n, .table th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.scroll { overflow-x: auto; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: .72rem; font-weight: 600; background: #eaf0fb; color: var(--navy-2); }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }

.msg { padding: 11px 14px; border-radius: var(--r); margin-bottom: 14px; background: #e6eefc; color: var(--navy); border: 1px solid #c9d8f4; font-size: .92rem; }
.msg.error { background: var(--bad-bg); color: var(--bad); border-color: #f4c7c1; }
.msg.success { background: var(--good-bg); color: var(--good); border-color: #bfe3cf; }
.msg.warning { background: var(--warn-bg); color: var(--warn); border-color: #f0dcaa; }
.messages { padding-top: 16px; }

label { display: block; font-weight: 600; font-size: .86rem; margin: 0 0 6px; color: var(--ink); }
.field { margin-bottom: 14px; }
.field small { color: var(--ink-2); display: block; margin-top: 4px; font-size: .8rem; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: #fff;
  color: var(--ink);
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 0; }
input::placeholder, textarea::placeholder { color: #6b7895; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21, 87, 214, .18); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blue); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 0; border-radius: var(--r);
  background: var(--blue);
  color: #fff;
  font: 700 .95rem/1 var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, transform .15s var(--ease-out);
}
.btn:hover { background: #0f49bd; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: #9db2d9; cursor: not-allowed; }
.btn.alt { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.alt:hover { background: #f4f7fd; }
.btn.sm { min-height: 38px; padding: 0 12px; font-size: .84rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.bar-track { height: 10px; background: #e3e9f5; border-radius: 1px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--blue); }
.muted { color: var(--ink-2); }
.small { font-size: .84rem; }

@media (max-width: 600px) {
  .grid2 { grid-template-columns: 1fr; }
  .table.stack thead { display: none; }
  .table.stack tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .table.stack td { position: relative; display: block; border: 0; padding: 3px 0 3px 104px; text-align: left; white-space: normal; }
  .table.stack td::before { content: attr(data-l); position: absolute; left: 0; top: 5px; width: 96px; color: var(--ink-2); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
  .table.stack td.n { text-align: left; }
}

.foot { padding: 34px 0 10px; color: var(--ink-2); font-size: .78rem; }
.foot a { color: var(--ink-2); }

/* ---------------------------------------------------------------------- */
/* The dock: the same on a phone and on a desktop                          */
/* ---------------------------------------------------------------------- */

.dock {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(calc(100% - 24px), 460px);
  height: var(--dock-h);
  padding: 6px;
  border-radius: 10px;
  background: rgba(6, 16, 46, .96);
  border: 1px solid rgba(169, 185, 224, .16);
  box-shadow: 0 18px 40px -16px rgba(4, 11, 34, .7);
}
@supports (backdrop-filter: blur(8px)) {
  .dock { background: rgba(6, 16, 46, .88); backdrop-filter: blur(14px) saturate(1.4); }
}
.dock.five { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(calc(100% - 24px), 520px); }
.dock.six { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(calc(100% - 16px), 600px); }
.dock.six a { font-size: .66rem; }
.dock a {
  position: relative;
  display: grid; justify-items: center; align-content: center; gap: 4px;
  border-radius: 6px;
  color: var(--on-board-2);
  text-decoration: none;
  font: 600 .72rem/1 var(--text);
  letter-spacing: .02em;
  transition: color .15s, background-color .15s;
}
.dock a svg { width: 22px; height: 22px; }
.dock a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.dock a[aria-current="page"] { color: #fff; background: rgba(25, 163, 255, .14); }
.dock a[aria-current="page"]::before {
  content: ""; position: absolute; top: 5px; right: calc(50% - 19px);
  width: 6px; height: 6px; background: var(--live);
}
.dock a.dock-go { color: var(--live); }

/* ---------------------------------------------------------------------- */
/* Signing in                                                              */
/* ---------------------------------------------------------------------- */

body.auth { background: var(--board); color: #fff; padding-bottom: 0; }
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 32px 16px 40px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(25, 163, 255, .18), rgba(25, 163, 255, 0) 70%),
    radial-gradient(70% 50% at 50% 110%, rgba(21, 87, 214, .32), rgba(21, 87, 214, 0) 70%),
    linear-gradient(rgba(169, 185, 224, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(169, 185, 224, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--board);
}
.auth-col { width: min(100%, 420px); }
.auth-brand { display: grid; justify-items: center; text-align: center; margin-bottom: 22px; }
.auth-brand img { width: 84px; height: auto; display: block; }
.auth-brand h1 {
  margin: 14px 0 0;
  font: 800 clamp(2.8rem, 13vw, 3.6rem)/.9 var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.auth-brand p { margin: 10px 0 0; font-size: .9rem; color: var(--on-board-2); }
.auth-brand p b { color: #fff; font-weight: 600; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.steps li { font: 600 .74rem/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--on-board-2); padding-top: 11px; box-shadow: inset 0 3px 0 rgba(169, 185, 224, .2); }
.steps li.on { color: #fff; box-shadow: inset 0 3px 0 var(--live); }
.steps li.done { box-shadow: inset 0 3px 0 rgba(25, 163, 255, .55); }
.auth-card { background: var(--sheet); color: var(--ink); border-radius: var(--r); padding: 22px 18px 18px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); }
.auth-card .btn { width: 100%; min-height: 54px; font-size: 1rem; }
.auth-card .msg { font-size: .88rem; }
.auth-note { margin: 16px 4px 0; font-size: .82rem; color: var(--on-board-2); text-align: center; }
.auth-note a { color: #cfe3ff; }
.code-input {
  text-align: center;
  font: 800 2.6rem/1 var(--display) !important;
  letter-spacing: .42em;
  padding-left: .42em !important;
  min-height: 70px !important;
}
.code-input::placeholder { color: #c5d0e6; letter-spacing: .42em; }
.sent-to { margin: 0 0 16px; font-size: .92rem; color: var(--ink-2); }
.sent-to b { color: var(--ink); }
.resend { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--ink-2); }
.linkish { background: none; border: 0; padding: 6px 0; font: 600 .9rem var(--text); color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.linkish:disabled { color: #8b97b3; cursor: default; text-decoration: none; }

/* The answer to a press, before the next page arrives (js/press.js). */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary { touch-action: manipulation; }
html.is-going::before {
  content: "";
  position: fixed; top: 0; left: 0; z-index: 4000;
  width: 100%; height: 3px;
  background: var(--live);
  box-shadow: 0 0 10px rgba(25, 163, 255, .8);
  transform-origin: 0 50%;
  animation: going 2.4s var(--ease-out) both;
}
html.is-going body { cursor: progress; }
html.is-going .ledger, html.is-going .auth-card { opacity: .82; transition: opacity .25s ease .15s; }
@keyframes going { from { transform: scaleX(0); } to { transform: scaleX(.86); } }

@media (prefers-reduced-motion: reduce) {
  html.is-going::before { animation: none; transform: scaleX(.6); }
  .client .chev, .go { transition: none; }
}

/* Inner pages: the board strip carries the figures, the ledger the detail. */
.board-strip { padding-top: 6px; }
.board-strip > p { margin-top: .4rem; }
.strip { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 32px; margin-top: 18px; }
.strip .purse-sub { margin: 0; }
.figure-md { margin: 0; font-size: clamp(2.8rem, 12vw, 4.2rem); }
.strip .go { margin-left: auto; }
@media (max-width: 640px) { .strip .go { margin-left: 0; width: 100%; } }
.block + .card, .block { margin-bottom: 22px; }
.lineitems .why { display: block; margin-top: 3px; font-size: .78rem; color: var(--ink-2); }
.lineitems .why.bad { color: var(--bad); }
.go.on-paper { background: var(--blue); color: #fff !important; box-shadow: 0 10px 22px -12px rgba(21, 87, 214, .8); }
.go.on-paper:hover { background: #0f49bd; }
.go:disabled { opacity: .7; cursor: progress; }
.amount-input { font: 800 2rem/1 var(--display) !important; letter-spacing: .02em; }
.board-head .figure { color: #fff; }
.board-head .cap { color: var(--on-board-2); }

/* ====================================================================== */
/* Motion: one system.                                                     */
/*                                                                         */
/* Three speeds, one curve family:                                         */
/*   press  120ms  what a finger gets back (scale .97, a lift)             */
/*   state  220ms  hovers, the dock's light sliding between tabs           */
/*   enter  640ms  home's once-a-session entrance, exponential ease-out    */
/* Two things live on their own, slowly, and both stop when unseen: the    */
/* board's aurora and its drifting pixels (js/app.js). Everything else     */
/* moves because the agent did something or because a figure arrived.     */
/* Motion reduced: none of it plays; every figure is simply there.         */
/* ====================================================================== */

/* -- the living board --------------------------------------------------- */
.board-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.board > :not(.board-fx) { position: relative; z-index: 1; }
.board-fx .aurora {
  position: absolute; inset: -30% -15%;
  background:
    radial-gradient(38% 34% at 28% 42%, rgba(25, 163, 255, .15), rgba(25, 163, 255, 0) 70%),
    radial-gradient(34% 30% at 74% 26%, rgba(21, 87, 214, .24), rgba(21, 87, 214, 0) 70%),
    radial-gradient(30% 36% at 62% 82%, rgba(92, 184, 255, .09), rgba(92, 184, 255, 0) 70%);
  animation: aurora 30s var(--ease-in-out) infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(-5%, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, -4%, 0) rotate(5deg) scale(1.08); }
  100% { transform: translate3d(6%, 3%, 0) rotate(-3deg) scale(1.02); }
}
.board-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth-page { position: relative; isolation: isolate; }
.auth-page > .board-fx { z-index: -1; }

/* -- home: the agent, their money, their year --------------------------- */
.home-top { display: grid; gap: 24px; padding-top: 8px; }
.home-left { display: grid; gap: 22px; align-content: start; }
@media (min-width: 960px) {
  .home-top { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; align-items: start; padding-top: 20px; }
  .home-left { align-self: center; gap: 30px; }
}

.hello { display: flex; align-items: center; gap: 22px; }
.portrait {
  position: relative;
  flex: none;
  display: grid; place-items: center;
  width: 76px; height: 76px;
  border-radius: var(--r);
  background: linear-gradient(160deg, var(--navy-2), var(--navy));
  box-shadow: 0 0 0 1px rgba(169, 185, 224, .32), 0 16px 30px -16px rgba(0, 0, 0, .8);
  color: #fff !important;
  text-decoration: none;
  transition: transform var(--t-state) var(--ease-out), box-shadow var(--t-state) var(--ease-out);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.portrait-initials { font: 800 1.9rem/1 var(--display); letter-spacing: .05em; }
.portrait-add {
  position: absolute; right: -7px; bottom: -7px;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 3px;
  background: var(--live); color: var(--ink-0);
  box-shadow: 0 0 0 3px var(--board);
}
.portrait-add svg { width: 11px; height: 11px; }
/* the mark's pixels, stepping off the photo's corner */
.portrait .px {
  position: absolute; top: -6px; right: -6px;
  width: 11px; height: 11px;
  background: var(--live);
  box-shadow: 10px -10px 0 -2px #5cb8ff, -1px -15px 0 -3px #fff, 15px 2px 0 -3px var(--blue);
}
.portrait:hover { box-shadow: 0 0 0 1px rgba(25, 163, 255, .7), 0 18px 34px -16px rgba(25, 163, 255, .5); }
.portrait:active { transform: scale(.97); transition-duration: var(--t-press); }
.hello-time { margin: 0; font: 500 .92rem/1.2 var(--text); color: var(--on-board-2); }
.hello-name {
  margin: 3px 0 0;
  font: 800 clamp(1.75rem, 7vw, 2.4rem)/.98 var(--display);
  letter-spacing: .02em;
  color: #fff;
  text-wrap: balance;
}
.hello-meta { margin: 6px 0 0; font-size: .8rem; color: var(--on-board-2); }
.hello-meta a { color: var(--live) !important; font-weight: 600; }
.home-top .purse { padding: 0; }
.home-top .figure { margin-top: 0; }

/* the year, its months */
.journey { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--board-line); }
.journey-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.journey h3 { margin: 0; font: 600 .74rem/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--on-board-2); }
.journey-head p { margin: 0; font-size: .8rem; color: var(--on-board-2); }
.journey-head b { color: #fff; font-weight: 600; }
.skyline {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
  margin: 12px 0 0; padding: 0;
  list-style: none;
}
.skyline li { display: grid; gap: 7px; text-align: center; }
.skyline .stack { display: flex; flex-direction: column-reverse; gap: 3px; }
.skyline .stack i { height: 9px; border-radius: 1px; background: rgba(169, 185, 224, .1); }
.skyline .stack i.on { background: rgba(25, 163, 255, .72); }
.skyline .best .stack i.on { background: var(--live); box-shadow: 0 0 9px rgba(25, 163, 255, .55); }
.skyline .ahead .stack i { background: transparent; box-shadow: inset 0 0 0 1px rgba(169, 185, 224, .12); }
.skyline .mo { font: 700 .72rem/1 var(--text); color: var(--on-board-2); padding-bottom: 4px; }
.skyline .now .mo { color: #fff; box-shadow: inset 0 -2px 0 var(--live); }
.skyline .ahead .mo { opacity: .55; }

/* -- the constellation of clients --------------------------------------- */
.orbit {
  margin: 0 0 14px;
  padding: 10px 8px 6px;
  border-radius: var(--r);
  color: #fff;
  background:
    radial-gradient(50% 60% at 50% 50%, rgba(25, 163, 255, .14), rgba(25, 163, 255, 0) 70%),
    linear-gradient(rgba(169, 185, 224, .05) 1px, transparent 1px) 50% 50% / 20px 20px,
    linear-gradient(90deg, rgba(169, 185, 224, .05) 1px, transparent 1px) 50% 50% / 20px 20px,
    var(--board);
  box-shadow: var(--lift);
}
.orbit svg { display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto; overflow: visible; }
.o-rings ellipse { fill: none; stroke: rgba(169, 185, 224, .13); stroke-dasharray: 2 5; }
.o-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 4px 0 6px; font: 600 .72rem/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--on-board-2); }
.o-legend span { display: inline-flex; align-items: center; gap: 7px; }
.o-legend i { width: 10px; height: 10px; background: #fff; }
.o-legend .f-systems { background: var(--live); }
.o-legend .f-websites { background: #e3ecff; }
.o-legend .f-apps { background: #7cc6ff; }
.o-legend .unpaid { background: transparent; box-shadow: inset 0 0 0 1.2px rgba(169, 185, 224, .7); }
.o-link { stroke: rgba(169, 185, 224, .24); stroke-width: 1; }
.o-link.unpaid { stroke-dasharray: 2 4; stroke: rgba(169, 185, 224, .2); }
.o-flow {
  stroke: var(--live); stroke-width: 2.2; stroke-linecap: square;
  stroke-dasharray: 5 100; stroke-dashoffset: 105;
  animation: flow 3.6s cubic-bezier(.4, 0, .6, 1) var(--d) infinite;
}
@keyframes flow { to { stroke-dashoffset: 0; } }
.o-node { cursor: pointer; }
.o-node rect {
  fill: #fff;
  transform-box: fill-box; transform-origin: 50% 50%;
  transition: transform var(--t-state) var(--ease-out);
}
.o-node.f-systems rect { fill: var(--live); }
.o-node.f-websites rect { fill: #e3ecff; }
.o-node.f-apps rect { fill: #7cc6ff; }
.o-node.unpaid rect { fill: var(--board); stroke: rgba(169, 185, 224, .7); stroke-width: 1.2; }
.o-node text {
  font: 600 12px var(--text); fill: #dbe6ff;
  opacity: 0; transition: opacity var(--t-state);
  paint-order: stroke; stroke: var(--board); stroke-width: 3px; stroke-linejoin: round;
}
.o-node.named text { opacity: .92; }
.o-node:hover text, .o-node:focus-visible text { opacity: 1; }
.o-node:hover rect, .o-node:focus-visible rect { transform: scale(1.3); }
.o-node:focus { outline: none; }
.o-node:focus-visible rect { stroke: #fff; stroke-width: 2; }
.o-me-frame { fill: none; stroke: var(--live); stroke-width: 1.5; }
.o-me-initials { font: 800 20px var(--display); letter-spacing: .05em; fill: #fff; }
.o-empty { font: 500 12px var(--text); fill: var(--on-board-2); }
.client.flash summary { animation: flash-row 1.4s var(--ease-out); }
@keyframes flash-row { 0% { background: rgba(25, 163, 255, .22); } 100% { background: transparent; } }

/* -- the latest line, live ---------------------------------------------- */
.ticker .newest .when { position: relative; }
.ticker .newest .when::after {
  content: ""; position: absolute; top: -3px; right: 0;
  width: 6px; height: 6px; background: var(--live);
  animation: beacon 2.2s var(--ease-in-out) infinite;
}
@keyframes beacon { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(25, 163, 255, .5); } 50% { opacity: .55; box-shadow: 0 0 0 5px rgba(25, 163, 255, 0); } }

/* the part-built square is the one being built: it breathes */
.waffle i.part, .cells i.part { animation: building 2.6s var(--ease-in-out) infinite; }
@keyframes building { 50% { opacity: .55; } }
.target.full .cells i.on { box-shadow: 0 0 8px rgba(13, 122, 78, .35); }
.target.full:not(.met) .cells i.on { background: var(--good); }

/* -- press and lift -------------------------------------------------------- */
.sheet.family, .orbit, .install { transition: transform var(--t-state) var(--ease-out), box-shadow var(--t-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sheet.family:hover, .install:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(6, 16, 46, .05), 0 18px 36px -16px rgba(6, 16, 46, .3);
  }
}
.client summary { transition: background-color var(--t-state), transform var(--t-press) var(--ease-out); }
.client summary:active { transform: scale(.992); }
.ghost { transition: background-color var(--t-state), border-color var(--t-state), transform var(--t-press) var(--ease-out); }
.ghost:active, .btn:active { transform: scale(.97); }

/* -- the dock: one light, sliding to where you are going ------------------- */
.dock-ind {
  position: absolute; top: 6px; bottom: 6px; left: 6px;
  width: calc((100% - 12px) / 4);
  border-radius: 6px;
  background: rgba(25, 163, 255, .15);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .42s var(--ease-out), opacity var(--t-state);
  pointer-events: none;
}
.dock-ind::before { content: ""; position: absolute; top: 5px; left: calc(50% + 13px); width: 6px; height: 6px; background: var(--live); }
.dock-ind.off { opacity: 0; }
.dock-ind.still { transition: none; }
.dock.has-ind a[aria-current="page"] { background: transparent; }
.dock.has-ind a[aria-current="page"]::before { display: none; }
.dock a { z-index: 1; }
.dock a svg { transition: transform var(--t-state) var(--ease-out); }
.dock a[aria-current="page"] svg { transform: translateY(-1px); }
.dock a:active svg { transform: scale(.86); transition-duration: var(--t-press); }

/* -- home's entrance, once a session --------------------------------------- */
/* Before it starts (.ab-enter without .ab-go) the moving parts wait in their
   first frame; js/home.js adds .ab-go, a timer in the page's head is the
   backstop. Below the fold, [data-enter] blocks wait for .in (on view).    */
.ab-enter:not(.ab-go) .hello,
.ab-enter:not(.ab-go) .figure .num,
.ab-enter:not(.ab-go) .purse-sub,
.ab-enter:not(.ab-go) .purse-actions,
.ab-enter:not(.ab-go) .year { opacity: 0; }
.ab-enter:not(.ab-go) .waffle i.on,
.ab-enter:not(.ab-go) .skyline i.on { background: rgba(169, 185, 224, .13); box-shadow: none; }

.ab-go .hello { animation: rise-in var(--t-enter) var(--ease-out) backwards; }
.ab-go .portrait .px { animation: px-in .8s var(--ease-out) .25s backwards; }
.ab-go .purse-sub { animation: rise-in var(--t-enter) var(--ease-out) .35s backwards; }
.ab-go .purse-actions { animation: rise-in var(--t-enter) var(--ease-out) .45s backwards; }
.ab-go .year { animation: rise-in .8s var(--ease-out) .2s backwards; }
.ab-go .crown { animation: crown-in .7s var(--ease-out) 1.6s backwards; }
.ab-go .waffle i.on, .ab-go .waffle i.part {
  animation: cell-in .55s var(--ease-out) backwards;
  animation-delay: calc(.55s + var(--k, 0) * 11ms);
}
.ab-go .waffle i.part { animation: cell-in .55s var(--ease-out) calc(.55s + var(--k, 0) * 11ms) backwards, building 2.6s var(--ease-in-out) 2.4s infinite; }
.ab-go .skyline i.on {
  animation: cell-in .45s var(--ease-out) backwards;
  animation-delay: calc(1.3s + var(--m, 0) * 50ms + var(--j, 0) * 45ms);
}
.skyline .stack i:nth-child(2) { --j: 1; }
.skyline .stack i:nth-child(3) { --j: 2; }
.skyline .stack i:nth-child(4) { --j: 3; }
.skyline .stack i:nth-child(5) { --j: 4; }
.skyline .stack i:nth-child(6) { --j: 5; }

.ab-enter [data-enter]:not(.in) .o-node rect,
.ab-enter [data-enter]:not(.in) .o-link,
.ab-enter [data-enter]:not(.in) .lineitems li,
.ab-enter [data-enter]:not(.in) .cells i.on { opacity: 0; }
.ab-enter .in .o-link { animation: fade-in .6s var(--ease-out) calc(var(--o, 0) * 35ms) backwards; }
.ab-enter .in .o-node rect { animation: pop-in .6s var(--ease-out) calc(.15s + var(--o, 0) * 45ms) backwards; }
.ab-enter .in .o-me { animation: pop-in .6s var(--ease-out) backwards; transform-box: fill-box; transform-origin: 50% 50%; }
.ab-enter .in .lineitems li { animation: tick-in .5s var(--ease-out) calc(var(--n, 0) * 70ms) backwards; }
.ab-enter .in .cells i.on { animation: cell-in .45s var(--ease-out) calc(.1s + var(--k, 0) * 28ms) backwards; }

@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0); } }
@keyframes tick-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes crown-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes px-in { from { opacity: 0; transform: translate(-14px, 14px) scale(.3) rotate(-90deg); } }
@keyframes cell-in {
  0%   { background: rgba(169, 185, 224, .13); box-shadow: none; transform: scale(.35); }
  55%  { background: #bfe6ff; box-shadow: 0 0 16px rgba(25, 163, 255, .9); transform: scale(1.12); }
}

/* the pixel burst for a moment worth it (js/home.js) */
.burst { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: 0; top: 0; background: var(--live); box-shadow: 0 0 8px rgba(25, 163, 255, .8); }
.burst i:nth-child(3n) { background: #fff; }
.burst i:nth-child(4n) { background: #5cb8ff; }

/* -- profile ------------------------------------------------------------- */
.profile-head { display: flex; align-items: center; gap: 22px; padding-top: 14px; }
.portrait-lg { width: 132px; height: 132px; }
.portrait-lg .portrait-initials { font-size: 3.2rem; }
.portrait-lg .px { top: -8px; right: -8px; width: 15px; height: 15px; box-shadow: 14px -14px 0 -3px #5cb8ff, -1px -21px 0 -4px #fff, 21px 3px 0 -4px var(--blue); }
@media (max-width: 520px) { .profile-head { flex-direction: column; align-items: flex-start; gap: 16px; } .portrait-lg { width: 112px; height: 112px; } }
.profile-grid { display: grid; gap: 30px; }
@media (min-width: 960px) { .profile-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.photo-form p { margin: 0 0 14px; }
.pick {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 14px;
  padding: 16px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r);
  background: #f7f9fd;
  cursor: pointer;
  transition: border-color var(--t-state), background-color var(--t-state);
}
.pick:hover { border-color: var(--blue); background: #eef4ff; }
#photo:focus-visible + .pick { outline: 2px solid var(--live); outline-offset: 2px; }
.pick svg { flex: none; width: 30px; height: 30px; color: var(--blue); }
.pick b { display: block; color: var(--ink); }
.pick small { display: block; margin-top: 2px; font-weight: 400; color: var(--ink-2); overflow-wrap: anywhere; }
.pick.chosen { border-style: solid; border-color: var(--blue); background: #eef4ff; }
.remove-photo { margin-top: 6px; }
input[type=file].sr { width: 1px; min-height: 0; padding: 0; border: 0; }   /* beats the form-field rule */
.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; }
.facts dt { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.initials.has-photo { padding: 0; overflow: hidden; }
.initials.has-photo img { width: 100%; height: 100%; object-fit: cover; }
a.initials { text-decoration: none; transition: border-color var(--t-state); }
a.initials:hover { border-color: var(--live); }

@media (prefers-reduced-motion: reduce) {
  .board-fx .aurora, .crown::after, .o-flow, .ticker .newest .when::after,
  .waffle i.part, .cells i.part { animation: none; }
  .o-flow { display: none; }
  .dock-ind, .sheet.family, .install, .portrait, .o-node rect { transition: none; }
}

/* ---------------------------------------------------------------------------
   The Office - an agent who is also on the platform team (agents/staff.py)
   ------------------------------------------------------------------------- */
.duties { display: grid; gap: 14px; }
.duties .titles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.duties .titles li { padding: 6px 10px; border-radius: 2px; background: var(--navy); color: #fff; font-weight: 600; font-size: .86rem; }
.duties .roles { margin: 0; padding-left: 18px; font-size: .9rem; }
.duties .roles li + li { margin-top: 4px; }
.office-links { display: flex; flex-wrap: wrap; gap: 8px; }
.office-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.office-tabs a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 2px; font-size: .84rem; text-decoration: none; color: inherit; }
.office-tabs a[aria-current="page"] { background: var(--navy); border-color: transparent; color: #fff; }
.office-tabs a b { font-weight: 700; margin-left: 4px; }
tr.me td { background: rgba(25, 163, 255, .08); }
.stats4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 16px; }
.stats4 div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 2px; background: var(--sheet); }
.stats4 b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.stats4 span { font-size: .78rem; color: var(--ink-2); }

/* ---------------------------------------------------------------------------
   The National ID check before the first withdrawal (agents/nin.py)
   ------------------------------------------------------------------------- */
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; letter-spacing: .06em; }
.idbox { max-width: 560px; }
.idask .kicker { margin: 0; font: 600 .74rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.idask h2 { margin: 4px 0 6px; font: 800 1.9rem/1.02 var(--display); letter-spacing: .01em; color: var(--ink); text-transform: none; }
.idask p { margin: 0 0 16px; color: var(--ink-2); }
.idform { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--lift); padding: 16px 16px 14px; }
.idform-lede { margin: 14px 0 16px; font-size: .9rem; color: var(--ink-2); }
.idform-lede strong { color: var(--ink); }
.idform-names { display: grid; gap: 0 12px; }
@media (min-width: 520px) { .idform-names { grid-template-columns: 1fr 1fr; } }
.idform label .tag-a, .idform label .tag-b { margin-left: 6px; padding: 1px 6px; border-radius: 2px; font: 600 .66rem/1.4 var(--text); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.tag-a { background: #e3ecff; color: var(--navy-2); }
.tag-b { background: var(--blue); color: #fff; }
.nin-input { font: 700 1.4rem/1 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace !important; letter-spacing: .12em; text-transform: uppercase; }
.nin-input::placeholder { color: #c5d0e6; letter-spacing: .12em; }
.idform .go { width: 100%; margin-top: 4px; }
.idpick { margin-bottom: 16px; }
.idpick-thumb { flex: none; display: grid; place-items: center; width: 64px; height: 42px; border-radius: 3px; background: #e3ecff; color: var(--blue); overflow: hidden; }
.idpick-thumb svg { width: 24px; height: 24px; }
.idpick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.idform-privacy { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-2); }
.idform-privacy svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--good); }

/* The card, drawn: where to find the three things to copy. */
.idcard { position: relative; aspect-ratio: 85.6 / 54; max-width: 320px; margin: 0 auto; border-radius: 9px; overflow: hidden;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 9px, rgba(255, 255, 255, .2) 9px 10px),
    linear-gradient(135deg, #fbe9a8 0%, #f6f2e4 38%, #e7f0e3 70%, #dfe8f6 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 34px -20px rgba(6, 16, 46, .55), 0 0 0 1px rgba(13, 26, 63, .12); }
.idcard-top { display: flex; align-items: center; height: 18%; padding: 0 7%; background: linear-gradient(180deg, #111 0 33.3%, #fcdc04 33.3% 66.6%, #d90000 66.6%); }
.idcard-top i { display: none; }
.idcard-top span { padding: 2px 6px; border-radius: 2px; background: rgba(255, 255, 255, .9); font: 700 .5rem/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: #222; }
.idcard-body { display: grid; grid-template-columns: 27% 1fr; gap: 6%; height: 82%; padding: 6% 7% 7%; }
.idcard-face { position: relative; border-radius: 3px; background: linear-gradient(#cfd6e2, #b8c2d4); overflow: hidden; }
.idcard-face::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: -18%; height: 46%; border-radius: 50% 50% 0 0; background: #9aa6bd; }
.idcard-face::after { content: ""; position: absolute; left: 31%; top: 20%; width: 38%; height: 34%; border-radius: 50%; background: #a9b4c8; }
.idcard dl { margin: 0; display: grid; align-content: space-between; }
.idcard dl div { position: relative; display: grid; gap: 3px; padding: 3px 6px; border-radius: 2px; }
.idcard dt { font: 700 .48rem/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: #6b6450; }
.idcard dd { margin: 0; height: 6px; width: 72%; border-radius: 1px; background: rgba(60, 54, 40, .28); }
.idcard dl div.hl-a { background: rgba(21, 87, 214, .13); box-shadow: inset 0 0 0 1.5px rgba(21, 87, 214, .7); }
.idcard dl div.hl-a dt { color: var(--navy-2); }
.idcard dl div.hl-b { background: var(--blue); box-shadow: 0 6px 16px -6px rgba(21, 87, 214, .8); }
.idcard dl div.hl-b dt { color: #fff; }
.idcard dd.nin-dots { width: 94%; height: 7px; background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 7px); opacity: .9; }

/* Waiting for the office. */
.idwait { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--lift); padding: 18px 16px 14px; }
.idwait h2 { margin: 16px 0 6px; font: 800 1.75rem/1.04 var(--display); letter-spacing: .01em; color: var(--ink); text-transform: none; }
.idwait > p { margin: 0 0 12px; color: var(--ink-2); font-size: .94rem; }
.idsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.idsteps li { padding-top: 11px; box-shadow: inset 0 3px 0 var(--line); font-size: .74rem; color: var(--ink-2); }
.idsteps li b { display: block; font: 700 .76rem/1.2 var(--text); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.idsteps li.done { box-shadow: inset 0 3px 0 var(--good); }
.idsteps li.done b { color: var(--good); }
.idsteps li.on { box-shadow: inset 0 3px 0 var(--blue); }
.idsteps li.on b { color: var(--blue); }
.idsteps li.on b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; background: var(--blue); vertical-align: 2px; animation: idpulse 1.6s var(--ease-in-out) infinite; }
@keyframes idpulse { 50% { opacity: .2; } }
.idfacts { margin: 0 -16px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.idrefused strong { display: block; margin-bottom: 2px; }
.idrefused span { display: block; margin-top: 4px; color: var(--ink); }
.idok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--good); font-weight: 600; }
.idok svg { width: 18px; height: 18px; }
.idok .mono { color: var(--ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .idsteps li.on b::after { animation: none; } }

/* ---------------------------------------------------------------------------
   The owner view (agents/owner_views.py)
   ------------------------------------------------------------------------- */
.board-owner { padding-bottom: 0; }
.owner-head { padding-top: 6px; }
.owner-head h1 { margin-top: 2px; }
.owner-seal { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 8px !important; font: 600 .72rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: #fff !important; }
.owner-seal i { width: 12px; height: 12px; margin-right: 10px; background: var(--live); box-shadow: 9px -9px 0 -3px #fff, 15px 0 0 -4px #5cb8ff; }
.owner-seal span { color: var(--on-board-2); letter-spacing: .04em; text-transform: none; font-weight: 500; font-size: .8rem; }
.owner-tabs { display: flex; gap: 2px; margin: 18px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--board-line); }
.owner-tabs::-webkit-scrollbar { display: none; }
.owner-tabs a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 14px 11px 13px; font: 600 .86rem/1 var(--text); color: var(--on-board-2) !important; text-decoration: none; box-shadow: inset 0 -3px 0 transparent; }
.owner-tabs a:hover { color: #fff !important; }
.owner-tabs a[aria-current="page"] { color: #fff !important; box-shadow: inset 0 -3px 0 var(--live); }
.owner-tabs b { min-width: 20px; padding: 3px 5px; border-radius: 2px; background: var(--live); color: var(--board); font: 800 .72rem/1 var(--text); text-align: center; }
@media (min-width: 900px) { .owner-tabs { margin-inline: 0; padding-inline: 0; } }

.desk-now, .desk-sec { margin-bottom: 26px; }
.todo { display: grid; grid-template-columns: 54px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.todo:first-child { border-top: 0; }
a.todo:hover { background: #f7f9fd; }
.todo-n { display: grid; place-items: center; height: 46px; border-radius: 2px; background: #eef2fa; font: 800 1.6rem/1 var(--display); color: var(--ink-2); }
.todo.hot .todo-n { background: var(--board); color: #fff; box-shadow: inset 0 -3px 0 var(--live); }
.todo strong { display: block; font-weight: 600; }
.todo small { display: block; margin-top: 2px; font-size: .8rem; color: var(--ink-2); }
.todo svg { width: 18px; height: 18px; color: var(--ink-2); }
.todo.warnrow .todo-n { background: var(--warn-bg); color: var(--warn); }
.desk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 14px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 720px) { .desk-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.desk-tiles > div { padding: 12px 14px; background: var(--sheet); }
.desk-tiles span { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.desk-tiles b { display: block; margin-top: 4px; font: 800 1.55rem/1.05 var(--display); color: var(--navy); letter-spacing: .01em; overflow-wrap: anywhere; }
.desk-tiles b i, .money-total i, .slip-amt i { font-style: normal; font-size: .5em; margin-right: 3px; letter-spacing: .08em; color: var(--ink-2); vertical-align: .55em; }
.desk-tiles small { display: block; font-size: .76rem; color: var(--ink-2); }
.nin-meter { padding: 14px 16px; }
.nin-meter p { margin: 0 0 10px; }
.nin-bar { display: flex; gap: 3px; height: 14px; }
.nin-bar i { min-width: 6px; border-radius: 1px; }
.nin-bar .v, .nin-key .v { background: var(--good); }
.nin-bar .p, .nin-key .p { background: var(--blue); }
.nin-bar .r, .nin-key .r { background: var(--bad); }
.nin-bar .n, .nin-key .n { background: #d5ddec; }
.nin-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .78rem; color: var(--ink-2); }
.nin-key li { display: inline-flex; align-items: center; gap: 6px; }
.nin-key i { width: 9px; height: 9px; }
.money-top { display: grid; gap: 12px; padding: 16px; background: var(--board); color: #fff; }
@media (min-width: 640px) { .money-top { grid-template-columns: 1fr 1fr; align-items: end; } }
.money-total { margin: 0; font: 800 2.6rem/.95 var(--display); letter-spacing: .01em; }
.money-total i { color: var(--on-board-2); }
.money-total small { display: block; margin-top: 6px; font: 500 .8rem/1.3 var(--text); color: var(--on-board-2); }
.money-top dl { margin: 0; display: grid; gap: 6px; }
.money-top dl div { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid var(--board-line); font-size: .84rem; }
.money-top dt { color: var(--on-board-2); }
.money-top dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.money-bars { margin: 0; padding: 8px 16px 14px; list-style: none; }
.money-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0 0; font-size: .86rem; }
.money-bars b { font-variant-numeric: tabular-nums; font-weight: 600; }
.money-bars i { grid-column: 1 / -1; height: 6px; background: linear-gradient(90deg, var(--blue) var(--w), #e3e9f5 0); border-radius: 1px; }
.owner-note { margin: 4px 0 0; font-size: .8rem; color: var(--ink-2); max-width: 70ch; }

.roster { margin: 0; padding: 0; list-style: none; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--lift); }
.roster li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-top: 1px solid var(--line); }
.roster li:first-child { border-top: 0; }
.roster li.me { background: rgba(25, 163, 255, .07); }
.roster li.closed { opacity: .72; }
.roster-i { color: #fff; background: var(--navy); }
.roster-who { min-width: 0; }
.roster-who strong { display: block; font-weight: 600; line-height: 1.3; }
.roster-who > span { display: block; margin-top: 2px; font-size: .78rem; color: var(--ink-2); }
.roster-chips { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 6px !important; }
.roster-amt { text-align: right; line-height: 1.2; }
.roster-amt b { display: block; font: 700 1.3rem/1.05 var(--display); letter-spacing: .02em; color: var(--ink); }
.roster-amt b.neg { color: var(--bad); }
.roster-amt span { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.roster-amt small { display: block; margin-top: 3px; font-size: .7rem; color: var(--ink-2); max-width: 130px; }
@media (max-width: 420px) { .roster-amt small { display: none; } }

.seg { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.seg a { padding: 10px; text-align: center; font-weight: 600; font-size: .88rem; color: var(--ink); text-decoration: none; background: var(--sheet); }
.seg a + a { border-left: 1px solid var(--line-2); }
.seg a[aria-current="page"] { background: var(--navy); color: #fff; }
.seg b { margin-left: 4px; font-weight: 700; opacity: .7; }
.amt-s { text-align: right; font-size: .72rem; color: var(--ink-2); white-space: nowrap; }
.amt-s b { display: block; font: 700 1.1rem/1.1 var(--display); color: var(--ink); letter-spacing: .02em; }

.slip, .idcheck { margin: 0 0 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--lift); overflow: hidden; }
.slip header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px 10px; }
.slip header strong { display: block; font-weight: 600; }
.slip header span { display: block; margin-top: 2px; font-size: .76rem; color: var(--ink-2); }
.slip-amt { margin: 0; font: 800 1.7rem/1 var(--display); color: var(--navy); white-space: nowrap; letter-spacing: .01em; }
.slip.blocked { border-color: #f0dcaa; }
.slip.blocked .slip-amt { color: var(--ink-2); }
.slip-to { margin: 0; border-top: 1px solid var(--line); }
.slip-to > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.slip-to dt { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.slip-to dd { margin: 0; overflow-wrap: anywhere; }
.slip-to .flag { background: var(--warn-bg); }
.slip-why { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 16px; background: var(--warn-bg); color: var(--warn); font-size: .84rem; border-bottom: 1px solid #f0dcaa; }
.slip-why svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.slip-why a { color: var(--warn); font-weight: 700; }
.slip-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 12px 16px 14px; }
.slip-act form { margin: 0; }
.slip-act details { flex: 1 1 130px; }
.slip-act details summary { list-style: none; width: 100%; justify-content: center; }
.slip-act details summary::-webkit-details-marker { display: none; }
.slip-act details[open] { flex-basis: 100%; }
.slip-act details[open] summary { box-shadow: inset 0 0 0 1px var(--navy); }
.inline-f { display: flex; gap: 8px; margin-top: 8px !important; }
.inline-f input { flex: 1; min-width: 0; }
.btn.danger { background: var(--bad); }
.btn.danger:hover { background: #8f1d17; }

.idcheck-shot { position: relative; display: block; background: #0b1530; }
.idcheck-shot img { width: 100%; max-height: 300px; object-fit: contain; }
.idcheck-shot span { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 2px; background: rgba(6, 16, 46, .78); color: #fff; font-size: .7rem; }
.idcheck-body { padding-top: 12px; }
.idcheck-who { margin: 0; padding: 0 16px; }
.idcheck-who strong { display: block; font-weight: 600; }
.idcheck-who > span { display: block; font-size: .76rem; color: var(--ink-2); }
.idcheck-nin { margin: 10px 0 12px; padding: 0 16px; }
.idcheck-nin .mono { display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: .12em; color: var(--navy); overflow-wrap: anywhere; }
.idcheck-nin small { font-size: .74rem; color: var(--ink-2); }
.idnotes { margin: 10px 16px 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.idnotes li { padding: 8px 10px; border-radius: 2px; background: var(--warn-bg); color: var(--warn); font-size: .82rem; }
.idcheck .small.muted { margin: 10px 16px 0; }
@media (min-width: 760px) {
  .idcheck { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .idcheck-shot { display: grid; place-items: center; }
  .idcheck-shot img { max-height: 380px; }
}
.unlock { max-width: 440px; }
.resend-f { margin-top: 12px; }
.resend-f .go { width: 100%; }

/* Progress rings (Learn, the film page, Office > Training): how much of a
   system's films an agent has watched. Blue while under way, green at 100. */
.ring { flex: none; display: block; }
.ring-track { fill: none; stroke: var(--line); stroke-width: 3.6; }
.ring-arc { fill: none; stroke: var(--live); stroke-width: 3.6; stroke-linecap: butt; transition: stroke-dasharray var(--t-state) var(--ease-out); }
.ring text { font: 700 9.5px/1 var(--text); fill: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ring.full .ring-arc { stroke: var(--good); }
.ring.full text { fill: var(--good); }
.ring.zero text { fill: var(--ink-2); }
.score { display: flex; align-items: center; gap: 10px; }
.score b { display: block; font-size: .92rem; }
.score span { color: var(--ink-2); font-size: .8rem; }