/*
 * EVE AI Core - Public Mobile Consistency Layer
 * ============================================================================
 * SCOPE: every rule in this file is prefixed with `body.eve-pubfix`. That class
 * is present ONLY on public pages that are IN SCOPE for the mobile audit.
 * The `body` element is part of the prefix on purpose: several pages inject a
 * <style> block into the BODY (e.g. `#eve-docs-nav-css` with
 * `.eve-docs-nav .edn-head`), which has the same specificity as a bare
 * `.eve-pubfix .edn-head` and would win on document order. `body.eve-pubfix`
 * adds one element to the specificity so these fixes land reliably.
 *
 * THE LANDING PAGE (index.html, served at "/" and "/landing") DOES NOT CARRY
 * THIS CLASS AND DOES NOT LOAD THIS STYLESHEET. It is intentionally excluded
 * and must remain pixel-identical. Never add `eve-pubfix` to index.html, and
 * never move a rule from this file into a shared sheet.
 *
 * The shared site chrome (.hdr header, .eve-marketbar, .eve-ftr footer) is
 * byte-identical on the landing page, so NO rule below may restyle it. Rules
 * are therefore either scoped to a CONTENT root (main / article /
 * .doc-article / .main-content / .article-body), or - where a wider selector
 * is needed - paired with an explicit .hdr/.eve-ftr/.eve-marketbar exclusion.
 * That keeps the header and footer identical on the landing page and on every
 * other public page.
 *
 * Conventions reused from the existing site (measured, not invented):
 *   - phone side gutter ....... 20px  (dominant: /about, /sidecar, blog posts)
 *   - tablet side gutter ...... 24px  (dominant: docs, /industries)
 *   - readable type floor ..... 12px  for content labels
 *   - touch target ............ 44px  minimum height for primary controls
 */

body.eve-pubfix {
  --eve-gutter-phone: 20px;
  --eve-card-pad-phone: 20px;
}

/* ==========================================================================
   1. LAYOUT BLOWOUT GUARD
   Grid and flex children default to `min-width:auto`, so they refuse to
   shrink below their min-content width. One wide table then widens the whole
   column and the browser clips the overflow.
   Evidence: /blog/* at 320px rendered <main> at 346.8px inside a 320px
   viewport, clipping the right 42.8px of EVERY element on the page.
   ========================================================================== */
body.eve-pubfix .page-layout > *,
body.eve-pubfix main,
body.eve-pubfix .doc-article,
body.eve-pubfix .article-body,
body.eve-pubfix .main-content {
  min-width: 0;
}

/* 1b. The same failure happens inside dozens of content flex/grid rows
   (.blog-nav, .verify-grid, .versus-grid, .endpoint-header, .cta-buttons...).
   `min-width:0` is a NO-OP for ordinary block boxes: it only takes effect on
   flex and grid ITEMS, where it removes the automatic min-content floor. So a
   broad selector here has a narrow effect.
   It lives in a CASCADE LAYER on purpose: unlayered rules always beat layered
   ones regardless of specificity, so any page that deliberately declares its
   own `min-width` (.diagram-flow 640px, .diag-node 148px, .eve-ev-k 104px,
   .req-key 140px, ...) keeps it and is not flattened by this guard. */
@layer eve-mobile-guard {
  @media (max-width: 900px) {
    body.eve-pubfix
      :is(main, article, section, div, nav, ul, ol, li, header, aside, p, figure, dl, dd,
         span, a, button, label, form, fieldset, blockquote, pre, h1, h2, h3, h4, h5, h6) {
      min-width: 0;
    }
    /* The shared header / market bar / footer are byte-identical to the
       landing page's. Never let the guard reach them - the two rules below
       out-specify the guard above and restore the initial value. */
    body.eve-pubfix :is(.hdr, .eve-ftr, .eve-marketbar, .eve-topstack, .eve-cn-inner),
    body.eve-pubfix
      :is(.hdr, .eve-ftr, .eve-marketbar, .eve-topstack, .eve-cn-inner)
      :is(main, article, section, div, nav, ul, ol, li, header, aside, p, figure, dl, dd,
         span, a, button, label, form, fieldset, blockquote, pre, h1, h2, h3, h4, h5, h6) {
      min-width: auto;
    }
  }
}

/* ==========================================================================
   2. GENUINELY WIDE CONTENT SCROLLS LOCALLY (never clipped, never shrunk)
   ========================================================================== */

/* 2a. Code blocks. Bare <pre> has no overflow handling anywhere in the
   codebase, so long lines escaped the page on 102 docs/blog pages
   (worst: /docs/sdk, +713px of unreachable code).
   The shared header/market bar/footer contain no <pre>, <table> or
   .code-block at all, so these can be matched site-wide on in-scope pages. */
body.eve-pubfix pre,
body.eve-pubfix .code-block {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.eve-pubfix pre > code {
  display: block;
  min-width: 0;
}

/* 2b. Data tables. Tables that are NOT already inside a dedicated scroll
   wrapper become their own scroll container on small screens rather than
   dragging the page sideways (worst: /docs/decision-certificates +637px). */
@media (max-width: 900px) {
  body.eve-pubfix table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* ...but tables that already live in a purpose-built scroll wrapper
     (e.g. .cmp-table inside .cmp-table-wrap) keep native table layout so we
     do not create a nested double scroller. */
  body.eve-pubfix [class*="table-wrap"] > table,
  body.eve-pubfix [class*="table-scroll"] > table,
  body.eve-pubfix [class*="scroll-wrap"] > table {
    display: table;
  }
}

/* 2c. Long unbreakable strings (URLs, e-mail addresses, JSON keys, API
   identifiers) wrap instead of pushing the column open. */
body.eve-pubfix :is(main, article, .doc-article, .main-content, .article-body)
  :is(p, li, dd, dt, td, th, figcaption, blockquote, summary, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}
body.eve-pubfix :is(main, article, .doc-article, .main-content, .article-body)
  :is(p, li, dd, td) a {
  overflow-wrap: anywhere;
}
/* Inline code, API paths and JSON fragments are single unbreakable tokens.
   `anywhere` also lowers their min-content width, which is what stops them
   from levering a flex/grid column open. Block code in <pre> is excluded -
   it scrolls instead (rule 2a), which is correct for code.
   The shared chrome contains no <code>/<kbd>/<samp>, so this is matched
   site-wide on in-scope pages (content also lives outside <main> on several
   templates, e.g. /trust-center and /docs/architecture). */
body.eve-pubfix :is(code:not(pre code), .endpoint-path, .ledger-line, kbd, samp) {
  overflow-wrap: anywhere;
}

/* 2d. Media never exceeds its column. (No height override: the shared
   footer/header logos rely on explicit heights and are out of scope.) */
body.eve-pubfix :is(main, article, .doc-article, .main-content, .article-body)
  :is(img, picture, video, iframe, canvas) {
  max-width: 100%;
}

/* 2e. Auto-fit card grids must be allowed to go narrower than their track
   minimum on a 320px screen (.cmp-cards overflowed by 4px on 46 compare
   pages because of `minmax(300px, 1fr)`). */
body.eve-pubfix .cmp-cards,
body.eve-pubfix .cmp-grid-links {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* 2f. Long call-to-action labels carry `white-space:nowrap`, so on a 320px
   screen the button renders 378px wide and its label is cut off
   (/roi-calculator, /ai-decision-readiness-assessment). Let them wrap and let
   the button row reflow instead of losing the label. */
@media (max-width: 430px) {
  body.eve-pubfix :is(main, article, .doc-article, .main-content, .article-body)
    :is(.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-lg, .btn-go) {
    max-width: 100%;
    white-space: normal;
  }
}
/* Button rows must reflow on tablets too - a three-CTA row was still 119px
   wider than a 768px viewport (/deterministic-control-matrix). `flex-shrink:0`
   on the row stopped it collapsing, and the parent's `overflow:hidden` then
   cut the last button's label off, so shrinking is re-enabled as well. */
@media (max-width: 900px) {
  body.eve-pubfix :is(.cta-buttons, .hero-actions, .cta-actions, .article-cta) {
    flex-wrap: wrap;
    flex-shrink: 1;
    max-width: 100%;
  }
}

/* 2g. `.hero-inner` adds 18-22px of side padding without `box-sizing:
   border-box`, so it renders wider than the hero's content box (/download).
   Make the padding inset rather than additive. */
body.eve-pubfix .hero-inner {
  box-sizing: border-box;
}

/* 2h. Key/value definition rows are a fixed 160px label + a non-shrinking
   value on one flex line, which cannot fit a phone. Stack them instead. */
@media (max-width: 560px) {
  body.eve-pubfix .req-line {
    flex-direction: column;
    gap: 2px;
  }
  body.eve-pubfix .req-key {
    min-width: 0;
  }
}

/* ==========================================================================
   3. CONSISTENT PAGE GUTTERS ON PHONES
   Measured at 390px, in-scope pages used 0/12/14/16/20/22/24/29/32/36/40/43/
   45/47/48/53/56/60/64/68/107px section insets. Blog posts alone used six
   different gutters. Phones are normalised onto the site's dominant 20px;
   tablet and desktop keep their existing (already consistent) spacing.

   INVARIANT - this rule must never ADD a gutter where the element had none
   (0 -> 20px doubles up with an ancestor's gutter). Every selector below was
   A/B measured across all 433 in-scope routes (layer on vs off): all of them
   only reduce, except two single-page cases that normalise UP but stay inside
   the 20-24px convention band (main.wrap 16->20 on /ai-decision-readiness-
   assessment, .callout 14->20 on /fair-lending-demo).
     * `:not(main *)` on the blog containers excludes the 13 posts whose
       `.article` is nested in a <main> and carries NO horizontal padding of
       its own (the gutter is on an ancestor) - there, a flat 20px would have
       pushed prose from 32px to 52px.
     * `section.hero` and `.timeline` are deliberately NOT normalised: they
       reduce on 118 / 4 pages but ADD padding on 11 / 5 others (e.g.
       /evecoreguard prose would go 24px -> 44px) and no structural selector
       separates the two cases.
   ========================================================================== */
@media (max-width: 430px) {
  body.eve-pubfix :is(
      article.article:not(main *),
      .byline:not(main *):not(.hero *),
      .tags:not(main *),
      .blog-nav:not(main *),
      .article-cta,
      .related,
      main.wrap,
      section.slide
    ) {
    padding-left: var(--eve-gutter-phone);
    padding-right: var(--eve-gutter-phone);
  }
}

/* ==========================================================================
   4. CONSISTENT CARD PADDING ON PHONES
   Content cards ranged 28-36px of inner padding, which on a 320px screen
   left as little as 192px of usable text width once the page gutter was
   also applied. Cards are normalised to a single 20px inner padding.
   ========================================================================== */
@media (max-width: 430px) {
  body.eve-pubfix :is(
      .callout,
      .cmp-fit,
      .cmp-card,
      .when-card,
      .toc,
      .download-card,
      .value-card,
      .feature-highlight,
      .tool-profile,
      .info-box,
      .alert-box,
      .status-box
    ) {
    padding-left: var(--eve-card-pad-phone);
    padding-right: var(--eve-card-pad-phone);
  }
}

/* ==========================================================================
   5. READABLE TYPE FLOOR FOR CONTENT LABELS
   These content labels rendered between 8.5px and 11.2px. Each keeps its
   own family / weight / letter-spacing / colour - only the size is lifted to
   the 12px floor. Header, market bar and footer labels are deliberately NOT
   touched: they are shared with the landing page.
   ========================================================================== */
@media (max-width: 900px) {
  body.eve-pubfix :is(
      .edn-head,
      .edn-title,
      .stat-label,
      .callout-title,
      .hero-tag,
      .cl-vs,
      .article-tag,
      .eve-trust-lbl,
      .il-reg,
      .page-classification,
      .updated,
      .req-block-label
    ) {
    font-size: 12px;
  }

  /* <em> inherits its size, so max(12px, 1em) is an exact floor here: it
     lifts the 9.5px case and leaves every larger <em> untouched. Do NOT
     extend this to <small> or <th>, whose sizes are relative/explicit -
     1em resolves to the PARENT size and would inflate them. */
  body.eve-pubfix :is(main, article, .doc-article, .main-content, .article-body) em {
    font-size: max(12px, 1em);
  }
}

/* ==========================================================================
   6. HEADING HIERARCHY - DOCUMENT ("legal / policy") TEMPLATE
   These 8 pages use a mono "classified document" treatment that collapses
   h1 to 14px, h2 to 13px and h3 to 12px - at or BELOW the 14px body copy,
   and visually identical to the 10px `.page-classification` eyebrow above
   the title. The mono family, uppercase and letter-spacing (the design
   language) are preserved; only the scale is restored.
   ========================================================================== */
@media (max-width: 900px) {
  body.eve-pubfix main.main-content:has(> .page-classification) h1 {
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
  }
  body.eve-pubfix main.main-content:has(> .page-classification) h2 {
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: 0.06em;
  }
  body.eve-pubfix main.main-content:has(> .page-classification) h3,
  body.eve-pubfix main.main-content:has(> .page-classification)
    :is(.alert-box, .info-box, .status-box) h3 {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
}

/* Section headings that render at eyebrow scale elsewhere. */
@media (max-width: 900px) {
  body.eve-pubfix :is(main, article, .main-content) h2.section-label {
    font-size: 17px;
    line-height: 1.35;
  }
  body.eve-pubfix :is(main, article, .main-content) h2.c-card-h {
    font-size: 16px;
    line-height: 1.35;
  }
}

/* ==========================================================================
   7. TOUCH TARGETS
   Primary content controls reach ~44px. Inline prose links are deliberately
   left alone so body copy keeps its natural line rhythm.
   ========================================================================== */
@media (max-width: 900px) {
  body.eve-pubfix :is(main, article, .doc-article, .main-content, .article-body)
    :is(.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-green, .btn-go, button[type="submit"]) {
    min-height: 44px;
  }
  body.eve-pubfix :is(main, article, .doc-article, .main-content, .article-body)
    :is(.hero-actions, .cta-actions, .article-cta, .cmp-grid-links) a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Form controls: comfortable height + 16px text so iOS does not zoom the
     viewport when a field receives focus. */
  body.eve-pubfix :is(main, article, .main-content) :is(input, select, textarea) {
    min-height: 44px;
    font-size: 16px;
  }
  body.eve-pubfix :is(main, article, .main-content) textarea {
    min-height: 96px;
  }
}