/* Recipes (#recipes) — module layout only (spec §7.7, §8.3). Components come
   from atlas-components.css; this file places them. */
@layer atlas.modules {
  .recipes-page .atlas-alert { margin-top: var(--s-4); }
  .recipe-toolbar .atlas-toolbar__end { gap: var(--s-3); }
  .recipe-search--phone { display: none; }
  .recipe-category-picker { position: relative; display: inline-flex; align-items: center; gap: var(--s-1); }
  /* The category menu sits after the toolbar (never inside its phone fade
     mask); AtlasShell.menu places it under the chip on desktop. */
  .recipe-category-menu { position: fixed; z-index: var(--z-overlay); min-width: 220px; }
  .recipe-category-menu__head { display: none; }
  .recipe-category-menu__name { min-width: 0; overflow-wrap: anywhere; }
  .recipe-view-toggle button { display: inline-grid; place-items: center; }

  /* Library grid: 4 columns ≥1280, 3 ≥1024, 2 below (spec §7.7). */
  .recipe-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
  }
  .recipe-tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--dur-1) var(--ease-out);
  }
  a.recipe-tile:hover { border-color: var(--line-strong); }
  .recipe-tile__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-subtle);
  }
  .recipe-tile__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .recipe-tile__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-3); }
  .recipe-tile__placeholder svg { width: 32px; height: 32px; }
  .recipe-tile__body { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4) var(--s-4); min-width: 0; }
  .recipe-tile__name { font: var(--type-heading); color: var(--text); overflow-wrap: anywhere; }
  .recipe-tile__meta { font: var(--type-meta); color: var(--text-2); }
  .recipe-tile__status { margin-top: var(--s-1); }
  .recipe-tile__line { font: var(--type-caption); color: var(--text-2); }
  /* Long Icelandic names and reasons stay two lines; the tile's link keeps
     the full name for assistive tech and the detail shows it whole. */
  .recipe-tile :is(.recipe-tile__name, .recipe-tile__line) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .recipe-tile--skeleton .recipe-tile__body { gap: var(--s-2); }
  /* A recipe without a photo: a compact row-shaped tile, the category's glass
     icon on a calm neutral square beside the name. */
  .recipe-tile--plain { flex-direction: row; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
  .recipe-tile--plain .recipe-tile__body { padding: 0; }
  .recipe-tile__glyph { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--bg-subtle); color: var(--text-2); }
  .recipe-tile__glyph svg { width: 20px; height: 20px; }

  /* Detail (sheet on desktop, full screen on phones). */
  .recipe-sheet__actions { display: flex; align-items: center; gap: var(--s-2); }
  .recipe-sheet .atlas-sheet__title[tabindex="-1"]:focus { outline: none; }
  .recipe-detail { display: grid; gap: var(--s-6); align-content: start; }
  .recipe-photo { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--r-lg); background: var(--bg-subtle); }
  .recipe-detail-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
  .recipe-muted { margin: 0; font: var(--type-meta); color: var(--text-2); }
  .recipe-section { display: grid; gap: var(--s-3); }
  .recipe-section__title { margin: 0; font: var(--type-section); letter-spacing: var(--track-section); color: var(--text); }
  .recipe-build { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-subtle); }
  .recipe-build__row {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    min-height: 44px;
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line-subtle);
    font: var(--type-body-lg);
  }
  .recipe-build__qty { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; white-space: nowrap; }
  .recipe-build__name { min-width: 0; overflow-wrap: anywhere; }
  .recipe-build__name a { color: var(--text); text-decoration: none; }
  .recipe-build__name a:hover { color: var(--accent-text); text-decoration: underline; }
  .recipe-build__end { display: flex; align-items: center; gap: var(--s-3); }
  .recipe-build__cost { min-width: 64px; text-align: right; font: var(--type-num); font-variant-numeric: tabular-nums; }
  .recipe-method { margin: 0; padding-left: var(--s-5); font: var(--type-body-lg); color: var(--text); }
  .recipe-method li + li { margin-top: var(--s-2); }
  .recipe-method--single { padding-left: 0; }
  .recipe-notes { margin: 0; font: var(--type-body); color: var(--text); white-space: pre-line; }
  .recipe-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: 0; }
  .recipe-facts dt { font: var(--type-caption); color: var(--text-2); }
  .recipe-facts dd { margin: 2px 0 0; font: var(--type-body); color: var(--text); overflow-wrap: anywhere; }
  .recipe-stats { margin: 0; }
  .recipe-manage { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line-subtle); }

  .recipe-screen { display: grid; gap: var(--s-3); }
  .recipe-screen__title { margin: 0; font: 600 22px/28px var(--font-sans); letter-spacing: var(--track-title); color: var(--text); }
  .recipe-screen__actions { display: flex; gap: var(--s-2); }
  .recipe-screen .recipe-detail { margin-top: var(--s-2); }

  /* Editor */
  .recipe-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  .recipe-form legend { padding: 0; margin-bottom: var(--s-4); }
  .recipe-ingredient-picker {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(72px, 1fr) minmax(88px, 1fr) auto;
    align-items: end;
    gap: var(--s-2);
  }
  .recipe-ingredient-picker__search { grid-column: 1 / -1; }
  .recipe-ingredient-list { margin: 0; }
  .recipe-ingredient-list .recipe-build__qty { min-width: 64px; }
  .recipe-ingredient-empty { padding: var(--s-2) 0; list-style: none; }
  .recipe-upload .atlas-upload__thumb img[hidden] { display: none; }
  .recipe-cost-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: 0; }
  .recipe-cost-figures dt { font: var(--type-caption); color: var(--text-2); }
  .recipe-cost-figures dd { margin: 2px 0 0; font: var(--type-num); font-variant-numeric: tabular-nums; color: var(--text); }
  .recipe-save-state { font: var(--type-meta); color: var(--text-2); }
  .recipe-save-state.is-error { color: var(--danger); }
  .recipe-editor-more { position: relative; }
  .recipe-editor-more .atlas-menu { position: absolute; top: calc(100% + var(--s-1)); right: 0; z-index: 2; min-width: 200px; }

  @media (max-width: 1279px) { .recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 1023px) { .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* Phone recipe lookup (spec §8.3): two-column tiles with square photos;
     the detail reads at the bar — build and method 17/26. */
  @media (max-width: 767px) {
    .recipe-grid { gap: var(--s-3); }
    /* Search on its own row; the toolbar keeps the filters (spec §8.3). */
    .recipe-search--phone { display: block; margin-top: var(--s-3); }
    .recipe-search--desktop { display: none; }
    .recipes-page .page-head__actions [data-recipe-menu-link] { display: none; }
    .recipe-tile__media { aspect-ratio: 1 / 1; }
    .recipe-tile__body { padding: var(--s-2) var(--s-3) var(--s-3); }
    /* Category always shows under the name; glassware follows when it fits. */
    .recipe-tile__meta { display: flex; min-width: 0; white-space: nowrap; }
    .recipe-tile__category { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .recipe-tile__glass { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
    /* Category menu: a bottom sheet over a dimmed page. Its ::before is the
       tap-to-close backdrop (recipes.js), so a tap outside never opens a recipe. */
    .recipe-category-menu {
      inset: auto 0 0 0;
      width: auto;
      min-width: 0;
      max-width: none;
      max-height: min(70dvh, 520px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom));
      border-width: 1px 0 0;
      border-radius: var(--r-xl) var(--r-xl) 0 0;
      box-shadow: 0 0 0 100vmax var(--overlay), var(--shadow-pop);
      animation-name: atlas-sheet-up;
    }
    .recipe-category-menu::before { content: ''; position: fixed; inset: 0; z-index: -1; }
    .recipe-category-menu__head { display: block; }
    .recipe-category-menu .atlas-menu__item { height: auto; min-height: var(--touch); }
    /* Without photos the library is a one-column list of compact tiles, so a
       bartender sees most of the menu on one screen. */
    .recipe-grid--plain { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
    .recipe-tile--plain { align-items: center; padding: var(--s-2) var(--s-3); }
    .recipe-tile--plain .recipe-tile__body { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); padding: 0; }
    .recipe-tile--plain .recipe-tile__status { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
    .recipe-tile--plain :is(.recipe-tile__meta, .recipe-tile__line) { grid-column: 1; }
    .recipe-tile--plain .recipe-tile__line { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .recipe-view-toggle { display: none; }
    .recipe-build__row, .recipe-method { font: 400 var(--fs-section)/26px var(--font-sans); }
    .recipe-build__row { grid-template-columns: minmax(80px, auto) minmax(0, 1fr); }
    .recipe-build__end { grid-column: 2; }
    .recipe-sheet__actions { display: none; }
    .recipe-ingredient-picker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .recipe-ingredient-picker__item { grid-column: 1 / -1; }
    .recipe-ingredient-picker > .atlas-btn { grid-column: 1 / -1; }
    .recipe-cost-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* ---------- Flavor Intelligence (S95): Flavor Map (#recipes/flavor) and
     Create with Atlas. Light UI, Atlas blue for the centre and links, stock
     colours from the status tokens. Rings, rows and actions are 44 px targets. */
  .flavor-page { display: grid; gap: var(--s-4); min-width: 0; }
  .flavor-page .page-head { margin-bottom: 0; }
  .flavor-map__search { position: relative; max-width: 520px; min-width: 0; }
  .flavor-map__results {
    position: absolute;
    top: calc(100% + var(--s-1));
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    max-height: 320px;
    margin: 0;
    padding: var(--s-1);
    overflow: auto;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
  }
  .flavor-map__result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    min-height: 44px;
    padding: var(--s-2) var(--s-3);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text);
    font: var(--type-body);
    text-align: left;
    cursor: pointer;
  }
  .flavor-map__result:hover, .flavor-map__result.is-active { background: var(--bg-subtle); }
  .flavor-map__result:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
  .flavor-map__result-name { min-width: 0; overflow-wrap: anywhere; }
  .flavor-map__search-note { margin: var(--s-2) 0 0; font: var(--type-meta); color: var(--text-2); }
  .flavor-map__filters { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); min-width: 0; }
  .flavor-map__filter-group { min-width: 0; }

  .flavor-map {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
    grid-template-areas: "stage detail" "list list";
    align-items: start;
    gap: var(--s-5);
    min-width: 0;
    transition: opacity var(--dur-2) var(--ease-out);
  }
  .flavor-map.is-loading { opacity: .6; }
  .flavor-map--empty { grid-template-columns: minmax(0, 1fr); grid-template-areas: "empty"; }
  .flavor-map__empty { grid-area: empty; }
  .flavor-map__stage { grid-area: stage; min-width: 0; }
  .flavor-map__list { grid-area: list; min-width: 0; }
  .flavor-detail { grid-area: detail; }
  .flavor-map--loading { grid-template-areas: none; }
  .flavor-map__skel-ring { width: min(100%, 480px); aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; }
  .flavor-map__skel-list { display: grid; align-content: start; gap: var(--s-3); }

  /* The ring: the centre ingredient, its partners around it, one thin link
     each whose width and opacity follow the pairing strength. */
  .flavor-map__ring { position: relative; width: min(100% - 80px, 540px, max(320px, 72dvh)); aspect-ratio: 1 / 1; margin: var(--s-4) auto; }
  .flavor-map__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .flavor-map__link {
    stroke: var(--accent-brand);
    stroke-width: calc(1px + 2.5px * var(--flavor-weight));
    stroke-opacity: calc(.2 + .45 * var(--flavor-weight));
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .flavor-map__link.is-selected { stroke: var(--accent); stroke-opacity: 1; }
  .flavor-map__center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-content: center;
    gap: 2px;
    width: 30%;
    aspect-ratio: 1 / 1;
    padding: var(--s-2);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 6px var(--accent-soft);
    color: var(--text-on-accent);
    text-align: center;
    min-height: 0;
    overflow: hidden;
    transform: translate(-50%, -50%);
  }
  .flavor-map__center-name { font: var(--type-heading); overflow-wrap: anywhere; }
  .flavor-map__center-stock { font: var(--type-caption); }
  .flavor-map__node {
    position: absolute;
    top: var(--y);
    left: var(--x);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 44px;
    min-height: 44px;
    width: max-content;
    max-width: clamp(68px, 21%, 112px);
    padding: 4px 4px 2px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text);
    font: var(--type-label);
    text-align: center;
    cursor: pointer;
    transform: translate(-50%, -12px);
    animation: flavor-node-in var(--dur-3) var(--ease-out) both;
  }
  .flavor-map__node:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
  .flavor-map__label {
    display: -webkit-box;
    max-width: 100%;
    padding: 0 4px;
    overflow: hidden;
    border-radius: var(--r-xs);
    background: var(--surface);
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .flavor-map__node:hover .flavor-map__label { color: var(--accent-text); text-decoration: underline; }
  .flavor-map__node.is-selected .flavor-map__label { color: var(--accent-text); font-weight: 600; }
  .flavor-map__dot {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--bg-muted);
    box-shadow: 0 0 0 3px var(--surface);
  }
  [data-stock="available"] > .flavor-map__dot { border-color: var(--positive); background: var(--positive); }
  [data-stock="out"] > .flavor-map__dot { border-color: var(--danger); background: var(--danger-soft); }
  [data-stock="unknown"] > .flavor-map__dot { border-style: dashed; border-color: var(--text-3); background: var(--surface); }
  .flavor-map__node.is-selected > .flavor-map__dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
  @keyframes flavor-node-in {
    from { opacity: 0; transform: translate(-50%, -12px) scale(.85); }
    to { opacity: 1; transform: translate(-50%, -12px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .flavor-map__node { animation: none; }
    .flavor-map { transition: none; }
  }
  html.atlas-reduce-motion .flavor-map__node { animation: none; }
  html.atlas-reduce-motion .flavor-map { transition: none; }
  .flavor-map__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 0; padding: 0; list-style: none; font: var(--type-caption); color: var(--text-2); }
  .flavor-map__legend li { display: inline-flex; align-items: center; gap: 6px; }
  .flavor-map__legend .flavor-map__dot { width: 12px; height: 12px; box-shadow: none; }

  /* The accessible list: every partner on the ring, with its strength,
     evidence and stock, selectable for the detail panel. */
  .flavor-map__list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
  .flavor-map__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
  .flavor-map__row { display: flex; align-items: center; gap: var(--s-1); min-width: 0; border-bottom: 1px solid var(--line-subtle); }
  .flavor-map__row-main {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-1) var(--s-3);
    min-width: 0;
    min-height: 52px;
    padding: var(--s-2);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text);
    font: var(--type-body);
    text-align: left;
    cursor: pointer;
  }
  .flavor-map__row-main:hover { background: var(--bg-subtle); }
  .flavor-map__row-main:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
  .flavor-map__row.is-selected .flavor-map__row-main { background: var(--accent-soft); }
  .flavor-map__row-name { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
  .flavor-map__row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font: var(--type-meta); color: var(--text-2); }
  .flavor-map__row-centre { flex: none; width: 44px; height: 44px; }
  .flavor-meter { display: inline-block; flex: none; width: 48px; height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-muted); vertical-align: middle; }
  .flavor-meter > span { display: block; width: calc(var(--flavor-weight) * 100%); height: 100%; background: var(--accent-brand); }
  .flavor-map__basis { max-width: var(--reading-max); }

  /* Detail panel for the selected pair. */
  .flavor-detail { display: grid; align-content: start; gap: var(--s-4); min-width: 0; padding: var(--s-5); scroll-margin-top: calc(var(--topbar-h) + var(--s-3)); }
  .flavor-detail__head { display: grid; gap: 2px; }
  .flavor-detail__title { margin: 0; font: var(--type-section); letter-spacing: var(--track-section); color: var(--text); overflow-wrap: anywhere; }
  .flavor-detail__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; }
  .flavor-detail__facts dt { font: var(--type-caption); color: var(--text-2); }
  .flavor-detail__facts dd { display: flex; align-items: center; gap: var(--s-2); margin: 2px 0 0; font: var(--type-num); color: var(--text); }
  .flavor-detail__section { display: grid; gap: var(--s-2); min-width: 0; }
  .flavor-detail__section > p { margin: 0; }
  .flavor-detail__label { margin: 0; font: var(--type-label); color: var(--text-2); }
  .flavor-detail__evidence-list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
  .flavor-detail__evidence p { margin: var(--s-1) 0 0; font: var(--type-body); color: var(--text); overflow-wrap: anywhere; }
  .flavor-detail__evidence p.recipe-muted { font: var(--type-meta); color: var(--text-2); }
  .flavor-detail__stock { display: grid; gap: var(--s-1); padding-top: var(--s-2); border-top: 1px solid var(--line-subtle); }
  .flavor-detail__stock-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
  .flavor-detail__items { margin: 0; padding-left: var(--s-5); font: var(--type-meta); color: var(--text); }
  .flavor-possible { color: var(--warning); }
  .flavor-detail__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .flavor-detail__actions .atlas-btn { min-height: 44px; }

  /* Create with Atlas sheet. */
  .flavor-create__back { flex: none; margin: -6px 0 0 -8px; }
  .flavor-create__options { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
  .flavor-create__option {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 64px;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
  }
  .flavor-create__option:hover { border-color: var(--line-strong); background: var(--bg-subtle); }
  .flavor-create__option:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
  .flavor-create__option > span:nth-child(2) { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
  .flavor-create__option > svg { flex: none; color: var(--text-3); }
  .flavor-create__option-icon, .flavor-draft__icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }
  .flavor-create__option-label { font: var(--type-heading); color: var(--text); }
  .flavor-create__option-help { font: var(--type-meta); color: var(--text-2); }
  .flavor-brief { display: grid; gap: var(--s-5); min-width: 0; }
  .flavor-brief__group { display: grid; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; border: 0; }
  .flavor-brief__group legend { margin-bottom: var(--s-2); }
  .flavor-brief__types { flex-wrap: wrap; }
  .flavor-picker { display: grid; gap: var(--s-2); min-width: 0; }
  .flavor-picker .flavor-map__results { position: static; max-height: 240px; box-shadow: none; }
  .flavor-list { margin: 0; padding-left: var(--s-5); font: var(--type-meta); }
  .flavor-ideas__brief { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
  .flavor-ideas { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
  .flavor-idea { display: grid; gap: var(--s-3); min-width: 0; padding: var(--s-4); }
  .flavor-idea__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
  .flavor-idea__head > div { min-width: 0; }
  .flavor-idea__head .atlas-btn { min-height: 44px; }
  .flavor-idea__title { margin: 0; font: var(--type-heading); color: var(--text); overflow-wrap: anywhere; }
  .flavor-idea__ingredients { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
  .flavor-idea__ingredient { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); font: var(--type-body); }
  .flavor-idea__role { font: var(--type-caption); color: var(--text-2); }
  .flavor-idea__name { min-width: 0; overflow-wrap: anywhere; }
  .flavor-idea__lines { margin: 0; padding-left: var(--s-5); font: var(--type-meta); color: var(--text-2); }
  .flavor-idea__buy, .flavor-idea__pair { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; font: var(--type-meta); color: var(--text); }
  .flavor-idea__buy > svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--warning); }
  .flavor-idea > p { margin: 0; }
  .flavor-idea__scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3) var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line-subtle); }
  .flavor-idea__group h4 { margin: 0 0 var(--s-1); font: var(--type-label); color: var(--text-2); }
  .flavor-idea__group dl { display: grid; gap: 2px; margin: 0; }
  .flavor-idea__group dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--s-2); font: var(--type-meta); }
  .flavor-idea__group dt { color: var(--text-2); }
  .flavor-idea__group dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
  .flavor-idea__group > p { margin: var(--s-1) 0 0; font: var(--type-caption); }
  .flavor-draft { display: grid; gap: var(--s-4); min-width: 0; padding: var(--s-5); }
  .flavor-draft__head { display: flex; align-items: flex-start; gap: var(--s-3); }
  .flavor-draft__head > div { flex: 1 1 auto; min-width: 0; }
  .flavor-draft__title { margin: 0; font: var(--type-section); color: var(--text); overflow-wrap: anywhere; }
  .flavor-draft__promise { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); font: var(--type-body); }
  .flavor-draft__promise > svg { flex: none; width: var(--icon-md); height: var(--icon-md); }
  .flavor-draft__rename { display: flex; gap: var(--s-2); min-width: 0; }
  .flavor-draft__rename .atlas-input { flex: 1 1 auto; min-width: 0; }
  .flavor-draft__note { font: var(--type-meta); color: var(--text-2); }
  .flavor-draft__note p { margin: 0; }
  .flavor-draft__note p + p { margin-top: var(--s-1); }
  .flavor-draft__money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flavor-create__approve .atlas-btn { min-height: 44px; }
  .flavor-sub { display: grid; gap: var(--s-4); min-width: 0; }
  .flavor-sub__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
  .flavor-sub__head p { margin: 0; }
  .flavor-sub__original { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font: var(--type-body); }
  .flavor-sub__list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
  .flavor-sub__row { display: grid; gap: var(--s-2); padding: var(--s-4); }
  .flavor-sub__row p { margin: 0; }
  .flavor-sub__row .atlas-btn { justify-self: start; min-height: 44px; }
  .flavor-sub__row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
  .flavor-sub__basis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font: var(--type-meta); color: var(--text-2); }
  .flavor-sub__loading { display: grid; gap: var(--s-3); }

  @media (max-width: 1023px) {
    .flavor-map { grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); }
    .flavor-map__rows { grid-template-columns: minmax(0, 1fr); }
  }
  /* Phones: list first (the ring's equivalent), then the selected pair, then
     the ring itself. */
  @media (max-width: 767px) {
    .flavor-map, .flavor-map--loading { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list" "detail" "stage"; gap: var(--s-4); }
    .flavor-map--empty { grid-template-areas: "empty"; }
    .flavor-map__search { max-width: none; }
    .flavor-detail, .flavor-draft { padding: var(--s-4); }
    .flavor-map__filters { flex-wrap: nowrap; gap: var(--s-2); margin: 0 calc(-1 * var(--page-gutter)); padding: 0 var(--page-gutter); overflow-x: auto; scrollbar-width: none; }
    .flavor-map__filters::-webkit-scrollbar { display: none; }
    .flavor-map__filter-group { flex: none; flex-wrap: nowrap; }
    .flavor-map__center { width: 36%; padding: var(--s-1); }
    .flavor-map__node { max-width: 96px; font: var(--type-caption); }
    .flavor-map__center-name { font: var(--type-label); font-weight: 600; }
    .flavor-page .page-head__actions [data-flavor-back] { display: none; }
    .flavor-map__filters .atlas-chip { height: var(--touch); }
    .flavor-idea__ingredient { grid-template-columns: minmax(0, 1fr) auto; }
    .flavor-idea__role { grid-column: 1 / -1; }
    .flavor-draft__rename { flex-wrap: wrap; }
    .flavor-draft__rename .atlas-btn { flex: 1 1 auto; }
  }
  /* Short landscape phones (844 × 390): the ring fits the height and the
     detail sits beside it. */
  @media (max-height: 560px) and (min-width: 768px) {
    .flavor-map { grid-template-columns: minmax(0, 1.3fr) minmax(260px, .8fr); }
    .flavor-map__ring { width: min(100% - 64px, 420px); }
    .flavor-map__node { font: var(--type-caption); }
  }
}