/* Ported from prototype/employee-registry.html — only the parts the released
   screens use. Keep in step with the prototype's look. */
:root{
  --bg:#E8EBEE; --card:#FFFFFF; --sunken:#F4F6F7;
  --ink:#14181C; --ink2:#4A535C; --ink3:#69737D;
  --rule:#DCE1E5; --rule2:#AEB7C0; --rule3:#8A939C;
  --accent:#07614A; --accent-hi:#054838; --accent-soft:#DDEFE7; --accent-on:#FFFFFF;
  --flag:#A02012; --flag-soft:#FAE3E0;
  --amber:#7A4B00; --amber-soft:#FAEBD3;
  --slate:#3F4C59; --slate-soft:#E4E9ED;
  --head:#11201C; --head-ink:#F0F4F2; --head-dim:#A8B8B2;
  --zebra:#F8F9FA; --focus:#0E7C5E;
  --shadow:0 1px 2px rgba(20,24,28,.10), 0 8px 20px rgba(20,24,28,.07);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0C1012; --card:#171C1F; --sunken:#111618;
  --ink:#EDF1F3; --ink2:#B3BDC4; --ink3:#8B959C;
  --rule:#2B3337; --rule2:#434D53; --rule3:#5C666D;
  --accent:#4FD1A5; --accent-hi:#7BE0BF; --accent-soft:#12302A; --accent-on:#07201A;
  --flag:#FF9B88; --flag-soft:#35201D;
  --amber:#E8BE72; --amber-soft:#2E2617;
  --slate:#A9B6BF; --slate-soft:#1D262B;
  --head:#080C0E; --head-ink:#E4EBE8; --head-dim:#8D9B96;
  --zebra:#1B2124; --focus:#4FD1A5;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --bg:#0C1012; --card:#171C1F; --sunken:#111618;
  --ink:#EDF1F3; --ink2:#B3BDC4; --ink3:#8B959C;
  --rule:#2B3337; --rule2:#434D53; --rule3:#5C666D;
  --accent:#4FD1A5; --accent-hi:#7BE0BF; --accent-soft:#12302A; --accent-on:#07201A;
  --flag:#FF9B88; --flag-soft:#35201D;
  --amber:#E8BE72; --amber-soft:#2E2617;
  --slate:#A9B6BF; --slate-soft:#1D262B;
  --head:#080C0E; --head-ink:#E4EBE8; --head-dim:#8D9B96;
  --zebra:#1B2124; --focus:#4FD1A5;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.35);
}
/* The company's fonts: Quicksand for headings and big words, Nunito for the rest.
   ID codes and times keep a fixed-width font, so they line up in columns.
   Loaded from Google Fonts when online; the system's own font stands in offline. */
:root{
  --font-head:"Quicksand","Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono); font-variant-ligatures:none}
h1,h2,h3,h4,.tabs button,.subtabs button{font-family:var(--font-head)}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:1px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}
a{color:var(--accent)}

/* The sky (shared/theme.js) washes the header and, very faintly, the top of the page.
   Without it (no script yet) everything falls back to the plain colours. */
:root{ --sky-top:var(--head); --sky-bottom:var(--head) }
body{background-image:linear-gradient(180deg, color-mix(in oklab, var(--sky-bottom) 9%, var(--bg)) 0, var(--bg) 360px);
  background-repeat:no-repeat}
header{background:var(--head); color:var(--head-ink);
  background-image:linear-gradient(100deg, var(--head) 0%, var(--head) 35%, color-mix(in oklab, var(--sky-top) 70%, var(--head)) 75%,
                                    color-mix(in oklab, var(--sky-bottom) 70%, var(--head)) 100%)}
.hwrap{max-width:1500px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:10px; margin-right:auto}
.brand h1{font-size:16px; font-weight:600; margin:0; letter-spacing:-.01em}
.brand .sub{font-size:12.5px; color:var(--head-dim)}
.conn{font-size:12px; display:flex; align-items:center; gap:6px; color:var(--head-dim)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--head-dim); flex:none}
.dot.on{background:#3FCB98} .dot.off{background:#E0A63A}

main{max-width:1500px; margin:0 auto; padding:16px 18px 80px}
.banner{background:var(--amber-soft); color:var(--amber); border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);
  border-radius:8px; padding:9px 13px; font-size:13.5px; margin-bottom:14px; font-weight:450}
.banner.offline{background:var(--flag-soft); color:var(--ink); border-color:color-mix(in srgb,var(--flag) 40%,transparent)}
.banner.offline > div:first-child{color:var(--flag)}
.banner .btitle{font-weight:600; margin-bottom:3px}
.banner .bbtn{margin-top:9px}
.split{display:grid; grid-template-columns:minmax(290px,420px) 1fr; gap:16px; align-items:start}
@media (max-width:900px){ .split{grid-template-columns:1fr} .split.has-sel .rosterpane{display:none} }
.panel{background:var(--card); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow)}

.btn{border:1px solid var(--rule2); background:var(--card); padding:7px 13px; border-radius:8px; cursor:pointer;
  font-size:13.5px; font-weight:500; white-space:nowrap; color:var(--ink)}
.btn:hover{border-color:var(--rule3); background:var(--sunken)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-on); font-weight:600}
.btn.primary:hover{background:var(--accent-hi); border-color:var(--accent-hi)}
.btn.danger{color:var(--flag); border-color:color-mix(in srgb,var(--flag) 45%,transparent)}
.btn.danger:hover{background:var(--flag-soft); border-color:var(--flag)}
.btn.solid-danger{background:var(--flag); border-color:var(--flag); color:#fff; font-weight:600}
.btn:disabled{opacity:.4; cursor:default}
.btn.sm{padding:5px 10px; font-size:12.5px}
.btn.ghost{border-color:transparent; background:none}
.btn.ghost:hover{border-color:var(--rule2)}
input[type=text],input[type=search],input[type=date],input[type=number],input[type=email],select,textarea{
  border:1px solid var(--rule2); border-radius:8px; background:var(--card); padding:8px 10px; width:100%}
input:hover,select:hover,textarea:hover{border-color:var(--rule3)}
input:focus,select:focus,textarea:focus{border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 18%,transparent); outline:none}
textarea{resize:vertical; min-height:64px}

/* ---------- list ---------- */
.rtools{padding:11px; border-bottom:1px solid var(--rule); display:grid; gap:8px}
.filters{display:flex; gap:7px}
.filters select{flex:1; min-width:0; font-size:13.5px; padding:7px 9px}
.sortbox{display:flex; gap:6px; min-width:0; flex:1.4}
.sortbox .btn{flex:none}
a.btn{text-decoration:none; display:inline-block}
.rcount{padding:8px 13px; font-size:12.5px; color:var(--ink2); border-bottom:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center; gap:8px; font-weight:450}
.rlist{max-height:calc(100vh - 262px); min-height:200px; overflow:auto}
@media (max-width:900px){ .rlist{max-height:none} }
.row{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 13px; border:0;
  border-bottom:1px solid var(--rule); cursor:pointer; background:none; width:100%; text-align:left; align-items:center}
.row:hover{background:var(--sunken)}
.row[aria-selected="true"]{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.row .nm{font-weight:600; font-size:14.5px; color:var(--ink); letter-spacing:-.005em}
.row .nm em{font-style:normal; font-weight:400; color:var(--ink2)}
.row .meta{grid-column:1; font-size:12.5px; color:var(--ink2)}
.row .cid{grid-column:2; grid-row:1; font-size:11.5px; color:var(--ink2)}
.row .cid.bad{color:var(--flag); font-weight:600}
.chip{font-size:11px; font-weight:600; padding:2px 8px; border-radius:5px; white-space:nowrap;
  background:var(--slate-soft); color:var(--slate)}
.row .chip{grid-column:2; grid-row:2; justify-self:end}
.chip.active{background:var(--accent-soft); color:var(--accent)}
.chip.probationary{background:var(--amber-soft); color:var(--amber)}
.chip.onleave{background:var(--slate-soft); color:var(--slate)}
.chip.departed{background:var(--sunken); color:var(--ink2)}
.empty{padding:40px 22px; text-align:center; color:var(--ink2); font-size:13.5px}
.empty.tall{padding:80px 24px}
.empty strong{display:block; color:var(--ink); font-weight:600; margin-bottom:5px; font-size:15px}

/* ---------- grouping ---------- */
.grouphdr{display:flex; align-items:center; gap:9px; padding:8px 13px; background:var(--sunken);
  border:0; border-bottom:1px solid var(--rule); border-top:1px solid var(--rule); cursor:pointer; width:100%;
  text-align:left; font-size:12.5px; font-weight:600; color:var(--ink2); position:sticky; top:0; z-index:1}
.grouphdr:hover{color:var(--ink)}
.grouphdr .tw{font-size:10px; color:var(--ink3); width:10px; flex:none}
.grouphdr .gcount{margin-left:auto; font-weight:500; color:var(--ink3)}

/* ---------- record ---------- */
.chead{padding:16px 20px 0}
.idbar{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:10px}
.idbar .code{font-family:var(--font-mono); font-size:12.5px; color:var(--ink2);
  background:var(--sunken); border:1px solid var(--rule); padding:3px 9px; border-radius:6px}
.idbar .code.bad{color:var(--flag); border-color:color-mix(in srgb,var(--flag) 40%,transparent); background:var(--flag-soft)}
.idbar .spacer{margin-left:auto}
.statuspick{font-size:12.5px; font-weight:600; padding:5px 9px; border-radius:7px; width:auto; min-width:120px; border:1px solid var(--rule2)}
.statuspick.active{background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.statuspick.probationary{background:var(--amber-soft); color:var(--amber); border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.statuspick.onleave{background:var(--slate-soft); color:var(--slate)}
.statuspick.departed{background:var(--sunken); color:var(--ink2); border-color:var(--rule2)}
.nameblock{display:grid; gap:2px; margin-bottom:4px}
input.nameinput{font-size:25px; font-weight:700; letter-spacing:-.025em; line-height:1.18; padding:4px 8px;
  border:1px solid transparent; background:none; border-radius:8px; margin-left:-8px; width:calc(100% + 8px)}
input.nameinput::placeholder{color:var(--ink3); font-weight:600}
input.nameinput:hover{border-color:var(--rule)}
input.nameinput:focus{border-color:var(--focus); background:var(--card)}
.nickline{display:flex; align-items:center; gap:7px; margin-left:-8px}
.nickline .lbl{font-size:12.5px; color:var(--ink2); padding-left:8px; flex:none}
input.nickinput{font-size:14px; padding:3px 8px; border:1px solid transparent; background:none; border-radius:7px; max-width:260px}
input.nickinput:hover{border-color:var(--rule)}
input.nickinput:focus{border-color:var(--focus); background:var(--card)}
.tabs{display:flex; gap:22px; margin-top:14px; border-bottom:1px solid var(--rule); overflow-x:auto}
.tabs button{background:none; border:0; padding:0 0 10px; cursor:pointer; font-size:14px; font-weight:500;
  color:var(--ink2); border-bottom:2px solid transparent; white-space:nowrap; margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-current="true"]{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}
.cbody{padding:18px 20px}

.grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:15px 16px}
.f{display:flex; flex-direction:column; gap:5px; min-width:0; grid-column:span 6}
.f[data-span="3"]{grid-column:span 3}
.f[data-span="4"]{grid-column:span 4}
.f[data-span="6"]{grid-column:span 6}
.f[data-span="8"]{grid-column:span 8}
.f[data-span="12"]{grid-column:span 12}
@media (max-width:760px){ .f,.f[data-span]{grid-column:span 12} }
.f label{font-size:12.5px; color:var(--ink2); font-weight:500}
.f .hint{font-size:11.5px; color:var(--ink2)}
.f .hint.bad{color:var(--flag); font-weight:500}
.idrow{display:flex; gap:7px}
.idrow input{flex:1; min-width:0}
.checkline{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink)}
.checkline input{width:auto; margin:0; flex:none}
.checkline.small{font-size:12.5px; color:var(--ink2)}
.colorrow{display:flex; gap:8px; align-items:center}
.colorrow input[type=color]{width:42px; height:34px; padding:2px; flex:none; min-width:0}
.colorrow input[type=text]{max-width:120px}
.actions{position:sticky; bottom:0; background:var(--card); border-top:1px solid var(--rule); padding:12px 20px;
  display:flex; gap:9px; align-items:center; border-radius:0 0 12px 12px; flex-wrap:wrap}
.actions .spacer{margin-left:auto}
.state{font-size:12.5px; font-weight:500}
.state.ok{color:var(--accent)} .state.pend{color:var(--amber)} .state.quiet{color:var(--ink2)}
.reqmark{color:var(--flag); font-weight:700}
.missing{background:var(--flag-soft); color:var(--flag)}

/* hover tooltip */
.tip{position:relative}
.tip::after{
  content:attr(data-tip); position:absolute; left:0; bottom:calc(100% + 6px); z-index:40;
  background:var(--head); color:var(--head-ink); font-size:12px; font-weight:450; line-height:1.35;
  padding:6px 9px; border-radius:7px; white-space:normal; width:max-content; max-width:260px;
  opacity:0; pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.tip:hover::after, .tip:focus-visible::after{opacity:1; transition:opacity .12s .35s}
@media (prefers-reduced-motion:reduce){ .tip:hover::after{transition:none} }

/* ---------- list | table switch ---------- */
.subtabs{display:flex; gap:4px; margin-bottom:14px; background:var(--card); border:1px solid var(--rule);
  border-radius:10px; padding:4px; box-shadow:var(--shadow); width:fit-content}
.subtabs button{background:none; border:0; padding:7px 18px; border-radius:7px; cursor:pointer;
  font-size:13.5px; font-weight:500; color:var(--ink2)}
.subtabs button:hover{color:var(--ink)}
.subtabs button[aria-selected="true"]{background:var(--accent-soft); color:var(--accent); font-weight:600}

/* ---------- table ---------- */
.ttools{padding:11px 13px; border-bottom:1px solid var(--rule); display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.ttools input[type="search"]{width:auto; min-width:120px; flex:0 1 140px}
.ttools select{width:auto; font-size:13.5px; padding:7px 9px}
.ttools .sortbox{flex:none}
.ttools .spacer{margin-left:auto}
.groupbar{display:flex; gap:20px; padding:0 13px; border-bottom:1px solid var(--rule); overflow-x:auto}
.groupbar button{background:none; border:0; padding:10px 0; cursor:pointer; font-size:13.5px; font-weight:500;
  color:var(--ink2); border-bottom:2px solid transparent; white-space:nowrap; margin-bottom:-1px}
.groupbar button:hover{color:var(--ink)}
.groupbar button[aria-current="true"]{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}
.sheetwrap{overflow:auto; max-height:calc(100vh - 300px)}
table.sheet{border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-size:13.5px}
table.sheet th,table.sheet td{border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:0}
table.sheet thead th{position:sticky; top:0; z-index:3; background:var(--card); text-align:left; font-weight:600;
  font-size:12px; color:var(--ink2); padding:9px 10px; white-space:nowrap; cursor:pointer; user-select:none;
  border-bottom:2px solid var(--rule2)}
table.sheet thead th:hover{color:var(--ink); background:var(--sunken)}
table.sheet thead th.nosort{cursor:default}
table.sheet thead th .dir{color:var(--accent); margin-left:5px; font-weight:700}
table.sheet tbody tr:nth-child(even){background:var(--zebra)}
table.sheet tbody tr:hover{background:var(--accent-soft)}
th.pin,td.pin{position:sticky; left:0; z-index:2; background:var(--card); border-right:2px solid var(--rule2)}
tbody tr:nth-child(even) td.pin{background:var(--zebra)}
tbody tr:hover td.pin{background:var(--accent-soft)}
thead th.pin{z-index:4}
td.pin button{background:none; border:0; padding:8px 10px; cursor:pointer; font-weight:600; text-align:left;
  width:100%; white-space:nowrap; color:var(--ink); font-size:13.5px}
td.pin button:hover{color:var(--accent); text-decoration:underline}
table.sheet td input,table.sheet td select,table.sheet td textarea{width:100%; min-width:130px; border:1px solid transparent; background:none;
  padding:8px 10px; border-radius:0; box-shadow:none}
table.sheet td textarea{min-height:0; resize:none; min-width:220px; display:block; overflow:hidden; white-space:nowrap}
table.sheet td textarea:focus{white-space:pre-wrap; overflow:auto; resize:vertical}
table.sheet td input[type=checkbox]{width:auto; min-width:0; margin:8px 10px}
table.sheet td input:hover,table.sheet td select:hover,table.sheet td textarea:hover{border-color:var(--rule2)}
table.sheet td input:focus,table.sheet td select:focus,table.sheet td textarea:focus{background:var(--card); border-color:var(--focus); box-shadow:inset 0 0 0 1px var(--focus)}
table.sheet td.w4 input{min-width:155px}
table.sheet td.w8 input,table.sheet td.w12 input{min-width:220px}
td.idcell{white-space:nowrap; padding:7px 10px; font-size:12.5px}
td.idcell .bad{color:var(--flag); font-weight:600}
tr.grouprow td{background:var(--sunken); border-bottom:1px solid var(--rule2); padding:0; cursor:pointer}
tr.grouprow .glabel{position:sticky; left:0; display:inline-flex; align-items:center; gap:9px;
  padding:7px 10px; font-size:12.5px; font-weight:600; color:var(--ink2)}
tr.grouprow .tw{font-size:10px; color:var(--ink3); width:10px}
tr.grouprow .gcount{color:var(--ink3); font-weight:500}
table.sheet tbody tr.grouprow:hover td{background:var(--sunken)}
.tfoot{padding:9px 13px; font-size:12.5px; color:var(--ink2); border-top:1px solid var(--rule)}
.tfoot .tstatus{float:right; font-weight:500}
.tfoot .tstatus.pend{color:var(--amber)}
.kbd{font-family:var(--font-mono); font-size:11px; border:1px solid var(--rule2); border-radius:4px; padding:1px 5px; color:var(--ink2)}

[hidden]{display:none !important}

/* ---------- header navigation ---------- */
nav{display:flex; gap:2px; background:rgba(255,255,255,.10); padding:3px; border-radius:8px; flex-wrap:wrap}
nav button{background:none; border:0; padding:6px 12px; border-radius:6px; cursor:pointer;
  color:var(--head-ink); opacity:.72; font-size:13.5px; font-weight:500}
nav button:hover{opacity:1}
nav button[aria-current="true"]{background:var(--card); color:var(--ink); opacity:1; font-weight:600}

/* ---------- fields panel ---------- */
.stack{display:grid; gap:16px; max-width:1040px}
.stack > *{min-width:0}
.sec{padding:18px 20px}
.sec h3{margin:0 0 5px; font-size:15.5px; font-weight:600}
.sec p{margin:0 0 14px; font-size:13.5px; color:var(--ink2); max-width:66ch}
.btnrow{display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.btn.xs{padding:3px 8px; font-size:12px; line-height:1.3}
.tabcard{padding:0; overflow:hidden}
.tabcard .th{display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--rule);
  background:var(--sunken); flex-wrap:wrap}
.tabcard .th strong{font-size:14.5px}
.tabcard .th .spacer{margin-left:auto}
.frow{display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--rule); flex-wrap:wrap}
.frow:last-child{border-bottom:0}
.frow .fname{font-weight:500; font-size:14px; min-width:150px}
.frow .fkey{font-family:var(--font-mono); font-size:11.5px; color:var(--ink2)}
.frow .ftype{font-size:12px; color:var(--ink2); background:var(--sunken); border:1px solid var(--rule);
  padding:1px 7px; border-radius:5px}
.frow .fwidth{font-size:12px; color:var(--ink2)}
.frow .spacer{margin-left:auto}
.frow .lock{font-size:11.5px; color:var(--ink2)}
.arrows{display:flex; gap:3px}
.fempty{padding:18px 16px; font-size:13px; color:var(--ink2)}
.fedit{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:13px 14px; margin-top:4px}
.fedit .hint:empty{display:none}
@media (max-width:600px){ .fedit .f{grid-column:span 12} }
.radios{display:grid; gap:10px; margin-top:4px}
.radios label{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; padding:10px 12px;
  border:1px solid var(--rule2); border-radius:9px; cursor:pointer}
.radios label:hover{border-color:var(--rule3); background:var(--sunken)}
.radios input{margin-top:2px; flex:none; width:auto}
.radios span b{display:block; font-weight:600; margin-bottom:2px}
.radios span i{font-style:normal; color:var(--ink2); font-size:12.5px}

.fempty.note{padding-bottom:4px}

/* ---------- company section ---------- */
td.numcell{padding:8px 10px; white-space:nowrap; text-align:right}
td.colorcell .colorrow{padding:4px 8px; gap:6px}
table.sheet td.colorcell input[type=color]{width:30px; min-width:0; height:26px; padding:1px}
table.sheet td.colorcell input[type=text]{min-width:88px; width:88px; border:1px solid var(--rule2); padding:4px 7px; border-radius:6px}

/* ---------- branch colours ----------
   The colours come from each node's --tint-* variables (set in app.js).
   Only group headers get a wash; a record's row or card just gets the
   branch's bar, so a strongly coloured brand never looks like a warning. */
.row[data-tint]{box-shadow:inset 3px 0 0 var(--tint-edge)}
.row[data-tint][aria-selected="true"]{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.grouphdr[data-tint]{background:var(--tint-head); box-shadow:inset 4px 0 0 var(--tint-edge)}
.chead[data-tint]{box-shadow:inset 0 3px 0 var(--tint-edge); border-radius:12px 12px 0 0}
table.sheet tbody tr[data-tint] td.pin{box-shadow:inset 4px 0 0 var(--tint-edge)}
table.sheet tbody tr[data-pending] td.pin{box-shadow:inset 3px 0 0 var(--amber)}
tr.grouprow td[data-tint]{background:var(--tint-head); box-shadow:inset 4px 0 0 var(--tint-edge)}
table.sheet tbody tr.grouprow:hover td[data-tint]{background:var(--tint-head)}

/* drag-to-reorder tab buttons */
.draggable{cursor:grab}
.draggable:active{cursor:grabbing}
.dragging{opacity:.4}
.tabs button.dropinto,.groupbar button.dropinto{box-shadow:inset 3px 0 0 var(--accent); background:var(--accent-soft)}

/* ---------- dialogs + toasts ---------- */
.scrim{position:fixed; inset:0; background:rgba(12,18,20,.55); display:grid; place-items:center; padding:20px; z-index:60}
.modal{background:var(--card); border-radius:13px; padding:20px; max-width:580px; width:100%; max-height:88vh;
  overflow:auto; box-shadow:0 18px 50px rgba(0,0,0,.3); border:1px solid var(--rule)}
.modal h3{margin:0 0 7px; font-size:17px; font-weight:600}
.modal p{margin:0 0 16px; font-size:14px; color:var(--ink2)}
.modal .mrow{display:flex; gap:9px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap}
.modal .err{color:var(--flag); font-size:13px; font-weight:500; margin-top:10px; min-height:1px}
#toast{position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:70; display:grid; gap:8px; justify-items:center}
.toast{background:var(--head); color:var(--head-ink); padding:10px 16px; border-radius:9px; font-size:13.5px;
  font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.28); max-width:90vw}
.toast.bad{background:var(--flag); color:#fff}

/* ---------- history ---------- */
.hist{display:grid}
.hitem{display:grid; grid-template-columns:auto 1fr; gap:3px 14px; padding:11px 0; border-bottom:1px solid var(--rule)}
.hitem:last-child{border-bottom:0}
.hitem .when,.acthead .when{font-family:var(--font-mono); font-size:12px; color:var(--ink2); white-space:nowrap}
.hitem .what{font-size:13.5px; min-width:0}
.diff{font-size:12.5px; color:var(--ink2); margin-top:3px; overflow-wrap:anywhere}
.diff s{color:var(--ink3)}
.diff .to{color:var(--ink); font-weight:500}
.diff .none{color:var(--ink3)}
.diff.note{font-style:italic}
.tabs .histtab{margin-left:auto}

/* ---------- data > activity ---------- */
.actlist{max-height:calc(100vh - 290px); min-height:200px; overflow:auto}
.actrow{padding:11px 16px; border-bottom:1px solid var(--rule)}
.acthead{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; font-size:13.5px}
.actverb{font-size:11.5px; font-weight:600; padding:1px 8px; border-radius:5px; background:var(--slate-soft); color:var(--slate)}
.actverb.people{background:var(--accent-soft); color:var(--accent)}
.actverb.fields,.actverb.registry{background:var(--amber-soft); color:var(--amber)}
.actverb.deleted{background:var(--flag-soft); color:var(--flag)}
.actname{font-weight:600; font-size:13.5px; color:var(--ink); background:none; border:0; padding:0; cursor:pointer; text-align:left}
button.actname:hover{color:var(--accent); text-decoration:underline}
.actname.gone{color:var(--ink2)}
.actrow .diff{margin-left:2px}
.actbtns{margin-top:7px}
.actmore{padding:12px 16px; text-align:center}

/* ---------- data > backups ---------- */
.bkfolder{margin-top:12px; font-size:12.5px; color:var(--ink2); overflow-wrap:anywhere}
table.bktable td{padding:7px 10px; white-space:nowrap; vertical-align:middle}
table.bktable td.num{text-align:right}
table.bktable thead th{cursor:default}

/* ---------- data > import ---------- */
textarea.paste{min-height:130px; font-family:var(--font-mono); font-size:12.5px; background:var(--sunken); margin-bottom:12px}
.scrollx{overflow-x:auto}
.impscroll{max-height:60vh; overflow:auto; margin:10px 0 14px; border:1px solid var(--rule); border-radius:9px}
.maptable{width:100%; border-collapse:collapse; margin-top:4px; font-size:13px}
.maptable th,.maptable td{text-align:left; padding:7px 9px; border-bottom:1px solid var(--rule); vertical-align:top}
.maptable th{color:var(--ink2); font-weight:600; font-size:12px; position:sticky; top:0; background:var(--card)}
.maptable td:first-child{white-space:nowrap}
.maptable select{width:auto; padding:5px 8px; font-size:12.5px}
.maptable .quiet,.sec .quiet{color:var(--ink2)}
.sec .bad{color:var(--flag); font-weight:500}
.imptable td.impwhat{min-width:260px}
.imptable .diff{margin-top:0}
.impnote{font-size:12px; color:var(--amber); margin-top:2px}
.impsum{font-weight:600; color:var(--ink) !important}
.opts{display:grid; gap:10px; margin:14px 0 0; padding:13px; background:var(--sunken); border-radius:9px; border:1px solid var(--rule)}
.opts label{display:flex; align-items:center; gap:9px; font-size:13.5px; flex-wrap:wrap}
.opts select{width:auto; padding:5px 8px; font-size:13px}
.pill{display:inline-block; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:5px; white-space:nowrap}
.pill.new{background:var(--accent-soft); color:var(--accent)}
.pill.upd{background:var(--amber-soft); color:var(--amber)}
.pill.same{background:var(--slate-soft); color:var(--slate)}
.pill.skip{background:var(--flag-soft); color:var(--flag)}

/* ---------- appearance ---------- */
.lookbtn{background:rgba(255,255,255,.10); border:0; color:var(--head-ink); padding:6px 12px; border-radius:8px;
  cursor:pointer; font-size:13px; font-weight:500; opacity:.85}
.lookbtn:hover{opacity:1; background:rgba(255,255,255,.18)}
.lookbox{display:grid; gap:8px}
.lookhead{font-size:13.5px; font-weight:600; margin-top:10px}
.lookhead:first-child{margin-top:0}
.lookrow{margin-top:4px}
.lookrow input[type=color]{width:44px; height:34px; padding:2px; border-radius:8px; border:1px solid var(--rule2); background:var(--card)}
.segmented{display:inline-flex; gap:2px; background:var(--sunken); border:1px solid var(--rule); padding:3px; border-radius:9px; width:fit-content}
.segmented button{background:none; border:0; padding:6px 14px; border-radius:6px; cursor:pointer;
  font-size:13.5px; font-weight:500; color:var(--ink2)}
.segmented button[aria-current="true"]{background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.10)}
.swatches{display:flex; gap:8px; flex-wrap:wrap}
.swatch{width:34px; height:34px; border-radius:9px; border:2px solid transparent; cursor:pointer; padding:0}
.swatch[aria-pressed="true"]{border-color:var(--ink); box-shadow:0 0 0 2px var(--card) inset}
.dotpreview{display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:2px}
.dotprev{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink2)}

/* identity dot beside a name */
.pdot{display:inline-block; width:10px; height:10px; border-radius:50%; flex:none; vertical-align:middle;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.10)}
.pdot.lg{width:15px; height:15px}
.pdot.empty{box-shadow:inset 0 0 0 1px var(--rule2)}
.row .nm .pdot{margin-right:8px; position:relative; top:-1px}
td.pin .pdot{margin-right:8px}
.dotprev .pdot{width:13px; height:13px}
.namerow{display:flex; align-items:center; gap:10px}
.namerow input.nameinput{margin-left:0; width:100%}

/* ---------- auto ids (employees > fields) ---------- */
.sec .lookhead{margin-top:16px}
.sec .hint{font-size:12.5px; color:var(--ink2); max-width:66ch; margin-top:3px}
.formurl{flex:1 1 320px; min-width:0; font-size:12.5px}
.idchanges{max-height:220px; overflow:auto; border:1px solid var(--rule); border-radius:9px; padding:8px 10px; background:var(--sunken)}
.idchanges .bad{color:var(--flag); font-weight:600}

/* ---------- counts and at a glance ---------- */
.ttools .countline{font-size:12.5px; color:var(--ink2)}
.focusbar{display:flex; align-items:center; gap:10px; justify-content:space-between; padding:8px 13px; font-size:12.5px;
  background:var(--accent-soft); color:var(--accent); font-weight:600; border-bottom:1px solid var(--rule)}
.glance{padding:20px 22px; display:grid; gap:6px}
.glance h3{margin:0; font-size:16px}
.glance > p{margin:0 0 6px; font-size:13px}
.glhead{display:flex; align-items:baseline; gap:8px; font-size:14px; color:var(--ink2)}
.glbig{font-size:30px; font-weight:700; color:var(--ink); line-height:1}
.glchips{display:flex; gap:6px; flex-wrap:wrap}
.glchips .chip{border:0; cursor:pointer}
.glsec{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px; margin-top:6px}
.glsec .lookhead, .glsec .hint{grid-column:1 / -1}
.glsec .lookhead{margin:4px 0 0}
.glrow{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:7px 11px; font:inherit; font-size:13px;
  color:var(--ink); cursor:pointer}
.glrow:hover{border-color:var(--rule3)}
.gllab{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.glrow{min-width:0}
.glperson{flex-direction:column; align-items:flex-start; gap:1px}
.glperson .glnum, .glperson .gllab{max-width:100%; overflow:hidden; text-overflow:ellipsis}
.glperson .glnum{font-size:12px}
.glrow .pdot{margin-right:8px; position:relative; top:-1px}
.glnum{color:var(--ink2); font-variant-numeric:tabular-nums; white-space:nowrap}
.glance .hint{font-size:12px; color:var(--ink2)}
.glrow[data-tint]{box-shadow:inset 3px 0 0 var(--tint-edge)}

/* ---------- labelled toolbar controls ---------- */
/* They run on like a sentence ("Show: Current staff  Branch: All branches …"),
   each box only as wide as its choice; a long choice is cut short. */
.ctls{display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px}
.ctl{display:inline-flex; align-items:center; gap:4px; min-width:0; max-width:100%}
.ctllab{font-size:13.5px; color:var(--ink2); white-space:nowrap}
.ctl select{width:auto; min-width:0; max-width:170px; font-size:13.5px; padding:5px 7px; text-overflow:ellipsis}
.ctl .sortbox{flex:none; width:auto; gap:4px}
.ctl .sortbox .btn{padding:5px 7px}
.ctl.changed .ctllab{color:var(--accent); font-weight:600}
.ctl.changed select{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.ctl select[data-tint]{border-left:6px solid var(--tint-edge)}
.rcount .btn.ghost{margin-left:auto}
.rcount .btn.ghost + .btn{margin-left:0}

/* ---------- home: the way back to it, and its cards ---------- */
.homelink{color:var(--head-dim); text-decoration:none; font-size:13px; font-weight:500; padding:4px 9px; border-radius:7px;
  border:1px solid color-mix(in srgb,var(--head-dim) 35%,transparent); white-space:nowrap}
.homelink:hover{color:var(--head-ink); border-color:var(--head-dim)}
.homegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; align-items:start}
.homecard{padding:18px 20px; display:grid; gap:10px}
.homehead{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.homehead h2{margin:0; font-size:19px; font-weight:700; letter-spacing:-.015em}
.homehead h2 a{color:var(--ink); text-decoration:none}
.homehead h2 a:hover{color:var(--accent)}
.homeabout{margin:0; font-size:14px; color:var(--ink2)}
.homenote{margin:0; font-size:12.5px; color:var(--amber); background:var(--amber-soft); padding:5px 9px; border-radius:7px; justify-self:start}
.homecard .btnrow{display:flex; flex-wrap:wrap; gap:7px; margin-top:4px}