/* ──────────────────────────────────────────────────────────────
   Shared pieces: button, chip, segmented control, card, list row,
   search field, photo placeholder, halal badge, stars, switch, sheet.
   ────────────────────────────────────────────────────────────── */

/* ── Button ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-6);
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.btn--block { width: 100%; }
.btn { white-space: nowrap; }
/* Saved and waiting to navigate: looks normal, ignores taps. */
.btn.is-done { pointer-events: none; }
.btn--primary { background: var(--c-chilli); color: var(--c-on-brand); }
.btn--primary:active { background: var(--c-chilli-deep); }
.btn--go { background: var(--c-pandan); color: var(--c-on-brand); }
.btn--go:active { background: var(--c-pandan-deep); }
.btn--quiet { background: var(--c-surface-sunk); color: var(--c-kicap); }
.btn--text {
  min-height: var(--tap-min);
  padding: 0 var(--sp-2);
  background: none;
  color: var(--c-kicap-2);
  font-weight: var(--fw-semibold);
}

/* Round icon button (back, close). */
.icon-btn {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-left: calc(var(--sp-2) * -1);
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-kicap);
}
.icon-btn svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn--light { color: var(--c-on-brand); }

/* ── Chip (filters, tags) ── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip {
  min-height: 36px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.chip[aria-pressed="true"] {
  border-color: var(--c-kicap);
  background: var(--c-kicap);
  color: var(--c-on-brand);
}

/* ── Segmented control (pool toggle, visibility) ── */
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: var(--sp-1);
  border-radius: var(--r-md);
  background: var(--c-surface-sunk);
}
.segmented__opt {
  min-height: 40px;
  border: 0;
  border-radius: calc(var(--r-md) - var(--sp-1));
  background: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-kicap-2);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.segmented__opt[aria-checked="true"] {
  background: var(--c-surface);
  color: var(--c-kicap);
  box-shadow: var(--shadow-card);
}

/* ── Card ── */
.card {
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

/* ── Search field ── */
.search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-surface-sunk);
}
.search svg {
  flex: none;
  width: 18px; height: 18px;
  fill: none; stroke: var(--c-kicap-3); stroke-width: 2; stroke-linecap: round;
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: var(--fs-md);
  outline: none;
}
.search input::placeholder { color: var(--c-kicap-3); }
.search:focus-within { outline: 3px solid var(--c-sambal); outline-offset: 0; }

/* ── List row (venue / dish pickers) ── */
.row-list { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 64px;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-bottom: 1px solid var(--c-line);
  background: none;
  text-align: left;
  transition: background-color var(--dur-fast);
}
.row:active { background: var(--c-surface-sunk); }
.row__body { flex: 1; min-width: 0; }
.row__title {
  font-weight: var(--fw-semibold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-kicap-2);
}
.row__aside {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--c-kicap-2);
  text-align: right;
}
.row--suggested { background: var(--c-sambal-soft); }
.row-hint {
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-kicap-2);
}

/* ── Photo placeholder: tinted tile with the dish initial ──
   Stands in for real dish photos in the prototype. */
.photo {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--tint, var(--c-tint-other));
  color: var(--c-on-brand);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-lg);
  overflow: hidden;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--malay { --tint: var(--c-tint-malay); }
.photo--chinese { --tint: var(--c-tint-chinese); }
.photo--indian { --tint: var(--c-tint-indian); }
.photo--western, .photo--jp_kr { --tint: var(--c-tint-western); }
.photo--thai, .photo--other { --tint: var(--c-tint-other); }

/* ── Halal badge (traits-and-dietary §4.1, five states) ──
   Only evidence-backed states get colour. Unknown is deliberately plain. */
.halal {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.halal::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.halal--jakim_certified { background: var(--c-pandan); color: var(--c-on-brand); }
.halal--jakim_certified::before { background: var(--c-on-brand); }
.halal--muslim_owned { background: var(--c-pandan-soft); color: var(--c-pandan-deep); }
.halal--no_pork_no_lard { background: var(--c-surface-sunk); color: var(--c-kicap); }
.halal--non_halal { background: var(--c-surface-sunk); color: var(--c-kicap-2); }
.halal--unknown { border: 1px dashed var(--c-kicap-3); color: var(--c-kicap-2); }
.halal--unknown::before { display: none; }

/* ── Stars (rating input) ── */
.stars {
  display: flex;
  justify-content: center;
  gap: var(--sp-1);
}
.star {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: none;
}
.star svg { width: 100%; height: 100%; }
.star__empty { fill: var(--c-line); }
.star__full { fill: var(--c-sambal); }
/* Half / full fill is set by clipping the filled star. */
.star__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 0;
}
.star__fill svg { width: 56px; height: 56px; }
.star[data-fill="half"] .star__fill { width: 50%; }
.star[data-fill="full"] .star__fill { width: 100%; }
.star.is-bumped { animation: star-bump var(--dur-fast) var(--ease-out); }
@keyframes star-bump { 50% { transform: scale(1.12); } }

/* Small read-only stars in rows/feed. */
.stars-sm {
  color: var(--c-sambal);
  font-size: var(--fs-sm);
  letter-spacing: 1px;
}

/* ── Switch ── */
.switch {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-line);
  transition: background-color var(--dur-fast);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out);
}
.switch[aria-checked="true"] { background: var(--c-pandan); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* ── Bottom sheet ── */
.sheet-scrim {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  background: var(--c-scrim);
  animation: fade-in var(--dur-base) var(--ease-out);
}
.sheet {
  width: 100%;
  max-height: 80%;
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--c-santan);
  animation: sheet-up var(--dur-base) var(--ease-out);
}
.sheet__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.sheet__note {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-kicap-2);
}
.radio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--sp-2);
  border: 0;
  border-bottom: 1px solid var(--c-line);
  background: none;
  text-align: left;
  font-weight: var(--fw-medium);
}
.radio-row[aria-checked="true"]::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: var(--r-pill);
  background: var(--c-chilli);
  box-shadow: 0 0 0 4px var(--c-chilli-soft);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 52px;
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }

/* ── Toast ── */
.toast {
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: calc(var(--tabbar-h) + var(--sp-4));
  z-index: 20;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-kicap);
  color: var(--c-on-brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  animation: fade-in var(--dur-base) var(--ease-out);
}