@layer reset, tokens, base, components, lumi, views, utilities;

/* ===== Reset ===== */
@layer reset {
  *, ::before, ::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  button, input, select { font: inherit; color: inherit; }
  img, svg { display: block; }
  [hidden] { display: none !important; }
}

/* ===== Base ===== */
@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
  body {
    min-height: 100vh; display: flex; flex-direction: column;
    background: var(--bg); color: var(--text); font: var(--fs-body);
    -webkit-font-smoothing: antialiased; font-optical-sizing: auto;
    transition: background-color var(--dur-3) var(--ease-standard), color var(--dur-3) var(--ease-standard);
  }
  main { flex: 1; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: var(--primary-ink); }
  :focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-s); }
  h1 { font: var(--fs-title); letter-spacing: var(--track-tight); }
  h2 { font: var(--fs-h2); letter-spacing: -.01em; }
  .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  .icon { width: 20px; height: 20px; flex: none; }
  .tabular { font-variant-numeric: tabular-nums; }
}

/* ===== Buttons ===== */
@layer components {
  .btn-primary, .btn-secondary, .btn-tertiary {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--control-h); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill);
    font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: transform var(--dur-1) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
    -webkit-tap-highlight-color: transparent;
  }
  .btn-primary:active, .btn-secondary:active, .btn-tertiary:active, .btn-icon:active { transform: scale(.97); }
  .btn-primary { background: var(--primary); color: var(--on-primary); }
  .btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
  .btn-secondary { background: var(--surface-2); color: var(--text); }
  .btn-secondary:hover { background: var(--surface-3); color: var(--text); }
  .btn-secondary[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-ink); }
  .btn-tertiary { background: transparent; color: var(--primary-ink); padding-inline: var(--space-3); }
  .btn-tertiary:hover { background: var(--primary-soft); }
  .btn-icon {
    display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0;
    border-radius: 50%; background: transparent; color: var(--text); cursor: pointer;
    transition: transform var(--dur-1) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
  }
  .btn-icon:hover { background: var(--surface-2); }
}

/* ===== Header (single row, translucent material) ===== */
@layer components {
  .hdr {
    position: sticky; top: 0; z-index: 20; height: var(--hdr-h);
    background: var(--material-bar);
    -webkit-backdrop-filter: blur(var(--material-blur)) saturate(180%);
    backdrop-filter: blur(var(--material-blur)) saturate(180%);
    box-shadow: 0 1px 0 var(--line);
  }
  .hdr-inner { height: 100%; display: flex; align-items: center; gap: var(--space-4); }
  .hdr-logo { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 19px; letter-spacing: var(--track-tight); color: var(--text); flex: none; }
  .hdr-logo:hover { color: var(--text); }
  .hdr-mark { width: 32px; height: 32px; }
  /* Chispa lockup (light only until a dark variant exists): the old mark + text stays in dark. */
  img.hdr-mark { width: auto; }
  .hdr-logo > svg.hdr-mark, .hdr-logo > span { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img.hdr-mark { display: none; }
    :root:not([data-theme="light"]) .hdr-logo > svg.hdr-mark { display: block; }
    :root:not([data-theme="light"]) .hdr-logo > span { display: inline; }
  }
  :root[data-theme="dark"] img.hdr-mark { display: none; }
  :root[data-theme="dark"] .hdr-logo > svg.hdr-mark { display: block; }
  :root[data-theme="dark"] .hdr-logo > span { display: inline; }
  .hdr-search { position: relative; flex: 1; max-width: 520px; margin-inline: auto; }
  .hdr-search form { display: flex; align-items: center; gap: var(--space-2); }
  .hdr-search .search-field { flex: 1; }
  .hdr-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
  .hdr-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-weight: 500; font-size: 15px; }
  .hdr-link:hover { background: var(--surface-2); color: var(--text); }
  .hdr-count { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .hdr-search-btn { display: none; }
  @media (max-width: 719px) {
    .hdr-inner { gap: var(--space-2); }
    .hdr .hdr-search { display: none; }
    .hdr-search-btn { display: inline-grid; }
    .hdr-link:not(.hdr-saved) { padding-inline: var(--space-2); }
  }
  @media (prefers-contrast: more) { .hdr { background: var(--bg); box-shadow: 0 1px 0 var(--line-strong); } }
}

/* ===== Search field ===== */
@layer components {
  .search-field {
    display: flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-4);
    background: var(--surface-2); border-radius: var(--radius-pill); color: var(--text-3);
  }
  .search-field:focus-within { box-shadow: var(--focus); }
  .search-field input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--text); font-size: 16px; }
  .search-field input::placeholder { color: var(--text-3); }
}

/* ===== Skip link ===== */
@layer components {
  .skip-link {
    position: absolute; inset-inline-start: var(--space-3); top: var(--space-3); z-index: 60;
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
    background: var(--primary); color: var(--on-primary); font-weight: 600; transform: translateY(-200%);
  }
  .skip-link:focus-visible { transform: none; box-shadow: var(--focus); }
}

/* ===== Search suggestions ===== */
@layer components {
  .suggest {
    position: absolute; inset-inline: 0; top: calc(100% + var(--space-2)); z-index: 50; padding: var(--space-2);
    border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-2);
  }
  .suggest[hidden] { display: none; }
  .sugg-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    min-height: var(--control-h); padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); cursor: pointer;
  }
  .sugg-item:hover, .sugg-item[aria-selected="true"] { background: var(--surface-2); }
  .sugg-name { font: var(--fs-card-title); }
  .sugg-name mark { border-radius: var(--radius-xs); background: var(--primary-soft); color: var(--primary-ink); }
  .sugg-meta { font: var(--fs-sm); color: var(--text-2); }
  .sugg-price { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
  .sugg-empty, .sugg-label { padding: var(--space-2) var(--space-3); font: var(--fs-sm); color: var(--text-2); }
}

/* ===== Footer ===== */
@layer components {
  .ftr { margin-top: var(--space-9); padding-block: var(--space-7) var(--space-6); background: var(--bg-soft); color: var(--text-2); font-size: 14px; }
  .ftr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); max-width: 640px; }
  .ftr h2 { font: var(--fs-xs); color: var(--text); margin-bottom: var(--space-2); }
  .ftr li + li { margin-top: var(--space-1); }
  .ftr li a { display: inline-block; padding-block: var(--space-1); }
  .ftr-line { margin-top: var(--space-6); font-size: 13px; color: var(--text-3); }
}

/* ===== Chip, seg, switch ===== */
@layer components {
  .chip {
    display: inline-flex; align-items: center; gap: var(--space-1); min-height: 36px; padding: 0 var(--space-3);
    border: 0; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text);
    font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: transform var(--dur-1) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
  }
  .chip:active { transform: scale(.97); }
  .chip:hover { background: var(--surface-3); color: var(--text); }
  .chip[aria-pressed="true"], .chip[aria-current="true"], .chip.on { background: var(--text); color: var(--bg); }
  .chip .icon { width: 16px; height: 16px; }
  .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: var(--surface-2); }
  .seg button, .seg a {
    min-height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent;
    font-size: 14px; font-weight: 500; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center;
    transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
  }
  .seg [aria-pressed="true"], .seg [aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
  .switch { position: relative; display: inline-flex; flex: none; width: 51px; height: 31px; }
  .switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
  .switch-track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--surface-3); transition: background-color var(--dur-2) var(--ease-standard); }
  .switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--gray-0); box-shadow: var(--shadow-knob); transition: transform var(--dur-3) var(--ease-standard); }
  .switch input:checked + .switch-track { background: var(--best); }
  .switch input:checked + .switch-track::after { transform: translateX(20px); }
  .switch input:focus-visible + .switch-track { box-shadow: var(--focus); }
}

/* ===== Sheet + settings + scrim ===== */
@layer components {
  .scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; transition: opacity var(--dur-3) var(--ease-standard); }
  .scrim.open { opacity: 1; }
  .sheet {
    position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow: auto;
    padding: var(--space-3) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
    background: var(--surface); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; box-shadow: var(--shadow-3);
    transform: translateY(100%); transition: transform var(--dur-3) var(--ease-standard);
  }
  .sheet.open { transform: none; }
  .sheet-grab { width: 36px; height: 5px; margin: 0 auto var(--space-3); border-radius: 3px; background: var(--surface-3); }
  .sheet h2 { margin-bottom: var(--space-4); font: var(--fs-h3); font-size: 17px; }
  .settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); }
  .settings-row + .settings-row { border-top: 1px solid var(--line); }
  .settings-label { display: flex; flex-direction: column; font-weight: 500; }
  .settings-sub { font: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
  @media (min-width: 720px) {
    .scrim:has(+ .settings) { background: transparent; }
    .settings.sheet {
      left: auto; bottom: auto; top: var(--anchor-top, 72px); right: var(--anchor-right, 24px); width: 340px;
      border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5);
      transform-origin: top right; transform: scale(.94); opacity: 0;
      transition: transform var(--dur-3) var(--ease-standard), opacity var(--dur-3) var(--ease-standard);
    }
    .settings.sheet.open { transform: none; opacity: 1; }
    .settings .sheet-grab { display: none; }
  }
}

/* ===== Toast ===== */
@layer components {
  .toast-zone { position: fixed; z-index: 50; left: 0; right: 0; bottom: var(--space-5); display: grid; justify-items: center; pointer-events: none; padding-inline: var(--gutter); }
  .toast {
    pointer-events: auto; display: flex; align-items: center; gap: var(--space-3); max-width: 480px;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); min-height: 52px;
    background: var(--text); color: var(--bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-2);
    font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(12px);
    transition: opacity var(--dur-3) var(--ease-standard), transform var(--dur-3) var(--ease-standard);
  }
  .toast.show { opacity: 1; transform: none; }
  .toast .ti { display: inline-flex; }
  .toast-msg { flex: 1; }
  .toast .ta { border: 0; background: transparent; color: var(--primary-tint); font-weight: 700; min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-m); cursor: pointer; }
}

/* ===== Product card ===== */
@layer components {
  .grid-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
  @media (min-width: 960px) { .grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }
  .pcard {
    position: relative; display: flex; flex-direction: column; gap: var(--space-1); min-height: 152px;
    padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-2xl);
    transition: transform var(--dur-1) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
  }
  .pcard-media {
    display: grid; place-items: center; aspect-ratio: var(--ratio-media); margin-bottom: var(--space-2);
    background: var(--img-bg); border-radius: var(--radius-xl); overflow: hidden;
  }
  .pcard-media img { inline-size: 100%; block-size: 100%; object-fit: contain; mix-blend-mode: var(--img-blend); }
  .pcard-media[data-art] { background: var(--img-fallback-bg); color: var(--text-3); }
  .pcard-media[data-art] .icon { width: 40%; height: 40%; }
  .pcard:active { transform: scale(.98); }
  .pcard:hover { background: var(--surface-3); }
  .pcard-brand { font: var(--fs-xs); color: var(--text-3); padding-right: 32px; }
  .pcard-name { padding-right: var(--space-3); }
  .pcard-name { font-size: 15px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pcard-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .pcard-link:hover { color: inherit; }
  .pcard-link:focus-visible { box-shadow: none; }
  .pcard:has(.pcard-link:focus-visible) { box-shadow: var(--focus); }
  .pcard-price { margin-top: auto; padding-top: var(--space-2); font: var(--fs-card-price); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .pcard-meta { font: var(--fs-sm); color: var(--text-2); }
  .pcard-save {
    position: absolute; z-index: 1; top: 4px; right: 4px; width: 36px; height: 36px;
    display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-2);
    cursor: pointer; opacity: 0; transition: opacity var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
  }
  .pcard-save .icon { width: 18px; height: 18px; }
  .pcard:hover .pcard-save, .pcard-save:focus-visible, .pcard-save[aria-pressed="true"] { opacity: 1; }
  .pcard-save[aria-pressed="true"] { color: var(--bank); }
  .pcard-save[aria-pressed="true"] .icon { fill: currentColor; }
  .pcard-save:active { transform: scale(.9); }
  @media (hover: none) { .pcard-save { opacity: 1; } }
  @media (prefers-contrast: more) { .pcard { box-shadow: inset 0 0 0 1px var(--line-strong); } }
  /* text tile for categories (landing, directory) */
  .ptile { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-xl); font-weight: 600; }
  .ptile svg { width: 24px; height: 24px; }
  .ptile small { margin-left: auto; font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; }
}

/* ===== Verdict pill, best badge ===== */
@layer components {
  .pill-verdict {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-3) 0 10px;
    border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; background: var(--surface-2); color: var(--text-2);
  }
  .pill-verdict .icon { width: 16px; height: 16px; }
  .pill-verdict[data-verdict="good-time"] { background: var(--best-soft); color: var(--best-ink); }
  .pill-verdict[data-verdict="wait"] { background: var(--warn-soft); color: var(--warn-ink); }
  .pill-verdict[data-verdict="neutral"] { background: var(--surface-2); color: var(--text-2); }
  .pill-verdict[data-verdict="insufficient"] { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .lead { font-size: 19px; line-height: 1.5; color: var(--text-2); }
  .badge-best { display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--best-soft); color: var(--best-ink); font: var(--fs-xs); font-weight: 600; }
}

/* ===== Offer row ===== */
@layer components {
  .offer {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "mark shop price" "mark meta cta";
    align-items: center; column-gap: var(--space-3); row-gap: 2px; padding: var(--space-3) var(--space-4);
    background: var(--surface-2); border-radius: var(--radius-xl); border-left: 2px solid transparent;
  }
  .offer + .offer { margin-top: var(--space-2); }
  .offer.best { border-left-color: var(--best); background: var(--best-soft); }
  .offer.oos { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); border-left-style: dashed; opacity: .85; }
  .offer-mark { grid-area: mark; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-m); background: var(--surface); font-weight: 700; font-size: 14px; color: var(--text-2); }
  .offer-shop .badge-best { flex: none; }
  .offer-shop { flex-wrap: wrap; row-gap: 0; }
  .offer-shop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .offer-shop { grid-area: shop; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: var(--space-2); align-items: center; }
  .offer-meta { grid-area: meta; font: var(--fs-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .offer-price { grid-area: price; justify-self: end; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
  .offer.best .offer-price { color: var(--best-ink); }
  .offer-cta { grid-area: cta; justify-self: end; }
  .offer-cta.btn-primary, .offer-cta.btn-tertiary { min-height: 36px; font-size: 14px; }
  .bank-card { font: var(--fs-sm); color: var(--bank-ink); }
  .offer-meta .bank-card::before { content: " \00b7  "; color: var(--text-3); }
}

/* ===== Data point (history stats), chart, alert card ===== */
@layer components {
  .dp { display: flex; flex-direction: column; gap: 2px; }
  .dp span { font: var(--fs-sm); color: var(--text-2); }
  .dp b { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
  .dp.good b { color: var(--best-ink); }
  .chart { position: relative; }
  .chart svg { width: 100%; height: 160px; overflow: visible; }
  .chart .line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .chart .area { fill: var(--primary-soft); opacity: .7; }
  .chart .grid-line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .chart .now-dot { fill: var(--primary); }
  .alert-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-4); border-radius: var(--radius-xl); background: var(--surface-2); }
  .alert-card p { flex: 1 1 100%; font: var(--fs-sm); color: var(--text-2); }
  .alert-range { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--space-2); }
  .alert-range input[type="range"] { width: 100%; accent-color: var(--primary); }
}

/* ===== Empty state ===== */
@layer components {
  .empty { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); }
  .empty p { color: var(--text-2); max-width: 40ch; }
  .empty .btn-secondary { margin-top: var(--space-2); }
}

/* ===== Crumb, pager, page head ===== */
@layer components {
  .crumb { display: flex; gap: var(--space-1); align-items: center; font: var(--fs-sm); color: var(--text-2); }
  .crumb a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; }
  .crumb a:hover { color: var(--primary-ink); }
  .crumb .icon { width: 14px; height: 14px; }
  .pager { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin-top: var(--space-6); }
  .pager a, .pager span { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-weight: 500; font-variant-numeric: tabular-nums; }
  .pager a:hover { background: var(--surface-2); }
  .pager [aria-current="page"] { background: var(--text); color: var(--bg); }
  .back-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; color: var(--text-2); font-weight: 500; font-size: 15px; }
  .back-link .icon { width: 18px; height: 18px; }
  .prose { max-width: var(--measure); }
  .prose h2 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
  .prose p + p { margin-top: var(--space-3); }
  .letters { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
}

/* ===== Utilities ===== */
@layer utilities {
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lumi[data-offscreen], .lumi[data-offscreen] * { animation-play-state: paused !important; }
}

/* ===== Reduced motion: UI uses opacity only (Lumi keeps animating gently) ===== */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary, .btn-tertiary, .btn-icon, .chip, .pcard, .offer-cta { transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); }
  .pcard-save { transition: opacity var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard); }
  .btn-primary:active, .btn-secondary:active, .btn-tertiary:active, .btn-icon:active, .chip:active, .pcard:active, .pcard-save:active { transform: none; }
  .sheet, .settings.sheet, .toast { transform: none !important; transition: opacity var(--dur-3) var(--ease-standard); }
  .sheet:not(.open) { opacity: 0; }
}