/* ════════════════════════════════════════════════════════════════
   Facialteam Transparency Hub — responsive layer
   Targets inline-styled elements with !important to override.
   Breakpoints: 1100 (tablet+), 900, 768 (tablet), 600, 480 (phone)
   ════════════════════════════════════════════════════════════════ */

/* base */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; }

/* skip-link for keyboard users */
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 9999;
  padding: 12px 18px; background: var(--ft-premium-grey); color: var(--ft-basic-pink);
  font-family: var(--ft-font-text); font-size: 13px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
  border-radius: 4px; transition: top .2s var(--ft-ease);
}
.skip-link:focus { top: 16px; outline: 2px solid var(--ft-empathetic-orange); outline-offset: 2px; }

/* focus visible */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--ft-empathetic-orange);
  outline-offset: 3px;
  border-radius: 2px;
}
.nav-tab:focus-visible { outline-offset: 4px; }
.anat-nav-item:focus-visible { outline-offset: -2px; outline-color: var(--ft-daring-lilac); }

/* nav: horizontal scroll on small screens */
.nav-sticky { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nav-sticky::-webkit-scrollbar { height: 0; }
.nav-tabs-row { flex-shrink: 0; }

/* anat-rail scroll on mobile */
.anat-rail-list { display: flex; flex-direction: column; }

/* ─── 1100px and below ─── */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-side { display: none !important; }
  .anat-explorer { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; }
  .anat-rail { border-right: none !important; border-bottom: 1px solid rgba(41,41,42,0.08) !important; }
  .anat-rail-list {
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .anat-rail-list::-webkit-scrollbar { height: 4px; }
  .anat-rail-list::-webkit-scrollbar-thumb { background: rgba(41,41,42,0.2); }
  .anat-nav-item {
    flex: 0 0 240px !important;
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
    scroll-snap-align: start;
  }
  .anat-nav-item.active { border-bottom-color: var(--ft-empathetic-orange) !important; }
  .anat-panel { padding: 32px 28px !important; }
  .anat-explorer,
  .anat-explorer > *,
  .anat-panel,
  .anat-panel *,
  .anat-panel-grid,
  .anat-panel-grid > * { min-width: 0 !important; }
  .anat-panel { overflow: hidden; }
  .anat-panel-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .reint-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .region-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .annual-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important; }
  /* Grid items default to min-width:auto, which let .annual-bars' min-width leak up and
     blow out the column (phantom horizontal scroll). Force 0 so overflow:auto scrolls. */
  .annual-grid > div { min-width: 0 !important; }
  .annual-note { border-top: none !important; border-left: 3px solid rgba(41,41,42,0.15) !important; padding: 4px 0 4px 18px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
  /* Region list: stack the two columns at <1100 */
  .region-list-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  /* Satisfaction outcome rows: collapse early so tablets don't squash the 240px label */
  .sat-row { grid-template-columns: 1fr 60px !important; gap: 8px 14px !important; }
  .sat-row > .sat-bar { grid-column: 1 / -1 !important; order: 2 !important; }
  .sat-row > .sat-pct { order: 1 !important; text-align: right !important; }
}

/* ─── 900px and below ─── */
@media (max-width: 900px) {
  .ft-stats-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .ft-stats-4 > div { padding: 36px 24px !important; }
  .pub-row { grid-template-columns: 60px 1fr !important; gap: 14px !important; padding: 20px !important; }
  .pub-row .pub-type { grid-column: 1 / -1; margin-top: 4px; }
  .pub-row .pub-arrow { display: none !important; }
  .sat-row { grid-template-columns: 1fr 60px !important; gap: 8px 14px !important; }
  .sat-row > .sat-bar { grid-column: 1 / -1; order: 2; }
  .sat-row > .sat-pct { order: 1; text-align: right; }
  .reint-row { grid-template-columns: 1fr !important; gap: 6px !important; padding: 14px 0 !important; }
  .reint-row > .reint-old, .reint-row > .reint-new { padding-left: 0 !important; }
  .reint-head { display: none !important; }
  .reint-row .reint-old::before { content: "2018–22 cohort"; display: block; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(41,41,42,0.45); margin-bottom: 4px; }
  .reint-row .reint-new::before { content: "2020–24 cohort"; display: block; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: #2e7d32; margin-bottom: 4px; }
  .ring-grid { grid-template-columns: 1fr !important; }
  .ring-grid > div { padding: 32px 16px !important; }
  /* stack proc detail stats */
  .proc-stats-3 { grid-template-columns: 1fr !important; gap: 14px !important; }
  /* annual chart wider bars */
  .annual-bars { gap: 4px !important; height: 220px !important; }
  .annual-bars span:first-child { font-size: 9px !important; }
  /* reint header smaller */
  /* Region row: drop the mini-bar column, keep dot + name + value */
  .region-row { grid-template-columns: 16px 1fr 50px !important; gap: 12px !important; padding: 12px 0 !important; }
  .region-row > div:nth-of-type(1) { display: none !important; } /* hide mini-bar */
}

/* ─── 768px and below — tablet/large phone ─── */
@media (max-width: 768px) {
  /* sections: tighter padding */
  #hero { padding: 40px 20px 50px !important; }
  #procedures { padding: 60px 20px !important; }
  #overview { padding: 60px 20px !important; }
  #satisfaction { padding: 60px 20px !important; }
  #research { padding: 60px 20px !important; }
  /* header */
  .ft-header { padding: 14px 20px !important; gap: 12px !important; }
  .ft-header img { height: 32px !important; }
  .ft-header-tag { display: none !important; }
  /* nav sticky */
  .nav-sticky { padding: 12px 16px !important; gap: 8px !important; }
  .nav-sticky-title { display: none !important; }
  .nav-tab { padding: 8px 14px !important; font-size: 12px !important; }
  /* hero header row */
  .hero-headrow { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  .hero-headrow > * { min-width: 0 !important; max-width: 100% !important; }
  /* section heads */
  .section-head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .section-head h2 { font-size: clamp(36px, 8vw, 56px) !important; }
  /* satisfaction big number */
  .sat-headline { font-size: 56px !important; }
  .sat-headline-pct { font-size: 24px !important; }
  /* aesthetic header */
  .aesthetic-head { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  /* footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; text-align: left !important; }
  /* satisfaction outcome rows */
  .sat-row { grid-template-columns: 1fr 60px !important; }
  .sat-row .sat-label { font-size: 17px !important; }
  /* detail panel padding */
  .anat-panel { padding: 28px 20px !important; }
  .anat-panel h2 { font-size: clamp(34px, 8vw, 48px) !important; }
  /* proc card description min-height removal */
  .proc-card { padding: 22px 20px !important; }
  .proc-card h3 { font-size: 30px !important; }
  .proc-card-desc { min-height: 0 !important; }
  /* publication list */
  .pub-row { padding: 18px 18px !important; }
  .pub-row .pub-title { font-size: 14.5px !important; line-height: 1.4 !important; }
  /* ring labels */
  .ring-grid { grid-template-columns: repeat(1, 1fr) !important; }
  /* satisfaction scale chart bars */
  .sat-scale-bars { gap: 6px !important; }
  /* table 5y note layout */
  .fy-note { font-size: 12.5px !important; }
  /* Growth chart — allow horizontal scroll, keep bars readable */
  .annual-bars-wrap {
    margin-right: -20px !important;
    padding-right: 20px !important;
    scroll-snap-type: x proximity;
  }
  .annual-bars { min-width: 520px !important; gap: 3px !important; }
  .annual-bars span { font-size: 9px !important; }
  /* Annual note: pull tighter to the chart */
  .annual-note { padding-top: 20px !important; margin-top: 8px !important; }
  /* Region bar (segmented): keep visible but smaller text */
  .region-bar { height: 44px !important; }
  /* Satisfaction scale chart — horizontal scroll if needed */
  .sat-scale-bars {
    margin-right: -20px !important;
    padding-right: 20px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sat-scale-bars > div { min-width: 38px !important; }
  .sat-scale-bars > div > span:first-child { font-size: 12px !important; }
  .sat-scale-bars > div > span:last-child { font-size: 14px !important; }
  /* Procedure stats inside detail panel */
  .anat-panel h2 br { display: none !important; }
  /* Satisfaction intro pull-up clamp */
  .sat-intro { font-size: 18px !important; margin: 0 0 32px !important; }
  /* Bibliography list items don't overflow */
  .bib-list { word-break: break-word; }
}

/* ─── 600px ─── */
@media (max-width: 600px) {
  .ft-stats-4 { grid-template-columns: 1fr !important; }
  .ft-stats-4 > div { padding: 28px 22px !important; }
  /* headlines tighter */
  h1, h2, h3 { word-break: break-word; }
  /* hero h1 */
  .hero-h1 { font-size: clamp(40px, 11vw, 64px) !important; }
  /* annual chart compact */
  .annual-bars { height: 180px !important; }
  .annual-bars span:first-child { font-size: 8px !important; }
  .annual-bars span:last-child { font-size: 8.5px !important; }
  /* sat scale */
  .sat-scale-bars { height: 200px !important; gap: 4px !important; }
  .sat-scale-bars span:nth-child(1) { font-size: 11px !important; }
  /* reint old/new sizing */
  .reint-row .reint-bar { display: none !important; }
  /* footer headline */
  .footer-headline { font-size: 28px !important; }
  /* Annual chart tighter at 600 */
  .annual-bars { min-width: 460px !important; }
  /* Sat scale shrinks */
  .sat-scale-bars > div > span:first-child { font-size: 11px !important; }
  /* Sat-headline number: stays right but no max-width overflow */
  .sat-headline { font-size: 48px !important; }
  .sat-headline-pct { font-size: 22px !important; }
  /* Section h2 left-align in section-head */
  .section-head { width: 100%; }
}

/* ─── 480px and below — small phone ─── */
@media (max-width: 480px) {
  .ft-header { padding: 12px 16px !important; }
  .ft-header img { height: 27px !important; }
  .nav-tab { padding: 7px 12px !important; font-size: 11.5px !important; }
  .anat-nav-item { flex: 0 0 220px !important; padding: 16px 16px !important; }
  /* satisfaction outcome label smaller */
  .sat-row .sat-label { font-size: 15px !important; }
  /* publication date col tighter */
  .pub-row { grid-template-columns: 50px 1fr !important; gap: 10px !important; padding: 16px !important; }
  /* Annual bars minimum at smallest */
  .annual-bars { min-width: 420px !important; }
  /* Sat-scale-bars minimum */
  .sat-scale-bars > div > span:first-child { font-size: 10px !important; }
  .sat-scale-bars > div { min-width: 34px !important; }
  /* Section padding tighter */
  #hero { padding: 32px 16px 40px !important; }
  #procedures, #overview, #satisfaction, #research { padding: 48px 16px !important; }
  /* Hero headline aggressive */
  .hero-h1 { font-size: clamp(34px, 10vw, 52px) !important; }
  /* Region row: hide dot too for ultra-small */
  .region-row { grid-template-columns: 1fr 50px !important; gap: 10px !important; }
  .region-row > span:nth-of-type(1) { display: none !important; } /* hide colored dot */
  .region-row > span:nth-of-type(2) { font-size: 15px !important; }
}

/* print */
@media print {
  .nav-sticky, .skip-link { display: none !important; }
  body { background: #fff !important; }
  section { page-break-inside: avoid; padding: 30px 20px !important; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}