/* grocery.css — the grocery list, version 2 (js/grocery.js; MEAL-PLANNING-
 * SPEC §3.5, §6.3, §6.5, §6.8). Every class starts with `grocery-`.
 *
 * A line is a 52 px tick row: the ring, the name, what to buy on the right,
 * and the days and dishes under it. A tick fills in 140 ms in the person's
 * accent (instant under reduced motion, base.css), and a ticked line folds
 * into the basket in 200 ms. The tally stays at the top while the list
 * scrolls. Tokens only; nothing under 13 px; a width rule answers to its
 * column (`@container`), never to the viewport (§3.3). */

.grocery-corner { display: contents; }
.grocery { display: grid; gap: var(--s-2); }
.grocery-tag { vertical-align: 1px; margin-left: 6px; }
.grocery-note { font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; }
.grocery-problem { font: 560 var(--t-sub-size)/1.35 var(--font); color: var(--ink); }
.grocery-problem:empty { display: none; }
.grocery-group-title { padding: var(--s-2) 0 0; font: 600 var(--t-sub-size)/1.2 var(--font); color: var(--ink-2); }
.grocery-loading { display: grid; gap: var(--s-2); }
.grocery-skel {
  display: block;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  animation: skel-breathe 1.4s var(--ease) infinite alternate;
}
.grocery-offline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: var(--t-sub); color: var(--ink-2); }
.grocery-offline .grocery-tag { margin-left: 0; }

/* The tally, sticky at the top of the list (§3.5): "26 to buy · 6 in the
 * basket". It spans the column's gutters so the rows pass under it. */
.grocery-tally {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 2;
  margin: 0 -16px;
  padding: var(--s-2) 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font: var(--t-sub);
  color: var(--ink-2);
}
.grocery-tally b { color: var(--ink); font-weight: 560; }
/* In the pane (base.css: 18 px over and 32 px either side of its content)
 * the tally spans the pane's own gutters, on the pane's ground, and holds to
 * its very top while the list scrolls under it. */
.pane .grocery-tally { top: -18px; margin: 0 -32px; padding: var(--s-2) 32px; background: var(--pane); }

.grocery-sections { display: grid; }
.grocery-section { display: grid; break-inside: avoid; }
.grocery-section .sec-head { padding-top: var(--s-4); }
.grocery-line {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 56px;
  padding: 7px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.grocery-line:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-field); }
.grocery-line.is-pantry { cursor: default; }
.grocery-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--edge);
  color: transparent;
  transition: background .14s var(--ease), box-shadow .14s var(--ease), color .14s var(--ease);
}
.grocery-tick svg { width: 16px; height: 16px; stroke-width: 2.5; }
.grocery-line.is-got .grocery-tick { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.grocery-line.is-partial .grocery-tick { box-shadow: inset 0 0 0 1.5px var(--accent-ink); }
.grocery-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.grocery-name { font: var(--t-body); overflow-wrap: anywhere; text-wrap: pretty; }
.grocery-sub { font: var(--t-cap); color: var(--ink-2); overflow-wrap: anywhere; }
.grocery-sub.is-full { display: none; }
.grocery-last { color: var(--ink); }
.grocery-buy { flex: none; max-width: 44%; font: 560 var(--t-sub-size)/1.25 var(--font); text-align: right; }
.grocery-buy:empty { display: none; }
.grocery-line.is-got .grocery-name { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.grocery-line.is-got .grocery-buy { color: var(--ink-3); font-weight: 450; }
.grocery-line.is-got .grocery-last { display: none; }
/* The fold into the basket: the row closes up, 200 ms. */
.grocery-line.is-folding,
.grocery-extra.is-folding {
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transition: max-height .2s var(--ease), min-height .2s var(--ease), padding .2s var(--ease), opacity .2s var(--ease);
}
.grocery-line { max-height: 160px; }
.grocery-extra { display: flex; align-items: center; border-top: 1px solid var(--line); max-height: 160px; overflow: hidden; }
.grocery-extra > .grocery-line { border-top: 0; }
.grocery-more {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.grocery-more:hover { background: var(--surface-2); }
.grocery-more .icon { width: 20px; height: 20px; }
.grocery-need { flex: none; }

.grocery-attention .grocery-attn {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font: var(--t-sub);
  color: var(--ink);
  text-wrap: pretty;
}

/* + Add an item, at the foot of the list. */
.grocery-add {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 52px;
  padding: 6px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: var(--t-body);
  text-align: left;
  cursor: pointer;
}
.grocery-add-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--edge);
  color: var(--ink-2);
}
.grocery-add-mark .icon { width: 18px; height: 18px; }
.grocery-add-form { display: grid; gap: var(--s-2); }
.grocery-add-input { font-size: 17px; }

/* The foot: the basket, folded; the pantry; the dinners out. */
.grocery-foot { display: grid; gap: 2px; margin-top: var(--s-2); border-top: 1px solid var(--line); }
.grocery-basket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-3);
  width: 100%;
  min-height: 60px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: var(--t-row);
  text-align: left;
  cursor: pointer;
}
.grocery-basket-title { grid-column: 1; }
.grocery-basket-sub { grid-column: 1; font: var(--t-cap); color: var(--ink-2); overflow-wrap: anywhere; }
.grocery-basket-chev { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--ink-3); transform: rotate(90deg); transition: transform .2s var(--ease); }
.grocery-basket-chev.is-open { transform: rotate(-90deg); }
.grocery-basket-lines { display: grid; padding-bottom: var(--s-2); }
.grocery-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 52px;
  border-top: 1px solid var(--line);
  font: var(--t-sub);
  color: var(--ink-2);
  text-wrap: pretty;
}
.grocery-foot > :first-child { border-top: 0; }
.grocery-share-body { display: grid; gap: var(--s-2); }
.grocery-share-text { min-height: 240px; font: 400 var(--t-sub-size)/1.45 var(--font); }

/* The pane (§6.5): the needed-by words in full, each person's grams per
 * dish; from 700 of pane (1440 and up) the sections in two columns. */
@container (min-width: 520px) {
  .grocery-sub.is-short { display: none; }
  .grocery-sub.is-full { display: block; }
}
@container (min-width: 700px) {
  .grocery-sections { display: block; columns: 2; column-gap: 40px; }
  .grocery-section { margin-bottom: var(--s-2); }
}