/* Dish-first product layer. Loaded after the original stylesheet so the existing
   map, evidence and responsive layout stay intact while the new hierarchy feels
   calmer and more app-like. */
:root {
  --ink: #18342f;
  --muted: #62746f;
  --paper: #f6f8f7;
  --panel: #ffffff;
  --mint: #e6f2ed;
  --green: #176452;
  --green-dark: #0f4b3d;
  --line: #dce7e2;
  --amber: #a15c12;
  --amber-bg: #fff3dc;
  --red: #a33e3e;
  --red-bg: #ffe8e7;
  --blue: #315b7b;
  --blue-bg: #eaf2f8;
  --shadow-sm: 0 2px 10px rgba(17, 50, 42, .06);
  --shadow-md: 0 12px 30px rgba(17, 50, 42, .09);
}

body { background: var(--paper); color: var(--ink); }
.topbar { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); box-shadow: 0 1px 10px rgba(17,50,42,.04); }
.brand { letter-spacing: -.02em; }
.brand-dot { color: #ef8c4e; }
.header-actions { display:flex; align-items:center; gap:8px; }
.profile-button { min-height: 42px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; color: var(--green-dark); background: #fff; font-weight: 700; }
.profile-button:hover, .profile-button:focus-visible { border-color: var(--green); background: var(--mint); }

.search-section { max-width: 1180px; margin-inline:auto; }
.page-heading { align-items:flex-end; }
.eyebrow { margin:0 0 7px; color:var(--green); font-size:.72rem; letter-spacing:.13em; font-weight:800; }
.page-heading h1 { color:var(--ink); font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing:-.055em; line-height:1; }
.coverage-count { color:var(--muted); font-size:.82rem; }
.finder-form { background: var(--panel); border:1px solid var(--line); box-shadow: var(--shadow-md); }
.finder-form .search-field > div { gap:9px; }
.finder-form svg { color:var(--green); flex:0 0 auto; }
.finder-form input { color:var(--ink); }
.finder-form input::placeholder { color:#8b9b96; }
.search-field label { color:var(--muted); font-size:.75rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.location-field #locateButton { color:var(--green); font-size:1.2rem; }
.primary-button { border-radius:12px; background:var(--green); box-shadow: 0 5px 12px rgba(23,100,82,.18); }
.primary-button:hover, .primary-button:focus-visible { background:var(--green-dark); }

.quick-actions { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 3px; }
.quick-actions button { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:8px 15px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-weight:700; box-shadow:var(--shadow-sm); }
.quick-actions button:first-letter { color:var(--green); }
.quick-actions button:hover, .quick-actions button:focus-visible { border-color:#9bc8b9; background:var(--mint); color:var(--green-dark); }
.onboarding-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:13px; padding:13px 16px; border:1px solid #cfe4da; border-radius:14px; background:linear-gradient(110deg,#eaf6f0,#f8fbf9); }
.onboarding-banner > div { display:grid; gap:3px; }
.onboarding-banner strong { font-size:.96rem; }
.onboarding-banner span { color:var(--muted); font-size:.86rem; }
.onboarding-banner button { color:var(--green-dark); font-weight:800; white-space:nowrap; }
.onboarding-banner[hidden] { display:none; }

.search-shortcuts button { border:1px solid transparent; background:transparent; }
.search-shortcuts button:hover, .search-shortcuts button:focus-visible { border-color:#b8d9cc; }
.refine-row { gap:8px; }
.refine-control { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); }
.refine-control > summary { min-height:44px; color:var(--ink); }
.refine-control > summary:hover { background:#fbfdfc; }
.refine-label { color:var(--green-dark); font-weight:800; }
.summary-action { color:var(--green); font-weight:800; }
.refine-content { border-top:1px solid var(--line); }
.control-heading { color:var(--ink); }
.profile-help { color:var(--muted); }
.allergen-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; }
.restriction-row { display:flex; align-items:center; gap:8px; min-height:46px; padding:7px 8px; border:1px solid var(--line); border-radius:10px; background:#fbfdfc; }
.restriction-row:has(input:checked) { border-color:#9bc8b9; background:var(--mint); }
.restriction-row .allergen-chip { flex:1; min-width:0; }
.restriction-row select { width:auto; min-width:126px; min-height:34px; border:1px solid #cddbd5; border-radius:8px; background:#fff; padding:4px 25px 4px 8px; color:var(--ink); font-size:.78rem; }
.restriction-row select:disabled { opacity:.45; }
.custom-form { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.custom-form label { display:block; margin-bottom:5px; color:var(--muted); font-size:.78rem; font-weight:800; }
.custom-form > div { display:flex; gap:8px; }
.custom-form input { min-width:0; flex:1; border:1px solid var(--line); border-radius:9px; padding:9px 10px; }
.custom-form button { border-radius:9px; padding:8px 13px; background:var(--green); color:#fff; font-weight:800; }

.filter-status { color:var(--muted); }
.safety-note { border:1px solid #ecdab9; background:#fffaf0; color:#76521f; }
.safety-note button { color:var(--green-dark); font-weight:800; }

.results-section { max-width:1180px; margin-inline:auto; }
.results-toolbar { border-bottom:1px solid var(--line); }
.list-summary h2 { letter-spacing:-.035em; }
.list-summary p { color:var(--muted); }
.view-tabs { padding:3px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.view-tabs button { min-height:36px; border-radius:8px; color:var(--muted); }
.view-tabs button.active { background:var(--mint); color:var(--green-dark); font-weight:800; }
.sort-label select { border-color:var(--line); border-radius:9px; background:#fff; }
.dish-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; padding:13px 0 2px; }
.dish-filters label { display:grid; gap:4px; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.dish-filters select { min-height:39px; min-width:126px; border:1px solid var(--line); border-radius:9px; background:#fff; padding:7px 25px 7px 9px; color:var(--ink); font-size:.82rem; text-transform:none; }
.dish-filters .toggle-filter { display:flex; align-items:center; gap:7px; min-height:39px; padding:0 9px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); letter-spacing:0; text-transform:none; }
.dish-filters .toggle-filter input { accent-color:var(--green); }
.dish-filters #clearExtraFilters { min-height:39px; padding:8px 11px; color:var(--green); font-weight:800; text-decoration:underline; }
.filter-data-note { margin:9px 0; padding:9px 12px; border-radius:9px; background:var(--blue-bg); color:var(--blue); font-size:.82rem; }
.result-guidance { border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm); }
.workspace { gap:22px; }
.results-list { display:grid; gap:12px; }
.result-card { border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.result-card:hover { transform:translateY(-2px); border-color:#afd3c4; box-shadow:var(--shadow-md); }
.card-title h3 { color:var(--ink); letter-spacing:-.02em; }
.card-title > p, .card-meta { color:var(--muted); }
.favorite-button { border:1px solid var(--line); color:var(--green); background:#fff; }
.favorite-button[aria-pressed=true] { background:#fff1ed; color:#bd5d42; border-color:#efc7b9; }
.match-badge { display:inline-flex; align-items:center; gap:6px; width:max-content; min-height:30px; padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:850; }
.match-badge strong { font-size:.9rem; }
.match-badge.strong { background:#dff2e9; color:#17614e; }
.match-badge.likely { background:#eaf4ee; color:#2f725d; }
.match-badge.ask, .match-badge.unavailable { background:var(--amber-bg); color:var(--amber); }
.match-badge.conflict { background:var(--red-bg); color:var(--red); }
.evidence-pill { border:1px solid var(--line); border-radius:999px; background:#f7faf8; color:var(--muted); }
.evidence-pill.claim { border-color:#b8d9cc; background:#edf8f2; color:#22634f; }
.evidence-pill.possible, .evidence-pill.unknown { border-color:#efd6a7; background:#fff8e9; color:#8a5c20; }
.evidence-pill.contains { border-color:#efbebc; background:#fff0ef; color:#a33e3e; }
.card-kitchen { color:var(--muted); }
.card-kitchen strong { color:var(--ink); }
.branch-button { border-top:1px solid var(--line); }
.details-button { color:var(--green-dark); font-weight:800; }

.map-card { border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:var(--shadow-md); overflow:hidden; }
.map-toolbar { background:#fff; border-bottom:1px solid var(--line); }
.map-toolbar strong { color:var(--ink); }
.map-actions button { border:1px solid var(--line); border-radius:8px; color:var(--green-dark); background:#fff; }
.map-actions button:hover, .map-actions button:focus-visible { background:var(--mint); }
.map-overlays button { border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--green-dark); box-shadow:var(--shadow-sm); }
.map-footer { border-top:1px solid var(--line); }
.map-count, #mapCount { color:var(--muted); font-size:.82rem; }
.map-footer button { color:var(--green); font-weight:800; }
.map-legend { display:flex; flex-wrap:wrap; gap:7px 12px; padding:9px 14px 0; color:var(--muted); font-size:.72rem; font-weight:800; }
.map-legend span::before { content:""; display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:#aab8b2; }
.map-legend .strong::before { background:#23785d; }.map-legend .ask::before { background:#b77719; }.map-legend .conflict::before { background:#b64a49; }.map-legend .verified::before { background:#3f6ea1; }
.dish-map-pin span { min-width:0; width:max-content; height:30px; border:2px solid #fff; border-radius:999px; padding:0 10px; color:#fff; font-size:11px; box-shadow:0 3px 10px rgba(17,50,42,.23); }
.dish-map-pin.strong span { background:#23785d; }.dish-map-pin.ask span { background:#b77719; }.dish-map-pin.conflict span { background:#b64a49; }.dish-map-pin.verified span { background:#3f6ea1; }
.map-help { color:var(--muted); }

.dialog-shell { border:1px solid var(--line); background:#fff; box-shadow:0 22px 60px rgba(17,50,42,.2); }
.dialog-kicker { color:var(--green); font-size:.72rem; letter-spacing:.12em; font-weight:850; text-transform:uppercase; }
.dialog-shell h2 { letter-spacing:-.04em; color:var(--ink); }
.dialog-close { border:1px solid var(--line); border-radius:50%; color:var(--muted); background:#fff; }
.dialog-close:hover, .dialog-close:focus-visible { background:var(--mint); color:var(--green-dark); }
.match-summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px; border:1px solid var(--line); border-radius:13px; background:#fbfdfc; }
.match-score { color:var(--green-dark); font-size:2rem; font-weight:900; letter-spacing:-.05em; }
.match-explanation-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 15px; border:1px solid var(--line); border-radius:13px; background:#fbfdfc; }
.match-explanation-heading strong { display:block; margin-top:2px; font-size:1.08rem; }
.match-number { color:var(--green-dark); font-size:2rem; font-weight:900; letter-spacing:-.05em; }
.match-number.ask, .match-number.unavailable { color:var(--amber); }.match-number.conflict { color:var(--red); }
.match-definition { color:var(--muted); font-size:.82rem; }
.source-chip-row { display:flex; flex-wrap:wrap; gap:6px; margin:11px 0 17px; }
.source-chip { display:inline-flex; min-height:26px; align-items:center; padding:4px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:#f7faf8; font-size:.72rem; font-weight:750; }
.source-chip.available { border-color:#c1ded1; color:#24664f; background:#eef8f2; }.source-chip.unavailable { border-style:dashed; background:#fffaf0; color:#8c6a31; }.source-chip a { color:inherit; text-decoration:none; }.source-chip a:hover { text-decoration:underline; }
.match-label { display:block; margin-top:5px; color:var(--muted); font-size:.8rem; font-weight:800; }
.match-label.strong, .match-label.likely { color:var(--green); }.match-label.ask, .match-label.unavailable { color:var(--amber); }.match-label.conflict { color:var(--red); }
.dish-detail-match { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.restaurant-match-summary { display:grid; gap:8px; margin:15px 0 21px; padding:14px; border:1px solid var(--line); border-radius:13px; background:#fbfdfc; }
.restaurant-match-summary > strong { font-size:1.05rem; }.restaurant-match-summary > div { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.8rem; font-weight:800; }.restaurant-match-summary .strong { color:var(--green); }.restaurant-match-summary .likely { color:#427b64; }.restaurant-match-summary .ask { color:var(--amber); }
.practices-section { border-top:1px solid var(--line); padding-top:17px; }.practices-section h3 { margin-bottom:10px; }
.practices-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.practices-grid > div { padding:10px 11px; border:1px solid var(--line); border-radius:10px; background:#fbfdfc; }.practices-grid dt { font-size:.83rem; font-weight:850; }.practices-grid dd { margin:3px 0 0; color:var(--muted); font-size:.78rem; }
.practice-source { color:var(--muted); font-size:.8rem; }
.community-section { border-top:1px solid var(--line); padding-top:17px; }.community-section p { color:var(--muted); font-size:.86rem; }
.match-explanation, .practices-panel, .community-panel, .ingredient-panel { border-top:1px solid var(--line); padding-top:17px; }
.match-checks { display:grid; gap:8px; margin:10px 0 0; padding:0; list-style:none; }
.match-checks li { display:flex; gap:9px; padding:10px 11px; border-radius:10px; background:#f7faf8; }
.match-checks li.claim { background:#eef8f2; }.match-checks li.unknown { background:#fff8e9; }.match-checks li.possible, .match-checks li.contains { background:#fff0ef; }
.check-symbol { display:grid; place-items:center; flex:0 0 23px; width:23px; height:23px; border-radius:50%; background:#d8e9e1; color:var(--green-dark); font-size:.8rem; font-weight:900; }
.unknown .check-symbol, .possible .check-symbol { background:#f5dfad; color:#805315; }.contains .check-symbol { background:#f3c1bf; color:var(--red); }
.match-checks li > div { display:grid; gap:2px; }.match-checks li span { color:var(--muted); font-size:.86rem; line-height:1.4; }
.match-caution { margin-top:13px; color:#7c5423; font-size:.86rem; }
.practice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.practice-item { padding:11px; border:1px solid var(--line); border-radius:10px; background:#fbfdfc; }
.practice-item strong { display:block; font-size:.88rem; }.practice-item span { display:block; margin-top:3px; color:var(--muted); font-size:.78rem; }
.restaurant-summary { display:grid; gap:9px; padding:14px; border:1px solid var(--line); border-radius:13px; background:#fbfdfc; }
.restaurant-summary .summary-stats { display:flex; flex-wrap:wrap; gap:7px 13px; color:var(--muted); font-size:.86rem; }
.restaurant-summary .summary-stats strong { color:var(--ink); }
.dialog-dishes > button { border:1px solid var(--line); border-radius:11px; background:#fff; }.dialog-dishes > button:hover { border-color:#9bc8b9; background:#fbfdfc; }

@media (max-width:760px) {
  .header-actions { gap:3px; }.profile-button { padding:8px 10px; font-size:.78rem; }.install-button { display:none; }
  .onboarding-banner { align-items:flex-start; flex-direction:column; gap:9px; }.onboarding-banner button { padding:0; }
  .allergen-grid { grid-template-columns:1fr; }.restriction-row select { min-width:112px; }
  .dish-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:5px; scrollbar-width:none; }.dish-filters::-webkit-scrollbar { display:none; }.dish-filters label, .dish-filters .toggle-filter, .dish-filters #clearExtraFilters { flex:0 0 auto; }
  .workspace { gap:12px; }.map-card { border-radius:12px; }.map-legend { gap:6px 10px; }
  .match-summary { align-items:flex-start; flex-direction:column; }.match-explanation-heading { align-items:flex-start; flex-direction:column; }.practices-grid { grid-template-columns:1fr; }
}

@media (max-width:380px) {
  .profile-button { max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.quick-actions button { padding-inline:11px; }
}
