/* Plain document flow with lightweight filters and readable product text. */
:root {
  color-scheme:light;
  font:16px/1.6 system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;
  color:#111;
  background:#fff;
}
* { box-sizing:border-box }
body { max-width:54rem; margin:1rem auto; padding:0 1rem }
img { max-width:100%; object-fit:contain }
h1,h2,h3 { line-height:1.4 }
button,select { font:inherit; cursor:pointer }
button { padding:.3rem .6rem }
button:disabled { cursor:wait }
:focus-visible { outline:2px solid #075bb5; outline-offset:3px }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }
.skip-link:not(:focus) { position:absolute; left:-10000px }
.header-inner,.section-heading,.filters,.filter-right,.segmented-control,.sort-filter,.results-description,.footer-links {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem 1rem;
}
.header-inner,.results-description { justify-content:space-between }
.brand { display:inline-flex; align-items:center; gap:.5rem; color:inherit; font-size:1.25rem; font-weight:700; text-decoration:none }
.brand-mark,.brand-mark img { display:block; width:40px; height:40px }
.header-nav a { color:#555; text-decoration:none; font-size:.875rem }
.header-nav a+a { margin-left:1rem }
.section-heading { margin-top:1.25rem }
.section-heading h1 { margin:.25rem 0; font-size:1.5rem }
.result-count { font-size:1rem; font-weight:400; color:#555 }
.refresh-button { margin-left:auto; border:0; background:none; color:#555; font-size:.875rem; min-height:40px }
.filters { justify-content:space-between; margin:1.25rem 0 .75rem; padding-bottom:.75rem; border-bottom:1px solid #e5e5e5 }
.filter-right,.category-filter { min-width:0; max-width:100% }
fieldset { border:0; margin:0; padding:0 }
legend { margin-bottom:.3rem }
.segmented-control,.sort-filter { gap:1rem }
.filters button { padding:.4rem .15rem; min-height:44px; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:#555 }
.filters button[aria-pressed=true] { color:#111; font-weight:700; border-bottom-color:#111 }
.filters button:hover { color:#111 }
.category-filter select { appearance:none; max-width:100%; min-height:40px; padding:.3rem 2.25rem .3rem .75rem; border:1px solid #ddd; border-radius:4px; background:#fff url('./assets/chevron-down.svg') no-repeat right .75rem center / 1rem; color:#333 }
.sort-filter>span { display:none }
.results-description,.update-label,.list-footnote,.product-category,.compare-period,.product-date,.detail-category,.detail-dates,.detail-observed,.chart-caption,.affiliate-disclosure,.footer-notice { color:#555; font-size:.875rem }
.results-description { margin:1rem 0 }
.results-description p { margin:0 }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1.75rem 1.25rem }
.product-card { min-width:0 }
.product-link { display:block; color:inherit; text-decoration:none }
.product-image { display:block; width:100% }
.product-image img { display:block; width:100%; height:150px }
.image-placeholder { display:grid; place-items:center; align-content:center; height:150px; font-size:.875rem; color:#555 }
.image-placeholder svg { width:36px; height:36px }
.product-info p { margin:.4rem 0 }
.product-category { margin-top:.5rem!important }
.product-title { margin:.4rem 0; font-size:1.125rem; line-height:1.55; font-weight:500; overflow-wrap:anywhere }
a.product-link:hover .product-title { color:#a3261b }
.record-link { border:0; padding:0; background:none; text-align:left; color:#0645ad; text-decoration:none }
.product-price { font-size:1.375rem; font-weight:700; font-variant-numeric:tabular-nums }
.product-price small { font-size:1rem; font-weight:400 }
.drop-values { color:#a3261b }
.drop-values strong { font-size:1.25rem }
.drop-values span { margin-left:.5rem; white-space:nowrap }
.product-date { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem }
.record-link { font-size:inherit; min-height:36px }
.state-panel { margin:2rem 0 }
.state-panel h3 { font-size:1.1rem }
.state-panel p { margin:.7rem 0 }
.state-meta { color:#555 }
.state-actions { margin:1rem 0 }
.list-footnote { margin-top:1.5rem }
.site-footer { margin-top:2rem; border-top:1px solid #ddd; padding-top:1rem }
.footer-notice p { margin:.5rem 0 }
.footer-links { margin-bottom:.5rem }
.product-dialog { width:min(44rem,calc(100% - 1rem)); max-height:90dvh; overflow:auto; padding:1rem }
.dialog-open { overflow:hidden }
.dialog-close { float:right }
.detail-top { display:flex; align-items:start; gap:1rem; clear:both; padding-top:1rem }
.detail-top>div:last-child { min-width:0 }
.detail-image { flex:0 0 5rem }
.detail-image img,.detail-image .image-placeholder { width:5rem; height:5rem }
.detail-title { font-size:1.125rem; margin:.4rem 0; overflow-wrap:anywhere }
.detail-category,.detail-dates { margin:.4rem 0 }
.comparison-box { display:flex; flex-wrap:wrap; gap:1rem; margin:1.5rem 0 }
.comparison-box>div { display:grid; flex:1 1 10rem; gap:.2rem }
.comparison-box b { font-size:1.25rem; overflow-wrap:anywhere }
.comparison-box small,.comparison-box span { color:#555 }
.comparison-arrow { display:none }
.detail-savings { color:#a3261b; font-weight:700 }
.chart-heading h3 { margin-bottom:0 }
.chart-heading>span { font-size:.875rem; color:#555 }
.history-chart { width:100%; height:auto; display:block; margin-top:1rem }
.history-chart line,.history-chart circle { stroke:#333 }
.history-chart line[stroke-dasharray] { stroke:#ddd }
.history-chart text { fill:#555 }
.history-table-details { margin:1rem 0 }
summary { cursor:pointer }
.history-table-wrap { overflow:auto; max-height:18rem }
.history-table { border-collapse:collapse; width:100%; min-width:280px; font-size:.875rem }
.history-table th,.history-table td { padding:.5rem; border-bottom:1px solid #ddd; text-align:left; white-space:nowrap }
.history-table th { position:sticky; top:0; background:#fff }
.detail-footer { margin-top:1rem }
.noscript-notice { color:#555 }
@media(max-width:600px) {
  .product-grid { grid-template-columns:1fr }
  .product-link { display:grid; grid-template-columns:80px minmax(0,1fr); gap:1rem; align-items:start }
  .product-image img,.product-image .image-placeholder { width:80px; height:80px }
  .product-date { margin-left:calc(80px + 1rem) }
  .product-info>p:first-child { margin-top:0!important }
}