/* The dark onboarding flow, from Avi's mockups (chef and restaurant, 2026-09).
   ─────────────────────────────────────────────────────────────────────────
   SCOPED, not a theme. Every token here is declared on .pn and nowhere else,
   so none of it can reach the twenty screens the app already ships. That is
   deliberate and it is the second time this codebase has done it: .landing-
   screen in index.html carries --l-panel/--l-ink for exactly the same reason.
   When this flow is proven, these promote to a real [data-theme="dark"]; until
   then a mistake here costs one flow, not the product.

   Why the colours are these colours. The app's light palette solved orange by
   splitting it: --accent (#B33A10) carries text AND takes a white label, and
   --accent-bright (#E8531F) is display only. On a dark ground that split has
   to invert, and the arithmetic says so plainly:

       white label on #B33A10   5.95:1 ✓   but the fill is 3.13:1 on the page
       white label on #CC4413   4.77:1 ✓   fill 3.91:1 ✓   as text on a card 3.59 ✗
       white label on #F85A22   3.24:1 ✗   but as text on a card 5.28:1 ✓
       white label on #FF6B2C   2.84:1 ✗   ← the mockup orange, and the exact
                                             failure premium-theme.css already
                                             documents having fixed once

   So there are two oranges and they are not interchangeable: --pn-accent fills
   a control that carries a white label, --pn-accent-text is orange used AS
   text or as a mark. Avi's orange is brighter than --pn-accent; this is as
   close as it gets while the label on the product's main button stays legible.

   --pn-line-strong is the one that looked arbitrary and is not. WCAG 1.4.11
   wants a control findable against the page at 3:1, and on this ground a
   hairline has to be #5E6872 (3.28:1) to get there. Darker reads better and
   fails the people this rule exists for — someone holding a phone outside a
   restaurant in daylight.

   Three traps in premium-theme.css that this file has to work around, all of
   them already paid for once:
     .rounded-2xl/.rounded-xl/.glass-card  force background AND border
     .text-xs                              forces color
     button                                forces border-radius + border:none
   So: no rounded-* utility anywhere in this flow, no .text-xs, and any button
   that is not a pill states its radius with !important. */

.pn {
  --pn-bg: #101316;
  --pn-surface: #181C20;
  --pn-surface-2: #21262B;
  --pn-line: #2C333A;          /* decoration: separates two blocks */
  --pn-line-strong: #5E6872;   /* affordance: locates a control, 3.28:1 */
  --pn-ink: #F4F6F7;           /* 17.19:1 on the page */
  --pn-ink-2: #A2AAB0;         /*  7.91:1 on the page, 7.27:1 on a card */
  --pn-ink-3: #8B949B;         /*  6.04:1 on the page */
  --pn-accent: #CC4413;        /* fills; white label 4.77:1 */
  --pn-accent-text: #F85A22;   /* text and marks; 5.51:1 page, 5.28:1 surface */
  --pn-on-accent: #FFFFFF;
  --pn-ok: #22C55E;

  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--pn-bg);
  color: var(--pn-ink);
}

/* premium-theme.css colours every heading element with !important at #1B2124,
   which on this ground is 1.10:1 — invisible. A class outranks an element
   selector but still loses to its !important, so these need both. Measured in
   the browser on the landing panel before, not assumed. */
.pn h1, .pn h2 { color: var(--pn-ink) !important; margin: 0; }

/* ===== step header: "שלב 2 מתוך 5" + the rail + back ===================== */

.pn-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 0;
  font-size: 12px;
  color: var(--pn-ink-3);
}
/* The rail is the only element on screen whose job is to be compared with
   itself a moment later, so the segments are equal and the fill is a colour
   change rather than a width animation — a width animation on a 5-segment rail
   reads as loading, not as progress. */
.pn-rail { display: flex; flex: 1 1 auto; gap: 4px; }
.pn-rail span {
  flex: 1 1 0;
  height: 3px;
  border-radius: 999px;
  background: var(--pn-line);
}
.pn-rail span[data-done="1"] { background: var(--pn-accent-text); }
.pn-back {
  background: none;
  color: var(--pn-ink-3);
  font-size: 12px;
  padding: 4px 2px;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ===== the step body ===================================================== */

.pn-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 8px 20px 0;
  overflow-y: auto;
}
.pn-art { display: flex; justify-content: center; padding: 26px 0 18px; color: var(--pn-accent-text); }
.pn-title {
  font-family: 'Suez One', Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 8px;
}
.pn-lede {
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pn-ink-2);
  margin: 0 0 20px;
}

/* ===== option rows ======================================================= */

/* A row is a <button>, so the sheet's forced pill has to be undone here. 14px
   and not the sheet's radius-full: a full pill on a 72px-tall row turns the
   ends into semicircles and the icon inside them stops lining up with the one
   above it. */
.pn-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: start;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--pn-surface);
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px var(--pn-line);
  color: var(--pn-ink);
  /* Not styling — this is load-bearing, and it cost an hour to find.
     premium-theme.css puts `transition: all .3s <bouncy curve> !important` on
     every <button>. With it in place, tapping a row set aria-pressed="true",
     the child icon and radio repainted, and the ROW'S OWN background and ring
     stayed on their unselected values — permanently, not briefly. Measured in
     the browser: computed background rgb(24,28,32) when the matching rule says
     rgb(30,26,24), with getAnimations() empty, so it is a transition that was
     started by the React re-render and abandoned holding its start value.
     The children were right the whole time precisely because nothing forces a
     transition on them.
     Three candidates were tested through real React clicks, select and
     deselect: the inherited `all` bounce failed, an explicit
     `background-color .15s linear` ALSO failed, and only `none` worked. So it
     is none, and !important because the declaration it has to beat has one.
     A selection row in the mockups changes instantly anyway — this is the
     behaviour the design wanted, arrived at the expensive way. */
  transition: none !important;
}
.pn-option[aria-pressed="true"] {
  background: #1E1A18;
  box-shadow: inset 0 0 0 1.5px var(--pn-accent-text);
}
.pn-option__icon {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--pn-surface-2);
  color: var(--pn-ink-2);
}
.pn-option[aria-pressed="true"] .pn-option__icon {
  background: var(--pn-accent);
  color: var(--pn-on-accent);
}
.pn-option__text { flex: 1 1 auto; min-width: 0; }
.pn-option__name { display: block; font-size: 14.5px; font-weight: 600; }
/* Not .text-xs — that class forces its own colour with !important and would
   win over this one. */
.pn-option__hint { display: block; font-size: 11.5px; color: var(--pn-ink-3); margin-top: 2px; }
/* The radio is drawn rather than native: a native control on this ground
   renders in the platform's own light chrome and cannot be recoloured on iOS. */
.pn-option__mark {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--pn-line-strong);
}
.pn-option[aria-pressed="true"] .pn-option__mark {
  background: var(--pn-accent-text);
  box-shadow: inset 0 0 0 1.5px var(--pn-accent-text), inset 0 0 0 4px var(--pn-surface);
}

/* ===== the footer control =============================================== */

/* Sticky rather than in flow: these steps are lists that can outrun the
   viewport, and the mockup's button sits on the bottom edge in every frame.
   The background is solid, not a fade — a fade over a scrolling list of dark
   cards reads as a rendering fault on an OLED phone. */
.pn-foot {
  position: sticky;
  bottom: 0;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--pn-bg);
  box-shadow: 0 -1px 0 var(--pn-line);
}
.pn-cta {
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  background: var(--pn-accent);
  color: var(--pn-on-accent);
}
.pn-cta[disabled] { opacity: .45; }
.pn-ghost {
  width: 100%;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: var(--pn-ink);
  box-shadow: inset 0 0 0 1px var(--pn-line-strong);
}

/* ===== welcome ========================================================== */

.pn-welcome { padding: 0; }
.pn-welcome__hero { position: relative; flex: 0 0 auto; height: 46vh; min-height: 240px; max-height: 420px; overflow: hidden; }
.pn-welcome__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
/* The photo dissolves into the page instead of stopping at an edge, which is
   what keeps the headline reading as the same surface rather than a caption
   under a picture. */
.pn-welcome__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 30%, rgba(16,19,22,.55) 76%, var(--pn-bg) 100%);
}
.pn-welcome__panel {
  position: relative;
  z-index: 1;
  margin-top: -34px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0 24px calc(14px + env(safe-area-inset-bottom, 0px));
}
.pn-welcome__title {
  font-family: 'Suez One', Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.22;
  margin-bottom: 10px;
}
.pn-welcome__lede { font-size: 13.5px; line-height: 1.65; color: var(--pn-ink-2); margin: 0 0 20px; }
.pn-welcome__note { margin-top: 14px; text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--pn-ink-3); }
.pn-welcome__foot {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pn-brand { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--pn-ink); }

@media (prefers-reduced-motion: reduce) {
  .pn * { animation: none !important; }
}

/* ===== the photo step ==================================================== */

/* 16/9, matching both the shape the file is stored in and the shape /j/
   renders it at, so what the business sees here is what a cook will see. */
.pn-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  background: var(--pn-surface);
  border-radius: 16px !important;
  box-shadow: inset 0 0 0 1.5px var(--pn-line-strong);
  color: var(--pn-ink-2);
  /* Same reason as .pn-option: premium-theme.css forces `transition: all` on
     every button, and a forced transition on a background changed by a React
     re-render strands it on the old value. */
  transition: none !important;
}
.pn-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-photo__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.pn-photo__hint { margin: 12px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--pn-ink-3); text-align: center; }
.pn-photo__error { margin: 12px 0 0; font-size: 12px; color: var(--pn-accent-text); text-align: center; }

/* ===== steppers (the experience step) =================================== */

/* A row here is a <div>, not a <button> — the two controls inside it are the
   buttons. So this one does not need the radius or transition escapes the
   option rows do; only its children are <button> and they want the pill the
   sheet already forces. */
.pn-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--pn-surface);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--pn-line);
}
.pn-stepper__controls { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.pn-step-btn {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; line-height: 1;
  background: var(--pn-surface-2);
  color: var(--pn-ink);
  /* Same stranding trap as .pn-option: the forced `transition: all` abandons
     a background changed by a React re-render and keeps the old value. */
  transition: none !important;
}
.pn-step-btn[disabled] { opacity: .35; }
/* Tabular figures so 9 -> 10 does not shift the buttons sideways. */
.pn-stepper__value {
  min-width: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pn-section {
  margin: 18px 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pn-ink-3);
}

/* ===== search field and chips (the location step) ======================= */

.pn-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  margin-bottom: 12px;
  background: var(--pn-surface-2);
  border-radius: 12px;
  /* The affordance tone, not the decorative one: a field has to be findable
     against the page at 3:1 and --pn-line does not get there. */
  box-shadow: inset 0 0 0 1px var(--pn-line-strong);
  color: var(--pn-ink-3);
}
.pn-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--pn-ink);
  font: inherit;
  font-size: 14px;
}
.pn-search__input::placeholder { color: var(--pn-ink-3); }
/* Safari paints its own cancel button in the light chrome, which on this
   ground is a white smudge. The field is cleared by selecting an area. */
.pn-search__input::-webkit-search-cancel-button { display: none; }

.pn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.pn-chip {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  background: var(--pn-surface);
  color: var(--pn-ink-2);
  box-shadow: inset 0 0 0 1px var(--pn-line);
  /* Same stranding trap as every other button in this flow. */
  transition: none !important;
}
.pn-chip[aria-pressed="true"] {
  background: var(--pn-accent);
  color: var(--pn-on-accent);
  box-shadow: none;
}

/* ===== the summary on the closing step ================================== */

.pn-summary {
  background: var(--pn-surface);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--pn-line);
  padding: 6px 16px 10px;
  margin-bottom: 14px;
}
.pn-summary__photo {
  display: block;
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: 999px;
  margin: 14px auto 8px;
}
.pn-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--pn-line);
}
.pn-summary__row:last-child { border-bottom: 0; }
.pn-summary__key { flex: 0 0 auto; color: var(--pn-ink-3); }
/* The answer wraps rather than truncating: four trades on one line is the
   common case, and an ellipsis here hides the thing the screen exists to
   show back. */
.pn-summary__val { flex: 1 1 auto; text-align: end; color: var(--pn-ink); font-weight: 600; }

/* PhotoPicker is a light-theme component and draws its own label in
   --muted. On this ground that is 2.6:1, so the row it sits in restates the
   colour for everything inside it that the component does not set itself. */
.pn-photo-row { margin-bottom: 4px; }
.pn-photo-row span, .pn-photo-row label { color: var(--pn-ink-2) !important; }
/* A storefront is 16/9 and a cook's avatar is a circle, so the summary photo
   takes the shape of whichever side is closing. */
.pn-summary__photo--wide {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 12px; margin: 14px 0 8px;
}

/* ===== the phone and code fields ======================================== */

.pn-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--pn-surface-2);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--pn-line-strong);
}
/* The country code is a label, not an input. Israel is the only market and a
   second field to tab through buys nothing. */
.pn-phone__cc {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--pn-ink-2);
}
.pn-phone__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 15px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--pn-ink);
  font: inherit;
  font-size: 16px;            /* under 16px iOS zooms the page on focus */
  letter-spacing: .02em;
}
.pn-phone__input::placeholder { color: var(--pn-ink-3); }

/* One field, spaced out, rather than six boxes. Six inputs need focus
   shuffling, paste splitting and backspace-crosses-boxes handling, and every
   one of those is a way to trap someone mid-code; autocomplete="one-time-code"
   fills a single field on both platforms and nothing has to be caught. */
.pn-code {
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  border: 0;
  outline: none;
  background: var(--pn-surface-2);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--pn-line-strong);
  color: var(--pn-ink);
  font: inherit;
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .42em;
  text-indent: .42em;          /* centres despite the trailing letter-space */
  margin-bottom: 10px;
}
.pn-code::placeholder { color: var(--pn-ink-3); letter-spacing: .3em; }

/* ===== the app's own form controls, on this ground ====================== */

/* TextField and AreaSelect are light-theme components and this flow reuses
   them rather than growing a second set that drifts. Two of the documented
   traps bite at once:
     .rounded-xl on the input is in the GLASS selector, so premium-theme forces
       background AND border with !important — an inline --input-bg never
       arrives, and --glass-bg is #FBFBFA, a white box on a black page;
     .text-xs on the label forces --text-muted, which here measures 2.6:1.
   !important is not a shortcut here — it is the only thing that can beat an
   !important, and specificity decides between two of them: .pn input scores
   (0,1,1) against .rounded-xl's (0,1,0), so it wins. */
.pn .pn-body input,
.pn .pn-body select,
.pn .pn-body textarea {
  background: var(--pn-surface-2) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--pn-line-strong) !important;
  color: var(--pn-ink) !important;
  /* 16px or iOS zooms the whole page when the field takes focus, and the
     reader has to pinch back out to find the button. */
  font-size: 16px !important;
}
.pn .pn-body input::placeholder,
.pn .pn-body textarea::placeholder { color: var(--pn-ink-3) !important; }
.pn .pn-body label { color: var(--pn-ink-2) !important; }
/* The hint and error lines under a field, which carry .text-xs. */
.pn .pn-body p.text-xs { color: var(--pn-ink-3) !important; }

/* The native date picker draws its indicator in the platform's dark-on-light
   chrome; on this ground it is a black smudge until it is inverted. */
.pn .pn-body input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .65;
}

/* ===== the available-cooks list ========================================= */

.pn-chef {
  background: var(--pn-surface);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--pn-line);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.pn-chef__head { display: flex; align-items: center; gap: 12px; }
.pn-chef__photo {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
.pn-chef__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 12px 0 12px;
  font-size: 12px;
  color: var(--pn-ink-2);
}
.pn-chef__fact { display: inline-flex; align-items: center; gap: 5px; }
/* The one fact with a deadline on it. Orange because it is the reason to press
   the button now rather than later — everything else on the card is context. */
.pn-chef__fact--live { color: var(--pn-accent-text); font-weight: 600; }
.pn-chef__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 18px;
  font-size: 14px;
}

/* ===== the map on the location step ===================================== */

/* The tiles are light and stay light — the CSP allows tile.openstreetmap.org
   and nothing else, so a dark provider is not available without changing that
   list. Framed deliberately instead: a light map inside a dark frame reads as
   a map, while a map recoloured badly reads as a rendering fault. */
.pn-map {
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--pn-line-strong);
}
/* Leaflet paints its own light ground behind the tiles while they load, and
   the attribution strip carries the platform's link colours. Neither is worth
   fighting beyond keeping the seam invisible. */
.pn-map .leaflet-container { background: var(--pn-surface-2); }

/* A link that happens to be a button. .plain-control in premium-theme.css
   strips the forced pill and padding; the colour and underline are ours. */
.pn-textlink {
  display: block;
  margin: 14px auto 0;
  padding: 6px 4px !important;
  background: none !important;
  color: var(--pn-ink-2) !important;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The cooks list is a picker now, not a row of contact buttons — the contact
   itself needs an account and there is not one yet. So the card is a <button>,
   which means the sheet's forced pill and transition have to be undone here the
   same way .pn-option undoes them. */
.pn-chef--pick {
  width: 100%;
  display: block;
  text-align: start;
  border-radius: 16px !important;
  color: var(--pn-ink);
  transition: none !important;
}
.pn-chef--pick[aria-pressed="true"] {
  background: #1E1A18;
  box-shadow: inset 0 0 0 1.5px var(--pn-accent-text);
}
.pn-chef--pick .pn-option__mark { margin-inline-start: auto; }
.pn-chef--pick .pn-chef__facts { margin-bottom: 0; }

/* ===== the "or another way in" rule ===================================== */

/* A hairline with a word sitting in it. Grid rather than a border on a
   pseudo-element, so the two rules meet the text at its own height whatever
   the font does. */
.pn-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
  font-size: 12px;
  color: var(--pn-ink-3);
}
.pn-or::before, .pn-or::after {
  content: "";
  height: 1px;
  background: var(--pn-line);
}
.pn-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}