/* Components. Every value comes from styles/tokens.css. Layout reflows from
   320px up with wrapping flex and auto-fill grids. */

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { margin: 0; line-height: var(--leading-heading); }
h1 { font-size: var(--text-h1); }
p { margin: 0; }
s { text-decoration-thickness: 1.5px; }
ol { margin: 0; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--space-16);
  top: -100px;
  z-index: 10;
  padding: var(--space-12) var(--space-16);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.skip:focus { top: var(--space-16); }

.price { color: var(--ink); }
.price--md { font-size: var(--text-price); line-height: 1.1; }
.price--lg { font-size: var(--text-price-lg); line-height: 1.05; }
.caption { font-size: var(--text-caption); color: var(--ink-3); }

/* --- header and footer ------------------------------------------------- */

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__inner,
.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-14) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: var(--touch-min);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-12) var(--space-14);
  color: var(--ink);
  text-decoration: none;
}
.nav__link:hover { color: var(--green-900); text-decoration: underline; }
.nav__link[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: var(--space-8);
}
.nav__link--section { font-weight: 700; }

.site-footer {
  margin-top: auto;
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: var(--text-small);
  color: var(--ink-3);
}
.site-footer__inner { padding: var(--space-24) var(--gutter); }

/* --- page -------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-48) var(--gutter) var(--space-64);
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}
/* Headings take focus after a navigation so screen readers announce the
   new page. They are not controls, so they get no focus ring. */
.page:focus,
.page h1:focus { outline: none; }

.page__head { display: flex; flex-direction: column; gap: var(--space-8); }
.lead { font-size: var(--text-lead); color: var(--ink-2); max-width: var(--prose-max); }
.irish { font-size: var(--text-h3); font-style: italic; color: var(--green-700); }
.back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: var(--text-small);
  font-weight: 700;
}
.loading { color: var(--ink-3); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
}
.notice { display: flex; flex-direction: column; gap: var(--space-4); }
p.notice { display: block; }
.notice a { font-weight: 700; }
.notice__title { font-size: var(--text-lead); }
.notice--warn { background: var(--warn-bg); border-color: var(--warn-bg); color: var(--warn); }

.error {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-20);
  border: 2px solid var(--error);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--error);
}

/* --- controls ---------------------------------------------------------- */

.filters { display: flex; flex-direction: column; gap: var(--space-16); }
.filters__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-16); }
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 200px;
  max-width: 100%;
  font-size: var(--text-small);
  font-weight: 700;
}
.select {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-8) var(--space-12);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-body);
  font-weight: 400;
}
.count { margin: 0 0 var(--space-10) auto; font-size: var(--text-small); color: var(--ink-3); }

.pills { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.pill {
  min-height: var(--touch-min);
  padding: var(--space-8) var(--space-18);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-control);
  cursor: pointer;
}
.pill:hover { border-color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.button {
  min-height: var(--input-h);
  padding: 0 var(--space-24);
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.button--secondary { border: 1.5px solid var(--green-700); background: var(--surface); color: var(--green-700); }
.button--secondary:hover { border-color: var(--green-900); color: var(--green-900); }

.toggle {
  align-self: flex-start;
  min-height: var(--touch-min);
  padding: var(--space-8) var(--space-16);
  border: 1.5px solid var(--green-700);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--green-700);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
}
.toggle[aria-pressed="true"] { background: var(--green-25); }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-40) var(--space-24);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--ink-2);
}
.empty__title { font-size: var(--text-h3); font-weight: 700; color: var(--ink); }

/* --- chips ------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.chip {
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: var(--leading-tight);
}
.chip--saving { border-radius: var(--radius-pill); background: var(--green-50); color: var(--green-700); }
.chip--best { border-radius: var(--radius-xs); background: var(--surface); color: var(--green-700); box-shadow: inset 0 0 0 1.5px var(--green-700); }
.chip--warn { border-radius: var(--radius-xs); background: var(--warn-bg); color: var(--warn); }
/* A price that needs a loyalty card or a multi-buy: plain, so it reads as a
   condition rather than a saving. */
.chip--condition { border-radius: var(--radius-xs); background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* This week's price against earlier weeks: "Lowest in 8 weeks". */
.chip--history { border-radius: var(--radius-xs); background: var(--green-25); color: var(--green-700); }

/* --- cards ------------------------------------------------------------- */

.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-20); }
.grid > li { display: flex; }
.grid--offers { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.grid--recipes { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--space-24); }

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.offer { padding: var(--space-16); gap: var(--space-4); }
.offer__shop,
.offer__size,
.offer__usual,
.offer__ends { font-size: var(--text-caption); color: var(--ink-3); }
.offer__name { font-size: var(--text-lead); line-height: var(--leading-tight); }
.offer__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-10); margin-top: var(--space-8); }
.offer__was { font-size: var(--text-small); color: var(--ink-3); }
.offer .chips { margin-top: var(--space-4); }
.card__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  margin-top: auto;
  padding-top: var(--space-8);
  font-size: var(--text-small);
  font-weight: 700;
}
.offer__links { margin-top: auto; display: flex; flex-wrap: wrap; column-gap: var(--space-16); }
.offer__links .card__link { margin-top: 0; }

.recipe-card { padding: var(--space-18); gap: var(--space-6); color: var(--ink); text-decoration: none; }
.recipe-card:hover { color: var(--ink); border-color: var(--green-700); }
.recipe-card:hover .recipe-card__title { text-decoration: underline; }
.recipe-card__image {
  display: block;
  width: calc(100% + 2 * var(--space-18));
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: calc(-1 * var(--space-18)) calc(-1 * var(--space-18)) var(--space-8);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.recipe-card .chips { margin-bottom: var(--space-2); }
.recipe-card__title { font-size: var(--text-h3); line-height: var(--leading-tight); }
.recipe-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8); margin-top: var(--space-4); }
.recipe-card__per { font-size: var(--text-small); color: var(--ink-3); }
.recipe-card__saving { font-size: var(--text-small); font-weight: 700; color: var(--green-700); }
.recipe-card__note { font-size: var(--text-caption); color: var(--ink-2); }
.recipe-card__meta { margin-top: auto; padding-top: var(--space-4); font-size: var(--text-caption); color: var(--ink-3); }

/* --- recipe detail ----------------------------------------------------- */

.detail { display: grid; gap: var(--space-32); align-items: start; }
.detail__main { display: flex; flex-direction: column; gap: var(--space-32); min-width: 0; }
@media (min-width: 900px) {
  .detail { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  .cost { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-24); }
  .detail__main { grid-column: 1; grid-row: 1; }
}

.cost {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
}
.cost__title { font-size: var(--text-lead); color: var(--ink-2); }
.cost__per { display: flex; flex-direction: column; color: var(--ink-2); }
.cost__total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-8);
  padding-top: var(--space-14);
  border-top: 1px solid var(--line);
}
.cost__total strong { font-size: var(--text-total); font-variant-numeric: tabular-nums; }
.cost__saving {
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-sm);
  background: var(--green-50);
  color: var(--green-700);
  font-weight: 700;
}

.stepper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); }
.stepper__label { font-weight: 700; }
.stepper__controls { display: flex; align-items: center; gap: var(--space-4); }
.stepper__button {
  width: var(--touch-min);
  height: var(--touch-min);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-total);
  line-height: 1;
  cursor: pointer;
}
.stepper__button:disabled { color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }
.stepper__value { min-width: var(--touch-min); text-align: center; font-size: var(--text-h3); font-weight: 700; }

.stack { display: flex; flex-direction: column; gap: var(--space-16); }
.stack > h2 { font-size: var(--text-h2-section); }

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.table { width: 100%; min-width: 560px; border-collapse: collapse; }
.table th,
.table td { padding: var(--space-14) var(--space-20); text-align: left; vertical-align: top; }
.table thead th { background: var(--table-head); font-size: var(--text-small); }
.table tbody tr { border-top: 1px solid var(--line-soft); }
.table tbody th { font-weight: 400; }
.table tfoot tr { border-top: 2px solid var(--ink); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table__total { font-size: var(--text-total); font-weight: 700; }
.row__shop { color: var(--ink-2); }
.row__offer { font-size: var(--text-caption); font-weight: 700; color: var(--green-700); }
.row__pack { font-size: var(--text-caption); font-weight: 400; color: var(--ink-3); }
.row__buy,
.row__left { font-size: var(--text-caption); color: var(--ink-3); }
.leftovers { margin: 0; padding-left: var(--space-20); }
.row__product { font-size: var(--text-caption); color: var(--ink-3); }
.row__condition { font-size: var(--text-caption); font-weight: 400; color: var(--ink-2); }
.recipe__meta { color: var(--ink-3); }
.recipe__image {
  display: block;
  width: 100%;
  max-width: var(--prose-max);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-top: var(--space-8);
  border-radius: var(--radius-lg);
}
.row--missing,
.row--have { color: var(--ink-3); }
.row--missing th,
.row--have th { color: var(--ink-2); }
.row__for { font-size: var(--text-caption); color: var(--ink-3); }

/* Saving a recipe, under the servings stepper. */
.save { display: flex; flex-direction: column; gap: var(--space-10); padding-top: var(--space-14); border-top: 1px solid var(--line); }
.save__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.save a { font-weight: 700; }

/* A status line stays in the page while it is empty, so a screen reader
   announces what arrives in it, and only shows once it has something. */
.status-line:not(:empty) {
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-sm);
  background: var(--green-50);
  color: var(--green-700);
  font-weight: 700;
}
.status-line--error:not(:empty) { background: var(--error-bg); color: var(--error); }

.method { max-width: var(--prose-max); }
.method__steps {
  padding-left: var(--space-28);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  font-size: var(--text-lead);
}

/* --- forms ------------------------------------------------------------ */

.form { display: flex; flex-direction: column; gap: var(--space-20); }
.form-field { display: flex; flex-direction: column; gap: var(--space-6); }
.form-field__label { font-weight: 700; }
.field__hint { font-size: var(--text-small); color: var(--ink-3); }
.field__error { font-size: var(--text-small); color: var(--error); }
.input {
  width: 100%;
  min-height: var(--input-h);
  padding: var(--space-8) var(--space-14);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.input[aria-invalid="true"] { border: 2px solid var(--error); }
.form-alert:empty { display: none; }
.form-alert {
  padding: var(--space-12) var(--space-16);
  border-left: 4px solid var(--error);
  border-radius: var(--radius-sm);
  background: var(--error-bg);
  color: var(--error);
  font-weight: 700;
}
.form__aside { align-self: flex-start; font-size: var(--text-small); }

.button--primary { border: 0; background: var(--green-700); color: var(--surface); }
.button--primary:hover { background: var(--green-900); color: var(--surface); }
.button--danger { border: 1.5px solid var(--error); background: var(--surface); color: var(--error); }
.button--danger:hover { background: var(--error-bg); }
.button:disabled { cursor: progress; opacity: 0.7; }
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.button--block { width: 100%; }
.link-button {
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border: 0;
  background: none;
  color: var(--green-700);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.link-button:hover { color: var(--green-900); }

.status {
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.status--ok { background: var(--green-50); color: var(--green-700); font-weight: 700; }
.status:focus { outline: none; }

/* --- sign in screens --------------------------------------------------- */

.auth {
  width: 100%;
  max-width: var(--form-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.auth__panel { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-32); border-radius: var(--radius-lg); }
.auth__head { display: flex; flex-direction: column; gap: var(--space-2); }
.auth__head .irish { font-size: var(--text-lead); }
.auth__intro { color: var(--ink-2); }
.auth__subtitle { font-size: var(--text-total); }
.auth__list { margin: 0; padding-left: var(--space-24); display: flex; flex-direction: column; gap: var(--space-6); color: var(--ink-2); }
.auth__switch { text-align: center; }

/* --- My kitchen and Your account ---------------------------------------- */

.account {
  width: 100%;
  max-width: var(--prose-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}
.account__who { color: var(--ink-2); }
/* A long email address is one unbroken word, so let it wrap on a phone. */
.account__who strong { overflow-wrap: anywhere; }
.account__form { display: flex; flex-direction: column; gap: var(--space-28); }
.account__save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); }
.account__saved { flex-basis: 100%; }
.account__saved:not(:empty) {
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-sm);
  background: var(--green-50);
  color: var(--green-700);
  font-weight: 700;
}

/* A fieldset whose legend is floated stops being drawn on the border and
   lays out like any other child. */
.group { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); }
.group__legend { float: left; width: 100%; padding: 0; }
.group__title { font-size: var(--text-total); }
.group__help { color: var(--ink-2); margin-top: calc(var(--space-12) * -1); }
.group__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-16); }
.group__stack { display: flex; flex-direction: column; gap: var(--space-16); max-width: var(--form-max); }
.group[data-invalid="true"] { border: 2px solid var(--error); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--space-10); }
.tile {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: var(--tile-h);
  padding: 0 var(--space-14);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
}
.tile:hover { border-color: var(--ink); }
.tile:has(:checked) { border-color: var(--green-700); background: var(--green-25); }
.tile:has(:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.tile input { width: var(--check-size); height: var(--check-size); margin: 0; flex: none; accent-color: var(--green-700); }
.tile input:focus-visible { outline: none; }

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

/* --- saved recipes and the shopping list ------------------------------- */

.saved { display: flex; flex-direction: column; gap: var(--space-32); }
.saved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.saved-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-20); }
.saved-item__text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.saved-item__title { font-size: var(--text-h3); line-height: var(--leading-tight); }
.saved-item__cost { color: var(--ink-2); }
.saved-item__note { color: var(--warn); }
.list__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); }
.list__head h2 { font-size: var(--text-h2-section); }
.list__shop { font-size: var(--text-total); }
.list__total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-8);
  font-weight: 700;
}
.list__total strong { font-size: var(--text-total); font-variant-numeric: tabular-nums; }

/* --- bot check (vendor/altcha/) --------------------------------------- */

.bot-check:empty { display: none; }
altcha-widget {
  --altcha-max-width: 100%;
  --altcha-border-color: var(--line-strong);
  --altcha-border-radius: var(--radius-sm);
  --altcha-color-base: var(--surface);
  --altcha-color-base-content: var(--ink);
  --altcha-color-primary: var(--green-700);
  --altcha-color-primary-content: var(--surface);
  --altcha-color-success: var(--green-700);
  --altcha-color-error: var(--error);
  --altcha-checkbox-outline-color: var(--green-700);
}

/* --- privacy notice ---------------------------------------------------- */

.prose { max-width: var(--prose-max); display: flex; flex-direction: column; gap: var(--space-32); }
.prose section { display: flex; flex-direction: column; gap: var(--space-12); }
.prose h2 { font-size: var(--text-total); }
.prose ul { margin: 0; padding-left: var(--space-24); display: flex; flex-direction: column; gap: var(--space-8); }

/* --- small screens ----------------------------------------------------- */

/* Below 600px the ingredients table becomes a list: name, amount and shop on
   the left, cost on the right, so prices never sit off screen. */
@media (max-width: 600px) {
  .table { min-width: 0; }
  .table thead { display: none; }
  .table tbody,
  .table tfoot { display: block; }
  .table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
  }
  .table th,
  .table td { display: block; padding: 0; }
  .table tbody th { grid-column: 1; }
  .table tbody td:nth-of-type(1),
  .table tbody td:nth-of-type(2) { grid-column: 1; font-size: var(--text-caption); color: var(--ink-3); }
  .table tbody .num { grid-column: 2; grid-row: 1 / span 3; }
  .table tfoot th { grid-column: 1; align-self: center; }
  .table tfoot td { grid-column: 2; }
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }
  h1 { font-size: var(--text-h1-small); }
  .page { padding-top: var(--space-32); }
  .price--lg { font-size: var(--text-price-lg-small); }
  .count { margin-left: 0; }
  .auth__panel { padding: var(--space-20); }
  .group { padding: var(--space-16); }
}

/* --- printing ----------------------------------------------------------- */

/* A printed page is for the shop: the list itself, without the site
   around it or buttons that cannot be pressed on paper. */
@media print {
  .skip,
  .site-header,
  .site-footer,
  button { display: none !important; }
  body { background: var(--surface); }
  .page { max-width: none; padding: 0; }
  .table-wrap { overflow: visible; border: 0; }
  .table { min-width: 0; }
  .table tr { break-inside: avoid; }
}