/* Groceries S1 (KT-60395; design KT-60390 option B, design-s1-frontend/gro.css):
   the household's standing list on its Groceries task. Existing tokens only
   (refined.css); every rule is scoped to .gro or .gro-page. S3 (KT-60392)
   adds "I'm going", the run in the band and the in-store view (.gro.store);
   S4 (KT-60393) adds store sections and Move; the "new" tag comes later. */

/* The band: the built .tp-band without the orbit, eyebrow or chips. */
.gro-page .gro-band { padding:22px 26px; }
.gro-band-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.gro-title { margin:0; font:650 2.2667rem/1.12 var(--d-heading); letter-spacing:-.015em; color:var(--d-ink); }
.gro-sub { margin:6px 0 0; color:var(--d-olive-ink); font-size:1rem; min-height:1.45em; }
@media (max-width:719px) {
  .gro-page .gro-band { padding:16px; }
  .gro-title { font-size:1.7333rem; }
}

/* The run in the band (S3): who is shopping, a bar, and "I'm going" (the one terracotta). */
.gro-who { display:flex; gap:12px; align-items:flex-start; margin-top:12px; }
.gro-who .avatar { flex:none; width:34px; height:34px; font-size:14px; font-weight:600; }
.gro-who-text { min-width:0; }
.gro-strong { margin:4px 0 0; font:600 1.0667rem/1.35 var(--d-body); color:var(--d-ink); }
.gro-who .gro-sub { margin-top:4px; }
.gro-prog { height:6px; margin-top:14px; border-radius:3px; background:var(--d-surface); border:1px solid var(--d-line); overflow:hidden; }
.gro-prog span { display:block; height:100%; background:var(--d-olive); transition:width .2s ease-out; }
.gro-band-acts { display:flex; gap:16px; align-items:center; margin-top:14px; }
.gro-band-acts .btn { min-height:44px; padding:0 18px; }
.gro-while { display:inline-block; margin-left:8px; padding:0 6px; border-radius:6px; background:var(--d-sage); color:var(--d-olive-ink); font:600 0.8rem/18px var(--d-body); white-space:nowrap; vertical-align:1px; }

.gro { margin-top:18px; }
.gro-offline { margin:0 0 10px; padding:10px 14px; border-radius:10px; background:var(--d-wash); color:var(--d-ink); font-size:0.9333rem; }
.gro-offline[hidden] { display:none; }

/* The add line: the first row. */
.gro-add { display:flex; align-items:center; gap:12px; min-height:52px; padding:0 4px; border-bottom:1px solid var(--d-line); }
.gro-add[hidden] { display:none; }
.gro-add .plus { width:24px; flex:none; text-align:center; font-size:22px; line-height:1; color:var(--d-olive-ink); }
.gro-add input.gro-add-input { flex:1; min-width:0; min-height:44px; border:0; border-radius:0; background:none; box-shadow:none; padding:0; font:inherit; font-size:1rem; color:var(--d-ink); }
.gro-add input.gro-add-input::placeholder { color:var(--d-muted); }
.gro-add input.gro-add-input:focus { outline:none; box-shadow:none; }
.gro-add:focus-within { border-bottom-color:var(--d-olive); }
.gro-add kbd { font:12px var(--d-body); color:var(--d-muted); border:1px solid var(--d-line); border-radius:6px; padding:1px 6px; background:var(--d-surface); }
@media (max-width:719px) { .gro-add kbd { display:none; } }

/* Section heads (S4): walking order, sentence case, the count muted. */
.gro-sec { display:flex; align-items:baseline; gap:8px; margin:18px 0 0; padding:0 4px; font:650 1rem var(--d-heading); color:var(--d-olive-ink); }
.gro-sec .n { font:500 0.8667rem var(--d-body); color:var(--d-muted); }

/* Rows: box | fixed qty slot | name and note | who added (desktop, on hover or focus). */
.gro-rows { list-style:none; margin:0; padding:0; }
.gro-rows[hidden] { display:none; }
.gro-row { display:grid; grid-template-columns:24px minmax(40px,3.2ch) minmax(0,1fr) auto; column-gap:10px; align-items:start; min-height:46px; padding:11px 4px 10px; border-bottom:1px solid var(--d-line); position:relative; }
.gro-row:hover, .gro-row:focus-within { background:rgba(var(--d-olive-rgb),.06); }
.gro-row.tp-glow { animation:tp-glow 1.2s ease-out 1; }
.gro-hit { position:relative; display:flex; height:22px; align-items:center; }
.gro-row .box { flex:none; width:22px; height:22px; padding:0; border-radius:6px; border:1.5px solid var(--d-olive); background:var(--d-surface); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
/* The tick target is 44×44 around the 22px box. */
.gro-row .box::before { content:''; position:absolute; left:-11px; top:-11px; width:44px; height:44px; }
.gro-row .box.on { background:var(--d-olive); border-color:var(--d-olive); }
.gro-row .box.on::after { content:''; width:6px; height:11px; border:solid var(--d-on-brand); border-width:0 2.2px 2.2px 0; transform:rotate(45deg) translate(-1px,-1px); }
.gro-row .box:disabled { cursor:default; opacity:.6; }
.gro-row .box:focus-visible { outline:2px solid var(--d-olive-ink); outline-offset:2px; }
.gro-q { font-weight:600; color:var(--d-olive-ink); text-align:right; font-variant-numeric:tabular-nums; line-height:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gro-t { min-width:0; line-height:22px; text-align:left; border:0; background:none; padding:0; font:inherit; color:var(--d-ink); }
button.gro-t { cursor:text; }
button.gro-t:focus-visible { outline:2px solid var(--d-olive-ink); outline-offset:2px; border-radius:4px; }
.gro-t .nm { font-weight:500; overflow-wrap:anywhere; }
.gro-t .nt { color:var(--d-muted); font-size:0.9333rem; margin-left:8px; overflow-wrap:anywhere; }
.gro-meta { display:flex; gap:14px; align-items:center; font-size:0.8667rem; color:var(--d-muted); line-height:22px; opacity:0; }
.gro-row:hover .gro-meta, .gro-row:focus-within .gro-meta { opacity:1; }

/* Move (S4, design 04): a link in the hover meta, then a menu of sections
   with the current one checked and a footer saying the household keeps it. */
.gro-meta .gro-move { border:0; background:none; padding:0; min-height:22px; font:600 0.8667rem var(--d-body); color:var(--d-olive-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.gro-meta .gro-move:focus-visible { outline:2px solid var(--d-olive-ink); outline-offset:2px; border-radius:4px; }
.gro-move-menu { z-index:60; width:300px; max-width:calc(100vw - 16px); max-height:min(560px,80vh); padding:6px; }
.gro-move-menu .me-menu-item { min-height:40px; padding:0 12px; font-size:1rem; border-radius:8px; }
.gro-move-menu .me-menu-item .gro-move-on { margin-left:auto; color:var(--d-olive-ink); }
.gro-move-h { margin:0; padding:8px 12px 4px; color:var(--d-muted); font-size:0.9333rem; }
.gro-move-foot { margin:6px -6px -6px; padding:12px 16px; border-top:1px solid var(--d-line); color:var(--d-muted); font-size:0.8667rem; line-height:1.4; }
/* Phone: the sheet's Section row, then the same list inside the sheet. */
.gro-sec-row { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; margin:0 0 12px; padding:0 14px; border:1px solid var(--d-line); border-radius:10px; background:var(--d-surface); font:inherit; color:var(--d-ink); cursor:pointer; }
.gro-sec-row .k { color:var(--d-muted); font-size:0.9333rem; }
.gro-sec-row .v { font-weight:600; color:var(--d-olive-ink); }
.gro-sec-row .v::after { content:'›'; margin-left:8px; color:var(--d-muted); font-weight:400; }
.gro-move-menu.in-sheet { position:static; width:auto; max-width:none; max-height:none; box-shadow:none; border:0; padding:0; background:none; }
.gro-move-menu.in-sheet .me-menu-item { min-height:48px; }
.gro-move-menu.in-sheet .gro-move-foot { margin:6px 0 0; padding:12px 12px 0; }

/* A guessed value (S2): italic, regular, muted, with a dashed "guess: <source>" tag. */
.gro-row .g { font-style:italic; font-weight:400; color:var(--d-muted); }
.gtag { display:inline-flex; align-items:center; gap:4px; margin-left:8px; font:400 0.8333rem/18px var(--d-body); color:var(--d-muted); border:1px dashed var(--d-ring); border-radius:6px; padding:0 6px; vertical-align:1px; white-space:nowrap; }
.gtag b { font-weight:600; color:var(--d-olive-ink); }

/* Got it: one folded line, then its rows struck through. */
.gro-got { display:flex; gap:10px; align-items:baseline; margin-top:22px; padding:0 4px; color:var(--d-muted); font-size:0.9333rem; }
.gro-got[hidden] { display:none; }
.gro-got b { font:650 1rem var(--d-heading); color:var(--d-olive-ink); }
.gro-got .link, .gro-edit .link { border:0; background:none; padding:4px 2px; font:600 0.9333rem var(--d-body); color:var(--d-olive-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.gro-got-rows { margin-top:6px; }
.gro-got-rows .gro-row { color:var(--d-muted); }
.gro-got-rows .nm { text-decoration:line-through; text-decoration-color:var(--d-ring); text-decoration-thickness:1.5px; color:var(--d-muted); }
.gro-got-rows .gro-q { color:var(--d-muted); }

/* Empty, loading and error. The empty box takes the board's fox (.kit-board .empty). */
.gro-empty { margin-top:18px; }
.gro-empty-h { font:650 1.2rem var(--d-heading); color:var(--d-ink); }
.gro-loading { color:var(--d-muted); padding:14px 4px; margin:0; }
.gro-error { display:flex; align-items:center; gap:12px; margin-top:14px; padding:14px 16px; border:1px solid var(--d-line); border-radius:12px; background:var(--d-surface); }
.gro-error p { margin:0; flex:1; color:var(--d-ink); }

/* Edit: in place on desktop, a bottom sheet on a phone. */
.gro-row.editing { display:block; background:var(--d-surface); }
.gro-edit { display:grid; grid-template-columns:minmax(64px,7ch) minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:end; }
.gro-field { display:flex; flex-direction:column; gap:4px; font-size:0.8rem; color:var(--d-muted); }
.gro-field input[type="text"] { min-height:40px; border:1px solid var(--d-line); border-radius:8px; padding:0 10px; background:var(--d-surface); font:inherit; font-size:0.9667rem; color:var(--d-ink); }
.gro-field input[type="text"]:focus { outline:none; border-color:var(--d-olive); box-shadow:none; }
.gro-edit-actions { grid-column:1 / -1; display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.gro-edit-actions .gro-remove { margin-right:auto; color:var(--d-muted); }
.gro-edit .btn.sage { background:var(--d-sage); border:1px solid var(--d-sage-edge); color:var(--d-olive-ink); }
.gro-sheet .tp-sheet h3 { margin-bottom:12px; }
.gro-sheet .gro-edit { grid-template-columns:1fr; }

@media (max-width:719px) {
  .gro-row { grid-template-columns:24px minmax(28px,3ch) minmax(0,1fr); min-height:52px; padding:13px 4px 12px; }
  .gro-row:hover { background:none; }
  .gro-meta { display:none; }
  .gro-t .nt { display:block; margin-left:0; }
  .gtag { margin-left:0; margin-top:4px; }
  .gro-edit { grid-template-columns:1fr; }
}
/* In the store (S3, design 05): no add line or who-added, bigger rows that
   tick anywhere, Stop and Done below the list; the thread and phone bar wait. */
.gro.store .gro-row { grid-template-columns:30px minmax(36px,3ch) minmax(0,1fr); min-height:60px; padding:16px 4px 15px; }
.gro.store .gro-row .box { width:28px; height:28px; border-radius:8px; }
.gro.store .gro-hit { height:28px; }
.gro.store .gro-q, .gro.store .gro-t { line-height:28px; font-size:1.1333rem; }
.gro.store button.gro-t { cursor:pointer; }
.gro.store .gro-t .nt { display:block; margin-left:0; line-height:1.4; }
.gro.store .gro-meta { display:none; }
.gro-storebar { position:sticky; bottom:0; z-index:5; display:flex; gap:12px; justify-content:flex-end; margin-top:18px; padding:12px 4px; background:var(--d-paper); border-top:1px solid var(--d-line); }
.gro-storebar[hidden] { display:none; }
.gro-storebar .btn { min-height:48px; padding:0 22px; font-size:1rem; }
.gro-page.gro-in-store .tp-activity, .gro-page.gro-in-store .tp-phonebar { display:none !important; }
@media (max-width:719px) {
  .gro-storebar { position:fixed; left:0; right:0; bottom:0; z-index:40; margin:0; justify-content:space-between; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--d-surface); }
  .gro-storebar .btn.primary { flex:1; }
  .gro-page.gro-in-store { padding-bottom:88px; }
}
@media (prefers-reduced-motion: reduce) { .gro-row.tp-glow { animation:none; } .gro-prog span { transition:none; } }

/* The one way in (New task's foot): a quiet link, never a banner. */
.panel-foot .panel-groceries { min-height:44px; padding:0 4px; border:0; background:none; font:600 0.9333rem var(--d-body); color:var(--d-olive-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.panel-foot .panel-groceries:disabled { opacity:.6; cursor:default; }
.panel-foot .panel-groceries { white-space:nowrap; }
@media (max-width:719px) {
  .panel-foot:has(.panel-groceries) { flex-wrap:wrap; }
  .panel-foot .panel-groceries { flex-basis:100%; text-align:left; }
}