/* css/a11y-forms.css: what js/core/field-error.js makes (round 50, EAA-05). Hand-written; css/stitch/** is never edited.
   - .sys-sr-only     a screen's status line (role="status"): read by a screen reader, never seen (the screen shows the words
                      already). field-error.js says nothing in it until this sheet hides it.
   - .sys-field-error a field's error made right after the field when the screen has no note of its own for it.
     Dark: #FCA5A5 on #181B25 (the highest card) 9.05:1, on #050510 10.68:1; light: #B42318 on #FFFFFF 6.6:1. */

.sys-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sys-field-error {
  margin: 6px 2px 0;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: #FCA5A5;
}
html[data-apple-theme="light"] .sys-field-error { color: #B42318; }
.sys-field-error[hidden] { display: none; }

/* EAA-07 (WCAG 1.3.4 Orientation): landscape orientation unlock guards.
   Keeps horizontal spill clipped in landscape and ensures sheets, modal dialogs
   and map-heavy screens remain scrollable and keep primary actions reachable on
   short phone viewports rotated to landscape (~320–540 px tall). */
@media (orientation: landscape) {
  html,
  body {
    overflow-x: clip;
  }

  #overlay-outlet > .screen-host {
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  .sheet-track > [data-sheet],
  .sheet-track[data-dialog] > [data-sheet],
  #screen-outlet [role="dialog"],
  #overlay-outlet [role="dialog"] {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* frame.css sets Q1's sheet to calc(100cqh - 304px), which collapses below
     130 px on a phone in landscape; give it almost the full landscape height. */
  #overlay-outlet [data-screen="Q1"] .sheet-track > [data-sheet],
  #screen-outlet [data-screen="Q1"] .sheet-track > [data-sheet] {
    height: min(calc(100dvh - 48px), calc(100cqh - 48px));
    max-height: calc(100dvh - 32px);
  }

  .support-chat-sheet,
  .report-sheet .support-chat-sheet,
  .confirmation-sheet .support-chat-sheet {
    height: min(88dvh, calc(100dvh - 16px));
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
  }

  [data-screen="CF1"] [class~="h-[320px]"] {
    height: clamp(120px, calc(100dvh - 240px), 220px) !important;
  }
}