/* RIVET - phone fixes shared by every full page (weeks 2-6 mobile plan: mob-02, 03, 04, 08, 09, 10)

   Load order: this file is linked LAST in every page <head>, after all the other stylesheets, so an
   equal-specificity rule here wins over assets/*.css. The course pages also carry inline <style> blocks
   in <body>, which load after this file; rules that must beat those start with "html body" (two extra
   type selectors), the convention course-hero.css already uses. Some JS adds CSS to <head> at runtime
   (certified-members.js); "html body" outranks that too.

   Sections
     1. Tap targets: 44px on phones
     2. Form fields: 16px text on phones, so iOS does not zoom in on focus
     3. Voice widget and cookie banner
     4. Tap-to-reveal diagrams (.is-open, set by site.js)
     5. Phone versions of the wide OS Overview figures
     6. Reduced motion

   Phone query for sections 1 and 2: (max-width:768px) for phones held upright, plus
   (pointer:coarse) and (max-height:500px) for phones held sideways, which are wider than 768px but
   still touch screens. Section 3 uses 720px to match the launcher in voice.js. Section 5 uses 640px,
   where the figures' text drops under 6px.

   The only !important is the reduced-motion reset in section 6; its comment says why. */


/* ---------------------------------------------------------------------------------------------
   1. TAP TARGETS (mob-02): every control at least 44px tall on phones
   --------------------------------------------------------------------------------------------- */
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  /* Buttons: .btn is 43.3px (rivet.css: line-height 1, padding .82em). Rules that ask for more
     (.mobile-nav__cta .btn 50px, course-polish #main 48px) are more specific and still win. */
  html body .btn { min-height: 44px; }
  /* forms.css resets .rf .btn to min-height:0 at two classes; this outranks it. */
  html body .rf .btn { min-height: 44px; }

  /* Header and footer wordmark links: 24px, the height of the logo image. */
  :is(.site-header, .site-footer) .brand { display: inline-flex; align-items: center; min-height: 44px; }

  /* Footer link columns, column headings included: chrome.css gives them 40px at 680px and below. */
  .site-footer .f2-col a { display: flex; align-items: center; min-height: 44px; }
  /* Privacy, Terms and Cookies in the base row: 33px. */
  .site-footer .f2-base__c a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  /* Social icons: 34px squares. 6 x 44 + 5 x 4 = 284px, which fits a 343px column. */
  .site-footer .f2-social { gap: 4px; flex-wrap: wrap; justify-content: center; }
  .site-footer .f2-social a { width: 44px; height: 44px; }
  /* Country picker: about 43px. */
  .site-footer .fccy__btn { min-height: 44px; }
  /* "Ask AI about RIVET" icons: 28px; visuals.css enlarges them only at 560px and below. */
  .site-footer .f2-ask__a { width: 44px; height: 44px; }

  /* Cookie banner buttons: 37px. */
  .cookie .cookie__btn { min-height: 44px; }

  /* Standalone text links ("taught in AIWS", "Buy this course", "View course", "See all chapters"):
     14 to 26px. */
  html body :is(.rcard__in, .dmode__cta, .chapter__meta .go) { display: inline-flex; align-items: center; }
  html body :is(.rcard__in, .dmode__cta, .chapter__meta .go, .course__cta, .finalcta__browse, .mw-card__ask) { min-height: 44px; }
  /* .chero__book is a centred block link, so it stays block-level. */
  html body .chero__book { display: flex; align-items: center; justify-content: center; min-height: 44px; }

  /* Icon links (LinkedIn marks, 22 to 32px): the glyph keeps its size; a centred 44px box takes the tap.
     .vquote__li already has a 44px area from course-hero.css at 720px and below; this gives the same box. */
  html body :is(.cmemb__li, .lico, .qcard__li, .chero__li, .li, .gwall__li, .vquote__li) { position: relative; }
  html body :is(.cmemb__li, .lico, .qcard__li, .chero__li, .li, .gwall__li, .vquote__li)::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* Round arrow buttons: 36 to 40px. course-hero.css already sizes some of them at 720px and below;
     listing them here covers 721 to 768px too. */
  html body :is(.cx-arw, .curnav__b, .evrailbtn, .room__btn, .gcal__arw, .cstage__arw, .gwall__arrow) { width: 44px; height: 44px; }
  /* Course-page toggles and the calendar's time-zone select: 38 to 40px. */
  html body :is(.cohtoggle__b, .cstage__mswb, .gcal__tzsel) { min-height: 44px; }
  /* Pills, chips and tabs: 35 to 39px tall; a one-word chip ("All") is 43px wide. */
  html body .cx-pill { height: 44px; }
  html body :is(.lib-chip, .lib-opt, .ptab, .rost__tabs button) { min-height: 44px; min-width: 44px; }
  html body .catbar a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Library hero dots (academy, resources): 24px buttons (lib-hero.css). The 8px pip is drawn by ::before and keeps
     its size; four dots plus the 44px pause button take 228px. */
  html body .lib-hero__dot { width: 44px; height: 44px; }
  /* Pause buttons on moving rows. The certified-members wall (academy, membership, for-companies) draws a 36px square
     in a <style> that certified-members.js adds at runtime; the course marquee pause is 36px tall above 720px. */
  html body .mq-pause { min-height: 44px; }
  html body .cmemb__bar .mq-pause { width: 44px; height: 44px; }
}


/* ---------------------------------------------------------------------------------------------
   2. FORM FIELDS (mob-03): 16px text, so iOS Safari does not zoom in when a field takes focus
   Covers the footer WhatsApp field on every page (.94rem input, .88rem select), the library search
   and every course or contact form. Only the font size changes; family, weight and colour stay.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  html body :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="color"]), select, textarea) {
    font-size: 16px;
  }
  /* forms.css sets the dial-code select to 15px at two classes plus a type; this outranks it. */
  html body .field .rf-tel select { font-size: 16px; }
}


/* ---------------------------------------------------------------------------------------------
   3. VOICE WIDGET AND COOKIE BANNER (mob-04, CSS part)
   The first-party round launcher that voice.js adds (in the course lane's version: button.rv-voice,
   [data-rv-launcher]) carries its own styles and hides itself while the cookie banner is open, so
   nothing here restyles it. This section only sets the stacking order and the widget's spacing.
   --------------------------------------------------------------------------------------------- */

/* Stacking, top to bottom: modal dialogs, cookie banner, voice widget, header.
   The widget host (<elevenlabs-convai>) is position:fixed at z-index 1000 over the whole viewport.
   On a 375px phone its sheet covered both consent buttons; on tablets it can cover the banner's right
   end. So the banner moves above it at every size. The contact and apply modal (.rfm, z-index 260 in
   forms.css) has to stay above the banner, so it moves up with it. These two rules change stacking
   only, never layout. */
.cookie { z-index: 1100; }
.rfm { z-index: 1200; }

@media (max-width: 720px) {
  /* The widget's own spacing token (its :host default is 32px). A page rule on the host element wins
     over :host. At 16px its round button and sheet line up with the page gutter and with the launcher.
     Depends on the pinned widget 0.21.4. */
  elevenlabs-convai { --el-overlay-padding: 16px; }
  /* The last footer row scrolls clear of the 48px round button, which sits 16px from the bottom. */
  body:has(elevenlabs-convai) .site-footer .f2-base { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}


/* ---------------------------------------------------------------------------------------------
   4. TAP-TO-REVEAL DIAGRAMS (mob-08, CSS part)
   site.js marks the tapped (or Enter/Space-toggled) item .is-open and closes its siblings, at every
   width. These rules give .is-open the same look as each diagram's existing hover and focus state, so
   they apply at every width too. The AI-SCORE record on intro-ai-score carries its .is-open rules
   inline on that page.
   --------------------------------------------------------------------------------------------- */

/* GTM Maturity Model (membership, for-companies; glass.css): the open level lifts like on hover, and
   opening level 3 outlines levels 1 to 3. A level that has keyboard focus keeps its focus ring. */
.matur .mlvl.is-open { transform: translateY(-5px) scale(1.015); }
.matur:has(.mlvl--3.is-open) :is(.mlvl--1, .mlvl--2, .mlvl--3):not(:focus-visible) {
  outline: 1.5px solid color-mix(in oklab, var(--violet) 55%, transparent); outline-offset: 2px; border-radius: 6px;
}

/* Agents relay (agents.css): the open node and the node it hands over to. */
.relay .rnode.is-open { border-color: color-mix(in oklab, var(--cyan) 55%, var(--line)); }
.relay .rnode.is-open + .rnode { border-color: var(--cyan); background: color-mix(in oklab, var(--cyan) 7%, var(--card-bg)); }


/* ---------------------------------------------------------------------------------------------
   5. WIDE FIGURES ON PHONES (mob-09, CSS part)
   OS Overview's three React figures (#fig-pipeline viewBox 660, #fig-camel and #fig-aiscore 600)
   shrink into a 291px column and render their text at 4 to 5px. On phones each keeps its native width
   and scrolls sideways inside its frame, at its designed 9.5 to 12px. The caption under each figure
   stays the width of the frame and does not scroll away. The 8-model diagram's phone list is inline on
   that page.
   --------------------------------------------------------------------------------------------- */
@media (max-width: 640px) {
  html body .figslot:has(> :is(#fig-pipeline, #fig-camel, #fig-aiscore)) { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  html body :is(#fig-pipeline, #fig-camel, #fig-aiscore) {
    container-type: inline-size; /* lets the caption below size itself to the visible width (cqw) */
    min-width: 0; max-width: none; align-items: flex-start;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    padding-block: 10px; /* room for strokes the svg draws just outside its box (it sets overflow:visible) */
  }
  html body #fig-pipeline svg { min-width: 660px; }
  html body :is(#fig-camel, #fig-aiscore) svg { min-width: 600px; }
  /* The figure takes the svg's full width, so its caption can stay pinned to the visible part. */
  html body :is(#fig-pipeline, #fig-camel, #fig-aiscore) > figure { width: max-content; min-width: 100%; }
  html body :is(#fig-pipeline, #fig-camel, #fig-aiscore) figcaption { position: sticky; left: 0; width: 100cqw; box-sizing: border-box; }
}


/* ---------------------------------------------------------------------------------------------
   6. REDUCED MOTION (mob-10)
   --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* scrollfx.js always adds the .scrollbar progress bar; visuals.css only hides the retired
     .scroll-progress. */
  .scrollbar { display: none; }

  /* Stop every animation and transition. !important is needed because the site declares motion in
     about 40 sources, including inline <style> blocks in <body> that load after this file, and a reset
     with zero specificity can only win with !important. Marquees end on their cloned half, which looks
     the same as the first. Delays are kept. The one script that waits for animationend (role-cycle.js)
     already switches itself off under reduced motion. */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}