/* alfie 2.0 screen layouts.
   The design system ships web and mobile as two kits; alfie serves one responsive
   Express app, so the kits meet here: the 1200px web layout is the wide state and the
   390pt mobile layout is the narrow state of the same markup. The mobile tab bar is
   the navigation below 720px, where the app-bar links step aside. */

.ds-body { min-height: 100vh; display: flex; flex-direction: column; }
.ds-main { flex: 1; }
.ds-stack { display: grid; gap: var(--s-5); }
.ds-stack--tight { gap: var(--s-4); }
.ds-row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.ds-muted { color: var(--ink-3); font-size: var(--t-xs); }

/* Small layout utilities. The system has no inline styles: the app's CSP forbids them,
   and a style attribute is a token that escaped the token file. */
.ds-hidden { display: none; }
.ds-note { margin: var(--s-3) 0 0; }
.ds-lede { color: var(--ink-2); font-size: var(--t-sm); }
.ds-actions { margin-top: var(--s-4); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ds-flush { margin: 0; }
.ds-prose-body { margin: 0; font-size: var(--t-sm); line-height: 1.7; }

/* The app bar carries a compact search on wide viewports only — on narrow ones the
   screen's own search field is a scroll away and two would just compete. */
.ds-appbar__search { display: flex; gap: var(--s-2); width: min(320px, 34vw); }
.ds-appbar__search input { flex: 1; min-width: 0; height: var(--field-h-sm); font-size: var(--t-xs); }
.ds-appbar__actions { display: flex; gap: var(--s-2); align-items: center; }

/* ─────────────────────────────────────────────────────────────── landing */
.ds-hero { border-bottom: var(--border); background: var(--paper); }
.ds-hero__inner { padding: 80px var(--s-6) 64px; display: grid; gap: var(--s-6); max-width: 900px; }
.ds-hero h1 { font-size: var(--t-display); line-height: 1.15; margin: 0; max-width: 720px; letter-spacing: var(--track-display); }
.ds-hero__lede { margin: 0; font-size: var(--t-body); color: var(--ink-2); max-width: 620px; }
.ds-hero__search { max-width: 620px; }
.ds-hero__quick { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; align-items: center; }
.ds-hero__quick-label { font-size: var(--t-xs); color: var(--ink-3); }

.ds-section { padding: 48px var(--s-6); }
.ds-section--tight { padding: 0 var(--s-6) 64px; }
.ds-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--gutter); align-items: start; }

/* ──────────────────────────────────────────────────────────────── explore */
.ds-explore { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
.ds-explore__rail { display: grid; gap: var(--s-6); align-content: start; }
.ds-explore__rail .ds-rail { position: static; }
.ds-profile-form { display: grid; gap: var(--s-3); }

/* The category tree is a rail list that nests; <details> keeps it usable without JS. */
.ds-tree { list-style: none; margin: 0; padding: 0; display: grid; }
.ds-tree ul { list-style: none; margin: 0; padding-left: var(--s-3); display: grid; }
.ds-tree details > summary {
  cursor: pointer;
  padding: 6px 8px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.ds-tree details > summary::-webkit-details-marker { display: none; }
.ds-tree details > summary::before {
  content: '+';
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--ink-3);
  width: 10px;
}
.ds-tree details[open] > summary::before { content: '−'; }
.ds-tree details > summary:hover { background: var(--paper-2); }

/* ───────────────────────────────────────────────────────────────── product */
/* Title, then verdict, then the label detail. The report sits in the right column on a
   wide screen and directly under the title on a narrow one — on a phone the verdict must
   not be four cards down the page. */
.ds-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  grid-template-areas: "head side" "main side";
  gap: var(--gutter);
  align-items: start;
}
.ds-product__header { grid-area: head; display: grid; gap: var(--s-3); }
.ds-product__header h1 { margin: 0; font-size: var(--t-h1); }
.ds-product__header p.eyebrow { margin: 0; }
.ds-product__main { grid-area: main; }
.ds-product__side { grid-area: side; position: sticky; top: 72px; display: grid; gap: var(--s-4); }
.ds-product__price { font-family: var(--font-mono); font-size: var(--t-h3); font-variant-numeric: tabular-nums; }
.ds-product__price--none { color: var(--ink-3); }
.ds-product__figure {
  background: var(--paper-3);
  border-radius: var(--r-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1;
}
.ds-product__figure img { width: 100%; height: 100%; object-fit: contain; }

/* ──────────────────────────────────────────────────── profile / my list */
.ds-narrow { max-width: 880px; }
.ds-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--gutter); align-items: start; }
.ds-profile-side { display: grid; gap: var(--s-4); }

/* ───────────────────────────────────────────────────────────── community */
/* Post bodies are plain text typed into a textarea — newlines are the author's. */
.ds-post { white-space: pre-wrap; font-size: var(--t-sm); line-height: var(--lh-body); min-height: 200px; }
.ds-lang { font-size: var(--t-xs); color: var(--ink-3); }

/* ──────────────────────────────────────────────────────────────── footer */
.ds-footer { border-top: var(--border); background: var(--paper); }
.ds-footer__inner {
  padding: var(--s-6);
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.ds-footer__brand { font-weight: var(--w-bold); color: var(--ink); letter-spacing: -0.03em; }
.ds-footer__mono { font-family: var(--font-mono); }

/* ───────────────────────────────────────────────────── editorial (home) */
.ds-prose { max-width: var(--read-max); }
.ds-prose h2 { font-size: var(--t-h3); margin: var(--s-6) 0 var(--s-2); }
.ds-prose p { font-size: var(--t-sm); color: var(--ink-2); }
.ds-prose sup a { font-family: var(--font-mono); font-size: var(--t-2xs); }
.ds-quote { margin: var(--s-8) 0 0; padding-top: var(--s-6); border-top: var(--rule-section); }
.ds-quote blockquote { margin: 0; font-size: var(--t-h2); letter-spacing: var(--track-heading); }
.ds-quote blockquote p { margin: 0; }
.ds-quote cite { font-size: var(--t-xs); color: var(--ink-3); font-style: normal; }

/* ───────────────────────────────────────────────────────── the tab bar */
/* Wide viewports navigate from the app bar; the tab bar is the narrow-state nav. */
.ds-tabbar { display: none; }

@media (max-width: 1080px) {
  .ds-proof { grid-template-columns: minmax(0, 1fr); }
  .ds-product { display: flex; flex-direction: column; }
  .ds-product__header { order: 0; }
  .ds-product__side { order: 1; position: static; }
  .ds-product__main { order: 2; }
  /* A product cutout is worth a glance, not half the screen. */
  .ds-product__figure { aspect-ratio: auto; max-height: 240px; padding: var(--s-4); }
  .ds-product__figure img { max-height: 208px; }
}

@media (max-width: 900px) {
  /* The 19-chip filter fills a phone screen on its own, so results would start below the
     fold. The mobile kit answers this by keeping no filter on the search screen at all:
     the banner states what is being excluded and 내 알레르기 (one tap away in the tab bar)
     is where it changes. The filter is summarised, never silently applied. */
  .ds-explore { display: flex; flex-direction: column; gap: var(--s-5); }
  .ds-explore__results { order: 1; }
  .ds-explore__rail { order: 2; }
  .ds-profile-form { display: none; }
  .ds-explore__rail .ds-rail { position: static; }
  .ds-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-hero__inner { padding: 48px var(--s-5) 40px; }
  .ds-hero h1 { font-size: 30px; }
  .ds-section { padding: 32px var(--s-5); }
  .ds-section--tight { padding: 0 var(--s-5) 40px; }
  .ds-appbar__search { display: none; }
}

@media (max-width: 720px) {
  .ds-appbar__nav { display: none; }
  .ds-tabbar { display: grid; }
  .ds-body { padding-bottom: 0; }
  .page { padding: 0 var(--s-4); }
  .ds-report__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-report--compact .ds-report__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-prow > a { grid-template-columns: 56px minmax(0, 1fr); }
  .ds-prow__thumb { width: 56px; height: 56px; }
  /* Price and verdict move under the title instead of into a third column. */
  .ds-prow__side { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; gap: var(--s-3); align-items: center; }
  .ds-kv { grid-template-columns: minmax(0, 1fr); gap: 2px var(--s-4); }
  .ds-kv dd { margin-bottom: var(--s-2); }
  .ds-hero__inner { padding: 40px var(--s-4) 32px; }
  .ds-hero h1 { font-size: 26px; }
  .ds-section { padding: 28px var(--s-4); }
  .ds-section--tight { padding: 0 var(--s-4) 32px; }
  .ds-footer__inner { padding: var(--s-5) var(--s-4); gap: var(--s-3); }
  /* Every mobile target clears 44px. */
  .ds-chip { height: var(--tap-min); padding: 0 14px; font-size: var(--t-sm); }
  .ds-btn--sm { height: var(--field-h); }
}