/* ============================================================
   Uber theme — photographer flow only.
   Source spec: uber/DESIGN.md (getdesign "uber").
   Black-and-white duet · pill (999px) on every interactive element ·
   16px flat cards · sentence-case 700 headlines · no second accent.
   Loaded LAST so it overrides app.css tokens + each page's <style>.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* periwinkle scale → mono (black + grayscale). Primary is pure black. */
  --pw-50:  #f3f3f3;
  --pw-100: #efefef;
  --pw-200: #e2e2e2;
  --pw-300: #d2d2d2;
  --pw-400: #4b4b4b;
  --pw-500: #000000;   /* the brand's only conversion colour */
  --pw-600: #282828;   /* hover = black-elevated */
  --pw-700: #000000;

  --bg:        #ffffff;
  --surface:   #ffffff;
  --surface-2: #efefef;   /* canvas-soft */
  --border:    #ececec;
  --border-2:  #e2e2e2;

  --text:     #000000;
  --text-2:   #5e5e5e;    /* body */
  --text-mut: #afafaf;    /* mute */

  /* no separate semantic palette — collapse to mono */
  --ok:#000000; --ok-bg:#efefef; --warn:#000000; --warn-bg:#efefef;
  --bad:#000000; --bad-bg:#efefef; --info:#000000; --info-bg:#efefef;

  --font: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
}

body { font-feature-settings: "ss01"; color: var(--text); }

/* Headlines: sentence-case, weight 700, NO tracking (the display voice). */
h1, h2, h3,
.text-display, .text-h1, .text-h2,
.ord-head h1, .order-head h1, .cf-hero h1, .ex-head h1 {
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

/* ── Pill: the single signature shape on every interactive element ── */
.btn {
  border-radius: 999px;
  font-weight: 600;
  height: 48px;
  padding: 0 22px;
  letter-spacing: 0;
}
.btn-primary { background: #000; color: #fff; border-color: #000; }
.btn-primary:hover  { background: #282828; border-color: #282828; }
.btn-primary:active { background: #000; }
.btn-secondary { background: #fff; color: #000; border: 1px solid var(--border-2); }
.btn-secondary:hover { background: #f3f3f3; }
.btn-ghost { border-radius: 999px; color: #000; }
.btn-danger { background: #efefef; color: #000; }

/* Inputs: soft gray fill, 8px, black focus ring (no blue glow). */
.input {
  background: #f2f2f2;
  border: 1px solid transparent;
  border-radius: 8px;
  height: 48px;
  font-weight: 500;
  color: #000;
}
.input:focus { background: #fff; border-color: #000; box-shadow: none; }
.input::placeholder { color: #afafaf; }
.field label { color: #5e5e5e; }

/* Cards: 16px, flat (Level 0). */
.card { border: 1px solid var(--border); border-radius: 16px; box-shadow: none; }

/* Chips → pills; "info"/featured = black, rest = soft gray. */
.chip { border-radius: 999px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.chip-info { background: #000; color: #fff; }
.chip-ok, .chip-warn, .chip-bad, .chip-neutral { background: #efefef; color: #000; }

/* Segmented controls → pill toggle; active = black. */
.rate-control { border-radius: 999px; border-color: var(--border-2); }
.rate-control input[type=radio]:checked + label { background: #000; color: #fff; }

/* ════════ order.html — tier chooser ════════ */
.tier-card { border-radius: 16px; box-shadow: none; }
.tier-card:hover { border-color: #000; box-shadow: none; transform: translateY(-2px); }
.tier-foot .btn { width: 100%; }
/* featured tier → polarity flip to black */
.tier-card.is-rec { border-color: #000; background: #000; }
.tier-card.is-rec .tier-card-head { background: #000; border-bottom-color: #282828; }
.tier-card.is-rec .tier-name { color: #fff; }
.tier-card.is-rec .spec-row { border-bottom-color: #282828; }
.tier-card.is-rec .spec-key { color: #9a9a9a; }
.tier-card.is-rec .spec-val { color: #fff; }
.tier-card.is-rec .chip-info { background: #fff; color: #000; }
.tier-card.is-rec .tier-foot .btn { background: #fff; color: #000; border-color: #fff; }
.tier-card.is-rec .tier-foot .btn:hover { background: #efefef; border-color: #efefef; }

.row-link { border-radius: 16px; box-shadow: none; }
.row-link:hover { border-color: #000; background: #fff; transform: none; }
.row-icon { border-radius: 999px; background: #efefef; color: #000; }
.row-link:hover .row-icon { background: #efefef; }
.row-link.is-primary { border-color: #000; }
.row-link.is-primary .row-icon { background: #000; color: #fff; }
.row-arrow, .row-link:hover .row-arrow { color: #000; }

/* ════════ order-form.html ════════ */
.seg { border-radius: 999px; border-color: var(--border-2); padding: 3px; gap: 2px; }
.seg button { border: none; border-radius: 999px; color: #5e5e5e; }
.seg button:hover { background: #f3f3f3; color: #000; }
.seg button.active { background: #000; color: #fff; }
.addon { border-radius: 999px; }
.addon:hover { border-color: #000; }
.addon.on { border-color: #000; background: #f3f3f3; }
.addon input { accent-color: #000; }
.check input { accent-color: #000; }
.summary { box-shadow: none; }
.sum-ic.edit:hover { color: #000; border-color: #000; }
.sum-ic.rm:hover  { color: #000; border-color: #000; }
.flash { animation: flashring-u .9s ease; }
@keyframes flashring-u { 0% { box-shadow: 0 0 0 3px #000; } 100% { box-shadow: 0 0 0 3px transparent; } }

/* ════════ order-confirm.html ════════ */
.cf-tick { background: #000; color: #fff; }
.opt { border-radius: 12px; }
.opt:hover { border-color: #000; }
.opt.sel { border-color: #000; background: #f3f3f3; color: #000; box-shadow: none; }
.opt.sel::after { color: #000; }

/* ════════ explore.html ════════ */
.tab-btn.active { color: #000; border-bottom-color: #000; }
.ex-card { border-radius: 16px; }
.ex-thumb { background: #efefef; }
.heart.on { color: #000; border-color: #000; }
.ex-cta { color: #000; }

/* alerts → mono */
.alert-error { background: #efefef; color: #000; border-color: #e2e2e2; }
.alert-ok    { background: #efefef; color: #000; border-color: #e2e2e2; }
.alert-info  { background: #efefef; color: #000; border-color: #e2e2e2; }