/* atomic✳HR team hub — the house skin (approved mockup, 2026-08-12).
   ──────────────────────────────────────────────────────────────────────────
   TOKENS FIRST, and they are not this app's invention: the palette, type
   pairing and semantics are lifted from atomic-client-portal's token files so
   the hub reads as a sibling of the portal, not a third design language.

   LEGACY ALIASES ARE LOAD-BEARING. Every template written before this file
   styles itself with --ink/--muted/--accent/--line/--tint/--good/--warn, and
   the pre-skin sweep re-pointed hardcoded card whites at --card. Those seven
   names are the compatibility surface: keep them resolving and every page in
   the app follows the theme; break one and some page quietly stays 2004.

   Dark theme is prefers-color-scheme only — no toggle, no data-theme. The
   hub follows the OS the way the portal's tokens were designed to. */

/* Self-hosted variable fonts (D7: no CDN). One file per family carries every
   weight; the fallback stacks below keep the page readable if a font 404s. */
@font-face {
  font-family:"Jost"; src:url("../fonts/jost-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"Inter"; src:url("../fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root {
  /* brand */
  --atomic-black:#000;
  --purple:#9140b0; --purple-700:#76318f; --purple-100:#f1e6f6;
  --yellow:#f2c050; --yellow-100:#fbeecb;
  --orbit-green:#90d060; --orbit-pink:#e05090;
  --orbit-blue:#50b0d0; --orbit-orange:#f0b040;

  /* neutrals */
  --paper-0:#fff; --paper-50:#fafafa; --paper-100:#f4f4f5; --paper-200:#e9e9ec;
  --line-300:#dddde1;
  --ink-400:#a1a1aa; --ink-500:#82828c; --ink-600:#5c5c66;
  --ink-700:#3f3f46; --ink-900:#000;

  /* semantic status */
  --success:#2fa25b; --success-bg:#e6f5ec;
  --warning:#d3922b; --warning-bg:#fbefd6;
  --danger:#e0454b;  --danger-bg:#fbe4e5;
  --info:#3f9bba;    --info-bg:#e4f2f7;

  /* type */
  --font-display:"Jost","Futura","Avenir Next",system-ui,sans-serif;
  --font-sans:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* surfaces & chrome */
  --page:var(--paper-100);
  --card:var(--paper-0);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
  --r:10px;

  /* ── the legacy aliases every existing template resolves ── */
  --ink:var(--ink-900);
  --muted:var(--ink-500);
  --accent:var(--purple);
  --line:var(--line-300);
  --tint:var(--purple-100);
  --good:var(--success);
  --warn:var(--warning);
}

@media (prefers-color-scheme: dark) { :root {
  --paper-0:#161619; --paper-50:#1d1d21; --paper-100:#0f0f11; --paper-200:#26262b;
  --line-300:#303036;
  --ink-400:#6a6a73; --ink-500:#8c8c95; --ink-600:#a8a8b0;
  --ink-700:#cfcfd4; --ink-900:#f4f4f5;
  --purple-100:#2c1d33; --yellow-100:#332a14;
  --success-bg:#15291d; --warning-bg:#2e2412; --danger-bg:#301719; --info-bg:#132329;
  --success:#5cc084; --warning:#e0ac4e; --danger:#ea7378; --info:#63b6d3;
  --shadow:0 1px 2px rgba(0,0,0,.45);
}}

/* ═══ base ═══ */
body { font-family:var(--font-sans); color:var(--ink-700); margin:0;
       background:var(--page); font-size:14.5px; line-height:1.5; }
h1, h2, h3 { font-family:var(--font-display); color:var(--ink-900);
             letter-spacing:-.01em; }
h1 { font-size:1.45rem; font-weight:600; margin:.4rem 0 1.1rem; text-wrap:balance; }
a { color:var(--accent); }
.muted { color:var(--muted); font-size:.88rem; }
.why { color:var(--muted); font-size:.8rem; }

.wrap { max-width:760px; margin:30px auto 64px; padding:0 22px; }
.wrap.wide { max-width:1120px; }

.brand { font-family:var(--font-display); font-size:.72rem; letter-spacing:.14em;
         color:var(--accent); font-weight:600; text-transform:uppercase; }

/* ═══ shell ═══ */
.topbar { background:var(--card); border-bottom:1px solid var(--line); }
.topbar .inner { max-width:1120px; margin:0 auto; padding:0 22px;
                 display:flex; align-items:center; gap:20px;
                 flex-wrap:wrap; min-height:54px; }
.wordmark { display:flex; align-items:center; gap:8px;
            font-family:var(--font-display); font-weight:600; font-size:1rem;
            color:var(--ink-900); text-decoration:none; }
.wordmark svg { width:21px; height:21px; display:block; }
.wordmark .nm { font-weight:600; }
.wordmark .ast { color:var(--accent); }
.topbar nav { display:flex; gap:2px; flex-wrap:wrap; margin-left:4px; }
.topbar nav a { font-family:var(--font-display); color:var(--muted);
                text-decoration:none; font-size:.92rem; font-weight:500;
                padding:16px 12px 13px; border-bottom:2px solid transparent; }
.topbar nav a:hover { color:var(--ink-900); }
.topbar nav a.on { color:var(--ink-900); border-bottom-color:var(--accent);
                   font-weight:600; }
.topbar .who { margin-left:auto; font-size:.78rem; color:var(--muted);
               display:flex; align-items:center; gap:9px; }
.topbar .who a { color:var(--muted); }
.topbar .who .me { width:26px; height:26px; border-radius:50%;
                   background:var(--accent); color:#fff; display:grid;
                   place-items:center; font-weight:600; font-size:.72rem;
                   font-family:var(--font-display); }

.subbar { background:var(--paper-50); border-bottom:1px solid var(--line); }
.subbar .inner { max-width:1120px; margin:0 auto; padding:7px 22px;
                 display:flex; gap:5px; flex-wrap:wrap; }
.subbar a { color:var(--muted); text-decoration:none; font-size:.81rem;
            padding:4px 11px; border-radius:999px; }
.subbar a:hover { color:var(--ink-900); background:var(--paper-200); }
.subbar a.on { color:var(--purple-700); background:var(--purple-100);
               font-weight:600; }
@media (prefers-color-scheme: dark) { .subbar a.on { color:#c89adc; } }

.crumbs { font-size:.76rem; color:var(--ink-400); margin:0 0 4px; }
.crumbs a { color:var(--ink-400); text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.crumbs span { color:var(--line); margin:0 6px; }

/* ═══ surfaces ═══ */
.card { background:var(--card); border:1px solid var(--line);
        border-radius:var(--r); padding:20px 22px; margin-bottom:16px;
        box-shadow:var(--shadow); }
.card h2 { font-size:.95rem; font-weight:600; margin:0 0 12px; }
.flash { background:var(--warning-bg); border:1px solid var(--warning);
         border-radius:8px; padding:10px 14px; margin-bottom:16px;
         font-size:.9rem; color:var(--ink-700); }

/* ═══ forms & actions ═══ */
label { display:block; font-size:.83rem; color:var(--muted); margin:12px 0 4px; }
input, select, textarea { width:100%; padding:9px 12px; border:1px solid var(--line);
        border-radius:8px; font-size:.95rem; box-sizing:border-box;
        background:var(--card); color:var(--ink-900); font-family:var(--font-sans); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
        outline:2px solid var(--accent); outline-offset:1px; }
button { margin-top:16px; background:var(--atomic-black); color:var(--paper-50);
         border:0; border-radius:999px; padding:10px 22px; font-weight:600;
         font-size:.9rem; cursor:pointer; font-family:var(--font-sans); }
button:hover { opacity:.85; }
@media (prefers-color-scheme: dark) {
  button { background:#fff; color:#0f0f11; }
}
button.link { background:none; border:none; color:var(--accent); font-weight:500;
              padding:0; margin:0; font-size:.83rem; cursor:pointer; opacity:1; }
button.link:hover { text-decoration:underline; opacity:1; }
.btn { display:inline-block; background:transparent; color:var(--ink-700);
       border:1px solid var(--line); border-radius:999px; padding:8px 18px;
       font-weight:600; font-size:.85rem; text-decoration:none; cursor:pointer; }
.btn:hover { border-color:var(--ink-400); }

/* ═══ tables ═══ */
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:8px 8px; border-bottom:1px solid var(--paper-200); }
th { color:var(--ink-400); font-weight:600; font-size:.7rem;
     text-transform:uppercase; letter-spacing:.09em;
     border-bottom:1px solid var(--line); }
tbody tr:hover td, table tr:hover td { background:var(--paper-50); }
td { font-variant-numeric:tabular-nums; }

/* ═══ pills — state you can read at a glance ═══ */
.pill { display:inline-flex; align-items:center; gap:5px; font-size:.7rem;
        font-weight:600; padding:2px 9px; border-radius:999px;
        letter-spacing:.02em; background:var(--paper-200); color:var(--ink-600);
        vertical-align:1px; }
.pill.on, .pill.ok, .pill.good { color:var(--success); background:var(--success-bg); }
.pill.warn { color:var(--warning); background:var(--warning-bg); }
.pill.bad, .pill.danger { color:var(--danger); background:var(--danger-bg); }
.pill.info { color:var(--info); background:var(--info-bg); }
.pill.brand { color:var(--purple-700); background:var(--purple-100); }
@media (prefers-color-scheme: dark) { .pill.brand { color:#c89adc; } }

/* ═══ avatars — orbit colors, deterministic per person ═══ */
.av { width:30px; height:30px; border-radius:50%; display:inline-grid;
      place-items:center; color:#fff; font-weight:600; font-size:.72rem;
      font-family:var(--font-display); flex:none; vertical-align:middle;
      object-fit:cover; }
.av.lg { width:52px; height:52px; font-size:1.05rem; }
.av.c0 { background:var(--orbit-green); } .av.c1 { background:var(--orbit-pink); }
.av.c2 { background:var(--orbit-blue); }  .av.c3 { background:var(--orbit-orange); }
.av.c4 { background:var(--purple); }
img.av { background:var(--paper-200); }
.face { width:52px; height:52px; border-radius:50%; object-fit:cover; }
.face.blank { display:grid; place-items:center; background:var(--purple-100);
              color:var(--purple-700); font-weight:600; font-size:1.05rem;
              font-family:var(--font-display); }

/* ═══ Today: hero + action rows ═══ */
.hero { background:var(--atomic-black); color:#e8e8e8; border-radius:var(--r);
        padding:20px 22px; display:flex; align-items:center; gap:20px;
        flex-wrap:wrap; margin-bottom:16px; }
@media (prefers-color-scheme: dark) { .hero { border:1px solid var(--line); } }
.hero .bolt { width:44px; height:44px; border-radius:12px; background:var(--yellow);
              display:grid; place-items:center; flex:none; font-size:1.3rem; }
.hero h2, .hero h3 { margin:0; font-size:1.1rem; font-weight:600; color:#fff; }
.hero p { margin:2px 0 0; font-size:.82rem; color:#b5b5b5; }
.hero .kpis { margin-left:auto; display:flex; gap:26px; text-align:right; }
.hero .kpis b { display:block; font-family:var(--font-display); font-size:1.25rem;
                color:#fff; font-variant-numeric:tabular-nums; }
.hero .kpis span { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
                   color:#909090; }
.hero .kpis .y b { color:var(--yellow); }
.hero a { color:var(--yellow); }

.action { display:flex; align-items:center; gap:12px; padding:11px 2px;
          border-bottom:1px solid var(--paper-200); }
.action:last-child { border-bottom:none; }
.action .ic { width:34px; height:34px; border-radius:9px; display:grid;
              place-items:center; flex:none; font-size:.95rem;
              background:var(--paper-100); }
.action .ic.warn { background:var(--warning-bg); }
.action .ic.info { background:var(--info-bg); }
.action .ic.brand { background:var(--purple-100); }
.action b { color:var(--ink-900); font-weight:600; font-size:.87rem; display:block; }
.action .d { font-size:.77rem; color:var(--muted); }
.action .go { margin-left:auto; flex:none; }

/* ═══ KPI chips ═══ */
.chips { display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
         margin-bottom:16px; }
@media (max-width:860px) { .chips { grid-template-columns:repeat(2,1fr); } }
.chip { background:var(--card); border:1px solid var(--line);
        border-radius:var(--r); padding:12px 16px; }
.chip .k { font-size:.65rem; text-transform:uppercase; letter-spacing:.1em;
           color:var(--ink-400); font-weight:600; }
.chip b { display:block; font-family:var(--font-display); font-size:1.2rem;
          color:var(--ink-900); font-variant-numeric:tabular-nums; }
.chip small { font-size:.72rem; color:var(--muted); }

/* ═══ the pay-cycle stepper ═══ */
.stepper { display:flex; align-items:stretch; margin-bottom:16px; }
.step { flex:1; background:var(--card); border:1px solid var(--line);
        padding:12px 16px; }
.step:first-child { border-radius:var(--r) 0 0 var(--r); }
.step:last-child { border-radius:0 var(--r) var(--r) 0; }
.step + .step { border-left:none; }
.step .k { font-size:.64rem; text-transform:uppercase; letter-spacing:.1em;
           color:var(--ink-400); font-weight:600; }
.step b { display:block; font-family:var(--font-display); font-size:1.15rem;
          color:var(--ink-900); font-variant-numeric:tabular-nums; }
.step small { font-size:.72rem; color:var(--muted); }
.step.now { border-top:2px solid var(--accent); }
.step.done .k::after { content:" ✓"; color:var(--success); letter-spacing:0; }

/* two-column helper */
.cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:860px) { .cols { grid-template-columns:1fr; } }
.cols .card { margin-bottom:0; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }