/*!
 * Pap’pote responsive foundation — loaded LAST on every page (after the design
 * system, the app layer and papote.css), including the course pages.
 * Mobile-first. Combines viewport size with the signals written on <html> by
 * design-system/device.js (data-device, data-input, data-short, data-tiny,
 * data-fold, data-kbd...), and works without JavaScript too: every rule keyed
 * on a data attribute has a media-query twin.
 * Full documentation: docs/RESPONSIVE.md
 *
 * Breakpoints (viewport width, CSS px)
 *   xs <360 · sm ≥360 · md ≥600 · lg ≥900 · xl ≥1200 · xxl ≥1600 · tv ≥2400 / TV
 */

/* ------------------------------------------------------------ fluid tokens */
:root{
  /* Type scale: phones get slightly smaller headings, big screens the iOS
     sizes. Line heights become unitless so they follow the font size. */
  --ig27-fs-large-title:clamp(28px, 5.2vw + 10px, 34px); --ig27-lh-large-title:1.2;
  --ig27-fs-title1:clamp(23px, 3.6vw + 10px, 28px);     --ig27-lh-title1:1.2;
  --ig27-fs-title2:clamp(19px, 2.4vw + 10px, 22px);     --ig27-lh-title2:1.25;
  --ig27-fs-title3:clamp(17px, 1.6vw + 11px, 20px);     --ig27-lh-title3:1.3;
  /* Spacing that breathes with the viewport */
  --pp-gutter:clamp(12px, 3.2vw, 32px);
  --pp-gap:clamp(8px, 1.6vw, 16px);
  /* Minimum touch target (WCAG 2.5.5 / Apple HIG / Material) */
  --pp-tap:44px;
  /* Visible height (set by device.js; shrinks with the on-screen keyboard) */
  --app-h:100dvh;
  --safe-t:env(safe-area-inset-top, 0px);  --safe-r:env(safe-area-inset-right, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px); --safe-l:env(safe-area-inset-left, 0px);
}
@supports not (height:100dvh){ :root{ --app-h:100vh; } }

/* Respect the system text size (Dynamic Type on iOS, font scale on Android):
   rem-based text follows it, and -apple-system-body on iOS. */
@supports (font:-apple-system-body){
  html[data-os="ios"], html[data-os="ipados"]{ font:-apple-system-body; }
  html[data-os="ios"] body, html[data-os="ipados"] body{ font-family:var(--ig27-font-family); }
}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* Never a horizontal scrollbar because of one long word or a wide element */
html, body{ max-width:100%; }
html{ overflow-x:hidden; overflow-x:clip; }
body{ overflow-x:clip; overflow-wrap:break-word; }
img, svg, video, canvas, audio, iframe{ max-width:100%; }
img, video{ height:auto; }
picture{ display:contents; }
pre, code{ white-space:pre-wrap; }

/* ------------------------------------------------------------ touch targets */
/* On touch screens every control is at least 44×44 px with room around it. */
@media (pointer: coarse){
  button, [role="button"], select, .pill, .btn2, .bpr, .soundbtn, .navtoggle, .profbadge, .kbtn, .order-chip, .tabbtn{
    min-height:var(--pp-tap);
  }
  .soundbtn{ min-width:var(--pp-tap); }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea{ font-size:max(16px, 1em); } /* no iOS zoom-on-focus */
}
html[data-input="touch"] .soundbtn, html[data-input="hybrid"] .soundbtn{ width:var(--pp-tap); height:var(--pp-tap); min-width:var(--pp-tap); }

/* Keyboard users always see where the focus is */
html[data-kbd] :focus-visible{ outline:3px solid var(--ig27-accent); outline-offset:2px; }

/* ------------------------------------------------------------ preferences */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
@media (prefers-reduced-transparency: reduce){
  *{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}
@media (prefers-contrast: more){
  :root{ --ig27-label-secondary:rgba(60,60,67,.92); --line:rgba(0,0,0,.45); --line-soft:rgba(0,0,0,.3); }
  html[data-theme="dark"]{ --ig27-label-secondary:rgba(235,235,245,.92); --line:rgba(255,255,255,.5); --line-soft:rgba(255,255,255,.35); }
  button, .box, .quiz-opt, .vrow, .navcard, .lvlcard, input, select, textarea{ border-width:2px !important; }
  *{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}
@media (forced-colors: active){
  button, .quiz-opt, .pill, .navcard, .lvlcard, .box{ border:1px solid ButtonText !important; }
  .duo-progress-fill, .pbar-fill, .meter > i{ background:Highlight !important; forced-color-adjust:none; }
}

/* ------------------------------------------------------------ safe areas */
/* Notch, Dynamic Island, rounded corners and home indicator (viewport-fit=cover) */
body.pp-page{ padding-left:max(var(--pp-gutter), var(--safe-l)); padding-right:max(var(--pp-gutter), var(--safe-r)); padding-bottom:max(16px, var(--safe-b)); }

/* ------------------------------------------------------------ modals & toasts */
dialog{ max-height:calc(var(--app-h) - 24px); max-width:min(640px, calc(100vw - 24px)); overflow:auto; overscroll-behavior:contain; }

/* ------------------------------------------------------------ tables */
/* Wide tables scroll horizontally inside their card, never the page. */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
/* Tables marked .cards-sm become one card per row on small screens; each
   cell shows its column name (data-label, added by script from the header). */
@media (max-width: 719.98px){
  table.cards-sm, table.cards-sm tbody, table.cards-sm tr, table.cards-sm td{ display:block; width:100%; }
  table.cards-sm thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  table.cards-sm tr{ margin:0 0 10px; padding:8px 12px; border:1px solid var(--line, rgba(60,60,67,.18)); border-radius:14px; background:var(--surface, transparent); }
  table.cards-sm td{ display:flex; gap:10px; justify-content:space-between; align-items:flex-start; padding:6px 0 !important; border:0 !important; text-align:right; }
  table.cards-sm td::before{ content:attr(data-label); flex:none; max-width:45%; text-align:left; font-weight:600; color:var(--ig27-label-secondary); }
  table.cards-sm td[data-label=""]::before{ display:none; }
  table.cards-sm td.empty{ justify-content:center; }
}

/* ------------------------------------------------------------ media */
.masc{ object-fit:contain; }
video, .media-16x9{ aspect-ratio:16 / 9; object-fit:cover; }

/* ------------------------------------------------------------ foldables */
/* Dual-screen / folded hinge: keep content off the hinge. */
@media (horizontal-viewport-segments: 2){
  :root{ --pp-hinge:calc(env(viewport-segment-left 1 0, 50vw) - env(viewport-segment-right 0 0, 50vw)); }
}

/* ------------------------------------------------------------ touch targets (2) */
@media (pointer: coarse){
  button{ min-width:var(--pp-tap); }
  .ig27-back, .back, footer a, footer nav a, .nav .links a{ display:inline-flex; align-items:center; min-height:var(--pp-tap); }
  summary{ padding-top:11px; padding-bottom:11px; }
  input[type="range"]{ min-height:var(--pp-tap); }
  .soundbtn{ flex:none; }
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}