/* V01 home / journey hub.
   Loaded AFTER niko/styles.css, so it may override the base without !important.
   Owned by the V01 build; the JS that renders these surfaces is niko/journey.js.
   Design law: docs/design/NIKOLEARN_DESIGN_CONSTITUTION.md (§2 principles, §8 case registry,
   §8.1 imagery baseline, §8.3 mobile geometry 320/375/390/430, 2 columns on phone).

   EVERY rule here is scoped under .home2. The same .jhub / .jhub-cta / .jhub-say card language is
   reused by the subject screen (journeyHub) and the reward screen (journeyRoundEnd), and neither of
   those is inside .home2, so nothing outside home can be moved by this file. */

/* ── 1. THE PLACE ──────────────────────────────────────────────────────────────
   Home answers „where am I" with a picture, not a sentence, so the picture gets the room. The old
   132px band was a strip above a form; at 38vw it is a view. .jband already handles founder art
   (background-image, cover) and the vector fallback identically, so one height serves both. */
.home2 .hm-art .jband{height:clamp(126px,38vw,168px)}

/* The card body rises INTO the picture instead of the picture being fenced off above it. This is the
   PI-210 „integrated, never pasted" move, done without touching a single pixel of the artwork: no
   scrim, no fade, no sticker floating on top. The old 📍 pin is gone; the state now lives in the type. */
.home2 .hm-lead{position:relative;z-index:1;margin-top:-13px;padding:11px 16px 13px;
  background:var(--card,#fff);border-radius:18px 18px 0 0}

/* The vector fallback band seats an owl in the corner. The say row 60px below carries the same owl,
   and two owls in one card is noise, not character (§2.6). Founder-art bands have no .jb-owl, so this
   only ever fires on the fallback. */
.home2 .hm-art .jb-owl{display:none}

/* ── 2. STATE, THEN MISSION ────────────────────────────────────────────────────
   „აქ გავჩერდით" is small and quiet: it is context, not the goal. The drawn pin inherits the row's
   ink and its hole is punched in the card colour, so it reads as one mark in one colour. */
.home2 .hm-kick{display:flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:800;letter-spacing:.2px;color:var(--muted)}
.home2 .hm-here{width:11px;height:13px;flex:0 0 auto;fill:currentColor}
.home2 .hm-here circle{fill:var(--card,#fff)}

/* THE MISSION. This is the line the whole card exists to deliver, so it is the biggest text on the
   screen after the child's own name. It wraps rather than ellipsises: a truncated mission is not a
   mission. At 320 the two-line case still clears the fold. */
.home2 .hm-mission{font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.2rem,5.4vw,1.44rem);line-height:1.16;color:var(--ink);
  overflow-wrap:break-word}
/* only when a state line is actually above it: on a cold profile journeyNow renders no kick row, and
   the mission must not inherit a gap from a sibling that is not there. */
.home2 .hm-kick + .hm-mission{margin-top:3px}

/* ── 3. THE ONE BUTTON ─────────────────────────────────────────────────────────
   Exactly one dominant action per §2.2, and it is now the FIRST thing in the panel instead of the
   third: progress used to sit above it and split the eye. Bigger verb, and the sub-line names the
   PLACE the button opens, so no string on this card is printed twice. */
.home2 .hm-cta{margin:0;min-height:64px}
.home2 .hm-cta .jc-t b{font-size:clamp(1.2rem,5vw,1.32rem)}
.home2 .hm-cta .jc-t span{font-size:.9rem;opacity:.94}
.home2 .hm-cta .jc-go{width:38px;height:38px}

/* ── 4. PROGRESS, AFTER THE ACTION ─────────────────────────────────────────────
   Constitution §4 order: progress is a consequence, so it follows the primary action. It is still
   fully visible without scrolling; it just no longer competes to be pressed. For the ≤5 lane
   journeyNow drops this block entirely, heading included. */
.home2 .hm-prog{margin-top:14px}
.home2 .hm-prog .jsec-h{margin-bottom:8px}
.home2 .hm-prog .jnow-bar{margin-top:0;height:10px}

/* ── 5. THE OWL, LAST AND QUIET ────────────────────────────────────────────────
   The header one row above already greets the child by name. The owl's line is warmth, not
   instruction, so it sits below the fold-critical stack with a hairline of its own. */
.home2 .hm-say{padding:10px 16px 11px;
  border-top:1.5px solid color-mix(in oklch,var(--line) 55%,transparent)}
.home2 .hm-say .jhub-owl{width:30px;height:30px}
.home2 .hm-say span{font-size:.85rem;color:var(--muted)}

/* ── 6. THE WORLD LIST IS NAVIGATION, NOT A SECOND HEADLINE ────────────────────
   Registry: home „MUST NOT become a long exploratory map". The grid itself is rendered by
   worlds.js / screens.js, which this build does not own, so the lever here is weight and height:
   a section label that reads as a divider, and cards that keep a comfortable tap target while
   giving back roughly a card-row of vertical space across the 10-card grid. */
.home2 .home-seclabel{display:flex;align-items:center;gap:10px;font-size:.85rem;margin:16px 2px 10px}
.home2 .home-seclabel::after{content:"";flex:1;height:2px;border-radius:2px;
  background:var(--world-ink-soft,#7A5C3F);opacity:.32}

.home2 .subj-grid{gap:clamp(10px,2.9vw,13px)}
.home2 .subj{min-height:clamp(116px,31.5vw,140px)}
.home2 .subj.wld.hasband{--bandh:clamp(66px,18.5vw,80px)}

/* WORLD STATE. The only state the card markup exposes is „current" (.wnow + the .w-now pill), and
   adding COMPLETED / LOCKED marks means editing worlds.js, which this build does not own. So the
   state that does exist is made unmissable instead: the ring keeps its shape but gains depth, and
   the pill gets an outline rather than a new fill, because inverting it to solid coral would drop
   that small text below AA (§2.9). */
.home2 .subj.wld.wnow{box-shadow:inset 0 -5px 0 rgba(0,0,0,.13),0 0 0 3px var(--card,#fff),
  0 0 0 6px var(--primary-d,#564fa0),0 10px 20px -6px rgba(60,45,15,.34)}
.home2 .subj.wld .w-now{font-weight:900;
  box-shadow:0 0 0 2px var(--primary-d,#564fa0),0 2px 6px rgba(0,0,0,.18)}

/* NB-277 (founder 2026-08-27): the „your path" row on the home card is now a real control, so it needs
   the button reset the div never did. Same geometry as before, plus a chevron that declares the tap. */
.home2 button.hm-prog{display:block;width:100%;background:none;border:0;padding:4px 0;font:inherit;
  min-height:44px;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.home2 button.hm-prog:active{transform:scale(.985)}
.home2 .hm-prog .jsec-go{display:inline-block;margin-left:2px;font-weight:800;opacity:.75}