/*
 * Purchase history: a searchable list of things bought, and per item a
 * price card for each product. Prices are history, never "current".
 */
@layer components {
  .history-tabs { margin-bottom: var(--space-5); }

  .purchase-search { margin-bottom: var(--space-4); }
  .purchase-list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
  .purchase-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 14px);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
  }
  .purchase-row:hover { border-color: var(--leaf); }
  .purchase-row__name { font-weight: 800; }
  .purchase-row__price { font-weight: 800; font-variant-numeric: tabular-nums; }
  .purchase-row__meta { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-sm); }
  .empty-note { color: var(--muted); }

  .price-card { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
  .price-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
  .price-card h2 { font-size: var(--text-lg); }
  .price-card__meta { display: block; color: var(--muted); font-size: var(--text-sm); }
  .price-card__latest { display: grid; justify-items: end; text-align: right; }
  .price-card__price { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; }

  .price-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
  .price-table th { padding: var(--space-1) var(--space-2) var(--space-2) 0; color: var(--muted); font-size: var(--text-xs); text-align: left; }
  .price-table td { padding: var(--space-2) var(--space-2) var(--space-2) 0; border-top: 1px solid var(--line); vertical-align: top; }
  .price-table small { display: block; }
  .price-table__saving { color: var(--leaf); }
  .price-up { color: var(--danger); font-weight: 700; }
  .price-down { color: var(--leaf); font-weight: 700; }

  /* Inside an opened list row. */
  .row-purchases:empty { display: none; }
  .row-purchases { display: grid; gap: var(--space-1); margin-bottom: var(--space-2); }
  .row-purchases__line { color: var(--muted); font-size: var(--text-sm); }
  .row-purchases__line svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--leaf); }

  /* Products: the catalogue, one product's facts, and comparing two. */
  .product-shop { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-lg); }
  .product-facts { margin: 0; }
  .product-facts dl, dl.product-facts { display: grid; gap: var(--space-3); margin: 0; }
  .product-facts dt { color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
  .product-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
  .product-facts__source { display: block; color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
  section.product-facts { margin-bottom: var(--space-4); }

  .duplicate-note { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); border-color: var(--sunny); }
  .duplicate-note h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); }
  .duplicate-note h2 svg { width: 22px; height: 22px; }
  .duplicate-note .receipt-group__lead { margin: 0; }
  .duplicate-note__pairs { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .duplicate-note__pairs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }

  .merge-compare { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
  @media (min-width: 640px) { .merge-compare { grid-template-columns: 1fr 1fr; } }
  .merge-compare__product { display: grid; gap: var(--space-3); }
  .merge-compare__product h2 { font-size: var(--text-lg); }
  .merge-compare__differences { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: var(--text-sm); }
  .merge-compare__differences svg { display: inline; width: 16px; height: 16px; vertical-align: -3px; }
  .merge-history h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
  .merge-history small { display: block; color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
  .merge-history--undone strong { color: var(--muted); font-weight: 700; }
  .merge-undo__facts { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .merge-undo__facts li { display: flex; gap: var(--space-2); align-items: flex-start; }
  .merge-undo__facts svg { width: 20px; height: 20px; flex: none; color: var(--leaf); }
  .merge-undo__later { margin-block: var(--space-4); }
  .merge-undo__legend { float: left; width: 100%; margin-bottom: var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; }
  .merge-undo__later .choice { border-radius: var(--radius-md, 14px); }
  .merge-compare__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }

  .item-rename { margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
  .item-rename summary {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    cursor: pointer;
  }
  .item-rename[open] summary { margin-bottom: var(--space-3); }

  /* Items: the household's own names for what it buys. */
  .item-list__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
  .item-list__head .product-shop { margin: 0; }
  .item-list__head svg { width: 16px; height: 16px; }
  .item-row { grid-template-columns: 1fr auto auto; align-items: center; }
  .item-row .chip { color: var(--ink); }
  .item-row__chevron { width: 18px; height: 18px; color: var(--muted); }
  .item-section { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
  .item-section h2 { margin: 0; font-size: var(--text-lg); }
  .item-section .empty-note { margin: 0; }
  .item-links { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .item-links li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-3); font-weight: 700; }
  .item-links__meta { color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
  .item-tidy__action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
  .item-tidy__action + .item-tidy__action { padding-top: var(--space-3); border-top: 1px solid var(--line); }
  .item-tidy__action > div { flex: 1 1 16rem; }
  .item-tidy__action .field__hint { margin: var(--space-1) 0 0; }
  .settings-items { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .settings-items h2 { margin: 0; }
  .settings-items .field__hint { margin: var(--space-1) 0 0; }

  /* Five tabs: tighter on a phone, and scroll sideways rather than wrap
     on the narrowest. */
  .history-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .history-tabs .segmented__option { flex: none; }
  @media (max-width: 480px) {
    .history-tabs { display: flex; }
    .history-tabs .segmented__option { flex: 1 0 auto; justify-content: center; padding-inline: var(--space-2); font-size: var(--text-xs); }
  }
}