/* The Way It Was — on top of /hub.css (the brand). Only what the timeline adds.
   Anatomy: kicker · the edition · the card in hand · the timeline, earlier on
   the left and later on the right · the action. Red only as the signal. */
.tw { --ok: #1b6b3a; --card: 176px; --gap: 46px; }
.tw .screen { padding: 34px 0 72px; }
.tw h1 { margin: 0; font-size: clamp(34px, 4.8vw, 58px); line-height: 1.02; max-width: 24ch; }
.tw h1.play-title { font-size: clamp(28px, 3.4vw, 40px); max-width: none; }
.tw .head .dek { margin-top: 10px; }
.tw .how { margin: 12px 0 0; color: var(--ink-soft); font-size: 15px; max-width: 78ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ok { color: var(--ok); } .no { color: var(--red); }

/* progress and points */
.status { margin: 22px 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.step { width: 38px; padding-top: 6px; border-top: 3px solid var(--rule-soft); font: 700 12.5px/1 var(--sans); color: var(--ink-soft); }
.step.is-current { border-top-color: var(--ink); color: var(--ink); }
.step.is-right { border-top-color: var(--ok); color: var(--ok); }
.step.is-wrong { border-top-color: var(--red); color: var(--red); }
.points { margin: 0; font-size: 14.5px; }
.points b { font: 800 26px/1 var(--display); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.lastline { margin: 14px 0 0; min-height: 24px; font-size: 15.5px; }
.lastline:empty { min-height: 0; margin: 0; }

/* the card in hand */
.hand { margin: 14px 0 0; max-width: 760px; display: grid; grid-template-columns: auto minmax(0, 1fr); background: #fff; border: 1px solid var(--ink); border-top: 4px solid var(--ink); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hand > div { padding: 16px 20px 18px 16px; }
.hand .grip { width: 30px; border-right: 1px solid var(--rule-soft); background: radial-gradient(circle, var(--ink-soft) 1.5px, transparent 1.6px) center / 8px 8px repeat-y; background-clip: content-box; padding: 16px 0; }
.hand .meta { margin: 0 0 8px; }
.hand .hed { margin: 0; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.08; }
.hand .detail { margin: 10px 0 0; font: 400 17.5px/1.5 var(--serif); color: #232b35; max-width: 62ch; }
.hand .hint { margin: 10px 0 0; font-size: 14.5px; font-weight: 600; }
.hand .hint .rowmenu { font-weight: 400; padding: 0; text-align: left; }
.hand.is-lifted { opacity: .35; border-style: dashed; }
.hand:focus-visible { outline-offset: 3px; }
.is-dragging, .is-dragging * { cursor: grabbing !important; user-select: none; }
/* the card while it is carried: the same card it becomes on the timeline */
.ghost { position: fixed; z-index: 50; top: 0; left: 0; width: var(--card); min-height: 120px; padding: 12px 14px 14px; pointer-events: none; background: #fff; border: 2px solid var(--ink); rotate: -2deg; }
.ghost .when { color: var(--ink-soft); }
.ghost.is-over { rotate: 0deg; }

/* the timeline: a line, and the cards hanging from it */
.tl { margin: 26px 0 0; }
.tl-axis { display: flex; align-items: center; gap: 14px; }
.tl-go { flex: none; padding: 6px 0; border: 0; background: none; font: 700 13.5px/1 var(--sans); color: var(--ink); }
.tl-go:hover { color: var(--red); }
.tl-line { flex: 1; height: 2px; background: var(--ink); }
.tl-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: 0 0 14px; scrollbar-width: thin; scrollbar-color: var(--rule-soft) transparent; }
.tl-scroll:focus-visible { outline-offset: 0; }
.tl-row { list-style: none; margin: 0 auto; padding: 14px 2px 2px; display: flex; align-items: stretch; gap: 8px; width: max-content; min-width: 100%; justify-content: center; }
.tl-row > li { position: relative; flex: none; display: flex; }
.tl-row > li::before { content: ""; position: absolute; top: -14px; left: 50%; width: 1px; height: 14px; background: var(--rule-soft); }
.tl-card::before { background: var(--ink) !important; width: 2px !important; margin-left: -1px; }
.tl-card, .slot.is-picked { width: var(--card); min-height: 148px; padding: 12px 14px 14px; flex-direction: column; align-items: flex-start; text-align: left; }
.tl-card { background: var(--paper-lift); border: 1px solid var(--rule-soft); border-top: 3px solid var(--ink); }
.when { display: block; font: 800 30px/1 var(--display); font-stretch: 75%; letter-spacing: -.012em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.what { display: block; margin-top: 8px; font: 600 14.5px/1.3 var(--sans); }
.mark { display: block; margin-top: auto; padding-top: 10px; font: 700 12.5px/1 var(--sans); color: var(--ink-soft); }
.tl-card.is-given { background: var(--navy); border-color: var(--navy); color: #fff; }
.tl-card.is-given .mark { color: #a9b6c9; }
.tl-card.is-right { border-top-color: var(--ok); } .tl-card.is-right .mark { color: var(--ok); }
.tl-card.is-wrong { border-top-color: var(--red); } .tl-card.is-wrong .mark { color: var(--red); }
@keyframes tw-new { from { background: #fff; box-shadow: 0 0 0 2px var(--ink); } to { box-shadow: 0 0 0 2px transparent; } }
.tl-card.is-new { animation: tw-new 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .tl-card.is-new { animation: none; } }

.slot { display: flex; align-items: center; justify-content: center; width: var(--gap); min-height: 148px; margin: 0; padding: 0; border: 1px dashed #7e8b99; border-radius: 0; background: transparent; color: var(--ink-soft); }
.slot .plus { font: 500 24px/1 var(--sans); }
.slot:hover, .slot.is-over { border: 1px solid var(--ink); background: var(--paper-deep); color: var(--ink); }
/* while a card is carried the gaps show, and the one under it opens to the card's width */
.slot { transition: width .12s ease-out; }
.tl-scroll.is-open .slot { border-color: var(--ink-soft); }
.slot.is-over { width: var(--card); border: 2px dashed var(--ink); background: #fff; }
.slot.is-over .plus { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .slot { transition: none; } }
.slot.is-picked { display: flex; border: 2px solid var(--ink); background: #fff; color: var(--ink); justify-content: flex-start; }
.slot.is-picked .when { color: var(--ink-soft); }

.play .action { margin-top: 14px; }

/* the score */
.scorehead { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px 44px; align-items: start; }
.score .steps { margin-bottom: 18px; }
.score .scored { margin: 0; font-size: 64px; }
.score .scored small { font-size: 16px; }
.score .side .muted { margin: 14px 0 0; font-size: 14.5px; }
.signoff { margin: 16px 0 0; font: italic 400 18px/1.3 var(--serif); color: var(--ink-soft); }
.score .tl { margin-top: 34px; }
.results { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.result { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0 28px; padding: 22px 0; border-bottom: 1px solid var(--rule-soft); }
.result .date { margin: 0; padding-left: 12px; border-left: 3px solid var(--rule-soft); font: 800 24px/1.1 var(--display); font-stretch: 75%; letter-spacing: -.012em; align-self: start; }
.result.is-right .date { border-left-color: var(--ok); }
.result.is-wrong .date { border-left-color: var(--red); }
.result .hed { margin: 0; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.1; max-width: 34ch; }
.result .outcome { margin: 8px 0 0; font: 600 15px/1.4 var(--sans); }
.result .outcome .muted { font-weight: 400; }
.result .detail { margin: 8px 0 0; font: 400 17.5px/1.55 var(--serif); color: #232b35; max-width: 62ch; }

@media (max-width: 900px) { .scorehead { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .tw { --card: 150px; --gap: 42px; }
  .when { font-size: 26px; }
  .what { font-size: 13.5px; }
  .result { grid-template-columns: 1fr; gap: 8px; }
  .step { width: 30px; }
  .hand > div { padding: 14px 14px 16px 12px; }
  .hand .detail { font-size: 16.5px; }
  /* the strip runs to the screen's edges so a swipe has room */
  .tl-scroll { margin-inline: -16px; padding-inline: 16px; }
}