/*
  Tactics Unit shared components.
  Source: docs/prototypes/concept-b-dialogue.html (Concept B, Dialogue v3).
  Class names match the prototype, so page CSS copied from it keeps working.
  Requires tokens.css. Page layouts (hero, home sections, customer center feed,
  admin screens) live in each app; see packages/ui/README.md.
*/

/* ---------- layout helpers ---------- */
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:24px}
.col{max-width:680px}

/* ---------- buttons ---------- */
.btn{--h:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 16px;border-radius:var(--r);font-size:14px;font-weight:560;letter-spacing:.005em;white-space:nowrap;border:1px solid transparent;transition:background-color 160ms var(--ease),border-color 160ms var(--ease),color 160ms var(--ease),transform 120ms var(--ease),box-shadow 160ms var(--ease);user-select:none;-webkit-tap-highlight-color:transparent}
.btn:active:not(:disabled){transform:translateY(1px);box-shadow:none}
.btn.sm{--h:32px;padding:0 12px;font-size:13px;gap:6px}
.btn.lg{--h:48px;padding:0 20px;font-size:15px}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 0 var(--btn-edge),inset 0 1px 0 var(--btn-hi)}
.btn-primary:hover{background:var(--accent-hi)}
.btn-primary:disabled{background:var(--bg-3);color:var(--text-3);cursor:not-allowed;box-shadow:none}
.btn-secondary{background:var(--bg-2);border-color:var(--line-2);color:var(--text);box-shadow:0 1px 0 var(--btn-edge)}
.btn-secondary:hover{background:var(--bg-3);border-color:var(--line-3)}
.btn-text{color:var(--text-2);padding:0 10px}
.btn-text:hover{color:var(--text);background:var(--bg-2)}
.btn .ic{width:16px;height:16px}
.btn kbd{margin-left:2px}
.btn-primary kbd{background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.18);color:rgba(28,19,7,.7)}
.btn.is-busy{position:relative;overflow:hidden;background:var(--bg-3);color:var(--text);cursor:progress;box-shadow:none;border-color:var(--line-2)}
.btn .fill{position:absolute;inset:0;background:var(--accent-fill);transform-origin:left;transform:scaleX(0);pointer-events:none}
.btn .lbl{position:relative}
.btn.is-done{background:var(--good);color:var(--good-ink);border-color:transparent}
.btn.is-done .ic{animation:pop 260ms var(--ease)}
.btn.kbd-press{transform:translateY(1px);box-shadow:none;background:var(--bg-4)}
.btn-primary.kbd-press{background:var(--accent-hi)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.spin{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-3);border-top-color:var(--text);animation:spin 700ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;min-width:36px;padding:0 8px;border-radius:var(--r);color:var(--text-2);transition:background-color 160ms var(--ease),color 160ms var(--ease)}
.icon-btn:hover{background:var(--bg-2);color:var(--text)}
.icon-btn:active{transform:translateY(1px)}
.link{color:var(--text);border-bottom:1px solid var(--line-3);transition:border-color 160ms var(--ease),color 160ms var(--ease)}
.link:hover{border-color:var(--accent);color:var(--text)}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-xs);border:1px solid var(--line-2);background:var(--bg-1);color:var(--text-3);font-family:var(--font);font-size:11.5px;font-weight:600;line-height:1}
@media (hover:none){.enter-hint,.kbd-only{display:none!important}}
.btn-secondary:disabled,.btn-text:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---------- tags ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:var(--r-xs);font-size:12px;font-weight:560;background:var(--bg-3);color:var(--text-2);white-space:nowrap}
.tag .ic{width:12px;height:12px}
.tag-good{background:var(--good-soft);color:var(--good)}
.tag-bad{background:var(--bad-soft);color:var(--bad)}
.tag-info{background:var(--info-soft);color:var(--info)}
.tag-accent{background:var(--accent-soft);color:var(--accent-text)}
.tag-line{background:transparent;border:1px solid var(--line-2);color:var(--text-2)}

/* ---------- fields ---------- */
.field{display:grid;gap:6px;min-width:0}
.field label,.flabel{font-size:13px;font-weight:540;color:var(--text-2)}
.field .opt{color:var(--text-3);font-weight:450}
.input,.field input:not([type=range]),.field select,.field textarea{width:100%;height:44px;padding:0 12px;border-radius:var(--r);background:var(--bg-1);border:1px solid var(--line-2);color:var(--text);font-size:15px;caret-color:var(--accent);transition:border-color 160ms var(--ease),box-shadow 200ms var(--ease),background-color 160ms var(--ease)}
.field textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical;line-height:1.5}
.field select{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A4AAB2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.input:hover,.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-3)}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft),0 0 18px -4px var(--accent-glow);background:var(--field-focus)}
.field input::placeholder,.field textarea::placeholder,.input::placeholder{color:var(--text-4)}
.field [aria-invalid=true]{border-color:var(--bad)!important;box-shadow:0 0 0 3px var(--bad-soft)!important}
.err{font-size:13px;color:var(--bad);min-height:0;display:flex;gap:6px;align-items:center}
.err:empty{display:none}
.nudge{animation:nudge 240ms var(--ease)}
@keyframes nudge{0%,100%{transform:none}30%{transform:translateX(-4px)}65%{transform:translateX(3px)}}

/* ---------- switch (square toggle) ---------- */
.switch{position:relative;width:34px;height:20px;border-radius:5px;background:var(--bg-3);border:1px solid var(--line-2);transition:background-color 180ms var(--ease),border-color 180ms var(--ease);flex:none}
.switch span{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:3px;background:var(--text-2);transition:transform 180ms var(--ease),background-color 180ms var(--ease)}
.switch[aria-checked=true]{background:var(--accent-soft);border-color:var(--accent-line)}
.switch[aria-checked=true] span{transform:translateX(14px);background:var(--accent)}
.switch-row{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-2);cursor:pointer}
.switch-row label{cursor:pointer}

/* ---------- range slider ---------- */
.range{display:grid;grid-template-columns:auto 1fr 48px;gap:14px;align-items:center;font-size:13px;color:var(--text-2)}
.range output{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--v,60%),var(--bg-4) var(--v,60%))}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--bg-4)}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:3px;background:var(--text);margin-top:-5px;border:0;box-shadow:0 0 0 4px rgba(0,0,0,.25)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:3px;background:var(--text);border:0}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent)}

/* ---------- ask field and chips ---------- */
.ask{position:relative;display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid var(--line-3);transition:border-color 200ms var(--ease)}
.ask::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease);box-shadow:0 0 14px 1px var(--accent-glow)}
.ask:focus-within::after{transform:scaleX(1)}
.ask input,.ask textarea{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--text);caret-color:var(--accent);padding:14px 0 16px;font-size:clamp(19px,2vw,24px);line-height:1.35;letter-spacing:-.01em;resize:none}
.ask input::placeholder,.ask textarea::placeholder{color:var(--text-4)}
.ask .btn{margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;max-width:820px}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:var(--r);background:var(--bg-1);border:1px solid var(--line);color:var(--text-2);font-size:13.5px;transition:all 160ms var(--ease)}
.chip:hover{color:var(--text);border-color:var(--line-3);background:var(--bg-2)}
.chip:active{transform:translateY(1px)}
.chip .ic{width:14px;height:14px;color:var(--text-3)}

/* ---------- segmented control ---------- */
.seg{display:inline-flex;padding:2px;border-radius:var(--r);background:var(--bg-1);border:1px solid var(--line);gap:2px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.seg button{height:28px;padding:0 10px;border-radius:var(--r-xs);font-size:13px;color:var(--text-3);white-space:nowrap;transition:background-color 160ms var(--ease),color 160ms var(--ease)}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed=true]{background:var(--bg-3);color:var(--text)}
.theme-seg button{height:26px;padding:0 9px;font-size:12.5px}

/* ---------- tabs ---------- */
.tabbar{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:18px;overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{height:42px;padding:0 10px;font-size:13.5px;color:var(--text-3);white-space:nowrap;transition:color 160ms var(--ease)}
.tabbar button:hover{color:var(--text)}
.tabbar button[aria-selected=true]{color:var(--text)}
.tabbar .ink{position:absolute;bottom:-1px;height:2px;background:var(--accent);border-radius:1px;transition:transform 220ms var(--ease),width 220ms var(--ease);left:0}
.tabpanel{padding-top:18px}

/* ---------- avatars ---------- */
.avatar{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;background:var(--bg-3);color:var(--text-2);font-size:12px;font-weight:620;letter-spacing:.02em;flex:none}
.avatar.lg{width:44px;height:44px;font-size:14px}
.avatar.team{background:var(--team);color:var(--text)}
.acct{border-radius:50%;transition:box-shadow 160ms var(--ease)}
.acct:hover .avatar{box-shadow:0 0 0 2px var(--line-3)}
.tone-1{background:var(--accent-soft)!important;color:var(--accent-text)!important}
.tone-2{background:var(--good-soft)!important;color:var(--good)!important}
.tone-3{background:var(--info-soft)!important;color:var(--info)!important}
.tone-4{background:var(--bg-3)!important;color:var(--text-2)!important}
.avatar.xs{width:20px;height:20px;font-size:10px}
.avatar.sm{width:26px;height:26px;font-size:11px}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}

/* ---------- brand mark and app bar ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:620;font-size:15px;letter-spacing:-.01em;color:var(--text);border-radius:var(--r-xs)}
.app-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.app-bar-in{display:flex;align-items:center;gap:12px;height:56px;padding-inline:20px;max-width:1440px;margin-inline:auto}
.app-bar .spacer{flex:1}
.switcher{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:var(--r);font-size:14px;font-weight:540;color:var(--text);transition:background-color 160ms var(--ease)}
.switcher:hover{background:var(--bg-2)}
.switcher .ic{color:var(--text-3)}
.bar-div{width:1px;height:20px;background:var(--line-2)}

/* ---------- menus ---------- */
.menu-wrap{position:relative}
.menu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:220px;background:var(--pop-bg);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--pop);padding:6px;display:grid;gap:2px}
.menu.right{left:auto;right:0}
.menu.up{top:auto;bottom:calc(100% + 6px)}
.menu-h{padding:8px 10px 6px;font-size:13px;color:var(--text-3);border-bottom:1px solid var(--line);margin-bottom:4px}
.menu-h b{display:block;color:var(--text);font-weight:560;font-size:14px}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 10px;border-radius:var(--r-xs);font-size:14px;color:var(--text);transition:background-color 120ms var(--ease)}
.menu-item:hover,.menu-item:focus-visible{background:var(--bg-2);outline:none}
.menu-item .ic{color:var(--text-3)}
.menu-item .sub{margin-left:auto;font-size:12.5px;color:var(--text-3)}
.menu-item[aria-checked=true] .ic.chk{color:var(--accent)}
.menu .theme-row{display:grid;gap:8px;padding:8px 10px 10px;border-top:1px solid var(--line);margin-top:4px;font-size:12.5px;color:var(--text-3)}
.menu .theme-row .seg{width:100%}
.menu .theme-row .seg button{flex:1}

/* ---------- status lamps and dots ---------- */
.lamp{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);flex:none}
.lamp.good{background:var(--good);box-shadow:0 0 0 4px var(--good-soft)}
.status{display:inline-flex;align-items:center;gap:8px}
.status .sd{display:block;width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}

/* ---------- list rows ---------- */
.block-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.block-h h2{font-size:15px;font-weight:580}
.rows{border-top:1px solid var(--line)}
.row-i{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.row-i .ri-ic{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;background:var(--bg-1);border:1px solid var(--line);color:var(--text-2)}
.row-i b{display:block;font-weight:540;font-size:14.5px}
.row-i span.s{display:block;font-size:13.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.row-i .act{display:flex;gap:6px;align-items:center}
.amt{font-variant-numeric:tabular-nums;font-size:14.5px;color:var(--text)}

/* ---------- breadcrumbs ---------- */
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text-3);flex-wrap:wrap}
.crumbs a{transition:color 140ms var(--ease)}
.crumbs a:hover{color:var(--text)}
.crumbs .ic{width:12px;height:12px}

/* ---------- search field ---------- */
.cl-search{padding:10px;border-bottom:1px solid var(--line);position:relative}
.cl-search .ic{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:var(--text-3);width:16px;height:16px}
.cl-search input{padding-left:36px!important;height:38px!important;font-size:14px!important}

/* ---------- key hints ---------- */
.kbd-hint{display:inline-flex;gap:4px;align-items:center;font-size:12.5px;color:var(--text-3)}

/* ---------- one-question flow ---------- */
.flow{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.flow-progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;background:var(--line);z-index:40}
.flow-progress span{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform 420ms var(--ease),background-color 300ms var(--ease);box-shadow:0 0 10px var(--accent-glow)}
.flow-progress.done span{background:var(--good);box-shadow:none}
.flow-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;height:64px;padding-inline:24px}
.flow-left{display:flex;align-items:center;gap:6px}
.flow-summary{min-width:0;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-3);overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,#000 88%,transparent)}
.flow-summary button{color:var(--text-3);border-radius:var(--r-xs);padding:2px 4px;margin:0 -4px;white-space:nowrap;transition:color 160ms var(--ease),background-color 160ms var(--ease);max-width:36ch;overflow:hidden;text-overflow:ellipsis;flex:none}
.flow-summary button:hover{color:var(--text);background:var(--bg-1)}
.flow-summary .sep{color:var(--text-4);flex:none}
.flow-summary button.enter{animation:sumIn 320ms var(--ease)}
@keyframes sumIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.flow-close{color:var(--text-3)}
.flow-close kbd{margin-left:2px}
.flow-stage{flex:1;display:grid;padding-inline:24px}
.step{grid-area:1/1;outline:none;min-width:0}
.step-in{width:100%;max-width:760px;margin-inline:auto;padding-block:clamp(36px,10vh,112px) 96px}
.step-in.wide{max-width:800px}
.q{display:block;font-size:clamp(28px,4vw,46px);font-weight:440;letter-spacing:-.03em;line-height:1.1;text-wrap:balance;color:var(--text);max-width:22ch}
.q-note{margin-top:12px;font-size:14px;color:var(--text-3)}
.q-lead{margin-top:12px;font-size:17px;color:var(--text-2);max-width:48ch}
.step .ask{margin-top:36px}
.step .ask textarea{font-size:clamp(20px,2.2vw,26px);padding-bottom:14px;overflow:hidden}
.step .err{margin-top:12px}
.step-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-top:32px}
.enter-hint{font-size:13px;color:var(--text-3);display:inline-flex;align-items:center;gap:6px;margin-left:6px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:36px}
.choice{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px 10px 12px;border-radius:var(--r);background:var(--bg-1);border:1px solid var(--line-2);font-size:15.5px;color:var(--text);transition:background-color 160ms var(--ease),border-color 160ms var(--ease),transform 120ms var(--ease),box-shadow 200ms var(--ease)}
.choice:hover{background:var(--bg-2);border-color:var(--line-3)}
.choice:active{transform:scale(.99)}
.choice kbd{opacity:.55;transition:opacity 160ms var(--ease),background-color 160ms var(--ease),color 160ms var(--ease),border-color 160ms var(--ease)}
.choice:hover kbd,.choice:focus-visible kbd{opacity:1}
.choice > .ic{color:var(--text-3);transition:color 160ms var(--ease)}
.choice-l{flex:1}
.choice .box{width:18px;height:18px;border-radius:var(--r-xs);border:1.5px solid var(--line-3);display:grid;place-items:center;color:transparent;transition:all 160ms var(--ease)}
.choice .box .ic{width:12px;height:12px;stroke-width:2.2}
.choice[aria-checked=true]{background:var(--accent-soft);border-color:var(--accent-line)}
.choice[aria-checked=true] kbd{opacity:1;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.choice[aria-checked=true] > .ic{color:var(--accent-text)}
.choice[aria-checked=true] .box{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.step.picked .choice[aria-checked=true]{box-shadow:0 0 0 3px var(--accent-soft)}
@media (hover:none){.choice kbd{display:none}.choice{padding-left:16px}}
.contact .fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin-top:36px}
.contact .field.full{grid-column:1/-1}
.contact .field input{height:48px;font-size:16px}
.choice > .ic{width:20px;height:20px}

/* ---------- request summary panel ---------- */
.flow-body{flex:1;display:grid;min-width:0}
.flow-panel{display:none}
@media (min-width:1100px){
  .flow-body{grid-template-columns:minmax(0,1fr) 340px}
  .flow-panel{display:block;border-left:1px solid var(--line);padding:clamp(36px,10vh,112px) 28px 48px}
  .flow-panel-in{position:sticky;top:calc(env(safe-area-inset-top,0px) + 88px)}
  .flow-summary{visibility:hidden}
}
.fp-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.fp-h h2{font-size:14px;font-weight:580}
.fp-h span{font-size:12.5px;color:var(--text-3)}
.fp-list{border-top:1px solid var(--line)}
.fp-row{width:100%;display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:start;padding:12px 8px 12px 4px;border-bottom:1px solid var(--line);transition:background-color 160ms var(--ease)}
.fp-row .d{width:7px;height:7px;border-radius:50%;margin-top:6px;border:1.5px solid var(--text-4);transition:all 200ms var(--ease)}
.fp-row.done .d{background:var(--text-3);border-color:var(--text-3)}
.fp-row.cur .d{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fp-k{display:block;font-size:12.5px;color:var(--text-3)}
.fp-v{font-size:14px;color:var(--text);margin-top:1px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fp-row.empty .fp-v{color:var(--text-4)}
.fp-e{font-size:12.5px;color:var(--text-3);opacity:0;transition:opacity 160ms var(--ease)}
button.fp-row:hover{background:var(--bg-1)}
button.fp-row:hover .fp-e,button.fp-row:focus-visible .fp-e{opacity:1;color:var(--accent-text)}
.fp-row:disabled{cursor:default}
.fp-v.flash{animation:sumIn 320ms var(--ease)}
.fp-foot{margin-top:16px;font-size:12.5px;color:var(--text-3);display:flex;gap:8px;align-items:center}
.fp-foot .ic{width:14px;height:14px}

/* ---------- receipt and confirm in place ---------- */
.receipt{margin-top:28px;max-width:560px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-1)}
.rc-head{display:flex;align-items:center;gap:14px;padding:20px 22px}
.rc-mark{width:34px;height:34px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--good-soft);color:var(--good);flex:none}
.rc-mark .ic{stroke-width:2;animation:pop 360ms var(--ease) both}
.rc-title{font-size:17px;font-weight:580}
.rc-sub{font-size:13.5px;color:var(--text-3)}
.rc-head .tag{margin-left:auto}
.rc-rows{border-top:1px dashed var(--line-3);padding:10px 22px}
.rc-rows div{display:grid;grid-template-columns:128px 1fr;gap:12px;padding:7px 0;font-size:14.5px}
.rc-rows dt{color:var(--text-3)}
.rc-rows dd{color:var(--text);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.rc-next{border-top:1px dashed var(--line-3);padding:16px 22px}
.rc-next h3{font-size:13px;font-weight:560;color:var(--text-2)}
.rc-next ul{margin-top:8px;display:grid;gap:6px}
.rc-next li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:14.5px;color:var(--text-2)}
.rc-next li::before{content:"";width:6px;height:6px;margin:8px 0 0 4px;border-radius:50%;background:var(--text-4)}
.rc-actions{border-top:1px solid var(--line);padding:14px 16px;display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:520px){.rc-rows div{grid-template-columns:96px 1fr}}
.rc-rows s{color:var(--text-3)}
.rc-rows .nw{display:block}
.cancel-q{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--text-2);width:100%}
.done-mark{width:44px;height:44px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--good-soft);color:var(--good);margin-bottom:24px}
.done-mark .ic{width:22px;height:22px;stroke-width:1.8;animation:pop 360ms var(--ease) both}

/* ---------- one-time code ---------- */
.code{display:grid;grid-template-columns:repeat(6,minmax(0,52px));gap:8px;margin-top:32px}
.code input{height:60px;text-align:center;font-size:24px;font-weight:500;border-radius:var(--r);background:var(--bg-1);border:1px solid var(--line-2);color:var(--text);caret-color:var(--accent);font-variant-numeric:tabular-nums;transition:border-color 160ms var(--ease),box-shadow 200ms var(--ease);width:100%;min-width:0}
.code input:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.code.ok input{border-color:var(--good-line);color:var(--good)}

/* ---------- stage track and milestones ---------- */
.track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.track li{display:grid;gap:8px;min-width:0}
.track .bar{height:3px;border-radius:2px;background:var(--line-2);overflow:hidden}
.track .bar span{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width 600ms var(--ease)}
.track .done .bar{background:var(--text-3)}
.track .lbl{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.track .done .lbl{color:var(--text-2)}
.track .cur .lbl{color:var(--text);font-weight:560}
.track .cur .lbl small{font-weight:450;color:var(--accent-text);font-size:12.5px}
@media (max-width:560px){.track li:not(.cur) .lbl{visibility:hidden}.track .cur .lbl{overflow:visible}}
.miles{margin:14px 0 0 calc((100% - 20px) / 6 * 2 + 8px);border-left:1px solid var(--line-2);padding-left:14px}
.miles li{display:grid;grid-template-columns:16px 1fr auto;gap:10px;align-items:center;padding:6px 0;font-size:13.5px}
.m-i{width:16px;height:16px;display:grid;place-items:center;color:var(--good)}
.m-i .ic{width:14px;height:14px;stroke-width:2}
.m-i .o{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--text-4)}
.m-t{color:var(--text)}
.todo .m-t{color:var(--text-2)}
.m-s{font-size:12.5px;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums}
.wait .m-s{color:var(--accent-text)}
.miles li.fresh{animation:tlIn 360ms var(--ease)}
@media (max-width:560px){.miles{margin-left:0}}

/* ---------- stage control (admin) ---------- */
.stages{margin-top:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1);padding:16px 18px 18px;display:grid;gap:16px}
.stages-h{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.stages-h h2{font-size:14px;font-weight:570}
.stg-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;overflow-x:auto}
.stg{display:grid;gap:9px;padding:8px 8px 6px;border-radius:var(--r);text-align:left;min-width:92px;transition:background-color 140ms var(--ease)}
.stg:hover{background:var(--bg-2)}
.stg-bar{height:4px;border-radius:2px;background:var(--line-2);overflow:hidden}
.stg-bar span{display:block;height:100%;background:var(--accent);transition:width 400ms var(--ease)}
.stg.done .stg-bar span{background:var(--text-3)}
.stg-l{font-size:13px;color:var(--text-3);display:flex;align-items:center;gap:5px;white-space:nowrap}
.stg.done .stg-l{color:var(--text-2)}
.stg.cur .stg-l{color:var(--text);font-weight:570}

/* ---------- progress bar (mini) ---------- */
.mini{display:inline-block;width:56px;height:4px;border-radius:2px;background:var(--bg-3);overflow:hidden;vertical-align:middle;margin-right:8px}
.mini span{display:block;height:100%;background:var(--accent)}

/* ---------- date strip, slot grid and time zone ---------- */
.tp{margin-top:28px;display:grid;gap:16px}
.tp-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--text-2)}
.tp-top b{font-weight:560;color:var(--text)}
.tp-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px;scroll-snap-type:x proximity}
.tp-strip::-webkit-scrollbar{display:none}
.tp-day{flex:1 0 46px;min-width:46px;scroll-snap-align:start;display:grid;justify-items:start;gap:1px;padding:9px 8px 8px;border-radius:var(--r);background:var(--day-bg);border:1px solid var(--line-2);text-align:left;transition:background-color 160ms var(--ease),border-color 160ms var(--ease),box-shadow 160ms var(--ease),transform 120ms var(--ease)}
.tp-day.wk{margin-left:10px}
.tp-day span{font-size:12px;color:var(--text-2)}
.tp-day b{font-size:18px;font-weight:540;font-variant-numeric:tabular-nums;line-height:1.2;color:var(--text)}
.tp-day .dt{display:block;width:5px;height:5px;border-radius:50%;background:var(--text-4);margin-top:6px}
.tp-day:hover:not(:disabled){background:var(--bg-2);border-color:var(--line-3)}
.tp-day:active:not(:disabled){transform:translateY(1px)}
.tp-day[aria-pressed=true]{background:var(--day-sel);border-color:var(--accent);box-shadow:0 0 0 3px var(--day-ring)}
.tp-day[aria-pressed=true] span{color:var(--text)}
.tp-day[aria-pressed=true] .dt{background:var(--accent)}
.tp-day:disabled{background:transparent;border-color:var(--line);cursor:not-allowed}
.tp-day:disabled span,.tp-day:disabled b{color:var(--text-3)}
.tp-day:disabled .dt{visibility:hidden}
.tp-day.sk-d{pointer-events:none}
.tp-slots{display:grid;gap:14px;min-height:108px}
.tp-g{display:grid;gap:8px}
.tp-g h4{font-size:12.5px;font-weight:540;color:var(--text-3)}
.tp-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.tp-time{height:42px;border-radius:var(--r);border:1px solid var(--line-2);font-size:15px;font-variant-numeric:tabular-nums;text-align:center;color:var(--text);background:var(--bg);transition:background-color 160ms var(--ease),border-color 160ms var(--ease),color 160ms var(--ease),transform 120ms var(--ease)}
.tp-time:hover{border-color:var(--accent-line);color:var(--accent-text)}
.tp-time:active{transform:translateY(1px)}
.tp-time[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.tp-time small{font-size:11px;margin-left:4px;opacity:.7}
.tp-tz{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--text-3)}
.tp-tz .ic{width:15px;height:15px}
.tp-tz b{font-weight:540;color:var(--text-2)}
.tz-btn{font-size:13px;color:var(--text-2);border-bottom:1px solid var(--line-3);border-radius:0;transition:color 160ms var(--ease),border-color 160ms var(--ease)}
.tz-btn:hover{color:var(--text);border-color:var(--accent)}
.tp-tz select{height:32px;font-size:13px;padding:0 30px 0 10px;width:auto}
.picker-cur{font-size:14px;color:var(--text-3);margin-top:20px}
.picker-cur s{color:var(--text-2)}
.drawer .tp{margin-top:0}
.sch{display:grid;gap:16px;margin-top:26px}
.sch-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sch-head .avatar{width:36px;height:36px;font-size:13px}
.sch-head b{display:block;font-weight:580;font-size:15px}
.sch-head .m{display:block;font-size:13px;color:var(--text-3)}
.sch-head .sw{margin-left:auto}
.sch-other{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--text-2);padding:8px 8px 8px 12px;border:1px dashed var(--line-3);border-radius:var(--r)}
.sch-other .avatar{width:22px;height:22px;font-size:10px}
.sch-other .btn{margin-left:auto}
.sch-note{display:grid;grid-template-columns:18px 1fr;gap:10px;padding:12px 14px;border-radius:var(--r);font-size:14px;background:var(--accent-soft);border:1px solid var(--accent-line)}
.sch-note .ic{color:var(--accent-text);margin-top:1px}
.sch-note b{display:block;font-weight:580}
.sch-note .alts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.sch-note.bad{background:var(--bad-soft);border-color:var(--bad-line)}
.sch-note.bad .ic{color:var(--bad)}
.tp-time.alt{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tp-slots .sk{height:42px;border-radius:var(--r)}
.sch-empty{display:grid;gap:12px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1)}
.sch-empty h4{font-size:15px;font-weight:580;color:var(--text)}
.sch-empty p{font-size:14px;color:var(--text-2)}
.sch-empty .row{display:flex;gap:8px;flex-wrap:wrap}
.sch-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sch-bar .err{flex-basis:100%}
.tz-warn{flex-basis:100%;font-size:12.5px;color:var(--accent-text)}
@media (max-width:600px){
  .tp-times{grid-template-columns:1fr 1fr}
  .sch-bar{position:sticky;bottom:0;z-index:6;background:var(--bg);margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)) 64px;border-top:1px solid var(--line)}
  .sch-bar .btn-primary{flex:1}
  .drawer .sch-bar{background:var(--drawer-bg);margin:0 -22px;padding-right:22px}
}

/* ---------- composer ---------- */
.composer{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;margin-bottom:8px}
.composer-box{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-1);transition:border-color 160ms var(--ease),box-shadow 200ms var(--ease)}
.composer-box:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft),0 0 18px -4px var(--accent-glow)}
.composer textarea{display:block;width:100%;min-height:48px;max-height:220px;padding:13px 14px 4px;background:transparent;border:0;outline:none;resize:none;color:var(--text);font-size:15px;line-height:1.5;caret-color:var(--accent)}
.composer textarea::placeholder{color:var(--text-4)}
.composer-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:6px 8px 8px}
.composer-foot .hint{font-size:12.5px;color:var(--text-3);display:inline-flex;gap:4px;align-items:center;opacity:0;transition:opacity 160ms var(--ease)}
.composer-box:focus-within .hint{opacity:1}
.expect{margin-right:auto;padding-left:6px;font-size:12.5px;color:var(--text-3);display:inline-flex;gap:6px;align-items:center}
.expect .ic{width:13px;height:13px}

/* ---------- timeline and files ---------- */
.tl-day{margin-top:26px}
.tl-day > h3{font-size:12.5px;font-weight:560;color:var(--text-3);margin-bottom:6px;padding-left:44px}
.tl{display:grid}
.tl-item{position:relative;display:grid;grid-template-columns:32px 1fr;gap:12px;padding:10px 0}
.tl-item::before{content:"";position:absolute;left:15.5px;top:44px;bottom:-10px;width:1px;background:var(--line)}
.tl-item:last-child::before{display:none}
.tl-ic{width:32px;height:32px;border-radius:var(--r);display:grid;place-items:center;background:var(--bg-1);border:1px solid var(--line);color:var(--text-3)}
.tl-ic .ic{width:16px;height:16px}
.tl-ic.avatar{border:0;border-radius:50%;font-size:11.5px}
.tl-meta{font-size:13px;color:var(--text-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:32px}
.tl-meta b{color:var(--text);font-weight:560;font-size:14px}
.tl-text{font-size:15px;color:var(--text);margin-top:-2px;max-width:60ch;overflow-wrap:anywhere}
.tl-ev{font-size:14.5px;color:var(--text-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:32px}
.tl-ev b{color:var(--text);font-weight:540}
.file-chip{display:inline-flex;align-items:center;gap:10px;margin-top:10px;height:40px;padding:0 12px 0 10px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg-1);font-size:14px;color:var(--text);transition:background-color 160ms var(--ease),border-color 160ms var(--ease)}
.file-chip:hover{background:var(--bg-2);border-color:var(--line-3)}
.file-chip .ic{color:var(--text-3)}
.file-chip small{color:var(--text-3);font-size:12.5px}
.tl-item.new{animation:tlIn 320ms var(--ease)}
@keyframes tlIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tl-reply{font-size:13px;color:var(--text-3);opacity:0;transition:opacity 160ms var(--ease);margin-left:auto;padding:2px 6px;border-radius:var(--r-xs)}
.tl-item:hover .tl-reply,.tl-reply:focus-visible{opacity:1}
.tl-reply:hover{color:var(--text);background:var(--bg-2)}
@media (hover:none){.tl-reply{opacity:1}}
.feed-empty{padding:28px 0;color:var(--text-3);font-size:14px}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:80;opacity:0;transition:opacity 220ms var(--ease)}
.scrim.on{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(480px,100%);background:var(--drawer-bg);border-left:1px solid var(--line-2);box-shadow:var(--pop);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 240ms var(--ease);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.on{transform:none}
.drawer-h{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 12px 0 22px;border-bottom:1px solid var(--line);flex:none}
.drawer-h h2{font-size:16px;font-weight:580}
.drawer-b{flex:1;overflow:auto;padding:22px;display:grid;align-content:start;gap:20px}
.drawer-f{flex:none;border-top:1px solid var(--line);padding:14px 22px;display:flex;gap:8px;flex-wrap:wrap}
.drawer .step-actions{margin-top:4px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drawer.wide{width:min(760px,100%)}
.drawer-h .kbd-hint{margin-left:auto;margin-right:6px}

/* ---------- previews (mail, document, image) ---------- */
.mail{border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.mail-h{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--bg-2);font-size:13px;color:var(--text-3);border-bottom:1px solid var(--line)}
.mail-h b{color:var(--text);font-weight:560;font-size:14px;display:block}
.mail-b{padding:14px;font-size:14.5px;color:var(--text-2);display:grid;gap:10px;line-height:1.55}
.preview-art{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg);padding:16px;overflow-x:auto}
.preview-art svg{display:block;width:100%;min-width:380px;height:auto}
.doc-lines{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg);padding:22px;display:grid;gap:10px}
.doc-lines span{display:block;height:8px;border-radius:2px;background:var(--bg-3)}
.mail-cta{display:inline-flex;height:32px;align-items:center;padding:0 14px;border-radius:var(--r-xs);background:var(--text);color:var(--bg);font-size:13px;font-weight:560;justify-self:start}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:120;display:grid;gap:8px;justify-items:end;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 8px 8px 14px;border-radius:var(--r);background:var(--toast-bg);border:1px solid var(--line-2);box-shadow:var(--pop);font-size:14px;color:var(--text);max-width:min(420px,calc(100vw - 32px))}
.toast .ic{width:16px;height:16px}
.toast .t-good{color:var(--good)}
.toast .t-info{color:var(--info)}
.toast .t-accent{color:var(--accent)}
.toast span{flex:1}
.toast-undo{height:28px;padding:0 10px;border-radius:var(--r-xs);color:var(--accent-text);font-weight:600;font-size:13.5px}
.toast-undo:hover{background:var(--bg-2)}
.toast:not(:has(.toast-undo)){padding-right:16px}
@media (max-width:640px){.toasts{left:16px;right:16px;bottom:calc(64px + env(safe-area-inset-bottom,0px));justify-items:stretch}.toast{max-width:none}}

/* ---------- command palette ---------- */
.cmdk-btn{display:inline-flex;align-items:center;gap:10px;height:34px;min-width:280px;padding:0 6px 0 10px;border-radius:var(--r);background:var(--bg-1);border:1px solid var(--line-2);color:var(--text-3);font-size:13.5px;transition:border-color 160ms var(--ease),color 160ms var(--ease),background-color 160ms var(--ease)}
.cmdk-btn:hover{border-color:var(--line-3);color:var(--text-2);background:var(--bg-2)}
.cmdk-btn .lbl{flex:1}
.cmdk-btn kbd{margin:0}
.cmdk-btn .keys{display:inline-flex;gap:3px}
@media (max-width:900px){.cmdk-btn{min-width:0;width:36px;padding:0;justify-content:center}.cmdk-btn .lbl,.cmdk-btn .keys{display:none}.app-bar .brand span{display:none}}
.cmdk{position:fixed;inset:0;z-index:100;display:grid;justify-items:center;align-items:start;padding:14vh 16px 16px;background:var(--scrim)}
.cmdk-panel{width:min(600px,100%);background:var(--pop-bg);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--pop);overflow:hidden}
.cmdk-in{display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line)}
.cmdk-in .ic{color:var(--text-3)}
.cmdk-in input{flex:1;height:54px;background:transparent;border:0;outline:none;font-size:16px;color:var(--text);caret-color:var(--accent);min-width:0}
.cmdk-in input::placeholder{color:var(--text-4)}
.cmdk-list{max-height:min(380px,56vh);overflow:auto;padding:6px}
.cmdk-g{font-size:12px;color:var(--text-3);padding:10px 10px 4px}
.cmdk-item{display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 10px;border-radius:var(--r-xs);font-size:14px;color:var(--text)}
.cmdk-item .ic{color:var(--text-3)}
.cmdk-item .sub{margin-left:auto;font-size:12.5px;color:var(--text-3)}
.cmdk-item[aria-selected=true]{background:var(--bg-2)}
.cmdk-item[aria-selected=true] .ic{color:var(--accent-text)}
.cmdk-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-3)}
.cmdk-foot span{display:inline-flex;gap:6px;align-items:center}
.cmdk-empty{padding:24px 12px;color:var(--text-3);font-size:14px}

/* ---------- triage list and detail ---------- */
.triage{margin-top:20px;display:grid;grid-template-columns:minmax(340px,420px) 1fr;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);min-height:600px}
.tri-left{border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column}
.tri-filters{display:flex;gap:2px;padding:8px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tri-filters::-webkit-scrollbar{display:none}
.ftab{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 9px;border-radius:var(--r-xs);font-size:13px;color:var(--text-3);white-space:nowrap;transition:background-color 140ms var(--ease),color 140ms var(--ease)}
.ftab:hover{color:var(--text);background:var(--bg-1)}
.ftab[aria-pressed=true]{color:var(--text);background:var(--bg-2)}
.ftab .n{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.ftab[aria-pressed=true] .n{color:var(--text-2)}
.tri-list{flex:1;overflow:auto}
.tri-list li{overflow:hidden;border-bottom:1px solid var(--line)}
.tri-row{position:relative;width:100%;display:grid;grid-template-columns:8px 1fr auto;gap:12px;padding:13px 14px 13px 14px;align-items:start;transition:background-color 140ms var(--ease)}
.tri-row:hover{background:var(--bg-1)}
.tri-row.sel{background:var(--bg-2)}
.tri-row.sel::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:0 2px 2px 0;background:var(--accent)}
.tri-dot{width:7px;height:7px;border-radius:50%;margin-top:7px;background:transparent}
.tri-dot.on{background:var(--accent)}
.tri-main{min-width:0;display:grid;gap:3px}
.tri-top{display:flex;gap:8px;align-items:baseline;min-width:0}
.tri-top b{font-size:14px;font-weight:580;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tri-org{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tri-line{font-size:13.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tri-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.tri-side{display:grid;justify-items:end;gap:8px}
.tri-time{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.tri-hint{opacity:0;transition:opacity 140ms var(--ease)}
.tri-row:hover .tri-hint,.tri-row.sel .tri-hint{opacity:1}
@media (hover:none){.tri-hint{display:none}}
.sk-row{display:grid;grid-template-columns:8px 1fr 40px;gap:12px;padding:15px 14px;border-bottom:1px solid var(--line)}
.sk{display:block;border-radius:3px;background:linear-gradient(90deg,var(--bg-2) 0%,var(--bg-3) 40%,var(--bg-2) 80%);background-size:300% 100%;animation:shimmer 1.3s linear infinite;height:10px}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-50% 0}}
.tri-empty{padding:48px 24px;text-align:left;color:var(--text-3);font-size:14px;display:grid;gap:6px}
.tri-empty b{color:var(--text);font-weight:560;font-size:15px}
.tri-pane{min-width:0;position:relative}
.dp{position:sticky;top:calc(env(safe-area-inset-top,0px) + 56px);padding:22px 28px 24px;display:grid;gap:18px;max-width:820px}
.dp-head{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-3);flex-wrap:wrap}
.dp-back{display:none;margin-left:-8px}
.dp-title{font-size:24px;font-weight:520;letter-spacing:-.02em;line-height:1.2}
.dp-title small{display:block;font-size:14px;color:var(--text-3);font-weight:450;letter-spacing:0;margin-top:4px}
.dp-quote{font-size:18px;line-height:1.45;color:var(--text);max-width:52ch;padding-left:16px;border-left:2px solid var(--line-3)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px 24px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kv dt{font-size:12.5px;color:var(--text-3)}
.kv dd{font-size:14.5px;color:var(--text);margin-top:2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.callout{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:14px 16px;border-radius:var(--r);background:var(--bad-soft);border:1px solid var(--bad-line);font-size:14px;color:var(--text)}
.callout .ic{color:var(--bad);margin-top:1px}
.callout b{font-weight:580;display:block}
.callout span{color:var(--text-2)}
.callout.info{background:var(--info-soft);border-color:var(--info-line)}
.callout.info .ic{color:var(--info)}
.int-mark{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-3)}
.int-mark .ic{width:13px;height:13px}
.dp-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}
.dp-actions .btn kbd{height:18px;min-width:18px;font-size:11px}
.dp-reply{display:grid;gap:8px}
.dp-reply textarea{min-height:84px!important}
@media (max-width:900px){
  .triage{grid-template-columns:1fr;min-height:0}
  .tri-left{border-right:0}
  .tri-pane{position:fixed;inset:0;z-index:70;background:var(--bg);transform:translateX(100%);transition:transform 240ms var(--ease);overflow:auto;visibility:hidden;padding-top:env(safe-area-inset-top,0px)}
  .show-detail .tri-pane{transform:none;visibility:visible}
  .dp{position:static;padding:16px 16px 96px}
  .dp-back{display:inline-flex}
}
.tri-head{display:flex;justify-content:space-between;align-items:center;gap:8px;height:46px;padding:0 10px 0 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--text-2)}
.tri-head b{font-weight:560;color:var(--text)}
.tri-head span.n{color:var(--text-3);margin-left:6px;font-variant-numeric:tabular-nums}
.triage.full{height:calc(100vh - 150px);min-height:520px}
.triage.full .tri-left{overflow:hidden}
.triage.full .tri-pane{overflow:auto}
.triage.full .dp{position:static}
.tri-ag{display:inline-flex}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.tbl th{text-align:left;font-weight:540;font-size:12.5px;color:var(--text-3);padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg-1)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background-color 140ms var(--ease)}
.tbl tbody tr:hover{background:var(--bg-1)}
.tbl .num{text-align:right}
.dt-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow-x:auto}
.dt{width:100%;border-collapse:collapse;font-size:13.5px}
.dt th{text-align:left;font-weight:540;font-size:12px;color:var(--text-3);padding:9px 12px;border-bottom:1px solid var(--line);background:var(--bg-1);white-space:nowrap}
.dt td{padding:8px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;vertical-align:middle;white-space:nowrap}
.dt tbody tr:last-child td{border-bottom:0}
.dt tr.r{cursor:pointer;transition:background-color 120ms var(--ease)}
.dt tr.r:hover{background:var(--bg-1)}
.dt tr.r.sel{background:var(--bg-2);box-shadow:inset 2px 0 0 var(--accent)}
.dt tr.r:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.dt tr.grp th{background:var(--bg);font-size:12.5px;color:var(--text-2);padding:16px 12px 8px}
.dt tr.grp th span{color:var(--text-3);margin-left:6px;font-weight:450}
.dt .who{display:flex;align-items:center;gap:10px}
.dt .who .avatar{width:26px;height:26px;font-size:10.5px}
.dt .who b{font-weight:560}
.dt .num{text-align:right}
.dt .mut{color:var(--text-3)}
.dt .trunc{max-width:280px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.dt .c-opt{display:none}}

/* ---------- visibility markers and panels ---------- */
.vis{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;border-radius:var(--r-xs);font-size:12.5px;border:1px solid var(--line-2);color:var(--text-2);transition:all 160ms var(--ease);white-space:nowrap}
.vis:hover{border-color:var(--line-3);color:var(--text)}
.vis .ic{width:13px;height:13px}
.vis.on{color:var(--info);border-color:var(--info-line);background:var(--info-soft)}
.notes{display:grid;gap:10px}
.note{padding:14px 16px;border-radius:var(--r);border:1px dashed var(--line-3);background:repeating-linear-gradient(135deg,transparent 0 10px,var(--stripe) 10px 20px);font-size:14.5px}
.note small{display:block;font-size:12.5px;color:var(--text-3);margin-top:6px}
.zones{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:16px;align-items:start}
.zone{border-radius:var(--r-lg);padding:18px;display:grid;gap:16px}
.zone-vis{border:1px solid var(--info-line);background:var(--bg-1)}
.zone-int{border:1px dashed var(--line-3);background:repeating-linear-gradient(135deg,var(--bg) 0 12px,var(--stripe) 12px 24px)}
.zone > header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.zone > header h2{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:580}
.zone-vis > header h2 .ic{color:var(--info)}
.zone-int > header h2 .ic{color:var(--text-2)}
.zone .kv{border:0;padding:0}
.zone-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (max-width:900px){.zones{grid-template-columns:1fr}}

/* ---------- additions for server-rendered markup ----------
   The prototype drew these with JS. Server markup uses real inputs so every
   form still posts without JS; these rules give them the same look. */

/* destructive button */
.btn-danger{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}
.btn-danger:hover{background:var(--bad);border-color:var(--bad);color:var(--bg)}
.btn-danger:disabled{opacity:.45;cursor:not-allowed}

/* choice option built from a label and a hidden radio or checkbox */
label.choice{cursor:pointer}
.choice:has(> input:checked){background:var(--accent-soft);border-color:var(--accent-line)}
.choice:has(> input:checked) kbd{opacity:1;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.choice:has(> input:checked) > .ic{color:var(--accent-text)}
.choice:has(> input:checked) .box{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.choice:has(> input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.choice:has(> input:focus-visible) kbd{opacity:1}
.step.picked .choice:has(> input:checked){box-shadow:0 0 0 3px var(--accent-soft)}

/* checkbox chips */
label.chip{cursor:pointer;user-select:none}
.chip:has(> input:checked),.chip[aria-pressed=true]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--text)}
.chip:has(> input:checked) .ic,.chip[aria-pressed=true] .ic{color:var(--accent-text)}
.chip:has(> input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}

/* segmented control built from radios */
.seg label{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--r-xs);font-size:13px;color:var(--text-3);white-space:nowrap;cursor:pointer;transition:background-color 160ms var(--ease),color 160ms var(--ease)}
.seg label:hover{color:var(--text)}
.seg label:has(> input:checked){background:var(--bg-3);color:var(--text)}
.seg label:has(> input:focus-visible){outline:2px solid var(--focus);outline-offset:1px}

/* date strip as links (no JS day change) and slot times as radios */
a.tp-day{color:inherit}
.tp-day[aria-current=date]{background:var(--day-sel);border-color:var(--accent);box-shadow:0 0 0 3px var(--day-ring)}
.tp-day[aria-current=date] span{color:var(--text)}
.tp-day[aria-current=date] .dt{background:var(--accent)}
.tp-day[aria-disabled=true],.tp-day[aria-disabled=true]:hover{background:transparent;border-color:var(--line);cursor:not-allowed;transform:none}
.tp-day[aria-disabled=true] span,.tp-day[aria-disabled=true] b{color:var(--text-3)}
.tp-day[aria-disabled=true] .dt{visibility:hidden}
label.tp-time{display:flex;align-items:center;justify-content:center;cursor:pointer}
.tp-time:has(> input:checked){background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.tp-time:has(> input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.tp-empty{font-size:14px;color:var(--text-3);padding:6px 0}

/* status shapes: waiting and overdue states carry a shape, never color alone */
.shp{display:inline-block;flex:none;width:8px;height:8px}
.shp-cust{border-radius:50%;border:1.5px solid currentColor}
.shp-us{border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.shp-over{width:7px;height:7px;margin:0 1px;border-radius:1px;background:var(--bad);transform:rotate(45deg)}
.shp-done{width:8px;height:8px;border-radius:50%;background:var(--good)}

/* toast tone */
.toast .t-bad{color:var(--bad)}

/* empty state */
.empty-state{display:grid;gap:6px;justify-items:start;padding:40px 24px;color:var(--text-3);font-size:14px}
.empty-state > .ic{width:22px;height:22px;color:var(--text-3);margin-bottom:6px}
.empty-state b{color:var(--text);font-weight:560;font-size:15px}
.empty-state .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.empty-state.compact{padding:20px 0}

/* progress line outside a flow page */
.flow-progress.inline{position:relative;top:auto;z-index:auto}

/* search field without the list-header frame */
.cl-search.bare{padding:0;border:0}
.cl-search.bare .ic{left:12px}

/* avatar plus name */
.who{display:inline-flex;align-items:center;gap:10px;min-width:0}
.who b{font-weight:560}
.who .mut{color:var(--text-3)}

/* skeleton lines */
.sk-lines{display:grid;gap:10px}

/* full-width progress */
.mini.block{display:block;width:100%;margin-right:0}

/* milestones under any stage (StageTrack sets --mi) */
.miles[style*="--mi"]{margin-left:var(--mi)}
@media (max-width:560px){.miles[style*="--mi"]{margin-left:0}}
.m-i .o.prog{border-color:var(--accent)}

/* switch built from a checkbox */
.switch-row:has(> input:checked) .switch{background:var(--accent-soft);border-color:var(--accent-line)}
.switch-row:has(> input:checked) .switch span{transform:translateX(14px);background:var(--accent)}
.switch-row:has(> input:focus-visible) .switch{outline:2px solid var(--focus);outline-offset:2px}

/* menus built on details and summary (open without JS) */
details.menu-wrap > summary{list-style:none;cursor:pointer}
details.menu-wrap > summary::-webkit-details-marker{display:none}
details.menu-wrap[open] > summary.btn-text{color:var(--text);background:var(--bg-2)}

/* one-question flow without JS: every step shows as one long form */
[data-flow]:not(.is-flow) .flow-stage{display:block}
[data-flow]:not(.is-flow) .step-in{padding-block:40px 8px}
[data-flow]:not(.is-flow) .step[data-final]{display:none}
[data-flow]:not(.is-flow) [data-next],[data-flow]:not(.is-flow) [data-skip],[data-flow]:not(.is-flow) [data-back],[data-flow]:not(.is-flow) .enter-hint,[data-flow]:not(.is-flow) .flow-progress,[data-flow]:not(.is-flow) .flow-panel{display:none}
[data-flow]:not(.is-flow) .flow-body{display:block}

/* reduced motion: drawers and sheets fade instead of sliding */
@media (prefers-reduced-motion:reduce){
  .drawer{transform:none;opacity:0;transition:opacity 180ms var(--ease)}
  .drawer.on{opacity:1}
  .shp-over{transform:rotate(45deg)}
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){
  .tri-pane{transform:none;opacity:0;transition:opacity 180ms var(--ease)}
  .show-detail .tri-pane{opacity:1}
}

/* ---------- mobile ---------- */
@media (max-width:600px){
  .wrap{padding-inline:16px}
  .flow-bar{grid-template-columns:auto 1fr auto;padding-inline:12px;gap:8px;height:56px}
  .flow-summary{grid-column:1/-1;grid-row:2;padding:0 4px 8px;font-size:13px}
  .flow-left{grid-column:1;grid-row:1}.flow-close{grid-column:3;grid-row:1}
  .flow-bar:has(.flow-summary:not(:empty)){height:auto;padding-top:10px;row-gap:2px}
  .flow-stage{padding-inline:16px}
  .choices,.contact .fields{grid-template-columns:1fr}
  .app-bar-in{padding-inline:12px;gap:6px}
  .hide-s{display:none!important}
  .field-row{grid-template-columns:1fr}
  .ask .btn .t{display:none}
  .code{gap:6px}
  .code input{height:54px;font-size:22px}
  .miles li{grid-template-columns:16px 1fr}.miles .m-s{grid-column:2;text-align:left;margin-top:-4px}
}