/* ══════════════════════════════════════════════════════════════════
   POLISH — the layer that turns the prototype from "hack-day"
   into "product". Nothing here changes semantics or state; every rule
   sharpens a detail that a real product would never get wrong.

   Loaded AFTER components.css so it overrides. Kept separate so the
   original component library stays readable, and so the polish delta
   is one file to review.
   ══════════════════════════════════════════════════════════════════ */

/* ── TOKENS the polish layer needs ────────────────────────────────── */
:root{
  /* Warmer bone-white app background — a flat white looks like Notion. */
  --app-bg:       #F6F3EE;
  --app-bg-tint:  #FDFCF9;
  --surface:      #FFFFFF;
  --surface-2:    #FAF7F2;
  --border:       #E9E4DA;
  --border-soft:  rgba(19,28,59,.06);
  /* One tuned shadow ramp — no candy-coloured drop-shadows anywhere. */
  --sh-1: 0 1px 2px rgba(19,28,59,.05), 0 1px 3px rgba(19,28,59,.04);
  --sh-2: 0 4px 12px rgba(19,28,59,.06), 0 2px 4px rgba(19,28,59,.04);
  --sh-3: 0 12px 28px rgba(19,28,59,.10), 0 4px 8px rgba(19,28,59,.05);
  /* Primary button gets ONE soft brand-tinted glow, not the old red slab */
  --sh-btn: 0 6px 16px rgba(235,86,39,.22), 0 2px 4px rgba(19,28,59,.08);
  --sh-btn-dark: 0 6px 16px rgba(19,28,59,.18), 0 2px 4px rgba(19,28,59,.08);
  /* Ease used everywhere so motion has one voice */
  --ease-out: cubic-bezier(.16,.84,.36,1);
}

body{background:var(--app-bg);
  background-image:
    radial-gradient(1200px 620px at 12% -8%,#FFFFFF 0%,transparent 60%),
    radial-gradient(900px 480px at 92% -6%,rgba(235,86,39,.06) 0%,transparent 60%);
}

/* ── ICONS — the base class every SVG in icons.js wears ───────────── */
.ic{display:inline-block;vertical-align:middle;flex-shrink:0}
.iccircle{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(180deg,#FDFCF8,#F6F2E9);
  border:1px solid var(--border);color:var(--secondary)}

/* ── TYPE — tighter tracking on headings, confident hero ──────────── */
.t-hero{font-weight:200;letter-spacing:-.028em;line-height:1.05;
  color:var(--secondary);font-size:34px}
.t-h1{font-weight:300;letter-spacing:-.02em}
.t-h2{font-weight:500;letter-spacing:-.012em}
.t-h3{font-weight:500;letter-spacing:-.008em}
.appbar__title{font-weight:500;letter-spacing:-.01em}

/* ── BUTTON — refined shadow, cleaner press, real disabled ────────── */
.btn{background:var(--primary);box-shadow:var(--sh-btn);
  font-weight:500;letter-spacing:-.005em;transition:transform 120ms var(--ease-out),
  box-shadow 160ms var(--ease-out),background 120ms}
.btn:hover{background:#E24E20;box-shadow:0 8px 22px rgba(235,86,39,.28),0 2px 4px rgba(19,28,59,.08)}
.btn:active{transform:scale(.985);box-shadow:0 3px 10px rgba(235,86,39,.22)}
.btn--dark{background:var(--secondary);box-shadow:var(--sh-btn-dark)}
.btn--dark:hover{background:#0E1531}
.btn--ghost{background:var(--surface);color:var(--secondary);
  border:1px solid var(--border);box-shadow:var(--sh-1)}
.btn--ghost:hover{background:var(--surface-2);border-color:#DAD3C4}
.btn--text{background:transparent;box-shadow:none;color:var(--primary);font-weight:500}
.btn--text:hover{background:rgba(235,86,39,.06)}
.btn--disabled,.btn[disabled]{background:#EEE8DD;color:#B9B2A3;box-shadow:none}

/* ── FIELDS — softer border, subtle focus glow ────────────────────── */
.field__input,.field select{border-color:var(--border);background:var(--surface);
  transition:border-color 140ms,box-shadow 140ms;box-shadow:var(--sh-1)}
.field__input:focus,.field select:focus{border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(235,86,39,.10)}
.search{border-color:var(--border);box-shadow:var(--sh-1)}

/* ── APPBAR back button — feels like a chip, not a button ─────────── */
.appbar__back{background:var(--surface);border-color:var(--border-soft);
  box-shadow:var(--sh-1);transition:transform 120ms var(--ease-out)}
.appbar__back:hover{transform:translateX(-1px);background:var(--surface-2)}

/* ── CARDS — subtle borders and elevation, hover-only shadow ──────── */
.card{border-color:var(--border);box-shadow:var(--sh-1);
  transition:border-color 160ms,transform 160ms var(--ease-out),box-shadow 160ms}
.card:hover{border-color:#DAD3C4}
.card--on{border-color:var(--primary);box-shadow:0 0 0 3px rgba(235,86,39,.10),var(--sh-2)}
.card--pad0{overflow:hidden}
.card--pad0:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.card--flat{background:var(--surface-2);border-color:var(--border-soft)}

/* ── LIST ROW — proper focus / hover ──────────────────────────────── */
.row{border-color:var(--border-soft)}
.row:hover{background:var(--surface-2)}
.row__glyph{background:linear-gradient(180deg,#FDFCF8,#F5F0E5);
  border:1px solid var(--border);color:var(--secondary)}

/* ── CHIPS — quieter, more product-like ───────────────────────────── */
.chip{background:#F0EBDF;color:var(--chip-label);font-weight:500;
  letter-spacing:.01em;padding:4px 10px;border:1px solid transparent}
.chip--ok{background:rgba(144,208,193,.20);color:#0E6B57;
  border-color:rgba(144,208,193,.45)}
.chip--info{background:rgba(94,160,215,.10);color:#245A85;
  border-color:rgba(94,160,215,.28)}
.chip--warn{background:#FDECDD;color:#8A3A14;border-color:#F8D5B8}
.chip--muted{background:#EEE8DC;color:#6B7280;border-color:transparent}

/* ── SELECTOR ("Eating as") — subtler, still visible ──────────────── */
.selector{border-width:1px;padding:6px 12px 6px 6px;box-shadow:var(--sh-1);
  transition:box-shadow 140ms,transform 120ms var(--ease-out)}
.selector:hover{box-shadow:var(--sh-2)}
.selector__av{background:linear-gradient(180deg,var(--secondary),#1E2B5C);
  font-weight:600;letter-spacing:.02em}

/* ── PRODUCT — image radius, dark navy add button, better price ───── */
.product{border-color:var(--border);box-shadow:var(--sh-1);
  transition:transform 160ms var(--ease-out),box-shadow 160ms,border-color 160ms}
.product:hover{border-color:#DAD3C4;box-shadow:var(--sh-2);transform:translateY(-1px)}
.product__img{border-radius:14px;box-shadow:0 1px 2px rgba(19,28,59,.06)}
.product__name{font-weight:500;letter-spacing:-.005em}
.product__price{color:var(--secondary);font-weight:600;font-size:14.5px}
.product__price small{color:var(--text-muted);font-weight:400;margin-left:6px;
  text-decoration:line-through}
.product__add{background:var(--secondary);color:#fff;
  box-shadow:var(--sh-btn-dark);transition:transform 120ms var(--ease-out),
  background 120ms}
.product__add:hover{background:#0E1531;transform:scale(1.06)}
.product__add:active{transform:scale(.94)}
.product--warn{background:#FFFCFA;border-color:#F5D8BE}

/* ── EATER BAR — floats on a subtle line, not a hard divider ──────── */
.eaterbar{border-bottom-color:var(--border-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.86));
  backdrop-filter:blur(10px) saturate(1.1)}

/* ── TABS — refined pill, softer inactive ─────────────────────────── */
.tab{background:#F0EBDF;color:var(--chip-label);font-weight:500;padding:8px 14px;
  transition:background 140ms,color 140ms}
.tab:hover{background:#E7E1D2}
.tab--on{background:var(--secondary);color:#fff}

/* ── HOME HEADER — soft edge into the body, not a hard cut ────────── */
.homehead{background:linear-gradient(180deg,#111935 0%,#171F41 100%);
  padding-bottom:34px;position:relative}
.homehead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:24px;background:linear-gradient(180deg,transparent,var(--app-bg-tint))}
.homebody{background:var(--app-bg-tint);border-radius:24px 24px 0 0;
  margin-top:-20px;box-shadow:0 -1px 0 var(--border-soft) inset;position:relative}
.placechip{color:#fff}
.placechip__lbl{color:rgba(255,255,255,.55);font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;font-size:10px}
.placechip__nm{font-weight:500;letter-spacing:-.01em}
.search--head{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
  box-shadow:none;backdrop-filter:blur(4px)}
.search--head .search__ph,.search--head input{color:rgba(255,255,255,.78)}
.search--head input::placeholder{color:rgba(255,255,255,.55)}
.search--head .muted{color:rgba(255,255,255,.55)}
.homehead__tag{color:rgba(255,255,255,.55);font-weight:500;letter-spacing:.02em}

/* ── CATEGORY TILES — real icons, not emoji; subtle depth ─────────── */
.cats{gap:10px}
.cat{background:linear-gradient(180deg,#FFFFFF,#FBF7EF);
  border:1px solid var(--border);box-shadow:var(--sh-1);
  padding:14px 6px 12px;transition:transform 140ms var(--ease-out),
  border-color 140ms,box-shadow 140ms}
.cat:hover{transform:translateY(-1px);box-shadow:var(--sh-2);border-color:#DAD3C4}
.cat--on{border-color:var(--primary);background:linear-gradient(180deg,#FFF7F1,#FFEFE4);
  box-shadow:0 0 0 3px rgba(235,86,39,.10),var(--sh-1)}
.cat--on .cat__ic{color:var(--primary)}
.cat__ic{color:var(--secondary);opacity:.92;line-height:0}
.cat__nm{font-weight:500;color:var(--secondary);letter-spacing:-.005em;
  font-size:11px;margin-top:4px}
.cat__n{color:var(--text-muted);font-weight:500;letter-spacing:.02em}

/* ── SERVICES STRIP (Plans, Bills) — refined ──────────────────────── */
.services{padding-top:6px}
.service{background:linear-gradient(180deg,#FBF7EE,#F5EFDF);
  border:1px solid var(--border);box-shadow:var(--sh-1)}
.service:hover{border-color:#D8D0BF;transform:translateY(-1px)}
.service__ic{color:var(--secondary);opacity:.85;line-height:0}
.service__nm{color:var(--secondary);letter-spacing:-.005em}

/* ── IN-HOUSE CARD (the office recommended kitchen) — richer ─────── */
.inhouse{background:linear-gradient(140deg,#131C3B 0%,#1B2650 60%,#2A3A82 100%);
  padding:18px 20px;box-shadow:0 12px 28px rgba(19,28,59,.24),
  0 4px 8px rgba(19,28,59,.14);
  border-radius:22px;position:relative;overflow:hidden}
.inhouse::before{content:"";position:absolute;inset:0;
  background:radial-gradient(400px 200px at 100% 0%,rgba(255,255,255,.10),transparent 60%);
  pointer-events:none}
.inhouse__ic{background:linear-gradient(180deg,rgba(255,255,255,.10),
  rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);
  color:#fff;line-height:0}
.inhouse__badge{background:linear-gradient(90deg,#F1A137,#EB5627);
  letter-spacing:.06em;font-size:9.5px;padding:4px 10px;font-weight:600;
  box-shadow:0 2px 6px rgba(235,86,39,.35)}

/* ── OPTIONS (radios) — subtler ───────────────────────────────────── */
.opt{border-color:var(--border);box-shadow:var(--sh-1);
  transition:border-color 140ms,background 140ms}
.opt:hover{border-color:#DAD3C4;background:var(--surface-2)}
.opt--on{border-color:var(--primary);background:#FFF9F4}
.opt__t{letter-spacing:-.005em}

/* ── BANNERS — quieter, more UI-kit than alert ────────────────────── */
.banner{border-radius:12px;padding:12px 14px;font-weight:400;line-height:1.55}
.banner--info{background:rgba(94,160,215,.08);color:#245A85;
  border-color:rgba(94,160,215,.22)}
.banner--ok{background:rgba(144,208,193,.16);color:#0E6B57;
  border-color:rgba(144,208,193,.32)}
.banner--warn{background:#FDECDD;color:#8A3A14;border-color:#F8D5B8}

/* ── BOTTOM NAV — real icons, subtle divider ──────────────────────── */
.bottomnav{border-top-color:var(--border-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,1));
  backdrop-filter:blur(10px)}
.bottomnav button{color:var(--text-muted);gap:4px}
.bottomnav button span:first-child{line-height:0}
.bottomnav .on{color:var(--primary)}

/* ── SIZE CARD (uniforms) & SIZES ─────────────────────────────────── */
.sizecard{box-shadow:var(--sh-1)}
.sz{background:var(--surface);box-shadow:var(--sh-1);transition:all 140ms}
.sz:hover{border-color:#DAD3C4}
.sz--on{background:#FFF9F4}

/* ── LOANS ────────────────────────────────────────────────────────── */
.loans{border-radius:14px}

/* ── LANDING — proper hero rhythm, no giant dead gap ──────────────── */
.landing-wrap{display:flex;flex-direction:column;height:100%;padding:22px 20px 26px}
.landing-hero{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:12px 0}
.logo-mark{width:66px;height:66px;border-radius:20px;
  background:linear-gradient(180deg,#FFF6EE,#FEE7D3);
  border:1px solid #F5D5B6;box-shadow:var(--sh-2);
  display:grid;place-items:center;margin-bottom:22px}
.logo-mark svg{width:38px;height:auto}
.landing-headline{font-size:34px;font-weight:200;letter-spacing:-.028em;
  line-height:1.05;color:var(--secondary);margin:0}
.landing-headline em{font-style:normal;background:linear-gradient(90deg,#EB5627,#F1A137);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:400}
.landing-sub{margin:14px auto 0;max-width:280px;color:var(--text-muted);
  font-size:14px;line-height:1.55}
.landing-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.landing-note{color:var(--text-muted);font-size:11.5px;text-align:center;
  margin-top:2px;line-height:1.55}

/* ── ITEM DETAIL BAR — floats cleanly, subtle glass ───────────────── */
.itembar{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-color:var(--border);box-shadow:0 -1px 0 var(--border-soft),
  0 10px 22px rgba(19,28,59,.10)}

/* ── STATUS BAR icons colour to match the header they sit on ─────── */
.statusbar{color:var(--secondary)}

/* ── SIDEBAR (demo chrome) — Linear/Notion-esque, not Bootstrap ──── */
body{--rail-bg:#FFFFFF}
.rail h1{font-weight:500;letter-spacing:-.01em;font-size:18px}
.rail .tag{color:#8B8578;line-height:1.55}
.railsec{color:#A9A290;letter-spacing:.08em;font-weight:600;font-size:9.5px;
  text-transform:uppercase}
.railbtn{background:var(--rail-bg);border:1px solid var(--border);
  border-radius:10px;box-shadow:none;padding:9px 12px;margin-bottom:4px;
  transition:transform 120ms var(--ease-out),border-color 120ms,background 120ms}
.railbtn:hover{transform:none;border-color:#DAD3C4;background:var(--surface-2)}
.railbtn.on{background:var(--secondary);border-color:var(--secondary);color:#fff}
.railbtn .n{opacity:.45;font-variant-numeric:tabular-nums}
.playbtn{background:linear-gradient(180deg,#EB5627,#D8471A);border:1px solid #C43D14;
  box-shadow:var(--sh-btn);padding:13px;font-weight:500;letter-spacing:-.005em}
.playbtn:hover{background:linear-gradient(180deg,#E24E20,#CE4116)}
.states button{background:var(--surface);border-color:var(--border);
  box-shadow:var(--sh-1);font-weight:500;padding:6px 11px}
.states button:hover{background:var(--surface-2)}
.states button.on{background:var(--secondary);border-color:var(--secondary);color:#fff}
.railfoot{border-top-color:var(--border)}
.railfoot button{background:var(--surface);border-color:var(--border);
  box-shadow:var(--sh-1);font-weight:500}
.railfoot button.on{background:var(--secondary);border-color:var(--secondary);color:#fff}
.railnote{color:#8B8578}

/* ── PHONE FRAME — deeper realism ─────────────────────────────────── */
.phone{background:linear-gradient(180deg,#0E0E10,#050506);
  box-shadow:0 40px 84px rgba(19,28,59,.32),
             0 12px 24px rgba(19,28,59,.20),
             0 0 0 1.5px rgba(255,255,255,.18) inset,
             0 0 0 3px rgba(0,0,0,.6) inset}

/* ── PLACE CHIPS ("Add another place") in My people ──────────────── */
.pchip{background:rgba(144,208,193,.20);color:#0E6B57;font-weight:500;
  border:1px solid rgba(144,208,193,.40);letter-spacing:-.005em}
.pchip--soft{background:#F0EBDF;color:var(--ink-muted);border-color:transparent}
.linkbtn{font-weight:500;letter-spacing:-.005em}

/* ── STEPPER — tighter, on-brand ──────────────────────────────────── */
.stepper button{background:var(--surface);border-color:var(--border);
  color:var(--secondary);box-shadow:var(--sh-1);transition:all 120ms var(--ease-out)}
.stepper button:hover{border-color:var(--primary);color:var(--primary)}
.stepper__n{font-variant-numeric:tabular-nums;font-weight:600}

/* ── TOAST — quieter ──────────────────────────────────────────────── */
.toast{background:rgba(15,20,45,.94);backdrop-filter:blur(10px);
  box-shadow:0 12px 24px rgba(19,28,59,.24);font-weight:500;letter-spacing:-.003em}

/* ── GUIDE CAPTION (dev annotation) — slightly less loud ─────────── */
.guide{background:rgba(15,20,45,.94);backdrop-filter:blur(10px);
  box-shadow:0 12px 28px rgba(19,28,59,.22);border-radius:14px}

/* ── DENSITY — small consistent typographic corrections ──────────── */
.t-caption{font-weight:400;letter-spacing:0}
.t-micro{font-weight:400;letter-spacing:.01em}
.sec{letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;color:#8B8578;
  font-weight:600}

/* ── MAP OVERLAY — softer ─────────────────────────────────────────── */
.mapsheet{border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgba(19,28,59,.10)}
.map__fab{background:var(--surface);box-shadow:var(--sh-2);color:var(--secondary)}
.map__fab:hover{background:var(--surface-2)}
.mapbar{background:var(--surface);border-top-color:var(--border-soft);
  box-shadow:0 -8px 24px rgba(19,28,59,.08)}
.map__grp{color:#A9A290;letter-spacing:.08em;font-weight:600;font-size:9.5px}
.map__callout{background:rgba(15,20,45,.94);backdrop-filter:blur(8px);
  box-shadow:var(--sh-2);border-radius:10px;padding:8px 12px;font-weight:500}

/* ── PLACE-PICKER SEARCH BAR at the top of the map ────────────────── */
.maptop{background:linear-gradient(180deg,var(--app-bg),transparent);
  padding-bottom:14px}
.search--map{background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--sh-2)}

/* ── DESIGN SYSTEM PAGE — quick polish so it doesn't look prototype */
body:has(header h1) header{background:linear-gradient(140deg,#131C3B,#1E2B5C)}

/* ── OTP boxes — clearer focus and slightly premium ───────────────── */
.otp__box{background:var(--surface);box-shadow:var(--sh-1);
  border-color:var(--border);font-weight:500;transition:all 140ms}
.otp__box:focus{border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(235,86,39,.10)}

/* ── SUCCESS TICK — softer green, no wedding-cake feel ────────────── */
.tick{background:linear-gradient(180deg,rgba(144,208,193,.30),
  rgba(144,208,193,.16));color:#0E6B57;
  box-shadow:inset 0 0 0 1px rgba(144,208,193,.50),var(--sh-1)}

/* ── ORDER TRACK — connector line, refined dots ───────────────────── */
.track{border-radius:16px}
.track__step::before{background:var(--border)}
.track__step--on::before{background:var(--accent)}
.track__dot{background:var(--surface);border:2px solid var(--border);
  box-shadow:var(--sh-1)}
.track__step--on .track__dot{background:var(--accent);border-color:var(--accent)}
.track__step:last-of-type.track__step--on .track__dot{background:var(--ok-fg);
  border-color:var(--ok-fg)}

/* ── WAITING BASKET — softer, less dashed-alarming ────────────────── */
.waiting{border:1px solid #F5D5B6;background:linear-gradient(180deg,#FFF6EE,#FFEBDA);
  border-radius:14px}

/* ── SEG (Account language switch) ────────────────────────────────── */
.seg{background:#EEE8DC}
.seg__b--on{box-shadow:var(--sh-1)}
.switch{background:#DAD3C4}
.switch--on{background:var(--ok-fg)}

/* ── FLIGHT MAP CARD ──────────────────────────────────────────────── */
.mapsuggest{background:var(--surface);border-color:var(--border);box-shadow:var(--sh-2)}

/* ── DESIGN SYSTEM ORNAMENTATION ──────────────────────────────────── */
.sw{box-shadow:var(--sh-1)}

/* Small screens — keep the phone taking the stage */
@media(max-width:1080px){.rail .playbtn{max-width:390px;margin:0 auto 6px}}