/* What happened when · styles only this page uses, loaded after /shared/deep-dive.css. A plain page
   like Who's who: five eras, each a vertical timeline with its moments evenly spaced, not to scale.
   The eras and moments are written by docs/build_hub.py; the small timeline that opens from a date
   in a deep dive (.pc-tl) is in the shared stylesheet. */

/* header: no Contents button, so the Kitchen Table link shows on every width it fits */
.when-page .home-link{display:none}
@media (min-width:600px){.when-page .home-link{display:flex}}

.when-intro{display:flex;flex-direction:column;gap:12px;max-width:62ch;padding-block:24px 28px}
.when-intro p{font-size:calc(clamp(18px,1.6vw,20px)*var(--ts,1))}
@media (min-width:900px){.when-intro{padding-block:36px 36px}}

/* the piece to highlight, at the end of the jump links */
.hl-pick{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 calc(14px*var(--ts,1)) var(--sans);color:var(--ink-2)}
.hl-pick select{min-height:44px;max-width:100%;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--ink);font:500 calc(14px*var(--ts,1)) var(--sans);cursor:pointer}
.hl-pick select:hover{border-color:var(--accent)}
/* at a bigger text size the menu narrows to fit a phone rather than run off it (shared/text-size.js) */
.hl-pick{max-width:100%}
.hl-pick select{min-width:0}

/* the eras: heading above on phones, beside from 900px (as on Who's who) */
.when-eras{padding-block:4px 32px}
.when-era{display:grid;gap:16px;padding-block:28px 32px;border-top:1px solid var(--line-2)}
.when-era h2{margin:0;font:400 calc(clamp(30px,3.6vw,42px)*(1 + (var(--ts,1) - 1)*0.5))/1.08 var(--display)}
.we-span{margin-top:6px;font:400 calc(13px*var(--ts,1))/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.when-era .g-note{margin-top:8px;font:400 calc(14px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2);max-width:34ch}
@media (min-width:900px){
  .when-eras{padding-block:12px 48px}
  .when-era{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:72px;align-items:start;padding-block:44px 48px}
  .we-head{position:sticky;top:calc(var(--bar-h) + 24px)}
}

/* the timeline: a rail down the left, a dot for each moment, its year above it on phones and
   beside it from 700px */
.tl{list-style:none;margin:0;padding:0;border-left:2px solid var(--line-2);margin-left:6px}
.tl .ev{position:relative;padding:0 0 26px 24px;display:grid;gap:4px}
.tl .ev::before{content:"";position:absolute;left:-8px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--accent);box-sizing:border-box}
.ev-y{font:700 calc(14px*var(--ts,1))/1.3 var(--mono);letter-spacing:.06em;color:var(--accent)}
.ev-t{font-size:calc(18px*var(--ts,1));line-height:1.55;max-width:62ch}
.ev-by{font:400 calc(14px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2)}
.ev-by a{text-decoration-thickness:1px}
.ev-by .sep{color:var(--ink-2)}
.tl .gap{margin:-10px 0 16px -2px;padding:8px 0 10px 24px;border-left:2px dashed var(--line-2);background:var(--paper);font:italic 400 calc(15px*var(--ts,1))/1.4 var(--serif);color:var(--ink-2)}
@media (min-width:700px){
  .tl .ev{grid-template-columns:84px minmax(0,1fr);column-gap:16px;row-gap:4px}
  .ev-y{grid-row:1 / span 2;padding-top:3px}
  .ev-t,.ev-by{grid-column:2}
  .tl .gap{padding-left:124px}
}

/* a piece highlighted: its moments keep their color and get a filled dot; the rest go quiet */
.hl-on .tl .ev:not(.hl) .ev-t,.hl-on .tl .ev:not(.hl) .ev-y{color:var(--ink-2)}
.hl-on .tl .ev:not(.hl)::before{border-color:var(--line-2)}
.tl .ev.hl::before{background:var(--accent)}
.ev-by a.hl{font-weight:700}

/* printing (the shared print styles do the rest): no jump links or highlight, the era headings
   flow with the text */
@media print{
  .when-jump{display:none!important}
  .we-head{position:static}
  .when-era{display:block}
  .hl-on .tl .ev .ev-t,.hl-on .tl .ev .ev-y{color:inherit}
  .tl .ev{break-inside:avoid}
}