/* ---- Light palette: the complete set, on bare :root ------------------ */
  :root {
    --ground:      #F7F7FA;
    --surface:     #FFFFFF;
    --surface-sunk:#F1F1F6;
    --line:        #E1E1EA;
    --line-strong: #CDCDD9;
    --ink:         #16161D;
    --ink-2:       #4A4A5A;
    --ink-3:       #74748A;

    --accent:      #5B5BD6;
    --accent-soft: #EDEDFB;

    --clear:       #15803D;
    --clear-soft:  #E4F3EA;
    --wait:        #B45309;
    --wait-soft:   #FBF0E2;
    --block:       #BE123C;
    --block-soft:  #FBE7EC;
    --idle:        #6B7280;
    --idle-soft:   #EEEEF2;

    --shadow: 0 1px 2px rgba(22,22,29,.05), 0 4px 14px rgba(22,22,29,.05);
    --radius: 10px;
  }

  /* ---- Dark: redefine ONLY tokens; an explicit light choice still wins - */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:      #0F1015;
      --surface:     #17181F;
      --surface-sunk:#1E1F28;
      --line:        #2A2B36;
      --line-strong: #3A3B49;
      --ink:         #EDEDF2;
      --ink-2:       #B3B4C2;
      --ink-3:       #82839A;

      --accent:      #9A9AF5;
      --accent-soft: #23233C;

      --clear:       #4ADE80;
      --clear-soft:  #16281D;
      --wait:        #FBBF24;
      --wait-soft:   #2C2312;
      --block:       #FB7185;
      --block-soft:  #331319;
      --idle:        #9CA3AF;
      --idle-soft:   #24252E;

      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
    }
  }
  /* ---- and again for the explicit dark stamp -------------------------- */
  :root[data-theme="dark"] {
    --ground:      #0F1015;
    --surface:     #17181F;
    --surface-sunk:#1E1F28;
    --line:        #2A2B36;
    --line-strong: #3A3B49;
    --ink:         #EDEDF2;
    --ink-2:       #B3B4C2;
    --ink-3:       #82839A;

    --accent:      #9A9AF5;
    --accent-soft: #23233C;

    --clear:       #4ADE80;
    --clear-soft:  #16281D;
    --wait:        #FBBF24;
    --wait-soft:   #2C2312;
    --block:       #FB7185;
    --block-soft:  #331319;
    --idle:        #9CA3AF;
    --idle-soft:   #24252E;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: 1080px; margin: 0 auto; padding: 40px 24px 72px; }

  /* ---- masthead ------------------------------------------------------- */
  .masthead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 20px; margin-bottom: 8px; }
  h1 {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-weight: 700; font-size: 34px; letter-spacing: -0.01em;
    margin: 0; text-wrap: balance;
  }
  .stamp {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .standfirst { color: var(--ink-2); max-width: 66ch; margin: 0 0 28px; }

  /* ---- triage strip --------------------------------------------------- */
  .triage {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 14px;
  }
  .tile {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 2px;
    border-top: 3px solid var(--tone, var(--line-strong));
  }
  .tile .n {
    font-family: "IBM Plex Mono", monospace; font-weight: 600;
    font-size: 27px; line-height: 1.1; font-variant-numeric: tabular-nums;
    color: var(--tone, var(--ink));
  }
  .tile .k {
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-3); font-weight: 600;
  }
  .tile .sub { font-size: 12.5px; color: var(--ink-2); }

  .callout {
    background: var(--accent-soft); border: 1px solid var(--accent);
    border-radius: var(--radius); padding: 13px 16px; margin-bottom: 34px;
    font-size: 14px; color: var(--ink);
  }
  .callout b { font-weight: 600; }

  /* ---- org sections --------------------------------------------------- */
  .org { margin-bottom: 44px; }
  .org-head {
    display: flex; align-items: baseline; gap: 12px;
    padding-bottom: 8px; margin-bottom: 18px;
    border-bottom: 2px solid var(--line-strong);
  }
  .org-head h2 {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: .13em;
    text-transform: uppercase; margin: 0; color: var(--ink);
  }
  .org-head .meta { font-size: 12.5px; color: var(--ink-3); margin-left: auto; }

  /* ---- feature groups ------------------------------------------------- */
  .feature { margin-bottom: 22px; }
  .feature-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
  .tag {
    font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 12px;
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid var(--accent); border-radius: 5px; padding: 1px 7px;
  }
  .tag.plain { background: var(--idle-soft); color: var(--ink-2); border-color: var(--line-strong); }
  .feature-name { font-weight: 600; font-size: 14.5px; }
  .feature-note { font-size: 12.5px; color: var(--ink-3); }

  /* ---- PR rows -------------------------------------------------------- */
  .rows { display: flex; flex-direction: column; gap: 8px; }
  .row {
    background: var(--surface); border: 1px solid var(--line);
    border-left: 4px solid var(--tone, var(--line-strong));
    border-radius: var(--radius); padding: 12px 15px;
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 16px;
    align-items: start; box-shadow: var(--shadow);
  }
  .row.done { opacity: .62; }
  .row .id {
    font-family: "IBM Plex Mono", monospace; font-size: 12.5px;
    color: var(--ink-2); font-weight: 500;
  }
  .row .id b { color: var(--ink); font-weight: 600; }
  .row .title { font-size: 14px; margin-top: 2px; }
  .row .branch {
    font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
    color: var(--ink-3); margin-top: 5px; word-break: break-all;
  }
  .row .branch .arrow { color: var(--line-strong); padding: 0 3px; }
  .pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

  .pill {
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    border: 1px solid transparent;
  }
  .pill .c { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
  .p-clear { background: var(--clear-soft); color: var(--clear); border-color: var(--clear); }
  .p-wait  { background: var(--wait-soft);  color: var(--wait);  border-color: var(--wait); }
  .p-block { background: var(--block-soft); color: var(--block); border-color: var(--block); }
  .p-idle  { background: var(--idle-soft);  color: var(--ink-2); border-color: var(--line-strong); }

  .why {
    grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-2);
    border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 2px;
  }
  .why b { color: var(--ink); font-weight: 600; }

  /* ---- branches table ------------------------------------------------- */
  .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
  table { border-collapse: collapse; width: 100%; font-size: 13px; }
  th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  th {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-3); font-weight: 600; background: var(--surface-sunk);
  }
  tr:last-child td { border-bottom: none; }
  td.mono { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
  td .ok { color: var(--clear); }
  td .warn { color: var(--wait); }

  .foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
  a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
  h3 { font-family: "IBM Plex Sans Condensed", sans-serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 30px 0 10px; }
/* Staleness banner. The published page can lag the local data by days, because
   the nightly job renders but cannot publish -- so when it lags, say so above
   the fold rather than in the footer. Absent entirely when the board is fresh. */
.stale {
  border: 1px solid var(--warn-border, #b45309);
  background: var(--warn-bg, #fffbeb);
  color: var(--warn-fg, #7c2d12);
  border-radius: 6px;
  padding: .7rem .9rem;
  margin: 0 0 1.1rem;
  font-size: .92rem;
  line-height: 1.45;
}
:root:not([data-theme="light"]) .stale { --warn-bg: #2a1c07; --warn-fg: #fcd34d; --warn-border: #a16207; }
:root[data-theme="dark"] .stale     { --warn-bg: #2a1c07; --warn-fg: #fcd34d; --warn-border: #a16207; }

/* Count badge on the review-bucket headings. The author side counts PRs in its
   org header; the reviewer side needs it per bucket, because "4 waiting on you"
   is the number that decides whether to open the page at all. */
.count {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
}
/* Reviewer rows carry no branch line, so the why-line is the last thing in the
   row and wants the same hanging indent the author rows give it. */
.row .why:last-child { margin-bottom: 0; }

/* The "Needs you" section, hoisted above the org sections. Two queues that were
   previously in two different places and neither at the top: his own PRs with an
   unanswered human comment (a red stripe buried in a feature group) and the
   review requests, which sat below every org section. Marked with the block tone
   so the eye lands on it before the grouped work below. */
.org.needs .org-head { border-bottom-color: var(--block); }
.org.needs .org-head h2 { color: var(--block); }
.org.needs .standfirst { margin-bottom: 4px; }
.org.needs > h3:first-of-type { margin-top: 18px; }

/* ---- tab strip -------------------------------------------------------- */
/* The board had grown to five stacked sections, so whatever you opened it for
   was usually below the fold. Panels are all present in the markup and the
   script hides them, so a scripting failure degrades to the old long page. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 2px solid var(--line-strong);
  margin: 22px 0 22px; padding: 0;
}
.tab {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); background: none; border: 0;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: 9px 14px; cursor: pointer; border-radius: 6px 6px 0 0;
  display: inline-flex; align-items: center;
}
.tab:hover { color: var(--ink); background: var(--surface-sunk); }
.tab[aria-selected="true"] {
  color: var(--ink); border-bottom-color: var(--accent); background: var(--surface);
}
.tab.urgent[aria-selected="true"] { border-bottom-color: var(--block); }
.tab.urgent .count { color: var(--block); border-color: var(--block); background: var(--block-soft); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel:focus { outline: none; }
.panel[hidden] { display: none; }

/* ---- clickable tiles --------------------------------------------------- */
/* A tile is clickable ONLY when everything it counts lives on one tab; a set
   that spans tabs stays static and links each item in its subtitle instead. */
button.tile {
  font: inherit; text-align: left; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
button.tile:hover { border-color: var(--tone, var(--line-strong)); transform: translateY(-1px); }
button.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.tile { transition: transform .12s ease, border-color .12s ease; }
@media (prefers-reduced-motion: reduce) { button.tile { transition: none; } }
.tile .sub .jump { color: var(--ink-2); text-decoration: underline; text-decoration-style: dotted; cursor: pointer; }
.tile .sub .jump:hover { color: var(--accent); text-decoration-style: solid; }

/* The jumped-to row, briefly. Without it a tile click scrolls somewhere and
   leaves you to work out which of eight near-identical rows it meant. */
@keyframes flash { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: var(--shadow); } }
.row.flash { animation: flash 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .row.flash { animation: none; box-shadow: 0 0 0 3px var(--accent); }
}