/* ==========================================================================
   SUNNY DAYS — a11y.css · shared accessibility + mobile baseline
   --------------------------------------------------------------------------
   Loaded by EVERY page (production template + all mockups). Fixes the debt
   recorded in UX_GAP_AUDIT.md G-008 / G-009 / G-010 / G-014 in ONE place so
   it stops porting forward into new pages.

   Contents
     1. prefers-reduced-motion            (G-010)
     2. :focus-visible ring               (G-010)
     3. Skip link + .sr-only utilities    (G-010)
     4. 44px tap targets                  (G-008, WCAG 2.5.8)
     5. Horizontal-overflow containment   (G-014)
     6. Touch/scroll ergonomics

   Load AFTER tokens.css / design-system.css so it can win specificity ties,
   and note the deliberate use of !important only where it overrides an
   inline-styled or utility-class value we do not own.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
  /* Parallax / autoplaying decoration must hold still, not just finish fast. */
  [data-parallax],
  .marquee,
  .ticker,
  .snow-fall,
  .shimmer,
  .skeleton {
    animation: none !important;
    transform: none !important;
    background-position: 0 0 !important;
  }
  video[autoplay] { display: none; }
}

/* -------------------------------------------------------- 2. focus-visible */
/* One visible, high-contrast ring everywhere. Mouse users never see it. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"],
       [role="link"], [role="tab"], [role="checkbox"], [role="switch"],
       [role="option"], [contenteditable="true"]):focus-visible {
  outline: 3px solid var(--focus-ring, #0b5fff);
  outline-offset: 2px;
  border-radius: var(--focus-ring-radius, 6px);
  box-shadow: 0 0 0 5px var(--focus-ring-halo, rgba(11, 95, 255, 0.22));
  z-index: 2;
}
/* Kill the legacy `outline:none` blanket some sheets ship, but only for
   keyboard focus — never remove the ring silently. */
:focus-visible { outline-color: var(--focus-ring, #0b5fff); }

/* Forced-colours (Windows High Contrast) keeps a ring regardless of palette. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; box-shadow: none; }
}

/* Container-level focus for the sheet/drawer panel itself. */
.sheet:focus-visible,
.drawer:focus-visible,
[role="dialog"]:focus-visible {
  outline: 2px dashed var(--focus-ring, #0b5fff);
  outline-offset: -4px;
  box-shadow: none;
}

/* -------------------------------------------- 3. skip link + sr utilities */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link,
a.skip {
  position: absolute;
  top: 0;
  left: 8px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  transform: translateY(-140%);
  background: var(--ink, #1a1a2e);
  color: var(--paper, #fff9f0);
  font: 700 14px/1.2 var(--display, system-ui, sans-serif);
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.14s ease;
}
.skip-link:focus,
a.skip:focus {
  transform: translateY(0);
  outline: 3px solid var(--focus-ring, #0b5fff);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link, a.skip { transition: none; }
}
/* The skip target should not be visually offset by the ring. */
:where(#main, #content, main):focus { outline: none; }

/* --------------------------------------------------- 4. 44px tap targets */
/* WCAG 2.5.8 (AA, 24px) and 2.5.5 (AAA, 44px). We hold 44px on touch. */

/* 4a. Baseline: every genuinely clickable control gets a 44px box on touch
       pointers and narrow viewports. Inline links inside prose are exempt
       per WCAG's inline exception and are handled in 4d. */
@media (pointer: coarse), (max-width: 900px) {
  button,
  [role="button"],
  [role="tab"],
  [role="switch"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select,
  summary {
    min-height: 44px;
  }

  /* Text inputs need the height too — 16px font also stops iOS zoom. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  textarea,
  select {
    min-height: 44px;
    font-size: max(1em, 16px);
  }

  /* Controls that live in a pill row: keep the padding but grow the box. */
  .chip,
  .btn,
  .nav-mode,
  .nav-view,
  .sb-chip,
  .fsel,
  .vbtn,
  .rp-btn,
  .rp-add,
  .view-toggle__btn,
  .co-head nav a,
  .tab,
  .pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Nav/list/footer links are NOT inline prose — they must hit 44px. */
  nav a,
  footer a,
  .topbar a,
  .co-head a,
  .co-foot a,
  li > a:only-child,
  .brand,
  .co-brand,
  .crumbs a,
  .lnk {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  li > a:only-child { width: 100%; }

  /* Checkbox / radio: real 24px visual, 44px hit area (see 4b). */
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
    min-height: 24px;
    flex-shrink: 0;
  }

  /* Slider thumbs. */
  input[type="range"] { min-height: 44px; }

  /* Labels wrapping a control become the tap target. */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]),
  label.check,
  label.ctl {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

/* 4b. Hit-area expansion for icon-only controls whose VISUAL size must stay
       small (heart, stepper, close, toggles). A transparent ::after grows the
       clickable box to 44x44 without moving any pixels on screen. */
.heart,
.rp-btn,
.sheet-x,
.sb-whytog,
.fclear,
.int-pb,
.toggle,
.mobar-toggle,
.icon-btn,
.close,
[data-close],
button.nav-view {
  position: relative;
}
.heart::after,
.rp-btn::after,
.sheet-x::after,
.sb-whytog::after,
.fclear::after,
.int-pb::after,
.toggle::after,
.mobar-toggle::after,
.icon-btn::after,
.close::after,
[data-close]::after,
button.nav-view::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
  /* Below any nested icon so the icon still receives the event, above nothing
     else — purely an event-capture surface. */
  pointer-events: auto;
}
/* Same trick for checkbox/radio inputs, which cannot host pseudo-elements —
   expand the wrapping label instead (4a) and pad the input's own box. */

/* 4c. Grouped controls: when the 44px minimum would collide, allow the row to
       wrap rather than shrinking the targets back down. */
.chips,
.nav-modes,
.nav-views,
.filter-row,
.controls,
.qa-sel,
.i-sunken,
.vswitch,
.int-prio {
  row-gap: 8px;
}

/* 4d. Inline prose links stay inline (WCAG exception) but get a bigger,
       easier-to-hit underline hit slop via padding that does not reflow. */
@media (pointer: coarse) {
  p a, li a:not(:only-child), .check-m a, .fine a, small a {
    padding-block: 2px;
    text-underline-offset: 3px;
  }
}

/* ------------------------------------------ 5. horizontal-overflow guards */
/* G-014: chips, tables and scroll rails escaping the 390px viewport. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Rails that are MEANT to scroll: make them real, contained scrollers with
   momentum + snap instead of pushing the document wide. */
.frail,
.sb-scroll,
.filter-scroll,
.chips,
.nav-views,
.nav-modes,
.crumbs {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.frail::-webkit-scrollbar,
.sb-scroll::-webkit-scrollbar,
.filter-scroll::-webkit-scrollbar,
.chips::-webkit-scrollbar,
.nav-views::-webkit-scrollbar,
.nav-modes::-webkit-scrollbar,
.crumbs::-webkit-scrollbar { display: none; }

/* Chip rows should wrap on narrow screens rather than scroll off-screen. */
@media (max-width: 900px) {
  .chips,
  .sb-scroll,
  .int-prio {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .chip, .sb-chip { max-width: 100%; }
  .chip > .n, .chip > .count, .sb-chip > small { flex-shrink: 0; }
}

/* Wide data tables: wrap in a scroller instead of widening the page. */
@media (max-width: 900px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-scroll,
  #cls-table,
  table.cls {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Media never widens its column. */
img, video, iframe, canvas, svg, table { max-width: 100%; }
img, video { height: auto; }

/* ------------------------------------------- 6. touch/scroll ergonomics */
/* Sticky bars must not eat the whole small-screen viewport. */
@media (max-height: 560px) {
  .topbar, .co-head { position: static; }
}
/* Respect notches / home indicators on sticky footers and sheets. */
.sheet, .sheet-foot, .mobar, .co-foot {
  padding-bottom: max(var(--sheet-pb, 0px), env(safe-area-inset-bottom));
}
/* Scroll-locked body must not jump when a sheet opens. */
body.sheet-locked { overflow: hidden; touch-action: none; }
/* Keyboard users tabbing to a card inside a scroller should scroll it in. */
* { scroll-margin-top: 76px; }