/* Alder treatment for the app-store terms and watch pages (body.al-fallback). Owner: Wren.
 *
 * Restyles the base templates in place; no markup changes, so every text,
 * link and JSON-LD block stays byte-identical to the base theme.
 *   /app-store/terms       page--app-store-terms.tpl.php   main:has(.ds > .scr--narrow)
 *   /video/{slug}          page--watch.tpl.php             main:has(.max-w-3xl > .ocd-vplayer)
 * /app-store, /app-store/{slug} and /user-guide have native Alder templates
 * (themes/alder/page--app-store-index, -detail, page--user-guide), so their
 * bridge blocks are retired.
 * /app-store/register, /submit, /edit, /activate render in the base theme
 * (Core\Bootstrap::BASE_THEME_PATHS), so nothing here reaches them.
 * Each block is scoped with :has() so none of it leaks into other bridge
 * pages. !important appears only where the base markup carries an inline
 * style attribute (nothing else can beat it).
 */

/* 1. Store terms page: re-point the ds.css tokens at Alder's ----------- */
.al-fallback main:has(.ds > .scr--narrow) .ds {
  --ink: var(--al-ink); --ink-2: var(--al-body); --ink-3: var(--al-muted);
  --line: var(--al-line); --line-2: rgba(14, 42, 27, .28);
  --brand: var(--al-moss); --brand-2: var(--al-deep); --brand-soft: var(--al-paper); --brand-ink: var(--al-ink);
  --surface: #fff; --surface-2: var(--al-sand);
  --font-head: var(--al-display); --head-weight: 800; --head-spacing: -.026em;
  font-family: var(--al-sans); color: var(--al-body);
}

/* Shared pieces: kicker as the Alder label, ds buttons as Alder pills */
.al-fallback main:has(.ds > .scr--narrow) .ds .u-kicker {
  font: italic 400 17px/1.35 var(--al-serif); letter-spacing: 0; text-transform: none; color: var(--al-moss);
}
.al-fallback main:has(.ds > .scr--narrow) .ds .u-btn--primary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 24px;
  border: 1px solid var(--al-pill); border-radius: 999px; background: var(--al-pill); color: #fff;
  font: 600 15px/1.2 var(--al-sans); letter-spacing: 0; box-shadow: var(--al-raise); transform: none;
  transition: background-color .18s, border-color .18s;
}
.al-fallback main:has(.ds > .scr--narrow) .ds .u-btn--primary:hover {
  background: var(--al-moss); border-color: var(--al-moss); color: #fff; transform: none;
}
.al-fallback main:has(.ds > .scr--narrow) .ds .u-card {
  border: 1px solid var(--al-line); border-radius: var(--al-r); box-shadow: none;
}
@media (min-width: 921px) {
  .al-fallback main:has(.ds > .scr--narrow) .ds .u-kicker { font-size: 19px; }
}

/* 2. /app-store/terms ------------------------------------------------------- */
.al-fallback main:has(.ds > .scr--narrow) .ds > .scr--narrow {
  width: min(100% - 2 * var(--al-gutter), 860px); max-width: none; padding: 24px 0 var(--al-rhythm) !important; gap: 28px;
}
.al-fallback main:has(.ds > .scr--narrow) .ds nav.u-sub { font: 500 13px/1.3 var(--al-sans); color: var(--al-muted); }
.al-fallback main:has(.ds > .scr--narrow) .ds nav.u-sub a { display: inline-flex; align-items: center; min-height: 44px; color: var(--al-muted); }
.al-fallback main:has(.ds > .scr--narrow) .ds nav.u-sub a:hover { color: var(--al-ink); }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-pagehead { display: block; margin: 0; }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-pagehead .u-kicker { margin-bottom: 12px; }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-h1 {
  margin: 0; font: 800 clamp(2.1rem, 4.6vw, 3.5rem)/1.02 var(--al-display); letter-spacing: -.034em; color: var(--al-ink);
}
.al-fallback main:has(.ds > .scr--narrow) .ds .u-lede { max-width: 34em; margin-top: 16px; font: italic 400 18px/1.55 var(--al-serif); color: var(--al-body); }
@media (min-width: 921px) { .al-fallback main:has(.ds > .scr--narrow) .ds .u-lede { font-size: 19px; } }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-card.u-card--pad { padding: 24px 20px; font-size: 16px; line-height: 1.65 !important; color: var(--al-body) !important; }
@media (min-width: 921px) { .al-fallback main:has(.ds > .scr--narrow) .ds .u-card.u-card--pad { padding: 44px 48px; } }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-section-head { margin: 36px 0 12px !important; }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-card > .u-section-head:first-child { margin-top: 0 !important; }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-h3 { font: 800 clamp(1.35rem, 2vw, 1.6rem)/1.15 var(--al-display); letter-spacing: -.02em; color: var(--al-ink); }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-card p { margin: 0 0 12px; }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-card ul { margin: 0 0 12px; padding-left: 1.25em; list-style: disc; }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-card li { margin: 6px 0; padding-left: 2px; }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-card li::marker { color: var(--al-brand); }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-card strong { color: var(--al-ink); font-weight: 600; }
.al-fallback main:has(.ds > .scr--narrow) .ds .u-card a:not([class]) { color: var(--al-ink); text-decoration-color: rgba(14, 42, 27, .35); }

/* 3. /video/{slug} ---------------------------------------------------------- */
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) .ocd-vplayer { border-radius: var(--al-r) !important; overflow: hidden; }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.04; }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) h1 + p { font: italic 400 17px/1.5 var(--al-serif); color: var(--al-muted); }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) .ocd-vplayer ~ p { font-size: 17px; line-height: 1.7; color: var(--al-body); }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) nav[aria-label="Breadcrumb"] a { display: inline-flex; align-items: center; min-height: 44px; }
/* Provider card: hairline box, serif name, no shadow */
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) a.mt-10.rounded-2xl {
  min-height: 44px; border: 1px solid var(--al-line); border-radius: var(--al-r); background: #fff; box-shadow: none;
  transition: border-color .18s;
}
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) a.mt-10.rounded-2xl:hover { background: #fff; border-color: rgba(14, 42, 27, .36); }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) a.mt-10.rounded-2xl h2 {
  font: 600 19px/1.3 var(--al-serif); letter-spacing: -.005em; color: var(--al-ink);
}
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) a.mt-10.rounded-2xl:hover h2 { color: var(--al-moss); }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) a.mt-10.rounded-2xl p.text-xs { font-size: 13px; color: var(--al-muted); }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) a.mt-10.rounded-2xl p.text-surf-600 { color: var(--al-moss); font-weight: 600; }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) a.mt-10.rounded-2xl > div.rounded-full { background: var(--al-sand); color: var(--al-moss); }
/* More videos: the Alder video card (rounded 16:9 picture, no box) */
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t { margin-top: 56px; padding-top: 0; border-top: 0; }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t > h2 {
  margin-bottom: 20px; font: 800 clamp(1.6rem, 2.6vw, 2.25rem)/1.05 var(--al-display); letter-spacing: -.03em;
}
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid { gap: 32px 24px; }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid > a {
  border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid > a:hover { background: none; }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid > a > div:first-child { border-radius: var(--al-r); }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid > a > div:first-child > span {
  background: rgba(250, 250, 248, .94) !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid > a > div:first-child > span svg { fill: var(--al-ink) !important; }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid > a > .p-4 { padding: 14px 0 0; }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid > a > .p-4 > p:first-child {
  font: 600 18px/1.3 var(--al-serif); letter-spacing: -.005em; color: var(--al-ink);
}
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid > a:hover > .p-4 > p:first-child { color: var(--al-moss); }
.al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid > a > .p-4 > p.text-xs { font-size: 13px; color: var(--al-muted); }

/* phones: one sideways snap row, like the homepage video row */
@media (max-width: 639px) {
  .al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78vw; gap: 20px;
    margin-inline: -16px; padding: 4px 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  }
  .al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid::-webkit-scrollbar { display: none; }
  .al-fallback main:has(.max-w-3xl > .ocd-vplayer) div.mt-12.border-t .grid > a { scroll-snap-align: start; min-width: 0; }
}