/* Reusable components. Usage notes: design-system/taskman/COMPONENTS.md.
   JS markup helpers for most of these live in js/components.js. */

/* ---------- page header: pageHead(title, crumb, actions, sub) ---------- */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-3) var(--s-5);margin-bottom:var(--s-6)}
.page-head-text{min-width:0;flex:1 1 280px}
.crumb{font-size:var(--t-sm);color:var(--muted);margin-bottom:var(--s-1);font-weight:500}
.page-sub{color:var(--muted);font-size:var(--t-md);margin-top:var(--s-2);max-width:68ch}
.page-head .actions{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.page-head .menu-btn{align-self:flex-start;margin-left:-6px}
.section-head{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-8) 0 var(--s-3)}
.section-head a{margin-left:auto;font-size:var(--t-sm)}

/* ---------- panel (the one surface) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--s-4)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.panel.wide{grid-column:1/-1}
.panel.flush{padding:0;overflow:hidden}
.panel-head{display:flex;align-items:center;gap:var(--s-3);min-height:28px}
.panel-head a{margin-left:auto;font-size:var(--t-sm);font-weight:550}
.banner{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;padding:10px var(--s-4);border-radius:var(--r-md);font-size:var(--t-sm);margin-bottom:var(--s-4);border:1px solid var(--line);background:var(--surface)}
.banner>.grow{flex:1 1 240px}
.banner.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.banner.info{background:var(--info-soft);border-color:transparent;color:var(--info)}

/* ---------- pills & badges ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:600;border-radius:var(--r-pill);padding:2px 9px;white-space:nowrap;line-height:1.4}
.p-warn{background:var(--warn-soft);color:var(--warn)} .p-bad{background:var(--bad-soft);color:var(--bad)}
.p-good{background:var(--good-soft);color:var(--good)} .p-info{background:var(--info-soft);color:var(--info)}
.p-mute{background:var(--sunken);color:var(--muted)} .p-acc{background:var(--accent-soft);color:var(--accent-text)}
/* health: healthPill('on_track'|'at_risk'|'overdue'|'won'|'lost') */
.health{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:650;border-radius:var(--r-pill);padding:2px 10px 2px 8px;white-space:nowrap;line-height:1.4}
.health::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.h-on_track{background:var(--good-soft);color:var(--good)}
.h-at_risk{background:var(--warn-soft);color:var(--warn)}
.h-overdue{background:var(--bad-soft);color:var(--bad)}
.h-won{background:var(--accent-soft);color:var(--accent-text)}
.h-won::before{border-radius:2px;transform:rotate(45deg)}
.h-lost{background:var(--sunken);color:var(--muted)}
.h-lost::before{background:none;border:1.5px solid currentColor;width:5px;height:5px}
/* channel chips: channelChip('sms'|'email'|'voice') */
.chip-ch{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:650;border-radius:var(--r-sm);padding:2px 8px 2px 6px;white-space:nowrap;line-height:1.4}
.chip-ch .ico{width:14px;height:14px}
.ch-sms{background:var(--ch-sms-soft);color:var(--ch-sms)}
.ch-email{background:var(--ch-email-soft);color:var(--ch-email)}
.ch-voice{background:var(--ch-call-soft);color:var(--ch-call)}
.ch-mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);flex:none}
.ch-mark .ico{width:18px;height:18px}

/* ---------- KPI tile + stat strip ---------- */
.kpi{display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi-label{font-size:var(--t-sm);color:var(--muted);font-weight:550}
.kpi-value{font:700 var(--t-kpi)/1.05 var(--f-display);font-variation-settings:"opsz" 96;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi-sub{font-size:var(--t-xs);color:var(--muted)}
.kpi.tone-warn .kpi-value{color:var(--warn)} .kpi.tone-bad .kpi-value{color:var(--bad)}
.kpi.tone-good .kpi-value{color:var(--good)} .kpi.tone-accent .kpi-value{color:var(--accent-text)}
.kpi .meter{margin-top:var(--s-2)}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat-strip>.kpi{padding:var(--s-5);border-left:1px solid var(--line);margin-left:-1px}
.stat-strip>.kpi .kpi-label{order:2;margin-top:var(--s-1)} /* number first: the strip reads as a ledger row */
.stat-strip>.kpi .kpi-sub{order:3}
.stat-strip>.kpi .meter{order:4}

/* ---------- segmented control / tabs ---------- */
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-md);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg>button,.seg>a{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 0 auto;min-height:30px;padding:0 12px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:var(--t-sm);font-weight:550;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.seg>button:hover,.seg>a:hover{color:var(--ink);text-decoration:none}
.seg>[aria-pressed="true"],.seg>[aria-checked="true"],.seg>[aria-selected="true"],.seg>[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line)}
.seg .ico{width:16px;height:16px}
.seg-compact>button{padding:0 8px}
.seg.on-color{background:var(--tint-on-color);border-color:transparent}
.seg.on-color>button{color:var(--on-board)}
.seg.on-color>[aria-pressed="true"]{background:var(--on-board);color:var(--on-board-ink);box-shadow:none}
.seg .n{font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- progress: bar (meter) + ring ---------- */
.meter{position:relative;height:8px;background:var(--sunken);border-radius:var(--r-pill);overflow:hidden;flex:none}
.meter.thin{height:5px}
.meter>i{position:absolute;inset:0;background:var(--accent);border-radius:inherit;transform-origin:left;transform:scaleX(var(--p,0))}
.meter.tone-good>i{background:var(--good)} .meter.tone-warn>i{background:var(--warn)} .meter.tone-bad>i{background:var(--bad)}
.meter>i.ko{background:var(--bad)} /* stacked: draw the larger layer first */
.ring{position:relative;display:inline-grid;place-items:center;width:var(--ring,44px);height:var(--ring,44px);flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.2}
.ring .ring-track{stroke:var(--sunken)}
.ring .ring-fill{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset var(--dur-chart) var(--ease-out)}
.ring.tone-good .ring-fill{stroke:var(--good)} .ring.tone-warn .ring-fill{stroke:var(--warn)} .ring.tone-bad .ring-fill{stroke:var(--bad)}
.ring-label{position:absolute;font-size:var(--t-xs);font-weight:650;font-variant-numeric:tabular-nums}

/* ---------- process flow / stepper ---------- */
.flow-wrap{overflow-x:auto;padding-bottom:var(--s-1)}
.flow{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;min-width:max-content}
.flow-node{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:96px;padding:0 var(--s-2)}
.flow-node::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:var(--line-strong);z-index:0}
.flow-node:first-child::before{display:none}
.flow-dot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line-strong);color:var(--muted);font:650 var(--t-xs) var(--f-body);font-variant-numeric:tabular-nums}
.flow-dot .ico{width:14px;height:14px}
.flow-label{font-size:var(--t-sm);font-weight:550;line-height:1.25;max-width:14ch}
.flow-meta{font-size:var(--t-xs);color:var(--muted)}
.flow-node.is-done::before,.flow-node.is-current::before{background:var(--accent)}
.flow-node.is-done .flow-dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.flow-node.is-current .flow-dot{border-color:var(--accent);color:var(--accent-text);box-shadow:0 0 0 4px var(--accent-soft)}
.flow-node.is-current .flow-label{color:var(--ink);font-weight:650}
.flow-node.is-blocked .flow-dot{border-color:var(--bad);color:var(--bad)}
.flow.vertical{flex-direction:column;align-items:stretch;min-width:0}
.flow.vertical .flow-node{flex-direction:row;text-align:left;align-items:center;gap:var(--s-3);padding:var(--s-2) 0}
.flow.vertical .flow-node::before{top:auto;bottom:50%;right:auto;left:13px;width:2px;height:100%}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl-item{position:relative;display:grid;grid-template-columns:20px 1fr;gap:var(--s-3);padding-bottom:var(--s-4)}
.tl-item::before{content:"";position:absolute;left:9px;top:16px;bottom:0;width:2px;background:var(--line)}
.tl-item:last-child::before{display:none}
.tl-dot{width:12px;height:12px;margin:5px 4px 0;border-radius:50%;background:var(--surface);border:2px solid var(--line-input)}
.tl-item.tone-good .tl-dot{border-color:var(--good);background:var(--good)}
.tl-item.tone-warn .tl-dot{border-color:var(--warn)} .tl-item.tone-bad .tl-dot{border-color:var(--bad);background:var(--bad)}
.tl-item.tone-accent .tl-dot{border-color:var(--accent);background:var(--accent)}
.tl-head{display:flex;gap:var(--s-2);align-items:baseline;flex-wrap:wrap}
.tl-head time{font-size:var(--t-xs);color:var(--muted);margin-left:auto}
.tl-body p{font-size:var(--t-sm);color:var(--muted);margin-top:2px}

/* ---------- list rows ---------- */
.list{display:flex;flex-direction:column}
.li{display:flex;gap:var(--s-3);align-items:center;min-height:48px;padding:var(--s-2) var(--s-2);margin:0 calc(-1 * var(--s-2));border:0;border-top:1px solid var(--line);background:none;text-align:left;width:calc(100% + var(--s-4));color:var(--ink);text-decoration:none;border-radius:0;
  transition:background-color var(--dur-fast) var(--ease-out)}
.li:first-child{border-top-color:transparent}
a.li:hover,button.li:hover{background:var(--sunken);text-decoration:none;border-radius:var(--r-sm)}
a.li:hover+.li,button.li:hover+.li{border-top-color:transparent}
button.li{cursor:pointer}
.li .grow>div:last-child{font-size:var(--t-sm);color:var(--muted)}

/* ---------- empty state ---------- */
.empty,.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-10) var(--s-4);text-align:center;color:var(--muted);font-size:var(--t-sm);border:1px dashed var(--line-strong);border-radius:var(--r-lg)}
.empty-state .empty-ico{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--sunken);color:var(--muted);margin-bottom:var(--s-1)}
.empty-state .empty-ico .ico{width:22px;height:22px}
.empty-state b{color:var(--ink);font:650 var(--t-lg) var(--f-display)}
.empty-state p{max-width:46ch}
.empty-state .btn{margin-top:var(--s-2)}

/* ---------- skeleton (shown only when a load takes > 300ms) ---------- */
.skel{position:relative;overflow:hidden;background:var(--sunken);border-radius:var(--r-sm)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--shimmer),transparent);animation:shimmer 1.3s var(--ease-out) infinite}
.skel-line{height:12px;margin:6px 0}
.skel-title{height:28px;width:min(320px,70%);border-radius:var(--r-sm)}
.skel-block{height:120px;border-radius:var(--r-lg)}
.skeleton-page{display:flex;flex-direction:column;gap:var(--s-4);animation:fade-in var(--dur-base) var(--ease-out)}
@keyframes shimmer{to{transform:translateX(100%)}}
@keyframes fade-in{from{opacity:0}}

/* ---------- data table ---------- */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.table-wrap table{border-collapse:separate;border-spacing:0;width:100%;min-width:720px;font-size:var(--t-sm)}
.table-wrap th,.table-wrap td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.table-wrap th{font-size:var(--t-xs);color:var(--muted);font-weight:650;background:var(--sunken);position:sticky;top:0;z-index:1}
.table-wrap tbody tr{transition:background-color var(--dur-fast) var(--ease-out)}
.table-wrap tbody tr[data-open],.table-wrap tbody tr[data-card],.table-wrap tbody tr[data-href]{cursor:pointer}
.table-wrap tbody tr:hover{background:var(--sunken)}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap td.r,.table-wrap th.r{text-align:right;font-variant-numeric:tabular-nums}
.table-wrap td b{font-weight:600}

/* ---------- modal ---------- */
.modal-wrap{position:fixed;inset:0;z-index:40;display:grid;place-items:start center;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(48px + env(safe-area-inset-top,0px)) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom,0px))}
.modal-wrap.closing,.drawer-wrap.closing{pointer-events:none}
.scrim{position:fixed;inset:0;background:var(--scrim)}
.modal{position:relative;width:min(520px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-3);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4)}
.modal.wide{width:min(860px,100%)}
.modal-head{display:flex;align-items:flex-start;gap:var(--s-3)}
.modal-head .grow h2{overflow-wrap:anywhere}
.modal-head h2{font-size:var(--t-xl)}
.modal-foot{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;padding-top:var(--s-2)}

/* ---------- drawer ---------- */
.drawer-wrap{position:fixed;inset:0;z-index:35}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(500px,100%);background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-3);overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--s-5) + env(safe-area-inset-top,0px)) calc(var(--s-6) + env(safe-area-inset-right,0px)) calc(var(--s-8) + env(safe-area-inset-bottom,0px)) var(--s-6);display:flex;flex-direction:column;gap:var(--s-5)}
.drawer .section{display:flex;flex-direction:column;gap:var(--s-2);padding-top:var(--s-4);border-top:1px solid var(--line)}

/* ---------- key/value ---------- */
.kv{display:grid;grid-template-columns:128px 1fr;gap:10px var(--s-3);font-size:var(--t-sm);align-items:center;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* ---------- feed (comments + events) ---------- */
.feed{display:flex;flex-direction:column;gap:var(--s-3)}
.feed-item{display:flex;gap:10px}
.feed-item .body{min-width:0;flex:1}
.feed-item .who{font-size:var(--t-sm)}
.feed-item .bubble{background:var(--sunken);border-radius:4px var(--r-md) var(--r-md) var(--r-md);padding:8px 12px;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--t-sm)}
.via{font-size:var(--t-xs);color:var(--accent-text);font-weight:600}

/* ---------- toast ---------- */
#toasts{position:fixed;left:50%;bottom:calc(var(--s-5) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--s-2);z-index:60;width:max-content;max-width:calc(100% - 32px);pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--s-2);background:var(--toast-bg);color:var(--toast-ink);padding:10px 16px;border-radius:var(--r-md);font-size:var(--t-sm);font-weight:500;box-shadow:var(--shadow-3);pointer-events:auto}
.toast .ico{width:16px;height:16px}
.toast.bad{background:var(--bad-solid);color:var(--on-board)}

/* ---------- motion plumbing ---------- */
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-base);animation-timing-function:var(--ease-out)}
.vt-theme::view-transition-old(root),.vt-theme::view-transition-new(root){animation-duration:var(--dur-medium)}
.theme-fading,.theme-fading *,.theme-fading *::before,.theme-fading *::after{transition:background-color var(--dur-medium) var(--ease-out),border-color var(--dur-medium) var(--ease-out),color var(--dur-medium) var(--ease-out),fill var(--dur-medium),stroke var(--dur-medium)!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .skel::after{display:none}
}
@media (max-width:760px){
  .kv{grid-template-columns:104px 1fr}
  .modal-wrap{padding-top:calc(var(--s-4) + env(safe-area-inset-top,0px));padding-inline:var(--s-2)}
  .modal{padding:var(--s-5) var(--s-4);border-radius:var(--r-lg)}
  .drawer{padding-inline:var(--s-4)}
  .stat-strip{grid-template-columns:1fr 1fr}
  .stat-strip>.kpi{border-top:1px solid var(--line);margin-top:-1px;padding:var(--s-4)}
  .kpi-value{font-size:1.85rem}
}