/* 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%;
}

/* The designs are drawn on a 390px canvas. On a phone a screen takes the phone's width, narrower (360, 375)
   or wider (412, 430): a canvas fixed at 390 cut the edge off a 360 phone and left an empty strip beside it
   on a 430 one, so the app did not look like it was made for the phone it was on. */
#screen-outlet [class~="w-[390px]"],
#overlay-outlet [class~="w-[390px]"] { width: 100% !important; }
#screen-outlet [class~="max-w-[390px]"],
#overlay-outlet [class~="max-w-[390px]"] { max-width: 480px !important; }

/* On a computer the app is a phone-wide column in the middle, set on the brand's dark violet instead of a
   black page; overlays (menus, sheets) stay inside the column too. */
@media (min-width: 560px) {
  html, body {
    background:
      radial-gradient(900px 520px at 50% -8%, rgba(124, 58, 237, 0.22), transparent 62%),
      radial-gradient(700px 420px at 50% 108%, rgba(59, 130, 246, 0.12), transparent 60%),
      #06070c;
  }
  #screen-outlet {
    max-width: 480px;
    margin: 0 auto;
    background: #090B10;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.18), 0 40px 120px rgba(0, 0, 0, 0.7);
  }
  #overlay-outlet > [data-overlay] {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* B1's sheet (js/flows/common/b-hem.js, sheetDrag): dragged down, or its bar tapped, it keeps its bar, the
   trust line and the search above the edge and shows the map; up again it is as drawn. */
[data-screen="B1"] [data-part="sheet"] {
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-screen="B1"] [data-part="sheet"].sheet-low {
  transform: translateY(calc(100% - var(--sheet-peek, 136px)));
}
[data-screen="B1"] [data-part="sheet-handle"] {
  touch-action: none;
}

/* A business that has no photo yet: its photo well (an <img data-part="photo"> the flow hides, or one left
   without a source) shows the brand's soft violet light instead of an empty black box. */
#screen-outlet :has(> img[data-part="photo"]:is([hidden], :not([src]), [src=""])),
#overlay-outlet :has(> img[data-part="photo"]:is([hidden], :not([src]), [src=""])) {
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(139, 92, 246, 0.34), transparent 58%),
    radial-gradient(90% 80% at 92% 100%, rgba(59, 130, 246, 0.22), transparent 60%),
    #161a33;
}

/* ==========================================================================
   Testkit (PLAN-TAXI TX0): only for the team's test accounts. A small tab on the
   right edge and the "Rapportera fel" dialog (js/core/testkit.js).
   ========================================================================== */
.testkit-tab {
  position: fixed; right: 0; top: 38%; z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px; border: 1px solid rgba(245, 158, 11, 0.6); border-right: 0;
  border-radius: 12px 0 0 12px; background: rgba(31, 19, 0, 0.92); color: #fde68a;
  font: 800 9px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: 0.08em;
  box-shadow: -4px 6px 18px rgba(0, 0, 0, 0.45); cursor: pointer;
}
.testkit-tab__bug { font-size: 16px; line-height: 1; }
.testkit-dialog {
  width: min(92vw, 440px); max-height: 86vh; padding: 0; border: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 18px; background: #12131c; color: #e2e8f0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.testkit-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.testkit-dialog *, .testkit-dialog *::before, .testkit-dialog *::after { box-sizing: border-box; }
.testkit-form { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.testkit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.testkit-head strong { display: block; font-size: 16px; color: #fff; }
.testkit-meta { display: block; margin-top: 2px; font-size: 12px; color: #94a3b8; }
.testkit-x { background: none; border: 0; color: #94a3b8; font-size: 24px; line-height: 1; cursor: pointer; }
.testkit-label { font-size: 12px; font-weight: 700; color: #cbd5e1; }
.testkit-form textarea {
  width: 100%; resize: vertical; min-height: 96px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: #0b0c13; color: #f8fafc; font: inherit; font-size: 15px;
}
.testkit-file { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, 0.2); color: #cbd5e1; font-size: 13px; cursor: pointer; }
.testkit-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.testkit-status { min-height: 18px; margin: 0; font-size: 13px; color: #fde68a; }
.testkit-foot { display: flex; justify-content: flex-end; gap: 8px; }
.testkit-btn { padding: 10px 16px; border-radius: 12px; border: 0; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.testkit-btn--ghost { background: rgba(255, 255, 255, 0.06); color: #e2e8f0; }
.testkit-btn:disabled { opacity: 0.5; }
/* the code a computer shows, typed or carried by its QR (js/core/panel-access.js, PLAN-TAXI TX1) */
.panel-login-code {
  width: 100%; padding: 12px; border-radius: 12px; border: 1px solid rgba(139, 92, 246, 0.5); background: #0b0c13; color: #fff;
  font: 800 24px/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-align: center; text-transform: uppercase;
}