/* Tokens measured off screens 1–3 of the Figma design, which are the source of
   truth. Screens 4–8 are still greyboxes and are built from these, not copied. */

:root {
  --bg: #f6f6ea;
  --sidebar: rgba(255, 255, 255, 0.6);
  --surface: #ffffff;
  --line: #5b2316;
  --ink: #272e45;
  --ink-deep: #11223c;
  --muted: #8a8fa0;
  --title: #5b2316;
  --divider: #dadbe0;
  --cell: #f6f6f7;

  /* A colour per nav section. */
  --recipes-bg: #12223c;
  --recipes-fg: #bed6f0;
  --week-bg: #fdbeac;
  --week-fg: #ea552d;
  --settings-bg: #93932f;
  --settings-fg: #d5ee5f;

  /* The lime does the work the dark navy used to. */
  --primary-bg: #d5ee5f;
  --primary-fg: #1a1d00;

  --pam-bg: #fdbeac;
  --pam-fg: #ea552d;
  --nico-bg: #b3c4de;
  --nico-fg: #12223c;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-chip: 4px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* ---- Shell --------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--sidebar);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; min-width: 0; }

.brand-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.brand-sub {
  font-size: 11px;
  color: var(--muted);
}

.nav { display: flex; flex-direction: column; gap: 8px; }

/* Each item is a filled block with its own colour, only when it's the one
   you're on — an unselected block would make three shouting rectangles. */
.nav-item {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.nav-item:hover { background: rgba(91, 35, 22, 0.06); }

.nav-item--recipes.is-on  { background: var(--recipes-bg);  color: var(--recipes-fg); }
.nav-item--week.is-on     { background: var(--week-bg);     color: var(--week-fg); }
.nav-item--settings.is-on { background: var(--settings-bg); color: var(--settings-fg); }

.main {
  padding: 32px 36px 64px;
  max-width: 1200px;
}

.view { display: flex; flex-direction: column; gap: 16px; }
.view[hidden] { display: none; }

.view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.view-head-actions { display: flex; gap: 10px; flex-shrink: 0; }

.page-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.view-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

.section-title {
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
}

.helper {
  color: var(--muted);
  font-size: 12px;
  max-width: 70ch;
}

.empty { color: var(--muted); font-size: 13px; }

.link-back {
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
}

.link-back:hover { color: var(--ink); }

/* ---- Fields & buttons ---------------------------------------------------- */

.field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

/* Chrome draws a select's chevron inside the content box, so it sits right up
   against the border at the padding the text fields use. Extra room on the
   right only, so the label still starts in line with every other field. */
select.field { padding-right: 16px; }

.field::placeholder { color: var(--muted); }
.field:focus { outline: 2px solid var(--line); outline-offset: 1px; }

.search { max-width: 420px; }

.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group--narrow { max-width: 160px; }

.field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.meta-row { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

.btn:hover { background: rgba(91, 35, 22, 0.05); }

.btn--primary {
  background: var(--primary-bg);
  border-color: var(--primary-fg);
  color: var(--primary-fg);
}

.btn--primary:hover { filter: brightness(0.96); }

.btn--ghost {
  align-self: flex-start;
  border-style: dashed;
  color: var(--muted);
}

.btn--danger { border-color: var(--line); color: var(--line); }
.btn--danger:hover { background: rgba(91, 35, 22, 0.08); }

.btn--icon { padding: 6px 11px; font-size: 15px; line-height: 1; }

/* ---- Chips --------------------------------------------------------------- */

.chip {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--radius-chip);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.chip--pam  { background: var(--pam-bg);  color: var(--pam-fg); }
.chip--nico { background: var(--nico-bg); color: var(--nico-fg); }

/* ---- 1 · Recipes --------------------------------------------------------- */

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.recipe-card {
  text-align: left;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.recipe-card:hover { box-shadow: 0 2px 0 var(--line); transform: translateY(-1px); }

.recipe-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--title);
}

.recipe-card-meta { font-size: 12px; color: var(--muted); }

/* ---- 2 · Recipe editor --------------------------------------------------- */

.table { display: flex; flex-direction: column; gap: 8px; }

/* The rows live one level down, inside #ingredient-rows — .table's gap only
   separates the header from this container, not the rows from each other. */
#ingredient-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.table-head,
.ingredient-row {
  display: grid;
  grid-template-columns: 90px 100px minmax(0, 1fr) 190px 36px;
  gap: 8px;
  align-items: center;
}

.table-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-deep);
  padding: 0 2px;
}

.ingredient-row .field { padding: 8px 10px; }
.ingredient-row select.field { padding-right: 16px; }

.row-remove {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  padding: 6px;
  border-radius: var(--radius-sm);
}

.row-remove:hover { background: rgba(91, 35, 22, 0.08); color: var(--line); }

.editor-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

/* ---- 3 · Week plan ------------------------------------------------------- */

.week-nav { display: flex; align-items: center; gap: 12px; }

.legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.legend-note { color: var(--muted); font-size: 12px; }

/* The whole grid sits on a white rounded panel, as in the design — the cream
   page shows around it rather than behind every cell. */
.week-grid {
  display: grid;
  grid-template-columns: 70px repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 24px;
  border-radius: 16px;
  background: var(--surface);
  /* Not `start`: cells must stretch so every day in a row matches the tallest. */
  align-items: stretch;
}

.day-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-deep);
  padding: 0 2px 4px;
}

.slot-label {
  font-size: 12px;
  color: var(--muted);
  padding-top: 12px;
}

.cell {
  background: var(--cell);
  border-radius: var(--radius);
  min-height: 96px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cell.is-drop { outline: 2px solid var(--line); outline-offset: -2px; }

.meal-card {
  text-align: left;
  padding: 8px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meal-card.is-dragging { opacity: 0.4; }

/* Bought in rather than cooked, so it reads as its own thing: the page cream
   inside the white cell, outlined in the same brown the recipe cards use. */
.meal-card--sixpack {
  background: var(--bg);
  border-color: var(--line);
}

.meal-card--sixpack .meal-name { font-weight: 600; color: var(--ink); }

.meal-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-deep);
}

.meal-servings { font-size: 11px; color: var(--muted); }
.meal-chips { display: flex; gap: 4px; flex-wrap: wrap; }

/* Pushed to the bottom, so the + is in the same place in every cell in a row
   regardless of how many meals sit above it. */
.add-meal {
  margin-top: auto;
  border: 0;
  background: none;
  color: var(--muted);
  padding: 4px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.add-meal:hover { background: rgba(91, 35, 22, 0.07); color: var(--ink); }

/* ---- 5 · Preview --------------------------------------------------------- */

.list-columns {
  columns: 2;
  column-gap: 32px;
}

.aisle {
  break-inside: avoid;
  margin-bottom: 20px;
}

.aisle-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--divider);
}

.aisle-name { font-size: 13px; font-weight: 600; }
.aisle-count { font-size: 11px; color: var(--muted); }

.item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
}

.item-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--line); }
.item-name { flex: 1; min-width: 0; }
.item-row.is-off .item-name { color: var(--muted); text-decoration: line-through; }

.item-amount {
  width: 90px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: right;
  font: inherit;
  color: var(--ink);
}

.item-amount:hover { border-color: var(--divider); }
.item-amount:focus { border-color: var(--line); outline: none; background: var(--surface); }

.item-unit { width: 52px; color: var(--muted); font-size: 12px; }

/* ---- 7 · Settings -------------------------------------------------------- */

.category-list { display: flex; flex-direction: column; gap: 6px; max-width: 620px; }

.category-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius);
  background: var(--cell);
}

.category-row.is-hidden .category-name { color: var(--muted); text-decoration: line-through; }
.category-row.is-drag { outline: 2px solid var(--line); }

.category-grip { color: var(--muted); cursor: grab; }
.category-name { flex: 1; min-width: 0; }

.category-actions { display: flex; gap: 10px; }

.category-action {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
}

.category-action:hover { color: var(--ink); text-decoration: underline; }

/* ---- Panels -------------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(39, 46, 69, 0.35);
  z-index: 40;
}

.panel-layer {
  position: fixed;
  inset: 0;
  z-index: 41;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
}

.panel {
  pointer-events: auto;
  width: min(440px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 24px 26px;
  border-radius: 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.panel-title { font-size: 15px; font-weight: 600; }
.panel-sub { font-size: 12px; color: var(--muted); }

.panel-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* The Six Pack Chef button sits above the recipe picker. Choosing it hides the
   picker and servings — neither means anything for a meal nobody is cooking. */
.sixpack-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

.sixpack-btn:hover { background: rgba(91, 35, 22, 0.06); }
.sixpack-btn.is-on { background: var(--primary-bg); border-color: var(--primary-fg); color: var(--primary-fg); }
.sixpack-hint { font-size: 11px; font-weight: 400; color: var(--muted); }
.sixpack-btn.is-on .sixpack-hint { color: var(--primary-fg); opacity: 0.7; }

.who-row { display: flex; gap: 8px; }

.who-toggle {
  padding: 6px 12px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-chip);
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.who-toggle.is-on { border-color: transparent; }
.who-toggle--pam.is-on  { background: var(--pam-bg);  color: var(--pam-fg); }
.who-toggle--nico.is-on { background: var(--nico-bg); color: var(--nico-fg); }

.url-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--bg);
}

.url-text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Toast --------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
}

/* ---- Narrow -------------------------------------------------------------- */

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; align-items: center; justify-content: space-between; }
  .nav { flex-direction: row; }
  .main { padding: 20px; }
  .list-columns { columns: 1; }
  .week-grid { grid-template-columns: 60px repeat(7, minmax(90px, 1fr)); overflow-x: auto; }
}