/* shop-c.css — SHOP (b219). The household's catch-all list.

   GATED ON `body.shv-on`, set by show() alongside `body.dv2-app`. Both halves
   matter and the file comments in garage-c.css, school-c.css, pets-c.css and
   health-c.css all record the same wall: without `dv2-app` every `var(--dv2-*)`
   below resolves to nothing and voids its whole declaration, silently; without
   `shv-on` these rules land on screens they were never written against.

   DAY AND NIGHT COME FOR FREE, and that is deliberate. Every colour here is a
   --dv2-* token, and design-v2-app.css already redefines the whole token set
   under html[data-theme="light"] and html[data-theme="dark"]. Hard-coding even
   one rgba() would produce a rule that is right in one theme and wrong in the
   other — which is exactly the b212 night-mode bug. The ONE exception is the
   amber band, because hue 25 is Shop's identity and has no token; it carries
   both sets explicitly, taken from DIARY_COLOUR_PLAN.md's pastel recipe rather
   than dimming the light swatch (that was the same b212 mistake).

   Modifiers are prefixed `sh-` throughout: style.css owns the bare names, and a
   section modifier carries its prefix. `.sh-task` is a modifier ON the shared
   `.row.tc-row`, never a replacement for it. */

/* ── the header ───────────────────────────────────────────────────────────
   THE BUTTONS WERE ON THE EDGE. Measured at 390px: Shop's back arrow sat 0px
   from the left and the archive button 2px from the right, against 16px in
   Pets and School. The difference is that those two wrap their controls in a
   `.pv-top-side` / `.sv-top-side` span that carries the inset, and this markup
   was copied from Garage — which has the same 0/2px fault and is why it looked
   normal to me. 16px is the number the rest of the app already uses; nothing
   here invents a new one. (Garage is untouched: same bug, not this change.) */
body.shv-on #view-shop .topbar-row {
  padding-left: 16px;
  padding-right: 16px;
  gap: 8px;
}

/* ── the composer ─────────────────────────────────────────────────────────
   Pinned above the rows, always present, never a sheet. Adding is the only
   thing you do here that isn't ticking, so it gets the top of the screen. */
body.shv-on .sh-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 6px 6px 4px;
  border-radius: 16px;
  background: var(--dv2-input-bg);
  border: 1px solid var(--dv2-input-bd);
  box-shadow: var(--dv2-g-shadow);
}
/* ONE field, not a field inside a field. The outer box carries the focus ring
   so the input can be completely bare — otherwise style.css's global
   `input[type=text]` ring draws a second pill inside this one, which is what
   shipped in b219 and looked like a box in a box. */
body.shv-on .sh-compose:focus-within {
  border-color: color-mix(in oklab, var(--dv2-accent) 60%, transparent);
  box-shadow: var(--dv2-g-shadow), 0 0 0 3px color-mix(in oklab, var(--dv2-accent) 22%, transparent);
}

body.shv-on .sh-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font: inherit;
  font-size: 16px;              /* 16px or iOS zooms the page on focus */
  font-weight: 500;
  color: var(--dv2-input-text);
  /* 14px, the same inset style.css gives every other input in the app. b219
     shipped `4px 0` — no horizontal padding at all — so the placeholder and the
     caret sat hard against the edge of the field. */
  padding: 11px 14px;
}
/* The bare input must stay bare on focus: style.css's global rule would put a
   border and a 3px ring back on it, inside the ring the composer already has. */
body.shv-on .sh-input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}
body.shv-on .sh-input::placeholder { color: var(--dv2-input-ph); }

body.shv-on .sh-add {
  flex: none;
  border: 0;
  border-radius: 10px;
  padding: 9px 15px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: var(--dv2-btn-primary);
  box-shadow: var(--dv2-btn-shadow);
  cursor: pointer;
}
body.shv-on .sh-add:active { transform: scale(.97); }

/* ── the band ─────────────────────────────────────────────────────────────
   Hue 25, once, at the top, carrying the count. Never on a row: the list has
   to weigh the same whether it holds three things or thirty. */
body.shv-on .sh-band {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  background: hsl(25 70% 93%);
  border: 1px solid hsl(25 58% 78%);
  color: hsl(25 48% 34%);
}
/* The band is the fold control, so it says so — pointing down when the rows are
   showing, right when they are folded away. */
body.shv-on .sh-band .sh-chev {
  flex: none;
  transition: transform .18s ease;
}
body.shv-on .sh-band.folded .sh-chev { transform: rotate(-90deg); }
body.shv-on .sh-band.folded { margin-bottom: 8px; }
body.shv-on .sh-band .sh-n {
  margin-left: auto;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}
/* The archive band is quiet on purpose — it is a record, not a call to act. */
body.shv-on .sh-band-q {
  background: var(--dv2-g-07-bg);
  border-color: var(--dv2-g-07-bd);
  color: var(--dv2-text-sub);
}

html[data-theme="dark"] body.shv-on .sh-band {
  background: hsl(25 38% 19%);
  border-color: hsl(25 45% 40%);
  color: hsl(25 72% 80%);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.shv-on .sh-band {
    background: hsl(25 38% 19%);
    border-color: hsl(25 45% 40%);
    color: hsl(25 72% 80%);
  }
}
html[data-theme="dark"] body.shv-on .sh-band-q,
html:not([data-theme="light"]) body.shv-on .sh-band-q {
  background: var(--dv2-g-07-bg);
  border-color: var(--dv2-g-07-bd);
  color: var(--dv2-text-sub);
}

body.shv-on .sh-rows { display: flex; flex-direction: column; gap: 7px; }

/* THE CARD GROUND. The shared `.row.tc-row` supplies the grammar — bell, tick,
   label, meta — and deliberately not a surface: style.css b210 records the same
   for Health, whose ground is a container rule of its own. Without this the
   rows render as bare text on the aurora and stop reading as a list at all.
   Tokens only, so day and night both come out right. */

/* ── the row ──────────────────────────────────────────────────────────────
   `.sh-task` only adjusts the meta line. The row itself — bell, purple drawn
   tick, label, assignee — is the shared `.row.tc-row` and is not touched. */
body.shv-on .tc-row.sh-task .tc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  grid-template-columns: none;    /* the 96px task-card grid means nothing here:
                                     there is no Next due column to align. */
  /* The shared rule puts a hairline above the meta block, which earns its keep
     when the block is a two-row grid of NEXT DUE / LAST DONE headings. Under a
     single short string it reads as a divider BETWEEN rows, and the age ends up
     looking like it belongs to the item below it. */
  border-top: 0;
  padding-top: 2px;
}
/* The note, under the name. style.css colours `.row-note` for the list view
   only (`body.lp-clean`), and its dark override is scoped there too — so on
   Shop it would fall back to --text-2 and read as near-black on the dark
   aurora. Tokens, so both themes resolve. */
body.shv-on .tc-row.sh-task .row-note {
  color: var(--dv2-text-sub);
  font-size: 12.5px;
  margin-top: 1px;
}
body.shv-on .tc-row.sh-task.on .row-note { opacity: .55; }

body.shv-on .sh-meta-age { font-size: 11.5px; color: var(--dv2-text-muted); }
body.shv-on .sh-meta-got { font-size: 11.5px; font-weight: 600; color: var(--dv2-text-sub); }
body.shv-on .sh-meta-when { font-size: 11.5px; color: var(--dv2-text-muted); }

body.shv-on .sh-hist { margin-left: auto; }

/* ── the reorder grip ─────────────────────────────────────────────────────
   Same ⋮⋮ affordance and the same engine as a Grocery row (wireItemReorder in
   app.js is parameterised, not copied). Hold it for a moment and the row lifts. */
body.shv-on .sh-grip {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  margin-right: -4px;
  border: 0;
  background: none;
  color: var(--dv2-text-muted);
  cursor: grab;
  touch-action: none;          /* the drag owns the gesture, not the scroller */
}
body.shv-on .sh-grip:active { cursor: grabbing; color: var(--dv2-text-sub); }
body.shv-on .item-drag-placeholder {
  border-radius: 14px;
  background: var(--dv2-g-07-bg);
  border: 1px dashed var(--dv2-g-16-bd);
}

/* The name is a button now — it opens the shared item sheet — so it must not
   inherit a button's centring or chrome. */
body.shv-on .sh-task-body {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ── the item sheet, stripped ─────────────────────────────────────────────
   The sheet is SHARED with Grocery, which legitimately needs a Section (the
   aisle), a Qty and a shop picker. Shop needs none of them and b219.2 shipped
   all three: a "Section" row whose dropdown offered Fresh Fruit, Vegetables,
   Meat and the rest of Grocery's aisles on a list that has exactly one section;
   a Qty; and "Any shop".

   Gated on `body.shv-on`, which is still set while the sheet is up, so Grocery
   keeps every one of them. Shop's sheet is the name, the notes, and Delete /
   Save — nothing else. */
body.shv-on #sheet-shop-item #add-mode-seg,
body.shv-on #sheet-shop-item #adhoc-fields,
body.shv-on #sheet-shop-item #s-details-hdr,
body.shv-on #sheet-shop-item #s-details-hdr + .ios26-group,
body.shv-on #sheet-shop-item #s-shops-wrap,
body.shv-on #sheet-shop-item #task-fields {
  display: none !important;
}

/* ── header side group ────────────────────────────────────────────────────
   Two controls, one flex child, so `.topbar-row`'s space-between still sees
   the three regions it expects and the title stays centred (b207.1). */
body.shv-on .sh-top-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

/* Multi-select assign menu: the four sections pick one person, Shop can pick
   several, so a chosen row needs to say so. */
.sh-assign-menu .opt { position: relative; }
.sh-assign-menu .sh-tick {
  margin-left: auto;
  font-weight: 800;
  color: hsl(270 70% 55%);
}
.sh-assign-menu .opt.on { background: color-mix(in oklab, hsl(270 70% 55%) 12%, transparent); }

body.shv-on .sh-reactivate {
  flex: none;
  border-radius: 999px;
  padding: 5px 11px;
  border: 1px solid var(--dv2-g-16-bd);
  background: var(--dv2-g-08-bg);
  color: var(--dv2-text-primary);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
body.shv-on .sh-reactivate:active { transform: scale(.97); }

/* ── empty ────────────────────────────────────────────────────────────────
   The composer stays above this, so the screen is never a dead end. */
body.shv-on .sh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  padding: 48px 22px 40px;
}
body.shv-on .sh-empty-ring {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 4px;
  border: 1.5px dashed var(--dv2-dot-empty-bd);
  color: var(--dv2-text-muted);
  font-size: 26px; font-weight: 300; line-height: 1;
}
body.shv-on .sh-empty-ttl { font-size: 16px; font-weight: 700; color: var(--dv2-text-primary); }
body.shv-on .sh-empty-sub {
  font-size: 13px;
  line-height: 1.55;
  max-width: 30ch;
  color: var(--dv2-text-sub);
}

/* ── the archive line ─────────────────────────────────────────────────────
   Bought things leave the screen; this is the door they went through. */
body.shv-on .sh-archive-line {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1px solid var(--dv2-g-07-bd);
  background: var(--dv2-g-07-bg);
  color: var(--dv2-text-sub);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
body.shv-on .sh-archive-n {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--dv2-text-muted);
}

/* ── shop mode ────────────────────────────────────────────────────────────
   At the mall: one hand, bags in the other, aisle lighting. Targets roughly
   double and everything that is not a label or a tick is gone. */
body.shv-on .sh-mode-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: 0;
  border-radius: 15px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--dv2-btn-primary);
  box-shadow: var(--dv2-btn-shadow);
  cursor: pointer;
}
body.shv-on .sh-mode-btn:active { transform: scale(.99); }

body.shv-on .sh-prog { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
body.shv-on .sh-prog-hd { display: flex; align-items: baseline; gap: 8px; }
body.shv-on .sh-prog-big {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--dv2-text-primary);
  font-variant-numeric: tabular-nums;
}
body.shv-on .sh-prog-sm { font-size: 13px; color: var(--dv2-text-sub); }
body.shv-on .sh-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--dv2-progress-bg);
  overflow: hidden;
}
body.shv-on .sh-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--dv2-progress-fill);
  transition: width .3s ease;
}

body.shv-on .sh-bigs { display: flex; flex-direction: column; gap: 10px; }
body.shv-on .sh-big {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 17px 15px;
  border-radius: 17px;
  border: 1px solid var(--dv2-g-08-bd);
  background: var(--dv2-g-08-bg);
  box-shadow: var(--dv2-g-shadow);
  font: inherit;
  cursor: pointer;
}
body.shv-on .sh-big:active { transform: scale(.99); }
body.shv-on .sh-bigbox {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid; place-items: center;
  border: 2px solid var(--dv2-dot-empty-bd);
  color: transparent;
}
body.shv-on .sh-big.on .sh-bigbox {
  background: hsl(270 70% 52%);
  border-color: hsl(270 70% 52%);
  color: #fff;
}
body.shv-on .sh-biglbl {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--dv2-text-primary);
}
body.shv-on .sh-big.on .sh-biglbl {
  color: var(--dv2-text-muted);
  text-decoration: line-through;
}
body.shv-on .sh-awake {
  margin-top: 18px;
  text-align: center;
  font-size: 11.5px;
  color: var(--dv2-text-muted);
}

/* The composer has no business in a shop, and neither does the archive door. */
body.shv-on #view-shop.shop-mode .sh-compose,
body.shv-on #view-shop.shop-mode .sh-archive-line { display: none; }

@media (prefers-reduced-motion: reduce) {
  body.shv-on .sh-bar i { transition: none; }
  body.shv-on .sh-band .sh-chev { transition: none; }
  body.shv-on .sh-add:active,
  body.shv-on .sh-big:active,
  body.shv-on .sh-mode-btn:active,
  body.shv-on .sh-reactivate:active { transform: none; }
}