/* ===========================================================================
   Leoden BD workspace, 23 Sep 2026.
   Warm paper, an ink navigation rail, and four pastel dashboard surfaces form
   the reading hierarchy. The five original logo arcs remain the data language
   for pipeline stages, progress, and status where their meaning is explicit.
   =========================================================================== */

:root {
  color-scheme: light;

  /* ---- brand, read from leodenmarketing.com and its logo, unmodified ---- */
  --brand-black:  #000000;
  --arc-yellow:   #FFCF45;
  --arc-green:    #8ACCA0;
  --arc-teal:     #5CA5BE;
  --arc-purple:   #7C5CA4;
  --arc-coral:    #F1645C;

  /* the arcs in the order they appear in the mark, top left to bottom right */
  --arc-sweep: linear-gradient(90deg,
    var(--arc-yellow) 0%, var(--arc-green) 27%, var(--arc-teal) 52%,
    var(--arc-purple) 76%, var(--arc-coral) 100%);

  /* ---- neutrals, hue matched to the brand purple ---- */
  --n-0:#FFFFFF; --n-25:#FCFCFD; --n-50:#F8F7F9; --n-100:#F2F1F4; --n-150:#EBEAEE;
  --n-200:#E4E2E8; --n-300:#D6D3DC; --n-400:#B5B0BE; --n-500:#918A9C;
  --n-600:#6F6880; --n-700:#544E62; --n-800:#3B3646; --n-900:#272331;
  --n-950:#181521; --n-1000:#0D0B12;

  /* Warm paper and ink; the arc colours remain the data vocabulary. */
  --canvas:       #f8f4ea;
  --surface:      #fffcf5;
  --surface-2:    #f3eddf;
  --sunken:       #eee7d8;
  --hover:        #f2ebdc;
  --active:       #e8dfcd;
  --selected:     #f2d9e5;
  --backdrop:     rgb(13 11 18 / .5);

  /* the rail is the logo's own black, because the logo lives on it */
  --rail:         #171715;
  --rail-2:       #302d29;
  --rail-line:    rgb(255 250 240 / .17);
  --rail-text:    #d8d4c9;
  --rail-text-on: #fffaf0;

  /* ---- text ---- */
  --tx:     #191917;
  --tx-2:   #3d3b35;
  --tx-3:   #59574e;
  --tx-4:   #69665c;
  --tx-dis: #757166;
  --tx-inv: #fffaf0;
  --on-accent: #fffaf0;

  /* ---- lines. chrome and row rules are different weights on purpose ---- */
  --line:      #ddd6c7;   /* card, panel and control edges */
  --rule:      #e7dfd0;   /* separators inside a list or table */
  --line-2:    #c7bdac;
  --line-ctrl: #a9a08f;
  --line-strong: #777063;

  /* ---- accent ---- */
  --acc:        #24231f;
  --acc-hover:  #3b3931;
  --acc-press:  #161612;
  --acc-tx:     #51415a;
  --acc-bg:     #f4e5ec;
  --acc-bg-2:   #ebd6e1;
  --acc-line:   #d9bdcc;
  --ring:       #874768;

  --pastel-yellow:#f3d66c;
  --pastel-pink:  #eab9d5;
  --pastel-sage:  #b8c695;
  --pastel-blue:  #bdd0ec;
  --pastel-ink:   #25241f;

  /* ---- semantic ---- */
  --ok:#2A7945;   --ok-tx:#216B3B;  --ok-bg:#ECFAF0;  --ok-line:#C8EFD4;
  --warn:#C98A00; --warn-tx:#8A5D00; --warn-bg:#FDF6E7; --warn-line:#F5E3B8;
  --bad:#CE2B22;  --bad-tx:#B4221A; --bad-bg:#FCEDEC; --bad-line:#F4CBC8;
  --info:#2F6C82; --info-tx:#275C6F; --info-bg:#ECF7FA; --info-line:#C7E4ED;

  /* ---- the five pipeline stages, in the logo's arc order ---- */
  --stage-1: var(--arc-teal);    /* Identified  */
  --stage-2: var(--arc-green);   /* Qualified   */
  --stage-3: var(--arc-yellow);  /* Proposal    */
  --stage-4: var(--arc-coral);   /* Pitch       */
  --stage-5: var(--arc-purple);  /* Negotiation */

  /* ---- type ---- */
  --f-brand:"Montserrat","Inter",system-ui,sans-serif;
  --f:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-ar:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tnum: tabular-nums lining-nums;

  /* ---- space, base 4 ---- */
  --s-05:4px; --s-075:6px; --s-1:8px; --s-15:12px; --s-2:16px; --s-25:20px;
  --s-3:24px; --s-4:32px; --s-5:40px; --s-6:48px; --s-8:64px;

  /* ---- radius ---- */
  --r-xs:4px; --r-sm:6px; --r-md:9px; --r-lg:14px; --r-xl:18px; --r-2xl:23px; --r-full:999px;

  /* ---- elevation. borders first, shadow second ---- */
  --sh-xs: 0 1px 2px 0 rgb(13 11 18 / .04);
  --sh-sm: 0 1px 3px 0 rgb(13 11 18 / .07), 0 1px 2px -1px rgb(13 11 18 / .05);
  --sh-md: 0 4px 10px -2px rgb(13 11 18 / .08), 0 2px 4px -2px rgb(13 11 18 / .05);
  --sh-lg: 0 12px 28px -6px rgb(13 11 18 / .12), 0 4px 8px -4px rgb(13 11 18 / .07);
  --sh-pop: 0 0 0 1px var(--line), 0 12px 28px -6px rgb(13 11 18 / .14), 0 4px 10px -4px rgb(13 11 18 / .08);

  /* ---- motion. hover arrives instantly and leaves slowly ---- */
  --d-1:90ms; --d-2:140ms; --d-3:200ms; --d-4:280ms;
  --ease: cubic-bezier(.2,0,.38,.9);
  --ease-out: cubic-bezier(0,0,.2,1);

  /* ---- layout ---- */
  --rail-w:206px; --row-h:44px; --ctrl-h:40px; --ctrl-h-sm:30px; --ctrl-h-lg:44px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas:#24231f; --surface:#302f29; --surface-2:#37352e; --sunken:#39372f;
  --hover:#424037; --active:#4b493e;
  --selected:#564150; --backdrop:rgb(0 0 0 / .66);
  --rail:#151513; --rail-2:#302d29;

  --tx:#f8f2e7; --tx-2:#e4ded1; --tx-3:#cdc6b8; --tx-4:#c5bcab; --tx-dis:#9a9182; --tx-inv:#1e1d19;

  /* white alpha, not opaque hex, so lines sit correctly on any surface */
  --line:#565247;
  --rule:#49463d;
  --line-2:#696456;
  --line-ctrl:#817b6a;
  --line-strong:#aaa28e;

  --acc:#e9c7d9; --acc-hover:#f4d4e5; --acc-press:#d7b5c7; --acc-tx:#f0cddd;
  --on-accent:#211c20; --acc-bg:#493943; --acc-bg-2:#594453; --acc-line:#74566a; --ring:#f1c5dc;

  --pastel-yellow:#d9b862;
  --pastel-pink:#d6a3be;
  --pastel-sage:#a5b782;
  --pastel-blue:#a9bddf;

  --ok:#3E8F5B; --ok-tx:#8FD9A8; --ok-bg:#122318; --ok-line:#1F4229;
  --warn:#E0A013; --warn-tx:#F2CE79; --warn-bg:#241C0C; --warn-line:#473714;
  --bad:#D6352B; --bad-tx:#F08B84; --bad-bg:#261211; --bad-line:#4C1F1C;
  --info:#3A7F96; --info-tx:#8FC9DC; --info-bg:#0F2028; --info-line:#1D3F4C;

  /* dark elevation needs a light top edge, not just a darker shadow */
  --sh-xs: inset 0 0.5px 0 0 rgb(255 255 255 / .05), 0 1px 2px 0 rgb(0 0 0 / .4);
  --sh-sm: inset 0 0.5px 0 0 rgb(255 255 255 / .06), 0 1px 3px 0 rgb(0 0 0 / .5);
  --sh-md: inset 0 1px 0 0 rgb(255 255 255 / .06), 0 4px 10px -2px rgb(0 0 0 / .55);
  --sh-lg: inset 0 1px 0 0 rgb(255 255 255 / .07), 0 12px 28px -6px rgb(0 0 0 / .6);
  --sh-pop: 0 0 0 1px rgb(255 255 255 / .1), inset 0 1px 0 0 rgb(255 255 255 / .07), 0 12px 28px -6px rgb(0 0 0 / .65);
}

/* ============================================================ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--tx);
  font-family:var(--f);font-size:13.5px;line-height:20px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
[dir="rtl"] body{font-family:var(--f-ar)}
h1,h2,h3,h4{margin:0;letter-spacing:-.011em}
h1{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.021em}
h2{font-size:15px;line-height:22px;font-weight:600;margin:var(--s-3) 0 var(--s-15)}
h3{font-size:13.5px;line-height:20px;font-weight:600}
p{margin:0 0 var(--s-1)}
small,.muted{color:var(--tx-3);font-size:12.5px;line-height:18px}
a{color:var(--acc-tx);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s-3) 0}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--r-sm)}
.skip-link{
  position:fixed;z-index:100;top:0;inset-inline-start:16px;
  min-height:44px;display:inline-flex;align-items:center;padding:9px 16px;
  transform:translateY(calc(-100% - 12px));border-radius:0 0 10px 10px;
  background:#171715;color:#fffaf0;font-weight:650;box-shadow:0 3px 12px rgb(0 0 0 / .2);
}
.skip-link:focus-visible{top:12px;transform:none;color:#fffaf0;outline:3px solid var(--ring);outline-offset:3px}
.boot{padding:var(--s-8);text-align:center;color:var(--tx-3)}
/* the UA rule for [hidden] is display:none at zero specificity, so any class
   that sets display, .grid included, silently defeats it */
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============================================================ shell */
/* minmax(0,1fr), never 1fr. A grid track defaults to min-width:auto, so a wide
   table inside .main would push the whole page sideways instead of scrolling
   inside its own .wrap. This one keyword is what keeps the page from shifting. */
.shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh}
.side{
  background:var(--rail);color:var(--rail-text);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;padding:var(--s-2) var(--s-15) var(--s-15);
  border-inline-end:1px solid var(--rail-line);
}

/* Workspace monogram and name; the original full logo remains a separate asset. */
.brand{display:flex;align-items:center;gap:var(--s-15);padding:var(--s-05) var(--s-05) var(--s-2);position:relative}
.brand .mk{
  width:34px;height:34px;border-radius:var(--r-md);display:block;flex:none;
  background-color:var(--brand-black);
  background-image:url("brand/cropped-cropped-Asset-2.png"),var(--arc-sweep);
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat;
}
.brand .bt{min-width:0}
/* The adjacent text gives the monogram a full, readable name. */
.brand .bn{
  display:block;font-family:var(--f-brand);font-weight:700;font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--rail-text-on);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand .bs{font-size:11.5px;color:var(--tx-4);line-height:1.3;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand::after{
  content:"";position:absolute;inset-inline:var(--s-05);bottom:var(--s-1);height:2px;
  border-radius:2px;background:var(--arc-sweep);opacity:.9;
}

.nav{display:flex;flex-direction:column;gap:1px;overflow-y:auto;margin-top:var(--s-1);scrollbar-width:thin}
.nav .grp{
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx-4);padding:var(--s-2) var(--s-1) var(--s-05);
}
.nav a{
  display:flex;align-items:center;gap:var(--s-1);justify-content:space-between;
  height:32px;padding:0 var(--s-1);border-radius:var(--r-md);
  color:var(--rail-text);font-size:13px;font-weight:450;position:relative;
  transition:background-color var(--d-2) var(--ease),color var(--d-2) var(--ease);
}
.nav a:hover{background:var(--rail-2);color:var(--rail-text-on);text-decoration:none;transition:none}
.nav a.active{background:var(--rail-2);color:#fff;font-weight:550}
.nav a.active::before{
  content:"";position:absolute;inset-inline-start:-13px;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--nav-accent,var(--arc-purple));
}
.nav .pill{
  background:var(--acc);color:#fff;font-size:10.5px;line-height:17px;min-width:18px;
  text-align:center;padding:0 5px;border-radius:var(--r-full);font-weight:600;
  font-variant-numeric:var(--tnum);
}
/* proposals waiting for a decision: coral, and it breathes until dealt with */
.nav .pill.ask{background:var(--arc-coral);color:#fff;animation:pillask 2.4s ease-in-out infinite}
@keyframes pillask{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--arc-coral) 30%,transparent)}}
@media (prefers-reduced-motion:reduce){.nav .pill.ask{animation:none}}
.side .foot{margin-top:auto;padding-top:var(--s-2);border-top:1px solid var(--rail-line);font-size:11.5px;color:var(--tx-4)}
.side .foot .who{color:var(--rail-text);font-weight:500;font-size:12.5px}
.side .foot .btns{display:flex;gap:var(--s-05);margin-top:var(--s-1)}
.side .foot button{
  flex:1;background:transparent;border-color:rgb(255 255 255 / .12);color:var(--rail-text);
  font-size:11.5px;height:var(--ctrl-h-sm);padding:0 var(--s-075);
}
.side .foot button:hover{background:var(--rail-2);border-color:rgb(255 255 255 / .22);color:#fff}

.main{padding:var(--s-3) var(--s-4) var(--s-8);max-width:1480px;min-width:0}

/* page header with the arc rule under the title */
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-2);
  margin-bottom:var(--s-3);flex-wrap:wrap;padding-bottom:var(--s-2);position:relative}
.topbar::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--rule)}
.topbar h1{position:relative;padding-bottom:var(--s-075)}
.topbar h1::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:46px;height:3px;
  border-radius:3px;background:var(--arc-sweep)}
.topbar .actions{display:flex;gap:var(--s-1);flex-wrap:wrap}
.topbar small{display:block;margin-top:var(--s-075)}

/* ---- record detail header ----
   The arc accent above is absolutely positioned to the h1's leading edge. On a
   detail page the h1 sits beside an avatar, so that accent landed underneath
   the avatar instead of under the title. Detail pages get their own header
   where the identity block is a real row and the accent is not used at all. */
.rechead{align-items:center}
.rechead h1::after{display:none}
.rechead h1{padding-bottom:0}
.rechead .who{min-width:0}
.rechead .back{display:inline-block;margin-bottom:var(--s-1)}
.rechead .idrow{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.rechead .idtx{min-width:0;display:flex;flex-direction:column;gap:var(--s-075)}
.rechead .idtx h1{font-size:24px;line-height:30px}
.rechead .idtx .meta{font-size:12.5px;line-height:18px;color:var(--tx-3)}
.rechead .tile.lg{width:48px;height:48px;font-size:17px;border-radius:26%}
@media (max-width:640px){
  .rechead .idrow{gap:var(--s-15)}
  .rechead .tile.lg{width:40px;height:40px;font-size:14px}
  .rechead .idtx h1{font-size:20px;line-height:26px}
}

@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;bottom:0;top:auto;height:auto;width:100%;padding:0;z-index:30;
    border:0;border-top:1px solid var(--rail-line)}
  .brand,.side .foot{display:none}
  .nav{flex-direction:row;width:100%;overflow-x:auto;padding:var(--s-05);gap:0;scrollbar-width:none;margin:0}
  .nav::-webkit-scrollbar{display:none}
  .nav .grp{display:none}
  .nav a{flex-direction:column;justify-content:center;gap:2px;font-size:10px;height:46px;min-width:64px;
    padding:0 var(--s-075);white-space:nowrap}
  .nav a.active::before{inset-inline-start:50%;transform:translateX(-50%);top:0;bottom:auto;
    width:22px;height:3px;border-radius:0 0 3px 3px}
  .main{padding:var(--s-2) var(--s-2) 80px}
  h1{font-size:19px;line-height:25px}
}

/* ============================================================ cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s-2) var(--s-25);box-shadow:var(--sh-xs)}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.grid{display:grid;gap:var(--s-15)}
.grid.kpi{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
/* auto-fit would give three columns on a wide screen and leave the fourth card
   stranded beside a hole. Two columns, always, so an even number of cards is
   always balanced. */
.grid.two{grid-template-columns:1fr;align-items:start}
@media (min-width:940px){.grid.two{grid-template-columns:1fr 1fr}}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:start}

/* ---- KPI: label, delta, number pushed to the bottom, sparkline, target bar ---- */
.kpi .card{padding:var(--s-15) var(--s-2) 0;border-radius:var(--r-lg);display:flex;
  flex-direction:column;min-height:126px;overflow:hidden;position:relative}
.kpi a.card{text-decoration:none;color:inherit;transition:border-color var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease)}
.kpi a.card:hover{border-color:var(--line-2);box-shadow:var(--sh-sm);text-decoration:none;transition:none}
.kpi .l{font-size:11.5px;line-height:16px;color:var(--tx-3);font-weight:500;letter-spacing:.01em}
.kpi .delta{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;margin-top:3px;min-height:16px}
.kpi .delta svg{flex:none}
.kpi .delta[data-tone="up"]{color:var(--ok-tx)}
.kpi .delta[data-tone="down"]{color:var(--bad-tx)}
.kpi .delta[data-tone="flat"]{color:var(--tx-4)}
.kpi .n{font-size:30px;line-height:34px;font-weight:600;letter-spacing:-.025em;
  font-variant-numeric:var(--tnum);margin-block-start:auto;padding-bottom:var(--s-1)}
.kpi .n .unit{font-size:15px;font-weight:500;color:var(--tx-3);letter-spacing:0}
/* The chart strip and the target bar are always present, empty or not, so the
   numbers across a row of KPIs share one baseline. */
.kpi .foot{height:30px;margin:0 calc(var(--s-2) * -1)}
.kpi .spark{display:block;width:100%;height:30px}
.kpi .bar{height:3px;background:var(--rule);margin:0 calc(var(--s-2) * -1)}
.kpi .bar:empty{background:transparent}
.kpi .bar i{display:block;height:100%;background:var(--tone,var(--acc))}
.kpi .card.bad{--tone:var(--bad)} .kpi .card.bad .n{color:var(--bad-tx)}
.kpi .card.warn{--tone:var(--warn)} .kpi .card.warn .n{color:var(--warn-tx)}
.kpi .card.ok{--tone:var(--ok)} .kpi .card.ok .n{color:var(--ok-tx)}
.kpi .card.acc{--tone:var(--acc)} .kpi .card.acc .n{color:var(--acc-tx)}

.list{display:flex;flex-direction:column}
.row{display:flex;gap:var(--s-15);align-items:flex-start;justify-content:space-between;
  padding:var(--s-1) 0;border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:0;padding-bottom:0}
.row .t{font-weight:500}
.row .s{font-size:12.5px;line-height:18px;color:var(--tx-3)}

/* ============================================ identity tiles (monograms) */
/* A 60 row list is unreadable as plain text. A coloured monogram per record
   gives the eye something to aim at, and the hue is hashed off the record id
   so it never changes when a name is edited. */
.ident{display:flex;align-items:center;gap:var(--s-1);min-width:0}
.tile{
  width:24px;height:24px;flex:none;border-radius:30%;
  display:grid;place-items:center;
  font-family:var(--f-brand);font-weight:700;font-size:9.5px;letter-spacing:.02em;
  color:#fff;text-transform:uppercase;user-select:none;
  box-shadow:inset 0 0 0 1px rgb(13 11 18 / .10);
  background:var(--tile,var(--n-500));
}
.tile.lg{width:38px;height:38px;font-size:14px}
.tile.round{border-radius:var(--r-full)}
/* The name and the place underneath it are two lines, not one run-on string,
   so both need display:block. Inline spans would sit side by side and read as
   "Airport International GroupAmman". */
.ident>.tx{min-width:0;display:block}
.ident .nm{display:block;font-family:var(--f-brand);font-weight:500;font-size:13px;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
tr.click:hover .ident .nm{text-decoration:underline;text-underline-offset:2px}
.ident .sub{display:block;font-size:11.5px;color:var(--tx-4);line-height:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* cap the name column so one long legal name cannot squeeze every other column */
td>.ident{max-width:var(--ident-w,330px)}

/* ============================================ arcs, the brand data device */
.arc{display:block;flex:none}
.arc circle{fill:none;stroke-linecap:round}
.arc .track{stroke:var(--rule)}
.arc .val{stroke:var(--tone,var(--acc));transition:stroke-dashoffset var(--d-4) var(--ease-out)}
.arcwrap{position:relative;display:grid;place-items:center}
.arcwrap .mid{position:absolute;font-size:11px;font-weight:600;font-variant-numeric:var(--tnum)}

/* ---- segmented stage bar: the five arcs of the mark, laid flat ---- */
.stagebar{display:flex;gap:2px;height:8px;border-radius:6px;overflow:hidden;background:var(--rule)}
.stagebar i{display:block;height:100%;min-width:2px;transition:flex-grow var(--d-4) var(--ease-out)}
.stagebar i:nth-child(1){background:var(--stage-1)}
.stagebar i:nth-child(2){background:var(--stage-2)}
.stagebar i:nth-child(3){background:var(--stage-3)}
.stagebar i:nth-child(4){background:var(--stage-4)}
.stagebar i:nth-child(5){background:var(--stage-5)}
.stagekey{display:flex;flex-wrap:wrap;gap:var(--s-05) var(--s-15);margin-top:var(--s-1);font-size:11.5px;color:var(--tx-3)}
.stagekey span{display:inline-flex;align-items:center;gap:5px}
.stagekey i{width:8px;height:8px;border-radius:2px;display:inline-block}

/* ============================================================ tables */
.wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
  box-shadow:var(--sh-xs)}
.wrap>table{border:0;border-radius:0;box-shadow:none}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
th,td{text-align:start;padding:var(--s-1) var(--s-15);border-bottom:1px solid var(--rule);vertical-align:middle}
th{
  background:var(--surface);position:sticky;top:0;z-index:2;
  font-weight:500;font-size:11px;line-height:16px;letter-spacing:.055em;color:var(--tx-4);
  text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--line);
  padding-top:var(--s-075);padding-bottom:var(--s-075);
}
tbody tr:last-child td,tr:last-child td{border-bottom:0}
tr.click{cursor:pointer}
tr.click td{transition:background-color var(--d-3) var(--ease)}
tr.click:hover td{background:var(--hover);transition:none}
.num{text-align:end;font-variant-numeric:var(--tnum);white-space:nowrap}
/* short categorical values keep to one line: two-line cells make every row in
   the list a different height, and a ragged list is slower to scan */
td.nw,th.nw{white-space:nowrap}
/* a long cell fades out rather than ending in an ellipsis */
.fade{max-width:var(--fade-w,340px);white-space:nowrap;overflow:hidden;
  mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
[dir="rtl"] .fade{mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent);
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)}

/* ==================================================== account records */
/* A record, not a table row. The signal runs the full width of the card
   because it is the reason the account is in the list at all. */
.tgroup{margin-bottom:var(--s-4)}
.tgroup>header{display:flex;align-items:baseline;gap:var(--s-1);margin-bottom:var(--s-15);
  padding-bottom:var(--s-1);border-bottom:1px solid var(--rule);flex-wrap:wrap}
.tgroup>header h2{margin:0;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  font-family:var(--f-brand);font-weight:700;color:var(--tx-2)}
.tgroup>header .ct{font-size:11.5px;font-weight:600;line-height:19px;padding:0 var(--s-075);
  border-radius:var(--r-full);background:var(--tier,var(--n-500));color:#fff;font-variant-numeric:var(--tnum)}
.tgroup>header small{color:var(--tx-4);margin-inline-start:auto;text-align:end}
.tgroup[data-tier="A"]{--tier:var(--arc-coral)}
.tgroup[data-tier="B"]{--tier:var(--arc-yellow)}
.tgroup[data-tier="C"]{--tier:var(--arc-teal)}

.recs{display:flex;flex-direction:column;gap:var(--s-1)}
.rec{
  display:flex;gap:var(--s-15);align-items:flex-start;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-15) var(--s-2);position:relative;overflow:hidden;
  box-shadow:var(--sh-xs);
  transition:border-color var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease),
             transform var(--d-2) var(--ease);
}
/* the tier stripe, drawn rather than bordered so the radius stays clean */
.rec::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:var(--tier,transparent)}
.rec[data-tier="A"]{--tier:var(--arc-coral)}
.rec[data-tier="B"]{--tier:var(--arc-yellow)}
.rec[data-tier="C"]{--tier:var(--arc-teal)}
.rec:hover{border-color:var(--line-2);box-shadow:var(--sh-sm);text-decoration:none}
.rec:active{transform:translateY(1px)}
.rec>.bd{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.rec .hd{display:flex;align-items:baseline;gap:var(--s-1);flex-wrap:wrap;min-width:0}
.rec .nm{font-family:var(--f-brand);font-weight:600;font-size:14px;letter-spacing:-.01em;
  color:var(--tx-1)}
.rec:hover .nm{text-decoration:underline;text-underline-offset:2px}
.rec .loc{font-size:12px;color:var(--tx-4)}
/* the signal: full width, up to three lines, then clipped honestly */
.rec .sig{font-size:13px;line-height:20px;color:var(--tx-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rec .sig.none{color:var(--tx-4);font-style:italic}
.rec .ft{display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap;
  font-size:11.5px;color:var(--tx-4)}
.rec .ft>span+span::before{content:"·";margin-inline-end:var(--s-1);color:var(--line-2)}
/* three bars on their own say nothing. The word goes next to them. */
.rec .ft .conf{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto}
.rec .ft .conf::before{display:none}
.fcount{font-size:12px;color:var(--tx-4);align-self:center;margin-inline-start:auto;
  white-space:nowrap}

/* a list row that is itself a link */
.row.lk{text-decoration:none;color:inherit;border-radius:var(--r-md);
  transition:background-color var(--d-2) var(--ease)}
.row.lk:hover{background:var(--hover);text-decoration:none}
.row.lk:hover .t{text-decoration:underline;text-underline-offset:2px}
/* two lines then stop, for a summary line inside a narrow card */
.fade2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* On a phone nothing may be pushed to a far edge, because there is no far edge
   to push to. Everything that used margin-inline-start:auto stacks instead. */
@media (max-width:640px){
  .tgroup>header small{margin-inline-start:0;width:100%;text-align:start;order:3}
  .rec{padding:var(--s-15);gap:var(--s-1)}
  .rec .sig{-webkit-line-clamp:4}
  .rec .ft .conf{margin-inline-start:0}
  .rec .ft .conf::before{content:"·";margin-inline-end:var(--s-1);color:var(--line-2);display:inline}
  .fcount{margin-inline-start:0;width:100%}
  .filters input,.filters select{min-width:0;flex:1 1 140px}
}

/* ------------------------------ a proposal awaiting a decision ---- */
.rec.prop{--tier:var(--arc-purple);align-items:center}
.rec.prop .acts{display:flex;gap:var(--s-075);flex:none}
/* the before and after, so the decision does not need remembering */
.diff,.diffbox{display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap;font-size:13px}
.diff .was,.diffbox .was{color:var(--tx-4);text-decoration:line-through;
  text-decoration-color:var(--bad);text-decoration-thickness:1px}
.diff .arr{color:var(--tx-4)}
.diff .now,.diffbox .now{font-weight:600;color:var(--ok-tx);
  background:var(--ok-bg);border-radius:var(--r-sm);padding:1px var(--s-075)}
.diffbox{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-1) var(--s-15);margin:var(--s-1) 0}
/* activity and memory */
.rec.mem{--tier:var(--arc-teal);align-items:center}
.rec.mem .acts{display:flex;gap:var(--s-075);flex:none}
table.audit td{vertical-align:top}
.mbank{display:flex;flex-direction:column;gap:var(--s-075)}
.mfile{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.mfile summary{display:flex;align-items:center;gap:var(--s-15);padding:var(--s-1) var(--s-15);cursor:pointer;list-style:none}
.mfile summary::-webkit-details-marker{display:none}
.mfile summary code{font-weight:600}
.mfile summary .ah:last-child{margin-inline-start:auto;white-space:nowrap}
.mfile .acode{margin:0;border:0;border-top:1px solid var(--line);border-radius:0 0 var(--r-md) var(--r-md);max-height:420px}
.mrefl{display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap;padding-top:var(--s-05)}

/* a whole proposed record: every field readable before it exists */
.recdl{display:grid;grid-template-columns:max-content 1fr;gap:var(--s-05) var(--s-15);font-size:13px;margin:var(--s-05) 0;
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-1) var(--s-15);max-width:720px}
.recdl dt{color:var(--tx-4);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding-top:2px;white-space:nowrap}
.recdl dd{margin:0;overflow-wrap:anywhere}
.recdl dd i{color:var(--tx-4)}
.rec.prop .recdl{width:100%}
@media (max-width:640px){
  .rec.prop{align-items:flex-start;flex-wrap:wrap}
  .rec.prop .acts{width:100%;margin-top:var(--s-1)}
  .rec.prop .acts button{flex:1}
}

/* ============================================================ agent */
/* A terminal that belongs to this app: same surfaces, same lines, monospace
   only where the content is actually code. The permission card is the most
   important thing on the page, so it gets the arc sweep and the loudest edge. */
.agrid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s-2);align-items:start}
@media (max-width:940px){.agrid{grid-template-columns:1fr}}
.aside h3{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-4);
  margin:var(--s-2) 0 var(--s-075);font-family:var(--f-brand);font-weight:700}
.aside h3:first-child{margin-top:0}
.acards{display:flex;flex-direction:column;gap:var(--s-075)}
.acard{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"r n" "r s" "r v" "r b";
  gap:2px var(--s-1);align-items:center;padding:var(--s-1) var(--s-15);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--d-2) var(--ease)}
.acard:hover{border-color:var(--line-2)}
.acard.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.acard input{grid-area:r;margin:0}
.acard .an{grid-area:n;font-weight:600;font-size:13.5px}
.acard .as{grid-area:s;font-size:12px;color:var(--tx-3);display:flex;align-items:center;gap:6px}
.acard .av{grid-area:v;font-size:11px;color:var(--tx-4);font-family:var(--f-mono)}
.acard button,.acard .ah{grid-area:b;margin-top:var(--s-05);justify-self:start}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--n-500)}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)}
.alist{margin:0;padding-inline-start:var(--s-2);font-size:12.5px;color:var(--tx-3);line-height:1.5}
.alist li{margin-bottom:3px}
.asugg{display:flex;flex-direction:column;gap:var(--s-05)}
.asugg button{text-align:start;white-space:normal;height:auto;padding:var(--s-075) var(--s-1);line-height:1.35}
.ah{font-size:11.5px;color:var(--tx-4)}

.aterm{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  display:flex;flex-direction:column;min-height:560px;max-height:calc(100vh - 200px);overflow:hidden;
  box-shadow:var(--sh-xs);position:relative}
.aterm::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--arc-sweep);opacity:.8}
.alog{flex:1;overflow:auto;padding:var(--s-2) var(--s-25);display:flex;flex-direction:column;gap:var(--s-15);
  scrollbar-width:thin;outline:none}
/* the jump pill: shows when Ahmad has scrolled up, or paused the stream */
.ajump{position:absolute;inset-inline-end:var(--s-2);bottom:92px;z-index:2;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;background:var(--n-900);color:#fff;border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:6px 12px;box-shadow:var(--sh-md);cursor:pointer;height:auto}
.ajump:hover{background:var(--n-800)}
/* pace controls in the strip */
.apace{display:inline-flex;gap:2px;margin-inline-start:var(--s-1)}
.apbtn{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;height:22px;padding:0 8px;
  border:1px solid var(--line);background:var(--surface);color:var(--tx-4);border-radius:4px;cursor:pointer}
.apbtn.on{background:var(--n-900);color:#fff;border-color:var(--n-900)}
.apbtn[data-agent="pause"].on{background:var(--arc-yellow);color:var(--n-900);border-color:var(--arc-yellow)}
.al{display:flex;flex-direction:column;gap:4px;max-width:100%}
.al .who{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-4);
  font-family:var(--f-brand);font-weight:700}
.al.user .who{color:var(--acc-tx)}
.al .tx{font-size:13.5px;line-height:1.55;color:var(--tx-1);overflow-wrap:anywhere}
.al.user .tx{background:var(--acc-bg);border:1px solid var(--acc-line);border-radius:var(--r-lg);
  padding:var(--s-1) var(--s-15);align-self:flex-start;max-width:min(720px,100%)}
.al.meta{font-size:11.5px;color:var(--tx-4);font-family:var(--f-mono)}
.al.err{font-size:12.5px;color:var(--bad-tx);background:var(--bad-bg);border:1px solid var(--bad-line);
  border-radius:var(--r-md);padding:var(--s-075) var(--s-1);font-family:var(--f-mono)}
.al.tool{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:var(--s-1);
  font-size:12px;color:var(--tx-3);padding-inline-start:var(--s-1);
  border-inline-start:2px solid var(--line-2)}
.al.tool .tn{font-weight:600;color:var(--tx-2)}
.al.tool .ts{font-family:var(--f-mono);font-size:11.5px;overflow-wrap:anywhere}
.al.tool .out{width:100%}
.md p{margin:0 0 var(--s-075)} .md p:last-child{margin-bottom:0}
.md ul,.md ol{margin:0 0 var(--s-075);padding-inline-start:var(--s-25)}
.md li{margin:2px 0} .md li>ul,.md li>ol{margin:2px 0 0}
.md .mdh{font-family:var(--f-brand);font-weight:700;letter-spacing:.02em;margin:var(--s-15) 0 var(--s-05);line-height:1.3;color:var(--tx-1)}
.md h3.mdh{font-size:15px} .md h4.mdh{font-size:13.5px} .md h5.mdh,.md h6.mdh{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-3)}
.md .mdh:first-child{margin-top:0}
.md .mdhr{border:0;border-top:1px solid var(--line);margin:var(--s-15) 0}
.md .mdq{margin:var(--s-075) 0;padding:var(--s-05) var(--s-15);border-inline-start:3px solid var(--arc-purple);color:var(--tx-2);background:var(--sunken);border-radius:0 var(--r-sm) var(--r-sm) 0}
.md a{color:var(--acc-tx);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--acc) 40%,transparent);overflow-wrap:anywhere}
/* tables: the agent's lists of prospects and comparisons, aligned */
.mdtw{overflow-x:auto;margin:var(--s-075) 0 var(--s-1);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.mdt{border-collapse:collapse;width:100%;font-size:12.5px;line-height:1.4}
.mdt th,.mdt td{padding:7px 10px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line);min-width:80px}
.mdt th{font-family:var(--f-brand);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-4);
  background:var(--sunken);white-space:nowrap;position:sticky;top:0}
.mdt tbody tr:last-child td{border-bottom:0}
.mdt tbody tr:hover td{background:color-mix(in srgb,var(--acc) 5%,transparent)}
.mdt td:first-child{font-weight:600;color:var(--tx-1)}
.mdt code{white-space:nowrap}
.md code{font-family:var(--f-mono);font-size:12px;background:var(--sunken);border:1px solid var(--line);
  border-radius:4px;padding:0 4px}
.acode{font-family:var(--f-mono);font-size:12px;line-height:1.5;background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-1) var(--s-15);
  margin:var(--s-05) 0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;color:var(--tx-2)}
.caret{display:inline-block;width:7px;height:14px;background:var(--acc);vertical-align:-2px;margin-inline-start:2px;
  animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- the signal strip: four live lights in the arc colours ---- */
.astrip{display:flex;align-items:center;gap:var(--s-15);padding:var(--s-1) var(--s-2);
  border-bottom:1px solid var(--line);background:var(--sunken);font-family:var(--f-mono);font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--tx-4)}
.sg{display:inline-flex;align-items:center;gap:6px}
.sg i{width:8px;height:8px;border-radius:50%;background:var(--sg);opacity:.25;flex:none;
  transition:opacity var(--d-3) var(--ease),box-shadow var(--d-3) var(--ease)}
.sg.on i{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--sg) 22%,transparent)}
.sg.on{color:var(--tx-2)}
.sg.wait i{opacity:.7;animation:sgpulse 1.4s ease-in-out infinite}
.sg.busy i{opacity:1;animation:sgpulse .7s ease-in-out infinite;box-shadow:0 0 0 3px color-mix(in srgb,var(--sg) 30%,transparent)}
@keyframes sgpulse{50%{opacity:.25}}
.sgfill{flex:1}
.athink{display:inline-flex;align-items:center;gap:6px;color:var(--tx-3);text-transform:none;letter-spacing:0}

/* ---- the mark: five arcs. Spins while thinking. ---- */
.amark{display:inline-block;vertical-align:middle;flex:none}
.amark.spin{animation:markspin 1.6s linear infinite}
@keyframes markspin{to{transform:rotate(360deg)}}
.amark path{transform-origin:center}
/* while the terminal is busy the top edge sweeps, like a scanner */
.aterm.busy::before{background:linear-gradient(90deg,transparent,var(--arc-yellow),var(--arc-green),var(--arc-teal),var(--arc-purple),var(--arc-coral),transparent);
  background-size:50% 100%;animation:sweep 1.4s linear infinite;opacity:1}
@keyframes sweep{from{background-position:-50% 0}to{background-position:150% 0}}

/* ---- empty state with the mark ---- */
.aempty{margin:auto;text-align:center;padding:var(--s-6) var(--s-2);color:var(--tx-4)}
.aempty .ae1{font-family:var(--f-brand);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:12px;color:var(--tx-3);margin-top:var(--s-15)}
.aempty .ae2{font-size:13px;margin-top:var(--s-05);max-width:420px;margin-inline:auto}
.al.meta .amark{margin-inline-end:6px}

/* ---- tool lines and permission cards carry their arc colour ---- */
.al.tool{border-inline-start-color:var(--arc,var(--line-2))}
.tk{font-family:var(--f-brand);font-weight:700;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--arc,var(--tx-4));background:color-mix(in srgb,var(--arc,var(--n-500)) 14%,transparent);
  border-radius:4px;padding:2px 6px;flex:none}
.al.perm{border-color:color-mix(in srgb,var(--arc,var(--warn)) 45%,var(--line))}
.al.perm::before{background:var(--arc,var(--warn))}
.al.perm.ask{box-shadow:0 0 0 1px color-mix(in srgb,var(--arc,var(--warn)) 30%,transparent),0 8px 28px -12px color-mix(in srgb,var(--arc,var(--warn)) 60%,transparent);
  animation:askglow 2s ease-in-out infinite}
@keyframes askglow{50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--arc,var(--warn)) 60%,transparent),0 8px 28px -8px color-mix(in srgb,var(--arc,var(--warn)) 80%,transparent)}}
.al.perm.ok{border-color:var(--ok-line);animation:none} .al.perm.ok::before{background:var(--ok)}
.al.perm.no{border-color:var(--line);opacity:.65;animation:none} .al.perm.no::before{background:var(--n-500)}

/* ---- collaborate mode: phase markers, the reviewer's card, who said what ---- */
.al .who.eng-codex{color:var(--arc-coral)} .al .who.eng-claude{color:var(--arc-purple)} .al .who.eng-both{color:var(--arc-green)}
.al.phase{flex-direction:row;align-items:center;gap:var(--s-1);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx-3);padding:var(--s-05) 0;--arc:var(--arc-purple)}
.al.phase.eng-codex{--arc:var(--arc-coral)} .al.phase.eng-both{--arc:var(--arc-green)}
.al.phase i{width:10px;height:10px;border-radius:50%;background:var(--arc);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--arc) 22%,transparent)}
.al.phase::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--arc) 40%,transparent),transparent)}
.al.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-15) var(--s-2);gap:var(--s-1);
  border-inline-start:3px solid var(--arc-coral)}
.al.review.pass{border-inline-start-color:var(--ok)} .al.review.unverifiable{border-inline-start-color:var(--warn)}
.al.review .rh{display:flex;align-items:center;gap:var(--s-1)}
.al.review .rv{font-family:var(--f-brand);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:4px;
  background:var(--bad-bg);color:var(--bad-tx)}
.al.review.pass .rv{background:var(--ok-bg);color:var(--ok-tx)} .al.review.unverifiable .rv{background:var(--warn-bg);color:var(--warn-tx)}
.rfind{margin:0;padding-inline-start:0;list-style:none;display:flex;flex-direction:column;gap:var(--s-075);font-size:13px}
.rfind li{padding:var(--s-075) var(--s-1);background:var(--sunken);border-radius:var(--r-md);border:1px solid var(--line)}
.rfind .rsev{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:3px;margin-inline-end:6px;
  background:var(--line);color:var(--tx-3)}
.rfind .rsev.high{background:var(--bad-bg);color:var(--bad-tx)} .rfind .rsev.medium{background:var(--warn-bg);color:var(--warn-tx)}
.rfind .rfix{margin-top:4px;color:var(--tx-3);font-size:12.5px}
.rchecks{font-size:12px;color:var(--tx-4)} .rchecks summary{cursor:pointer} .rchecks ul{margin:var(--s-05) 0 0;padding-inline-start:var(--s-2)}
.acard.both .ah{display:block;margin-top:4px}

/* ---- engine card carries its engine colour ---- */
.acard.on{border-color:var(--eng,var(--acc));box-shadow:0 0 0 1px var(--eng,var(--acc)) inset}
.acard .an::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--eng,var(--acc));margin-inline-end:7px;vertical-align:0}
.dot.on{background:var(--ok)} .dot.wait{background:var(--warn);animation:sgpulse 1.4s ease-in-out infinite} .dot.off{background:var(--n-500)}

/* ---- connections ---- */
.aconns{display:flex;flex-direction:column;gap:var(--s-05);margin-bottom:var(--s-075)}
.aconn{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n a" "t a";gap:1px var(--s-1);align-items:center;
  padding:var(--s-075) var(--s-1);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  border-inline-start:3px solid var(--arc-green)}
.aconn.off{opacity:.55;border-inline-start-color:var(--n-500)}
.aconn .cn{grid-area:n;font-weight:600;font-size:12.5px}
.aconn .ct{grid-area:t;font-family:var(--f-mono);font-size:10.5px;color:var(--tx-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.aconn .ca{grid-area:a;display:flex;gap:3px;justify-self:end}
.atog{display:flex;align-items:center;gap:var(--s-075);font-size:12.5px;color:var(--tx-2)}
.alegend{display:flex;flex-wrap:wrap;gap:var(--s-075) var(--s-1);font-size:11px;color:var(--tx-4);font-family:var(--f-mono)}
.alegend span{display:inline-flex;align-items:center;gap:5px}
.alegend i{width:8px;height:8px;border-radius:2px;background:var(--arc)}

/* the permission card */
.al.perm{background:var(--surface);border:1px solid var(--warn-line);border-radius:var(--r-lg);
  padding:var(--s-15) var(--s-2);position:relative;overflow:hidden;gap:var(--s-1)}
.al.perm::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--warn)}
.al.perm.ok{border-color:var(--ok-line)} .al.perm.ok::before{background:var(--ok)}
.al.perm.no{border-color:var(--line);opacity:.7} .al.perm.no::before{background:var(--n-500)}
.al.perm .ph{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1)}
.al.perm .tn{font-weight:700;font-size:13px}
.al.perm .ts{font-family:var(--f-mono);font-size:12px;color:var(--tx-3);overflow-wrap:anywhere}
.al.perm .pa{display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap}
.adiff{display:grid;gap:4px;font-family:var(--f-mono);font-size:12px;line-height:1.5}
.adiff>div{white-space:pre-wrap;overflow-wrap:anywhere;border-radius:var(--r-sm);padding:var(--s-075) var(--s-1);
  max-height:220px;overflow:auto}
.adiff .was{background:var(--bad-bg);color:var(--bad-tx);text-decoration:line-through;text-decoration-thickness:1px}
.adiff .now{background:var(--ok-bg);color:var(--ok-tx)}

.ain{display:flex;gap:var(--s-1);padding:var(--s-15) var(--s-2);border-top:1px solid var(--line);
  background:var(--sunken);align-items:flex-end}
.ain textarea{flex:1;resize:none;min-height:44px;max-height:180px;font-size:13.5px;line-height:1.45}
.ain button{height:44px;flex:none}

/* ============================================================ badges */
/* Two primitives, not one. A state you read, and a value you could remove. */
.badge{
  display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 var(--s-1);
  border-radius:var(--r-full);font-size:11.5px;font-weight:400;white-space:nowrap;
  background:color-mix(in srgb,var(--bc,var(--n-500)) 12%,transparent);
  color:var(--bfg,var(--tx-2));vertical-align:middle;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bc,var(--n-500));flex:none}
.badge.nodot::before{display:none}
.badge.est,.badge.pending,.badge.discuss,.badge.watch{--bc:var(--warn);--bfg:var(--warn-tx)}
.badge.conf,.badge.go,.badge.approved,.badge.Confirmed{--bc:var(--ok);--bfg:var(--ok-tx)}
.badge.no_bid,.badge.Lost{--bc:var(--bad);--bfg:var(--bad-tx)}
.badge.Likely,.badge.info{--bc:var(--info);--bfg:var(--info-tx)}
.badge.radar,.badge.acc{--bc:var(--acc);--bfg:var(--acc-tx)}
.badge.Unverified,.badge.retired{--bc:var(--n-500);--bfg:var(--tx-3)}
/* a tag is a value, not a state: square, solid, no dot */
.tag{display:inline-flex;align-items:center;height:19px;padding:0 6px;border-radius:var(--r-xs);
  font-size:11px;font-weight:500;background:var(--sunken);color:var(--tx-2);
  border:1px solid var(--line);white-space:nowrap}
.tag.a{background:var(--acc);color:#fff;border-color:transparent}
.tag.b{background:var(--acc-bg-2);color:var(--acc-tx);border-color:var(--acc-line)}
.due-bad{color:var(--bad-tx);font-weight:600}
.due-warn{color:var(--warn-tx);font-weight:600}
.chip{display:inline-block;font-size:11.5px;padding:2px var(--s-1);border-radius:var(--r-full);
  border:1px solid var(--line);margin:2px 2px 2px 0;background:var(--surface)}
.stars{color:var(--arc-yellow);letter-spacing:1px}

/* a three segment confidence meter reads faster than a word */
.meter{display:inline-flex;gap:2px;vertical-align:middle}
.meter i{width:5px;height:11px;border-radius:1.5px;background:var(--rule)}
.meter[data-level="3"] i:nth-child(-n+3),
.meter[data-level="2"] i:nth-child(-n+2),
.meter[data-level="1"] i:nth-child(-n+1){background:var(--mc,var(--acc))}

/* ============================================================ kanban */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(214px,1fr));gap:var(--s-1);
  overflow-x:auto;padding-bottom:var(--s-1);align-items:start}
.col{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s-1);min-height:120px}
.col>h3{margin:var(--s-05) var(--s-05) var(--s-1);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.055em;color:var(--tx-3);display:flex;justify-content:space-between;align-items:center;gap:var(--s-1)}
.col>h3 b{font-weight:600;color:var(--tx-2);font-variant-numeric:var(--tnum)}
.col .head{margin:var(--s-05) var(--s-05) var(--s-15)}
.col .head .cap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-1);margin-bottom:6px}
.col .head .nm{font-size:11.5px;text-transform:uppercase;letter-spacing:.055em;color:var(--tx-3);font-weight:600}
.col .head .ct{font-size:11.5px;color:var(--tx-4);font-variant-numeric:var(--tnum)}
.col .head .vl{font-size:12.5px;font-weight:600;font-variant-numeric:var(--tnum);color:var(--tx-2)}
.col .head .sb{height:3px;border-radius:3px;background:var(--stage,var(--acc));opacity:.85}
.kcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-1) var(--s-15);margin-bottom:var(--s-1);cursor:pointer;font-size:12.5px;
  box-shadow:var(--sh-xs);position:relative;
  transition:border-color var(--d-3) var(--ease),box-shadow var(--d-3) var(--ease);
}
.kcard:hover{border-color:var(--line-2);box-shadow:var(--sh-sm);transition:none}
.kcard.risk{box-shadow:inset 3px 0 0 0 var(--bad),var(--sh-xs)}
[dir="rtl"] .kcard.risk{box-shadow:inset -3px 0 0 0 var(--bad),var(--sh-xs)}
.kcard .a{color:var(--tx-4);font-size:11.5px}
.kcard .v{margin-top:var(--s-075);display:flex;justify-content:space-between;align-items:center;gap:var(--s-05)}
.kcard .age{font-size:11px;color:var(--tx-4);font-variant-numeric:var(--tnum)}
.kcard .age[data-heat="warm"]{color:var(--warn-tx);font-weight:600}
.kcard .age[data-heat="hot"]{color:var(--bad-tx);font-weight:600}

/* ============================================================ tender card */
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s-2);margin-bottom:var(--s-15);box-shadow:var(--sh-xs);position:relative;overflow:hidden}
.tcard::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--acc)}
.tcard.gcc::before{background:var(--arc-teal)}
.tcard .head{display:flex;justify-content:space-between;gap:var(--s-15);flex-wrap:wrap;align-items:flex-start}
.tcard .meta{font-size:12px;color:var(--tx-3);margin:var(--s-075) 0 var(--s-1);display:flex;gap:var(--s-15);flex-wrap:wrap}
.tcard .kill{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-tx);
  border-radius:var(--r-md);padding:var(--s-075) var(--s-15);font-size:12.5px;margin:var(--s-1) 0}
.tcard .btns{display:flex;gap:var(--s-075);flex-wrap:wrap;margin-top:var(--s-15);align-items:center}

/* ============================================================ score */
.score{display:grid;gap:var(--s-15)}
.score .c{display:grid;grid-template-columns:1fr 44px;gap:var(--s-1);align-items:center}
.score .c .lbl{font-weight:600}
.score .c .hint{font-size:11.5px;color:var(--tx-3);line-height:16px}
.score input[type=range]{width:100%;accent-color:var(--acc)}
.score .total{font-size:26px;font-weight:600;font-variant-numeric:var(--tnum)}

/* ============================================================ controls */
button,.btn{
  font:inherit;font-size:12.5px;font-weight:500;height:var(--ctrl-h);display:inline-flex;
  align-items:center;justify-content:center;gap:6px;border-radius:var(--r-md);
  border:1px solid var(--line-2);background:var(--surface);color:var(--tx);padding:0 var(--s-15);
  cursor:pointer;white-space:nowrap;text-decoration:none;box-shadow:var(--sh-xs);
  transition:background-color var(--d-2) var(--ease),border-color var(--d-2) var(--ease),color var(--d-2) var(--ease);
}
button:hover,.btn:hover{background:var(--hover);border-color:var(--line-strong);text-decoration:none;transition:none}
button:active{background:var(--active)}
button.primary{background:var(--acc);color:var(--on-accent);border-color:transparent}
button.primary:hover{background:var(--acc-hover);border-color:transparent}
button.ok{background:var(--ok);color:#fff;border-color:transparent}
button.bad{background:var(--surface);color:var(--bad-tx);border-color:var(--bad-line)}
button.bad:hover{background:var(--bad-bg);border-color:var(--bad)}
button.warn{background:var(--surface);color:var(--warn-tx);border-color:var(--warn-line)}
button.warn:hover{background:var(--warn-bg)}
button.sm,.btn.sm{height:var(--ctrl-h-sm);font-size:11.5px;padding:0 var(--s-1);gap:4px}
button.link{border:0;background:none;color:var(--acc-tx);padding:0;height:auto;font-weight:500;box-shadow:none}
button.link:hover{background:none;text-decoration:underline}
button:disabled{opacity:.45;cursor:default}

input,select,textarea{
  font:inherit;font-size:13px;border:1px solid var(--line-ctrl);border-radius:var(--r-md);
  padding:0 var(--s-1);height:var(--ctrl-h);background:var(--surface);color:var(--tx);width:100%;
  transition:border-color var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease);
}
textarea{min-height:74px;resize:vertical;padding:var(--s-075) var(--s-1);height:auto;line-height:19px}
select{appearance:none;padding-inline-end:var(--s-3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236F6880' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-1) center}
[dir="rtl"] select{background-position:left var(--s-1) center}
input::placeholder,textarea::placeholder{color:var(--tx-4)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-bg-2)}
input:disabled,select:disabled,textarea:disabled{background:var(--sunken);color:var(--tx-dis);cursor:not-allowed}
input[type=checkbox]{width:auto;height:auto;accent-color:var(--acc)}
label{display:block;font-size:11.5px;line-height:16px;color:var(--tx-2);font-weight:600;margin-bottom:var(--s-05)}
.f{margin-bottom:var(--s-15)}
.f .hint{display:block;font-size:11px;line-height:15px;color:var(--tx-3);font-weight:400;margin-top:1px}
.check-field{display:flex;align-items:center;gap:10px;min-width:0}
.check-field input[type=checkbox]{width:18px;height:18px;flex:none;margin:0}
.check-label{display:flex;align-items:center;min-height:40px;margin:0;padding-block:8px;color:var(--tx-2);font-size:12.5px;line-height:1.35;font-weight:500;cursor:pointer}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 var(--s-15)}
.frow .span{grid-column:1/-1}
.filters{display:flex;gap:var(--s-1);flex-wrap:wrap;margin-bottom:var(--s-2)}
.filters input,.filters select{width:auto;min-width:148px}
.tabs{display:inline-flex;gap:2px;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:3px;margin-bottom:var(--s-2);flex-wrap:wrap}
.tabs button{height:28px;border:0;background:transparent;color:var(--tx-3);font-size:12.5px;
  border-radius:var(--r-sm);box-shadow:none}
.tabs button:hover{background:var(--hover)}
.tabs button.active{background:var(--surface);color:var(--tx);font-weight:600;box-shadow:var(--sh-xs)}

/* ============================================================ dialogs */
dialog{border:0;border-radius:var(--r-2xl);padding:0;width:min(760px,94vw);max-height:92vh;
  box-shadow:var(--sh-pop);background:var(--surface);color:var(--tx)}
dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(3px)}
.mhead{padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--rule);display:flex;
  justify-content:space-between;align-items:center;gap:var(--s-2);font-weight:600;font-size:15px}
.mbody{padding:var(--s-2) var(--s-3);max-height:66vh;overflow:auto}
.mfoot{padding:var(--s-15) var(--s-3);border-top:1px solid var(--rule);display:flex;
  justify-content:flex-end;gap:var(--s-1);background:var(--surface-2)}
.mfoot [data-danger]{margin-inline-end:auto}
.err{color:var(--bad-tx);font-size:12.5px;margin-top:var(--s-075)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.record-score{display:inline-flex;padding:2px 7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-weight:700;color:var(--tx-2)}
.record-score::before{display:none!important}
.quality-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.quality-head h2{margin:0}.quality-head strong{font:700 25px/1 var(--f-brand);color:var(--tx)}
.record-quality .relationship-state{padding:10px 12px;border-radius:10px;background:var(--surface-2);border-inline-start:3px solid var(--arc-coral);font-weight:600}
.quality-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px 16px;list-style:none;margin:12px 0 0;padding:0;font-size:12px}
.quality-checks .ready{color:var(--good-tx)}.quality-checks .missing{color:var(--bad-tx)}
.tender-brief .brief-lead{font-size:15px;line-height:1.45}.tender-brief .brief-caution{padding:10px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn-tx);border-inline-start:3px solid var(--arc-yellow)}
.tender-brief .dl{margin:14px 0}.tender-brief h3{margin:18px 0 8px}.brief-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:5px 14px}

/* ---- command palette ---- */
#palette{width:min(640px,92vw);margin:13vh auto auto;border-radius:var(--r-xl);overflow:hidden}
#palette .pq{display:flex;align-items:center;gap:var(--s-1);padding:0 var(--s-2);border-bottom:1px solid var(--rule)}
#palette .pq input{border:0;height:48px;font-size:15px;box-shadow:none;background:transparent;padding:0}
#palette .pq input:focus{box-shadow:none}
#palette .pq kbd{flex:none}
#palette .plist{max-height:56vh;overflow:auto;padding:var(--s-05)}
#palette .pgrp{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx-4);padding:var(--s-15) var(--s-1) var(--s-05);position:sticky;top:0;background:var(--surface)}
#palette .pitem{display:flex;align-items:center;gap:var(--s-15);height:40px;padding:0 var(--s-1);
  border-radius:var(--r-md);cursor:pointer;font-size:13px}
#palette .pitem .pd{color:var(--tx-4);font-size:11.5px;margin-inline-start:auto}
#palette .pitem[aria-selected="true"]{background:var(--acc-bg)}
#palette .pempty{padding:var(--s-4) var(--s-2);text-align:center;color:var(--tx-3);font-size:13px}
kbd{font-family:var(--f);font-size:10.5px;line-height:16px;padding:0 5px;border-radius:var(--r-xs);
  border:1px solid var(--line-2);background:var(--sunken);color:var(--tx-3);font-weight:500}

/* ============================================================ feedback */
.toast{position:fixed;bottom:var(--s-3);inset-inline-start:50%;transform:translateX(-50%);
  background:var(--n-1000);color:#fff;padding:var(--s-1) var(--s-2);border-radius:var(--r-lg);
  font-size:13px;z-index:60;max-width:90vw;box-shadow:var(--sh-lg)}
[dir="rtl"] .toast{transform:translateX(50%)}
.toast.bad{background:var(--bad)}
@media (max-width:980px){.toast{bottom:72px}}
.banner,.offline{border-radius:var(--r-lg);padding:var(--s-1) var(--s-15);font-size:12.5px;
  margin-bottom:var(--s-2);border:1px solid;display:flex;gap:var(--s-1);align-items:center;flex-wrap:wrap}
.offline,.banner.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-tx)}
.banner.info{background:var(--info-bg);border-color:var(--info-line);color:var(--info-tx)}
.banner.acc{background:var(--acc-bg);border-color:var(--acc-line);color:var(--acc-tx)}
.empty{color:var(--tx-3);padding:var(--s-4) var(--s-2);text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r-xl);background:var(--surface)}
.empty strong{display:block;color:var(--tx-2);font-size:13.5px;margin-bottom:var(--s-05)}
/* The explanation is one readable measure, and the worked example always starts
   on its own line. Inline-block let the example ride up beside the last words of
   the sentence on a wide card, which read as a layout fault. */
.empty>strong+br,.empty br:first-of-type{display:none}
.empty .eg{display:block;width:fit-content;max-width:100%;margin:var(--s-15) auto 0;
  font-size:12px;background:var(--sunken);
  border-radius:var(--r-md);padding:var(--s-075) var(--s-15);text-align:start;color:var(--tx-3)}
.empty svg{margin-bottom:var(--s-15);opacity:.9}
.sim{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-md);
  padding:var(--s-075) var(--s-15);font-size:12.5px}

pre.md{white-space:pre-wrap;font-family:var(--f-mono);font-size:12px;line-height:19px;
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-2);max-height:58vh;overflow:auto}
.dl{display:grid;grid-template-columns:150px 1fr;gap:var(--s-075) var(--s-15);font-size:13px;margin:0}
.dl dt{color:var(--tx-4);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  font-weight:600;padding-top:2px}
.dl dd{margin:0}
a.back{font-size:12.5px;color:var(--tx-3);display:inline-block;margin-bottom:2px}
a.back::before{content:"\2190\00a0"}
[dir="rtl"] a.back::before{content:"\2192\00a0"}

/* ---- help panel ---- */
.help{border:1px solid var(--acc-line);background:linear-gradient(180deg,var(--acc-bg),transparent 70%),var(--surface);
  border-radius:var(--r-xl);padding:var(--s-15) var(--s-2);margin-bottom:var(--s-3);
  font-size:13px;line-height:19px;box-shadow:var(--sh-xs)}
.help>summary{cursor:pointer;font-weight:600;color:var(--acc-tx);list-style:none;display:flex;align-items:center;gap:var(--s-1)}
.help>summary::-webkit-details-marker{display:none}
.help>summary::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;
  background:var(--arc-sweep)}
.help>summary::after{content:"Show";margin-inline-start:auto;font-weight:500;font-size:11.5px;
  color:var(--tx-4);flex:none}
.help[open]>summary::after{content:"Hide"}
.help[open]>summary{margin-bottom:var(--s-15)}
.help>summary .hs{flex:none}
/* the one-line purpose, shown on the summary row while collapsed */
.help>summary .hw{color:var(--tx-3);font-weight:400;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-inline-start:var(--s-1);border-inline-start:1px solid var(--acc-line)}
.help[open]>summary .hw{display:none}
@media (max-width:860px){.help>summary .hw{display:none}}
.help .what{color:var(--tx-2);margin-bottom:var(--s-15)}
.help ol,.help ul{margin:0 0 var(--s-15);padding-inline-start:var(--s-25)}
.help li{margin-bottom:var(--s-05)}
.help .eg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-1) var(--s-15);margin-bottom:var(--s-1)}
.help .eg b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tx-4);margin-bottom:2px;font-weight:600}
.help h4{font-size:12.5px;margin:0 0 var(--s-05)}

/* ============================================================ login */
.login{max-width:392px;margin:9vh auto;padding:0 var(--s-2)}
.login .card{padding:var(--s-4) var(--s-3);border-radius:var(--r-2xl);box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.login .card::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--arc-sweep)}
.login .mark{display:block;width:56px;height:56px;border-radius:var(--r-lg);margin-bottom:var(--s-2)}
.login h1{font-size:19px;margin-bottom:var(--s-05)}
.login form{margin-top:var(--s-2)}
.login form button[type=submit]{width:100%;height:var(--ctrl-h-lg)}

/* ============================================================ editorial workspace */
/* The working surface takes its colour from paper. The dark rail and four
   deliberate pastel panels carry hierarchy without replacing the brand arcs. */
body{font-size:14px;line-height:1.5}
h1{font-size:32px;line-height:1.14;font-weight:650;letter-spacing:-.035em;overflow-wrap:anywhere}
h2{font-size:17px;line-height:1.35;letter-spacing:-.02em}
h3{font-size:14px;line-height:1.4}

.shell{
  width:calc(100% - 32px);max-width:1680px;min-height:calc(100vh - 32px);
  margin:16px auto;padding:12px;gap:24px;align-items:start;
  border:1.5px solid var(--line-strong);border-radius:28px;background:var(--canvas);
}
.side{
  top:28px;height:calc(100vh - 56px);min-height:0;overflow:hidden;
  border:0;border-radius:20px;padding:22px 14px 18px;
}
.brand{padding:0 5px 20px;gap:10px}
.brand::after{display:none}
.brand .mk{
  display:block;overflow:hidden;flex:none;
  width:54px;height:54px;border-radius:11px;border:1px solid #746e62;
  background:#181818;background-image:none;
}
.brand .mk img{display:block;width:100%;height:100%;object-fit:cover}
.brand .mk .brand-fallback{display:none}
.brand .mk.logo-failed img{display:none}
.brand .mk.logo-failed .brand-fallback{
  display:flex;position:relative;align-items:center;justify-content:center;
  width:100%;height:100%;padding-inline-end:3px;color:#fffdf7;
  font-family:var(--f-brand);font-size:34px;font-weight:700;line-height:1;
}
.brand .mk.logo-failed .brand-fallback::after{
  content:"";position:absolute;inset-inline:10px;bottom:6px;height:3px;
  border-radius:3px;background:var(--arc-sweep);
}
.brand .bn{font-size:13px;letter-spacing:.01em;line-height:1.25;white-space:normal}
.brand .bs{font-size:10.5px;color:#c8c2b6;line-height:1.3}
.nav{gap:2px;margin-top:2px;min-height:0}
.nav .grp{color:#bcb6a9;font-size:10.5px;font-weight:500;letter-spacing:.02em;text-transform:none;padding:15px 10px 5px}
.nav a{min-height:44px;height:auto;justify-content:flex-start;gap:10px;padding:9px 10px;border-radius:9px;font-size:12.5px;line-height:1.25}
.nav a.active{background:var(--rail-2);color:#f4c9de}
.nav a.active::before{inset-inline-start:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:#edbbd4}
.nav-icon{display:block;flex:none;width:18px;height:18px;font-size:17px;line-height:1}
.nav-icon svg{width:18px;height:18px;display:block}
.nav-label{min-width:0;overflow-wrap:anywhere}
.nav .pill,.nav .pill.ask{margin-inline-start:auto;background:var(--pastel-pink);color:#272127;animation:none;font-size:10px}
.side .foot{color:#c8c2b6;border-color:var(--rail-line);font-size:11px}
.side .foot .who{color:var(--rail-text-on)}
.side .foot button{height:32px;color:var(--rail-text);border-color:#5a554a;box-shadow:none}
.side .foot button:hover{color:var(--rail-text-on)}
.side .foot kbd{color:inherit;background:transparent;border-color:#5a554a}
.main{max-width:none;min-width:0;padding:10px 16px 36px 0}

.workbar{display:flex;align-items:center;gap:12px;min-height:42px;margin-bottom:28px}
.workbar-search{width:min(430px,55%);justify-content:flex-start;border-radius:999px;background:transparent;box-shadow:none;color:var(--tx-2);font-size:12.5px}
.workbar-search svg{width:16px;height:16px;flex:none}
.workbar-search kbd{margin-inline-start:auto;background:transparent}
.workbar-name{margin-inline-start:auto;font-size:11.5px;font-weight:650;line-height:1.3;white-space:nowrap;text-align:end}
.workbar-name small{display:block;font-size:10.5px;font-weight:400}
.workbar-profile{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:var(--rail);color:var(--rail-text-on);font-size:11px;font-weight:700}
.eyebrow{display:block;margin-bottom:8px;color:var(--tx-3);font-size:10.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.topbar{margin-bottom:25px;padding-bottom:16px;gap:14px}
.topbar h1{padding-bottom:0}
.topbar h1::after{display:none}
.topbar small{max-width:680px;font-size:12.5px;line-height:1.5}
.topbar .actions{gap:7px}
.card,.wrap,.rec,.tcard{box-shadow:none}
.card,.wrap{border-color:var(--line)}
.filters{padding:12px;background:var(--sunken);border-radius:15px}
.filters input,.filters select{max-width:100%;min-width:0}
th{background:var(--surface-2);color:var(--tx-3);padding-block:11px}
td{padding-block:12px}
.rec{padding:18px;border-radius:17px;gap:14px}
.rec .nm{font-size:15px}
.rec .sig{line-height:1.55}
.tile{color:#22231e;background:color-mix(in srgb,var(--tile,var(--pastel-blue)) 43%,var(--surface));box-shadow:none}
.tile.has-logo{width:64px;height:36px;overflow:hidden;border:1px solid #d7d4ca;border-radius:9px;background:#faf9f5;color:#26323a;box-shadow:none}
.tile.has-logo img{display:block;width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
.tile.has-logo .tile-initials{display:none}
.tile.has-logo.logo-failed img{display:none}
.tile.has-logo.logo-failed .tile-initials{display:grid;place-items:center;width:100%;height:100%;font-size:13px}
.rechead .tile.lg.has-logo{width:116px;height:62px;border-radius:12px}
.account-logo-source{margin-top:5px;color:var(--tx-3);font-size:10.5px;line-height:1.4}
.account-logo-source a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){.rechead .tile.lg.has-logo{width:96px;height:52px}.account-logo-source{font-size:10px}}
.tgroup>header .ct{color:#24231f}
.tag.a{color:var(--on-accent)}
.help{background:var(--surface);border-color:var(--line);box-shadow:none}
.help>summary{color:var(--tx-2);min-height:30px}
.help>summary::before{width:11px;height:11px;background:var(--pastel-pink)}
.help .eg{background:var(--surface-2)}
button,.btn,input,select,textarea{border-radius:10px}
button.primary{border-radius:999px;padding-inline:17px}
button:disabled{opacity:.55}
dialog{border-radius:22px;max-width:calc(100vw - 24px)}
.grid>*,.frow>*,.f{min-width:0}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.dl dd,.recdl dd{min-width:0;overflow-wrap:anywhere}

/* The dashboard keeps the operating data visible alongside a small agenda. */
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,260px);gap:28px;align-items:start;margin-bottom:28px}
.dash-main,.dash-agenda{min-width:0}
.dash-greeting{margin-bottom:25px}
.dash-greeting h2{font-size:clamp(25px,2.6vw,33px);line-height:1.15;letter-spacing:-.035em;margin:0 0 7px}
.dash-greeting p{font-size:12.5px;color:var(--tx-3);margin:0}
.dash-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;margin-bottom:12px}
.dash-section-head h2{font-size:15px;line-height:1.35;margin:0}
.dash-section-head a,.dash-section-head>small,.dash-section-head>span{font-size:11px;line-height:1.35;color:var(--tx-3);text-align:end}
.dash-section-head a{color:var(--acc-tx);white-space:nowrap}
.dash-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:26px}
.dash-card{
  display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:155px;
  padding:19px 20px;border-radius:19px;background:var(--pastel-yellow);
  color:var(--pastel-ink);text-decoration:none;position:relative;overflow:hidden;
  transition:filter var(--d-2) var(--ease),transform var(--d-2) var(--ease);
}
.dash-card:nth-child(-n+2){min-height:208px}
.dash-card[data-tone="yellow"]{background:var(--pastel-yellow)}
.dash-card[data-tone="pink"]{background:var(--pastel-pink)}
.dash-card[data-tone="sage"]{background:var(--pastel-sage)}
.dash-card[data-tone="blue"]{background:var(--pastel-blue)}
.dash-card:hover{color:var(--pastel-ink);text-decoration:none;filter:brightness(.96);transform:translateY(-2px)}
.dash-card:focus-visible,.dash-account-list button[aria-pressed="true"]:focus-visible,
.dash-date[aria-pressed="true"]:focus-visible{
  outline:3px solid #24231f;outline-offset:2px;box-shadow:0 0 0 5px #fffaf0;
}
.dash-card::after{content:"";position:absolute;inset-inline-end:-28px;bottom:-55px;width:120px;height:120px;border:24px solid rgb(25 25 22 / .08);border-radius:50%;pointer-events:none}
.dash-card:nth-child(3)::after{width:100px;height:100px;border-radius:18px;transform:rotate(-20deg)}
.dash-card:nth-child(4)::after{border-width:18px;transform:rotate(24deg)}
.dash-card>*{position:relative;z-index:1;min-width:0;max-width:100%;overflow-wrap:anywhere}
.dash-card>span:first-child,.dash-card .dash-card-label{font-size:14px;font-weight:650;line-height:1.3}
.dash-card strong,.dash-card .dash-card-value{font-size:clamp(27px,3vw,39px);line-height:1.1;letter-spacing:-.04em;margin-top:auto;font-weight:650;font-variant-numeric:var(--tnum)}
.dash-card strong small,.dash-card .dash-card-value small{font-size:13px;letter-spacing:0;font-weight:500;color:#48443b}
.dash-card>small,.dash-card p,.dash-card .muted{font-size:11.5px;line-height:1.4;color:#444139;margin:7px 0 0}
.dash-card em{font-style:normal;font-size:10.5px;line-height:1.4;color:#493b42;margin-top:10px}
.dash-card .stagebar{width:100%;height:8px;margin-top:15px;background:rgb(25 25 22 / .14)}
.dash-card .stagekey{color:#353022}
#dashboard-score{font-size:11px;line-height:1.4;color:#343a2d;margin-top:10px;font-weight:600}
.dash-card .badge{color:#29271f;background:rgb(255 255 255 / .44)}
.dash-card .badge::before{background:currentColor}
.dash-relationships{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 17px;align-items:start}
.dash-relationships>h2,.dash-relationships>header{grid-column:1/-1;margin:0}
.dash-account-list{display:grid;gap:8px;min-width:0}
.dash-account-list button,.dash-account-list a{
  display:flex;align-items:center;gap:9px;width:100%;height:auto;min-height:56px;
  padding:9px 11px;border:0;border-radius:14px;background:var(--sunken);
  color:var(--tx);text-align:start;white-space:normal;box-shadow:none;font-size:12px;text-decoration:none;
}
.dash-account-list button:hover,.dash-account-list a:hover{background:var(--hover);text-decoration:none}
.dash-account-list button[aria-pressed="true"],.dash-account-list a[aria-current="true"]{background:var(--pastel-pink);color:var(--pastel-ink)}
.dash-account-list button>span,.dash-account-list a>span{min-width:0;overflow-wrap:anywhere}
.dash-account-list button>span:nth-child(2){flex:1}
.dash-account-list button strong{display:block;font-size:12px;line-height:1.3}
.dash-account-list small{display:block;font-size:10.5px;color:var(--tx-3);line-height:1.3}
.dash-account-list button[aria-pressed="true"] small{color:#4a3f42}
.dash-monogram{width:35px;height:35px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--pastel-blue);color:#212921;font-size:11px;font-weight:650}
.dash-account-list button:nth-of-type(3n+2) .dash-monogram{background:var(--pastel-sage)}
.dash-account-list button:nth-of-type(3n) .dash-monogram{background:var(--pastel-yellow)}
.dash-tier{flex:none;border-radius:999px;padding:4px 7px;background:rgb(255 255 255 / .66);color:#343128;font-size:10px}
.dash-account-detail{min-width:0;min-height:245px;padding:20px;border-radius:18px;background:var(--pastel-pink);color:var(--pastel-ink);overflow-wrap:anywhere}
.dash-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.dash-detail-head strong{font-size:15px;line-height:1.3}
.dash-detail-head .badge{flex:none;color:#332b2c;background:rgb(255 255 255 / .55)}
.dash-account-detail p,.dash-account-detail small{font-size:12px;line-height:1.55;color:#493b42}
.dash-account-detail .muted{color:#493b42}
.dash-account-detail h3{font-size:11.5px;letter-spacing:0;margin:14px 0 3px}
.dash-account-detail>.badge{background:rgb(255 255 255 / .43);color:#332b2c}
.dash-detail-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:15px;padding-top:11px;border-top:1px solid rgb(78 43 59 / .25)}
.dash-account-detail a{color:#302129;text-decoration:underline;text-underline-offset:2px}
.dash-agenda{min-width:0}
.dash-agenda .dash-section-head{margin-bottom:15px}
.dash-month{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px}
.dash-month strong{font-size:12px;font-weight:650;background:var(--pastel-pink);color:var(--pastel-ink);padding:6px 12px;border-radius:999px}
.dash-month button{width:34px;height:34px;flex:none;border:0;background:transparent;box-shadow:none;font-size:18px;padding:0}
.dash-month button:hover{background:var(--hover);border:0}
.dash-weekdays,.dash-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
.dash-weekdays{font-size:10px;color:var(--tx-3);margin-bottom:5px}
.dash-weekdays span{padding-block:5px}
.dash-date{width:100%;height:33px;min-width:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;font-size:11px;color:var(--tx-2);position:relative}
.dash-date:hover{background:var(--hover);border:0}
.dash-date[aria-pressed="true"]{background:var(--pastel-pink);color:var(--pastel-ink);font-weight:700}
.dash-date.has-item::after{content:"";position:absolute;bottom:3px;inset-inline-start:calc(50% - 1.5px);width:3px;height:3px;border-radius:50%;background:currentColor}
.dash-log{display:flex;width:100%;margin:17px 0 24px;border-radius:999px;background:var(--acc);color:var(--on-accent);border-color:var(--acc)}
.dash-log:hover{background:var(--acc-hover);color:var(--on-accent);border-color:var(--acc-hover)}
#dashboard-agenda{min-width:0}
#dashboard-agenda .dash-section-head{margin-bottom:11px}
#dashboard-agenda h3{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3);margin:19px 0 8px}
.dash-agenda-item{display:block;min-width:0;padding:12px;margin-bottom:8px;border-radius:14px;background:var(--surface-2);color:var(--tx);text-decoration:none;overflow-wrap:anywhere}
.dash-agenda-item:hover{background:var(--hover);color:var(--tx);text-decoration:none}
.dash-agenda-item small,.dash-agenda-item span{display:block;font-size:10.5px;line-height:1.35;color:var(--tx-3)}
.dash-agenda-item strong{display:block;font-size:12px;line-height:1.35;margin:5px 0;font-weight:650}
.dash-empty{color:var(--tx-3);font-size:12px;line-height:1.45}
.dash-deadline-link{display:block;color:var(--tx);font-size:11.5px;margin-top:19px;padding:10px 0;border-top:1px solid var(--line)}
.dashboard-extended{margin:0 0 20px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
.dashboard-extended summary{min-height:46px;padding:12px 16px;cursor:pointer;font-size:12px;font-weight:650;list-style-position:inside}
.dashboard-extended summary small{font-size:11px;font-weight:400;color:var(--tx-3);margin-inline-start:8px}
.dashboard-extended .grid.kpi{padding:0 13px 13px}

/* A native button must read as a record, not inherit the one-line control. */
.kanban{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;overflow:visible;min-width:0}
.col{min-width:0;padding:10px 8px;border:0;border-radius:17px;background:var(--sunken)}
.col .head .cap{flex-wrap:wrap;gap:5px}
.col .head .nm{color:var(--tx);text-transform:none;letter-spacing:0}
.col .head .ct{color:var(--tx-3)}
.kcard{
  display:block;width:100%;height:auto;min-height:88px;padding:12px 10px;
  white-space:normal;text-align:start;line-height:1.45;font-size:12px;
  border-radius:12px;box-shadow:none;overflow-wrap:anywhere;
}
.kcard .v{flex-wrap:wrap;gap:5px}
.kcard-next{display:block;margin-top:11px;padding-top:9px;border-top:1px solid var(--line);
  color:var(--tx-2);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.kcard-next small{display:block;margin-bottom:3px;color:var(--tx-4);font-family:var(--f-mono);
  font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.kcard .a{color:var(--tx-3)}
.kcard .badge{white-space:normal;height:auto;min-height:20px;line-height:1.3}
.board-hint{margin:0 0 12px;color:var(--tx-3);font-size:12px}
.kcard[draggable="true"]{cursor:grab}
.kcard.dragging{opacity:.55;cursor:grabbing}
.col.drop-ready{outline:2px dashed var(--acc);outline-offset:-3px;background:var(--hover)}

@media(max-width:1200px){
  .shell{gap:18px;--rail-w:188px}
  .main{padding-inline-end:4px}
  .dash-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .dash-agenda{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .dash-agenda{display:grid;align-items:start}
  .dash-agenda>.dash-section-head{grid-column:1/-1;margin-bottom:0}
  .dash-calendar{grid-column:1;grid-row:2}
  .dash-log{grid-column:1;grid-row:3;margin:0}
  #dashboard-agenda{grid-column:2;grid-row:2 / span 2}
  .dash-deadline-link{grid-column:1/-1;grid-row:4;margin:0}
  .workbar-name{display:none}
  .workbar-profile{margin-inline-start:auto}
}
/* Match the base shell's compact breakpoint so the legacy fixed rail cannot leak through. */
@media(max-width:980px){
  .shell{
    display:flex;flex-direction:column;gap:12px;width:calc(100% - 16px);
    margin:8px auto;padding:10px;min-height:calc(100vh - 16px);border-radius:22px;
  }
  .side{position:relative;top:auto;bottom:auto;width:100%;height:auto;padding:14px;border:0;border-radius:16px;overflow:visible}
  .brand{display:flex;justify-content:flex-start;padding:0 0 10px}
  .nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;overflow:visible;padding:0;margin:0}
  .nav .grp{display:none}
  .nav a{
    flex-direction:row;justify-content:flex-start;gap:7px;min-width:0;min-height:44px;
    height:auto;padding:8px;font-size:11.5px;white-space:normal;
  }
  .nav-label{
    position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal;
  }
  .nav a.active::before{inset-inline-start:0;top:8px;bottom:8px;transform:none;width:2px;height:auto;border-radius:2px}
  .side .foot{display:none}
  .main{width:100%;padding:3px 4px 24px}
  .workbar{margin-bottom:20px}
  .grid.two{grid-template-columns:1fr}
  .kanban{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  h1{font-size:27px;line-height:1.16}
  .shell{width:calc(100% - 12px);margin:6px auto;padding:8px}
  .side{padding:12px}
  .nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav .pill{min-width:15px;padding-inline:3px}
  .main{padding-inline:2px}
  .workbar{gap:8px}
  .workbar-search{width:auto;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .workbar-profile{width:36px;height:36px}
  .topbar{margin-bottom:18px}
  .topbar .actions{width:100%}
  .dash-metrics,.dash-relationships{grid-template-columns:minmax(0,1fr)}
  .dash-agenda{display:block}
  .dash-agenda>.dash-section-head,.dash-calendar,.dash-log,#dashboard-agenda,.dash-deadline-link{grid-column:auto;grid-row:auto}
  .dash-log{margin:17px 0 24px}
  .dash-card,.dash-card:nth-child(-n+2){min-height:175px}
  .dash-card strong,.dash-card .dash-card-value{font-size:35px}
  .dash-relationships>h2,.dash-relationships>header{grid-column:auto}
  .dash-account-detail{min-height:0}
  .kanban{grid-template-columns:minmax(0,1fr)}
  .col{min-height:0}
  .kcard{min-height:76px;font-size:13px}
  .rec{padding:15px;gap:10px}
  .recdl,.dl{grid-template-columns:minmax(0,1fr)}
  .frow{grid-template-columns:minmax(0,1fr)}
  .row{flex-wrap:wrap}
}
@media(min-width:360px) and (max-width:600px){
  .dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dash-card,.dash-card:nth-child(-n+2){min-height:154px;padding:13px;border-radius:15px}
  .dash-card>span:first-child{font-size:12px}
  .dash-card strong,.dash-card .dash-card-value{font-size:clamp(21px,6vw,27px)}
  .dash-card>small,.dash-card em,#dashboard-score{font-size:10px}
  .dash-card .stagekey{display:none}
}

/* Today / signal desk. The content reads as field notes, not compressed table
   rows: date and type first, full observation second, source last. */
.grid.two.signal-start-grid{grid-template-columns:minmax(0,1fr)}
.signal-board{padding:0;border-radius:8px;overflow:hidden}
.signal-board-head{position:relative;padding:24px 24px 22px;border-bottom:1px solid var(--line-2)}
.signal-board-head::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--arc-sweep)}
.signal-board-kicker{display:flex;justify-content:space-between;gap:12px;color:var(--tx-4);
  font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.signal-board h2{margin:15px 0 9px;font-family:Georgia,"Times New Roman",serif;font-size:29px;font-weight:400;
  line-height:1.12;letter-spacing:-.035em}
.signal-board-head p{max-width:58ch;margin:0;color:var(--tx-3);font-size:13px;line-height:1.6}
.signal-notes{display:block}
.signal-note{display:grid;grid-template-columns:150px minmax(0,1fr) auto;grid-template-rows:auto auto;
  column-gap:24px;row-gap:6px;padding:24px 28px;border-bottom:1px solid var(--rule);min-width:0;
  transition:background-color var(--d-2) var(--ease)}
.signal-note:hover{background:var(--hover)}
.signal-note-meta{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.signal-note-index{font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--acc-tx)}
.signal-note-kind{color:var(--tx-3);font-size:12px;font-weight:650;line-height:1.5;letter-spacing:.07em;text-transform:uppercase}
.signal-note-date{color:var(--tx-3);font-size:12px;line-height:1.5;font-variant-numeric:var(--tnum);white-space:nowrap}
.signal-note-title{grid-column:2;grid-row:1;margin:0;color:var(--tx);font-size:17px;font-weight:650;
  line-height:1.42;letter-spacing:-.012em;overflow-wrap:anywhere}
.signal-note-detail{grid-column:2;grid-row:2;max-width:70ch;margin:0;color:var(--tx-3);font-size:15px;
  line-height:1.65;overflow-wrap:anywhere;white-space:normal}
.signal-note-action{grid-column:3;grid-row:1 / span 2;align-self:center;margin:0;font-size:13px;font-weight:600}
.signal-note-source{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}
.signal-board-foot{padding:15px 24px 17px;background:var(--surface-2);font-size:12px;font-weight:650}
.signal-board-foot a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}

/* The private Agent page borrows the Studio's editorial sequence and fine
   rules, while retaining Leoden's colours and the bridge's exact status. */
.agent-topbar{padding-bottom:19px;border-bottom:1px solid var(--line-strong)}
.agent-eyebrow{display:block;margin-bottom:7px;color:var(--tx-4);font-family:var(--f-mono);
  font-size:10px;font-weight:600;letter-spacing:.09em}
.agent-topbar h1{font-family:Georgia,"Times New Roman",serif;font-size:42px;font-weight:400;
  line-height:1.05;letter-spacing:-.04em}
.agent-setup{display:grid;grid-template-columns:145px minmax(0,1fr);gap:24px;margin-bottom:26px;
  padding:20px 24px;background:var(--surface);border-top:3px solid var(--arc-yellow);
  border-bottom:1px solid var(--line-2);border-radius:3px}
.agent-setup.connected{border-top-color:var(--arc-green)}
.agent-setup-status{display:flex;flex-direction:column;gap:7px;border-inline-end:1px solid var(--rule);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em}
.agent-setup-status strong{color:var(--warn-tx);font-size:13px;letter-spacing:0}
.agent-setup.connected .agent-setup-status strong{color:var(--ok-tx)}
.agent-setup h2{margin:0 0 8px;font-family:Georgia,"Times New Roman",serif;font-size:23px;
  font-weight:400;line-height:1.2}
.agent-setup p{margin:0 0 10px;color:var(--tx-3);font-size:13px;line-height:1.55}
.agent-setup p:last-child{margin-bottom:0}
.agent-setup-command{padding:10px 12px;background:var(--surface-2);border-inline-start:2px solid var(--arc-yellow);
  overflow-wrap:anywhere}
.agent-setup-command code{color:var(--tx);white-space:normal;overflow-wrap:anywhere}
.agent-aside{counter-reset:agent-section;grid-column:1;grid-row:1}
.agent-aside h3::before{counter-increment:agent-section;content:counter(agent-section,decimal-leading-zero) " / ";
  color:var(--acc-tx);font-family:var(--f-mono);font-size:10px}
.agent-aside .acards{gap:0;border-top:1px solid var(--line-strong)}
.agent-aside .acard{padding:16px 10px;background:transparent;border:0;border-bottom:1px solid var(--line-2);
  border-radius:0;min-height:79px}
.agent-aside .acard:hover{background:var(--hover)}
.agent-aside .acard.on{background:var(--surface-2);box-shadow:inset 3px 0 var(--eng,var(--acc));
  border-color:var(--line-2)}
.agent-aside .acard input{accent-color:var(--acc);width:17px;height:17px}
.agent-aside section.acard{grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "s" "h" "b"}
.agent-aside section.acard .ah{grid-area:h}
.agent-aside section.acard button{max-width:100%;white-space:normal}
.agent-grid .aterm{border-radius:4px;grid-column:2;grid-row:1}
@media(max-width:940px){
  .agent-aside,.agent-grid .aterm{grid-column:1;grid-row:auto}
  .astrip{flex-wrap:wrap}
  .apbtn{min-width:44px;min-height:44px;height:44px}
  .dash-month button{width:44px;height:44px}
  .dash-calendar{overflow-x:auto}
  .dash-weekdays,.dash-days{grid-template-columns:repeat(7,minmax(44px,1fr));min-width:320px}
  .dash-date{min-width:44px;height:44px}
}
@media(max-width:600px){
  #accounts-search{flex:1 1 100%;width:100%}
  .signal-board-head{padding:22px 16px 18px}
  .signal-board-kicker{font-size:9px;letter-spacing:.04em}
  .signal-board h2{font-size:26px}
  .signal-note{display:block;padding:20px 16px 22px}
  .signal-note-meta{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:baseline}
  .signal-note-date{margin-inline-start:auto}
  .signal-note-title{margin:12px 0 7px}
  .signal-note-detail{margin:0}
  .signal-note-action{margin:10px 0 0}
  .signal-board-foot{padding-inline:16px}
  .agent-topbar h1{font-size:37px}
  .agent-setup{grid-template-columns:minmax(0,1fr);gap:13px;padding:18px 16px}
  .agent-setup-status{flex-direction:row;align-items:baseline;justify-content:space-between;
    border-inline-end:0;border-bottom:1px solid var(--rule);padding-bottom:9px}
  .apace{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%;margin-inline-start:0}
  .apbtn{min-width:0}
}
/* Owner correction review: scoped layout, never part of the optimistic queue. */
.radar-correction-dialog{width:min(1040px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px;overflow:auto}
.radar-correction-dialog>header{display:flex;justify-content:space-between;align-items:start;gap:18px;border-bottom:1px solid var(--rule);padding-bottom:16px;margin-bottom:20px}
.radar-correction-dialog h2{margin:6px 0}.radar-correction-dialog textarea{display:block;width:100%;margin:12px 0 18px}
.radar-correction-record{padding:18px 0;border-top:1px solid var(--rule)}
.radar-correction-record h3{margin:0 0 6px}.radar-correction-record h4{margin:18px 0 10px;text-transform:none}
.radar-correction-diff{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.radar-correction-diff>div{min-width:0;padding:14px;border:1px solid var(--rule)}
.radar-correction-record pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 monospace;max-height:300px;overflow:auto}
.radar-correction-record details{margin-top:16px}.radar-correction-confirm{display:flex;gap:12px;align-items:center;margin:24px 0 16px}
.radar-correction-confirm input{width:20px;height:20px;flex:none}
.radar-correction-dialog code{overflow-wrap:anywhere}
@media(max-width:640px){.radar-correction-dialog{padding:18px;width:calc(100vw - 20px)}.radar-correction-diff{grid-template-columns:minmax(0,1fr)}}

/* Staging review is an editorial note desk, never part of the live CRM. */
.stage-agent-notice{margin-bottom:16px;padding:12px 16px;border-inline-start:3px solid var(--arc-yellow);
  background:var(--warn-bg);color:var(--warn-tx);font-size:12px;line-height:1.5}
.stage-agent-notice strong{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em}
.workbar-review{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  flex:none;border:1px solid var(--line-2);border-radius:var(--r-full);background:var(--surface);
  color:var(--tx);font-size:12px;font-weight:650;white-space:nowrap}
.workbar-review svg{width:17px;height:17px}
.review-eyebrow{display:block;margin-bottom:9px;color:var(--acc-tx);font:600 10px/1.4 var(--f-mono);
  letter-spacing:.12em}
.review-topbar h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(32px,4vw,46px);
  font-weight:400;line-height:1.08;letter-spacing:-.04em}
.review-desk{max-width:1050px;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--arc-purple);border-radius:var(--r-sm)}
.review-notice{padding:17px 22px;border-bottom:1px solid var(--rule);color:var(--tx-3);
  font-size:13px;line-height:1.55}
.review-notice strong{color:var(--tx)}
.review-filters{display:flex;flex-wrap:wrap;gap:7px;padding:15px 22px;border-bottom:1px solid var(--rule)}
.review-filters button{display:inline-flex;align-items:center;gap:8px;min-height:39px;padding:7px 13px;
  border:1px solid var(--line);border-radius:var(--r-full);background:transparent;font-size:12px}
.review-filters button[aria-pressed="true"]{background:var(--rail);border-color:var(--rail);color:var(--rail-text-on)}
.review-filters span{font-variant-numeric:var(--tnum);opacity:.8}
.review-items{list-style:none;margin:0;padding:0}
.review-item{padding:22px;border-bottom:1px solid var(--rule);min-width:0}
.review-item:last-child{border-bottom:0}
.review-item-meta,.review-item-foot,.review-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.review-item-meta{font-size:12px;color:var(--tx-3)}
.review-item-meta a{color:var(--acc-tx);font-weight:650;text-underline-offset:3px}
.review-kind{font-family:var(--f-mono);font-size:10px;font-weight:650;letter-spacing:.09em;text-transform:uppercase}
.review-status{margin-inline-start:auto;padding:4px 9px;border-radius:var(--r-full);font-size:11px;font-weight:700}
.review-status.open{background:var(--warn-bg);color:var(--warn-tx)}
.review-status.triaged{background:var(--info-bg);color:var(--info-tx)}
.review-status.resolved{background:var(--ok-bg);color:var(--ok-tx)}
.review-item>p{max-width:72ch;margin:16px 0 19px;color:var(--tx);font-size:15px;line-height:1.6;
  white-space:pre-wrap;overflow-wrap:anywhere}
.review-item-foot{justify-content:space-between;color:var(--tx-3);font-size:12px}
.review-actions{gap:7px}
.review-owner-note{margin-top:18px;padding:15px;border-inline-start:3px solid var(--arc-teal);
  background:var(--surface-2);font-size:13px;line-height:1.5}
.review-owner-note p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:700px){
  .workbar-review{width:40px;padding:0}
  .workbar-review span{display:none}
  .review-notice,.review-item{padding-inline:16px}
  .review-filters{padding-inline:16px}
  .review-item-foot{align-items:flex-start}
}