/* /showcase/build-timetable: "The market timetable".
   A candidate treatment of /what-we-build. Stylesheet for this page only.

   The page is one departures board. The board is the page's only dark
   field (Ink, flush to the container, 12px corners, Rule Dark hairlines);
   everything around it stays on the recorded Paper ground. Flap cells, a
   mono glyph in a small rounded cell split by a 1px mid-line, appear only
   in the board header and the When and Status columns. The question bar
   is the board's own last row, so no second dark field exists.

   Marks: Teal square = on the record. Hollow Paper square = announced by
   the bank and still ahead. Blue = the read line and the one changed row,
   nothing else. No Amber.

   No shadows, no gradients. The flap cell ground is Ink lifted a few
   percent toward white with color-mix, so it is derived from the token
   rather than a new color. */

.tt-hero,
.tt-station,
.tt-line,
.tt-foot {
  --flap-ground: color-mix(in srgb, var(--ink), #ffffff 10%);
  --board-text: #EEF1EE;
  --detail-ground: color-mix(in srgb, var(--ink), #ffffff 4%);
}

::selection { background: rgba(47, 99, 218, 0.2); color: var(--ink); }
.tt-board ::selection { background: rgba(255, 255, 255, 0.24); color: #FFFFFF; }

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

/* ── First viewport ─────────────────────────────────────────────── */

.tt-hero { padding: 22px 0 20px; }
.tt-hero h1 {
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--ink);
}
.tt-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: end;
  margin-top: 10px;
}
.tt-lede {
  font-size: 19.5px;
  line-height: 1.5;
  color: var(--body);
  max-width: 36em;
}
.tt-hero-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}
/* The stamp is set at the size of the board's column heads, never larger:
   a date on the page is a promise, not a headline. */
.tt-stamp {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  white-space: nowrap;
}

/* ── The station: board, key and question bar ────────────────────── */

.tt-station { padding: 0 0 8px; }

.tt-board {
  background: var(--ink);
  color: var(--board-text);
  border-radius: 12px;
  /* clip, not hidden: hidden would make the board a scroll container and
     stop the question bar sticking to the screen. */
  overflow: clip;
  font-family: var(--mono);
  font-weight: 500;
}

.tt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px 11px;
  border-bottom: 1px solid var(--rule-dark);
}

.tt-again {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 14px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--board-text);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.tt-again[hidden] { display: none; }
.tt-again:hover { border-color: var(--board-text); background: rgba(255, 255, 255, 0.06); }
.tt-again svg { flex: none; transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1); }
.tt-again.is-on svg { transform: rotate(-180deg); }

.tt-notice {
  flex: 1;
  min-width: 0;
  max-width: 46em;
  margin-left: auto;
  position: relative;
  padding-left: 18px;
  font-family: var(--text);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: #FFFFFF;
}
.tt-notice::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--blue);
}
.tt-notice:empty { display: none; }

/* ── Flap cells ───────────────────────────────────────────────────── */

.fp { display: inline-block; vertical-align: middle; }
.fp-c {
  display: inline-flex;
  gap: 1.5px;
  vertical-align: middle;
  font-size: 12.5px;
  --fh: 1.6em;
}
.fc {
  position: relative;
  display: inline-block;
  width: 0.95em;
  height: var(--fh);
  line-height: var(--fh);
  text-align: center;
  background: var(--flap-ground);
  border-radius: 3px;
  overflow: hidden;
  color: #F4F6F3;
}
.fc::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(17, 22, 27, 0.5);
  z-index: 2;
}
.fs { display: inline-block; width: 0.45em; }

.fp--big .fp-c { font-size: 20px; gap: 3px; }
.fp--big .fc { border-radius: 5px; }

/* The reel a cell steps through before it locks. Built by the script,
   one cell at a time, and removed once the cell has settled. */
.fr {
  display: flex;
  flex-direction: column;
  animation-name: tt-roll;
  animation-timing-function: steps(var(--k), end);
  animation-fill-mode: both;
}
.fr > span { display: block; height: var(--fh); line-height: var(--fh); }
@keyframes tt-roll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(var(--k) * var(--fh) * -1)); }
}

/* ── Status marks ─────────────────────────────────────────────────── */

.tt-mark {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
}
.tt-mark--record { background: var(--teal); }
.tt-mark--ahead { border: 1.5px solid #F4F6F3; }
.tt-mark--changed { background: var(--blue); }

/* ── The table ────────────────────────────────────────────────────── */

.tt-tablewrap { position: relative; }

.tt-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12.5px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.tt-table caption {
  caption-side: top;
  text-align: left;
  padding: 9px 20px;
  border-bottom: 1px solid var(--rule-dark);
  font-size: 12px;
  color: var(--dark-body);
}
.tt-cap { display: inline-block; padding: 2px 0; }
.tt-legend {
  float: right;
  display: inline-flex;
  gap: 20px;
  padding: 2px 0;
}
.tt-legend > span { display: inline-flex; align-items: center; white-space: nowrap; }

/* More holds only the two disclosure buttons, so its width goes to
   Company, where the longest names now sit on one line at 1440. */
.c-rank { width: 50px; }
.c-co { width: 22.5%; }
.c-grp { width: 78px; }
.c-when { width: 150px; }
.c-st { width: 170px; }
.c-fit { width: 46px; }
.c-tim { width: 66px; }
.c-more { width: 128px; }

.tt-table thead th {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dark-body);
  text-align: left;
  padding: 8px 8px;
  border-bottom: 1px solid var(--rule-dark);
  white-space: nowrap;
}
.tt-table .num { text-align: right; }

.tt-row > td,
.tt-row > th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--rule-dark);
  vertical-align: middle;
  text-align: left;
  font-weight: 500;
}
.tt-table tr > :first-child { padding-left: 20px; }
.tt-table tr > :last-child { padding-right: 20px; }

.tt-row { transition: opacity 220ms ease, background 220ms ease; }
.tt-rank { color: var(--dark-body); }
.tt-fit, .tt-tim { color: #FFFFFF; font-size: 14px; }

.tt-co-in { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tt-logo {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 5px;
  background: #FFFFFF;
  overflow: hidden;
}
.tt-logo img { width: 20px; height: 20px; object-fit: contain; display: block; }
.tt-name {
  color: #FFFFFF;
  font: inherit;
  text-align: left;
  min-width: 0;
}
button.tt-name {
  background: none;
  border: 0;
  padding: 3px 0;
  margin: -3px 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 160ms ease;
}
button.tt-name:hover { text-decoration-color: #FFFFFF; }

/* The stage, "Stage 0", in a small plate. */
.tt-chip {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  padding: 2px 7px;
  font-size: 11.5px;
  border: 1px solid var(--rule-dark);
  border-radius: 5px;
  color: var(--board-text);
  white-space: nowrap;
}

.tt-ev { color: var(--board-text); }
.tt-ev-now { display: block; }
.tt-was {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--dark-body);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

.tt-st { white-space: nowrap; }

.tt-open-static[hidden], .tt-open[hidden] { display: none; }
.tt-open-static { display: block; font-size: 11.5px; line-height: 1.35; color: var(--dark-body); }

.tt-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--board-text);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease;
}
.tt-open:hover { border-color: var(--board-text); }
.tt-open[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); }
.tt-open svg { transition: transform 200ms ease; }
.tt-open[aria-expanded="true"] svg { transform: rotate(180deg); }

/* The read line: a Blue hairline row across the board. */
.tt-readline th {
  position: relative;
  padding: 5px 20px;
  text-align: left;
  font-weight: 500;
  border-bottom: 0;
}
.tt-readline th::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--blue);
}
.tt-readline-label {
  position: relative;
  display: inline-block;
  padding: 2px 9px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--blue);
  border-radius: 5px;
}

/* The one changed row. */
.tt-row.is-changed { background: var(--pill-new-bg); }

/* Asking the board: rows outside the answer step back. */
.tt-row.is-out,
.tt-detail.is-out { opacity: 0.25; }

/* The two disclosures. */
.tt-detail > td {
  padding: 18px 20px 22px;
  background: var(--detail-ground);
  border-bottom: 1px solid var(--rule-dark);
}
.tt-detail[hidden] { display: none; }
.tt-dt {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dark-body);
  margin-bottom: 8px;
}
.tt-dd {
  font-family: var(--text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: #FFFFFF;
  max-width: 34em;
}
.tt-dd strong { font-weight: 600; }
.tt-dd + .tt-dd { margin-top: 8px; }
.tt-dd--also { color: var(--dark-body); font-size: 14px; }
.tt-dd--also strong { color: var(--board-text); }
.tt-src { margin-top: 10px; font-size: 11.5px; color: var(--dark-body); }

.tt-brief {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 0.8fr;
  gap: 36px;
}

.tt-people-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 36px;
}
.tt-people-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name conf" "title conf";
  column-gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-dark);
}
.tt-p-name { grid-area: name; font-family: var(--text); font-weight: 600; font-size: 15px; color: #FFFFFF; }
.tt-p-title { grid-area: title; font-family: var(--text); font-weight: 400; font-size: 13.5px; color: var(--dark-body); }
.tt-p-conf { grid-area: conf; align-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #FFFFFF; }
.tt-p-bar { width: 44px; height: 4px; border-radius: 2px; background: var(--rule-dark); overflow: hidden; }
.tt-p-bar > span { display: block; height: 100%; background: var(--dark-body); }

/* Outline laid over one column when a key entry is pointed at. */
.tt-colmark {
  position: absolute;
  z-index: 3;
  border: 2px solid var(--blue);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.tt-colmark.is-on { opacity: 1; }
.tt-table .is-lit { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 5px; }

.tt-all {
  display: none;
  width: 100%;
  padding: 14px 16px;
  min-height: 48px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  color: #FFFFFF;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* ── The key: a transit legend with leaders up to the columns ─────── */

.tt-key {
  position: relative;
  padding-top: 84px;
}
.tt-leaders {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 84px;
  overflow: visible;
  pointer-events: none;
}
.tt-leaders path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.25;
  stroke-linejoin: round;
}
.tt-leaders circle { fill: var(--ink); }
.tt-leaders .is-hot { stroke-width: 2.5; }

.tt-key-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}
.tt-stop { position: relative; padding-top: 40px; }
.tt-stop-n {
  position: absolute;
  top: 0; left: 0;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
}
/* The column an entry names, run in at the start of its sentence. */
.tt-stop-col {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 6px;
  white-space: nowrap;
}
.tt-stop h3 {
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.25;
  color: var(--ink);
}
.tt-stop p:last-child {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body);
}
.tt-stop.is-lit h3 { color: var(--blue-deep); }

/* ── The question bar ─────────────────────────────────────────────── */

/* The board's last row. With the script it sticks to the foot of the
   screen while the board is in view and comes to rest at the board's
   foot; its ground is the detail ground, so it reads as part of the board
   and stays distinct from the row it passes over. */
.tt-ask {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px 10px 20px;
  background: var(--detail-ground);
  color: var(--board-text);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.tt-ask.is-live {
  position: sticky;
  bottom: 0;
  z-index: 6;
}
.tt-ask-static {
  list-style: none;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 28px;
  padding: 4px 0;
  font-family: var(--text);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: #FFFFFF;
}
.tt-ask-q {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--dark-body);
}
.tt-ask-title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.2;
  color: #FFFFFF;
  white-space: nowrap;
}
.tt-ask-chips { display: flex; gap: 8px; flex: none; }
.tt-ask-chips[hidden] { display: none; }
.tt-q {
  min-height: 38px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--board-text);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.tt-q:hover { border-color: var(--board-text); }
.tt-q[aria-pressed="true"] { background: var(--board-text); color: var(--ink); border-color: var(--board-text); }
.tt-answer {
  flex: 1;
  min-width: 0;
  font-family: var(--text);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--dark-body);
}
.tt-answer[hidden] { display: none; }
.tt-answer.is-set { color: #FFFFFF; }

/* ── Change the line ──────────────────────────────────────────────── */

.tt-line { padding: 76px 0 64px; }
.tt-line .container {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto;
  gap: 40px;
  align-items: center;
}
.tt-line-plate {
  padding: 16px 20px 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.tt-line-route { display: block; width: 220px; max-width: 100%; height: 24px; color: var(--ink); }
.tt-line-now {
  margin-top: 12px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tt-line-k {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 8px;
}
.tt-line-copy h2 { font-size: clamp(26px, 2.6vw, 34px); color: var(--ink); }
.tt-line-copy p { margin-top: 10px; font-size: 17px; line-height: 1.6; color: var(--body); max-width: 28em; }

/* ── The timetable foot ───────────────────────────────────────────── */

.tt-foot { padding: 0 0 76px; }
.tt-foot-sheet {
  position: relative;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 22px 0 22px;
}
.tt-foot-sheet::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 3px;
  height: 1px;
  background: var(--ink);
}
.tt-foot-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.tt-foot-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.25; color: var(--ink); }
.tt-demo {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 5px;
  background: var(--pill-none-bg);
  color: var(--muted);
}
.tt-foot-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.tt-foot-table tr + tr > * { border-top: 1px solid var(--rule); }
.tt-foot-table th {
  width: 120px;
  padding: 10px 0;
  text-align: left;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.tt-foot-table td { padding: 10px 0; font-size: 17px; color: var(--body); vertical-align: middle; }
.tt-foot-table td.num {
  text-align: right;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tt-foot-note { margin-top: 16px; font-size: 16.5px; line-height: 1.58; color: var(--ink); }

/* ── Close: the timetable's last line, on Paper ───────────────────── */

.tt-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.tt-close h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  max-width: 24em;
}
.tt-close-copy p { margin-top: 6px; font-size: 16.5px; line-height: 1.55; color: var(--body); }
.tt-close-actions { display: flex; gap: 12px; flex: none; }
.tt-honest { margin-top: 18px; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 44em; }

/* ── Between desktop and phone ────────────────────────────────────── */

@media (max-width: 1180px) {
  .tt-legend { float: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
  .tt-ask { flex-wrap: wrap; }
  .tt-answer { flex-basis: 100%; }
  .tt-ask-static { grid-template-columns: 1fr; flex-basis: 100%; }
  .tt-line .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tt-line .tt-btn { grid-column: 1 / -1; justify-self: start; }
  .tt-close { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 1100px) {
  .c-grp { width: 80px; }
  .c-more { width: 124px; }
  .tt-key-list { gap: 20px; }
}

/* ── Phone: the same table as ticket stubs ────────────────────────── */

@media (max-width: 860px) {
  /* The first screen holds the headline, the lede, the button and three
     stubs, so the hero drops its stamp (the caption carries the count)
     and the legend moves below the stubs. */
  .tt-hero { padding: 14px 0 16px; }
  .tt-hero-row { grid-template-columns: 1fr; gap: 12px; margin-top: 8px; }
  .tt-lede { font-size: 16px; line-height: 1.45; }
  .tt-hero-side { justify-content: flex-start; }
  .tt-stamp { display: none; }
  .tt-hero .tt-btn { font-size: 15px; padding: 11px 18px; border-radius: 6px; }

  .tt-head { flex-wrap: wrap; gap: 8px; padding: 10px 10px 10px 12px; }
  .tt-route { flex: none; }
  .fp--big .fp-c { font-size: 11.5px; gap: 1px; }
  .fp--big .fc { border-radius: 3px; }
  .tt-again { flex: none; min-height: 36px; padding: 6px 9px; gap: 6px; font-size: 12px; }
  .tt-notice { flex-basis: 100%; order: 3; margin-left: 0; max-width: none; }

  .tt-table,
  .tt-table tbody,
  .tt-table tr,
  .tt-table td,
  .tt-table th { display: block; }
  .tt-table { display: flex; flex-direction: column; }
  .tt-table colgroup { display: none; }
  .tt-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* The caption's two parts become the board's own rows: the count on
     top, the legend after the stubs. */
  .tt-table caption { display: contents; }
  .tt-cap {
    display: block;
    padding: 9px 14px;
    border-bottom: 1px solid var(--rule-dark);
    font-size: 11.5px;
    white-space: nowrap;
  }
  .tt-legend {
    order: 10;
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 12px 14px;
    font-size: 11.5px;
  }
  .tt-table tr > :first-child,
  .tt-table tr > :last-child { padding-left: 0; padding-right: 0; }

  .tt-row {
    display: grid !important;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--rule-dark);
  }
  .tt-row > td,
  .tt-row > th { padding: 0; border: 0; }
  .tt-row > .tt-co { grid-row: 1; grid-column: 1 / -1; font-size: 13.5px; }
  .tt-row .tt-logo { width: 20px; height: 20px; border-radius: 5px; }
  .tt-row .tt-logo img { width: 16px; height: 16px; }
  .tt-row > .tt-ev { grid-row: 2; grid-column: 1 / -1; }
  .tt-row > .tt-when { grid-row: 3; grid-column: 1 / 4; }
  .tt-row > .tt-st { grid-row: 3; grid-column: 4; justify-self: end; }
  .tt-row > .tt-rank,
  .tt-row > .tt-grp,
  .tt-row > .tt-fit,
  .tt-row > .tt-tim {
    grid-row: 4;
    font-size: 12px;
    line-height: 1.4;
    color: #FFFFFF;
    text-align: left;
  }
  .tt-row .tt-chip { padding: 0 6px; font-size: 11px; }
  .tt-row > .tt-rank { grid-column: 1; }
  .tt-row > .tt-grp { grid-column: 2; }
  .tt-row > .tt-fit { grid-column: 3; }
  .tt-row > .tt-tim { grid-column: 4; }
  .tt-row > .tt-rank::before,
  .tt-row > .tt-grp::before,
  .tt-row > .tt-fit::before,
  .tt-row > .tt-tim::before {
    content: attr(data-label);
    margin-right: 6px;
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dark-body);
  }
  .tt-row > .tt-more { grid-row: 5; grid-column: 1 / -1; }
  .tt-row > .tt-more:not(:has(.tt-open)) { display: none; }
  .tt-open { min-height: 44px; padding: 8px 14px; }

  .tt-readline th { padding: 7px 14px; }
  .tt-detail > td { padding: 16px 14px 20px; }
  .tt-brief { grid-template-columns: 1fr; gap: 18px; }
  .tt-people-list { grid-template-columns: 1fr; gap: 10px; }

  .tt-board.is-short .tt-row[data-extra],
  .tt-board.is-short .tt-row[data-extra] + .tt-detail { display: none !important; }
  .tt-board.is-short .tt-all:not([hidden]) { display: block; }
  .tt-all:not([hidden]) { border-top: 1px solid var(--rule-dark); }

  /* On a phone the question bar is not sticky: three stacked questions
     would cover the stubs. It stays the board's last row. */
  .tt-ask,
  .tt-ask.is-live {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 14px;
  }
  .tt-ask-chips { flex-direction: column; }
  .tt-q { white-space: normal; text-align: left; min-height: 44px; }

  .tt-key { padding-top: 36px; }
  .tt-leaders { display: none; }
  .tt-key-list { grid-template-columns: 1fr; gap: 18px; }
  .tt-stop { padding: 0 0 0 44px; }
  .tt-stop-n { width: 28px; height: 28px; }
  .tt-stop p:last-child { margin-top: 4px; }

  .tt-line { padding: 44px 0 36px; }
  .tt-line .container { grid-template-columns: 1fr; gap: 22px; }

  .tt-foot { padding-bottom: 44px; }
  .tt-foot-table th { width: 84px; font-size: 28px; }
  .tt-foot-table td { font-size: 15.5px; padding-left: 4px; }
  .tt-foot-table td.num { display: none; }
  .tt-close-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .fr { animation: none !important; transform: none !important; }
}