/* AUTO-GENERATED from web/js/views/preview.js by outputs/gen-homev2.js — do not
 * hand-edit. Namespaced (nh-) styles for the composed real Home. (D-464)
 * Bottom pad so content clears the sticky tab bar. */
.nh-zones{padding-bottom:var(--space-24);}
.nh-pvdev{color-scheme:light;--sa-card:176px;} /* token-exception */
.nh-pvdev{display:flex;flex-direction:column;min-height:100%;max-width:var(--layout-col-max);margin:0 auto;background:var(--surface-ground);color:var(--text-primary);font-family:var(--font-body);line-height:var(--leading-150);}
.nh-zones{flex:1;padding-top:var(--space-4);}
/* 🔴 THE SHELL SPACES EVERY CHILD OF THE ZONE LIST — NOT JUST THE ONES THAT REMEMBERED. (D-526)
 *
 * This used to be `.nh-zmod{...}` alone, which meant a module joined the rhythm only if its
 * renderer remembered to return the wrapper. 105 did not. It returned a bare `.ys-slot`, escaped
 * the stack, and sat one grid unit tight against the card below it — in the shipped app, for
 * months, with every spacing check green. Andrew caught it by eye.
 *
 * A wrapper you must remember is a wrapper someone will forget. So the rhythm is now hung on the
 * ZONE LIST, and every child gets it whatever class it wears. There is no longer anything to
 * forget, and therefore nothing to lint: the bug is no longer expressible.
 * (`.nh-zmod` keeps its own rule — it is used outside .nh-zones too.) */
.nh-zones > *{margin-bottom:var(--rhythm-stack);}  /* D-510 · D-526 */
.nh-zmod{margin-bottom:var(--rhythm-stack);}  /* D-510 */
.nh-topbar{position:sticky;top:0;z-index:5;background:var(--surface-ground);display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-8) var(--space-16);}
.nh-tbrow{display:flex;align-items:center;justify-content:space-between;}
.nh-bwlogo{font-family:var(--font-display);font-weight:var(--weight-600);font-size:var(--size-24);letter-spacing:var(--tracking-neg-01);color:var(--text-primary);}
.nh-bwlogo b{color:var(--brand);}
.nh-av{width:var(--dim-32);height:var(--dim-32);border:0;border-radius:var(--radius-round);background:var(--surface-card);color:var(--accent);display:grid;place-items:center;}
.nh-av svg{width:var(--size-18);height:var(--size-18);display:block;}
.nh-babychip{display:flex;align-items:center;gap:var(--space-8);background:var(--surface-card);border:0;border-radius:var(--radius-pill);padding:var(--space-8) var(--space-16);}
.nh-babychip .nh-n{font-size:var(--size-16);font-weight:var(--weight-600);color:var(--accent);}
.nh-babychip .nh-sep{font-size:var(--size-16);font-weight:var(--weight-400);color:var(--text-tertiary);}
.nh-babychip .nh-w{font-family:var(--font-label);font-size:var(--size-14);font-weight:var(--weight-600);color:var(--text-secondary);}
.nh-csearch{padding:0 var(--space-16);}
.nh-csfield{display:flex;align-items:center;gap:var(--space-12);background:var(--surface-card);border-radius:var(--radius-pill);box-shadow:var(--shadow-card);padding:var(--space-12) var(--space-16);}
.nh-csfield .nh-i{width:var(--size-22);height:var(--size-22);color:var(--accent);flex:none;}
.nh-csfield .nh-i svg{width:100%;height:100%;display:block;}
.nh-csfield .nh-p{font-family:var(--font-body);font-size:var(--size-16);color:var(--text-tertiary);}
.nh-hero{margin:0 var(--space-16);background:var(--surface-card);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-card);padding:var(--space-24) var(--space-20) var(--space-20);text-align:center;}
.nh-wkrow{display:flex;align-items:center;justify-content:center;gap:var(--space-16);}
.nh-step{width:var(--dim-44);height:var(--dim-44);display:grid;place-items:center;background:var(--surface-ground);color:var(--accent);cursor:pointer;border:var(--border-accent);border-radius:var(--radius-round);}
.nh-step svg{width:var(--dim-16);height:var(--dim-16);display:block;}
.nh-num{font-family:var(--font-display);font-weight:var(--weight-600);font-size:var(--size-60);line-height:var(--leading-100);letter-spacing:var(--tracking-neg-015);color:var(--teal-700);}
.nh-wlab{font-family:var(--font-label);font-weight:var(--weight-600);font-size:var(--size-12);letter-spacing:var(--tracking-14);text-transform:uppercase;color:var(--text-secondary);margin:var(--space-4) 0 var(--space-16);}
.nh-hl{font-family:var(--font-display);font-weight:var(--weight-600);font-size:var(--size-24);line-height:var(--leading-115);color:var(--text-primary);margin-bottom:var(--space-12);}
.nh-desc{font-size:var(--size-16);line-height:var(--leading-150);color:var(--text-secondary);margin-bottom:var(--space-20);}
.nh-cta{display:flex;align-items:center;justify-content:center;gap:var(--space-8);width:100%;background:var(--teal-700);color:var(--text-on-accent);border:0;border-radius:var(--radius-12);padding:var(--space-16);font-family:var(--font-body);font-size:var(--size-15);font-weight:var(--weight-600);cursor:pointer;}
.nh-cta svg{width:var(--dim-16);height:var(--dim-16);}
.nh-bars{display:flex;gap:var(--space-8);margin-top:var(--space-20);}
.nh-track{height:var(--dim-6);border-radius:var(--radius-4);background:var(--surface-sunken);overflow:hidden;}
.nh-fill{height:100%;border-radius:var(--radius-4);}
.nh-fill-1{background:var(--teal-700);}
.nh-fill-2{background:var(--teal-600);}
.nh-fill-3{background:var(--teal-500);}
.nh-fill-4{background:var(--teal-400);}
.nh-fill-5{background:var(--teal-300);}  /* 5th phase (D-626) — no markup uses .nh-fill-* today, but a 4-step ladder under a 5-phase spine is an invisible bar waiting to happen */
.nh-step:active{background:var(--surface-card-hover);}
.nh-cta:active{filter:brightness(0.94);}
.nh-mod{margin:0 var(--rhythm-inset);background:var(--surface-card);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-card);padding:var(--rhythm-pad) 0;}  /* D-510 */
.nh-mhead{display:flex;align-items:baseline;justify-content:space-between;padding:0 var(--rhythm-inset) var(--rhythm-head);}  /* D-510 */
.nh-mhead h2{font-family:var(--font-display);font-weight:var(--weight-500);font-size:var(--size-20);letter-spacing:var(--tracking-neg-01);color:var(--text-primary);}
.nh-eyebrow{font-family:var(--font-label);font-size:var(--size-10);font-weight:var(--weight-700);letter-spacing:var(--tracking-05);text-transform:uppercase;color:var(--text-tertiary);padding:0 var(--space-16) var(--space-4);}
/* ⚠️ --size-14, NOT 16 (D-515). A standfirst is SUPPORTING copy. At 16 it was LARGER than
 * the hero description (14) — so a helper line on a card outweighed the body copy of the single most
 * important thing on the screen, and it also competed with its own <h2> directly above it.
 * One size for supporting body across home; hierarchy comes from HEADLINES, not standfirsts.
 * (Andrew: "it's weird that the standfirsts in the cards are bigger than the hero text.") */
.nh-mstand{font-family:var(--font-body);font-size:var(--size-14);color:var(--text-secondary);line-height:var(--leading-140);padding:0 var(--rhythm-inset) var(--rhythm-stand);margin:0;}  /* D-510 — margin:0 kills the browser default that gave 104 its canyon */
.nh-explore,.nh-seeall{display:inline-flex;align-items:center;gap:var(--space-4);font-family:var(--font-label);font-size:var(--size-12);font-weight:var(--weight-600);color:var(--accent);background:0;border:0;cursor:pointer;}
.nh-explore svg,.nh-seeall svg{width:var(--size-13);height:var(--size-13);display:block;}
.nh-dots{display:flex;justify-content:center;gap:var(--space-8);padding:var(--space-12) 0 0;}
.nh-dot{width:var(--dim-6);height:var(--dim-6);border-radius:var(--radius-round);background:var(--cream-500);border:0;padding:0;cursor:pointer;transition:width var(--duration-200) var(--ease-in-out),background var(--duration-200) var(--ease-in-out),border-radius var(--duration-200) var(--ease-in-out);}
.nh-dot.nh-on{width:var(--dim-16);border-radius:var(--radius-pill);background:var(--accent);}
.nh-shead{display:flex;align-items:baseline;justify-content:space-between;padding:var(--space-12) var(--space-16) var(--space-4);}
.nh-shead h2{font-family:var(--font-display);font-weight:var(--weight-500);font-size:var(--size-20);letter-spacing:var(--tracking-neg-01);color:var(--text-primary);}
.nh-ctx{font-family:var(--font-body);font-size:var(--size-16);color:var(--text-secondary);line-height:var(--leading-140);padding:0 var(--space-16) var(--space-12);}
.nh-panel{margin:var(--space-4) var(--space-16) var(--space-8);background:var(--surface-card);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-card);overflow:hidden;}
.nh-trow{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);border-top:1px solid var(--border-hairline);cursor:pointer;} /* token-exception */
.nh-trow:first-child,.nh-trow.nh-first{border-top:0;}
.nh-tchip{width:var(--dim-40);height:var(--dim-40);border-radius:var(--radius-round);background:var(--kind-track-fill);color:var(--kind-track-icon);display:flex;align-items:center;justify-content:center;flex:none;}
.nh-tchip svg{width:var(--size-18);height:var(--size-18);display:block;}
.nh-tmid{flex:1;min-width:0;}
.nh-tname{display:block;font-family:var(--font-display);font-weight:var(--weight-500);font-size:var(--size-16);color:var(--text-primary);line-height:var(--leading-120);}
.nh-tval{display:block;font-family:var(--font-label);font-size:var(--size-12);font-weight:var(--weight-600);color:var(--text-tertiary);margin-top:var(--space-4);}
.nh-tlog{flex:none;display:inline-flex;align-items:center;gap:var(--space-4);font-family:var(--font-label);font-size:var(--size-13);font-weight:var(--weight-700);color:var(--accent);background:var(--teal-100);border:0;border-radius:var(--radius-pill);padding:var(--space-8) var(--space-16);cursor:pointer;}
.nh-tlog svg{width:var(--size-14);height:var(--size-14);display:block;}
.nh-rail{display:flex;gap:var(--space-12);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:var(--space-12) var(--space-16) var(--space-16);}
.nh-rail::-webkit-scrollbar{display:none;width:0;height:0;}
.nh-sacard{flex:none;width:var(--sa-card);display:flex;flex-direction:column;align-items:flex-start;box-shadow:var(--shadow-card);border-radius:var(--radius-card);padding:var(--space-12);}
.nh-sa-read{background:var(--kind-read-fill);}
.nh-sa-read .nh-sachip{color:var(--kind-read-icon);}
.nh-sa-do{background:var(--kind-do-fill);}
.nh-sa-do .nh-sachip{color:var(--kind-do-icon);}
.nh-sa-track{background:var(--kind-track-fill);}
.nh-sa-watch{background:var(--kind-watch-fill);}
.nh-sa-watch .nh-sachip{background:var(--kind-watch-icon);color:var(--text-on-dark);}
/* 🔴 THE FOURTH FAMILY. (D-548)
 * read / do / track were styled; `watch` was not. No tool is an animation TODAY, so it has never
 * fired — but the class is concatenated from data at runtime, so the day one is, the card renders
 * an unstyled chip and no linter that reads source can tell you why. Styled now, before it bites. */
.nh-sa-track .nh-sachip{color:var(--kind-track-icon);}
.nh-sachip{width:var(--dim-32);height:var(--dim-32);border-radius:var(--radius-round);background:var(--surface-card);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-8);flex:none;}
.nh-sachip svg{width:var(--size-18);height:var(--size-18);display:block;}
/* 🔴 RESERVE TWO LINES (D-547) — a one-line tool name made a 161px card, a two-line one 178px,
 * and the rail stretches to the tallest. Every tool we have is one word ("Sleep", "Feeds"), which
 * is the only reason this has never shown. */
.nh-saname{min-height:calc(2 * var(--leading-115) * var(--size-15));display:block;font-family:var(--font-display);font-weight:var(--weight-500);font-size:var(--size-15);line-height:var(--leading-115);color:var(--text-primary);}
.nh-sawhy{display:block;font-family:var(--font-label);font-size:var(--size-11);font-weight:var(--weight-600);color:var(--text-secondary);line-height:var(--leading-130);margin:var(--space-4) 0 var(--space-12);}
/* `.nh-add` LIVED HERE — the Add button nothing listened to (D-559). A rule that can never
 * fire is a lie about the surface (D-522), so it went with the button. */
.nh-slider{overflow:hidden;}
.nh-cxtrack{display:flex;transition:transform var(--duration-300) var(--ease-in-out);touch-action:pan-y;}
.nh-cxtrack.nh-grabbing{transition:none;}
/* peek: card < 100% so the NEXT collection's edge shows (G3, D-481). Paging advances
   by this % in nhWireCollections — keep the two in sync. */
/* ⚠️ min-width:0 IS LOAD-BEARING. A flex item defaults to `min-width:auto`, which means it
 * CANNOT SHRINK BELOW ITS LONGEST WORD — so `flex: 0 0 88%` is a request, not a rule. With real
 * content the cards came out 297px, 397px and 328px wide: "Why has sleep fallen apart?" forced
 * card 2 wider, which broke the peek AND dragged every card's height up with it (they stretch to
 * the tallest sibling), leaving a canyon of empty space under the short ones.
 * It only appeared once the carousel got REAL data — the hardcoded mannequin (D-518) had four
 * short strings that happened to fit. Fake content does not just lie about the product; it hides
 * the layout bugs the real content will find. */
.nh-mcard{flex:0 0 88%;min-width:0;padding:0 var(--space-16);cursor:pointer;}
/* the card CONTENT (four kind tiles) lives in web/css/cards/home/collections.css (hcol prefix) */
.nh-mfoot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-8);padding:var(--space-12) var(--space-4) 0;}
.nh-mtitle{font-family:var(--font-display);font-weight:var(--weight-500);font-size:var(--size-17);line-height:var(--leading-120);color:var(--text-primary);}
.nh-mmeta{font-family:var(--font-label);font-size:var(--size-11);font-weight:var(--weight-600);color:var(--text-tertiary);flex:none;}
.nh-yrow{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);border-top:1px solid var(--border-hairline);cursor:pointer;} /* token-exception */
.nh-yrow.nh-first{border-top:0;}
.nh-ychip{width:var(--dim-40);height:var(--dim-40);border-radius:var(--radius-round);background:var(--teal-100);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;}
.nh-ychip svg{width:var(--size-18);height:var(--size-18);display:block;}
.nh-ychip.nh-user{background:var(--cream-100);color:var(--text-secondary);border:1px dashed var(--cream-600);} /* token-exception */
.nh-ymid{flex:1;min-width:0;}
.nh-yname{display:block;font-family:var(--font-display);font-weight:var(--weight-500);font-size:var(--size-16);color:var(--text-primary);line-height:var(--leading-120);}
.nh-yval{display:block;font-family:var(--font-label);font-size:var(--size-12);font-weight:var(--weight-600);color:var(--text-tertiary);margin-top:var(--space-4);}
.nh-ychev{flex:none;width:var(--size-16);height:var(--size-16);color:var(--text-tertiary);}
.nh-ychev svg{width:100%;height:100%;display:block;}
/* 🔴 .nh-tabbar / .nh-tab-item ARE GONE (D-521) — SIX RULES OF DEAD CSS.
 * They were carefully written, tokenised, and styled a nav bar that NOTHING IN THE CODEBASE
 * EVER RENDERED. The app has always drawn the tabbar/tab-item classes from app.js. So anyone
 * "designing the nav" in home-shell was editing a ghost — changing a file, reloading, and
 * seeing nothing move.
 * A CSS rule that no markup uses is dead code. It is the harmless twin of the orphan-class bug
 * (D-514, check 27): markup with no CSS SHOUTS (an unstyled <svg> fills its box); CSS with no
 * markup says nothing at all, and just wastes the next person's afternoon. */
.nh-pcard{margin:0 var(--space-16);background:var(--surface-card);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-card);padding:var(--space-16);cursor:pointer;}
.nh-ptitle{font-family:var(--font-display);font-weight:var(--weight-500);font-size:var(--size-20);letter-spacing:var(--tracking-neg-01);color:var(--text-primary);margin-bottom:var(--space-4);}
.nh-psub{font-family:var(--font-body);font-size:var(--size-15);color:var(--text-secondary);line-height:var(--leading-150);margin-bottom:var(--space-16);}
.nh-pcta{display:inline-flex;align-items:center;gap:var(--space-8);font-family:var(--font-label);font-size:var(--size-13);font-weight:var(--weight-700);color:var(--accent);background:var(--teal-100);border:0;border-radius:var(--radius-pill);padding:var(--space-8) var(--space-16);cursor:pointer;}
.nh-pcta svg{width:var(--size-15);height:var(--size-15);display:block;}
.nh-tlog:active,.nh-seeall:active,.nh-explore:active,.nh-pcta:active,.nh-av:active,.nh-dot:active,.nh-sacard:active,.nh-twcard:active{opacity:0.62;}
.nh-trow:active,.nh-yrow:active,.nh-pcard:active,.nh-csfield:active,.nh-babychip:active{background:var(--surface-card-hover);}
button:focus-visible,[data-go]:focus-visible,.nh-csfield:focus-visible,.nh-dot:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:var(--radius-8);}


/* 104 — the .nh-tw* rules moved to web/css/cards/home/try-together.css (prefix twg-).
   The card CSS is the SINGLE SOURCE (mirror check 16): the prefix may appear in no
   other web CSS, or the two can drift and nobody will notice which one won. */