/* hub-common.css -- shared by the twelve hub-pages, 2026-09-08.

   WHY A SECOND SHARED FILE, not deck-common.css. The hub-pages do not link
   deck-common and should not: it declares .card, .pane, .mda-nav, .card-foot
   and the rest of the DECK's geometry, and the hub-pages define their own
   .mda-nav, .nav-ico and .mda-nav-item. Linking it would import ~450 lines of
   deck CSS into pages that need about forty of them, and put two definitions of
   the nav in play at once. Two families, two shared files.

   WHAT IS IN HERE. Only rules that were byte-identical in ALL TWELVE pages and
   appeared exactly once in each -- counted per occurrence, not per file. That
   distinction matters: an earlier pass on the decks called eight rules "safe"
   by checking only the first match per file, and half of them were not.

   WHAT IS DELIBERATELY NOT IN HERE:
     .wrap .pager-track .pager-page .hub-shell .logo   3-4 variants each
     .mda-nav-item .nav-ico .back-arrow .lede .h2      2 variants each
     .eyebrow                                          12 of 13 pages, and it
                                                       matches NO element -- see below
     (.body MOVED IN 2026-09-12 -- it was 21px in 12 of 13 pages and only 5
      pages ever build one, so nothing gained a rule it never had.)
     .acc* .chevrow .pager-arrow .act                  5 of 12 pages only
   A rule only some pages carry would start applying to pages that never had it.

   ORDER. This loads BEFORE each page's own <style>, so a page rule of equal
   specificity still wins. Bump the ?v= on the link when you change this file.
   ==================================================================== */

/* Browser default text-selection highlight is blue on every engine and was
   never overridden anywhere in the app -- the only place a hard blue still
   rendered live, after the sting-card border sweep. Decks are mostly immune
   (.pane{user-select:none}), but hub-page body copy is selectable and showed
   it. var(--line) is the app's own warm-ink wash, already used for hairline
   borders at 16% -- reused here rather than inventing a new value. (2026-09-10) */
::selection{background:var(--line);color:var(--ink)}
.pager{position:relative;flex:1;min-height:0;overflow:hidden;margin:0 -27px;padding:0 27px}
/* Floating pill, 2026-09-12 -- identical to deck-common.css's rule so the nav
   is one object across all 47 pages. See the note there for the contrast
   measurements behind rgba(188,212,174,.55). */
.mda-nav{position:absolute;left:12px;right:12px;bottom:22px;display:flex;align-items:center;justify-content:space-around;gap:0;background:var(--nav-pill,rgba(188,212,174,.26));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px;border:1px solid rgba(255,255,255,.70);border-radius:999px;box-shadow:0 4px 14px rgba(20,40,70,.08);z-index:5}
.nav-lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.more-menu{position:absolute;bottom:calc(100% + 10px);right:-4px;min-width:176px;background:var(--raised,#F2F2F2);border:1px solid var(--line,#BFBFBF);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.2);padding:6px;display:flex;flex-direction:column;gap:2px;z-index:70}
.more-menu-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink,#1A1A1A);font-family:var(--sans,inherit);font-size:16px;font-weight:600;line-height:1.3}
.mda-more-btn{all:unset;touch-action:manipulation;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-height:54px;padding:4px 8px;border-radius:10px;cursor:pointer;color:inherit;font:inherit}
/* h1 weight 500 -> 600 (2026-09-08, owner: "make h1 600 too so they match").
   h2 had gone to 600 to separate headings from body; leaving h1 at 500 made a
   section heading heavier than the page title above it. Both are 600 now, so
   the two heading levels are one style differing only in margins -- both are
   LEFT. (This comment said "h1 centred with text-wrap:balance, h2 left" until
   2026-09-11; the h1 went left when the spine landed on 2026-09-09 and the rule
   below has said text-align:left ever since. Comment only -- nothing rendered
   changes, so no ?v= bump.) Same 600-not-700 constraint:
   Fraunces is loaded at 400/500/600 only. */
/* align-self:stretch stays, but NOT for the reason this comment used to give.
   It was written on 2026-09-08 for a centred h1: text-align:center alone did
   nothing, because .pager-page is a flex column with align-items:flex-start, so
   the h1 box shrank to its own text and there was nothing to centre inside --
   the same trap as the decks' h2 that day. The h1 went LEFT on 2026-09-09 when
   the spine landed, so the centring half of that story is over. stretch is kept
   because text-wrap:balance needs the full column width to balance against, and
   because it keeps the box honest when a title wraps to two lines. */

/* .lede -- the one-sentence line under a hub h1. Consolidated 2026-09-12.

   It rendered FOUR ways: 18 left on the six list hubs, 21 CENTRED on the four
   narrative covers (they inherit centre from .pager-page.centre and set no
   text-align of their own), 21 left on donate, and 19 centred on Home. The centred
   ones sit under a LEFT h1 and above left rows, which _dev/CARD_RULES.md §3f names
   as the failure mode.

   The collision behind it is resolved by OWNERSHIP, not preference: CARD_TYPES.md's
   hub row recorded "h1 left, .lede centred" as a MEASUREMENT taken 2026-09-10, and a
   measurement is not a convention. §3f owns alignment. 18 left wins -- it is the
   value the six list hubs already ship and the one CARD_TYPES calls locked.

   The block-centring of .pager-page.centre STAYS. That is the documented arrival
   beat; only the lede's own text-align changes.

   align-self:stretch is not optional -- .pager-page is a flex column, so text-align
   alone has nothing to act on (§5b).

   HOME IS DELIBERATELY NOT INCLUDED. It keeps its own 19px centred rule, which wins
   over this one, because Home's lede is part of the brand-cover composition and the
   related item (its h1's left edge moving with the subtitle's length) is unresolved.
   Doing half of that composition is worse than doing none. */
.lede{font-family:var(--sans);font-size:18px;line-height:1.45;color:var(--soft);margin:0;width:100%;align-self:stretch;text-align:left}

/* .act -- the action pill on the five menu decks. Moved here 2026-09-12 so seven
   buttons stop being positioned by where their markup happens to sit.

   ITS CENTRING STAYS. An earlier proposal would have put it on the x=27 spine; that
   was OVERTURNED, because hub-pages/about/index.html:224 carries a dated owner
   instruction -- "Centred by owner request", 2026-09-02 -- and three review seats had
   correctly referred the question to the owner rather than answering it.
   donate's pill sits at x=27 only because its anchor is nested inside a stretched
   wrapper; that is the accident, not the centring. */
.act{display:inline-flex;align-self:center;align-items:center;justify-content:center;margin-top:20px;padding:10px 26px;min-height:48px;border-radius:999px;border:1.5px solid var(--tap-outline);background:var(--card);color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:19px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.10)}

/* .wrap -- THE CARD SURFACE. Added 2026-09-12.

   Every one of the 44 hub-card shots rendered #FFFCF5 and every one of the 360
   deck-card shots #F7F2E7 -- and #FFFCF5 is --paper, which _dev/VISUAL_SYSTEM.md §2
   reserves for "the page behind the card". All 13 hub pages declare --card correctly
   in their own :root and not one of them used it; each painted .wrap with
   var(--paper) instead. One systematic template error, not 13 drifts, and a reader
   crossed it every time they pressed Begin on an area hub. */
/* The hub card takes the same sky as a deck card, so tapping from a list into
   a practice does not change the ground under the reader. See the note in
   deck-common.css. */
.wrap{background-color:var(--paper);background-image:linear-gradient(180deg,var(--sky-1,#E9F2FA) 0%,var(--sky-2,#DCEAF4) 55%,var(--sky-3,#D3E4F2) 100%)}

/* --body-size / .body -- the hub family's body copy, consolidated here 2026-09-12.

   It was 21px, byte-identical, in 12 of the 13 hub pages (all but Home), against
   _dev/VISUAL_SYSTEM.md §4's scale of 17 and the deck corpus's 259 paragraphs at
   17. At 21 in the 289px column a line carries 26-30 characters, so privacy#10 set
   ONE sentence over five lines.

   Safe to live here, checked the same way .quote-text was: of the 13 pages only
   FIVE ever build a .body element (about 5, donate 1, live-sessions 2, privacy 13,
   support 5). The other eight -- including Home, which never declared the rule --
   build none, so nothing gains a rule for an element it does not have.

   The token is declared here because no hub page carries one; the decks get theirs
   from each page's own :root. */
/* color-scheme:light added 2026-09-14 (owner: "the cards / slides should all only be
   light mode regardless of device settings"). It is not decoration: it is what stops
   the UA painting its OWN surfaces dark underneath us -- the initial canvas, form
   controls (the enrol input on Home), scrollbars -- and what tells a WebView the page
   does not want algorithmic darkening. Each page also carries
   <meta name="color-scheme" content="light">; this rule is what reaches a page that
   does not. Declared on the existing :root rule rather than a new html{} one, so the
   hygiene gate's duplicate-selector check still holds. */
:root{color-scheme:light;--body-size:17px;--body-size-sm:15px}
.body{font-family:var(--sans);font-size:var(--body-size);line-height:1.5;color:var(--ink);margin:0 0 10px}
.body.soft{color:var(--soft)}

h1{max-width:100%;font-family:var(--serif);font-weight:600;font-size:25px; line-height:1.25;letter-spacing:normal;margin:0 0 14px;color:var(--ink); text-align:left;align-self:stretch;text-wrap:balance}

/* h2 -- the section heading on the four narrative pages (about, live-sessions,
   privacy, support). Identical in all four; moved here 2026-09-08.

   Safe to put in a file all twelve link because the other eight have NO <h2>
   ELEMENT at all -- checked, not assumed. A rule that reaches pages which never
   had it is the trap this consolidation keeps having to avoid.

   home also declares h2, and deliberately keeps its own copy: 23px, weight 400,
   coloured by --tc. That is a path-row label wearing an h2 tag, not a section
   heading, and its own <style> loads after this file so it still wins.

   RESOLVED 2026-09-08 (owner: "drop h2 to 23 everywhere"): was 26px against a
   23px h1, which made the page title the smallest heading on the page. Now 23,
   matching h1, the decks' h2 and the Subheading sample. */
/* h2 weight 500 -> 600 (2026-09-08, owner: "make h2 bolder so it reads as a
   heading"). With every size flattened to 23px, weight is the only thing left
   separating a heading from body copy -- and Inter's larger x-height meant a
   500-weight serif heading was reading SMALLER than the 400-weight sans
   paragraph under it.
   600, not 700: the Fraunces web font is loaded at 400/500/600 only, so 700
   would be synthesised by the browser -- faux bold, which is worse than the
   problem it fixes. If 700 is ever wanted, the font URL has to add it first. */
h2{max-width:90%;font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.25;margin:0 0 12px;color:var(--ink)}


/* ---------------------------------------------------------------------------
   Moment rows (.prow) -- the five accordion hub-pages, 2026-09-08.

   Owner: "use the 1st image style and the 2nd type of card" -- take Home's
   five-areas list and apply it to the hub pages' moment lists. The accordion
   went with it: a row is now a direct link to its deck with a status word on
   the right, exactly like Home, and the per-row description lines are gone.

   Deliberately Home's metrics, not the accordion's: 36px icon and 10px
   vertical padding gives a 56px row, where .acc-head had been squeezed to 46px
   to fit six rows plus an open panel. With no panel to fit, the squeeze is not
   needed -- six 56px rows come to 336px inside a 415px budget -- and 56px is a
   more comfortable tap target than the 44px minimum.

   Status word wording matches Home exactly: Begin / Continue / Begin again.
   No form of the word "start" appears, which is a standing owner instruction.
   --------------------------------------------------------------------------- */
.prow-list{width:100%;display:flex;flex-direction:column}
.prow-item{border-bottom:1px solid var(--line)}
.prow-item:last-child{border-bottom:0}
/* gap 12 -> 8 and .prow-lbl 19 -> 18 (2026-09-09). One row in the app broke the
   56px rhythm: "Change & Adaptability" on Leadership wrapped to two lines and
   stood 66px tall against every other row's 56 -- Home's five, all four area
   hubs' six, and its own three siblings. It missed fitting by 9px.
   The alternative was shortening the course's name, which is the wrong way
   round: the layout should hold the content, not trim it. 18 is already on the
   type scale (--body-size-sm) and 8 is on the spacing scale, so neither is a
   new value; together they give that label 198px for the 188.8 it needs, and
   every other row loses a hair of icon gap nobody will see. Measured, not
   estimated: at 19px it needs 199.1px and had 190. */
.prow{all:unset;touch-action:manipulation;box-sizing:border-box;display:flex;align-items:center;gap:8px;
      width:100%;padding:10px 0;cursor:pointer;color:inherit;text-align:left;text-decoration:none}
.prow:hover{opacity:.85;transition:opacity .15s ease}
.prow:active{opacity:.65}
.prow:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}
.prow .mrow-ico{width:36px;height:36px}
/* STEP NUMBER -- the icon slot, carrying an ordinal instead of a mark.
   Added 2026-09-09 for the Introduction, the one area that is a sequence, and
   promoted here the same day (owner: "that's a really good idea, let's go with
   that across the board") so any ordered list can take it.
   Same 32x36 box as .prow .mrow-ico on purpose: the row stays 56px and the
   label keeps its full width. Putting the number inside the label instead cost
   22px and wrapped "Everyday Mindfulness" onto two lines. */
.prow .prow-num{width:32px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12px;font-weight:500;
  letter-spacing:.04em;color:var(--tc,var(--muted));font-variant-numeric:tabular-nums}
.prow-lbl{flex:1;font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.2;color:var(--ink)}
/* Takes the row's own --tc where one is set (work-courses colours its rows
   individually, like Home); elsewhere it falls back to the page's accent, so
   the word matches the icon beside it. */
.prow-open-lbl{flex-shrink:0;font-family:var(--sans);font-weight:600;font-size:14px;color:var(--tc,var(--accent))}