/* history page, colours come from :root in terminal.css so the display settings (light mode, contrast, colour blind) work here too */

/* the top of the page is only as tall as it needs to be, so the timeline follows straight after the panel */
.terminal-content.history-top { flex: 0 0 auto; padding-bottom: 30px; }
.tl { flex: 1 0 auto; width: 100%; padding-bottom: 70px; }
.tl-wrap { padding: 0 8%; }
.tl-wrap > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.tl-noscript { margin: 0 auto 20px; padding: 0 8%; max-width: var(--measure); color: var(--muted); }
.tl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* controls: jump to an era, or move along */
.tl-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.tl-eras, .tl-moves { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chip, .tl-move {
    padding: 6px 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font: inherit; font-size: 11px; letter-spacing: 1px; cursor: pointer;
}
.tl-chip:hover, .tl-move:hover { border-color: var(--orange-dark); }
.tl-move { border-color: var(--orange-dark); color: var(--orange-bright); }
.tl-move:disabled { opacity: .35; cursor: not-allowed; }
/* the arrow means this is the era on screen, so it is not shown by colour alone */
.tl-chip[aria-current="true"] { border-color: var(--orange); color: var(--orange-bright); font-weight: bold; }
.tl-chip[aria-current="true"]::before { content: "\25B6\00a0"; }
.tl-chip:focus-visible, .tl-move:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 2px; }

/* the strip that scrolls sideways. it is the full width of the page, the panel above is only as wide as the text */
.tl-frame { position: relative; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); box-shadow: inset 0 0 30px rgba(0,0,0,.25); }
.tl-scroll {
    overflow-x: auto; overflow-y: hidden; padding: 6px 0 16px; cursor: grab;
    scrollbar-width: thin; scrollbar-color: var(--orange-dark) var(--panel);
}
.tl-scroll.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.tl-scroll:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: -3px; }
/* the first event lines up with the left edge of the panel above, and it runs on past the right edge of the screen */
.tl-track {
    position: relative; display: flex; align-items: flex-start; width: max-content; margin: 0; list-style: none;
    padding: 8px max(8%, calc((100% - var(--measure)) / 2)) 8px;
}
.tl-fade { position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.tl-fade-left { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.tl-fade-right { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.tl-fade-right::after { content: "\25B8"; position: absolute; right: 14px; top: 34px; color: var(--orange); font-size: 18px; }
.tl-frame.can-left .tl-fade-left, .tl-frame.can-right .tl-fade-right { opacity: 1; }

/* every slot has a piece of the line through it, so the line runs unbroken from the first slot to the last */
.tl-item, .tl-era, .tl-end { position: relative; flex: 0 0 auto; }
.tl-item::before, .tl-era::before, .tl-end::before {
    content: ""; position: absolute; left: 0; right: 0; top: 43px; height: 2px; background: var(--orange-dark);
}
.tl-end::before { right: auto; width: 28px; }

/* an event: the date above the line, a square on the line, the card hanging under it */
.tl-item { width: 270px; }
.tl-item.span { width: 600px; }
.tl-item.span::before { background: repeating-linear-gradient(to right, var(--orange-dark) 0 10px, transparent 10px 18px); }
.tl-event {
    position: relative; display: block; width: 100%; padding: 0 0 8px; border: 0; background: none;
    color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tl-event:focus { outline: 0; }
/* no blue flash on the card after a tap on a phone, it would sit on top of the pop-up as it opens */
.tl-event { -webkit-tap-highlight-color: transparent; }
.tl-date { position: absolute; top: 8px; left: 22px; color: var(--orange-bright); font-size: 11px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.tl-node { position: absolute; top: 37px; left: 22px; width: 14px; height: 14px; border: 2px solid var(--orange); background: var(--bg); }
.tl-event::after { content: ""; position: absolute; left: 28px; top: 51px; width: 2px; height: 13px; background: var(--orange-dark); }
.tl-card {
    display: block; width: 246px; margin: 64px 0 0 10px; padding: 12px 14px;
    border: 1px solid var(--border); background: var(--panel);
}
.tl-title { display: block; margin-bottom: 8px; color: var(--text); font-size: 13px; font-weight: bold; letter-spacing: .5px; line-height: 1.4; overflow-wrap: anywhere; }
.tl-cat { display: inline-block; padding: 1px 6px; border: 1px solid var(--border); color: var(--muted); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; }
.tl-event:hover .tl-card { border-color: var(--orange-dark); }
.tl-event:hover .tl-node { border-color: var(--orange-bright); }
.tl-event:focus-visible .tl-card { outline: 2px solid var(--orange-bright); outline-offset: 2px; }
/* the open event has a filled square, a brighter card and an arrow, so it is not marked by colour alone */
.tl-event[aria-pressed="true"] .tl-card { border-color: var(--orange); background: var(--panel-light); box-shadow: 0 0 15px rgba(182,90,56,.15); }
.tl-event[aria-pressed="true"] .tl-node { background: var(--orange); box-shadow: 0 0 8px rgba(182,90,56,.8); }
.tl-event[aria-pressed="true"] .tl-title::before { content: "\25B6\00a0"; color: var(--orange); }
.tl-stretch { position: absolute; top: 20px; left: 300px; color: var(--muted); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }

/* the start of an era, a bigger square on the line with the name under it */
.tl-era { width: 250px; }
.tl-era-num { position: absolute; top: 8px; left: 22px; color: var(--orange); font-size: 11px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; }
.tl-era-node { position: absolute; top: 35px; left: 20px; width: 18px; height: 18px; background: var(--orange); transform: rotate(45deg); }
.tl-era-name { position: absolute; top: 70px; left: 22px; right: 16px; color: var(--text); font-size: 15px; font-weight: bold; letter-spacing: 1.5px; line-height: 1.3; text-transform: uppercase; }
.tl-era-span { position: absolute; top: 116px; left: 22px; color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.tl-era::after { content: ""; position: absolute; left: 28px; top: 55px; width: 2px; height: 12px; background: var(--orange-dark); }

.tl-end { width: 190px; }
.tl-end .tl-node { top: 37px; left: 22px; }
.tl-end-label { position: absolute; top: 70px; left: 22px; color: var(--muted); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }

/* the pop-up that opens when an event is picked. it looks like the nation file on the map but sits in the middle of the screen, and the page behind it doesn't scroll while it's open */
html.tl-locked { overflow: hidden; padding-right: var(--tl-gap, 0px); }
.tl-overlay[hidden] { display: none; }
.tl-popup {
    width: 100%; max-width: 680px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
    overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--orange-dark); border-top: 3px solid var(--orange); background: var(--panel);
    box-shadow: 0 12px 40px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.25);
    text-align: left;
}
.tl-popup:focus { outline: 0; }
/* the heading and the x stay put while a long record scrolls, so it can always be closed */
.tl-popup-head {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 16px 20px 14px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.tl-popup-body { padding: 18px 20px 22px; }
.tl-popup-close {
    flex-shrink: 0; width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--border); background: transparent; color: var(--text);
    font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.tl-popup-close:hover { border-color: var(--orange); color: var(--orange-bright); }
.tl-popup-close:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 2px; }
.tl-record-tag { margin: 0 0 6px; color: var(--orange); font-size: 10px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }
.tl-popup h2 { margin: 0; color: var(--text); font-size: 20px; letter-spacing: 1px; line-height: 1.25; text-transform: uppercase; overflow-wrap: anywhere; }
.tl-popup-body p { margin: 0 0 12px; letter-spacing: .5px; }
.tl-popup-body .tl-record-date { margin: 0 0 6px; color: var(--orange-bright); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.tl-popup .tl-cat { margin-bottom: 18px; }
.tl-popup blockquote { margin: 16px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--orange-dark); color: var(--orange-bright); font-size: 15px; letter-spacing: .5px; }
.tl-record-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.tl-record-nav .btn { padding: 8px 14px; font-size: 11px; }

@media (max-width: 700px) {
    .tl-item { width: 240px; }
    .tl-item.span { width: 520px; }
    .tl-card { width: 216px; }
    .tl-stretch { left: 260px; }
    .tl-era { width: 230px; }
    /* on a phone it comes up from the bottom of the screen, like the nation file does on the map */
    .tl-overlay { align-items: flex-end; padding: 10px; }
    .tl-popup { max-height: 85vh; max-height: 85dvh; }
    .tl-popup-head { padding: 14px 16px 12px; }
    .tl-popup-body { padding: 16px 16px 20px; }
    .tl-popup h2 { font-size: 18px; }
}