/* Mobile experience, 26 October 2026.
   The last stylesheet on every current page (injected by server.js after the generated inline styles), so phone
   and tablet rules here win without raising specificity elsewhere. Desktop is untouched: every rule sits inside
   a screen width query. Print keeps its own rules. */

/* ---------- Navigation sheet: tablets and phones (the existing 950px collapse) ---------- */
@media screen and (max-width: 950px) {
  /* Lock the page behind the sheet on the root only: a hidden overflow on body would make it the sticky header's
     scroll container and push the header out of view. */
  html.nav-open { overflow: hidden; overscroll-behavior: none; }

  /* One opaque sheet from the header to the bottom of the screen; it scrolls on its own when it is taller. */
  html.approved-site .site-header .nav {
    top: var(--header-h);
    bottom: 0;
    height: auto;
    max-height: none;
    padding: 6px max(18px, calc((100vw - 640px) / 2), env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(18px, calc((100vw - 640px) / 2), env(safe-area-inset-left));
    border: 0;
    border-top: 1px solid var(--hairline);
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  html.approved-site .site-header .nav.is-open { animation: sandr-sheet-in .32s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes sandr-sheet-in { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: none; } }

  html.approved-site .site-header .nav > a,
  html.approved-site .site-header .nav-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    height: auto;
    padding: 14px 2px;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.015em;
  }
  html.approved-site .site-header .nav > a[aria-current],
  html.approved-site .site-header .nav-group > summary[data-current] { color: var(--page-accent); border-bottom-color: var(--hairline); }
  html.approved-site .site-header .nav-group > summary .ui-icon { width: 18px; height: 18px; color: var(--muted); transition: transform .25s ease; }
  html.approved-site .site-header .nav-group[open] > summary { border-bottom-color: transparent; }
  html.approved-site .site-header .nav-group-links {
    margin: 0 0 10px;
    padding: 4px 0 4px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 1px 0 0 var(--hairline);
  }
  html.approved-site .site-header .nav .nav-group-links a {
    min-height: 54px;
    padding: 9px 4px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.35;
  }
  html.approved-site .site-header .nav .nav-group-links a small { margin-top: 2px; font-size: 13px; line-height: 1.45; }
  html.approved-site .site-header .nav .nav-group-links a[aria-current] { background: transparent; color: var(--page-accent); }

  /* Help, contact, language and appearance: what the header has no room for. Built by site.js. */
  .nav-extras { display: grid; gap: 4px; margin-top: 22px; }
  html.approved-site .site-header .nav .nav-extras a {
    height: auto;
    min-height: 46px;
    padding: 8px 2px;
    border: 0;
    color: var(--muted);
    font-size: 16px;
    font-weight: 400;
  }
  .nav-extras-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--hairline); }
  html.approved-site .site-header .nav .nav-extras .nav-locale,
  .nav-extras .nav-theme {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: 500 14px/1 var(--font-body);
    text-decoration: none;
    cursor: pointer;
  }
  .nav-extras .nav-theme i { position: relative; width: 30px; height: 18px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 16%, var(--bg)); transition: background-color .2s ease; }
  .nav-extras .nav-theme i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .2s ease; }
  .nav-extras .nav-theme[aria-pressed='true'] i { background: var(--ink); }
  .nav-extras .nav-theme[aria-pressed='true'] i::after { transform: translateX(12px); }
  .nav-extras :is(a, button):focus-visible { outline: 2px solid var(--page-accent); outline-offset: 3px; }

  /* The two-line toggle becomes a close mark while the sheet is open. */
  html.approved-site .site-header .menu-toggle span { transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  html.approved-site .site-header .menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(3px) rotate(45deg); }
  html.approved-site .site-header .menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-3px) rotate(-45deg); }

  /* Page controls: one back-to-top button that comes back only when the reader scrolls up.
     The theme switch lives in the menu sheet; the jump to the end is a desktop convenience. */
  html.approved-site .sandr-page-utilities {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 14px, 0);
    transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  html.approved-site .sandr-page-utilities.is-recalled { opacity: 1; pointer-events: auto; transform: none; }
  html.approved-site .sandr-page-utilities :is([data-page-theme], [data-page-bottom]) { display: none; }
  html.approved-site .sandr-page-control[data-page-top] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 10px 24px -12px rgba(var(--shadow-rgb), .45);
  }
  html.approved-site .sandr-page-control[data-page-top]:disabled { opacity: 1; }
}

/* ---------- Phones ---------- */
@media screen and (max-width: 650px) {
  /* Header: a readable call to action on one line; the language moves into the menu on the narrowest phones. */
  html.approved-site .header-actions .button { padding: 0 14px; font-size: 12px; white-space: nowrap; }
  html.approved-site .header-actions .locale-switch { min-width: 32px; }

  /* Reading flow: the page scrolls freely and each section is as tall as what it says.
     Tablets and desktop keep their one-section-per-screen rhythm. */
  html.approved-site.management-copy-page { scroll-snap-type: none; }
  html.approved-site .management-copy > section,
  html.approved-site .management-copy > .mg-hero { min-height: 0; scroll-snap-align: none; }
  html.approved-site .management-copy > .mg-hero { padding-block: 36px 56px; }
  html.approved-site .management-copy > .mg-section { padding-block: 48px; }
  html.approved-site .management-copy > .mg-section--closing { padding-block: 40px 48px; }
  html.approved-site .management-copy > .mg-landing-film { min-height: var(--mg-screen); }

  /* Paragraphs read from the left edge. Centred blocks of five or more lines are hard to follow on a phone. */
  html.approved-site .management-copy :is(.mg-hero, .mg-section--wide, .vx--statement, .vx--band, .vx--quotes, .vx--steps, .vx--plans, .mg-home-scope, .ai-faq) { text-align: start; justify-items: stretch; }
  /* :root plus two classes ties the generated section-variety rules (four classes), and this sheet loads after them. */
  :root.approved-site main.management-copy :is(h1, h2, h3, p, li, blockquote, figcaption, .mg-section-heading, .mg-section-copy, .mg-question, .mg-audience) { text-align: start; }
  :root.approved-site main.management-copy :is(.mg-hero, .mg-section--wide) :is(h1, h2, .hero-lede, .ai-lede, .mg-section-copy, .mg-section-copy > p) { margin-inline: 0; }
  /* The stacked and statement layouts already pad their copy (with !important); drop the margin on top of it. */
  :root.approved-site main.management-copy :is(.vx-stack, .vx--statement) .mg-section-copy { margin-top: 0; }
  html.approved-site .management-copy :is(.button-row, .mg-related, .mg-actions, .ai-actions) { justify-content: flex-start; align-items: flex-start; }
  html.approved-site .management-copy .ai-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  html.approved-site .management-copy .mg-question { align-items: flex-start; }
  html.approved-site .management-copy .mg-hero .eyebrow { justify-self: stretch; }

  /* Disclosures that still showed the browser's triangle: one row, a clear plus and minus. */
  html.approved-site main :is(.ai-faq details, details.sc-disclosure, details.ai-contents) > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    list-style: none;
    cursor: pointer;
  }
  html.approved-site main :is(.ai-faq details, details.sc-disclosure, details.ai-contents) > summary::-webkit-details-marker { display: none; }
  html.approved-site main :is(.ai-faq details, details.sc-disclosure, details.ai-contents) > summary::after {
    content: '+';
    flex: none;
    color: var(--muted);
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
  }
  html.approved-site main :is(.ai-faq details, details.sc-disclosure, details.ai-contents)[open] > summary::after { content: '\2212'; }
  html.approved-site .management-copy .ai-faq details { border-bottom: 1px solid var(--hairline); padding-block: 6px; }
  html.approved-site .management-copy .ai-faq details > p { margin-bottom: 14px; }
  html.approved-site .management-copy details.ai-contents { width: 100%; margin-top: 28px; border-block: 1px solid var(--hairline); }
  html.approved-site .management-copy details.ai-contents > summary { width: auto; margin: 0; font-size: 15px; }
  html.approved-site .management-copy details.ai-contents ol { padding-bottom: 14px; }
  html.approved-site .management-copy details.ai-contents a { display: inline-flex; align-items: center; min-height: 40px; }

  /* Chapter tabs: one swipeable row instead of a wrapped block of pills. */
  html.approved-site .ip-enhanced > .container > .ip-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 5px;
    scrollbar-width: none;
  }
  html.approved-site .ip-tabs::-webkit-scrollbar { display: none; }
  html.approved-site .ip-tabs.is-overflowing { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  html.approved-site .ip-tabs.is-overflowing.is-at-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
  html.approved-site .ip-tabs button { flex: 1 0 auto; padding-inline: 16px; font-size: 13px; white-space: nowrap; scroll-snap-align: start; }
  html.approved-site .ip-heading { text-align: start; }
  html.approved-site .ip-heading .ip-eyebrow { justify-content: flex-start; }

  /* Form fields read as fields: regular weight, a quiet placeholder. */
  html.approved-site .beta-form :is(input:not([type='checkbox']), select, textarea) { font-weight: 400; }
  html.approved-site .beta-form :is(input, textarea)::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }

  /* The closing artwork sits evenly inside the screen edges. */
  html.material-type-site [data-closing-material] > .mt-art { inset: -10px -12px; border-radius: 24px; }

  /* The film controls keep their small marks but answer a full fingertip. */
  html.approved-site .hf-btn { position: relative; }
  html.approved-site .hf-btn::after { content: ''; position: absolute; inset: -8px; }

  /* Small print that was below a comfortable reading size. */
  html.approved-site .footer-identity p { font-size: 13px; }
  html.approved-site .footer-inner small { font-size: 12px; }
}

@media screen and (max-width: 380px) {
  html.approved-site .header-actions .locale-switch { display: none; }
  /* documents.css squeezed the button to 80px to make room for the language link, which now lives in the menu. */
  html.approved-site .header-actions .button { max-width: none; padding-inline: 12px; line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
  html.approved-site .site-header .nav.is-open { animation: none; }
  html.approved-site .site-header .menu-toggle span,
  html.approved-site .sandr-page-utilities,
  .nav-extras .nav-theme i,
  .nav-extras .nav-theme i::after { transition: none; }
  html.approved-site .sandr-page-utilities { transform: none; }
}
@media screen and (min-width: 951px) { .nav-extras { display: none; } }
@media print { .nav-extras { display: none; } }