/* ---------------------------------------------------------------------------
   The engineering ledger.

   This plan started life as a spreadsheet on a Windows desktop, so the page is
   built as a ruled ledger rather than a dashboard: paper ground, ruled panels,
   no floating cards, no drop shadows, no rounded corners. Calibri is the house
   face and stays for words; every figure is set in Consolas, the font that
   ships beside it, so hours and ticket keys align in columns the way they do in
   the sheet.

   Colour discipline: Safra gold, green and charcoal for the document; the chart
   hues are the validated pair only (see charts.js). Gold never carries small
   text — it fails contrast on this ground — so there is a separate darker gold
   reserved for type.
--------------------------------------------------------------------------- */

:root {
  --paper:   #E3D7BE;   /* the ground: light brown ledger stock */
  --panel:   #F3EDE0;   /* ruled panel */
  --panel-2: #EDE5D3;   /* alternating ledger row */
  --band:    #D9CBAC;   /* masthead */
  --rule:    #C6B693;
  --rule-soft: #DBCFB3;

  --ink:   #2A2722;
  --body:  #4E4940;
  --muted: #6B6252;

  --gold:      #B8893C;  /* fills and rules only */
  --gold-text: #8A6526;  /* gold that carries type */
  --green:     #1E7A46;

  --s-committed: #3E6FA8;
  --s-gap:       #B96A00;
  --s-gap-text:  #A05C00;
  --track:  #E0D6BE;
  --hatch:  #C9BC9C;
  --ramp-1: #2C5480;
  --ramp-2: #3E6FA8;
  --ramp-3: #6B96C8;

  color-scheme: light;

  --font: Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: Consolas, "SF Mono", "Cascadia Mono", "Roboto Mono", ui-monospace, monospace;
}


* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--body);
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--ink); font-weight: 700; margin: 0; }
a { color: var(--s-committed); }
b, strong { color: var(--ink); font-weight: 700; }

.fig, td.num, th.num, .key { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- masthead ---------- */
.band { background: var(--band); border-bottom: 2px solid var(--gold); }
.band-inner {
  max-width: 1140px; margin: 0 auto; padding: 16px 30px 14px;
  display: flex; align-items: flex-end; gap: 22px;
}
.kicker {
  color: var(--gold-text); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 6px;
}
.band h1 { font-size: 26px; letter-spacing: -.015em; line-height: 1.05; }
.band .sub {
  color: var(--muted); font-size: 12.5px; margin-top: 6px;
  font-family: var(--mono); letter-spacing: -.01em;
}
.band-right { margin-left: auto; text-align: right; }
.mark-logo {
  font-size: 11.5px; font-weight: 700; color: var(--ink);
  letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.who { color: var(--muted); font-size: 12px; display: block; margin-top: 5px; }
.who a { color: var(--muted); }

/* ---------- sprint selector: a ledger tab strip, not a dropdown ---------- */
.sprint-bar {
  background: var(--panel-2); border-bottom: 1px solid var(--rule);
}
.sprint-inner {
  max-width: 1140px; margin: 0 auto; padding: 0 30px;
  display: flex; align-items: stretch; gap: 0; overflow-x: auto;
}
.sprint-lab {
  display: flex; align-items: center; color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding-right: 16px; white-space: nowrap;
}
.tab {
  display: flex; flex-direction: column; justify-content: center;
  padding: 8px 16px 7px; border-right: 1px solid var(--rule-soft);
  text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent;
}
.tab:first-of-type { border-left: 1px solid var(--rule-soft); }
.tab .t-id { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--body); }
.tab .t-meta { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.tab:hover { background: var(--panel); }
.tab[aria-current="page"] {
  background: var(--panel); border-bottom-color: var(--gold);
}
.tab[aria-current="page"] .t-id { color: var(--ink); }
.tab.future .t-id { color: var(--muted); font-weight: 400; }

/* ---------- layout ---------- */
main { max-width: 1140px; margin: 0 auto; padding: 0 30px 56px; }
section { margin-top: 32px; }
.sec-head {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 1px solid var(--rule); padding-bottom: 7px; margin-bottom: 12px;
}
.sec-head h2 { font-size: 17px; letter-spacing: -.01em; }
.sec-num { font-family: var(--mono); color: var(--gold-text); font-weight: 700; font-size: 12.5px; }
.sec-note { color: var(--body); font-size: 13.5px; margin: 0 0 14px; max-width: 800px; }

/* ---------- the capacity equation: the page's thesis ---------- */
.eq {
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: 15px 0 14px; margin-top: 22px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
}
.eq .term { display: flex; flex-direction: column; }
.eq .term b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 24px; color: var(--ink); font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
}
.eq .term b .u { font-size: 13px; color: var(--muted); }
.eq .lab {
  color: var(--muted); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-top: 3px;
}
.eq .op {
  align-self: center; color: var(--gold-text); font-family: var(--mono);
  font-size: 19px; font-weight: 700; padding-bottom: 12px;
}
.eq .term.flag b { color: var(--s-gap-text); }

/* ---------- ledger lines (instead of boxed stat tiles) ---------- */
.ledger-line { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule-soft); margin-top: 14px; }
.ledger-line > div { flex: 1 1 0; min-width: 148px; padding: 10px 16px 9px; border-right: 1px solid var(--rule-soft); }
.ledger-line > div:last-child { border-right: none; }
.ledger-line .l { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ledger-line .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink); font-size: 20px; font-weight: 700; margin-top: 3px; letter-spacing: -.02em;
}
.ledger-line .v .u { font-size: 12px; color: var(--muted); }
.ledger-line .f { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.ledger-line .v.flag { color: var(--s-gap-text); }

/* ---------- ruled panel ---------- */
.panel { background: var(--panel); border: 1px solid var(--rule); padding: 18px 20px; }
.panel + .panel { border-top: none; }
.panel-tight { padding: 0; }
.panel-title { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.cols-2 { display: grid; grid-template-columns: 1.4fr 1fr; }
.cols-2 > .panel + .panel { border-left: none; }

/* ---------- charts ---------- */
.chart { margin: 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
line.grid { stroke: var(--rule-soft); stroke-width: 1; }
.axis { stroke: var(--muted); stroke-width: 1; }
.connector { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: .65; }
.ref-plannable { stroke: var(--ink); stroke-width: 1.5; }
text { font-family: var(--font); }
.tick { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.tick.sm { font-size: 10px; }
.rowlab { fill: var(--body); font-size: 12.5px; }
.rowlab.sm { font-size: 11.5px; }
.barval { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--mono); }

.track { fill: var(--track); }
.reserve-band { fill: url(#hatch); }
.s-cmt { fill: var(--s-committed); }
.s-gap { fill: var(--s-gap); opacity: .55; stroke: var(--s-gap); stroke-width: 1.5; }
.s-open { fill: var(--s-committed); }
.s-done { fill: var(--muted); opacity: .4; }
.w-total { fill: var(--ink); }
.w-final { fill: var(--s-committed); }
.w-sub { fill: var(--muted); opacity: .45; }
.w-reserve { fill: var(--gold); opacity: .8; }
.f-1 { fill: var(--ramp-1); }
.f-2 { fill: var(--ramp-2); }
.f-3 { fill: var(--ramp-3); }
.mark { transition: opacity .12s; cursor: default; outline: none; }
.mark:hover, .mark:focus-visible { opacity: .8; }

/* ---------- tooltip ---------- */
#tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  transition: opacity .1s; background: var(--ink); color: var(--panel);
  padding: 8px 11px; font-size: 12.5px; max-width: 270px;
}
#tip .t-l { font-weight: 700; }
#tip .t-v { font-family: var(--mono); color: var(--gold); font-weight: 700; }
#tip .t-n { opacity: .78; margin-top: 3px; line-height: 1.4; }

/* ---------- ledger table ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; color: var(--muted); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 12px 8px; border-bottom: 1px solid var(--rule); background: var(--panel-2);
}
td { padding: 9px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; }
.key { font-weight: 700; color: var(--ink); white-space: nowrap; font-size: 12.5px; }
.why { color: var(--muted); font-size: 12.5px; }
.state { color: var(--muted); font-size: 11.5px; font-family: var(--mono); }
tbody tr.person-head td {
  background: var(--panel-2); border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); color: var(--ink);
  font-weight: 700; font-size: 13px; padding: 8px 12px;
}
tbody tr.person-head .meta { font-family: var(--mono); font-weight: 400; color: var(--muted); font-size: 12px; }
tbody tr.person-head .open { color: var(--s-gap-text); font-family: var(--mono); }

/* basis: a mark in the margin, not a coloured chip */
.basis { font-family: var(--mono); font-size: 11px; font-weight: 700; white-space: nowrap; }
.basis.b-jira { color: var(--green); }
.basis.b-prop { color: var(--gold-text); }
.basis.b-slot { color: var(--muted); }

/* ---------- rules ---------- */
.rule-item { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule-soft); }
.rule-item:last-child { border-bottom: none; }
.rule-item .n { flex: 0 0 auto; font-family: var(--mono); color: var(--gold-text); font-weight: 700; font-size: 13px; padding-top: 1px; }
.rule-item h3 { font-size: 14px; margin-bottom: 3px; }
.rule-item p { margin: 0; font-size: 13.5px; color: var(--body); }

.callout { border-left: 3px solid var(--s-gap); background: var(--panel-2); padding: 13px 17px; font-size: 13.5px; }

.legend { display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 14px; font-size: 12.5px; color: var(--body); }
.legend i { display: inline-block; width: 13px; height: 11px; margin-right: 6px; vertical-align: -1px; }
.legend .l-cmt { background: var(--s-committed); }
.legend .l-gap { background: var(--s-gap); opacity: .55; border: 1.5px solid var(--s-gap); }
.legend .l-res { background: var(--hatch); }
.legend .l-lim { border-left: 2px solid var(--ink); width: 2px; margin-right: 9px; }

/* ---------- empty state for a sprint that has no plan yet ---------- */
.empty { border: 1px solid var(--rule); background: var(--panel); padding: 40px 34px; margin-top: 26px; }
.empty h2 { font-size: 19px; margin-bottom: 8px; }
.empty p { max-width: 620px; font-size: 14px; margin: 0 0 18px; }
.empty ol { max-width: 620px; font-size: 13.5px; margin: 0; padding-left: 20px; color: var(--body); }
.empty li { margin-bottom: 7px; }
.empty li b { display: block; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--rule); margin-top: 38px; padding: 14px 30px 26px; color: var(--muted); font-size: 11.5px; }
footer .inner { max-width: 1140px; margin: 0 auto; display: flex; gap: 16px; font-family: var(--mono); }
footer .r { margin-left: auto; }

/* ---------- sign in ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login { width: 100%; max-width: 390px; background: var(--panel); border: 1px solid var(--rule); }
.login .top { background: var(--band); border-bottom: 2px solid var(--gold); padding: 20px 24px 16px; }
.login .top h1 { font-size: 20px; }
.login .body { padding: 22px 24px 24px; }
label { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
input[type=text], input[type=password] {
  width: 100%; padding: 9px 11px; font-family: var(--mono); font-size: 14.5px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--rule);
  border-radius: 0; margin-bottom: 15px;
}
input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.remember { display: flex; align-items: center; gap: 8px; margin-bottom: 17px; }
.remember label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--body); font-weight: 400; font-family: var(--font); }
button {
  width: 100%; padding: 10px; font-family: var(--font); font-size: 14px; font-weight: 700;
  letter-spacing: .04em; color: var(--panel); background: var(--ink); border: none; border-radius: 0; cursor: pointer;
}
button:hover { background: #443F38; }
.err { background: #F0DCD0; border: 1px solid #B4795A; color: #7A3312; padding: 9px 11px; font-size: 13px; margin-bottom: 15px; }

.scroll-x { overflow-x: auto; }

/* ===========================================================================
   Retrospective
   Same ledger: ruled panels, no shadows, no rounded corners. Words in Calibri,
   every figure (votes, counts, dates) in Consolas with tabular figures.
=========================================================================== */

/* view switch in the sprint bar */
.view-switch { display: flex; margin-left: auto; align-items: stretch; }
.view-switch a {
  display: flex; align-items: center; padding: 8px 15px 7px;
  border-left: 1px solid var(--rule-soft); border-bottom: 3px solid transparent;
  color: var(--body); text-decoration: none; font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.view-switch a:hover { background: var(--panel); }
.view-switch a[aria-current="page"] { background: var(--panel); color: var(--ink); border-bottom-color: var(--gold); }

/* a one-line result of the last action */
.rnote { margin: 22px 0 0; padding: 9px 13px; font-size: 13.5px; border-left: 3px solid var(--rule); background: var(--panel-2); color: var(--body); }
.rnote.ok { border-left-color: var(--green); }
.rnote.warn { border-left-color: var(--s-gap); color: var(--ink); }

/* facilitator strip */
.facil {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: 11px 0 10px; margin-top: 22px;
}
.facil form { margin: 0; }
.facil-lab { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.facil-done { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--green); }
.facil-why { color: var(--muted); font-size: 12.5px; flex: 1 1 240px; }

/* buttons that are not the full-width sign-in button */
.btn-sm {
  width: auto; padding: 6px 13px; font-size: 13px; font-weight: 700;
  color: var(--panel); background: var(--ink); border: 1px solid var(--ink); cursor: pointer;
}
.btn-sm:hover { background: #443F38; }
.btn-sm[disabled] { background: var(--panel-2); color: var(--muted); border-color: var(--rule); cursor: not-allowed; }
.linkish {
  width: auto; padding: 0; background: none; border: none; color: var(--muted);
  font-family: var(--font); font-size: 12px; text-decoration: underline; cursor: pointer;
}
.linkish:hover { background: none; color: var(--ink); }
button:focus-visible, a:focus-visible, textarea:focus, select:focus, input[type=date]:focus {
  outline: 2px solid var(--gold); outline-offset: 1px;
}

/* three columns, sharing rules like the rest of the ledger */
.retro-cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.retro-cols > .panel + .panel { border-left: none; }
.rcol { display: flex; flex-direction: column; }
.rcol-n { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--body); }
.rcol-hint { color: var(--muted); font-size: 12px; margin: -6px 0 10px; }
.rhidden {
  font-size: 12.5px; color: var(--body); margin: 0 0 4px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 8px 0; background: var(--panel-2);
}
.rhidden .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.rhidden.empty { color: var(--muted); }
.rempty { color: var(--muted); font-size: 12.5px; margin: 10px 0; }

/* a card is a ruled ledger row, not a floating tile */
.rcard { border-top: 1px solid var(--rule-soft); padding: 9px 0 8px; }
.rc-body { margin: 0; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.rc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; }
.rc-by { font-size: 11.5px; color: var(--muted); }
.rc-by.anon { font-style: italic; }
.rc-date { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted); }
.rc-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.rc-act { margin: 0; }
.vote {
  width: auto; padding: 2px 9px; font-family: var(--font); font-size: 12px; font-weight: 700;
  color: var(--body); background: var(--panel-2); border: 1px solid var(--rule); cursor: pointer;
}
.vote:hover { background: var(--paper); color: var(--ink); }
.vote .n {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  margin-left: 7px; padding-left: 7px; border-left: 1px solid var(--rule); color: var(--ink);
}
.vote.on, .vote.on:hover { background: var(--s-committed); border-color: var(--s-committed); color: var(--panel); }
.vote.on .n { color: var(--panel); border-left-color: var(--rule); }

/* an AI group: label, one neutral line, combined votes, then the cards */
.rgroup { border: 1px solid var(--rule); border-left: 3px solid var(--gold); background: var(--panel-2); padding: 10px 12px 4px; margin: 0 0 10px; }
.rgroup-head { display: flex; align-items: baseline; gap: 10px; }
.rgroup-label { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.rgroup-votes {
  margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1;
}
.rgroup-votes .u { font-size: 10.5px; color: var(--muted); margin-left: 4px; }
.rgroup-sum { margin: 4px 0 0; font-size: 12.5px; color: var(--body); }
.rgroup-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 5px 0 0; }
.rgroup .rcard:first-of-type { border-top: 1px solid var(--rule); margin-top: 6px; }

/* add-card form, pinned to the foot of its column */
.rform { margin-top: auto; padding-top: 14px; }
.rform label { margin-bottom: 5px; }
textarea {
  width: 100%; padding: 8px 10px; font-family: var(--font); font-size: 13.5px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--rule);
  border-radius: 0; resize: vertical;
}
.rform-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.chk { display: flex; align-items: center; gap: 6px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 400; color: var(--body); font-family: var(--font); }
.chk input { width: auto; margin: 0; }
.rform-row .btn-sm { margin-left: auto; }

/* measures */
.none { color: var(--muted); }
.mform-wrap { border-top: none; }
.mform { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.mform > div { flex: 0 0 auto; }
.mform .f-body { flex: 1 1 320px; }
.mform .f-act { margin-left: auto; }
.mform input[type=text] { margin-bottom: 0; }
input[type=date], select {
  padding: 8px 10px; font-family: var(--mono); font-size: 13.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 0;
}
select { font-family: var(--font); }
.mform td button { margin: 0; }

@media (max-width: 900px) {
  .retro-cols { grid-template-columns: 1fr; }
  .retro-cols > .panel + .panel { border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); }
  .view-switch { margin-left: 0; }
  .mform .f-act { margin-left: 0; }
  .mform > div { flex: 1 1 100%; }
}

@media (max-width: 900px) {
  .cols-2 { grid-template-columns: 1fr; }
  .cols-2 > .panel + .panel { border-top: 1px solid var(--rule); }
  .band-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; }
  .band-right { margin-left: 0; text-align: left; }
  main { padding: 0 18px 40px; }
  .sprint-inner { padding: 0 18px; }
  .eq { gap: 4px 10px; }
  .eq .term b { font-size: 20px; }
  .ledger-line > div { border-right: none; border-bottom: 1px solid var(--rule-soft); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- measure follow-through ---------- */
/* A carried-over measure is the team's own unkept promise: tinted so it reads
   as inherited debt rather than as something agreed in this retro. */
tr.carried td { background: var(--panel-2); }
tr.carried td:first-child { box-shadow: inset 3px 0 0 var(--s-gap); }
.statusform { display: flex; gap: 6px; align-items: center; }
.statusform select {
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 0; padding: 3px 5px;
}
.btn-xs {
  width: auto; padding: 3px 8px; font-family: var(--font); font-size: 11.5px;
  font-weight: 700; color: var(--panel); background: var(--ink);
  border: none; border-radius: 0; cursor: pointer;
}
.btn-xs:hover { background: #443F38; }

/* ===========================================================================
   Retro page — display hierarchy.
   Headings carry the structure so the prose doesn't have to: one status strip
   replaces the old state sentence + counter boxes + facilitator row, and the
   column names are large enough to be the section labels themselves.
   =========================================================================== */

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.rhead { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 14px; }
.rhead h2 { font-size: 31px; font-weight: 700; letter-spacing: -.028em; line-height: 1.02; }
.rhead-note { margin: 0; font-size: 13px; color: var(--s-gap-text); }
.rhead-note b { color: var(--s-gap-text); }

/* status strip */
.rbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  background: var(--panel); border: 1px solid var(--rule);
  padding: 11px 16px; margin-top: 22px;
}
.rbar form { margin: 0; }
.rstate {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid var(--rule); color: var(--muted); background: var(--panel-2);
}
.rstate.on { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.rfigs { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.rfigs b { color: var(--ink); font-weight: 700; }
.rbar .sp { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.btn-sm.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn-sm.ghost:hover:not([disabled]) { background: var(--panel-2); }
.btn-sm[disabled] { opacity: .38; cursor: not-allowed; }

/* column head — the word is the heading */
.rcol-head {
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 2px solid var(--ink); padding-bottom: 9px; margin-bottom: 12px;
}
.rcol-title { font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.rcol-n {
  margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 700; color: var(--muted);
}
.rhidden { font-size: 12px; padding: 6px 0; margin: 0 0 2px; }
.rempty { color: var(--rule); font-family: var(--mono); margin: 14px 0; }
.rform label.sr + textarea { margin-top: 0; }


@media (max-width: 900px) {
  .rhead h2 { font-size: 25px; }
  .rbar .sp { margin-left: 0; width: 100%; }
}
.board-sec { margin-top: 18px; }

/* ===========================================================================
   Planning board
   =========================================================================== */

.bwrap { display: grid; grid-template-columns: 300px 1fr; gap: 18px; margin-top: 18px; align-items: start; }

/* backlog */
.pool-col { background: var(--panel); border: 1px solid var(--rule); padding: 14px 14px 10px; position: sticky; top: 12px; }
.pool-head, .lane-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pool-name { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.pool-head { border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 10px; }

/* Front end and back end are separate plans that happen to share a page --
   a full-width rule under each label keeps them from reading as one grid. */
.lane-group + .lane-group { margin-top: 30px; }
.lane-group h3 {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.grp-figs {
  margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted);
}
.grp-figs b { color: var(--ink); font-size: 13px; }
.lane-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }

.lane { background: var(--panel); border: 1px solid var(--rule); padding: 12px 13px 8px; display: flex; flex-direction: column; }
.lane.is-over { border-color: var(--s-gap); }
.lane-name { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.lane-figs { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.lane-figs .cmt { color: var(--ink); font-size: 13px; }
.lane-figs .sl { opacity: .5; margin: 0 1px; }
.lane-figs em { font-style: normal; margin-left: 7px; }
.lane-figs .open { color: var(--muted); }
.lane-figs .full { color: var(--green); }
.lane-figs .over { color: var(--s-gap-text); font-weight: 700; }

/* the meter: fill = committed, gold line = plannable limit, track = capacity */
.meter { position: relative; height: 9px; margin: 9px 0 11px; background: var(--track); }
.meter-fill { position: absolute; inset: 0 auto 0 0; background: var(--s-committed); transition: width .14s ease; }
.meter-fill.over { background: var(--s-gap); }
.meter-line { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--gold); }

.lane-list { list-style: none; margin: 0; padding: 0; min-height: 26px; display: flex; flex-direction: column; gap: 7px; }
.lane-drop {
  margin: 8px 0 2px; padding: 7px 0; text-align: center; font-size: 11.5px; color: var(--rule);
  border: 1px dashed var(--rule); opacity: 0; transition: opacity .12s;
}
.lane.drop-on .lane-drop, .pool-col.drop-on .lane-drop { opacity: 1; }
.lane.drop-on, .pool-col.drop-on { outline: 2px solid var(--s-committed); outline-offset: -1px; }
.lane.would-over { outline-color: var(--s-gap); }
.lane.would-over .lane-drop { border-color: var(--s-gap); color: var(--s-gap-text); }

/* ticket */
.tk {
  background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--s-committed);
  padding: 7px 9px 6px; cursor: grab;
}
.tk:active { cursor: grabbing; }
.tk.dragging { opacity: .35; }
.tk.pool { border-left-color: var(--muted); }
.tk.pool.unsized { border-left-color: var(--s-gap); }
.tk-top { display: flex; align-items: baseline; gap: 8px; }
.tk-key { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--ink); }
.tk-h { margin-left: auto; display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
.tk-h .u { color: var(--muted); font-size: 10.5px; }
.tk-h .nosize { color: var(--s-gap-text); font-size: 10.5px; }
.tk-h input {
  width: 46px; padding: 1px 4px; font-family: var(--mono); font-size: 12px; text-align: right;
  color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 0; margin: 0;
}
.tk-title { font-size: 12.5px; color: var(--body); line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; }
.tk-foot { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.tk-state { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.tk-out {
  width: auto; margin-left: auto; padding: 0 6px; font-size: 13px; line-height: 1.5;
  color: var(--muted); background: transparent; border: 1px solid transparent; cursor: pointer;
}
.tk-out:hover { color: var(--ink); border-color: var(--rule); background: var(--panel-2); }

.hint { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.hint.ok { color: var(--green); }
.hint.bad { color: var(--s-gap-text); }

@media (max-width: 980px) {
  .bwrap { grid-template-columns: 1fr; }
  .pool-col { position: static; }
}
@media (prefers-reduced-motion: reduce) { .meter-fill { transition: none; } }
.tk-to {
  margin-left: auto; padding: 1px 4px; font-family: var(--font); font-size: 10.5px;
  color: var(--muted); background: var(--panel); border: 1px solid var(--rule); border-radius: 0;
}
.tk-to:focus { outline: 2px solid var(--gold); outline-offset: 1px; color: var(--ink); }
.tk:hover .tk-to { color: var(--ink); }

/* backlog split: sized tickets can be placed, unsized ones must be sized first */
.pool-group + .pool-group { margin-top: 18px; }
.pool-sub {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule);
}
.pool-sub span { margin-left: auto; font-family: var(--mono); letter-spacing: 0; text-transform: none; }
.pool-sub b { color: var(--ink); }
.needs-est .pool-sub { border-bottom-color: var(--s-gap); color: var(--s-gap-text); }
.needs-est .pool-sub b { color: var(--s-gap-text); }
.pool-note { margin: -2px 0 9px; font-size: 11px; color: var(--muted); line-height: 1.35; }
.pool-none { list-style: none; font-size: 11.5px; color: var(--rule); font-family: var(--mono); padding: 4px 0; }
.tk.unsized { cursor: default; border-left-color: var(--s-gap); background: var(--panel-2); }
.tk.unsized .tk-h input {
  width: 48px; padding: 1px 4px; font-family: var(--mono); font-size: 12px; text-align: right;
  color: var(--ink); background: var(--panel); border: 1px solid var(--s-gap); border-radius: 0; margin: 0;
}
.needs { margin-left: auto; font-size: 10.5px; color: var(--s-gap-text); font-family: var(--mono); }

/* umbrella lane: a partner team planned as one block */
.lane.umbrella { border-style: dashed; }
.lane.umbrella .lane-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.team {
  font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--rule); padding: 1px 5px; white-space: nowrap;
}
.lane.umbrella .meter-fill { background: var(--ramp-3); }
.lane.umbrella .meter-fill.over { background: var(--s-gap); }

/* ---------- Jira import ---------- */
.banner.ok { background: var(--green-tint); border: 1px solid var(--green); color: var(--ink); padding: 10px 14px; margin-top: 18px; font-size: 13.5px; }
.imp-how ol { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--body); }
.imp-how li { margin-bottom: 5px; }
.imp-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.imp-form { margin-top: 14px; }
.imp-form textarea { font-family: var(--mono); font-size: 12px; }
.imp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 10px; }
.imp-row .inline { margin: 0; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 400; color: var(--body); font-family: var(--font); }
.imp-warn { flex: 1 1 260px; font-size: 11.5px; color: var(--s-gap-text); }
.imp-file { font-size: 11.5px; color: var(--muted); width: auto; }
.imp-row .btn-sm { width: auto; margin-left: auto; }
.imp-res { margin-top: 16px; }
.imp-sum { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.imp-sum b { color: var(--ink); font-size: 15px; }
.imp-sum .warnish b { color: var(--s-gap-text); }
.imp-cols { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 12px; }
.imp-cols .col { font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border: 1px solid var(--rule); color: var(--muted); }
.imp-cols .hit { border-color: var(--green); color: var(--green); }
.imp-cols .miss { border-color: var(--rule); color: var(--rule); }
.imp-bad { font-size: 13px; color: var(--s-gap-text); margin: 6px 0; }
.imp-more { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.imp-apply { margin-top: 14px; }
.imp-apply .btn-sm { width: auto; }
a.btn-sm { display: inline-block; text-decoration: none; text-align: center; line-height: 1.5; }

/* ---------- sprint review ---------- */
.rv-figs { display: flex; flex-wrap: wrap; gap: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); margin-top: 22px; }
.rv-figs > div { flex: 1 1 0; min-width: 150px; padding: 14px 18px; border-right: 1px solid var(--rule-soft); }
.rv-figs > div:last-child { border-right: none; }
.rv-figs b { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.03em; }
.rv-figs span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.rv-figs em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 4px; }
.rv-figs .rv-big b { font-size: 40px; }
.rv-figs .flagged b, .rv-figs .flagged em { color: var(--s-gap-text); }
.rv-none { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.rv-how { margin-top: 14px; }
.rv-how p { margin: 0; font-size: 13.5px; }
.panel.bad { border-left: 3px solid var(--s-gap); }
.rv-caveat { border-left: 3px solid var(--s-gap); background: var(--panel-2); padding: 12px 16px; margin-top: 20px; font-size: 13px; color: var(--body); }
.rv-caveat b { color: var(--s-gap-text); }

/* ===========================================================================
   Control refinement.
   Native number steppers and hairline inputs were the two things that made
   this read as unfinished. Steppers are suppressed everywhere and replaced by
   typing (the values are quarter-hours, so a 1-step arrow was wrong anyway);
   selects get a drawn chevron instead of the OS widget; every control is sized
   to be comfortably hit rather than squeezed to its content.
   =========================================================================== */

/* Kill the native number spinner everywhere. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* One drawn chevron for every select, so no two OS widgets look different. */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
select:hover {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
}

/* Comfortable sizing across the board. */
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
  min-height: 38px; padding: 9px 12px; font-size: 14px; line-height: 1.3;
}
textarea { min-height: 68px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}

/* Hours on a ticket: a real field, not a hairline box. */
.tk-h input, .tk.unsized .tk-h input {
  width: 62px; min-height: 30px; padding: 4px 8px; font-size: 13px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.tk-h input:hover { border-color: var(--muted); }

/* Assign / status selects sit inside dense rows, so they get their own scale. */
.tk-to, .statusform select {
  min-height: 30px; padding: 4px 26px 4px 9px; font-size: 12.5px;
  background-position: calc(100% - 13px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
}

/* "Back to backlog" was an arrow glyph; make it a labelled control. */
.tk-out {
  width: auto; margin-left: auto; padding: 3px 9px;
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; line-height: 1.6;
  color: var(--muted); background: transparent;
  border: 1px solid var(--rule); cursor: pointer;
}
.tk-out:hover { color: var(--s-gap-text); border-color: var(--s-gap); background: var(--panel); }

/* ---------- report ---------- */
.stat-hero { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.stat-hero b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 46px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.04em; }
.stat-hero b .u { font-size: 22px; color: var(--muted); }
.stat-hero span { font-size: 14px; color: var(--body); max-width: 460px; }
.stat-hero.flag b { color: var(--s-gap-text); }
.note-line { margin: 14px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 720px; }
.note-line b { color: var(--ink); }
.seg-n { fill: #fff; font-family: var(--mono); font-size: 13px; font-weight: 700; }

/* outcome segments — one hue for the good end, orange only for the bad one */
.seg-fin  { fill: var(--s-committed); }
.seg-adv  { fill: var(--ramp-3); }
.seg-sta  { fill: var(--track); }
.seg-reg  { fill: var(--s-gap); }
.seg-stage{ fill: var(--ramp-2); }
/* bug vs improvement: the validated orange/blue pair, never orange/green */
.seg-bug   { fill: var(--s-gap); }
.seg-bug-l { fill: var(--s-gap); opacity: .45; }
.seg-imp   { fill: var(--s-committed); }
.seg-imp-l { fill: var(--s-committed); opacity: .45; }
.legend .l-fin { background: var(--s-committed); }
.legend .l-adv { background: var(--ramp-3); }
.legend .l-sta { background: var(--track); border: 1px solid var(--rule); }
.legend .l-reg { background: var(--s-gap); }
/* a <b> inside the caption is emphasis, not a second hero number */
.stat-hero span b {
  font-family: var(--font); font-size: inherit; font-weight: 700;
  color: var(--ink); letter-spacing: normal; line-height: inherit;
}

/* ===========================================================================
   ATLASSIAN LAYER
   The team lives in Jira all day, so the product borrows Jira's vocabulary:
   neutral page, white cards with a soft shadow and a small radius, coloured
   status lozenges, and a type icon before every issue key.

   Chart series deliberately do NOT use Jira's status palette: its green/red
   are 5.5 dE apart under protanopia and its purple/blue 11.2 even with full
   colour vision. Lozenges can use them because the text carries the meaning;
   charts stay on the validated blue/red pair.
   =========================================================================== */

:root {
  --paper:   #F7F8F9;   /* page */
  --panel:   #FFFFFF;   /* card */
  --panel-2: #F1F2F4;   /* sunken column */
  --band:    #FFFFFF;   /* top nav */
  --rule:      #DFE1E6;
  --rule-soft: #EBECF0;

  --ink:   #172B4D;
  --body:  #44546F;
  --muted: #626F86;

  --gold:      #0C66E4;   /* the accent role is now Atlassian blue */
  --gold-text: #0055CC;
  --green:     #216E4E;

  --s-committed: #0C66E4;
  --s-gap:       #C9372C;
  --s-gap-text:  #AE2E24;
  --track:  #DFE1E6;
  --hatch:  #C1C7D0;
  --ramp-1: #09326C;
  --ramp-2: #0C66E4;
  --ramp-3: #579DFF;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: var(--font);
  --shadow-card: 0 1px 1px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31);
  --r: 3px;
}

body { background: var(--paper); font-size: 14px; }
.fig, td.num, th.num, .key, .tick, .barval, .rfigs, .lane-figs,
.ledger-line .v, .eq .term b, .rv-figs b, .stat-hero b, .tk-h, .tk-key {
  font-variant-numeric: tabular-nums;
}

/* nav */
.band { background: var(--band); border-bottom: 1px solid var(--rule); }
.band h1 { font-size: 24px; letter-spacing: -.01em; }
.kicker { color: var(--muted); letter-spacing: .08em; }
.sprint-bar { background: var(--band); border-bottom: 1px solid var(--rule); }
.tab, .tab:first-of-type { border-right: none; border-left: none; }
.tab[aria-current="page"] { background: transparent; border-bottom-color: var(--gold); }
.tab[aria-current="page"] .t-id { color: var(--gold-text); }
.view-switch a[aria-current="page"] { color: var(--gold-text); border-bottom-color: var(--gold); }

/* surfaces: rounded, shadowed, white */
.panel, .lane, .pool-col, .login, .empty, .rv-caveat, .callout, .imp-res {
  border-radius: var(--r); box-shadow: var(--shadow-card); border-color: var(--rule);
}
.panel + .panel { border-top: 1px solid var(--rule); }
.cols-2 > .panel + .panel { border-left: 1px solid var(--rule); }
.lane-grid { gap: 16px; }
.lane { background: var(--panel-2); border: 1px solid transparent; box-shadow: none; }
.lane.is-over { border-color: var(--s-gap); }
.pool-col { background: var(--panel-2); box-shadow: none; border: 1px solid var(--rule); }

/* a ticket is a Jira card */
.tk {
  background: var(--panel); border: 1px solid transparent; border-left: none;
  border-radius: var(--r); box-shadow: var(--shadow-card); padding: 9px 11px 8px;
}
.tk:hover { background: #FAFBFC; }
.tk.pool, .tk.pool.unsized { border-left: none; }
.tk-key { color: var(--muted); font-weight: 600; font-size: 12px; }
.tk-title { color: var(--ink); font-size: 13.5px; }

/* issue type icon — red square for a bug, green for an improvement */
.ity {
  display: inline-block; width: 14px; height: 14px; border-radius: 2px;
  vertical-align: -2px; margin-right: 6px; flex: 0 0 auto;
  background: var(--s-gap);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.ity.imp { background: var(--green); }

/* status lozenge */
.loz {
  display: inline-block; padding: 2px 6px; border-radius: var(--r);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap;
  background: #DCDFE4; color: #44546F;
}
.loz.prog { background: #E9F2FF; color: #0055CC; }
.loz.rev  { background: #F3F0FF; color: #5E4DB2; }
.loz.uat  { background: #FFF7D6; color: #7F5F01; }
.loz.done { background: #DCFFF1; color: #216E4E; }
.loz.bad  { background: #FFECEB; color: #AE2E24; }

/* controls */
button, .btn-sm, a.btn-sm {
  background: var(--gold); color: #fff; border-radius: var(--r); font-weight: 600;
  letter-spacing: 0;
}
button:hover, .btn-sm:hover, a.btn-sm:hover { background: var(--gold-text); }
.btn-sm.ghost { background: #F1F2F4; color: var(--ink); border: none; }
.btn-sm.ghost:hover:not([disabled]) { background: #DCDFE4; }
.linkish { background: none; color: var(--gold-text); }
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
  border-radius: var(--r); border-color: var(--rule); background: var(--panel);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); border-color: var(--gold);
}
.tk-out { border-radius: var(--r); border-color: var(--rule); }

/* headings + tables */
.rhead h2, .sec-head h2 { color: var(--ink); }
.rcol-head, .pool-head { border-bottom: 2px solid var(--rule); }
.rcol-title, .pool-name { color: var(--ink); }
th { background: var(--panel-2); color: var(--muted); }
.eq { border-top-color: var(--rule); }
.rbar { border-radius: var(--r); box-shadow: var(--shadow-card); }
.rstate { border-radius: var(--r); border-color: var(--rule); }
.rstate.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.meter, .meter-fill { border-radius: 999px; }
/* The plannable marker must contrast with the fill, and the fill is now blue. */
.meter-line { background: var(--ink); width: 2px; border-radius: 0; }
.meter { background: var(--track); }
.legend .l-res { background: var(--hatch); }

/* ===========================================================================
   ROUNDING + FIXES  (11.08)
   Softer corners throughout, and three things that were plainly wrong on
   screen: red sub-labels on every report section, a count rendered white on
   a pale fill, and the assign dropdown growing past the edge of its card.
   =========================================================================== */

:root {
  --r: 6px;         /* controls, lozenges, small chips */
  --r-card: 10px;   /* anything that reads as a surface */
}

.panel, .lane, .pool-col, .login, .empty, .rv-caveat, .callout, .imp-res,
.tk, .rbar, .chart, .mform, .statusform {
  border-radius: var(--r-card);
}
/* Stacked panels share a seam, so only the outer corners round. */
.panel:has(+ .panel) { border-radius: var(--r-card) var(--r-card) 0 0; }
.panel + .panel { border-radius: 0 0 var(--r-card) var(--r-card); }
.cols-2 > .panel:has(+ .panel) { border-radius: var(--r-card) 0 0 var(--r-card); }
.cols-2 > .panel + .panel { border-radius: 0 var(--r-card) var(--r-card) 0; }
.loz { border-radius: 999px; padding: 2px 8px; }
.ity { border-radius: 3px; }

/* A section sub-label is context, not an alarm. Red is reserved for the
   places that genuinely need attention (see .rhead-note.flag). */
.rhead-note { color: var(--muted); }
.rhead-note b { color: var(--ink); }
.rhead-note.flag, .rhead-note.flag b { color: var(--s-gap-text); }

/* "Didn't move" is a pale grey fill; a white numeral vanished on it. */
.seg-n.on-pale { fill: var(--ink); }
/* Zero rows keep a baseline tick instead of a stub bar that reads as data. */
.zero-rule { stroke: var(--rule); stroke-width: 2; }
.barval.zero { fill: var(--muted); }

/* The assign dropdown sizes itself to its longest option ("Indian
   Colleagues" and friends), which pushed it clean out of the card. */
.tk-foot { flex-wrap: wrap; row-gap: 6px; }
.tk-to {
  flex: 1 1 120px; min-width: 0; max-width: 100%;
  text-overflow: ellipsis;
}
.tk-out { flex: 0 0 auto; }

/* Grid rows stretched every lane to the tallest one in its row, so a person
   with one ticket got a 400px void. Lanes now take their natural height and
   keep a floor big enough to aim a drag at. */
.lane-grid { align-items: start; }
.lane { min-height: 178px; }
.lane-list { flex: 1 1 auto; }

/* The reopens form was sitting on top of the paragraph above it. */
.mform { margin-top: 18px; border-radius: 0; }

/* --- fast lane table --- */
.fl-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.fl-table th {
  text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 10px; border-bottom: 1px solid var(--rule);
}
.fl-table td { padding: 9px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.fl-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.fl-table td.key { white-space: nowrap; font-weight: 600; }
.fl-table td.act { text-align: right; width: 1%; }
.fl-table td.act form { margin: 0; }
.fl-table tr.warn-row td { background: #FFF7D6; }
.tag-warn { color: #7F5F01; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.note-line.flag { color: var(--s-gap-text); }
.note-line code {
  font-family: ui-monospace, monospace; font-size: 12px;
  background: var(--panel-2); padding: 1px 5px; border-radius: var(--r);
}

/* --- capacity, editable per lane -------------------------------------------
   The field is the ticket-hours field (.tk-h input), reused rather than
   redrawn: one control style per card. The steppers are borderless glyphs so
   the number stays the thing you look at.                                   */
.lane-cap { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; }
.cap-lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.lane-cap .tk-h { gap: 3px; }
.cap-in { width: 62px; }
.cap-step {
  width: 24px; height: 26px; padding: 0; margin: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 400; line-height: 1;
  background: transparent; color: var(--muted); border: none;
  border-radius: var(--r); cursor: pointer;
}
.cap-reset {
  /* Buttons are full-width by default in this stylesheet; left at that, this
     one pushed the capacity field clean out of the lane. */
  width: auto; margin: 0; padding: 0; flex: 0 0 auto;
  font-size: 11px; font-weight: 700; line-height: 1.4;
  background: none; border: none; color: #7F5F01; cursor: pointer;
}
/* An edited lane also says so on its own edge, not only in the button. */
.lane.cap-edited { box-shadow: inset 2px 0 0 #F5CD47; }

/* --- burndown: two lines, one axis --- */
.bd-ideal  { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 7 6; opacity: .6; }
.bd-actual { fill: none; stroke: var(--s-committed); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.bd-proj   { fill: none; stroke: var(--s-committed); stroke-width: 2.5; stroke-dasharray: 1 6;
             stroke-linecap: round; opacity: .5; }
/* A 2px surface ring keeps the markers legible where the lines cross. */
.bd-dot      { fill: var(--s-committed); stroke: var(--panel); stroke-width: 2; }
.bd-dot.proj { fill: var(--panel); stroke: var(--s-committed); stroke-width: 2; }
.bd-end      { fill: var(--ink); font-size: 12.5px; font-weight: 700; font-family: var(--mono); }
.legend .l-act   { background: var(--s-committed); }
.legend .l-proj  { background: var(--panel); border: 2px dotted var(--s-committed); }
.legend .l-ideal { background: var(--muted); opacity: .6; }

/* --- hover: lift, don't darken ---------------------------------------------
   Hovering a primary button used to drop it to #0055CC, which reads as heavy
   and slightly dead. It now goes a shade *brighter* with a soft blue glow and
   a 1px lift, and only darkens on the press. #1A6DE6 keeps white text at
   4.80:1, so brighter than this is not available -- anything lighter fails
   contrast, which is why the movement carries the feedback instead.        */
button, .btn-sm, a.btn-sm {
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
button:hover, .btn-sm:hover, a.btn-sm:hover {
  background: #1A6DE6;
  box-shadow: 0 2px 8px rgba(12, 102, 228, .28);
  transform: translateY(-1px);
}
button:active, .btn-sm:active, a.btn-sm:active {
  background: #0B5FD0; box-shadow: none; transform: none;
}
/* Quiet buttons stay quiet: a blue tint rather than a grey slab. */
.btn-sm.ghost:hover:not([disabled]), .tk-out:hover {
  background: #E9F2FF; color: var(--gold-text); border-color: #9EC4F5;
  box-shadow: none; transform: none;
}
.cap-step:hover { background: #E9F2FF; color: var(--gold-text); box-shadow: none; transform: none; }
.btn-sm.ghost:active:not([disabled]), .tk-out:active { background: #CCE0FF; }
.linkish:hover { background: none; box-shadow: none; transform: none; text-decoration: underline; }
.cap-reset:hover { background: none; box-shadow: none; transform: none; text-decoration: underline; }
button[disabled], button[disabled]:hover {
  background: var(--panel-2); color: var(--muted); box-shadow: none; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  button, .btn-sm, a.btn-sm { transition: background .12s ease; }
  button:hover, .btn-sm:hover, a.btn-sm:hover { transform: none; }
}

/* --- import: what a merge would change ------------------------------------
   The old flow replaced the sprint on every upload, so a filtered export
   silently deleted tickets. The plan below is shown before anything is
   written, and "kept, not deleted" is the line that matters.              */
.imp-plan {
  margin-top: 16px; padding: 14px 16px;
  background: var(--panel-2); border-radius: var(--r-card);
}
.imp-plan-h {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.imp-plan-h span { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 400; }
.imp-plan-l { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.imp-plan-l code {
  font-family: ui-monospace, monospace; font-size: 12px;
  background: var(--panel); padding: 1px 5px; border-radius: var(--r);
}
.imp-plan-l li.keep { color: #7F5F01; }
.imp-plan-l li.keep b { color: #7F5F01; }
.imp-plan-n { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.imp-apply { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

/* --- import: the two jobs, side by side ------------------------------------
   Completing the baseline and recording the end of the sprint are different
   acts with different consequences, so they are two labelled cards rather
   than one button with a mode hidden inside it.                            */
.imp-modes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.imp-mode {
  flex: 1 1 260px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-card);
  display: flex; flex-direction: column; gap: 8px;
}
.imp-mode .m-h { display: flex; align-items: baseline; gap: 8px; }
.imp-mode .m-h b { font-size: 14px; color: var(--ink); }
.imp-mode .m-tag {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #7F5F01; background: #FFF7D6;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.imp-mode p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; flex: 1 1 auto; }
.imp-mode button { width: 100%; margin: 0; }
.imp-mode.danger { background: var(--panel-2); }
.imp-mode.danger .m-tag { color: var(--s-gap-text); background: #FFECEB; }

/* The import page has to say which of the two uploads is due, before the
   paste box rather than after the preview. */
.imp-next {
  margin: 0 0 12px; padding: 10px 14px; font-size: 13.5px; line-height: 1.55;
  color: var(--body); background: #E9F2FF; border-radius: var(--r-card);
}
.imp-next b { color: #0055CC; }

/* --- button contrast -------------------------------------------------------
   Two measured problems, not taste:
   1. A ghost button's fill was #F1F2F4 on a #F1F2F4 card — a contrast ratio of
      1.00. It was invisible AS A BUTTON; only its text showed. Ghost buttons
      now carry a border and a fill that differs from whatever they sit on.
   2. Hovering turned ghost text blue (#0055CC) on a blue tint (#E9F2FF) —
      5.87:1, legal but the blue-on-blue everyone squints at. The tint stays,
      the text goes back to ink at 12.5:1.                                  */
.btn-sm.ghost, a.btn-sm.ghost, .tk-out {
  background: var(--panel);
  color: var(--ink);
  /* #7A869A clears 3:1 against every surface a ghost button sits on
     (white 3.68, grey card 3.29, blue tint 3.26), which is the threshold at
     which a border reads as the edge of a control rather than a hairline. */
  border: 1px solid #7A869A;
  box-shadow: 0 1px 0 rgba(9, 30, 66, .06);
}
.btn-sm.ghost:hover:not([disabled]), a.btn-sm.ghost:hover, .tk-out:hover {
  background: #E9F2FF;
  color: var(--ink);
  border-color: #0C66E4;
  box-shadow: none;
}
.btn-sm.ghost:active:not([disabled]), .tk-out:active { background: #CCE0FF; }
/* On a grey card the ghost fill must be lighter than the card, not equal. */
.imp-mode.danger .btn-sm.ghost { background: #FFFFFF; }
.btn-sm.ghost[disabled] {
  background: var(--panel-2); color: var(--muted); border-color: var(--rule);
  box-shadow: none;
}
/* Bold text inside the blue guidance panel: ink, not another blue. */
.imp-next b { color: var(--ink); }

/* --- selects: put the chevron back ----------------------------------------
   The Atlassian layer set `background: var(--panel)` on inputs and selects.
   `background` is a shorthand, so it reset background-image to none and wiped
   the drawn chevron from every select in the app — and the later `padding`
   shorthand removed the 28px gutter that had been reserved for it. The result
   read as a plain text box with no affordance at all.

   Longhands only from here, so a future colour tweak cannot erase it again. */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: var(--panel);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
  border: 1px solid #7A869A;   /* same 3:1 control edge as the ghost buttons */
  color: var(--ink);
  cursor: pointer;
}
select:hover { border-color: #0C66E4; background-color: #F7F9FD; }
select:focus-visible { border-color: #0C66E4; }
.tk-to, .statusform select {
  padding-right: 30px;
  background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
}

/* The native file widget is OS chrome and looks nothing like the rest.
   The input is hidden and its own label carries the button styling. */
.imp-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-btn {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 38px; padding: 0 14px; margin: 0;
  font-size: 13px; font-weight: 700; color: var(--ink);
  /* .imp-row label is uppercase with wide tracking; a button label is not. */
  text-transform: none; letter-spacing: 0;
  background: var(--panel); border: 1px solid #7A869A; border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(9, 30, 66, .06); cursor: pointer; white-space: nowrap;
}
.file-btn:hover { background: #E9F2FF; border-color: #0C66E4; }
.file-btn:focus-within { outline: 2px solid var(--gold); outline-offset: 1px; }
.file-btn .fn { font-weight: 400; color: var(--muted); }

/* --- fast lane, on the board ----------------------------------------------
   Pulling work into a running sprint is a decision, and the only moment
   anyone will record it is the moment it happens. One row, one field, on the
   page the team already has open.                                          */
.fastbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 16px;
  background: var(--panel); border: 1px solid var(--rule);
  border-left: 3px solid #F5CD47; border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.fastbar.is-over { border-left-color: var(--s-gap); }
.fb-lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #7F5F01; white-space: nowrap;
}
.fastbar.is-over .fb-lab { color: var(--s-gap-text); }
.fb-figs { font-size: 12.5px; color: var(--muted); }
.fb-figs b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fb-figs em { font-style: normal; font-weight: 700; color: var(--s-gap-text); }
/* `input[type=text]` sets width:100% and margin-bottom, and beats a bare
   class on specificity — hence input.fb-key rather than .fb-key. */
.fastbar input.fb-key, .fastbar input.fb-h {
  min-height: 32px; padding: 4px 10px; margin: 0;
  font-size: 13px; font-family: var(--font); border-radius: var(--r);
  border: 1px solid #7A869A; background: var(--panel); color: var(--ink);
}
.fastbar input.fb-key { width: 150px; margin-left: auto; font-variant-numeric: tabular-nums; }
.fastbar input.fb-h { width: 66px; text-align: right; }
.fastbar .btn-sm { margin: 0; min-height: 32px; padding: 4px 12px; }
.fb-link { font-size: 12px; color: var(--gold-text); white-space: nowrap; }
@media (max-width: 760px) {
  .fb-key { margin-left: 0; flex: 1 1 120px; width: auto; }
}

/* --- import filters -------------------------------------------------------- */
.filt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.filt-lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.filt-none { font-size: 12.5px; color: var(--muted); }
.filt-chip {
  display: inline-flex; align-items: center; gap: 4px; margin: 0;
  padding: 3px 4px 3px 10px; font-size: 12.5px; font-weight: 700; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--rule); border-radius: 999px;
}
.filt-chip button {
  width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: var(--muted);
  background: transparent; border: none; border-radius: 999px; cursor: pointer;
}
.filt-chip button:hover { background: #FFECEB; color: var(--s-gap-text); box-shadow: none; transform: none; }
.filt-add { display: flex; gap: 8px; margin: 0 0 0 auto; }
.filt-add input[type=text] { width: 170px; min-height: 34px; margin: 0; font-size: 13px; }
.filt-add .btn-sm { margin: 0; min-height: 34px; }
.imp-sum .ignored { color: var(--muted); }
.imp-ignored {
  margin: 14px 0 0; padding: 10px 14px; font-size: 12.5px; line-height: 1.6;
  color: var(--muted); background: var(--panel-2); border-radius: var(--r-card);
}
.imp-ignored code {
  font-family: ui-monospace, monospace; font-size: 12px;
  background: var(--panel); padding: 1px 5px; border-radius: var(--r);
}

/* --- ticket list, biggest first ------------------------------------------- */
.tk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tk-table th {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.tk-table th.num, .tk-table td.num { text-align: right; }
.tk-table td { padding: 8px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.tk-table td.num {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.tk-table td.key { white-space: nowrap; font-weight: 600; }
.tk-table td.ttl { color: var(--body); }
.tk-table tr.is-done td.key, .tk-table tr.is-done td.ttl { color: var(--muted); }
.tk-table tr.no-size td.num { color: var(--muted); font-weight: 400; }
.tk-table .none { color: var(--muted); }

/* Priority: colour plus the word, never colour alone. */
.prio {
  display: inline-block; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: #DCDFE4; color: #44546F;
}
.prio.top  { background: #FFECEB; color: #AE2E24; }
.prio.high { background: #FFF4E5; color: #974F0C; }
.prio.med  { background: #E9F2FF; color: #0055CC; }
.prio.low  { background: #DCFFF1; color: #216E4E; }
.prio.none { background: transparent; color: var(--muted); font-weight: 400; }
.prio-sum { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.prio-tot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.prio-tot b { color: var(--ink); font-variant-numeric: tabular-nums; }
.prio-tot em { font-style: normal; font-variant-numeric: tabular-nums; }

/* --- busy state ------------------------------------------------------------
   A form post that takes 40 seconds needs to say so. The page dims, one line
   says which job is running, and a counter proves it has not hung.        */
.busy {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center;
  background: rgba(9, 30, 66, .45);
}
.busy.on { display: flex; }
.busy-box {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 24px; max-width: 90vw;
  background: var(--panel); border-radius: var(--r-card);
  box-shadow: 0 8px 24px rgba(9, 30, 66, .3);
  font-size: 14px; color: var(--ink);
}
.busy-dot {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 2.5px solid #DFE1E6; border-top-color: var(--gold);
  animation: busy-spin .8s linear infinite;
}
.busy-el {
  margin-left: 4px; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .busy-dot { animation-duration: 2.4s; }
}

/* --- cumulative flow ------------------------------------------------------- */
.cf-bar { fill: var(--s-committed); }
.cf-n { fill: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-here { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cf-n.out { fill: var(--ink); }

/* --- reopens: the JQL and the recorded keys -------------------------------- */
.jql {
  margin: 12px 0; padding: 10px 14px; overflow-x: auto;
  font-family: ui-monospace, monospace; font-size: 12.5px; line-height: 1.5;
  color: var(--ink); background: var(--panel-2); border-radius: var(--r-card);
  white-space: pre-wrap; word-break: break-word;
}
.ro-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.ro-form { margin-top: 4px; padding: 0; border: none; background: none; box-shadow: none; }
.ro-form .imp-row { margin-top: 10px; }

/* Review tables carry an hours column and a total, so they need the same
   numeric treatment as the report's ticket list. */
.rv-none + table, .panel-tight table td.num, .panel-tight table th.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.panel-tight table tfoot td {
  border-top: 2px solid var(--rule); font-size: 12px; color: var(--muted);
  padding-top: 9px;
}
.panel-tight table tfoot td b { color: var(--ink); }

/* --- cumulative flow diagram ----------------------------------------------
   One quantity split by stage, so a single-hue ramp rather than four
   categories: darkest at the finished end, lightest at the untouched end.
   Adjacent bands clear ΔE 14.9 under deuteranopia, and each carries a direct
   label because colour alone must never name a band.                       */
.cfd-out   { fill: #09326C; }
.cfd-check { fill: #0C66E4; }
.cfd-dev   { fill: #579DFF; }
.cfd-todo  { fill: #B3D4FF; }
.cfd-edge  { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .5; }
.cfd-now   { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .35; }
.cfd-lab   { fill: var(--body); font-size: 12px; }
.cfd-n     { fill: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.legend .l-out   { background: #09326C; }
.legend .l-check { background: #0C66E4; }
.legend .l-dev   { background: #579DFF; }
.legend .l-todo  { background: #B3D4FF; }

/* --- backlog: two columns of cards -----------------------------------------
   At 300px the backlog showed four cards before scrolling while the lanes
   beside it had room to spare. It is now wide enough for two columns of
   tickets, which is where the unplaced work actually needs reading.       */
.bwrap { grid-template-columns: minmax(420px, 34%) 1fr; }
.pool-col .lane-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px; align-items: start;
}
.pool-col .lane-list .pool-none { grid-column: 1 / -1; }
/* A card in a narrow column cannot afford a horizontal footer. */
.pool-col .tk-foot { flex-wrap: wrap; row-gap: 6px; }
.pool-col .tk-title { font-size: 12px; }
.pool-col input.tk-to, .pool-col .tk-to { flex: 1 1 100%; margin-left: 0; }

@media (max-width: 1100px) {
  .bwrap { grid-template-columns: minmax(320px, 40%) 1fr; }
}
@media (max-width: 900px) {
  .bwrap { grid-template-columns: 1fr; }
  .pool-col .lane-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* The fast-lane capacity row sits under the pull-in row. */
.fastbar.fb-cap { margin-top: 8px; border-left-color: var(--rule); }
.fastbar.fb-cap .fb-lab { color: var(--muted); }
.fastbar.fb-cap .tk-h { margin-left: auto; }

/* Tickets that were already past UAT when the sprint began: shown last, and
   dimmed, because they are not what this sprint did. */
tr.pre-done td { background: var(--panel-2); color: var(--muted); }
tr.pre-done td.key, tr.pre-done td.ttl, tr.pre-done td.num { color: var(--muted); }
tr.pre-done td.num { font-weight: 400; }
.tag-pre {
  display: inline-block; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: #DCDFE4; color: #44546F;
}