/* ==========================================================================
   SEEYOUSOON — «Fråga först» and «Jag mår inte bra» (round 47, «Mina behov» lane B1; js/flows/taxi/ask-first.js)
   Hand-written, never generated. The driver's card «Om kunden mår dåligt» on CF3/CF4, his calm full-screen banner for a
   rider's request, the rider's «Jag mår inte bra» on C9 and its quiet chip on C4/C5.
   Calm on purpose: the app's glass (the --sys-* staircase, so «Ljus» turns it to paper by itself), a system green at low
   alpha for the accent, no alarm red. Large type, hairlines, logical properties (Arabic mirrors), and motion only when the
   phone allows it.
   Every rule's own class is written twice (.af-btn.af-btn, 0,2,0): the screens' scoped preflight in css/stitch/_base.css
   ([data-screen] button|h2|ol, 0,1,1) would otherwise win and draw the controls bare.
   ========================================================================== */

:root,
html[data-apple-theme="dark"] {
  --af-green: #30D158;
  --af-green-ink: #7BE495;
  --af-green-soft: rgba(48, 209, 88, 0.12);
  --af-green-edge: rgba(48, 209, 88, 0.32);
}
html[data-apple-theme="light"] {
  --af-green: #1F8A3B;
  --af-green-ink: #17692D;
  --af-green-soft: rgba(31, 138, 59, 0.10);
  --af-green-edge: rgba(31, 138, 59, 0.30);
}

/* ── the driver's card ──────────────────────────────────────────────────────────────────────────────────────────── */
.af-card.af-card {
  margin-block: 8px;
  border-radius: 18px;
  background: var(--sys-glass);
  border: 1px solid var(--sys-edge);
  color: var(--sys-label);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  overflow: hidden;
}
.af-row.af-row {
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  min-block-size: 56px;
  padding-block: 10px;
  padding-inline: 14px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.af-icon.af-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 12px;
  background: var(--af-green-soft);
  border: 1px solid var(--af-green-edge);
  color: var(--af-green);
}
.af-icon.af-icon svg { inline-size: 20px; block-size: 20px; }
.af-row-text.af-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-inline-size: 0; }
.af-title.af-title { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--sys-label); }
.af-sub.af-sub { font-size: 15px; line-height: 1.3; color: var(--sys-label-2); }
.af-chevron.af-chevron { flex: none; color: var(--sys-label-2); display: inline-flex; }
.af-chevron.af-chevron svg { inline-size: 22px; block-size: 22px; }
.af-row.af-row[aria-expanded="true"] .af-chevron { transform: rotate(180deg); }

.af-body.af-body { padding-inline: 14px; padding-block: 2px 14px; border-block-start: 1px solid var(--sys-hairline); }
.af-lines.af-lines { list-style: decimal; margin: 0; padding-block: 10px 4px; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; }
.af-lines.af-lines li { font-size: 17px; line-height: 1.4; color: var(--sys-label); }
.af-lines.af-lines li::marker { color: var(--af-green); font-weight: 700; }

.af-place.af-place {
  margin-block: 12px 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--sys-film);
  border: 1px solid var(--sys-hairline);
}
.af-label.af-label { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--sys-label-2); }
.af-place-name.af-place-name { margin: 4px 0 0; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--sys-label); overflow-wrap: anywhere; }
.af-place-coords.af-place-coords {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--sys-label);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}
.af-place-time.af-place-time, .af-place-none.af-place-none { margin: 4px 0 0; font-size: 15px; line-height: 1.35; color: var(--sys-label-2); }

.af-actions.af-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-block-start: 12px; }
.af-btn.af-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 52px;
  padding-inline: 12px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--sys-label);
  background: var(--sys-film-strong);
  border: 1px solid var(--sys-edge);
  cursor: pointer;
}
.af-btn.af-btn svg { inline-size: 20px; block-size: 20px; flex: none; }
.af-btn-112.af-btn-112 { color: var(--af-green-ink); background: var(--af-green-soft); border-color: var(--af-green-edge); }
.af-foot.af-foot { margin: 12px 0 0; font-size: 15px; line-height: 1.4; color: var(--sys-label-2); }

/* ── the driver's banner for a rider's request ───────────────────────────────────────────────────────────────────── */
.af-banner.af-banner {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 20px max(24px, env(safe-area-inset-bottom, 0px));
  background: var(--sys-scrim);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.af-banner.af-banner[hidden] { display: none; }
.af-banner-card.af-banner-card {
  inline-size: min(100%, 440px);
  padding: 28px 22px 22px;
  border-radius: 26px;
  background: var(--sys-glass-strong);
  border: 1px solid var(--af-green-edge);
  box-shadow: 0 18px 48px var(--sys-shadow);
  color: var(--sys-label);
  text-align: center;
}
.af-banner-kicker.af-banner-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--af-green-ink);
  background: var(--af-green-soft);
  border: 1px solid var(--af-green-edge);
}
.af-banner-kicker.af-banner-kicker svg { inline-size: 18px; block-size: 18px; }
.af-banner-title.af-banner-title { margin: 16px 0 0; font-size: 28px; font-weight: 800; line-height: 1.25; color: var(--sys-label); }
.af-banner-more.af-banner-more { margin: 12px 0 0; font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--sys-label); }
.af-banner-ok.af-banner-ok {
  margin-block-start: 24px;
  inline-size: 100%;
  min-block-size: 64px;
  border-radius: 18px;
  font-size: 22px;
  font-weight: 800;
  /* dark ink on the bright green (about 10:1); white on the deeper green of «Ljus» (about 4.4:1, large text) */
  color: #050510;
  background: var(--af-green);
  border: 0;
  cursor: pointer;
}
html[data-apple-theme="light"] .af-banner-ok.af-banner-ok { color: #FFFFFF; }
.af-banner-note.af-banner-note { margin: 12px 0 0; font-size: 15px; line-height: 1.35; color: var(--sys-label-2); }

/* ── the rider's «Jag mår inte bra» on C9 ────────────────────────────────────────────────────────────────────────── */
.af-unwell.af-unwell { position: relative; z-index: 10; padding-inline: 16px; padding-block: 8px; }
.af-unwell.af-unwell .af-card { margin-block: 0; }
.af-choices.af-choices { display: flex; flex-direction: column; gap: 10px; padding-block: 12px 2px; }
.af-choice.af-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  inline-size: 100%;
  min-block-size: 64px;
  padding-block: 10px;
  padding-inline: 16px;
  border-radius: 16px;
  text-align: start;
  text-decoration: none;
  color: var(--sys-label);
  background: var(--sys-film-strong);
  border: 1px solid var(--sys-edge);
  cursor: pointer;
}
.af-choice.af-choice[hidden] { display: none; }
.af-choice.af-choice .af-icon { inline-size: 40px; block-size: 40px; }
.af-choice-text.af-choice-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.af-choice-title.af-choice-title { font-size: 20px; font-weight: 700; line-height: 1.25; }
.af-choice-sub.af-choice-sub { font-size: 15px; line-height: 1.3; color: var(--sys-label-2); }
.af-choice-112.af-choice-112 { border-color: var(--af-green-edge); background: var(--af-green-soft); }
.af-choice-112.af-choice-112 .af-choice-title { color: var(--af-green-ink); }
.af-choice.af-choice[aria-busy="true"] { opacity: 0.7; }
.af-status.af-status { margin: 12px 0 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--sys-label); }
.af-status.af-status[data-seen] { color: var(--af-green-ink); }
.af-note.af-note { margin: 10px 0 0; font-size: 15px; line-height: 1.4; color: var(--sys-label-2); }

/* ── the quiet chip on C4/C5 ─────────────────────────────────────────────────────────────────────────────────────── */
.af-chip-row.af-chip-row { display: flex; justify-content: center; padding-block: 6px; }
.af-chip.af-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding-inline: 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sys-label);
  background: var(--sys-film);
  border: 1px solid var(--sys-edge);
  cursor: pointer;
}
.af-chip.af-chip svg { inline-size: 18px; block-size: 18px; color: var(--af-green); }

/* ── «Pågående resa» while a request of the rider's waits for him (js/flows/taxi/ride-return.js data-ask): the calm green ── */
.ride-return[data-ask] .ride-return-pill { border-color: var(--af-green-edge); }
.ride-return[data-ask] .ride-return-dot { background: var(--af-green); box-shadow: 0 0 0 4px var(--af-green-soft); }

/* ── focus, and motion only when the phone allows it ─────────────────────────────────────────────────────────────── */
.af-row.af-row:focus-visible, .af-btn.af-btn:focus-visible, .af-choice.af-choice:focus-visible, .af-chip.af-chip:focus-visible, .af-banner-ok.af-banner-ok:focus-visible {
  outline: 2px solid var(--af-green);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .af-chevron.af-chevron { transition: transform 200ms ease-out; }
  .af-row.af-row, .af-btn.af-btn, .af-choice.af-choice, .af-chip.af-chip, .af-banner-ok.af-banner-ok { transition: transform 160ms ease-out, opacity 160ms ease-out; }
  .af-row.af-row:active, .af-btn.af-btn:active, .af-choice.af-choice:active, .af-chip.af-chip:active, .af-banner-ok.af-banner-ok:active { transform: scale(0.98); }
  .af-body.af-body:not([hidden]) { animation: af-in 200ms ease-out; }
  .af-banner.af-banner:not([hidden]) { animation: af-fade 200ms ease-out; }
  .af-banner.af-banner:not([hidden]) .af-banner-card { animation: af-in 220ms ease-out; }
}
@keyframes af-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes af-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }