/* Anything hidden stays hidden: the desktop rule #app{display:flex} and the
   fixed composer both outrank the browser's [hidden] otherwise, which put
   the composer and an "Older" button on the signed-out gate. */
.nest [hidden],#app[hidden]{display:none !important}

/* The Nest — mobile first. One column, the composer within thumb reach at
   the bottom of a phone, and only on a desk does it move to the top. */

.nest{max-width:640px;margin:0 auto;padding:8px clamp(14px,3vw,28px) calc(140px + env(safe-area-inset-bottom))}
.rail-h{display:none}

.nest-me{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--muted)}
.nest-me b{color:var(--text);font-weight:600}
.nest-me button{background:none;border:0;padding:8px 0;color:var(--goose-navy);font:500 .85rem var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.hint{color:var(--muted);font-size:.9rem;margin:8px 0 0}
.gate h2{margin:0 0 6px;font:700 1.4rem var(--serif);color:var(--goose-navy)}
.gate h3{margin:22px 0 4px;font:700 1.05rem var(--serif);color:var(--goose-navy)}
.gate p{margin:0 0 12px}
.gate label{display:flex;flex-direction:column;gap:6px;font:500 .8rem var(--sans);color:var(--muted);margin:0 0 12px}
.gate label .pre{position:absolute;left:12px;top:36px;color:var(--muted);font-size:16px}
.gate label:has(.pre){position:relative}
.gate label:has(.pre) input{padding-left:28px}
.gate input,.composer textarea,.row input,.compose-row select{
  font:400 16px var(--sans);color:var(--text);background:var(--surface);
  border:1px solid var(--outline-strong);border-radius:var(--radius-sm);padding:10px 12px;min-height:44px;
}
.gate form .btn{width:100%;margin-top:4px}
.row{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:640px){ .row{grid-template-columns:1fr 1.4fr auto} }
.inv-out{margin:10px 0 0;padding:12px;background:var(--surface-sunk);border-radius:var(--radius-sm);
  font-size:.9rem;overflow-wrap:anywhere}
.inv-out code{display:block;margin-top:6px;font-size:.85rem;user-select:all;-webkit-user-select:all}
.agreements{margin:16px 0;padding:14px 16px;border-left:3px solid var(--ochre);background:var(--surface-sunk);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.agreements ol{margin:8px 0 0;padding-left:20px}
.agreements li{margin:4px 0}
#wl-err:not(:empty){color:var(--oxblood)}

/* ── flocks ────────────────────────────────────────────── */
.flocks{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;margin:0 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.flocks::-webkit-scrollbar{display:none}
.flocks button{
  flex:none;min-height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--outline-strong);
  background:var(--surface);color:var(--goose-navy);font:500 .85rem var(--sans);cursor:pointer;white-space:nowrap;
}
.flocks button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

.space-about{margin:-2px 0 12px;font-size:.9rem;color:var(--muted)}
.space-about .profile{display:block;margin-top:6px;font-size:1rem;color:var(--text)}
.space-about .profile .h{color:var(--muted);font-size:.85rem;margin-left:6px}
.space-about .back{margin:0}
button.name,a.name{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;gap:8px;align-items:baseline;text-align:left;text-decoration:none}
button.name:hover b,a.name:hover b{text-decoration:underline;text-underline-offset:3px}

/* On a desk the page keeps one column beside the sidebar (public/nest-shell.css), so the
   Spaces stay a row of chips across the top of the feed, as on a phone. */
@media (min-width:901px){
  .nest{max-width:760px;padding-bottom:60px}
}

.fresh{display:flex;gap:8px;justify-content:center;margin:0 0 12px;flex-wrap:wrap}
.fresh button{min-height:38px;padding:0 14px;border-radius:99px;border:1px solid var(--outline-strong);
  background:var(--surface);color:var(--goose-navy);font:600 .82rem var(--sans);cursor:pointer;box-shadow:var(--shadow-1)}
.fresh button:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#fresh-replies{border-color:var(--ochre);color:var(--ochre-text)}

/* ── posts ─────────────────────────────────────────────── */
.feed,.replies{display:flex;flex-direction:column;gap:10px}
.post{
  background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow-1);
}
.post .who{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.post .who b{font:600 .95rem var(--sans);color:var(--text)}
.post .who .h{color:var(--muted);font-size:.85rem}
.post .who time{color:var(--muted);font-size:.8rem;margin-left:auto}
.post .who .fl{font-size:.8rem;   /* type floor */color:var(--goose-navy);background:rgba(47,93,80,.08);padding:2px 8px;border-radius:99px}
.post .body{font:400 1.02rem/1.55 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.post .body a{color:var(--goose-navy);overflow-wrap:anywhere}
.post .acts{display:flex;gap:4px;margin:8px -8px -6px;flex-wrap:wrap}
.post .acts button{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;border:0;border-radius:8px;
  background:none;color:var(--muted);font:500 .82rem var(--sans);cursor:pointer;
}
.post .acts button:hover{background:rgba(47,93,80,.06);color:var(--goose-navy)}
.post .acts button[aria-pressed=true]{color:var(--ochre)}
.post .acts .wgi{width:1.05em;height:1.05em}
.post .acts .danger:hover{color:var(--oxblood)}
.post.edited .body::after{content:" (edited)";color:var(--muted);font-size:.8rem}
.post .editbox{margin-top:8px}
.post .editbox textarea{width:100%;font:400 16px var(--sans);min-height:80px;padding:10px;border:1px solid var(--outline-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.thread .post.root{border-color:var(--goose-navy)}
.empty{color:var(--muted);text-align:center;padding:40px 0}
.more{display:block;margin:14px auto 0}
.back{background:none;border:0;padding:8px 0;color:var(--goose-navy);font:500 .9rem var(--sans);cursor:pointer;margin-bottom:8px}

/* ── composer ──────────────────────────────────────────── */
.composer{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:10px clamp(12px,3vw,28px) calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg-lighter) 88%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-top:1px solid var(--outline);display:flex;flex-direction:column;gap:8px;
}
.composer textarea{width:100%;resize:none;max-height:40vh;line-height:1.45}
.compose-row{display:flex;align-items:center;gap:8px}
.compose-row select{min-height:44px;padding:6px 10px;font-size:16px;max-width:46%}   /* 40px and .85rem: under the target floor and under the iOS zoom floor, on the one control a phone uses most */
/* The note sits in the row with Post: with one Space it fills the row's left; with a Space picker it
   drops under the controls, full width (round 1 of the Nest Project's improve passes, 2026-10-30). */
.compose-note{flex:1 1 120px;min-width:0;margin:0;font-size:.78rem;line-height:1.35;color:var(--muted)}
.composer:not(.one-space) .compose-note{flex-basis:100%;order:9;margin-top:2px}
.compose-row{flex-wrap:wrap}
.compose-note b{font-weight:500}
.count{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.count.over{color:var(--oxblood)}
.btn.sm{padding:9px 14px;font-size:.85rem;min-height:44px}
.composer.inline{position:static;padding:0;background:none;border:0;backdrop-filter:none;margin-top:12px;flex-direction:row;align-items:flex-end}
.composer.inline textarea{flex:1}
@media (min-width:901px){
  .composer{position:static;padding:0;margin:0 0 18px;background:none;border:0;backdrop-filter:none}
}
body.nav-open .composer{display:none}

/* ── people ────────────────────────────────────────────── */
.people h2,.people h3{font:700 1.1rem var(--serif);color:var(--goose-navy);margin:8px 0 10px}
.people ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:6px}
.people li{background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius-sm);padding:10px 14px}
.people li b{font-weight:600} .people li .h{color:var(--muted);font-size:.85rem;margin-left:6px}
.people li p{margin:4px 0 0;font-size:.9rem;color:var(--muted)}

/* ── toast ─────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);
  max-width:calc(100vw - 32px);background:#1C2B24;color:#fff;padding:11px 16px;border-radius:var(--radius-sm);
  font:500 .9rem var(--sans);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:901px){ .toast{bottom:24px} }

/* ── from elsewhere ────────────────────────────────────── */
.post.remote{border-left:3px solid var(--ochre)}
.post .body.rich{white-space:pre-wrap}
.post .acts .out{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;font:500 .82rem var(--sans);color:var(--muted);text-decoration:none;border-radius:8px}
.post .acts .out:hover{background:rgba(47,93,80,.06);color:var(--goose-navy)}
.following{list-style:none;margin:8px 0 24px;padding:0;display:flex;flex-direction:column;gap:6px}
.following li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius-sm);padding:8px 12px}
.following li .h{color:var(--muted);font-size:.85rem}
.following li .state{margin-left:auto;font-size:.78rem;color:var(--muted)}
.following li .btn{min-height:34px}
.following li.muted{color:var(--muted);background:none;border:0;padding:4px 0}
.pubcard{margin-bottom:12px}
.pubcard .h{color:var(--muted);margin:-4px 0 8px}
.reports{list-style:none;margin:8px 0 24px;padding:0;display:flex;flex-direction:column;gap:8px}
.reports li{background:var(--surface);border:1px solid rgba(122,46,48,.35);border-left:3px solid var(--oxblood);border-radius:var(--radius-sm);padding:10px 12px}
.reports .rbody{margin:0 0 4px;white-space:pre-wrap;overflow-wrap:anywhere}
.reports .rmeta{margin:0 0 8px;font-size:.8rem;color:var(--muted)}
.reports li.muted{border:0;background:none;color:var(--muted);padding:4px 0}
/* Blocked servers: the same panel as reports, in the same key, because it is
   the same job at a larger scale. Fields are 16px so iOS does not zoom the
   page when one takes focus, and every control clears 44px. */
.blk-form{margin:6px 0 12px;display:grid;grid-template-columns:1fr;gap:10px}
.blk-form label{display:flex;flex-direction:column;gap:5px;font:500 .8rem var(--sans);color:var(--muted)}
.blk-form input,.blk-form select{font:400 16px var(--sans);color:var(--text);background:var(--surface);
  border:1px solid var(--outline-strong);border-radius:var(--radius-sm);padding:10px 12px;min-height:44px;width:100%;box-sizing:border-box}
.blk-form .acts{display:flex}
@media (min-width:640px){ .blk-form{grid-template-columns:1fr 1fr} .blk-form .wide,.blk-form .acts{grid-column:1 / -1} }
.blocks{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:8px}
.blocks li{background:var(--surface);border:1px solid var(--outline);border-left:3px solid var(--muted);border-radius:var(--radius-sm);padding:10px 12px}
.blocks li.muted{border:0;background:none;color:var(--muted);padding:4px 0}
.blocks .bd{margin:0 0 4px;overflow-wrap:anywhere}
.blocks .rmeta{margin:0 0 8px;font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
/* .875rem, not the .8rem sentence-case floor: this is the label that says a
   server is suspended or limited, and it is the one word on the page nobody
   should have to look twice at. Err large on a severity. */
.blocks .sev{display:inline-block;font:600 .875rem var(--sans);border-radius:99px;padding:2px 8px;margin-left:6px;
  background:var(--surface-sunk);color:var(--muted);vertical-align:middle}
/* The companion ink tokens, not a literal: --oxblood and --ochre flip with the
   theme, so a fixed white label on them reads 2.23:1 in the dark. */
.blocks .sev-suspend{background:var(--oxblood);color:var(--on-oxblood)}
.blocks .sev-silence{background:var(--ochre);color:var(--on-ochre)}
.badge:not(:empty){display:inline-block;background:var(--oxblood);color:var(--on-oxblood);border-radius:99px;font:600 .8rem var(--sans);padding:2px 7px;vertical-align:middle;margin-left:6px}
.me-edit{margin:4px 0 22px}
.me-edit h3{font:700 1.05rem var(--serif);color:var(--goose-navy);margin:8px 0 4px}
.me-edit .meta-form{margin-top:6px;display:grid;grid-template-columns:1fr;gap:10px}
.me-edit .meta-form label{display:flex;flex-direction:column;gap:5px;font:500 .8rem var(--sans);color:var(--muted)}
.me-edit .meta-form .acts{display:flex}
@media (min-width:640px){ .me-edit .meta-form{grid-template-columns:1fr 2fr} .me-edit .meta-form .wide,.me-edit .meta-form .acts{grid-column:1 / -1} }
.me-edit input{font:400 16px var(--sans);color:var(--text);background:var(--surface);border:1px solid var(--outline-strong);border-radius:var(--radius-sm);padding:10px 12px;min-height:44px}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  /* Initials, not a word, so the 0.875rem uppercase floor does not reach them.

     My first version of this comment said the size was "bound to the circle
     rather than to legibility". Geese Branding MEASURED that and it is false:
     one letter, two letters and "+3" all fit a 26px and a 30px circle at both
     12.8px and 14px. Nothing clips either way, so there was never a layout
     cost and the reasoning had to stand on meaning alone.

     The real reason, which is in the code rather than in taste: colour must
     never be the sole carrier of information, and here it is not. This avatar
     is aria-hidden and sits directly beside the visible name (nest.js:269);
     the presence rails set `title` to the full name (app.js:264,
     doc-live.js:687). The name is available as text, so the glyph is a
     shorthand for scanning, not the thing that tells one person from another.

     THIS CARVE-OUT HAS AN EXPIRY CONDITION. It holds only while the name is
     there as text. Render this without the name beside it, or strip `title`
     off a presence dot, and the letter becomes the only non-colour
     discriminator — at which point initials need the full 14px floor and a
     bigger circle to match. Same shape as .btools{gap:3px}: a rule that
     conforms because of something else, so the something else is named.
     docs/DECISION-touch-targets.md carries the measurements. */
  background:var(--av,var(--goose-navy));color:#fff;font:600 .8rem var(--sans);letter-spacing:.02em;flex:none;align-self:center;margin-right:2px}
.people li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.people li p{flex-basis:100%}
.post .via{margin:-2px 0 6px;font-size:.78rem;color:var(--ochre-text)}

/* ── the map (public/nest-map.js) ──────────────────────── */
.tag{display:inline-block;font:500 .875rem var(--sans);color:var(--ochre-text);background:var(--surface-sunk);border-radius:99px;padding:2px 10px}
button.link{background:none;border:0;padding:0;min-height:44px;font:inherit;color:var(--goose-navy);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.mapview h2{margin:6px 0 10px;font:700 1.4rem var(--serif);color:var(--goose-navy)}
.mapview h3,.mapview .map-h{margin:20px 0 6px;font:700 1.05rem var(--serif);color:var(--goose-navy)}
.map-you{margin:0 0 14px;padding:12px 14px;background:var(--surface-sunk);border-radius:var(--radius-sm)}
.map-you .check{display:flex;gap:10px;align-items:center;min-height:44px;font-size:1rem}
.map-you .check input{width:22px;height:22px;flex:none;accent-color:var(--accent)}
.map-admin{margin:0 0 12px;font-size:.9rem;color:var(--muted)}
.map-fig{margin:0}
.map-fig svg{display:block;width:100%;height:auto;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius)}
.map-fig .land{fill:var(--surface-sunk);stroke:var(--outline-strong);stroke-width:1.5}
.map-fig .pin{cursor:pointer;outline:none}
.map-fig .pin circle{fill:var(--accent);fill-opacity:.9;stroke:var(--surface);stroke-width:4}
.map-fig .pin text{fill:var(--on-accent);font:700 24px var(--sans);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.map-fig .pin.on circle,.map-fig .pin:focus-visible circle{fill:var(--ochre);fill-opacity:1}
.map-fig figcaption{margin-top:8px}
.map-town{margin:14px 0 0;padding:12px 14px;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius)}
.map-town h3,.map-town .map-h{margin:0 0 4px}
.map-towns,.map-people{list-style:none;margin:0;padding:0}
.map-towns li,.map-people li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:44px;border-bottom:1px solid var(--outline)}
.map-towns .n{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.map-people .h{color:var(--muted);font-size:.875rem;margin-left:6px}

/* ── the shell's places ───────────────────────────────── */
.post .who a.name b{font:600 .95rem var(--sans);color:var(--text)}
.post .who a.name .h{color:var(--muted);font-size:.85rem}

.roomcard .room-name{text-decoration:none;color:inherit}
.roomcard .room-name:hover b{text-decoration:underline;text-underline-offset:3px}
.roomcard .rl-who{font-weight:600;color:var(--goose-navy)}
.avatar.room{background:var(--surface-sunk);color:var(--goose-navy);font:700 1rem var(--sans)}
.avatar.big{width:56px;height:56px;font-size:1.2rem}
.sub{margin:22px 0 8px;font:700 1.1rem var(--serif);color:var(--goose-navy)}
.lede{margin:0 0 12px;color:var(--muted)}
.profile-card{background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-1)}
.pc-head{display:flex;align-items:center;gap:14px}
.pc-head h2{margin:0;font:700 1.3rem var(--serif);color:var(--goose-navy);overflow-wrap:anywhere}
.pc-head .h{margin:2px 0 0;color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.pc-bio{margin:12px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.pc-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:12px 0 0;color:var(--muted);font-size:.9rem}
.room-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.room-list a{display:grid;gap:4px;padding:14px 16px;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius);
  color:var(--text);text-decoration:none;box-shadow:var(--shadow-1)}
.room-list a:hover{border-color:var(--outline-strong)}
.room-list .rm-title{font:600 1.05rem var(--sans);color:var(--goose-navy)}
/* The room's mark: its first letter in its flag colour, on a tint of it (improve round 2, Rooms). */
.room-list a{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;row-gap:2px;align-items:start}
.room-list .rm-mark{grid-row:1 / span 3;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;
  font:700 1.25rem/1 var(--serif);color:var(--c,var(--goose-navy));background:color-mix(in srgb,var(--c,var(--goose-navy)) 14%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--goose-navy)) 30%,transparent)}
.room-list .rm-last.quiet{font:italic 400 .95rem var(--serif);color:var(--muted)}
.room-list .rm-last{color:var(--text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.room-list .rm-meta{font-size:.875rem;color:var(--muted)}
.room-list .rm-meta:empty{display:none}
.res-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.res-list li{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius-sm)}
.res-list span{color:var(--muted);font-size:.95rem}
.res-list a{color:var(--goose-navy)}
.resources .agreements{margin-top:0}
.people .role-acts{margin-left:auto}
/* The federation tick: a checkbox beside its sentence, not a 44px-tall field above it. */
.me-edit .meta-form label.check{flex-direction:row;align-items:flex-start;gap:12px;font:400 .95rem var(--sans);color:var(--text)}
.me-edit .meta-form label.check input{width:22px;height:22px;min-height:0;padding:0;flex:none;margin-top:2px;accent-color:var(--accent)}

/* ── events (public/nest-events.js) ───────────────────── */
.ev-top{display:flex;justify-content:flex-end;margin:0 0 12px}
.ev-list{display:flex;flex-direction:column;gap:10px}
.ev{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius);box-shadow:var(--shadow-1)}

.ev-date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:72px;border-radius:12px;background:var(--surface-sunk);color:var(--goose-navy);text-decoration:none;line-height:1.1}
.ev-date .m{font:700 .875rem var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ochre-text)}
.ev-date .d{font:700 1.6rem var(--serif)}
.ev-date .w{font:500 .875rem var(--sans);color:var(--muted)}
.ev-main{min-width:0}
.ev .ev-name{margin:0;font:600 1.1rem var(--sans);overflow-wrap:anywhere}
.ev .ev-name a{color:var(--text);text-decoration:none}
.ev .ev-name a:hover{text-decoration:underline;text-underline-offset:3px}
.ev-when{margin:4px 0 0;color:var(--goose-navy);font-weight:500}
.ev-host{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.ev-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.ev-rsvp[aria-pressed=true]{background:var(--surface);color:var(--goose-navy);border:1.5px solid var(--accent)}
.ev-band{color:var(--muted);font-size:.95rem}
.ev-band.big{font:600 1.05rem var(--sans);color:var(--goose-navy);margin:16px 0 0}
.ev-you{font:600 .95rem var(--sans);color:var(--ochre-text)}
.ev-legend{margin:14px 0}
.ev-empty{padding:28px 18px;text-align:center;background:var(--surface);border:1px dashed var(--outline-strong);border-radius:var(--radius)}
.ev-empty p{margin:0 0 6px}
.ev-list.past .ev{opacity:.75}
.ev-form{display:grid;gap:12px;margin:0 0 18px;padding:16px;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius)}
.ev-form .sub{margin:0}
.ev-form label{display:flex;flex-direction:column;gap:6px;font:500 .9rem var(--sans);color:var(--text)}
.ev-form .opt{color:var(--muted);font-weight:400}
.ev-form input,.ev-form textarea{font:400 16px var(--sans);color:var(--text);background:var(--surface);border:1px solid var(--outline-strong);border-radius:var(--radius-sm);padding:10px 12px;min-height:44px;width:100%;box-sizing:border-box}
.ev-form .hint{margin:0;font-weight:400}
.ev-form-acts{display:flex;gap:10px;flex-wrap:wrap}
.ev-detail{background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-1)}
.ev-detail.ev-off{opacity:.8}
.ev-title{margin:0 0 8px;font:700 1.5rem var(--serif);color:var(--goose-navy);overflow-wrap:anywhere}
.ev-when-big{margin:0 0 6px;font-size:1.05rem;line-height:1.45}
.ev-place{margin:0 0 6px;font-weight:500}
.ev-about{margin:12px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.ev-cal{display:inline-flex;align-items:center;min-height:44px;color:var(--goose-navy)}
.ev-cancelled{margin:0 0 10px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--oxblood);color:var(--on-oxblood);font-weight:600}
.ev-people{list-style:none;margin:0;padding:0}
.ev-people li{display:flex;align-items:center;min-height:44px;border-bottom:1px solid var(--outline)}
.ev-people .h{color:var(--muted);font-size:.875rem;margin-left:6px}
.ev-admin{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--outline)}
.pc-sub{margin:16px 0 6px;font:700 1rem var(--serif);color:var(--goose-navy)}
.pc-events{list-style:none;margin:0;padding:0}
.pc-events a{display:flex;flex-direction:column;padding:8px 0;min-height:44px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--outline)}
.pc-events span{color:var(--muted);font-size:.9rem}
.btn-quiet.danger{color:var(--oxblood)}

/* An account's addresses (admins, People). */
.emails-box{flex-basis:100%;margin-top:8px;padding:10px 12px;background:var(--surface-sunk);border-radius:var(--radius-sm)}
.emails-box ul{list-style:none;margin:0 0 8px;padding:0;gap:4px}
.emails-box li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:none;border:0;padding:0;min-height:44px;overflow-wrap:anywhere}
.emails-box .email-add input{font:400 16px var(--sans);min-height:44px;padding:8px 12px;border:1px solid var(--outline-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.people .role-acts{display:flex;flex-wrap:wrap;gap:6px}
@media (min-width:640px){ .row:has(#inv2-also:not([hidden])){grid-template-columns:1fr 1.4fr} .row #inv2-also{grid-column:1 / -1} }

/* The composer sits on the tab bar on a phone (public/nest-shell.css); from 600px it is a card at the top. */
body.has-shell .composer:not(.inline){bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:10px}
body.has-shell .toast{bottom:calc(var(--tabbar-h) + 150px + env(safe-area-inset-bottom))}
@media (min-width:600px){
  body.has-shell .composer:not(.inline){position:static;padding:0;margin:0 0 18px;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.has-shell .toast{bottom:24px}
  .nest{padding-bottom:60px}
}

/* On a phone the composer is one line until you tap it, then it opens: the Space, the count, Post and
   the note about who reads posts. The feed keeps the screen; the composer is there when wanted. */
@media (max-width:599px){
  body.has-shell .composer:not(.open) .compose-row,body.has-shell .composer:not(.open) .compose-note{display:none}
  body.has-shell .composer:not(.open) textarea{min-height:44px;border-radius:22px;padding:10px 16px}
}
.map-fig .pin.many circle{stroke:var(--ochre);stroke-width:5}

/* ── the welcome guide (public/nest-guide.js) ─────────── */
.guide{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;max-height:min(92dvh,760px);border-radius:22px 22px 0 0;
  background:var(--bg-lighter);color:var(--text);box-shadow:var(--shadow-2);overflow:auto}
.guide::backdrop{background:rgba(12,19,16,.5)}
.guide[open]{animation:sheet-in var(--t-sheet,280ms) var(--ease-in,ease-out)}
@media (prefers-reduced-motion:reduce){ .guide[open]{animation:fade-in 200ms linear} }
@media (min-width:600px){ .guide{margin:auto;border-radius:22px} }
.guide-inner{padding:16px 20px calc(18px + env(safe-area-inset-bottom))}
.guide-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.guide-count{margin:0;font:600 .875rem var(--sans);color:var(--muted)}
.guide-x{width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:1.1rem;cursor:pointer}
.guide-x:hover{background:rgba(47,93,80,.08)}
.guide h2{margin:4px 0 8px;font:700 1.5rem var(--serif);color:var(--goose-navy)}
.guide h2:focus{outline:none}
.guide-why{margin:0 0 14px;font-size:1.02rem;line-height:1.55}
.guide-body label{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;font:500 .9rem var(--sans)}
.guide-body .opt{color:var(--muted);font-weight:400}
.guide-body input:not([type=radio]),.guide-body textarea{font:400 16px var(--sans);color:var(--text);background:var(--surface);border:1px solid var(--outline-strong);
  border-radius:var(--radius-sm);padding:10px 12px;min-height:44px;width:100%;box-sizing:border-box}
.guide-preview{display:flex;gap:12px;align-items:flex-start;margin:4px 0 0;padding:12px 14px;background:var(--surface);border:1px dashed var(--outline-strong);border-radius:var(--radius-sm);overflow-wrap:anywhere}
.guide-preview .h{color:var(--muted);font-size:.875rem}
.guide-choice{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.guide-choice label{flex-direction:row;align-items:flex-start;gap:12px;margin:0;padding:12px 14px;background:var(--surface);border:1.5px solid var(--outline);border-radius:var(--radius);cursor:pointer}
.guide-choice label:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.guide-choice input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.guide-choice span{display:flex;flex-direction:column;gap:2px;font-weight:400}
.guide-choice small{color:var(--muted);font-size:.9rem}
.guide-prompts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.chip{min-height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--outline-strong);background:var(--surface);color:var(--goose-navy);font:500 .9rem var(--sans);cursor:pointer}
.chip:hover{background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.guide-events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.guide-events li{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 14px;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius)}
.guide-events li span{display:flex;flex-direction:column;min-width:0}
.guide-events small{color:var(--muted)}
.guide-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}
.guide-right{display:flex;gap:8px}
/* the Getting started and Add to home screen cards, top of the Feed */
.cards:empty{display:none}
.cards{margin:0 0 12px}
.guide-card,.install-card{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:14px 16px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--ochre) 9%,var(--bg));border:0}
.guide-card > div:first-child,.install-card > div:nth-child(2){flex:1 1 220px;min-width:0}
.guide-card p,.install-card p{margin:2px 0 0;color:var(--muted);font-size:.95rem}
.guide-bar{height:6px;margin-top:10px;border-radius:99px;background:var(--surface-sunk);overflow:hidden}
.guide-bar span{display:block;height:100%;background:var(--accent);border-radius:99px}
.install-card img{border-radius:10px;flex:none}
.install-acts{display:flex;gap:8px;flex-wrap:wrap}
.install-steps{margin:10px 0 16px;padding-left:22px;line-height:1.55}
.install-steps li{margin:6px 0}
.install-help h2{margin:0 0 6px;font:700 1.25rem var(--serif);color:var(--goose-navy)}
.guide-events .btn{flex:none;white-space:nowrap}

/* Waiting for a welcome (admins) */
.welcome-card{margin-top:10px;padding:0;border-radius:16px;background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.welcome-card summary{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:14px 44px 14px 16px;min-height:44px;cursor:pointer;list-style:none}
.welcome-card summary::-webkit-details-marker{display:none}
.welcome-card summary::after{content:"›";position:absolute;right:18px;top:50%;margin-top:-.75em;font-size:1.4rem;line-height:1.5;color:var(--muted);transition:transform var(--t-quick,100ms)}
.welcome-card[open] summary::after{transform:rotate(90deg)}
.welcome-card summary .hint{flex-basis:100%;margin:0}
.welcome-card .n{display:inline-block;min-width:24px;padding:1px 8px;border-radius:99px;background:var(--accent);color:var(--on-accent);font:600 .875rem var(--sans);text-align:center}
.welcome-card ul{list-style:none;margin:0;padding:0 16px 8px}
.welcome-card li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--outline)}
.welcome-card li > div{flex:1;min-width:0}
.welcome-card li p{margin:2px 0 0;color:var(--muted);font-size:.92rem;overflow-wrap:anywhere}
.welcome-card .h{color:var(--muted);font-size:.875rem;margin-left:6px}
.caught-up{text-align:center;color:var(--muted);margin:18px 0 6px;font-size:.95rem}
/* (the rainbow mark replaces the tick: see RAINBOW_MARK in nest.js) */

/* Skeletons: a soft pulse, still under reduced motion. */
.skel-list{display:flex;flex-direction:column;gap:10px}
.skel-card{display:grid;grid-template-columns:30px 1fr;gap:8px 10px;padding:16px;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius)}
.skel{display:block;background:var(--surface-sunk);border-radius:6px;animation:skel 1.4s ease-in-out infinite}
.skel-av{width:30px;height:30px;border-radius:50%;grid-row:span 3}
.skel-l1{height:12px;width:40%}.skel-l2{height:12px;width:92%}.skel-l3{height:12px;width:70%}
.skel-map{height:220px;border-radius:var(--radius);margin-top:10px}
@keyframes skel{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){ .skel{animation:none} }
/* The map: your setting, folded once chosen */
.map-you-wrap{margin:0 0 14px;background:var(--surface-sunk);border-radius:var(--radius-sm)}
.map-you-wrap > summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:48px;padding:6px 14px;cursor:pointer;list-style:none;font-weight:500}
.map-you-wrap > summary::-webkit-details-marker{display:none}
.map-you-wrap[open] > summary .link-ish{display:none}
.map-you-wrap .map-you{margin:0;padding-top:0;background:none}
.link-ish{color:var(--goose-navy);text-decoration:underline;text-underline-offset:3px;font-weight:500}

/* Announcements: pinned by an admin, first on everyone's Feed. */
.pins{display:flex;flex-direction:column;gap:10px;margin:0 0 6px;padding:12px;border-radius:calc(var(--radius) + 4px);background:color-mix(in srgb,var(--ochre) 10%,var(--bg))}

.pins .post{border-color:color-mix(in srgb,var(--ochre) 35%,var(--outline))}

/* The door, signed out: what is inside, and the ways in or around. */
.gate-inside{margin-top:18px;padding-top:14px;border-top:1px solid var(--outline)}
.gate-h{margin:0 0 6px !important;font:italic 400 1.05rem var(--serif);color:var(--goose-navy)}
.gate-inside ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.gate-inside li b{display:inline-block;min-width:4.6em;color:var(--goose-navy)}
.gate-err{padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--oxblood) 9%,var(--surface))}

/* People (admins): name and tags, then what they wrote about themselves, then what you can do. */
.people li .role-acts{order:6;flex-basis:100%;margin-left:0 !important}
.people li > p{order:5}
.people li .emails-box{order:7}

/* Initials: the theme's ink-on-accent, not a fixed white. The presence colours are dark in the light
   theme and pale in the dark one, so white letters read 1.8:1 at night (axe, 2026-10-28). */
.avatar{color:var(--on-accent)}
.tag.new{font-size:.8rem;padding:1px 8px;margin-left:6px;vertical-align:middle;background:var(--ochre);color:var(--on-ochre)}

/* Coming up: the next events, on the Feed. */
.soon{margin:0 0 6px;padding:12px;border-radius:calc(var(--radius) + 4px);background:color-mix(in srgb,var(--accent) 9%,var(--bg))}
.soon .pins-h{color:var(--goose-navy)}
.soon ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.soon li{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius)}
.soon-what{flex:1;min-width:0;display:flex;flex-direction:column;color:var(--text);text-decoration:none}
.soon-what span{color:var(--muted);font-size:.9rem}
.soon-what:hover b{text-decoration:underline;text-underline-offset:3px}
.soon .btn{flex:none;white-space:nowrap}
.soon-you{flex:none;font:600 .9rem var(--sans);color:var(--ochre-text)}

/* Resources the organisers keep */
.res-list li a{color:var(--goose-navy);text-decoration:none}
.res-list li a:hover b{text-decoration:underline;text-underline-offset:3px}
.res-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.res-form{display:grid;gap:10px;padding:14px;margin:0 0 10px;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius)}
.res-list li .res-form{padding:0;border:0;margin:0}
.res-form label{display:flex;flex-direction:column;gap:6px;font:500 .9rem var(--sans);color:var(--text)}
.res-form input{font:400 16px var(--sans);color:var(--text);background:var(--surface);border:1px solid var(--outline-strong);border-radius:var(--radius-sm);padding:10px 12px;min-height:44px;width:100%;box-sizing:border-box}

/* A wide screen: the reading column, and beside it what's coming up and which rooms are talking.
   The Feed's own "Coming up" strip steps aside, since the column says it. */
.aside{display:none}
@media (min-width:1200px){
  .nest{max-width:1100px}
  #app.shell{display:grid;grid-template-columns:minmax(0,680px) 300px;gap:40px;justify-content:center;align-items:start}
  .aside{display:flex;flex-direction:column;gap:22px;position:sticky;top:20px;padding-top:58px}
  .aside section{padding:14px 16px;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius);box-shadow:var(--shadow-1)}
  .aside-list{list-style:none;margin:8px 0;padding:0}
  .aside-list a{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--outline);color:var(--text);text-decoration:none}
  .aside-list li:last-child a{border-bottom:0}
  .aside-list a:hover b{text-decoration:underline;text-underline-offset:3px}
  .aside-list span{color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
  .aside-more{display:inline-flex;align-items:center;min-height:44px;color:var(--goose-navy);font-weight:500}
  .soon{display:none}
}

/* Starting soon: a slim banner under the place's title. */
.now{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border-radius:var(--radius);
  background:var(--accent);color:var(--on-accent)}
.now[hidden]{display:none}
.now p{flex:1 1 180px;margin:0}
.now a:not(.btn){color:inherit}
.now .btn{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent);flex:none}
.now-dot{width:10px;height:10px;border-radius:50%;background:#F5A55A;box-shadow:0 0 0 0 rgba(245,165,90,.7);animation:now-pulse 2s infinite;flex:none}
@keyframes now-pulse{70%{box-shadow:0 0 0 10px rgba(245,165,90,0)}100%{box-shadow:0 0 0 0 rgba(245,165,90,0)}}
@media (prefers-reduced-motion:reduce){ .now-dot{animation:none} }

/* Settings: you, inviting someone, help; the fediverse tucked under its own heading. */
.people h2{margin-top:22px}
.set-acts{display:flex;flex-wrap:wrap;gap:8px}
.set-acts [hidden]{display:none}
.set-more{margin:24px 0 0;border-top:1px solid var(--outline);padding-top:8px}
.set-more > summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font:600 1rem var(--sans);color:var(--goose-navy)}
/* One Space: no picker. */
.composer.one-space #compose-flock{display:none}

/* Search */
.search-form{display:flex;gap:8px;margin:0 0 14px}
.search-form input{flex:1;min-width:0;font:400 16px var(--sans);color:var(--text);background:var(--surface);border:1px solid var(--outline-strong);border-radius:22px;padding:10px 16px;min-height:44px}
.search-list{list-style:none;margin:0;padding:0 14px;background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius)}
.search-list a{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--outline);color:var(--text);text-decoration:none}
.search-list li:last-child a{border-bottom:0}
.search-list span{color:var(--muted);font-size:.9rem}
#thread-replies:not(:empty){margin-top:10px}

/* From the UX review */
.me-edit .meta-form label.check > span{display:flex;flex-direction:column;gap:2px}
.me-edit .meta-form label.check .hint{margin:0;font-size:.875rem}
.back,a.back{display:inline-flex;align-items:center;min-height:44px}
/* The Space chips scroll sideways on a phone: a fade at the edge says there is more. */
@media (max-width:599px){ .flocks{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:24px} }
.people-filter{width:100%;box-sizing:border-box;margin:0 0 10px;font:400 16px var(--sans);color:var(--text);background:var(--surface);border:1px solid var(--outline-strong);border-radius:22px;padding:10px 16px;min-height:44px}
.people-filter[hidden]{display:none}
.blk-form select{text-overflow:ellipsis}

/* ⋯ : the quieter actions under a post */
.post .acts .more-btn{font-size:1.2rem;letter-spacing:.05em;min-width:44px;justify-content:center;margin-left:auto}
.post .acts .more-acts{display:flex;flex-wrap:wrap;gap:4px;flex-basis:100%;justify-content:flex-end;padding-top:2px;border-top:1px solid var(--outline)}
.post .acts .more-acts[hidden]{display:none}

/* ══ Brand pass, round two: a field guide, not a stack of cards ══════════════════════
   The brand's trellis is "support you can feel, and no frame around anything", and its
   colours are a field guide's. So entries sit on the page, divided by a hairline rule, the
   way a guide or a notebook divides them: no box, no shadow, no coloured stripe down the
   side. The only containers left are the ones that mean something (the organisers' notice
   board, a sheet you're filling in), one level deep. Headings are Baskerville, in sentence
   case. Corners vary by job: a pill for a chip, 10px for a button, 16px for a board, none
   for an entry. (Research: the catalogue of AI-design tells in avoid-ai-design, 2026.) */

/* Entries */
.feed,.replies{gap:0}
.post{background:none;border:0;border-bottom:1px solid var(--outline);border-radius:0;box-shadow:none;padding:16px 2px 12px}
.post:last-child{border-bottom:0}
.thread .post.root{border:0;border-bottom:2px solid var(--outline-strong);padding-bottom:16px}
.thread .post.root .body{font-size:1.12rem}
.post.remote{border-left:0}
.post.remote .who::after{content:"from elsewhere";order:3;font:italic 400 .875rem var(--serif);color:var(--muted)}

/* A person: their initial in Baskerville, in their colour from the flag, on a tint of it. */
.avatar{background:color-mix(in srgb,var(--av,var(--goose-navy)) 15%,var(--surface));color:var(--av,var(--goose-navy));
  font:700 1rem/1 var(--serif);border-radius:9px;letter-spacing:0}
.avatar.big{border-radius:14px;font-size:1.6rem}
.you-btn .avatar,.you-menu .avatar{border-radius:12px;font-family:var(--serif)}
.you-btn .avatar{background:var(--goose-navy);color:var(--on-accent);font-size:1.05rem}

/* Section headings: Baskerville italic, a small chevron in the section's colour. */
.sec-h{display:flex;align-items:center;gap:8px;margin:6px 0 4px;font:italic 400 1.15rem var(--serif);color:var(--goose-navy)}
.sec-h::before{content:"";width:12px;height:8px;flex:none;background:var(--sec,var(--ochre-text));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 7.5 L7 2 L12.5 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 7.5 L7 2 L12.5 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* The organisers' notice board: the one tinted surface on the Feed, its posts ruled within it. */
.pins{padding:12px 18px 4px;border-radius:16px;background:color-mix(in srgb,var(--ochre) 9%,var(--bg));margin:0 0 18px;gap:0}
.pins .post{border-color:color-mix(in srgb,var(--ochre) 25%,transparent)}
.pins .post:last-child{border-bottom:0}

/* Coming up: a ruled list, the date set in Baskerville, the reply in the Events colour. */
.soon{--sec:var(--hue-orange);padding:0;background:none;border-radius:0;margin:0 0 14px}
.soon ul{gap:0;margin:2px 0 0}
.soon li{padding:12px 2px;background:none;border:0;border-bottom:1px solid var(--outline);border-radius:0}
.soon-what b{font:700 1.02rem var(--serif);color:var(--text)}
.feed > .soon + .post,.feed > .soon + .roomcard{border-top:0}

/* A line overheard in a room: a quotation, not a post. */
.roomcard .overheard{display:flex;align-items:center;gap:6px;margin:0 0 6px;font:italic 400 .95rem var(--serif);color:var(--muted)}
.roomcard .overheard .wgi{width:16px;height:16px;color:var(--hue-blue)}
.roomcard .overheard a{color:var(--hue-blue);font-style:normal;font-family:var(--sans);font-weight:600;text-decoration:none}
.roomcard .overheard time{margin-left:auto;font:400 .8rem var(--sans)}
.roomcard blockquote.body{margin:0;padding:0 0 0 2px;font:400 1.02rem/1.55 var(--sans)}
.roomcard .rl-who{font-weight:600;color:var(--text)}
.roomcard .rl-who::after{content:":"}
.roomcard .acts .out{color:var(--hue-blue)}

/* Events: entries, the date block in the Events colour, "I'm coming" in it too, wherever it is. */
.ev-list{gap:0}
.ev{background:none;border:0;border-bottom:1px solid var(--outline);border-radius:0;box-shadow:none;padding:16px 2px}
.ev:last-child{border-bottom:0}
.ev-date{background:color-mix(in srgb,var(--hue-orange) 6%,var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hue-orange) 28%,transparent);border-radius:12px}
.ev-date .m{color:var(--hue-orange);letter-spacing:.04em}
.ev-date .d{color:var(--text)}
.ev .ev-name{font:700 1.12rem var(--serif)}
.ev-rsvp{background:var(--hue-orange);border-color:var(--hue-orange);color:var(--on-accent)}
.ev-rsvp[aria-pressed=true]{background:none;color:var(--hue-orange);border:1.5px solid var(--hue-orange)}
.ev-detail,.profile-card{background:none;border:0;box-shadow:none;padding:6px 2px 0;border-radius:0}
.ev-title{font-size:1.75rem;color:var(--text)}
.ev-empty{background:none;border:1px dashed var(--outline-strong);border-radius:16px}
.ev-form,.res-form{box-shadow:none;border-radius:16px}

/* Lists in Rooms, Resources and the wide column: ruled rows, no boxes. */
.room-list{gap:0}
.room-list a{background:none;border:0;border-bottom:1px solid var(--outline);border-radius:0;box-shadow:none;padding:14px 2px}
.room-list li:last-child a{border-bottom:0}
.room-list .rm-title{font:700 1.08rem var(--serif);color:var(--hue-blue)}
.res-list{gap:0}
.res-list li{background:none;border:0;border-bottom:1px solid var(--outline);border-radius:0;padding:12px 2px}
.res-list li:last-child{border-bottom:0}
.res-list li > b,.res-list li > a b{font:700 1.02rem var(--serif)}
.aside section{background:none;border:0;box-shadow:none;padding:0}
.aside section + section{padding-top:18px;border-top:1px solid var(--outline);border-radius:0}

/* Notices that lead the Feed: tinted, no stripe; what they are is in the words. */
.guide-card,.install-card{border-radius:16px}
.guide-card b,.install-card b,.welcome-card summary b{font:700 1.05rem var(--serif)}

/* The four agreements: a numbered text in Baskerville numerals, not a box with a rule. */
.agreements{background:none;border:0;padding:0;border-radius:0}
.agreements ol{padding-left:28px}
.agreements li::marker{font:700 1.05rem var(--serif);color:var(--ochre-text)}
.agreements li{margin:8px 0;padding-left:4px}

/* Admin lists that predate this pass, brought in line. */
.reports li,.blocks li{border-left-width:1px;border-radius:12px;box-shadow:none}
.reports li{border-color:color-mix(in srgb,var(--oxblood) 35%,transparent)}
.blocks li{border-left-color:var(--outline)}
.people li{box-shadow:none;border-radius:12px}

/* The map's figure: paper, not a card. */
.map-fig svg{border-radius:16px}
.map-you-wrap{border-radius:14px}

/* The Feed's sign-off and the guide's steps: the flag, where it means something. */
.caught-up{display:flex;flex-direction:column;align-items:center;gap:6px;font:italic 400 1rem var(--serif);color:var(--muted);margin:22px 0 8px}
.rainbow-mark{display:block}

/* Admins' People: ruled rows like everything else. */
#people-list{gap:0}
#people-list > li{background:none;border:0;border-bottom:1px solid var(--outline);border-radius:0;padding:12px 2px}


/* ══ Brand pass, round three: the rainbow marks the way, the page is paper ════════════════
   From an art director's read against the brand page: colour had leaked from the navigation
   into the content (blue links in Rooms, orange buttons in Events), so it meant three things.
   Now the place colours live only in the tab bar, rail and sidebar; inside a page the actions
   are the brand's green and the type is Baskerville and Inter on paper. Pills, tiles and
   tinted avatars, the last stock shapes, become words, numerals and a hairline. */

/* People: an initial on paper, not a colour picked by a hash. */
.avatar{background:var(--surface);color:var(--goose-navy);box-shadow:inset 0 0 0 1px var(--outline-strong)}

/* Spaces, and the rooms' switcher: words in Baskerville italic, a small chevron under the one you're in. */
.flocks{gap:18px;padding:0 0 4px;margin:0 0 10px;border-bottom:1px solid var(--outline)}
.flocks button{position:relative;background:none;border:0;border-radius:0;padding:0 2px 6px;min-height:44px;
  font:italic 400 1.05rem var(--serif);color:var(--muted)}
.flocks button[aria-pressed=true]{background:none;color:var(--goose-navy);font-weight:700}
.flocks button[aria-pressed=true]::after{content:"";position:absolute;left:50%;bottom:-1px;width:14px;height:8px;margin-left:-7px;background:var(--goose-navy);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 7.5 L7 2 L12.5 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 7.5 L7 2 L12.5 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.flocks button:focus-visible{outline:3px solid var(--goose-sky);outline-offset:2px}
@media (max-width:599px){ .flocks{-webkit-mask-image:none;mask-image:none} }

/* Dates set like a journal entry: the day's numeral, the month and the weekday under it. No tile. */
.ev-date{background:none !important;box-shadow:none !important;border-radius:0;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding-top:2px}
.ev-date .d{order:-1;font:700 2rem/1.05 var(--serif);color:var(--goose-navy)}
.ev-date .m,.ev-date .w{font:italic 400 .9rem/1.3 var(--serif);color:var(--muted);text-transform:none;letter-spacing:0}

/* Actions inside a page: the brand's green, wherever they are. */
.ev-rsvp{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ev-rsvp[aria-pressed=true]{background:none;color:var(--goose-navy);border:1.5px solid var(--accent)}
.soon{--sec:var(--ochre-text)}
.roomcard .overheard .wgi,.roomcard .overheard a,.roomcard .acts .out{color:var(--goose-navy)}
.room-list .rm-title{color:var(--goose-navy)}

/* The guide's progress: a skein, five chevrons filling as you go. */
.guide-skein{list-style:none;display:flex;gap:2px;margin:0 auto 0 0;padding:0}
.guide-skein svg{display:block;fill:none;stroke:var(--outline-strong);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.guide-skein li.done svg{stroke:var(--goose-navy-light)}
.guide-skein{align-items:center}
.guide-skein li.now{display:flex;align-items:center;justify-content:center;padding:3px 10px;margin:0 2px;
  background:rgba(47,93,80,.09);border:1px solid rgba(47,93,80,.22);border-radius:999px;
  box-shadow:0 1px 2px rgba(28,43,36,.06)}
.guide-skein li.now svg{stroke:var(--goose-navy);stroke-width:2;transition:opacity .3s ease}

/* Admins' People: one line of plain words per person. */
.linkbtn{background:none;border:0;padding:0;min-height:44px;font:500 .92rem var(--sans);color:var(--goose-navy);text-decoration:underline;text-decoration-color:var(--outline-strong);text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{text-decoration-color:currentColor}
.people .role-acts{gap:0 12px;align-items:center}
.people .role-acts > .linkbtn + .linkbtn::before{content:"·";display:inline-block;margin-right:12px;color:var(--muted);text-decoration:none}

/* The map on the page, not in a white card under a tinted one. Towns in Baskerville. */
.map-fig svg{background:none;border:1px solid var(--outline)}
.map-towns .link{font:italic 400 1.05rem var(--serif);text-decoration-color:var(--outline-strong)}

/* Signed out: the door on paper, with the trellis showing, not a login card. */
.nest .card.gate{background:none;box-shadow:none;border:0;padding-left:0;padding-right:0}
.nest .gate h2{font-size:1.6rem}
/* Find a Goose: states under the map, every goose on the right (2026-10-28) */
.map-states{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
.map-state{background:var(--surface);border:1px solid var(--outline);border-radius:14px;padding:0 14px}
.map-state[open]{grid-column:1/-1}
.map-state>summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;list-style:none;font:700 1.05rem var(--serif);color:var(--goose-navy)}
.map-state>summary::-webkit-details-marker{display:none}
.map-state>summary .n{margin-left:auto;min-width:28px;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:700 .85rem var(--sans);text-align:center}
.map-state .map-towns{padding-bottom:8px}
.map-state .map-towns li:last-child{border-bottom:0}
.map-all{list-style:none;margin:0;padding:0}
.map-all li{display:flex;flex-direction:column;gap:3px;padding:14px 0;border-bottom:1px solid var(--outline)}
.map-all .h{color:var(--muted);font-size:.875rem}
.map-all .d{font-size:.9rem;color:var(--muted);overflow-wrap:anywhere}
.map-all .tag{align-self:flex-start;margin-top:6px}
.map-h .n{color:var(--muted);font:500 .9rem var(--sans);margin-left:6px}
.map-town .map-people li{padding:6px 0}
.map-town .map-people .tag{margin-bottom:6px}
.map-all li.on{background:var(--surface);border:1px solid var(--accent);border-radius:14px;padding:14px;margin-bottom:8px}
.pc-contacts{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pc-contacts b{display:inline-block;min-width:84px;font-weight:600}
.pc-acts{margin:10px 0 0;display:flex;gap:14px;flex-wrap:wrap}
.linkbtn.danger{color:var(--danger,#9b2c2c)}
.rmeta b.urgent{color:var(--danger,#9b2c2c);text-transform:uppercase;letter-spacing:.04em}

/* ── Rainbow pass (Brother James, 2026-10-30): the flag's six colours mark the parts of the app ──
   Each settings section and each guide step owns one; the growing flock in the guide is coloured
   bird by bird, so the colours arrive as the steps do. */
.people h2,.people h3{display:flex;align-items:center;gap:9px}
.people h2::before,.people h3::before{content:'';flex:none;width:11px;height:11px;border-radius:50%;background:var(--c,var(--accent))}
.me-photo{display:flex;align-items:center;gap:16px;margin:2px 0 6px}
.me-photo .avatar.big{width:76px;height:76px;font-size:1.6rem}
.me-photo-acts{display:flex;gap:8px;flex-wrap:wrap}
.me-photo-acts label{cursor:pointer}
.avatar.pic{overflow:hidden;padding:0;background:var(--surface-sunk)}
.avatar.pic img{width:100%;height:100%;object-fit:cover;display:block}
.me-edit .meta-form.reach{grid-template-columns:1fr}
.reach .reach-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.reach .reach-row label{margin:0}
.reach .vis select{font:400 15px var(--sans);color:var(--text);background:var(--surface);border:1px solid var(--outline-strong);border-radius:var(--radius-sm);padding:0 10px;min-height:44px}
.me-edit .meta-form label.check .hint{font-size:.85rem}
/* the guide: one colour per step */
.guide h2{position:relative;padding-top:12px}
.guide h2::before{content:'';position:absolute;top:0;left:0;width:38px;height:5px;border-radius:3px;background:var(--c,var(--accent))}
.guide-skein li.done svg{stroke:var(--c,var(--goose-navy-light))}
.guide-bar{display:flex;gap:4px;background:none;overflow:visible}
.guide-bar span{flex:1 1 0;height:6px;border-radius:99px;background:var(--surface-sunk)}
.guide-bar span.on{background:var(--c,var(--accent))}
/* the page behind the sheet holds still (the scrolling glitch, 2026-10-30) */
html:has(dialog.guide[open]),body:has(dialog.guide[open]){overflow:hidden}   /* html too: shell.css sets overflow-x on html, so html is the viewport's scroller and body alone would not hold it */
.guide{overscroll-behavior:contain}
/* The Space tabs read as buttons (Brother James, 2026-10-30, "clearly separate chat tabs"): pills on a
   soft track, the open one filled in the Nest's green. Replaces the underline-and-chevron tab. */
.flocks{gap:6px;padding:4px;margin:0 0 12px;border-bottom:0;background:var(--surface-sunk);border-radius:999px;width:max-content;max-width:100%}
.flocks button{font:600 .95rem var(--sans);font-style:normal;color:var(--goose-navy);background:transparent;border:1px solid transparent;border-radius:999px;padding:0 16px;min-height:40px;white-space:nowrap}
.flocks button:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.flocks button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:var(--shadow-1)}
.flocks button[aria-pressed=true]::after{display:none}

/* ── improve round 3 (Events + the map, 2026-10-30): the place's colour inside its page, lightly ──
   The day's numeral in the Events colour; an empty calendar drawn in it. On the map, your own note
   is a sentence with a lead-in, not a grey box of text. */
.ev-date .d{color:var(--hue-orange)}
.ev-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 18px 22px}
.ev-empty-ic{display:block;width:40px;height:40px;color:var(--hue-orange);margin-bottom:6px}
.ev-empty-ic .wgi,.ev-empty-ic svg{width:40px;height:40px}
.map-note{margin:0 0 14px;padding:12px 14px;border-left:3px solid var(--hue-green);background:color-mix(in srgb,var(--hue-green) 7%,var(--bg));border-radius:0 12px 12px 0;color:var(--text);font-size:.95rem;line-height:1.5}
.map-note b{color:var(--goose-navy)}
.map-state>summary .n{background:color-mix(in srgb,var(--hue-green) 14%,var(--surface));color:var(--hue-green);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hue-green) 30%,transparent)}

/* ── improve round 4 (Settings + the guide, 2026-10-30) ──
   "(optional)" sits in the label's line, not on a line of its own (it measured 23px below at 375px). */
.guide-body label{display:block}
.guide-body label > input,.guide-body label > textarea{margin-top:6px}
.guide-body label .opt{margin-left:4px}
.guide-preview .avatar{width:40px;height:40px}

/* ── improve round 5 (the whole app, 2026-10-30): one skeleton everywhere, a soft arrival, the flag on people ──
   Every list that loads shows the skeleton (window.nestShell.skeleton), never the word "Loading…".
   What replaces it arrives with a short fade; nothing moves under reduced motion. */
.skel-list{margin:0 0 10px}
li > .skel-list{margin:0}
@media (prefers-reduced-motion:no-preference){
  .feed > .post,.feed > .soon,.feed > .pins,.room-list > li,.ev-list > .ev,.ev-detail,.map-fig,.profile-card{animation:fade-in var(--t-enter,220ms) var(--ease,ease-out) both}
}
/* A person's initial in their own flag colour, on a tint of it: the same colour wherever they appear.
   (Round three of the brand pass set every initial on paper; Brother James asked on 2026-10-30 for the
   six colours through the app, and a person is the place the flag means most.) A photo needs no tint. */
.avatar:not(.pic){background:color-mix(in srgb,var(--av,var(--goose-navy)) 13%,var(--surface));color:var(--av,var(--goose-navy));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--av,var(--goose-navy)) 32%,transparent)}
.you-btn .avatar:not(.pic){background:var(--goose-navy);color:var(--on-accent);box-shadow:none}
/* Profile pictures sized the way the big apps do it (Brother James, 2026-10-30): feed and chat rows
   40px like Facebook's feed and Discord's messages (Instagram's feed is 32, the smallest of the three);
   a member list 32px like Discord's; a profile head 96px on a phone and 120px on a wide screen,
   between Instagram's 77/150 and Facebook's 130/168. The name sits beside, bold, handle under it. */
.post .who .avatar,.thread .who .avatar{width:40px;height:40px;font-size:1.05rem}
.people li .avatar,.map-people .avatar{width:32px;height:32px}
.pc-head .avatar.big{width:96px;height:96px;font-size:2.2rem}
.pc-head{gap:16px}
.me-photo .avatar.big{width:96px;height:96px;font-size:2.2rem}
@media (min-width:700px){ .pc-head .avatar.big,.me-photo .avatar.big{width:120px;height:120px;font-size:2.8rem} }
.guide-preview .avatar{width:44px;height:44px}

/* ── improve round 1b (Feed post card, 2026-10-30): the reply preview, a feather that lifts, who gave it ──
   Research: nest-best-of-2026-10-30.md §1-2. The reply button says how many and how recent, so a phone
   reader knows whether to open it; the feather lifts for 140 ms when given; a long press or ⋯ shows names. */
.post .acts .last{color:var(--muted);font-weight:400}
@media (prefers-reduced-motion:no-preference){
  .post .acts button.pop .wgi,.post .acts button.pop [data-icon]{animation:feather-pop 140ms ease-out}
  @keyframes feather-pop{40%{transform:translateY(-4px) scale(1.25)}100%{transform:none}}
}
.who-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 6px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--surface-sunk);font-size:.875rem}
.who-box .h{color:var(--muted)}
.who-one{display:inline-flex;align-items:center;gap:6px;min-height:28px;color:var(--text);text-decoration:none}
.who-one .avatar{width:24px;height:24px;font-size:.7rem}
.who-one:hover span{text-decoration:underline;text-underline-offset:3px}

/* ── improve round 3 (the profile card, 2026-10-30): who they are at a glance ──
   Research: nest-best-of-2026-10-30.md §5. Role and Lead sit under the name as Discord's popout puts
   roles; "New here" for seven days (Mighty Networks); two numbers say what they have given; the friend
   ask is a button, not a link, as Slack's and Discord's Message button is. */
.tag.new{color:var(--goose-navy);background:color-mix(in srgb,var(--ochre) 18%,var(--surface))}
.post .who .tag.new{font-size:.72rem;padding:1px 8px;align-self:center}
.pc-tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.pc-tags:empty{display:none}
.pc-meta b{color:var(--text);font-weight:600}
.pc-hello{margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--ochre);background:var(--surface-sunk);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.9rem}
.pc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 0}
.profile-view .feed .tag.new{display:none}   /* the card above already says it */

/* ── improve round 4 (Events and the Map, 2026-10-30): the tap that feels sure, the calendar next ──
   Research: nest-best-of-2026-10-30.md §7, §11. "I'm coming" pops the way the feather does; the calendar
   link appears beside it the moment you're coming; the map says what is coming up, and rings the town. */
@media (prefers-reduced-motion:no-preference){
  .ev-rsvp.pop{animation:rsvp-pop 160ms ease-out}
  @keyframes rsvp-pop{40%{transform:scale(1.06)}100%{transform:none}}
}
.ev-acts .ev-cal,.soon .ev-cal{font:500 .85rem var(--sans);color:var(--goose-navy);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.soon li .ev-cal{margin-left:8px}
.ev-cal-row{margin:10px 0 0}
.map-soon{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:6px}
.map-soon a{display:flex;flex-direction:column;gap:2px;min-height:44px;justify-content:center;padding:8px 12px;border-left:3px solid var(--ochre);background:var(--surface-sunk);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text);text-decoration:none}
.map-soon a span{font-size:.85rem;color:var(--muted)}
.map-soon a:hover b{text-decoration:underline;text-underline-offset:3px}
.map-fig .pin.ev circle{stroke:var(--ochre);stroke-width:6}
/* The Coming-up strip on a phone: the event on one line, the actions on the next, so a title can breathe. */
.soon li{flex-wrap:wrap}
.soon-acts{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap}
@media (max-width:480px){ .soon-acts{flex-basis:100%} }

/* ── improve round 5 (motion, badges, a11y, 2026-10-30) ──
   Research: nest-best-of-2026-10-30.md §9-10. The feed is role=feed and a room is role=log (ARIA 1.2),
   not whole-list live regions; a name link clears the 24 px floor (WCAG 2.5.8); what still moved under
   reduced motion now holds still (2.3.3). */
.post .who a.name{min-height:24px;padding:2px 0;align-items:center}
.post .who a.name .h{align-self:baseline}
@media (prefers-reduced-motion:reduce){
  .toast,.guide-skein li.now svg,.fresh button{transition:none}
}
.roomcard .room-name,.roomcard .overheard a{min-height:24px;display:inline-flex;align-items:center}   /* the 24 px floor, WCAG 2.5.8 */