/* The Robotics Stack palette, applied over style.css so the demo reads as part
   of the landing page at theroboticsstack.com. Loaded after style.css; the
   variables below re-point most rules, and the blocks after them cover the
   places where style.css hardcodes a light colour. */
:root{
  --ink:#e8eaed; --muted:#9aa0a6; --line:#272c34; --blue:#4ea1ff;
  --bg:#0b0d10; --paper:#14171c; --amber:#d9a441; --side:#0e1114; --green:#5cc9a0;
  --surface-2:#1b1f26; --radius:14px;
  color:var(--ink); background:var(--bg);
}
body{background:radial-gradient(1200px 600px at 50% -10%,#161a21 0%,var(--bg) 55%);background-attachment:fixed}

/* Controls */
button{background:var(--surface-2);border-color:var(--line);color:var(--ink);border-radius:8px}
button:hover{background:#222833;border-color:#39414d}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
select{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
a{color:var(--blue)}

/* Sidebar */
.sidebar{background:var(--side);color:var(--ink);border-right:1px solid var(--line)}
.brand-mark{border-color:var(--line);background:var(--surface-2)}
.brand small,.side-caption{color:var(--muted)}
.clip-button{color:var(--muted)}
.clip-button:hover{background:var(--surface-2)}
.clip-button.selected{color:var(--ink);background:var(--surface-2);border-color:var(--line)}
.clip-button small{color:var(--muted)}
.side-bottom{color:var(--muted)}
.side-bottom p{color:var(--muted)}
.side-bottom a{color:var(--blue)}
.local-dot{background:var(--green)}

/* Top bar and intro */
.topbar{border-bottom-color:var(--line)}
.draft-pill{background:#2a2113;color:var(--amber)}
.intro p{color:var(--muted)}
.counts span,.counts small,.eyebrow{color:var(--muted)}

/* Media panel */
.media-panel,.inspector,.annotation-list{background:var(--paper);border-color:var(--line);border-radius:var(--radius)}
.media-toolbar{background:var(--surface-2);color:var(--muted);border-bottom:1px solid var(--line)}
.text-button{color:var(--blue)}
.viewport{background:#000}
.viewport #frame-time{background:#0b0d10e6;color:var(--ink)}
.controls #play{background:#17304d;color:#cfe4ff;border-color:#24446b}
.player-hint,.duration,.speed-label{color:var(--muted)}
.media-status{color:var(--amber)}

/* Current step */
.now-playing{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:0}
.now-heading,.now-footer,.no-current-action{color:var(--muted)}
.now-kicker{color:var(--blue)}
.live-dot{background:var(--blue)}
#current-step{color:var(--ink)}
.current-action{color:var(--ink)}
.current-action:hover{background:#222833}
.hand-badge{border-color:var(--line);background:var(--paper);color:var(--muted)}
.step-progress{background:var(--line)}
#step-progress-fill{background:var(--blue)}

/* Timeline */
.timeline-heading{border-top-color:var(--line)}
.timeline-heading span,.lane-label,.timeline-ticks{color:var(--muted)}
.lane{background:#10141a}
.span-bar{background:#22344f;border-color:#31486a;color:#cfe0f7}
.span-bar.action{background:#1c3a33;border-color:#2b5a4e;color:#bfe3d6}
.span-bar.selected{box-shadow:0 0 0 2px var(--blue)}
.span-bar.playing{background:#3f6ac4;border-color:#5b86dd;color:#fff}
.span-bar.action.playing{background:#2e7d68;border-color:#43a186;color:#fff}
.playhead{background:#e8eaed}
.active-label{background:var(--surface-2);color:var(--muted)}

/* Per-hand lanes, from player-enhance.js */
.hand-lane-row .lane{background:#131820}
.span-bar.hand-bar{background:#2c2542;border-color:#43386a;color:#d6cbf2}
.span-bar.hand-bar.both-hands{background:#3a2e20;border-color:#5b472c;color:#e8d3b4}
.span-bar.hand-bar.unobserved{background:repeating-linear-gradient(135deg,#1a1f27,#1a1f27 4px,#232932 4px,#232932 8px);border-color:#333b47;color:var(--muted)}

/* Inspector */
.inspector-heading{color:var(--muted);border-bottom-color:var(--line)}
.inspector input,.inspector textarea,.inspector select{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.tag{background:var(--surface-2);color:var(--muted)}
.inspector p#evidence-description{color:var(--muted)}
.evidence-button{background:var(--surface-2);color:var(--muted)}
.state-change{color:#9fd6c0}
.uncertainty{background:#2a2113;color:#e8c98a}
.outcome{border-top-color:var(--line)}
.outcome ul{color:var(--amber)}
.muted{color:var(--muted)}
.primary{background:var(--blue);border-color:var(--blue);color:#06111f}
.primary:hover{background:#6fb4ff;color:#06111f}

/* Ledger */
.list-heading p{color:var(--muted)}
.filters input{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
th{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
td{border-bottom-color:var(--line)}
td:first-child,td:nth-child(2),td:nth-child(4),td:nth-child(5){color:var(--muted)}
tr.selected td{background:var(--surface-2)}
.row-select{color:var(--ink)}
.review-accepted{color:var(--green)!important}
#empty,footer{color:var(--muted)}
.noscript{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}

/* Showcase mode: the review and correction affordances are not part of the
   public demo. The evidence, states, boundary ranges and uncertainty stay. */
body[data-mode="showcase"] .review-only{display:none!important}
body[data-mode="showcase"] th:nth-child(5),
body[data-mode="showcase"] td:nth-child(5){display:none}

/* TRS branding in the sidebar */
.brand{text-decoration:none;color:inherit;align-items:center}
.brand:hover small{color:var(--blue)}
.brand-logo{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--line);flex-shrink:0}
.brand>div{font-size:17px;font-weight:650;letter-spacing:-.3px;line-height:1.25}
.side-bottom{padding-top:24px;border-top:1px solid var(--line)}
.side-bottom a{color:var(--muted);font-size:10px;letter-spacing:.04em}
.side-bottom a:hover{color:var(--blue)}

/* Ledger rows for the span currently playing. style.css tints these light,
   which left dark text on a near-white row once the theme went dark. */
tr.playing td{background:#16241f}
tr.playing td:first-child{box-shadow:inset 3px 0 var(--green);color:#8fd9bd}
tr.playing.selected td{background:#1b2a3d}

/* The play control over the video, previously coloured from the script. */
#video-play{background:#0b0d10c9;color:var(--ink)}
#video-play:hover{background:#0b0d10ee}

/* Footer */
footer{border-top:1px solid var(--line);margin-top:28px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:10px;align-items:baseline}
footer p{margin:0}
.foot-brand{color:var(--muted);white-space:nowrap}
.foot-brand a{color:var(--muted);margin-left:4px}
.foot-brand a:hover{color:var(--blue)}