/* The ordering page (design 6.2), drawn from DESIGN.md's parts with the
 * tokens in tokens.css. The phone's recipe, because this is the diner app in a
 * browser: the primary is the ctaFill/ctaEdge/onCta plate, chili only for
 * errors and refusals, green for settled, notice for facts. Content text is
 * 13px or more, fields 16px (iOS zooms below that), targets 44px.
 *
 * Every rule is under html.dd-app, which boot.js sets only once the page
 * becomes the ordering page, and every class is dd-*: today's lander
 * (assets/table.css) is never touched by any of it.
 */

html.dd-app [hidden] { display: none !important; }

html.dd-app body {
  display: block;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.dd-app.dd-lock, html.dd-app.dd-lock body { overflow: hidden; }
html.dd-app button, html.dd-app input, html.dd-app textarea { font: inherit; color: inherit; }
html.dd-app button { -webkit-tap-highlight-color: transparent; }
html.dd-app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.dd-app img { max-width: 100%; }

.dd-root { min-height: 100vh; }
.dd-shell {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.dd-main { flex: 1 0 auto; padding: 8px 16px 32px; outline: none; }
.dd-boot { max-width: 420px; margin: 0 auto; padding: 16px; }

/* ── Header (part 1) ─────────────────────────────────────────────────────── */
.dd-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: env(safe-area-inset-top) 16px 0;
}
/* Which table this is, under the bar of the table's own views. */
.dd-head-sub {
  margin: 0; font-size: 13px; line-height: 18px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Segmented (part 10): the page's three places. On = accent on 14% accent. */
.dd-seg {
  display: flex; gap: 2px; margin: 2px 0 10px; padding: 2px;
  border: 1px solid var(--line); border-radius: 999px;
}
.dd-seg-item {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px;
  border: 0; border-radius: 999px; background: transparent; color: var(--paper);
  font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-seg-item.dd-on { color: var(--accent); background: var(--accent-14); }

/* ── Buttons (DESIGN.md § 4, buttons.ts) ─────────────────────────────────── */
.dd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--font-ui); max-width: 100%;
}
.dd-btn svg { flex: none; }
.dd-btn-wide { width: 100%; }
.dd-btn-primary {
  min-height: 52px; border-radius: 26px; padding: 0 16px;
  background: var(--cta-fill); border: 1px solid var(--cta-fill); color: var(--on-cta);
  font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: 0.2px;
}
/* Blocked, not faded (primaryBtnOff): the muted plate, the reason beside it. */
.dd-btn-primary:disabled { background: var(--paper-07); border-color: transparent; color: var(--muted); cursor: default; }
.dd-btn-primary[aria-busy="true"]:disabled { background: var(--cta-fill); border-color: var(--cta-fill); color: var(--on-cta); opacity: 0.75; }
.dd-btn-secondary {
  min-height: 46px; border-radius: 23px; padding: 0 16px;
  background: var(--btn2-fill); border: 1.5px solid var(--btn2-border); color: var(--btn2-text);
  font-size: 15px; line-height: 20px; font-weight: 600; box-shadow: var(--lift);
}
.dd-btn-danger {
  min-height: 46px; border-radius: 23px; padding: 0 16px;
  background: var(--danger-fill); border: 1px solid var(--danger-edge); color: var(--chili);
  font-size: 15px; line-height: 20px; font-weight: 600;
}
.dd-btn-compact { min-height: 40px; border-radius: 20px; padding: 0 14px; font-size: 14px; line-height: 19px; }
.dd-btn-quiet {
  min-height: 44px; padding: 0 16px; background: none; color: var(--accent);
  font-size: 15px; line-height: 20px;
}
.dd-btn-quietDanger {
  min-height: 44px; padding: 0 16px; background: none; color: var(--chili);
  font-size: 15px; line-height: 20px; font-weight: 600;
}
.dd-btn-secondary:disabled, .dd-btn-danger:disabled, .dd-btn-quiet:disabled, .dd-btn-quietDanger:disabled { opacity: 0.55; cursor: default; }

.dd-icon-btn {
  flex: none; width: 44px; height: 44px; border-radius: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--muted); cursor: pointer;
}
.dd-icon-btn:active { color: var(--accent); }

.dd-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Text ────────────────────────────────────────────────────────────────── */
.dd-caption { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.dd-num {
  font-family: var(--font-mono); font-size: 15px; line-height: 21px; color: var(--paper);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dd-num-strong { font-weight: 600; font-size: 16px; }
.dd-price { font-family: var(--font-mono); font-size: 15px; line-height: 21px; font-weight: 600; color: var(--paper); white-space: nowrap; }
.dd-title { margin: 0; font-size: 26px; line-height: 34px; font-weight: 600; }
.dd-lead { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--paper-dim); }

/* ── Pills and banners (parts 3, 4, 31) ──────────────────────────────────── */
.dd-pill {
  display: inline-flex; align-items: center; flex: none; min-height: 26px; padding: 0 10px;
  border-radius: 13px; border: 1px solid transparent;
  font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap;
}
.dd-banner {
  min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 1px solid transparent;
  display: flex; align-items: center; gap: 10px;
}
.dd-banner-text { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.dd-tone-needs { color: var(--chili); background: var(--chili-10); border-color: var(--chili-28); }
.dd-tone-settled { color: var(--green-ink); background: var(--green-08); }
.dd-tone-info { color: var(--notice-ink); background: var(--notice-12); }
.dd-tone-off { color: var(--muted); background: var(--ink2); }
/* Why something waits, where nothing is lost (a shop paused, under the minimum): a visible notice, never grey. */
.dd-tone-warn { color: var(--warn-ink); background: var(--warn-wash); }
.dd-banner.dd-tone-warn { border-color: var(--warn); }
.dd-banner.dd-tone-settled { border-color: var(--green-08); }
.dd-banner.dd-tone-info { border-color: var(--notice-12); }
.dd-banner.dd-tone-off { border-color: var(--line); }

.dd-notices, .dd-status { padding: 0 16px; }
.dd-notices > *, .dd-status > * { margin-top: 12px; }
.dd-notice { align-items: flex-start; padding-right: 4px; }
.dd-notice-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dd-notice-body .dd-btn { align-self: flex-start; }
.dd-notice-lines { margin: 0; padding-left: 18px; font-size: 13px; line-height: 18px; font-weight: 500; }
.dd-notice-x { margin-top: -6px; color: inherit; }
.dd-call-card { align-items: center; }
.dd-call-line { margin: 0; font-size: 14px; line-height: 20px; }
.dd-stale { padding: 0 2px; }

/* ── EmptyState (part 15) ────────────────────────────────────────────────── */
.dd-empty { margin-top: 40px; text-align: center; }
.dd-empty-icon { color: var(--muted); display: flex; justify-content: center; }
.dd-empty-title { margin: 10px 0 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--paper); }
.dd-empty-sub { margin: 4px 0 0; font-size: 14px; line-height: 21px; color: var(--muted); }
.dd-empty-action { margin-top: 16px; display: flex; justify-content: center; }

/* ── Install offers ──────────────────────────────────────────────────────── */
.dd-foot { margin-top: 36px; text-align: center; }
.dd-stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dd-foot .dd-stores { justify-content: center; }

/* ── Sheets (part 13) ────────────────────────────────────────────────────── */
.dd-sheet-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  background: var(--backdrop); display: flex; align-items: flex-end; justify-content: center;
}
.dd-sheet {
  width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column;
  background: var(--card); color: var(--paper); border-radius: 18px 18px 0 0;
}
.dd-sheet-grab { flex: none; width: 38px; height: 4px; border-radius: 2px; background: var(--line-dash); margin: 10px auto 2px; }
.dd-sheet-head { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px 0 18px; }
.dd-sheet-title { flex: 1; margin: 10px 0 0; font-size: 20px; line-height: 26px; font-weight: 600; outline: none; overflow-wrap: anywhere; }
.dd-sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 18px 20px; }
.dd-sheet-bar {
  flex: none; padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--card);
}
.dd-sheet-error:not(:empty) { margin-top: 14px; }
.dd-bullets { margin: 4px 0 4px; padding-left: 20px; }
.dd-bullets li { margin: 6px 0; font-size: 16px; line-height: 24px; }

/* Choice groups: pick chips for one answer, check rows for several. */
.dd-group { margin-top: 20px; }
.dd-group-name { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.dd-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-pick {
  min-height: 44px; padding: 6px 14px; border-radius: 10px; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left;
  background: var(--card); border: 1px solid var(--line-dash); color: var(--paper);
  font-size: 14px; line-height: 19px;
}
.dd-pick.dd-on { border-color: var(--accent); background: var(--accent-14); box-shadow: inset 0 0 0 0.5px var(--accent); }
.dd-pick.dd-on .dd-pick-label { font-weight: 600; }
.dd-pick-sub { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--muted); }
.dd-checks { border-top: 1px solid var(--line); }
.dd-check-line { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.dd-check-row {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0;
  border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.dd-check-row:disabled { opacity: 0.45; cursor: default; }
.dd-check-box {
  flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-dash);
  display: inline-flex; align-items: center; justify-content: center;
}
.dd-check-box.dd-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dd-check-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dd-check-label { font-size: 16px; line-height: 22px; }
.dd-check-row.dd-on .dd-check-label { font-weight: 600; }
.dd-check-sub { font-size: 13px; line-height: 18px; color: var(--muted); }
.dd-check-value { flex: none; font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--muted); }

/* Stepper (part 30) */
.dd-stepper {
  display: inline-flex; align-items: center; min-height: 44px; flex: none;
  border: 1px solid var(--line-dash); border-radius: 10px; background: var(--card);
}
.dd-stepper-btn {
  width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dd-stepper-btn:disabled { color: var(--muted); opacity: 0.45; cursor: default; }
.dd-stepper-value { min-width: 28px; text-align: center; font-family: var(--font-mono); font-size: 16px; line-height: 22px; }

/* FormField (part 12): 16px in the field. */
.dd-field { margin-top: 20px; }
.dd-field-label { display: block; margin: 0 0 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); }
.dd-input {
  display: block; width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--line-dash); background: var(--card); color: var(--paper);
  font-size: 16px; line-height: 22px;
}
.dd-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 0.5px var(--accent); }
.dd-input::placeholder { color: var(--muted); opacity: 1; }
.dd-textarea { min-height: 72px; resize: vertical; }
.dd-field-hint { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--muted); }

/* ── PrimaryBar (part 11) ────────────────────────────────────────────────── */
.dd-bar {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--ink); border-top: 1px solid var(--line);
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
}
.dd-bar-note { margin: 0 0 10px; font-size: 13px; line-height: 18px; color: var(--muted); text-align: center; }
.dd-pair { display: flex; gap: 10px; align-items: stretch; }
.dd-pair-left { flex: 1 1 0; min-width: 0; }
.dd-pair-right { flex: 2 1 0; min-width: 0; display: flex; }
.dd-pair .dd-btn { min-height: 52px; border-radius: 26px; width: 100%; }
.dd-blocked { border-radius: 12px; background: var(--chili-06); border: 1px solid var(--chili-24); padding: 12px; }
.dd-blocked-note { margin: 0 0 10px; font-size: 13px; line-height: 18px; color: var(--chili); }

/* ── Your order ──────────────────────────────────────────────────────────── */
.dd-lines { display: flex; flex-direction: column; }
.dd-line { padding: 14px 0; border-bottom: 1px solid var(--line); }
.dd-line-top { display: flex; align-items: flex-start; gap: 12px; }
.dd-line-text { flex: 1 1 auto; min-width: 0; }
.dd-line-name { margin: 0; font-size: 16px; line-height: 21px; font-weight: 600; overflow-wrap: anywhere; }
.dd-line-sub { display: block; margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--paper-dim); overflow-wrap: anywhere; }
.dd-line-gone-note { margin: 4px 0 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--chili); }
.dd-line-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.dd-line-actions .dd-btn-quietDanger { padding-right: 0; }
.dd-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 4px; }
.dd-total-label { font-size: 16px; line-height: 24px; font-weight: 600; }
.dd-order-facts > * { margin-top: 10px; }

/* ── The table ───────────────────────────────────────────────────────────── */
.dd-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.dd-round { margin-top: 12px; }
.dd-round-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dd-round-title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; min-width: 0; }
.dd-round-who { font-weight: 400; color: var(--muted); }
.dd-round > .dd-caption { margin-top: 6px; }
.dd-round-lines { list-style: none; margin: 10px 0 0; padding: 0; }
.dd-round-line { display: flex; gap: 10px; padding: 4px 0; }
.dd-round-qty { flex: none; min-width: 32px; font-size: 14px; line-height: 21px; color: var(--muted); }
.dd-round-line-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dd-round-line-name { font-size: 15px; line-height: 21px; overflow-wrap: anywhere; }
.dd-round-note { margin-top: 8px; }
.dd-staff-note {
  display: block; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
  background: var(--notice-12); color: var(--notice-ink); font-size: 14px; line-height: 20px;
}
.dd-round-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; min-height: 40px; }

/* The install nudges (design 6.3): quiet, dismissible, never the filled one. */
.dd-nudge {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; padding: 12px 6px 12px 14px;
  border-radius: 12px; background: var(--ink2);
}
.dd-nudge-plain { background: transparent; border: 1px solid var(--line); padding-right: 14px; margin-top: 20px; }
.dd-nudge-text { flex: 1 1 auto; min-width: 0; }
.dd-nudge-line { margin: 0 0 4px; font-size: 14px; line-height: 20px; color: var(--paper); }
.dd-nudge .dd-btn-secondary { box-shadow: none; }

/* ── The bill: BandGroup (part 39) ───────────────────────────────────────── */
.dd-bill > .dd-banner { margin-top: 12px; }
.dd-band { margin-top: 16px; border-radius: 10px; background: var(--ink2); }
.dd-band-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; }
.dd-band-row + .dd-band-row { border-top: 1px solid var(--line); }
.dd-band-text { flex: 1 1 auto; min-width: 0; }
.dd-band-label { margin: 0; font-size: 17px; line-height: 24px; overflow-wrap: anywhere; }
.dd-band-sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.dd-bill > .dd-caption { margin-top: 10px; }
.dd-bill .dd-total-row { padding-left: 14px; padding-right: 14px; }

/* ── Your name, more ─────────────────────────────────────────────────────── */
.dd-name { padding-top: 24px; }
.dd-nav-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px;
  padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit;
  text-align: left; cursor: pointer;
}
.dd-nav-label { font-size: 17px; line-height: 24px; }
.dd-nav-value { font-size: 13px; line-height: 18px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-more-leave { margin-top: 16px; }

@media (min-width: 700px) {
  .dd-main { padding-left: 24px; padding-right: 24px; }
  .dd-head, .dd-notices, .dd-status { padding-left: 24px; padding-right: 24px; }
  .dd-sheet-backdrop { align-items: center; }
  .dd-sheet { border-radius: 18px; max-height: 86vh; }
}

@media (prefers-reduced-motion: reduce) {
  html.dd-app { scroll-behavior: auto; }
}