/* ═══════════════════════════════════════════════════════════════
   TeachEd — Mobile Unified Layer
   Loaded on every page. Fixes cross-page inconsistencies:
   touch targets, scroll momentum, safe-area, focus rings,
   typography baseline, bottom-nav height, pull-to-refresh guard.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {

  /* ── Typography baseline ── */
  /* Guarantee a consistent font stack on every page even without Google Fonts loaded */
  body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont,
                 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Fluid base size: 14px on 375px → 15px on 430px */
  html { font-size: clamp(14px, 3.73vw, 15px); }

  /* ── Minimum touch target — 44×44px ── */
  /* Only for elements without fixed dimensions */
  .mp-btn, .mp-filter, .mp-quick,
  .mob-nav-tab, .chip {
    min-height: 44px;
  }
  /* Icon buttons and day cells have fixed sizes — extend via padding trick */
  .mp-icon-btn, .mp-day {
    position: relative;
  }
  .mp-icon-btn::after, .mp-day::after {
    content: '';
    position: absolute;
    inset: -6px;
  }

  /* ── Scroll containers: momentum + hide bars ── */
  .mp-hscroll,
  .mp-filters,
  [class*="scroll"],
  [class*="hscroll"],
  .table-wrap,
  .gb-wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .mp-hscroll::-webkit-scrollbar,
  .mp-filters::-webkit-scrollbar { display: none; }

  /* ── Safe-area standard variables ── */
  :root {
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
    /* Standard bottom nav height used everywhere */
    --mob-nav-h:   80px;
    --mob-content-pb: calc(var(--mob-nav-h) + var(--safe-bottom));
  }

  /* ── Bottom nav — unified height and safe area ── */
  .mob-nav,
  nav.mob-nav,
  #mob-nav,
  .mobile-nav,
  .bottom-nav {
    height: calc(var(--mob-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
  }

  /* ── Page scroll body — account for bottom nav ── */
  .mp-shell {
    padding-bottom: var(--mob-content-pb);
  }

  /* ── Focus ring — visible on all interactive elements ── */
  :focus-visible {
    outline: 2px solid #EC2D8C;
    outline-offset: 2px;
    border-radius: 6px;
  }
  /* Remove tap flash */
  * { -webkit-tap-highlight-color: transparent; }

  /* ── Headings: unified mobile scale ── */
  /* H1 — page title */
  h1, .mp-h1, .page-title {
    font-size: clamp(26px, 7.5vw, 30px);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.05;
  }
  /* H2 — section title */
  h2, .mp-section-h, .section-h {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  /* H3 — card title */
  h3, .mp-board-title, .mp-bc2-title,
  .mp-quick-t, .mp-tl-t, .mp-next-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  /* Caption / sub */
  .mp-stat-sub, .mp-quick-s, .mp-tl-s,
  .mp-board-foot, .mp-featured-meta {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
  }

  /* ── Eyebrow / label — single standard ── */
  .mp-eyebrow, .mp-topbar-eyebrow, .mp-eyebrow-dark,
  .mp-greeting-meta, .mp-board-eyebrow, .mp-day-w,
  .mp-timeline-meta, .mp-next-eyebrow, .mp-bc2-eyebrow,
  .mp-stat-label, .mp-tl-time, .mp-bc2-dur,
  .eyebrow, .page-eyebrow {
    font-family: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1;
  }

  /* ── Stat number — unified ── */
  .mp-stat-n {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  /* ── Horizontal padding standard: 18px ── */
  .mp-topbar,
  .mp-hero-head,
  .mp-page-head,
  .mp-stats,
  .mp-hscroll,
  .mp-quick-list,
  .mp-section-head,
  .mp-daypicker,
  .mp-timeline,
  .mp-timeline-head {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* ── Image and media safety ── */
  img, video, iframe, svg, canvas {
    max-width: 100%;
    height: auto;
  }

  /* ── Prevent horizontal overflow ── */
  .mp-shell, .wrap, .page, .page-wrap, main, #page {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ── Pull-to-refresh guard ── */
  html, body {
    overscroll-behavior-y: none;
  }
  /* Allow scroll inside containers */
  .mp-shell, .main, .win-main, .prog-body {
    overscroll-behavior-y: auto;
  }

  /* ── Input zoom guard (iOS) ── */
  input, textarea, select {
    font-size: max(16px, 1em);
  }

  /* ── Consistent card border radius on mobile ── */
  .mp-board-card, .mp-board-card2,
  .mp-quick, .mp-tl-card,
  .mp-next-card, .mp-featured,
  .mp-stat {
    border-radius: 18px;
  }
  .mp-btn { border-radius: 999px; }
  .mp-icon-btn, .mp-quick-ic, .mp-quick-ic2 { border-radius: 14px; }
  .mp-day { border-radius: 12px; }
  .mp-filter { border-radius: 999px; }

  /* ── Scrollable hscroll: first/last card peek ── */
  .mp-hscroll {
    padding-left: 18px;
    padding-right: 18px;
    /* Fade out at right edge to hint scrollability */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  }

  /* ── Navigation links: no tiny tap areas ── */
  .nav-link {
    padding: 0 12px;
    min-width: 44px;
    justify-content: center;
  }

  /* ── Modal mobile standard ── */
  .modal, .modal-card, .modal-panel {
    border-radius: 24px 24px 0 0;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Toast: bottom of screen above nav ── */
  #toast {
    bottom: calc(var(--mob-nav-h) + var(--safe-bottom) + 12px) !important;
  }

  /* ── Loading states: skeleton shimmer ── */
  @keyframes shimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
  }
  .skeleton {
    background: linear-gradient(90deg,
      rgba(14,14,16,0.06) 25%,
      rgba(14,14,16,0.12) 50%,
      rgba(14,14,16,0.06) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: 8px;
  }
  [data-theme="dark"] .skeleton {
    background: linear-gradient(90deg,
      rgba(255,255,255,0.06) 25%,
      rgba(255,255,255,0.12) 50%,
      rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
  }

  /* ── Dark theme: consistent surface colours ── */
  [data-theme="dark"] .mp-stat,
  [data-theme="dark"] .mp-quick,
  [data-theme="dark"] .mp-board-card,
  [data-theme="dark"] .mp-tl-card {
    background: #2C2C2E;
    border-color: rgba(255,255,255,0.08);
  }

  /* ── Smoother sidebar slide (all pages) ── */
  .sidebar, #sidebar,
  [id*="sidebar"], [class*="sidebar"] {
    transition: transform 0.28s cubic-bezier(0.34, 1.1, 0.64, 1),
                left      0.28s cubic-bezier(0.34, 1.1, 0.64, 1) !important;
  }

  /* ── Broader touch target floor for generic buttons / links-as-button ──
     Many older pages use .nav-btn / .save-btn / .tag etc. with 6-8px
     vertical padding that ends up ~30px tall. Bring those up to 44pt
     without distorting layout where authors already pinned a height. */
  .nav-btn,
  .save-btn,
  button.tag,
  a.tag,
  .btn,
  button:not([class]),
  a.button {
    min-height: 40px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  /* For inputs sitting next to send-buttons, ensure they line up */
  .tag,
  .pill {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Site-wide nav bar height + safe-area-top ──
     A lot of pages use a 48-52px sticky nav. On iPhones with notches
     the nav butts up against the status bar unless we add safe-area. */
  #nav, .topnav, header.nav, .nav, nav.topbar {
    padding-top: max(env(safe-area-inset-top, 0px), 0px);
  }

  /* ── Tap-to-call/tap-to-mail safe spacing for link clusters ──
     Anchors inside paragraphs/lists are sometimes too close on mobile;
     add minimum vertical spacing between consecutive interactive items. */
  li > a, li > button,
  .item-list > a, .item-list > button {
    padding-block: 8px;
  }

  /* ── Disable hover transforms that look broken on touch ──
     A common pattern: `:hover { transform: translateY(-2px) }`. On
     touch devices `:hover` is sticky after tap, so the card stays
     lifted. Cut the transform on actual touch devices. */
  @media (hover: none) and (pointer: coarse) {
    *:hover { transform: none !important; }
  }

  /* ── Stop double-tap zoom on form labels ── */
  label, .label { touch-action: manipulation; }

  /* ── Horizontally-scrolling top nav.
     Many pages stuff 8-12 nav-link anchors into a flex row #nav. On
     mobile most of them would overflow off-screen and silently
     disappear (because mobile-guard.css clips body overflow-x). Make
     the nav itself scroll horizontally so every link stays reachable. */
  #nav {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  #nav::-webkit-scrollbar { display: none; }
  #nav > * { flex-shrink: 0; }
  #nav .nav-spacer { display: none; }   /* spacer collapses on mobile so user content stays visible */
}

/* ── Outside the mobile media query: things that help touch on every
   viewport but don't need media gating. ── */

/* Apple HIG: smooth momentum scroll on iOS for all scrollable regions. */
.scroll-y, .scroll-x, .scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Tap-highlight removal for non-text interactive elements site-wide.
   Keeps tappable areas visually clean during fast successive taps. */
button, a, [role="button"], summary {
  -webkit-tap-highlight-color: transparent;
}

/* ── Skeleton shimmer (works on desktop AND mobile) ── */
@keyframes tx-shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}
.stat-val.is-loading,
.hw-metric b.is-loading,
.hero-score b.is-loading,
.tx-skel {
  position:relative;color:transparent!important;
  background: linear-gradient(90deg,
    rgba(14,14,16,0.06) 25%,
    rgba(14,14,16,0.12) 50%,
    rgba(14,14,16,0.06) 75%);
  background-size: 200% 100%;
  animation: tx-shimmer 1.4s ease infinite;
  border-radius: 6px;
  min-width: 36px; display:inline-block;
}
[data-theme="dark"] .stat-val.is-loading,
[data-theme="dark"] .hw-metric b.is-loading,
[data-theme="dark"] .hero-score b.is-loading,
[data-theme="dark"] .tx-skel {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.06) 25%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 75%);
  background-size: 200% 100%;
}
/* Refresh button "loading" appearance */
.btn-refresh-spinning {opacity:.65;pointer-events:none;}
.btn-refresh-spinning::after{
  content:"";display:inline-block;width:13px;height:13px;margin-left:6px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  vertical-align:-2px;
  animation: tx-spin .7s linear infinite;
}
@keyframes tx-spin { to { transform: rotate(360deg); } }