/* SPDX-License-Identifier: AGPL-3.0-or-later  Copyright (C) 2025-2026 TG11 */
:root{--ink:#0b1021;--bg:#0e1329;--card:#141a3a;--panel:#0f1530;--line:#2a2f55;--accent:#5cdfb7;--danger:#ff6b6b;--muted:#9aa2c1;--text:#e8ecff;--ok:#5cdfb7;--warn:#ffd166}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#0b1021,#0e1329);color:var(--text);font-family:Inter,system-ui,"Segoe UI",Arial,sans-serif;min-height:100vh}
a{color:#9fd8ff}
code{background:#0b1021;padding:.05rem .3rem;border-radius:.3rem;font-size:.9em}
h2{margin:.25rem 0 .75rem}
h3{margin:.25rem 0 .5rem;color:#cfe7ff}
h4{margin:.5rem 0 .25rem;color:#cfe7ff}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.center{text-align:center}
.nowrap{white-space:nowrap}
.spacer{flex:1}
/* top bar */
.topbar{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:20;flex-wrap:wrap}
.topbar .brand{font-weight:800;font-size:1.15rem;color:var(--text);text-decoration:none;margin-right:.5rem}
.topbar form{display:flex;gap:.35rem;align-items:center;margin:0}
.topbar input,.topbar select,.boardswitch select{padding:.45rem .55rem;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:.6rem}
.topbar form button{border-color:transparent;background:var(--accent);color:#06181a;font-weight:700;padding:.45rem .7rem;border-radius:.6rem;cursor:pointer}
.linkbtn{padding:.42rem .6rem;border-radius:.6rem;border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none;font:inherit;cursor:pointer;white-space:nowrap}
.linkbtn:hover{background:var(--card)}
.usernav{display:flex;gap:.35rem;align-items:center}
.usernav .linkbtn,.usernav form button.linkbtn{background:var(--panel);color:var(--text);font-weight:400}
.publicnav{display:flex;gap:.65rem;align-items:center;margin-left:auto;flex-wrap:wrap}.publicnav>a{color:var(--text);text-decoration:none}.publicnav .public-cta{background:var(--accent);color:#06181a;border-color:transparent;font-weight:700}
/* layout */
.wrap{padding:1rem;max-width:1400px;margin:0 auto}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:1rem}
@media (max-width:1000px){.layout{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1rem;margin-bottom:1rem}
.panel.narrow{max-width:460px;margin:3rem auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1rem}
.stack{display:flex;flex-direction:column;gap:.55rem}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.row.wrapcols>*{flex:1 1 160px}
label{display:flex;flex-direction:column;gap:.2rem;font-size:.9rem;color:#cfe7ff}
label.check{flex-direction:row;align-items:center;gap:.4rem}
input,select,textarea{padding:.5rem .6rem;border:1px solid var(--line);background:#0b1021;color:var(--text);border-radius:.6rem;font:inherit}
input[type=color]{padding:.1rem;height:2.2rem;width:3rem}
select.mini{padding:.25rem;font-size:.8rem}
textarea{resize:vertical}
button{font:inherit;cursor:pointer;padding:.42rem .65rem;border-radius:.6rem;border:1px solid var(--line);background:var(--panel);color:var(--text)}
button:hover{background:var(--card)}
.btn{display:inline-block;padding:.5rem .8rem;border-radius:.6rem;border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none;font-weight:600;cursor:pointer}
.btn.primary,button.primary{background:var(--accent);color:#06181a;border-color:transparent}
.btn.wide{display:block;text-align:center}
.btn.disabled{opacity:.5;cursor:not-allowed}
.btn-link{color:#9fd8ff;text-decoration:none;padding:.35rem .4rem}
.danger,button.danger,.linkbtn.danger{background:var(--danger);color:#19050a;border-color:transparent}
.flash{padding:.6rem .8rem;border-radius:.6rem;margin-bottom:.75rem;border:1px solid var(--line)}
.flash.ok{background:#0f2a25;border-color:#1f6b58}
.flash.bad{background:#2a0f16;border-color:#7a2b39}
.tag{display:inline-block;font-size:.72rem;padding:.1rem .45rem;border-radius:.5rem;background:#1c2350;color:#cfe7ff;vertical-align:middle;text-decoration:none}
.tag.ok{background:#124b3c;color:#b8ffe9}
.tag.bad{background:#5a1f2a;color:#ffd0d6}
.footer{color:var(--muted);font-size:.8rem;text-align:center;padding:1.5rem}
/* board */
.boardhead h2{margin-bottom:.1rem}
.taskform{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.taskform input[name=title]{flex:2 1 220px}
.taskform input[name=description]{flex:3 1 260px}
.taskform input[name=due]{flex:1 1 180px}
.board .stats{margin-bottom:.5rem}
.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.col{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:.75rem}
.dcol{list-style:none;margin:0;padding:0;min-height:2rem}
.cardwrap{margin-bottom:.5rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:.9rem;padding:.6rem}
.card.overdue{border-color:#b5533f}
.card.blocked{border-style:dashed;opacity:.85}
.card .title{font-weight:700;margin-bottom:.25rem}
.card .meta{color:var(--muted);font-size:.85rem;margin-bottom:.25rem}
.card .desc{font-size:.92rem;white-space:pre-wrap}
.card .idline{font-family:monospace}
.actions{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.4rem;align-items:center}
.actions button{padding:.3rem .5rem;font-size:.85rem}
.editform input,.editform select,.editform textarea{font-size:.9rem}
.plan ol{padding-left:1.2rem}
/* an empty plan is a hint, not an empty panel the size of the board */
.plan.empty{border-style:dashed;padding:.55rem .9rem;border-radius:.8rem}
.plan.empty p{margin:0;font-size:.9rem}
/* assistant */
.assistant textarea{width:100%}
/* the model picker takes the width it is given, never more: long model names
   used to push the select past the edge of the panel */
.assistant .row{flex-wrap:wrap}
.assistant select,.assistant #model-picker{flex:1 1 12rem;min-width:0;max-width:100%}
.assistant h3{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.assistant h3 .tag{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.assistant .quick{display:flex;flex-wrap:wrap;gap:.3rem}
.chip{font-size:.78rem;padding:.25rem .5rem;border-radius:1rem;background:#1c2350;border:1px solid var(--line)}
.htmx-indicator{display:none;color:var(--accent)}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline}
.changeset{border:1px solid var(--line);border-radius:.8rem;padding:.6rem;margin:.6rem 0;background:var(--card)}
.changeset.status-applied{border-color:#1f6b58}
.changeset.status-rejected{opacity:.6}
.cs-msg{margin:.35rem 0;line-height:1.4}
.cs-ops ol{padding-left:1.2rem;margin:.4rem 0}
.cs-ops li{margin-bottom:.35rem}
.op-delete_task b{color:var(--danger)}
.op-create_task b{color:var(--ok)}
/* settings */
.settings{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1rem}
@media (max-width:800px){.settings{grid-template-columns:1fr}}
.settingsnav{display:flex;flex-direction:column;gap:.25rem}
.settingsnav a{padding:.5rem .7rem;border-radius:.6rem;color:var(--text);text-decoration:none;border:1px solid transparent}
.settingsnav a.active,.settingsnav a:hover{background:var(--panel);border-color:var(--line)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.table.providers td{font-size:.92rem}
.plain{list-style:none;padding:0;margin:.25rem 0}
.plain li{padding:.15rem 0}
.conn{border:1px solid var(--line);border-radius:.8rem;padding:.6rem;margin-bottom:.6rem}
.boardcard.archived{opacity:.6}
tr.current{background:#131a3c}
/* focus modal */
.focusmodal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000}
.focuscard{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1rem;min-width:300px}

/* ---- 2.1: collapsible columns, expandable cards, schedule, reflections ---- */
.boardtools { float: right; display: inline-flex; gap: .35rem; }
button.mini, input.mini, select.mini { font-size: .78rem; padding: .15rem .45rem; }
.colhead { cursor: pointer; user-select: none; display: flex; align-items: center; gap: .4rem; }
.colhead .colname { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.colhead .colcount { flex: 0 0 auto; white-space: nowrap; }
.colhead .caret { flex: 0 0 auto; }
.colhead .caret { display: inline-block; transition: transform .15s; }
.col.collapsed .colhead .caret { transform: rotate(-90deg); }
.col.collapsed .dcol { display: none; }
.col.collapsed { opacity: .85; }
.cardhead { cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: .4rem; align-items: baseline; }
.cardhead .caret { transition: transform .15s; }
.cardhead .meta { grid-column: 2; }
.cardwrap.open .cardhead .caret { transform: rotate(90deg); }
.cardbody { display: none; margin-top: .4rem; }
.cardwrap.open .cardbody { display: block; }
.card .schedform { display: inline-flex; gap: .2rem; align-items: center; }
.instructions { margin: .4rem 0; padding: .4rem .6rem; border-left: 3px solid var(--accent, #5cdfb7); background: rgba(92,223,183,.06); border-radius: 4px; }
.instructions summary { cursor: pointer; font-weight: 600; }
.md ol, .md ul { padding-left: 1.2rem; margin: .3rem 0; }
.md p { margin: .3rem 0; }
.md code { font-size: .85em; }
.card.htmx-request { opacity: .6; }
.reflectcard { max-width: 560px; width: 92vw; text-align: left; }
.reflectcard label { display: block; margin-bottom: .55rem; font-weight: 600; }
.reflectcard label .row { font-weight: 400; margin-top: .2rem; }
.seg { display: flex; gap: .4rem; flex-wrap: wrap; }
.segopt { display: inline-flex; align-items: center; gap: .2rem; padding: .15rem .5rem; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; font-weight: 400; cursor: pointer; }
.segopt:has(input:checked) { border-color: var(--accent, #5cdfb7); background: rgba(92,223,183,.15); }
.weekgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin: .8rem 0; }
.daycol { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: .5rem .6rem; background: rgba(255,255,255,.02); }
.daycol.off { opacity: .5; }
.daycol.istoday { border-color: var(--accent, #5cdfb7); }
.daycol.over .capbar span { background: #e0645c; }
.daycol h3 { margin: 0 0 .3rem; font-size: 1rem; }
.capbar { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; margin: .2rem 0; }
.capbar span { display: block; height: 100%; background: var(--accent, #5cdfb7); }
.schedtask { padding: .35rem .4rem; margin: .3rem 0; border-radius: 6px; background: rgba(255,255,255,.04); border-left: 3px solid rgba(255,255,255,.15); }
.schedtask.high { border-left-color: #f0b35c; }
.schedtask.other { opacity: .6; border-left-style: dashed; }
.schedtable input[type=number] { width: 6rem; }
.flash.autohide { position: fixed; bottom: 1rem; right: 1rem; z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,.4); }

/* ---- 2.2: nudges, energy curve, team capacity, mobile ---------------- */
.reflectnudge { position: fixed; bottom: 1rem; right: 1rem; left: auto; z-index: 60; max-width: min(38rem, 94vw);
  background: var(--panel); border: 1px solid var(--accent); border-radius: .9rem; padding: .6rem .8rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.reflectnudge form { gap: .4rem; }
.reflectnudge span { flex: 1 1 14rem; }
.slot { font-family: monospace; font-size: .8rem; padding: .05rem .3rem; border-radius: .35rem; background: #1c2350; }
.tablewrap { overflow-x: auto; }
.teamtable td.full { color: var(--danger); }
.teamtable td.center, .teamtable th.center, td.center, th.center { text-align: center; }
.energy-high { color: #f0b35c; font-weight: 600; }
.energy-medium { color: var(--text); }
.energy-low { color: var(--muted); }
.digestpreview { white-space: pre-wrap; background: #0b1021; padding: .6rem; border-radius: .6rem; max-height: 26rem; overflow: auto; }
.new-task summary { cursor: pointer; list-style: none; }
.new-task summary::-webkit-details-marker { display: none; }
.new-task summary::before { content: '▾ '; color: var(--muted); }
.new-task details:not([open]) summary::before { content: '＋ '; }
.menutoggle { display: none; }
.topextra { display: contents; }
.topbar .usernav { margin-left: auto; }

@media (max-width: 700px) {
  .boardtools { float: none; display: flex; margin-top: .3rem; flex-wrap: wrap; }
  .wrap { padding: .6rem; }
  /* one column per list, board switcher always reachable at the top */
  .cols { grid-template-columns: 1fr; }
  .topbar { padding: .5rem .6rem; gap: .4rem; }
  .topbar .brand { font-size: 1rem; margin-right: .2rem; }
  .boardswitch { flex: 1 1 auto; min-width: 0; }
  .boardswitch select { max-width: 45vw; }
  .menutoggle { display: inline-block; margin-left: auto; }
  .topextra { display: none; width: 100%; flex-wrap: wrap; gap: .35rem; }
  .topextra.open { display: flex; }
  .topextra .usernav { flex-wrap: wrap; margin-left: 0; }
  .planform { flex-wrap: wrap; width: 100%; }
  .planform input { flex: 1 1 8rem; min-width: 0; }
  /* 44px tap targets on everything you press on a card */
  .actions { gap: .4rem; }
  .actions button, .actions .btn-link, .actions select, .actions input[type=date], .actions input[type=time] {
    min-height: 44px; padding: .55rem .7rem; font-size: .9rem;
  }
  .card .schedform { display: flex; flex-wrap: wrap; gap: .3rem; }
  .colhead, .cardhead { min-height: 44px; align-items: center; }
  .reflectcard { width: 96vw; max-width: none; max-height: 88vh; overflow-y: auto; }
  .reflectmodal { align-items: flex-end; }
  .reflectnudge { left: .5rem; right: .5rem; bottom: .5rem; max-width: none; }
  .reflectnudge span { flex: 1 1 100%; }              /* question on its own line… */
  .reflectnudge .btn { min-height: 40px; flex: 1 1 auto; }  /* …buttons share the next one */
  .reflectnudge .btn:last-child { flex: 0 0 auto; }
  .flash.autohide { left: .5rem; right: .5rem; }
  .weekgrid { grid-template-columns: 1fr; }
  .taskform input, .taskform select { flex: 1 1 100%; }
  .settings { grid-template-columns: 1fr; }
  .settingsnav { flex-direction: row; flex-wrap: wrap; }
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.footer .supportlink { color: var(--muted); }
.footer .supportlink:hover { color: var(--text); }

/* ---- information pages (about, policies, status, changelog) ---- */
.prose{max-width:52rem;margin:0 auto;line-height:1.6}
.prose h1{margin:.2rem 0 .6rem}
.prose h2{margin:1.5rem 0 .4rem;font-size:1.05rem;color:#cfe7ff}
.prose h3{margin:1.2rem 0 .3rem;font-size:1rem;color:#cfe7ff}
.prose h2,.prose h3{scroll-margin-top:5rem}
.prose .heading-anchor{color:inherit;text-decoration:none}
.prose .heading-anchor::after{content:'#';margin-left:.35rem;color:var(--accent);font-size:.8em;opacity:0;transition:opacity .15s ease}
.prose h2:hover .heading-anchor::after,.prose h3:hover .heading-anchor::after,.prose .heading-anchor:focus-visible::after{opacity:1}
.prose :target{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.prose p{margin:.5rem 0}
.prose ul{padding-left:1.2rem;margin:.4rem 0}
.prose li{margin:.28rem 0}
.policy-meta{margin:.2rem 0 1.2rem}
.statusline{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 1rem}
.statusline .tag{font-size:.85rem;padding:.22rem .6rem}
.changelog h3{margin:0 0 .2rem}
.changelog h4{margin:1.6rem 0 .3rem;font-size:1rem;color:#cfe7ff;border-bottom:1px solid var(--line);padding-bottom:.3rem}
.footlinks{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:.45rem}
.footlinks a{color:var(--muted);text-decoration:none}
.footlinks a:hover{color:var(--text);text-decoration:underline}

/* ---- staff administration --------------------------------------------- */
.admin-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin:1rem 0 1.25rem}.admin-head h1{margin:.1rem 0 .45rem;font-size:2rem}.admin-head p{max-width:48rem}.admin-stats{display:flex;gap:.7rem;flex-wrap:wrap}.admin-stats span{border:1px solid var(--line);background:var(--panel);padding:.45rem .6rem;border-radius:.55rem;font-size:.9rem}.admin-stats b{color:var(--accent)}.admin-search{display:flex;gap:.6rem;align-items:end;flex-wrap:wrap;margin-bottom:1rem}.admin-search label{flex:1 1 18rem}.admin-search input{width:100%}.admin-table td{white-space:normal}.admin-grid{align-items:start}.account-details{margin:0}.account-details div{padding:.5rem 0;border-bottom:1px solid var(--line)}.account-details div:last-child{border-bottom:0}.account-details dt{font-size:.8rem;color:var(--muted);margin-bottom:.15rem}.account-details dd{margin:0}.admin-actions{display:flex;gap:.55rem;flex-wrap:wrap}.admin-actions form{margin:0}.admin-actions button{min-height:2.4rem}
.recovery-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.recovery-row:last-of-type{border-bottom:0}
@media (max-width:700px){.admin-head{align-items:start}.admin-head h1{font-size:1.65rem}.admin-actions{flex-direction:column;align-items:stretch}.admin-actions form,.admin-actions button{width:100%}}

/* ---- public home and signed-in dashboard -------------------------------- */
.home-hero{padding:4.5rem 0 3rem;max-width:52rem}.eyebrow{color:var(--accent);font-size:.85rem;font-weight:700;text-transform:uppercase;margin:0 0 .4rem}.home-hero h1,.dashboard-head h1{font-size:2.6rem;line-height:1.08;margin:.1rem 0 .8rem}.lead{font-size:1.2rem;line-height:1.6;color:#cfe7ff;max-width:46rem}.home-actions{margin-top:1.3rem}.home-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;border-top:1px solid var(--line);padding:1.5rem 0}.home-band h2{font-size:1.1rem}.home-band p{line-height:1.6;color:var(--muted)}.home-split{grid-template-columns:repeat(2,minmax(0,1fr))}.home-privacy{grid-template-columns:minmax(0,1fr) auto;align-items:center}.dashboard-head{display:flex;gap:1rem;justify-content:space-between;align-items:end;flex-wrap:wrap;margin:1rem 0 1.5rem}.dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.dashboard-list li{display:flex;gap:.75rem;justify-content:space-between;border-bottom:1px solid var(--line);padding:.55rem 0}.dashboard-list li:last-child{border-bottom:0}

@media (max-width:700px){.publicnav{margin-left:0;width:100%;order:3}.home-hero{padding:2.5rem 0 1.75rem}.home-hero h1,.dashboard-head h1{font-size:2rem}.home-band,.home-split,.home-privacy,.dashboard-grid{grid-template-columns:1fr}.home-privacy .home-actions{margin-top:0}}

/* ---- home page product tour ------------------------------------------- */
.demo-tour{scroll-margin-top:5rem;border-top:1px solid var(--line);padding:2rem 0}
.demo-head{max-width:46rem;margin-bottom:1.25rem}.demo-head h2{font-size:1.6rem;margin:.1rem 0 .4rem}
.demo-layout{display:grid;grid-template-columns:minmax(15rem,20rem) minmax(0,1fr);gap:1.5rem;align-items:start}
.demo-tabs{display:flex;flex-direction:column;gap:.5rem}
.demo-tab{position:relative;display:flex;gap:.75rem;align-items:flex-start;text-align:left;width:100%;padding:.7rem .8rem .85rem;border-radius:.8rem;border:1px solid var(--line);background:var(--panel);color:var(--text);overflow:hidden}
.demo-tab:hover{background:var(--card)}
.demo-tab:focus-visible,.demo-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.demo-tab.is-active{border-color:var(--accent);background:var(--card)}
.demo-num{flex:none;display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:#1c2350;border:1px solid var(--line);font-size:.85rem;font-weight:700}
.demo-tab.is-active .demo-num{background:var(--accent);color:#06181a;border-color:transparent}
.demo-tab-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}.demo-tab-text strong{font-size:1rem}.demo-tab-text small{color:var(--muted);font-size:.85rem;line-height:1.4}
.demo-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}.demo-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s ease}
.demo-stage{min-width:0}
.demo-slide{margin:0;display:none}.demo-slide.is-active{display:block}
.demo-window{border:1px solid var(--line);border-radius:.9rem;overflow:hidden;background:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.demo-chrome{display:flex;align-items:center;gap:.4rem;padding:.5rem .8rem;background:var(--panel);border-bottom:1px solid var(--line)}
.demo-chrome span{width:.65rem;height:.65rem;border-radius:50%;background:#2a2f55}.demo-chrome em{margin-left:.6rem;font-style:normal;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-shots{position:relative;aspect-ratio:1500/930;background:var(--ink)}
.demo-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.demo-shot.is-active{opacity:1}
.demo-caption{display:block;min-height:3.2rem;margin-top:.8rem;line-height:1.5}
.demo-step{display:none;color:#cfe7ff}.demo-step.is-active{display:block}.demo-step b{color:var(--accent);margin-right:.35rem}
.demo-controls{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}.demo-controls[hidden]{display:none}
.demo-btn{padding:.4rem .75rem}
.demo-dots{display:inline-flex;gap:.35rem;margin-left:auto}.demo-dots i{width:.5rem;height:.5rem;border-radius:50%;background:#2a2f55}.demo-dots i.is-active{background:var(--accent)}
/* Without JavaScript every slide is shown in sequence, first frame only. */
.demo-tour:not(.is-ready) .demo-tabs{display:none}.demo-tour:not(.is-ready) .demo-layout{grid-template-columns:1fr}
.demo-tour:not(.is-ready) .demo-slide{display:block;margin-bottom:1.5rem}
@media (max-width:900px){.demo-layout{grid-template-columns:1fr}.demo-tabs{flex-direction:row;overflow-x:auto;padding-bottom:.3rem;scroll-snap-type:x proximity}.demo-tab{flex:0 0 auto;width:auto;scroll-snap-align:start;align-items:center;padding:.5rem .75rem .65rem}.demo-tab-text small{display:none}}
@media (prefers-reduced-motion:reduce){.demo-shot,.demo-bar i{transition:none}}


/* Recently completed - the undo shelf at the foot of a board. Completed tasks
   are filtered out of every column, so without this there is no way back from
   an accidental Done once the reflection panel has gone. */
.recentdone { margin-top: 18px; }
.recentdone > summary { cursor: pointer; padding: 6px 0; }
.recentdone-list { list-style: none; margin: 8px 0 0; padding: 0; }
.recentdone-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line, #d8ded9); }
.recentdone-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: line-through; opacity: .72; }
.recentdone-when { flex: 0 0 auto; }
@media (max-width: 560px) {
  .recentdone-list li { flex-wrap: wrap; gap: 6px; }
  .recentdone-title { flex-basis: 100%; white-space: normal; }
}