:root {
  --bg: #edeeea;
  --bg-panel: #e2e4de;
  --ink: #1b211d;
  --ink-muted: #5b645d;
  --line: #b9beb4;
  --accent: #d9660f;
  --accent-ink: #fff8ef;
  --danger: #b3261e;
  --ok: #1baf7a;
  --late-yellow-bg: #fdf1b8;
  --late-red-bg: #f8d3d0;
  --due-soon-bg: #d6e8fb;
  --cwp-fill: #c6efce;
  --warn-text: #a06a00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181a;
    --bg-panel: #1b2124;
    --ink: #e9ece7;
    --ink-muted: #9aa39b;
    --line: #333b37;
    --accent: #e58a2a;
    --accent-ink: #14181a;
    --late-yellow-bg: #5a4a12;
    --late-red-bg: #5a2320;
    --due-soon-bg: #1c3a52;
    --cwp-fill: #1f3d2a;
    --warn-text: #e0b84c;
  }
}
:root[data-theme="dark"] {
  --bg: #14181a;
  --bg-panel: #1b2124;
  --ink: #e9ece7;
  --ink-muted: #9aa39b;
  --line: #333b37;
  --accent: #e58a2a;
  --accent-ink: #14181a;
  --late-yellow-bg: #5a4a12;
  --late-red-bg: #5a2320;
  --due-soon-bg: #1c3a52;
  --cwp-fill: #1f3d2a;
  --warn-text: #e0b84c;
}
:root[data-theme="light"] {
  --bg: #edeeea;
  --bg-panel: #e2e4de;
  --ink: #1b211d;
  --ink-muted: #5b645d;
  --line: #b9beb4;
  --accent: #d9660f;
  --accent-ink: #fff8ef;
  --late-yellow-bg: #fdf1b8;
  --late-red-bg: #f8d3d0;
  --due-soon-bg: #d6e8fb;
  --cwp-fill: #c6efce;
  --warn-text: #a06a00;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* Reserves space for the now-fixed .topbar, which no longer takes up room in normal flow.
   Scoped to pages that actually render one (the standalone /login page doesn't). --topbar-h is
   measured and kept in sync by Layout's inline script; this value is just a reasonable
   first-paint fallback before that script runs. */
body.has-topbar {
  padding-top: var(--topbar-h, 3.75rem);
}

.mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

a { color: inherit; }

.topbar {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  /* Fixed (not sticky) — some pages let their content overflow horizontally wider than the
     viewport, and only position:fixed stays anchored to the actual viewport edges regardless of
     scroll direction; position:sticky would still get dragged sideways with an oversized parent. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  /* Construction/caution yellow, with the same blueprint-grid graphic as the workpackplan.com
     marketing page laid over it — a solid color (not a theme variable) so the ribbon reads the
     same in light and dark mode, with the text colors below fixed to match for contrast. */
  background:
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, #1b211d 12%, transparent) 0 1px,
      transparent 1px 88px
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, #1b211d 12%, transparent) 0 1px,
      transparent 1px 88px
    ),
    #f7c600;
  color: #1b211d;
}

.topbar .wordmark {
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-decoration: none;
  letter-spacing: 0.02em;
  color: #1b211d;
}

.topbar nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.topbar nav a { text-decoration: none; color: color-mix(in srgb, #1b211d 70%, transparent); }
.topbar nav a:hover { color: #1b211d; }

/* .btn.secondary otherwise pulls its text color from the theme-dependent var(--ink), which is
   light in dark mode — unreadable against the topbar's fixed yellow regardless of theme. */
.topbar .btn.secondary {
  color: #1b211d;
  border-color: color-mix(in srgb, #1b211d 40%, transparent);
}
.topbar .btn.secondary:hover {
  background: color-mix(in srgb, #1b211d 8%, transparent);
}

.topbar .project-name {
  margin-left: auto;
  font-size: 0.75rem;
  color: color-mix(in srgb, #1b211d 70%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

main {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  max-width: 72rem;
  margin: 0 auto;
}

/* Wide pages (e.g. the V4 grid) opt out of the centered 72rem column so a
   wide table has the full viewport to work with. */
main.main-wide {
  max-width: none;
}

h1 {
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.page-header h1 { margin: 0; }
.page-subtitle { font-size: 0.85rem; color: var(--ink-muted); margin-top: 0.15rem; }
.pp-title { font-size: 3.75rem; font-family: "Arial Black", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; letter-spacing: -0.01em; }
.page-header .pp-title + .page-subtitle { font-size: 1.5rem; }
.pp-project-logo { height: 5.5rem; width: auto; max-width: 16rem; object-fit: contain; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  cursor: pointer;
}

.btn:hover { filter: brightness(0.95); }

.btn.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn.danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
}

/* The Overall Progress and Planning Summary tables above the grid — header row matches the
   topbar's construction yellow, with the same fixed dark text used there for contrast. */
.pp-summary-table thead th {
  background: #f7c600;
  color: #1b211d;
}

/* The V4 grid: a sticky <thead> only sticks relative to the nearest ancestor with non-visible
   overflow — but overflow-x:auto above implicitly computes overflow-y to auto too (a CSS quirk:
   an axis left "visible" gets forced to "auto" whenever the other axis isn't visible), turning
   .table-wrap itself into the sticky container instead of the actual page. Since that wrapper has
   no bounded height, the header just scrolls away with everything else. Overriding back to
   overflow-x:visible here removes that accidental scroll container, so horizontal overflow (the
   grid is wider than most viewports) bubbles up to the page itself, and the header can stick to
   the real viewport as the whole page scrolls. */
.pp-table-wrap {
  overflow-x: visible;
  /* The grid already has its own cell borders (border-right/border-bottom on th/td) — this
     wrapper's own border just doubled up as an extra outline around the whole table. */
  border: none;
  margin-bottom: 2rem;
}

th, td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--bg-panel);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: color-mix(in srgb, var(--bg-panel) 60%, transparent); }

.mh-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg);
  box-shadow: 1px 0 0 var(--line);
}
th.mh-sticky { background: var(--bg-panel); z-index: 2; }

/* The "+ Add IWPs under ..." trigger sits in a sticky cell only as wide as the Work Pack # column
   (so the label itself stays pinned during horizontal scroll) — but its <details> content, once
   opened, is a full bulk-add form that needs real width, so this cell alone drops the grid's
   usual overflow:hidden clipping and raises above sibling cells while expanded. */
.mh-grid td.pp-add-iwp-cell {
  overflow: visible;
  z-index: 2;
}
.pp-add-iwp-cell details[open] {
  position: relative;
  z-index: 2;
}

/* Spreadsheet-style grid for weekly MH claiming: full cell borders, a
   frozen header row and frozen person column, so it reads as a chart you
   scroll through rather than a plain report table. */
.mh-grid-wrap {
  max-height: 70vh;
  overflow: auto;
}

.mh-grid {
  border-collapse: separate;
  border-spacing: 0;
  /* `auto` (the default) only treats <col> widths as loose hints that get overridden by
     content-based sizing — `fixed` makes them authoritative, which is what every column here
     actually relies on (each one always gets an explicit width from the colgroup). */
  table-layout: fixed;
  /* Outer perimeter only — every cell already has its own border-right/border-bottom, this is
     just the frame around the whole grid. */
  border: 2px solid #000;
}

.mh-grid th,
.mh-grid td {
  border-right: 1px solid var(--line);
}

.mh-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 2px solid #000;
}

.mh-grid tfoot th {
  position: sticky;
  bottom: 0;
  background: var(--bg-panel);
  z-index: 2;
  border-top: 2px solid var(--line);
}

.mh-grid tfoot th.mh-sticky { z-index: 3; }

.mh-grid td:not(.mh-sticky) {
  min-width: 4.25rem;
}

/* Fixed table layout makes column widths authoritative rather than content-expandable, so cells
   whose content isn't an <input> (which already clips/scrolls internally) need their own clip. */
.mh-grid th,
.mh-grid td {
  overflow: hidden;
}

.mh-grid td:has(.mh-input) {
  padding: 0;
}

.mh-input {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 0.55rem 0.6rem;
}

.mh-input:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mh-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--bg-panel);
}

/* Version 2 grid: a stage's planned date has passed and it hasn't been
   claimed yet — yellow within a week late, red beyond that. */
.mh-input.date-late-yellow { background: var(--late-yellow-bg); }
.mh-input.date-late-red { background: var(--late-red-bg); }
.mh-input.date-due-soon { background: var(--due-soon-bg); }

/* Version 4: CWP rows get a static fill (matching the source workbook's
   green CWP / plain IWP row styling) instead of V2's bold+panel emphasis. */
.mh-grid tr.pp-cwp-row td { background: var(--cwp-fill); }

/* Date for Plan / each stage's Planned cell, colored directly on the <td>
   (unlike the Completion cells' .mh-input rules above, which color the
   nested input) — matched specificity to .pp-cwp-row td above and placed
   after it, so an overdue cell shows the alert color even on a CWP row. */
.mh-grid tr td.date-late-yellow { background: var(--late-yellow-bg); }
.mh-grid tr td.date-late-red { background: var(--late-red-bg); }

/* P6 - Target: P6 Date minus Date for Plan, in days. */
.pp-p6-target.p6-warn { color: var(--warn-text); font-weight: 600; }
.pp-p6-target.p6-negative { color: var(--danger); font-weight: 600; }

/* Grid planning-summary table: SPI (Earned / Planned as of today) below 1 means behind schedule. */
.pp-spi-red { color: var(--danger); font-weight: 600; }

/* Planning-summary table: trend columns — ramping up (more planners needed) is a warning (red),
   ramping down (can ease off) is the opposite of a warning (green). */
.pp-trend-up { color: var(--danger); font-weight: 600; }
.pp-trend-down { color: var(--ok); font-weight: 600; }


/* Version 4: collapse to CWPs only — hides every IWP row and each CWP's
   "+ Add IWPs" row, leaving just the top-level CWP rows. */
.mh-grid.hide-iwps tr.pp-row:not(.pp-cwp-row) { display: none; }
.mh-grid.hide-iwps tr.pp-add-iwp-row { display: none; }

/* Version 4: drag handle at the right edge of each resizable header cell. */
.col-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 5;
  user-select: none;
}
.col-resize-handle:hover,
.col-resize-handle:active {
  background: var(--accent);
  opacity: 0.5;
}

/* Version 2 grid: a thin hover strip between rows that reveals a "+" to
   insert a new blank IWP — hoverable itself, or by hovering the row above
   it (so it reads as "hover the bottom line of a row"). */
.pp-add-row-strip td {
  height: 7px;
  line-height: 0;
  padding: 0;
  border: none;
}
.pp-add-row-strip form {
  margin: 0;
  height: 100%;
}
.pp-add-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  line-height: 18px;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.1s, transform 0.1s;
}
tr.pp-row:hover + tr.pp-add-row-strip .pp-add-btn,
.pp-add-row-strip:hover .pp-add-btn,
.pp-add-btn:focus {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--ink-muted);
  border: 1px dashed var(--line);
}

form.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 34rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
}

.field input, .field select, .field textarea {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
}

#pp-add-cwp-box .field input,
#pp-add-cwp-box .field select,
#pp-add-cwp-box .field textarea {
  border-width: 2px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

.pill {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pill.risk-low { border-color: var(--ok); color: var(--ok); }
.pill.risk-medium { border-color: var(--accent); color: var(--accent); }
.pill.risk-high { border-color: var(--danger); color: var(--danger); }

.pill.status-complete { border-color: var(--ok); color: var(--ok); }
.pill.status-in_progress { border-color: var(--accent); color: var(--accent); }
.pill.status-not_started { color: var(--ink-muted); }

.actions-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.error-banner {
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.success-banner {
  border: 1px solid var(--ok);
  color: var(--ok);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

/* Reporting tab: card-based sections, plus a status strip summarizing the automation state at a
   glance so you don't have to read every card to know whether/when the report actually sends. */
.rp-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.75rem;
  border-radius: 6px;
}

.rp-status-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.rp-status-item .rp-status-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.rp-status-item .rp-status-value {
  font-size: 0.95rem;
  font-weight: 600;
}

.rp-status-value.rp-on { color: var(--ok); }
.rp-status-value.rp-off { color: var(--ink-muted); }

.rp-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--bg-panel);
}

.rp-card h2 {
  font-size: 1rem;
  margin: 0 0 0.25rem;
  letter-spacing: 0.01em;
}

/* Overarching section titles above the grid's summary tables (Planning / People / Late Work Packs)
   — boxed, grey background, centered, and attached directly to the table below (no gap, square
   bottom corners meeting the table's square top corners, no bottom border so the table's own top
   border reads as the seam between them). */
.pp-section-title {
  font-size: 1.1rem;
  margin: 0;
  letter-spacing: 0.01em;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 0.5rem 1rem;
  text-align: center;
}

/* Planning | Dashboard on row 1, People | Late Work Packs on row 2 — an actual 2-column grid
   (not flexbox) so each row's two cells align at the same top edge regardless of how tall the
   other row is, keeping People and Late Work Packs lined up with each other. */
.pp-summary-grid {
  display: grid;
  grid-template-columns: auto auto;
  /* row-gap column-gap — the column-gap is the fixed distance kept between the Dashboard/Late Work
     Packs column and the Planning/People column. */
  gap: 1.25rem 2rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
  .pp-summary-grid {
    grid-template-columns: 1fr;
  }
  /* Stacked on narrow screens — the dashboard renders above Planning instead of following it in
     DOM order, since it's the more at-a-glance-important of the two. */
  .pp-metrics-col {
    order: -1;
  }
}

/* Big at-a-glance stats, boxed together — sized to match the Late Work Packs table's width so the
   two right-column cells line up. */
.pp-metrics-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}
.pp-dashboard-card {
  min-width: 8rem;
  text-align: center;
}
.pp-dashboard-card-danger {
  color: var(--danger);
}
.pp-dashboard-value {
  font-family: "Arial Black", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 2.5rem;
  line-height: 1.1;
}
.pp-dashboard-card-danger .pp-dashboard-value {
  color: var(--danger);
}
.pp-dashboard-label {
  font-size: 0.8rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.4rem;
}

.rp-card .rp-card-hint {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin: 0 0 1.1rem;
}

.rp-card.rp-danger {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 6%, transparent);
}

.rp-card.rp-danger h2 { color: var(--danger); }

.pp-tool-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  max-width: 46rem;
}

.pp-tool-grid > .rp-card {
  margin-bottom: 0;
}

.pp-tool-card {
  padding: 0.7rem 1.1rem;
}

.pp-tool-grid summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
}

.pp-tool-grid details[open] summary {
  margin-bottom: 0.6rem;
}

.rp-recipient-list {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 26rem;
}

.rp-recipient-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.88rem;
}

.rp-discipline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.5rem 1rem;
  margin-bottom: 1.1rem;
  max-width: 40rem;
}

/* Reporting tab: on/off switch for the automated weekly send. */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 2.4rem;
  height: 1.4rem;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-switch .slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--line);
  border-radius: 999px;
  transition: background 0.15s;
}
.toggle-switch .slider::before {
  content: "";
  position: absolute;
  height: 1.1rem;
  width: 1.1rem;
  left: 0.15rem;
  bottom: 0.15rem;
  background: var(--bg);
  border-radius: 50%;
  transition: transform 0.15s;
}
.toggle-switch input:checked + .slider {
  background: var(--accent);
}
.toggle-switch input:checked + .slider::before {
  transform: translateX(1rem);
}

/* Grid filter row's Hide-complete / Due-soon / CWPs-only switches — stacked two per row,
   positioned next to the discipline filter dropdown. */
.pp-filter-switches {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.6rem 1.5rem;
  align-content: start;
}
.pp-switch-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Narrow-viewport pass. Most layouts here already adapt on their own (the tool/discipline/field
   grids all use auto-fit/auto-fill, so they collapse to one column naturally) — this block only
   covers the pieces that don't: the topbar's three items no longer fit one row on a phone, and
   the oversized headings/card padding eat too much of a narrow screen's width. The grid itself
   (.mh-grid) intentionally keeps scrolling horizontally rather than trying to collapse dozens of
   columns — .mh-sticky on the Work Pack # column keeps you oriented while you scroll it. */
@media (max-width: 640px) {
  .topbar {
    gap: 0.6rem 1rem;
    padding: 0.75rem 1rem;
  }
  .topbar .project-name {
    margin-left: 0;
    width: 100%;
  }
  h1 {
    font-size: 1.3rem;
  }
  .pp-title {
    font-size: 1.6rem;
  }
  .page-header .pp-title + .page-subtitle {
    font-size: 0.85rem;
  }
  main {
    padding: 1rem;
  }
  main.main-wide {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .rp-card {
    padding: 1rem 1.1rem;
  }
  .rp-status-strip {
    gap: 0.6rem 1.25rem;
    padding: 0.75rem 1rem;
  }
}

/* Project selection screen (lands here right after login) — same construction yellow /
   blueprint-grid identity as the app's topbar and summary tables, standalone from Layout since
   there's no active-project context yet. */
.sp-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, var(--line) 35%, transparent) 0 1px,
      transparent 1px 88px
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--line) 35%, transparent) 0 1px,
      transparent 1px 88px
    ),
    var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.sp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, #1b211d 12%, transparent) 0 1px,
      transparent 1px 88px
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, #1b211d 12%, transparent) 0 1px,
      transparent 1px 88px
    ),
    #f7c600;
  color: #1b211d;
}

.sp-wordmark {
  font-family: "Archivo Black", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.sp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem 1rem;
}

.sp-card {
  width: 100%;
  max-width: 28rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2rem;
}

/* A visually secondary "tool" entry point floating below the main project-select card — grey
   rather than the card's own panel color, so it reads as a separate, lighter-weight utility rather
   than another way to pick a project. */
.sp-tool-card {
  width: 100%;
  max-width: 28rem;
  background: color-mix(in srgb, var(--ink) 6%, var(--bg-panel));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  text-align: center;
}

.sp-tool-card h2 {
  font-family: "Arial Black", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}

.sp-tool-card p {
  color: var(--ink-muted);
  font-size: 0.82rem;
  margin: 0 0 1rem;
}

.sp-title {
  font-family: "Arial Black", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.6rem;
  margin: 0 0 0.35rem;
  letter-spacing: -0.01em;
}

.sp-hint {
  color: var(--ink-muted);
  font-size: 0.88rem;
  margin: 0 0 1.5rem;
}

.sp-project-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.sp-project-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.sp-project-btn:hover {
  border-color: #f7c600;
  transform: translateX(2px);
}

.sp-project-btn.is-active {
  border-color: #f7c600;
  background: color-mix(in srgb, #f7c600 12%, var(--bg));
}

.sp-project-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f7c600;
  color: #1b211d;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 700;
}

.sp-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.25rem 0;
  color: var(--ink-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sp-divider::before,
.sp-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
  flex: 1;
}

.sp-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin: 0.75rem 0 0;
}