/* The Nest's app shell (public/nest-shell.js): one way around for /nest and /rooms.
   Three layouts by window width — a bottom tab bar on a phone, a rail on a small
   tablet, a sidebar from 900px — all drawing the same five places.

   Motion is one set of values, used everywhere in the Nest (Material 3's standard
   easing; NN/g's 100–500ms, as short as doesn't look jarring). Under reduced
   motion, movement becomes a short fade and feedback stays. */
:root{
  /* The rainbow, one colour per place (public/nest-shell.js PLACES). The brand's text-strength set on
     paper and its lifted set in the dark (shell.css), so each clears 4.5:1 as text and as an icon. */
  --hue-red:var(--stripe-red); --hue-orange:var(--stripe-orange); --hue-yellow:var(--stripe-yellow);
  --hue-green:var(--role-connector); --hue-blue:var(--stripe-blue); --hue-purple:var(--stripe-purple);
  --place:var(--goose-navy);
  --ease:cubic-bezier(.2,0,0,1);
  --ease-in:cubic-bezier(.05,.7,.1,1);
  --t-quick:100ms; --t-enter:220ms; --t-exit:160ms; --t-sheet:280ms;
  --tabbar-h:64px;
}

/* Signed in, the shell carries the mark and the way around, so the site's
   masthead would be a second, different menu on the same screen. */
body.has-shell .bar,body.has-shell .pagehead{display:none}
body.has-shell{padding-top:0 !important}   /* shell.css makes room for the fixed masthead that is now hidden */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── the bar at the top of each place: where you are, and you ── */
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;margin:0 0 10px;
  padding:calc(8px + env(safe-area-inset-top)) 0 8px;background:var(--bg)}
.appbar h1{flex:1;margin:0;font:700 1.35rem var(--serif);color:var(--goose-navy);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar h1:focus{outline:none}
/* Focus lands on the heading when the place changes (so a screen reader starts there), but a heading
   is not a control: no ring. */
.appbar h1:focus-visible{outline:none}
.you-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
/* The initials circle, defined here too so /rooms (which doesn't load nest.css) draws it the same. */
.you-btn .avatar,.you-menu .avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;font:600 .875rem var(--sans);letter-spacing:.02em}
.you-btn .avatar{width:38px;height:38px;margin:0;background:var(--goose-navy);color:var(--on-accent)}
.you-menu .avatar.big{width:56px;height:56px;font-size:1.2rem;background:var(--goose-navy);color:var(--on-accent)}
.you-btn:focus-visible{outline:3px solid var(--goose-sky);outline-offset:2px}

/* ── phone: the tab bar ─────────────────────────────── */
.tabbar{display:none}
body.has-shell .tabbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:color-mix(in srgb,var(--bg-lighter) 92%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-top:1px solid var(--outline)}
.tabbar ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,1fr);max-width:560px}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--tabbar-h);touch-action:manipulation;
  color:var(--muted);text-decoration:none;font:500 .75rem/1.1 var(--sans);letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
.tabbar a .wgi{width:24px;height:24px;padding:3px 16px;border-radius:99px;box-sizing:content-box;transition:background var(--t-quick) var(--ease)}
.tabbar a[aria-current=page]{color:var(--goose-navy);font-weight:700}
.tabbar a[aria-current=page] .wgi{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.tabbar a:focus-visible{outline:3px solid var(--goose-sky);outline-offset:-3px;border-radius:12px}
.tabbar a:active .wgi{background:color-mix(in srgb,var(--accent) 26%,transparent)}
/* Nothing under the tab bar: pages end above it, and their own bottom bars sit on it. */
body.has-shell{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}

/* ── the sidebar / rail: hidden on a phone ───────────── */
.side{display:none}

/* ── 600–899: the rail ──────────────────────────────── */
@media (min-width:600px){
  body.has-shell .tabbar{display:none}
  body.has-shell{padding-bottom:0;padding-left:calc(88px + env(safe-area-inset-left))}
  .side{display:flex;flex-direction:column;align-items:stretch;gap:4px;position:fixed;top:0;bottom:0;left:0;z-index:40;width:88px;
    padding:calc(12px + env(safe-area-inset-top)) 6px calc(12px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
    background:var(--bg-lighter);border-right:1px solid var(--outline);overflow-y:auto;box-sizing:border-box}
  .side-places{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
  .side-link{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;border-radius:14px;
    color:var(--muted);text-decoration:none;font:500 .75rem/1.1 var(--sans)}
  .side-link .wgi{width:24px;height:24px;padding:4px 16px;border-radius:99px;box-sizing:content-box;transition:background var(--t-quick) var(--ease)}
  .side-link:hover .wgi{background:rgba(47,93,80,.08)}
  .side-link[aria-current=page]{color:var(--goose-navy);font-weight:700}
  .side-link[aria-current=page] .wgi{background:color-mix(in srgb,var(--accent) 18%,transparent)}
  .side-link:focus-visible{outline:3px solid var(--goose-sky);outline-offset:1px}
  .side-mark{display:flex;justify-content:center;padding:8px 0 14px}
  .side-mark .lbl{display:none}
  .side-me{display:none}
}

/* ── 900 and up: the sidebar ────────────────────────── */
@media (min-width:900px){
  body.has-shell{padding-left:248px}
  .you-btn{display:none !important}
  .side{width:248px;padding:calc(14px + env(safe-area-inset-top)) 12px 16px;gap:6px}
  .side-mark{display:flex;justify-content:flex-start;align-items:center;gap:12px;min-height:48px;padding:0 12px;margin-bottom:6px;
    font:700 1.15rem var(--serif);color:var(--goose-navy);text-decoration:none}
  .side-mark .lbl{display:inline;align-self:flex-end;margin-top:2px;margin-right:-4px}
  .side-mark{flex-direction:column;align-items:flex-start;gap:0;width:max-content;min-height:0}
  .side-places{gap:2px}
  .side-link{flex-direction:row;gap:12px;min-height:48px;padding:0 12px;border-radius:10px;font:500 1rem var(--sans);color:var(--text)}
  .side-link .wgi{width:1.25em;height:1.25em;padding:0;background:none !important}
  .side-link:hover{background:rgba(47,93,80,.08)}
  .side-link[aria-current=page]{background:var(--accent);color:var(--on-accent);font-weight:600}
  .side-me{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:10px;border-top:1px solid var(--outline)}
  .side-me a,.side-me button{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;border:0;background:none;
    font:500 .95rem var(--sans);color:var(--text);text-decoration:none;cursor:pointer;text-align:left;width:100%}
  .side-me [hidden]{display:none}
  .side-me a:hover,.side-me button:hover{background:rgba(47,93,80,.08)}
  .side-me a[aria-current=page]{background:var(--accent);color:var(--on-accent)}
  .side-me a:focus-visible,.side-me button:focus-visible{outline:3px solid var(--goose-sky);outline-offset:1px}
  .side-you{flex-direction:column;align-items:flex-start !important;justify-content:center;line-height:1.25;padding:6px 12px !important}
  .side-you span{font-size:.875rem;color:var(--muted)}
  .side-you[aria-current=page] span{color:inherit;opacity:.85}
  .side-out{color:var(--muted) !important}
}

/* ── "You": a sheet from the bottom on a phone, a card on a tablet ── */
.you-menu{border:0;padding:0;margin:auto auto 0;width:100%;max-width:520px;border-radius:20px 20px 0 0;
  background:var(--bg-lighter);color:var(--text);box-shadow:var(--shadow-2)}
.you-menu::backdrop{background:rgba(12,19,16,.45)}
.you-menu[open]{animation:sheet-in var(--t-sheet) var(--ease-in)}
.you-inner{padding:18px 18px calc(14px + env(safe-area-inset-bottom))}
.you-head{display:flex;align-items:center;gap:14px;padding:0 4px 12px;border-bottom:1px solid var(--outline)}
.you-head h2{margin:0;font:700 1.15rem var(--serif);color:var(--goose-navy)}
.you-head p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.you-menu ul{list-style:none;margin:8px 0;padding:0}
.you-menu li:has(> [hidden]){display:none}
.you-menu li a,.you-menu li button{display:flex;align-items:center;width:100%;min-height:52px;padding:0 6px;border:0;background:none;
  font:500 1.05rem var(--sans);color:var(--text);text-decoration:none;cursor:pointer;text-align:left;border-bottom:1px solid var(--outline)}
.you-menu li:last-child button{border-bottom:0}
.you-menu .side-out{color:var(--muted)}
.you-close{width:100%}
@media (min-width:600px){ .you-menu{margin:auto;border-radius:20px} .you-inner{padding-bottom:16px} }
@keyframes sheet-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .you-menu[open]{animation:fade-in var(--t-enter) linear} }

/* High contrast asked for: solid where we were translucent, firmer lines. */
@media (prefers-contrast:more){
  body.has-shell .tabbar{background:var(--bg-lighter);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:2px solid var(--text)}
  .side{border-right:2px solid var(--text)}
  .tabbar a,.side-link{color:var(--text)}
}

/* Something new in Rooms: a small dot on the icon. The words are there too, for screen readers. */
.tabbar a.has-new,.side-link.has-new{position:relative}
.tabbar a.has-new::after,.side-link.has-new::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--ochre);border:2px solid var(--bg-lighter);top:9px;left:calc(50% + 10px)}
@media (min-width:900px){ .side-link.has-new::after{top:50%;left:auto;right:14px;margin-top:-5px} }

.icon-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--goose-navy)}
.icon-btn:hover{background:rgba(47,93,80,.08)}
.icon-btn:focus-visible{outline:3px solid var(--goose-sky);outline-offset:2px}

/* The rail's mark says what it is (a lone chevron read as "scroll up"). */
.side-mark .lbl-short{display:none}
@media (min-width:600px) and (max-width:899px){ .side-mark{flex-direction:column;align-items:center;gap:2px;text-decoration:none} .side-mark .lbl-short{display:block;font:700 .8rem var(--serif);color:var(--goose-navy)} }
/* Sign out is an ordinary action, not a disabled one. */
.side-out,.you-menu .side-out{color:var(--text) !important}

@media (prefers-color-scheme:dark){ :root{ --hue-green:var(--stripe-green) } }

/* ── round 1 of the brand pass: the mark, and a colour for each place ── */
/* The logo at the top left of the bar, before the place's name, wherever the sidebar isn't showing it. */
.bar-mark{flex:none;display:inline-flex;align-items:center;min-height:44px;padding-right:12px;margin-right:2px;border-right:1px solid var(--outline)}
.bar-mark img{display:block;width:auto;height:36px}
/* From 600px the rail or the sidebar carries the mark, so the bar doesn't repeat it. */
@media (min-width:600px){ .bar-mark{display:none} }
/* The place's name, in Baskerville. (A coloured chevron sat before it; beside the logo's own chevron on
   a phone it was one mark too many. The section heads keep theirs.) */
@media (max-width:599px){ .appbar h1{font-size:1.18rem} }

/* The open place wears its colour: the word and icon in the tab bar and rail, the fill in the sidebar. */
.tabbar a[aria-current=page],.side-link[aria-current=page]{color:var(--hue)}
.tabbar a[aria-current=page] .wgi,.side-link[aria-current=page] .wgi{background:color-mix(in srgb,var(--hue) 15%,transparent)}
@media (min-width:900px){
  .side-link[aria-current=page]{background:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hue) 45%,transparent);color:var(--hue);font-weight:700}
  .side-link[aria-current=page] .wgi{background:none}
}

/* The mark in the rail and the sidebar. */
.side-mark{text-decoration:none}
.side-mark picture,.side-mark img{display:block}
@media (min-width:600px) and (max-width:899px){
  .side-mark{padding:6px 0 16px !important}
  .side-mark img{width:68px;height:auto}
  .side-mark .lbl,.side-mark .lbl-short{display:none !important}
}
@media (min-width:900px){
  .side-mark{flex-direction:column;align-items:flex-start !important;gap:2px !important;min-height:0 !important;padding:6px 12px 18px !important;margin-bottom:4px}
  .side-mark img{width:140px;height:auto}
  .side-mark .lbl{display:block;font:italic 400 1.05rem var(--serif);color:var(--muted);padding-left:2px}
}

/* The person mark in the bar, on pages that don't load nest.css (/rooms): Baskerville, as everywhere. */
.you-btn .avatar,.you-menu .avatar{font-family:var(--serif) !important;font-weight:700;border-radius:12px}
/* A photo in the You button and sheet: rooms.html loads this sheet but not nest.css, where the feed's
   .avatar.pic lives, so the rule has to be here too or the photo draws at full size (Nest Project seat, 2026-10-30). */
.you-btn .avatar.pic,.you-menu .avatar.pic{overflow:hidden;padding:0;background:var(--surface-sunk,#e9e4d6)}
.you-btn .avatar.pic img,.you-menu .avatar.pic img{width:100%;height:100%;object-fit:cover;display:block}

/* A phone: "Find a Goose" is the longest place name, and at 375px it needed 130px where the bar left
   106 (measured, improve round 3). The mark and the title both give a little, so no title is cut. */
@media (max-width:599px){
  .appbar{gap:8px}
  .bar-mark{padding-right:8px}
  .bar-mark img{height:30px}
  .appbar h1{font-size:1.08rem}
}
/* You, top right: 40px like a feed row; the sheet's head 80px like Discord's profile popout (2026-10-30). */
.you-btn .avatar{width:40px;height:40px}
.you-menu .avatar.big{width:80px;height:80px;font-size:1.8rem}
/* No rubber-band at the top (Brother James, 2026-10-30, screenshot 9:14pm): iOS let the whole page be
   pulled down past its top, blank paper opened above the bar while the fixed composer stayed put over
   the middle of a post, and nothing reloaded. Safari 16+ honours this on the page scroller; the pull
   itself becomes a refresh, drawn by nest.js (#ptr), the way a social feed does it. */
html,body{overscroll-behavior-y:none}
#ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 10px);z-index:21;width:40px;height:40px;margin-left:-20px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-2);display:flex;align-items:center;justify-content:center;color:var(--goose-navy);
  transform:translateY(-60px);opacity:0;transition:transform .18s ease-out,opacity .18s ease-out;pointer-events:none}
#ptr.pull{transition:none}
#ptr svg{display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
#ptr.armed svg{transform:rotate(180deg)}
#ptr.spin svg{animation:ptr-spin .8s linear infinite}
@keyframes ptr-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ #ptr.spin svg{animation:none;opacity:.6} }

/* improve round 5 (2026-10-30): nothing slides under reduced motion, the tab bar's icon included. */
@media (prefers-reduced-motion:reduce){ .tabbar a .wgi,.side-link .wgi,#ptr{transition:none} }