/* Site-wide mobile fix. Pages use inline styles instead of classes, so this
   targets inline style values directly via attribute selectors and wins
   with !important (a normal, non-!important inline style loses to an
   !important rule in a linked stylesheet — this is standard CSS behavior).

   IMPORTANT: on pages that use <sc-for>/<sc-if> template blocks, support.js
   re-renders HTML through the DOM at load time, which makes the browser
   re-serialize every inline style attribute: "prop:value" becomes
   "prop: value" (space after the colon) and hex colors become
   "rgb(r, g, b)". Pages with no template blocks keep the original
   un-normalized attribute text. Since either form can be live on any given
   page, EVERY value-based selector below is duplicated in both forms —
   dropping either half silently breaks that rule on half the site.

   Elements ADDED after the retrofit (tab bar, etc.) use real classes
   (.m-*) instead of attribute selectors — new markup should always do
   this; the attribute-selector approach is only for legacy inline styles. */

/* Clickable cross-link rows (e.g. equation contributors -> genealogy).
   The whole row is an <a class="contrib">; hover tints it and the pointer
   cursor + "↗" signal it navigates. Applies on all viewports. */
.contrib { transition: background .12s ease; cursor: pointer; }
.contrib:hover { background: #eef3f5; }

/* Bottom-sheet entrance (used on mobile; defined top-level so the name
   resolves regardless of media nesting support). */
@keyframes m-sheet-up {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [style*="border:1px solid #d3e3e9;background:#fbfdfe"],
  [style*="border: 1px solid rgb(211, 227, 233); background: rgb(251, 253, 254)"],
  [style*="border:1px solid #e6ddca;background:#fdfaf3;padding:20px 20px 18px"],
  [style*="border: 1px solid rgb(230, 221, 202); background: rgb(253, 250, 243); padding: 20px 20px 18px"] {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Reserve space for the fixed bottom tab bar. Body bg must stay cream:
     Intopia Home's wrapper (.home-wrap) has no background of its own and
     inherits the page color from body -- a dark body bg here turned the
     whole Home page dark on mobile. The reserved strip sits behind the
     fixed tab bar anyway, so its color is barely visible.
     Tool pages (body.app) have NO brochure tab bar, so they reserve no
     bottom space -- see the app-shell block below. */
  body { background: #fffefa !important; padding-bottom: calc(54px + env(safe-area-inset-bottom)) !important; }
  body.app { padding-bottom: 0 !important; }

  /* ── App shell: on the 8 knowledge-TOOL pages (body.app) entering a tool
     should feel like launching a separate app, not browsing a brochure
     sub-page. So the brochure bottom tab bar is hidden and the top nav
     becomes a sticky slim app bar (exit "← intopia" on the left + the
     tool's identity on the right). Brochure/launcher pages keep the tab
     bar and standard nav. ── */
  body.app .m-tabbar { display: none !important; }
  .app-nav {
    position: sticky !important;
    top: 0;
    z-index: 800;
    background: rgba(255, 254, 250, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  /* Keep the tool-identity element visible: the generic header rule below
     hides a nav's flex child (the brochure's marketing links), but on tool
     pages that child is the app identity we WANT shown. Higher specificity
     + later source order beats the hide rule. */
  body.app .app-nav > div { display: flex !important; }

  /* ── Bottom tab bar (markup present on every page, hidden on desktop
     via inline display:none; this brings it to life on mobile). ── */
  .m-tabbar {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    background: rgba(255, 254, 250, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid #ececea;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .m-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 0 10px;
    text-decoration: none;
    color: #68707b;
    font-size: 12.5px;
    font-weight: 500;
  }
  .m-tab span {
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #b0b4ba;
  }
  .m-tab-active { color: #15171d; font-weight: 600; }
  .m-tab-active span { color: #9a6a2f; }

  /* Pressed-state feedback: cards/links dim briefly under the finger. */
  a:active,
  [style*="cursor:pointer"]:active,
  [style*="cursor: pointer"]:active {
    opacity: .6;
  }

  /* Reading comfort: the site's main long-form paragraph size (14.5px on
     desktop) reads small on a phone held at arm's length. */
  [style*="font-size:14.5px"], [style*="font-size: 14.5px"] { font-size: 15.5px !important; }

  /* Collapse every multi-column grid to a single stacked column by default
     (this is the safe fallback for page-header / sidebar grids like
     "1.15fr .85fr" or "260px 1fr" that only make sense at desktop width). */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Ordered card grids: restore real rows-and-columns instead of one long
     single-file list. These are short, uniform "card" components (numbered
     bands, reference/tag cards, equation tiles) repeated site-wide — on a
     375px screen they read far better as a real grid than as an endless
     scroll. Comes after the fallback above so it wins ties by source order. */
  [style*="repeat(2,1fr)"], [style*="repeat(2, 1fr)"],
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3- and 4-column card rows are too cramped at their original count on a
     narrow screen, but still read well as 2 columns rather than collapsing
     all the way to 1. */
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* The 64-hexagram mini-grid (Classics Library): cells are tiny badges, so
     4 columns still stays tidy instead of forcing a very tall single file. */
  [style*="repeat(8,1fr)"], [style*="repeat(8, 1fr)"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Latin Grammar declension table: a genuine data table (case x number),
     not a card grid -- the 1fr fallback above breaks the row/column
     correspondence entirely (18 cells run together in one column with no
     visible pairing). Keep 3 real columns, just narrow the case-label one
     so the two word-form columns get more room on a 375px screen. */
  [style*="grid-template-columns:118px 1fr 1fr"],
  [style*="grid-template-columns: 118px 1fr 1fr"] {
    grid-template-columns: 46px 1fr 1fr !important;
  }
  [style*="padding:9px 20px;font-size:10.5px"],
  [style*="padding: 9px 20px; font-size: 10.5px"] {
    padding-left: 8px !important;
    padding-right: 6px !important;
  }

  /* Lexicon/Classics Library search inputs: fixed min-width overflows a
     375px screen since nothing else shrinks to compensate. */
  [style*="min-width:300px"], [style*="min-width: 300px"],
  [style*="min-width:280px"], [style*="min-width: 280px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* When a card grid renders only one item (common for single-entry lists
     like a lone genealogy/reference card), a fixed column count leaves an
     awkward empty gap next to it -- let the lone card span the full row. */
  [style*="repeat(2,1fr)"] > *:only-child, [style*="repeat(2, 1fr)"] > *:only-child,
  [style*="grid-template-columns:1fr 1fr"] > *:only-child, [style*="grid-template-columns: 1fr 1fr"] > *:only-child,
  [style*="repeat(3,1fr)"] > *:only-child, [style*="repeat(3, 1fr)"] > *:only-child,
  [style*="repeat(4,1fr)"] > *:only-child, [style*="repeat(4, 1fr)"] > *:only-child,
  [style*="repeat(8,1fr)"] > *:only-child, [style*="repeat(8, 1fr)"] > *:only-child {
    grid-column: 1 / -1 !important;
  }

  /* Exception: About's Vision/Mission grid holds full paragraphs of
     unpredictable length -- 2 columns would cram them; keep it 1 column.
     Must stay after the "1fr 1fr" rule above to win the tie by source order. */
  [style*="1fr 1fr;gap:56px;border-top:1px solid"],
  [style*="1fr 1fr; gap: 56px; border-top: 1px solid"] {
    grid-template-columns: 1fr !important;
  }

  /* Let flex rows wrap instead of squeezing children. */
  [style*="display:flex"],
  [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  /* Scripture's term-detail sidebar (position:sticky;top:24px;display:flex…)
     is the SECOND grid child; once the grid collapses it would render after
     the whole verse list, so tapping a term updates a panel far below with
     no visible change. Move it to the front. NOTE: scoped to the flex form
     so it hits ONLY Scripture -- Genealogy's panel (bare sticky, now a
     bottom-sheet on tap) must stay in place so the timeline MAP leads
     (primary-action-first, TOOL_LAYOUT_SPEC); and the Latin/Equations TOC
     rails (also bare sticky) are already first, so leaving them alone is
     correct. */
  [style*="position:sticky;top:24px;display:flex"],
  [style*="position: sticky; top: 24px; display: flex"] {
    order: -1 !important;
  }

  /* Genealogy (selected person) and Scripture (selected term): the detail
     becomes a bottom sheet on mobile (Dropbox-preview style) instead of a
     panel somewhere in the document flow. Tapping mid-scroll shows the
     result immediately, overlaid at the bottom of the screen, with close
     and prev/next controls (added in the page markup). Genealogy's
     selector matches the panel's border+background combo (unique
     site-wide); Scripture's must ALSO include the padding because the
     verse term chips share the same border+background — matching them
     would turn every chip into a fixed sheet. */
  [style*="border:1px solid #d3e3e9;background:#fbfdfe"],
  [style*="border: 1px solid rgb(211, 227, 233); background: rgb(251, 253, 254)"],
  [style*="border:1px solid #e6ddca;background:#fdfaf3;padding:20px 20px 18px"],
  [style*="border: 1px solid rgb(230, 221, 202); background: rgb(253, 250, 243); padding: 20px 20px 18px"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1000 !important;
    max-height: 62vh !important;
    overflow-y: auto !important;
    border-radius: 14px 14px 0 0 !important;
    border-bottom: none !important;
    box-shadow: 0 -10px 30px rgba(21, 23, 29, .18) !important;
    padding: 18px 20px calc(24px + env(safe-area-inset-bottom)) !important;
    animation: m-sheet-up .26s ease-out;
  }

  /* Header: with the bottom tab bar carrying navigation, the top header
     shrinks to a clean single logo line — the 4-link row is hidden on
     mobile (all destinations remain reachable from the tab bar). */
  [style*="padding:24px 56px"],
  [style*="padding: 24px 56px"],
  [style*="padding:24px 52px"],
  [style*="padding: 24px 52px"] {
    padding: 14px 20px !important;
  }
  [style*="padding:24px 56px"] > div[style*="display:flex"],
  [style*="padding: 24px 56px"] > div[style*="display: flex"],
  [style*="padding:24px 52px"] > div[style*="display:flex"],
  [style*="padding: 24px 52px"] > div[style*="display: flex"] {
    display: none !important;
  }

  /* "label — flexible text — value" rows (baseline-aligned) wrap unevenly on
     narrow screens, leaving the last value floating above wrapped text.
     Stack them into a clean top-to-bottom list instead. */
  [style*="align-items:baseline"],
  [style*="align-items: baseline"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* Divider borders meant to separate side-by-side grid columns are pointless
     (and look like stray lines) once the grid collapses to one column;
     move the divider to the bottom instead. */
  [style*="border-right:1px solid #ececea"],
  [style*="border-right: 1px solid #ececea"],
  [style*="border-right: 1px solid rgb(236, 236, 234)"] {
    border-right: none !important;
    border-bottom: 1px solid #ececea !important;
  }

  /* Desktop outer side-padding (56px/52px) leaves almost nothing for content
     on a 375px screen, AND the top/bottom values (inherited as-is from
     desktop) swing from 0 to 96px with no consistent rhythm -- some
     sections feel cramped, the hero feels like a third of the screen is
     empty margin. Each rule below sets one specific declaration's full
     padding shorthand: sides tightened to 20px, top/bottom compressed onto
     a rough 3-tier scale (>=80px->40px, 56-79px->32px, 34-55px->24px;
     anything already <34px is left as-is since it's not excessive) while
     preserving whichever side stays 0 in the original (nested sections
     that already have no side padding of their own). */
  [style*="padding:0 56px 20px"], [style*="padding: 0px 56px 20px"] { padding: 0 20px 20px !important; }
  [style*="padding:0 56px 76px"], [style*="padding: 0px 56px 76px"] { padding: 0 20px 40px !important; }
  [style*="padding:0 56px"], [style*="padding: 0px 56px"] { padding: 0 20px !important; }
  [style*="padding:56px 0 44px"], [style*="padding: 56px 0px 44px"] { padding: 32px 0 24px !important; }
  [style*="padding:56px 56px 0"], [style*="padding: 56px 56px 0"] { padding: 32px 20px 0 !important; }
  [style*="padding:44px 56px 80px"], [style*="padding: 44px 56px 80px"] { padding: 24px 20px 40px !important; }
  [style*="padding:34px 56px 80px"], [style*="padding: 34px 56px 80px"] { padding: 24px 20px 40px !important; }
  [style*="padding:30px 56px 0"], [style*="padding: 30px 56px 0"] { padding: 30px 20px 0 !important; }
  [style*="padding:20px 56px 0"], [style*="padding: 20px 56px 0"] { padding: 20px 20px 0 !important; }
  [style*="padding:60px 56px 76px"], [style*="padding: 60px 56px 76px"] { padding: 32px 20px 40px !important; }
  [style*="padding:56px 56px"], [style*="padding: 56px 56px"] { padding: 32px 20px !important; }
  [style*="padding:56px"], [style*="padding: 56px"] { padding: 32px 20px !important; }
  [style*="padding:96px 52px 88px"], [style*="padding: 96px 52px 88px"] { padding: 40px 20px !important; }
  [style*="padding:80px 56px"], [style*="padding: 80px 56px"] { padding: 40px 20px !important; }
  [style*="padding:76px 52px 20px"], [style*="padding: 76px 52px 20px"] { padding: 32px 20px 20px !important; }
  [style*="padding:72px 56px 76px"], [style*="padding: 72px 56px 76px"] { padding: 32px 20px 40px !important; }
  [style*="padding:72px 56px"], [style*="padding: 72px 56px"] { padding: 32px 20px !important; }
  [style*="padding:66px 52px 76px"], [style*="padding: 66px 52px 76px"] { padding: 32px 20px 40px !important; }
  [style*="padding:66px 52px 20px"], [style*="padding: 66px 52px 20px"] { padding: 32px 20px 20px !important; }
  [style*="padding:64px 56px 44px"], [style*="padding: 64px 56px 44px"] { padding: 32px 20px 24px !important; }
  [style*="padding:64px 56px 40px"], [style*="padding: 64px 56px 40px"] { padding: 32px 20px 24px !important; }
  [style*="padding:64px 56px 20px"], [style*="padding: 64px 56px 20px"] { padding: 32px 20px 20px !important; }
  [style*="padding:60px 56px 0"], [style*="padding: 60px 56px 0"] { padding: 32px 20px 0 !important; }
  [style*="padding:56px 56px 80px"], [style*="padding: 56px 56px 80px"] { padding: 32px 20px 40px !important; }
  [style*="padding:56px 52px 44px"], [style*="padding: 56px 52px 44px"] { padding: 32px 20px 24px !important; }
  [style*="padding:36px 56px 80px"], [style*="padding: 36px 56px 80px"] { padding: 24px 20px 40px !important; }
  [style*="padding:34px 56px 0"], [style*="padding: 34px 56px 0"] { padding: 24px 20px 0 !important; }
  [style*="padding:32px 56px 20px"], [style*="padding: 32px 56px 20px"] { padding: 32px 20px 20px !important; }
  [style*="padding:30px 56px 80px"], [style*="padding: 30px 56px 80px"] { padding: 30px 20px 40px !important; }
  [style*="padding:24px 52px"], [style*="padding: 24px 52px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:22px 56px 76px"], [style*="padding: 22px 56px 76px"] { padding: 22px 20px 40px !important; }
  [style*="padding:12px 56px 76px"], [style*="padding: 12px 56px 76px"] { padding: 12px 20px 40px !important; }

  /* NOTE: there is no genuine fixed-width element anywhere in this codebase —
     every "width:NNNpx" match turned out to be "max-width:NNNpx" (substring
     match caught the "max-" prefix too). max-width alone already shrinks
     fine on mobile; forcing width:100% !important on top of it made these
     content-box elements render at contentWidth(100%) + their own padding,
     which overflowed every page by exactly its own side padding. Removed. */

  img, svg { max-width: 100%; height: auto; }

  /* Desktop-scale headline sizes overflow a narrow viewport; scale down. */
  [style*="font-size:96px"], [style*="font-size: 96px"] { font-size: 44px !important; }
  [style*="font-size:52px"], [style*="font-size: 52px"] { font-size: 30px !important; }
  [style*="font-size:48px"], [style*="font-size: 48px"] { font-size: 28px !important; }
  [style*="font-size:46px"], [style*="font-size: 46px"] { font-size: 27px !important; }
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 26px !important; }
  [style*="font-size:42px"], [style*="font-size: 42px"] { font-size: 25px !important; }
  [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 24px !important; }
  [style*="font-size:38px"], [style*="font-size: 38px"] { font-size: 23px !important; }
  [style*="font-size:36px"], [style*="font-size: 36px"] { font-size: 22px !important; }
  [style*="font-size:34px"], [style*="font-size: 34px"] { font-size: 21px !important; }
  [style*="font-size:32px"], [style*="font-size: 32px"] { font-size: 20px !important; }
  [style*="font-size:30px"], [style*="font-size: 30px"] { font-size: 19px !important; }
  [style*="font-size:28px"], [style*="font-size: 28px"] { font-size: 18px !important; }
  [style*="font-size:26px"], [style*="font-size: 26px"] { font-size: 17px !important; }
  [style*="font-size:25px"], [style*="font-size: 25px"] { font-size: 17px !important; }
  [style*="font-size:24px"], [style*="font-size: 24px"] { font-size: 16px !important; }

  /* Exception: the hero formula in the equation detail views is also 24px
     inline -- the headline-shrink rule above was collapsing the MATH to
     16px, exactly backwards for readability. KaTeX scales with font-size;
     keep it display-sized (it already scrolls horizontally if too wide).
     Must come after the 24px rule to win by source order. */
  .eq-tex[style*="font-size:24px"], .eq-tex[style*="font-size: 24px"] {
    font-size: 22px !important;
  }

  /* Touch targets: these text-only links (footer nav, "View all ->", the
     in-page tab-bar anchors) render as small inline text with no padding --
     comfortable to click with a mouse cursor, but well under the ~44px
     minimum comfortable finger-tap size on a phone. Padding + an equal
     negative margin grows the tappable box without shifting anything
     visually or affecting surrounding layout spacing. */
  /* margin-top/bottom only (never the "margin" shorthand) -- some of these
     links also carry an inline margin-left (e.g. "View all ->") that a
     shorthand override would silently wipe out. */
  [style*="font-size:13.5px;color:#e9e7e1;text-decoration:none"],
  [style*="font-size: 13.5px; color: rgb(233, 231, 225); text-decoration: none"],
  [style*="font-size:13.5px;color:#c9a26a;text-decoration:none"],
  [style*="font-size: 13.5px; color: rgb(201, 162, 106); text-decoration: none"],
  [style*="font-size:13px;color:#15171d;text-decoration:none"],
  [style*="font-size: 13px; color: rgb(21, 23, 29); text-decoration: none"] {
    display: inline-block !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-top: -10px !important;
    margin-bottom: -10px !important;
  }
  [style*="color:#9a6a2f;border-bottom:2px solid #9a6a2f;padding-bottom:6px;text-decoration:none"],
  [style*="color: rgb(154, 106, 47); border-bottom: 2px solid rgb(154, 106, 47); padding-bottom: 6px; text-decoration: none"] {
    padding-top: 8px !important;
    margin-top: -8px !important;
  }
  [style*="font-size:13.5px;color:#68707b;text-decoration:none"],
  [style*="font-size: 13.5px; color: rgb(104, 112, 123); text-decoration: none"] {
    display: inline-block !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-top: -8px !important;
    margin-bottom: -8px !important;
  }
}