/* Bonya — shared visual system */

:root{
  --paper:#F7F5F2; --surface:#FFFFFF; --sunk:#F2EFEA;
  --ink:#1A1815; --ink-2:#57524B; --ink-3:#8A847C;
  --line:#E5E1DA; --line-2:#D6D0C6;
  --accent:#0D6B72; --accent-soft:#DCEFF1;
  --flag:#C42A22; --flag-soft:#FBE7E4;
  --violet:#5F4EDB; --violet-soft:#EEEBFD;
  --mint:#357A2F; --mint-soft:#E4F3E0;
  --amber:#9C5D02; --amber-soft:#F8EEDC;
  --night:#141310; --night-ink:#D8D3C9;

  --f-ui:'General Sans','Avenir Next',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;

  --r-sm:8px; --r-md:14px; --r-lg:20px;
  --lift:0 1px 2px rgba(26,24,21,.04), 0 4px 16px rgba(26,24,21,.05);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#141310; --surface:#1C1A16; --sunk:#211E19;
    --ink:#F2EFE9; --ink-2:#B5AEA3; --ink-3:#8A847C;
    --line:#2E2B25; --line-2:#3B372F;
    --accent:#35CBD6; --accent-soft:#123138;
    --flag:#FF6B5E; --flag-soft:#3A1E1B;
    --violet:#9B8FF5; --violet-soft:#242040;
    --mint:#74C970; --mint-soft:#16301A;
    --amber:#FFA319; --amber-soft:#332612;
    --night:#0E0D0B; --night-ink:#D8D3C9;
    --lift:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#141310; --surface:#1C1A16; --sunk:#211E19;
  --ink:#F2EFE9; --ink-2:#B5AEA3; --ink-3:#8A847C;
  --line:#2E2B25; --line-2:#3B372F;
  --accent:#35CBD6; --accent-soft:#123138;
  --flag:#FF6B5E; --flag-soft:#3A1E1B;
  --violet:#9B8FF5; --violet-soft:#242040;
  --mint:#74C970; --mint-soft:#16301A;
  --amber:#FFA319; --amber-soft:#332612;
  --night:#0E0D0B; --night-ink:#D8D3C9;
  --lift:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --paper:#F7F5F2; --surface:#FFFFFF; --sunk:#F2EFEA;
  --ink:#1A1815; --ink-2:#57524B; --ink-3:#8A847C;
  --line:#E5E1DA; --line-2:#D6D0C6;
  --accent:#0D6B72; --accent-soft:#DCEFF1;
  --flag:#C42A22; --flag-soft:#FBE7E4;
  --violet:#5F4EDB; --violet-soft:#EEEBFD;
  --mint:#357A2F; --mint-soft:#E4F3E0;
  --amber:#9C5D02; --amber-soft:#F8EEDC;
  --night:#141310; --night-ink:#D8D3C9;
  --lift:0 1px 2px rgba(26,24,21,.04), 0 4px 16px rgba(26,24,21,.05);
}

/* Five roles, five hues — the highlight is its own colour, not a borrowed one.
   Selection has to mean nothing about the content it lands on: a teal underline
   under a tab is the UI pointing at itself, where green would have quietly
   claimed the tab was healthy and red that it was broken.
   Hues follow Personio's semantic scale (@highlight-ui/tokens), which carries a
   `highlight` token separate from success/warning/critical for exactly this
   reason: highlight 184°, success 117°, warning 35°, critical ~4°. Their values
   are built for a white app, so light mode darkens them to clear 4.5:1 on warm
   paper; dark mode uses them close to source. --flag is the original red. */
:root{
  --hi:var(--accent);        --hi-soft:var(--accent-soft);   /* selection, focus, active tab */
  --good:var(--mint);        --good-soft:var(--mint-soft);   /* healthy, done, allowed */
  --warn:var(--amber);       --warn-soft:var(--amber-soft);  /* degraded, nearing a limit */
  --crit:var(--flag);        --crit-soft:var(--flag-soft);   /* failed, blocked, needs you */
  --info:var(--violet);      --info-soft:var(--violet-soft); /* neutral annotation */
}

*,*::before,*::after{box-sizing:border-box}
/* the hidden attribute only sets display:none at UA specificity, so any component
   with its own display (.card, .stack, .grid2) silently ignores it. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-ui);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}
svg{display:block;flex:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
/* a heading focused only to announce a route change is not an interactive
   target — ringing the whole h1 reads as a bug, not as guidance */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}

.wrap{max-width:1080px;margin:0 auto;padding:var(--s5) var(--s5) var(--s8)}
.grow{flex:1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar / breadcrumbs */
.top{display:flex;align-items:center;gap:var(--s4);padding-bottom:var(--s6)}
.crumbs{display:flex;align-items:center;gap:var(--s2);font-size:13.5px;color:var(--ink-3);flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--ink-3);border-radius:4px;cursor:pointer}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{color:var(--line-2)}
.crumbs .here{color:var(--ink-2);font-weight:500}
.themebtn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:999px;color:var(--ink-3);background:var(--surface);flex:none}
.themebtn:hover{color:var(--ink);border-color:var(--line-2)}

/* page head */
.pagehead{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)}
.titles{flex:1;min-width:240px}
h1{font-size:1.75rem;font-weight:600;letter-spacing:-.025em;line-height:1.15;margin-bottom:6px}
.lede{font-size:14px;color:var(--ink-2);max-width:66ch;line-height:1.5}

/* bands */
.band{margin-bottom:var(--s7)}
.bandhead{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4)}
h2{font-size:.9375rem;font-weight:600;letter-spacing:-.005em}
.bandnote{font-size:13px;color:var(--ink-3)}
.cap{display:block;font-size:13px;color:var(--ink-3);max-width:34ch;line-height:1.4}

/* tags */
.tag{
  flex:none;font-size:12.5px;font-weight:500;padding:4px 10px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap
}
.tag .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.tag.flag{background:var(--flag-soft);color:var(--flag)}
.tag.calm{background:var(--mint-soft);color:var(--mint)}
.tag.note{background:var(--violet-soft);color:var(--violet)}
.tag.warn{background:var(--amber-soft);color:var(--amber)}
.tag.mute{background:var(--sunk);color:var(--ink-2)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface);font-size:14px;font-weight:500;
  transition:border-color .12s,background .12s,color .12s
}
.btn:hover{border-color:var(--ink-3);background:var(--sunk)}
.btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.solid:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn.care{color:var(--flag);border-color:var(--flag)}
.btn.care:hover{background:var(--flag-soft);border-color:var(--flag)}
.btn.small{padding:7px 14px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* chips / filters */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--surface);font-size:13px;font-weight:500;
  color:var(--ink-2);cursor:pointer
}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip .n{font-variant-numeric:tabular-nums;opacity:.6}
.chip[aria-pressed="true"] .n{opacity:.75}

/* panels */
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--lift);overflow:hidden
}
.panel.big{border-radius:var(--r-lg)}
.panelhead{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)
}
.panelhead h3{font-size:14.5px;font-weight:600;flex:1;letter-spacing:-.005em}
.panelhead .at{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.card{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
/* a section heading has to outrank the field labels under it — at 13.5/600
   against a label's 13/600 they were the same thing twice */
.card > h3{font-size:14.5px;font-weight:600;margin-bottom:4px;letter-spacing:-.005em}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-bottom:var(--s6)}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--lift);padding:var(--s4);display:flex;flex-direction:column;gap:2px
}
.stat .k{font-size:12.5px;color:var(--ink-3)}
.stat .v{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.stat .sub{font-size:12.5px;color:var(--ink-3)}
.stat .u{font-size:1rem;font-weight:600}
/* the one number that means someone should act */
.stat.signal{border-color:var(--flag)}
.stat.signal .k{color:var(--flag);font-weight:500}
.stat.signal .v{font-size:1.875rem}
.stat.signal a{color:var(--flag);text-decoration:none;border-bottom:1px solid currentColor;cursor:pointer}

/* meters */
.meter{height:5px;border-radius:3px;background:var(--sunk);overflow:hidden;margin-top:6px;display:block}
.meter span{display:block;height:100%;background:var(--ink-3);border-radius:3px}
.meter.warn span{background:var(--amber)}
.meter.flag span{background:var(--flag)}
.meter.calm span{background:var(--mint)}

/* tables */
table{border-collapse:collapse;width:100%;font-size:13px}
th{
  text-align:start;font-weight:500;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line)
}
td{padding:9px var(--s4);border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
.mono{font-family:var(--f-mono);font-size:12.5px}
.num{font-variant-numeric:tabular-nums}
.dim{color:var(--ink-3)}
caption.tablenote{
  caption-side:top;text-align:start;padding:var(--s3) var(--s4);
  font-size:12.5px;color:var(--ink-3);border-bottom:1px solid var(--line)
}
.name{display:flex;flex-direction:column;gap:1px}
.name a{font-family:var(--f-mono);font-size:13px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line-2);width:fit-content;cursor:pointer}
.name a:hover{border-bottom-color:var(--ink)}
.name .id{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}
.rowact{text-align:end;white-space:nowrap}
.rowact a{font-size:13px;text-decoration:none;color:var(--ink-2);border-bottom:1px solid var(--line-2);cursor:pointer}
.rowact a:hover{color:var(--ink);border-bottom-color:var(--ink)}
tr.needsyou td{background:var(--flag-soft)}
.tablefoot{padding:var(--s3) var(--s4);border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.scroller{overflow-x:auto}

/* terminal + code */
.out{
  background:var(--night);color:var(--night-ink);
  font-family:var(--f-mono);font-size:12.5px;line-height:1.75;
  white-space:pre;overflow-x:auto;padding:var(--s4);margin:0;max-height:340px
}
.out .t{color:#7E776B}
.out .bad{color:#FF6B5E}
.out .ok{color:#2DD4A8}
.out .hi{color:#9BB4FF}
pre.snippet{
  margin:0;font-family:var(--f-mono);font-size:12.5px;line-height:1.75;
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);overflow-x:auto;white-space:pre
}
.snippet .kw{color:var(--violet)}
.snippet .cmt{color:var(--ink-3)}
.keyfield{
  font-family:var(--f-mono);font-size:12.5px;padding:8px 12px;background:var(--sunk);
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-2);
  display:block;overflow-x:auto;white-space:nowrap
}
.keyrow{display:flex;align-items:center;gap:var(--s2)}
.keyrow .keyfield{flex:1;min-width:0}

/* key/value + toggle rows */
.metric{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:9px var(--s4);border-bottom:1px solid var(--line)}
.metric:last-child{border-bottom:none}
.metric .k{font-size:13px;color:var(--ink-2)}
.metric .v{font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums}
.rowline{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s3) var(--s4);font-size:13.5px;padding:var(--s3) 0;border-bottom:1px dashed var(--line)}
.rowline:last-child{border-bottom:none;padding-bottom:0}
/* inline action link — must read as clickable wherever it appears, not only in a .rowline */
.act{font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line-2);cursor:pointer}
.act:hover{color:var(--ink);border-bottom-color:var(--ink)}
.rowline .act{white-space:nowrap}
.togglerow{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px dashed var(--line)}
.togglerow:last-child{border-bottom:none;padding-bottom:0}
.tinfo{display:flex;flex-direction:column;gap:2px}
/* Same rule as the form labels: a row title must not match the card heading
   above it. At 13.5/600/ink against an h3's 14.5/600/ink these were one weight
   and one colour apart by a single pixel, so "Email me" and "When something
   needs me" read as peers. It keeps --ink, unlike a field label, because it is
   the row's own content rather than an annotation on something else.
   Ladder: h3 14.5/600/ink · .tname 13.5/500/ink · .thelp 13/400/ink-2 */
.tname{font-size:13.5px;font-weight:500}
.thelp{font-size:13px;color:var(--ink-2);line-height:1.5;max-width:64ch}
.switch{
  width:38px;height:22px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--sunk);position:relative;flex:none;cursor:pointer;transition:background .14s,border-color .14s
}
/* logical inset, so the knob travels toward the end of the line in Arabic too */
.switch::after{
  content:"";position:absolute;top:2px;inset-inline-start:3px;width:14px;height:14px;border-radius:50%;
  background:var(--ink-3);transition:inset-inline-start .14s,background .14s
}
.switch[aria-checked="true"]{background:var(--mint-soft);border-color:var(--mint)}
.switch[aria-checked="true"]::after{inset-inline-start:19px;background:var(--mint)}

/* empty / first-run states */
.empty{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift);padding:var(--s7) var(--s6);max-width:660px
}
.empty h2{font-size:1.375rem;letter-spacing:-.02em;line-height:1.25;margin-bottom:var(--s3);font-weight:600}
.empty .why{font-size:14.5px;color:var(--ink-2);line-height:1.6;max-width:56ch;margin-bottom:var(--s4)}
.empty .then{font-size:13px;color:var(--ink-3);line-height:1.55;max-width:60ch;margin-top:var(--s4)}
.empty .acts{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.empty pre.snippet{margin-top:var(--s4)}
.empty.urgent{border-color:var(--flag)}
.empty.urgent h2{color:var(--flag)}
.emptynote{
  display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;
  background:var(--flag-soft);color:var(--flag);border-radius:var(--r-sm);padding:10px 13px;margin-bottom:var(--s4)
}

/* preview switch for first-run states */
.previewbar{
  display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface)
}
.previewbar button{
  padding:5px 11px;border-radius:999px;font-size:12px;font-weight:500;color:var(--ink-3);white-space:nowrap
}
.previewbar button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* dropdown menu */
.menuwrap{position:relative}
.menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:250px;z-index:30;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 10px 36px rgba(0,0,0,.16);padding:var(--s2);display:flex;flex-direction:column;gap:1px
}
.menu[hidden]{display:none}
.menu.right{left:auto;right:0}
.menuhead{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:var(--s2) var(--s3) 4px}
.menuitem{
  display:flex;align-items:center;gap:10px;padding:8px var(--s3);border-radius:9px;
  font-size:13.5px;text-align:left;width:100%;cursor:pointer
}
.menuitem:hover{background:var(--sunk)}
.menuitem .orgmark{width:22px;height:22px;border-radius:6px;background:var(--sunk);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--ink-2);flex:none}
.menuitem[aria-current="true"] .orgmark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menuitem .sub{display:block;font-size:11.5px;color:var(--ink-3)}
.menuitem .tick{margin-inline-start:auto;color:var(--mint);flex:none}
.menusep{height:1px;background:var(--line);margin:var(--s2) 0}

/* org button in the top bar */
.orgbtn{
  display:inline-flex;align-items:center;gap:9px;padding:5px 12px 5px 6px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);font-size:13px;font-weight:500;white-space:nowrap
}
.orgbtn:hover{border-color:var(--line-2)}
.orgbtn .orgmark{width:22px;height:22px;border-radius:6px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:none}

/* one-time secret reveal */
.reveal{
  background:var(--night);border-radius:var(--r-sm);padding:var(--s3) var(--s4);
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--f-mono);font-size:13px;color:#E8E2D6;word-break:break-all
}
.reveal .val{flex:1;min-width:0;overflow-x:auto;white-space:nowrap}
.reveal button{
  flex:none;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff
}
.reveal button:hover{background:rgba(255,255,255,.2)}
.oncewarn{
  display:flex;gap:10px;align-items:flex-start;background:var(--flag-soft);color:var(--flag);
  border-radius:var(--r-sm);padding:11px 13px;font-size:13px;line-height:1.5;font-weight:500
}

/* settings-shaped page: one column at reading measure, not a dashboard grid.
   The frame spans the full column so the page does not visibly jump narrower
   than Sandboxes or Secrets on arrival — the heading, the lede and the tab rule
   all line up with every other screen. Only the settings stack keeps the
   measure, at the same ~570-720px density Governance and Usage hold their
   toggle rows in. Stretching these panels to 1152px puts a switch a thousand
   pixels from its own label, which no other screen in this console does. */
.settings{max-width:none}
.settings > .subpanel,.settings > .signoutrow,.settings > .band{max-width:720px}
/* an address or an org description can be one unbroken token; let it break rather than burst */
.profmail,.orgrow .sub,.idnames h1,.orgrow > span,.lede .mono,.name a{overflow-wrap:anywhere}
/* a flex child defaults to min-width:auto and refuses to shrink below its longest word */
.orgrow > span,.tinfo,.metric .v{min-width:0}
/* a long list scrolls in place instead of pushing the rest of the page away */
.scroller.capped{max-height:320px;overflow-y:auto}
/* pending / failed states for a row action */
.rowact [aria-busy="true"]{opacity:.55;pointer-events:none}
.rowerr{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  background:var(--flag-soft);color:var(--flag);font-size:13px;line-height:1.5;
  padding:10px var(--s4);border-block-start:1px solid var(--line)
}
.rowerr button{
  font-size:12.5px;font-weight:600;border-block-end:1px solid currentColor;color:inherit;
  margin-inline-start:auto;white-space:nowrap
}
/* A 668px box for a twelve-character password reads as a mistake, and the hint
   under it ran to ~106 characters. Capping the field fixes both at once: the
   control suggests the length of what goes in it, and the help text lands on a
   ~66-character measure.
   Scoped to cards rather than to every .field, because the cap should only bite
   where the container is wide. A card narrower than 26rem — one inside .grid2,
   or any card on a phone — is unaffected, and a modal field still fills its
   540px dialog, where stopping short would read as dead space instead.
   Textareas keep the full width: they hold code, not a value. */
.card .field{max-width:26rem}
.card .field:has(textarea){max-width:none}

/* settings forms */
.photorow{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.formfoot{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--s2);flex-wrap:wrap;
  padding-block-start:var(--s3);border-block-start:1px solid var(--line);margin-block-start:var(--s2)
}
.formfoot .hint{margin-inline-end:auto}
/* the footer keeps Save reachable on a narrow screen instead of stacking it off the edge */
@media (max-width:520px){
  .formfoot{justify-content:stretch}
  .formfoot .btn{flex:1 1 auto;justify-content:center}
  .formfoot .hint,.formfoot .dirty{flex:1 0 100%;margin-inline-end:0;order:-1}
}

/* unsaved work is a state, not a hint — it gets the warning colour and a mark */
.dirty{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--amber)}
.dirty::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* a control that is mid-flight cannot be pressed again */
.btn[aria-busy="true"],.linkbtn[aria-busy="true"]{opacity:.6;pointer-events:none}

/* validation */
.field.bad > input,.field.bad > select,.field.bad > textarea{border-color:var(--flag)}
.field.bad > input:focus,.field.bad > select:focus,.field.bad > textarea:focus{outline-color:var(--flag)}
.err{
  display:flex;align-items:flex-start;gap:7px;font-size:12.5px;line-height:1.45;
  color:var(--flag);font-weight:500
}
.err svg{margin-block-start:1px;flex:none}
/* a live count that only appears once the limit is close enough to matter */
.field .count{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;align-self:flex-end}
.field .count.near{color:var(--amber)}

/* the file input is visually hidden, so its label has to carry the focus ring */
.btn:has(:focus-visible){outline:2px solid var(--accent);outline-offset:3px}

/* uploaded photo replaces the initial in place */
.profav{overflow:hidden;position:relative}
.profav img{width:100%;height:100%;object-fit:cover;display:block}

/* an emptied table says why it is empty inside the panel, without nesting a card */
.emptyrow{
  padding:var(--s6) var(--s4);display:flex;flex-direction:column;align-items:center;
  gap:var(--s3);text-align:center
}
.emptyrow p{font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:46ch}
.panel.card.danger{border-color:var(--flag)}
.panel.card.danger > h3{color:var(--flag)}
.reasonline{font-size:12.5px;color:var(--ink-3);line-height:1.45;padding-block-start:4px;padding-inline-start:2px}
/* a link-looking control that is a real button, so it is focusable and Enter works */
.linkbtn{
  font-size:13px;color:var(--ink-2);border-block-end:1px solid var(--line-2);
  cursor:pointer;padding:0;background:none
}
.linkbtn:hover{color:var(--ink);border-block-end-color:var(--ink)}
.linkbtn[disabled]{opacity:.5;cursor:default}
.settings .band{margin-bottom:var(--s7)}
.idblock{display:flex;align-items:center;gap:var(--s4);padding-bottom:var(--s6);flex-wrap:wrap}
.idnames h1{margin-bottom:2px}
.orglist{display:flex;flex-direction:column;gap:var(--s2)}
.orgitem{display:flex;align-items:center;gap:var(--s2)}
.orgitem .orgrow{flex:1;min-width:0;padding:11px var(--s3)}
.orgitem .orgrow .sub{white-space:normal;line-height:1.45;margin-top:1px}
.signoutrow{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding-top:var(--s5);border-top:1px solid var(--line)
}

/* user profile */
.profhead{display:flex;align-items:center;gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.profav{
  width:56px;height:56px;border-radius:50%;flex:none;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;letter-spacing:-.02em
}
.profname{font-size:1.125rem;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.profmail{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-3);word-break:break-all}
.profsec{display:flex;flex-direction:column;gap:var(--s2)}
.profsec > h3{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.orgrow{
  display:flex;align-items:center;gap:10px;padding:9px var(--s3);border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);width:100%;text-align:left;font-size:13.5px;cursor:pointer
}
.orgrow:hover{border-color:var(--line-2);background:var(--sunk)}
.orgrow[aria-current="true"]{border-color:var(--ink)}
.orgrow .sub{display:block;font-size:11.5px;color:var(--ink-3)}
.orgrow .orgmark{width:24px;height:24px;border-radius:7px;background:var(--sunk);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--ink-2);flex:none}
.orgrow[aria-current="true"] .orgmark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.orgrow .here{margin-inline-start:auto;font-size:11.5px;color:var(--ink-3);flex:none}

/* roles */
.role{font-size:12.5px;font-weight:500;padding:3px 9px;border-radius:999px;background:var(--sunk);color:var(--ink-2);white-space:nowrap}
.role.owner{background:var(--violet-soft);color:var(--violet)}
.role.admin{background:var(--mint-soft);color:var(--mint)}

/* form fields */
.form{display:flex;flex-direction:column;gap:var(--s4)}
.field{display:flex;flex-direction:column;gap:6px}
/* heading 14.5/600/ink · label 13/500/ink-2 · hint 12.5/400/ink-3 — three steps
   on all three axes, so the nesting is legible without reading the words */
.field > label,.field > .grouplabel{font-size:13px;font-weight:500;color:var(--ink-2)}
/* every text-entry type, not a list of the ones we happened to ship first —
   password and email were falling through to the UA's white box in dark mode */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.field select,.field textarea{
  font:inherit;font-size:13.5px;padding:9px 12px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);width:100%;
  color-scheme:light dark
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:not([type=checkbox]):not([type=radio]):focus,
.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field textarea{resize:vertical;min-height:64px;font-family:var(--f-mono);font-size:12.5px}
.field .mono-in{font-family:var(--f-mono);font-size:12.5px}
.field .hint{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.checkline{display:flex;align-items:flex-start;gap:9px;font-size:13.5px}
.checkline input{margin-top:3px;accent-color:var(--accent);flex:none}
.checkline .hint{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.pickgroup{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pick{
  padding:7px 13px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);
  font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer
}
.pick[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.costnote{
  font-size:12.5px;color:var(--ink-2);background:var(--sunk);border-radius:var(--r-sm);
  padding:9px 12px;line-height:1.5
}
.costnote strong{color:var(--ink)}
.costnote.warn{background:var(--flag-soft);color:var(--flag)}
.costnote.warn strong{color:var(--flag)}

.stack{display:flex;flex-direction:column;gap:var(--s4)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);align-items:start}
/* grid and flex children default to min-width:auto, so a wide table inside one
   refuses to shrink and bursts the layout. Let them shrink; .scroller does the scrolling. */
.grid2 > *,.grid3 > *,.stack > *,.evidence > *{min-width:0}

.foot{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5)
}

/* toast */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:var(--paper);font-size:13.5px;
  padding:10px 18px;border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.18);
  opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;z-index:80;max-width:86vw;text-align:center
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:960px){
  .grid2,.grid3{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .wrap{padding:var(--s4) var(--s4) var(--s7)}
  .bandhead{flex-direction:column;gap:var(--s1)}
  .bandnote{max-width:44ch}
  h1{font-size:1.5rem}
  .scroller table{min-width:760px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}