.coverage { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.coverage-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 7px; }
.coverage-title h2 { font-size: 1.05rem; }
.coverage .fine { margin-top: 4px; }
.coverage-stats { display: flex; flex-wrap: wrap; gap: 9px; margin: 6px 0; }
.coverage-stat { padding: 5px 8px; border-radius: 7px; background: #f1efff; font-size: .73rem; color: #373073; }
.coverage-stat strong { font-size: .82rem; margin-right: 3px; }
.coverage-map { width: 100%; max-width: 96px; margin: 0 auto; overflow: hidden; border: 1px solid #e5e2f3; border-radius: 10px; background: #f9f8ff; }
.coverage-map svg { display: block; width: 100%; height: auto; }
.coverage-outline { fill: #e6e2fa; stroke: #8479c3; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.coverage-dot { fill: #675bc0; fill-opacity: .72; }
.coverage-ranking { max-height: 7rem; overflow: auto; border: 1px solid var(--line); border-radius: 7px; }
.coverage-table { width: 100%; border-spacing: 0; font-size: .75rem; white-space: normal; font-variant-numeric: tabular-nums; }
.coverage-table th, .coverage-table td { padding: 5px 9px; text-align: left; }
.coverage-table thead th { position: sticky; top: 0; background: #f1efff; color: #373073; }
.coverage-table tbody th { font-weight: 600; }
.coverage-table tbody tr:nth-child(even) { background: #f9f8ff; }
.coverage-table tr > :not(:first-child) { text-align: right; }
.coverage .coverage-source { margin-top: 5px; font-size: .67rem; }
.coverage-overview { display: grid; grid-template-columns: minmax(0, 1fr) 78px; align-items: center; gap: 6px; margin: 7px 0; }
.coverage-total { font-size: .78rem; color: var(--muted); line-height: 1.3; }
.coverage-total strong { font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.coverage-ranking:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coverage-open { display: none; }
#coverage-dialog .coverage { margin: 0; padding: 0; border: 0; }
#coverage-dialog .coverage-ranking { max-height: min(48dvh, 24rem); }
.coverage-close { display: flex; justify-content: flex-end; margin-top: 12px; }
.sample-open { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
#detail-dialog:has(.sample-summary) { width: min(660px, calc(100% - 28px)); }
.dialog-content .sample-source { color: var(--muted); font-size: .76rem; }
.sample-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
.sample-summary > div { display: flex; flex-direction: column-reverse; gap: 4px; background: #f2f0ff; border-radius: 9px; padding: 10px; }
.sample-summary dt { color: #443a82; font-size: .69rem; line-height: 1.25; }
.sample-summary dd { margin: 0; font-size: clamp(1.05rem, 4vw, 1.6rem); font-weight: 750; font-variant-numeric: tabular-nums; }
.sample-table { max-height: min(46dvh, 23rem); }
.sample-table table { font-variant-numeric: tabular-nums; }
.sample-table thead { position: sticky; top: 0; }
.sample-table tbody tr:nth-child(even) { background: #f9f8ff; }
.sample-volume { display: inline-flex; align-items: center; gap: 8px; }
.sample-volume meter { width: clamp(25px, 10vw, 90px); height: 9px; }
.sample-volume meter::-webkit-meter-optimum-value { background: #786cd4; }
.sample-volume span { min-width: 5ch; }
@media (max-width: 800px), (max-height: 789px) {
  .checkout-grid .coverage { display: none; }
  .coverage-open:not([hidden]) { display: inline-flex; }
}

@media (min-width: 801px) and (min-height: 790px) {
  body { min-height: 100dvh; display: flex; flex-direction: column; }
  main.wrap { flex: 1; display: flex; flex-direction: column; }
  .checkout-grid { flex: 1; align-items: stretch; }
  .checkout-grid > aside { display: flex; flex-direction: column; min-width: 0; }
  .checkout-grid > .panel { align-self: start; }
  .checkout-grid .coverage:not([hidden]) { display: flex; flex: 1; flex-direction: column; }
  .checkout-grid .coverage-ranking { flex: 1; max-height: none; min-height: 7rem; contain: size; }
  .site-footer { margin-top: 6px; }
}

@media (max-width: 365px) {
  .order-actions { gap: 0 8px; }
  .order-actions .text-button { font-size: .72rem; }
  .coverage-table th, .coverage-table td { padding-inline: 6px; }
}