:root {
  --ink: #122019;
  --muted: #607268;
  --brand: #0b5d3b;
  --brand-dark: #063d27;
  --mint: #e5f4e9;
  --cream: #fcfaf5;
  --surface: #ffffff;
  --line: #dce7dd;
  --danger: #a32626;
  --focus: #f4b942;
  --radius: 1rem;
  --shadow: 0 0.7rem 2rem rgba(15, 55, 35, 0.1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--cream); color: var(--ink); }
body { margin: 0; min-width: 20rem; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 0.2rem solid var(--focus); outline-offset: 0.15rem; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; opacity: 0.55; }
.sr-only { position: absolute; width: 0.06rem; height: 0.06rem; padding: 0; margin: -0.06rem; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.topbar { position: sticky; top: 0; z-index: 5; min-height: 4.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem clamp(1rem, 4vw, 4rem); background: rgba(252,250,245,0.94); border-bottom: 0.06rem solid var(--line); backdrop-filter: blur(1rem); }
.brand { color: var(--brand-dark); text-decoration: none; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; }
.topbar-actions { display: flex; align-items: center; gap: 0.6rem; }
.network-state { min-width: 4rem; color: var(--muted); font-size: 0.78rem; font-weight: 700; text-align: center; }
.network-state[data-online="false"] { color: var(--danger); }
.language-picker select { min-height: 2.8rem; border: 0.06rem solid var(--line); border-radius: 0.65rem; background: var(--surface); padding: 0 0.6rem; color: var(--ink); }
.primary-button, .secondary-button, .icon-button, .rider-primary { min-height: 2.8rem; border-radius: 0.7rem; padding: 0.55rem 0.9rem; font-weight: 750; border: 0.06rem solid transparent; }
.primary-button, .rider-primary { background: var(--brand); color: #fff; }
.secondary-button, .icon-button { background: var(--surface); border-color: var(--line); color: var(--brand-dark); }
.app-shell > main { max-width: 78rem; margin: 0 auto; padding: clamp(1rem, 4vw, 3rem); }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: clamp(1.5rem, 5vw, 4rem); min-height: 16rem; border-radius: calc(var(--radius) * 1.5); background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; box-shadow: var(--shadow); }
.hero h1 { max-width: 36rem; margin: 0.2rem 0 0.8rem; font-size: clamp(2rem, 5vw, 4rem); line-height: 0.98; letter-spacing: -0.05em; }
.hero p { max-width: 42rem; margin: 0; line-height: 1.5; color: rgba(255,255,255,0.86); }
.eyebrow { color: inherit !important; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.search-box input { min-height: 3.4rem; width: min(24rem, 100%); padding: 0 1rem; border: 0; border-radius: 0.8rem; background: #fff; color: var(--ink); }
.workspace-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0; }
.workspace-nav a { padding: 0.6rem 0.9rem; border-radius: 99rem; background: var(--mint); color: var(--brand-dark); text-decoration: none; font-size: 0.9rem; font-weight: 750; }
.workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.surface { min-height: 11rem; padding: 1.2rem; border: 0.06rem solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 0.2rem 0.8rem rgba(15,55,35,0.04); }
.surface-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.surface h2 { margin: 0; font-size: 1.05rem; letter-spacing: -0.02em; }
.empty-state { color: var(--muted); line-height: 1.5; }
.action-stack { display: grid; gap: 0.7rem; margin-top: 1rem; }
.rider-hero { background: linear-gradient(135deg, #132d29, #1f7151); }
.rider-primary { min-height: 4.2rem; border-radius: 1rem; padding: 0.9rem 1.4rem; font-size: 1.05rem; box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,0.18); }
.rider-stats, .owner-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.stat { padding: 1rem; border-radius: 0.9rem; background: var(--surface); border: 0.06rem solid var(--line); }
.stat span { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.stat strong { display: block; margin-top: 0.4rem; font-size: 1.5rem; }
.rider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.map-placeholder { min-height: 12rem; border-radius: 0.75rem; background: repeating-linear-gradient(45deg, #e7f3eb, #e7f3eb 1rem, #d6e8dd 1rem, #d6e8dd 2rem); }
.proof-form { display: grid; gap: 0.9rem; margin-top: 1rem; }
.proof-form label, .auth-card label { display: grid; gap: 0.4rem; color: var(--muted); font-size: 0.88rem; font-weight: 750; }
.proof-form input, .auth-card input { min-height: 3rem; border: 0.1rem solid #b8cabe; border-radius: 0.7rem; padding: 0.55rem 0.75rem; background: #fff; color: var(--ink); }
.notice { min-height: 1.2rem; color: var(--brand-dark); font-size: 0.88rem; font-weight: 650; line-height: 1.4; }
.support-disclosure { margin: 1.5rem 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.auth-page { display: grid; place-items: center; min-height: calc(100vh - 7rem); padding: 1rem; }
.auth-card { width: min(28rem, 100%); padding: 2rem; border: 0.06rem solid var(--line); border-radius: 1.2rem; background: var(--surface); box-shadow: var(--shadow); }
.auth-card h1 { margin: 0.2rem 0 1.5rem; font-size: 2rem; }
.auth-card form { display: grid; gap: 1rem; }
.access-denied { max-width: 42rem; margin: 10vh auto; padding: 2rem; background: #fff5f5; border: 0.06rem solid #f1c6c6; border-radius: var(--radius); color: #6d1e1e; }
[dir="rtl"] .topbar-actions { flex-direction: row-reverse; }
[dir="rtl"] .workspace-nav { flex-direction: row-reverse; justify-content: flex-end; }
@media (max-width: 48rem) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar-actions { width: 100%; justify-content: space-between; }
  .hero { align-items: flex-start; flex-direction: column; min-height: auto; }
  .workspace-grid, .rider-grid { grid-template-columns: 1fr; }
  .rider-stats, .owner-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-contrast: more) {
  :root { --line: #557060; --muted: #263d31; }
  .surface, .stat { border-width: 0.12rem; }
}

/* account screens ------------------------------------------------------- */
.auth-lead { color: #4a4a4a; margin: 0 0 1rem; line-height: 1.5; }
.auth-links { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.link-button {
  background: none; border: 0; padding: .35rem 0; color: #0B5D3B;
  font: inherit; text-align: inherit; cursor: pointer; text-decoration: underline;
}
.link-button:hover { color: #073f28; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.checkbox { display: flex; align-items: flex-start; gap: .6rem; margin: .5rem 0; }
.checkbox input { width: auto; margin-top: .2rem; }

/* rider ----------------------------------------------------------------- */
.floor-note {
  background: #E8F3ED; border-inline-start: 4px solid #0B5D3B;
  padding: .7rem 1rem; border-radius: .4rem; margin: 0 0 1rem;
}
.offer-card, .job-card {
  border: 1px solid #E3DED3; border-radius: .6rem; padding: 1rem; margin-bottom: .8rem;
}
.offer-card header, .job-card header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem;
}
.pill { background: #F0EDE6; border-radius: 999px; padding: .15rem .7rem; font-size: .85rem; }
.offer-card dl { display: flex; gap: 1.5rem; margin: 0 0 .8rem; }
.offer-card dl div { display: flex; flex-direction: column; }
.offer-card dt { font-size: .8rem; color: #6b6b6b; }
.offer-card dd { margin: 0; font-weight: 600; font-size: 1.1rem; }
.job-route { margin: 0 0 .8rem; color: #4a4a4a; }
.product-card {
  display: flex; justify-content: space-between; padding: .7rem 0; border-bottom: 1px solid #EFEBE2;
}

/* right to left --------------------------------------------------------- */
[dir="rtl"] .floor-note { border-inline-start: 4px solid #0B5D3B; }

/* --- phase 10: hand-over, cash and the generated sign-up form ------------- */
.handover-card, .order-card {
  border: 1px solid var(--line, #E4DED2);
  border-radius: 14px;
  padding: 1rem;
  margin-block-end: 0.75rem;
  background: var(--surface, #FFFFFF);
}
.handover-card header, .order-card header {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
}
.code-box {
  margin-block: 0.75rem;
  padding: 0.75rem;
  border: 1px dashed var(--line, #E4DED2);
  border-radius: 12px;
  text-align: center;
}
.code-value {
  display: block;
  font-size: 2rem;
  letter-spacing: 0.35rem;
  font-variant-numeric: tabular-nums;
  min-height: 2.2rem;
}
.cash-note, .pay-line { font-weight: 600; }
.pill.cash { background: #7A4B00; color: #FFFFFF; }
.field-help { display: block; opacity: 0.75; font-size: 0.85rem; }
.fields-lead { font-weight: 600; margin-block-end: 0.5rem; }
.deferred-field { opacity: 0.75; font-size: 0.9rem; margin-block: 0.35rem; }
.legal-note { color: #7A4B00; font-size: 0.9rem; }
.signup-fields { display: grid; gap: 0.6rem; margin-block: 0.75rem; }

/* ---- Phase 11: the customer's own journey ---------------------------- */

/* The stages of one delivery. A step that has happened is filled in; the
   rest are outlined, so progress is legible without colour alone. */
.journey { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .75rem 0; }
.journey-step {
  border: 1px solid var(--line, #d9d2c4); border-radius: 999px;
  padding: .25rem .75rem; font-size: .85rem; opacity: .55;
}
.journey-step[data-done="true"] {
  background: var(--brand, #0B5D3B); border-color: var(--brand, #0B5D3B);
  color: #fff; opacity: 1;
}
.journey-step[data-done="true"]::before { content: "✓ "; }

.address-card, .order-card {
  border: 1px solid var(--line, #d9d2c4); border-radius: .75rem;
  padding: .75rem 1rem; margin-bottom: .75rem;
}
.address-card header, .order-card header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

.order-panel { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--line, #d9d2c4); }
.order-panel[hidden] { display: none; }

.receipt-lines { list-style: none; padding: 0; margin: .5rem 0; }
.receipt-lines li { display: flex; justify-content: space-between; padding: .15rem 0; }

/* Right-to-left languages get the same layout mirrored, not a second one. */
[dir="rtl"] .journey-step[data-done="true"]::before { content: " ✓"; }

/* ---- the shop's own workspace (Phase 12) --------------------------------
   Everything here is built the same way as the rider's screens: one column on
   a phone, wider where there is room, and every touch target at least three
   rem tall because these screens are used with wet hands in a kitchen. The
   layout is written with logical properties so a right-to-left language does
   not need a second stylesheet. */
.seller-grid { display: grid; gap: 1rem; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.8rem; }
.order-card, .menu-row { border: 0.06rem solid var(--line); border-radius: 0.9rem; padding: 1rem; margin-block-end: 0.9rem; background: var(--surface); }
.order-card header, .menu-row header { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.order-lines { margin: 0.6rem 0; padding-inline-start: 1.1rem; color: var(--muted); font-size: 0.9rem; }
.reason-list { margin: 0.4rem 0 0.8rem; padding-inline-start: 1.1rem; color: var(--muted); font-size: 0.9rem; }
.answer-form, .door-form, .menu-form { display: grid; gap: 0.7rem; margin-block-start: 0.8rem; }
.answer-form label, .door-form label, .menu-form label, .hours-row label { display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.answer-form input, .answer-form select, .door-form input, .door-form select,
.menu-form input, .hours-row input { min-height: 3rem; border: 0.1rem solid #b8cabe; border-radius: 0.7rem; padding: 0.55rem 0.75rem; background: #fff; color: var(--ink); }
.hours-row { display: grid; grid-template-columns: minmax(6rem, 1fr) 1fr 1fr; gap: 0.6rem; align-items: end; margin-block-end: 0.6rem; }
.hours-row > span { font-weight: 750; }
.pill.live { background: #e7f3eb; color: var(--brand-dark); }
.pill.stale { background: #fdeeee; color: #9a2b2b; }
@media (min-width: 60rem) {
  .seller-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- the pilot control room (Phase 13) ------------------------------
   Logical properties throughout, so Arabic and Urdu need no second sheet:
   the layout mirrors itself from the document direction alone. */
.pilot-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gate, .place, .ceiling, .incident, .review-day, .funnel-row {
  border-inline-start: 3px solid var(--line, #dcdcdc);
  padding-inline-start: 0.75rem;
  margin-block-end: 0.75rem;
}
.gate-passed { border-inline-start-color: #2f8f4e; }
.gate-open { border-inline-start-color: #c98a1b; }
.incident-p1 { border-inline-start-color: #9a2b2b; }
.incident-p2 { border-inline-start-color: #c98a1b; }
.incident-p3 { border-inline-start-color: #6b7280; }
.needs { margin: 0; padding-inline-start: 1.1rem; }
.muted { color: #5b5b5b; font-size: 0.9rem; margin-block: 0.15rem; }

/* ---- Phase 18: the tab bar, the account screens, the refund desk ---- */
.tabbar { display: flex; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap; }
.tab { border: 1px solid rgba(11,93,59,.25); background: transparent; color: inherit;
       border-radius: 999px; padding: .45rem 1rem; font: inherit; cursor: pointer; }
.tab-on { background: #0B5D3B; color: #fff; border-color: #0B5D3B; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.stack label { display: flex; flex-direction: column; gap: .25rem; font-size: .95rem; }
.detail-list { margin: 0; padding: 0; list-style: none; }
.detail-list dt { font-weight: 600; margin-top: .5rem; }
.detail-list dd { margin: 0 0 .25rem; }
.detail-list li { margin: .35rem 0; }
.row { display: flex; gap: .75rem; align-items: center; justify-content: space-between;
       padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.06); flex-wrap: wrap; }
.row-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.row-card { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: .9rem; margin-bottom: .75rem; }
.row-late { border-color: #B3261E; }
.pill { display: inline-block; border-radius: 999px; padding: .1rem .6rem; font-size: .8rem;
        background: rgba(11,93,59,.1); margin-inline-start: .4rem; }
.pill-good { background: rgba(11,93,59,.18); }
.pill-bad { background: rgba(179,38,30,.15); color: #B3261E; }
.link-button { background: none; border: none; color: #0B5D3B; text-decoration: underline;
               font: inherit; cursor: pointer; padding: 0; }
.danger-button { background: #B3261E; color: #fff; border: none; border-radius: 10px;
                 padding: .6rem 1.1rem; font: inherit; cursor: pointer; }
.warning { color: #B3261E; }
.muted { opacity: .75; }
.codes { background: rgba(0,0,0,.05); padding: .75rem; border-radius: 8px; white-space: pre-wrap; }
.wrap { word-break: break-all; }
.dossier { margin-top: .75rem; border-top: 1px dashed rgba(0,0,0,.15); padding-top: .75rem; }
/* Right-to-left needs nothing else: the whole document flips on dir="rtl",
   and every rule above uses logical properties or is symmetric. */

/* ------------------------------------------------------------------------
   Phase 20 — the rider's own road, the shop's bell, the owner's one screen.
   ------------------------------------------------------------------------ */

/* The rider's route. Big numbers, because it is read at a traffic light. */
.rider-nav { display: grid; gap: 1rem; }
.nav-heading { text-align: center; }
.nav-leg { margin: 0; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.nav-distance { margin: .1rem 0; font-size: 2.6rem; font-weight: 700; line-height: 1; }
.nav-compass { margin: 0; font-size: 1rem; opacity: .8; }
.nav-rose { width: min(56vw, 240px); margin: 0 auto; display: block; }
.nav-dial { fill: none; stroke: currentColor; stroke-opacity: .18; stroke-width: 2; }
.nav-cardinal { font-size: 13px; fill: currentColor; fill-opacity: .55; }
.nav-needle { stroke: #0B5D3B; stroke-width: 6; stroke-linecap: round; }
.nav-head { fill: #0B5D3B; }
.nav-hub { fill: currentColor; fill-opacity: .5; }
.nav-line { width: min(56vw, 240px); margin: 0 auto; display: block; }
.nav-ground { fill: currentColor; fill-opacity: .05; }
.nav-trail { fill: none; stroke: #0B5D3B; stroke-opacity: .55; stroke-width: 3; stroke-linejoin: round; }
.nav-straight { stroke: currentColor; stroke-opacity: .3; stroke-width: 2; stroke-dasharray: 5 5; }
.nav-target { fill: #B3261E; }
.nav-me { fill: #0B5D3B; }
.nav-address { text-align: center; font-size: 1.05rem; margin: .25rem 0; }
.nav-eta { text-align: center; margin: .2rem 0; }
.nav-eta small { display: block; opacity: .65; font-size: .8rem; }
.nav-arrived { text-align: center; display: grid; gap: .5rem; }
.nav-arrived-title { font-size: 1.6rem; font-weight: 700; margin: 0; }
.nav-door-bits { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.nav-door-bits li { display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: .25rem; }
.nav-door-bits strong { font-size: 1.2rem; }
.nav-handoff { display: grid; gap: .4rem; }
.nav-handoff-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.nav-handoff-warning, .nav-honesty { font-size: .78rem; opacity: .65; }
.nav-stale, .nav-warning { background: #FDF0D5; border-radius: 8px; padding: .5rem .75rem; margin: 0; }
.nav-nopoint, .nav-quiet { text-align: center; opacity: .7; }

/* The shop's standing alert. Deliberately impossible to scroll past. */
.standing-alert {
  position: sticky; top: 0; z-index: 40;
  background: #0B5D3B; color: #fff; border-radius: 14px;
  padding: 1.1rem 1rem; margin-bottom: 1rem; text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.standing-alert-escalated { background: #8C1D18; }
.standing-alert-title { margin: 0; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.standing-alert-code { margin: .15rem 0; font-size: 2rem; font-weight: 700; }
.standing-alert-waited { margin: 0; font-size: 1.1rem; }
.standing-alert-cash, .standing-alert-escalated-note, .standing-alert-silent {
  margin: .35rem 0 0; font-size: .9rem; opacity: .9;
}
.standing-alert-ack { margin-top: .8rem; min-height: 3.2rem; font-size: 1.1rem; width: 100%; }
.standing-alert-note, .standing-alert-more { display: block; margin-top: .4rem; font-size: .78rem; opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .standing-alert { animation: halalgo-standing 1.6s ease-in-out infinite alternate; }
  @keyframes halalgo-standing { from { transform: scale(1); } to { transform: scale(1.012); } }
}

/* The owner's board. A window, not a lever: no button, anywhere. */
.owner-board { display: grid; gap: 1rem; }
.board-tally { display: flex; flex-wrap: wrap; gap: .75rem; }
.board-count { flex: 1 1 6rem; background: rgba(0,0,0,.04); border-radius: 12px; padding: .6rem .8rem; }
.board-count strong { display: block; font-size: 1.8rem; line-height: 1.1; }
.board-count span { font-size: .78rem; opacity: .7; }
.board-count.board-red strong { color: #8C1D18; }
.board-count.board-amber strong { color: #8A5A00; }
.board-count.board-green strong { color: #0B5D3B; }
.board-split { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .board-split { grid-template-columns: 3fr 2fr; } }
.board-attention { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.board-attention li { border-inline-start: 4px solid currentColor; padding: .45rem .7rem;
  background: rgba(0,0,0,.03); border-radius: 8px; display: grid; gap: .15rem; }
.board-attention-red { color: #8C1D18; }
.board-attention-amber { color: #8A5A00; }
.board-attention li small { color: inherit; opacity: .7; font-size: .78rem; }
.board-attention-subject { font-variant-numeric: tabular-nums; }
.board-attention-minutes { font-weight: 600; }
.board-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.board-table th { text-align: start; font-weight: 600; opacity: .65; padding: .35rem .5rem; }
.board-table td { padding: .35rem .5rem; border-top: 1px solid rgba(0,0,0,.07); }
.board-row.board-red { background: rgba(140,29,24,.08); }
.board-row.board-amber { background: rgba(138,90,0,.08); }
.board-code, .board-minutes { font-variant-numeric: tabular-nums; }
.board-map { width: 100%; max-width: 320px; display: block; }
.board-map-ground { fill: currentColor; fill-opacity: .05; }
.board-dot circle { fill: #0B5D3B; }
.board-dot-stale circle { fill: #8A5A00; fill-opacity: .6; }
.board-map-credit, .board-window-not-lever { font-size: .78rem; opacity: .65; }
.board-stale { background: #FDF0D5; border-radius: 8px; padding: .5rem .75rem; margin: 0; }
.board-clear { opacity: .7; }

/* ---- Phase 21: the application, step by step ---------------------------- */
/* Colour is never the only thing that says what is going on: every step also
   carries the word in the person's own language, because a colour-blind rider
   at a bus stop is exactly who this screen is for. */
.step-list { list-style:none; margin:16px 0; padding:0; display:grid; gap:12px; }
.step { border:1px solid var(--line,#D9E7DF); border-left-width:4px; border-radius:12px;
        padding:14px 16px; background:#fff; }
[dir="rtl"] .step { border-left-width:1px; border-right-width:4px; }
.step-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.step-state { font-size:14px; font-weight:600; white-space:nowrap; }
.step-done { border-left-color:#0B5D3B; } [dir="rtl"] .step-done { border-right-color:#0B5D3B; }
.step-bad { border-left-color:#8E2C2C; background:#FBF0F0; }
[dir="rtl"] .step-bad { border-right-color:#8E2C2C; }
.step-with-us { border-left-color:#8a5a00; } [dir="rtl"] .step-with-us { border-right-color:#8a5a00; }
.step-with-you { border-left-color:#5b6b64; } [dir="rtl"] .step-with-you { border-right-color:#5b6b64; }
.step-human { display:inline-block; font-size:13px; font-weight:600; color:#0B5D3B;
              background:#EDF6F1; border-radius:999px; padding:2px 10px; margin:6px 0 0; }
.step-law { font-size:13px; color:#5b6b64; margin:6px 0 0; }
.step-refusal { margin-top:10px; padding-top:10px; border-top:1px dashed #E7C7C7; }
/* Their own words, kept in their own direction inside a page in ours. */
.step-note { margin:10px 0 0; padding:8px 12px; border-inline-start:3px solid #BFDCCD;
             background:#F6FAF8; font-style:normal; }
.step-words { display:block; font-weight:600; margin:12px 0 4px; }
.step textarea { width:100%; border:1px solid var(--line,#D9E7DF); border-radius:10px;
                 padding:10px; font:inherit; }
.small { font-size:13px; }
.secondary-button.danger { color:#8E2C2C; border-color:#E7C7C7; }

/* ---- Phase 25: the shelf that is not full -------------------------------
 * A person answering this is standing up, one-handed, and has a few minutes.
 * So: full-width targets on a phone, a clock that is readable at arm's length,
 * and a price difference that is never smaller than the price it changes.
 * Every tappable thing here is at least 44px, which is the smallest target a
 * thumb hits reliably and the size both app stores ask for.
 */
.subs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.subs-card {
  border: 1px solid var(--line, #e3ded3); border-radius: 0.75rem;
  padding: 0.9rem; background: var(--surface, #fff);
}
.subs-card > header {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
  margin-bottom: 0.4rem;
}
.subs-card > header strong { flex: 1 1 12rem; }
.subs-card .pill[data-subs-clock] { font-variant-numeric: tabular-nums; }
.subs-card .pill.stale { background: #8a1c1c; color: #fff; }
.subs-answered { opacity: 0.72; }
.subs-options { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.4rem; }
.subs-option label {
  display: flex; align-items: center; gap: 0.6rem; min-height: 44px;
  padding: 0.4rem 0.6rem; border: 1px solid var(--line, #e3ded3); border-radius: 0.6rem;
  cursor: pointer;
}
.subs-option label:focus-within { outline: 2px solid var(--focus, #0B5D3B); outline-offset: 2px; }
.subs-option strong { flex: 1 1 auto; }
.subs-option input[type="radio"] { width: 1.25rem; height: 1.25rem; }
.pill-warn { background: #6b4b00; color: #fff; }

.subs-seller { margin: 0.5rem 0; }
.subs-seller > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.subs-seller .order-lines li {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; min-height: 44px;
}
.subs-seller .order-lines li > span { flex: 1 1 10rem; }
.subs-asked { opacity: 0.8; }

.allergen-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.allergen-list li {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  padding: 0.35rem 0; border-bottom: 1px solid var(--line, #e3ded3);
}
.allergen-list li > label { min-height: 44px; display: flex; align-items: center; gap: 0.4rem; }
.allergen-list .mini { font-size: 0.85em; opacity: 0.85; }

/* A phone. One column, and every button wide enough to hit while walking. */
@media (max-width: 40rem) {
  .subs-card > header strong { flex: 1 1 100%; }
  .subs-card .action-stack { display: grid; gap: 0.5rem; }
  .subs-card .action-stack button { width: 100%; min-height: 48px; }
  .subs-seller .order-lines li > button { width: 100%; min-height: 44px; }
  .allergen-list li { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* Right to left: Arabic and Urdu read the other way, and so must the row. */
[dir="rtl"] .subs-option label,
[dir="rtl"] .allergen-list li > label { flex-direction: row-reverse; }
[dir="rtl"] .subs-card > header { flex-direction: row-reverse; }

/* ---- Tap targets ---------------------------------------------------------
 * A thumb is about 9mm across. Anything under 44px gets missed, and the
 * person who misses it blames themselves. The eye button and the two link
 * buttons on the sign-in screen were 19-22px tall; they are now the same
 * size as everything else, without changing how they look.
 */
.eye-button, .link-button, .brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.eye-button { justify-content: center; padding-inline: 0.5rem; }

/* Phase 26 — a form that shows what it made of the answer. */
.req { color: var(--danger, #b3261e); text-decoration: none; margin-inline-start: 0.15rem;
       font-weight: 700; }
/* Colour alone is not a signal: roughly one man in twelve cannot see this
   red against this background. The star is the signal; the colour helps. */
.req::after { content: ''; }
.file-field input[type="file"] { display: block; margin-block-start: 0.3rem; }
.place-results { display: grid; gap: 0.2rem; margin-block: 0.25rem; }
.place-option { text-align: start; padding: 0.4rem 0.6rem; border-radius: 0.4rem;
                border: 1px solid var(--line, #ddd); background: var(--card, #fff);
                cursor: pointer; font: inherit; }
.place-option:hover, .place-option:focus { background: var(--tint, #eef4f0); }
.place-gone { opacity: 0.7; font-size: 0.8rem; margin-inline-start: 0.4rem; }
.pay-actions { margin-block-start: 0.5rem; }
.pay-good { color: var(--green, #0B5D3B); font-weight: 600; }

/* مرحلہ 31 — زندہ چہرے کی سکرین۔ ہدایت بڑی، تاکہ آدمی کیمرے کی طرف دیکھتے
   ہوئے بھی پڑھ لے؛ اور تصویر آئینے کی طرح، تاکہ "بائیں" کا مطلب اُس کا
   بایاں ہو، ہمارا نہیں. */
.liveface-stage { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.liveface-stage video {
  width: 100%; max-width: 22rem; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 1rem; background: #000; transform: scaleX(-1);
}
.liveface-step { font-size: 1.35rem; font-weight: 600; text-align: center; margin: 0; }
.liveface-count { font-variant-numeric: tabular-nums; opacity: .7; margin: 0; }
@media (prefers-reduced-motion: reduce) { .liveface-stage video { transition: none; } }