/* [2026-07-30] LLOS mobile foundation — the shared layer behind RESPONSIVE_STANDARD.md.
 *
 * WHY THIS FILE EXISTS: llos.css and the page sheets grew desktop-first, then acquired media
 * queries at 600/640/760/768/880/900/1023px that shrink the desktop page rather than compose a
 * mobile one. RESPONSIVE_STANDARD.md §32 is explicit that a media query is not a mobile strategy.
 * This sheet is the shared FOUNDATION half of the answer — the touch grammar, type scale, spacing
 * and control sizing every page inherits. The per-page composition changes (§32's second list —
 * reordering sections, grid→rail, item limits) live with each page.
 *
 * It loads LAST, after llos.css / shell2026.css / the page sheet, and is scoped to ≤767px, so it
 * cannot affect a single desktop pixel. Removing the <link> restores the previous mobile exactly.
 *
 * Breakpoints follow §29: compact <480 · large mobile 480–767 · tablet portrait 768–959.
 */

/* ── tokens ────────────────────────────────────────────────────────────────
   §23: shared colour tokens, but mobile needs stronger restraint. §19/§20: touch sizes are a
   token, not a per-component decision, so a button cannot accidentally ship at 30px again. */
:root {
  --m-tap:            44px;   /* §19 minimum touch target */
  --m-tap-primary:    48px;   /* §19 primary actions */
  --m-gutter:         16px;   /* §24: width is precious — outer margin, not 32px */
  --m-gutter-tight:   12px;
  --m-gap:            12px;
  --m-section-gap:    28px;

  /* §20 radius grammar — not everything is a pill */
  --m-r-control:       8px;   /* precise controls */
  --m-r-button:       12px;   /* buttons, fields */
  --m-r-card:         16px;   /* cards, sheets */

  /* type scale — one ratio, so headings relate instead of each page inventing sizes */
  --m-text-xs:      0.75rem;
  --m-text-sm:      0.875rem;
  --m-text-base:    1rem;
  --m-text-lg:      1.125rem;
  --m-text-xl:      1.375rem;
  --m-text-2xl:     1.75rem;
  --m-text-hero:    clamp(1.85rem, 8.2vw, 2.4rem);
}

@media (max-width: 767px) {

  /* ── base ───────────────────────────────────────────────────────────────
     §24: on a 390px screen, margins + card padding + icon column leave ~69% for text. Reclaim it:
     one gutter, no nested padding layers. */
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: var(--m-text-base); line-height: 1.55; }

  .wrap, .container, .hub-wrap, .fw-wrap {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
    max-width: 100% !important;
  }

  h1 { font-size: var(--m-text-hero); line-height: 1.08; letter-spacing: -0.02em; }
  h2 { font-size: var(--m-text-2xl); line-height: 1.15; letter-spacing: -0.015em; }
  h3 { font-size: var(--m-text-xl); line-height: 1.25; }
  p  { font-size: var(--m-text-base); line-height: 1.55; }

  /* §28: nothing essential may sit under the sticky header when jumped to via #anchor. */
  :target { scroll-margin-top: 76px; }

  /* ── touch grammar ──────────────────────────────────────────────────────
     §19: ≥44×44, 48 for primary. The visual box may stay small — the TOUCH box may not. Applied
     by role rather than per component, so new markup inherits it.

     NEVER set `display` here. These selectors match elements that other sheets legitimately hide at
     this width (the header's section chip, for one) — a blanket `display:inline-flex` silently
     un-hides them. Elements that are already block/flex take min-height; genuinely inline ones get
     their touch box widened by the ::after below, which §19 explicitly allows ("visual size may be
     smaller if the touch area is larger"). */
  a.btn, button, .btn, [role="button"], .cta,
  .pill, .chip, .audience-pill, .tag-btn,
  .pager a, .pager button, .pagination a, .pagination button,
  input[type="submit"], input[type="button"] {
    min-height: var(--m-tap);
  }
  .pill, .chip, .audience-pill, .tag-btn,
  .pager a, .pager button, .pagination a, .pagination button {
    position: relative;
  }
  .pill::after, .chip::after, .audience-pill::after, .tag-btn::after,
  .pager a::after, .pager button::after, .pagination a::after, .pagination button::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    height: var(--m-tap);
    min-width: var(--m-tap);
    /* purely a hit area — it must never paint over the label */
    background: none;
    pointer-events: auto;
  }
  .btn-primary, .cta-primary, .btn.primary, button[type="submit"] {
    min-height: var(--m-tap-primary);
    border-radius: var(--m-r-button);
  }
  /* Separate neighbouring actions — §19 calls out prev/next, save/delete, star rows by name. */
  .pager > * + *, .pagination > * + *, .cookie-btns > * + * { margin-left: 8px; }

  input, select, textarea {
    min-height: var(--m-tap);
    /* 16px: anything smaller makes iOS Safari zoom the whole page on focus, which reads as a bug. */
    font-size: 16px;
    border-radius: var(--m-r-button);
  }

  /* §28 + §20: focus-visible is a required state, and on touch the pressed state is the feedback. */
  a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--primary, #ea580c);
    outline-offset: 2px;
  }
  a:active, button:active, .btn:active, .cont:active, .m-door:active {
    transform: scale(0.985);
    transition: transform 90ms ease;
  }

  /* ── shell header ───────────────────────────────────────────────────────
     §12/§13: ONE sticky bar, compact. Every sticky element taxes the viewport; the header is the
     only one that earns it on every page. */
  .topbar { min-height: 56px; }
  .topbar .wrap.tb-inner, .topbar .tb-inner {
    padding-top: 6px; padding-bottom: 6px;
    gap: 8px;
  }
  .topbar .ico-btn { width: var(--m-tap); height: var(--m-tap); border-radius: var(--m-r-button); }
  .topbar .logo-box { width: 36px; height: 36px; }
  .topbar .brand { font-size: var(--m-text-base); }

  /* §12: the breadcrumb strip is orientation, not navigation — it must not become a second
     sticky bar stacked under the header. */
  .llos-shell-breadcrumbs, .breadcrumbs, .crumbs {
    position: static !important;
    font-size: var(--m-text-xs);
    padding-top: 6px; padding-bottom: 6px;
  }

  /* ── rails, doors, lists ────────────────────────────────────────────────
     §16: the three mobile collection forms. A rail shows a partial next card so it reads as
     scrollable without an affordance; a door grid carries short labels only; a list carries text. */
  .m-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;           /* 1.28 cards visible — the peek §16 asks for */
    gap: var(--m-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--m-gutter);
    margin-inline: calc(var(--m-gutter) * -1);
    padding-bottom: 4px;
  }
  .m-rail::-webkit-scrollbar { display: none; }
  .m-rail > * { scroll-snap-align: start; }
  .m-rail.is-compact { grid-auto-columns: 46%; }   /* 2.2 compact tiles */

  .m-doors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .m-door {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    min-height: 88px;
    padding: 10px 6px;
    border: 1px solid var(--border, #e8e0d4);
    border-radius: var(--m-r-card);
    background: var(--surface, #fff);
    text-align: center;
    text-decoration: none;
    font-size: var(--m-text-sm);
    font-weight: 700;
    color: var(--text-primary, #1a1626);
    line-height: 1.2;
  }
  .m-door .shape, .m-door svg, .m-door img { width: 30px; height: 30px; }

  /* §16: text-heavy content is a list, never a narrow card. Separators, not containers (§24). */
  .m-list { display: flex; flex-direction: column; }
  .m-list > * {
    display: flex; align-items: center; gap: 12px;
    min-height: 56px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border, #e8e0d4);
    text-decoration: none;
  }
  .m-list > *:last-child { border-bottom: 0; }

  /* ── density ────────────────────────────────────────────────────────────
     §24: avoid nested cards and repeated padding layers. */
  .card .card, [class*="card"] [class*="card"] { border: 0; padding: 0; background: none; box-shadow: none; }
  section { padding-top: var(--m-section-gap); padding-bottom: var(--m-section-gap); }

  /* §11/§18: media never wider than the column, and never a source of sideways scroll. */
  img, svg, video, iframe, table, pre { max-width: 100%; }
  table, pre { display: block; overflow-x: auto; }

  /* ── cookie notice ──────────────────────────────────────────────────────
     §12/§19: at 141px tall over the bottom of the screen this was covering the thumb zone —
     the most valuable real estate on the page — on every page, on the first visit. Slimmed to one
     line with the two actions inline; still fully readable, still both choices, ~64px. */
  .cookie {
    padding: 8px var(--m-gutter) calc(8px + env(safe-area-inset-bottom, 0px));
    font-size: var(--m-text-xs);
    line-height: 1.4;
  }
  .cookie .wrap.cookie-in, .cookie .cookie-in {
    display: flex; align-items: center; gap: 10px;
    padding: 0 !important;
    flex-wrap: nowrap;
  }
  .cookie .cookie-in > p, .cookie .cookie-in > div:first-child {
    flex: 1 1 auto; min-width: 0;
    font-size: var(--m-text-xs); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cookie .cookie-btns { flex: 0 0 auto; display: flex; gap: 8px; margin: 0; }
  .cookie .cookie-btns > * { min-height: 40px; padding-inline: 14px; font-size: var(--m-text-xs); white-space: nowrap; }

  /* ── footer ─────────────────────────────────────────────────────────────
     §14 is already satisfied by the shell2026 footer: the sitemap lives behind the "Site map &
     links" expander (.sf-expand → .sitefoot.show .sf-full) and only the brand, actions and legal
     row show by default. Nothing to restructure here — only the tap sizing it predates. */
  .sitefoot a, .sf-legal a, .sf-social a { min-height: var(--m-tap); }
  .sf-expand { min-height: var(--m-tap-primary); }

  /* ── motion ─────────────────────────────────────────────────────────────
     §22: on mobile, avoid constant movement while someone is reading or choosing. Decorative
     loops stop; purposeful transitions stay. */
  .shape[data-animate="loop"], .deco-anim, [class*="float-anim"] { animation: none !important; }
}

/* §28: honour the system preference at every width. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── touch-first, any width ─────────────────────────────────────────────────
   §29: layout width and input capability are separate decisions. A 1024px tablet is still a
   finger, so it gets the touch sizing without inheriting the phone layout. */
@media (hover: none) and (pointer: coarse) {
  a.btn, button, .btn, [role="button"], .pill, .chip, .audience-pill {
    min-height: var(--m-tap);
  }
  /* Hover-only affordances never hold information a touch user cannot reach (§6). */
  [class*="hover-only"], .show-on-hover { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * PAGE COMPOSITIONS
 * §32: reordering sections, grid→doors, limiting items and removing early links are composition
 * changes, not styling. They are kept per page, below, rather than in the foundation above.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── home (/) ───────────────────────────────────────────────────────────────
 * §7.3 asks the opening screen for four things: identity, promise, search, primary paths. It was
 * delivering the first three and then a six-number statistics wall, two chip rows, and the first
 * of six full description cards — so the six worlds, which ARE the product architecture, began
 * below the fold and arrived one at a time. §46 says the same in its own words: remove statistics
 * and long inventory from the mobile opening, convert card grids to compact doors.
 */
@media (max-width: 767px) {
  .home-hero { padding: 8px 0 10px; }
  .home-hero .hero-top { padding: 0 0 4px; }
  .home-hero .hero-orb-wrap, .home-hero .hero-orb.shape { width: 52px !important; height: 52px !important; margin-bottom: 2px; }
  .home-hero .eyebrow { font-size: 0.625rem; letter-spacing: 0.08em; }
  .home-hero h1 { font-size: clamp(1.8rem, 8vw, 2.2rem); margin: 6px 0 4px; }
  .home-hero .hero-sub {
    font-size: var(--m-text-sm); margin-bottom: 10px;
    /* §25: editorial reduction, not just smaller type — one supporting sentence, two lines. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .home-hero .bigsearch form { min-height: var(--m-tap-primary); }

  /* The quick-link chips repeat destinations the six doors below carry, and the statistics are the
     stats wall §7.3 rules out of the opening. Both return further down the page on desktop; on
     mobile they simply do not compete with the paths. */
  .home-hero .aud-row:nth-of-type(2) { display: none; }
  .home-hero .hub-stats { display: none; }

  /* Audience pills stay — they are a control, not an inventory. All four have to be visible at
     once: a scope selector whose last option is cut off mid-word reads as broken, not scrollable.
     Tightened padding fits Life & Spirit inside 358px of content width. */
  .home-hero .aud-row {
    margin-top: 8px;
    /* Four scopes do not fit 358px however tightly they are padded, and a label cut mid-word reads
       as broken rather than scrollable. §16: show that there is more by fading the edge, so the cut
       is obviously an affordance. */
    position: relative;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .home-hero .audience-pill, #homeAudienceFilters > * {
    min-height: 40px;
    padding-inline: 9px;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  #homeAudienceFilters .fa-solid, #homeAudienceFilters svg, #homeAudienceFilters i { margin-right: 4px; }

  /* Six worlds → six compact doors, lifted into the opening screen. The descriptions, eyebrows and
     "Start learning" footers are what made each one a full card; on mobile the label plus the shape
     is the whole door, and the entire tile is the target. */
  #pillars { padding-top: 14px; padding-bottom: 20px; }
  #pillars .sec-head { margin-bottom: 10px; }
  #pillars .sec-head h2 { font-size: var(--m-text-lg); }
  #pillars .sec-head .h-sub { display: none; }
  #pillars .pillars-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  #pillars .pillars-grid .cont {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    min-height: 92px;
    padding: 12px 6px !important;
    border-radius: var(--m-r-card);
    text-align: center;
  }
  #pillars .pillars-grid .c-desc,
  #pillars .pillars-grid .c-eyebrow,
  #pillars .pillars-grid .c-foot { display: none !important; }
  #pillars .pillars-grid .c-shape { width: 32px !important; height: 32px !important; margin: 0 !important; }
  #pillars .pillars-grid .c-name { font-size: var(--m-text-sm); font-weight: 700; line-height: 1.2; margin: 0; }
}