/* Viv Product Roadmaps — roadmap page styles (v2)
   Warm-gray neutrals + indigo accent, Inter. Light + dark. */

:root {
  --bg: #FAFAF9; --surface: #FFFFFF; --surface-2: #F5F5F4; --surface-3: #EFEEEC;
  --border: #E7E5E4; --border-2: #DAD8D5;
  --text: #1C1917; --muted: #78716C;
  --accent: #4F46E5; --accent-2: #6366F1; --accent-soft: #EEF2FF;
  --shadow: 0 1px 2px rgba(28,25,23,.06), 0 1px 3px rgba(28,25,23,.04);
  --shadow-lg: 0 12px 32px rgba(28,25,23,.13);
  --radius: 16px; --radius-sm: 11px;
  --ease: cubic-bezier(.16,1,.3,1);
  --pill-planned-bg:#F1F0EE; --pill-planned-fg:#57534E;
  --pill-progress-bg:#FEF3C7; --pill-progress-fg:#B45309;
  --pill-shipped-bg:#D1FAE5; --pill-shipped-fg:#047857;
  --now:#4F46E5; --next:#0EA5E9; --later:#8B7E74; --ship:#10B981;
}
html[data-theme="dark"] {
  --bg:#0C0A09; --surface:#1C1917; --surface-2:#232020; --surface-3:#2B2826;
  --border:#2A2624; --border-2:#3A3633;
  --text:#FAFAF9; --muted:#A8A29E;
  --accent:#818CF8; --accent-2:#A5B4FC; --accent-soft:#1E1B33;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 16px 40px rgba(0,0,0,.55);
  --pill-planned-bg:#2B2826; --pill-planned-fg:#D6D3D1;
  --pill-progress-bg:#3a2606; --pill-progress-fg:#FCD34D;
  --pill-shipped-bg:#04261a; --pill-shipped-fg:#6EE7B7;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:none; margin:0 auto; padding:0 32px; }
.prose { margin-left:auto; margin-right:auto; }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.skip { position:absolute; left:-999px; }
.skip:focus { left:12px; top:12px; background:var(--surface); padding:8px 12px; border-radius:8px; z-index:90; box-shadow:var(--shadow-lg); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* hero */
.hero { background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 5%, var(--surface)), var(--bg)); border-bottom:1px solid var(--border); }
.hero-inner { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:30px 24px 14px; flex-wrap:wrap; }
.eyebrow { margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.hero-text h1 { margin:0; font-size:clamp(24px,3.4vw,38px); font-weight:800; letter-spacing:-.025em; }
.subtitle { margin:8px 0 0; color:var(--muted); font-size:15.5px; max-width:62ch; }
.meta-line { margin:12px 0 0; color:var(--muted); font-size:13px; display:flex; align-items:center; gap:7px; }
.dot-live { width:8px; height:8px; border-radius:50%; background:var(--ship); box-shadow:0 0 0 3px color-mix(in srgb,var(--ship) 25%, transparent); animation:live 2.4s var(--ease) infinite; }
@keyframes live { 0%,100%{opacity:1} 50%{opacity:.45} }
.hero-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.disclaimer { padding:0 24px 16px; color:var(--muted); font-size:12.5px; font-style:italic; }
.banner { background:color-mix(in srgb,var(--accent) 12%, var(--surface)); border-bottom:1px solid color-mix(in srgb,var(--accent) 25%, transparent); }
.banner .wrap { padding:9px 24px; font-size:13px; font-weight:600; color:var(--accent); }

.btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border-2); background:var(--surface); color:var(--text); padding:9px 14px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; transition:transform .12s var(--ease), box-shadow .15s var(--ease), border-color .15s; }
.btn:hover { text-decoration:none; box-shadow:var(--shadow); transform:translateY(-1px); border-color:var(--accent); }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 35%, transparent); }
.btn-icon { padding:9px 11px; font-size:16px; line-height:1; }
.btn-note { font-weight:500; opacity:.85; }

/* toolbar */
.toolbar { display:flex; align-items:flex-start; gap:18px; padding:16px 24px 4px; flex-wrap:wrap; }
.views { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:3px; gap:2px; }
.view-btn { border:0; background:transparent; color:var(--muted); font:inherit; font-weight:600; font-size:13.5px; padding:7px 14px; border-radius:8px; cursor:pointer; transition:background .15s, color .15s; }
.view-btn.is-active { background:var(--surface); color:var(--text); box-shadow:var(--shadow); }

/* filters — compact multiselect dropdowns */
.filters { display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; flex:1; }
.facet-row { display:flex; gap:8px; flex-wrap:wrap; }
.dd { position:relative; }
.dd-btn { list-style:none; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border-2); background:var(--surface); color:var(--text); padding:8px 12px; border-radius:10px; font-size:13.5px; font-weight:600; cursor:pointer; user-select:none; transition:border-color .15s, background .15s; }
.dd-btn::-webkit-details-marker { display:none; }
.dd-btn:hover { border-color:var(--accent); }
.dd[open] .dd-btn { border-color:var(--accent); background:var(--accent-soft); }
.dd.has-active .dd-btn { border-color:var(--accent); color:var(--accent); }
.dd-caret { font-size:9px; color:var(--muted); transition:transform .18s var(--ease); }
.dd[open] .dd-caret { transform:rotate(180deg); }
.dd-count { background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; border-radius:999px; padding:0 6px; min-width:17px; text-align:center; }
.dd-panel { position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:215px; max-height:340px; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; display:flex; flex-direction:column; gap:1px; }
.fchip { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0; background:transparent; color:var(--text); padding:8px 10px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; transition:background .12s; }
.fchip:hover { background:var(--surface-2); }
.fchip::before { content:''; width:16px; height:16px; flex:0 0 auto; border:1.5px solid var(--border-2); border-radius:5px; display:grid; place-items:center; font-size:11px; line-height:1; color:#fff; }
.fchip[aria-checked="true"]::before { content:'✓'; background:var(--accent); border-color:var(--accent); }
.fchip[aria-checked="true"] { color:var(--accent); font-weight:600; }
.fchip .dot-none { display:none; }
.fchip-l { flex:1; white-space:nowrap; }
.fchip-n { font-size:10.5px; font-weight:700; color:var(--muted); background:var(--surface-2); border-radius:999px; padding:0 7px; }
.clear-btn { border:1px dashed var(--border-2); background:transparent; color:var(--muted); font:inherit; font-weight:600; font-size:12.5px; padding:6px 11px; border-radius:999px; cursor:pointer; }
.clear-btn:hover { color:var(--accent); border-color:var(--accent); }
.result-count { font-size:12.5px; color:var(--muted); font-weight:500; }

/* board */
.board { display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:16px; padding:18px 0 8px; align-items:start; }
.col { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
.col-shipped { background:color-mix(in srgb,var(--ship) 5%, var(--surface-2)); }
.col-head { position:sticky; top:0; z-index:5; background:inherit; padding:6px 4px 12px; border-bottom:2px solid transparent; }
.col-now .col-head { border-color:var(--now); } .col-next .col-head { border-color:var(--next); } .col-later .col-head { border-color:var(--later); } .col-shipped .col-head { border-color:var(--ship); }
.col-head h3 { margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.col-count { font-size:11.5px; font-weight:700; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:1px 9px; }
.col-blurb { margin:5px 0 0; color:var(--muted); font-size:12.5px; }
.col-body { display:flex; flex-direction:column; gap:12px; padding-top:12px; }
.empty { color:var(--muted); font-size:13px; font-style:italic; padding:10px 4px; text-align:center; }

/* milestone group */
.ms { border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.ms[hidden]{ display:none; }
.ms-head { list-style:none; display:flex; align-items:center; gap:11px; padding:11px 13px; cursor:pointer; user-select:none; background:var(--surface-3); transition:background .15s; }
.ms-head::-webkit-details-marker { display:none; }
.ms-head:hover { background:color-mix(in srgb,var(--accent) 9%, var(--surface-3)); }
.ms-caret { flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center; color:var(--muted); border-radius:6px; transition:transform .18s var(--ease), background .15s, color .15s; }
.ms[open] .ms-caret { transform:rotate(90deg); }
.ms-head:hover .ms-caret { color:var(--accent); background:color-mix(in srgb,var(--accent) 15%, transparent); }
.ms-htext { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.ms-row1 { display:flex; align-items:center; gap:8px; min-width:0; }
.ms-name { display:inline-flex; align-items:center; gap:7px; min-width:0; flex:1; }
.ms-key { flex:0 0 auto; font-size:11px; font-weight:800; color:var(--accent); background:var(--accent-soft); border-radius:6px; padding:1px 7px; letter-spacing:.02em; }
.ms-label { font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
a.ms-name:hover .ms-label { color:var(--accent); }
.ms-count { flex:0 0 auto; font-size:10.5px; font-weight:700; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:0 8px; }
.ms-row2 { display:flex; align-items:center; gap:10px; }
.ms-target { flex:0 0 auto; font-size:10.5px; font-weight:700; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:1px 8px; }
.ms-prog { margin-left:auto; display:flex; align-items:center; gap:7px; }
.ms-body { display:flex; flex-direction:column; gap:9px; padding:11px; border-top:1px solid var(--border); }

/* card */
.card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 12px 10px 15px; box-shadow:var(--shadow); cursor:pointer; overflow:hidden; transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s; }
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--accent) 35%, var(--border)); }
.card:active { transform:translateY(0); transition-duration:.07s; }
.card[hidden]{ display:none; }
.prio { position:absolute; left:0; top:0; bottom:0; width:4px; }
.prio-1{ background:#EF4444; } .prio-2{ background:#F59E0B; } .prio-3{ background:#A8A29E; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card-title { margin:0; font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.35; }
.card-why { margin:6px 0 0; color:var(--text); font-size:12.5px; line-height:1.45; font-weight:500; }
.card-desc { margin:6px 0 0; color:var(--muted); font-size:12.5px; line-height:1.45; }
.card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; flex-wrap:wrap; }
.card-tags { display:flex; gap:6px; flex-wrap:wrap; }
.card-meta { display:flex; align-items:center; gap:9px; }
.meta-target { color:var(--muted); font-size:11.5px; font-weight:600; }
.sub-n { color:var(--muted); font-size:11px; font-weight:600; }
.card-issue { display:inline-block; margin-top:9px; font-size:11px; font-weight:600; color:var(--muted); }
.card-issue:hover { color:var(--accent); }

/* chips / pills / progress */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; border:1px solid; white-space:nowrap; }
.chip-soft { background:color-mix(in srgb,var(--chip) 13%, transparent); color:var(--chip); border-color:color-mix(in srgb,var(--chip) 30%, transparent); }
html[data-theme="dark"] .chip-soft { color:color-mix(in srgb,var(--chip) 78%, white); }
.pill { font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.pill-planned{ background:var(--pill-planned-bg); color:var(--pill-planned-fg);} .pill-progress{ background:var(--pill-progress-bg); color:var(--pill-progress-fg);} .pill-shipped{ background:var(--pill-shipped-bg); color:var(--pill-shipped-fg);}
.env { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:3px 9px; border-radius:7px; color:var(--env); background:color-mix(in srgb,var(--env) 15%, transparent); border:1px solid color-mix(in srgb,var(--env) 35%, transparent); }
a.env:hover { background:color-mix(in srgb,var(--env) 24%, transparent); text-decoration:none; }
.env-dot { width:7px; height:7px; border-radius:50%; }
html[data-theme="dark"] .env { color:color-mix(in srgb,var(--env) 80%, white); }
.prog { display:inline-flex; align-items:center; gap:6px; }
.prog-bar { width:46px; height:5px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.prog-bar > span { display:block; height:100%; background:var(--accent); border-radius:999px; }
.ms-prog .prog-bar { width:54px; }
.prog-n { font-size:10.5px; font-weight:700; color:var(--muted); }

/* timeline */
.timeline { padding:18px 0 8px; }
.timeline[hidden]{ display:none; }
.tl-grid { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.tl-head { display:grid; background:var(--surface-2); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:4; }
.tl-q { padding:11px 12px; font-size:12px; font-weight:700; color:var(--muted); border-left:1px solid var(--border); position:relative; }
.tl-q.is-now { color:var(--accent); }
.tl-nowtag { font-size:9px; text-transform:uppercase; letter-spacing:.1em; margin-left:6px; background:var(--accent); color:#fff; padding:1px 5px; border-radius:5px; }
.tl-lane { display:grid; grid-template-columns:170px 1fr; border-top:1px solid var(--border); }
.tl-lane:first-of-type { border-top:0; }
.tl-lane-label { display:flex; align-items:center; gap:8px; padding:12px 14px; font-size:13px; font-weight:700; border-right:1px solid var(--border); background:var(--surface-2); }
.tl-track { position:relative; display:grid; grid-auto-rows:minmax(34px,auto); gap:6px; padding:10px 0; align-content:start; }
.tl-cell { grid-row:1; border-left:1px solid var(--border); }
.tl-cell.is-now { background:color-mix(in srgb,var(--accent) 5%, transparent); }
.tl-bar { display:flex; align-items:center; gap:8px; height:30px; margin:0 6px; padding:0 11px; border-radius:8px; color:#fff; font-size:12px; font-weight:600; overflow:hidden; position:relative; background:var(--bar); box-shadow:var(--shadow); transition:transform .14s var(--ease), box-shadow .14s; text-decoration:none; min-width:0; }
.tl-bar:hover { transform:translateY(-1px); box-shadow:var(--shadow-lg); text-decoration:none; }
.tl-bar[hidden]{ display:none; }
.tl-bar-t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-bar-p { position:absolute; left:0; bottom:0; height:3px; background:rgba(255,255,255,.85); }
.tl-h-later { opacity:.82; }
.tl-note { margin:12px 2px 0; color:var(--muted); font-size:12px; }

/* shipped */
.shipped { margin:28px 0 8px; background:linear-gradient(135deg, color-mix(in srgb,var(--ship) 7%, var(--surface-2)), var(--surface-2)); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; }
.shipped h3 { margin:0 0 13px; font-size:16px; font-weight:800; display:flex; align-items:center; gap:8px; }
.ship-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; }
.ship-card { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13px; color:var(--text); transition:transform .12s var(--ease), box-shadow .12s; }
.ship-card:hover { transform:translateY(-1px); box-shadow:var(--shadow); text-decoration:none; }
.ship-check { width:20px; height:20px; flex:0 0 auto; display:grid; place-items:center; background:var(--ship); color:#fff; border-radius:50%; font-size:11px; font-weight:800; }
.ship-t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* drawer */
.drawer-scrim { position:fixed; inset:0; background:rgba(12,10,9,.42); backdrop-filter:blur(2px); z-index:60; opacity:0; transition:opacity .25s var(--ease); }
.drawer-scrim.show { opacity:1; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(460px,94vw); background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-lg); z-index:70; transform:translateX(100%); transition:transform .3s var(--ease); overflow-y:auto; overflow-x:hidden; overflow-wrap:anywhere; }
.drawer.show { transform:translateX(0); }
.drawer-close { position:absolute; top:14px; right:14px; border:1px solid var(--border); background:var(--surface); color:var(--text); width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:14px; }
.drawer-close:hover { border-color:var(--accent); color:var(--accent); }
.drawer-body { padding:26px 24px 40px; }
.dw-eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); }
.dw-title { margin:6px 0 0; font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.dw-tags { display:flex; gap:7px; flex-wrap:wrap; margin:14px 0; }
.dw-why { background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 22%, transparent); border-radius:10px; padding:11px 13px; font-size:13.5px; font-weight:500; }
.dw-why b { color:var(--accent); }
.dw-desc { color:var(--text); font-size:14px; line-height:1.55; margin:14px 0; }
.dw-section-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:20px 0 9px; }
.dw-subs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.dw-subs li { display:flex; align-items:center; gap:9px; font-size:13.5px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }
.dw-subs li.done { color:var(--muted); }
.dw-subs li.done .dw-box { background:var(--ship); border-color:var(--ship); color:#fff; }
.dw-box { width:17px; height:17px; flex:0 0 auto; border:1.5px solid var(--border-2); border-radius:5px; display:grid; place-items:center; font-size:10px; }
.dw-sub-t { flex:1; }
.dw-sub-t a { color:inherit; }
.dw-meta { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:16px 0; font-size:13px; }
.dw-meta dt { color:var(--muted); font-weight:600; }
.dw-meta dd { margin:0; }
.dw-links { display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.dw-links a { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--border); border-radius:9px; padding:10px 13px; font-size:13.5px; font-weight:600; background:var(--surface-2); }
.dw-links a:hover { border-color:var(--accent); text-decoration:none; }

/* footer + prose */
.site-foot { border-top:1px solid var(--border); margin-top:38px; background:var(--surface); }
.foot-inner { padding:22px 24px; color:var(--muted); font-size:13px; }
.foot-inner p { margin:2px 0; }
.muted { color:var(--muted); }
.prose { max-width:760px; padding-top:30px; padding-bottom:24px; }
.prose h2 { margin-top:32px; font-size:22px; letter-spacing:-.02em; }
.prose h3 { margin-top:22px; font-size:17px; }
.prose p, .prose li { font-size:15.5px; }
.prose li { margin:5px 0; }
.prose code { background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:1px 6px; font-size:13px; }
.prose hr { border:none; border-top:1px solid var(--border); margin:28px 0; }

/* responsive */
@media (max-width:1000px){ .board{ grid-template-columns:1fr; } .col-head{ position:static; } .tl-lane{ grid-template-columns:120px 1fr; } }
@media (max-width:680px){
  .hero-inner{ flex-direction:column; align-items:flex-start; }
  .toolbar{ flex-direction:column; }
  .drawer{ width:100vw; border-left:0; border-radius:18px 18px 0 0; top:auto; height:88vh; transform:translateY(100%); }
  .drawer.show{ transform:translateY(0); }
  .tl-grid{ overflow-x:auto; } .tl-head, .tl-track{ min-width:560px; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}