/* Mashed Potatoes Diet Helper.
   The original front end used a design-system bundle that did not ship with
   the handoff, so these tokens are reconstructed from the colour values left
   inline in Diet Planner.dc.html: terracotta accent #c67139, olive #7a8a5e,
   cream #f5ead8, ink #201e1d. Same palette, same feel — no external files. */

:root {
  --color-bg: #f5ead8;
  --color-text: #201e1d;
  --color-divider: #e2d5bf;

  --color-accent:     #c67139;
  --color-accent-100: #fdf4ec;
  --color-accent-200: #f6e0cb;
  --color-accent-300: #eac4a0;
  --color-accent-400: #dca471;
  --color-accent-500: #c67139;
  --color-accent-600: #ad5e2c;
  --color-accent-700: #8d4a22;
  --color-accent-800: #6f3a1c;
  --color-accent-900: #512a15;

  --color-accent-2-100: #f2f5ec;
  --color-accent-2-200: #e0e7d2;
  --color-accent-2-300: #c7d3b0;
  --color-accent-2-400: #a7b988;
  --color-accent-2-500: #7a8a5e;
  --color-accent-2-600: #66744d;
  --color-accent-2-700: #525d3e;
  --color-accent-2-800: #414a32;
  --color-accent-2-900: #303726;

  --color-neutral-100: #fbf5e9;
  --color-neutral-200: #f0e6d4;
  --color-neutral-300: #dfd3bd;
  --color-neutral-400: #bfb29a;
  --color-neutral-500: #968a78;
  --color-neutral-600: #71675a;
  --color-neutral-700: #534c43;
  --color-neutral-800: #36312c;

  --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(32,30,29,.07);
  --shadow-md: 0 4px 14px rgba(32,30,29,.11);

  /* Source colours, carried over from the component's props. */
  --src-standard: #c67139;  --src-fasting: #3f6b86;  --src-woolworths: #332f2c;
  --src-checkers: #4d7a33;  --src-local: #8c6d2f;    --src-highprotein: #7a3f4a;
  --src-balanced: #5f7050;  --src-vegetarian: #4f7a5c; --src-nocook: #6b6f86;
  --src-cutting: #8c3f3f;   --src-hardgainer: #a06a2c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(28px, 6vw, 46px); margin: var(--space-3) 0 0; max-width: 22ch; }
h2 { font-size: clamp(20px, 4vw, 26px); margin: 0; }
h3 { font-size: 18px; margin: 0 0 var(--space-3); }
p { text-wrap: pretty; }
a { color: var(--color-accent-700); }

.wrap { max-width: 1240px; margin: 0 auto; padding: var(--space-4); }
@media (min-width: 720px) { .wrap { padding: var(--space-8) var(--space-6); } }

.card {
  background: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-4);
}
@media (min-width: 720px) { .card { padding: var(--space-4) var(--space-6) var(--space-6); } }

.muted { color: var(--color-neutral-700); }
.small { font-size: 13px; }
.tiny  { font-size: 11.5px; }
.label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--color-neutral-600);
}
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.between { display: flex; gap: var(--space-4); flex-wrap: wrap;
  align-items: baseline; justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* Every tap target clears 44px — this is used on a phone in a kitchen (§8). */
button, .btn, input, select, textarea { font: inherit; }
button, .btn {
  min-height: 44px; padding: 10px 18px;
  border-radius: 999px; border: 1px solid var(--color-neutral-300);
  background: var(--color-bg); color: var(--color-text);
  cursor: pointer; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
button:hover { border-color: var(--color-neutral-400); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }
button[disabled] { opacity: .5; cursor: default; }
button.primary { background: var(--color-accent-2-600); color: var(--color-bg);
  border-color: var(--color-accent-2-600); }
button.accent { background: var(--color-accent-600); color: var(--color-bg);
  border-color: var(--color-accent-600); }
button.ghost { background: transparent; border-color: transparent;
  color: var(--color-neutral-700); }
button.on { background: var(--color-accent-600); color: var(--color-bg);
  border-color: var(--color-accent-600); }
button.small-btn { min-height: 36px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; }
button.danger { color: var(--color-accent-900); border-color: var(--color-accent-500); }

input, select, textarea {
  min-height: 44px; width: 100%;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-divider); background: var(--color-bg);
  color: var(--color-text);
}
textarea { min-height: 72px; resize: vertical; }
label.field { display: flex; flex-direction: column; gap: 4px; }
label.field > span { font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--color-neutral-600); }

.banner { display: block; width: 100%; max-width: 1080px;
  height: auto; border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-accent-2-200); color: var(--color-accent-2-800);
  border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.tag {
  display: inline-block; border-radius: 999px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 600;
}

nav.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--space-4); }
nav.tabs button { min-height: 44px; }

.grid { display: grid; gap: 10px; }
.cols-auto { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 900px) { .calc-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); } }
.calc-grid { display: grid; gap: var(--space-6); align-items: start; }

/* meal cards */
.meals { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .meals { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
.meal {
  position: relative; text-align: left; display: block; width: 100%;
  border-radius: var(--radius-md); border: 1.5px solid var(--color-neutral-300);
  background: var(--color-neutral-100); padding: 12px 14px;
  box-shadow: var(--shadow-sm); min-height: 44px; cursor: pointer;
}
.meal.selected { box-shadow: var(--shadow-md); }
.meal .name { font-family: var(--font-heading); font-size: 16px; line-height: 1.2;
  display: block; margin-bottom: 4px; padding-right: 22px; }
.meal .macros { font-size: 12.5px; color: var(--color-neutral-700); }
.meal .ings { font-size: 12px; color: var(--color-neutral-600); margin-top: 6px;
  line-height: 1.4; }
.treat {
  position: absolute; top: 12px; right: 12px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent-600);
}
.srcdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px; }

.slot { border-top: 1px solid var(--color-divider); padding-top: var(--space-4);
  margin-top: var(--space-4); }
.slot:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.totalbar { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.stat { background: var(--color-neutral-200); border-radius: var(--radius-sm); padding: 10px 12px; }
.stat .v { font-family: var(--font-heading); font-size: 21px; line-height: 1.15; }
.stat.kcal { background: var(--color-accent-200); }
.stat.protein { background: var(--color-accent-2-200); }

.bar { height: 7px; border-radius: 999px; background: var(--color-neutral-300);
  overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; background: var(--color-accent-2-600); }
.bar > i.over { background: var(--color-accent-600); }

.verdict { border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600;
  display: inline-block; }
.v-on    { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.v-over  { background: var(--color-accent-200);  color: var(--color-accent-800); }
.v-under, .v-well_under { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.v-empty, .v-none { background: var(--color-neutral-200); color: var(--color-neutral-700); }

.notice {
  background: var(--color-accent-100); border: 1.5px solid var(--color-accent-300);
  border-radius: var(--radius-lg); padding: var(--space-4); margin-top: var(--space-4);
}
.notice.calm { background: var(--color-accent-2-100); border-color: var(--color-accent-2-300); }

/* history strip */
.strip { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.tile { border-radius: var(--radius-sm); border: 1px solid var(--color-divider);
  background: var(--color-bg); padding: 10px; text-align: left; min-height: 78px; }
.tile.today { border-color: var(--color-accent-500); border-width: 2px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  background: var(--color-accent-2-600); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-divider);
  vertical-align: top; }
th { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-neutral-600); font-weight: 700; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.auth { max-width: 420px; margin: 8vh auto; padding: var(--space-4); }
.err { background: var(--color-accent-200); color: var(--color-accent-900);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; }
.ok  { background: var(--color-accent-2-200); color: var(--color-accent-2-800);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px;
  background: var(--color-neutral-800); color: var(--color-bg);
  padding: 10px 18px; border-radius: 999px; font-size: 13.5px; z-index: 50;
  box-shadow: var(--shadow-md); max-width: calc(100vw - 32px); }

.hide { display: none !important; }
.spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--color-neutral-400); border-top-color: transparent;
  animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media print {
  @page { size: A4; margin: 11mm; }
  .noprint { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}

/* Mobile first means the controls come first. On a phone the hero copy pushed
   the tabs below the fold, so the intro paragraphs and the oversized headline
   stand down — they are scene-setting, not the job. */
@media (max-width: 719px) {
  .wrap > header .banner { margin-bottom: 10px; }
  h1 { font-size: 26px; margin-top: 8px; }
  .hero-copy { display: none; }
  nav.tabs { margin-top: 12px; position: sticky; top: 0; z-index: 20;
    background: var(--color-bg); padding: 8px 0; margin-left: -16px;
    margin-right: -16px; padding-left: 16px; padding-right: 16px;
    box-shadow: 0 2px 0 var(--color-divider); overflow-x: auto;
    flex-wrap: nowrap; scrollbar-width: none; }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs button { flex: 0 0 auto; }
  .card { padding: 14px; }
}