/*
 * timeline-ruler-marks.css — which ruler times stand out, and where the first
 * one sits.
 *
 * Brad, 2026-09-17: make the 5 and 10 second marks stand out, in orange or
 * whatever suits the theme. Every ten seconds most, every five a little, the
 * rest in the ruler's own colour — the ladder editors use so the eye can count.
 * The orange is the theme's accent (--brand-primary), never a hex, so each
 * theme carries its own. Which label is which is decided by the time it SHOWS
 * (website/js/beta-timeline-render-helpers.js).
 *
 * Its own file because edit.css is past the size where code may be added.
 */

/* ── THE RULER AND ITS NEEDLES. Moved out of edit.css (2026-09-30) so every
   ruler — the main timeline, the Trim bar and the Settings preview — wears
   one copy of these rules. Kept ABOVE the 5 s / 10 s rules below, which
   override the colour of some of these marks. ── */
.beta-ruler-marks {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
}
/* Tick hierarchy by ONE hue at three strengths, so the eye reads
   major → minor → micro as depth rather than as three colors. */
.beta-ruler-mark {
    position: absolute;
    bottom: 0;
    width: 1px;
    background: var(--border-strong);
}
.beta-ruler-mark.major { height: 12px; background: var(--ruler-color, var(--brand-secondary)); }
.beta-ruler-mark.minor { height: 6px; background: color-mix(in srgb, var(--ruler-color, var(--brand-secondary)) 45%, transparent); }
.beta-ruler-mark.micro { height: 3px; background: color-mix(in srgb, var(--ruler-color, var(--brand-secondary)) 22%, transparent); }

/* The scrub needle's head, on the ruler. Same shape as the playhead's so the two
   read as the same KIND of marker, in the ruler's colour so they never read as
   the same marker — one is where you are, the other is where you are looking. */
.beta-ruler-label {
    position: absolute;
    top: 2px;
    font-size: var(--tl-ruler-fs, var(--tl-fs-base));
    /* NOT BOLD. Product owner, 2026-09-22. Every number on the ruler was
       emphasised, which means none of them was — and it made the strip
       read heavier than the clips it is measuring. */
    font-weight: normal;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--brand-secondary) 60%, var(--text-primary));
    transform: translateX(-50%);
    white-space: nowrap;
}
/* The playhead's ruler half. The needle proper (.beta-playhead) scrolls
   with the tracks and is masked by the pinned header column; this piece
   lives INSIDE the ruler, so it is pinned with it and the marker stays on
   screen at any vertical scroll. Both are placed by BetaPlayhead.place()
   from one x, so they cannot disagree. Below .beta-ruler-gutter's band, so
   the pinned corner still masks it. */
.beta-ruler-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    z-index: 5;
    /* #4402 — user-selectable playhead color (Settings). Falls back to brand. */
    background: var(--playhead-color, var(--brand-primary));
    pointer-events: none;
}
/* The scrub needle's two halves. Geometry is the playhead's, exactly —
   same width, same start below the ruler, same pinned head — because the
   two needles are read against each other and any difference in shape
   reads as a difference in meaning. Only the COLOUR differs: the ruler's,
   not the playhead's. A scrub is not a commit, and borrowing the
   playhead's colour made it look like one. */
.beta-ruler-skim {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    z-index: 5;
    /* DOTTED, not solid. A solid line is what a committed position looks
       like, and at 1px there is nothing thinner left to make it — so the
       difference between "where the transport is" and "where you are
       looking" is carried by the line being broken rather than by weight.
       The playhead stays solid, which is the whole contrast. */
    background-image: repeating-linear-gradient(to bottom,
        var(--ruler-color, var(--brand-secondary)) 0 3px, transparent 3px 7px);
    /* Lighter than the playhead, and no glow. Both were solid lines with
       the same weight, so the scrub read as a second COMMITTED position —
       two equal marks disagreeing about where you are. This one is a
       position being considered: present and findable, plainly not the
       one the transport is on. The glow was what made it read as the
       heavier of the two. */
    opacity: 0.55;
    pointer-events: none;
}
.beta-ruler-skim::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 9px;
    height: 9px;
    background: var(--ruler-color, var(--brand-secondary));
    border-radius: 2px;
}
.beta-ruler-playhead::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 9px;
    height: 9px;
    background: var(--playhead-color, var(--brand-primary));
    border-radius: 2px;
}

/* Playhead — a purely visual position indicator. It is click-through
   (pointer-events: none) so a click anywhere on the timeline reaches
   the element beneath it: the ruler seeks, a segment selects. The
   needle never intercepts clicks, so repositioning the playhead can
   never trigger a cut. Splitting is an explicit action only (the S
   hotkey and the segment "Split at Playhead" menu — see
   beta-timeline-split.js). */
.beta-playhead {
    position: absolute;
    /* Starts BELOW the ruler. The ruler is pinned and paints over the
       tracks, so a needle that still began at 0 would have its head
       permanently hidden behind it; the head is .beta-ruler-playhead
       instead, which is pinned along with the ruler. */
    top: var(--tl-ruler-h);
    width: 1px;
    height: calc(100% - var(--tl-ruler-h));
    /* #4402 — user-selectable playhead color (Settings). Falls back to brand. */
    background: var(--playhead-color, var(--brand-primary));
    z-index: 20;
    pointer-events: none;
}
.beta-skim {
    position: absolute;
    top: var(--tl-ruler-h);
    width: 1px;
    height: calc(100% - var(--tl-ruler-h));
    /* Same dotted stroke as its own head, above — one needle, one look. */
    background-image: repeating-linear-gradient(to bottom,
        var(--ruler-color, var(--brand-secondary)) 0 3px, transparent 3px 7px);
    /* Same weight as its own head, above — one needle, one strength. */
    opacity: 0.55;
    /* Under the playhead: when a scrub lands on the current position the
       committed one is the one worth seeing. */
    z-index: 19;
    pointer-events: none;
}

/* WHERE THE VIDEO ENDS (Brad, 2026-10-05): a line down every row at the last
   frame, the word END stood on its side beside it, and the space past it
   greyed — nothing there plays. Click-through like the needles, and under
   them, so the playhead parked at the end still reads. */
.beta-end-line {
    position: absolute;
    top: var(--tl-ruler-h);
    right: 0;
    height: calc(100% - var(--tl-ruler-h));
    border-left: 2px solid var(--brand-secondary);
    background: color-mix(in srgb, var(--bg-canvas) 55%, transparent);
    z-index: 18;
    pointer-events: none;
}
.beta-end-word {
    position: absolute;
    top: 4px;
    left: 3px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 1px;
    font-size: var(--tl-fs-badge, 0.6rem);
    font-weight: 700;
    color: var(--brand-secondary);
}

.beta-ruler-label.at-5s,
.beta-ruler-label.at-10s {
    color: var(--brand-primary);
}
.beta-ruler-label.at-10s {
    font-weight: 800;
}
.beta-ruler-mark.major.at-5s {
    background: var(--brand-primary);
}
/* A little wider rather than taller: a taller tick would run up through the
   label printed above it. */
.beta-ruler-mark.major.at-10s {
    background: var(--brand-primary);
    width: 2px;
    margin-left: -0.5px;
}

/* THE RULER'S BAND, for every ruler: the main timeline's and the Trim bar's
   (Brad, 2026-09-30: "there should be a ruler bg color … same colorization on
   both"). Reads as a header bar rather than more panel: a lift toward the
   elevated surface, tinted with the Edit section's cyan identity. Tokens only,
   so every theme resolves it. */
.beta-time-ruler,
.ruler-band {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--brand-secondary) 14%, var(--bg-elevated)) 0%,
        color-mix(in srgb, var(--brand-secondary) 6%, var(--bg-canvas)) 100%);
}

/* The first time starts AT its tick instead of centring on it — the pinned
   track-name column covers everything to the left of the first tick. */
.beta-ruler-label.at-start {
    transform: none;
}