/* Fuse27: a breaker panel. Apps are circuits on a labeled panel schedule;
   one bold element per page, everything else quiet and tabular. */
:root {
  --panel: #e6eae5;        /* panel paint */
  --plate: #f3f5f2;        /* schedule card */
  --ink: #1b2330;          /* graphite */
  --muted: #5b6573;
  --rule: #c9cfc8;
  --live: #d9951a;         /* breaker amber */
  --live-ink: #1b2330;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --panel: #14181e; --plate: #1c222b; --ink: #e4e8e2; --muted: #9aa4b1;
    --rule: #2e3641; --live: #f0ad2e; --live-ink: #14181e; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --panel: #14181e; --plate: #1c222b; --ink: #e4e8e2; --muted: #9aa4b1;
  --rule: #2e3641; --live: #f0ad2e; --live-ink: #14181e; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
}
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* Header: the panel's label strip */
.strip { border-bottom: 1px solid var(--rule); }
.strip .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1rem;
}
.mark {
  font: 800 1.5rem/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.08em;
}
.mark b { color: var(--live); font-weight: 800; }
.nav { display: flex; gap: 1.25rem; font: 500 0.8125rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

/* Home hero */
.hero { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2rem, 5vw, 3.5rem); }
.hero h1 {
  margin: 0; max-width: 14ch;
  font: 800 clamp(3rem, 10vw, 6.25rem)/0.92 var(--display);
  letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance;
}
.hero p { margin: 1.5rem 0 0; max-width: 34rem; color: var(--muted); font-size: 1.125rem; }

/* The schedule: one row per circuit */
.schedule { padding-block: 0 4rem; }
.label {
  font: 500 0.75rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.card {
  margin-top: 0.875rem; background: var(--plate); border: 1px solid var(--rule); border-radius: 6px;
}
.row {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: 1.125rem 1.25rem; border-top: 1px solid var(--rule);
}
.row:first-child { border-top: 0; }
.slot { font: 500 0.875rem/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.circuit { min-width: 0; display: flex; align-items: center; gap: 1rem; }
.circuit img { width: 3rem; height: 3rem; border-radius: 0.75rem; flex: none; }
.circuit h2 { margin: 0; font: 700 1.25rem/1.2 var(--body); }
.circuit p { margin: 0.125rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.circuit a { text-decoration: none; }
.circuit a:hover h2 { text-decoration: underline; }
.state {
  font: 600 0.6875rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4rem 0.55rem; border-radius: 3px; white-space: nowrap;
}
.state.on { background: var(--live); color: var(--live-ink); }
.state.off { border: 1px solid var(--rule); color: var(--muted); }
.row.spare .circuit h2 { font-weight: 500; color: var(--muted); }

/* About / contact */
.notes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem 3rem;
  padding-block: 0 4.5rem;
}
.notes h3 { margin: 0 0 0.5rem; font: 700 1.375rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
.notes p { margin: 0; color: var(--muted); max-width: 32rem; }
.email { font-family: var(--mono); font-size: 0.9375rem; color: var(--ink); user-select: all; }

footer { border-top: 1px solid var(--rule); }
footer .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem;
  padding-block: 1.25rem; font: 400 0.8125rem/1.5 var(--mono); color: var(--muted);
}
footer a { color: var(--muted); }

@media (max-width: 30rem) {
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .slot { display: none; }
  .nav { gap: 0.9rem; }
}