/* ==========================================================================
   KWETTER — design tokens
   Direction: Dutch functionalist / civic signage. Systematic grid, hairlines,
   mono for machine data, colour that encodes meaning rather than decorates.
   - cobalt  = structure & interaction
   - signal  = time & ephemerality (TTL, expiry, urgency)
   - tint    = per-space identity colour (a real product feature)
   ========================================================================== */

@font-face{
  font-family:"Inter";
  src:url("../fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:optional;
}
@font-face{
  font-family:"Silkscreen";
  src:url("../fonts/Silkscreen-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:optional;
}
@font-face{
  font-family:"Silkscreen";
  src:url("../fonts/Silkscreen-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:optional;
}

:root{
  /* Spectrum system: five distinct hues, hard edges, black anchor, bone ground.
     Multi-hue rather than a single ramp, so spaces stay tellable apart. */
  --spec-1:#C2E800;   /* lime       */
  --spec-2:#00BFA0;   /* teal       */
  --spec-3:#2B2BF5;   /* ultramarine*/
  --spec-4:#8A2BF5;   /* violet     */
  --spec-5:#D6006E;   /* magenta    */
  --spec-6:#0091C4;   /* cyan       */

  --ink:#0B0B0C;
  --ink-2:#51525A;
  --ink-3:#86878F;
  --paper:#EFEFE9;
  --surface:#FFFFFF;
  --line:#DEDED7;
  --line-2:#EAEAE4;
  --cobalt:#2B2BF5;          /* interactive text, links, active states */
  --cobalt-soft:#EAEAFE;
  --signal:#D6006E;          /* time / expiry */
  --signal-soft:#FDE8F2;
  --pine:#0B0B0C;            /* verified / official */
  --pine-soft:#EFEFE9;
  --lime:#C2E800;            /* primary action surface, ink text on top */

  /* ---- SPACING: 2px sub-unit, 4px base. Use these, never a literal px. ---- */
  --sp-2:2px;   --sp-4:4px;   --sp-6:6px;   --sp-8:8px;
  --sp-10:10px; --sp-12:12px; --sp-14:14px; --sp-16:16px;
  --sp-20:20px; --sp-24:24px; --sp-32:32px; --sp-40:40px;

  /* ---- TYPE: 7 text steps + 2 pixel-font steps ---- */
  --fs-8:8px;    /* pixel eyebrow, micro   */
  --fs-9:9px;    /* pixel eyebrow          */
  --fs-11:11px;  /* meta, counters         */
  --fs-12:12px;  /* secondary, captions    */
  --fs-13:13px;  /* UI labels, chips       */
  --fs-15:15px;  /* body, post text        */
  --fs-19:19px;  /* section heading        */
  --fs-21:21px;  /* wordmark               */
  --fs-25:25px;  /* page title             */
  --fs-30:30px;  /* display                */

  --lh-tight:1.3; --lh-snug:1.4; --lh-normal:1.5; --lh-loose:1.9;
  --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ---- RADIUS ---- */
  --r-xs:2px; --r-sm:4px; --r-md:8px; --r-pill:999px;

  /* ---- COMPONENT ---- */
  --bar-h:62px;          /* mobile tab bar */
  --mobile-brand-h:0px;  /* filled at the phone breakpoint */
  --sticky-chrome:4.5rem; /* sticky page topbar; + brand below 620px */
  --rail-l:264px;
  --rail-r:332px;

  --radius:var(--r-sm);
  --radius-s:var(--r-xs);
  --font-d:"Inter",-apple-system,sans-serif;
  --font-b:"Inter",-apple-system,"Segoe UI",sans-serif;
  --font-m:"Inter",-apple-system,sans-serif;
  --font-p:"Silkscreen","Inter",monospace;
  --tint:#2B2BF5;
}
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scrollbar-width:none;-ms-overflow-style:none;
  scroll-padding-top:var(--sticky-chrome);
  -webkit-tap-highlight-color:transparent;
}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-b);font-size:var(--fs-15);line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:var(--r-xs)}
svg{display:block}
.icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icon.sm{width:16px;height:16px;stroke-width:2}
.icon.xs{width:13px;height:13px;stroke-width:2.2}
.mono{font-family:var(--font-p);font-size:var(--fs-9);letter-spacing:.03em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- utilities: the ONLY sanctioned spacing in markup ---------- */
.u-flush{margin-bottom:0}
.u-mt-8{margin-top:var(--sp-8)}
.u-mb-14{margin-bottom:var(--sp-14)}
.u-pt-6{padding-top:var(--sp-6)}
.u-pt-12{padding-top:var(--sp-12)}
.u-grow{flex:1}
.u-mid{vertical-align:middle}
.u-pb-12{padding-bottom:var(--sp-12)}
.u-mb-6{margin-bottom:var(--sp-6)}
.feed-end{padding:var(--sp-24) var(--sp-16) var(--sp-40);text-align:center}
.tabs-framed{padding:var(--sp-6) var(--sp-12) 0;border-bottom:1px solid var(--line)}
.note-end{margin:var(--sp-14) 0 var(--sp-40)}

/* ---------- app shell ---------- */
.app{
  display:grid;
  grid-template-columns:var(--rail-l) minmax(0,608px) var(--rail-r);
  justify-content:center;gap:0;align-items:start;
}
.rail-l,.rail-r{
  position:sticky;top:0;height:100vh;overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail-l::-webkit-scrollbar,.rail-r::-webkit-scrollbar{width:0;height:0;display:none}
.rail-l{
  border-right:1px solid var(--line);padding:var(--sp-14) var(--sp-14) var(--sp-14);background:var(--paper);
  display:flex;flex-direction:column;overflow:hidden;
}
.rail-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail-scroll::-webkit-scrollbar{width:0;height:0;display:none}
.rail-bottom{flex:0 0 auto;padding-top:var(--sp-12)}
.rail-r{border-left:1px solid var(--line);padding:var(--sp-14) var(--sp-16) var(--sp-40)}
.center{min-height:100vh;background:var(--surface);border-right:1px solid var(--line)}


/* ---------- wordmark ---------- */
.brand{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-8) var(--sp-16)}
/* hard-edged five-step spectrum band: the one repeated brand device */
.spectrum{
  height:6px;width:100%;flex:none;
  background:linear-gradient(90deg,
    var(--spec-1) 0 20%, var(--spec-2) 0 40%, var(--spec-3) 0 60%,
    var(--spec-4) 0 80%, var(--spec-5) 0 100%);
}
.brand-mark{width:26px;height:26px;flex:none;display:grid;place-items:center}
.brand-mark img,.brand-mark svg{width:26px;height:26px;display:block}
.brand-name{font-family:var(--font-d);font-weight:var(--fw-bold);font-size:var(--fs-21);letter-spacing:-.05em;line-height:1}

/* ---------- nav ---------- */
.nav{display:flex;flex-direction:column;gap:var(--sp-2)}
.nav-item{
  display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-8) var(--sp-10);border-radius:var(--radius-s);
  color:var(--ink-2);font-weight:var(--fw-medium);width:100%;text-align:left;transition:background .12s;
  text-decoration:none;box-sizing:border-box;
}
.nav-item:hover{background:#E7E5DE}
.nav-item.is-active{background:var(--ink);color:#fff;font-weight:var(--fw-semibold)}
.nav-item .icon{flex:none}
.nav-count{
  margin-left:auto;font-size:var(--fs-11);background:var(--signal);color:#fff;
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-xs);font-weight:var(--fw-bold);
}
.nav-item.is-active .nav-count{background:#fff;color:var(--ink)}

.rail-head{
  padding:var(--sp-20) var(--sp-10) var(--sp-8);
}
.rail-head a{
  font-family:var(--font-p);font-size:var(--fs-9);letter-spacing:.06em;color:var(--ink-3);
  text-transform:uppercase;text-decoration:none;
}
.rail-head a:hover,.rail-head a[aria-current="page"]{text-decoration:underline}

/* ---------- space list ---------- */
.space-item{
  display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-6) var(--sp-10);border-radius:var(--radius-s);
  width:100%;text-align:left;transition:background .12s;
  text-decoration:none;color:inherit;box-sizing:border-box;
}
.space-item:hover{background:#E7E5DE}
.space-item.is-active{background:#E7E5DE}
.space-dot{width:9px;height:9px;border-radius:0;flex:none;background:var(--tint)}
.space-item-name{font-size:var(--fs-15);font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.space-item-meta{margin-left:auto;display:flex;align-items:center;gap:var(--sp-4);color:var(--ink-3)}
.unread{width:6px;height:6px;border-radius:var(--r-pill);background:var(--cobalt)}

.new-space{
  margin-top:var(--sp-10);width:100%;border:1px dashed var(--line);border-radius:var(--radius-s);
  padding:var(--sp-8);display:flex;align-items:center;justify-content:center;gap:var(--sp-6);
  color:var(--ink-2);font-size:var(--fs-13);font-weight:var(--fw-medium);text-decoration:none;box-sizing:border-box;
}
.new-space:hover{border-color:var(--ink-3);color:var(--ink)}
.btn.compose-cta{
  margin-bottom:var(--sp-14);width:100%;display:flex;align-items:center;justify-content:center;gap:var(--sp-8);
  background:var(--lime);color:var(--ink);padding:var(--sp-10);font-size:var(--fs-15);font-weight:var(--fw-bold);
}
.btn.compose-cta .icon{stroke-width:2.2}

/* ---------- identity chip (bottom of left rail) ---------- */
.me{
  display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
}
.me-main{display:flex;align-items:center;gap:var(--sp-10);flex:1;min-width:0;color:inherit;text-decoration:none}
.me-main:hover .me-name{color:var(--cobalt)}
.me-body{min-width:0;flex:1}
.me-name{font-size:var(--fs-13);font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-handle{font-size:var(--fs-12);color:var(--ink-3)}

/* ---------- avatars ---------- */
.av{
  border-radius:var(--r-xs);flex:none;display:grid;place-items:center;
  font-family:var(--font-d);font-weight:var(--fw-bold);color:#fff;letter-spacing:-.03em;
  width:44px;height:44px;font-size:var(--fs-15);position:relative;
}
.av.s{width:34px;height:34px;font-size:var(--fs-12);border-radius:var(--r-xs)}
.av.xs{width:24px;height:24px;font-size:var(--fs-9);border-radius:var(--r-xs)}
.av.lg{width:88px;height:88px;font-size:var(--fs-30);border-radius:var(--r-sm);border:3px solid var(--surface)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.topbar-row{display:flex;align-items:center;gap:var(--sp-14);padding:var(--sp-12) var(--sp-20) 0}
.topbar h1{font-family:var(--font-d);font-size:var(--fs-19);font-weight:var(--fw-bold);letter-spacing:-.035em;margin:0}
.topbar-sub{font-family:var(--font-p);font-size:var(--fs-9);color:var(--ink-3);margin-top:var(--sp-2);letter-spacing:.03em}
.topbar h1.topic-head{display:flex;align-items:center;gap:var(--sp-6)}
.space-topbar{border-bottom:0}
.space-topbar .icon-btn{margin-left:-6px}
.tabs{display:flex;gap:var(--sp-2);padding:var(--sp-10) var(--sp-12) 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;white-space:nowrap;
  padding:var(--sp-8) var(--sp-14) var(--sp-10);font-size:var(--fs-15);font-weight:var(--fw-semibold);color:var(--ink-3);
  border-bottom:2.5px solid transparent;margin-bottom:-1px;
}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink);border-bottom-color:var(--cobalt)}
.icon-btn{
  width:36px;height:36px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;color:var(--ink-2);
  text-decoration:none;
}
.icon-btn:hover{background:var(--paper);color:var(--ink)}

/* ---------- composer (the signature element) ---------- */
.composer{border-bottom:8px solid var(--paper)}
.composer-dest{
  display:flex;align-items:center;gap:var(--sp-10);flex-wrap:nowrap;
  padding:var(--sp-8) var(--sp-16) var(--sp-8) var(--sp-14);background:color-mix(in srgb,var(--tint) 11%,#fff);
  border-bottom:1px solid color-mix(in srgb,var(--tint) 24%,#fff);
  box-shadow:inset 6px 0 0 var(--tint);
}
.dest-label{flex:none;font-family:var(--font-p);font-size:var(--fs-8);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.dest-select,.dest-pick{
  flex:none;
  font-weight:var(--fw-semibold);font-size:var(--fs-13);
  color:color-mix(in srgb,var(--tint) 58%,var(--ink));
  background:#fff;border:1px solid color-mix(in srgb,var(--tint) 30%,#fff);
  padding:var(--sp-4) var(--sp-8);border-radius:var(--r-sm);
}
.composer-dest .dest-select,.composer-dest .dest-pick{max-width:46%}
.dest-pick{display:flex;align-items:center;gap:var(--sp-6)}
.dest-pick .space-dot{background:var(--tint)}
.dest-note{
  margin-left:auto;font-size:var(--fs-12);display:flex;align-items:center;gap:var(--sp-4);
  color:color-mix(in srgb,var(--tint) 40%,var(--ink-2));font-weight:var(--fw-medium);
  min-width:0;flex:1 1 auto;justify-content:flex-end;
}
.dest-note .icon{flex:none}
.dest-note-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer-body{display:flex;gap:var(--sp-12);padding:var(--sp-14) var(--sp-16) var(--sp-10)}
.composer-input{flex:1;min-width:0}
.composer-input p{margin:0;font-size:var(--fs-19);color:var(--ink-3);line-height:var(--lh-tight)}
.composer-tools{
  display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-6) var(--sp-16) var(--sp-14);flex-wrap:wrap;
}
.tool{width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--cobalt)}
.tool:hover{background:#F2F1EC}
.ttl{
  display:flex;align-items:center;gap:0;margin-left:var(--sp-6);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-2);background:var(--paper);
}
.ttl button{
  font-size:var(--fs-11);font-weight:var(--fw-semibold);padding:var(--sp-4) var(--sp-8);border-radius:var(--r-xs);color:var(--ink-2);
}
.ttl button.is-active{background:var(--signal);color:#fff;font-weight:var(--fw-bold)}
.ttl.locked button.is-active{background:var(--ink-2);display:flex;align-items:center;gap:var(--sp-4);cursor:default}
.ttl-label{display:inline-grid;place-items:center;color:var(--ink-3);margin-left:var(--sp-8)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);padding:var(--sp-8) var(--sp-16);font-weight:var(--fw-semibold);font-size:var(--fs-15);
  background:var(--ink);color:#fff;transition:transform .1s,filter .12s;
  white-space:nowrap;line-height:1.2;
}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:scale(.97)}
.btn.tinted{background:var(--ink);box-shadow:inset 0 -3px 0 var(--tint)}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink);background:none;opacity:1}
.btn.sm{padding:var(--sp-6) var(--sp-14);font-size:var(--fs-13)}
.composer-send{margin-left:auto;display:flex;align-items:center;gap:var(--sp-12)}
.count{font-family:var(--font-m);font-size:var(--fs-11);color:var(--ink-3)}

/* ---------- post ---------- */
.post{
  display:flex;gap:var(--sp-12);padding:var(--sp-14) var(--sp-16) var(--sp-8);border-bottom:1px solid var(--line-2);
  transition:background .12s;position:relative;
}
.post:hover{background:#FCFBF8}
.post.is-link{cursor:pointer}
.post-hit{position:absolute;inset:0;z-index:1}
.post.is-link .av{pointer-events:none;z-index:2}
.post.is-link .post-body{position:relative;z-index:2;pointer-events:none}
.post.is-link .post-body a,
.post.is-link .post-body button,
.post.is-link .post-body details,
.post.is-link .post-body form{
  pointer-events:auto;
}
/* With JS the card is opened by a click handler, so the text stays selectable
   on desktop. The overlay link above is the no-JS fallback. Phone layout
   disables selection (see the 620px block) so a tap does not call up search. */
.js .post-hit{display:none}
.js .post.is-link .av,
.js .post.is-link .post-body{pointer-events:auto}
.js .post.is-link .p-text{cursor:text}
.post-ctx{
  display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-10) var(--sp-16) 0;
  font-size:var(--fs-13);color:var(--ink-3);font-weight:var(--fw-medium);
}
.post-ctx+.post{padding-top:var(--sp-6)}

/* --- threads: same post layout; a line in the avatar gutter marks the chain --- */
.post.thread-start::before,
.post.thread-reply.has-more::after{
  content:"";position:absolute;left:37px;width:2px;background:var(--line);z-index:0;
  top:58px;bottom:0;
}
.post.thread-reply::before{
  content:"";position:absolute;left:37px;width:2px;background:var(--line);z-index:0;
  top:0;height:var(--sp-14);
}
.reply-to{
  display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-13);color:var(--ink-3);margin:var(--sp-2) 0 var(--sp-2);
}
.reply-to a{color:var(--cobalt);font-weight:var(--fw-medium)}
.thread-more{
  display:flex;align-items:center;gap:var(--sp-12);width:100%;text-align:left;
  padding:var(--sp-4) var(--sp-16) var(--sp-14);border-bottom:1px solid var(--line-2);
  font-size:var(--fs-13);font-weight:var(--fw-semibold);color:var(--cobalt);
}
.thread-more:hover{background:#FCFCFB}
.thread-more .rail{
  width:44px;flex:none;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
}
.thread-more .rail i{width:3px;height:3px;border-radius:var(--r-pill);background:var(--line)}
.post-body{flex:1;min-width:0}
.post-head{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;line-height:var(--lh-tight)}
.p-name{font-weight:var(--fw-bold);font-size:var(--fs-15);letter-spacing:-.01em}
.p-handle,.p-time{font-size:var(--fs-13);color:var(--ink-3);font-variant-numeric:tabular-nums}
.p-text{margin:var(--sp-4) 0 0;font-size:var(--fs-15);line-height:var(--lh-normal);white-space:pre-wrap}
.p-text a{color:var(--cobalt);font-weight:var(--fw-medium)}
.p-text a.p-text-link{color:inherit;font-weight:inherit}
a.p-name{color:var(--ink)}
a.p-handle,a.p-time{color:var(--ink-3)}
a.p-name:hover,a.p-handle:hover,a.p-time:hover{color:var(--cobalt)}

/* chips */
.chip{
  display:inline-flex;align-items:center;gap:var(--sp-4);font-family:var(--font-b);font-size:var(--fs-11);
  letter-spacing:0;padding:var(--sp-2) var(--sp-6);border-radius:var(--r-pill);border:1px solid var(--line);
  color:var(--ink-2);white-space:nowrap;font-weight:var(--fw-semibold);
}
.chip .icon{opacity:.85}
.chip.space,a.chip.space{border-color:transparent;background:color-mix(in srgb,var(--c) 16%,#fff);color:color-mix(in srgb,var(--c) 52%,var(--ink));text-decoration:none}
.chip.space .space-dot{width:6px;height:6px;border-radius:var(--r-xs);background:var(--c)}
.chip.ttl-chip{border-color:transparent;background:none;color:var(--signal);font-size:var(--fs-12);font-weight:var(--fw-semibold);padding:var(--sp-2) 0;gap:var(--sp-2);font-variant-numeric:tabular-nums}
.chip.private{border-color:transparent;background:var(--ink);color:#fff}
.chip.official{border-color:transparent;background:var(--pine-soft);color:var(--pine)}
.chip.founding{border-color:transparent;background:#EDF8C4;color:#4C6100}
.chip.scoped{border-color:transparent;background:var(--cobalt-soft);color:var(--cobalt)}

/* media */
.media{margin-top:var(--sp-10);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-2)}
.media.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.ph{
  --d:#2A2018;--m:#4A3C2C;--h:#B5A48E;--l:#D8C0A0;
  aspect-ratio:3/2;max-height:330px;position:relative;overflow:hidden;
  background:
    radial-gradient(78% 62% at 22% 16%, var(--h) 0%, transparent 62%),
    radial-gradient(66% 74% at 84% 88%, var(--l) 0%, transparent 58%),
    radial-gradient(120% 100% at 50% 120%, rgba(0,0,0,.42) 0%, transparent 64%),
    linear-gradient(158deg, var(--m) 0%, var(--d) 100%);
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.14) 60.4%, transparent 61.6%),
    radial-gradient(26% 32% at 69% 46%, rgba(0,0,0,.18) 0%, transparent 72%),
    radial-gradient(15% 22% at 33% 62%, rgba(255,255,255,.16) 0%, transparent 74%);
}
.ph::after{
  content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph.wide{aspect-ratio:21/9}
.ph.tall{aspect-ratio:4/5}
.ph-alt{
  position:absolute;left:8px;bottom:8px;z-index:2;font-family:var(--font-p);font-size:var(--fs-8);
  background:rgba(14,17,22,.55);backdrop-filter:blur(4px);color:rgba(255,255,255,.9);
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-xs);letter-spacing:.06em;
}
.carousel-dots{position:absolute;right:8px;bottom:8px;z-index:2;display:flex;gap:var(--sp-4)}
.carousel-dots i{width:5px;height:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.5)}
.carousel-dots i:first-child{background:#fff}

/* quoted / link card */
.card-embed{
  margin-top:var(--sp-10);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  position:relative;
}
.ce-hit{position:absolute;inset:0;z-index:1}
.card-embed .ce-body{padding:var(--sp-10) var(--sp-12);position:relative;z-index:2;pointer-events:none}
.card-embed .ce-body a{pointer-events:auto}
.ce-title{font-weight:var(--fw-bold);font-size:var(--fs-15);letter-spacing:-.01em}
.ce-desc{font-size:var(--fs-13);color:var(--ink-2);margin-top:var(--sp-2);white-space:pre-wrap}
.ce-title a{color:inherit;text-decoration:none}
.ce-title a:hover,.ce-desc a:hover{color:var(--cobalt)}
.ce-desc a{color:var(--cobalt);font-weight:var(--fw-medium);text-decoration:none}
.ce-url{font-size:var(--fs-12);color:var(--ink-3);margin-top:var(--sp-6)}
.card-embed.is-link .ce-media{display:block;max-height:12.5rem;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line)}
.card-embed.is-link .ce-media img{display:block;width:100%;height:12.5rem;object-fit:cover}

/* poll */
.poll{margin-top:var(--sp-10);display:flex;flex-direction:column;gap:var(--sp-6)}
.poll-row{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-6) var(--sp-10);overflow:hidden;font-size:var(--fs-13);font-weight:var(--fw-medium)}
.poll-fill{position:absolute;inset:0 auto 0 0;background:var(--cobalt-soft)}
.poll-row span{position:relative;display:flex;justify-content:space-between}
.poll-row .pc{font-size:var(--fs-12);color:var(--ink-2);font-variant-numeric:tabular-nums}
.poll-foot{font-size:var(--fs-12);color:var(--ink-3);margin-top:var(--sp-4)}

/* actions */
.actions{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-8);margin-left:-7px}
.act{
  display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-8);border-radius:var(--r-sm);
  color:var(--ink-3);font-size:var(--fs-13);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;
}
.act:hover{background:#F2F1EC;color:var(--ink)}
.act[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.act[aria-disabled="true"]:hover{background:none;color:var(--ink-3)}
.act.rekwet:hover{background:#F2F1EC;color:var(--ink)}
.act.like:hover{background:var(--signal-soft);color:var(--spec-5)}
.act.liked{color:var(--signal)}
.act.liked svg{fill:var(--signal);stroke:var(--signal)}
.act.bookmarked{color:var(--ink)}
.act.bookmarked svg{fill:var(--ink);stroke:var(--ink)}
.act.pinned{color:var(--ink)}
.act.pinned svg{fill:var(--ink);stroke:var(--ink)}
.act.rekwet.rekwetted{color:var(--ink)}
.act.rekwet.rekwetted svg{stroke:var(--ink)}
.act-last{margin-left:auto}
.act-form{display:contents}
.act.delete:hover{background:var(--signal-soft);color:var(--signal)}
.act.js-copy{position:relative}
.copy-tip{
  position:absolute;right:0;bottom:calc(100% + 6px);z-index:5;
  background:var(--ink);color:#fff;font-size:var(--fs-12);font-weight:var(--fw-semibold);
  line-height:1.2;padding:var(--sp-6) var(--sp-8);border-radius:var(--r-sm);
  white-space:nowrap;pointer-events:none;opacity:0;
}
.copy-tip.is-on{opacity:1}
.rekwet-menu{position:relative}
.rekwet-menu>summary{list-style:none;cursor:pointer}
.rekwet-menu>summary::-webkit-details-marker{display:none}
.post:has(.rekwet-menu[open]){z-index:5}
.rekwet-menu-panel{
  position:absolute;left:0;top:100%;z-index:6;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  min-width:11rem;padding:var(--sp-4);margin-top:var(--sp-4);
}
.rekwet-opt{
  display:block;width:100%;text-align:left;background:none;
  padding:var(--sp-8) var(--sp-10);border-radius:var(--r-sm);
  font-size:var(--fs-13);font-weight:var(--fw-medium);color:var(--ink);
}
.rekwet-opt:hover{background:#F2F1EC}
.rekwet-opt.is-disabled,.rekwet-opt:disabled{
  opacity:.45;cursor:not-allowed;color:var(--ink-3);
}
.rekwet-opt.is-disabled:hover,.rekwet-opt:disabled:hover{background:none}
.card-embed.is-unavailable{color:var(--ink-3);background:var(--paper)}
.composer-dock{display:none;border-bottom:1px solid var(--line-2)}
.composer-dock:target,.composer-dock.is-open{display:block}

/* transparency ("waarom zie ik dit") — once per feed, not per post */
.feed-why{border-bottom:1px solid var(--line-2);padding:var(--sp-8) var(--sp-16) var(--sp-10)}
.feed-why>summary{
  display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-12);color:var(--ink-3);
  padding:var(--sp-2) 0;cursor:pointer;list-style:none;width:fit-content;
}
.feed-why>summary::-webkit-details-marker{display:none}
.feed-why>summary:hover,.feed-why[open]>summary{color:var(--cobalt)}
.feed-why .why-panel{
  margin-top:var(--sp-8);background:#F6F5F0;border-radius:var(--r-sm);padding:var(--sp-10) var(--sp-12);
  box-shadow:inset 3px 0 0 var(--ink);
}
.feed-why .why-panel h4{margin:0 0 var(--sp-6);font-family:var(--font-p);font-size:var(--fs-8);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.feed-why .why-panel ul{margin:0;padding-left:var(--sp-16);font-size:var(--fs-13);color:var(--ink-2);line-height:var(--lh-normal)}
.feed-why .why-foot{margin-top:var(--sp-8);font-size:var(--fs-12);color:var(--ink-3)}

/* per-kwet metadata on the permalink focus (Art. 12/13) — spec sheet, not the feed-why box */
.kwet-meta{border-bottom:1px solid var(--line-2);padding:var(--sp-8) var(--sp-16) var(--sp-14)}
.kwet-meta>summary{
  display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-12);line-height:1;color:var(--ink-3);
  padding:var(--sp-2) 0;cursor:pointer;list-style:none;width:fit-content;
}
.kwet-meta>summary::-webkit-details-marker{display:none}
.kwet-meta>summary::marker{content:none}
.kwet-meta>summary .icon{flex:none;display:block}
.kwet-meta>summary:hover,.kwet-meta[open]>summary{color:var(--cobalt)}
.kwet-meta-sheet{margin-top:var(--sp-10)}
.kwet-meta-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
}
.kwet-meta-grid>div{background:var(--surface);padding:var(--sp-10) var(--sp-12)}
.kwet-meta-grid dt{
  margin:0 0 var(--sp-4);font-family:var(--font-p);font-size:var(--fs-8);
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
}
.kwet-meta-grid dd{margin:0;font-size:var(--fs-13);color:var(--ink);line-height:var(--lh-snug);font-weight:var(--fw-medium)}
.kwet-meta-grid dd a{color:var(--cobalt);font-weight:var(--fw-semibold)}
.kwet-meta-id{font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);letter-spacing:-.02em}
.kwet-meta-sub{display:block;margin-top:var(--sp-4);font-size:var(--fs-12);color:var(--ink-3);font-weight:var(--fw-medium)}
.kwet-meta-sub a{font-weight:var(--fw-semibold)}
.kwet-meta-counts{
  display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-16);margin:var(--sp-12) 0 0;
  font-size:var(--fs-13);color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.kwet-meta-counts b{color:var(--ink);font-weight:var(--fw-bold);letter-spacing:-.02em;margin-right:var(--sp-4)}
.kwet-meta-note{
  margin-top:var(--sp-12);padding-top:var(--sp-10);border-top:1px solid var(--line-2);
  font-size:var(--fs-12);color:var(--ink-3);line-height:var(--lh-normal);
}
.kwet-meta-note p{margin:0 0 var(--sp-6)}
.kwet-meta-note p:last-child{margin:0}
.kwet-meta-note .kwet-meta-note-k{
  font-family:var(--font-p);font-size:var(--fs-8);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--sp-8);
}
.kwet-meta-foot a{color:var(--cobalt);font-weight:var(--fw-medium)}

/* ---------- right rail modules ---------- */
.mod{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--sp-12);overflow:hidden}
.mod-head{
  padding:var(--sp-12) var(--sp-14) var(--sp-8);font-family:var(--font-p);font-size:var(--fs-9);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:var(--sp-6);
}
.mod-body{padding:0 var(--sp-14) var(--sp-12)}
.mod-row{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) 0;border-top:1px solid var(--line-2)}
.mod-row .av{border-radius:var(--r-xs)}
.mod-row:first-child{border-top:0}
.mod-row form,.mod-row .btn{margin:0;flex:none}
.mod-title{font-size:var(--fs-13);font-weight:var(--fw-semibold);letter-spacing:-.01em}
.mod-title a{color:inherit}
.mod-sub{font-size:var(--fs-12);color:var(--ink-3);margin-top:var(--sp-2);font-variant-numeric:tabular-nums}
.mod-note{margin:var(--sp-10) 0 0;font-size:var(--fs-12);color:var(--ink-3);line-height:var(--lh-normal)}
.mod-help{margin:0 0 var(--sp-10);font-size:var(--fs-12);color:var(--ink-2);line-height:var(--lh-snug)}

/* sovereignty module */
.sov{background:var(--ink);color:#fff;border-color:var(--ink)}
.sov .mod-head{color:rgba(255,255,255,.55)}
.sov-eu{
  width:28px;height:20px;display:block;flex:none;
  margin-left:auto;border-radius:var(--r-xs);
}
.sov-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);background:rgba(255,255,255,.13);border-radius:var(--r-md);overflow:hidden}
.sov-cell{background:var(--ink);padding:var(--sp-8) var(--sp-10)}
.sov-cell b{display:block;font-family:var(--font-p);font-size:var(--fs-13);letter-spacing:.02em}
.sov-cell span{font-size:var(--fs-11);color:rgba(255,255,255,.5)}
.sov-note{font-size:var(--fs-12);color:rgba(255,255,255,.6);margin-top:var(--sp-10);line-height:var(--lh-snug)}
.sov-note b{color:#fff}

/* feed control */
.opt{display:flex;gap:var(--sp-8);padding:var(--sp-8) 0;align-items:flex-start;width:100%;text-align:left;border-top:1px solid var(--line-2)}
.opt:first-of-type{border-top:0}
.opt>span{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.radio{width:14px;height:14px;border-radius:0;border:1.5px solid var(--line);flex:none;margin-top:var(--sp-2);position:relative}
.opt.is-active .radio{border-color:var(--cobalt);border-width:4.5px}
.opt-t{font-size:var(--fs-13);font-weight:var(--fw-semibold)}
.opt.is-active .opt-t{color:var(--cobalt)}
.opt-d{font-size:var(--fs-12);color:var(--ink-3);line-height:var(--lh-snug)}

/* founding progress */
.prog{display:flex;gap:var(--sp-2);margin:var(--sp-8) 0 var(--sp-8)}
.prog i{height:5px;flex:1;border-radius:var(--r-xs);background:var(--line)}
.prog i.on{background:var(--lime)}

.rail-foot{padding:var(--sp-14) var(--sp-12) var(--sp-32);font-size:var(--fs-12);color:var(--ink-3);line-height:var(--lh-loose)}
.rail-foot a{margin-right:var(--sp-10);display:inline-block}
.rail-foot a:hover{color:var(--ink);text-decoration:underline}
.rail-foot .fine{margin-top:var(--sp-10);font-family:var(--font-p);font-size:var(--fs-8);line-height:var(--lh-loose);letter-spacing:.02em}

/* search */
.search{
  display:flex;align-items:center;gap:var(--sp-8);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--sp-8) var(--sp-14);color:var(--ink-3);margin-bottom:var(--sp-12);
}
.search input{border:0;background:none;outline:0;flex:1;font-size:var(--fs-13)}
.search input::placeholder{color:var(--ink-3)}

/* ---------- space header ---------- */
.space-banner{
  height:120px;position:relative;
  background:
    linear-gradient(90deg,
      var(--tint) 0 28%,
      color-mix(in srgb,var(--tint) 55%,var(--ink)) 0 40%,
      var(--ink) 0 100%);
}
.space-banner::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.05) 0 50%,transparent 0),
    linear-gradient(180deg,rgba(255,255,255,.05) 0 50%,transparent 0);
  background-size:30px 30px;
}
.space-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:8px;
  background:linear-gradient(90deg,
    var(--spec-1) 0 20%, var(--spec-2) 0 40%, var(--spec-3) 0 60%,
    var(--spec-4) 0 80%, var(--spec-5) 0 100%);
}
.space-banner.private{background:linear-gradient(90deg,#2A2A28 0 28%,#1A1A18 0 40%,#0A0A0A 0)}
.space-banner.private::after{background:var(--ink-2)}
.banner-tag{
  position:absolute;top:12px;right:14px;z-index:2;display:flex;gap:var(--sp-6);
}
.space-meta{padding:0 var(--sp-16) var(--sp-14);border-bottom:1px solid var(--line)}
.space-meta-top{display:flex;align-items:flex-end;gap:var(--sp-14);margin-top:-30px;position:relative;z-index:1}
.space-icon{
  width:66px;height:66px;border-radius:var(--r-sm);border:3px solid var(--surface);
  background:color-mix(in srgb,var(--tint) 55%,var(--ink));
  display:grid;place-items:center;flex:none;color:#fff;font-family:var(--font-d);font-weight:var(--fw-bold);font-size:var(--fs-25);
}
.space-actions{margin-left:auto;display:flex;gap:var(--sp-8);align-items:center;padding-bottom:var(--sp-4);flex-wrap:wrap;justify-content:flex-end}
.space-name{font-family:var(--font-d);font-size:var(--fs-25);font-weight:var(--fw-bold);letter-spacing:-.04em;margin:var(--sp-10) 0 0}
.space-domain{
  display:inline-flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-13);font-weight:var(--fw-medium);
  color:color-mix(in srgb,var(--tint) 55%,var(--ink));
  background:color-mix(in srgb,var(--tint) 14%,#fff);padding:var(--sp-2) var(--sp-8);border-radius:var(--r-xs);margin-top:var(--sp-6);
}
.space-desc{font-size:var(--fs-15);color:var(--ink-2);margin:var(--sp-8) 0 0;max-width:62ch;line-height:var(--lh-normal)}
.space-stats{display:flex;gap:var(--sp-16);margin-top:var(--sp-12);flex-wrap:wrap}
a.stat{color:inherit;text-decoration:none}
a.stat:hover b{color:var(--cobalt)}
.stat b{font-family:var(--font-d);font-size:var(--fs-15);font-weight:var(--fw-bold);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{font-size:var(--fs-13);color:var(--ink-3);margin-left:var(--sp-4)}
.facepile{display:flex;align-items:center;gap:0;margin-top:var(--sp-12)}
.facepile .av{margin-right:-8px;border:2px solid var(--surface)}
.facepile p{margin:0 0 0 var(--sp-16);font-size:var(--fs-13);color:var(--ink-3)}

.notice{
  display:flex;gap:var(--sp-10);padding:var(--sp-12) var(--sp-16);background:#F6F5F0;
  border-bottom:1px solid var(--line);font-size:var(--fs-13);color:var(--ink-2);line-height:var(--lh-normal);
  box-shadow:inset 4px 0 0 var(--ink);
}
.notice.warn{background:#F6F5F0;box-shadow:inset 4px 0 0 var(--signal)}
.notice .icon{flex:none;color:var(--ink);margin-top:var(--sp-2)}
.notice.warn .icon{color:var(--signal)}
.notice b{color:var(--ink)}
.notice a{color:var(--cobalt);font-weight:var(--fw-semibold)}

/* ---------- explore ---------- */
.explore-wrap{padding:var(--sp-16)}
.search-posts-head{
  font-size:var(--fs-15);letter-spacing:-.02em;margin:var(--sp-16) var(--sp-16) var(--sp-8);
}
.sec-title{
  font-family:var(--font-p);font-size:var(--fs-9);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:var(--sp-20) 0 var(--sp-10);display:flex;align-items:center;gap:var(--sp-8);
}
.sec-title:first-child{margin-top:0}
.sec-title::after{content:"";flex:1;height:1px;background:var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10)}
.explore-more{grid-column:1/-1;border:0;padding:var(--sp-16) 0;margin:0}
.scard{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;
}
.scard-top{
  height:38px;position:relative;
  background:linear-gradient(90deg,
    var(--tint) 0 30%,
    color-mix(in srgb,var(--tint) 55%,var(--ink)) 0 44%,
    var(--ink) 0 100%);
}
.scard-body{padding:0 var(--sp-12) var(--sp-12);flex:1;display:flex;flex-direction:column}
.scard-icon{
  width:40px;height:40px;border-radius:var(--r-xs);border:2.5px solid var(--surface);
  background:color-mix(in srgb,var(--tint) 55%,var(--ink));
  margin-top:-20px;display:grid;place-items:center;color:#fff;font-family:var(--font-d);font-weight:var(--fw-bold);font-size:var(--fs-15);
}
.scard .btn{align-self:flex-start}
.scard-icon{position:relative;z-index:1}
.scard h3{margin:var(--sp-8) 0 0;font-size:var(--fs-15);letter-spacing:-.015em}
.scard h3 a{color:inherit;text-decoration:none}
.scard h3 a:hover{color:var(--cobalt)}
.scard p{margin:var(--sp-2) 0 0;font-size:var(--fs-13);color:var(--ink-2);line-height:var(--lh-snug)}
.scard-foot{display:flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-10);padding-top:var(--sp-10);border-top:1px solid var(--line-2)}
.spark{display:flex;align-items:flex-end;gap:var(--sp-2);height:16px;margin-left:auto}
.spark i{width:3px;background:color-mix(in srgb,var(--tint) 80%,var(--ink));border-radius:0;opacity:.4}
.spark i:last-child{opacity:1}

/* ---------- profile ---------- */
.prof-head{padding:0 var(--sp-16) var(--sp-16);border-bottom:1px solid var(--line)}
.prof-cover{height:146px;position:relative;background:var(--ink)}
.prof-cover::before{
  content:"";position:absolute;inset:0;opacity:.55;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.07) 0 50%,transparent 0),
    linear-gradient(180deg,rgba(255,255,255,.07) 0 50%,transparent 0);
  background-size:28px 28px;
}
.prof-cover::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background:linear-gradient(90deg,
    var(--spec-1) 0 20%, var(--spec-2) 0 40%, var(--spec-3) 0 60%,
    var(--spec-4) 0 80%, var(--spec-5) 0 100%);
}
.prof-row{display:flex;align-items:flex-end;margin-top:-42px;position:relative;z-index:1}
.prof-name{font-family:var(--font-d);font-size:var(--fs-25);font-weight:var(--fw-bold);letter-spacing:-.04em;margin:var(--sp-12) 0 0}
.prof-handle{font-size:var(--fs-15);color:var(--ink-3)}
.prof-spaces{list-style:none;margin:0;padding:0 var(--sp-16) var(--sp-24)}
.prof-spaces li a{
  display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-12) 0;
  border-bottom:1px solid var(--line-2);color:inherit;text-decoration:none
}
.prof-spaces li a:hover .list-index-name{color:var(--cobalt)}
.prof-spaces .space-dot{width:28px;height:28px;border-radius:var(--r-xs);background:var(--tint)}
.palette{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin:var(--sp-8) 0 var(--sp-16)}
.palette input{position:absolute;opacity:0;width:1px;height:1px}
.palette label{
  width:28px;height:28px;border-radius:var(--r-sm);cursor:pointer;border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.12)
}
.palette input:checked + label{border-color:var(--ink);outline:2px solid var(--cobalt);outline-offset:2px}
.palette input:focus-visible + label{outline:2px solid var(--cobalt);outline-offset:2px}
.ident{
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-10) var(--sp-12);display:flex;
  align-items:center;gap:var(--sp-10);margin-bottom:var(--sp-8);
}
.ident-bar{width:4px;align-self:stretch;border-radius:var(--r-xs);background:var(--tint)}

/* ---------- notifications ---------- */
.notif{display:flex;gap:var(--sp-12);padding:var(--sp-14) var(--sp-16);border-bottom:1px solid var(--line-2)}
.notif.unseen{background:#F9F9FD;box-shadow:inset 3px 0 0 var(--cobalt)}
.notif-ico{width:34px;flex:none;display:grid;place-items:center;color:var(--ink)}
.notif-ico.is-like{color:var(--signal)}
.notif-ico.is-rekwet,.notif-ico.is-quote{color:var(--pine)}
.notif-ico.is-reply{color:var(--ink-3)}
.notif-ico.is-mention{color:var(--cobalt)}
.notif-body{flex:1;min-width:0}
.notif p{margin:0;font-size:var(--fs-15);line-height:var(--lh-snug)}
.notif p a{color:inherit}
.notif .sub{font-size:var(--fs-13);color:var(--ink-2);margin-top:var(--sp-2)}
.notif .sub a{color:inherit;text-decoration:none}
.notif .p-time{flex:none;color:var(--ink-3);font-size:var(--fs-12);text-decoration:none}

/* ---------- views ---------- */
.view{display:none}
.view.is-active{display:block}

/* ---------- mobile ---------- */
.mobile-bar,.mobile-brand{display:none}
@media (max-width:1180px){
  .app{grid-template-columns:var(--rail-l) minmax(0,1fr)}
  .rail-r{display:none}
}
@media (max-width:860px){
  .app{grid-template-columns:76px minmax(0,1fr)}
  :root{--rail-l:76px}
  .nav-item span,.space-item-name,.me-body,
  .new-space span,.btn.compose-cta span{display:none}
  .nav-item{justify-content:center;padding:var(--sp-10) 0}
  .brand{
    flex-direction:column;align-items:center;justify-content:center;
    gap:var(--sp-4);padding:var(--sp-8) var(--sp-4) var(--sp-12);
  }
  .brand-name{font-size:var(--fs-11);letter-spacing:-.04em}

  /* "Jouw ruimtes" heading has no room, so the group is set off by a rule */
  .rail-head{
    display:block;height:0;padding:0;margin:var(--sp-14) var(--sp-8) var(--sp-12);
    border-top:1px solid var(--line);font-size:0;overflow:hidden;
  }
  /* dots carry no meaning at 76px, so they become real space tiles */
  .space-item{justify-content:center;padding:var(--sp-2) 0;position:relative;border-radius:var(--r-sm)}
  .space-item .space-dot{
    width:38px;height:38px;border-radius:var(--r-xs);
    background:color-mix(in srgb,var(--tint) 58%,var(--ink));
    display:grid;place-items:center;font-style:normal;
    font-family:var(--font-d);font-weight:var(--fw-bold);font-size:var(--fs-13);
    letter-spacing:-.02em;color:#fff;
  }
  .space-item .space-dot::after{content:attr(data-glyph)}
  .space-item:hover{background:none}
  .space-item:hover .space-dot{filter:brightness(1.15)}
  .space-item.is-active{background:none}
  .space-item.is-active .space-dot{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--tint)}
  .space-item-meta{
    position:absolute;top:1px;right:5px;margin:0;gap:var(--sp-2);
    background:var(--paper);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-2);
  }
  .space-item-meta .icon{width:11px;height:11px;stroke-width:2.4}
  .unread{width:7px;height:7px}
  .new-space{width:38px;height:38px;margin:var(--sp-6) auto 0;padding:0}
  .nav-count{position:absolute;margin:0;transform:translate(12px,-12px)}
  .nav-item{position:relative}
  .me{justify-content:center}
  .me form{display:none}
  .btn.compose-cta{padding:var(--sp-10) 0}
}
@media (max-width:620px){
  :root{--mobile-brand-h:56px;--sticky-chrome:calc(var(--mobile-brand-h) + 4.5rem)}
  /* Taps on chrome and post text must not start a selection / “Search”. */
  html{
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
  input,textarea,select{
    -webkit-user-select:text;
    user-select:text;
    -webkit-touch-callout:default;
  }
  .js .post.is-link .p-text{cursor:pointer}
  .app{grid-template-columns:minmax(0,1fr);padding-bottom:var(--bar-h)}
  .rail-l{display:none}
  .center{border:0}
  .mobile-brand{
    display:flex;flex-direction:column;position:sticky;top:0;z-index:32;
    background:rgba(255,255,255,.88);backdrop-filter:blur(12px);
  }
  .mobile-brand-row{
    display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);
    padding:0 var(--sp-8) 0 var(--sp-16);min-height:52px;box-sizing:border-box;
  }
  .mobile-brand-link{
    display:flex;align-items:center;gap:var(--sp-8);
    padding:var(--sp-12) 0;min-height:52px;box-sizing:border-box;min-width:0;
  }
  .mobile-brand-logo{height:24px;width:auto;display:block}
  .mobile-brand .icon-btn{width:44px;height:44px;color:var(--ink-3)}
  .mobile-brand .icon-btn:hover,.mobile-brand .icon-btn.is-active{color:var(--ink);background:transparent}
  .mobile-brand .spectrum{height:4px}
  .topbar{top:var(--mobile-brand-h)}
  .topbar-row{padding:var(--sp-8) var(--sp-16) 0}
  /* Wordmark is the Home identity; keep the heading for assistive tech. */
  #view-home .topbar-row{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  }
  /* Name and handle already sit in .prof-head; keep the heading for assistive tech. */
  #view-profile .topbar{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    border:0;
  }
  .composer-dest:has(.dest-select) .dest-label,
  .composer-dest:has(.dest-pick) .dest-label{display:none}
  .composer-dest{padding:var(--sp-6) var(--sp-12);gap:var(--sp-8)}
  .composer-dest .dest-select,.composer-dest .dest-pick{max-width:40%}
  .mobile-bar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:var(--sp-8) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom));
  }
  .mobile-bar button,.mobile-bar a{flex:1;display:grid;place-items:center;color:var(--ink-3);padding:var(--sp-4) 0;position:relative;text-decoration:none}
  .mobile-bar button.is-active,.mobile-bar a.is-active{color:var(--ink)}
  .mobile-bar .compose-fab{
    flex:none;width:44px;height:44px;margin:0 var(--sp-4);padding:0;border-radius:var(--r-pill);
    background:var(--ink);color:#fff;box-shadow:inset 0 -3px 0 var(--cobalt,#2B2BF5);
    align-self:center;
  }
  .mobile-bar .compose-fab.is-active,.mobile-bar .compose-fab:hover{color:#fff;filter:brightness(1.12)}
  .mobile-bar .compose-fab .icon{stroke:#fff}
  .mobile-bar .nav-count{
    position:absolute;top:2px;left:50%;margin:0;transform:translate(6px,0);
  }
  .grid2{grid-template-columns:1fr}
  .kwet-meta-grid{grid-template-columns:1fr}
  .composer-tools{gap:0}
  .ttl-label{display:none}
}
@media (max-height:760px){
  .rail-bottom .spectrum{display:none}
  .rail-bottom{padding-top:var(--sp-12);border-top:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

.composer-input textarea{
  display:block;width:100%;border:0;resize:vertical;min-height:72px;
  font-size:var(--fs-19);line-height:var(--lh-tight);background:transparent;
}
.composer-input textarea:focus{outline:none}
.composer-error{margin:0 var(--sp-16) var(--sp-8);color:var(--signal);font-size:var(--fs-13);font-weight:var(--fw-medium)}
.settings-flash.feed-flash{margin:0 var(--sp-16) var(--sp-8)}
.tab:disabled{opacity:.4;cursor:not-allowed}
a.tab{display:inline-block}
.guest-cta-body{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap;
  padding:var(--sp-14) var(--sp-16);
}
.guest-cta-body p{margin:0;font-size:var(--fs-15);color:var(--ink-2);line-height:var(--lh-snug)}
.me form{flex:none}

.auth-shell{
  min-height:100vh;display:flex;flex-direction:column;align-items:flex-start;
  max-width:420px;margin:0 auto;padding:var(--sp-40) var(--sp-24);
}
.auth-brand{display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-32)}
.auth-brand-logo{height:28px;width:auto;display:block}
.auth-shell h1{font-size:var(--fs-25);letter-spacing:-.04em;margin:0 0 var(--sp-8)}
.auth-lead{color:var(--ink-2);margin:0 0 var(--sp-20);line-height:var(--lh-snug)}
.auth-form{display:flex;flex-direction:column;gap:var(--sp-8);width:100%}
.auth-label{font-size:var(--fs-12);font-weight:var(--fw-semibold);color:var(--ink-2)}
.auth-input{
  width:100%;padding:var(--sp-10) var(--sp-12);border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);margin-bottom:var(--sp-8);
}
.auth-form .btn{align-self:flex-start;margin-top:var(--sp-8)}
.auth-error{color:var(--signal);font-size:var(--fs-13);font-weight:var(--fw-medium);margin:0 0 var(--sp-14)}
.auth-alt{margin-top:var(--sp-24);color:var(--cobalt);font-size:var(--fs-13);font-weight:var(--fw-medium)}
.auth-alt a{color:var(--cobalt)}
.auth-alt a:hover{text-decoration:underline}

/* ---------- settings / legal / search ---------- */
.settings-wrap,.legal-wrap{
  padding:var(--sp-16) var(--sp-16) var(--sp-40);
  display:flex;flex-direction:column;gap:var(--sp-24);
}
.legal-wrap h2{font-size:var(--fs-15);margin:var(--sp-8) 0 var(--sp-4);letter-spacing:-.02em}
.legal-wrap p{margin:0 0 var(--sp-12);color:var(--ink-2);line-height:var(--lh-snug);font-size:var(--fs-13)}
.settings-block{border-top:1px solid var(--line-2);padding-top:var(--sp-16)}
.settings-block h2{font-size:var(--fs-15);margin:0 0 var(--sp-8);letter-spacing:-.02em}
.settings-lead{margin:0 0 var(--sp-12);color:var(--ink-2);font-size:var(--fs-13);line-height:var(--lh-snug)}
.settings-value{margin:0 0 var(--sp-12);font-weight:var(--fw-semibold)}
.settings-meta{margin:0 0 var(--sp-12);font-size:var(--fs-12);color:var(--ink-3)}
.settings-meta a{color:var(--cobalt);font-weight:var(--fw-medium)}
.settings-flash{margin:0;color:var(--pine);font-size:var(--fs-13);font-weight:var(--fw-medium)}
.settings-banner{
  background:var(--signal-soft);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-14) var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-10);
}
.settings-banner p{margin:0;font-size:var(--fs-13);line-height:var(--lh-snug)}
.settings-danger{border-color:var(--signal)}
.settings-radios{border:0;margin:0 0 var(--sp-12);padding:0;display:flex;flex-direction:column;gap:var(--sp-8)}
.settings-radio{display:flex;gap:var(--sp-8);align-items:flex-start;font-size:var(--fs-13);line-height:var(--lh-snug);cursor:pointer}
.settings-radio input{margin-top:var(--sp-2)}
.auth-age{margin:var(--sp-8) 0}
.btn.signal{background:var(--signal);color:#fff;padding:var(--sp-8) var(--sp-14);border-radius:var(--r-sm);font-weight:var(--fw-semibold)}
.btn.signal:hover{filter:brightness(0.95)}
form.search{display:flex;align-items:center;gap:var(--sp-8)}
.search-form{margin-bottom:var(--sp-16)}

.list-picker{
  display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap;
  padding:var(--sp-8) var(--sp-16) var(--sp-10);border-bottom:1px solid var(--line);
  --tint: var(--cobalt);
}
.list-picker form{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
.list-picker .settings-meta{margin:0}
.list-index,.list-members{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.list-index li a,.list-members li{
  display:flex;align-items:center;gap:var(--sp-10);
  padding:var(--sp-10) 0;border-bottom:1px solid var(--line-2);
}
.list-index li a,.list-members li a{color:inherit;text-decoration:none}
.list-index li a:hover .list-index-name,.list-members li a:hover .list-index-name{color:var(--cobalt)}
.list-index-name{font-weight:var(--fw-semibold);display:block}
.list-index-meta{font-size:var(--fs-12);color:var(--ink-3)}
.list-members li{justify-content:space-between;flex-wrap:wrap}
.list-members li > a:not(.icon-btn){display:flex;align-items:center;gap:var(--sp-10);flex:1;min-width:0}
.list-spaces li{flex-wrap:nowrap}
.list-spaces li > a:not(.icon-btn) .list-index-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-space-count{flex:none;font-size:var(--fs-12);color:var(--ink-3);white-space:nowrap}
.list-members-actions{display:flex;align-items:center;gap:var(--sp-2);flex:none;margin-left:auto}
.list-members-actions form{display:contents}
.auth-fieldset{border:0;margin:0 0 var(--sp-14);padding:0}
.settings-check{display:flex;align-items:center;gap:var(--sp-8);margin:var(--sp-6) 0;font-size:var(--fs-13)}
.space-actions form{display:contents}

/* ---------- error pages (auth shell + spectrum) ---------- */
.error-shell .auth-brand{margin-bottom:var(--sp-12)}
.error-shell .auth-brand a{display:flex;align-items:center}
.error-shell .spectrum{margin-bottom:var(--sp-32)}
.error-actions{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin:0}