/* ══════════════════════════════════════════════════════════════════════
   HR Suite — application layer
   Sits on top of theme.css and reads ONLY its tokens, so the Suite and the
   Notice Board stay the same product. Nothing below names a colour.

   theme.css already gives us: .card .btn .chip .tabs .tab .officebar .ofilter
   .plogos .lg .overlay .modal .toast .hero .eyebrow .stat .stats .timeline
   .empty .banner .search .selwrap .iconbtn .close-x
   This file adds the things an app needs that a notice board did not:
   app chrome, dense tables, breadcrumbs, KPI tiles, matrices, letterheads.
   ══════════════════════════════════════════════════════════════════════ */

/* ── motion vocabulary ──────────────────────────────────────────────── */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --fast:.14s; --base:.22s; --slow:.34s;
  --r:14px; --r-sm:10px; --r-lg:18px;
  --shell:1420px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes shimmer{100%{background-position:180% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── app frame ──────────────────────────────────────────────────────── */
body{min-height:100vh}
.appwrap{max-width:var(--shell);margin:0 auto;padding:0 clamp(14px,2.2vw,30px) 72px}
/* The shell renders <main id="view"> directly, so it carries the page gutter. */
main#view{display:block;max-width:var(--shell);margin:0 auto;
  padding:0 clamp(14px,2.2vw,30px) 76px;
  animation:rise var(--base) var(--ease-out) both}
main#view>h1:first-child{margin:0 0 6px;font:800 clamp(21px,2.5vw,29px)/1.15 inherit;
  letter-spacing:-.022em;color:var(--heading)}
main#view>h2{font:800 16px/1.2 inherit;color:var(--heading);letter-spacing:-.015em;
  margin:clamp(22px,3vw,32px) 0 12px}
main#view>h3{font:700 13.5px/1.3 inherit;color:var(--heading);margin:22px 0 11px}
main#view>p{color:var(--muted);font-size:13.5px;line-height:1.6}

/* header ------------------------------------------------------------- */
.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px;
  padding:0 clamp(12px,2.2vw,26px);min-height:60px;
  background:var(--bar);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);margin-bottom:clamp(18px,2.4vw,28px)}
.top>img{height:24px;width:auto;flex:0 0 auto}
.wordmark{font:800 14.5px/1 inherit;letter-spacing:-.01em;color:var(--heading);
  padding-left:11px;margin-left:3px;border-left:1px solid var(--line);flex:0 0 auto}
.top .sp{flex:1 1 auto}
.who{color:var(--muted);white-space:nowrap;font-size:12.5px}
.top .burger{display:none}

.nav{display:flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0}
.navgroup{position:relative}
.navitem{appearance:none;border:0;background:none;cursor:pointer;
  font:600 13px/1 inherit;color:var(--muted);text-decoration:none;
  padding:9px 11px;border-radius:var(--r-sm);white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;transition:var(--fast)}
.navitem:hover{color:var(--ink);background:var(--hover-soft)}
.navitem.on{color:var(--green-ink);background:var(--tint)}
.navitem .caret{font-size:9px;opacity:.65;transition:transform var(--fast)}
.navitem[aria-expanded="true"] .caret{transform:rotate(180deg)}
.navmenu{position:absolute;top:calc(100% + 7px);left:0;min-width:216px;z-index:70;
  background:var(--modal);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:6px;display:none}
/* app.js toggles `.open` on the GROUP, not the menu — match that contract. */
.navgroup.open>.navmenu,.navmenu.open{display:block;
  animation:pop var(--fast) var(--ease-out) both}
.navgroup:last-child .navmenu,.navgroup.right .navmenu{left:auto;right:0}
.navmenu a{display:block;padding:9px 11px;border-radius:8px;font-size:13px;
  color:var(--body);text-decoration:none;transition:var(--fast)}
.navmenu a:hover{background:var(--hover);color:var(--ink)}
.navmenu a.on{background:var(--tint);color:var(--green-ink);font-weight:600}

/* mobile sheet */
/* app.js shows/hides this with the `hidden` attribute, so `hidden` must win. */
.msheet{position:fixed;inset:60px 0 auto;z-index:59;background:var(--modal);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
  padding:14px clamp(14px,4vw,22px) 20px;display:block;
  max-height:calc(100vh - 60px);overflow:auto;
  animation:rise var(--fast) var(--ease-out) both}
.msheet[hidden]{display:none}
.msec{padding:6px 0}
.msec-t{font:700 10.5px/1 inherit;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dim);margin:0 0 7px}
.msec a{display:block;padding:11px 12px;border-radius:9px;color:var(--body);
  text-decoration:none;font-size:14.5px;font-weight:500}
.msec a.on{background:var(--tint);color:var(--green-ink);font-weight:700}
@media (max-width:1080px){
  .nav{display:none}
  .top .burger{display:inline-flex;font-size:17px}
  .wordmark{padding-left:9px}
}
@media (max-width:1320px){ .who{display:none} }
@media (max-width:480px){ .wordmark{display:none} }

/* ── page heads / breadcrumb ────────────────────────────────────────── */
.pagehead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
  margin:0 0 clamp(16px,2vw,24px)}
.pagehead .grow{flex:1 1 260px;min-width:0}
.pagehead h1{margin:0;font:800 clamp(21px,2.5vw,29px)/1.15 inherit;
  letter-spacing:-.022em;color:var(--heading)}
.pagehead .sub{margin:6px 0 0;color:var(--muted);font-size:13.5px;max-width:76ch}
.pagehead .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.crumb{display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  margin:0 0 12px;font-size:12.5px;animation:fadein var(--fast) both}
.crumb a,.crumb span{color:var(--muted);text-decoration:none;padding:4px 7px;
  border-radius:7px;transition:var(--fast);white-space:nowrap}
.crumb a:hover{color:var(--green-ink);background:var(--tint-soft)}
.crumb .sep{opacity:.4;padding:0 1px;pointer-events:none}
.crumb .here{color:var(--ink);font-weight:700;background:var(--fill-2)}
.crumb .back{display:inline-flex;align-items:center;gap:5px;font-weight:600;
  color:var(--green-ink);border:1px solid var(--tint-line);background:var(--tint-soft);
  margin-right:8px}
.crumb .back:hover{background:var(--tint)}

/* ── KPI tiles ──────────────────────────────────────────────────────── */
.kpis{display:grid;gap:12px;margin:0 0 clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(178px,100%),1fr))}
.kpi{position:relative;overflow:hidden;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:15px 16px 14px;
  box-shadow:var(--shadow);transition:transform var(--base) var(--ease),
  border-color var(--base) var(--ease);
  animation:rise var(--base) var(--ease-out) both;
  animation-delay:calc(min(var(--i,0),12) * 26ms)}
.kpi:hover{transform:translateY(-3px);border-color:var(--line-hover)}
.kpi::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--green),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--slow) var(--ease-out)}
.kpi:hover::after{transform:scaleX(1)}
.kpi b{display:block;font:800 clamp(22px,2.5vw,29px)/1 inherit;
  letter-spacing:-.03em;color:var(--heading);font-variant-numeric:tabular-nums}
.kpi span{display:block;margin-top:6px;font-size:12px;color:var(--muted);
  font-weight:500;letter-spacing:.005em}
.kpi .delta{display:inline-flex;align-items:center;gap:3px;margin-top:8px;
  font:700 11px/1 inherit;padding:3px 7px;border-radius:99px;
  background:var(--tint);color:var(--green-ink);border:1px solid var(--tint-line)}
.kpi .delta.dn{background:var(--red-tint);color:var(--red);border-color:var(--red-line)}
.kpi.accentbar{border-left:3px solid var(--green)}

/* ── grids / panels ─────────────────────────────────────────────────── */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr))}
.grid.wide{grid-template-columns:repeat(auto-fit,minmax(min(560px,100%),1fr))}
.grid>.card{animation:rise var(--base) var(--ease-out) both;
  animation-delay:calc(min(var(--i,0),12) * 30ms)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:17px 18px;box-shadow:var(--shadow);
  transition:box-shadow var(--base) var(--ease),border-color var(--base) var(--ease),
    transform var(--base) var(--ease)}
.card>h3{margin:0 0 12px;font:700 13.5px/1.3 inherit;color:var(--heading);
  letter-spacing:-.008em;display:flex;align-items:center;gap:8px}
.card>h3 .count{margin-left:auto}
.card.hover:hover{transform:translateY(-2px);border-color:var(--line-hover);
  box-shadow:var(--shadow-lg)}
.card.pad0{padding:0;overflow:hidden}
.card.pad0>h3{padding:16px 18px 0}
/* theme.css gives every .card a green left rail and no padding, which is right
   for a notice and wrong for the dozens of small panels an app screen holds.
   The rail and the zero padding stay for notice cards only.

   Marked with an explicit .notice class rather than detected with :has(>.head).
   We render this markup ourselves, so there is no reason to depend on selector
   support — and where :has() is missing, :has() fails silently and every notice
   on the board gets double padding. */
.card::before{display:none}
.card.notice{padding:0}
.card.notice::before{display:block}
.card.notice>h3{padding:0}

/* Rows that act as links must be reachable without a mouse. makeRowsFocusable()
   adds tabindex and role; this makes the focus ring visible on a table row,
   which an outline alone does not do reliably across borders. */
tr.clickable:focus-visible{outline:none;background:var(--hover);
  box-shadow:inset 0 0 0 2px var(--line-focus)}
.panelnote{color:var(--muted);font-size:12.5px;margin:0 0 12px}
.sectionhead{display:flex;align-items:center;gap:10px;margin:clamp(22px,3vw,34px) 0 13px}
.sectionhead h2{margin:0;font:800 16px/1.2 inherit;color:var(--heading);letter-spacing:-.015em}
.sectionhead .rule{flex:1 1 auto;height:1px;background:var(--line)}

/* ── tables ─────────────────────────────────────────────────────────── */
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
.tablewrap.flush{border:0;border-radius:0;box-shadow:none;background:none}
table{width:100%;border-collapse:collapse;font-size:13.2px}
th,td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line-soft);
  vertical-align:middle}
thead th{position:sticky;top:0;z-index:2;background:var(--fill-2);
  font:700 10.5px/1.2 inherit;text-transform:uppercase;letter-spacing:.085em;
  color:var(--dim);white-space:nowrap;border-bottom:1px solid var(--line)}
tbody tr{transition:background var(--fast)}
tbody tr:hover{background:var(--hover-soft)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--heading);font-weight:650}
.num{text-align:right;font-variant-numeric:tabular-nums}
th.num{text-align:right}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--hover)}
tr.clickable:hover td:first-child{box-shadow:inset 2px 0 0 var(--green)}
tr.dim{opacity:.55}
.rowsub{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:400}

/* ── person cell ────────────────────────────────────────────────────── */
.person{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:800 11px/1 inherit;letter-spacing:.02em;
  background:var(--tint);color:var(--green-ink);border:1px solid var(--tint-line)}
.avatar.lgx{width:60px;height:60px;font-size:19px}
.person .pn{min-width:0}
.person .pn b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* office mark that sits inline in a cell or heading */
.omark{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--tile);
  border:1px solid var(--tile-line);display:inline-flex;align-items:center;
  justify-content:center;overflow:hidden}
.omark img{max-width:78%;max-height:78%;object-fit:contain}
.omark.lgx{width:52px;height:52px;border-radius:14px}
.omark.sm{width:20px;height:20px}
.officecell{display:inline-flex;align-items:center;gap:8px;min-width:0}

/* ── chips / tags ───────────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:4px;font:700 11px/1 inherit;
  padding:4px 9px;border-radius:99px;background:var(--fill-2);color:var(--muted);
  border:1px solid var(--line-soft);white-space:nowrap}
.tag.ok{background:var(--tint);color:var(--green-ink);border-color:var(--tint-line)}
.tag.warn{background:var(--amber-tint);color:var(--amber-ink);border-color:var(--amber-line)}
.tag.bad{background:var(--red-tint);color:var(--red);border-color:var(--red-line)}
.tag.info{background:var(--fill-1);color:var(--body);border-color:var(--line)}
.tag.dot::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:0 0 auto}
.count{font:700 11px/1 inherit;color:var(--green-ink);background:var(--tint);
  border:1px solid var(--tint-line);border-radius:99px;padding:3px 8px}

/* ── filter bar ─────────────────────────────────────────────────────── */
.filterbar{display:flex;flex-direction:column;gap:12px;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 15px;margin:0 0 16px;box-shadow:var(--shadow)}
.filterrow{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.filterrow .lbl{font:700 10.5px/1 inherit;text-transform:uppercase;
  letter-spacing:.1em;color:var(--dim);margin-right:2px;flex:0 0 auto}
.filterrow .fill{flex:1 1 auto}
.filterbar .officebar{margin:0}
.resultline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  color:var(--muted);font-size:12.5px;margin:0 0 12px}
.resultline b{color:var(--ink)}
.clearfilters{appearance:none;border:1px solid var(--line);background:var(--fill-2);
  color:var(--muted);font:600 11.5px/1 inherit;padding:6px 11px;border-radius:99px;
  cursor:pointer;transition:var(--fast)}
.clearfilters:hover{border-color:var(--red-line);color:var(--red)}

/* pill-group filter (teams, statuses) */
.pillset{display:flex;flex-wrap:wrap;gap:7px}
.pillbtn{appearance:none;cursor:pointer;font:600 12px/1 inherit;
  padding:7px 13px;border-radius:99px;border:1px solid var(--line);
  background:var(--fill-2);color:var(--muted);transition:var(--fast);
  display:inline-flex;align-items:center;gap:6px}
.pillbtn:hover{border-color:var(--line-hover);color:var(--ink)}
.pillbtn.on{background:var(--tint);border-color:var(--tint-line);color:var(--green-ink)}
.pillbtn .n{font-size:10.5px;opacity:.85;font-weight:700}

/* ── member detail ──────────────────────────────────────────────────── */
.profhero{position:relative;overflow:hidden;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;
  box-shadow:var(--shadow);margin:0 0 16px;
  animation:rise var(--base) var(--ease-out) both}
.profhero::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--green),var(--mint),transparent)}
.profhero .ph-in{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.profhero .ph-id{flex:1 1 300px;min-width:0}
.profhero h1{margin:0;font:800 clamp(20px,2.4vw,27px)/1.15 inherit;
  letter-spacing:-.022em;color:var(--heading)}
.profhero .role{margin:6px 0 0;color:var(--body);font-size:14px;font-weight:500}
.profhero .metaline{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 0}
.profhero .ph-office{display:flex;align-items:center;gap:11px;
  background:var(--fill-3);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:11px 14px}
.profhero .ph-office .on{font:700 13px/1.2 inherit;color:var(--heading)}
.profhero .ph-office .os{font-size:11.5px;color:var(--muted);margin-top:2px}

.deflist{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.deflist>div{padding:11px 2px;border-bottom:1px solid var(--line-soft);min-width:0}
.deflist dt{font:700 10.5px/1 inherit;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);margin:0 0 5px}
.deflist dd{margin:0;font-size:13.5px;color:var(--ink);word-break:break-word}
.deflist dd.empty-v{color:var(--dim);font-style:italic}

/* ── allocation matrix ──────────────────────────────────────────────── */
.matrixwrap{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  box-shadow:var(--shadow);overflow:auto;max-height:74vh;position:relative}
/* pagedTable supplies .table-shell > .scroll > table. The matrix is the one
   place a horizontal scrollport is correct, and it needs a height cap so the
   pinned header has something to pin against. */
.matrixhost .table-shell{border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.matrixhost .scroll{max-height:72vh;overflow-x:auto;overflow-y:auto}
table.matrix{border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:640px}
table.matrix thead th{position:sticky;top:0;z-index:3;background:var(--fill-2);
  padding:11px 9px;font-size:10.5px;vertical-align:bottom;text-align:center;
  border-bottom:1px solid var(--line);min-width:74px}
table.matrix thead th.corner{left:0;z-index:5;text-align:left;min-width:230px;
  border-right:1px solid var(--line)}
table.matrix tbody th{position:sticky;left:0;z-index:2;background:var(--card);
  text-align:left;font-weight:600;font-size:12.8px;padding:8px 12px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line-soft);
  white-space:nowrap;text-transform:none;letter-spacing:0;color:var(--ink)}
table.matrix tbody tr:hover th{background:var(--hover-soft)}
table.matrix td{padding:5px;text-align:center;border-bottom:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft)}
.mcell{display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-width:52px;height:30px;border-radius:8px;
  font:700 12px/1 inherit;font-variant-numeric:tabular-nums;
  color:var(--muted);background:transparent;transition:var(--fast);cursor:default}
.mcell.v{color:var(--on-green);background:var(--green);
  box-shadow:inset 0 0 0 1px var(--tint-line)}
.mcell.v.l1{background:var(--tint);color:var(--green-ink)}
.mcell.v.l2{background:rgba(0,0,0,0);color:var(--green-ink);
  box-shadow:inset 0 0 0 1.5px var(--tint-line);background:var(--tint)}
.mcell.v.l3{background:var(--mint);color:var(--on-green)}
.mcell.v.l4{background:var(--green);color:var(--on-green)}
.mcell.v.l5{background:var(--deep);color:var(--dead-ink)}
.mcell:hover{transform:scale(1.08)}
.mcell.zero{opacity:.22}
.mtotal{font-weight:800;color:var(--heading)}
.mtotal.off{color:var(--red)}
.legend{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:13px 0 0;font-size:11.5px;color:var(--muted)}
.legend .sw{display:inline-flex;align-items:center;gap:6px}
.legend i{width:22px;height:12px;border-radius:4px;display:inline-block}

/* ── org tree / office cards ────────────────────────────────────────── */
.orgnode{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:12px 14px;margin:0 0 9px;box-shadow:var(--shadow);
  transition:var(--base) var(--ease)}
.orgnode:hover{border-color:var(--line-hover);transform:translateX(2px)}
.orgkids{margin:0 0 0 clamp(12px,2vw,26px);padding-left:15px;
  border-left:1.5px dashed var(--line)}
.orgpct{font:700 11px/1 inherit;color:var(--green-ink);background:var(--tint);
  border:1px solid var(--tint-line);border-radius:99px;padding:3px 7px;margin-left:6px}

.officegrid{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.officecard{position:relative;overflow:hidden;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:0;cursor:pointer;text-align:left;appearance:none;width:100%;
  transition:transform var(--base) var(--ease),border-color var(--base) var(--ease),
    box-shadow var(--base) var(--ease);
  animation:rise var(--base) var(--ease-out) both;
  animation-delay:calc(min(var(--i,0),14) * 28ms)}
.officecard:hover{transform:translateY(-4px);border-color:var(--line-hover);
  box-shadow:var(--shadow-lg)}
.officecard .oc-top{display:flex;align-items:center;gap:13px;padding:16px 17px 13px;
  border-bottom:1px solid var(--line-soft)}
.officecard .oc-name{font:800 15px/1.2 inherit;color:var(--heading);letter-spacing:-.014em}
.officecard .oc-sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.officecard .oc-n{margin-left:auto;font:800 25px/1 inherit;color:var(--green-ink);
  font-variant-numeric:tabular-nums}
.officecard .oc-body{padding:12px 17px 16px;display:flex;flex-direction:column;gap:7px}
.ocrow{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--body)}
.ocrow .k{color:var(--muted);min-width:96px}
.ocrow .v{font-weight:650;color:var(--ink)}
.ocbar{height:6px;border-radius:99px;background:var(--fill-2);overflow:hidden;margin-top:3px}
.ocbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--mint));
  transform-origin:left;animation:bar var(--slow) var(--ease-out) both}

/* team block */
.teamcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;
  animation:rise var(--base) var(--ease-out) both;
  animation-delay:calc(min(var(--i,0),14) * 26ms)}
.teamcard .tc-head{display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--fill-3);border-bottom:1px solid var(--line-soft)}
.teamcard .tc-name{font:800 14px/1.2 inherit;color:var(--heading)}
.teamcard .tc-lead{font-size:11.5px;color:var(--muted);margin-top:3px}
.teamcard .tc-n{margin-left:auto}
.teamcard .tc-body{padding:4px 0}
.memberline{display:flex;align-items:center;gap:10px;padding:9px 16px;
  transition:background var(--fast);cursor:pointer;border:0;background:none;
  width:100%;text-align:left;font:inherit;color:inherit}
.memberline:hover{background:var(--hover)}
.memberline .ml-n{flex:1 1 auto;min-width:0}
.memberline .ml-n b{display:block;font-size:13px;color:var(--heading);font-weight:650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.memberline .ml-n span{display:block;font-size:11.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── letterhead ─────────────────────────────────────────────────────── */
.letterhead{background:#fff;color:#141438;border:1px solid var(--tile-line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);
  max-width:820px;margin:0 auto;padding:0;overflow:hidden}
.lh-band{height:5px;background:linear-gradient(90deg,#00dd8d,#12a76a 55%,#0b7d5f)}
.lh-top{display:flex;align-items:flex-start;gap:18px;
  padding:26px 40px 18px;border-bottom:1px solid rgba(20,32,28,.12)}
.lh-mark{flex:0 0 auto;width:66px;height:66px;border-radius:12px;background:#fff;
  border:1px solid rgba(20,32,28,.12);display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.lh-mark img{max-width:82%;max-height:82%;object-fit:contain}
.lh-id{flex:1 1 auto;min-width:0}
.lh-name{font:800 19px/1.2 inherit;letter-spacing:-.02em;color:#141438}
.lh-legal{font-size:11.5px;color:#4a5a55;margin-top:4px}
.lh-addr{font-size:11.5px;color:#4a5a55;margin-top:2px}
.lh-ref{text-align:right;font-size:11.5px;color:#4a5a55;flex:0 0 auto}
.lh-ref b{display:block;color:#141438;font-size:12.5px;letter-spacing:.02em}
.lh-body{padding:28px 40px 8px;font-size:13.6px;line-height:1.72;color:#20302b}
.lh-body h2{margin:0 0 18px;font:800 15.5px/1.3 inherit;text-transform:uppercase;
  letter-spacing:.06em;color:#141438;text-align:center}
.lh-body p{margin:0 0 13px}
.lh-body .salut{font-weight:650}
.lh-sign{padding:26px 40px 30px;display:flex;justify-content:space-between;
  gap:26px;flex-wrap:wrap}
.lh-sign .sig{min-width:210px}
.lh-sign .line{height:1px;background:#141438;margin:34px 0 7px;opacity:.75}
.lh-sign .who{font-weight:750;font-size:13px;color:#141438}
.lh-sign .ttl{font-size:11.5px;color:#4a5a55;margin-top:2px}
.lh-foot{padding:13px 40px 20px;border-top:1px solid rgba(20,32,28,.12);
  font-size:10.5px;color:#5c6b66;text-align:center;letter-spacing:.02em}
.lh-stamp{position:absolute;right:44px;bottom:96px;opacity:.1;
  font:800 46px/1 inherit;transform:rotate(-14deg);letter-spacing:.06em;
  color:#0b7d5f;pointer-events:none}
.lhtoolbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 16px}

@media print{
  .top,.msheet,.lhtoolbar,.crumb,.pagehead .actions,.appwrap>.filterbar{display:none!important}
  body{background:#fff!important}
  .appwrap{padding:0;max-width:none}
  .letterhead{box-shadow:none;border:0;border-radius:0;max-width:none;margin:0}
  .lh-top,.lh-body,.lh-sign,.lh-foot{padding-left:0;padding-right:0}
  @page{margin:18mm 16mm}
}

/* ── forms ──────────────────────────────────────────────────────────── */
.formgrid{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.formgrid .wide{grid-column:1/-1}
label{display:block;font:600 11.5px/1 inherit;color:var(--muted);margin:0 0 6px;
  letter-spacing:.02em}
input,select,textarea{font:inherit;font-size:13.5px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);width:100%;
  background:var(--fill-1);color:var(--ink);transition:var(--fast)}
input:hover,select:hover,textarea:hover{border-color:var(--line-hover)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--line-focus);
  box-shadow:0 0 0 3px var(--tint)}
textarea{min-height:96px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.checkrow{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--fill-3);
  cursor:pointer;transition:var(--fast)}
.checkrow:hover{border-color:var(--line-hover)}
.checkrow.on{border-color:var(--tint-line);background:var(--tint-soft)}
.checkrow input{width:auto;flex:0 0 auto;margin-top:2px}
.checkrow .ct{font-weight:650;font-size:13px;color:var(--ink)}
.checkrow .cd{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.fieldnote{font-size:11.5px;color:var(--muted);margin:6px 0 0;line-height:1.5}

/* ── buttons (extends theme .btn) ───────────────────────────────────── */
.btn-sm{appearance:none;cursor:pointer;font:600 12px/1 inherit;padding:8px 12px;
  border-radius:9px;border:1px solid var(--line);background:var(--fill-2);
  color:var(--ink);transition:var(--fast);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.btn-sm:hover{border-color:var(--line-hover);background:var(--hover)}
.btn-2{composes:btn-sm}
.btn-danger{background:var(--red);border-color:var(--red);color:var(--dead-ink)}
.btn-danger:hover{filter:brightness(1.08)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btnrow .sp{flex:1 1 auto}

/* ── loading / empty ────────────────────────────────────────────────── */
.skel{border-radius:var(--r);background:linear-gradient(90deg,
  var(--fill-2) 0%,var(--fill-3) 45%,var(--fill-2) 90%);
  background-size:220% 100%;animation:shimmer 1.25s linear infinite}
.skelgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(178px,100%),1fr))}
.skel.tile{height:88px}
.skel.line{height:13px;margin:9px 0}
.skel.block{height:210px;margin-top:14px}
.spin{width:17px;height:17px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--green);
  animation:spin .7s linear infinite;display:inline-block}
.loadbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:99;
  background:linear-gradient(90deg,var(--green),var(--mint));
  transform-origin:left;animation:bar 1s var(--ease-out) both}
.empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:13.5px}
.empty .ei{font-size:26px;opacity:.4;display:block;margin-bottom:9px}
.empty b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:5px}

/* ── pager ──────────────────────────────────────────────────────────── */
.pager{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 12px;flex-wrap:wrap}
.pager-status{font-size:12.5px;color:var(--muted);min-width:130px;text-align:center;
  font-variant-numeric:tabular-nums}

/* ── misc ───────────────────────────────────────────────────────────── */
.muted{color:var(--muted)}
.small{font-size:12.3px}
.tiny{font-size:11.3px}
.nowrap{white-space:nowrap}
.stack{display:flex;flex-direction:column;gap:14px}
.rowflex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.divider{height:1px;background:var(--line);margin:18px 0}
.scrollpane{max-height:420px;overflow:auto}
.anon{display:inline-flex;align-items:center;gap:5px;font:700 10.5px/1 inherit;
  padding:4px 8px;border-radius:99px;background:var(--violet);color:var(--on-violet)}