/* ════════════════════════════════════════════════════════════════════════
   Agency page — ported from agency-prototype.html on 2026-08-10.

   EVERY rule is scoped under #page-agency on purpose. The prototype was a
   standalone document, so it could use names like .pane, .btn, .row, .sheet
   and .actions freely; inside the app those collide with layout.css,
   buttons.css, bottom-sheet.css and costs.css. Scoping is what keeps the
   port faithful without renaming a hundred classes.

   The one class that IS renamed is .pane -> .agpane. Scoping alone doesn't
   save it: layout.css:359 declares a bare .pane rule setting overflow-y, which
   would still apply to a .pane sitting inside #page-agency.

   Do not add an unscoped .agency-page display rule here — layout.css:412
   documents that it would tie with .page and force this page visible
   underneath every other one.
   ════════════════════════════════════════════════════════════════════════ */

/* The prototype sized itself against the viewport (100vh minus its own bar).
   Inside the app this page lives in a pane the layout grid has already sized,
   so it fills its parent instead. #page-agency.active is (1,1,0) — above the
   `.page:not(.active)` safety net at (0,2,0) — so the flex column only applies
   while this page is the visible one. */
#page-agency.active {display:flex;flex-direction:column;height:100%;overflow:hidden;}

#page-agency .agency-page {flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}

#page-agency .seg {display:flex;background:var(--bg-warm);border:1px solid var(--border);border-radius:var(--radius-control);padding:2px;gap:2px;}

#page-agency .seg button {border:0;background:transparent;color:var(--text-muted);font:inherit;font-size:12.5px;
  padding:5px 11px;border-radius:7px;cursor:pointer;white-space:nowrap;}

#page-agency #periodSeg button {font-size:12px;padding:5px 9px;}

#page-agency .seg button:hover {color:var(--text);}

#page-agency .seg button[aria-pressed="true"] {background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-card);}

#page-agency .seg button:disabled {opacity:.4;cursor:not-allowed;}

/* ══ downstream banners ══ */
#page-agency #bannerHost {flex:none;}

#page-agency .banner {display:flex;align-items:baseline;gap:10px;padding:9px 20px;
  background:var(--gold-soft);border-bottom:1px solid var(--border);font-size:13.5px;}

#page-agency .banner-from {font-weight:650;color:var(--gold);white-space:nowrap;}

#page-agency .banner-text {flex:1;min-width:0;color:var(--text);}

#page-agency .banner-x {border:0;background:transparent;color:var(--text-dim);font-size:17px;line-height:1;
  cursor:pointer;padding:0 2px;}

#page-agency .banner-x:hover {color:var(--text);}

/* ══ split ══ */
#page-agency .agency-split {flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0;}

/* A hidden pane leaves the grid entirely, so the surviving pane is auto-placed
   into the FIRST track. Both full-screen states therefore need a single 1fr
   track — "0 1fr" put the right pane in the 0-width column and blanked it. */
#page-agency .agency-split.only-left,
#page-agency .agency-split.only-right {grid-template-columns:1fr;}

#page-agency .agency-split.only-left  .agpane.right,
#page-agency .agency-split.only-right .agpane.left {display:none;}

@media (max-width:1100px) {
  #page-agency .agency-split {grid-template-columns:1fr;grid-template-rows:minmax(0,44vh) minmax(0,1fr);}
  #page-agency .agency-split.only-left,
#page-agency .agency-split.only-right {grid-template-rows:1fr;}
}

#page-agency .agpane {min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;}

#page-agency .agpane.right {border-left:1px solid var(--border);background:var(--bg);container-type:inline-size;}

/* ══ agency brand takeover, stats pane ══════════════════════════════════════
   When the selected agency has a logo, agency.js derives a full readable
   palette from it (src/js/utils/theme-derive.js) and writes every --ag-* token
   inline on this pane. Rebinding the GLOBAL tokens from them here is the whole
   trick: every rule in this file already reads --bg/--surface/--text, so this
   one block re-skins the pane without touching another selector — the same
   approach team.css takes for group logos.

   Legibility is guaranteed upstream, not here: the derivation holds body text
   to 7:1 and the accent to 4.5:1, and chooses the light-vs-dark direction from
   the app's CURRENT appearance. So a pale logo yields a light pane with dark
   ink, a dark logo a dark pane with light ink, and --on-accent carries whatever
   reads on the accent itself instead of an assumed white. */
#page-agency .agpane.right[data-themed="1"] {
  --bg:           var(--ag-bg);
  --bg-warm:      var(--ag-bg-warm);
  --surface:      var(--ag-surface);
  --border:       var(--ag-border);
  --border-light: var(--ag-border-light);
  --text:         var(--ag-text);
  --text-muted:   var(--ag-text-muted);
  --text-dim:     var(--ag-text-dim);

  --gold:         var(--ag-accent);
  --gold-hover:   var(--ag-accent-hover);
  --gold-soft:    color-mix(in srgb, var(--ag-accent) 14%, transparent);
  --hover:        color-mix(in srgb, var(--ag-accent) 8%, transparent);
  --wood:         var(--ag-secondary);
  --wood-soft:    color-mix(in srgb, var(--ag-secondary) 14%, transparent);
  --on-accent:    var(--ag-on-accent);

  background:var(--bg);
  color:var(--text);
  /* accent rail so the agency colour reads immediately, like the prod Team page */
  box-shadow:inset 0 3px 0 var(--gold);
}

@media (max-width:1100px) {
  #page-agency .agpane.right {border-left:0;border-top:1px solid var(--border);}
}

#page-agency .pane-hd {display:flex;align-items:center;gap:7px 8px;flex-wrap:wrap;flex:none;padding:8px 14px;
  border-bottom:1px solid var(--border-light);background:var(--surface);}

#page-agency .pane-hd h2 {font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin:0;}

#page-agency .pane-hd .spacer {flex:1;}

#page-agency .pane-body {flex:1;overflow:auto;min-height:0;}

#page-agency .icon-btn {font:inherit;font-size:12px;line-height:1;padding:5px 8px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;}

#page-agency .icon-btn:hover {border-color:var(--gold);color:var(--gold);}

/* ══ zoomable chart ══ */
#page-agency .chart-vp {flex:1;position:relative;overflow:hidden;background:var(--bg);touch-action:none;cursor:grab;min-height:0;}

#page-agency .chart-vp.dragging {cursor:grabbing;}

#page-agency .chart-canvas {position:absolute;top:0;left:0;transform-origin:0 0;padding:26px 30px;width:max-content;}

#page-agency .zoombar {position:absolute;right:12px;bottom:12px;display:flex;gap:4px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:3px;box-shadow:var(--shadow-card);z-index:3;}

#page-agency .zoombar button {font:inherit;font-size:12.5px;min-width:28px;height:26px;border:0;background:transparent;
  color:var(--text-muted);border-radius:var(--radius-pill);cursor:pointer;}

#page-agency .zoombar button:hover {background:var(--hover);color:var(--text);}

#page-agency .zoombar .pctv {font-size:11.5px;color:var(--text-dim);min-width:42px;text-align:center;font-variant-numeric:tabular-nums;}

#page-agency .toast {position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(8px);
  background:var(--text);color:var(--surface);font-size:12.5px;padding:8px 14px;border-radius:var(--radius-pill);
  box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;transition:opacity var(--speed),transform var(--speed);
  z-index:4;max-width:88%;text-align:center;}

#page-agency .toast.show {opacity:1;transform:translateX(-50%) translateY(0);}

/* Loading / failed states for the chart. The tree is a network read, and a
   blank canvas would read as "you are unattached" — a real state this page can
   be in, and therefore the one thing an unloaded page must never resemble. The
   canvas is transformed by the zoom/pan machinery, so this is centred within it
   rather than positioned against the viewport. */
#page-agency .tree-msg {display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:44px 24px;text-align:center;max-width:340px;}

#page-agency .tree-msg h3 {margin:0;font-size:15px;font-weight:650;color:var(--text);}

#page-agency .tree-msg p {margin:0;font-size:13px;line-height:1.5;color:var(--text-muted);}

#page-agency .tree ul {display:flex;justify-content:center;gap:3px;list-style:none;margin:0;padding:24px 0 0;position:relative;}

#page-agency .tree ul::before {content:"";position:absolute;top:0;left:50%;width:2px;height:24px;background:var(--border);transform:translateX(-1px);}

#page-agency .tree > ul {padding-top:0;}

#page-agency .tree > ul::before {display:none;}

#page-agency .tree li {position:relative;display:flex;flex-direction:column;align-items:center;padding:24px 3px 0;list-style:none;}

#page-agency .tree li::before,
#page-agency .tree li::after {content:"";position:absolute;top:0;width:50%;height:24px;border-top:2px solid var(--border);}

#page-agency .tree li::before {right:50%;border-right:2px solid var(--border);}

#page-agency .tree li::after {left:50%;}

/* When every child of a node is a leaf, lay them out as one compact block under a
   single connector instead of a row that runs off the canvas. Gabe's ten become
   a tidy grid rather than 1,800px of chart. */
#page-agency .leafblock {padding-top:24px;}

#page-agency .leafgrid {display:grid;gap:7px;padding:9px;border:1.5px dashed var(--border);
  border-radius:14px;background:var(--bg-warm);}

/* drag to re-parent */
#page-agency .node[draggable="true"] {cursor:grab;}

#page-agency .node.dragging {opacity:.4;}

#page-agency .node.drop-ok {border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft);}

#page-agency .node.drop-no {border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft);}

#page-agency .tree.dragging-active .node:not([data-droppable="1"]) {opacity:.35;}

#page-agency .tree li:first-child::before {border-top-color:transparent;}

#page-agency .tree li:last-child::after {border-top-color:transparent;}

#page-agency .tree li:only-child::after {display:none;}

#page-agency .tree > ul > li {padding-top:0;}

#page-agency .tree > ul > li::before,
#page-agency .tree > ul > li::after {display:none;}

#page-agency .node {position:relative;width:166px;text-align:left;font:inherit;color:var(--text);
  background:var(--surface);border:1.5px solid var(--border);border-radius:11px;
  padding:9px 11px 10px;cursor:pointer;display:flex;flex-direction:column;gap:1px;
  transition:border-color var(--speed),box-shadow var(--speed);}

#page-agency .node:hover {box-shadow:var(--shadow-pop);}

#page-agency .node:focus-visible {outline:2px solid var(--gold);outline-offset:2px;}

#page-agency .node .nm {font-weight:640;font-size:13.5px;letter-spacing:-.01em;}

#page-agency .node .ag {font-size:11px;color:var(--text-dim);line-height:1.35;}

#page-agency .node .ag.none {font-style:italic;}

#page-agency .node .fig {display:flex;justify-content:space-between;gap:8px;margin-top:6px;
  font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--text-muted);}

#page-agency .node .fig .hc {color:var(--text-dim);}

#page-agency .node .logo {position:absolute;top:9px;right:9px;width:18px;height:18px;border-radius:5px;object-fit:cover;}

#page-agency .node.sel {border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}

#page-agency .node.me {border-color:var(--gold);background:var(--gold-soft);}

#page-agency .node.up {border-color:var(--wood);}

#page-agency .node.ghost {border-style:dashed;background:transparent;}

#page-agency .node.ghost .nm {color:var(--text-dim);font-weight:560;}

#page-agency .node.dormant .fig .hc {color:var(--sand);}

/* dashed teaching slots for a producer with no upline / no downlines yet */
#page-agency .node.slot {border-style:dashed;background:transparent;align-items:flex-start;gap:2px;}

#page-agency .node.slot .nm {color:var(--gold);font-weight:620;}

#page-agency .node.slot .ag {font-style:italic;}

#page-agency .node.slot:hover {border-color:var(--gold);background:var(--gold-soft);}

#page-agency .slot-plus {position:absolute;top:8px;right:10px;color:var(--gold);font-size:15px;line-height:1;font-weight:700;}

/* --on-gold / --on-wood are written by agency.js paintBaseInk(): whichever of
   white or near-black actually reads on the app's accent. Hardcoded white was
   fine on the indigo themes and unreadable on Jarvis's cyan and amber. */
#page-agency .node .youtag {position:absolute;top:-8px;left:10px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--gold);color:var(--on-gold,#fff);padding:1px 6px;border-radius:4px;font-weight:600;}

#page-agency .node .uptag {position:absolute;top:-8px;left:10px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--wood);color:var(--on-wood,#fff);padding:1px 6px;border-radius:4px;font-weight:600;}

/* ══ agency-branded nodes ═══════════════════════════════════════════════════
   A node whose agency has a logo wears that agency's own derived palette
   (agency.js nodeVars) and carries the logo itself as a faint watermark, so a
   chart full of agencies reads as a picture of those agencies rather than
   thirty identical grey cards.

   Only branded nodes are touched. A producer with no agency, or an agency with
   no logo, matches none of these selectors and keeps the app's own appearance
   above — which is also what makes the two states distinguishable in one tree.

   Every --nd-* token is derived in the current light/dark appearance and
   contrast-fitted against --nd-bg specifically, so the text is legible on the
   tint whatever colour the logo turns out to be. */
#page-agency .node[data-branded="1"] {
  background:var(--nd-bg);
  color:var(--nd-text);
  border-color:color-mix(in srgb, var(--nd-accent) 42%, transparent);
  /* Makes this a stacking context so the watermark below can sit at z-index:-1
     — above the card's own background, beneath every bit of its text. Without
     it the negative layer would escape and paint behind the whole chart. */
  isolation:isolate;
}

/* The logo, lightly embedded behind the card. Deliberately NOT overflow:hidden
   on the node — the "You" / "Upline" tags hang outside it at top:-8px — so the
   image is clipped by this pseudo-element's own rounded box instead. */
#page-agency .node[data-branded="1"]::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background-image:var(--nd-logo, none);
  background-repeat:no-repeat;
  /* Bleeds off the LEFT edge, diagonally opposite the crisp corner chip, so the
     card shows the mark twice at two scales rather than twice in one corner. */
  background-position:left -18% center;
  background-size:auto 165%;
  opacity:var(--nd-logo-op, 0);
}

#page-agency .node[data-branded="1"] .ag,
#page-agency .node[data-branded="1"] .fig {color:var(--nd-text-muted);}

/* :not(.dormant) so a flagged node keeps its warning colour — that rule sits
   earlier in the file and would otherwise lose the specificity tie. */
#page-agency .node[data-branded="1"]:not(.dormant) .fig .hc {color:var(--nd-text-dim);}

#page-agency .node[data-branded="1"] .logo {box-shadow:0 0 0 1px color-mix(in srgb, var(--nd-text) 14%, transparent);}

/* Selection and "you" have to stay visible on a tinted card, so they follow the
   node's own accent instead of the app's — a gold ring on a gold-branded box
   would disappear. */
#page-agency .node[data-branded="1"].sel {
  border-color:var(--nd-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--nd-accent) 26%, transparent);
}

#page-agency .node[data-branded="1"].me {background:var(--nd-bg);border-color:var(--nd-accent);}

#page-agency .node[data-branded="1"] .youtag {background:var(--nd-accent);color:var(--nd-on-accent);}

/* Drag feedback outranks branding — it has to stay unmistakable mid-drag, and
   the plain .drop-ok/.drop-no rules tie with the branded ones on specificity. */
#page-agency .node[data-branded="1"].drop-ok {border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft);}

#page-agency .node[data-branded="1"].drop-no {border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft);}

#page-agency .toggle {margin-top:6px;font-size:10.5px;letter-spacing:.03em;background:var(--surface);color:var(--text-muted);
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:2px 10px;cursor:pointer;white-space:nowrap;}

#page-agency .toggle:hover {border-color:var(--gold);color:var(--gold);}

#page-agency .sw.dm {background:var(--sand-soft);border-color:var(--sand);}

/* ══ stats ══ */
#page-agency .stats {padding:16px 18px 34px;display:flex;flex-direction:column;gap:18px;max-width:1180px;}

/* identity header — actions right-aligned, like the prod Team page */
#page-agency .panel-head {display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;
  padding:14px 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-card);border-left:4px solid var(--gold);}

/* The monogram's ink is written inline by crest(), picked by contrast against
   whatever colour the agency turns out to be — the #fff that used to live here
   vanished on a pale brand. --on-gold is the same choice made against the app's
   own accent, for the unbranded case. */
#page-agency .panel-head .crest {border-radius:12px;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:16px;color:var(--on-gold,#fff);letter-spacing:-.02em;}

#page-agency .panel-head .crest.plain {background:var(--bg-warm);color:var(--text-muted);
  border:1px solid var(--border);}

#page-agency .ph-id {flex:1;min-width:170px;}

#page-agency .ph-id h3 {margin:0;font-size:24px;font-weight:680;letter-spacing:-.028em;line-height:1.15;}

#page-agency .ph-sub {font-size:13px;color:var(--text-dim);margin-top:3px;}

#page-agency .ph-sub code {font-size:12px;background:var(--bg-warm);padding:2px 7px;border-radius:5px;
  color:var(--text-muted);letter-spacing:.05em;}

#page-agency .btn.danger {color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,transparent);}

#page-agency .btn.danger:hover {background:var(--red-soft);border-color:var(--red);color:var(--red);}

/* stat tiles */
#page-agency .tiles {display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}

@container (min-width:520px) {
  #page-agency .tiles {grid-template-columns:repeat(3,1fr);}
}

@container (min-width:780px) {
  #page-agency .tiles {grid-template-columns:repeat(4,1fr);}
}

#page-agency .tile {background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:12px 14px;}

#page-agency .t-k {font-size:11px;letter-spacing:.04em;color:var(--text-dim);}

#page-agency .t-v {font-size:23px;font-weight:690;letter-spacing:-.032em;font-variant-numeric:tabular-nums;
  line-height:1.2;margin-top:4px;}

#page-agency .t-d {font-size:11.5px;color:var(--text-dim);margin-top:2px;}

/* sections */
#page-agency .sect {background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;}

#page-agency .sect-hd {display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border-light);}

#page-agency .sect-hd h4 {margin:0;font-size:12px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);}

#page-agency .sect-hd .spacer {flex:1;}

#page-agency .sect-note {font-size:12px;color:var(--text-dim);}

/* ── three leaderboard columns, always on one row ───────────────────────────
   They used to stack below ~700px, which turned three short comparable lists
   into one long scroll and lost the side-by-side reading that is the entire
   point of showing them together.

   So: ONE ROW at every width, with a horizontal scroll as the LAST resort.
   Before that, names shorten — "Marcus Webb" → "Marcus W." → "Marcus" — which
   is done in JS, because CSS cannot choose between two strings. The minmax()
   floor is the width at which shortening gives up and scrolling takes over.

   170px holds a rank, a first name and a value. Below that there is nothing
   left to trim, so the container scrolls rather than rendering three unreadable
   slivers. */
#page-agency .lb-scroll {overflow-x:auto;overscroll-behavior-x:contain;}

#page-agency .lb-grid {display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));
  gap:1px;background:var(--border-light);}

/* Columns are drag-resizable, so each is a positioning context for its handle,
   and each must be free to shrink below its content. Without min-width:0 a grid
   item refuses to go narrower than its longest word and the drag stops partway
   for no visible reason. */
#page-agency .lb-col {background:var(--surface);min-width:0;position:relative;}

/* A 7px target straddling the 1px gutter: wide enough to grab, narrow enough
   not to steal clicks from the rows, which are themselves clickable. */
#page-agency .lb-resize {position:absolute;top:0;right:-4px;bottom:0;width:7px;
  cursor:col-resize;z-index:2;touch-action:none;}

#page-agency .lb-resize::after {content:"";position:absolute;top:0;bottom:0;left:3px;width:1px;
  background:transparent;transition:background var(--speed);}

#page-agency .lb-resize:hover::after,
#page-agency .lb-resize:active::after {background:var(--gold);}

/* Same horizontal padding as the rows below it, so the header text starts on
   the same vertical line as the rank column rather than a pixel off it. */
#page-agency .lb-hd {font-size:12px;font-weight:640;padding:9px 11px;background:var(--gold-soft);color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

#page-agency .lb-row {display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:13.5px;cursor:pointer;}

#page-agency .lb-row + .lb-row {border-top:1px solid var(--border-light);}

#page-agency .lb-row:hover {background:var(--hover);}

/* A name on an outsider's board that goes nowhere. Every other row opens that
   producer's page, so leaving the pointer and the hover tint on one that does
   nothing reads as a dead link rather than as a decision. */
#page-agency .lb-row.lb-flat {cursor:default;}

#page-agency .lb-row.lb-flat:hover {background:transparent;}

#page-agency .lb-row.mine {background:var(--gold-soft);font-weight:600;}

/* 18px, not 16: "10" in tabular figures at 13.5px is just over 16px, so rank ten
   was nudging the name a pixel left and breaking the column's alignment on the
   one row where it is most obvious. */
#page-agency .lb-rk {color:var(--text-dim);font-variant-numeric:tabular-nums;width:18px;flex:none;}

#page-agency .lb-nm {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* flex:none so the NAME absorbs the squeeze. Without it the value is shrinkable
   too, and a truncated figure is a wrong number rather than a shortened one —
   "$30.7K" clipped to "$30." is worse than any amount of missing name. */
#page-agency .lb-v {font-variant-numeric:tabular-nums;font-weight:600;color:var(--gold);flex:none;}

#page-agency .lb-pick {font:inherit;font-size:12.5px;color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:8px;padding:4px 8px;max-width:190px;}

#page-agency .rows {display:flex;flex-direction:column;}

#page-agency .row {display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:13.5px;}

#page-agency .row + .row {border-top:1px solid var(--border-light);}

#page-agency .row .lbl {flex:1;min-width:0;color:var(--text-muted);}

#page-agency .row .val {font-variant-numeric:tabular-nums;font-weight:600;}

#page-agency .table-wrap {overflow-x:auto;}

#page-agency table.dt {width:100%;border-collapse:collapse;font-size:13px;}

#page-agency table.dt .who {max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

#page-agency table.dt .who small {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

#page-agency table.dt th {text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);
  font-weight:500;padding:7px 14px;border-bottom:1px solid var(--border-light);}

#page-agency table.dt td {padding:8px 14px;border-bottom:1px solid var(--border-light);vertical-align:middle;}

#page-agency table.dt tr:last-child td {border-bottom:0;}

#page-agency table.dt tbody tr {cursor:pointer;}

#page-agency table.dt tbody tr:hover {background:var(--hover);}

#page-agency table.dt td.n {text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}

#page-agency table.dt .who {font-weight:600;}

#page-agency table.dt .who small {display:block;font-weight:400;color:var(--text-dim);font-size:11.5px;}

#page-agency table.dt tr.mine {background:var(--gold-soft);}

#page-agency table.dt td.rk {width:34px;color:var(--text-dim);font-variant-numeric:tabular-nums;}

#page-agency .flag {font-size:10.5px;padding:2px 7px;border-radius:var(--radius-pill);white-space:nowrap;font-weight:600;}

#page-agency .flag.ok {background:var(--green-soft);color:var(--green);}

#page-agency .flag.warn {background:var(--sand-soft);color:var(--sand);}

#page-agency .flag.new {background:var(--wood-soft);color:var(--wood);}

#page-agency .flag.ghost {background:var(--bg-warm);color:var(--text-dim);}

#page-agency .actions {display:flex;flex-wrap:wrap;gap:8px;}

#page-agency .btn {font:inherit;font-size:13px;padding:7px 13px;border-radius:var(--radius-control);
  border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;}

#page-agency .btn:hover {border-color:var(--gold);color:var(--gold);}

/* --on-accent inside the themed pane, --on-gold everywhere else (modals, chart
   pane). Both are contrast-picked; #fff is only the pre-paint fallback. */
#page-agency .btn.primary {background:var(--gold);border-color:var(--gold);
  color:var(--on-accent,var(--on-gold,#fff));font-weight:600;}

#page-agency .btn.primary:hover {background:var(--gold-hover);color:var(--on-accent,var(--on-gold,#fff));}

#page-agency .alertbox {display:flex;gap:10px;padding:11px 13px;border-radius:var(--radius-card);
  background:var(--sand-soft);border:1px solid var(--sand);font-size:13px;}

#page-agency .alertbox .ic {flex:none;font-weight:700;color:var(--sand);}

#page-agency .alertbox b {display:block;margin-bottom:1px;}

#page-agency .alertbox p {margin:0;color:var(--text-muted);}

#page-agency .inbox {border-color:var(--wood);}

#page-agency .inbox .sect-hd {background:var(--wood-soft);}

#page-agency .inbox .sect-hd h4 {color:var(--wood);}

#page-agency .inbox-row {display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  padding:11px 14px;font-size:13.5px;}

#page-agency .inbox-row + .inbox-row {border-top:1px solid var(--border-light);}

#page-agency .inbox-row.note {background:var(--bg-warm);color:var(--text-muted);}

#page-agency .inbox-txt {flex:1;min-width:200px;}

#page-agency .inbox-sub {font-size:12.5px;color:var(--text-muted);}

#page-agency .inbox-btns {display:flex;gap:6px;flex:none;}

#page-agency .inbox-btns .btn {font-size:12.5px;padding:5px 11px;}

#page-agency .inbox-btns .btn[disabled] {opacity:.45;cursor:not-allowed;}

#page-agency .match-card {display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-top:8px;
  padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface);}

#page-agency .match-col {flex:1;min-width:150px;display:flex;flex-direction:column;gap:2px;}

#page-agency .match-hd {font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:3px;}

#page-agency .match-act {flex:none;align-self:center;}

#page-agency .viafield {margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);}

#page-agency .via-link {margin-top:6px;}

#page-agency .linkbtn {display:inline-block;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--gold);text-decoration:underline;text-underline-offset:2px;}

#page-agency .linkbtn:hover {color:var(--gold-hover);}

#page-agency .linkbtn:focus-visible {outline:2px solid var(--gold);outline-offset:2px;border-radius:3px;}

#page-agency .place-wrap {display:flex;flex-direction:column;gap:3px;flex:none;min-width:230px;margin-right:4px;}

#page-agency .place-sel {font-size:12.5px;padding:5px 8px;margin-top:0;}

#page-agency .keep-row {display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:10px 14px;font-size:13.5px;}

#page-agency .keep-row + .keep-row {border-top:1px solid var(--border-light);}

#page-agency .keep-txt {flex:1;min-width:170px;}

#page-agency .keep-seg {flex:none;}

#page-agency .keep-seg button {font-size:11.5px;padding:4px 9px;}

#page-agency .claim-rows {display:flex;flex-direction:column;gap:7px;margin-top:9px;}

#page-agency .claim-row {display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:9px 11px;font-size:13.5px;}

#page-agency .claim-txt {flex:1;min-width:0;}

#page-agency .locked {padding:13px 14px;border:1px dashed var(--border);border-radius:var(--radius-card);
  font-size:13px;color:var(--text-dim);background:var(--bg-warm);}

#page-agency .locked b {color:var(--text-muted);}

#page-agency .foot-note {margin:0;font-size:12px;color:var(--text-dim);}

/* ══ modal ══ */
#page-agency .scrim {position:fixed;inset:0;background:rgba(23,26,38,.42);display:none;align-items:center;justify-content:center;padding:22px;z-index:60;}

#page-agency .scrim.open {display:flex;}

#page-agency .sheet {background:var(--surface);border-radius:16px;box-shadow:var(--shadow-pop);width:min(880px,100%);max-height:88vh;overflow:auto;}

#page-agency .sheet-hd {display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);}

#page-agency .sheet-hd h3 {margin:0;font-size:17px;font-weight:660;letter-spacing:-.02em;}

#page-agency .sheet-hd .spacer {flex:1;}

#page-agency .sheet-body {padding:18px 20px 24px;}

#page-agency .flowtabs {display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;}

#page-agency .flowtabs button {font:inherit;font-size:13px;padding:6px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;}

#page-agency .flowtabs button[aria-pressed="true"] {background:var(--gold);border-color:var(--gold);
  color:var(--on-gold,#fff);font-weight:600;}

/* join flow — a vertical checklist that actually advances */
#page-agency .jsteps {display:flex;flex-direction:column;gap:10px;}

#page-agency .jstep {display:flex;gap:12px;padding:13px 14px;border:1px solid var(--border);
  border-radius:var(--radius-card);background:var(--bg);}

#page-agency .jstep.active {background:var(--surface);border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}

#page-agency .jstep.done {background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 40%,transparent);}

#page-agency .jstep.todo {opacity:.62;}

#page-agency .jn {width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--bg-warm);color:var(--text-dim);border:1px solid var(--border);}

#page-agency .jstep.active .jn {background:var(--gold);color:var(--on-gold,#fff);border-color:var(--gold);}

#page-agency .jstep.done .jn {background:var(--green);color:#fff;border-color:var(--green);}

#page-agency .jbody {flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}

#page-agency .jbody h5 {margin:0;font-size:14px;font-weight:645;letter-spacing:-.01em;}

#page-agency .jbody p {margin:0;font-size:12.5px;color:var(--text-muted);line-height:1.55;}

#page-agency .jbody .fld {margin-top:2px;}

#page-agency .jrow {display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:2px;}

#page-agency .codechip {font-family:ui-monospace,Consolas,monospace;font-size:15px;letter-spacing:.1em;font-weight:700;
  background:var(--gold-soft);color:var(--gold);padding:5px 11px;border-radius:8px;}

#page-agency .jerr {font-size:12.5px;color:var(--red);}

#page-agency .simulate {font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sand);font-weight:700;}

/* actions dropdown */
#page-agency .actions-menu {position:relative;flex:none;}

#page-agency .act-list {position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-pop);
  min-width:238px;z-index:30;padding:5px;display:flex;flex-direction:column;gap:1px;}

#page-agency .act-list button {font:inherit;font-size:13px;text-align:left;padding:8px 11px;border:0;
  background:transparent;color:var(--text);border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;}

#page-agency .act-list button:hover {background:var(--hover);}

#page-agency .act-list button.danger {color:var(--red);}

#page-agency .act-list button.danger:hover {background:var(--red-soft);}

#page-agency .act-list hr {border:0;border-top:1px solid var(--border-light);margin:4px 6px;}

#page-agency .logo-picker {display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}

#page-agency .logo-preview {width:74px;height:74px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:var(--bg-warm);border:1.5px dashed var(--border);color:var(--text-dim);font-size:11.5px;overflow:hidden;}

#page-agency .logo-preview img {width:100%;height:100%;object-fit:cover;}

#page-agency .fld-label {font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);}

#page-agency .fld {width:100%;font:inherit;font-size:14px;color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-control);padding:9px 11px;margin-top:5px;}

#page-agency .fld:focus {outline:2px solid var(--gold);outline-offset:1px;}

#page-agency .fld-hint {margin:6px 0 0;font-size:12px;color:var(--text-dim);}

#page-agency .swatches {display:flex;gap:6px;margin-top:10px;}

#page-agency .swatches i {width:22px;height:22px;border-radius:6px;border:1px solid var(--border);}