/* Unite Work Plan — shared tokens.
   Layout concept: a factory control-room board. Wide desktop grid for admins,
   a single-column pocket brief for the CEO. Function colours carry meaning,
   status colours carry state, the brand hue is used sparingly. */
:root {
  --bg: #F0F2F5;
  --surface: #FFFFFF;
  --surface-2: #F8F9FB;
  --ink: #111827;
  --ink-2: #374151;
  --muted: #6B7280;
  --line: #DDE1E9;
  --brand: #1C4ED8;
  --brand-ink: #FFFFFF;
  --brand-soft: #EFF3FE;
  --rail: #1A2332;
  --rail-ink: #C9D1DE;
  --rail-active: #1C4ED8;

  --ok: #059669;     /* completed */
  --run: #1C4ED8;    /* work in progress */
  --stop: #DC2626;   /* hold */
  --wait: #D97706;   /* grace / carried over */
  --idle: #6B7280;   /* planned */
  --off: #374151;

  --f-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-body: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r: 10px;
  --r-sm: 6px;
  --shadow: 0 1px 2px rgba(15, 27, 51, .06), 0 4px 14px rgba(15, 27, 51, .05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D0F14; --surface: #141720; --surface-2: #1C2030; --ink: #E2E8F0; --ink-2: #CBD5E1; --muted: #94A3B8; --line: #252A38;
    --brand: #3B82F6; --brand-ink: #0D0F14; --brand-soft: #1A2440; --rail: #0A0C10; --rail-ink: #A9B4C6; --rail-active: #1C4ED8;
    --ok: #22C55E; --run: #3B82F6; --stop: #EF4444; --wait: #F59E0B; --idle: #94A3B8; --off: #6B7280;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D0F14; --surface: #141720; --surface-2: #1C2030; --ink: #E2E8F0; --ink-2: #CBD5E1; --muted: #94A3B8; --line: #252A38;
    --brand: #3B82F6; --brand-ink: #0D0F14; --brand-soft: #1A2440; --rail: #0A0C10; --rail-ink: #A9B4C6; --rail-active: #1C4ED8;
    --ok: #22C55E; --run: #3B82F6; --stop: #EF4444; --wait: #F59E0B; --idle: #94A3B8; --off: #6B7280;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--f-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: .01em; margin: 0; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mono { font-family: var(--f-mono); font-size: .85em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.eyebrow { font: 600 11px/1 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* Function chip: colour comes from --c set inline. */
.fchip { --c: #868E96; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: color-mix(in srgb, var(--c) 72%, var(--ink)); }
.fchip::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 4px; font-size: 12px; border: 1px solid var(--line); color: var(--ink-2); background: var(--surface-2); white-space: nowrap; }
.tag.proj { --c: #868E96; border-color: color-mix(in srgb, var(--c) 45%, var(--line)); color: color-mix(in srgb, var(--c) 70%, var(--ink)); background: color-mix(in srgb, var(--c) 7%, var(--surface)); }
.tag.stage { border-style: dashed; }

/* Status pill */
.st { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; --c: var(--idle);
  background: color-mix(in srgb, var(--c) 15%, var(--surface)); color: color-mix(in srgb, var(--c) 80%, var(--ink)); }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.st.done { --c: var(--ok); } .st.moving { --c: var(--run); } .st.held { --c: var(--stop); } .st.moved { --c: var(--wait); } .st.planned { --c: var(--idle); } .st.dropped { --c: var(--off); }
.st.ontime { --c: var(--ok); } .st.grace, .st.ingrace { --c: var(--wait); } .st.late, .st.missing { --c: var(--stop); } .st.due { --c: var(--idle); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; }
.btn:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label { font-size: 12px; font-weight: 600; color: var(--muted); }
.input, select.input, textarea.input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-width: 0; }
.input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--surface); padding: 10px 18px; border-radius: 8px; font-weight: 600; z-index: 100; box-shadow: var(--shadow); }
.sample-note { font-size: 12px; color: var(--muted); }

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