/* Chromatlas menus, round 2 (2026-10-08): one family for every sheet, menu, toast and the rooms stem.
   Loaded last, so it settles the older rules in app.css and css/polish.css. Spec: design/round2/MENUS.md.
   The family: an opaque level-1 sheet with a grabber; a title-2 header with at most two solid 44 px icon
   buttons; quiet 60 px rows (leading glyph or chip, serif label, a note value, then a chevron or a switch);
   one paper primary at most; destructive actions in --bad, always confirmed in a sheet, never confirm(). */

/* ============================================================ the shell: full-screen rooms, one corner, one spacer
   David, 2026-10-08: "things should be full screen now, and the button should be on the very bottom left".
   A room fills the whole screen edge to edge: under the status bar (content padded by the top inset) and
   through the home indicator. --vb (js/core.js vbFix) is the strip an iPhone Home Screen app leaves below its
   viewport; every bottom-pinned surface reaches through it so there's never a band of a different black.
   --dock is the one bottom spacer every room and corner page reserves: the corner, its gap and a breath. */
:root{--corner:48px;--corner-gap:8px;--vb:0px;
  --corner-b:calc(var(--bottom) + var(--corner-gap) - var(--vb));
  --dock:calc(var(--bottom) + var(--corner-gap) + var(--corner) + 28px);
  --tabh:var(--dock)}
/* html,body background left as before (2026-10-08 black-bar regression) */
/* David, 2026-10-09: "swiping from right to left creates a black screen that's panned in" -- the map's own
   canvas already sets touch-action:none (css/honey.css .hc-cv), but nothing stopped the PAGE itself (html/body)
   from rubber-banding or scrolling horizontally if a gesture ever slipped past it (a tap that starts on an
   overlay, an edge-swipe). overscroll-behavior:none on the root is the standard fix: no page-level pan/bounce in
   either axis, in any browser. Doesn't touch any element's own intentional scrolling (overscroll-behavior:contain
   on each scroll container, set throughout, still works exactly as before). */
html,body{overscroll-behavior:none}
.room-floor-peek{display:none}
.room-sheet{top:0;bottom:calc(-1 * var(--vb));border-radius:0;box-shadow:none;background:var(--ground)}
.room-sheet>.screen{padding-top:calc(var(--top) + 18px)}
.room-sheet>.screen.has-tabs,.room-sheet>.screen{padding-bottom:var(--dock)}
.room-sheet .x-head{padding-top:calc(var(--top) + 8px)}.room-sheet .art-top{padding-top:calc(var(--top) + 6px)}
/* the fade under the corner, now into the ground, short enough that it never veils a line you can still read */
.room-sheet::after{height:calc(var(--bottom) + var(--corner) + 20px);
  background:linear-gradient(rgba(14,13,11,0),rgba(14,13,11,.82) 55%,var(--ground) 88%)}
/* the corner: very bottom-left, just above the home indicator, smaller and lighter than before */
.corner{width:var(--corner);height:var(--corner);bottom:var(--corner-b);
  background:var(--surface-2);border:1px solid rgba(236,232,223,.1);box-shadow:0 4px 14px rgba(0,0,0,.38)}
.corner.l{left:16px}.corner.r{right:16px}
.corner svg{width:20px;height:20px}
/* Home has one right corner now (#hmDo, js/home.js doMenu): every verb lives in its menu */
/* A floating sheet (unlike a full-bleed .room-sheet) stays anchored to bottom:0 — shifting it down by --vb
   (2026-10-08, left over from this file's first draft) pushed every bottom sheet's real content that far below
   the visible viewport on an iPhone Home Screen app, slicing off its last row with no way to scroll to it
   (David's Study-sheet screenshot, 2026-10-09: the format chips were cut and the sheet couldn't scroll further).
   The belt-and-braces box-shadow a few rules down (0 160px 0 0 var(--surface-1)) already paints the strip below
   the sheet's real edge, so no position shift is needed here. */
.sheet{padding-bottom:calc(var(--bottom) + 20px)}
.sheet:focus{outline:none}

/* ============================================================ the rooms stem (js/core.js toggleStem) */
/* the page stays put and visible under a solid scrim (no blanking, no blur); a tap on it only closes */
body.stem-open .screen,body.stem-open .hc,body.stem-open .hm-stage{filter:none}
.rm-scrim{position:fixed;inset:0;bottom:calc(-1 * var(--vb));z-index:16;background:rgba(10,9,8,.62);opacity:0;touch-action:none;
  transition:opacity 260ms ease-out;-webkit-tap-highlight-color:transparent}
.rm-scrim.on{opacity:1}
.corner.on{z-index:18}
.corner.on svg{animation:mnSpin var(--dur-2) var(--ease-grow) both}
.corner[aria-expanded="false"] svg{animation:mnSpinBack var(--dur-2) var(--ease-grow) both}
/* the open corner's ✕ is never dimmed: the corner lives inside #app's stacking context, under the body-level scrim, so
   the scrim leaves a clear disc over the corner it rose from (a tap there still lands on the scrim and closes, like the ✕) */
.rm-scrim-l,.rm-scrim-r{--hx:calc(16px + var(--corner) / 2);--hy:calc(100% - var(--corner-b) - var(--vb) - var(--corner) / 2)}
.rm-scrim-l{-webkit-mask:radial-gradient(circle at var(--hx) var(--hy),transparent calc(var(--corner) / 2 + 1px),#000 calc(var(--corner) / 2 + 2px));
  mask:radial-gradient(circle at var(--hx) var(--hy),transparent calc(var(--corner) / 2 + 1px),#000 calc(var(--corner) / 2 + 2px))}
.rm-scrim-r{-webkit-mask:radial-gradient(circle at calc(100% - var(--hx)) var(--hy),transparent calc(var(--corner) / 2 + 1px),#000 calc(var(--corner) / 2 + 2px));
  mask:radial-gradient(circle at calc(100% - var(--hx)) var(--hy),transparent calc(var(--corner) / 2 + 1px),#000 calc(var(--corner) / 2 + 2px))}
/* the icon never starts from an invisible frame (a blank corner if the animation stalls or a screenshot lands on frame 1) */
@keyframes mnSpin{from{transform:rotate(-90deg) scale(.6)}}
@keyframes mnSpinBack{from{transform:rotate(90deg) scale(.6)}}

/* the capsules: low, under the thumb, a straight stack up the side, each picture centered over the corner */
.rooms-stem{position:fixed;inset:0;z-index:17;pointer-events:none;
  --step:min(66px,calc((100dvh - var(--top) - var(--bottom) - 150px) / var(--n,5)));
  --base:calc(var(--corner-b) + var(--corner) + 12px)}
.rooms-stem .rm-bubble{position:absolute;left:calc(11px + var(--x,0px));bottom:calc(var(--base) + var(--step) * var(--i));
  height:58px;display:flex;align-items:center;gap:12px;padding:3px 22px 3px 3px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid rgba(236,232,223,.14);box-shadow:0 10px 28px rgba(0,0,0,.5);
  color:var(--ink);text-align:left;pointer-events:auto;-webkit-tap-highlight-color:transparent;
  transform-origin:30px 100%;opacity:0;
  transform:translate(calc(-1 * var(--x,0px)),calc(var(--step) * (var(--i) + 1) * .55)) scale(.55);
  transition:transform 200ms cubic-bezier(.4,0,1,1),opacity 160ms ease-in;
  transition-delay:calc((var(--n,5) - 1 - var(--i)) * 18ms)}
.rooms-stem.on .rm-bubble{opacity:1;transform:none;
  transition:transform 460ms var(--ease-grow),opacity 220ms ease-out,background var(--dur-0);
  transition-delay:calc(var(--i) * 32ms)}
.rooms-stem .rm-bubble:active{background:var(--surface-3)}
.rooms-stem .rm-bubble:active .rm-art{transform:scale(.94)}
.rooms-stem .rm-art{width:50px;height:50px;box-shadow:none;position:relative;transition:transform var(--dur-0) ease-out}
.rooms-stem .rm-label{display:flex;flex-direction:column;gap:3px;min-width:0}
.rooms-stem .rm-label b{font:400 22px/1 var(--serif);letter-spacing:-.01em;color:var(--ink);text-shadow:none;white-space:nowrap}
.rooms-stem .rm-label em{margin:0;font:italic 400 17px/1.15 var(--serif);color:var(--soft);text-shadow:none;white-space:nowrap;
  max-width:calc(100vw - 150px);overflow:hidden;text-overflow:ellipsis}
/* the room you're in: a paper ring on its picture */
.rooms-stem .rm-bubble.cur .rm-art{box-shadow:0 0 0 2px var(--surface-2),0 0 0 3.5px var(--paper)}
.rooms-stem .rm-bubble.cur .rm-label em{color:var(--ink)}
/* pictures: Train's odd tile, Home's honeycomb in miniature */
.rm-art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:10px;background:var(--ground)}
.rm-art-grid i{border-radius:2px}
.rm-art.rm-art-home{display:block;background:var(--ground)}
.rm-art-home i{position:absolute;width:13px;height:13px;border-radius:50%;left:18.5px;top:18.5px}
.rm-art-home i:nth-child(2){left:32px;top:18.5px}.rm-art-home i:nth-child(3){left:25.2px;top:30.2px}
.rm-art-home i:nth-child(4){left:11.8px;top:30.2px}.rm-art-home i:nth-child(5){left:5px;top:18.5px}
.rm-art-home i:nth-child(6){left:11.8px;top:6.8px}.rm-art-home i:nth-child(7){left:25.2px;top:6.8px}
.rm-art-you{background:var(--ground)}
@media (max-height:600px){.rooms-stem .rm-bubble{height:52px}.rooms-stem .rm-art{width:44px;height:44px}.rooms-stem .rm-label b{font-size:20px}}
@media (prefers-reduced-motion:reduce){
  .rooms-stem .rm-bubble,.rooms-stem.on .rm-bubble{transform:none;transition:opacity 160ms linear;transition-delay:0ms}
  .corner.on svg,.corner[aria-expanded="false"] svg{animation:none}}

/* ============================================================ sheets: one family */
.sheet{background:var(--surface-1);border-radius:var(--r-3) var(--r-3) 0 0;padding-top:8px;
  box-shadow:inset 0 1px 0 rgba(236,232,223,.08),0 -16px 48px rgba(0,0,0,.45)}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:rgba(236,232,223,.24);margin:0 auto 14px}
/* every sheet title is title-2 (30 px), whatever markup it came with */
.sheet h3{font:400 30px/1.02 var(--serif);letter-spacing:-.02em;margin:2px 0 12px;color:var(--ink)}
.sheet>p,.sheet .mn-body{font:400 15px/1.5 var(--sans);color:var(--soft);margin:0 0 14px;text-wrap:pretty}
/* older rows (.item) take the quiet-row look */
.sheet .item{min-height:60px;font:400 21px/1.1 var(--serif);border-bottom:1px solid var(--rule);gap:12px;text-align:left}
.sheet .item svg{width:16px;height:16px;color:var(--faint);flex:none}
.sheet .item.danger{color:var(--bad)}

/* the header: title-2 left, at most two solid 44 px icon buttons right */
.mn-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 8px}
.mn-head .mn-title{margin:6px 0 0}
.mn-note{font:italic 400 17px/1.3 var(--serif);color:var(--soft);margin:4px 0 0}
.mn-acts{display:flex;gap:8px;flex:none}
.mn-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--ink);
  border:1px solid rgba(236,232,223,.1);transition:transform var(--dur-0) ease-out,background var(--dur-1)}
.mn-icon:active{transform:scale(.92);background:var(--surface-3)}
.mn-icon svg{width:18px;height:18px}

/* quiet rows, in groups with one note each; hairlines between, never boxes */
.mn-group{margin:0 0 18px}
.mn-group:last-child{margin-bottom:0}
.mn-gnote{font:italic 400 17px/1.3 var(--serif);color:var(--soft);margin:0 0 2px}
.mn-row{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:8px 0;border:0;border-bottom:1px solid var(--rule);
  background:none;color:var(--ink);text-align:left;font:inherit;-webkit-tap-highlight-color:transparent;transition:opacity var(--dur-0) ease-out}
.mn-group>.mn-row:first-child,.mn-gnote+.mn-row{border-top:1px solid var(--rule)}
.mn-row:active{opacity:.6}
.mn-lead{width:32px;height:32px;flex:none;display:grid;place-items:center;color:var(--soft)}
.mn-lead svg{width:20px;height:20px}
.mn-lead .rm-art{width:32px;height:32px;box-shadow:none}
.mn-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mn-txt b{font:400 21px/1.12 var(--serif);letter-spacing:-.005em;color:var(--ink)}
.mn-txt small{font:400 13.5px/1.35 var(--sans);color:var(--soft)}
.mn-val{flex:none;font:italic 400 17px/1.2 var(--serif);color:var(--soft);max-width:44%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-chev{flex:none;display:grid;color:var(--faint)}.mn-chev svg{width:16px;height:16px}
.mn-row.danger .mn-txt b,.mn-row.danger .mn-lead{color:var(--bad)}
/* the switch: an opaque track, a paper thumb when on */
.mn-sw{flex:none;position:relative;width:50px;height:30px;border-radius:15px;background:var(--surface-3);border:1px solid rgba(236,232,223,.12);
  transition:background var(--dur-1)}
.mn-sw i{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--soft);
  transition:transform var(--dur-2) var(--ease-grow),background var(--dur-1)}
.mn-sw.on{background:#5E8C6E;border-color:transparent}
.mn-sw.on i{transform:translateX(20px);background:var(--paper)}
/* a text link in the family voice */
.mn-link{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--ink);
  font:italic 400 17px/1 var(--serif);text-decoration:underline;text-decoration-color:rgba(236,232,223,.35);text-underline-offset:4px}

/* confirm (replaces window.confirm): the risky action as an opaque capsule, keeping as quiet text */
.mn-confirm .mn-body{margin-bottom:22px}
.mn-act{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border-radius:var(--r-pill);border:1px solid rgba(236,232,223,.12);
  background:var(--surface-2);color:var(--ink);font:400 22px/1 var(--serif);transition:transform var(--dur-0) ease-out}
.mn-act.danger{color:var(--bad)}
.mn-act:active{transform:scale(.97)}
.mn-quiet{display:block;width:100%;min-height:52px;margin-top:6px;border:0;background:none;color:var(--soft);font:italic 400 18px/1 var(--serif)}

/* search fields in sheets match Home's: one solid pill, never an underline over color */
.sheet .search{height:48px;padding:0 16px;margin:0 0 16px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--surface-2);color:var(--soft)}
.sheet .search svg{flex:none;width:18px;height:18px}
.sheet .search input{font:400 20px/1 var(--serif)}
.sheet .search+#xresults>.fine{font:italic 400 17px/1.4 var(--serif);color:var(--soft);margin-top:4px}
.sheet .search+#xresults>.fine svg{width:15px;height:15px;vertical-align:-2px}

/* empty states (DESIGN-SYSTEM §10): one title-3 line, one small line, one quiet action */
.mn-empty{padding:20px 0 8px}
.mn-empty b{display:block;font:400 22px/1.12 var(--serif);color:var(--ink)}
.mn-empty small{display:block;margin-top:6px;font:400 14px/1.5 var(--sans);color:var(--soft)}

/* ============================================================ toast (js/core.js toast) */
/* under the status bar: clear of the corners, every primary and every lesson footer */
.toast{position:fixed;left:50%;top:calc(var(--top) + 10px);bottom:auto;z-index:60;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);min-height:46px;padding:10px 20px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--ink);border:1px solid rgba(236,232,223,.14);box-shadow:0 10px 30px rgba(0,0,0,.5);
  font:400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;white-space:nowrap;
  animation:mnToastIn var(--dur-2) var(--ease-grow) both}
.toast>span{overflow:hidden;text-overflow:ellipsis}
.toast.out{animation:mnToastOut 200ms ease-in both}
.toast-dot{width:16px;height:16px;border-radius:50%;flex:none;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.toast button{flex:none;margin-right:-6px;padding:6px;border:0;background:none;color:var(--paper);font:italic 400 17px/1 var(--serif);
  text-decoration:underline;text-underline-offset:4px}
.toast.fv-toast{padding:10px 20px}
html.booth .toast{background:var(--booth-2);box-shadow:none;border-color:var(--b-rule)}
/* toast(msg, { low: true }): anchored above the safe area instead, for a moment that's confirming something in
   the top bar itself (a heart there, say) — the usual top toast would land right on top of it */
.toast.toast-low{top:auto;bottom:calc(var(--bottom) + 90px);animation:mnToastInLow var(--dur-2) var(--ease-grow) both}
.toast.toast-low.out{animation:mnToastOutLow 200ms ease-in both}
@keyframes mnToastInLow{from{opacity:0;transform:translate(-50%,14px) scale(.96)}}
@keyframes mnToastOutLow{to{opacity:0;transform:translate(-50%,10px) scale(.97)}}
@keyframes mnToastIn{from{opacity:0;transform:translate(-50%,-14px) scale(.96)}}
@keyframes mnToastOut{to{opacity:0;transform:translate(-50%,-10px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.toast,.toast.out,.toast.toast-low,.toast.toast-low.out{animation-name:fade}}

/* ============================================================ the You page (js/you.js) */
.you-page .room-head{margin-bottom:var(--s5)}
.ym-hero{display:flex;flex-direction:column}
.ym-band{display:flex;gap:2px;height:112px;width:100%;padding:0;border:0;border-radius:var(--r-1);overflow:hidden;background:none}
.ym-band i{flex:1;background:var(--c);transform-origin:50% 100%;animation:plate .9s var(--ease) both;animation-delay:calc(min(var(--k),20) * 30ms)}
.ym-band.faint i{opacity:.45}
.ym-count{display:flex;align-items:flex-end;gap:14px;margin-top:18px}
.ym-n{font:400 76px/.82 var(--serif);letter-spacing:-.04em;color:var(--ink)}
.ym-of{display:flex;flex-direction:column;gap:4px;padding-bottom:4px;min-width:0}
.ym-of .note{color:var(--ink);font-size:18px}
.ym-of small{font:italic 400 17px/1.3 var(--serif);color:var(--soft)}
.ym-figs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:22px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ym-figs>div{display:flex;flex-direction:column;gap:6px;padding:14px 0 12px}
.ym-figs>div+div{padding-left:14px;border-left:1px solid var(--rule)}
.ym-figs b{font:400 20px/1 var(--mono);color:var(--ink)}
.ym-figs span{font:italic 400 17px/1.2 var(--serif);color:var(--soft)}
.ym-links{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:6px}
.ym-sec{margin-top:var(--s6)}
.ym-h{font:400 30px/1.02 var(--serif);letter-spacing:-.02em;margin:0 0 12px}
.ym-lead{font:400 19px/1.32 var(--serif);color:var(--ink);margin:0 0 12px;text-wrap:pretty}
.ym-sec>.mn-row{border-top:0}
.ym-sec>.ym-h+.mn-row,.ym-sec>.ym-lead+.mn-row,.ym-sec>.ym-bars+.mn-row{border-top:1px solid var(--rule)}
/* your week: seven dots, each a color you saw that day */
.ym-week{display:flex;justify-content:space-between;margin:4px 0 12px}
.ym-week span{display:flex;flex-direction:column;align-items:center;gap:8px;width:38px}
.ym-week i{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--rule)}
.ym-week span.on i{background:var(--c,var(--soft));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ym-week span.now i{outline:1.5px solid var(--ink);outline-offset:3px}
.ym-week small{font:400 13px/1 var(--mono);color:var(--faint)}
.ym-week span.now small{color:var(--ink)}
/* mix-ups: two chips, each opens its page */
.ym-pair{display:flex;align-items:center;gap:14px;min-height:64px;border-bottom:1px solid var(--rule)}
.ym-h+.ym-pair{border-top:1px solid var(--rule)}
.ym-chip{width:30px;height:44px;flex:none;border-radius:var(--r-1);background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ym-chip+.ym-chip{margin-left:-12px}
/* hearted colors, palettes */
.ym-strip{display:flex;gap:2px;width:100%;height:56px;padding:0;margin:0 0 4px;border:0;border-radius:var(--r-1);overflow:hidden;background:none}
.ym-strip i{flex:1;background:var(--c)}
.ym-pal{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:8px 0;border:0;border-bottom:1px solid var(--rule);background:none;color:var(--ink);text-align:left}
.ym-h+.ym-pal{border-top:1px solid var(--rule)}
.ym-pal:active{opacity:.6}
.ym-pal-c{display:flex;width:96px;height:40px;flex:none;border-radius:var(--r-1);overflow:hidden}
.ym-pal-c i{flex:1;background:var(--c)}
.ym-bars{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.ym-bars>div{display:grid;grid-template-columns:76px 1fr 46px;align-items:center;gap:10px}
.ym-bars span{font:italic 400 17px/1 var(--serif);color:var(--soft)}
.ym-bars i{height:6px;border-radius:3px;width:var(--w);background:var(--c)}
.ym-bars b{font:400 13px/1 var(--mono);color:var(--soft);text-align:right}
/* a 2-column grid of real-size cards (David, 2026-10-09: "your photos look small" -- the old row was 92px
   thumbnails; each tile now shows the photo at a readable size with its palette band underneath, like Studio's
   own photo cards (css/rooms2.css .r2-ph), and the same sizing as the favorite-paintings grid just above */
.ym-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 12px}
.ym-ph{display:flex;flex-direction:column;padding:0;border:0;background:none;color:var(--ink);text-align:left;transition:transform var(--dur-0) ease-out}
.ym-ph:active{transform:scale(.97)}
.ym-ph-img{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:var(--r-2) var(--r-2) 0 0;overflow:hidden;background:var(--surface-2)}
.ym-ph-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ym-ph-band{display:flex;height:10px;border-radius:0 0 var(--r-1) var(--r-1);overflow:hidden}
.ym-ph-band i{background:var(--c)}
.ym-ph small{margin-top:6px;font:italic 400 17px/1.2 var(--serif);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ym-lately{display:flex;flex-wrap:wrap;gap:8px}
.ym-late{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 14px 4px 4px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);text-decoration:none;font:400 17px/1 var(--serif)}
.ym-late i{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ym-late:active{background:var(--surface-3)}
.ym-settings .mn-group{margin-bottom:22px}
.ym-fine{font:400 13px/1.5 var(--sans);color:var(--soft);margin:18px 0 0}
/* the You bubble: your colors as one disc, with a small hole like a record */
.rm-art-you{position:relative}
.rm-art-you i{position:absolute;inset:38%;border-radius:50%;background:var(--surface-2)}
/* the honeycomb reaches through the strip an iPhone Home Screen app leaves below its viewport (js/core.js vbFix) */
.cx-stage{bottom:0}
/* the map screens (Home, Study the map) are the whole screen on an iPhone Home Screen app: its layout viewport (and
   100dvh) stop a status bar short of the bottom, and a .fixed screen clips at its own height (js/core.js vbFix) */
.screen.fixed.cx{position:fixed;top:0;left:0;right:0;height:var(--app-full,100dvh)}
/* David, 2026-10-09: the large viewport (100lvh), which iOS never shrinks for its own chrome -- real HUD numbers
   off his iPhone showed the layout viewport running 62px short of the true screen even with 100lvh unverified
   there, so --app-full (js/core.js vbFix, screen.height itself, standalone+iOS only) stays as a belt-and-
   suspenders floor: max() picks whichever is actually larger. Progressive enhancement, same trick as above: an
   engine that doesn't know lvh (or max()) drops this whole line and keeps the dvh-based one. */
.screen.fixed.cx{height:max(100lvh,var(--app-full,0px))}

/* ============================================================ bottom band, belt and braces (2026-10-08, David's Arrange
   sheet screenshot: a 61 px band of ground under every sheet on his iPhone Home Screen app; recurred 2026-10-09 on
   the painting map's Filter sheet). vbFix now measures where bottom:0 really lands and refreshes on every sheet
   open (js/core.js sheet()), but a solid offset shadow still backstops it (never clipped by the sheet's own
   overflow) in case a phone still reports the gap wrong or late. 320px comfortably clears vbFix's own 120px clamp
   ceiling, with real headroom, not just past it. */
.sheet{box-shadow:0 -16px 48px rgba(0,0,0,.45),0 320px 0 0 var(--surface-1)}
.room-sheet{box-shadow:0 320px 0 0 var(--ground)}

/* ============================================================ COMPONENT TOKENS: Night Gallery (design/VISUAL-DIRECTION.md, 2026-10-08)
   One place for the identity pass; DESIGN-SYSTEM.md §14 documents them. David: "Selecting a button turns it white —
   ugly; and the button shape." A selection never turns white: it lifts one step (--s3), takes a 1.5 px ring (--line-2,
   or the item's own color --c when it is a color) and, on tiles, a small dot. Radii 6 (swatches) / 18 (cards, tiles) /
   28 (sheets, panels) / pill (buttons, segments, chips). 44 pt minimum hits, 56 pt corners and primaries. Two type
   families: serif names, Geist controls and numbers (tabular); Geist Mono is retired. */
:root{
  --s1:#171512; --s2:#201E1A; --s3:#2B2823; --line:rgba(236,232,223,.10); --line-2:rgba(236,232,223,.22);
  --r-tile:6px; --r-card:18px; --r-sheet:28px;
  --ctl-fill:var(--s2); --ctl-ink:var(--soft);
  --sel-fill:var(--s3); --sel-ring:inset 0 0 0 1.5px var(--line-2); --sel-ink:var(--ink); --sel-dot:#FFBF00;
  --tap:44px; --tap-l:56px; --type-body:16px; --type-ui:15px; --type-cap:13px;
  --mono:var(--sans);   /* Geist Mono retired: every mono label falls back to Geist */
  --corner:56px;
  /* the older names follow the Night Gallery tokens, so every screen that still says --surface-2 or --r-1 converges:
     surfaces e1/e2/raised, radii 6 (tiles) / 18 (cards) / 28 (sheets), and --rule-2 becomes the .22 edge, never a
     near-white outline */
  --surface-1:var(--s1); --surface-2:var(--s2); --surface-3:var(--s3);
  --r-1:var(--r-tile); --r-2:var(--r-card); --r-3:var(--r-sheet);
  --rule-2:var(--line-2);
}
.mono{font-variant-numeric:tabular-nums}
/* segmented controls: a pill track, the chosen segment a raised, ringed pill */
.seg button.on,.seg-t.on,.xb-seg button.on,.pt-seg button.on,.pm-view button.on,.cx-ns button.on,
.hm-seg button.on,.oo-pk-seg button.on,.oo-pk-ch button.on,.xb-cents button.on{
  background:var(--sel-fill);color:var(--sel-ink);box-shadow:var(--sel-ring);border-color:transparent}
.seg button,.seg-t{min-height:var(--tap)}
/* chips and option pills */
.xb-fc.on,.xb-presets button.on,.gl-chips button.on,.pt-chips button.on,.pt-ar-map.on,.chd-eras button.on,.tz-opts button.on,
.tw-chips button.on,.lx-bet-b.on,.screen.learnit .lx-bet-b.on,.sq-key.on,.ms-mode.on,.rc-pal-tabs button.on,.xb-optrow .xb-opt.on,.lr-tick.on{
  background:var(--sel-fill);color:var(--sel-ink);box-shadow:var(--sel-ring);border-color:transparent}
/* tiles with a title and a caption: raised, ringed, with the dot */
.hm-rung.on,.hm-fam.on,.ms-lv.on,.ms-set.on,.snd-sw.on,.cx-chip.on{background:var(--sel-fill);box-shadow:var(--sel-ring);border-color:transparent}
.hm-rung.on b,.hm-fam.on b,.ms-lv.on b,.ms-set.on b,.snd-sw.on{color:var(--sel-ink)}
.hm-rung.on small,.ms-lv.on small,.ms-set.on small,.snd-sw.on span,.hm-fam.on em{color:var(--soft)}
.hm-seg-n button.on{background:var(--sel-fill);color:var(--sel-ink);box-shadow:var(--sel-ring)}
.hm-seg-n button.on em{color:var(--soft);opacity:1}
.hm-rung,.ms-lv,.ms-set{position:relative}
.hm-rung.on::after,.ms-lv.on::after,.ms-set.on::after{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--sel-dot)}
/* shapes by size */
.hm-seg button,.hm-seg-n button,.ms-mode{border-radius:var(--r-pill)}
.hm-rung,.hm-fam,.ms-lv,.ms-set,.cx-chip{border-radius:var(--r-card)}
.hm-seg button{min-height:var(--tap);height:auto}
.cx-chip{border-color:transparent;background:var(--ctl-fill)}
.cx-chip small{font:400 var(--type-cap)/1 var(--sans);letter-spacing:0;color:var(--soft)}
/* corner buttons: 56 pt, level 2; open, the ✕ sits on --s3 (never a white disc) */
.corner{background:var(--s2);border:1px solid var(--line-2);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.corner svg{width:24px;height:24px}
.corner.on{background:var(--s3);color:var(--ink);border-color:var(--line-2)}
/* the Places pill (PLAN §3.1/§4/§9): the left corner, now a labeled pill -- never a private icon (A1).
   Same spot, same glyph (the stacked-list "rooms" icon already meant this), just self-evident now. */
.corner.pl-corner{width:auto;min-width:var(--corner);padding:0 18px 0 16px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.corner.pl-corner span{font:500 15px/1 var(--sans);color:var(--ink)}
/* the switch: on = --good track with a ground knob; off = --s3 track with a soft knob */
.mn-sw{background:var(--s3)}
.mn-sw.on{background:var(--good)}
.mn-sw.on i{background:var(--ground)}
.mn-sw i{box-shadow:0 1px 3px rgba(0,0,0,.35)}
/* native checkboxes become a 24 px rounded square (radius 6); on = --good with a ground tick. <input switch> becomes the switch. */
input[type=checkbox]:not([switch]){-webkit-appearance:none;appearance:none;flex:none;width:24px;height:24px;margin:10px;border-radius:var(--r-tile);
  background:var(--s3);box-shadow:inset 0 0 0 1.5px var(--line-2);display:inline-grid;place-items:center;cursor:pointer;transition:background var(--dur-1)}
input[type=checkbox]:not([switch])::after{content:"";width:12px;height:7px;border:solid var(--ground);border-width:0 0 2.4px 2.4px;transform:translateY(-1.5px) rotate(-45deg) scale(0);transition:transform var(--dur-1) var(--ease-grow)}
input[type=checkbox]:not([switch]):checked{background:var(--good);box-shadow:none}
input[type=checkbox]:not([switch]):checked::after{transform:translateY(-1.5px) rotate(-45deg) scale(1)}
input[type=checkbox][switch]{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:51px;height:31px;margin:6px 0;border-radius:16px;background:var(--s3);cursor:pointer;transition:background var(--dur-1)}
input[type=checkbox][switch]::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--soft);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform var(--dur-2) var(--ease-grow),background var(--dur-1)}
input[type=checkbox][switch]:checked{background:var(--good)}
input[type=checkbox][switch]:checked::before{transform:translateX(20px);background:var(--ground)}
/* keyboard focus: a 2 px ink ring, 2 px out */
button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}


/* ============================================================ the corner stacks, Night Gallery
   David (2026-10-08) chose the straight vertical stacks along the side over the tile panel. Same machinery (js/core.js
   toggleStem/closeStem, js/home.js doMenu; scrim tap, Escape and Back close it). Each capsule is a solid --s2 pill,
   56 pt tall, with --line-2 edge; its picture sits centered over the corner and its words on the inner side. The room
   you're in is raised (--s3), ringed and dotted, never a paper ring. */
.rooms-stem .rm-bubble{left:12px;height:var(--tap-l);gap:12px;padding:3px 22px 3px 3px;
  background:var(--s2);border:1px solid var(--line-2);box-shadow:0 8px 24px rgba(0,0,0,.5);transform-origin:28px 100%}
/* the right corner's own bubble mirrors the left one: "its picture sits centered over the corner" means over
   the RIGHT corner here, so the art has to be the OUTER (rightmost) flex child, not just given outer-side
   padding while staying first in DOM order -- row-reverse is what was missing (David's screenshot, 2026-10-10:
   "the circle is on the LEFT... match the old layout"). The padding above was already written for this (3px
   hugging the now-outer icon, 22px of inner breathing room before the label), just never paired with it. */
.rooms-stem.hm-do-stem .rm-bubble{left:auto;right:12px;padding:3px 3px 3px 22px;flex-direction:row-reverse;transform-origin:calc(100% - 28px) 100%}
.rooms-stem .rm-bubble:active{background:var(--s3)}
.rooms-stem .rm-art{width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none}
.rooms-stem .hm-do-ic{background:var(--s3)}
.rooms-stem .rm-label{gap:3px}
.rooms-stem .rm-label b{font:400 21px/1.05 var(--serif)}
.rooms-stem .rm-label em{font:400 14px/1.2 var(--sans);font-style:normal;color:var(--soft)}
.rooms-stem .rm-bubble.cur{background:var(--s3);border-color:transparent;box-shadow:var(--sel-ring),0 8px 24px rgba(0,0,0,.5)}
.rooms-stem .rm-bubble.cur .rm-art{box-shadow:none}
.rooms-stem .rm-bubble.cur .rm-label b::after{content:"";display:inline-block;width:8px;height:8px;margin:0 0 0 9px;border-radius:50%;background:var(--sel-dot);vertical-align:middle}
.rooms-stem .rm-bubble.cur .rm-label em{color:var(--soft)}
@media (max-height:600px){.rooms-stem .rm-bubble{height:50px}.rooms-stem .rm-art{width:42px;height:42px}}
/* sheets take the Night Gallery radius */
.sheet{border-radius:var(--r-sheet) var(--r-sheet) 0 0}

/* ============================================================ rows: grouped inset sections (VISUAL-DIRECTION component 3)
   A group is one e1 card (radius 18); its rows are 56 pt with inset hairlines between them, never a box around each.
   Serif title-3 name, a Geist sub-label (14), a soft value on the right, a chevron only when the row navigates. */
.mn-group{margin:0 0 22px}
.mn-gnote{font:500 var(--type-cap)/1.3 var(--sans);font-style:normal;color:var(--soft);margin:0 4px 8px}
.mn-row{min-height:var(--tap-l);padding:10px 16px;gap:14px;background:var(--s1);border:0;border-radius:0;position:relative}
.mn-group>.mn-row:first-of-type,.mn-gnote+.mn-row{border-top:0;border-top-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.mn-group>.mn-row:last-of-type{border-bottom:0;border-bottom-left-radius:var(--r-card);border-bottom-right-radius:var(--r-card)}
.mn-row:not(:last-of-type)::after{content:"";position:absolute;left:62px;right:0;bottom:0;height:1px;background:var(--line)}
.mn-row:not(:has(.mn-lead)):not(:last-of-type)::after{left:16px}
.mn-row:active{opacity:1;background:var(--s2)}
.mn-lead{width:32px;height:32px;border-radius:50%;background:var(--s3);color:var(--ink)}
.mn-lead svg{width:18px;height:18px}
.mn-txt small{font:400 14px/1.35 var(--sans)}
.mn-val{font:400 15px/1.2 var(--sans);font-style:normal;font-variant-numeric:tabular-nums}
.mn-row.danger .mn-lead{background:rgba(240,154,134,.12)}

/* ============================================================ landscape lane (2026-10-09): the notch sits on
   the LEFT or RIGHT edge once the phone is rotated, not the top. Every surface that pins itself to the side
   (the Rooms corners, the stem they raise, a bottom sheet's own gutter, the toast) now adds var(--left)/
   var(--right) (app.css) on top of its usual fixed offset, so nothing sits under the sensor housing. Portrait
   is untouched: those vars are 0px there. Scoped to orientation:landscape only, so nothing here changes the
   portrait look David already approved. */
@media (orientation:landscape){
  .corner.l{left:calc(16px + var(--left))}
  .corner.r{right:calc(16px + var(--right))}
  .rooms-stem .rm-bubble{left:calc(12px + var(--left) + var(--x,0px))}
  .rooms-stem.hm-do-stem .rm-bubble{left:auto;right:calc(12px + var(--right) + var(--x,0px))}
  .sheet{padding-left:calc(var(--g) + var(--left));padding-right:calc(var(--g) + var(--right))}
  .room-sheet>.screen{padding-left:calc(var(--g) + var(--left));padding-right:calc(var(--g) + var(--right))}
  .toast{max-width:calc(100vw - 32px - var(--left) - var(--right))}
  /* a bottom sheet on a short landscape screen (390-440px tall) shouldn't climb to 88% of the whole viewport --
     leave the map/page behind it visible, same "side panel, not a near-full-screen slab" ask as the map's own
     Colors/Arrange sheet already follows (css/home.css .hm-sheet-panel) */
  .sheet:not(.hm-sheet-panel):not(.ss-full){max-height:min(84dvh,420px)}
}