/* ============================================================================
   sc-yardline-rail.css — the yard-line hash-mark rails (KICKOFF · 10 · 20 …
   50 … TD) that drive down the viewport edges as you scroll.
   ============================================================================
   Oct 10 2026 (lane L4b). Extracted from the homepage (index.html inline
   <style>, formerly :2914-3073) so Coach (/), Referee, Platform and the
   Athlete Hub run ONE implementation. Behaviour: js/sc-yardline-rail.js.

   Markup contract (the homepage's, unchanged):
     <nav class="field-hashes left"  id="fieldHashesLeft"  aria-label="…">
       <a class="field-hash" data-target="<section id>" href="#<section id>">
         <span class="field-hash-mark"></span>
         <span class="field-hash-yard">10</span>        (class "td" on the last)
         <span class="field-hash-label">Kickoff</span>
       </a> …
     </nav>
     <nav class="field-hashes right" id="fieldHashesRight" aria-hidden="true"> … </nav>

   Laws: colour values ONLY in the :root custom properties below (they are the
   homepage's values, byte for byte); the rails hide under 881px exactly as
   they always have; prefers-reduced-motion stills every transition.
   ============================================================================ */

:root {
    /* THE PAGE ACCENT — one token per page (Carlos, Oct 10: "the green should
       differentiate the coach app"). Coach/homepage = coach green (this
       default); /referee, /platform, /hub set it to volt. Written as an RGB
       triplet so rgb()/rgba() of it compute to exactly what the homepage
       always had. */
    --sc-page-accent-rgb: 34, 197, 94;
    --rail-td: #f59e0b;
    --rail-muted: #6b7280;
    --rail-font-display: 'Saira Condensed', 'Rajdhani', system-ui, sans-serif;
    --rail-font-label: 'Rajdhani', system-ui, sans-serif;
    --rail-tick: rgba(255, 255, 255, 0.20);
    --rail-mark: rgba(255, 255, 255, 0.16);
    --rail-mark-passed: rgba(255, 255, 255, 0.45);
    --rail-yard: rgba(255, 255, 255, 0.28);
    --rail-yard-passed: rgba(255, 255, 255, 0.7);
    --rail-td-glow: rgba(245, 158, 11, 0.6);
    --rail-label: rgba(255, 255, 255, 0.6);
}

/* ─── FIELD HASH MARKS (drive down field as you scroll) ───
   Replaces dot nav. Yard numbers grow as you cross them — like
   the chain crew advancing the ball. Endzone = TD on final section.
   Spans top→bottom of viewport so 10 starts high, TD ends low. */
/* Derived from the accent where it is set (css/sc-accent.css). */
:root, [data-accent] {
    --rail-on: rgb(var(--sc-page-accent-rgb));
    --rail-tick-passed: rgba(var(--sc-page-accent-rgb), 0.45);
    --rail-glow: rgba(var(--sc-page-accent-rgb), 0.4);
}
/* A light page: ink marks, grey yards. */
[data-canvas="light"] {
    --rail-muted: #6b7280;
    --rail-tick: rgba(10, 13, 20, 0.22);
    --rail-mark: rgba(10, 13, 20, 0.25);
    --rail-mark-passed: rgba(10, 13, 20, 0.55);
    --rail-yard: rgba(10, 13, 20, 0.4);
    --rail-yard-passed: rgba(10, 13, 20, 0.75);
    --rail-label: rgba(10, 13, 20, 0.7);
    --rail-glow: rgba(10, 13, 20, 0);
}
.field-hashes {
    position: fixed;
    top: 14vh;
    bottom: 10vh;
    z-index: 80;
    display: flex; flex-direction: column;
    justify-content: space-between;  /* distribute hashes across full height */
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.field-hashes.left  { left: 28px;  align-items: flex-start; }
.field-hashes.right { right: 28px; align-items: flex-end;   }
.field-hashes.ready { opacity: 1; }
/* Hide HUD chrome once footer enters view — game's over, no more field.
   Specificity (.ready.at-footer) beats .ready alone. */
.field-hashes.ready.at-footer {
    opacity: 0;
    pointer-events: none;
}

.field-hash {
    position: relative;
    display: flex; align-items: center;
    gap: 14px;
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    color: var(--rail-muted);
    min-height: 28px; /* leaves headroom for the label that drops below */
}
.field-hashes.right .field-hash { flex-direction: row-reverse; }

/* Small interstitial yard ticks between major yards — fills the gap
   between each 10-yard line with single-yard markers (real field feel).
   Height matches the vh-distributed gap between hashes. */
.field-hash::after {
    content: '';
    position: absolute;
    top: calc(100% + 4px);
    left: 6px;
    width: 8px;
    height: 9vh;
    background: repeating-linear-gradient(
        to bottom,
        var(--rail-tick) 0,
        var(--rail-tick) 1px,
        transparent 1px,
        transparent 14px
    );
    pointer-events: none;
    transition: background 0.4s ease, opacity 0.4s ease;
}
.field-hashes.right .field-hash::after { left: auto; right: 6px; }
.field-hash:last-child::after { display: none; }
.field-hash.passed::after {
    background: repeating-linear-gradient(
        to bottom,
        var(--rail-tick-passed) 0,
        var(--rail-tick-passed) 1px,
        transparent 1px,
        transparent 14px
    );
}

.field-hash-mark {
    width: 16px; height: 2px;
    background: var(--rail-mark);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.4s ease,
                background 0.4s ease,
                box-shadow 0.4s ease;
    flex-shrink: 0;
}
.field-hash.passed .field-hash-mark {
    width: 26px;
    background: var(--rail-mark-passed);
}
.field-hash.active .field-hash-mark {
    width: 38px; height: 3px;
    background: var(--rail-on);
    box-shadow: 0 0 14px var(--rail-on), 0 0 28px var(--rail-glow);
}

.field-hash-yard {
    font-family: var(--rail-font-display);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--rail-yard);
    transition: color 0.4s ease, transform 0.4s ease, font-size 0.4s ease;
    min-width: 28px;
    text-align: center;
}
.field-hash.passed .field-hash-yard {
    color: var(--rail-yard-passed);
}
.field-hash.active .field-hash-yard {
    color: var(--rail-on);
    transform: scale(1.35);
}
.field-hash-yard.td {
    letter-spacing: 0.18em;
}
.field-hash.active .field-hash-yard.td {
    color: var(--rail-td);
    text-shadow: 0 0 14px var(--rail-td-glow);
}

/* Label now drops BELOW the yard number instead of sitting inline to
   its right. Frees up horizontal real estate so the page content can
   hug closer to the edge. Positioned absolutely against the .field-hash
   anchor (which is position:relative) — mark width (16px) + gap (14px)
   = 30px left offset to align under the yard. */
.field-hash-label {
    position: absolute;
    left: 30px;
    top: 100%;
    margin-top: 2px;
    font-family: var(--rail-font-label);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--rail-label);
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
}
.field-hash.active .field-hash-label,
.field-hash:hover  .field-hash-label {
    opacity: 1;
    transform: translateY(0);
}
.field-hash.active .field-hash-label { color: var(--rail-on); }

@media (max-width: 880px) {
    .field-hashes { display: none; }
}
/* iPad: keep hashes but make them slimmer, less aggressive labels */
@media (min-width: 881px) and (max-width: 1280px) {
    .field-hashes.left  { left: 14px; }
    .field-hashes.right { right: 14px; }
    .field-hash { gap: 10px; }
    .field-hash-mark { width: 12px; }
    .field-hash.passed .field-hash-mark { width: 20px; }
    .field-hash.active .field-hash-mark { width: 28px; }
    .field-hash-yard { font-size: 10px; min-width: 22px; }
    .field-hash-label { font-size: 9px; letter-spacing: 0.2em; }
    .field-hash::after { left: 4px; width: 6px; }
    .field-hashes.right .field-hash::after { left: auto; right: 4px; }
}

/* Reduced motion: the rail still tracks where you are, it just doesn't animate
   getting there. */
@media (prefers-reduced-motion: reduce) {
    .field-hashes,
    .field-hash::after,
    .field-hash-mark,
    .field-hash-yard,
    .field-hash-label { transition: none; }
}