/* The honeycomb home (js/home.js, DESIGN-SYSTEM.md §2 "the floor") and its instant mini-lesson (js/learnit.js).
   Reuses the .cx screen chrome from css/honey.css (same stage/top/title plumbing as the color explorer);
   this file only adds the bits that are new here: the search pulldown, the View panel and its Look page, the
   honeycomb lab, and the Learn it lesson screens. The Rooms corner and the stem it raises are shared chrome
   (js/core.js, app.css .corner / .rooms-stem) — Home just marks its left corner [data-rooms-corner] and keeps
   its own right corner (#hmDo), one button whose menu holds every verb (js/home.js doMenu). */

/* ---------- search (reached from the View panel's header, chooser() below) ---------- */
.hm-search[hidden]{display:none}
.hm-search{position:absolute;z-index:3;left:max(12px,calc(50% - 258px));right:max(12px,calc(50% - 258px));top:calc(var(--top) + 12px)}
.hm-search .search{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--rule)}
.hm-search .search svg{flex:none;width:18px;height:18px;color:var(--soft)}
.hm-search input{flex:1;min-width:0;background:none;border:0;font:400 17px/1 var(--serif);color:var(--ink)}
.hm-search input::placeholder{color:var(--faint)}

/* full screen: no title bar and no name caption (the names are already on the bubbles) */
.hm .hm-top,.hm .hc-cap{display:none}
.hm.chrome-hide [data-rooms-corner],.hm.chrome-hide #hmDo{opacity:0;pointer-events:none}
[data-rooms-corner],.hm #hmDo{transition:opacity .4s var(--ease)}

/* ---------- the "Learn it" button on a color page (js/explore.js, colorPage only) ---------- */
.c-learnit{display:inline-flex;align-items:center;gap:8px;margin-top:14px;height:40px;padding:0 16px 0 13px;border:1px solid var(--rule-2);border-radius:var(--r-pill);
  font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:inherit;transition:transform .3s var(--spring)}
.c-learnit:active{transform:scale(.95)}
.c-learnit svg{width:16px;height:16px}
.c-learnit small{font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:none;opacity:.7}

/* ---------- the lesson itself (js/learnit.js): one step at a time, booth grey (it judges swatches) ---------- */
.lt-steps{display:flex;gap:5px;flex:1;justify-content:center}
.lt-steps i{width:20px;height:3px;border-radius:var(--r-1);background:var(--rule-2)}
.lt-steps i.on{background:var(--ink)}
.lt-steps i.now{background:var(--soft)}
.lt-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.lt-sw{width:100%;max-width:300px;aspect-ratio:1;border-radius:var(--r-1);background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.1)}
.lt-card h1{font:400 clamp(36px,10vw,52px)/1 var(--serif);letter-spacing:-.02em;margin:0}
.lt-card .mono{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--soft)}
.lt-card p{margin:0;color:var(--soft);font-size:15px;max-width:320px}
.lt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:360px}
.lt-grid button{aspect-ratio:1;background:var(--c);border-radius:var(--r-1);transition:transform .2s var(--spring)}
.lt-grid button:active{transform:scale(.93)}
.lt-grid button.right{box-shadow:0 0 0 3px #17160F,0 0 0 5px var(--good)}
.lt-grid button.wrong{box-shadow:0 0 0 3px #17160F,0 0 0 5px var(--bad);opacity:.5}
.lt-strip{display:flex;flex-direction:column;gap:8px;width:100%;max-width:340px}
.lt-strip button{display:flex;align-items:center;gap:12px;height:56px;padding:0 14px;border-radius:var(--r-2);background:rgba(236,232,223,.04);border:1px solid var(--rule)}
.lt-strip button i{width:36px;height:36px;border-radius:var(--r-1);background:var(--c);flex:none}
.lt-strip button b{font:500 13px/1 var(--mono);color:var(--soft);min-width:18px}
.lt-strip button.set{border-color:var(--rule-2)}
.lt-strip.done button{pointer-events:none}
.lt-strip.done button.ok{box-shadow:inset 0 0 0 1px var(--good)}
.lt-strip.done button.off{box-shadow:inset 0 0 0 1px var(--bad)}
.lt-done .fan{display:flex;height:120px;margin-bottom:8px}
.lt-done .fan i{flex:1;background:var(--c)}
.lt-done h1{font:400 clamp(34px,9vw,46px)/1.1 var(--serif);letter-spacing:-.01em}
.lt-done p{color:var(--soft);font-size:15.5px;line-height:1.5}

/* the lab lens row and the one-of-several segmented controls (the Arrange sheet, the lab) */
.hm-lens{display:flex;align-items:center;gap:12px;margin:4px 0 14px;font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--faint)}
.hm-lens input{flex:1;accent-color:var(--ink)}
/* the view chooser's one-of-several controls (Show, Layout) */
.hm-seg{display:flex;gap:6px;margin:2px 0 14px}
.hm-seg button{flex:1;display:flex;align-items:center;justify-content:center;height:38px;border:1px solid var(--rule);border-radius:var(--r-pill);font:400 16px/1 var(--serif);color:var(--soft)}
.hm-seg button.on{background:var(--ink);border-color:var(--ink);color:#0E0D0B}
.hm-chooser .hm-sub{margin-top:6px}
.hm-styles{grid-template-columns:repeat(2,1fr)}
.hm-tweak-row{display:flex;align-items:center;justify-content:space-between;width:100%;height:48px;margin-top:14px;padding:0 4px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font:400 17px/1 var(--serif);color:var(--ink)}
.hm-tweak-row svg{width:16px;height:16px;color:var(--soft)}

/* ---------- the Look chips (the Arrange sheet; the lab keeps its own) ---------- */
.hm-look-row{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding-bottom:2px;margin-bottom:4px}
.hm-look-chip{flex:none;width:59px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 2px;border-radius:var(--r-2);border:1px solid transparent}
.hm-look-chip.on{border-color:var(--rule-2);background:rgba(236,232,223,.05)}
.hm-look-chip b{font:400 10.5px/1.1 var(--serif);color:var(--soft);text-align:center}
.hm-look-chip.on b{color:var(--ink)}
.hm-look-ic{width:32px;height:32px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(236,232,223,.14)}
.hm-look-original{background:linear-gradient(135deg,#D9654F 0%,#E7C35C 35%,#4C9F70 60%,#4C7FD1 100%)}
.hm-look-honeycomb{background:radial-gradient(circle at 32% 30%,#E7C35C,#4C9F70 55%,#2E3B52 100%);clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0% 50%)}
.hm-look-magnifier{background:radial-gradient(circle at 50% 50%,#F3EFE4 0%,#E7C35C 30%,#4C9F70 58%,#2E3B52 100%)}

/* ---------- the Tweak panel: a compact, opaque, non-modal sheet over the live honeycomb (home + #/lab/honey) ---------- */
.hm-tweak-panel{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:540px;margin:0 auto;height:45dvh;max-height:420px;
  display:flex;flex-direction:column;background:#17160F;border-top:1px solid var(--rule);border-radius:18px 18px 0 0;
  box-shadow:0 -16px 44px rgba(0,0,0,.5);transform:translateY(100%);transition:transform .32s var(--ease)}
.hm-tweak-panel.on{transform:translateY(0)}
.hm-tweak-grab{flex:none;display:flex;align-items:center;justify-content:center;height:16px}
.hm-tweak-grab::before{content:"";width:36px;height:4px;border-radius:var(--r-1);background:var(--rule-2)}
.hm-tweak-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 16px 8px;border-bottom:1px solid var(--rule)}
.hm-tweak-head b{font:400 20px/1 var(--serif)}
.hm-tweak-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 16px 6px}
.hm-tweak-lens{margin-bottom:10px}
.hm-tweak-row{display:grid;grid-template-columns:118px 1fr 42px;align-items:center;gap:10px;height:34px}
.hm-tweak-row span{font:500 13px/1.2 var(--mono);letter-spacing:.04em;color:var(--soft)}
.hm-tweak-row input{width:100%;accent-color:var(--ink)}
.hm-tweak-row b{text-align:right;font:500 13px/1 var(--mono);color:var(--faint)}
.hm-tweak-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px calc(10px + var(--bottom));border-top:1px solid var(--rule)}
.cx-pill{height:38px;padding:0 16px;border:1px solid var(--rule-2);border-radius:var(--r-pill);font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}

/* ---------- the honeycomb lab (#/lab/honey): full-screen preview, two steppers and a rating row at the bottom ---------- */
.hm-lab{position:relative;height:100%}
.hm-lab-view{position:absolute;inset:0}
.hm-lab-view .hc-cap{display:none}
.hm-lab-back{position:fixed;left:16px;top:calc(var(--top) + 10px);z-index:5}
.hm-lab-bar{position:fixed;left:16px;right:16px;bottom:calc(var(--bottom) + 14px);z-index:5;display:flex;flex-direction:column;gap:8px;
  padding:12px 14px calc(14px + var(--bottom-extra,0px));border-radius:var(--r-3);background:#17160F;border:1px solid var(--rule);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.hm-lab-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hm-lab-step{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--soft)}
.hm-lab-step:first-child svg{transform:rotate(180deg)}
.hm-lab-row b{flex:1;text-align:center;font:400 18px/1 var(--serif);color:var(--ink)}
.hm-lab-rate{justify-content:center;gap:18px}
.hm-lab-heart{font-size:22px;line-height:1;color:var(--faint)}
.hm-lab-heart.on{color:#FF6B6B}
.hm-lab-stars{display:flex;gap:4px}
.hm-lab-stars button{font-size:19px;line-height:1;color:var(--faint)}
.hm-lab-stars button.on{color:#F4C94C}

/* the count line under the Show/Look tabs */
.hm-count{margin:-4px 0 10px;font:400 17px/1.3 var(--serif);font-style:italic;color:var(--soft)}

/* the View panel's header (DESIGN-SYSTEM §12 "View panel"): the name, Search and Surprise me */
.hm-chooser-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hm-chooser-top .title-2{margin:0}
.hm-chooser-acts{display:flex;gap:8px}
.hm-l18-fam{margin:8px 0 6px}
.hm-l18-fam button{height:32px;font-size:14px}
/* L18 B3: the search hint, one paper row under the field; Return or a tap travels */
.hm-l18-hint{display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;min-height:44px;padding:8px 16px;border-radius:var(--r-pill);background:var(--paper);color:var(--paper-ink);font:400 16px/1.2 var(--serif);text-align:left}
.hm-l18-hint[hidden]{display:none}
.hm-l18-hint b{font-weight:400;font-style:italic}
.hm-l18-hint span:last-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-l18-sw{flex:none;display:flex}
.hm-l18-sw i{width:22px;height:22px;border-radius:50%;margin-left:-6px;box-shadow:0 0 0 2px var(--paper)}
.hm-l18-sw i:first-child{margin-left:0}
/* L18 B2: the live stem (what is inside each room today) and the real floor under a solid scrim (no blur) */
.rm-art-img img{display:block;width:100%;height:100%;object-fit:cover}
.rm-art-station{display:grid;place-items:center;background:var(--surface-2)}
.rm-art-station .sa{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.room-floor-snap{background-size:cover;background-position:center 42%}
.room-floor-snap i{position:absolute;inset:0;top:0;width:auto;height:auto;transform:none;opacity:1;background:rgba(14,13,11,.58)}
/* L18: a lit constellation pill sits above the favorites heart on Home */
.hm .cs-hl-pill{bottom:calc(var(--bottom) + 140px)}
/* lane F: the lit set is the map's subject. A solid bar (js/honey.js honeyLitBar): ‹ · its source · ✕, then Learn these and Find them */
.cs-hl-pill.cs-hl-bar{display:block;left:16px;right:16px;transform:none;max-width:420px;margin:0 auto;min-height:0;padding:8px 8px 10px;border-radius:24px;font:inherit;
  animation:csHlIn .32s var(--ease,ease-out) both}
@keyframes csHlIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* How many: a slider over the set's measured pool, then each lit color by name with its share of the canvas */
.cs-hl-n{margin:4px 4px 0}
.cs-hl-nl{display:flex;align-items:center;gap:10px;min-height:40px}
.cs-hl-nl span{flex:none;font:400 15px/1 var(--sans);opacity:.72}
.cs-hl-nl input{flex:1;min-width:0;height:32px;accent-color:var(--paper-ink);touch-action:pan-x}
.cs-hl-nl b{flex:none;min-width:2ch;text-align:right;font:400 20px/1 var(--serif);font-variant-numeric:tabular-nums}
.cs-hl-cols{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 0 2px;margin:0 -4px;padding-inline:4px}
.cs-hl-cols::-webkit-scrollbar{display:none}
.cs-hl-c{flex:none;display:flex;align-items:center;gap:7px;min-height:36px;padding:0 12px 0 6px;border-radius:var(--r-pill,999px);box-shadow:inset 0 0 0 1px rgba(20,19,17,.18);color:inherit}
.cs-hl-c i{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,19,17,.15)}
.cs-hl-c span{font:400 15px/1 var(--serif);white-space:nowrap}
.cs-hl-c em{font:400 13px/1 var(--sans);font-style:normal;opacity:.62;font-variant-numeric:tabular-nums}
.cs-hl-c:active{transform:scale(.96)}
.cs-hl-head{display:flex;align-items:center;gap:8px;min-height:48px}
.cs-hl-bar .cs-hl-back{flex:none;width:40px;height:44px;margin:0 -6px 0 -2px;padding:0;min-width:0;display:grid;place-items:center;font:400 32px/1 var(--serif);color:inherit;border-radius:50%}
.cs-hl-th{flex:none;width:44px;height:44px;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.08)}
.cs-hl-head .cs-hl-th:first-child{margin-left:4px}
.cs-hl-th img{display:block;width:100%;height:100%;object-fit:cover}
.cs-hl-sw{display:grid;grid-template-columns:1fr 1fr}
.cs-hl-sw i:only-child{grid-column:1/-1}
.cs-hl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cs-hl-t b{font:400 20px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-hl-t small{font:400 13px/1.2 var(--sans);opacity:.64;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-hl-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* read aloud and copied as one line: "The Milkmaid · 7 named colors" */
.cs-hl-x{flex:none;width:44px;height:44px;display:grid;place-items:center;color:inherit;border-radius:50%}
.cs-hl-x svg{width:18px;height:18px}
.cs-hl-acts{display:flex;gap:8px;margin-top:8px}
.cs-hl-act{flex:1;min-height:46px;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:var(--r-pill,999px);font:500 16px/1 var(--sans);color:inherit;box-shadow:inset 0 0 0 1px rgba(20,19,17,.22);transition:transform .12s ease-out}
.cs-hl-act.on{background:var(--paper-ink);color:var(--paper);box-shadow:none}
.cs-hl-act:active,.cs-hl-x:active,.cs-hl-bar .cs-hl-back:active{transform:scale(.96)}
/* L18: every Home corner fades together while you drag, and returns together (David: only the Study corner stayed) */
.hm.chrome-hide .corner{opacity:0;pointer-events:none}
/* pull-down-to-close hint (js/home.js hmPullClose): says what letting go will do, so a close is never a surprise */
.hm-pullpill{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);transform:translate(-50%,-8px);z-index:90;padding:8px 14px;border-radius:var(--r-pill,999px);background:rgba(20,19,17,.82);color:#ECE8DF;font:500 14px/1 var(--sans);letter-spacing:.01em;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hm-pullpill.on{opacity:1;transform:translate(-50%,0)}

/* ---------- the View sheet (design/HOME-VIEWS.md §5): Arrange by on top, then Colors / Look. A fixed-height,
   opaque sheet whose own body scrolls, so the map above it stays in view and recentered (ctrl.setInset) ---------- */
/* David, 2026-10-09: "tapping the top half instantly closes Arrange... I need to pan and zoom the map while
   choosing arrangements." The scrim stayed fully interactive even where it reads as "clear" -- pointer-events:none
   lets every tap, pan and pinch on the map above the sheet through to the canvas untouched; closing is ✕, a
   swipe down on the sheet itself (both already worked), or a double-tap on the map (js/home.js chooser). */
.scrim.hm-scrim-clear{background:transparent;animation:none;pointer-events:none}
/* David, 2026-10-09: "takes up too much of the screen... make it more compact" -- target ~40% of the screen
   height (956 on his phone), down from ~56dvh. The Colors tab (this fixed height; Arrange uses height:auto,
   just below, so its own content doing less work IS the fix there) still scrolls past this for its own
   filters, same as before, just with more of the map visible above it now. */
.sheet.hm-sheet-panel{display:flex;flex-direction:column;height:min(40dvh,400px);max-height:min(40dvh,400px);overflow:hidden;padding-left:0;padding-right:0;padding-bottom:0}
.hm-sheet-panel>.grab{flex:none}
.hm-sheet-panel .hm-chooser{flex:1;min-height:0;display:flex;flex-direction:column}
.hm-ch-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px 6px;touch-action:none}
.hm-ch-t{min-width:0}
.hm-ch-t .title-2{margin:0 0 4px!important}
.hm-ch-head .hm-count{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* David, 2026-10-09: "combine Colors and Arrange into one menu with a tab on top" -- the Colors/Arrange segmented
   switch replaces the old fixed title; the count line (now its own paragraph, same copy/placement as before)
   sits right under the whole header, not nested in it, so it reads the same under either tab. */
/* David, 2026-10-10, a live screenshot: "labels left-aligned and cramped inside oversized pills, the selected
   tab flips to a white/cream fill (banned)". A proper compact segmented control: centered labels in the app's
   sans (matching every other segmented control in this sheet -- .hm-seg button), selected = the same subtle
   raised --sel-fill surface .hm-seg/.hm-rung/.cx-chip already use (css/menus2.css), never a raw --ink fill. */
.hm-ch-tabs{display:flex;gap:6px;flex:1;min-width:0}
.hm-ch-tabs .hm-ch-tab{flex:1;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:var(--r-pill);background:none;font:400 15px/1 var(--sans);color:var(--soft);transition:background var(--dur-1,.2s),color var(--dur-1,.2s)}
.hm-ch-tabs .hm-ch-tab.on{background:var(--sel-fill);color:var(--sel-ink);box-shadow:var(--sel-ring);border-color:transparent}
.hm-chooser>.hm-count{padding:0 16px;margin:0 0 6px}
.hm-chooser-acts{flex:none;display:flex;gap:6px}
.hm-chooser-acts[hidden]{display:none}  /* the [hidden] attribute loses to this class's own display:flex otherwise -- same specificity, author beats UA, so the hidden pane's close button stays laid out and overlaps the tabs */
.hm-chooser-acts .iconq{width:44px;height:44px}
.hm-ch-x{background:var(--surface-2)}
/* Arrange by: a strip of live pictures, the current one ringed in paper. David, 2026-10-10 (a live screenshot):
   "the shape tiles... leave a gap on the right -- distribute evenly across the width." There are always exactly
   5 (HONEY_ARR_IDS, js/honey.js), so flex:1 fills the row evenly instead of scrolling fixed-width tiles past
   it; overflow-x stays as a safety net (hidden unless a 6th arrangement is ever added and they genuinely don't
   fit), not the normal path. The picture itself scales with its tile (an inline SVG, js/home.js hmArrIcon --
   clean at any size, no blur) instead of a hard 72px, so it still shrinks gracefully at 375px. */
.hm-arr{flex:none;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:2px 16px 4px;scrollbar-width:none}
.hm-arr::-webkit-scrollbar{display:none}
.hm-arr-b{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform var(--dur-0,.12s) ease-out}
.hm-arr-b:active{transform:scale(.94)}
.hm-arr-pic{display:block;width:100%;max-width:72px;aspect-ratio:1;border-radius:18px;background:#0E0D0B;box-shadow:inset 0 0 0 1px var(--rule);overflow:hidden;transition:box-shadow .2s}
.hm-arr-pic svg{display:block;width:100%;height:100%}
.hm-arr-pic canvas{display:block;width:100%;height:100%}
.hm-arr-b b{font:400 13px/1.15 var(--sans);color:var(--soft);text-align:center;width:100%;min-height:2.3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-arr-b.on .hm-arr-pic{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--surface-1)}
.hm-arr-b.on b{color:var(--ink)}
.hm-arr-sub{flex:none;margin:4px 0 12px;padding:0 16px;font:italic 400 17px/1.3 var(--serif);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-arr-sub b{font-weight:400;font-style:normal;color:var(--ink)}
.hm-ch-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px calc(var(--bottom,0px) + 24px);-webkit-overflow-scrolling:touch}
.hm-ch-scroll .cx-sec{margin-top:18px}
/* How many: one row of rungs, the count big */
.hm-ladder{display:flex;gap:6px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none;overscroll-behavior-x:contain}
.hm-ladder::-webkit-scrollbar{display:none}
.hm-rung{flex:none;min-width:70px;min-height:56px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:8px 12px;border-radius:var(--r-2);background:var(--surface-2);transition:background .2s,color .2s}
.hm-rung b{font:400 20px/1 var(--serif);color:var(--ink)}
.hm-rung small{font:400 13px/1 var(--sans);color:var(--soft);white-space:nowrap}
.hm-rung.on{background:var(--paper)}
.hm-rung.on b,.hm-rung.on small{color:var(--paper-ink)}
/* Family: three real samples per family (lightest, middle, darkest), its name and its count */
.hm-fams{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding-top:12px}
.hm-fam{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 12px;border-radius:var(--r-2);background:var(--surface-2);text-align:left;transition:background .2s,transform .2s var(--spring,ease-out)}
.hm-fam:active{transform:scale(.97)}
.hm-fam b{flex:1;min-width:0;font:400 18px/1.1 var(--serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-fam em{font:400 14px/1 var(--sans);font-style:normal;color:var(--soft);font-variant-numeric:tabular-nums}
.hm-fam-dots{flex:none;display:flex}
.hm-fam-dots i{width:18px;height:18px;border-radius:50%;margin-left:-6px;box-shadow:0 0 0 2px var(--surface-2)}
.hm-fam-dots i:first-child{margin-left:0}
.hm-fam-dots:empty{width:18px;height:18px;border-radius:50%;background:conic-gradient(#D9654F,#E7C35C,#4C9F70,#4C7FD1,#8C5AC2,#D9654F)}
.hm-fam.on{background:var(--paper)}
.hm-fam.on b,.hm-fam.on em{color:var(--paper-ink)}
.hm-fam.on .hm-fam-dots i{box-shadow:0 0 0 2px var(--paper)}
.hm-fam.off,.hm-seg-n button.off{opacity:.38;pointer-events:none}
/* Tone and Your words: segmented, each with its count under the word */
.hm-seg-n{margin:12px 0 2px;flex-wrap:nowrap}
.hm-seg-n button{flex:1;min-width:0;height:auto;min-height:52px;flex-direction:column;gap:4px;padding:6px 2px;border:0;background:var(--surface-2);border-radius:var(--r-2);font:400 16px/1 var(--serif);color:var(--ink)}
.hm-seg-n button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hm-seg-n button em{font:400 13px/1 var(--sans);font-style:normal;color:var(--soft);font-variant-numeric:tabular-nums}
.hm-seg-n button.on{background:var(--paper);color:var(--paper-ink)}
.hm-seg-n button.on em{color:var(--paper-ink);opacity:.7}
.hm-clear{display:block;margin:14px 0 0;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--surface-2);font:400 16px/1 var(--sans);color:var(--ink)}
.hm-clear[hidden]{display:none}
/* Keep colors' own multi-select mode, one labeled row at the top of the Colors tab (David, 2026-10-11: a
   single color moved to a long-press on the map itself; this is for choosing several at once). */
.hm-keep-pick{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:0 0 16px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);font:400 16px/1 var(--sans)}
.hm-keep-pick svg{flex:none;width:18px;height:18px;color:var(--soft)}
.hm-keep-pick:active{background:var(--s3)}
/* Look and the feel sliders: see the compact .hm-look-seg/.hm-feel-row rules further down (David, 2026-10-09,
   "more compact") -- this used to be a duplicate of that block under the old .hm-look-row/.hm-look-chip-card
   markup, which no longer exists; removed rather than left dead (and silently winning on specificity over the
   compact rules, which is what was actually happening here until this cleanup). */
.hm-feel{margin-top:10px;display:flex;flex-direction:column}
.hm-feel-row{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px;min-height:48px}
.hm-feel-l{font:400 17px/1.1 var(--serif);color:var(--ink)}
.hm-feel-r{display:flex;align-items:center;gap:8px;min-width:0}
.hm-feel-r i{flex:none;width:40px;font:400 13px/1 var(--sans);font-style:normal;color:var(--soft)}
.hm-feel-r i:last-child{width:50px;text-align:right}
.hm-feel-r input{flex:1;min-width:0;height:32px;accent-color:var(--paper);touch-action:pan-x}
.hm-feel-reset{align-self:flex-start;margin-top:6px;min-height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface-2);font:400 15px/1 var(--sans);color:var(--ink)}
.hm-look-original{background:radial-gradient(circle at 50% 50%,#E7C35C 0 22%,transparent 23%),radial-gradient(circle at 18% 30%,#D9654F 0 14%,transparent 15%),radial-gradient(circle at 82% 30%,#4C7FD1 0 14%,transparent 15%),radial-gradient(circle at 20% 76%,#8C5AC2 0 13%,transparent 14%),radial-gradient(circle at 80% 76%,#4C9F70 0 13%,transparent 14%);box-shadow:none!important}
@media (max-width:360px){.hm-fam b{font-size:16px}.hm-seg-n button{font-size:14.5px}.hm-feel-l{width:64px}}
/* Arrange: David, 2026-10-10 (a live screenshot): "the Magnify row is cut off by the bottom of the sheet --
   the sheet content must fit or scroll internally." height:auto was the bug, not the fix: with no BOUNDED
   height on .sheet, .hm-chooser's flex:1/min-height:0 (what makes .hm-ch-scroll's own overflow-y:auto actually
   engage, exactly as it already does correctly for the Colors tab below) had nothing to size against, so
   content past the outer max-height (min(40dvh,400px), already the clamp Arrange's content was silently
   hitting) was just hard clipped by that outer overflow:hidden instead of reachable by scrolling the inner
   pane. Matching Colors' own (explicit, not auto) height restores that same already-working mechanism -- same
   rendered footprint as before (the content was already being capped at this height, just without a way to
   reach the rest), so Arrange's own fit-mode math (which measures the sheet's live top edge) is unaffected. */
.sheet.hm-sheet-panel.hm-sheet-arrange{height:min(40dvh,400px)}
/* Center on / Sort by: one compact row of small chips under the shapes. David, 2026-10-09: "the buttons
   slightly smaller" -- shorter than the 44px tap floor used everywhere else in this sheet on purpose: these are
   small secondary filters in a wide horizontal strip (generous side padding keeps the real hit area close to
   44px even though the visible pill is 36px tall), not a first-time user's one next step. A right-edge fade
   (David, 2026-10-10: "a clear scroll fade") says there's more to scroll to instead of reading as cut off. */
.hm-ord{align-items:center;padding:8px 0 2px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.hm-ord[hidden]{display:none}
.hm-ord-l{flex:none;font:400 14px/1 var(--sans);color:var(--soft);padding-right:2px}
.hm-ord .hm-rung{min-width:0;min-height:36px;flex-direction:row;align-items:center;gap:6px;padding:0 13px;border-radius:var(--r-pill)}
.hm-ord .hm-rung b{font-size:16px;white-space:nowrap}
.hm-ord-dot{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px rgba(236,232,223,.25)}
.hm-sheet-arrange .hm-arr{margin:0 -16px;padding-top:4px}
.hm-sheet-arrange .hm-arr-sub{padding:0;margin-top:2px}

/* ---------- the right corner: ⋯, restored to the labeled expanding-pill stem (js/home.js hmDoMenu;
   David, 2026-10-10, reversing the Simplify pass's single ⋯ sheet here). Shares .rooms-stem/.hm-do-stem/
   .rm-bubble/.rm-art/.rm-label (css/menus2.css) with the left corner's Places stem -- only what's genuinely
   new to THIS corner's rows lives here. ---------- */
.hm-do{overflow:visible}
.hm-do svg{width:20px;height:20px}
.hm-do-n{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--paper);color:var(--paper-ink);
  font:500 12.5px/22px var(--sans);font-style:normal;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--ground)}
/* the Colors & Arrange row's own thumbnail: 4 live dots sampled from what's on screen, not a static glyph */
.hm-do-dots{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;padding:4px;background:var(--s3)}
.hm-do-dots i{border-radius:3px;display:block}
/* Settings: a small gear at the column's end (David: "may be a small gear"), not a full 50px picture row */
.hm-do-sm .rm-art{width:30px;height:30px;background:transparent;box-shadow:none;display:grid;place-items:center;color:var(--soft)}
.hm-do-sm .rm-label b{font-size:18px}
/* Every other row's glyph (dice/pipette/heart/cards/play/gear): .rm-art is a plain <span>, inline by default, so
   an <svg> dropped into it with no layout of its own just flows top-left under baseline rules -- the "broken
   icons" David's screenshot showed. Center it properly, and pin the svg itself to display:block so there's no
   stray inline whitespace gap pushing it off-center either. Every icon call in hmDoMenu (js/home.js) now also
   asks for the SAME 22px, so none of these glyphs reads a different size from its neighbors (play and the two
   24px-elsewhere icons -- heart, cards -- were the mismatched ones). */
.hm-do-ic{display:grid;place-items:center}
.hm-do-ic svg{display:block;flex:none}

/* ---------- a Search button at the top of the map (David, 2026-10-10 addendum): the same opaque, round corner
   style, aligned with the Colors | Paintings switch, safe-area aware. One tap opens the one global search
   (js/search.js searchOpen), focused and ready to type -- dropped from the ⋯ stem above (one home per action). ---------- */
.hm-top-search{position:fixed;z-index:4;top:calc(var(--top,0px) + 10px);right:16px;width:40px;height:40px;
  border-radius:50%;background:var(--s2);border:1px solid var(--line-2);box-shadow:0 8px 24px rgba(0,0,0,.5);
  display:grid;place-items:center;color:var(--ink);transition:transform var(--dur-0) ease-out,background var(--dur-1)}
.hm-top-search svg{width:18px;height:18px}
.hm-top-search:active{transform:scale(.92);background:var(--s3)}
.hm.chrome-hide .hm-top-search{opacity:0;pointer-events:none}
@supports (padding:max(0px)){.hm-top-search{top:calc(max(var(--top,0px),env(safe-area-inset-top)) + 10px)}}
@media (orientation:landscape){.hm-top-search{right:calc(16px + var(--right))}}

/* ---------- Colors | Paintings: an always-visible top-center switch, on the map's own screen, not a menu row
   (David, 2026-10-09: "it doesn't make sense that the painting map is accessed through [a menu]... make it a
   small, always-visible segmented control... not a menu row and not buried in a sheet"). An opaque two-word
   pill, safe-area aware; js/paintmap.js reuses the same markup and this same CSS on its own screen. ---------- */
.hm-layer{position:fixed;top:calc(var(--top,0px) + 10px);left:50%;transform:translateX(-50%);z-index:4;
  display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);box-shadow:0 2px 10px rgba(0,0,0,.28);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.hm-layer button{flex:none;height:32px;padding:0 16px;border:0;border-radius:999px;background:transparent;
  font:500 14px/1 var(--sans);color:var(--soft);white-space:nowrap;transition:transform .15s var(--spring)}
.hm-layer button.on{background:var(--paper);color:var(--paper-ink)}
.hm-layer button:active{transform:scale(.95)}
@supports (padding:max(0px)){.hm-layer{top:calc(max(var(--top,0px),env(safe-area-inset-top)) + 10px)}}

/* ---------- Arrange sheet, iconic (David, 2026-10-08: "previews need to be simple icon versions, or themselves more
   beautiful and clean"). Flat diagrams (js/home.js hmArrIcon) on one tile size, one-line labels, the shared selected
   state (tint + ring, css/menus2.css component tokens). The Look is a three-way picker in the same family; the
   sliders are quiet tracks with a white thumb and the filled part in ink. ---------- */
/* David, 2026-10-09: "the Colors/Arrange menu takes up too much of the screen... make it more compact, the
   buttons slightly smaller" (target: the sheet at or under ~40% of the screen height, down from ~55%). Shape
   tiles shrink to a ~64px icon with a tighter one-line label; Sort-by/Center-on chips shrink a touch (they're
   small secondary filters with a wide horizontal hit area either side, not the one thing a first-time user
   needs -- the 44px tap floor still holds everywhere else: Look's segmented buttons, the feel sliders' own
   thumb track, every primary control); Look becomes a plain two-way segment instead of two tall cards (the
   biggest single saving); the feel sliders move onto one line each with their own label; section gaps tighten.
   The map above gets whatever room this gives back automatically (js/honey.js enterFit() re-measures the
   sheet's own height on every resize). */
.hm-arr{display:grid;grid-auto-flow:column;grid-auto-columns:64px;gap:6px;padding:4px 16px 6px;margin:0 -16px;overflow-x:auto;overflow-y:hidden;scroll-padding:0 16px}
.hm-arr-b{width:auto;min-width:0;gap:5px;min-height:var(--tap)}
.hm-arr-pic{width:100%;height:auto;aspect-ratio:1;border-radius:var(--r-2);background:var(--s2);box-shadow:none;display:grid;place-items:center;
  transition:box-shadow var(--dur-1),background var(--dur-1)}
.hm-arr-pic svg{width:74%;height:74%;display:block}
.hm-arr-b b{font:400 11.5px/1.1 var(--sans);min-height:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}
.hm-arr-b.on .hm-arr-pic{background:var(--sel-fill);box-shadow:var(--sel-ring)}
.hm-arr-b.on b{color:var(--sel-ink);font-weight:500}
.hm-sheet-arrange .hm-arr-sub{margin:8px 0 2px;font:400 14px/1.3 var(--sans);font-style:normal;color:var(--soft);white-space:normal}
.hm-sheet-arrange .hm-arr-sub b{font-weight:500;color:var(--ink)}
/* section headers: quiet sentence-case captions, no rule */
.hm-ch-scroll .cx-sec{border-bottom:0;margin:14px 0 0;padding:0}
.hm-ch-scroll .cx-sec b{font:500 var(--type-cap)/1 var(--sans);letter-spacing:.01em;text-transform:none;color:var(--soft)}
.hm-ch-scroll .cx-sec span{font:400 var(--type-cap)/1 var(--sans);letter-spacing:0;color:var(--faint)}
/* the Look: a plain two-way segment (css/home.css .hm-seg, the same pill control Edges uses just below), a
   small icon beside the word instead of a tall icon-over-label card -- by far the biggest height saving here */
.hm-look-seg{margin-top:8px}
.hm-look-seg button{width:auto;flex:1;flex-direction:row;gap:7px;padding:0 10px}
.hm-look-seg .hm-look-ic{width:18px;height:18px;flex:none;box-shadow:none;background:none;clip-path:none;border-radius:0}
.hm-look-seg .hm-look-ic svg{width:18px;height:18px;display:block}
/* the feel: one line each -- the label, then the track between its two words */
.hm-feel{margin-top:10px;gap:4px}
.hm-feel-row{display:flex;align-items:center;gap:10px;min-height:0}
.hm-feel-l{flex:none;width:78px;font:400 14px/1.15 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-feel-r{flex:1;gap:8px;min-height:var(--tap)}
.hm-feel-r i,.hm-feel-r i:last-child{width:auto;font:400 11px/1 var(--sans);color:var(--faint);text-align:left}
.hm-feel-r input{-webkit-appearance:none;appearance:none;height:var(--tap);background:none;margin:0}
.hm-feel-r input::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--ink) calc(var(--p,.5) * 100%),var(--s3) 0)}
.hm-feel-r input::-moz-range-track{height:4px;border-radius:2px;background:var(--surface-3)}
.hm-feel-r input::-moz-range-progress{height:4px;border-radius:2px;background:var(--ink)}
.hm-feel-r input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 .5px rgba(0,0,0,.2)}
.hm-feel-r input::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.hm-feel-reset{min-height:var(--tap);border-radius:var(--r-pill);margin-top:8px;background:var(--s2)}
.hm-feel-r i{flex:none;width:52px!important}.hm-feel-r i:last-child{width:60px!important;text-align:right!important}
/* segmented pairs in the Home sheets: filled, no outline; the chosen one ringed */
.hm-seg{gap:8px}
.hm-seg button{border:0;background:var(--ctl-fill);font:400 15px/1 var(--sans);color:var(--soft)}
.hm-seg button.on{font-weight:500}
.hm-lab-stars button svg,.hm-lab-heart svg{width:18px;height:18px}

/* Night Gallery: the selected arrangement also takes the dot (Look's own filled-segment state already reads
   as selected, same as Edges/the Colors-Arrange tabs just above, so it doesn't need one too) */
.hm-arr-pic{position:relative}
.hm-arr-b.on .hm-arr-pic::after{content:"";position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--sel-dot)}