/* Page composition for the real pages (index, explore, restaurant).
   Visual primitives come from design/components.css; this file only arranges them. */

.source-bar { display: none; background: var(--color-surface-muted); border-bottom: var(--border); font-size: var(--text-small); color: var(--color-text-secondary); }
.source-bar .container { padding-block: var(--space-2); }
:root[lang="en"] .source-bar { display: block; }

/* ── Home: hero = question + today's answer ── */
.hero { display: grid; gap: var(--space-8); padding-block: var(--space-8) var(--space-10); }
.hero > * { min-width: 0; }
.hero__ask { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-5); }
.hero__kicker { font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--color-link); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__rule { font-size: var(--text-small); color: var(--color-text-secondary); max-width: 34rem; }
.hero .search .btn { flex: none; }
.answer { display: grid; gap: var(--space-5); padding: var(--space-6); border: var(--border); border-radius: var(--radius-xl); background: var(--color-surface); align-content: start; }
.answer__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: var(--text-small); color: var(--color-text-secondary); }
.answer__name { font-size: var(--text-h1); line-height: 1.15; }
.answer__where { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; color: var(--color-text-secondary); }
.answer__where b { color: var(--color-text-primary); }
.answer__photos { display: grid; gap: var(--space-3); }
@media (min-width: 1024px) { .hero { grid-template-columns: 5fr 7fr; align-items: start; padding-top: var(--space-10); } .hero__ask { padding-top: var(--space-5); } }

/* ── Home: places & map ── */
.places { display: grid; gap: var(--space-6); }
.places__side { display: grid; gap: var(--space-4); align-content: start; }
.selected-spot { display: grid; gap: var(--space-2); padding: var(--space-4); border: var(--border); border-radius: var(--radius-md); background: var(--color-surface); }
@media (min-width: 1024px) { .places { grid-template-columns: 5fr 7fr; } .places .map-preview { min-height: 520px; } }

/* ── Home: submit / about ── */
.split { display: grid; gap: var(--space-7); }
@media (min-width: 1024px) { .split { grid-template-columns: 5fr 7fr; } }
.form { display: grid; gap: var(--space-4); padding: var(--space-6); border: var(--border); border-radius: var(--radius-xl); background: var(--color-surface); }
.form__row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form-status { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-warning-soft); font-size: var(--text-small); }

/* ── Explore ── */
.explore-head { padding-block: var(--space-8) var(--space-5); display: grid; gap: var(--space-4); }
.explore-head .search { max-width: 720px; }
.explore-layout { display: grid; gap: var(--space-6); padding-bottom: var(--space-10); }
.explore-sidebar { display: none; }
@media (min-width: 1024px) {
  .explore-layout { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .explore-sidebar { display: block; position: sticky; top: calc(var(--header-h) + var(--space-4)); max-height: calc(100dvh - var(--header-h) - var(--space-6)); overflow-y: auto; padding-right: var(--space-2); }
}
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.results-bar__left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.results-count { font-size: var(--text-small); color: var(--color-text-secondary); }
.view-toggle { display: inline-flex; }
@media (min-width: 1024px) { .view-toggle { display: none; } }
.restaurant-grid { display: grid; gap: var(--space-7) var(--space-5); }
@media (min-width: 640px) { .restaurant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .restaurant-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.restaurant-card__dishes { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--text-small); }
.restaurant-card__dishes li { display: flex; justify-content: space-between; gap: var(--space-2); }
.restaurant-card__dishes li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.restaurant-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.explore-map { margin-bottom: var(--space-6); }
.explore-map .map-preview { min-height: 380px; }
@media (max-width: 1023px) { [data-view="list"] .explore-map { display: none; } [data-view="map"] .restaurant-grid, [data-view="map"] .more-row { display: none; } .explore-map .map-preview { min-height: 60dvh; } }
.more-row { display: flex; justify-content: center; margin-top: var(--space-7); }

/* ── Restaurant detail ── */
.detail-top { padding-block: var(--space-5) var(--space-6); display: grid; gap: var(--space-4); }
.back-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--color-link); width: max-content; }
.back-link:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.detail-title { display: grid; gap: var(--space-3); }
.detail-title__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); color: var(--color-text-secondary); }
.detail-layout { display: grid; gap: var(--space-8); padding-bottom: var(--space-10); }
.detail-main { display: grid; gap: var(--space-9); min-width: 0; }
.detail-aside { display: grid; gap: var(--space-5); align-content: start; }
@media (min-width: 1024px) { .detail-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .detail-aside { position: sticky; top: calc(var(--header-h) + var(--space-4)); } }
.detail-section h2 { font-size: var(--text-h2); margin-bottom: var(--space-4); }
.dish-list { margin: 0; padding: 0; list-style: none; }
.dish-row { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-top: var(--border); }
.dish-row__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.dish-row__name { font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: 1.35; font-family: var(--font-ui); }
.dish-row__note { color: var(--color-text-secondary); font-size: var(--text-body); line-height: 1.7; }
.dish-row__foot { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-caption); color: var(--color-text-muted-strong); }
.dish-row__photo { max-width: 360px; }
.intro-text p + p { margin-top: var(--space-3); }
.aside-card { display: grid; gap: var(--space-3); padding: var(--space-5); border: var(--border); border-radius: var(--radius-lg); background: var(--color-surface); }
.aside-card h2 { font-size: var(--text-h4); font-family: var(--font-ui); font-weight: var(--weight-semibold); }
.aside-card .map-preview { min-height: 240px; }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tag-evidence { font-size: var(--text-caption); color: var(--color-text-secondary); }
.not-found { padding-block: var(--space-12); display: grid; gap: var(--space-4); justify-items: start; }

/* ── Explore: primary 校内 / 校外 control (2026-10-11) ── */
.explore-head .scope-toggle { justify-self: start; }
.scope-toggle button { min-height: 40px; padding: 0 var(--space-4); }
.scope-mark { font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.scope-mark--in { color: var(--color-link); }

/* ── About page ── */
.about-head { padding-block: var(--space-8) var(--space-6); display: grid; gap: var(--space-4); max-width: 46rem; }
.about-layout { display: grid; gap: var(--space-8); padding-bottom: var(--space-10); }
.about-main { display: grid; gap: var(--space-9); min-width: 0; }
.about-aside { display: grid; align-content: start; }
@media (min-width: 1024px) { .about-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .about-aside { position: sticky; top: calc(var(--header-h) + var(--space-4)); } }
.principles { margin: 0; padding: 0; list-style: none; max-width: 42rem; }
.principles li { padding: var(--space-3) 0 var(--space-3) var(--space-5); border-top: var(--border); position: relative; line-height: 1.7; }
.principles li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-3) + 0.75em); width: 8px; height: 2px; background: var(--color-brand-primary); }
.principles .principles__stat { color: var(--color-text-secondary); font-size: var(--text-small); }

/* ── Admin review (admin.html) ── */
.admin-head { padding-block: var(--space-8) var(--space-5); display: grid; gap: var(--space-3); max-width: 46rem; }
.admin-login { max-width: 32rem; margin-bottom: var(--space-10); }
.admin-tabs { flex-wrap: wrap; margin-bottom: var(--space-4); border-radius: var(--radius-lg); }
.admin-tabs button { min-height: 40px; padding: 0 var(--space-4); }
.admin-list { margin: 0 0 var(--space-10); padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.admin-item { display: grid; gap: var(--space-3); padding: var(--space-5); border: var(--border); border-radius: var(--radius-lg); background: var(--color-surface); }
.admin-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.admin-item__body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.admin-private { padding: 0 6px; border-radius: var(--radius-sm); background: var(--color-warning-soft); }

/* ── Restaurant detail: approved student posts (only when the API is available) ── */
.student-posts { display: grid; gap: var(--space-3); }
.student-post { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-top: var(--border); }
.student-post__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.student-post__body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.student-post__by { font-size: var(--text-caption); color: var(--color-text-muted-strong); }