/* 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;
}

/* L6, v2.1: the client theme, for the pages outside the product itself
   (login, account, admin; the plain pages follow it too if a page opts in,
   see the note at the foot of this file). Same values as the injected
   [data-theme="light"] block in the product template
   (06_EXECUTION/build/src/page.template.html), copied rather than shared
   because this file is served as-is and is not built. --font-display and
   --font-ui name the client's faces so a machine that already has them
   installed renders in them; this file does not vendor the woff2 data URIs
   the product embeds, so elsewhere they fall back to the system stack,
   which the guide's own type rule allows ("type falls back to the system
   stack" is this file's standing rule, above). */
[data-theme="light"] {
  --surface-base: #FFFFFF;
  --surface-panel: #F8F6EC;
  --border-default: #DDDEDF;
  --accent-primary: #1B2647;
  --accent-secondary: #141C36;
  --text-primary: #1B2647;
  --text-secondary: #3F4A6B;
  --text-tertiary: #55618A;
  --classification: #6B5E1F;
  --panel-radius: 0;

  --font-ui: 'Roboto', system-ui, sans-serif;
  --font-data: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --font-display: 'Playfair Display', Georgia, serif;

  --chart-1: #1B2647;
  --chart-2: #A99333;
  --chart-3: #55618A;
  --chart-4: #6B5E1F;

  --sev-protected: #2E7D6B;
  --sev-low: #3E7D5A;
  --sev-moderate: #7A6A24;
  --sev-elevated: #8F4A1A;
  --sev-high: #7A2E1A;
  --sev-critical: #5C1A1A;

  --gold-fill: #A99333;
  --gold-fill-tint: rgba(169,147,51,0.12);
  --gold-text: #6B5E1F;
}
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3 {
  font-family: var(--font-display);
  font-weight: 400;
}
[data-theme="light"] .eyebrow { color: var(--gold-text); }
[data-theme="light"] button.primary, [data-theme="light"] .btn.primary {
  background: var(--gold-fill);
  border-color: var(--gold-fill);
  color: var(--text-primary);
}
[data-theme="light"] button.primary:hover, [data-theme="light"] .btn.primary:hover {
  background: var(--gold-text);
  border-color: var(--gold-text);
  color: #FFFFFF;
}
[data-theme="light"] input:focus-visible, [data-theme="light"] select:focus-visible,
[data-theme="light"] textarea:focus-visible, [data-theme="light"] button:focus-visible,
[data-theme="light"] a:focus-visible, [data-theme="light"] summary:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 2px;
}

: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); }
}