/* ------------------------------------------------------------------
   calories.jp — Food Dash design language
   Warm cream ground, orange accent, pill controls, and photographs set
   in dashed circular frames. Measurements keep the tabular mono voice
   so the data still reads as instrumentation, not marketing.
   ------------------------------------------------------------------ */
:root {
  /* ground */
  --paper: #FFF8F3;
  --paper-raised: #FFFFFF;
  --peach: #FDECE1;
  --peach-deep: #FBDCC9;
  /* ink */
  --ink: #2B2118;
  --ink-soft: #6B5B50;
  /* Was #A2938A: 2.8:1 on --paper. Now 5.0:1, 4.6:1 on --peach. */
  --ink-faint: #78695F;
  --rule: #2B2118;
  --hairline: #F0E2D8;
  /* accent. Was #F26722, which carries text as well as fills: white on it
     was 3.1:1 and it on --paper 3.0:1, against WCAG AA's 4.5:1 (PageSpeed,
     2026-09-29). #C2410C is 5.2:1 under white text and 4.9:1 on --paper. */
  --accent: #C2410C;
  --accent-dark: #9A3412;
  --accent-soft: #FFF0E6;
  --seal: #C2410C;
  /* PFC data hues, warmed to sit on cream */
  --p-hue: #3E7CA6;
  --f-hue: #E8A33D;
  --c-hue: #7FA24A;
  /* semantic */
  --verified: #2E8B57;
  --estimate: #C4721A;
  --estimate-bg: #FFF2E2;
  --verified-bg: #E9F5EE;

  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* Body text in the phone's own Japanese font: Zen Kaku for running text was ~74
     subset files on a page (mobile PageSpeed 60). Headings keep Zen Kaku. */
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Segoe UI", Meiryo, sans-serif;
  --font-data: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --wrap: 1040px;
  --radius: 14px;
  --radius-sm: 10px;
  --pill: 999px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.1rem; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--seal); }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

h1 { font-family: var(--font-display); font-weight: 900; font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0.9rem 0 0.35rem; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; margin: 0 0 0.6rem; }
h3 { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; margin: 0.4rem 0; }

/* numbers are the instrument: mono, tabular */
.num, .nutrition-table td:last-child, .nutrition-table td[data-field],
#meal-table td:nth-child(n+2), .kcal, .kcal-hero strong {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- header */
.site-header {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 50;
}
.header-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center; padding: 0.55rem 1.1rem; max-width: var(--wrap); margin: 0 auto; }
.brand {
  font-family: var(--font-display); font-weight: 900; font-size: 1.05rem;
  text-decoration: none; white-space: nowrap; letter-spacing: 0.01em;
  display: flex; align-items: center; gap: 0.45rem;
}
.brand-tld { color: var(--accent); }
.brand::before {
  content: ""; width: 0.85em; height: 0.85em; border-radius: 2px;
  background: var(--accent); display: inline-block;
}
.header-search { display: flex; flex: 1 1 260px; min-width: 210px; position: relative; }
.header-search input {
  flex: 1; padding: 0.5rem 0.75rem; font-size: 0.95rem; font-family: var(--font-body);
  border: 1.5px solid var(--ink); border-right: none; border-radius: var(--pill) 0 0 var(--pill);
  background: var(--paper-raised); color: var(--ink);
}
.header-search button {
  padding: 0.5rem 1.15rem; font-size: 0.95rem; font-family: var(--font-display); font-weight: 700;
  border: 1.5px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: 0 var(--pill) var(--pill) 0; cursor: pointer;
}
.header-search button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.header-nav { display: flex; gap: 1rem; font-size: 0.88rem; flex-wrap: wrap; }
.header-nav a { text-decoration: none; color: var(--ink-soft); }
.header-nav a:hover { color: var(--ink); }
.lang-switch { font-weight: 700; color: var(--ink) !important; }

/* ---------------------------------------------------------------- hero */
.hero { text-align: center; padding: 3rem 0 1.4rem; }
.hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 900; margin-bottom: 0.4rem; }
.hero-sub { color: var(--ink-soft); margin: 0 0 1.4rem; font-size: 1rem; }
.hero-search { display: flex; max-width: 580px; margin: 0 auto 0.9rem; position: relative; }
.hero-search input {
  flex: 1; padding: 0.9rem 1.3rem; font-size: 1.05rem; font-family: var(--font-body);
  border: 2px solid var(--accent); border-right: none; border-radius: var(--pill) 0 0 var(--pill);
  background: var(--paper-raised); color: var(--ink);
}
.hero-search button {
  padding: 0.9rem 1.8rem; font-size: 1rem; font-family: var(--font-display); font-weight: 700;
  border: 2px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: 0 var(--pill) var(--pill) 0; cursor: pointer;
}
.hero-search button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.examples { color: var(--ink-faint); font-size: 0.9rem; }
.examples a { margin: 0 0.45rem; color: var(--ink-soft); }

/* suggestion dropdown (shared) */
.suggest-box { position: relative; }
.dropdown {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: var(--radius);
  list-style: none; margin: 0; padding: 0.25rem; max-height: 320px; overflow-y: auto;
  box-shadow: 3px 3px 0 rgba(25, 29, 26, 0.12); text-align: left;
}
.dropdown li { padding: 0.5rem 0.65rem; cursor: pointer; border-radius: 2px;
  display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; font-size: 0.93rem; }
.dropdown li:hover, .dropdown li[aria-selected="true"] { background: var(--paper); outline: 1px solid var(--hairline); }
.dropdown .kcal { color: var(--ink-faint); font-size: 0.8rem; white-space: nowrap; }

/* ---------------------------------------------------------------- label plate (the signature card) */
.card {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 2px 14px rgba(43, 33, 24, 0.05);
  padding: 1.1rem 1.3rem;
  margin: 1.1rem 0;
}
.card > h2:first-child {
  border-bottom: 2px solid var(--peach-deep); padding-bottom: 0.45rem; margin-bottom: 0.7rem;
}

/* food page hero — generated imagery beside the headline figures */
.food-hero {
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center;
  border: 1.5px solid var(--ink); border-left: 5px solid var(--c, var(--ink));
  border-radius: var(--radius); background: var(--paper-raised);
  padding: 1.1rem 1.3rem; margin: 1rem 0;
}
.food-hero-figure { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); }
.food-hero-body { min-width: 0; }
.fingerprint { animation: fp-in 0.7s ease-out both; }
.pfc-donut { animation: fp-in 0.5s ease-out both; }
@keyframes fp-in { from { opacity: 0; transform: scale(0.9) rotate(-8deg); } to { opacity: 1; transform: none; } }
.fingerprint-note { font-size: 0.8rem; color: var(--ink-faint); margin: 0.5rem 0 0; }
@media (max-width: 700px) {
  .food-hero { grid-template-columns: 1fr; gap: 0.8rem; }
  .food-hero-figure { justify-content: flex-start; }
}

.kcal-hero { margin: 0.7rem 0 0.4rem; display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.kcal-hero strong { font-size: 3.1rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.kcal-hero .unit { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.kcal-hero .per { color: var(--ink-faint); font-size: 0.92rem; }

/* PFC energy-ratio bar — the signature */
.pfc { margin: 0.9rem 0 0.3rem; }
.pfc-bar { display: flex; height: 14px; border: 1.5px solid var(--ink); border-radius: 2px; overflow: hidden; background: var(--hairline); }
.pfc-bar span { display: block; height: 100%; transform-origin: left; animation: pfc-grow 0.6s ease-out; }
@keyframes pfc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pfc-p { background: var(--p-hue); }
.pfc-f { background: var(--f-hue); }
.pfc-c { background: var(--c-hue); }
.pfc-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.35rem; }
.pfc-legend b { font-family: var(--font-data); font-weight: 600; }
.pfc-legend i { font-style: normal; display: inline-block; width: 0.7em; height: 0.7em; border-radius: 2px; margin-right: 0.35em; vertical-align: baseline; }
.pfc-legend .lp i { background: var(--p-hue); } .pfc-legend .lf i { background: var(--f-hue); } .pfc-legend .lc i { background: var(--c-hue); }

/* ---------------------------------------------------------------- tables */
.nutrition-table { width: 100%; border-collapse: collapse; }
.nutrition-table td, .nutrition-table th {
  padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--hairline); text-align: left;
  font-size: 0.95rem;
}
.nutrition-table th { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; border-bottom: 2px solid var(--peach-deep); color: var(--ink-soft); }
.nutrition-table td:last-child, .nutrition-table th:last-child { text-align: right; }
.nutrition-table tr:last-child td { border-bottom: none; }
.nl-en { color: var(--ink-faint); font-size: 0.82em; }

/* badges */
.here-badge {
  display: inline-block; background: var(--verified-bg); color: var(--verified);
  font-size: 0.74rem; font-family: var(--font-display); font-weight: 700;
  border-radius: 2px; padding: 0.12rem 0.5rem; vertical-align: middle; letter-spacing: 0.02em;
}
.src-badge, .badge-db {
  display: inline-block; background: var(--verified-bg); color: var(--verified);
  font-size: 0.74rem; font-family: var(--font-display); font-weight: 700;
  border-radius: 2px; padding: 0.12rem 0.5rem; vertical-align: middle; letter-spacing: 0.02em;
}
.badge-ai {
  display: inline-block; background: var(--estimate-bg); color: var(--estimate);
  font-size: 0.74rem; font-family: var(--font-display); font-weight: 700;
  border-radius: 2px; padding: 0.12rem 0.5rem; letter-spacing: 0.02em;
}
.jdi8-badge {
  display: inline-block; border: 1.5px solid var(--ink); border-radius: 2px;
  font-size: 0.78rem; font-family: var(--font-display); font-weight: 700;
  padding: 0.12rem 0.55rem; margin-left: 0.2rem;
}
.jdi8-badge b { font-family: var(--font-data); font-weight: 600; }

.alt-name { color: var(--ink-soft); margin: 0.1rem 0; font-size: 0.95rem; }
.qualified-name { color: var(--ink-faint); margin: 0.1rem 0 0.3rem; font-size: 0.83rem;
  font-family: var(--font-data); letter-spacing: -0.01em; }
.breadcrumbs { font-size: 0.82rem; color: var(--ink-faint); margin-top: 1rem; }
.breadcrumbs a { color: var(--ink-soft); }

/* calculator */
.calc-controls { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.calc-controls label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); }
.calc-controls input, .calc-controls select {
  font-size: 1.05rem; font-family: var(--font-data); padding: 0.45rem 0.6rem;
  border: 1.5px solid var(--ink); border-radius: var(--radius); min-width: 8.5rem;
  background: var(--paper-raised); color: var(--ink);
}
.calc-note { color: var(--ink-faint); font-size: 0.83rem; }
.no-data { color: var(--ink-faint); font-style: italic; }
details summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; padding: 0.25rem 0; }
details[open] summary { border-bottom: 1px solid var(--hairline); margin-bottom: 0.5rem; }

/* related & tiles */
.related h2, section > h2 { border-bottom: 2px solid var(--peach-deep); padding-bottom: 0.4rem; }
.related-list, .tile-list { list-style: none; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.55rem; }
.related-list a, .tile-list a {
  display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline;
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 0.55rem 0.75rem; font-size: 0.9rem;
  text-decoration: none;
}
.related-list a:hover, .tile-list a:hover { border-color: var(--ink); }
.tile-list .kcal { color: var(--ink-faint); font-size: 0.8rem; white-space: nowrap; }

/* category chips — colour and glyph come from the food group itself */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; list-style: none; }
.chip-row a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1.5px solid var(--hairline); border-left: 4px solid var(--c, var(--ink));
  border-radius: var(--radius);
  padding: 0.3rem 0.8rem; font-size: 0.86rem; font-family: var(--font-display); font-weight: 700;
  text-decoration: none; background: var(--paper-raised);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.chip-row a:hover {
  border-color: var(--c, var(--ink)); border-left-color: var(--c, var(--ink));
  transform: translateY(-1px); box-shadow: 0 2px 0 rgba(25, 29, 26, 0.10);
}
.chip-glyph { font-size: 1em; line-height: 1; }
.chip-row .count { font-family: var(--font-data); font-weight: 400; color: var(--ink-faint); font-size: 0.78rem; }

/* ---------------------------------------------------------------- PFC atlas */
.atlas-section { margin: 2.4rem 0 1.6rem; }
.atlas-head h2 { border-bottom: 2px solid var(--peach-deep); padding-bottom: 0.4rem; }
.atlas-sub { color: var(--ink-soft); font-size: 0.92rem; max-width: 60ch; margin: 0.5rem 0 0.9rem; }
.atlas-count { font-family: var(--font-data); font-weight: 600; color: var(--ink); }
.atlas-stage {
  position: relative; height: 420px; max-width: 720px; margin: 0 auto;
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(25, 29, 26, 0.045), transparent 68%),
    var(--paper-raised);
  overflow: hidden;
}
.atlas-stage canvas { width: 100%; height: 100%; display: block; }
.atlas-axis {
  position: absolute; font-family: var(--font-display); font-weight: 700;
  font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); pointer-events: none;
}
.atlas-axis-p { top: 0.7rem; left: 50%; transform: translateX(-50%); }
.atlas-axis-f { bottom: 0.7rem; left: 1.1rem; }
.atlas-axis-c { bottom: 0.7rem; right: 1.1rem; }
.atlas-tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -140%);
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius); padding: 0.35rem 0.6rem;
  display: flex; flex-direction: column; gap: 0.1rem; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(25, 29, 26, 0.25);
}
.atlas-tip[hidden] { display: none; }   /* display:flex above would defeat [hidden] */
.atlas-tip-name { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; }
.atlas-tip-meta { font-family: var(--font-data); font-size: 0.74rem; opacity: 0.75; }
.atlas-fallback {
  position: absolute; inset: 0; margin: 0; display: none;
  align-items: center; justify-content: center; text-align: center;
  color: var(--ink-faint); font-size: 0.9rem; padding: 2rem;
}
.atlas-unavailable .atlas-fallback { display: flex; }
.atlas-unavailable .atlas-axis, .atlas-unavailable canvas { display: none; }
.atlas-legend { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.7rem 0 0.5rem; }
.atlas-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--paper-raised); color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 700; font-size: 0.76rem;
  padding: 0.2rem 0.7rem 0.2rem 0.5rem; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.atlas-chip::before {
  content: ""; width: 0.6em; height: 0.6em; border-radius: 50%;
  background: var(--c); flex: none;
}
.atlas-chip:hover { color: var(--ink); border-color: var(--c); }
.atlas-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.atlas-unavailable .atlas-legend { display: none; }
@media (max-width: 640px) { .atlas-stage { height: 320px; } }

/* search results */
.result-list { list-style: none; padding: 0; }
.result { margin: 0.55rem 0; padding: 0.75rem 1rem; }
.result a { display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap; text-decoration: none; }
.result-title { font-family: var(--font-display); font-weight: 700; }
.result .kcal { color: var(--ink-soft); font-size: 0.86rem; }

/* provenance */
.provenance { background: var(--paper); }
.provenance .source-name { font-family: var(--font-display); font-weight: 700; margin: 0.2rem 0; }
.provenance .license, .provenance .attribution, .mt-note { font-size: 0.84rem; color: var(--ink-soft); margin: 0.25rem 0; }

/* home tools */
.home-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.tool-card { display: block; text-decoration: none; transition: transform 0.12s ease; }
.tool-card:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(25,29,26,0.15); }
.tool-card p { color: var(--ink-soft); font-size: 0.88rem; margin: 0.3rem 0 0; }

/* meal calc */
.meal-search { position: relative; margin-bottom: 1rem; }
.meal-search input { width: 100%; padding: 0.65rem 0.85rem; font-size: 1rem; font-family: var(--font-body);
  border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--paper-raised); }
#meal-table input { width: 5.5rem; padding: 0.3rem 0.4rem; font-family: var(--font-data);
  border: 1.5px solid var(--ink); border-radius: 2px; }
#meal-total-row td { font-weight: 700; border-top: 2px solid var(--accent); }
.remove-btn { background: none; border: none; color: var(--seal); cursor: pointer; font-size: 1.05rem; padding: 0.1rem 0.35rem; }

/* analyzer */
.upload-label { display: inline-block; background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 700;
  border-radius: var(--radius); padding: 0.65rem 1.3rem; cursor: pointer; }
.upload-label:hover { background: var(--ink-soft); }
.upload-label input { display: none; }
.analyzer-component { border-bottom: 1px solid var(--hairline); padding: 0.8rem 0; }
.analyzer-component:last-child { border-bottom: none; }
.analyzer-error { color: var(--seal); }

/* photographs — landing and tool pages only, never a data page.
   Set in a dashed circular frame: the ring is the design's signature and it
   also signals "this is a picture, not a measurement". */
.framed-media {
  margin: 1.6rem auto 1.8rem;
  display: flex; justify-content: center;
}
.circle-frame {
  position: relative;
  border-radius: 50%;
  border: 2.5px dashed var(--accent);
  padding: 12px;
  background: var(--paper-raised);
  width: min(340px, 78vw);
  aspect-ratio: 1;
  animation: frame-in 0.6s ease-out both;
}
.circle-frame img {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  background: var(--peach);
}
@keyframes frame-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* The home hero sets its photograph beside the headline, larger. */
.hero-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.4rem; align-items: center;
  background: var(--peach); border-radius: 28px; padding: 2.6rem 2.4rem; margin: 1.2rem 0 1.6rem; }
.hero-split .hero { text-align: left; padding: 0; }
.hero-split .hero-search { margin-left: 0; }
.hero-split .framed-media { margin: 0; }
.hero-split .circle-frame { width: min(360px, 80vw); }
@media (max-width: 820px) {
  .hero-split { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.8rem 1.3rem; text-align: center; }
  .hero-split .hero { text-align: center; }
  .hero-split .hero-search { margin-left: auto; }
}

.framed-video { max-width: 680px; margin: 1.4rem auto; }
.video-frame {
  position: relative; aspect-ratio: 16 / 9;
  border: 2.5px dashed var(--accent); border-radius: var(--radius);
  overflow: hidden; background: var(--ink); padding: 0;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* guides */
.guide-lead { font-size: 1.05rem; color: var(--ink-soft); max-width: 62ch; }
.guide { max-width: 62rem; }
.guide-food { font-weight: 600; }
.guide-dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%;
  background: var(--c, var(--ink)); margin-right: 0.45em; vertical-align: baseline; }
.guide-ratio { white-space: nowrap; }
.guide-track { display: inline-block; width: 60px; height: 6px; background: var(--hairline);
  border-radius: 3px; margin-left: 0.5rem; overflow: hidden; vertical-align: middle; }
.guide-fill { display: block; height: 100%; background: var(--c, var(--ink)); border-radius: 3px; }
.nutrition-table td a { text-decoration-color: var(--hairline); }
.nutrition-table td b { font-family: var(--font-data); margin-left: 0.3rem; }

/* prose / steps */
.prose p { white-space: pre-line; }
.steps { padding-left: 1.3rem; }
.steps li { margin-bottom: 0.45rem; }

/* prep comparison + faq */
.row-current td { background: var(--verified-bg); }
.faq-item { border-bottom: 1px solid var(--hairline); padding: 0.15rem 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item summary { font-size: 0.98rem; }
.faq-item p { margin: 0.3rem 0 0.7rem; color: var(--ink-soft); }

/* browse */
.browse-controls { margin: 0.8rem 0; }
.browse-controls label { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--ink-soft); }
.browse-controls select { font-family: var(--font-body); font-size: 0.95rem; padding: 0.35rem 0.5rem;
  border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--paper-raised); margin-left: 0.4rem; }
.pager { display: flex; gap: 1.2rem; align-items: center; justify-content: center; margin: 1.2rem 0 2rem; }
.pager a { font-family: var(--font-display); font-weight: 700; border: 1.5px solid var(--ink);
  border-radius: var(--radius); padding: 0.4rem 0.9rem; text-decoration: none; }
.pager a:hover { background: var(--ink); color: var(--paper); }
.pager-pos { font-family: var(--font-data); color: var(--ink-faint); font-size: 0.88rem; }

/* footer */
.site-footer { background: var(--peach); border-top: 1px solid var(--peach-deep); margin-top: 3rem;
  padding: 1.5rem 0 2.2rem; color: var(--ink-soft); font-size: 0.86rem; }
.site-footer a { color: var(--ink-soft); }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1.5rem; }
.footer-cols h3 { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.4rem; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: 0.25rem; }
.footer-brand { font-family: var(--font-display); font-weight: 900; color: var(--ink); margin: 0 0 0.3rem; }
@media (max-width: 640px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

/* analyzer report */
.report-h { border-bottom: 2px solid var(--peach-deep); padding-bottom: 0.4rem; margin-top: 1.5rem; }
.dv-bars { margin: 0.8rem 0; }
.dv-row { display: grid; grid-template-columns: 7.5rem 1fr 8.5rem; gap: 0.7rem; align-items: center; margin: 0.4rem 0; }
.dv-label { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; }
.dv-track { display: block; height: 9px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.dv-fill { display: block; height: 100%; background: var(--verified); border-radius: 2px; }
.dv-fill.over { background: var(--seal); }
.dv-val { font-family: var(--font-data); font-size: 0.85rem; text-align: right; }
.dv-val em { font-style: normal; color: var(--ink-faint); }
.micro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; margin: 0.8rem 0; }
.micro-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.25rem; }
.micro-name { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; color: var(--ink-soft); }
.micro-val { font-family: var(--font-data); font-size: 1.05rem; }
.micro-dv { font-size: 0.75rem; color: var(--ink-faint); }
.insight { border: 1px solid var(--hairline); border-left: 4px solid var(--verified); border-radius: var(--radius); padding: 0.55rem 0.8rem; margin: 0.4rem 0; font-size: 0.92rem; }
.insight-warn { border-left-color: var(--seal); }
.print-btn { border: 1.5px solid var(--ink); background: var(--paper-raised); border-radius: var(--radius); font-family: var(--font-display); font-weight: 700; padding: 0.5rem 1.1rem; cursor: pointer; }
.print-btn:hover { background: var(--ink); color: var(--paper); }
.goals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

@media print {
  .site-header, .site-footer, .upload-label, .no-print, .skip-link { display: none !important; }
  body { background: #fff; }
  .card { border-color: #000; }

  /* On the analyzer page, the printed page is the report: the photograph,
     the dishes with their ingredients, the totals and the notes. Everything
     that frames the report on screen — the page heading, the intro, the
     ambient video, the upload control, breadcrumbs — is furniture, and
     furniture is not what someone is trying to keep. */
  body:has(#analyzer-result) #main > *:not(#analyzer):not(.home-analyzer),
  .analyzer-widget > *:not(#analyzer-result),
  .home-analyzer .analyzer-more,
  #analyzer .framed-media, #analyzer-status { display: none !important; }
  .analyzer-widget, .home-analyzer { margin: 0; padding: 0; border: none; box-shadow: none; }
  .analyzed-photo { max-width: 8cm; margin: 0 0 0.6cm; }
  .analyzed-photo img { border: 1px solid #000; }
  .dish-block { break-inside: avoid; }
  .micro-grid { grid-template-columns: repeat(4, 1fr); }
  .report-h { break-after: avoid; }
}

/* skip link */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.5rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }

@media (max-width: 640px) {
  h1 { font-size: 1.35rem; }
  .kcal-hero strong { font-size: 2.5rem; }
  .header-nav { font-size: 0.8rem; gap: 0.7rem; }
  .nutrition-table td, .nutrition-table th { font-size: 0.9rem; padding: 0.45rem 0.35rem; }
}

.atlas-tip-muted { background: var(--ink-soft); }

/* Wide data tables scroll inside their card rather than bleeding off a phone.
   Tables carrying .stack-table restack on narrow screens instead, and no
   longer need a minimum width to stay readable. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.2rem; }
@media (max-width: 700px) {
  .card { padding-left: 0.85rem; padding-right: 0.85rem; }
  .nutrition-table td:not(:first-child) { white-space: nowrap; }
  .nutrition-table td:first-child, .nutrition-table th:first-child { white-space: normal; }
  /* the fingerprint and the energy ring sit side by side until they cannot */
  .food-hero-figure { flex-wrap: wrap; }
}

/* Headline highlight — the reference design splits the line with accent colour */
.hl { color: var(--accent); }
.hero-split .hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.25; }

/* Feature strip under the hero */
.feature-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: -2.6rem auto 2rem;
  max-width: 92%; box-shadow: 0 6px 22px rgba(43, 33, 24, 0.07); position: relative; z-index: 2;
}
.feature { display: flex; gap: 0.8rem; align-items: flex-start; }
.feature-mark {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
}
.feature h3 { margin: 0 0 0.15rem; font-size: 0.95rem; }
.feature p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 820px) { .feature-strip { margin-top: 1rem; max-width: 100%; } }

/* Chips and tiles pick up the warm ground */
.chip-row a { border-radius: var(--pill); border-width: 1px; border-left-width: 4px; }
.related-list a, .tile-list a { border-radius: var(--radius-sm); }
.tool-card { border-radius: var(--radius); }
.tool-card:hover { box-shadow: 0 8px 24px rgba(194, 65, 12, 0.16); border-color: var(--accent); }
.pager a, .print-btn, .upload-label { border-radius: var(--pill); }
.upload-label { background: var(--accent); border: none; }
.upload-label:hover { background: var(--accent-dark); }
.pager a { border-color: var(--hairline); }
.pager a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.jdi8-badge { border-color: var(--peach-deep); border-radius: var(--pill); background: var(--accent-soft); color: var(--accent-dark); }
.here-badge, .src-badge, .badge-db { border-radius: var(--pill); }
.badge-ai { border-radius: var(--pill); }
.atlas-stage { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper-raised); }
.food-hero { border: 1px solid var(--hairline); border-left: 5px solid var(--c, var(--accent)); border-radius: var(--radius); }
.dropdown { border: 1px solid var(--hairline); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(43,33,24,0.10); }
.calc-controls input, .calc-controls select, .browse-controls select, .meal-search input, #meal-table input {
  border: 1px solid var(--hairline); border-radius: var(--pill); background: var(--paper);
}
.calc-controls input:focus, .meal-search input:focus { border-color: var(--accent); }

/* Video sits in the same circular frame as a photograph.

   border-radius alone is not enough: a playing video is promoted to its own
   compositor layer, and mobile Chrome draws that layer square, ignoring the
   rounded corners of the element — the clip has to be one the compositor
   itself applies. clip-path and a radial mask both are, so the frame holds
   on Android as well as on the desktop. */
.circle-frame video,
.circle-frame iframe {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; border: 0;
  clip-path: circle(50% at 50% 50%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 99%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 99%, transparent 100%);
  background: var(--peach);
}
/* Ambient loops start from ambient.js, which checks prefers-reduced-motion —
   the autoplay attribute would ignore it, and CSS cannot stop playback. */

/* ================================================================ mobile
   Phone layout. Three rules keep everything inside the viewport:
   grid and flex children get min-width: 0 (their default of auto lets a
   long input or heading push the whole page sideways), long URLs may break
   anywhere, and wide tables restack instead of scrolling out of sight. */

/* A grid cell is as wide as its widest child unless told otherwise, and a
   search input's intrinsic width is around 380px — that alone was pushing
   the home hero past the edge of a phone. */
.hero-split .hero, .hero-split > * { min-width: 0; }
.hero-search, .header-search { max-width: 100%; }
.hero-search input, .header-search input, .meal-search input { min-width: 0; }

/* Attribution links are raw URLs with no spaces in them. */
.src-link, .sources-list a, .attribution a { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  /* The header was three stacked rows — a third of a phone screen, and it
     is sticky, so it stayed there. The nav scrolls sideways on one line. */
  .header-row { padding: 0.5rem 0.9rem; gap: 0.4rem 0.9rem; }
  .header-nav {
    flex-wrap: nowrap; overflow-x: auto; width: 100%;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 0.1rem;
  }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav a { white-space: nowrap; }

  /* Photographs are atmosphere; they should not cost a whole screen. */
  .hero-split .circle-frame, .framed-media .circle-frame { width: min(260px, 68vw); }
  .hero-split { padding: 1.5rem 1.1rem; border-radius: 20px; }
}

@media (max-width: 640px) {
  /* Restack wide tables: one row becomes a name line plus a row of
     labelled figures, so nothing is cut off and nothing needs scrolling. */
  /* A wrapper around a restacking table has nothing left to scroll. */
  .table-scroll:has(> .stack-table) { overflow-x: visible; margin: 0; }
  .stack-table { min-width: 0; width: 100%; }
  .stack-table:not(.sortable) thead { display: none; }
  /* A sortable table keeps its headings — they are the sort controls — but
     as a wrapped row of chips rather than a table row. */
  .stack-table.sortable thead, .stack-table.sortable thead tr { display: block; }
  .stack-table.sortable thead tr {
    display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: none; padding-bottom: 0.5rem;
  }
  .stack-table.sortable thead th {
    border: 1px solid var(--hairline); border-radius: var(--pill);
    padding: 0.25rem 0.65rem; font-size: 0.76rem; background: var(--paper-raised);
  }
  /* `display: grid` on a row outranks the browser's own rule for [hidden], so
     a row a filter had hidden went on showing on phones and only on phones. */
  .stack-table tbody tr[hidden], .stack-table tfoot tr[hidden] { display: none !important; }
  .stack-table tbody tr, .stack-table tfoot tr {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 0.1rem 0.4rem; padding: 0.6rem 0; align-items: end;
    border-bottom: 1px solid var(--hairline);
  }
  .stack-table tbody td, .stack-table tfoot td {
    border: none; padding: 0; white-space: normal; text-align: left;
    font-family: var(--font-data); font-size: 0.88rem;
  }
  .stack-table tbody td:first-child, .stack-table tfoot td:first-child {
    grid-column: 1 / -1; font-family: var(--font-body); font-size: 0.98rem;
  }
  /* beats .nutrition-table td:last-child, which right-aligns the last column
     — correct in a table, wrong once the cells are a labelled row */
  .stack-table tbody td:last-child, .stack-table tfoot td:last-child { text-align: left; }
  /* Highlighting the cells leaves the grid gaps unpainted, which reads as
     stripes; the row is what is being highlighted. */
  .stack-table tr.row-current { background: var(--verified-bg); border-radius: var(--radius-sm); }
  .stack-table tr.row-current td { background: none; }
  .stack-table td[data-label]::before {
    content: attr(data-label); display: block;
    font-family: var(--font-body); font-size: 0.66rem; font-weight: 400;
    color: var(--ink-faint); line-height: 1.4;
  }
  /* Four figures across five tracks reads as a ragged row; give the name
     line the leftover track instead by starting the figures at column 1. */
  .stack-table tbody tr { grid-template-columns: repeat(4, 1fr); }
  .stack-table tfoot tr { grid-template-columns: repeat(4, 1fr); font-weight: 700; }

  /* The guide compares two states, then states the ratio on its own line. */
  .guide .stack-table tbody tr { grid-template-columns: repeat(2, 1fr); }
  .guide .stack-table .guide-ratio { grid-column: 1 / -1; }

  /* The meal calculator has a quantity field and a remove button as well. */
  #meal-table tbody tr, #meal-table tfoot tr { grid-template-columns: repeat(5, 1fr); }
  #meal-table tbody td:first-child { grid-column: 1 / 5; grid-row: 1; }
  #meal-table tbody td:last-child { grid-column: 5; grid-row: 1; justify-self: end; }
  #meal-table tbody td input { width: 100%; min-width: 0; }
  #meal-table tfoot td:last-child { display: none; }
  /* The accent rule belongs to the total row, not to each figure in it —
     as separate cell borders it drew as a dashed-looking set of segments. */
  #meal-total-row td { border-top: none; }
  #meal-table tfoot tr { border-top: 2px solid var(--accent); padding-top: 0.5rem; }
}

@media (max-width: 700px) {
  /* Touch targets. Inline links inside prose stay as they are — enlarging
     those would break the line — but the ones people actually aim at with a
     thumb get a taller hit area than their text. */
  .header-nav a, .footer-cols a { display: inline-block; padding: 0.3rem 0; }
  .stack-table tbody td:first-child a,
  .food-list a, .dish-list a, .search-results a { display: inline-block; padding: 0.2rem 0; }
  .atlas-chip { min-height: 34px; }
  .pager a { padding: 0.5rem 0.8rem; }
}

/* The analyzer on the home page: same widget as its own page, introduced
   rather than dropped in bare. */
.home-analyzer { margin: 1.6rem 0; }
.home-analyzer .analyzer-lede { color: var(--ink-soft); margin: 0.2rem 0 1rem; max-width: 58ch; }
.analyzer-more { margin: 0.5rem 0 0; font-size: 0.9rem; }
.analyzer-more a { color: var(--ink-soft); }

/* ---------------------------------------------- analyzer dish breakdown
   A photographed dish is costed from its ingredients, so the report shows
   the ingredients: what was recognised, what it was matched to, and the
   figures that came from that match. Anything unmatched stays visible and
   stays uncosted — a dash, never a guess. */
.per-serving { margin: 0.2rem 0 0.9rem; font-size: 1.05rem; }
.per-serving-note { color: var(--ink-faint); font-size: 0.85rem; font-weight: 400; }
.dish-block { margin: 1rem 0 1.4rem; }
.dish-name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  font-size: 1.1rem; margin: 0 0 0.2rem;
  border-bottom: 2px solid var(--peach-deep); padding-bottom: 0.35rem;
}
.dish-kcal { font-family: var(--font-data); font-weight: 700; white-space: nowrap; }
.dish-meta { color: var(--ink-faint); font-size: 0.85rem; margin: 0.3rem 0 0.6rem; }
.db-link { font-size: 0.85em; color: var(--ink-soft); }
.row-unmatched td:first-child { color: var(--ink-faint); }

/* The photograph the report was read from. */
.analyzed-photo { margin: 0 0 1rem; max-width: 320px; }
.analyzed-photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1.5px solid var(--hairline);
}

/* ------------------------------------------------ standing pages
   About, privacy, contact: prose, not data. Lists breathe more than the
   dense tables do, and the contact address is the one thing on its page
   someone is looking for. */
.about-list { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.about-list li { margin: 0.5rem 0; line-height: 1.75; }
.contact-address { font-size: 1.15rem; margin: 0.2rem 0 0.4rem; }
.contact-address a { font-family: var(--font-data); }

/* ------------------------------------------- value provenance
   MEXT publishes some values in parentheses (its own estimate, not an
   analysis of this food) and others as Tr (a trace: present, too small to
   quantify). Both were being rendered as plain numbers, which claimed more
   than the source does. They are marked, not hidden — the figure is still
   the figure. */
.val-estimated {
  /* A text decoration rather than a border: the calculator rewrites these
     cells with textContent on every quantity change, which would drop a
     nested span, and a border-bottom on a td fights the row rule. */
  text-decoration: underline dotted var(--ink-faint);
  text-underline-offset: 4px;
  cursor: help;
}
.val-trace { color: var(--ink-soft); font-family: var(--font-data); cursor: help; }
.quality-key { border-top: 1px solid var(--hairline); padding-top: 0.6rem; margin-top: 0.4rem; }

/* Component families. A food carries up to ~170 measured components once the
   amino acid, fatty acid and carbohydrate books are loaded, so they are filed
   rather than listed: basics and minerals open, the rest a tap away. */
.nutrient-group { border-top: 1px solid var(--hairline); }
.nutrient-group > summary {
  cursor: pointer; padding: 0.65rem 0.2rem; font-weight: 700;
  display: flex; align-items: center; gap: 0.5rem;
}
.nutrient-group > summary::-webkit-details-marker { display: none; }
.nutrient-group > summary::before { content: "▸"; color: var(--accent); font-size: 0.8em; }
.nutrient-group[open] > summary::before { content: "▾"; }
.nutrient-group .count { color: var(--ink-faint); font-weight: 400; font-size: 0.85rem; }
.nutrients-detail > h2 .count { color: var(--ink-faint); font-weight: 400; font-size: 0.9rem; }

/* Where a food sits among its neighbours. A fact about the composition
   tables, so it is shown as a measurement would be: the bar is the rank, the
   sentence says what the rank is of. */
.context-card .rank-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.context-card .rank-list li {
  display: grid; grid-template-columns: 6rem 1fr; gap: 0.3rem 0.8rem;
  align-items: center; padding: 0.45rem 0; border-top: 1px solid var(--hairline);
}
.context-card .rank-list li:first-child { border-top: none; }
.rank-label { font-weight: 700; }
.rank-bar { background: var(--peach); border-radius: var(--pill); height: 0.5rem; overflow: hidden; }
.rank-bar i { display: block; height: 100%; background: var(--accent); }
.rank-text { grid-column: 1 / -1; color: var(--ink-soft); font-size: 0.88rem; }
.notable-heading { font-size: 1rem; margin: 1rem 0 0.3rem; }
.notable-list { margin: 0; padding-left: 1.1rem; }
.notable-list li { margin: 0.3rem 0; }
@media (min-width: 620px) {
  .context-card .rank-list li { grid-template-columns: 6rem 10rem 1fr; }
  .rank-text { grid-column: auto; }
}

/* 食品表示基準 別表第十二: the thresholds a Japanese label must meet before it
   may say a food is high in a nutrient. The law's criteria, not ours. */
.claim-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.claim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0; }
.claim-tag {
  font-weight: 700; font-size: 0.9rem; padding: 0.15rem 0.6rem;
  border-radius: var(--pill); background: var(--accent-soft); color: var(--accent-dark);
}
.claim-source .claim-tag { background: var(--peach); color: var(--ink-soft); }
.claim-figures { color: var(--ink-soft); font-size: 0.88rem; font-family: var(--font-data); }

/* ---------------------------------------------------------------- chain menus & order tray */
.menu-ai-banner {
  background: linear-gradient(135deg, #FFF0E6 0%, #FDECE1 100%);
  border: 1.5px solid var(--accent);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
}
.menu-ai-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--pill);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.menu-ai-banner h2 { margin: 0.2rem 0 0.4rem; font-size: 1.15rem; color: var(--ink); }
.menu-ai-banner p { margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.92rem; }
.menu-ai-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.button-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: var(--pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.1s ease, background-color 0.15s ease;
}
.button-pill:hover { transform: translateY(-1px); }
.button-pill.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.button-pill.primary:hover { background: var(--accent-dark); }
.button-pill.secondary { background: var(--paper-raised); color: var(--ink); border-color: var(--ink); }
.button-pill.secondary:hover { background: var(--peach); }

.menu-filter-bar, .menu-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.menu-filter-bar input, .menu-search-box input {
  flex: 1;
  min-width: 240px;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper-raised);
}
.chain-count-badge {
  font-family: var(--font-data);
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--peach);
  padding: 0.35rem 0.75rem;
  border-radius: var(--pill);
}

.badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: var(--pill);
  background: var(--peach);
  color: var(--ink-soft);
}
.badge.verified { background: var(--verified-bg); color: var(--verified); }
.badge.muted { background: var(--paper); color: var(--ink-faint); }

.chain-action-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--accent);
  text-decoration: none;
}
.chain-action-btn:hover { text-decoration: underline; color: var(--accent-dark); }

.tray-add-btn {
  background: var(--peach);
  color: var(--ink);
  border: 1px solid var(--ink-faint);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1.05rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tray-add-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.1); }
.tray-add-btn.added { background: var(--verified); color: #fff; border-color: var(--verified); }

.dish-link { text-decoration: none; }
.dish-link:hover { text-decoration: underline; }
.price-val { font-family: var(--font-data); }
.kcal-val strong { font-family: var(--font-data); font-size: 1.05rem; }
.kcal-val small { font-size: 0.8rem; color: var(--ink-soft); }
.no-figure-label { font-size: 0.84rem; color: var(--ink-faint); }

.ai-micro-btn {
  display: inline-block;
  font-size: 0.76rem;
  font-family: var(--font-display);
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--pill);
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  text-decoration: none;
}
.ai-micro-btn:hover { background: var(--peach); color: var(--ink); }
.ai-micro-btn.highlight {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* Floating Order Tray Bar */
.order-tray-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -4px 18px rgba(43, 33, 24, 0.12);
  z-index: 90;
  padding: 0.75rem 0;
  animation: slide-up 0.25s ease-out;
}
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.order-tray-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.order-tray-summary { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.order-tray-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 0.25rem 0.7rem;
  border-radius: var(--pill);
}
.order-tray-totals { display: flex; gap: 1rem; font-size: 0.95rem; }
.order-tray-totals strong { font-family: var(--font-data); font-size: 1.15rem; color: var(--ink); }
.order-tray-actions { display: flex; align-items: center; gap: 0.8rem; }
.button-text {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}
.button-text:hover { color: var(--seal); }

/* ---------------------------------------------------------------- dish AI modal & breakdown */
.dish-ai-modal {
  position: fixed;
  inset: 0;
  background: rgba(43, 33, 24, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
  animation: fade-in 0.2s ease-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.dish-ai-modal-box {
  background: var(--paper-raised);
  border-radius: var(--radius);
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  border: 1.5px solid var(--accent);
  box-shadow: 0 12px 36px rgba(43, 33, 24, 0.22);
  padding: 1.5rem;
  position: relative;
}
.dish-ai-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--ink-soft);
  line-height: 1;
}
.dish-ai-close-btn:hover { color: var(--seal); }
.dish-ai-header { margin-bottom: 0.8rem; padding-right: 2rem; }
.dish-ai-header h3 { font-size: 1.25rem; margin: 0 0 0.25rem; color: var(--ink); }
.dish-ai-hero-kcal {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.dish-ai-hero-kcal .num { font-size: 2.1rem; color: var(--accent); font-weight: 700; line-height: 1; }
.dish-ai-macro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  background: var(--peach);
  padding: 0.65rem 0.5rem;
  border-radius: var(--radius-sm);
  margin: 0.9rem 0;
  text-align: center;
}
.dish-ai-macro-item .macro-label { font-size: 0.72rem; color: var(--ink-soft); }
.dish-ai-macro-item .macro-val { font-family: var(--font-data); font-weight: 700; font-size: 0.92rem; }
.dish-ai-ingredients-list {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.dish-ai-ingredients-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.75rem;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--hairline);
}
.dish-ai-ingredients-list li:last-child { border-bottom: none; }
.dish-ai-ingredients-list .ing-grams { color: var(--ink-soft); font-family: var(--font-data); font-size: 0.82rem; margin-left: 0.4rem; }
.dish-ai-ingredients-list .ing-kcal { font-family: var(--font-data); font-weight: 700; }
.badge.estimate { background: var(--estimate-bg); color: var(--estimate); border: 1px solid #F7D8B5; }

/* ---------------------------------------------------------------- Visual Enhancements & Micro-Animations */

/* 1. PFC Ratio Ring & Gauge */
.pfc-visualizer {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin: 0.9rem 0;
}
.pfc-ring-svg { width: 68px; height: 68px; flex: none; transform: rotate(-90deg); }
.pfc-ring-bg { fill: none; stroke: var(--hairline); stroke-width: 8; }
.pfc-ring-p { fill: none; stroke: var(--p-hue); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.pfc-ring-f { fill: none; stroke: var(--f-hue); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.pfc-ring-c { fill: none; stroke: var(--c-hue); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.pfc-legend-col { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; }
.pfc-legend-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.84rem; }
.pfc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.35rem; }
.pfc-dot.p { background: var(--p-hue); }
.pfc-dot.f { background: var(--f-hue); }
.pfc-dot.c { background: var(--c-hue); }
.pfc-pct { font-family: var(--font-data); font-weight: 700; font-size: 0.88rem; }

/* 2. Calorie Micro-Bar in Table */
.kcal-cell-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.kcal-bar-track {
  width: 76px;
  height: 4px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.kcal-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kcal-bar-fill.light { background: var(--verified); }
.kcal-bar-fill.mid { background: var(--f-hue); }
.kcal-bar-fill.heavy { background: var(--accent); }

/* 3. Micro-Flying Calorie Badge & Tray Bounce */
.flying-kcal-badge {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 0.86rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(194, 65, 12, 0.45);
  animation: fly-up-fade 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes fly-up-fade {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  25% { opacity: 1; transform: translateY(-12px) scale(1.12); }
  100% { opacity: 0; transform: translateY(-44px) scale(0.98); }
}
.order-tray-bar.tray-bump {
  animation: tray-spring 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes tray-spring {
  0% { transform: scale(1); }
  35% { transform: scale(1.025); }
  70% { transform: scale(0.995); }
  100% { transform: scale(1); }
}

/* 4. Quick Category Filter Chips */
.menu-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.5rem 0 1.1rem;
}
.menu-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.32rem 0.85rem;
  border-radius: var(--pill);
  border: 1.5px solid var(--hairline);
  background: var(--paper-raised);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.menu-chip:hover {
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-1px);
}
.menu-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 2px 8px rgba(43, 33, 24, 0.16);
}

/* 5. Glowing "AI Scanning" Shimmer Loader */
.ai-scanner-box {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.4rem;
  background: var(--paper);
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--accent);
  margin: 1rem 0;
}
.ai-scanner-laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 14px var(--accent);
  animation: scan-laser 1.3s ease-in-out infinite alternate;
}
@keyframes scan-laser {
  0% { top: 4%; opacity: 0.4; }
  100% { top: 96%; opacity: 1; }
}
.skeleton-line {
  height: 14px;
  margin-bottom: 0.75rem;
  border-radius: 4px;
  background: linear-gradient(90deg, #F3EAE3 25%, #FFF8F3 50%, #F3EAE3 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 6. Calorie Target / Meal Budget Bar in Order Tray */
.tray-budget-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 140px;
}
.tray-budget-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.74rem;
  color: var(--ink-soft);
}
.tray-budget-track {
  width: 100%;
  height: 6px;
  background: var(--hairline);
  border-radius: 3px;
  overflow: hidden;
}
.tray-budget-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.35s ease, background-color 0.3s ease;
}
.tray-budget-fill.under { background: var(--verified); }
.tray-budget-fill.target { background: var(--f-hue); }
.tray-budget-fill.over { background: var(--accent); }

/* ---------------------------------------------------------------- Expandable Order Tray Drawer */
.order-tray-drawer {
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-raised);
  padding: 0.8rem 0;
  display: none;
  animation: drawer-slide-down 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes drawer-slide-down {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 260px; }
}
.order-tray-drawer.open { display: block; }
.tray-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed var(--hairline);
}
.tray-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.tray-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem;
  background: var(--paper);
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  font-size: 0.88rem;
}
.tray-item-info {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}
.tray-item-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tray-item-meta {
  font-family: var(--font-data);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.tray-item-remove-btn {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  line-height: 1;
  transition: all 0.15s ease;
}
.tray-item-remove-btn:hover {
  color: var(--seal);
  background: var(--accent-soft);
}
.tray-expand-toggle-btn {
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--pill);
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.15s ease;
}
.tray-expand-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--ink);
}

/* ---------------------------------------------------------------- Search Box Keyboard Hint & Clear */
.menu-search-box {
  position: relative;
  display: flex;
  align-items: center;
}
.search-kbd-hint {
  position: absolute;
  right: 2.2rem;
  pointer-events: none;
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  line-height: 1.2;
}
.search-clear-btn {
  position: absolute;
  right: 0.6rem;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  display: none;
}
.search-clear-btn:hover { color: var(--seal); }
.dish-filter-count-badge {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-family: var(--font-data);
  margin-left: 0.5rem;
}

/* ---------------------------------------------------------------- Compliance & Statutory Advisory Card */
.compliance-card {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: #FCFBF9;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.65;
}
.compliance-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hairline);
}
.compliance-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #EFECE6;
  color: var(--ink);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}
.compliance-header h3 {
  font-size: 0.95rem;
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}
.compliance-item h4 {
  font-size: 0.84rem;
  color: var(--ink);
  margin: 0 0 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.compliance-item p {
  margin: 0;
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------- Accessibility Utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ---------------------------------------------------------------- Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .flying-kcal-badge { display: none !important; }
  .ai-scanner-laser { display: none !important; }
}

/* ---------------------------------------------------------------- Print Stylesheet */
@media print {
  .site-header,
  .site-footer,
  .crumbs,
  .menu-controls-row,
  .menu-chip-row,
  .order-tray-bar,
  .dish-ai-modal,
  .ai-micro-btn,
  .tray-add-btn,
  .button-pill,
  .menu-ai-banner,
  .header-search {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt;
  }
  .wrap {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .card, .table-scroll {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  table.nutrition-table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  table.nutrition-table th,
  table.nutrition-table td {
    border: 1px solid #ccc !important;
    padding: 4pt 6pt !important;
  }
  .compliance-card {
    border: 1px solid #999 !important;
    margin-top: 1rem !important;
    page-break-inside: avoid;
  }
}

/* ---------------------------------------------------------------- Chain Brand Logos & Dish Thumbnails */
.chain-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
}
.chain-brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(43, 33, 24, 0.14);
  flex-shrink: 0;
  letter-spacing: -0.02em;
  overflow: hidden;
  padding: 2px;
}
.chain-brand-mark {
  display: block;
  /* Nothing leaves the tile. The size classes below are the fit; this is the
     guarantee, for a mark nobody sized and a font that renders wider than it
     was measured. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
/* Set from the mark's rendered width in brand_assets._mark_size — a Japanese
   character counts double, so 「きんぐ」 is as wide as six latin ones and needs
   the same treatment as Denny's. */
.chain-brand-mark.mark-xl { font-size: 1.15rem; }
.chain-brand-mark.mark-lg { font-size: 0.86rem; }
.chain-brand-mark.mark-md { font-size: 0.62rem; letter-spacing: -0.02em; }
.chain-brand-mark.mark-sm { font-size: 0.46rem; letter-spacing: -0.04em; }
.chain-brand-mark.mark-xs { font-size: 0.38rem; letter-spacing: -0.05em; }
/* The page header shows the same tile at 64px rather than 36. */
.chain-header-badge .chain-brand-mark.mark-xl { font-size: 2rem; }
.chain-header-badge .chain-brand-mark.mark-lg { font-size: 1.5rem; }
.chain-header-badge .chain-brand-mark.mark-md { font-size: 1.15rem; }
.chain-header-badge .chain-brand-mark.mark-sm { font-size: 0.84rem; }
.chain-header-badge .chain-brand-mark.mark-xs { font-size: 0.68rem; }
.chain-name-text {
  display: flex;
  flex-direction: column;
}
.chain-name-text strong {
  font-size: 0.98rem;
  color: var(--ink);
}
.chain-sub-text {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Chain Detail Header Avatar */
.menu-header-brand-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
/* A real logo is a wordmark on its own white ground; the brand-coloured tile
   behind it is for the two-initial fallback and would fight it. contain, never
   cover — a cropped logo is a defaced logo. */
.chain-header-badge:has(.chain-brand-logo),
.chain-brand-badge:has(.chain-brand-logo) { background: #fff !important; padding: 3px; }
.chain-brand-logo { width: 100%; height: 100%; object-fit: contain; display: block; }

.chain-header-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.45rem;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(43, 33, 24, 0.16);
  flex-shrink: 0;
}

/* Dish Table Visual Thumbnail */
.dish-name-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.dish-thumb-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  overflow: hidden;
  background: var(--surface-2, #F8F9FA);
}
.dish-row:hover .dish-thumb-avatar {
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 2;
}
.dish-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
  background-color: #f1f2f6;
}
.dish-row:hover .dish-thumb-img {
  transform: scale(1.06);
}
.dish-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}
.dish-thumb-icon {
  font-size: 1.3rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.modal-dish-photo-wrap {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}
.modal-dish-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dish-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dish-category-tag {
  font-size: 0.68rem;
  color: var(--ink-soft);
  font-family: var(--font-data);
}

/* Provenance Badges & Macro Strips */
.kcal-val-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.prov-tag {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 0.12rem 0.42rem;
  border-radius: 6px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.prov-tag.chain {
  background: rgba(30, 126, 52, 0.12);
  color: #1e7e34;
  border: 1px solid rgba(30, 126, 52, 0.3);
}
.prov-tag.table {
  background: rgba(0, 102, 204, 0.1);
  color: #0066cc;
  border: 1px solid rgba(0, 102, 204, 0.25);
}
.prov-tag.calc {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.25);
}

.macro-mini-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.mini-macro {
  font-family: var(--font-data);
  font-size: 0.66rem;
  padding: 0.08rem 0.35rem;
  border-radius: 4px;
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  color: var(--ink-soft);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}
.mini-macro strong {
  color: var(--ink);
  font-weight: 700;
}
.mini-macro.p { border-color: rgba(224, 86, 36, 0.25); background: rgba(224, 86, 36, 0.06); }
.mini-macro.f { border-color: rgba(234, 179, 8, 0.3); background: rgba(234, 179, 8, 0.07); }
.mini-macro.c { border-color: rgba(59, 130, 246, 0.25); background: rgba(59, 130, 246, 0.06); }
.mini-macro.salt { border-color: rgba(100, 116, 139, 0.25); background: rgba(100, 116, 139, 0.06); }

/* Tray Macro Strip */
.order-tray-macros {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.2rem;
  font-family: var(--font-data);
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.order-tray-macros span {
  background: rgba(255, 255, 255, 0.6);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.order-tray-macros strong {
  color: var(--ink);
}

.tray-item-macros {
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-left: 0.5rem;
}

/* ------------------------------------------------- One dish per card, on a phone
   The generic .stack-table rule hands the FIRST cell the full row width, which is
   right when the first cell is the name. On a menu the first cell is the tray
   button, so ＋ took a line of its own above every dish, the name was left sharing
   a quarter-width track with the price and a whole block of nutrition, and the row
   ran off the side of the screen — a table nobody could read without dragging it.

   Laid out explicitly instead: the button, the dish and its price on one line, the
   calorie block under them, the analyse button last. */
@media (max-width: 640px) {
  #menu-items-table tbody tr {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.4rem 0.55rem;
    padding: 0.8rem 0;
  }
  #menu-items-table tbody td:first-child {
    grid-column: 1; grid-row: 1; text-align: left;
  }
  #menu-items-table tbody td:nth-child(2) { grid-column: 2; grid-row: 1; min-width: 0; }
  #menu-items-table tbody td:nth-child(3) {
    grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap;
  }
  #menu-items-table tbody td:nth-child(4) { grid-column: 2 / -1; grid-row: 2; min-width: 0; }
  #menu-items-table tbody td:last-child   { grid-column: 2 / -1; grid-row: 3; text-align: right; }

  /* 「価格」 over a single yen figure on the same line as the dish is a label
     for something already obvious. The calorie block keeps its label. */
  #menu-items-table tbody td:nth-child(3)::before { display: none; }

  /* A Japanese dish name has no spaces to break at, so a long one would
     otherwise decide the width of the whole row — and the table's own
     white-space: nowrap kept it on one line, straight through the price. */
  #menu-items-table tbody td:nth-child(2),
  #menu-items-table .dish-name-cell,
  #menu-items-table .dish-title-wrap,
  #menu-items-table .dish-link,
  #menu-items-table .dish-title {
    white-space: normal; overflow-wrap: anywhere; min-width: 0;
  }
  #menu-items-table .dish-name-cell { gap: 0.5rem; align-items: flex-start; }
  #menu-items-table .dish-thumb-avatar { width: 36px; height: 36px; border-radius: 8px; }
  #menu-items-table .dish-thumb-icon { font-size: 1.05rem; }

  /* The figure and its provenance tag were pushed apart across the full width
     by justify-content: space-between; side by side reads as one statement. */
  #menu-items-table .kcal-val-header { justify-content: flex-start; flex-wrap: wrap; }
  #menu-items-table .kcal-cell-wrap { width: 100%; min-width: 0; }
  #menu-items-table .kcal-bar-track { width: 100%; }

  /* The sort controls are the one thing a phone reader most wants — 「カロリー順」
     on a 300-dish menu — and the generic rule hides the header that carries them. */
  #menu-items-table thead, #menu-items-table thead tr { display: block; }
  #menu-items-table thead tr {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    border-bottom: none; padding-bottom: 0.6rem;
  }
  #menu-items-table thead th {
    border: 1px solid var(--hairline); border-radius: var(--pill);
    padding: 0.3rem 0.7rem; font-size: 0.76rem; background: var(--paper-raised);
    width: auto !important; text-align: left !important;
  }
  /* Neither the tray column nor the analyse column sorts anything. */
  #menu-items-table thead th:first-child,
  #menu-items-table thead th:last-child { display: none; }

  /* A thumb needs something to hit. */
  .tray-add-btn { min-width: 2rem; min-height: 2rem; }
  .ai-micro-btn { min-height: 2rem; padding-inline: 0.7rem; }

  /* 「/」 focuses the filter box from a keyboard. A phone has no key to press,
     and the badge was sitting on top of the placeholder text. */
  .search-kbd-hint { display: none; }

  /* The chain list: three figures across, then the link on its own line.
     「メニューを見る →」 does not fit a quarter of a 375px screen, and it was
     the link itself that hung off the right edge of the page. */
  #chains-table tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #chains-table tbody td:last-child {
    grid-column: 1 / -1; text-align: right; margin-top: 0.2rem;
  }
  .chain-action-btn { display: inline-block; min-height: 2rem; }

  /* The order tray's actions had to share one line, so 「計算ツールで開く →」 broke
     mid-word and 「クリア」 was wedged between two pills. One row each. */
  .order-tray-actions { flex-wrap: wrap; }
  .order-tray-actions .button-pill { flex: 1 1 100%; justify-content: center; }
  .order-tray-actions .button-text { flex: 1 1 100%; text-align: center; padding: 0.4rem 0; }
}

/* --------------------------------------------------- Nutrient ranking pages
   A ranking is only a fact if the reader can see what it ranks over, so the
   scope line sits above the table rather than in a footnote under it. */
.nutrient-scope { padding: 0.9rem 1.1rem; }
.nutrient-scope p { margin: 0.2rem 0; }
.rank-num {
  font-family: var(--font-data); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
/* The portion a figure belongs to, kept quieter than the figure itself. */
.serving-note {
  display: block; font-size: 0.72rem; color: var(--ink-faint);
  font-family: var(--font-data);
}
.nutrient-siblings { margin-top: 2rem; }
.nutrient-siblings h2 { font-size: 1.05rem; }

@media (max-width: 640px) {
  /* Rank, name, figure, serving, kcal — five cells, and the rank belongs
     beside the name rather than on a line of its own. */
  #nutrient-rank-table tbody tr { grid-template-columns: 2rem repeat(3, minmax(0, 1fr)); }
  #nutrient-rank-table tbody td:first-child { grid-column: 1; grid-row: 1; }
  #nutrient-rank-table tbody td:nth-child(2) {
    grid-column: 2 / -1; grid-row: 1; white-space: normal; overflow-wrap: anywhere;
  }
  /* Placed, not auto-flowed: left to itself the amount fell into the 2rem rank
     column and the serving cell's em dash landed on top of the figure. */
  #nutrient-rank-table tbody td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  #nutrient-rank-table tbody td:nth-child(4) { grid-column: 3; grid-row: 2; }
  #nutrient-rank-table tbody td:nth-child(5) { grid-column: 4; grid-row: 2; }
}

.kcal-hero .atleast {
  font-family: var(--font-data); font-size: .62em; color: var(--estimate);
  margin-right: .12em; vertical-align: .18em;
}
.partial-note { color: var(--estimate); }
.kcal-hero .approx { font-size: .42em; color: var(--ink-faint); margin-right: .18em; vertical-align: .28em; }
.kcal-band {
  margin: .1rem 0 0; font-size: .78rem; line-height: 1.7; color: var(--ink-soft);
  max-width: 34em;
}

/* --------------------------------------------- Home: what the analyzer does */
/* One rhythm down the page: every band is separated by the same interval, and
   the only thing that changes between them is whether it sits on paper or on
   the page ground. */
.count-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem 1.6rem;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 1.3rem 0; margin: 2.4rem 0;
}
.count-band div { display: flex; flex-direction: column; gap: 0.15rem; }
.count-band strong {
  font-family: var(--font-data); font-size: 1.55rem; line-height: 1.1;
  font-weight: 600; letter-spacing: -0.01em;
}
.count-band span { font-size: 0.8rem; color: var(--ink-soft, #555); line-height: 1.4; }

.home-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem 2rem; margin: 3rem 0 0;
  padding: 1.6rem 1.8rem; border-radius: var(--radius);
  background: var(--accent-soft, #fdece2);
}
.home-cta h2 { margin: 0 0 0.35rem; }
.home-cta p { margin: 0; max-width: 40rem; font-size: 0.9rem; line-height: 1.75; color: var(--ink-soft, #555); }

/* The confidence the model reported for one ingredient. Quiet by default: it
   qualifies the row it sits in, it is not a second column. */
.worked-table .conf {
  display: inline-block;
  font-size: 0.72rem; line-height: 1.5; padding: 0.12rem 0.62rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--ink-soft);
  white-space: nowrap; margin-left: 0.3rem;
}
.worked-table .conf-low { background: var(--estimate-bg); color: var(--estimate); }

.how-strip { margin: 2.6rem 0 2rem; }
.how-steps {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: none;
}
.how-steps li { position: relative; padding-left: 2.6rem; }
.how-steps h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.how-steps p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--ink-soft, #555); }
.how-num {
  position: absolute; left: 0; top: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-data); font-size: 0.9rem;
  background: var(--accent-soft, #fdece2); color: var(--accent, #d4571f);
}

.worked { margin: 2.6rem 0; }
.worked-case { padding: 1.1rem 1.2rem 0.9rem; margin: 1.1rem 0; }
.worked-head { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.worked-shot { margin: 0; flex: 1 1 18rem; max-width: 26rem; }
.worked-shot img { width: 100%; height: auto; border-radius: 6px; display: block; }
.worked-shot figcaption {
  margin-top: 0.4rem; font-size: 0.8rem; line-height: 1.6; color: var(--ink-faint, #777);
}
.worked-summary { flex: 1 1 16rem; }
.worked-counts { margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.7; }
.worked-dishes { list-style: none; padding: 0; margin: 0; }
.worked-dishes li {
  display: flex; justify-content: space-between; gap: 0.8rem;
  padding: 0.28rem 0; border-bottom: 1px solid var(--hairline); font-size: 0.9rem;
}
.worked-dishes li:last-child { border-bottom: 0; }
.worked-dish-meta { font-family: var(--font-data); color: var(--ink-faint, #777); }
.worked-detail { margin-top: 0.9rem; }
.worked-detail > summary {
  cursor: pointer; font-size: 0.88rem; padding: 0.4rem 0;
  color: var(--ink-soft, #555);
}
.worked-table { font-size: 0.86rem; }
.worked-table td:nth-child(2), .worked-table td:nth-child(4) { font-family: var(--font-data); }
.worked-unmatched-title { margin: 0.9rem 0 0.3rem; font-size: 0.9rem; }
.worked-unmatched {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; font-size: 0.85rem;
}
.worked-unmatched li {
  line-height: 1.6; padding: 0.22rem 0.7rem; border-radius: 999px;
  background: var(--peach); color: var(--ink-soft);
}
.worked-cta { margin: 1.2rem 0 0; }
.home-trust { margin: 2.8rem 0; }
.home-trust .feature-strip { margin: 1rem 0 0; max-width: 100%; }
.home-more { margin: 2.8rem 0; }
.home-more .home-tools { margin-top: 1rem; }

@media (max-width: 640px) {
  .worked-shot { max-width: none; }
  .how-steps { gap: 1rem; }
}

/* ------------------------------------------------------- Cooking yield tool */
.yield-calc-row {
  display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; align-items: flex-end;
  margin: 0.6rem 0 0.4rem;
}
.yield-calc-row label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.yield-calc-row input[type="number"] { width: 7rem; }
.yield-calc-row select { max-width: min(100%, 28rem); }
.yield-calc-row .unit { display: none; }
.yield-result {
  font-family: var(--font-data); font-size: 1.05rem; margin: 0.6rem 0 0;
  min-height: 1.5em;
}
.standing-list { list-style: none; padding: 0; margin: 0.4rem 0 0.6rem; }
.standing-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.7rem;
  padding: 0.35rem 0; border-bottom: 1px solid var(--hairline);
}
.standing-list li:last-child { border-bottom: 0; }
.standing-term { min-width: 8rem; }
.standing-pct { font-family: var(--font-data); }
.standing-figures { font-size: 0.8rem; color: var(--ink-faint, #777); }

.yield-dir {
  display: flex; gap: 1.1rem; flex-wrap: wrap;
  font-size: 0.85rem; margin: 0.5rem 0 0.2rem;
}
.yield-dir label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
#yield-pair { margin: 0.25rem 0 0; }
.yield-filter-label { display: block; font-size: 0.85rem; margin-bottom: 0.7rem; }
.yield-filter-label input { width: min(100%, 22rem); display: block; margin-top: 0.25rem; }

@media (max-width: 640px) {
  .yield-calc-row { gap: 0.7rem; }
  .yield-calc-row label, .yield-calc-row select, .yield-calc-row input[type="number"] { width: 100%; }
  /* Name on its own line, then the four figures across. */
  #yield-table tbody tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #yield-table tbody td:first-child {
    grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------- Public API page */
.api-terms { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.api-terms li { margin: 0.35rem 0; }
.api-endpoint h2 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 1.05rem; }
.api-endpoint h2 code { font-size: 0.95rem; }
.api-method {
  font-family: var(--font-data); font-size: 0.68rem; font-weight: 700;
  padding: 0.15rem 0.5rem; border-radius: 5px; letter-spacing: 0.04em;
}
.api-method.get { background: rgba(0, 102, 204, 0.12); color: #0066cc; }
.api-method.post { background: rgba(30, 126, 52, 0.12); color: #1e7e34; }
.api-example {
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 0.7rem 0.9rem;
  overflow-x: auto; font-size: 0.82rem;
}
.api-params { margin: 0.6rem 0; }

/* ------------------------------------------------------------------- Blog
   Posts are written in WordPress and rendered here, so they inherit the same
   type scale and rhythm as the rest of the site rather than a theme's. */
.post-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.post-card {
  display: grid; grid-template-columns: 1fr; gap: 1.1rem;
  align-items: start; padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--hairline);
}
/* The thumbnail column is reserved only when there is a thumbnail. A post with
   no featured image omits .post-thumb entirely, and a fixed first column would
   put the TEXT in it — 12rem wide, wrapping the title every few characters. */
.post-card:has(.post-thumb) { grid-template-columns: 12rem 1fr; }
.post-card:last-child { border-bottom: none; }
.post-thumb img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius-sm); display: block;
}
.post-card h2 { font-size: 1.15rem; margin: 0 0 0.35rem; }
.post-excerpt { margin: 0 0 0.5rem; color: var(--ink-soft); }
.post-meta {
  font-family: var(--font-data); font-size: 0.76rem; color: var(--ink-faint);
  margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.post { max-width: 68ch; }
.post h1 { margin-bottom: 0.4rem; }
.post-hero img {
  width: 100%; border-radius: var(--radius-sm); display: block; margin: 1.2rem 0;
}
/* The body is author-written HTML; give it prose rhythm without letting it
   set its own type scale. */
.post-body { line-height: 1.85; }
.post-body > * + * { margin-top: 1.1rem; }
.post-body h2 { font-size: 1.3rem; margin-top: 2.2rem; }
.post-body h3 { font-size: 1.1rem; margin-top: 1.8rem; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.post-body figure { margin: 1.4rem 0; }
.post-body figcaption { font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.4rem; }
.post-body blockquote {
  border-left: 3px solid var(--accent); margin-left: 0;
  padding: 0.2rem 0 0.2rem 1rem; color: var(--ink-soft);
}
.post-body pre { overflow-x: auto; background: var(--paper-raised); padding: 0.8rem; border-radius: var(--radius-sm); }
.post-body table { width: 100%; border-collapse: collapse; }
.post-body th, .post-body td { border: 1px solid var(--hairline); padding: 0.4rem 0.6rem; text-align: left; }
.post-back { margin-top: 2rem; }

@media (max-width: 640px) {
  /* The thumbnail stops earning a column once it is a third of the screen. */
  .post-card, .post-card:has(.post-thumb) { grid-template-columns: 1fr; gap: 0.7rem; }
  .post-thumb img { aspect-ratio: 16 / 9; }
  .post-body { line-height: 1.8; }
  /* Author HTML can carry a wide table or a long code block; neither may
     make the page itself scroll sideways. */
  .post-body table, .post-body pre { display: block; overflow-x: auto; }
}

/* ------------------------------------------------------------- Embed snippet */
.snippet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap;
}
.snippet-head h2, .snippet-head h3 { margin: 0; }
.snippet-head h3 { font-size: 0.95rem; }
.snippet-head + .api-example { margin-top: 0.5rem; }
button[data-copy].copied { background: var(--verified-bg, #e8f5e9); border-color: #1e7e34; color: #1e7e34; }
/* The snippet is meant to be read as well as copied, so it wraps rather than
   running off the side — the copy button is what actually gets used. */
.api-example[id] code { white-space: pre-wrap; word-break: break-word; }
.embed-preview { padding: 0.6rem; }
.embed-preview-label { margin: 1rem 0 0.4rem; font-size: 0.85rem; }
/* Roughly what a blog theme does to a bare table, so the preview is not a wall of text. */
.embed-html-preview table { border-collapse: collapse; }
.embed-html-preview th, .embed-html-preview td { border: 1px solid var(--hairline); padding: 0.3rem 0.6rem; }
.embed-offer summary { cursor: pointer; }
.embed-offer summary h2 { display: inline; }
.embed-toc { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.embed-builder {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.9rem;
  margin: 0.4rem 0 0.9rem;
}
.embed-pick { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; flex: 1 1 14rem; }
.embed-pick input, .embed-pick select { width: 100%; }
.embed-rank { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-size: 0.85rem; }
.embed-rank legend { padding: 0; margin-bottom: 0.2rem; }

@media (max-width: 640px) {
  .snippet-head { gap: 0.5rem; }
  button[data-copy] { width: 100%; justify-content: center; }
}

/* ------------------------------------------------- The analyzer as the hero
   The upload control sits inside the hero card, so it must not look like a
   second card stacked on a first one. */
.hero-analyzer-split .analyzer-widget {
  background: var(--paper-raised); border: 1px solid var(--hairline);
  box-shadow: none; margin: 0 0 0.9rem; padding: 1rem 1.1rem;
}
.hero-analyzer-split .hero-search { margin-bottom: 0.7rem; }
.hero-analyzer-split .upload-label { margin: 0; }
/* A result can be long. Inside a two-column hero it would push the photograph
   off the screen, so it scrolls within the card instead. */
.hero-analyzer-split #analyzer-result:not(:empty) {
  max-height: 26rem; overflow-y: auto; margin-top: 0.7rem;
}

@media (max-width: 820px) {
  .hero-analyzer-split .analyzer-widget { text-align: left; }
  .hero-analyzer-split #analyzer-result:not(:empty) { max-height: none; }
}
/* Says what the upload button is for. The hero's own sub-line is about where
   the numbers come from, which is a different question. */
.hero-analyzer-lede {
  margin: 0 0 0.5rem; font-size: 0.92rem; color: var(--ink-soft); font-weight: 700;
}

/* --------------------------------------------------------------- Dish photo
   Freely-licensed, and credited underneath because CC BY and CC BY-SA require
   it — the caption is a condition of use, not decoration, so it is never
   hidden on small screens. */
.dish-photo { margin: 1.2rem 0 1.6rem; }
.dish-photo img {
  width: 100%; max-height: 420px; object-fit: cover;
  border-radius: var(--radius-sm); display: block;
}
.dish-photo figcaption {
  margin-top: 0.45rem; font-size: 0.72rem; color: var(--ink-faint);
  font-family: var(--font-data); line-height: 1.6; overflow-wrap: anywhere;
}
.dish-photo figcaption a { color: var(--ink-soft); }
@media (max-width: 640px) { .dish-photo img { max-height: 260px; } }

/* ------------------------------------------------------------- Restaurant Brand Logos & Headers */
.menu-header-brand-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 0.6rem;
}
.chain-header-badge {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  flex: none;
  overflow: hidden;
}
.chain-header-badge svg {
  width: 44px;
  height: 44px;
  display: block;
}
.chain-brand-mark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
}
.chain-brand-pill {
  display: inline-block;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--paper-raised);
}

/* ------------------------------------------------------------- Representational Image Disclaimer */
.menu-image-disclaimer-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #FFFDF9;
  border: 1px solid #EFE4D6;
  border-left: 3.5px solid var(--accent);
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  margin: 0.8rem 0 1.2rem;
  font-size: 0.83rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.menu-image-disclaimer-banner .disclaimer-icon {
  font-size: 1.15rem;
  flex: none;
}
.menu-image-disclaimer-banner .disclaimer-text {
  flex: 1;
}

/* ------------------------------------------------------------- View Switcher (Cards vs Table) */
.menu-actions-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.menu-view-switcher {
  display: inline-flex;
  background: var(--paper-raised);
  border: 1.5px solid var(--hairline);
  border-radius: var(--pill);
  padding: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.view-switch-btn {
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 0.35rem 0.85rem;
  border-radius: var(--pill);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.view-switch-btn:hover {
  color: var(--ink);
}
.view-switch-btn.active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 2px 6px rgba(43, 33, 24, 0.18);
}

/* ------------------------------------------------------------- Photo-Centric Cards Grid View */
.menu-cards-view {
  margin: 1.2rem 0 2rem;
}
.menu-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.2rem;
}
.menu-dish-card {
  background: var(--paper-raised);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(43, 33, 24, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.menu-dish-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(43, 33, 24, 0.12);
}
.menu-card-body {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 1.15rem 1.15rem 0.9rem;
  gap: 1rem;
  cursor: pointer;
}
.menu-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu-card-name {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.4rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}
.menu-card-price {
  font-family: var(--font-data);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
}
.menu-card-tax {
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.menu-card-nutrition {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.menu-card-kcal {
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.menu-card-kcal strong {
  font-family: var(--font-data);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-dark);
}
.menu-card-nokcal {
  font-size: 0.8rem;
  color: var(--ink-faint);
  background: var(--peach);
  padding: 0.12rem 0.5rem;
  border-radius: var(--pill);
}

/* Photo Thumbnail inside Cards */
.menu-card-media {
  position: relative;
  width: 145px;
  height: 110px;
  flex: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #25201c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.menu-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.menu-dish-card:hover .menu-card-img {
  transform: scale(1.06);
}
.menu-card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-rep-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(26, 20, 15, 0.72);
  color: #fff;
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 4px;
  backdrop-filter: blur(3px);
  pointer-events: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.menu-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.15rem 0.95rem;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
  gap: 0.6rem;
}
.card-tray-btn {
  border-radius: var(--pill);
  padding: 0.38rem 0.95rem;
  width: auto;
  height: auto;
  font-size: 0.82rem;
  font-family: var(--font-display);
}
.card-open-modal-btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
}

/* ------------------------------------------------------------- Enlarged Table View Photo Avatars */
.dish-name-cell {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}
.dish-thumb-avatar {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  background: #25201c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
}
.dish-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.dish-row:hover .dish-thumb-img {
  transform: scale(1.08);
}
.dish-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dish-thumb-icon {
  font-size: 1.8rem;
  line-height: 1;
}
.dish-category-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 4px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

/* ------------------------------------------------------------- Split Screen Dish Modal */
.dish-split-modal {
  max-width: 900px !important;
  width: 94vw !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  max-height: 90vh !important;
}
.modal-split-media-col {
  width: 46%;
  min-width: 340px;
  background: #191410;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.modal-hero-photo-wrap {
  width: 100%;
  height: 100%;
  min-height: 380px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.modal-hero-fallback {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #231C16;
}
.modal-rep-note {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(0deg, rgba(16, 12, 10, 0.92) 20%, transparent);
  color: #F8EDE3;
  font-size: 0.74rem;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.modal-split-content-col {
  width: 54%;
  padding: 1.8rem 1.8rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  max-height: 90vh;
  position: relative;
}
.modal-header-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.modal-chain-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 0.15rem 0.55rem;
  border-radius: var(--pill);
}
.modal-price-bar {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.35rem 0 0.65rem;
}
.modal-price-val {
  font-family: var(--font-data);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
}
.modal-price-sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.modal-nav-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}
.modal-step-btn {
  flex: 1;
  padding: 0.65rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-step-btn:hover:not(:disabled) {
  background: var(--peach);
  border-color: var(--accent);
  color: var(--accent-dark);
  transform: translateY(-1px);
}
.modal-step-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 768px) {
  .dish-split-modal {
    flex-direction: column !important;
  }
  .modal-split-media-col {
    width: 100% !important;
    min-width: 0 !important;
    height: 220px !important;
    min-height: 220px !important;
  }
  .modal-hero-photo-wrap {
    min-height: 220px !important;
  }
  .modal-split-content-col {
    width: 100% !important;
    padding: 1.2rem !important;
    max-height: none !important;
  }
  .menu-cards-grid {
    grid-template-columns: 1fr;
  }
  .menu-card-media {
    width: 125px;
    height: 95px;
  }
}

/* A photograph of the KIND of dish, not of this dish. Marked on the image
   itself: only 375 of the 1,364 dishes have a photograph of themselves, and a
   reader must be able to tell which they are looking at without reading the
   caption. */
.dish-photo.is-category { position: relative; }
.photo-kind {
  position: absolute; top: 0.55rem; left: 0.55rem; z-index: 1;
  background: rgba(20, 18, 16, 0.72); color: #fff;
  font-family: var(--font-data); font-size: 0.68rem; font-weight: 700;
  padding: 0.22rem 0.55rem; border-radius: var(--pill);
  backdrop-filter: blur(2px);
}
.dish-photo.is-category img { filter: saturate(0.92); }

/* /tee — activity level choices with the report's own descriptions */
.tee-activity { border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 16px 4px; margin: 16px 0; }
.tee-activity legend { font-weight: 700; padding: 0 6px; }
.tee-option { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.tee-option:last-of-type { border-bottom: 0; }
.tee-option span { color: var(--muted, #6b625b); font-size: .92rem; }
@media (max-width: 600px) { .tee-option { grid-template-columns: auto 1fr; } .tee-option span { grid-column: 2; } }
.calc-error { color: var(--accent, #B7282E); font-weight: 700; }
.tee-table th { text-align: left; width: 34%; }
@media (max-width: 600px) {
  .tee-table th, .tee-table td { display: block; width: auto; text-align: left; }
  .tee-table th { border-bottom: 0; padding-bottom: 2px; }
}

/* ---------------------------------------------------------------- update date, 糖質一覧表 */
.page-meta { font-size: .85rem; color: var(--muted, #666); margin: .25rem 0 1rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.carbs-print-table td:not(:first-child), .carbs-print-table th:not(:first-child) { text-align: right; white-space: nowrap; }
@media print {
  .carbs-table-page .breadcrumbs, .carbs-table-page .license { display: none; }
  .carbs-group { break-inside: auto; border: 0; padding: 0; margin: 0 0 8pt; }
  .carbs-group h2 { break-after: avoid; font-size: 12pt; }
  .carbs-print-table { font-size: 9pt; width: 100%; border-collapse: collapse; }
  .carbs-print-table th, .carbs-print-table td { padding: 1pt 4pt; border-bottom: .5pt solid #999; }
  .carbs-print-table thead { display: table-header-group; }
  .carbs-print-table tr { break-inside: avoid; }
  .carbs-print-table a { color: #000; text-decoration: none; }
  .table-scroll { overflow: visible !important; }
}

/* Goal-shaped top-10 lists on a chain page */
.menu-rankings { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.menu-rankings > .license { grid-column: 1 / -1; margin: 0; }
.menu-ranking h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.menu-ranking ol { margin: 0; padding-left: 1.4rem; }
.menu-ranking li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0; }
.menu-ranking .rank-val { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.food-page h1 .h1-tail { font-size: 0.6em; font-weight: 700; margin-left: 0.15em; }
.food-answer { font-size: 1.05rem; margin: 0.4rem 0 0.8rem; }

/* Diet guides, affiliate slots, author page */
.diet-table td { font-variant-numeric: tabular-nums; }
.ad-slot { border: 1px dashed var(--ink-faint); background: var(--paper-raised); padding: 1rem 1.1rem; margin: 1.5rem 0; }
.ad-label { display: inline-block; font-size: 0.75rem; letter-spacing: 0.08em; border: 1px solid var(--ink); padding: 0.05rem 0.4rem; margin: 0 0 0.4rem; }
.ad-pending { color: var(--ink-soft); }
.author-todo { border-style: dashed; }
.todo-owner { font-weight: 700; }
.chain-groups { margin: 1.5rem 0; }
.chain-groups h3 { margin: 1rem 0 0.4rem; font-size: 1rem; }
.home-guides, .home-column { margin: 2rem 0; }