/* ============================================================
   Entirely ISMS

   Brand tokens only — sand ground, white cards, black topbar, neon accent,
   Bagoss display face over Outfit body. Raw hex appears nowhere below except
   the two semantic states the token set has no alias for (see `.value.bad`).

   Every rule lives here and every behaviour in app.js: the CloudFront CSP is
   script-src 'self' with no 'unsafe-inline'.
   ============================================================ */

* { box-sizing: border-box; }

/* The `hidden` attribute is enforced by the UA stylesheet as
   [hidden] { display: none }, which ANY id or class rule that sets `display`
   beats on specificity. Global and !important on purpose — every `hidden`
   toggle in app.js depends on it, and the failure is silent: the signed-in app
   renders correctly UNDERNEATH an overlay that never went away. growth-radar
   hit it, and so did this app on its first deploy. */
[hidden] { display: none !important; }

html, body { min-height: 100%; }
body {
  margin: 0; background: var(--surface-page); color: var(--text-primary);
  font-family: var(--font-sans); font-size: 14px; line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ------------------------------------------------------------------ gate */
.gate { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); background: var(--color-black); color: var(--text-on-dark); }
.gate-card { max-width: 480px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.gate-eyebrow { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-cta); color: rgba(255,255,255,.6); }
.gate-title { margin: 0; font-family: var(--font-display); font-weight: var(--weight-light); font-size: 38px; line-height: var(--lh-display); color: var(--color-neon); }
.gate-message { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.78); text-wrap: pretty; }

/* ----------------------------------------------------------------- shell */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-4) 40px; background: var(--color-black); color: var(--text-on-dark);
}
.topbar-left { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.lockup { font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-regular); letter-spacing: -.01em; }
.app-name { font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-regular); color: rgba(255,255,255,.85); padding-left: var(--space-5); border-left: 1px solid var(--border-on-dark); }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.scope-line { font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-cta); color: var(--color-cement); }
.user-pill { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 14px; border: 1px solid var(--border-on-dark); border-radius: var(--radius-capsule); font-size: 13px; min-width: 0; }
/* A long address must shrink rather than push: without this the pill grows past
   the bar and sits on top of the lockup. */
#whoami { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 34ch; }
.user-role { font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-cta); color: var(--color-neon); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--color-neon); color: var(--text-on-accent); display: grid; place-items: center; font-size: 12px; font-weight: var(--weight-semibold); flex-shrink: 0; }

.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 18px 40px 0; background: var(--surface-page); }
.tabs button {
  border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--color-slate);
  border-radius: var(--radius-capsule); padding: 8px 16px; font-size: 13px;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.tabs button:hover { border-color: var(--color-black); color: var(--color-black); }
.tabs button[aria-current="true"] { background: var(--color-black); color: var(--text-on-dark); border-color: var(--color-black); }

.main { padding: var(--space-6) 40px 56px; max-width: 1600px; margin: 0 auto; }
.foot { padding: 0 40px 40px; max-width: 1600px; margin: 0 auto; color: var(--color-cement); font-size: 12.5px; }
@media (max-width: 760px) {
  .topbar { padding: 14px 18px; }
  /* The avatar and the role still say who you are signed in as, so the address
     is the part that goes. Hiding it is what keeps the bar one line. */
  .app-name, .scope-line, #whoami { display: none; }
  .tabs { padding: 14px 18px 0; }
  .main { padding: 18px; }
  .foot { padding: 0 18px 28px; }
}

/* ------------------------------------------------------------ typography */
.h1 { margin: 0; font-family: var(--font-display); font-size: 34px; line-height: var(--lh-display); font-weight: var(--weight-light); }
.h3 { margin: 0; font-size: 15px; font-weight: var(--weight-semibold); }
.eyebrow { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-cta); color: var(--color-cement); }
.lead { margin: 6px 0 var(--space-5); font-size: 14.5px; color: var(--color-slate); max-width: 68ch; text-wrap: pretty; }
.muted { color: var(--color-cement); }

/* -------------------------------------------------------------- counters */
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.counter { display: flex; flex-direction: column; gap: var(--space-2); padding: 18px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.counter.dark { background: var(--color-black); color: var(--text-on-dark); border-color: var(--color-black); }
.counter.dark .counter-label, .counter.dark .counter-note { color: rgba(255,255,255,.62); }
.counter-value { font-family: var(--font-display); font-size: 36px; line-height: 1; font-weight: var(--weight-light); font-variant-numeric: tabular-nums; }
/* The only place a value is coloured: a problem count that is not zero. Plum on
   sand reads as "attend to this" without the page turning into a warning. */
.counter-value.bad { color: var(--color-plum); }
.counter-label { font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-cta); color: var(--color-slate); }
.counter-note { font-size: 12px; color: var(--color-cement); text-wrap: pretty; }

.progress { height: 6px; border-radius: var(--radius-capsule); background: var(--color-heather); overflow: hidden; margin-bottom: var(--space-5); }
.progress span { display: block; height: 100%; background: var(--color-moss); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-capsule); padding: 9px 18px; font-weight: var(--weight-semibold); font-size: 13px; background: var(--surface-card); color: var(--color-black); border: 1px solid var(--border-subtle); }
.btn-ghost:hover { border-color: var(--color-black); }

/* --------------------------------------------------------------- drafts
   A draft must not be mistakable for an approved statement. Sage ground and a
   moss rule say "proposed"; the approved statement above it, if any, stays on
   white. Citations are file paths - the approver can open every one. */
.draft { margin-top: 10px; padding: 12px 14px; background: var(--color-sage); border-left: 3px solid var(--color-moss); border-radius: 0 var(--radius-md) var(--radius-md) 0; max-width: 60ch; }
.draft p { margin: 6px 0 0; font-size: 13px; color: var(--text-primary); line-height: 1.5; text-wrap: pretty; }
.draft-tag { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-cta); text-transform: uppercase; color: var(--color-moss); }
.cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cites span { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-capsule); background: var(--surface-card); border: 1px solid var(--border-subtle); color: var(--color-slate); font-variant-numeric: tabular-nums; }
.prov { margin-top: 6px; font-size: 11.5px; color: var(--color-cement); }
.row-actions { display: flex; gap: 8px; margin-top: 10px; }
.btn-primary { display: inline-flex; align-items: center; border-radius: var(--radius-capsule); padding: 9px 18px; font-weight: var(--weight-semibold); font-size: 13px; background: var(--color-neon); color: var(--text-on-accent); border: 1px solid var(--color-neon); }
.btn-primary:hover:not(:disabled) { background: var(--color-lime); border-color: var(--color-lime); }
.btn-primary:disabled, .btn-ghost:disabled { opacity: .55; cursor: default; }
.sm { padding: 6px 13px; font-size: 12px; }

/* ----------------------------------------------------------------- cards */
.card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.card + .card { margin-top: var(--space-5); }

/* ----------------------------------------------------------------- table */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
thead th {
  background: var(--color-sand); text-align: left; padding: 14px 16px;
  font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-cta);
  text-transform: uppercase; color: var(--color-slate);
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
tbody td { padding: 16px; font-size: 13px; color: var(--color-slate); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--color-sand); }
td .subj { display: block; font-size: 14px; font-weight: var(--weight-medium); color: var(--text-primary); line-height: 1.3; text-wrap: pretty; }
td .desc { margin-top: 6px; font-size: 12.5px; color: var(--color-cement); line-height: 1.5; text-wrap: pretty; max-width: 52ch; }
td.num { font-variant-numeric: tabular-nums; }
.ref { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--weight-semibold); color: var(--text-primary); }
.theme-row td {
  background: var(--color-sand); font-size: 11px; font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-cta); text-transform: uppercase; color: var(--color-moss);
  padding: 10px 16px;
}

/* --------------------------------------------------------------- statuses
   Sub-brand hues, used the way activity-log uses them: a band and a flag are
   the same visual grammar, so they share one capsule. */
.status { display: inline-flex; padding: 5px 10px; border-radius: var(--radius-capsule); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-cta); text-transform: uppercase; white-space: nowrap; }
.band-critical { background: var(--color-petal);  color: var(--color-plum); }
.band-high     { background: var(--color-apricot); color: var(--color-bark); }
.band-medium   { background: var(--color-cream);  color: var(--color-bark); }
.band-low      { background: var(--color-sage);   color: var(--color-moss); }
.band-unscored { background: var(--color-sand);   color: var(--color-slate); }

.flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.flag { display: inline-flex; padding: 4px 9px; border-radius: var(--radius-capsule); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-cta); text-transform: uppercase; }
.flag-overdue     { background: var(--color-petal); color: var(--color-plum); }
.flag-unscheduled { background: var(--color-cream); color: var(--color-bark); }
.flag-unowned     { background: var(--color-aqua);  color: var(--color-teal); }

.notice { padding: 14px 18px; border-radius: var(--radius-lg); background: var(--color-cream); border: 1px solid var(--border-subtle); font-size: 13.5px; margin-bottom: var(--space-5); }
.empty { padding: 56px 26px; text-align: center; color: var(--color-slate); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.empty .display { font-family: var(--font-display); font-weight: var(--weight-light); font-size: 22px; }