/* Tokens, reset, chrome: header, hero, sub-nav, toolbar.
   Owned by the visual-refinement workstream. */
:root{
  color-scheme: dark;
  /* palette */
  --bg: oklch(0.17 0.012 255);
  --bg-2: oklch(0.20 0.013 255);
  --surface: oklch(0.216 0.015 255);
  --surface-2: oklch(0.255 0.017 255);
  --hair: oklch(1 0 0 / 0.075);
  --hair-strong: oklch(1 0 0 / 0.14);
  --ink: oklch(0.965 0.004 255);
  --ink-2: oklch(0.74 0.012 255);
  --ink-3: oklch(0.58 0.014 255);
  --accent: oklch(0.72 0.12 245);
  --accent-soft: oklch(0.72 0.12 245 / .14);
  --accent-ink: oklch(0.20 0.02 245);
  --danger: oklch(0.70 0.17 25);
  --ok: oklch(0.78 0.15 150);
  /* depth: calmer than before, cards get a single hairline shadow */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / .22);
  --shadow: 0 1px 2px oklch(0 0 0 / .22), 0 1px 0 oklch(1 0 0 / .02) inset;
  --shadow-lift: 0 1px 0 oklch(1 0 0 / .04) inset, 0 6px 18px oklch(0 0 0 / .32), 0 28px 60px oklch(0 0 0 / .34);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px oklch(0.72 0.12 245 / .55);
  /* category signal colours */
  --c-realisation: oklch(0.72 0.13 245);
  --c-question:    oklch(0.72 0.15 300);
  --c-excitement:  oklch(0.81 0.13 78);
  --c-wow:         oklch(0.79 0.12 178);
  --c-meta:        oklch(0.76 0.14 350);
  --c-own:         oklch(0.75 0.09 210);
  --c-repost:      oklch(0.70 0.018 255);
  /* type scale (base 14) */
  --fs-xxs: 10.5px;
  --fs-xs:  11.5px;
  --fs-sm:  12.5px;
  --fs-base:13.5px;
  --fs-body:14.5px;
  --fs-md:  15.5px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 26px;
  --lh-tight: 1.18;
  --lh-snug:  1.35;
  --lh-base:  1.5;
  --lh-read:  1.62;
  --ls-tighter: -0.022em;
  --ls-tight:   -0.012em;
  --ls-wide:     0.06em;
  /* spacing (4px grid) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px;  --sp-8: 32px;
  /* radii */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:
    radial-gradient(1200px 700px at 82% -8%, oklch(0.30 0.05 250 / .28), transparent 62%),
    var(--bg);
  color:var(--ink); font-family:var(--font); font-size:14px; line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased; letter-spacing:.003em;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:oklch(0.72 0.12 245 / .32); color:var(--ink)}
.wrap{max-width:1160px; margin:0 auto; padding:0 var(--sp-5)}
[hidden]{display:none !important}

/* ---------- focus states ---------- */
:focus{outline:none}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible,
label:focus-visible{
  outline:none; box-shadow: var(--ring);
}
/* elements with existing box-shadow need a compound ring */
.ptab:focus-visible, .rl:focus-visible, .chip-draft:focus-visible,
.cal .cell:focus-visible, .fm-opt:focus-visible, .stat:focus-visible{
  outline:none; box-shadow: var(--ring);
}

/* ---------- motion ---------- */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- header ---------- */
header.top{position:sticky; top:0; z-index:40;
  background:oklch(0.17 0.012 255 / .85); backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--hair)}
.top .wrap{display:flex; align-items:center; gap:var(--sp-4); height:60px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:var(--ls-tight); font-size:var(--fs-md)}
.logo .mark{width:30px; height:30px; border-radius:7px; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-weight:800; font-size:var(--fs-lg)}
.logo small{display:block; font-weight:500; font-size:var(--fs-xs); color:var(--ink-3); letter-spacing:.02em; margin-top:-2px}
.spacer{flex:1}
.who{display:flex; align-items:center; gap:10px}
.who .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;
  background:linear-gradient(150deg, oklch(0.62 0.13 245), oklch(0.55 0.15 275)); color:white}
.who .meta{line-height:var(--lh-snug)}
.who .meta b{font-size:13px; font-weight:600}
.who .meta span{display:block; font-size:11px; color:var(--ink-3)}
.authbtn{appearance:none; border:1px solid var(--hair); background:var(--surface); color:var(--ink-2);
  font:inherit; font-size:var(--fs-sm); font-weight:600; padding:6px 12px; border-radius:var(--radius-sm); cursor:pointer;
  transition:border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease)}
.authbtn:hover{border-color:var(--hair-strong); color:var(--ink); background:var(--surface-2)}

/* ---------- hero / stat strip ---------- */
.hero{padding:var(--sp-7) 0 var(--sp-1)}
.hero h1{margin:0 0 6px; font-size:var(--fs-2xl); line-height:var(--lh-tight);
  letter-spacing:var(--ls-tighter); font-weight:700}
.hero p{margin:0; color:var(--ink-2); max-width:64ch; font-size:var(--fs-body); line-height:var(--lh-base)}
.stats{display:flex; flex-wrap:wrap; gap:10px; margin:var(--sp-5) 0 var(--sp-1)}
.stat{background:var(--surface); border:1px solid var(--hair); border-radius:10px;
  padding:12px 16px; min-width:108px; display:flex; flex-direction:column; gap:3px;
  transition:border-color .16s var(--ease), background .16s var(--ease)}
.stat:hover{border-color:var(--hair-strong)}
.stat b{font-size:var(--fs-xl); letter-spacing:var(--ls-tight); font-variant-numeric:tabular-nums;
  line-height:var(--lh-tight); font-weight:700}
.stat span{font-size:var(--fs-xxs); color:var(--ink-3); text-transform:uppercase;
  letter-spacing:var(--ls-wide); font-weight:600}
.stat.next b{color:var(--accent)}

/* ---------- sub-nav: primary tabs + toolbar ---------- */
.subnav{position:sticky; top:60px; z-index:30; background:oklch(0.17 0.012 255 / .88);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--hair); margin-top:var(--sp-5)}
.subnav .wrap{display:flex; flex-direction:column}
.tabbar{display:flex; align-items:center; gap:6px; padding:10px 0}
.ptab{appearance:none; border:1px solid transparent; background:transparent; color:var(--ink-2);
  font:inherit; font-weight:600; font-size:var(--fs-body); padding:8px 14px; border-radius:9px; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; letter-spacing:var(--ls-tight);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease)}
.ptab:hover{color:var(--ink); background:var(--surface)}
.ptab[aria-selected="true"]{background:var(--surface-2); color:var(--ink); border-color:var(--hair)}
.ptab .n{font-variant-numeric:tabular-nums; font-size:var(--fs-xs); color:var(--ink-3); font-weight:700;
  background:var(--bg-2); border:1px solid var(--hair); border-radius:999px;
  padding:1px 8px; min-width:20px; text-align:center; letter-spacing:0}
.ptab[aria-selected="true"] .n{color:var(--accent); border-color:oklch(0.72 0.12 245 / .32)}
.tabbar .grow{flex:1}
.toolrow{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:0 0 11px;
  animation:fadeUp .24s var(--ease)}
.seg{display:inline-flex; background:var(--bg-2); border:1px solid var(--hair); border-radius:9px; padding:3px}
.seg button{appearance:none; border:0; background:transparent; color:var(--ink-2);
  font:inherit; font-weight:600; font-size:var(--fs-base); padding:6px 13px; border-radius:6px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:background .18s var(--ease), color .18s var(--ease)}
.seg button svg{width:15px;height:15px}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected="true"]{background:var(--surface-2); color:var(--ink)}

/* filter dropdown (checkbox menu) */
.filter{position:relative}
.filter-btn{appearance:none; border:1px solid var(--hair); background:var(--surface); color:var(--ink);
  font:inherit; font-size:var(--fs-base); font-weight:600; padding:8px 13px; border-radius:9px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; transition:border-color .16s var(--ease), background .16s var(--ease)}
.filter-btn:hover{border-color:var(--hair-strong); background:var(--surface-2)}
.filter-btn.active{border-color:oklch(0.72 0.12 245 / .5); background:var(--accent-soft); color:var(--ink)}
.filter-btn svg{width:15px;height:15px;opacity:.85}
.filter-btn .chev{width:13px;height:13px;opacity:.7; transition:transform .18s var(--ease)}
.filter[data-open="true"] .chev{transform:rotate(180deg)}
.filtermenu{position:absolute; top:calc(100% + 6px); left:0; z-index:50; min-width:236px;
  background:var(--bg-2); border:1px solid var(--hair-strong); border-radius:12px; box-shadow:var(--shadow-lift);
  padding:7px; display:none}
.filter[data-open="true"] .filtermenu{display:block; animation:fadeUp .16s var(--ease)}
.fm-h{font-size:var(--fs-xxs); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--ink-3);
  font-weight:700; padding:8px 8px 4px}
.fm-opt{display:flex; align-items:center; gap:11px; padding:7px 8px; border-radius:8px; cursor:pointer; user-select:none;
  transition:background .12s var(--ease)}
.fm-opt:hover{background:var(--surface)}
.fm-opt input{appearance:none; width:17px; height:17px; border:1.5px solid var(--hair-strong); border-radius:5px;
  cursor:pointer; position:relative; flex:none; background:var(--bg);
  transition:background .12s var(--ease), border-color .12s var(--ease)}
.fm-opt input:checked{background:var(--accent); border-color:var(--accent)}
.fm-opt input:checked::after{content:""; position:absolute; left:5px; top:1.5px; width:4px; height:8px;
  border:solid var(--accent-ink); border-width:0 2px 2px 0; transform:rotate(45deg)}
.fm-opt .lbl{flex:1; font-size:var(--fs-base); font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px}
.fm-opt .lbl .dot{width:8px;height:8px;border-radius:50%}
.fm-opt .c{font-size:var(--fs-xs); color:var(--ink-3); font-variant-numeric:tabular-nums}
.fm-sep{height:1px; background:var(--hair); margin:5px 4px}
.fm-foot{display:flex; justify-content:space-between; align-items:center; padding:8px 8px 3px; margin-top:2px}
.fm-foot .c{font-size:var(--fs-xs); color:var(--ink-3)}
.fm-clear{appearance:none; border:0; background:none; color:var(--accent); font:inherit;
  font-size:var(--fs-sm); font-weight:700; cursor:pointer}
.fm-clear:disabled{color:var(--ink-3); cursor:default}
.grow{flex:1}
.ctl{display:flex; align-items:center; gap:8px}
.ctl select, .ctl input{background:var(--surface); border:1px solid var(--hair); color:var(--ink);
  font:inherit; font-size:var(--fs-base); border-radius:8px; padding:7px 10px;
  transition:border-color .16s var(--ease), background .16s var(--ease)}
.ctl input{width:170px}
.ctl input::placeholder{color:var(--ink-3)}
.ctl select:hover, .ctl input:hover{border-color:var(--hair-strong)}
.ctl select:focus, .ctl input:focus{outline:none; border-color:var(--accent); background:var(--bg-2)}

main{padding:var(--sp-6) 0 80px; min-height:60vh}
main > .view{animation:fadeUp .28s var(--ease)}

/* ---------- empty + loading states ---------- */
.empty-note{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; color:var(--ink-2);
  padding:76px 20px 64px; font-size:var(--fs-body); line-height:var(--lh-snug);
  animation:fade .3s var(--ease);
}
.empty-note::before{
  content:""; width:44px; height:44px; border-radius:12px;
  background:
    radial-gradient(circle at 50% 50%, var(--hair-strong) 0 3px, transparent 4.5px),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px dashed var(--hair-strong);
}

.loading{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; color:var(--ink-3);
  padding:88px 20px 72px; font-size:var(--fs-body);
  animation:fade .2s var(--ease);
}
.loading::before{
  content:""; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--hair); border-top-color:var(--accent);
  animation:spin .9s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .loading::before{animation:none !important; border-top-color:var(--accent)}
}

.footer-note{color:var(--ink-3); font-size:var(--fs-sm); text-align:center;
  padding:26px 0 10px; border-top:1px solid var(--hair); margin-top:var(--sp-8)}

@media (max-width:720px){
  .ctl input{width:130px}
  .hero{padding-top:var(--sp-5)}
  .hero h1{font-size:22px}
  .subnav{margin-top:var(--sp-4)}
}