/* ═══════════════════════════════════════════════════════════════
   robotics-timeline.css  (v3)
   Uses site root colour vars + Circular Spotify font.
   Only rt-* classes — no overlap with existing stylesheets.
═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ───────────────────────────────────────────── */
.rt-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 32px 32px;
    box-sizing: border-box;
    font-family: 'Circular Spotify', sans-serif;
    color: var(--color-text-1);
}

.rt-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
}

/* ── Header ─────────────────────────────────────────────────── */
.rt-eyebrow {
    font-family: 'Circular Spotify', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary-a30);
    margin: 0 0 12px;
}

.rt-title {
    font-family: 'Circular Spotify', sans-serif;
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 18px;
    letter-spacing: -0.03em;
    color: var(--color-text-1);
}

.rt-subtitle {
    font-family: 'Circular Spotify', sans-serif;
    font-size: 1rem;
    color: var(--color-text-2);
    max-width: 460px;
    line-height: 1.6;
}

/* ── Timeline scaffold ──────────────────────────────────────── */
.rt-timeline-wrapper {
    position: relative;
}

/* The spine of the timeline. It is the grey track; the accent fill on top of
   it is ::after, and it runs down to the dot of whichever entry is open.

   A timeline is the one layout where an indicator like this is not decoration —
   the line already means "time passing", so filling it to the open entry says
   where in the story that entry sits, in the language the page is already
   using. It does not follow the scroll: scrolling up and down leaves it alone,
   and it only moves when a different entry is opened.

   --timeline-fill (the height to reveal) and --timeline-track (the height of
   the whole line) are both written by setupTimelineFill() in js_main.js. */
.rt-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: var(--color-primary-a20);
    pointer-events: none;
}

.rt-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--timeline-fill, 0px);

    /* The ramp is painted at the height of the WHOLE line and then revealed by
       this element's height, so the colour sitting at any given event never
       changes. Letting the gradient size itself to the fill instead would
       squash the entire ramp into whatever is showing and slide every colour
       along as the fill grew. */
    background-image: linear-gradient(
        to bottom,
        var(--color-selected-2),
        var(--color-selected-3)
    );
    background-repeat: no-repeat;
    background-size: 100% var(--timeline-track, 100%);

    /* Matches the panel's own opening time, so the fill and the entry it is
       pointing at arrive together. */
    transition: height 0.4s var(--ease-soft);
}

/* ════════════════════════════════════════════
   NODE — full unit (row + accordion panel)
════════════════════════════════════════════ */
.rt-node {
    position: relative;
    margin-bottom: 0;
}

/* ── Summary row (always visible) ───────── */
.rt-node-row {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    align-items: center;
    padding: 18px 0;
    position: relative;
    z-index: 2;
}

.rt-node-left {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 28px;
    gap: 3px;
}
.rt-node-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 28px;
    gap: 3px;
}

.rt-node[data-side="right"] .rt-node-right { visibility: hidden; }
.rt-node[data-side="left"]  .rt-node-left  { visibility: hidden; }

.rt-date-label {
    font-family: 'Circular Spotify', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary-a30);
    line-height: 1;
    pointer-events: none;
}

.rt-node-title-preview {
    font-family: 'Circular Spotify', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-2);
    line-height: 1.2;
    transition: color 0.18s;
    pointer-events: none;
}

.rt-node.rt-open   .rt-node-title-preview,
.rt-node-row:hover .rt-node-title-preview {
    color: var(--color-text-1);
}

/* ── Dot button ── THE interactive trigger ─ */
.rt-dot-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0 auto;
    font: inherit;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 3;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--color-primary-a0);
}

/* Ring */
.rt-dot-btn::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 2px solid var(--color-primary-a30);
    transition: border-color 0.2s, transform 0.25s cubic-bezier(.4,0,.2,1),
                box-shadow 0.2s;
}

/* Fill */
.rt-dot-btn::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--color-selected-1);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s, transform 0.25s cubic-bezier(.4,0,.2,1);
}

/* Plus icon bars */
.rt-dot-icon {
    position: relative;
    width: 12px;
    height: 12px;
    z-index: 1;
    flex-shrink: 0;
}
.rt-dot-icon::before,
.rt-dot-icon::after {
    content: '';
    position: absolute;
    background: var(--color-primary-a30);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), background 0.2s;
}
.rt-dot-icon::before { width: 12px; height: 2px; top: 5px; left: 0; }
.rt-dot-icon::after  { width: 2px; height: 12px; top: 0;  left: 5px; }

/* Hover. Behind (hover: hover) so a tap on a phone does not leave one dot
   ringed and filled as though it were open when it is not. */
@media (hover: hover) {
    .rt-dot-btn:hover::before {
        border-color: var(--color-selected-2);
        transform: scale(1.12);
    }
    .rt-dot-btn:hover::after {
        opacity: 0.25;
        transform: scale(1.12);
    }
    .rt-dot-btn:hover .rt-dot-icon::before,
    .rt-dot-btn:hover .rt-dot-icon::after {
        background: var(--color-selected-3);
    }
}

/* Press. The ring dips below its resting size for the length of the click —
   the one moment of feedback between pressing a 44px dot and a panel half a
   screen tall opening underneath it. */
.rt-dot-btn:active::before {
    transform: scale(0.92);
    transition-duration: 0.1s;
}

/* Dots the fill has reached. Colour only — no ring growth, no glow — so the
   open entry keeps those to itself and stays the one thing being pointed at.
   js_main.js puts this class on the dots at or above the open entry.

   Specificity keeps this out of the open entry's way without needing :not():
   the .rt-open rules below are one class deeper and win on their own. */
.rt-dot-btn.is-timeline-passed::before {
    border-color: var(--color-selected-2);
}

.rt-dot-btn.is-timeline-passed .rt-dot-icon::before,
.rt-dot-btn.is-timeline-passed .rt-dot-icon::after {
    background: var(--color-selected-2);
}

/* Focus ring */
.rt-dot-btn:focus-visible::before {
    border-color: var(--color-selected-3);
    box-shadow: 0 0 0 3px var(--color-selected-glow-1);
}

/* Open state */
.rt-node.rt-open .rt-dot-btn::before {
    border-color: var(--color-selected-3);
    transform: scale(1.12);
    box-shadow: 0 0 0 3px var(--color-selected-glow-1);
}
.rt-node.rt-open .rt-dot-btn::after {
    opacity: 0.3;
    transform: scale(1.12);
}
.rt-node.rt-open .rt-dot-icon::before,
.rt-node.rt-open .rt-dot-icon::after {
    background: var(--color-selected-3);
}
.rt-node.rt-open .rt-dot-icon::before { transform: rotate(45deg); }
.rt-node.rt-open .rt-dot-icon::after  { transform: rotate(45deg); }

/* ════════════════════════════════════════════
   ACCORDION PANEL
════════════════════════════════════════════ */
.rt-panel-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(.4,0,.2,1);
    position: relative;
    z-index: 1;
}
.rt-node.rt-open .rt-panel-wrap {
    grid-template-rows: 1fr;
}

.rt-panel-overflow {
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s 0.08s;
}
.rt-node.rt-open .rt-panel-overflow {
    opacity: 1;
}

.rt-panel {
    padding: 0 0 36px;
}

.rt-panel-inner {
    border: 1.5px solid var(--color-primary-a20);
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-primary-a10);
}

/* Two-column layout: image | text */
.rt-panel-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.rt-panel-body.rt-no-image {
    grid-template-columns: 1fr;
}

/* Image cell */
.rt-panel-image-wrap {
    overflow: hidden;
    min-height: 260px;
    position: relative;
    background: var(--color-primary-a20);
}
.rt-panel-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rt-panel-image-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder */
.rt-panel-image-wrap.rt-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-a20);
}
.rt-panel-image-wrap.rt-placeholder::after {
    content: '[ image ]';
    font-family: 'Circular Spotify', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary-a30);
}

/* Text cell */
.rt-panel-text {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.rt-panel-date {
    font-family: 'Circular Spotify', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary-a30);
    margin: 0;
}

.rt-panel-title {
    font-family: 'Circular Spotify', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    color: var(--color-text-1);
}

.rt-panel-desc {
    font-family: 'Circular Spotify', sans-serif;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--color-text-2);
    margin: 2px 0 0;
}

/* Tag chips */
.rt-panel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
/* Plain <span> labels. They had a hover state that lit them up in the accent
   colour, which reads as "this filters the timeline" — it does nothing, and a
   chip that answers the cursor and then ignores the click is worse than one
   that never responded. The hover is gone; they are labels and now look it. */
.rt-tag {
    font-family: 'Circular Spotify', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--color-primary-a20);
    border-radius: 999px;
    padding: 3px 10px;
    color: var(--color-primary-a30);
    background: var(--color-primary-a20);
}

/* ── End cap ─────────────────────────────────────────────────── */
.rt-end-cap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 16px;
    z-index: 2;
    transform: translateY(0px);
}

.rt-end-cap span {
    font-family: 'Circular Spotify', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-1);
    border: 1.5px solid var(--color-selected-2);
    border-radius: 999px;
    padding: 5px 18px;
    background-color: var(--color-selected-1);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .rt-page { padding: 16px 16px 100px; }

    .rt-line { left: 22px; }

    .rt-node-row {
        grid-template-columns: 44px 1fr;
        padding: 14px 0;
    }

    .rt-node-left { display: none; }
    .rt-node[data-side="right"] .rt-node-right,
    .rt-node[data-side="left"]  .rt-node-right {
        visibility: visible;
        padding-left: 16px;
    }

    .rt-dot-btn { margin: 0; }

    .rt-panel-body { grid-template-columns: 1fr; }
    .rt-panel-image-wrap { min-height: 200px; }
    .rt-panel-text { padding: 22px 22px; }

    .rt-end-cap { align-items: flex-start; justify-content: flex-start;}

    .rt-subtitle { max-width: none; }

    .rt-header { margin-bottom: 0;}
}

/* ── Video mute button ─────────────────────────────── */
.rt-panel-image-wrap {
    position: relative; /* anchor for the button */
}

.rt-mute-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s, transform 0.15s;
    padding: 0;
}

@media (hover: hover) {
    .rt-mute-btn:hover {
        background: rgba(0, 0, 0, 0.8);
        transform: scale(1.1);
    }
}

.rt-mute-btn:active {
    transform: scale(0.9);
    transition-duration: 0.1s;
}

.rt-mute-btn svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    display: block;
    flex-shrink: 0;
}

/* Hide the 'sound on' icon when muted, and vice versa */
.rt-mute-btn .icon-muted   { display: none; }
.rt-mute-btn .icon-unmuted { display: block; }

.rt-mute-btn[data-muted="true"] .icon-muted   { display: block; }
.rt-mute-btn[data-muted="true"] .icon-unmuted { display: none; }