/*
 * The timeline page (blog/timeline.html): docs/mvp/dev-timeline.md.
 * Areas wear the game's five pitch inks (docs/design-system.md, "Colour"); every area is also
 * named in the legend and the tooltip, never told by colour alone.
 */
:root {
  --a-game: #3f5f86; --a-server: #9e4636; --a-tests: #4a6a4c; --a-checks: #7d6038; --a-docs: #6b5582;
  --era: rgba(43, 41, 37, 0.035);
  --pick: rgba(74, 106, 138, 0.16);
}

.page.wide { max-width: 76rem; }
/* The top spans the same container as the chart and story below, so their edges line up. */

.tl-controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0 0 1rem; font-family: var(--sans); }
.seg { display: inline-flex; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.seg button {
  font: 700 var(--sm)/1 var(--sans); color: var(--ink-soft); background: none; border: 0;
  padding: 0.6rem 0.75rem 0.55rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.seg button:focus-visible, .tl-story button:focus-visible, .tl-legend button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.tl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 1000px) {
  .tl-grid { grid-template-columns: minmax(0, 1fr) 21rem; gap: 2.5rem; }
  .tl-chart-col { position: relative; }
  .tl-figure { position: sticky; top: 1rem; }
  .tl-story { padding-bottom: 40vh; }
}

.tl-figure { margin: 0; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font: 400 var(--sm)/1.3 var(--sans); color: var(--ink-soft); margin-bottom: 0.5rem; min-height: 1.6rem; }
.tl-legend button { font: inherit; color: inherit; background: none; border: 0; padding: 0.2rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.tl-legend button[aria-pressed="false"] { opacity: 0.4; text-decoration: line-through; }
.tl-legend i { width: 0.75rem; height: 0.75rem; border-radius: 2px; display: inline-block; }

.tl-chart { position: relative; width: 100%; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.tl-chart svg { display: block; width: 100%; overflow: visible; }
.tl-chart text { font-family: var(--sans); }

.tl-tip {
  position: absolute; z-index: 2; pointer-events: none; width: max-content; max-width: 15rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); padding: 0.6rem 0.75rem; font: 400 var(--sm)/1.4 var(--sans);
}
.tl-tip b { display: block; margin-bottom: 0.25rem; }
.tl-tip .row { display: flex; align-items: center; gap: 0.4rem; font-variant-numeric: tabular-nums; }
.tl-tip .row i { width: 0.6rem; height: 0.6rem; border-radius: 2px; }
.tl-tip .row span { margin-left: auto; padding-left: 1rem; }
.tl-tip .row, .tl-tip .rel, .tl-tip .t { font-size: var(--xs); }
.tl-tip .rel { color: var(--link); font-weight: 700; margin-top: 0.35rem; }
.tl-tip .t { color: var(--ink-soft); margin-top: 0.35rem; }
.tl-tip .hint { color: var(--ink-faint); font-size: var(--xs); margin-top: 0.4rem; }

/* The story: each turn a short entry; the one in view is marked on the chart. */
.tl-story { font-family: var(--sans); }
.tl-story .kicker { margin-top: 0; }
.tl-story .prologue { color: var(--ink-soft); font: 400 var(--sm)/1.5 var(--sans); margin: 0 0 2rem; }
.tl-story .prologue b { color: var(--ink); }
.ms-wrap { margin: 0 0 1.75rem; }
.ms { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid var(--rule); padding: 0.1rem 0 0.1rem 1rem; margin: 0; color: var(--ink); font: inherit; user-select: text; -webkit-user-select: text; }
.ms:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.ms .n { cursor: pointer; }
.ms.on { border-left-color: var(--link); }
.ms .d { font: 700 var(--xs)/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.ms .n { display: inline-block; min-width: 1.3rem; color: var(--link); }
.ms h3 { font: 400 var(--lg)/1.3 var(--hand); margin: 0.3rem 0 0.35rem; }
.ms p { font: 400 var(--sm)/1.5 var(--sans); color: var(--ink-soft); margin: 0; }
.ms.on .d { color: var(--link); }

.tl-log { margin-top: 3rem; }
.tl-log-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0 0 1.25rem; font: 400 var(--sm)/1.4 var(--sans); color: var(--ink-soft); }
.tl-log-bar input { flex: 1 1 18rem; font: 400 var(--base)/1.3 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 0.55rem 0.7rem; }
.tl-log-bar button { font: 700 var(--sm)/1 var(--sans); color: var(--link); background: none; border: 0; padding: 0.3rem; cursor: pointer; }
.day { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 1rem; padding: 0.75rem 0; border-top: 1px solid var(--rule); font: 400 var(--sm)/1.45 var(--sans); }
.day > .when { color: var(--ink-faint); font-weight: 700; font-variant-numeric: tabular-nums; }
.day > .when small { display: block; font-weight: 400; }
.day ul { list-style: none; margin: 0; padding: 0; }
.day li { margin: 0 0 0.3rem; display: flex; gap: 0.5rem; align-items: baseline; }
.day li i { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 2px; position: relative; top: -0.05rem; }
.day li .pr { color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: none; }
.day .release { color: var(--link); font-weight: 700; margin: 0 0 0.4rem; }
.day .release span { color: var(--ink-soft); font-weight: 400; }
.day.flash { background: var(--pick); }
.wk-bar { display: flex; gap: 2px; height: 0.6rem; margin: 0.35rem 0 0.6rem; }
.wk-bar i { display: block; height: 100%; border-radius: 2px; min-width: 2px; }
.day .quiet { color: var(--ink-faint); margin: 0; }
@media (max-width: 560px) {
  .day { grid-template-columns: minmax(0, 1fr); }
  .day > .when { margin-bottom: 0.35rem; }
  .day > .when small { display: inline; margin-left: 0.5rem; }
}
.more { font: 700 var(--sm)/1 var(--sans); color: var(--link); background: none; border: 0; padding: 0.75rem 0; cursor: pointer; }

/* The note before the chart. */
.intro { margin: 0 0 1.5rem; }
.intro p { margin: 0 0 0.75rem; }

/* Posts: a page mark on the chart, a link under the entries they tell, a line in their week. */
.ms-wrap .read { display: inline-block; margin: 0.4rem 0 0 1rem; padding-left: 2px; font: 700 var(--sm)/1.3 var(--sans); }
.ms-wrap .read span, .day .post span { font-weight: 400; color: var(--ink-faint); }
.tl-chart .pm { cursor: pointer; }
.tl-chart .pm:hover text { text-decoration: underline; }
.day .post { margin: 0 0 0.4rem; font-weight: 700; }

/* A picture of the game as it looked then: full column width, opens full size. */
.ms .shot { margin: 0.6rem 0 0.2rem; }
.ms .shot img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.ms .shot figcaption { font: 400 var(--xs)/1.4 var(--sans); color: var(--ink-faint); margin-top: 0.35rem; }

/* The picture viewer: the picture fills the window over a dark ground. Pinch zoom works on a phone. */
.viewer { position: fixed; inset: 0; z-index: 50; background: rgba(12, 11, 10, 0.94); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.viewer[hidden] { display: none; }
.viewer figure { margin: 0; max-width: 100vw; max-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 2.75rem 0.5rem 0.75rem; box-sizing: border-box; }
.viewer img { display: block; max-width: 100%; max-height: calc(100vh - 5.5rem); width: auto; height: auto; object-fit: contain; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); }
.viewer figcaption { color: #e9e3d6; font: 400 var(--sm)/1.4 var(--sans); margin-top: 0.6rem; text-align: center; }
.viewer button { position: absolute; background: rgba(0, 0, 0, 0.35); color: #f2ede3; border: 0; border-radius: 999px; width: 2.75rem; height: 2.75rem; font: 400 1.75rem/1 var(--sans); cursor: pointer; }
.viewer button:hover { background: rgba(0, 0, 0, 0.6); }
.viewer button:focus-visible { outline: 2px solid #f2ede3; outline-offset: 2px; }
.viewer button[hidden] { display: none; }
.viewer .v-close { top: 0.5rem; right: 0.75rem; }
.viewer .v-prev { left: 0.75rem; top: 50%; transform: translateY(-50%); }
.viewer .v-next { right: 0.75rem; top: 50%; transform: translateY(-50%); }
body.viewing { overflow: hidden; }
.ms .shot a { cursor: zoom-in; }

/* Lines proposed for the owner, shown marked until they keep or cut them. Not for publishing. */
.intro .suggest { border-left: 3px dashed var(--link); padding: 0.2rem 0 0.2rem 0.9rem; margin: 0 0 1rem; }
.intro .suggest span { display: block; font: 700 var(--xs)/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--link); margin-bottom: 0.5rem; }
.intro .suggest p { color: var(--ink-soft); }

/* In the pinned block the numbers sit tighter, so the chart keeps its height. */
.tl-figure .stats { margin: 0 0 0.75rem; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5rem 1rem; }
.tl-figure .tl-controls { margin: 0 0 0.75rem; }