/* chibiboba bezorger — rider app (DL-22 base; DL-23 adds the detail/vandaag screens, dark
   mode polish). One-hand phone use: 17px body, 48px+ targets, 56px primary. Brand tokens
   from chibiboba.be (cream / brown), RixToyStory for the wordmark and buttons. */
@font-face { font-family: 'RixToyStory_Pro'; src: url('RixToyStory_Pro.woff2') format('woff2'); font-display: swap; }
:root {
  --cream:#FDF6EF; --cream-deep:#F5EAD8; --surface:#FFFCF8; --border:#EAD9C8; --tan:#D3B9A8;
  --ink:#3D2817; --ink-soft:#6B4A34; --muted:#8a6248; --brown:#81573F; --brown-press:#6d4834;
  --good:#4E8C5A; --good-soft:#E4EFE5; --warn:#B87A34; --warn-soft:#F7ECD9; --crit:#BC5140; --crit-soft:#F7E4DE;
  --display:'RixToyStory_Pro', 'Trebuchet MS', sans-serif; --sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --shadow:0 1px 2px rgba(61,40,23,.06), 0 8px 24px rgba(61,40,23,.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cream:#1E1611; --cream-deep:#2A201A; --surface:#261C16; --border:#3D2F26; --tan:#5A463A;
    --ink:#F3EADF; --ink-soft:#D8C9B8; --muted:#A6937E; --brown:#D19A66; --brown-press:#E4B482;
    --good:#6FBF7E; --good-soft:#25331F; --warn:#D69A4E; --warn-soft:#3A2E1B; --crit:#E4715C; --crit-soft:#3C221D;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5); }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--cream); color:var(--ink); font:400 17px/1.4 var(--sans); min-height:100vh; padding-bottom:env(safe-area-inset-bottom); }
a { color:var(--brown); }
button { font:inherit; }
.rd-wordmark { font-family:var(--display); font-size:24px; color:var(--brown); letter-spacing:.3px; }
.rd-sub { font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }

/* ── login ── */
.rd-login-body { display:grid; place-items:center; padding:24px 16px; }
.rd-login { width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:28px 22px; box-shadow:var(--shadow); }
.rd-brand { display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:22px; }
.rd-brand .rd-wordmark { font-size:32px; }
.rd-form { display:grid; gap:14px; }
.rd-field { display:grid; gap:6px; font-size:14px; color:var(--muted); }
.rd-field input { width:100%; min-height:52px; border:2px solid var(--tan); border-radius:14px; padding:0 14px; font-size:17px; color:var(--ink); background:var(--surface); }
.rd-field input:focus { outline:none; border-color:var(--brown); }
.rd-check { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted); }
.rd-check input { width:20px; height:20px; margin-top:1px; accent-color:var(--brown); }
.rd-error { margin:0; padding:10px 12px; border-radius:12px; background:var(--crit-soft); color:var(--crit); font-weight:600; font-size:15px; }
.rd-help { margin:18px 0 0; font-size:13px; color:var(--muted); text-align:center; }

/* ── buttons ── */
.rd-btn { min-height:56px; border-radius:16px; border:2px solid var(--border); background:var(--surface); color:var(--ink); font:400 19px var(--display); cursor:pointer; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; }
.rd-btn:active { transform:scale(.98); }
.rd-btn:disabled { opacity:.5; }
.rd-btn--primary { background:var(--brown); border-color:var(--brown); color:#fff; }
.rd-btn--good { background:var(--good); border-color:var(--good); color:#fff; }
.rd-btn--ghost { background:transparent; }
.rd-btn--danger { color:var(--crit); }
.rd-btn--sm { min-height:44px; font-size:16px; width:auto; }

/* ── app shell ── */
.rd-top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border); padding-top:calc(12px + env(safe-area-inset-top)); }
.rd-me { margin-left:auto; font-weight:700; color:var(--ink-soft); font-size:15px; }
.rd-top-link { font-size:14px; }
.rd-main { padding:14px 16px 24px; display:grid; gap:14px; max-width:560px; margin:0 auto; }
.rd-loading, .rd-empty { text-align:center; color:var(--muted); font-weight:600; padding:32px 0; }
.rd-empty strong { display:block; font-family:var(--display); font-size:22px; color:var(--ink); margin-bottom:4px; }
.rd-banner { padding:10px 14px; border-radius:14px; background:var(--crit-soft); color:var(--crit); font-weight:700; font-size:15px; }
.rd-banner[hidden] { display:none; }
.rd-section { font-family:var(--display); font-size:18px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; margin:6px 0 -4px; }
.rd-section .n { font:700 13px var(--sans); background:var(--cream-deep); border-radius:999px; padding:2px 9px; }
.rd-summary { display:flex; justify-content:space-between; font-size:15px; color:var(--muted); font-weight:600; }

/* ── delivery card ── */
.rd-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }
.rd-card.is-new { animation:rd-pulse 1.4s ease-out 3; }
@keyframes rd-pulse { 0%,100% { box-shadow:var(--shadow); } 50% { box-shadow:0 0 0 5px rgba(129,87,63,.25), var(--shadow); } }
.rd-card-head { display:flex; align-items:center; gap:10px; padding:12px 16px 4px; }
.rd-no { font-family:var(--display); font-size:22px; }
.rd-chip { font-size:12.5px; font-weight:800; padding:4px 10px; border-radius:999px; background:var(--cream-deep); color:var(--ink-soft); }
.rd-chip--paid { background:var(--good-soft); color:var(--good); }
.rd-chip--cash { background:var(--crit-soft); color:var(--crit); }
.rd-chip--warn { background:var(--warn-soft); color:var(--warn); }
.rd-chip--kitchen { background:var(--warn-soft); color:var(--warn); }
.rd-when { margin-left:auto; font-size:14px; font-weight:800; color:var(--muted); white-space:nowrap; }
.rd-when.is-soon { color:var(--warn); } .rd-when.is-late { color:var(--crit); }
.rd-addr { padding:6px 16px 10px; }
.rd-addr-line { font-size:19px; font-weight:800; line-height:1.25; }
.rd-addr-sub { font-size:15px; color:var(--muted); font-weight:600; margin-top:2px; }
.rd-instr { margin:8px 16px 0; padding:10px 12px; border-radius:12px; background:var(--warn-soft); color:var(--warn); font-weight:700; font-size:15px; }
.rd-cust { display:flex; align-items:center; gap:8px; padding:8px 16px 0; font-size:15px; color:var(--ink-soft); font-weight:600; }
.rd-money { padding:8px 16px 0; font-size:15px; color:var(--muted); font-weight:600; }
.rd-money b { font-family:var(--display); font-size:22px; color:var(--crit); font-weight:400; }
.rd-money.is-paid b { color:var(--good); }
.rd-items { margin:8px 16px 0; }
.rd-items summary { font-size:14px; font-weight:700; color:var(--muted); cursor:pointer; min-height:36px; display:flex; align-items:center; }
.rd-items ul { list-style:none; margin:4px 0 0; padding:0; font-size:15px; }
.rd-items li { padding:4px 0; border-top:1px solid var(--border); }
.rd-items li.is-made { color:var(--muted); }
.rd-items .q { font-weight:800; color:var(--brown); }
.rd-actions { display:grid; gap:8px; padding:14px 16px 16px; }
.rd-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rd-link { min-height:56px; border-radius:16px; border:2px solid var(--border); background:var(--cream-deep); color:var(--ink); text-decoration:none; font:400 18px var(--display); display:flex; align-items:center; justify-content:center; gap:8px; }
.rd-problem { margin:8px 16px 0; padding:10px 12px; border-radius:12px; background:var(--crit-soft); color:var(--crit); font-weight:700; font-size:15px; }
.rd-done-line { padding:10px 16px 14px; font-size:15px; color:var(--good); font-weight:700; }

/* ── sheet ── */
.rd-sheet-ov { position:fixed; inset:0; background:rgba(30,20,12,.5); display:grid; place-items:end center; z-index:20; padding:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
.rd-sheet { width:100%; max-width:520px; background:var(--surface); border-radius:22px; padding:20px 18px 14px; box-shadow:var(--shadow); }
.rd-sheet h3 { margin:0 0 12px; font:400 22px var(--display); color:var(--ink); }
.rd-sheet p { margin:0 0 14px; font-size:16px; }
.rd-sheet-reasons { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.rd-reason { min-height:44px; padding:0 14px; border-radius:999px; border:2px solid var(--border); background:var(--surface); color:var(--ink); font-size:15px; font-weight:700; }
.rd-reason.is-on { background:var(--brown); border-color:var(--brown); color:#fff; }
.rd-sheet textarea { width:100%; min-height:72px; border:2px solid var(--tan); border-radius:14px; padding:10px 12px; font:inherit; font-size:16px; color:var(--ink); background:var(--surface); margin-bottom:10px; }
.rd-sheet textarea.is-invalid { border-color:var(--crit); }
.rd-sheet-btns { display:grid; gap:8px; }
.rd-toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--ink); color:var(--cream); padding:10px 16px; border-radius:999px; font-weight:700; font-size:15px; z-index:30; max-width:92vw; box-shadow:var(--shadow); }
@media (prefers-reduced-motion: reduce) { .rd-card.is-new { animation:none; } .rd-btn:active { transform:none; } }

/* ── DL-23: explicit dark theme (menu › thema) ── */
:root[data-theme="dark"] { --cream:#1E1611; --cream-deep:#2A201A; --surface:#261C16; --border:#3D2F26; --tan:#5A463A;
  --ink:#F3EADF; --ink-soft:#D8C9B8; --muted:#A6937E; --brown:#D19A66; --brown-press:#E4B482;
  --good:#6FBF7E; --good-soft:#25331F; --warn:#D69A4E; --warn-soft:#3A2E1B; --crit:#E4715C; --crit-soft:#3C221D;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5); }

/* ── DL-23: tabs, detail, vandaag, menu, offline ── */
body { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
.rd-tabs { position:fixed; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(3, 1fr); background:var(--surface); border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom); z-index:10; }
.rd-tab { min-height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none; color:var(--muted); font:700 12px var(--sans); }
.rd-tab.is-on { color:var(--brown); }
.rd-tab-i { font-size:20px; line-height:1; }
.rd-card-open { display:block; color:inherit; text-decoration:none; }
.rd-card-open:focus-visible { outline:3px solid var(--brown); outline-offset:-3px; border-radius:20px; }
.rd-cust { justify-content:space-between; }
.rd-cash-mini { font-weight:800; color:var(--crit); }
.rd-paid-mini { font-weight:800; color:var(--good); }
.rd-chip--queued { background:var(--cream-deep); color:var(--muted); border:1px dashed var(--tan); }
.rd-back { display:inline-flex; align-items:center; min-height:44px; color:var(--brown); font:400 18px var(--display); text-decoration:none; }
.rd-card--detail .rd-addr--big .rd-addr-line { font-size:24px; }
.rd-times { display:flex; flex-wrap:wrap; gap:8px 16px; padding:10px 16px 0; font-size:13px; color:var(--muted); font-weight:600; }
.rd-times b { color:var(--ink); }
.rd-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rd-stats > div { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:14px; display:grid; gap:2px; }
.rd-stats b { font:400 28px var(--display); color:var(--brown); }
.rd-stats span { font-size:13px; color:var(--muted); font-weight:600; }
.rd-summary a { text-decoration:none; font-weight:700; }
.rd-menu { display:grid; gap:10px; }
.rd-menu-row { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:12px 14px; font-size:15px; font-weight:600; color:var(--ink-soft); }
.rd-menu-row .rd-btn { text-decoration:none; }
.rd-seg { display:inline-flex; border:2px solid var(--border); border-radius:999px; overflow:hidden; }
.rd-seg button { min-height:40px; padding:0 12px; border:0; background:transparent; color:var(--ink-soft); font:700 14px var(--sans); }
.rd-seg button[aria-pressed="true"] { background:var(--brown); color:#fff; }
.rd-banner--soft { background:var(--warn-soft); color:var(--warn); }
.rd-link.is-off { opacity:.5; }