/* Lab-day "now" bar. */
.now-bar{--sim-ink:#f5f5ef;--sim-soft:#b9c2cc;--sim-accent:#c6f58d;--sim-violet:#a98df7}
.now-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Now bar ---------- */
.now-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:18px;padding:12px 24px;background:#07080d;border-top:1px solid rgba(255,255,255,.18);color:var(--sim-ink);font-family:'Segoe UI',Arial,sans-serif}
.now-bar[hidden]{display:none}
body.has-now-bar{padding-bottom:96px}
.now-clock{display:flex;flex-direction:column;line-height:1.1}
.now-label{font:10px/1.4 Consolas,monospace;letter-spacing:.16em;color:var(--sim-accent)}
.now-clock strong{font:600 24px/1.1 Georgia,'Times New Roman',serif}
.now-main p{margin:0;max-width:none}
.now-title{font-size:16px!important;font-weight:650;line-height:1.35!important}
.now-prompt{font-size:14px!important;color:var(--sim-soft);line-height:1.4!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-track{position:relative;height:3px;margin-top:8px;background:rgba(255,255,255,.1)}
.now-fill{position:absolute;inset:0 auto 0 0;background:var(--sim-accent);transition:width .6s}
.now-break{position:absolute;top:-2px;bottom:-2px;background:rgba(255,255,255,.35)}
.now-side{text-align:right}
.now-side p{margin:0;font-size:13px!important;line-height:1.4!important;color:var(--sim-soft);white-space:nowrap}
.studio .now-bar .now-left{color:var(--sim-ink)!important;font-weight:650}
.now-go{color:#17210f!important;background:var(--sim-accent);border-radius:8px;padding:9px 14px;font-weight:650;font-size:14px;text-decoration:none;white-space:nowrap}
.now-go[hidden]{display:none}
.now-close{background:transparent;color:var(--sim-soft);border:1px solid rgba(255,255,255,.18);min-height:36px!important;width:36px;font-size:18px;line-height:1;cursor:pointer}
.now-bar[data-kind=break]{background:#0f1410}
.now-bar[data-kind=break] .now-label{color:var(--sim-violet)}
.now-bar[data-kind=break] .now-title::before{content:'☕ '}
@media (max-width:820px){
  .now-bar{grid-template-columns:auto minmax(0,1fr) auto;gap:10px 14px;padding:10px 16px}
  .now-side{grid-column:2;grid-row:2;text-align:left;display:flex;gap:12px}
  .now-go{grid-column:3;grid-row:1/3}
  .now-close{position:absolute;top:-38px;right:10px;background:#07080d}
  .now-prompt{display:none}
  body.has-now-bar{padding-bottom:110px}
}

/* Respect motion preferences from the device and from the lab's accessibility console. */
@media (prefers-reduced-motion:reduce){.now-bar *{animation:none!important;transition:none!important}}
.access-no-motion .now-bar *{animation:none!important;transition:none!important}
.access-contrast .now-bar{border-color:#fff}
@media print{.now-bar{display:none!important}}

/* The page sets its own text colours and button styling; keep the bar self-contained. */
.studio .now-bar :is(p,strong){color:inherit}
.now-bar button{box-shadow:none;transform:none;text-shadow:none;letter-spacing:normal;text-transform:none}
.now-bar[data-kind=task]{background:#1c1a0f;border-top:2px solid #ffd23f}
.now-bar[data-kind=task] .now-label{color:#ffd23f}
.now-bar[data-kind=task] .now-go{background:#ffd23f;color:#14120a!important}
/* Mobile audit fixes: readable label, wrapping side text on small phones. */
.now-label{font-size:11px!important}
@media (max-width:420px){
  .now-bar{gap:6px 10px;padding:8px 12px}
  .now-side{flex-wrap:wrap;gap:2px 10px}
  .now-side p{white-space:normal!important;font-size:12px!important}
  .now-clock strong{font-size:20px}
  .now-go{padding:8px 10px;font-size:13px}
  .now-title{font-size:14px!important}
}
.now-label{font-size:12px!important}
.now-go{min-height:44px;display:inline-flex;align-items:center}
/* Keep focused or scrolled-to content clear of the fixed bar. */
html:has(body.has-now-bar){scroll-padding-bottom:120px}