/* ==========================================================================
   Cobble: shared mobile foundation (public site AND admin)
   Loaded LAST on every page, so these rules win ties against the page
   stylesheets. Desktop (>= 1024px) is untouched except the global safety
   rules in section 1, which never change an existing layout.

   1. Global safety        box-sizing, media never wider than its box, reduced motion
   2. Tokens               spacing / type / radius / tap size / safe areas (shared names: --mb-*)
   3. Phones (<= 640px)    16px text, 16px / 44px form controls, 44px tap targets, wrapping
   4. Scroll containers    wide content scrolls inside its own box with a visible hint
   ========================================================================== */

/* ── 1. Global safety ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

img, video, canvas, iframe, picture, embed, object { max-width: 100%; }
svg:not([width]) { max-width: 100%; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
pre, code, kbd, samp { max-width: 100%; }
pre { overflow-x: auto; }

@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;
  }
}

/* ── 2. Tokens ──────────────────────────────────────────────────────────── */
:root {
  --mb-safe-top: env(safe-area-inset-top, 0px);
  --mb-safe-right: env(safe-area-inset-right, 0px);
  --mb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mb-safe-left: env(safe-area-inset-left, 0px);

  --mb-tap: 44px;                 /* minimum touch target */
  --mb-gutter: 16px;              /* page side padding on phones */
  --mb-gap: 12px;
  --mb-radius: 16px;              /* controls and small cards on phones */
  --mb-radius-card: 24px;

  /* Fluid type scale (phone 360px up to desktop). Headings never overflow or wrap awkwardly. */
  --mb-fs-body: 1rem;             /* 16px */
  --mb-fs-small: 0.875rem;        /* 14px: the floor on phones */
  --mb-fs-h1: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  --mb-fs-h2: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
  --mb-fs-h3: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
}

/* Full-height helper that respects mobile browser bars (vh fallback first). */
.mb-full-height { min-height: 100vh; min-height: 100dvh; }

/* ── 3. Phones ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Secondary text: #7A8A7A is 3.2-3.7:1 on the page tints (fails WCAG AA); #5A685A is 4.8-5.9:1 on every surface. Phones only, so desktop is pixel-identical. */
  :root { --text-soft: #5A685A; --cb-soft: #5A685A; }
  .cb-foot-title { color: rgba(255, 255, 255, 0.66) !important; }
  .cb-micro--orange, .cb-eyebrow--orange { color: #A84A1C !important; }
  body { font-size: max(16px, 1em); line-height: 1.5; }

  /* Long words, emails and URLs wrap instead of widening the page. (break-word, not anywhere: "anywhere"
     also shrinks min-content, which splits short words letter by letter inside flex and grid items.) */
  h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, label, a, summary, figcaption, blockquote, code { overflow-wrap: break-word; }
  h1 { font-size: var(--mb-fs-h1); line-height: 1.12; text-wrap: balance; }
  h2 { text-wrap: balance; }

  /* Form controls: 16px stops iOS zooming the page on focus; 44px is a comfortable touch height. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]),
  select, textarea {
    font-size: 16px !important;
    min-height: var(--mb-tap);
    max-width: 100%;
  }
  /* WebKit ignores min-height on a native <select>: give it a real height. */
  select:not([multiple]):not([size]) { height: var(--mb-tap); }
  textarea { min-height: 96px; }
  input[type="file"] { font-size: 16px !important; width: 100%; min-height: var(--mb-tap); padding: 10px 0; }
  input[type="file"]::file-selector-button { min-height: 40px; padding: 0 16px; margin-right: 12px; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 12px; background: #fff; font: inherit; font-weight: 700; }
  /* A checkbox/radio and its separate <label for>: the label is the 44px tap target. */
  input[type="checkbox"] + label, input[type="radio"] + label { display: inline-flex; align-items: center; min-height: var(--mb-tap); }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex: none; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: var(--mb-tap); display: inline-flex; align-items: center; gap: 10px; }

  /* Tap targets: buttons, summaries, tab/pill controls get a 44px hit area. */
  button, [role="button"], summary, input[type="button"], input[type="submit"], input[type="reset"],
  .btn, a.btn, .tabs a, .tabs button, .seg button {
    min-height: var(--mb-tap);
  }
  button:not(.btn):not(.keybtn):not(.linkbtn):not([class*="inline"]) { min-width: var(--mb-tap); }
  .btn, a.btn { display: inline-flex; align-items: center; justify-content: center; }

  /* Wide elements can never push the page sideways. */
  table { max-width: 100%; }
  .table-wrap, .table-scroll, .mb-scroll { max-width: 100%; }
}

/* ── 4. Scroll containers: wide content scrolls INSIDE its own box ───────── */
@media (max-width: 900px) {
  .table-wrap, .table-scroll, .mb-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* CSS-only scroll hint (longhands only, so the element keeps its own background colour):
       a soft edge shows on whichever side still has content. */
    background-image:
      linear-gradient(to right, var(--mb-hint-bg, #fff) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to left, var(--mb-hint-bg, #fff) 30%, rgba(255, 255, 255, 0)),
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
    background-repeat: no-repeat;
    background-position: left center, right center, left center, right center;
    background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ── 5. Public site (cobble.food) ───────────────────────────────────────── */
/* Safe areas (viewport-fit=cover): nothing sits under the notch, status bar, rounded corners or home indicator.
   Pages with the sticky site nav pad their top inside the nav; every other public page pads the body. The admin
   shell handles its own insets (see admin.css). */
.cb-nav-wrap { padding-top: max(14px, var(--mb-safe-top)); }
/* body:where(...) keeps the specificity of a plain `body` rule (this file loads last, so it wins ties) without the ID inside :has(). */
body:where(:not(:has(#appShell))) {
  padding-left: var(--mb-safe-left);
  padding-right: var(--mb-safe-right);
  padding-bottom: var(--mb-safe-bottom);
}
body:where(:not(:has(#appShell)):not(:has(.cb-nav-wrap))) { padding-top: var(--mb-safe-top); }
.cb-cookie { bottom: max(16px, var(--mb-safe-bottom)); }
/* While the cookie bar is up, leave room under the page so it never permanently covers content. */
body.cb-cookie-open { padding-bottom: calc(var(--cb-cookie-space, 0px) + var(--mb-safe-bottom)); }
body[data-cb-shell] .state-shell { min-height: calc(100dvh - 90px); }

@media (max-width: 640px) {
  .cb-cookie { width: calc(100% - 24px); padding: 14px; gap: 12px; }
  .cb-cookie-actions { width: 100%; }
  .cb-cookie-actions button { flex: 1 1 0; min-height: var(--mb-tap); }

  /* Small labels, chips and captions: lift to the 14px floor (!important: some pages carry their own inline <style>). */
  .cb-kicker, .cb-eyebrow, .cb-micro, .cb-chip, .cb-store-small, .cb-foot-title, .cb-foot-meta, .cb-foot-bottom > span, .hm-float-sub, .hm-chip,
  .hm-match-title span, .hm-match-sub, .hm-match-btn, .hw-tab-num, .ft-card-cat,
  .ct-step, .ct-route-desc, .ct-topic-inbox, .ct-count, .ct-alt, .hp-topic-count, .hp-cat, .hp-quick-title,
  .pr-gift, .pr-badge, .pr-foot, .pr-note, table th, .section-label, .legal-toc-title, .legal-meta, .referral-stat-label,
  .cookie-accept, .cookie-decline, .ab-collage-tile span, .hm-day-l, .hm-list-count, .hm-meal-miss, .hm-tab-num,
  .invite-how-title, .invite-footer, .invite-footer a, #badgeText, small, figcaption, caption, .cb-body small {
    font-size: max(0.875rem, 14px) !important;
  }
  .legal-toc a, .legal-meta a, .legal-meta strong { font-size: max(0.875rem, 14px) !important; }
  label { font-size: max(14px, 1em); }
  .legal-toc a, .legal-meta a, .legal-meta strong { font-size: max(0.875rem, 14px); }

  /* Tap targets: footer, nav, TOC and standalone links get a 44px hit area. */
  a.logo, .cookie-accept, .cookie-decline, .cb-skip, .cb-logo, .invite-header-logo, .cb-nav a, .cb-foot a, .legal-toc a, .hm-detail-link, .hm-match-btn, .hm-addday,
  .cb-btn, .cb-store a, a.cb-store-badge, .invite-footer a {
    min-height: var(--mb-tap);
  }
  a.logo { display: inline-flex; align-items: center; }
  .legal-toc a { min-width: var(--mb-tap); }
  .cb-logo, .invite-header-logo, .cb-foot a, .hm-detail-link, .invite-footer a { display: inline-flex; align-items: center; }
  .legal-toc a { display: flex; align-items: center; }
  .cb-foot a[aria-label], .cb-foot-social a { min-width: var(--mb-tap); justify-content: center; }
  .cb-foot ul a, .cb-foot li a { padding-block: 4px; }
  .invite-footer a { padding-inline: 6px; }

  /* Reading width and rhythm for the long legal pages. */
  .legal-body, .legal-content, article { max-width: 100%; }
  .legal-body p, .legal-content p, article p, article li { line-height: 1.65; }

  /* Wide data on public pages scrolls inside its own box. */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── 6. Legacy cookie bar (legal pages): the Decline button was dark text on a dark bar ── */
.cookie-decline { color: #E8F0E8; border: 1px solid rgba(255, 255, 255, 0.45); background: transparent; }

/* ── 7. dvh: full-height layouts follow the VISIBLE viewport on phones (vh stays as the fallback above) ── */
@supports (height: 100dvh) {
  .hero-dark, .notfound, .download-shell, .app-shell, .auth-gate { min-height: 100dvh; }
  .sidebar { max-height: calc(100dvh - (var(--shell-gap, 14px) * 2)); }
  .legal-toc { max-height: calc(100dvh - var(--nav-h, 72px) - 48px); }
}

/* ── 8. Cascade repair for css/styles.css: these (max-width: 768px) rules sit BEFORE the base rules they override,
   so on phones the base rule won. Re-asserted here, last, with the same values. ── */
@media (max-width: 768px) {
  .about-split-grid {grid-template-columns: 1fr; gap: 40px; }
  .referral-cta-banner {padding: 36px 24px; }
  .referral-stats {gap: 10px; }
  .referral-stat {padding: 18px 10px; }
  .referral-stat-value {font-size: 1.6rem; }
  .tf-steps {grid-template-columns: 1fr; gap: 14px; max-width: 440px; }
  .tf-step {padding: 26px 22px; }
}