/*
 * Food Planner — mobile-first stylesheet (Req 12.1).
 *
 * Design constraints this file is built to satisfy:
 *   - Renders cleanly across 320–430 CSS-px viewport widths with NO horizontal
 *     scrolling: every box uses border-box sizing, widths are fluid (never a
 *     fixed width that can exceed 320px), and long content wraps or scrolls
 *     within its own container rather than the page.
 *   - Every interactive control (skip-link, nav items, buttons, links) has a
 *     minimum 44×44 CSS-px touch target.
 *   - Honors the device safe-area insets (notch / home indicator) via the
 *     env(safe-area-inset-*) values exposed by viewport-fit=cover.
 *   - Adapts to the light/dark color-scheme the document opts into.
 *
 * Plain CSS only — no build step, no preprocessor.
 */

/* ----------------------------------------------------------------------------
 * Design tokens. Light defaults; dark overrides under prefers-color-scheme.
 * ------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;

  --radius: 0.5rem;

  /* The minimum touch-target edge length mandated by Req 12.1. */
  --touch-target: 44px;

  --color-bg: #f7f8f7;
  --color-surface: #ffffff;
  --color-text: #1b211d;
  --color-muted: #5c6660;
  --color-border: #d7ddd8;

  --color-accent: #2f6f4f;
  --color-accent-contrast: #ffffff;

  --color-warning-bg: #fff4e0;
  --color-warning-border: #e0a23a;
  --color-warning-text: #5a3d05;

  --color-error-bg: #fde7e7;
  --color-error-border: #c0392b;
  --color-error-text: #5a1410;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #141815;
    --color-surface: #1e2420;
    --color-text: #e8ede9;
    --color-muted: #9aa49d;
    --color-border: #313a34;

    --color-accent: #4caa78;
    --color-accent-contrast: #07120c;

    --color-warning-bg: #3a2e12;
    --color-warning-border: #c9912f;
    --color-warning-text: #f3dca6;

    --color-error-bg: #3a1714;
    --color-error-border: #e0635a;
    --color-error-text: #f4c5c0;
  }
}

/* ----------------------------------------------------------------------------
 * Reset / base. border-box everywhere keeps padded boxes inside the viewport
 * so they can never force horizontal scroll (Req 12.1).
 * ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Avoid iOS auto-inflating text in landscape, which can break the layout. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Guard against any descendant nudging the page wider than the viewport. */
  overflow-x: hidden;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.5;

  /* Respect the notch / rounded corners / home indicator (Req 12.1). */
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* Long unbroken strings (item names, errors) wrap instead of overflowing. */
h1,
h2,
p,
li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ----------------------------------------------------------------------------
 * Skip link — visible only when focused; a full 44px touch target.
 * ------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -200px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-2);
}

/* ----------------------------------------------------------------------------
 * Layout container. A fluid column capped for larger phones; full-width and
 * gutter-padded on the smallest screens. max-width never forces overflow
 * because the element is also width:100%.
 * ------------------------------------------------------------------------- */
.app-header,
.feature-nav,
.app-main,
.banner {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.app-header {
  padding-block: var(--space-4);
}

.app-title {
  margin: 0;
  font-size: 1.5rem;
}

/* ----------------------------------------------------------------------------
 * Banners (warning / error). role-driven coloring; content wraps inside.
 * ------------------------------------------------------------------------- */
.banner {
  margin-block: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.banner__title {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

.banner__list {
  margin: 0;
  padding-left: var(--space-5);
}

.banner__list:empty {
  display: none;
}

.banner--warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

.banner--error {
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}

/* ----------------------------------------------------------------------------
 * Feature navigation. Wrapping flex row; each control is a >= 44×44px target
 * (Req 12.1). Items wrap to new lines rather than scrolling the page.
 * ------------------------------------------------------------------------- */
.feature-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.feature-nav__item {
  flex: 1 1 auto;
}

.feature-nav__link,
.btn {
  /* Shared touch-target baseline for every interactive control (Req 12.1). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.feature-nav__link {
  width: 100%;
}

.feature-nav__link[aria-current="true"] {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.feature-nav__link:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
 * Main content region + feature views.
 * ------------------------------------------------------------------------- */
.app-main {
  padding-bottom: var(--space-5);
}

.app-main:focus {
  outline: none;
}

.feature-view {
  margin-block: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.feature-view__title {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
}

.feature-view__body {
  margin: 0;
  color: var(--color-muted);
}

/* A feature view stays hidden until its nav item is activated. */
.feature-view[hidden] {
  display: none;
}

/* Wide/tabular feature content scrolls within its own box, not the page. */
.feature-view__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ----------------------------------------------------------------------------
 * Status text.
 * ------------------------------------------------------------------------- */
.loading,
.empty-state {
  margin-block: var(--space-4);
  color: var(--color-muted);
}

[hidden] {
  display: none !important;
}

/* ----------------------------------------------------------------------------
 * Forms + fields (inventory add-item form, preferences editor). Inputs are a
 * full-width >= 44px touch target (Req 12.1) and stack vertically so they never
 * force horizontal scroll at 320 CSS-px.
 * ------------------------------------------------------------------------- */
.inventory-form,
.preferences-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field__label {
  font-weight: 600;
}

.field__input {
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.field__input--textarea {
  min-height: calc(var(--touch-target) * 1.5);
  resize: vertical;
}

.field__input:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
 * Inventory list. Each row wraps its controls so they stay inside the viewport
 * on the narrowest phones; every control keeps the >= 44px touch target.
 * ------------------------------------------------------------------------- */
.inventory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.inventory-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.inventory-item__label {
  flex: 1 1 100%;
  font-weight: 600;
}

.inventory-item__qty {
  flex: 1 1 6rem;
  min-width: 0;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.inventory-item__qty:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
 * Week selector (meal-plan + shopping-list views). A single row: the Prev/Next
 * controls keep the >= 44px touch target (Req 12.1) and the label flexes
 * between them; it wraps rather than overflowing on the narrowest phones.
 * ------------------------------------------------------------------------- */
.week-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.week-bar__label {
  flex: 1 1 6rem;
  min-width: 0;
  text-align: center;
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
 * Meal-plan view. One card per day; the header (date + eat-at-home flag) wraps
 * so it stays inside the viewport at 320 CSS-px.
 * ------------------------------------------------------------------------- */
.plan-status {
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

.plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plan-day {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.plan-day__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.plan-day__date {
  font-weight: 600;
}

.plan-day__flag {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.plan-day__flag--home {
  color: var(--color-accent);
  font-weight: 600;
}

.plan-day__detail {
  margin: 0;
}

/* ----------------------------------------------------------------------------
 * Shopping-list view. One group (card) per store + the unavailable group; each
 * item row wraps so name / quantity / price stay inside the viewport.
 * ------------------------------------------------------------------------- */
.shopping-group {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.shopping-group--unavailable {
  border-color: var(--color-warning-border);
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.shopping-group__title {
  margin: 0 0 var(--space-2);
  font-size: 1.0625rem;
}

.shopping-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.shopping-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-1);
}

.shopping-item__name {
  flex: 1 1 8rem;
  min-width: 0;
  font-weight: 600;
}

.shopping-item__qty {
  color: var(--color-muted);
}

.shopping-item__price {
  margin-left: auto;
}

/* ----------------------------------------------------------------------------
 * Basket-validation view (task 21.4, Req 8.1, 8.3). One card per store with its
 * itemized, editable list, total, and explicit validate / edit / reject
 * controls. Item rows and the action row wrap so every control keeps the
 * >= 44px touch target and nothing forces horizontal scroll at 320 CSS-px.
 * ------------------------------------------------------------------------- */
.basket-store {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.basket-store__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.basket-store__title {
  margin: 0;
  font-size: 1.0625rem;
}

.basket-store__status {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.basket-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.basket-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.basket-item--removed {
  opacity: 0.5;
  text-decoration: line-through;
}

.basket-item__name {
  flex: 1 1 8rem;
  min-width: 0;
  font-weight: 600;
}

.basket-item__qty {
  flex: 0 1 5rem;
  min-width: 0;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.basket-item__qty:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.basket-item__price {
  color: var(--color-muted);
}

.basket-item__reason {
  flex: 1 1 100%;
  font-size: 0.875rem;
  color: var(--color-warning-text);
}

.basket-store__total {
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

.basket-store__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The primary (validate) action stands out as the fail-safe purchase gate. */
.btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

/* ----------------------------------------------------------------------------
 * Feedback view (task 21.4, Req 10.1, 10.3). Two sections: the per-day
 * eat-at-home toggles and the recipe rating controls. Rows wrap so every
 * control keeps the >= 44px touch target at 320 CSS-px.
 * ------------------------------------------------------------------------- */
.feedback-section {
  margin-bottom: var(--space-4);
}

.feedback-section__title {
  margin: 0 0 var(--space-2);
  font-size: 1.0625rem;
}

.feedback-day-list,
.feedback-rate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.feedback-day {
  padding: var(--space-1) 0;
}

/* The whole label is the touch target so tapping the date toggles the day. */
.feedback-day__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  cursor: pointer;
}

.feedback-day__checkbox {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.feedback-day__checkbox:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.feedback-day__date {
  font-weight: 600;
}

.feedback-rate-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.feedback-rate-item__name {
  flex: 1 1 100%;
  font-weight: 600;
}

.feedback-rate-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.feedback-rate-form .field {
  flex: 1 1 8rem;
  min-width: 0;
}

/* ----------------------------------------------------------------------------
 * Auth gate (first-run setup + login). Mobile-first, single-column, touch-sized.
 * ------------------------------------------------------------------------- */
.auth-gate {
  max-width: 24rem;
  margin: var(--space-5) auto;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.auth-gate__title {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
}

.auth-gate__intro {
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
  font-size: 0.95rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth-form__label {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.auth-form__input {
  width: 100%;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.auth-form__input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.auth-form__error {
  margin: var(--space-1) 0 0;
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  color: var(--color-error-text);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius);
}

.auth-form__submit {
  min-height: var(--touch-target);
  margin-top: var(--space-2);
  padding: 0 var(--space-4);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.auth-form__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}