/*
 * The Shopping screen: the reference for the rest of the app. Rows stay
 * compact and scannable; colour is spent on the check and on progress.
 */
@layer components {
  .button--small { min-height: 38px; padding-inline: var(--space-4); font-size: var(--text-sm); }
  .input--small { min-height: 42px; padding-inline: var(--space-4); font-size: var(--text-sm); }
  select.input--small { padding-right: var(--space-6); background-position: right 12px center; background-size: 16px; }

  /* Progress: one sunny bar, a sentence above it. */
  .progress { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
  .progress__label { font-weight: 700; color: var(--muted); }
  .progress__label strong { color: var(--ink); font-weight: 800; }
  .progress__track { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
  .progress__fill {
    display: block;
    width: var(--progress);
    height: 100%;
    border-radius: inherit;
    background: var(--sunny);
    transition: width 360ms var(--ease-pop);
  }
  .progress--done .progress__label { color: var(--ink); }
  .progress--done .progress__label strong { font-family: var(--font-display); font-size: var(--text-lg); }

  /* Quick-add: thumb zone on phones (fixed above the tab bar), top of the
     list on wider screens. */
  .quick-add {
    position: fixed;
    inset-inline: var(--space-3);
    bottom: calc(max(var(--space-3), env(safe-area-inset-bottom)) + 76px);
    z-index: 15;
    display: flex;
    align-items: center;
    max-width: 440px;
    margin-inline: auto;
    padding: 5px 5px 5px var(--space-5);
    border: 2px solid var(--field-border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-float);
  }
  .quick-add:focus-within { border-color: var(--leaf); box-shadow: 0 0 0 4px var(--leaf-soft), var(--shadow-float); }
  .quick-add__input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 0;
    background: transparent;
    font-size: var(--text-md);
    font-weight: 700;
  }
  .quick-add__input::placeholder { color: var(--muted); font-weight: 600; }
  .quick-add__input:focus { outline: none; }
  .quick-add__input::-webkit-calendar-picker-indicator { display: none !important; }
  .quick-add__button {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--leaf);
    color: var(--cream);
    transition: transform 140ms var(--ease-pop), background-color 140ms ease;
  }
  .quick-add__button svg { width: 22px; height: 22px; stroke-width: 2.6; }
  .quick-add__button:hover { background: var(--leaf-strong); }
  .quick-add__button:active { transform: scale(0.92); }

  @media (min-width: 768px) {
    .quick-add {
      position: sticky;
      top: var(--space-3);
      inset-inline: auto;
      bottom: auto;
      max-width: none;
      margin-bottom: var(--space-5);
      box-shadow: none;
    }
  }

  /* A quiet way to the Items library: under quick-add on wider screens,
     at the top of the list on phones (quick-add floats there). */
  .manage-items-link { margin: 0 var(--space-2) var(--space-3); text-align: right; font-size: var(--text-xs); font-weight: 700; }
  .manage-items-link a { color: var(--muted); }
  .manage-items-link a:hover { color: var(--ink); }
  @media (min-width: 768px) { .manage-items-link { margin-top: calc(-1 * var(--space-4)); } }

  /* Aisles: a small heading, then one soft surface of rows. */
  .aisle { margin-bottom: var(--space-5); }
  .aisle:not(:has(.shopping-item)) { display: none; }
  .aisle__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0 var(--space-2) var(--space-2); }
  .aisle__header .aisle__title { margin: 0; }
  .aisle__remaining { display: none; }
  .progress__percent { display: none; }
  .aisle__title {
    margin: 0 0 var(--space-2) var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--muted);
  }

  .rows {
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .shopping-item {
    display: grid;
    grid-template-columns: var(--touch) 1fr;
    align-items: start;
    padding-inline: var(--space-1) var(--space-2);
  }
  .shopping-item + .shopping-item { border-top: 1px solid var(--line); }

  .check-form { display: contents; }
  .check {
    display: grid;
    place-items: center;
    width: var(--touch);
    height: 52px;
    padding: 0;
    border: 0;
    background: none;
  }
  .check__mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--field-border);
    border-radius: 50%;
    color: transparent;
    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms var(--ease-pop);
  }
  .check__mark svg { width: 18px; height: 18px; stroke-width: 3; }
  .check:hover .check__mark { border-color: var(--leaf); color: var(--leaf-soft); }
  .check:active .check__mark { transform: scale(0.88); }
  .shopping-item--purchased .check__mark { border-color: var(--leaf); background: var(--leaf); color: var(--cream); }
  .shopping-item--purchased.is-fresh .check__mark { animation: check-pop 420ms var(--ease-pop); }
  .shopping-item--needed.is-fresh { animation: row-glow 1.4s ease-out; }

  .shopping-item__badge {
    display: grid;
    place-items: center;
    width: var(--touch);
    height: 52px;
  }
  .shopping-item__badge svg {
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 50%;
    background: var(--peach-soft);
  }

  .shopping-item__body { min-width: 0; }
  .shopping-item__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 52px;
    list-style: none;
    cursor: pointer;
  }
  .shopping-item__summary::-webkit-details-marker { display: none; }
  .shopping-item__name { flex: 1; min-width: 0; font-weight: 700; line-height: 1.3; }
  .shopping-item--purchased .shopping-item__name { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--line-strong); }
  .shopping-item__quantity {
    flex: none;
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--cream);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .shopping-item__by { flex: none; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
  .shopping-item__more { display: grid; place-items: center; width: 32px; height: 32px; color: var(--muted); }
  .shopping-item__more svg { width: 18px; height: 18px; transition: transform 160ms ease; }
  .shopping-item__body[open] .shopping-item__more svg { transform: rotate(90deg); }

  .shopping-item__panel { display: grid; gap: var(--space-4); padding: var(--space-1) var(--space-2) var(--space-4) 0; }

  .sources { display: grid; gap: 2px; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 600; }

  .inline-form { display: grid; gap: var(--space-1); }
  .inline-form__row { display: flex; gap: var(--space-2); }
  .inline-form__row .input { flex: 1; min-width: 0; }

  .shopping-item__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

  .shopping-item__conflict {
    grid-column: 2;
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--sunny-soft);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  /* The basket and have-enough piles sit below the aisles. */
  .done-section { margin-top: var(--space-5); }
  .done-section:not(:has(.shopping-item)) { display: none; }
  .done-section > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch);
    margin-bottom: var(--space-2);
    padding-inline: var(--space-2);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 800;
    cursor: pointer;
  }
  .done-section > summary svg { width: 18px; height: 18px; }

  .shopping-list:has(.shopping-item) .list-empty { display: none; }

  /* Older list still open: quiet, never blocking. */
  .banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--mint-soft);
    font-weight: 600;
  }
  .banner__actions { display: flex; align-items: center; gap: var(--space-1); }
  .banner form { display: contents; }

  /* Live updates paused: honest, not alarming. */
  .connection-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--sunny-soft);
    font-size: var(--text-sm);
    font-weight: 700;
  }
  .connection-banner[hidden] { display: none; }
  .connection-banner svg { width: 18px; height: 18px; flex: none; }

  .list-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }

  /* History */
  .history { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
  .history__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    min-height: 64px;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
  }
  .history__row:hover { border-color: var(--line-strong); }
  .history__name { font-weight: 800; }
  .history__meta { color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
  .history__chevron { width: 18px; height: 18px; margin-left: auto; color: var(--muted); }

  .toast__undo-form { display: contents; }
  .toast__undo {
    margin-left: var(--space-1);
    padding: 2px var(--space-3);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--sunny);
    color: var(--ink);
    font-weight: 800;
  }

  /* Shop: the same rows, bigger, with the whole row as the tick. Row markup is
     shared with List (live updates send one partial to everyone), so all of
     Shop's difference lives here, under .shopping-list--shop. */
  .plan-bar--shop { flex-direction: column-reverse; align-items: stretch; row-gap: var(--space-4); }
  .plan-bar--shop .plan-bar__modes { align-self: center; }
  .plan-bar__title { font-size: var(--text-xl); }
  .plan-bar__modes .segmented__option { gap: var(--space-1); }
  .plan-bar__modes .segmented__option svg { width: 16px; height: 16px; }

  .shopping-list--shop .progress { grid-template-columns: 1fr auto; align-items: baseline; margin-bottom: var(--space-5); }
  .shopping-list--shop .progress__label { font-size: var(--text-md); }
  .shopping-list--shop .progress__percent { display: block; color: var(--leaf); font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
  .shopping-list--shop .progress__track { grid-column: 1 / -1; height: 12px; }

  .shopping-list--shop .aisle__remaining { display: block; color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
  .shopping-list--shop .aisle__title { color: var(--ink); font-size: var(--text-md); }

  .shopping-list--shop .rows { display: grid; gap: var(--space-2); border: 0; background: none; }
  .shopping-list--shop .shopping-item {
    position: relative;
    grid-template-columns: 52px 1fr;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color 140ms ease;
  }
  .shopping-list--shop .shopping-item + .shopping-item { border-top: 1px solid var(--line); }
  .shopping-list--shop .check,
  .shopping-list--shop .shopping-item__badge { width: 52px; height: 64px; }
  .shopping-list--shop .check__mark { width: 32px; height: 32px; }
  .shopping-list--shop .shopping-item__summary { min-height: 64px; }
  .shopping-list--shop .shopping-item__name { font-size: 1.0625rem; }

  /* The tick button stretches over its row. The chevron sits above it as the
     separate way into details; once details are open the stretch goes, so
     the panel's own controls take taps. */
  .shopping-list--shop .check::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  /* The focus ring moves to the row only while the overlay is there; with
     details open the tick keeps the ordinary :focus-visible outline. */
  .shopping-list--shop .shopping-item:not(:has(.shopping-item__body[open])) .check:focus-visible { outline: none; }
  .shopping-list--shop .shopping-item:not(:has(.shopping-item__body[open])) .check:focus-visible::after { outline: 3px solid var(--leaf); outline-offset: -1px; border-radius: var(--radius-md); }
  .shopping-list--shop .shopping-item:has(.check:hover) { border-color: var(--line-strong); }
  .shopping-list--shop .shopping-item:has(.shopping-item__body[open]) .check::after { content: none; }
  .shopping-list--shop .shopping-item__more { position: relative; z-index: 1; width: var(--touch); height: var(--touch); border-radius: 50%; }
  .shopping-list--shop .shopping-item__more:hover { background: var(--cream); color: var(--ink); }
  .shopping-list--shop .shopping-item__conflict { position: relative; z-index: 1; }

  /* The floating +: above the tab bar on phones, bottom right of the column
     on wider screens. Its quick-add opens just above it. */
  .shop-add__toggle {
    position: fixed;
    right: max(var(--space-4), calc((100vw - var(--column)) / 2));
    bottom: calc(max(var(--space-3), env(safe-area-inset-bottom)) + 76px);
    z-index: 16;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--leaf);
    color: var(--cream);
    box-shadow: var(--shadow-float);
    transition: transform 140ms var(--ease-pop), background-color 140ms ease;
  }
  .shop-add__toggle svg { width: 26px; height: 26px; stroke-width: 2.6; transition: transform 160ms ease; }
  .shop-add__toggle:hover { background: var(--leaf-strong); }
  .shop-add__toggle:active { transform: scale(0.92); }
  .shop-add__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
  .shop-add__panel[hidden] { display: none; }
  .shop-add .quick-add {
    position: fixed;
    inset-inline: var(--space-3);
    bottom: calc(max(var(--space-3), env(safe-area-inset-bottom)) + 144px);
    max-width: 440px;
    margin: 0 auto;
    box-shadow: var(--shadow-float);
  }

  .shopping-list--shop .done-section { margin-top: var(--space-2); }
  .shopping-list--shop .done-section:not([open]) > summary { margin-bottom: 0; }
  .list-actions--shop { justify-content: space-between; }
  .list-actions--shop .receipt-strip { margin: 0; }

  @media (min-width: 768px) {
    .shop-add__toggle { bottom: var(--space-5); }
    .shop-add .quick-add { top: auto; inset-inline: auto; right: max(var(--space-4), calc((100vw - var(--column)) / 2)); bottom: calc(var(--space-5) + 68px); width: 400px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .shop-add__toggle, .shop-add__toggle svg { transition: none; }
  }

  @keyframes check-pop {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
  }
  @keyframes row-glow {
    from { background: var(--sunny-soft); }
  }
}

@layer pages {
  /* Leave room for the fixed quick-add on phones and lift toasts above it. */
  .page:has(.quick-add) { padding-bottom: calc(184px + env(safe-area-inset-bottom)); }
  body:has(.quick-add) .toasts { bottom: calc(160px + env(safe-area-inset-bottom)); }

  @media (min-width: 768px) {
    .page:has(.quick-add) { padding-bottom: var(--space-7); }
    /* Room for Shop's floating + below the finish actions. */
    .page:has(.shopping-list--shop) { padding-bottom: 112px; }
    body:has(.quick-add) .toasts { bottom: var(--space-6); }
  }
}