@import url('./reset.css');

/* ── Custom Properties ── */
:root {
  --bg: #1a160e;
  --bg-surface: #211c14;
  --text: #ffb000;
  --text-muted: #aa7700;
  --error: #ff3333;
  --success: #00ff00;
  --accent: #ffcc00;
  --border: #ffb000;
  --border-muted: #333333;

  --font: 'JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'Inconsolata', monospace;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;

  --spacing-xs: 0.5ch;
  --spacing-sm: 1ch;
  --spacing-md: 2ch;
  --spacing-lg: 4ch;
  --spacing-xl: 6ch;
}

/* ── Base ── */
body {
  font-family: var(--font);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}

/* ── CRT Screen Effect ── */

/* Scanlines overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Inline SVG noise filter for grain texture */
.crt-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.04;
  mix-blend-mode: screen;
}

/* ── Typography ── */
h1, h2, h3, h4 {
  font-weight: normal;
  line-height: 1.3;
}

h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-base); }

/* ── App Layout ── */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md);
  text-shadow: 0 0 2px rgba(255, 176, 0, 0.15);
}

/* ── Header / Nav ── */
header {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-muted);
  margin-bottom: var(--spacing-md);
}

.logo {
  font-size: var(--font-size-lg);
  color: var(--text);
  letter-spacing: 0.1ch;
  text-decoration: none;
}

.logo .version {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

nav {
  display: flex;
  gap: var(--spacing-md);
}

nav a {
  color: var(--text-muted);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid transparent;
  transition: color 0.1s, border-color 0.1s;
}

nav a:hover {
  color: var(--text);
}

nav a.active {
  color: var(--text);
  border-color: var(--border);
}

nav a::before {
  content: '[';
  color: var(--text-muted);
}

nav a::after {
  content: ']';
  color: var(--text-muted);
}

nav a.active::before,
nav a.active::after {
  color: var(--text);
}

/* ── Main Content ── */
main {
  flex: 1;
}

/* ── Route Views ── */
.view {
  display: none;
}

@keyframes crt-on {
  0%   { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0); }
}

.view.active {
  display: block;
  animation: crt-on 200ms ease-out;
}

/* ── Status Line ── */
.status-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-muted);
  margin-top: var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.status-line .help-link {
  color: var(--text-muted);
  text-decoration: none;
}

.status-line .help-link:hover {
  color: var(--text-primary);
}

/* ── Common UI ── */
.prompt::before {
  content: '> ';
  color: var(--text-muted);
}

.msg-ok {
  color: var(--success);
}

.msg-ok::before {
  content: 'OK: ';
}

@keyframes glitch {
  0%   { transform: translateX(0);    text-shadow: none; }
  20%  { transform: translateX(-2px); text-shadow: 2px 0 #ff0000, -2px 0 #00ffff; }
  40%  { transform: translateX(2px);  text-shadow: -2px 0 #ff0000, 2px 0 #00ffff; }
  60%  { transform: translateX(-1px); text-shadow: 1px 0 #ff0000, -1px 0 #00ffff; }
  80%  { transform: translateX(1px);  text-shadow: none; }
  100% { transform: translateX(0);    text-shadow: none; }
}

.msg-error {
  color: var(--error);
  animation: glitch 200ms linear;
}

.msg-error::before {
  content: 'ERROR: ';
}

.msg-loading {
  color: var(--text-muted);
}

.msg-loading::before {
  content: '[...] ';
}

/* ── Buttons ── */
.btn {
  color: var(--text-muted);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-muted);
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}

.btn:hover {
  color: var(--text);
  border-color: var(--border);
}

.btn:active {
  background: var(--text);
  color: var(--bg);
  transition: none;
}

.btn-primary {
  color: var(--text);
  border-color: var(--border);
}

.btn-danger {
  color: var(--error);
  border-color: var(--error);
}

/* ── Inputs ── */
.input {
  color: var(--text);
  border-bottom: 1px solid var(--border-muted);
  padding: var(--spacing-xs) 0;
  width: 100%;
  transition: border-color 0.1s;
  caret-color: var(--text);
}

.input:focus {
  border-color: var(--border);
  caret-color: var(--text);
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { caret-color: var(--text); }
  50% { caret-color: transparent; }
}

.input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Number input spinner */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

/* <num-input> component */
.num-input {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-muted);
}

.num-input:focus-within {
  border-color: var(--border);
}

.num-input__field {
  border: none !important;
  border-bottom: none !important;
  padding: var(--spacing-xs) var(--spacing-xs) !important;
  text-align: center;
}

.num-input__btn {
  color: var(--text-muted);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
  font-size: var(--font-size-base);
  line-height: 1;
  border: none;
  background: none;
}

.num-input__btn:hover {
  color: var(--text);
  background: var(--border-muted);
}

/* ── Grid ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32ch, 1fr));
  gap: var(--spacing-md);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-grid > *,
.eat-grid > * {
  animation: card-in 150ms ease-out both;
}

/* ── Empty State ── */
.empty-state {
  color: var(--text-muted);
  padding: var(--spacing-lg) 0;
}

.empty-state p::before {
  content: '> ';
}

/* ── Cook Header ── */
.cook-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

/* ── Recipe Card ── */
.recipe-card {
  border: 1px solid var(--border-muted);
  padding: var(--spacing-md);
  background: var(--bg-surface);
}

.recipe-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--spacing-sm);
}

.recipe-card__name {
  color: var(--text);
  font-size: var(--font-size-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.recipe-card__inventory {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
  white-space: nowrap;
}

.recipe-card__macros {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.recipe-card__macros-label {
  color: var(--text-muted);
  opacity: 0.6;
}

.recipe-card__actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

.recipe-card__confirm {
  display: flex;
  gap: var(--spacing-sm);
  width: 100%;
}

/* ── Recipe Form ── */
.recipe-form {
  max-width: 120ch;
}

.recipe-form > .prompt {
  margin-bottom: var(--spacing-md);
}

.recipe-form__field {
  margin-bottom: var(--spacing-md);
}

.recipe-form__field label {
  display: block;
  color: var(--text-muted);
  margin-bottom: var(--spacing-xs);
}

.recipe-form__section {
  margin: var(--spacing-md) 0;
}

.recipe-form__section h3 {
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.recipe-form__textarea {
  width: 100%;
  min-height: 8em;
  resize: vertical;
  border: 1px solid var(--border-muted);
  padding: var(--spacing-sm);
  line-height: 1.5;
}

.recipe-form__textarea:focus {
  border-color: var(--border);
}

.recipe-form__macros {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-muted);
  font-size: var(--font-size-sm);
}

.recipe-form__actions {
  display: flex;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

#rf-status {
  margin-top: var(--spacing-sm);
}

/* ── Ingredient Row ── */
.ingredient-row {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  border: 1px solid var(--border-muted);
}

.ingredient-row__main {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex-wrap: nowrap;
}

.ingredient-row__name {
  flex: 1 1 12ch;
  min-width: 12ch;
}

.ingredient-row__amount {
  flex-shrink: 0;
}

.ingredient-row__unit {
  width: auto !important;
  flex-shrink: 0;
  border: 1px solid var(--border-muted);
  padding: var(--spacing-xs);
  background: var(--bg);
  cursor: pointer;
}

.ingredient-row__unit option {
  background: var(--bg);
  color: var(--text);
}

.ingredient-row__results {
  margin-top: var(--spacing-sm);
}

.ingredient-row__nutrition {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.ingredient-row__manual-fields {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
}

.ingredient-row__manual-fields input {
  width: 6ch !important;
  text-align: right;
}

.ingredient-row__manual-fields label {
  color: var(--text-muted);
}

/* ── USDA Results ── */
.usda-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.usda-results__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-muted);
  font-size: var(--font-size-sm);
}

.usda-results__item:hover {
  border-color: var(--border);
  color: var(--text);
}

.usda-results__macros {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* ── API Key Prompt ── */
.api-key-prompt {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
}

.api-key-prompt .input {
  width: 40ch !important;
}

.api-key-prompt__hint {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ── Recipe View ── */
.recipe-view {
  max-width: 80ch;
}

.recipe-view__header {
  margin-bottom: var(--spacing-md);
}

.recipe-view__meta {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.recipe-view__macros {
  margin-bottom: var(--spacing-md);
  color: var(--text-muted);
}

.recipe-view__section {
  margin-bottom: var(--spacing-md);
}

.recipe-view__section h3 {
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.recipe-view__ingredient {
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
}

.recipe-view__ing-macros {
  color: var(--text-muted);
}

.recipe-view__instructions {
  font-family: var(--font);
  white-space: pre-wrap;
  color: var(--text);
  line-height: 1.5;
}

.recipe-view__actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

/* ── Eat Header ── */
.eat-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

/* ── Eat Card Grid ── */
.eat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32ch, 1fr));
  gap: var(--spacing-lg);
}

/* ── Inventory Card (Eat) ── */
.inventory-card {
  border: 1px solid var(--border-muted);
  padding: var(--spacing-md);
  background: var(--bg-surface);
}

.inventory-card[data-stock="few"] {
  box-shadow:
    2px 2px 0 0 rgba(255, 176, 0, 0.3),
    4px 4px 0 0 rgba(255, 176, 0, 0.2);
}

.inventory-card[data-stock="some"] {
  box-shadow:
    2px 2px 0 0 rgba(255, 176, 0, 0.4),
    4px 4px 0 0 rgba(255, 176, 0, 0.3),
    6px 6px 0 0 rgba(255, 176, 0, 0.2);
}

.inventory-card[data-stock="many"] {
  box-shadow:
    2px 2px 0 0 rgba(255, 176, 0, 0.5),
    4px 4px 0 0 rgba(255, 176, 0, 0.4),
    6px 6px 0 0 rgba(255, 176, 0, 0.3),
    8px 8px 0 0 rgba(255, 176, 0, 0.2);
}

.inventory-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--spacing-sm);
}

.inventory-card__name {
  color: var(--text);
  font-size: var(--font-size-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.inventory-card__stock {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
  white-space: nowrap;
}

.inventory-card__macros {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.inventory-card__actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

/* ── Track Section ── */

/* Track Header */
.track-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.track-header__target {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-muted);
}

/* Track Layout */
.track-columns {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.track-charts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.track-charts > * {
  display: flex;
  justify-content: center;
}

.track-columns[hidden] {
  display: none;
}

/* Date Navigation */
.track-date-nav {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.track-date-nav[hidden] {
  display: none;
}

.track-date-nav__label {
  min-width: 22ch;
}

.track-date-nav__spacer {
  flex: 1;
}

/* Ad-hoc Panel (content replacement) */
.track-adhoc-panel[hidden] {
  display: none;
}

.track-adhoc-panel__header {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

@keyframes seg-in {
  from { opacity: 0; }
  to   { opacity: var(--seg-opacity, 1); }
}

@keyframes bar-fill-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Bar Gauge */
.bar-gauge {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-base);
}

.bar-gauge__bar {
  color: var(--text-muted);
  white-space: nowrap;
}

.bar-gauge__fill {
  color: var(--text);
}

.bar-gauge__fill--animate {
  animation: bar-fill-in 400ms ease-out both;
}

.bar-gauge__empty {
  color: var(--text-muted);
  opacity: 0.3;
}

.bar-gauge__text {
  color: var(--text-muted);
  white-space: nowrap;
}

.bar-gauge--warning .bar-gauge__fill {
  color: var(--accent);
}

.bar-gauge--warning .bar-gauge__text {
  color: var(--accent);
}

.bar-gauge--over .bar-gauge__fill {
  color: var(--error);
}

.bar-gauge--over .bar-gauge__text {
  color: var(--error);
}

/* Body Gauge — retro VU meter */
.body-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.body-gauge__svg {
  width: 308px;
  height: 308px;
}

/* Macro Rings — concentric reactor core */
.macro-rings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.macro-rings__svg {
  height: 308px;
  width: auto;
}

.macro-rings__legend {
  display: flex;
  gap: var(--spacing-lg);
  font-size: var(--font-size-sm);
}

.macro-rings__legend-item {
  white-space: nowrap;
}

/* Consumption Log */
.consumption-log__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--spacing-sm);
}

.consumption-log__header h3 {
  margin: 0;
}

.consumption-log {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.consumption-log__empty {
  color: var(--text-muted);
  padding: var(--spacing-sm) 0;
}

.consumption-log__entry {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--border-muted);
}

.consumption-log__time {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
  width: 7ch;
  margin-right: 0.75em;
}

.consumption-log__name {
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consumption-log__detail {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
  white-space: nowrap;
}

.consumption-log__macros {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
  white-space: nowrap;
}

.consumption-log__delete {
  flex-shrink: 0;
}

.consumption-log__confirm-prompt {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* Ad-hoc Food Form */
.adhoc-food {
  padding: 0;
}

.adhoc-food__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-sm);
}

.adhoc-food__name {
  flex: 1 1 16ch;
  min-width: 16ch;
}

.adhoc-food__unit {
  width: auto !important;
  flex-shrink: 0;
  border: 1px solid var(--border-muted);
  padding: var(--spacing-xs);
  background: var(--bg);
  cursor: pointer;
}

.adhoc-food__unit option {
  background: var(--bg);
  color: var(--text);
}

.adhoc-food__results {
  margin-bottom: var(--spacing-sm);
}

.adhoc-food__macros {
  margin-bottom: var(--spacing-sm);
}

.adhoc-food__macro-fields {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
}

.adhoc-food__macro-fields input {
  width: 6ch !important;
  text-align: right;
}

.adhoc-food__macro-fields label {
  color: var(--text-muted);
}

.adhoc-food__actions {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.adhoc-food__status {
  margin-top: var(--spacing-xs);
}

/* Weekly Trend */
/* Weekly Trend — radial spoke wheel */
.weekly-trend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.weekly-trend__empty {
  color: var(--text-muted);
  padding: var(--spacing-sm) 0;
}

.weekly-trend__svg {
  width: 308px;
  height: 308px;
}

/* ── Command Palette ── */
.command-palette {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms, visibility 150ms;
  pointer-events: none;
}

.command-palette.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.command-palette__container {
  position: absolute;
  top: 15vh;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  transition: transform 150ms ease-out;
  width: 60ch;
  max-width: calc(100vw - 4ch);
  border: 1px solid var(--border);
  background: var(--bg);
}

.command-palette.open .command-palette__container {
  transform: translateX(-50%) translateY(0);
}

.command-palette__input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-bottom: 1px solid var(--border-muted);
  font-size: var(--font-size-lg);
  color: var(--text);
  background: var(--bg);
  font-family: var(--font);
  caret-color: var(--text);
}

.command-palette__input:focus {
  animation: cursor-blink 1s step-end infinite;
}

.command-palette__input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.command-palette__list {
  max-height: 40vh;
  overflow-y: auto;
}

.command-palette__item {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-md);
  cursor: pointer;
  color: var(--text-muted);
}

.command-palette__item:hover,
.command-palette__item.selected {
  background: var(--bg-surface);
  color: var(--text);
}

.command-palette__item-label {
  flex: 1;
}

.command-palette__item-hint {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  opacity: 0.6;
}

.command-palette__empty {
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-muted);
}

.command-palette__status {
  padding: var(--spacing-xs) var(--spacing-md);
  border-top: 1px solid var(--border-muted);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ── Welcome View ── */
.welcome-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: var(--spacing-lg);
  text-align: center;
}

.welcome-view__logo {
  max-width: 320px;
  width: 100%;
  image-rendering: pixelated;
}

.welcome-view__tagline {
  color: var(--text-muted);
  font-size: var(--font-size-lg);
}

.welcome-view__desc {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: 2;
}

.welcome-view__nav {
  text-align: left;
  line-height: 2.2;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.welcome-view__prompt {
  color: var(--text);
  display: block;
  margin-bottom: var(--spacing-xs);
}

.welcome-view__nav-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--spacing-md);
  align-items: center;
}

.welcome-view__link {
  text-align: center;
}

.welcome-view__hint {
  color: var(--border-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-md);
}

/* ── Help View ── */
.help-view {
  max-width: 80ch;
}

.help-view__section {
  margin-bottom: var(--spacing-lg);
}

.help-view__section h2 {
  color: var(--text);
  margin-bottom: var(--spacing-sm);
}

.help-view__section h2::before {
  content: '## ';
  color: var(--text-muted);
}

.help-view__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.help-view__table th {
  text-align: left;
  color: var(--text-muted);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--border-muted);
}

.help-view__table td {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--border-muted);
}

.help-view__flow {
  color: var(--text-muted);
  line-height: 2;
  font-size: var(--font-size-sm);
}

.help-view__flow-arrow {
  color: var(--text);
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
  /* Reduce app padding */
  #app {
    padding: var(--spacing-sm);
  }

  /* Stack header: logo above nav */
  header {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  /* Tighten nav link spacing */
  nav {
    gap: var(--spacing-sm);
  }

  /* Cards go full-width on narrow screens */
  .card-grid,
  .eat-grid {
    grid-template-columns: 1fr;
  }

  /* Eat grid: reduce gap so stacked shadows don't clip */
  .eat-grid {
    gap: var(--spacing-md);
  }

  /* Recipe card macros: allow wrapping */
  .recipe-card__macros,
  .inventory-card__macros {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  /* Cook/Eat headers: stack on narrow screens */
  .cook-header,
  .eat-header {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  /* Recipe form: reduce max-width */
  .recipe-form {
    max-width: 100%;
  }

  /* Ingredient row: allow wrapping */
  .ingredient-row__main {
    flex-wrap: wrap;
  }

  /* API key input: fit screen */
  .api-key-prompt .input {
    width: 100% !important;
  }

  /* Recipe view: full width */
  .recipe-view {
    max-width: 100%;
  }

  /* Track: hide the three chart visualizations */
  .track-charts {
    display: none;
  }

  /* Track header: stack target below title */
  .track-header {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  /* Track date nav: allow wrapping, reduce bottom margin */
  .track-date-nav {
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
  }

  .track-date-nav__label {
    min-width: auto;
  }

  /* Consumption log entries: allow wrapping */
  .consumption-log__entry {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .consumption-log__name {
    white-space: normal;
    flex-basis: 100%;
    order: -1;
  }

  /* Help view: full width, scrollable tables */
  .help-view {
    max-width: 100%;
  }

  .help-view__table {
    display: block;
    overflow-x: auto;
  }

  /* Welcome view: reduce min-height */
  .welcome-view {
    min-height: 40vh;
    gap: var(--spacing-md);
  }

  /* Status line: smaller gap */
  .status-line {
    margin-top: var(--spacing-md);
  }
}