/* ALM Digital ERP — application shell.
 *
 * THE LOOK
 * Graphite and paper neutrals with Alpago gold as the one accent, in a dark
 * and a light theme. Instrument Serif carries the brand voice (greetings,
 * headings, the clock); Geist carries the UI; Geist Mono carries anything read
 * as data. Department accents exist only so a person always knows which card
 * is which floor — they never carry state. State is the job of --ok/--warn/--bad,
 * and those are never used without a label beside them.
 *
 * CONSTRAINTS THIS FILE WORKS UNDER
 * No <style> blocks and no style="" attributes anywhere in the shell, which is
 * what lets the Content-Security-Policy for these pages keep style-src at
 * 'self' with no 'unsafe-inline'. Stagger delays are therefore :nth-child
 * rules here, never inline delays set from JavaScript.
 */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap");

/* ── `hidden` has to win ─────────────────────────────────────────────────── */
/*
 * The browser's own `[hidden] { display: none }` is a user-agent rule, so any
 * author rule naming the element outranks it. Every screen here takes its
 * display from a class, so without this line the attribute is inert and all
 * the screens render stacked on top of one another. The only !important in
 * the file, and it earns it.
 */
[hidden] { display: none !important; }

/* ── tokens ──────────────────────────────────────────────────────────────── */

:root {
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: Geist, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --bg: #0F0F0D;
  --bg-2: #131311;
  --surface: #171714;
  --surface-2: #1D1D1A;
  --sunk: #121210;
  --ink: #ECEAE3;
  --ink-2: #C9C6BB;
  --muted: #8B887C;
  --stroke: rgba(236, 234, 227, 0.09);
  --stroke-strong: rgba(236, 234, 227, 0.18);
  --brand: #D6B36A;
  --brand-2: #E0C27E;
  --brand-soft: rgba(214, 179, 106, 0.12);
  --brand-ink: #17150F;
  --ok: #7CC4A4;      --ok-soft: rgba(124, 196, 164, 0.13);
  --warn: #D9A24A;    --warn-soft: rgba(217, 162, 74, 0.13);
  --bad: #E8898A;     --bad-soft: rgba(232, 137, 138, 0.13);
  --sidebar-bg: rgba(18, 18, 16, 0.72);

  /* Department accents — identity, never state. */
  --dept-procurement: #93B4E2;
  --dept-hr: #7CC4A4;
  --dept-estimation: #C9A961;
  --dept-planning: #D8BC7A;
  --dept-production: #E6C463;
  --dept-store: #B9A079;
  --dept-qaqc: #A8C4A0;
  --dept-admin: #D6B36A;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --pill: 999px;

  --sidebar-w: 248px;
  --measure: 62ch;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 140ms;
  --base: 260ms;
  --slow: 620ms;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #F4F3EF;
  --bg-2: #EFEDE7;
  --surface: #FFFFFF;
  --surface-2: #FAF9F5;
  --sunk: #ECEAE3;
  --ink: #191816;
  --ink-2: #45433D;
  --muted: #6F6C63;
  --stroke: rgba(25, 24, 22, 0.10);
  --stroke-strong: rgba(25, 24, 22, 0.20);
  --brand: #8A6F3C;
  --brand-2: #A8873B;
  --brand-soft: rgba(138, 111, 60, 0.10);
  --brand-ink: #FFFFFF;
  --ok: #2F8D62;      --ok-soft: rgba(47, 141, 98, 0.11);
  --warn: #9A6A1F;    --warn-soft: rgba(176, 123, 46, 0.12);
  --bad: #A33E36;     --bad-soft: rgba(163, 62, 54, 0.10);
  --sidebar-bg: rgba(249, 248, 244, 0.74);

  /* The same hues read paler on paper; these are the dark-enough steps.
     Validated ≥3:1 against the light surface. */
  --dept-procurement: #3B6FB4;
  --dept-hr: #2F8D62;
  --dept-estimation: #8A6F3C;
  --dept-planning: #A8873B;
  --dept-production: #8A6F3C;
  --dept-store: #7A6A4A;
  --dept-qaqc: #4E7A5C;
  --dept-admin: #8A6F3C;

  color-scheme: light;
}

/* ── reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--brand-soft); color: var(--ink); }

/* ── type ────────────────────────────────────────────────────────────────── */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}
.display em { font-style: italic; color: var(--brand); }

h1.display { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem); }
h2.display { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny  { font-size: 12px; }
.center { text-align: center; }
.num   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.error { color: var(--bad); font-size: 13px; }
.section-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--stroke-strong);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
  flex: none;
}

/* ── decorative ground ───────────────────────────────────────────────────── */

.ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ground {
  background:
    radial-gradient(1100px 700px at 8% -10%, var(--brand-soft), transparent 62%),
    radial-gradient(1000px 800px at 92% 118%, var(--brand-soft), transparent 62%);
  animation: drift 26s var(--ease) infinite alternate;
  opacity: 0.8;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2.2%, 0) scale(1.05); }
}

/* ── wordmark ────────────────────────────────────────────────────────────── */

/* The wordmark is drawn once in a <defs> and placed with <use>.
 *
 * `fill` must be set HERE, on the <svg> host, not on the paths. <use> clones
 * its target into a shadow tree, and an author selector cannot reach inside
 * one — the paths would fall back to SVG's default fill of BLACK and vanish
 * on the dark background. `fill` is inherited, and shadow content inherits
 * from its host, so setting it on the <svg> does reach the clones. */
.wordmark {
  color: var(--ink);
  fill: currentColor;
  height: 24px;
  width: auto;
  flex: none;
}
.wordmark-brand { color: var(--brand); height: 30px; }
/* On the sign-in brand panel, which is dark in BOTH themes. */
.wordmark-onbrand { color: #EFEDE5; height: 22px; }

.lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lockup-rule {
  width: 1px; height: 16px;
  background: var(--stroke-strong);
  flex: none;
}
.lockup-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  padding: 0 18px;
  min-height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  transition: transform var(--fast) var(--ease),
              background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              filter var(--fast) var(--ease),
              opacity var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.995); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }

.btn-primary {
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px -12px rgba(201,169,97,0.55);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); }

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--stroke-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--brand); }

.btn-quiet { background: transparent; color: var(--ink-2); border-color: var(--stroke); }
.btn-quiet:hover:not(:disabled) { color: var(--ink); border-color: var(--stroke-strong); }

.btn-block { width: 100%; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 12.5px; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  flex: none;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.icon-btn:hover { color: var(--ink); background: var(--brand-soft); }

/* ── surfaces ────────────────────────────────────────────────────────────── */

.panel {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 1px 2px rgba(0,0,0,0.05),
              0 14px 34px -22px rgba(0,0,0,0.5);
}
.panel-pad { padding: 20px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 11px;
  border-radius: var(--pill);
  white-space: nowrap;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.pill-ok   { color: var(--ok);    background: var(--ok-soft); }
.pill-warn { color: var(--warn);  background: var(--warn-soft); }
.pill-bad  { color: var(--bad);   background: var(--bad-soft); }
.pill-mute { color: var(--muted); background: var(--sunk); }

.pill-live::before { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

/* ── forms ───────────────────────────────────────────────────────────────── */

form { display: flex; flex-direction: column; }
.auth-card form { margin-top: 20px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field + .field { margin-top: 16px; }

form .error { margin-top: 12px; }
form .tiny { margin-top: 10px; }
form > .btn { margin-top: 20px; }
form > .btn + .btn { margin-top: 9px; }
form .error:not([hidden]) + .btn { margin-top: 12px; }

.field > label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.input {
  width: 100%;
  font-size: 14.5px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke-strong);
  background: var(--sunk);
  color: var(--ink);
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.input::placeholder { color: var(--muted); opacity: 0.7; }
.input:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-soft); }
.input:focus-visible { outline: none; }

/* ── screens ─────────────────────────────────────────────────────────────── */

.screen { position: relative; z-index: 1; min-height: 100dvh; }
.screen-enter { animation: screen-in var(--base) var(--ease-out) both; }
@keyframes screen-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* The entrance beat used across the shell. Delays live here, not inline,
   because the CSP for these pages forbids inline styles. */
.reveal { animation: reveal var(--slow) var(--ease-out) both; }
@keyframes reveal {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ── boot ────────────────────────────────────────────────────────────────── */

#boot { display: grid; place-items: center; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.boot-bar {
  width: 128px; height: 2px;
  background: var(--stroke);
  border-radius: 2px;
  overflow: hidden;
}
.boot-bar::after {
  content: "";
  display: block;
  width: 40%; height: 100%;
  background: var(--brand);
  border-radius: 2px;
  animation: boot-slide 1.1s var(--ease) infinite;
}
@keyframes boot-slide {
  from { transform: translateX(-110%); }
  to   { transform: translateX(330%); }
}

/* ── sign in ─────────────────────────────────────────────────────────────── */

.auth { display: grid; grid-template-columns: minmax(380px, 0.9fr) 1.1fr; min-height: 100dvh; }
.auth-solo { grid-template-columns: 1fr; }

/* The brand panel is graphite in BOTH themes — it is the brand moment, and the
   gold linework of the building is drawn for a dark ground. Its colours are
   therefore local constants, not theme tokens. */
.auth-brand {
  position: relative;
  padding: clamp(28px, 4.5vw, 52px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3.5vh, 32px);
  background: #141311;
  border-right: 1px solid rgba(201, 169, 97, 0.14);
  overflow: hidden;
}
.auth-brand .lockup-rule { background: rgba(239, 237, 229, 0.25); }
.auth-brand .lockup-sub { color: #B5B1A4; }

.auth-line {
  position: relative;
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.22;
  color: #F2F0E8;
  max-width: 26rem;
  animation-delay: 100ms;
}
.auth-line em { color: #D6B36A; }

.auth-arcs {
  position: absolute;
  right: -200px; bottom: -220px;
  opacity: 0.55;
  pointer-events: none;
  animation: spin 160s linear infinite;
  transform-origin: center;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.auth-art {
  position: relative;
  flex: 1;
  min-height: 240px;
  margin: 0 calc(clamp(28px, 4.5vw, 52px) * -1) -14px;
  animation-delay: 200ms;
}
.auth-art img {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
  animation: float 9s ease-in-out infinite alternate;
}
@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

.auth-foot { position: relative; color: #8B887C; animation-delay: 300ms; }

.auth-form-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 48px);
}
.auth-theme { position: absolute; top: 20px; right: 20px; border: 1px solid var(--stroke); }
.auth-card { width: 100%; max-width: 23.5rem; display: flex; flex-direction: column; gap: 6px; }
.auth-card > .display { margin-bottom: 2px; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
}

/* ── app shell ───────────────────────────────────────────────────────────── */

.shell { position: relative; z-index: 1; min-height: 100dvh; }
.shell-grid { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 12px 12px;
  background: var(--sidebar-bg);
  backdrop-filter: blur(16px) saturate(140%);
  border-right: 1px solid var(--stroke);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar-brand { padding: 2px 8px 4px; }

.palette-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.palette-btn:hover { color: var(--ink); border-color: var(--stroke-strong); }
.palette-btn svg { flex: none; }
.palette-btn .grow { flex: 1; min-width: 0; text-align: left; }

.nav { display: flex; flex-direction: column; gap: 16px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label { padding: 0 10px 6px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--ink-2);
  text-align: left;
  text-decoration: none;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  position: relative;
  width: 100%;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
  animation: nav-in 420ms var(--ease-out) both;
}
@keyframes nav-in {
  from { opacity: 0; transform: translate3d(-6px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
.nav-group:nth-child(1) .nav-link:nth-child(1) { animation-delay: 30ms; }
.nav-group:nth-child(1) .nav-link:nth-child(2) { animation-delay: 60ms; }
.nav-group:nth-child(1) .nav-link:nth-child(3) { animation-delay: 90ms; }
.nav-group:nth-child(2) .nav-link:nth-child(2) { animation-delay: 120ms; }
.nav-group:nth-child(2) .nav-link:nth-child(3) { animation-delay: 150ms; }
.nav-group:nth-child(3) .nav-link:nth-child(2) { animation-delay: 180ms; }
.nav-group:nth-child(3) .nav-link:nth-child(3) { animation-delay: 210ms; }

.nav-link:hover { color: var(--ink); background: var(--brand-soft); }
.nav-link[data-active="true"] { color: var(--ink); background: var(--brand-soft); font-weight: 500; }
.nav-link[data-active="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 16px;
  margin-top: -8px;
  border-radius: 2px;
  background: var(--brand);
}
.nav-link svg { flex: none; }
.nav-link .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--pill);
  background: var(--brand);
  color: var(--brand-ink);
  display: inline-grid;
  place-items: center;
  flex: none;
}
.nav-ext { color: var(--muted); flex: none; }

.sidebar-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-top: 1px solid var(--stroke);
  min-width: 0;
}

.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(140deg, var(--brand-2), var(--brand));
  color: var(--brand-ink);
  flex: none;
}

.who { min-width: 0; flex: 1; }
.who-name { font-size: 12.5px; font-weight: 600; }
.who-role { font-size: 11px; color: var(--muted); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.shell-main { min-width: 0; padding: 0 0 72px; }

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Screens whose content is a wide data table rather than prose.
   1120px is a reading measure — right for a paragraph, wrong for the People
   table's seven columns, which overran it and fell back to a horizontal
   scroller while several hundred pixels of window sat empty beside it. These
   screens take the width they need and stop at 1600px, past which the eye
   loses the row between the name and the status at the far end. */
.page.page-wide { max-width: 1600px; }

.page-head { display: flex; flex-direction: column; gap: 7px; }

.section { display: flex; flex-direction: column; gap: 13px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ── home: greeting + clock ──────────────────────────────────────────────── */

.hub-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  animation: reveal var(--slow) var(--ease-out) both;
}
.hub-greet { display: flex; flex-direction: column; gap: 8px; }
.hub-sub { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }

.hub-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.hub-clock-row { display: flex; align-items: baseline; gap: 7px; }
.hub-time {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.9rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hub-ampm { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--brand); }
.hub-date {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The live dot. State colours always travel with a label beside them. */
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-ok   { background: var(--ok);   animation: breathe 2.6s ease-out infinite; }
.dot-warn { background: var(--warn); }
.dot-bad  { background: var(--bad); }
.dot-off  { background: transparent; border: 1.5px solid var(--stroke-strong); }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 var(--ok-soft); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

/* ── home: the "waiting for you" strip ───────────────────────────────────── */

.strip {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border: 1px solid var(--brand-soft);
  border-color: color-mix(in srgb, var(--brand) 26%, transparent);
  border-radius: 13px;
  background: var(--brand-soft);
  animation: reveal var(--slow) var(--ease-out) 60ms both;
}
.strip-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.strip-item { font-size: 12.5px; color: var(--ink-2); text-decoration: none; }
a.strip-item:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.strip-sep { width: 1px; height: 12px; background: var(--stroke-strong); flex: none; }
.strip-go {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.strip-go:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── home: department cards ──────────────────────────────────────────────── */

.hub-grid { display: flex; flex-wrap: wrap; gap: 16px; }

.dept-card {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 14px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  text-align: left;
  color: inherit;
  text-decoration: none;
  font: inherit;
  animation: reveal 560ms var(--ease-out) both;
  transition: transform var(--base) var(--ease),
              border-color var(--base) var(--ease),
              box-shadow var(--base) var(--ease);
}
a.dept-card, button.dept-card { cursor: pointer; }
a.dept-card:hover, button.dept-card:hover,
a.dept-card:focus-visible, button.dept-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--stroke-strong);
  box-shadow: 0 18px 38px -24px rgba(0, 0, 0, 0.5);
}
.hub-grid .dept-card:nth-child(1) { animation-delay: 100ms; }
.hub-grid .dept-card:nth-child(2) { animation-delay: 170ms; }
.hub-grid .dept-card:nth-child(3) { animation-delay: 240ms; }
.hub-grid .dept-card:nth-child(4) { animation-delay: 310ms; }
.hub-grid .dept-card:nth-child(5) { animation-delay: 380ms; }
.hub-grid .dept-card:nth-child(6) { animation-delay: 450ms; }

.dept-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dept-n { font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex: none; }
.dept-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dept-head .dot { margin-left: auto; }
.dept-state {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dept-state-warn { color: var(--warn); }
.dept-state-bad { color: var(--bad); }

.dept-value {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dept-value.muted { color: var(--muted); }
.dept-label { font-size: 12.5px; color: var(--ink-2); }
.dept-sub { font-size: 12px; color: var(--muted); }
.dept-note { font-size: 12.5px; color: var(--bad); }

/* Sparkline: one series per card, drawn in that department's accent. */
.dept-spark { position: relative; height: 44px; margin-top: auto; }
.dept-spark svg { width: 100%; height: 44px; }
.spark-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: spark-draw 1.3s 350ms cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
}
@keyframes spark-draw { to { stroke-dashoffset: 0; } }
.spark-dot {
  position: absolute;
  right: 1px;
  width: 6px; height: 6px;
  border-radius: 50%;
  opacity: 0;
  animation: spark-pop 400ms 1.55s var(--ease-out) forwards;
}
@keyframes spark-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: none; }
}

/* Department accents, keyed off data-dept — set here rather than from
   JavaScript, because style-src has no 'unsafe-inline'. */
.dept-card[data-dept="procurement"] .spark-line { stroke: var(--dept-procurement); }
.dept-card[data-dept="procurement"] .spark-dot  { background: var(--dept-procurement); }
.dept-card[data-dept="hr"] .spark-line          { stroke: var(--dept-hr); }
.dept-card[data-dept="hr"] .spark-dot           { background: var(--dept-hr); }
.dept-card[data-dept="planning"] .spark-line    { stroke: var(--dept-planning); }
.dept-card[data-dept="planning"] .spark-dot     { background: var(--dept-planning); }
.dept-card[data-dept="admin"] .spark-line       { stroke: var(--dept-admin); }
.dept-card[data-dept="admin"] .spark-dot        { background: var(--dept-admin); }

/* Administration's quick doors. */
.dept-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 6px; }
.chip {
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: var(--pill);
  border: 1px solid var(--stroke);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--brand); }

/* ── home: floors still to build ─────────────────────────────────────────── */

.hub-dim { display: flex; flex-wrap: wrap; gap: 12px; animation: reveal var(--slow) var(--ease-out) 420ms both; }
.dim-card {
  flex: 1 1 190px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
}
.dim-name { font-size: 13px; font-weight: 500; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dim-state {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.hub-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
  font-size: 12px;
  color: var(--muted);
  animation: reveal var(--slow) var(--ease-out) 500ms both;
}
.hub-foot-right { display: flex; align-items: center; gap: 7px; }

/* ── command palette ─────────────────────────────────────────────────────── */

.palette-wrap {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 12vh 16px 16px;
}
.palette-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 13, 0.45);
  backdrop-filter: blur(3px);
}
.palette {
  position: relative;
  width: min(92vw, 560px);
  background: var(--surface);
  border: 1px solid var(--stroke-strong);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: palette-in 300ms var(--ease-out) both;
}
@keyframes palette-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.palette-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--stroke);
  color: var(--muted);
}
.palette-input {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--ink);
}
.palette-input:focus { outline: none; }
.palette-input::placeholder { color: var(--muted); opacity: 0.7; }

.palette-results { max-height: min(46vh, 340px); overflow-y: auto; padding: 6px; }
.p-group {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px 4px;
}
.p-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink-2);
  text-align: left;
  font: inherit;
}
.p-item[data-active="true"] { background: var(--brand-soft); color: var(--ink); }
.p-icon {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--stroke);
  border-radius: 9px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
}
.p-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.p-label { font-size: 13.5px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-empty { padding: 20px 14px; font-size: 13px; color: var(--muted); }
.palette-foot {
  display: flex;
  gap: 14px;
  padding: 9px 16px;
  border-top: 1px solid var(--stroke);
  background: var(--surface-2);
  font-size: 11px;
  color: var(--muted);
}

/* ── table ───────────────────────────────────────────────────────────────── */

.scroll { overflow-x: auto; border: 1px solid var(--stroke); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--stroke); white-space: nowrap; }
thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  background: var(--sunk);
  position: sticky;
  top: 0;
}
tbody tr { transition: background var(--fast) var(--ease); }
tbody tr:hover { background: var(--brand-soft); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; }

/* A table that would rather grow downwards than sideways.
   `white-space: nowrap` above is right for dates and numbers and wrong for an
   email address or a list of roles: one long value pushed the whole table past
   its container and turned the screen into a horizontal scroller. Here the
   long free-text columns wrap, the first column and anything numeric stay on
   one line, and the sideways scrollbar appears only when the window really is
   too narrow for the table at all. */
.scroll.fluid td { white-space: normal; overflow-wrap: anywhere; }
.scroll.fluid td:first-child,
.scroll.fluid th:first-child,
.scroll.fluid td.num,
.scroll.fluid td.nowrap { white-space: nowrap; overflow-wrap: normal; }

/* ── key / value ─────────────────────────────────────────────────────────── */

.kv { display: grid; grid-template-columns: 10.5rem 1fr; gap: 9px 18px; }
.kv dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.kv dd { min-width: 0; word-break: break-word; }
@media (max-width: 34rem) {
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 10px; }
}

/* ── empty state ─────────────────────────────────────────────────────────── */

.empty {
  padding: 28px;
  border: 1px dashed var(--stroke-strong);
  border-radius: var(--radius);
  background: var(--sunk);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.empty h3 { font-size: 14.5px; font-weight: 600; }
.empty p { font-size: 13px; color: var(--muted); max-width: var(--measure); }

/* ── mobile ──────────────────────────────────────────────────────────────── */

.mobile-bar { display: none; }
.scrim { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,0.44); backdrop-filter: blur(2px); }

@media (max-width: 860px) {
  .shell-grid { grid-template-columns: 1fr; }
  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--sidebar-bg);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--stroke);
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, var(--sidebar-w));
    z-index: 90;
    transform: translateX(-102%);
    transition: transform var(--base) var(--ease);
  }
  .sidebar[data-open="true"] { transform: none; }
  .hub-clock { align-items: flex-start; text-align: left; }
}

/* ── toast ───────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 200;
  max-width: min(90vw, 34rem);
  padding: 11px 18px;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 18px 42px -18px rgba(0,0,0,0.7);
  animation: toast-in 320ms var(--ease-out) both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.notice { margin: 22px; padding: 16px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink); }

/* ── motion preference ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .spark-line { stroke-dashoffset: 0; }
  .spark-dot { opacity: 1; }
}