/* One stylesheet, no build step. Colour language matches the workbook:
   green = worth it, amber = marginal, red = skip, grey = does not apply. */

:root {
  --ink: #16202c;
  --muted: #5d6b7a;
  --line: #d8dee6;
  --bg: #f6f8fa;
  --card: #ffffff;
  --navy: #1f3a5f;
  --steel: #4a6fa5;
  --good: #157347;
  --good-bg: #e6f4ec;
  --marginal: #9a6700;
  --marginal-bg: #fdf3d8;
  --bad: #b02a37;
  --bad-bg: #fbeaec;

  /* Column striping. Strong enough to actually read as a vertical band across a
     9-column table — that banding is the point, it's what lets the eye track one
     metric straight down 325 rows. Kept in the blue-grey family so it reads as
     structure rather than as meaning; the verdict pills own the colour. */
  --stripe: #eaeff7;
  --hover: rgba(74, 111, 165, 0.09);
  --shadow: 0 1px 2px rgba(22, 32, 44, 0.04), 0 4px 12px rgba(22, 32, 44, 0.05);

  /* Type scale and spacing scale. New components use these, not literals. */
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 16px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--steel); }

/* --- chrome --------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  background: var(--navy);
  color: #fff;
  flex-wrap: wrap;
}
.topbar a { color: #dce6f5; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.brand { font-weight: 700; font-size: 17px; color: #fff !important; }
.topbar nav { display: flex; gap: 14px; flex-wrap: wrap; }
.topbar .admin { color: #ffd479; }
.topbar form.inline { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.who { color: #b9c8dd; font-size: 13px; }
button.link {
  background: none; border: 0; color: #dce6f5; cursor: pointer;
  text-decoration: underline; font-size: 14px; padding: 0;
}

main { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }
footer {
  max-width: 1180px; margin: 0 auto; padding: 0 20px 40px;
  color: var(--muted); font-size: 13px;
}

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 28px 0 10px; }
h3 { font-size: 15px; margin: 18px 0 6px; }
.lede { color: var(--muted); margin: 0 0 20px; }

/* --- cards and figures ---------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.figures { display: flex; gap: 14px; flex-wrap: wrap; }
.figure {
  flex: 1 1 200px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px 17px;
  box-shadow: var(--shadow);
}
.figure .value { font-size: 27px; font-weight: 700; letter-spacing: -0.5px; }
.figure .label { color: var(--muted); font-size: 13px; text-transform: uppercase;
                 letter-spacing: 0.4px; }
.figure .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.figure.negative .value { color: var(--bad); }

/* The lifetime totals sit below the per-year strip and read as a conclusion
   drawn from it, so they get a tinted panel rather than another white card —
   enough separation that nobody adds a per-year figure to a lifetime one. */
.figures.totals { margin-top: 14px; }
.figures.totals .figure { background: #f4f7fc; border-color: #ccd8e8; }

/* The written description leads; the generated sentences follow it in a
   slightly quieter voice, and the researched caveat is set apart from both so
   a scope limit never reads as part of the pitch. */
.plain p { margin: 6px 0; color: #3c4a5a; }
.caveat {
  margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid #c9d3e0;
  background: #f7f9fc; border-radius: 0 6px 6px 0; font-size: 14px;
}

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

/* `separate` rather than `collapse`, for two reasons that both bite the sticky
   header below: a collapsed border belongs to the row, not the cell, so it
   scrolls away from a stuck `th` and leaves it hanging over the rows with no
   edge; and collapsed tables ignore corner radii, which the header needs so it
   does not square off inside the rounded wrapper. Spacing is zero, so each
   cell's own bottom border still reads as one continuous rule. */
table { width: 100%; border-collapse: separate; border-spacing: 0;
        background: var(--card); }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left;
         vertical-align: top; }
th {
  background: #eaeff6; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid #c9d3e0;
  /* Pinned to the top of the window, so the column a number belongs to is
     still readable 300 rows down. This only works because `.table-wrap` is not
     a scroll container — see the note there. */
  position: sticky; top: 0; z-index: 1;
}
thead th:first-child { border-top-left-radius: 10px; }
thead th:last-child { border-top-right-radius: 10px; }
tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }

/* Vertical striping: every other COLUMN, header included, so the band runs the
   full height of the table and the eye can track one metric straight down. */
tbody td:nth-child(even) { background-color: var(--stripe); }
thead th:nth-child(even) { background-color: #dbe4f0; }

/* Hover is painted as a gradient LAYER rather than a background-color, so it
   composites on top of the column stripe instead of replacing it. Setting
   background-color here would erase the stripes on whichever row you happen to
   be pointing at — exactly the row you are trying to read. */
tbody tr:hover td { background-image: linear-gradient(var(--hover), var(--hover)); }

/* Deliberately NOT a scroll container. Any `overflow` other than `visible`
   makes this the scrollport the sticky header pins to, and since the wrapper
   has no height limit it never scrolls internally — so the header would scroll
   off the screen with the page, which is the whole thing we are avoiding. The
   page scrolls; the header stays. */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow);
}

/* Narrow windows are the one case the table cannot simply fit, so there the
   wrapper does scroll sideways and gives up the pinned header for it. Reading
   a 9-column table on a phone means scrolling it horizontally either way. */
@media (max-width: 860px) {
  .table-wrap { overflow-x: auto; }
}

.verdict { font-weight: 600; font-size: 12.5px; padding: 2px 7px; border-radius: 10px;
           display: inline-block; white-space: nowrap; }
.verdict.good { background: var(--good-bg); color: var(--good); }
.verdict.marginal { background: var(--marginal-bg); color: var(--marginal); }
.verdict.bad { background: var(--bad-bg); color: var(--bad); }
.verdict.muted { background: #eceff3; color: var(--muted); }

.tag { font-size: 11.5px; padding: 1px 6px; border-radius: 9px; background: #eceff3;
       color: var(--muted); }
.tag.adopted { background: var(--good-bg); color: var(--good); }
.tag.planned { background: #e7eefb; color: var(--steel); }
.tag.dismissed { background: #eceff3; color: var(--muted); }
.tag.yours { background: #efe7fb; color: #6b3fa0; }
.tag.says-no { background: var(--bad-bg); color: var(--bad); }
.tag.conf-high { background: var(--good-bg); color: var(--good); }
.tag.conf-medium { background: #e7eefb; color: var(--steel); }
.tag.conf-low { background: #eceff3; color: var(--muted); }

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

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 3px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; background: #fff;
}
textarea { min-height: 90px; resize: vertical; }
button, .button {
  padding: 8px 14px; border-radius: 6px; border: 1px solid var(--steel);
  background: var(--steel); color: #fff; font: inherit; cursor: pointer;
  text-decoration: none; display: inline-block;
}
button.secondary, .button.secondary { background: #fff; color: var(--steel); }
button.danger { background: var(--bad); border-color: var(--bad); }
.field-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
           margin-bottom: 14px; }
.filters > div { flex: 0 1 170px; }
.hint { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.error { background: var(--bad-bg); color: var(--bad); padding: 9px 12px;
         border-radius: 6px; margin-bottom: 14px; }
.notice { background: #e7eefb; padding: 12px 14px; border-radius: 6px;
          margin-bottom: 14px; }
.code-shown {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 22px;
  letter-spacing: 2px; background: #fff; border: 2px dashed var(--steel);
  padding: 12px 16px; border-radius: 8px; display: inline-block;
}

/* --- charts --------------------------------------------------------- */

.chart { width: 100%; height: auto; }
.chart-bg { fill: #fbfcfe; }
.chart-zero { stroke: #b9c3cf; stroke-width: 1; stroke-dasharray: 3 3; }
.chart-line { fill: none; stroke: var(--steel); stroke-width: 2.2; }
.chart-area { fill: rgba(74, 111, 165, 0.14); stroke: none; }
.chart-marker { stroke: var(--good); stroke-width: 1.4; stroke-dasharray: 4 3; }
.chart-label { fill: var(--muted); font-size: 11px; }
.bar-positive { fill: var(--good); }
.bar-negative { fill: var(--bad); }

/* --- auth pages ----------------------------------------------------- */

.auth { max-width: 420px; margin: 60px auto; }
.auth .card { padding: 24px; }
.auth h1 { margin-bottom: 14px; }
.auth label { margin-top: 12px; }
.auth button { width: 100%; margin-top: 18px; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 10px; }

/* --- progressive disclosure ----------------------------------------- */

/* One next step per screen. The sentence leads, the single action follows. */
.primary-action {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3); margin: 0 0 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.primary-action p { margin: 0; font-size: var(--text-base); }

/* Everything secondary sits behind a native disclosure. No JS needed. */
details.disclose {
  margin: 14px 0; border-top: 1px solid var(--line); padding-top: 10px;
}
details.disclose > summary {
  cursor: pointer; color: var(--steel); font-weight: 600; font-size: var(--text-md);
  list-style: none;
}
details.disclose > summary::before { content: "+ "; }
details.disclose[open] > summary::before { content: "− "; }
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > :not(summary) { margin-top: 12px; }

/* Top bar: five primary links, the rest under "More". */
.topbar details.more { position: relative; }
.topbar details.more > summary {
  cursor: pointer; color: #dce6f5; list-style: none;
}
.topbar details.more > summary::-webkit-details-marker { display: none; }
.topbar details.more > a,
.topbar details.more[open] > a {
  display: block; padding: 6px 12px; white-space: nowrap;
}
.topbar details.more[open] {
  position: absolute; top: 100%; right: 0; z-index: 5;
  display: flex; flex-direction: column; min-width: 160px;
  padding: 6px 0; background: var(--navy); border-radius: 0 0 8px 8px;
}
.topbar details.more[open] > summary { display: none; }