/* css/frame.css — CSS الإطار الوحيد المسموح */
html, body {
  margin: 0;
  height: 100%;
  background: #090B10;
}
#screen-outlet {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  overflow-x: hidden;
}
#screen-outlet > [data-screen] {
  display: block;
  width: 100%;
  min-height: 100dvh;
}
#overlay-outlet > [data-overlay] {
  position: fixed;
  inset: 0;
  z-index: 60;
}
#map-layer {
  position: absolute;
  inset: 0;
}
/* bind() hides an element whose field is null so mockup text can never show.
   A Tailwind display utility (.flex, .grid, .inline-flex) outranks the UA
   [hidden] rule, so state it explicitly — otherwise a hidden example row
   stays on screen. */
[hidden] {
  display: none !important;
}
/* An icon a flow shows or hides is wrapped by hydrateIcons (js/stitch/stitch-runtime.js) so the hook
   survives; the wrapper adds no box, the icon sits in the layout exactly as before. */
.icon-slot {
  display: contents;
}

/* A camera turned on in a viewfinder the design drew (KF1 scans tickets): it fills the
   drawn frame under the corner marks, which keep their place above it. */
.camera-feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Accessibility on this device (P7, js/core/a11y.js). The text size zooms the screens (not <html>, whose
   zoom would push them past the edge), so px-sized design text grows too and each screen reflows in the
   same width; a design canvas drawn at exactly 390px follows the screen's width instead. Contrast and calm
   motion apply to everything; set on <html>, the filter creates no containing block for fixed bars. */
html.a11y-text-0 #screen-outlet, html.a11y-text-0 #overlay-outlet { zoom: 0.92; }
html.a11y-text-2 #screen-outlet, html.a11y-text-2 #overlay-outlet { zoom: 1.12; }
html.a11y-text-3 #screen-outlet, html.a11y-text-3 #overlay-outlet { zoom: 1.25; }
html[class*="a11y-text-"] #screen-outlet [class~="w-[390px]"],
html[class*="a11y-text-"] #overlay-outlet [class~="w-[390px]"] { width: 100% !important; }
html.a11y-contrast { filter: contrast(1.25) brightness(1.06); }
html.a11y-calm *, html.a11y-calm *::before, html.a11y-calm *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* OnzAuth container (js/core/onz.js). Web: the login opens in a popup, this is only the
   SDK's placeholder, so it takes no space. Native app (Capacitor): the login frame itself. */
#onz-frame {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
}
#onz-frame:empty { display: none; }
#onz-frame.onz-frame--iframe:not(:empty) {
  inset: 0;
  width: auto;
  height: auto;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 11, 16, 0.82);
}

/* A drawn control turned into a real one (stitch-build README, template rule 2): the
   design drew it as text, so the input takes that text's look and drops the browser's
   own field chrome. Only inputs marked data-drawn; inputs the design drew as inputs
   keep their own styling. */
/* !important: the forms preflight in css/stitch/_base.css styles every text input,
   including :focus with a blue ring, at a higher specificity than a plain rule here. */
[data-screen] input[data-drawn],
[data-screen] input[data-drawn]:focus {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  width: 100%;
  min-width: 0;
  color: inherit;
  font: inherit;
  caret-color: #c084fc;
}
[data-screen] input[data-drawn]::placeholder { color: inherit; opacity: 1; }
[data-screen] input[data-drawn]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

/* The one MapLibre map, moved into a screen's [data-map-slot] (nav.js). The container
   must fill the slot: with no height of its own it measured 0 px and the map drew
   into nothing. */
[data-map-slot] > #map-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}