/* Item lists in plan, shop and reorder mode (docs/SPEC.md §6–§8): rows, quantities, the add and edit
   rows, the "Bought already" log. Round buttons and the floating + are in components.css. */

/* Everything in a row is centred on the row, and all text shares one line height, so "2×" and the
   name sit on the same baseline. */
.item__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-size);
  line-height: 1.3;
}

/* Quantity 0: shown in grey, in place */
.item--empty .item__name,
.item--empty .quantity__value {
  color: var(--color-text-muted);
}

.item__name {
  flex: 1;
  min-width: 0;
  padding-block: 0.625rem;
  color: var(--color-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Round pencil button: shown on hover with a mouse, always reachable by keyboard. Touch devices use
   long press instead (long_press controller). */
.item__edit {
  opacity: 0;

  &:focus-visible { opacity: 1; }
}

@media (hover: hover) {
  .item__row:hover .item__edit { opacity: 1; }
}

@media (hover: none) {
  .item__edit { display: none; }

  /* Long press to edit: no link preview or text selection while holding a row */
  .item[data-controller~="long-press"] {
    -webkit-touch-callout: none;
    user-select: none;
  }
}

/* Everyday (regular) and other items, each under a small heading */
.items-section + .items-section { margin-block-start: var(--space-4); }


/* Quantities */

/* Plan mode: [−] 2× [+] */
.quantity {
  display: flex;
  align-items: center;
}

/* "2×": the number with a multiplication sign. Plan mode centres it between − and +, a little closer
   to the buttons than their tap areas would allow (the number itself isn't tappable). */
.quantity__value {
  min-width: 2.75ch;
  margin-inline: -0.25rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  pointer-events: none;

  &::after { content: "×"; }
}

/* Rows without − / + (shop, reorder, read-only plan) read like "2× Milk": a word space before the name,
   and on a long, wrapping name "2×" stays on its first line (same padding and line height as the name). */
.shop-item .quantity__value,
.reorder-item .quantity__value,
.quantity:not(:has(button)) .quantity__value {
  min-width: 0;
  margin-inline: 0 calc(0.3em - var(--space-2));
  text-align: start;
}

.shop-item .quantity__value,
.reorder-item .quantity__value,
.quantity:not(:has(button)) {
  align-self: flex-start;
  padding-block: 0.625rem;
}


/* Add and edit rows: [name] [regular] [buttons…], in one line */

.item-form-row {
  display: flex;
  align-items: center;
  min-height: var(--tap-size);
}

/* The edit form holds the name and the toggle; its Save button sits after Cancel and Delete */
.item-edit__form { display: contents; }

.item-form-row__name {
  flex: 1;
  min-width: 0;
  margin-inline-end: var(--space-1);

  &:where(input) {
    min-height: var(--control-size-small);
    padding-block: var(--space-1);
    padding-inline: var(--space-2);
  }
}

/* "Regular" toggle: a hidden checkbox inside the round label */
.regular-toggle {
  color: var(--color-text-muted);

  &:has(input:checked) { color: var(--color-on-accent); background-color: var(--color-accent); }
  &:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -0.375rem; }
}

/* Edit mode (in place) */
.item-edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-1);
}

.add-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
}

/* With JS, hidden until the floating + opens it (adder controller) */
html.js .add-item:not(.is-open) { display: none; }

/* Room below the last row, so the floating + never covers it */
html.js .plan-items--editable { padding-block-end: 5rem; }


/* Shopping mode (docs/SPEC.md §7.1) */

/* − and ✓ about as close together as plan mode's [−] 2× [+] (the tap areas overlap a little) */
.shop-item .check-button { margin-inline-start: -0.75rem; }

/* Checked off: struck through and muted until the refresh moves it into "Bought already" */
.shop-item--checked {
  .item__name { color: var(--color-text-muted); text-decoration: line-through; }
  .quantity__value { color: var(--color-text-muted); }
  .quantity__button { visibility: hidden; }
}

/* "Bought already" log below the shopping list: small and grey */
.bought { margin-block-start: var(--space-4); }

/* Hidden once every entry has expired on the client */
.bought:not(:has(.bought-item)) { display: none; }

.bought-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  font-size: var(--font-subhead);
  line-height: 1.3;
  color: var(--color-text-muted);
}

/* "2×", starting at the same left edge as the shopping rows above, a word space before the name */
.bought-item__quantity {
  margin-inline-end: calc(0.3em - var(--space-2));
  font-variant-numeric: tabular-nums;

  &::after { content: "×"; }
}

.bought-item__name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}


/* Reorder mode (docs/SPEC.md §8.1): the whole row is the drag target */

.reorder-item {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-touch-callout: none;
}

.reorder-item__grip {
  display: grid;
  place-items: center;
  width: var(--tap-size);
  height: var(--tap-size);
  color: var(--color-text-muted);
}

.reorder-item.is-chosen { background: var(--color-surface); }
.reorder-item.is-ghost { opacity: 0.3; }