/* site.css
   House tokens (copied from material/tessera-tokens.css) plus the shared
   layout used by every page outside the product itself: masthead, a narrow
   content column, forms, buttons, tables, status chips, notices and the
   footer. Night is the default theme. No external resource is loaded from
   here; type falls back to the system stack because no font file is served. */

:root,
[data-theme="night"] {
  --surface-base: #050E0A;
  --surface-panel: rgba(10, 24, 18, 0.7);
  --border-default: rgba(54, 200, 74, 0.24);
  --accent-primary: #36C84A;
  --accent-secondary: #26B23E;
  --text-primary: #E8F4F0;
  --text-secondary: #8FA8B8;
  --text-tertiary: #4A6580;
  --classification: #C9A02E;
  --panel-radius: 0;

  --chart-1: #26B23E;
  --chart-2: #3987e5;
  --chart-3: #c98500;
  --chart-4: #d55181;
}

[data-theme="day"] {
  --surface-base: #FAFAF7;
  --surface-panel: #FFFFFF;
  --border-default: #D4D4CE;
  --accent-primary: #1E8A2E;
  --accent-secondary: #166B22;
  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;
  --classification: #C9A02E;
  --panel-radius: 8px;

  --chart-1: #1E8A2E;
  --chart-2: #2a78d6;
  --chart-3: #eda100;
  --chart-4: #e87ba4;
}

:root {
  --sev-protected: #2EE6A6;
  --sev-low: #7BC96F;
  --sev-moderate: #E8C547;
  --sev-elevated: #F5A623;
  --sev-high: #E8743C;
  --sev-critical: #D63A3A;

  --seq-1: #cdebd2; --seq-2: #9ed6a8; --seq-3: #6bbd7c; --seq-4: #3f9e52;
  --seq-5: #1E8A2E; --seq-6: #166B22; --seq-7: #0d4d18;

  --font-ui: 'Inter', system-ui, sans-serif;
  --font-data: 'JetBrains Mono', ui-monospace, monospace;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-16: 64px;
  --measure-prose: 58ch;
  --measure-notes: 88ch;
  --page-wrap: 1120px;
}

/* -------------------------------------------------------------- reset/base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html { background: var(--surface-base); }
body {
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1, h2, h3 { font-weight: 600; margin: 0 0 var(--s-3); letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
p { margin: 0 0 var(--s-3); max-width: var(--measure-notes); }
a { color: var(--accent-primary); text-decoration: none; border-bottom: 1px solid rgba(54,200,74,0.35); }
a:hover { border-bottom-color: var(--accent-primary); }
.data, code, time { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

.wrap-narrow {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--s-4);
}
.page-narrow { padding-block: var(--s-8); }

/* ------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-base);
}
.mh-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-block: var(--s-4);
}
.brand { font-size: 16px; font-weight: 600; }
.mark {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-left: auto;
}

/* ----------------------------------------------------------------- panel */

.panel, .card {
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--panel-radius);
}
.card { padding: var(--s-6); margin-bottom: var(--s-6); }
.eyebrow {
  font-family: var(--font-data);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: var(--text-secondary);
}

/* ----------------------------------------------------------------- forms */

form { display: flex; flex-direction: column; gap: var(--s-4); max-width: 420px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
input, select, textarea {
  font-family: var(--font-ui);
  font-size: 15px;
  background: var(--surface-base);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--panel-radius);
  padding: 9px var(--s-3);
  width: 100%;
}
textarea { resize: vertical; min-height: 96px; font-family: var(--font-ui); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
.form-note { color: var(--text-secondary); font-size: 13px; margin: 0; }
.form-actions { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

button, .btn {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--panel-radius);
  padding: 9px var(--s-4);
  cursor: pointer;
  display: inline-block;
  text-align: center;
}
button:hover, .btn:hover { border-color: var(--accent-primary); }
button.primary, .btn.primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #06140A;
  font-weight: 600;
}
button.primary:hover, .btn.primary:hover { background: var(--accent-secondary); border-color: var(--accent-secondary); }
button[disabled] { opacity: 0.55; cursor: not-allowed; }
button.link {
  border: none;
  padding: 0;
  color: var(--accent-primary);
  border-bottom: 1px solid rgba(54,200,74,0.35);
  font-size: 13px;
}

/* --------------------------------------------------------------- notices */

.notice, .error {
  border: 1px solid var(--border-default);
  border-radius: var(--panel-radius);
  padding: var(--s-3) var(--s-4);
  font-size: 13px;
}
.notice { color: var(--text-secondary); }
.error { color: var(--sev-high); border-color: var(--sev-high); }
.success { color: var(--sev-protected); border-color: var(--sev-protected); }

/* ----------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dense th, table.dense td { padding: 6px var(--s-2); }
th, td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-default);
  vertical-align: top;
}
th {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
}
.table-scroll { width: 100%; overflow-x: auto; }

/* ------------------------------------------------------------------ chips */

.chip {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  padding: 3px var(--s-2);
  display: inline-block;
  white-space: nowrap;
}
.chip b { color: var(--text-primary); font-weight: 600; }

.status { font-size: 11px; padding: 3px var(--s-2); border: 1px solid; display: inline-block; white-space: nowrap; }
.status-received { color: var(--sev-moderate); border-color: var(--sev-moderate); }
.status-looking { color: var(--sev-elevated); border-color: var(--sev-elevated); }
.status-fixed { color: var(--sev-protected); border-color: var(--sev-protected); }
.status-notplanned { color: var(--text-tertiary); border-color: var(--text-tertiary); }

.tag { font-size: 11px; padding: 3px var(--s-2); border: 1px solid var(--border-default); display: inline-block; color: var(--text-secondary); }

/* ------------------------------------------------------------------ misc */

.actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.tiny { color: var(--text-tertiary); font-size: 12px; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: baseline; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }

details.disclosure > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent-primary);
  border-bottom: 1px solid rgba(54,200,74,0.35);
  display: inline-block;
  margin-top: var(--s-3);
}
details.disclosure[open] > summary { margin-bottom: var(--s-3); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: 12px;
  padding-block: var(--s-6) var(--s-8);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.site-footer a { color: var(--text-secondary); border-bottom-color: var(--border-default); }

/* --------------------------------------------------------------- phones */

@media (max-width: 420px) {
  .wrap-narrow { padding: 0 var(--s-3); }
  .card { padding: var(--s-4); }
  h1 { font-size: 19px; }
  form { max-width: 100%; }
  .mh-wrap { padding-block: var(--s-3); }
}