/* ============================================================
   TATHKARAH — Agent KPI Dashboard
   Brand DNA: deep navy radial field · white · orange accent only
   ============================================================ */

:root {
  /* brand */
  --navy-950: #062338;
  --navy-900: #072F4C;
  --navy: #0A3D62;            /* brand navy field */
  --cerulean: #2394D1;        /* plane blue / glow */
  --brand: #F58220;           /* brand orange — accent ONLY */
  --brand-dark: #D96A0E;
  --brand-soft: rgba(245, 130, 32, 0.12);

  /* light UI */
  --bg: #F2F6FA;
  --card: #FFFFFF;
  --card-2: #F7FAFC;
  --ink: #14344F;             /* primary text */
  --ink-2: #46617A;           /* secondary text */
  --ink-3: #566A7C;           /* muted text (>=4.9:1 on card and page) */
  --line: #E3EBF2;
  --hairline: #D5E0EA;
  --hairline-soft: #E9F0F6;

  /* status (charts use the validated palette) */
  --green: #0E7B52;
  --green-soft: rgba(14, 123, 82, 0.12);
  --ochre: #9A6A00;
  --rust: #C74A1B;
  --rust-soft: rgba(199, 74, 27, 0.10);

  --sans: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(10, 40, 70, .05), 0 10px 28px -14px rgba(10, 40, 70, .14);
  --shadow-lg: 0 2px 6px rgba(10, 40, 70, .08), 0 24px 48px -20px rgba(10, 40, 70, .25);

  /* orange S-curve ribbon (brand device) */
  --ribbon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'%3E%3Cpath d='M-20 150 C 140 40, 300 220, 480 90 S 640 60, 640 60 L 640 220 L -20 220 Z' fill='%23F58220' opacity='0.14'/%3E%3Cpath d='M-20 170 C 150 70, 320 235, 500 110 S 650 85, 650 85 L 650 220 L -20 220 Z' fill='%23F58220' opacity='0.22'/%3E%3C/svg%3E");
}

/* ---------- dark theme (selected steps, chart palette validated on #0F2438) ---------- */
:root[data-theme="dark"] {
  --bg: #0B1B2B;
  --card: #13293E;
  --card-2: #18324B;
  --ink: #E8F0F7;
  --ink-2: #A9BED2;
  --ink-3: #90A7BD;                     /* muted labels still readable on dark cards */
  --line: #1E3B57;
  --hairline: #244565;
  --hairline-soft: #1A3350;

  --green: #35B182;                     /* UI green (charts keep their own validated step) */
  --green-soft: rgba(53, 177, 130, 0.18);
  --ochre: #B88A2C;
  --rust: #E07B52;                      /* brightened so error figures clear 4.5:1 */
  --rust-soft: rgba(224, 123, 82, 0.18);

  --brand-soft: rgba(245, 130, 32, 0.20);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.55);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7);
}
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .hero-meters { background: var(--card); }
:root[data-theme="dark"] .topbar { background: var(--card); border-bottom-color: var(--line); }
:root[data-theme="dark"] table.ledger tbody tr:hover { background: var(--card-2); }
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .month-picker select,
:root[data-theme="dark"] .bulk-table input,
:root[data-theme="dark"] .chat-input input { background: var(--card-2); border-color: var(--hairline); color: var(--ink); }
:root[data-theme="dark"] .lang-btn:not(.on-cover) { color: var(--ink); }
:root[data-theme="dark"] .role-chip.admin { background: var(--brand-soft); color: var(--brand); }
:root[data-theme="dark"] .lock-banner { color: var(--ink); }
/* only SOLID buttons get the accent fill — ghost buttons stay outlined */
:root[data-theme="dark"] .btn:not(.ghost):not(.danger-ghost) {
  background: var(--brand); border-color: var(--brand); color: #08151F;
}
:root[data-theme="dark"] .btn:not(.ghost):not(.danger-ghost):hover { background: var(--brand-dark); }
:root[data-theme="dark"] .btn.ghost {
  background: transparent; color: var(--ink); border-color: var(--hairline);
}
:root[data-theme="dark"] .btn.ghost:hover { background: var(--card-2); border-color: var(--ink-3); }
:root[data-theme="dark"] .btn.danger-ghost { background: transparent; color: var(--rust); border-color: var(--rust); }
:root[data-theme="dark"] .btn.danger-ghost:hover { background: var(--rust-soft); }
:root[data-theme="dark"] .link-btn { color: #7FB2E8; }
:root[data-theme="dark"] .link-btn.danger { color: var(--rust); }
/* small text on a colour fill reads better as dark ink once the fills are light */
:root[data-theme="dark"] .avatar,
:root[data-theme="dark"] .grade-chip,
:root[data-theme="dark"] .stamp,
:root[data-theme="dark"] .bell-badge { color: #08151F; }
:root[data-theme="dark"] .avatar { background: var(--cerulean); }
:root[data-theme="dark"] .grade-chip.none { background: var(--hairline); color: var(--ink); }
:root[data-theme="dark"] .role-chip { background: var(--hairline-soft); color: var(--ink-2); }
:root[data-theme="dark"] .chart-tooltip { background: #061423; }
:root[data-theme="dark"] .tkdp { background: var(--card); border-color: var(--hairline); }
:root[data-theme="dark"] .tkdp-cell { color: var(--ink); }
:root[data-theme="dark"] .tkdp-cell.day.selected { color: #08151F; }
:root[data-theme="dark"] .tkdp-cell.day.off { color: var(--ink-3); }
:root[data-theme="dark"] .bell-panel { background: var(--card); border-color: var(--hairline); }
:root[data-theme="dark"] .bell-head { background: var(--card); }
:root[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.6); }
:root[data-theme="dark"] .ai-body { background: var(--card-2); border-color: var(--hairline); }
:root[data-theme="dark"] .chat-msg .bubble { background: var(--card-2); border-color: var(--hairline); color: var(--ink); }
:root[data-theme="dark"] .chat-msg.user .bubble { background: var(--brand); color: #fff; }
:root[data-theme="dark"] .meter .track,
:root[data-theme="dark"] .scorebar .bar,
:root[data-theme="dark"] .err-bar { background: var(--hairline-soft); border-color: transparent; }
:root[data-theme="dark"] .delta-chip.flat { background: var(--hairline-soft); color: var(--ink-3); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  font-size: 14.5px;
  line-height: 1.5;
}

::selection { background: var(--navy); color: #fff; }

button, input, select, textarea { font: inherit; color: inherit; }

.num, td { font-variant-numeric: tabular-nums; }

/* ---------- type utilities ---------- */
.overline {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   LOGIN — brand navy field
   ============================================================ */
.cover {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 40px 20px;
  position: relative;
  background:
    radial-gradient(1100px 700px at 68% 18%, rgba(35, 148, 209, 0.38), transparent 62%),
    radial-gradient(900px 600px at 12% 95%, rgba(35, 148, 209, 0.14), transparent 55%),
    linear-gradient(160deg, var(--navy-900), var(--navy) 55%, var(--navy-950));
  overflow: hidden;
}
.cover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  background: var(--ribbon); background-size: 100% 100%;
  pointer-events: none;
}
.cover-inner { width: min(420px, 100%); position: relative; z-index: 1; text-align: center; }
.cover-logo { width: min(300px, 70%); margin: 0 auto 8px; display: block; }
.cover-sub {
  color: rgba(255,255,255,.75);
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  margin-bottom: 26px;
}
.cover-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  padding: 30px 30px 26px;
  text-align: left;
}
.cover-card .field label { color: rgba(255,255,255,.65); }
.cover-card .field input {
  width: 100%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 11px 14px;
  transition: border-color .15s, background .15s;
}
.cover-card .field input::placeholder { color: rgba(255,255,255,.4); }
.cover-card .field input:focus {
  outline: none; border-color: var(--brand);
  background: rgba(255,255,255,.12);
}
.cover-foot {
  margin-top: 26px;
  color: rgba(255,255,255,.55);
  font-size: 12.5px; font-weight: 600;
}

/* login name picker */
.login-roster {
  margin-top: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px 18px 14px;
  text-align: start;
}
.roster-title {
  color: rgba(255,255,255,.65); margin-bottom: 10px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.roster-title span { letter-spacing: .02em; text-transform: none; font-weight: 700; opacity: .8; }
.roster-search {
  width: 100%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 9px 13px; font-size: 13.5px;
  margin-bottom: 12px;
}
.roster-search::placeholder { color: rgba(255,255,255,.4); }
.roster-search:focus { outline: none; border-color: var(--brand); }
.roster-grid {
  display: block;
  max-height: 432px; overflow-y: auto;
  padding-inline-end: 6px;
}
/* one shut bar per team: ten bars to scan instead of forty-two names */
.rg-sec + .rg-sec { margin-top: 7px; }
.rg-head {
  position: sticky; top: 0; z-index: 1;
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.78);
  font: 800 10px var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.rg-head:hover { background: rgba(255,255,255,.13); color: #fff; }
.rg-sec.open > .rg-head { background: rgba(255,255,255,.13); color: #fff; }
.rg-title { flex: 1; text-align: start; }
.rg-n {
  background: rgba(255,255,255,.14); color: rgba(255,255,255,.85);
  border-radius: 999px; padding: 2px 8px; letter-spacing: .02em; font-size: 10px;
}
.rg-caret { display: inline-block; font-size: 9px; opacity: .8; transition: transform .16s ease; }
.rg-sec:not(.open) .rg-caret { transform: rotate(-90deg); }
[dir="rtl"] .rg-sec:not(.open) .rg-caret { transform: rotate(90deg); }
.rg-sec:not(.open) .rg-people { display: none; }
.rg-people {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin: 8px 0 12px; padding-inline-start: 4px;
}
.rg-empty { color: rgba(255,255,255,.55); font-size: 13px; padding: 10px 2px; margin: 0; }
@media (max-width: 560px) { .rg-people { grid-template-columns: 1fr; } }
.roster-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 7px 10px;
  cursor: pointer;
  color: #fff; font-size: 13px; font-weight: 700;
  text-align: start;
  transition: background .15s, border-color .15s;
  position: relative;
}
.roster-chip:hover { background: rgba(255,255,255,.14); }
.roster-chip.selected { border-color: var(--brand); background: rgba(245,130,32,.18); }
.roster-chip .avatar { width: 28px; height: 28px; font-size: 11px; background: var(--brand); color: #08151F; flex: none; }
.roster-chip .rc-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.roster-chip .rc-name { overflow-wrap: anywhere; }
.roster-chip .rc-sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.roster-chip .rc-new { color: var(--brand); margin-inline-start: auto; font-size: 10px; flex: none; }
.first-time-hint { color: #FFD9A8 !important; }
.cover-foot .phone { color: #fff; font-weight: 800; letter-spacing: .06em; }
.cover-foot .h24 { color: var(--brand); font-weight: 800; }
.login-error {
  margin: 14px 0 0; padding: 10px 14px;
  border: 1px solid rgba(255, 120, 90, .5);
  color: #FFD9CC; background: rgba(199, 74, 27, .25);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.demo-note {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.8;
  text-align: center;
}
.demo-note code {
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  background: rgba(255,255,255,.1); padding: 1px 6px; border-radius: 4px;
  color: rgba(255,255,255,.8);
}

/* ============================================================
   APP SHELL — navy sidebar + light content
   ============================================================ */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px; flex: none;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  background:
    radial-gradient(500px 320px at 85% 0%, rgba(35, 148, 209, 0.32), transparent 60%),
    linear-gradient(175deg, var(--navy-900), var(--navy) 55%, var(--navy-950));
  color: #fff;
  overflow: hidden;
}
.sidebar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: var(--ribbon); background-size: 100% 100%;
  pointer-events: none;
}
.side-logo { padding: 26px 22px 18px; }
.side-logo img { width: 100%; display: block; }
.side-tag {
  padding: 0 24px 18px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 14px;
}
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.72);
  font-size: 14px; font-weight: 600;
  padding: 11px 14px;
  border-radius: 10px;
  text-align: left;
  position: relative;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.1); color: #fff; }
.nav-item.active::before {
  content: ""; position: absolute; inset-inline-start: -12px; top: 8px; bottom: 8px; width: 4px;
  background: var(--brand); border-radius: 0 4px 4px 0;
}
[dir="rtl"] .nav-item.active::before { border-radius: 4px 0 0 4px; }
.nav-item { text-align: start; }
.nav-item .ico { width: 20px; text-align: center; opacity: .9; }

.side-foot {
  margin-top: auto; position: relative; z-index: 1;
  padding: 18px 22px 20px;
}
.side-user { display: flex; align-items: center; gap: 10px; }
.side-user .avatar { background: var(--brand); color: #08151F; }
.side-user .u-name { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.side-user .u-role { font-size: 11px; color: rgba(255,255,255,.6); text-transform: capitalize; }
.signout {
  margin-top: 12px; width: 100%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  font-size: 12.5px; font-weight: 700;
  padding: 8px 12px; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s;
}
.signout:hover { background: rgba(255,255,255,.16); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px clamp(18px, 3vw, 34px);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.topbar .crumb { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.topbar-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.month-picker { display: flex; align-items: center; gap: 10px; }

.lang-btn {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-weight: 800; font-size: 13px; color: var(--navy);
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.lang-btn:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.cover-tools {
  position: absolute; top: 20px; inset-inline-end: 22px; z-index: 2;
  display: flex; gap: 8px;
}
.lang-btn.on-cover {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff;
}
.lang-btn.on-cover:hover { background: rgba(255,255,255,.2); color: #fff; }
.theme-btn { display: inline-grid; place-items: center; padding: 9px 11px; }
.month-picker select {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-weight: 700; font-size: 13px; color: var(--ink);
  padding: 8px 12px;
  cursor: pointer;
}
.month-picker select:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }

.content { padding: 22px clamp(18px, 3vw, 34px) 60px; }

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  /* sidebar becomes a compact header; navigation moves to a thumb-reachable bottom bar */
  .sidebar {
    width: 100%; height: auto; position: static;
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 14px;
  }
  .sidebar::after { display: none; }
  .side-logo { padding: 0; flex: 1; min-width: 0; }
  .side-logo img { max-width: 168px; }
  .side-tag { display: none; }
  .side-nav { display: none; }               /* replaced by .mobile-nav */
  .side-foot { margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; }
  .side-user .u-name { font-size: 12px; }
  .side-user .u-role { font-size: 10px; }
  .signout { width: auto; margin-top: 0; padding: 7px 10px; font-size: 11.5px; }

  .topbar { padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
  .topbar h1 { font-size: 16px; }
  .topbar .crumb { font-size: 11px; }
  .topbar-tools { gap: 8px; }
  .month-picker .overline { display: none; }
  .content { padding: 16px 14px calc(76px + env(safe-area-inset-bottom)); }

  .hero { gap: 12px; }
  .grid { gap: 12px; }
  .card, .tile { padding: 14px 15px; }
  .section-head { margin: 22px 0 10px; }
  .section-head h2 { font-size: 16px; }
  table.ledger { font-size: 12.5px; }
  table.ledger th, table.ledger td { padding: 8px 9px; }
  .avatar { width: 26px; height: 26px; font-size: 10.5px; }
  .modal { padding: 20px 18px; }
  .bell-panel { position: fixed; inset-inline: 12px; top: 64px; width: auto; }
  .cmp-heads { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cmp-head { flex-direction: column; gap: 4px; font-size: 12px; text-align: center; }
}

/* wide tables become card rows on phones (no horizontal scrolling for numbers) */
@media (max-width: 900px) {
  .resp-table thead { display: none; }
  .resp-table, .resp-table tbody, .resp-table tr, .resp-table td { display: block; width: 100%; }
  .resp-table tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); padding: 10px 13px; margin-bottom: 10px;
  }
  .resp-table tbody tr:hover { background: var(--card); }
  /* stats sit in a compact two-column grid inside each card */
  .resp-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 14px; }
  table.ledger.resp-table td, .resp-table td {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    text-align: start !important; white-space: normal;
    padding: 5px 0; border: none; font-size: 13.5px;
    width: auto; min-width: 0;               /* let a long value wrap, not widen the card */
    overflow-wrap: anywhere;
  }
  .resp-table td::before {
    content: attr(data-label);
    color: var(--ink-3); font-size: 9.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
  }
  .resp-table td[data-label=""]::before { display: none; }
  .resp-table td.rank-cell { display: none; }          /* order is already visual */
  .resp-table td.row-head {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--hairline-soft);
    padding-bottom: 9px; margin-bottom: 4px;
    font-size: 14px; font-weight: 800;
  }
  .resp-table td:last-child { grid-column: 1 / -1; padding-top: 8px; }
  .resp-table td:last-child .link-btn { font-size: 12.5px; }
  .resp-table td.row-head .name-cell { gap: 9px; }
  .resp-table .scorebar .bar { width: 70px; }
  /* only card-ified tables drop the scroller — wide grids (year view) keep it */
  .table-wrap:has(.resp-table) { overflow-x: visible; }
  .card.flat:has(.resp-table) { padding: 0; background: none; border: none; box-shadow: none; }
  .year-table th, .year-table td { padding: 7px 5px; font-size: 12px; }
  .year-table td:first-child, .year-table th:first-child {
    position: sticky; inset-inline-start: 0; background: var(--card); z-index: 1;
    min-width: 150px;
  }
  /* compare: stack the two pickers with VS between them */
  .cmp-pickers { flex-direction: column; align-items: stretch; gap: 8px; }
  .cmp-vs { text-align: center; }
}

/* bottom navigation — phones only */
.mobile-nav { display: none; }
@media (max-width: 900px) {
  .mobile-nav {
    display: flex; position: fixed; z-index: 45;
    inset-inline: 0; bottom: 0;
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px -8px rgba(10,40,70,.28);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    overflow-x: auto; scrollbar-width: none;
  }
  .mobile-nav::-webkit-scrollbar { display: none; }
  .mnav-item {
    flex: 1 0 auto; min-width: 62px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; cursor: pointer;
    color: var(--ink-3); font-size: 10px; font-weight: 700;
    padding: 6px 8px; border-radius: 10px;
    white-space: nowrap;
  }
  .mnav-item.active { color: var(--brand); background: var(--brand-soft); }
  .mnav-item svg { width: 19px; height: 19px; }
}

/* ============================================================
   LAYOUT BLOCKS
   ============================================================ */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 30px 0 14px;
}
.section-head h2 { font-size: 17px; font-weight: 800; }
.section-head .aside { color: var(--ink-3); font-size: 12px; font-weight: 600; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.card.flat { padding: 6px 10px; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid.cols-2 { grid-template-columns: 1fr; }
  /* keep stat tiles two-up on phones — one per screen wastes the viewport */
  .tiles.grid.cols-4, .tiles.grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tiles .tile { padding: 12px 13px; }
  .tiles .tile .value { font-size: 21px; margin-top: 6px; }
  .tiles .tile .sub, .tiles .tile .delta-chip { font-size: 10.5px; }
  .tiles .overline { font-size: 9.5px; letter-spacing: .06em; }
  .grid.cols-3:not(.tiles), .grid.cols-4:not(.tiles) { grid-template-columns: 1fr; }
}

/* ---------- hero: KPI total ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(250px, 330px) 1fr;
  gap: 16px;
  margin-top: 4px;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }

.hero-score {
  border-radius: var(--radius);
  padding: 24px 26px;
  color: #fff;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(420px 280px at 80% 0%, rgba(35, 148, 209, 0.4), transparent 62%),
    linear-gradient(160deg, var(--navy-900), var(--navy) 60%, var(--navy-950));
  box-shadow: var(--shadow-lg);
}
.hero-score::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: var(--ribbon); background-size: 100% 100%;
  pointer-events: none;
}
.hero-score .overline { color: rgba(255,255,255,.6); }
.hero-score .value {
  font-size: clamp(52px, 6vw, 72px);
  font-weight: 900; line-height: 1.05; letter-spacing: -0.02em;
  margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}
.hero-score .value .unit { font-size: .42em; font-weight: 700; color: var(--brand); margin-left: 2px; }
.hero-score .delta { margin-top: 4px; font-size: 12.5px; color: rgba(255,255,255,.75); position: relative; z-index: 1; }
.hero-score .formula {
  margin-top: auto; padding-top: 18px;
  font-size: 11.5px; color: rgba(255,255,255,.55); line-height: 1.6;
  position: relative; z-index: 1;
}

.stamp {
  position: absolute; top: 18px; inset-inline-end: 18px; z-index: 2;
  min-width: 46px; height: 46px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 900; font-size: 19px;
  background: var(--brand); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(245, 130, 32, .8);
}
.stamp.mid { background: #fff; color: var(--navy); box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.stamp.bad { background: var(--rust); box-shadow: 0 6px 16px -6px rgba(199,74,27,.7); }

.hero-meters {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 15px;
}
.meter { display: grid; grid-template-columns: 128px 1fr 128px; align-items: center; gap: 14px; }
@media (max-width: 560px) { .meter { grid-template-columns: 100px 1fr 100px; gap: 8px; } }
.meter .label { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.meter .track {
  position: relative; height: 10px;
  background: var(--hairline-soft);
  border-radius: 99px;
  overflow: hidden;
}
.meter .fill {
  position: absolute; inset: 0; width: 0%;
  border-radius: 99px;
  background: var(--green);
  transition: width .8s cubic-bezier(.2,.8,.2,1);
}
.meter .pct { text-align: end; font-size: 14px; font-weight: 800; color: var(--ink); }
.meter .pct small { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 600; letter-spacing: .01em; }

/* ---------- stat tiles ---------- */
.tiles { margin-top: 16px; }
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px 14px;
}
.tile .value {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800; letter-spacing: -0.01em; line-height: 1.15;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tile .value .unit { font-size: .55em; font-weight: 700; color: var(--ink-3); margin-left: 3px; }
.tile .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; font-weight: 600; }
.delta-chip {
  font-size: 11.5px; font-weight: 800;
  padding: 2px 8px; border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.delta-chip.up { color: var(--green); background: var(--green-soft); }
.delta-chip.down { color: var(--rust); background: var(--rust-soft); }
.delta-chip.flat { color: var(--ink-3); background: var(--hairline-soft); }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 800; font-size: 13.5px;
  background: var(--navy); color: #fff;
  border: 1px solid var(--navy);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, transform .06s;
}
.btn:hover { background: var(--navy-900); }
.btn:active { transform: translateY(1px); }
.btn.block { width: 100%; }
.btn.small { padding: 7px 14px; font-size: 12.5px; }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--hairline); }
.btn.ghost:hover { background: var(--card-2); }
.btn.brand { background: var(--brand); border-color: var(--brand); color: #08151F; }
.btn.brand:hover { background: var(--brand-dark); }
.btn.danger-ghost { background: transparent; color: var(--rust); border-color: var(--rust); }
.btn.danger-ghost:hover { background: var(--rust-soft); }

.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field input::placeholder { color: var(--ink-3); }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.form-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.form-msg { font-size: 12.5px; font-weight: 700; }
.form-msg.ok { color: var(--green); }
.form-msg.err { color: var(--rust); }

.link-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 12px; font-weight: 800;
  color: var(--navy);
}
.link-btn:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.link-btn.danger { color: var(--rust); }
.link-btn.danger:hover { color: var(--rust); }

/* ---------- charts ---------- */
.chart-card { padding: 18px 20px 12px; }
.chart-card h3 { font-size: 15px; font-weight: 800; }
.chart-card .chart-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin: 1px 0 8px; }
.chart-box { width: 100%; direction: ltr; }
.chart-box svg { display: block; width: 100%; height: auto; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 6px; }
.legend .key {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-2); font-weight: 700;
}
.legend .swatch { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }

.chart-tooltip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--navy-950); color: #fff;
  font-size: 12px; line-height: 1.6; font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-width: 260px;
  font-variant-numeric: tabular-nums;
}
.chart-tooltip .tt-date { font-weight: 800; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 3px; margin-bottom: 4px; display: block; }
.chart-tooltip .tt-row { display: flex; justify-content: space-between; gap: 16px; }
.chart-tooltip .tt-row .k { opacity: .8; display: inline-flex; align-items: center; gap: 6px; }
.chart-tooltip .tt-row .swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.ledger th {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); text-align: end;
  padding: 11px 12px;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
table.ledger th:first-child, table.ledger td:first-child { text-align: start; }
table.ledger td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  text-align: end;
  white-space: nowrap;
  font-weight: 600;
}
table.ledger .ltr-cell { direction: ltr; unicode-bidi: isolate; }
table.ledger td:first-child { font-weight: 700; }
table.ledger tbody tr:last-child td { border-bottom: none; }
table.ledger tbody tr:hover { background: var(--card-2); }
table.ledger .name-cell { display: flex; align-items: center; gap: 10px; }
table.ledger .muted { color: var(--ink-3); font-weight: 600; }

.rank-cell { color: var(--ink-3); font-weight: 800 !important; }

.scorebar { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.scorebar .bar {
  width: 92px; height: 8px;
  background: var(--hairline-soft);
  border-radius: 99px; overflow: hidden;
  position: relative;
}
.scorebar .bar i {
  position: absolute; inset: 0; width: 0%;
  background: var(--green); display: block; border-radius: 99px;
}
.scorebar .bar i.under { background: var(--rust); }

.grade-chip {
  display: inline-grid; place-items: center;
  min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 50%;
  font-weight: 900; font-size: 13.5px;
  color: #fff; background: var(--green);
}
.grade-chip.mid { background: var(--ochre); }
.grade-chip.bad { background: var(--rust); }
.grade-chip.none { background: var(--hairline); color: var(--ink-2); font-size: 11px; }

.field-hint { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-top: 6px; line-height: 1.5; }
.needs-pass { font-size: 10.5px; color: var(--ochre); font-weight: 700; margin-top: 2px; }

.role-chip {
  display: inline-block; padding: 3px 12px;
  border-radius: 99px; font-size: 11.5px; font-weight: 800;
  background: var(--hairline-soft); color: var(--ink-2);
}
.role-chip.admin { background: var(--brand-soft); color: #8A4008; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.on { background: var(--green); }
.status-dot.off { background: var(--ink-3); }

.avatar.on-brand { background: var(--brand); color: #08151F; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
  font-weight: 800; font-size: 12.5px;
  color: #fff; background: var(--navy);
}

/* ---------- mistakes breakdown ---------- */
.err-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.err-row {
  display: grid; grid-template-columns: minmax(160px, 230px) 1fr 42px;
  align-items: center; gap: 12px;
}
.err-label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.err-ar {
  font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-inline-start: 6px;
  direction: rtl; unicode-bidi: isolate;
}
.err-bar {
  height: 8px; background: var(--hairline-soft);
  border-radius: 99px; overflow: hidden; position: relative;
}
.err-bar i {
  position: absolute; inset: 0; width: 0%;
  background: var(--rust); display: block; border-radius: 99px;
  transition: width .7s cubic-bezier(.2,.8,.2,1);
}
.err-count { text-align: end; font-size: 13.5px; font-weight: 800; color: var(--ink-3); }
.err-count.hot { color: var(--rust); }
td.errcell { color: var(--rust) !important; font-weight: 800 !important; }

/* ---------- panels / modal ---------- */
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .panel-grid { grid-template-columns: 1fr; } }

.empty-note {
  padding: 34px 20px; text-align: center;
  color: var(--ink-3); font-size: 14px; font-weight: 600;
}

.modal-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(6, 35, 56, .55);
  display: grid; place-items: center; padding: 20px;
}
.modal {
  width: min(480px, 100%);
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 26px 28px;
  max-height: 90vh; overflow-y: auto;
}
.modal h3 { font-size: 18px; font-weight: 800; margin-bottom: 2px; }
.modal .modal-sub { color: var(--ink-3); font-size: 12.5px; font-weight: 600; margin-bottom: 18px; }

/* ---------- sparkline, photos, locks, compare, year ---------- */
.spark { width: 60px; height: 18px; display: block; }
.spark-cell { padding-block: 4px !important; }
.spark-empty { color: var(--ink-3); }

.avatar.has-photo { overflow: hidden; background: var(--hairline) !important; }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-row { display: flex; align-items: center; gap: 14px; }
.photo-row .avatar { width: 52px; height: 52px; font-size: 17px; }

.lock-banner {
  display: flex; align-items: center; gap: 8px;
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 16px;
  font-size: 13.5px; font-weight: 600;
}

.cmp-pickers { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cmp-select {
  flex: 1; min-width: 170px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 9px 12px; font-weight: 700; font-size: 14px;
}
.cmp-vs { font-weight: 800; color: var(--ink-3); font-size: 12px; text-transform: uppercase; }
.cmp-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }
.cmp-head { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 14px; }
.cmp-table td, .cmp-table th { text-align: center !important; width: 40%; }
.cmp-table th { width: 20%; border-bottom: 1px solid var(--hairline-soft); font-size: 10.5px; }
.cmp-table td { font-weight: 700; font-size: 15px; }
.cmp-table td.cmp-win { color: var(--green); }
.cmp-table td.cmp-win::after { content: ' ▲'; font-size: 9px; vertical-align: middle; }

.year-table th, .year-table td { padding: 8px 6px; text-align: center; }
.year-table td:first-child, .year-table th:first-child { text-align: start; }
.yr-cell {
  display: inline-grid; place-items: center;
  min-width: 30px; padding: 3px 7px; border-radius: 6px;
  font-weight: 800; font-size: 12px;
  background: var(--green-soft); color: var(--green);
}
.yr-cell.mid { background: rgba(154,106,0,.15); color: var(--ochre); }
.yr-cell.bad { background: var(--rust-soft); color: var(--rust); }
.yr-cell.none { background: var(--hairline-soft); color: var(--ink-3); }

/* ---------- date picker ---------- */
.tkdp-wrap { position: relative; display: block; }
.tkdp-input { cursor: pointer; padding-inline-end: 34px !important; }
.tkdp-ico {
  position: absolute; top: 50%; inset-inline-end: 12px; transform: translateY(-50%);
  color: var(--ink-3); pointer-events: none;
}
.tkdp {
  position: fixed; z-index: 90;        /* portalled to <body> — immune to card stacking contexts */
  width: 274px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  direction: ltr; /* calendar grid stays LTR; labels are localized */
}
[dir="rtl"] .tkdp { direction: rtl; }
.tkdp-head {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(160deg, var(--navy-900), var(--navy));
  color: #fff; border-radius: var(--radius-sm);
  padding: 8px 8px; margin-bottom: 8px;
}
.tkdp-title { font-weight: 800; font-size: 13.5px; }
.tkdp-nav {
  background: rgba(255,255,255,.12); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 7px;
  font-size: 17px; line-height: 1; cursor: pointer;
}
.tkdp-nav:hover { background: var(--brand); }
.tkdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tkdp-cell {
  height: 32px; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: none; border: none; border-radius: 7px;
}
.tkdp-cell.wd { font-size: 10.5px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; height: 24px; }
.tkdp-cell.day { cursor: pointer; }
.tkdp-cell.day:hover { background: var(--brand-soft); }
.tkdp-cell.day.off { color: var(--ink-3); }
.tkdp-cell.wd.off { color: var(--rust); opacity: .7; }
.tkdp-cell.day.today { box-shadow: inset 0 0 0 1.5px var(--brand); }
.tkdp-cell.day.selected { background: var(--brand); color: #08151F; font-weight: 800; }
.tkdp-foot {
  display: flex; justify-content: space-between;
  padding: 8px 6px 2px; margin-top: 4px;
  border-top: 1px solid var(--hairline-soft);
}

/* ---------- team cards ---------- */
.team-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.team-card {
  text-align: start; cursor: pointer; font: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px;
  transition: border-color .15s, transform .06s;
}
.team-card:hover { border-color: var(--brand); }
.team-card:active { transform: translateY(1px); }
.team-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); }
.tc-name { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.tc-lead { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
.tc-figs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.tc-figs span { display: flex; flex-direction: column; font-size: 10.5px; color: var(--ink-3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tc-figs b { font-size: 15px; color: var(--ink); font-weight: 800; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.tc-figs b.errcell { color: var(--rust); }
:root[data-theme="dark"] .team-card { background: var(--card); }

/* ---------- team controls ---------- */
.team-select {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-weight: 700; font-size: 12.5px; color: var(--ink); padding: 6px 10px; cursor: pointer;
}
.team-select:focus { outline: none; border-color: var(--brand); }
.team-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.team-toggle input { accent-color: var(--brand); cursor: pointer; }
tr.team-row td {
  background: var(--hairline-soft); font-weight: 800; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  padding: 7px 12px; text-align: start;
}
:root[data-theme="dark"] .team-select { background: var(--card-2); border-color: var(--hairline); color: var(--ink); }

/* ---------- notifications bell ---------- */
.bell-wrap { position: relative; }
.bell-btn { position: relative; display: inline-flex; align-items: center; padding: 9px 12px; }
.bell-badge {
  position: absolute; top: -6px; inset-inline-end: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--rust); color: #fff;
  border-radius: 99px; font-size: 10.5px; font-weight: 800;
}
.bell-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
  width: min(380px, 86vw); max-height: 60vh; overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.bell-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  position: sticky; top: 0; background: var(--card);
}
.bell-item { padding: 11px 16px; border-bottom: 1px solid var(--hairline-soft); }
.bell-item:last-child { border-bottom: none; }
.bell-item.unread { background: var(--brand-soft); }
.bell-item.digest { border-inline-start: 3px solid var(--brand); }
.bell-text { font-size: 13px; font-weight: 600; line-height: 1.55; }
.bell-ts { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 3px; }

/* ---------- AI assistant chat ---------- */
.chat-card { display: flex; flex-direction: column; height: min(64vh, 640px); padding: 0; overflow: hidden; }
.chat-log { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg { display: flex; }
.chat-msg.user { justify-content: flex-end; }
.chat-msg .bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px; line-height: 1.65;
  white-space: pre-wrap;
  background: var(--card-2); border: 1px solid var(--hairline-soft);
}
.chat-msg.user .bubble { background: var(--navy); color: #fff; border: none; }
.chat-input {
  display: flex; gap: 10px;
  padding: 14px 16px; border-top: 1px solid var(--line);
  background: var(--card);
}
.chat-input input {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 14px;
}
.chat-input input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ---------- AI insights ---------- */
.ai-body {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--card-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  font-size: 13.5px; line-height: 1.75;
}

/* ---------- bulk entry grid ---------- */
.bulk-table input {
  width: 84px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  text-align: end;
}
.bulk-table input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.bulk-table td { padding: 6px 6px; }

/* ---------- print report ---------- */
@media print {
  .sidebar, .topbar, .no-print, .link-btn, .btn, .panel-grid,
  #ai-card, .signout { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .content { padding: 0; }
  .card, .tile, .hero-meters { box-shadow: none; break-inside: avoid; }
  .hero-score {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    break-inside: avoid;
  }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  table.ledger td, table.ledger th { padding: 5px 8px; }
  @page { margin: 14mm; }
}

/* page-load reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal > * { animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
  .reveal > *:nth-child(2) { animation-delay: .05s; }
  .reveal > *:nth-child(3) { animation-delay: .1s; }
  .reveal > *:nth-child(4) { animation-delay: .15s; }
  .reveal > *:nth-child(5) { animation-delay: .2s; }
  .reveal > *:nth-child(6) { animation-delay: .25s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

.loading {
  padding: 80px 0; text-align: center;
  color: var(--ink-3); font-weight: 600; font-size: 15px;
}

/* ============================================================
   ORG VIEW — the task board's chart, with this month on it
   ============================================================ */
.org-band {
  display: grid; gap: 12px; margin-bottom: 18px;
  padding: 16px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.org-node {
  position: relative;                       /* the riser to the spine hangs off this */
  display: inline-flex; align-items: center; gap: 10px; text-align: start;
  padding: 9px 15px 9px 10px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--hairline);
  font: inherit; color: var(--ink); cursor: pointer;
  max-width: 100%;
}
.org-node:hover { border-color: var(--brand); }
.org-node.head { background: var(--navy); border-color: var(--navy); color: #fff; }
.org-node.head .on-name { color: #fff; }
.org-node.head .on-role { color: rgba(255,255,255,.78); }
.on-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.on-name { font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.on-role {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.on-fig { margin-inline-start: 6px; font-weight: 800; font-size: 13px; color: var(--ink-2); }

/* team blocks */
.team-block { margin-bottom: 14px; overflow: hidden; }
.tb-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; cursor: pointer;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border-bottom: 1px solid var(--line);
}
.tb-head:hover { background: var(--card-2); }
.tb-lead { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.tb-title { display: flex; flex-direction: column; line-height: 1.3; }
.tb-team { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.tb-leader { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.tb-figs {
  display: flex; gap: 26px; flex-wrap: wrap; margin-inline-start: auto; align-items: flex-end;
}
.tb-figs > span {
  display: flex; flex-direction: column-reverse; line-height: 1.25;
  text-align: end; min-width: 62px;
}
.tb-figs > span:last-child { min-width: 46px; }
.tb-figs b {
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tb-figs em {
  font-style: normal; font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.tb-caret { font-size: 12px; color: var(--ink-3); margin-inline-start: 10px; }
/* says a figure is not final without spending a line on it */
.prov {
  display: inline-block; vertical-align: 2px; margin-inline-start: 5px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
:root[data-theme="dark"] .prov { color: var(--brand); }
.team-block.closed .tb-body { display: none; }
.team-block.closed .tb-head { border-bottom: 0; }

.tb-body { padding: 4px 0 6px; }
.ag-line {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 26px minmax(120px, 1.15fr) minmax(100px, 1fr) 44px 50px 48px 52px 50px 46px 72px 82px 52px;
  padding: 9px 16px; border-bottom: 1px solid var(--hairline-soft);
}
.ag-line:last-child { border-bottom: 0; }
.ag-line:hover { background: var(--card-2); }
.ag-rank { font-weight: 800; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ag-name { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13.5px; min-width: 0; }
.ag-name span.nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-num { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; text-align: end; }
.ag-num.soft { color: var(--ink-3); font-weight: 600; }
.ag-head {
  display: grid; gap: 12px;
  grid-template-columns: 26px minmax(120px, 1.15fr) minmax(100px, 1fr) 44px 50px 48px 52px 50px 46px 72px 82px 52px;
  padding: 7px 16px; border-bottom: 1px solid var(--line);
}
.ag-head em {
  font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); text-align: end;
}
.ag-head em:nth-child(-n+3) { text-align: start; }
.ag-head em:nth-child(4) { text-align: center; }
.ag-line > :nth-child(4) { text-align: center; }

@media (max-width: 900px) {
  .ag-line, .ag-head { grid-template-columns: 20px 1fr 76px 40px; gap: 9px; padding-inline: 12px; }
  .ag-line > :nth-child(n+5), .ag-head > :nth-child(n+5) { display: none; }
  .tb-figs { gap: 14px; width: 100%; margin-inline-start: 0; }
  /* a name is the one thing that must stay readable — let it use a second line
     rather than becoming "Abdul…" */
  .ag-name span.nm { white-space: normal; overflow: visible; line-height: 1.25; }
  .ag-name { align-items: center; gap: 8px; }
  .ag-name .avatar { width: 28px; height: 28px; font-size: 11px; }
}
/* a team leader has no achievement column, so the row is one narrower */

.seg-toggle { display: inline-flex; border: 1px solid var(--hairline); border-radius: 999px; overflow: hidden; }
.seg-toggle button {
  border: 0; background: var(--card); color: var(--ink-2);
  font: 700 11.5px var(--sans); padding: 6px 14px; cursor: pointer;
}
.seg-toggle button + button { border-inline-start: 1px solid var(--hairline); }
.seg-toggle button.on { background: var(--navy); color: #fff; }
.seg-toggle button:not(.on):hover { background: var(--card-2); color: var(--ink); }

/* leadership page — score slot held open until the rule is decided */
.rule-banner {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 16px; margin-bottom: 18px;
  border-radius: var(--radius); border: 1px dashed var(--hairline);
  background: var(--brand-soft); color: var(--ink);
  border-inline-start: 3px solid var(--brand);
}
.rule-banner strong { font-size: 13.5px; font-weight: 800; }
.rule-banner span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.score-pending {
  display: inline-flex; flex-direction: column; line-height: 1.15;
  font-weight: 800; font-size: 15px; color: var(--ink-3);
}
.score-pending em {
  font-style: normal; font-size: 9.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}

.tier-label {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-inline-end: 4px;
}
.org-node.plain { cursor: default; background: transparent; border-style: dashed; }
.org-node.plain:hover { border-color: var(--hairline); }

/* team leaders read performance, never money — one column fewer */
.team-block.no-money .ag-line,
.team-block.no-money .ag-head {
  grid-template-columns: 26px minmax(120px, 1.15fr) minmax(100px, 1fr) 44px 50px 48px 52px 50px 46px 72px 52px;
}
/* a dot marks a Daily Task score a manager typed rather than one the board produced */
.by-hand { font-style: normal; color: var(--brand); margin-inline-start: 3px; font-weight: 900; }
@media (max-width: 900px) {
  .team-block.no-money .ag-line, .team-block.no-money .ag-head { grid-template-columns: 22px 1fr 92px 46px; }
}

/* ---- the pyramid ---------------------------------------------------------
   Each rank is a grid of n equal columns with its node centred in its cell.
   That geometry is the whole trick: the centre of the first column sits at
   50%/n from the left edge and the last the same from the right, so the spine
   can be pinned to exactly those two points however wide the nodes are.      */
.org-pyr { display: flex; flex-direction: column; }
.otier {
  display: grid; grid-template-columns: repeat(var(--n), 1fr);
  justify-items: center; align-items: stretch; position: relative;
}
.otier + .otier { margin-top: 40px; }
/* stem dropping out of the rank above */
.otier + .otier::before {
  content: ''; position: absolute; top: -40px; inset-inline-start: 50%;
  width: 2px; height: 20px; background: var(--hairline); transform: translateX(-50%);
}
/* spine joining this rank, first centre to last centre */
.otier + .otier::after {
  content: ''; position: absolute; top: -20px;
  inset-inline-start: calc(50% / var(--n)); inset-inline-end: calc(50% / var(--n));
  height: 2px; background: var(--hairline);
}
.otier.solo + .otier::after, .otier + .otier.solo::after { display: none; }
/* riser from each node up to the spine */
.otier + .otier > .org-node::after {
  content: ''; position: absolute; top: -20px; inset-inline-start: 50%;
  width: 2px; height: 20px; background: var(--hairline); transform: translateX(-50%);
}

/* the accounts team sits beside the chain of command, not under it */
.otier-aside {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--hairline);
}
.aside-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tier-label {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}

/* narrow screens: stack the ranks and drop the joinery rather than squash it */
@media (max-width: 780px) {
  .otier { grid-template-columns: 1fr; gap: 8px; }
  .otier + .otier { margin-top: 26px; }
  .otier + .otier::after, .otier + .otier > .org-node::after { display: none; }
  .otier + .otier::before { top: -26px; height: 14px; }
}

/* borrowed eyes — unmistakable, and it says read-only */
.viewas-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--navy); color: #fff;
  font-size: 12.5px; font-weight: 700;
}
.viewas-bar .btn {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); color: #fff;
  margin-inline-start: auto;
}
.viewas-bar .btn:hover { background: rgba(255,255,255,.26); }

/* ============================================================
   ROSTER — find a person, see what they are, act on them
   ============================================================ */
.roster-tools {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.roster-search {
  flex: 1 1 260px; max-width: 380px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--card); color: var(--ink);
  font: 500 13px var(--sans);
}
.roster-search:focus { outline: none; border-color: var(--brand); }
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--hairline); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 6px 13px; cursor: pointer;
  font: 700 11.5px var(--sans); white-space: nowrap;
}
.chip b { font-weight: 800; color: var(--ink-3); margin-inline-start: 3px; }
.chip:hover { border-color: var(--brand); color: var(--ink); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip.on b { color: rgba(255,255,255,.72); }

/* name + the identifiers that tell people apart, on two lines */
.who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.who-name { font-weight: 700; }
.who-sub { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.roster-table td { vertical-align: middle; }

/* actions: the two everyday ones, the rest behind a menu */
.row-actions { white-space: nowrap; }
.row-actions .btn.xs { padding: 4px 10px; font-size: 11.5px; margin-inline-end: 5px; }
.row-menu { display: inline-block; position: relative; }
.row-menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 3px 9px; border-radius: 7px; color: var(--ink-3);
  font-weight: 800; letter-spacing: 1px;
}
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover { background: var(--card-2); color: var(--ink); }
.row-menu[open] > summary { background: var(--card-2); color: var(--ink); }
.menu-pop {
  position: absolute; inset-inline-end: 0; top: calc(100% + 5px); z-index: 40;
  min-width: 170px; padding: 5px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 10px; box-shadow: var(--shadow-lg);
}
.menu-item {
  display: block; width: 100%; text-align: start;
  padding: 8px 11px; border: 0; border-radius: 7px; background: none;
  font: 600 12.5px var(--sans); color: var(--ink); cursor: pointer;
}
.menu-item:hover:not(:disabled) { background: var(--card-2); }
.menu-item.danger { color: var(--rust); }
.menu-item:disabled { opacity: .4; cursor: default; }

/* move-to-team picker */
.team-choices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.team-choice {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--card-2);
  font: 600 13px var(--sans); color: var(--ink);
}
.team-choice:hover { border-color: var(--brand); }
.team-choice.on { border-color: var(--navy); background: var(--card); box-shadow: inset 0 0 0 1px var(--navy); }
.team-choice input { accent-color: var(--navy); }

/* targets screen — a grid of numbers you can fill fast */
/* Four inputs across a full-width table leaves the columns adrift. Let the name
   column swallow the slack and everything else sit to its own width. */
.tg-table th:first-child, .tg-table td:first-child { width: 100%; }
.tg-table th:not(:first-child), .tg-table td:not(:first-child) { width: 1%; white-space: nowrap; }
.tg-table th:not(:first-child):not(:nth-child(2)) { text-align: end; padding-inline-end: 22px; }
.tg-table td:nth-child(2) { padding-inline-end: 26px; }
.tg-table td:not(:first-child):not(:nth-child(2)) { padding-inline-start: 14px; }
.tg-in {
  width: 116px; padding: 6px 9px;
  border: 1px solid var(--hairline); border-radius: 7px;
  background: var(--card); color: var(--ink);
  font: 600 12.5px var(--sans); text-align: end; font-variant-numeric: tabular-nums;
}
.tg-in:focus { outline: none; border-color: var(--brand); }
.tg-in:disabled { opacity: .5; }

/* audit log — action families readable at a glance */
.act-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
  background: var(--card-2); color: var(--ink-2); border: 1px solid var(--hairline);
}
.act-chip.people { background: rgba(35,148,209,.12); color: #1B6E9B; border-color: rgba(35,148,209,.28); }
.act-chip.data   { background: var(--green-soft); color: var(--green); border-color: rgba(14,123,82,.28); }
.act-chip.setup  { background: var(--brand-soft); color: var(--brand-dark); border-color: rgba(245,130,32,.3); }
.act-chip.entry  { background: rgba(106,61,150,.12); color: #5B357F; border-color: rgba(106,61,150,.26); }
:root[data-theme="dark"] .act-chip.people { color: #6EC1EA; }
:root[data-theme="dark"] .act-chip.setup  { color: var(--brand); }
:root[data-theme="dark"] .act-chip.entry  { color: #B999D8; }
.audit-table td { vertical-align: middle; }
.roster-tools label.aside { display: flex; align-items: center; gap: 6px; }

/* ============================================================
   FROM → TO RANGE CALENDAR
   A stack of months you scroll, two taps to set the ends.
   ============================================================ */
.tkr-ov {
  position: fixed; inset: 0; z-index: 120; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(6, 35, 56, .55); backdrop-filter: blur(2px);
}
.tkr-ov.show { display: flex; }
.tkr-panel {
  width: min(420px, 100%); max-height: min(80vh, 680px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 16px; box-shadow: var(--shadow-lg);
}
.tkr-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; font: 800 14px var(--sans); color: var(--ink);
  border-bottom: 1px solid var(--line); background: var(--card-2);
}
.tkr-x {
  border: 0; background: none; cursor: pointer;
  color: var(--ink-3); font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.tkr-x:hover { background: var(--hairline-soft); color: var(--ink); }
/* The scrolling middle of a flex column needs both of these, or it sizes to its
   content and the panel decides how much of it you get — which left the opening
   scroll clamped to a few pixels and the calendar showing the oldest month. */
.tkr-cal {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; padding: 6px 14px 12px;
}
.tkr-mo { padding-top: 10px; }
.tkr-mh {
  position: sticky; top: 0; z-index: 1; padding: 7px 2px 9px;
  background: var(--card); font: 800 12.5px var(--sans); color: var(--ink-2);
}
.tkr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.tkr-dow {
  text-align: center; font: 800 9.5px var(--sans); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .04em; padding-bottom: 4px;
}
.tkr-d {
  display: flex; align-items: center; justify-content: center;
  height: 34px; border-radius: 9px; cursor: pointer;
  font: 600 12.5px var(--sans); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tkr-d:hover:not(.tkr-off):not(.tkr-pad):not(.tkr-a):not(.tkr-b):not(.tkr-in) { background: var(--card-2); }
.tkr-d.tkr-in:hover { background: rgba(245, 130, 32, .3); }
.tkr-d.tkr-a:hover, .tkr-d.tkr-b:hover { background: var(--navy-900); color: #fff; }
.tkr-pad { cursor: default; }
.tkr-off { color: var(--ink-3); opacity: .35; cursor: default; }
.tkr-today { box-shadow: inset 0 0 0 1px var(--hairline); font-weight: 800; }
.tkr-in { background: var(--brand-soft); border-radius: 0; }
.tkr-a, .tkr-b { background: var(--navy); color: #fff; font-weight: 800; }
.tkr-a { border-start-end-radius: 0; border-end-end-radius: 0; }
.tkr-b { border-start-start-radius: 0; border-end-start-radius: 0; }
.tkr-a.tkr-b { border-radius: 9px; }
.tkr-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--card-2);
}
.tkr-sel { flex: 1 1 190px; font: 600 12.5px var(--sans); color: var(--ink); }
.tkr-sel b { font-weight: 800; }
.tkr-hint { color: var(--ink-3); }
/* the button that opens it, in place of two boxes */
.tkr-open {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--card); color: var(--ink);
  font: 600 12.5px var(--sans);
}
.tkr-open:hover { border-color: var(--brand); }
.tkr-open .tkr-cap { color: var(--ink-3); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }

/* month mode — four across, so a year reads as a block */
.tkr-mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.tkr-m {
  display: flex; align-items: center; justify-content: center;
  height: 40px; border-radius: 10px; cursor: pointer;
  font: 700 12.5px var(--sans); color: var(--ink);
}
.tkr-m:hover:not(.tkr-off):not(.tkr-a):not(.tkr-b):not(.tkr-in) { background: var(--card-2); }
.tkr-m.tkr-in:hover { background: rgba(245, 130, 32, .3); }
.tkr-m.tkr-a:hover, .tkr-m.tkr-b:hover { background: var(--navy-900); color: #fff; }
.tkr-m.tkr-off { color: var(--ink-3); opacity: .35; cursor: default; }
.tkr-m.tkr-in { background: var(--brand-soft); border-radius: 0; }
.tkr-m.tkr-a, .tkr-m.tkr-b { background: var(--navy); color: #fff; font-weight: 800; }
.tkr-m.tkr-a { border-start-end-radius: 0; border-end-end-radius: 0; }
.tkr-m.tkr-b { border-start-start-radius: 0; border-end-start-radius: 0; }
.tkr-m.tkr-a.tkr-b { border-radius: 10px; }

.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* month readiness — what is still outstanding, and who */
.ms-list { padding: 4px 0; }
.ms-row {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 22px 172px 62px 90px minmax(0, 1fr);
  padding: 9px 16px; border-bottom: 1px solid var(--hairline-soft);
}
.ms-row:last-child { border-bottom: 0; }
.ms-tick { font-weight: 900; color: var(--ink-3); text-align: center; }
.ms-row.done .ms-tick { color: var(--green); }
.ms-label { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-count { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 12.5px; color: var(--ink-2); text-align: end; }
.ms-bar { height: 6px; border-radius: 999px; background: var(--hairline-soft); overflow: hidden; }
.ms-bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.ms-row.done .ms-bar i { background: var(--green); }
.ms-who { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) {
  .ms-row { grid-template-columns: 22px 1fr 62px; }
  .ms-row > :nth-child(n+4) { display: none; }
}
.ms-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-top: 1px solid var(--hairline-soft);
}
.ms-foot .aside { font-size: 12px; }

/* ---------- phone: things a thumb has to hit, and fields iOS likes to zoom ---------- */
@media (max-width: 900px) {
  /* Safari zooms the whole page when a focused field is under 16px. Keeping every
     field at 16px on a phone is the only way to stop it. */
  input, select, textarea,
  .field input, .field select, .field textarea,
  .cover-card .field input,
  .shell input, .shell select, .shell textarea,
  .cmp-select, #month-select,
  .tg-in, .roster-search, .team-select { font-size: 16px; }
  .tg-in { width: 100%; max-width: 130px; padding: 9px 10px; }

  /* filter chips and inline text buttons were 18–28px tall — too small to hit reliably.
     The negative margin keeps them looking the same while the tap area grows. */
  .chip { padding: 9px 14px; font-size: 12.5px; }
  .link-btn { padding: 9px 6px; margin: -9px -6px; }
  .resp-table td:last-child .link-btn { font-size: 13px; }
  .resp-table td:last-child { display: flex; flex-direction: row; gap: 18px; align-items: center; }
  .roster-tools .btn.small, .section-head .btn.small { padding: 9px 13px; }
  .seg-toggle button { padding: 10px 16px; font-size: 12.5px; }
  /* the checkbox itself stays small, so the whole label becomes the target */
  .team-toggle { padding: 8px 4px; }
  .team-toggle input { width: 18px; height: 18px; }
  /* a scroller inside a scrolling page is awkward under a thumb — let the bars run
     down the page instead */
  .roster-grid { max-height: none; overflow-y: visible; padding-inline-end: 0; }
}


/* ---------- roster, in the same shut bars as the sign-in picker ---------- */
.roster-bars { display: block; }
.rb-sec + .rb-sec { margin-top: 8px; }
.rb-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--ink-2);
  font: 800 10.5px var(--sans); letter-spacing: .09em; text-transform: uppercase;
}
.rb-head:hover { border-color: var(--brand); color: var(--ink); }
.rb-sec.open > .rb-head {
  border-end-start-radius: 0; border-end-end-radius: 0;
  border-bottom-color: transparent; color: var(--ink);
}
.rb-title { flex: 1; text-align: start; }
.rb-sec .rg-n { background: var(--hairline-soft); color: var(--ink-2); }
.rb-sec:not(.open) .rb-body { display: none; }
.rb-body {
  margin: 0; border-start-start-radius: 0; border-start-end-radius: 0;
}
.rb-body table.ledger { margin: 0; }
@media (max-width: 900px) {
  .rb-head { padding: 12px 14px; }
  .rb-body { padding: 0; background: none; border: none; box-shadow: none; }
}

/* HR correcting an attendance figure the sheet got wrong */
.att-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.att-grid .field { margin: 0; }
.att-grid .link-btn { margin-top: 4px; font-size: 11px; font-weight: 700; }
.att-fixed { position: relative; }
.att-fixed i {
  font-style: normal; color: var(--brand); font-size: 13px; font-weight: 900;
  margin-inline-start: 3px; vertical-align: 1px;
}
@media (max-width: 560px) { .att-grid { grid-template-columns: 1fr; } }

/* Who someone is in the company, at a glance. Colour follows the post they hold —
   not the access level, or a general manager and an agent would look alike. */
.role-chip.head     { background: var(--navy); color: #fff; }
.role-chip.manager  { background: rgba(46, 98, 176, .14); color: #24548F; }
.role-chip.lead     { background: rgba(14, 123, 82, .14); color: #0E7B52; }
.role-chip.accounts { background: rgba(106, 61, 150, .14); color: #6A3D96; }
.role-chip.acclead  { background: rgba(106, 61, 150, .2);  color: #58307E; box-shadow: inset 0 0 0 1px rgba(106, 61, 150, .28); }
.role-chip.hr       { background: rgba(154, 106, 0, .15);  color: #7A5400; }
.role-chip.supervisor { background: rgba(35, 148, 209, .14); color: #1B6E9C; }
.role-chip.agent    { background: var(--hairline-soft); color: var(--ink-2); }
:root[data-theme="dark"] .role-chip.head     { background: #7EB2E8; color: #08151F; }
:root[data-theme="dark"] .role-chip.manager  { background: rgba(126, 178, 232, .14); color: #9CC4EC; }
:root[data-theme="dark"] .role-chip.lead     { background: rgba(74, 197, 143, .15);  color: #6FD3A6; }
:root[data-theme="dark"] .role-chip.accounts { background: rgba(179, 136, 224, .15);  color: #C4A2E8; }
:root[data-theme="dark"] .role-chip.acclead  { background: rgba(179, 136, 224, .22);  color: #D3BAF0; box-shadow: inset 0 0 0 1px rgba(179, 136, 224, .3); }
:root[data-theme="dark"] .role-chip.hr       { background: rgba(224, 176, 74, .15);   color: #E8C77A; }
:root[data-theme="dark"] .role-chip.supervisor { background: rgba(93, 183, 232, .15);  color: #8FCBEE; }

/* a row with changes not yet written — quiet, since it clears itself in under a second */
.tg-table tr.tg-unsaved td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.tg-table tr.tg-unsaved .tg-in { border-color: rgba(245, 130, 32, .55); }

/* a long list of names in a dropdown reads better with its team headings apart */
select optgroup {
  font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); background: var(--card);
}
select optgroup option { font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink); }

/* the leaders table carries no scored columns until the rule exists, so it is narrower */
.team-block.leaders-block .ag-line,
.team-block.leaders-block .ag-head {
  grid-template-columns: 26px minmax(150px, 1.6fr) minmax(120px, 1fr) 46px 56px 54px 92px 56px;
}
.team-block.leaders-block.no-money .ag-line,
.team-block.leaders-block.no-money .ag-head {
  grid-template-columns: 26px minmax(150px, 1.6fr) minmax(120px, 1fr) 46px 56px 54px 56px;
}

/* a month where only some of the four parts are scored — the number is real, but it is
   points so far, not a score out of 100 */
.yr-cell.yr-part {
  background: repeating-linear-gradient(135deg, var(--hairline-soft) 0 5px, transparent 5px 10px);
  color: var(--ink-3); font-weight: 700;
}
.yr-cell.yr-part i { font-style: normal; color: var(--brand); font-weight: 900; margin-inline-start: 2px; }

/* ---------- a filter bar that reads as one thing, not seven ---------- */
.filter-bar {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; gap: 8px; align-items: center;
}
.filter-bar .roster-search,
.filter-bar .team-select,
.filter-bar .tkr-open {
  height: 36px; border-radius: 9px; border: 1px solid var(--hairline);
  background: var(--card-2); font-size: 13px; margin: 0;
}
.filter-bar .roster-search { flex: 1 1 200px; max-width: none; padding: 0 12px; }
.filter-bar .team-select { padding: 0 30px 0 11px; }
.filter-bar .tkr-open { padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; }
.filter-bar .roster-search:focus, .filter-bar .team-select:focus { border-color: var(--brand); outline: none; }

/* the quick ranges are one group of plain buttons, not four separate pills */
.quick-row {
  display: inline-flex; align-items: center; margin-inline-start: auto;
  border: 1px solid var(--hairline); border-radius: 9px; overflow: hidden; height: 36px;
}
.quick {
  border: 0; background: var(--card-2); color: var(--ink-2); cursor: pointer;
  font: 700 12px var(--sans); padding: 0 12px; height: 100%;
}
.quick + .quick { border-inline-start: 1px solid var(--hairline); }
.quick:hover { background: var(--brand-soft); color: var(--ink); }
.quick-clear { color: var(--ink-3); }
@media (max-width: 700px) {
  .quick-row { margin-inline-start: 0; width: 100%; }
  .quick { flex: 1; }
}

/* The row menu is absolutely positioned, so any scrolling ancestor clips it. The roster
   tables become card rows on narrow screens and fit on wide ones, so their wrapper has
   no need to scroll — and the open section is lifted above the bars beneath it. */
.roster-bars .rb-body,
.roster-bars .rb-body.table-wrap { overflow: visible; }
.roster-bars .rb-sec { position: relative; }
.roster-bars .rb-sec:has(.row-menu[open]) { z-index: 30; }
.roster-bars .rb-sec:has(.row-menu[open]) .rb-body { position: relative; z-index: 30; }

/* ---------- the targets table: many rows, so give them a tighter rhythm ---------- */
.tg-table td { padding-top: 5px; padding-bottom: 5px; }
.tg-table th { padding-top: 8px; padding-bottom: 8px; }
.tg-table .tg-in { padding: 5px 9px; font-size: 12.5px; }
.tg-table .row-head .name-cell { gap: 8px; }
.tg-table .row-head .avatar { width: 26px; height: 26px; font-size: 10.5px; }
.tg-table .who-sub { font-size: 10.5px; }
/* the name column keeps its room; the number columns only take what they need */
.tg-table th:not(:first-child):not(:nth-child(2)) { padding-inline-end: 14px; }
.tg-table td:not(:first-child):not(:nth-child(2)) { padding-inline-start: 10px; }
.tg-table td:nth-child(2) { padding-inline-end: 16px; }

/* the comment button on a Kuwait row, and the note card an agent reads */
.tg-note-btn { padding: 4px 9px; font-size: 12px; line-height: 1.4; }
.tg-note-btn.has-note { border-color: var(--brand); color: var(--brand); font-weight: 800; }
.note-card { margin-top: 18px; }
.note-item + .note-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline-soft); }
.note-item .note-part {
  font: 800 10px var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.note-item .note-text { margin-top: 3px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }

/* the comments card: the part a comment belongs to is always stated */
.note-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.note-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline-soft); }
.note-item:first-of-type { border-top: 0; padding-top: 8px; }
.note-item.empty .note-part { color: var(--ink-3); opacity: .8; }
.note-item.empty .note-text { font-size: 12.5px; }

/* ---------- reporting a problem or an idea ---------- */
#report-btn { display: inline-flex; align-items: center; gap: 6px; }
#report-btn .rp-label { font-size: 12px; font-weight: 800; }
@media (max-width: 900px) { #report-btn .rp-label { display: none; } }

.rp-list { display: flex; flex-direction: column; gap: 10px; }
.rp-item { padding: 14px 16px; }
.rp-item.done { opacity: .62; }
.rp-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rp-kind {
  font: 800 10px var(--sans); letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.rp-kind.bug { background: rgba(199, 74, 27, .13); color: #C74A1B; }
.rp-kind.idea { background: rgba(14, 123, 82, .13); color: #0E7B52; }
.rp-who { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.rp-when { margin-inline-start: auto; font-size: 11.5px; color: var(--ink-3); }
.rp-text { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.rp-foot { display: flex; align-items: center; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.rp-foot .btn { margin-inline-start: auto; }
:root[data-theme="dark"] .rp-kind.bug { background: rgba(217, 107, 63, .18); color: #E39068; }
:root[data-theme="dark"] .rp-kind.idea { background: rgba(74, 197, 143, .16); color: #6FD3A6; }