/* Search, add form and place page. Tokens come from app.css. */
input[type="search"] { margin-bottom: 12px; }

.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.filter { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 0.9rem; }
.filter[aria-current] { background: var(--accent); color: #fff; box-shadow: none; }
.filter .n { font-size: 0.75rem; opacity: 0.7; }

.diet-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-bottom: 12px; }
.diet-filter details[open] { flex: 1 0 100%; }
.diet-filter summary { display: flex; align-items: center; min-height: 44px; color: var(--accent-text); font-weight: 600; cursor: pointer; }
.diet-filter .filters { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }

.result { display: flex; align-items: center; gap: 8px; padding-right: 16px; }
.result .row { flex: 1; min-width: 0; }
.add-link { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 16px; color: var(--accent-text); font-weight: 600; }

.add fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.add legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; flex-direction: row; }
.pick input { position: absolute; opacity: 0; width: 1px; min-height: 0; height: 1px; padding: 0; }
.pick span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; cursor: pointer; }
.pick input:checked + span { background: var(--accent); color: #fff; box-shadow: none; }
.pick input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.add details { margin-top: 8px; }
.add summary { display: flex; align-items: center; min-height: 44px; color: var(--accent-text); font-weight: 600; cursor: pointer; }
.styles { display: none; }
.add:has(input[name="genre"][value="ramen"]:checked) .styles { display: block; }

.place-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.place-head .kanji { width: 56px; height: 56px; font-size: 1.6rem; border-radius: 16px; }
.place-title { min-width: 0; }
.place-title h1 { margin: 0; overflow-wrap: anywhere; }
.maps-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); font-weight: 600; }
.mine { margin-top: 8px; }
.mine h2 { margin-top: 0; }
.mine-score { display: flex; align-items: center; gap: 12px; }
.mine-score p { margin: 0; overflow-wrap: anywhere; }
.actions { margin: 16px 0 0; }

.notfound { display: flex; flex-direction: column; gap: 12px; }
.notfound h2 { margin: 16px 0 0; }

.diet, .style-row { margin-top: 24px; }
.diet h2, .style-row h2 { margin-top: 0; }
.diet h3 { font-size: 0.9rem; margin: 16px 0 8px; }
.diet-rows { list-style: none; margin: 0 0 8px; padding: 0; }
.diet-rows li { display: flex; flex-direction: column; padding: 6px 0; }
.diet-phrase { font-weight: 700; }
/* Scoped: feed.css owns the bare .chips (a one-row scroller on profiles); these sections want wrapping. */
.diet .chips, .style-row .chips { flex-wrap: wrap; overflow-x: visible; padding: 0; }
.chip-btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font: 600 0.9rem var(--font); cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }