/* views.css — styling for the Plan (#/plan) and Shopping (#/shopping) views.

   Everything here is built from the design tokens in app.css
   (--bg --surface --surface-2 --text --muted --border --accent --accent-soft
   --accent-ink --frost --frost-soft --danger --radius --radius-sm --gap --tap
   --shadow), so light and dark mode follow the shell automatically. No
   hardcoded palette colours anywhere in this file.

   Loaded after app.css, so shared classes (.card .list .btn .badge .empty
   .scrim .sheet) are reused and only extended here. */

/* ============================================================== shared == */

.plan,
.shopping {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  /* Clear of the bottom tab bar and the iPhone home indicator. */
  padding-bottom: calc(var(--tabbar-h, 58px) / 2);
}

/* The shell stacks cards with a margin; these views use flex gap instead. */
.plan .card + .card,
.shopping .card + .card {
  margin-top: 0;
}

.plan-warn,
.shop-warn {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}

.plan-loading,
.shop-loading {
  padding: var(--gap);
  text-align: center;
}

/* ================================================================ plan == */

.plan-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-title {
  margin: 0;
  font-size: 21px;
  font-weight: 680;
  line-height: 1.2;
}

.plan-summary {
  margin: 0;
  font-size: 14px;
}

.plan-shop-btn {
  display: flex;
  width: 100%;
  min-height: 50px;
}

.plan-days {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* --- one day ------------------------------------------------------------ */

.day-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

/* Today is the question the app exists to answer — make it unmissable. */
.day-card--today {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 4px 0 0 var(--accent), var(--shadow);
}

.day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 2px;
}

.day-name {
  font-size: 15px;
  font-weight: 650;
}

.day-card--today .day-name {
  font-size: 17px;
  color: var(--accent);
}

.day-chip {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.day-chip--today {
  background: var(--accent);
  color: var(--accent-ink);
}

/* --- the two independent slots ------------------------------------------ */

.day-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slot {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

/* Cook: usually empty, deliberately the quieter of the two rows. */
.slot--cook {
  border-style: dashed;
  background: transparent;
}

.slot--cook:not(.slot--empty) {
  border-style: solid;
  background: var(--surface-2);
}

/* Lunch: what actually gets eaten — solid, filled, slightly louder. */
.slot--lunch {
  background: var(--surface-2);
}

.day-card--today .slot--lunch {
  background: var(--surface);
  border-color: var(--accent);
}

.slot--empty {
  cursor: pointer;
}

.slot--empty:active {
  background: var(--accent-soft);
}

.slot-icon {
  flex: none;
  width: 26px;
  font-size: 19px;
  line-height: 1;
  text-align: center;
}

.slot-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.slot-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.slot-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.slot-value {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.slot--empty .slot-value {
  font-size: 14.5px;
  font-weight: 500;
}

.slot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.slot-plus {
  flex: none;
  width: 28px;
  text-align: center;
  font-size: 17px;
  color: var(--accent);
}

.slot-del {
  flex: none;
  width: var(--tap);
  min-height: var(--tap);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.slot-del:active {
  background: var(--danger-soft);
  color: var(--danger);
}

/* --- a lunch is a meal: one line per dish -------------------------------- */
/* The slot grows past one row, so the 🍽 has to stop pretending it is a
   vertically centred bullet. */

.slot--meal {
  align-items: flex-start;
}

.slot--meal .slot-icon {
  margin-top: 5px;
}

.meal-lines {
  display: flex;
  flex-direction: column;
}

.meal-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meal-line + .meal-line {
  border-top: 1px solid var(--border);
}

.meal-line .slot-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 0;
}

/* Always offered, so it must not shout as loudly as the empty slot does. */
.meal-add {
  align-self: flex-start;
  min-height: 36px;
  margin-top: 2px;
  padding: 6px 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.meal-add:active {
  background: var(--accent-soft);
}

/* ========================================================= dish picker == */
/* Built on the shell's .scrim + .sheet, with an internally scrolling body so
   the search field and the group headings stay put. */

.picker-sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.picker-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.picker-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.picker-title {
  margin: 0;
  font-size: 19px;
  font-weight: 680;
}

.picker-sub {
  margin: 2px 0 0;
  font-size: 13.5px;
}

.picker-close {
  flex: none;
}

.picker-search {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
}

/* The cook sheet's only option: does eating start on the cook day? */
.picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  margin-top: 8px;
  padding: 2px;
  font-size: 14.5px;
  cursor: pointer;
}

.picker-option input {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.picker-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 4px;
}

.picker-group {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 12px 0 2px;
  padding: 6px 2px;
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.picker-list {
  display: flex;
  flex-direction: column;
}

.picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 9px 4px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.picker-list > .picker-row:first-child {
  border-top: 0;
}

.picker-row:active {
  background: var(--surface-2);
}

.picker-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.picker-row-name {
  font-size: 16px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.picker-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.picker-row-go {
  flex: none;
  width: 26px;
  text-align: center;
  font-size: 17px;
  color: var(--accent);
}

.picker-none {
  padding: var(--gap) 0;
  text-align: center;
}

/* ============================================================ shopping == */

.shop-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-title {
  margin: 0;
  font-size: 21px;
  font-weight: 680;
  line-height: 1.2;
}

.shop-counter {
  margin: 0;
  font-size: 15px;
}

.shop-count-open {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
}

/* The two-pass idea (DESIGN.md §9.8), shown while the list is untouched. */
.shop-hint {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
}

.shop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shop-actions .btn {
  flex: 1 1 auto;
}

/* --- the list ----------------------------------------------------------- */

.shop-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shop-divider {
  padding: 8px var(--gap);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Tapped with a thumb while holding a basket: 60px, full-width, forgiving. */
.shop-line {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-height: 60px;
  padding: 0 6px 0 0;
  border-top: 1px solid var(--border);
  background: transparent;
}

.shop-list > .shop-line:first-child,
.shop-list > .shop-divider:first-child {
  border-top: 0;
}

.shop-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 4px 10px var(--gap);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.shop-toggle:active {
  background: var(--surface-2);
}

.shop-box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--muted);
  border-radius: 9px;
  color: transparent;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.shop-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shop-name {
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.shop-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
}

.shop-qty {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--accent);
}

.shop-for {
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.shop-del {
  flex: none;
  width: var(--tap);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.shop-del:active {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Checked = "no need to buy" — faded and struck through, still tappable. */
.shop-line.is-checked .shop-box {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.shop-line.is-checked .shop-main {
  opacity: .48;
}

.shop-line.is-checked .shop-name {
  font-weight: 550;
  text-decoration: line-through;
}

.shop-line.is-checked .shop-qty {
  color: var(--muted);
  text-decoration: line-through;
}

/* --- empty state + manual add ------------------------------------------- */

.shop-empty .btn {
  width: 100%;
  max-width: 320px;
}

.shop-add[hidden] {
  display: none;
}

.shop-add {
  padding: 12px;
}

.shop-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.shop-add-form input {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* stops iOS zooming in on focus */
}

.shop-add-name {
  width: 100%;
}

.shop-add-qty,
.shop-add-unit {
  flex: 0 1 84px;
  min-width: 0;
}

.shop-add-btn {
  flex: 1 1 auto;
}

/* =============================================== a little room to grow == */

@media (min-width: 720px) {
  .plan-days {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .day-card--today {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .slot,
  .shop-toggle {
    transition: none;
  }
}

/* ============================================ the week behind today ===== */
/* A record, not a plan. It has to read as already-happened without becoming
   unreadable: the dish names are the whole reason the section exists, so only
   the chrome is quietened — never the text, and never with opacity. */

.past-head {
  margin: 0;
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* The line that says "today starts here". */
.past-sep {
  height: 1px;
  margin: 2px 0;
  background: var(--border);
}

.day-card--past {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.day-card--past .day-name {
  color: var(--muted);
  font-weight: 600;
}

/* Lunch is filled on a normal card; unfilled here so the past stays flat. */
.day-card--past .slot--lunch {
  background: transparent;
}

/* Shown instead of a card when nothing at all was recorded this past week. */
.past-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap);
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.past-prompt:active {
  background: var(--accent-soft);
}

.past-prompt-plus {
  flex: none;
  width: 26px;
  text-align: center;
  font-size: 17px;
  color: var(--accent);
}

@media (min-width: 720px) {
  /* .plan-days is a two-column grid here; these are dividers, not days. */
  .past-head,
  .past-sep,
  .past-prompt {
    grid-column: 1 / -1;
  }
}

/* ====================================== saying what's in the freezer ==== */
/* Used by the dish detail and the Freezer row (openFreezerCountSheet). Both
   live outside this file's original Plan/Shopping remit, but both stylesheets
   load on every view and these two rules only extend .chips and .btn. */

/* Two long labels, and a sheet is narrower than the filter bar .chips was
   written for: wrapping beats a horizontal scroll the user cannot see. */
.fz-reasons {
  flex-wrap: wrap;
  overflow-x: visible;
  margin-top: 2px;
}

/* The quiet sibling of "Ate one" on a freezer row. Never shrinks and never
   pushes the count badge off a narrow phone. */
.fz-fix {
  flex: none;
  padding-left: 10px;
  padding-right: 10px;
}