/* ================= chrome ================= */
  .chrome{position:fixed; z-index:20; transition:opacity .24s var(--ez), transform .24s var(--ez)}
  body.hide-chrome .chrome:not(.pinned){opacity:0; pointer-events:none}
  body.hide-chrome .hud:not(.pinned){transform:translateY(-8px)}
  body.hide-chrome .rail:not(.pinned){transform:translateY(10px)}

  /* --- HUD --- */
  .hud{
    top:0; left:0; right:0; height:64px; display:flex; align-items:center; gap:var(--s-xs);
    padding:0 var(--s-md); background:var(--canvas); border-bottom:1px solid var(--hairline);
  }
  .score{
    display:flex; align-items:center; height:40px; background:var(--surface-card);
    border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden;
  }
  .score .name{
    display:flex; align-items:center; padding:0 var(--s-sm); font-size:13px; font-weight:600;
    letter-spacing:0; max-width:26vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .score .num{
    /* Grid, not flex. The box has to stay full height so the divider on its left
       reaches top and bottom, but a single flex line with align-items:baseline
       sits flush against the top of that box, which left "1 / 6" riding high.
       Grid honours align-content on one row, so the row centres while the
       figures keep the shared baseline they should have. */
    display:grid; grid-auto-flow:column; align-items:baseline; align-content:center;
    gap:3px; padding:0 var(--s-sm); height:100%;
    border-left:1px solid var(--hairline); font-family:var(--mono);
  }
  .score .num b{font-size:18px; font-weight:700; letter-spacing:-.5px; color:var(--primary)}
  .score .num i{font-style:normal; font-size:13px; color:var(--muted)}
  .score .clock{
    display:flex; align-items:center; padding:0 var(--s-sm); height:100%;
    border-left:1px solid var(--hairline); font-family:var(--mono); font-size:14px;
    color:var(--muted); cursor:pointer;
  }
  .score .clock.running{color:var(--primary)}
  .score .clock::before{content:""; width:6px; height:6px; border-radius:50%;
    background:currentColor; margin-right:var(--s-xs); opacity:.45}
  .score .clock.running::before{opacity:1; animation:blip 1.6s infinite}
  @keyframes blip{50%{opacity:.25}}

  .spacer{flex:1}
  .btn{
    height:40px; padding:0 var(--s-sm); border:1px solid var(--hairline); border-radius:var(--r-md);
    background:var(--surface-card); color:var(--on-dark); font-size:14px; font-weight:600;
    cursor:pointer; display:inline-flex; align-items:center; gap:var(--s-xs);
    transition:background .14s, border-color .14s, color .14s;
  }
  .btn:hover{background:var(--surface-elevated)}
  .btn[aria-pressed="true"]{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
  .btn[aria-pressed="true"] .k{color:rgba(10,10,10,.55)}
  .btn .k{font-family:var(--mono); font-size:12px; font-weight:400; color:var(--muted)}
  .btn.icon{width:40px; padding:0; justify-content:center; font-size:15px}
  /* Material Symbols, Apache 2.0, inlined as paths rather than loaded as an
     icon font: an icon font paints its ligature text ("close", "fullscreen")
     until it arrives, and these sit in the bar over someone's slides. The
     24px grid is the shape's own, and fill follows the button's colour. */
  .btn.icon svg{width:24px; height:24px; display:block; fill:currentColor}

  /* --- timeline rail --- */
  .rail{
    left:0; right:0; bottom:0; height:68px; padding:0 var(--s-md) var(--s-sm);
    display:flex; flex-direction:column; justify-content:flex-end;
    background:var(--canvas); border-top:1px solid var(--hairline);
  }
  .rail-ticks{position:relative; display:flex; gap:2px; align-items:flex-end; height:28px; cursor:pointer}
  .tick{flex:1 1 0; min-width:1px; height:6px; border-radius:1px; background:var(--hairline-strong);
    transition:height .16s var(--ez), background .16s}
  .tick.seen{background:#4d4d4d}
  .tick.noted{height:12px; background:var(--muted)}
  .tick.ok{height:16px; background:var(--emerald)}
  .tick.hold{height:16px; background:var(--blue)}
  .tick.fix{height:16px; background:var(--rose)}
  .tick.current{height:28px; background:var(--primary)}
  .rail-legend{
    display:flex; align-items:center; gap:var(--s-lg); padding-top:var(--s-xs);
    font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:1.5px;
    color:var(--muted); text-transform:uppercase;
  }
  .rail-legend .dotlab{display:inline-flex; align-items:center; gap:6px}
  .rail-legend .sq{width:8px; height:8px; border-radius:2px; display:inline-block}
  .rail-legend .sq.ok{background:var(--emerald)}
  .rail-legend .sq.hold{background:var(--blue)}
  .rail-legend .sq.fix{background:var(--rose)}