/* RippleCore Taskmaster mockups. DataRipple tokens (June 2026) + the live v3 shell,
   copied from mockups/home-round2 (Sept 17, 2026) so the three concepts sit in the
   same chrome as the rest of the app. Red on light, navy sidebar, Ubuntu type. */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

:root{
  --red:#cc0c1f; --red-hover:#e65328; --red-soft:rgba(204,12,31,.08); --blue:#5189ad;
  --ink:#18293b; --heading:#0b1220; --muted:#5a6b7b;
  --page:#ffffff; --surface-2:#eef2f7; --border:#cdd8e8; --border-input:#2f3c4e;
  --shell:#1b2433; --shell-text:#c7d2e0; --shell-muted:#6f7f95;
  --ok:#166534; --ok-soft:rgba(22,101,52,.08); --warn:#854d0e; --warn-soft:rgba(133,77,14,.08); --danger:#991b1b;
  --r-sm:3px; --r-md:6px; --r-lg:10px;
  --sh-sm:0 2px 6px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --sh-md:0 4px 14px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);
  --font:'Ubuntu',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);font-weight:400;font-size:16px;line-height:1.5;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--heading);letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
p{margin:0}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-hover)}
button{font-family:inherit;font-size:inherit}
input,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:-.15em}

/* ---------- app shell, matched to the live v3 chrome ---------- */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:56px;background:var(--shell);display:flex;align-items:center;position:sticky;top:0;z-index:100}
.tb-logo{flex:0 0 236px;height:56px;display:flex;align-items:center;padding-left:18px}
.tb-logo img{height:22px;display:block}
.tb-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;min-width:0}
.rippler{width:100%;max-width:480px;height:36px;background:#fff;border-radius:var(--r-md);display:flex;align-items:center;gap:9px;padding:0 12px;color:var(--heading);font-size:14px;font-weight:500;cursor:pointer}
.rippler .mark{width:22px;height:22px;display:block}
.rippler .chev{margin-left:auto;color:var(--muted)}
.pad-btn{background:var(--blue);color:#fff;border:0;border-radius:var(--r-sm);height:32px;padding:0 13px;display:flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer;flex:0 0 auto}
.pad-btn b{font-weight:700}
.tb-right{display:flex;align-items:center;gap:18px;padding:0 20px}
.tb-right>.ic{width:18px;height:18px;color:#c7d2e0;cursor:pointer}
.tb-user{display:flex;align-items:center;gap:8px;cursor:pointer;color:#fff;font-size:13px;font-weight:700}
.tb-user .chev{width:15px;height:15px;color:#8ea0b5}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.body{display:grid;grid-template-columns:236px minmax(0,1fr);flex:1}
.side{background:var(--shell);position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;padding:6px 10px 0;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:#3a4759 transparent}
.nav-label{color:var(--shell-muted);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:12px 8px 4px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.nav-label .chev{width:12px;height:12px;color:#566578}
.tb-logo{text-decoration:none}
.mockbar select{font-family:inherit;font-size:13px;background:#0b1220;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:3px 6px}
.nav-i{position:relative;display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:var(--r-md);color:var(--shell-text);font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:none}
.nav-i:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-i.active{background:rgba(204,12,31,.22);color:#fff}
.nav-i.active::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:2px;height:14px;background:var(--red);border-radius:1px}
.nav-i>.ic{width:17px;height:17px}
.nav-i .star{margin-left:auto;width:14px;height:14px;color:#566578;opacity:0}
.nav-i:hover .star{opacity:1}
.nav-i .star.on{opacity:1;color:#eab308;fill:#eab308}
.nav-i .new{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--red);border-radius:999px;padding:1px 7px}
.side-foot{margin-top:auto;padding:12px 8px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:#7d8ba0}
.main{min-width:0;background:var(--page);display:flex;flex-direction:column;min-height:calc(100vh - 56px)}
.content{max-width:1180px;margin:0 auto;padding:36px 40px 110px;width:100%}

/* ---------- primitives ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r-sm);font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;background:none;color:var(--heading)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-hover);color:#fff}
.btn-ghost{background:#fff;color:var(--heading);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--border-input);color:var(--heading)}
.btn-sm{height:36px;padding:0 14px;font-size:14px}
.count{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:var(--red);color:#fff;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.date{font-size:15px;color:var(--muted)}
.av{width:28px;height:28px;border-radius:50%;background:var(--shell);color:#fff;display:inline-grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 auto;border:2px solid #fff}
.av.me{background:var(--red)}
.av.tm{background:#fff;color:var(--red);border:2px solid var(--red)}
.av.none{background:#fff;color:var(--muted);border:2px dashed var(--muted)}
.avs{display:inline-flex}
.avs .av+.av{margin-left:-8px}
.toast{position:fixed;right:24px;bottom:84px;z-index:600;background:#0b1220;color:#fff;padding:12px 16px;border-radius:var(--r-md);font-size:14px;box-shadow:0 8px 32px rgba(11,18,32,.4);max-width:420px;opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.toast.show{opacity:1;transform:none}
.toast b{color:#fff}
.toast span{color:#a8c4d8}

/* ---------- sample-vs-real labels ---------- */
.tag{display:none;font-size:11px;font-weight:700;letter-spacing:.02em;padding:1px 7px;border-radius:999px;border:1px solid;vertical-align:middle;margin-left:6px;white-space:nowrap;line-height:1.5}
.tag.live{color:var(--ok);border-color:rgba(22,101,52,.35);background:rgba(22,101,52,.06)}
.tag.feed{color:var(--warn);border-color:rgba(133,77,14,.35);background:rgba(133,77,14,.06)}
body.labels .tag{display:inline-block}
body.clean .mockbar,body.clean .toast{display:none}

/* ---------- mock review bar ---------- */
.mockbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:500;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;min-height:44px;padding:4px 8px 4px 18px;max-width:calc(100vw - 200px);background:#0b1220;color:#c7d2e0;border-radius:24px;box-shadow:0 8px 32px rgba(11,18,32,.4);font-size:13px;white-space:nowrap}
.mockbar b{color:#fff}
.mockbar .sep{width:1px;height:18px;background:rgba(255,255,255,.15);margin:0 4px}
.mockbar a{color:#c7d2e0;padding:6px 10px;border-radius:999px}
.mockbar a:hover,.mockbar a.on{color:#fff;background:rgba(255,255,255,.1)}
.mockbar label{display:flex;align-items:center;gap:7px;cursor:pointer;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08)}
.mockbar input{accent-color:var(--red);margin:0}

/* ---------- Taskmaster: chat ---------- */
.chat{display:flex;flex-direction:column;gap:16px}
.msg{display:flex;gap:12px;max-width:62ch}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.msg .av{margin-top:2px}
.msg .who{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
.msg.me .who{text-align:right}
.bubble{font-size:17px;line-height:1.55;padding:12px 16px;border-radius:14px;background:var(--surface-2);color:var(--ink)}
.msg.me .bubble{background:var(--shell);color:#fff;border-bottom-right-radius:4px}
.msg.tm .bubble{border-bottom-left-radius:4px}
.bubble a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--border)}
.bubble a:hover{color:var(--red);text-decoration-color:currentColor}
.bubble a.need{color:var(--red);font-weight:700;text-decoration-color:rgba(204,12,31,.45)}
.msg.me .bubble a{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.bubble p+p{margin-top:8px}
.bubble .spoken{font-style:italic;color:var(--muted)}
.card{margin-top:8px;border:1px solid var(--border);border-left:3px solid var(--ok);border-radius:var(--r-md);background:#fff;padding:12px 14px;font-size:15px;line-height:1.45;box-shadow:var(--sh-sm)}
.card.ask{border-left-color:var(--warn)}
.card.undone{border-left-color:var(--muted);color:var(--muted)}
.card b{color:var(--heading)}
.card .k{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.card-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.card-actions .btn{height:36px;padding:0 14px;font-size:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--heading);font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--border-input)}
.chip .ic{color:var(--muted)}
.typing{display:inline-flex;gap:4px;padding:6px 2px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

.composer{display:flex;align-items:center;gap:10px;border:1px solid var(--border-input);border-radius:var(--r-lg);background:#fff;padding:6px 6px 6px 16px;box-shadow:var(--sh-sm)}
.composer:focus-within{box-shadow:0 0 0 3px rgba(81,137,173,.18)}
.composer input{flex:1;border:0;outline:0;font-size:17px;min-width:0;background:transparent;color:var(--heading);height:40px}
.composer input::placeholder{color:var(--muted)}
.mic,.send{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--heading);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;position:relative}
.mic .ic,.send .ic{width:20px;height:20px}
.send{background:var(--red);border-color:var(--red);color:#fff}
.send:hover{background:var(--red-hover);border-color:var(--red-hover)}
.mic:hover{border-color:var(--border-input)}
.mic.on{background:var(--red);border-color:var(--red);color:#fff}
.mic.on::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--red);animation:pulse 1.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.listen{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);min-height:22px}
.listen b{color:var(--red)}
.listen .bars{display:inline-flex;gap:3px;align-items:flex-end;height:16px}
.listen .bars i{width:3px;background:var(--red);border-radius:2px;animation:bar .9s ease-in-out infinite}
.listen .bars i:nth-child(1){height:6px}.listen .bars i:nth-child(2){height:14px;animation-delay:.15s}.listen .bars i:nth-child(3){height:9px;animation-delay:.3s}.listen .bars i:nth-child(4){height:15px;animation-delay:.45s}.listen .bars i:nth-child(5){height:7px;animation-delay:.6s}
@keyframes bar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.2)}}
.voice-opt{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--muted);cursor:pointer;user-select:none}
.voice-opt input{accent-color:var(--red);margin:0;width:16px;height:16px}

/* ---------- Taskmaster: the list ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:34px}
.page-head .sub{font-size:17px;color:var(--muted);margin-top:6px;max-width:60ch}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:18px;flex-wrap:wrap}
.tab{height:44px;padding:0 16px;border:0;background:none;font-size:16px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:8px}
.tab:hover{color:var(--heading)}
.tab.on{color:var(--heading);border-bottom-color:var(--red);font-weight:700}
.tab .n{font-size:13px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:1px 8px}
.tab.on .n{color:#fff;background:var(--red)}
.tab.add{color:var(--red);font-weight:700}
.tab .lock{width:14px;height:14px;color:var(--muted)}
.views{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.views button{height:40px;padding:0 14px;border:0;background:none;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;border-right:1px solid var(--border)}
.views button:last-child{border-right:0}
.views button.on{background:var(--shell);color:#fff;font-weight:700}
.views button:hover:not(.on){color:var(--heading);background:var(--surface-2)}
.group{margin-top:26px}
.group-h{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.group-h h3{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.group-h h3.late{color:var(--red)}
.group-h h3.warn{color:var(--warn)}
.t-next{font-size:13px;color:var(--muted);margin-top:4px;display:flex;gap:6px;align-items:center}
.t-next .ic{color:var(--red);width:13px;height:13px}
/* the conversation as a tall panel on the right of a page */
.panel{position:sticky;top:70px;height:calc(100vh - 56px - 28px);border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-sm);display:flex;flex-direction:column;min-height:0}
.panel-h{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-weight:700;color:var(--heading);flex:0 0 auto}
.panel-h .av{width:28px;height:28px;font-size:11px}
.panel-h .muted{margin-left:auto;font-size:13px;font-weight:500;color:var(--muted)}
.panel-b{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;min-height:0}
.panel-b #chat{display:flex;flex-direction:column;flex:1;min-height:0}
.panel-b #chat .chat{flex:1;min-height:0;overflow-y:auto;padding:4px 8px 10px 2px;scrollbar-width:thin}
.panel-b #chat .bubble{font-size:15.5px;padding:10px 14px}
.panel-b #chat .msg{max-width:none}
.panel-b #chat .chips{margin:8px 0;flex:0 0 auto}
.panel-b #chat .composer,.panel-b #chat .listen{flex:0 0 auto}
.panel-b #chat .listen:last-child{font-size:13px;margin-top:6px}
.group-h .n{font-size:14px;color:var(--muted)}
.task{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:#fff;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s}
.task:hover{border-color:var(--border-input)}
.task.late{border-left:3px solid var(--red)}
.task.done{opacity:.6}
.task.done .t-title{text-decoration:line-through}
.task.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{background:rgba(204,12,31,.14);border-color:var(--red)}100%{background:#fff}}
.chk{width:26px;height:26px;border-radius:50%;border:2px solid var(--border-input);background:#fff;display:grid;place-items:center;flex:0 0 auto;cursor:pointer;color:transparent}
.chk .ic{width:15px;height:15px;stroke-width:3}
.chk:hover{border-color:var(--ok);color:var(--ok)}
.task.done .chk{background:var(--ok);border-color:var(--ok);color:#fff}
.t-main{flex:1;min-width:0}
.t-title{font-size:17px;font-weight:500;color:var(--heading);line-height:1.35}
.t-sub{font-size:14px;color:var(--muted);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.t-sub .sep{color:var(--border)}
.t-right{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.due{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;padding:4px 10px;border-radius:999px;background:var(--surface-2)}
.due.late{color:#fff;background:var(--red)}
.due.today{color:var(--red);background:var(--red-soft)}
.due.none{color:var(--muted);font-weight:500;background:none;border:1px dashed var(--border)}
.pill{font-size:12.5px;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.pill.warn{color:var(--warn);border-color:rgba(133,77,14,.35);background:var(--warn-soft)}
.pill.red{color:var(--red);border-color:rgba(204,12,31,.35);background:var(--red-soft)}
.pill.ok{color:var(--ok);border-color:rgba(22,101,52,.35);background:var(--ok-soft)}
.t-share{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.t-share:hover{color:var(--red);border-color:var(--red)}
.t-share .ic{width:16px;height:16px}
.empty{padding:22px;border:1px dashed var(--border);border-radius:var(--r-md);color:var(--muted);font-size:16px;text-align:center}
.quickadd{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px dashed var(--border);border-radius:var(--r-md);color:var(--muted);font-size:16px;cursor:text;margin-bottom:8px}
.quickadd input{flex:1;border:0;outline:0;font-size:17px;background:transparent;color:var(--heading)}
.quickadd .ic{color:var(--red);width:20px;height:20px}

/* board */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.col{background:var(--surface-2);border-radius:var(--r-lg);padding:12px}
.col h3{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:2px 4px 10px;display:flex;justify-content:space-between}
.col h3 .n{font-weight:500}
.kcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;margin-bottom:8px;cursor:pointer;box-shadow:var(--sh-sm)}
.kcard:hover{border-color:var(--border-input)}
.kcard.late{border-left:3px solid var(--red)}
.kcard .t-title{font-size:16px}
.kcard .t-sub{margin-top:8px;justify-content:space-between}
/* calendar */
.cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.day{border:1px solid var(--border);border-radius:var(--r-md);min-height:190px;padding:10px;background:#fff}
.day.today{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.day h4{font-size:14px;color:var(--muted);margin-bottom:8px;font-weight:700}
.day.today h4{color:var(--red)}
.day .ev{font-size:14px;line-height:1.35;padding:6px 8px;border-radius:var(--r-sm);background:var(--surface-2);margin-bottom:6px;cursor:pointer;color:var(--heading)}
.day .ev.late{background:var(--red-soft);color:var(--red);font-weight:700}
.day .ev.done{text-decoration:line-through;opacity:.6}
.cal-late{margin-bottom:12px;font-size:15px;color:var(--red);font-weight:700}
/* table */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;background:var(--surface-2);padding:10px 12px;font-weight:700;color:var(--heading);border-bottom:1px solid var(--border);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--ink)}
.tbl tr{cursor:pointer}
.tbl tr:hover td{background:var(--surface-2)}
.tbl td.late{color:var(--red);font-weight:700}
.tbl code{font-family:'Ubuntu Mono',monospace;font-size:12.5px;color:var(--muted)}

/* ---------- drawer (every row opens its record) ---------- */
.scrim{position:fixed;inset:0;background:rgba(11,18,32,.35);z-index:700;opacity:0;pointer-events:none;transition:opacity .18s}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:100vw;background:#fff;z-index:710;box-shadow:-8px 0 32px rgba(11,18,32,.25);transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column}
.drawer.show{transform:none}
.dr-head{padding:22px 24px 16px;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:flex-start}
.dr-head h2{font-size:22px;flex:1}
.dr-close{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.dr-body{padding:18px 24px 40px;overflow-y:auto;flex:1}
.fld{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:15px;align-items:center}
.fld .k{color:var(--muted);font-weight:500}
.fld .k code{display:block;font-family:'Ubuntu Mono',monospace;font-size:11.5px;color:var(--muted);opacity:.8}
.fld .v{color:var(--heading);font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fld .v a{color:var(--red);font-weight:700}
.dr-acts{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 6px}
.dr-acts .btn{height:40px;padding:0 14px;font-size:14px}
.tl{margin-top:22px}
.tl h3{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.tl-i{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;padding:6px 0 14px;position:relative}
.tl-i::before{content:"";position:absolute;left:8px;top:22px;bottom:0;width:2px;background:var(--border)}
.tl-i:last-child::before{display:none}
.tl-i .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);background:#fff;margin-top:2px}
.tl-i .dot.tm{border-color:var(--red)}
.tl-i .dot.gap{border-color:var(--warn);background:var(--warn-soft)}
.tl-i .at{font-size:12.5px;color:var(--muted);font-weight:700}
.tl-i .what{font-size:15px;line-height:1.45;color:var(--ink)}
.tl-i .what b{color:var(--heading)}

/* ---------- Taskmaster: rundown + employee card ---------- */
.rundown{font-size:19px;line-height:1.6;max-width:36em}
.rundown p+p{margin-top:12px}
.rundown a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--border)}
.rundown a:hover{color:var(--red);text-decoration-color:currentColor}
.rundown a.need{color:var(--red);font-weight:700;text-decoration-color:rgba(204,12,31,.45)}
.byline{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-top:12px}
.byline .ic{color:var(--red)}
.emp{display:flex;gap:18px;align-items:flex-start;padding:20px 22px;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-sm)}
.emp .big{width:56px;height:56px;border-radius:50%;background:#fff;border:3px solid var(--red);color:var(--red);display:grid;place-items:center;font-size:22px;font-weight:700;flex:0 0 auto}
.emp h2{font-size:22px}
.emp .role{font-size:15px;color:var(--muted);margin-top:2px}
.emp ul{margin:10px 0 0;padding-left:18px;font-size:15.5px;line-height:1.6}
.emp li b{color:var(--heading)}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:middle}

.two{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}
.rail{position:sticky;top:76px}
.rail-box{border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:16px;background:#fff}
.rail-box h3{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.rail-list{display:flex;flex-direction:column;gap:2px}
.rail-i{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);cursor:pointer;color:var(--heading);font-size:15.5px;font-weight:500;border:0;background:none;text-align:left;width:100%}
.rail-i:hover{background:var(--surface-2)}
.rail-i.on{background:var(--red-soft);color:var(--red);font-weight:700}
.rail-i .n{margin-left:auto;font-size:13px;color:var(--muted);font-weight:700}
.rail-i.on .n{color:var(--red)}
.rail-i .ic{width:17px;height:17px;color:var(--muted)}
.rail-i.on .ic{color:var(--red)}
.mini{display:flex;flex-direction:column;gap:6px}
.mini a{display:flex;gap:8px;align-items:baseline;font-size:15px;color:var(--ink);line-height:1.35}
.mini a .due{font-size:12.5px;padding:1px 8px}
.mini a:hover{color:var(--red)}

/* process card (concept 3) */
.proc{border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;background:#fff;box-shadow:var(--sh-sm)}
.proc h3{font-size:17px;margin-bottom:4px}
.proc .when{font-size:14px;color:var(--muted);margin-bottom:10px}
.proc ol{margin:0;padding-left:20px;font-size:15px;line-height:1.55}
.proc ol li.done{color:var(--muted);text-decoration:line-through}
.pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
.pipe .col{padding:10px}
.pipe .col h3{font-size:13px}
.pipe .kcard{padding:10px 12px}
.pipe .kcard .t-title{font-size:15px}
.pipe .next{font-size:13px;color:var(--muted);margin-top:6px;display:flex;gap:6px;align-items:center}
.pipe .next .ic{color:var(--red);width:14px;height:14px}
.pipe .col.wait{background:var(--warn-soft)}
.pipe .col.done{background:var(--ok-soft)}

/* marks inside avatars, headers, the sidebar and the launcher */
.av.tm svg,.big svg,.tm-launch-mark svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.nav-i>svg.ic{width:17px;height:17px}
/* looks: the avatar and the launcher share one colour treatment */
body.look-red .av.tm,body.look-red .big{background:var(--red);color:#fff;border-color:var(--red)}
body.look-navy .av.tm,body.look-navy .big{background:var(--shell);color:#fff;border-color:var(--shell)}
body.look-grad .av.tm,body.look-grad .big{background:linear-gradient(135deg,#cc0c1f 0%,#a80917 100%);color:#fff;border-color:#a80917}
body.look-sky .av.tm,body.look-sky .big{background:var(--blue);color:#fff;border-color:var(--blue)}
/* the corner launcher */
.tm-launch{position:fixed;right:24px;bottom:24px;z-index:520;width:58px;height:58px;border-radius:50%;border:2px solid var(--red);background:#fff;color:var(--red);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-md);font-family:inherit;font-size:22px;font-weight:700;transition:transform .15s}
.tm-launch:hover{transform:translateY(-2px)}
.tm-launch.inline{position:relative;right:auto;bottom:auto}
.tm-launch .tm-launch-mark{display:grid;place-items:center;width:100%;height:100%}
.tm-launch .tm-launch-mark svg{width:26px;height:26px}
.tm-launch-count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;border:2px solid #fff}
.tm-launch-count:empty{display:none}
.tm-launch-label{position:absolute;right:68px;top:50%;transform:translateY(-50%);background:#0b1220;color:#fff;font-size:13.5px;font-weight:700;padding:7px 12px;border-radius:999px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.tm-launch:hover .tm-launch-label,.tm-launch:focus-visible .tm-launch-label,.tm-launch.show-label .tm-launch-label{opacity:1}
.tm-launch.listening::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--red);animation:pulse 1.2s ease-out infinite}
body.look-red .tm-launch{background:var(--red);color:#fff;border-color:var(--red)}
body.look-red .tm-launch-count,body.look-grad .tm-launch-count{background:#0b1220}
body.look-navy .tm-launch{background:var(--shell);color:#fff;border-color:var(--shell)}
body.look-grad .tm-launch{background:linear-gradient(135deg,#cc0c1f,#a80917);color:#fff;border-color:#a80917}
body.look-sky .tm-launch{background:var(--blue);color:#fff;border-color:var(--blue)}
/* the record as a centered window instead of a drawer */
.drawer.center{left:50%;right:auto;top:6vh;bottom:auto;width:720px;max-width:calc(100vw - 32px);max-height:88vh;border-radius:var(--r-lg);transform:translate(-50%,14px);opacity:0;transition:transform .2s ease,opacity .2s ease;box-shadow:0 24px 70px rgba(15,23,42,.28)}
.drawer.center.show{transform:translate(-50%,0);opacity:1}
/* the spoken walkthrough */
.tour{position:fixed;inset:0;z-index:800}
.tour-spot{position:fixed;border:2px solid var(--red);border-radius:12px;box-shadow:0 0 0 9999px rgba(11,18,32,.5);transition:left .25s,top .25s,width .25s,height .25s;pointer-events:none}
.tour-card{position:fixed;width:376px;max-width:calc(100vw - 32px);background:#fff;border-radius:var(--r-lg);padding:16px 18px 14px;box-shadow:var(--sh-md);font-size:16.5px;line-height:1.5;color:var(--ink)}
.tour-step{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.tour-text b{color:var(--heading)}
.tour-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.hear-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--red);background:#fff;color:var(--red);font-weight:700;font-size:14.5px;cursor:pointer}
.hear-btn:hover{background:var(--red-soft)}
.hear-btn .ic{width:17px;height:17px}

.dock{position:sticky;bottom:0;background:linear-gradient(to top,#fff 78%,rgba(255,255,255,0));padding:16px 0 80px;z-index:50}
.dock .composer{max-width:900px}
.dock .transcript{max-width:900px;margin-bottom:12px;max-height:280px;overflow-y:auto;padding:6px 4px}
.dock .chips{max-width:900px;margin-bottom:10px}

@media (max-width:1100px){.two{grid-template-columns:minmax(0,1fr)}.rail{position:static}.board{grid-template-columns:repeat(2,minmax(0,1fr))}.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}.cal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .body{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .tb-logo{flex:0 0 auto;padding-right:8px}
  .tb-user span:not(.avatar){display:none}
  .content{padding:24px 18px 120px}
  .drawer{width:100vw}
  .mockbar{left:16px;right:16px;transform:none;height:auto;flex-wrap:wrap;padding:8px 12px;border-radius:16px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}