/* ═══════════════════════════════════════════════════════════════
   Design Survivor — shared mobile/tablet + accessibility layer
   Loaded AFTER each deck's inline <style>, so equal-specificity
   rules here win. Desktop (>1100px) rendering is unchanged except
   the a11y fixes (contrast, focus, reduced motion).
   See MOBILE-RESPONSIVE-PLAN.md for the full rationale.
   ═══════════════════════════════════════════════════════════════ */

/* ── Modern viewport units (iOS Safari toolbar fix) ── */
@supports (height: 100dvh) {
  .slide { height: 100dvh; }
}

/* ── A11y: converted headings keep their visual identity ──
   mega-title/hero-title/showcase-title are now h1/h2; Anton has a
   single 400 weight, so block the browser's synthetic heading bold. */
.mega-title, .hero-title, .showcase-title, .profiles-title { font-weight: 400; margin: 0; }

/* ── A11y: visible keyboard focus ── */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}

/* ── A11y: contrast — accent was #8B8072 (2.96:1 on beige); 4.86:1 now ── */
:root { --accent: #675E53; }

/* ── A11y: raise the dimmest small-text floors on light slides ── */
.slide.light .tl-sub, .slide.light .agenda-desc { opacity: 0.75; }
.week-schedule li .wk-tag { opacity: 0.65; }

/* ── A11y: reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: y proximity; }
  .slide-body > *, .slide.in-view .slide-body > * {
    transition: none !important; opacity: 1 !important; transform: none !important;
  }
  #progress { transition: none; }
}

/* ── Rotate hint (injected by slides-mobile.js on phone portrait) ── */
#rotate-hint {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 1002;
  display: flex; align-items: center; gap: 6px;
  background: rgba(26,26,26,0.88); color: #F2EDE7;
  font-size: 13px; letter-spacing: 0.03em; line-height: 1.3;
  padding: 10px 8px 10px 16px; border-radius: 100px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3); max-width: calc(100vw - 32px);
}
#rotate-hint button {
  background: none; border: none; color: inherit; font-size: 15px;
  padding: 4px 10px; cursor: pointer; line-height: 1;
}
@media (orientation: landscape) { #rotate-hint { display: none; } }
@media (min-width: 768px) { #rotate-hint { display: none; } }

/* ═══ Tablet and below (≤1100px): slides may grow and scroll ═══
   The core fix. Slides keep their exact-viewport look when content
   fits (min-height), but nothing is ever clipped. Snap relaxes to
   proximity so taller slides can be scrolled through. */
@media (max-width: 1100px) {
  html { scroll-snap-type: y proximity; }
  .slide {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
    overflow-x: clip; /* contain decorative absolutes; y stays visible */
    scroll-snap-stop: normal;
  }
  /* a few slides carry inline overflow/height — override those too */
  .slide[style*="overflow"] {
    overflow-y: visible !important; overflow-x: clip !important; height: auto !important;
  }
}

/* ═══ Phone (≤767px): stack, breathe, enlarge ═══ */
@media (max-width: 767px) {

  /* Entry animations off — tall slides never reliably cross the
     IntersectionObserver threshold, which would leave content invisible. */
  .slide-body > *, .slide.in-view .slide-body > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }

  /* Inline-styled grids (color keys, essays, What's Due…) stack.
     Card grids built with repeat() reflow to as many 140px+ columns
     as fit; the 10-segment mini progress strip keeps its 10 cells. */
  .slide [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .slide [style*="grid-template-columns:repeat("],
  .slide [style*="grid-template-columns: repeat("] {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }
  .slide [style*="repeat(10"] { grid-template-columns: repeat(10, 1fr) !important; }

  /* Inline flex rows may wrap instead of overflowing horizontally */
  .slide [style*="display:flex"], .slide [style*="display: flex"] { flex-wrap: wrap; }
  .layout-ghost .circles-row { flex-wrap: wrap; justify-content: center; }

  /* Grid/flex children must be allowed to shrink below content width,
     and long words must wrap, or columns overflow the viewport. */
  .slide { overflow-wrap: break-word; }
  .slide .slide-body * { min-width: 0; }
  .slide .title-half, .slide .outline-half { min-width: 0; }
  .layout-pill-stack .slide-body { flex-direction: column; align-items: flex-start; }
  .layout-pill-stack .mega-title, .layout-pill-stack .stack-right { max-width: 100%; }
  .ghost-title { max-width: 90vw; }

  /* Image panels sized by flex/% inside a fixed slide collapse once
     the slide is auto-height — give them real minimums. */
  .layout-hero .hero-image, .layout-hero-cols .hero-image { min-height: 45svh; }
  .layout-case .case-image { min-height: 40svh; }
  .layout-profiles .profile-card .profile-img { min-height: 220px; }
  .layout-showcase .showcase-grid .img-placeholder { min-height: 150px; }
  .slide [style*="grid-template-columns"] > [style*="background-image"] { min-height: 200px; }

  /* Typography: cap the display clamps for a 390px line, floor tiny labels */
  .mega-title { font-size: clamp(36px, 11vw, 64px) !important; }
  .ghost-title { font-size: clamp(56px, 18vw, 120px); }
  .hero-title { font-size: clamp(28px, 9vw, 48px) !important; }
  .showcase-title, .profiles-title { font-size: clamp(26px, 8vw, 44px) !important; }
  .slide [style*="font-size:9px"],  .slide [style*="font-size: 9px"],
  .slide [style*="font-size:10px"], .slide [style*="font-size: 10px"],
  .slide [style*="font-size:11px"], .slide [style*="font-size: 11px"] {
    font-size: 12px !important;
  }

  /* Chrome: slimmer header, no per-slide footer, safe-area offsets */
  .slide-header { padding: 12px 20px; }
  .slide-footer { display: none; }
  #kbd-hint { display: none; }
  #counter { bottom: calc(10px + env(safe-area-inset-bottom)); font-size: 12px; }
  #fs-btn { bottom: calc(8px + env(safe-area-inset-bottom)); right: 10px; width: 40px; height: 40px; }

  /* Tighter gutters */
  .slide .title-half, .slide .outline-half { padding-left: 20px; padding-right: 20px; }
  .layout-standard .slide-body { gap: 24px; }
  .slide [style*="padding:0 48px"], .slide [style*="padding: 0 48px"] {
    padding-left: 20px !important; padding-right: 20px !important;
  }
  .slide [style*="padding:48px"], .slide [style*="padding: 48px"] {
    padding: 28px 20px !important;
  }

  /* Give stacked slides breathing room at the bottom (counter sits there) */
  .slide { padding-bottom: env(safe-area-inset-bottom); }
}