/* /history/timeline/: overview + detail. Era lanes: u0 u1 (United States), i0 i1 (Ireland). */
.tl-ctl fieldset { border: 0; margin: 0 0 var(--space-2); padding: 0; }
.tl-ctl legend { font-weight: 700; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.tl-ctl label { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--space-target); padding-right: var(--space-3); cursor: pointer; }
.c-fourwall, .t-fourwall { --tk: var(--k-action); } .c-fourwall::before { border-radius: 1px; }
.c-onewall, .t-onewall { --tk: var(--k-game); } .c-onewall::before { border-radius: 50%; }
.c-threewall, .t-threewall { --tk: var(--k-place); } .c-threewall::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.c-irish60x30, .t-irish60x30 { --tk: var(--k-actor); } .c-irish60x30::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.c-fortyby20, .t-fortyby20 { --tk: var(--k-concept); } .c-fortyby20::before { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.u0-0, .u1-0 { --ec: var(--e-0); } .u0-1, .u1-1 { --ec: var(--e-1); }
.i0-0, .i1-0 { --ec: var(--e-2); } .i0-1, .i1-1 { --ec: var(--e-3); }
@media (min-width: 900px) {
  .tl-wide { width: min(76rem, calc(100vw - 48px)); margin-left: calc(50% - min(38rem, 50vw - 24px)); }
}
/* overview */
.ov { margin: var(--space-4) 0 var(--space-2); }
.ov-box { display: flex; border: 1px solid var(--c-line); border-radius: var(--radius-button); background: var(--c-surface); overflow: hidden; }
.ov-gut { flex: none; padding-left: var(--space-2); border-right: 1px solid var(--c-line); box-sizing: content-box; }
.ov-scroll { flex: 1; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.ov svg { display: block; max-width: none; font-size: 14px; }
.ov svg text { fill: var(--c-fg); font-weight: 600; }
.ov-lane { fill: transparent; } .ov-lane.alt { fill: var(--c-surface2); }
.ov-grid { stroke: var(--c-line); stroke-width: 1; opacity: 0.45; fill: none; }
.ov-now { stroke: var(--c-accent); stroke-width: 2; stroke-dasharray: 4 3; fill: none; }
.ov-dec rect { fill: transparent; }
.ov-dec text { font-weight: 700; }
a.ov-dec:hover rect { fill: var(--c-surface2); }
.ov a:focus { outline: none; }
.ov a:focus-visible rect { stroke: var(--c-focus); stroke-width: 3; }
.ov-era rect { fill: var(--ec); fill-opacity: 0.2; }
.ov-era path { stroke: var(--ec); stroke-width: 3; }
.ov-era text { font-size: 13.5px; }
.mk, .gl { fill: var(--tk); stroke: none; }
.mk.sf, .mk.sb, .mk.se { fill: none; stroke: var(--tk); stroke-width: 7; stroke-linecap: round; }
.mk.sb { stroke-linecap: square; }
.mk.se { stroke-width: 3.5; stroke-linecap: butt; }
.mk.ho { fill: none; stroke: var(--tk); stroke-width: 1.5; }
.mk.fa { opacity: 0.2; }
.mk.mh { stroke: var(--c-fg); stroke-width: 1.5; }
.mk.mh.ho { fill: none; stroke: var(--tk); stroke-width: 2.5; }
.ov-hit { fill: transparent; cursor: crosshair; touch-action: pan-x; }
.ov-hl rect { fill: var(--c-surface); stroke: var(--c-accent); stroke-width: 2; }
.ov-hl text { text-anchor: middle; font-weight: 700; }
.ov-ld { fill: none; stroke: var(--c-muted); stroke-width: 1; }
a.ov-hl:hover rect, .ov-hl.on rect { fill: var(--c-accent); }
a.ov-hl:hover text, .ov-hl.on text { fill: var(--c-accentFg); }
.ov-hl.fa { opacity: 0.35; }
.ov-shade { fill: var(--c-bg); opacity: 0.62; pointer-events: none; }
.ov-frame { fill: transparent; stroke: var(--c-accent); stroke-width: 2.5; cursor: grab; }
.ov-frame:focus { outline: none; }
.ov-frame:focus-visible { stroke: var(--c-focus); stroke-width: 4; }
.ov-brush { fill: var(--c-accent); fill-opacity: 0.18; stroke: var(--c-accent); stroke-dasharray: 4 3; pointer-events: none; }
.ov-key { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-small); }
.ov-key li { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; }
.ov-key svg { fill: var(--c-muted); }
.ov-key .ho { fill: none; stroke: var(--c-muted); stroke-width: 1.5; }
.ov-key .mh { stroke: var(--c-fg); stroke-width: 1.5; }
.ov figcaption p { margin: var(--space-1) 0 0; max-width: none; }
.tl-skip, .tl-legend a { display: inline-flex; align-items: center; min-height: var(--space-target); }
.tl-skip { font-size: var(--text-small); }
/* the window bar */
.tl-bar { position: sticky; top: 0; z-index: 3; background: var(--c-bg); border-bottom: 1px solid var(--c-line); padding: var(--space-2) 0; margin-bottom: var(--space-3); }
.tl-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tl-bar h2 { margin: 0 var(--space-2); font-size: var(--text-h3); min-width: 7.5ch; text-align: center; }
.tl-bar button { min-height: var(--space-target); min-width: var(--space-target); padding: 0 var(--space-3); border: 1px solid var(--c-line); border-radius: var(--radius-button); background: var(--c-surface); color: var(--c-fg); font: inherit; font-weight: 600; cursor: pointer; }
.tl-bar button:hover { border-color: var(--c-accent); }
.tl-bar button:disabled { opacity: 0.45; cursor: default; }
.tl-zoom { display: inline-flex; gap: var(--space-1); margin-left: auto; }
.tl-bar p { margin: var(--space-1) 0 0; max-width: none; }
/* the cards */
.tl-sec h2 { margin-top: var(--space-6); scroll-margin-top: var(--space-9); }
.tl-era { font-size: var(--text-small); color: var(--c-fg); margin: 0 0 var(--space-3); max-width: none; }
.tg { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); align-items: start; }
main .tg > li, .tg p { max-width: none; }
.tg > li { margin: 0; padding: var(--space-3); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-button); scroll-margin-top: 140px; }
.tg > .hl { border: 2px solid var(--c-accent); }
.tg > .q { border-style: dashed; }
.tg > li:target, .tg > .hit { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.tg > li > * { margin: 0 0 var(--space-2); line-height: var(--leading-tight); }
.tg > li > :last-child { margin-bottom: 0; }
.tg h3 { font-size: 1rem; font-weight: 600; letter-spacing: normal; line-height: var(--leading-tight); }
.tm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-small); }
.tm b { color: var(--c-muted); }
.tw { padding: 0 var(--space-2); border: 1px solid var(--c-line); border-radius: var(--radius-chip); font-weight: 700; }
.tw-hl { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accentFg); }
.tw-q { border: 1px dashed var(--c-fg); }
.tch { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tsn { border-left: 3px dashed var(--c-fg); padding-left: var(--space-2); font-size: var(--text-small); }
.tsrc { font-size: var(--text-small); color: var(--c-muted); overflow-wrap: anywhere; }
.tsrc a { color: var(--c-fg); }
.ch, .tch i { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: 1px solid var(--tk, var(--c-line)); border-radius: var(--radius-chip); color: var(--c-fg); font-size: var(--text-small); font-weight: 600; white-space: nowrap; }
.tch i { font-style: normal; }
.ch::before, .tch i::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--tk, var(--c-muted)); }
.tl-more { margin: var(--space-4) 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tl-more button { min-height: var(--space-target); padding: 0 var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-button); background: var(--c-surface); color: var(--c-fg); font: inherit; font-weight: 600; cursor: pointer; }
.tl-more button:hover { border-color: var(--c-accent); }
.tl-none { padding: var(--space-4); border: 1px dashed var(--c-line); border-radius: var(--radius-button); }
/* eras legend */
.tl-legend h3 { font-size: var(--text-base); margin-top: var(--space-4); }
.tl-legend ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.tl-legend li { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin: 0; }
.sw { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 3px; background: var(--ec); }
@media (min-width: 768px) { .tl-eras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
@media (max-width: 599px) {
  .tl-bar-row { flex-wrap: nowrap; gap: var(--space-1); }
  .tl-bar h2 { flex: 1 1 0; font-size: var(--text-small); line-height: var(--leading-tight); min-width: 0; margin: 0; }
  .tl-bar button { padding: 0 var(--space-2); }
  .tl-zoom { margin-left: 0; }
  .tl-bar .bl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tl-bar p { font-size: var(--text-small); }
}
@media (prefers-reduced-motion: no-preference) {
  .ov-shade, .ov-frame { transition: x var(--motion-press) var(--motion-ease), width var(--motion-press) var(--motion-ease); }
}