/* Complete HOS 2025 roster sale-status grid. Scoped to .sale-coverage. */
.sale-coverage,
.sale-coverage-legend {
  --sale-green: #143f2b;
  --sale-green-soft: #2c5a42;
  --sale-ink: #26352d;
  --sale-muted: #69746c;
  --sale-paper: #fbf7ee;
  --sale-paper-deep: #f2ead9;
  --sale-line: #d9d0bd;
  --sale-line-strong: #b9ad92;
  --sale-available: #25aa79;
  --sale-selected: #d99a25;
  --sale-sold: #d94f55;
  --sale-unknown: #8c9690;
}

.sale-coverage {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  color: var(--sale-ink);
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 170, 121, 0.09), transparent 34%),
    var(--sale-paper);
  border: 1px solid var(--sale-line);
  border-radius: 18px;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.sale-coverage *,
.sale-coverage *::before,
.sale-coverage *::after {
  box-sizing: border-box;
}

.sale-coverage .sale-coverage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--sale-green);
}

.sale-coverage .sale-coverage-title {
  min-width: 0;
}

.sale-coverage .sale-eyebrow {
  margin: 0 0 3px;
  color: var(--sale-green-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sale-coverage h2 {
  margin: 0;
  color: var(--sale-green);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sale-coverage .sale-note {
  margin: 5px 0 0;
  color: var(--sale-muted);
  font-size: 0.8rem;
}

.sale-coverage .sale-snapshot {
  flex: 0 0 min(100%, 360px);
  padding: 10px 12px;
  background: #fffdf7;
  border: 1px solid var(--sale-line);
  border-left: 4px solid var(--sale-green);
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.6;
}

.sale-coverage .sale-snapshot p {
  margin: 0;
}

.sale-coverage .sale-snapshot-label {
  color: var(--sale-muted);
}

.sale-coverage .sale-sep {
  padding: 0 5px;
  color: var(--sale-line-strong);
}

.sale-coverage .sale-stale {
  margin-top: 5px !important;
  color: #9c3a21;
  font-weight: 700;
}

.sale-coverage .sale-fresh {
  margin-top: 5px !important;
  color: var(--sale-muted);
}

.sale-coverage .sale-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
}

.sale-coverage .sale-stat,
.sale-coverage .sale-total {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px 4px 5px;
  border: 1px solid var(--sale-line);
  border-radius: 999px;
  background: #fffdf7;
  font-size: 0.8rem;
  white-space: nowrap;
}

.sale-coverage .sale-stat strong {
  color: var(--sale-green);
  font-size: 0.95rem;
}

.sale-coverage .sale-stat-swatch {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

.sale-coverage .sale-total {
  padding: 4px 11px;
  color: var(--sale-muted);
}

.sale-coverage-legend,
.sale-coverage-legend * {
  box-sizing: border-box;
}

.sale-coverage-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 15px;
  margin: 8px 0 14px;
  padding: 9px 11px;
  background: var(--sale-paper-deep);
  border: 1px solid var(--sale-line);
  border-radius: 10px;
}

.sale-coverage-legend .sale-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.sale-coverage-legend .sale-swatch {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(20, 63, 43, 0.2);
  border-radius: 6px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

.sale-coverage-legend .sale-swatch.is-unknown {
  color: #fff;
}

.sale-coverage-legend .sale-swatch.is-absent {
  background: transparent;
  border: 1px dashed var(--sale-line-strong);
  color: var(--sale-muted);
  font-weight: 600;
}

.sale-coverage-legend .sale-legend-note {
  flex: 1 1 100%;
  margin: 0;
  padding-top: 2px;
  color: var(--sale-muted);
  font-size: 0.72rem;
}

.sale-coverage .sale-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 8px;
  padding: 2px 0 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.sale-coverage .sale-tab {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 44px;
  padding: 6px 12px;
  color: var(--sale-green);
  background: #fffdf7;
  border: 1px solid var(--sale-line);
  border-radius: 9px 9px 4px 4px;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.sale-coverage .sale-tab:hover {
  border-color: var(--sale-green-soft);
}

.sale-coverage .sale-tab.is-active {
  color: #fffdf7;
  background: var(--sale-green);
  border-color: var(--sale-green);
}

.sale-coverage .sale-tab-name {
  font-size: 0.9rem;
  font-weight: 800;
}

.sale-coverage .sale-tab-counts {
  font-size: 0.67rem;
  opacity: 0.82;
  white-space: nowrap;
}

.sale-coverage .sale-tab:focus-visible,
.sale-coverage .sale-cell:focus-visible,
.sale-coverage .sale-open-model:focus-visible,
.sale-coverage .sale-sources summary:focus-visible {
  outline: 3px solid var(--sale-green);
  outline-offset: 2px;
}

.sale-coverage .sale-matrix-wrap {
  max-height: min(62vh, 640px);
  overflow: auto;
  border: 1px solid var(--sale-line-strong);
  border-radius: 8px;
  background: #fffdf7;
  scrollbar-width: thin;
}

.sale-coverage .sale-matrix-wrap:focus-visible {
  outline: 3px solid var(--sale-green);
  outline-offset: 2px;
}

.sale-coverage .sale-matrix {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
}

.sale-coverage .sale-matrix caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sale-coverage .sale-matrix th {
  font-weight: 700;
}

.sale-coverage .sale-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  min-width: 44px;
  height: 42px;
  padding: 4px 4px;
  color: var(--sale-green);
  background: var(--sale-paper-deep);
  border-bottom: 2px solid var(--sale-line-strong);
  border-right: 1px solid var(--sale-line);
  text-align: center;
  white-space: nowrap;
}

.sale-coverage .sale-matrix thead th.sale-corner {
  left: 0;
  z-index: 4;
  min-width: 76px;
  padding-left: 8px;
  text-align: left;
}

.sale-coverage .sale-matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 76px;
  min-width: 76px;
  padding: 4px 8px;
  color: var(--sale-green-soft);
  background: #f7f1e3;
  border-right: 1px solid var(--sale-line-strong);
  border-bottom: 1px solid var(--sale-line);
  text-align: left;
  white-space: nowrap;
}

.sale-coverage .sale-cell-slot {
  padding: 2px;
  border-bottom: 1px solid var(--sale-line);
  border-right: 1px solid var(--sale-line);
  text-align: center;
  vertical-align: middle;
}

.sale-coverage .sale-cell {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: #f2eee4;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
}

.sale-coverage .sale-cell-symbol {
  display: inline-block;
}

.sale-coverage .sale-cell.is-available {
  color: #0b5d3c;
  background: #e0f4ea;
  border-color: rgba(37, 170, 121, 0.58);
}

.sale-coverage .sale-cell.is-chosen {
  color: #6e4800;
  background: #faedc9;
  border-color: rgba(217, 154, 37, 0.68);
}

.sale-coverage .sale-cell.is-sold {
  color: #7e1e25;
  background: #f8dcdd;
  border-color: rgba(217, 79, 85, 0.64);
}

.sale-coverage .sale-cell.is-unknown {
  color: #3f4842;
  background: #e6e9e6;
  border-color: rgba(140, 150, 144, 0.62);
}

.sale-coverage .sale-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(20, 63, 43, 0.18);
}

.sale-coverage .sale-cell.is-selected {
  outline: 3px solid var(--sale-green);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px rgba(255, 253, 247, 0.92), 0 0 0 7px var(--sale-green);
}

.sale-coverage .sale-cell-slot.is-absent {
  color: #a49b89;
  background: #f7f3e9;
  font-size: 0.9rem;
}

.sale-coverage .sale-absent-mark {
  user-select: none;
}

.sale-coverage .sale-detail {
  min-height: 66px;
  margin-top: 12px;
  padding: 12px 14px;
  background: #fffdf7;
  border: 1px solid var(--sale-line);
  border-left: 4px solid var(--sale-green);
  border-radius: 10px;
}

.sale-coverage .sale-detail-hint {
  margin: 0;
  color: var(--sale-muted);
  font-size: 0.8rem;
}

.sale-coverage .sale-detail-card {
  display: grid;
  gap: 5px;
}

.sale-coverage .sale-detail-address {
  margin: 0;
  color: var(--sale-green);
  font-size: 1rem;
  font-weight: 800;
}

.sale-coverage .sale-detail-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.sale-coverage .sale-coverage-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.sale-coverage .sale-coverage-badge.is-available {
  color: #0b5d3c;
  background: #e0f4ea;
  border-color: rgba(37, 170, 121, 0.58);
}

.sale-coverage .sale-coverage-badge.is-chosen {
  color: #6e4800;
  background: #faedc9;
  border-color: rgba(217, 154, 37, 0.68);
}

.sale-coverage .sale-coverage-badge.is-sold {
  color: #7e1e25;
  background: #f8dcdd;
  border-color: rgba(217, 79, 85, 0.64);
}

.sale-coverage .sale-coverage-badge.is-unknown {
  color: #3f4842;
  background: #e6e9e6;
  border-color: rgba(140, 150, 144, 0.62);
}

.sale-coverage .sale-detail-asof {
  color: var(--sale-muted);
  font-size: 0.76rem;
}

.sale-coverage .sale-detail-source {
  margin: 0;
  font-size: 0.8rem;
}

.sale-coverage a {
  color: var(--sale-green);
  font-weight: 700;
  text-underline-offset: 2px;
}

.sale-coverage a:hover {
  color: var(--sale-green-soft);
}

.sale-coverage .sale-link-missing {
  color: var(--sale-muted);
}

.sale-coverage .sale-transaction {
  margin-top: 4px;
  padding: 8px 10px;
  background: #fbf1ee;
  border: 1px solid rgba(217, 79, 85, 0.28);
  border-radius: 8px;
  font-size: 0.8rem;
}

.sale-coverage .sale-transaction p {
  margin: 0;
}

.sale-coverage .sale-transaction-title {
  color: #7e1e25;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.sale-coverage .sale-transaction-asof {
  color: var(--sale-muted);
  font-size: 0.72rem;
}

.sale-coverage .sale-open-model {
  justify-self: start;
  min-height: 40px;
  margin-top: 3px;
  padding: 7px 14px;
  color: #fffdf7;
  background: var(--sale-green);
  border: 1px solid var(--sale-green);
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.sale-coverage .sale-open-model:hover {
  background: var(--sale-green-soft);
}

.sale-coverage .sale-no-model {
  margin: 2px 0 0;
  color: var(--sale-muted);
  font-size: 0.78rem;
}

.sale-coverage .sale-empty {
  margin-top: 12px;
  padding: 24px 18px;
  text-align: center;
  background: #fffdf7;
  border: 1px dashed var(--sale-line-strong);
  border-radius: 10px;
}

.sale-coverage .sale-empty strong {
  display: block;
  color: var(--sale-green);
  font-size: 1rem;
}

.sale-coverage .sale-empty p {
  margin: 6px 0 0;
  color: var(--sale-muted);
  font-size: 0.8rem;
}

.sale-coverage .sale-sources {
  margin-top: 12px;
  color: var(--sale-muted);
  font-size: 0.75rem;
}

.sale-coverage .sale-sources summary {
  min-height: 32px;
  padding: 6px 0;
  color: var(--sale-green-soft);
  font-weight: 700;
  cursor: pointer;
}

.sale-coverage .sale-sources ul {
  display: grid;
  gap: 5px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.sale-coverage .sale-source-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 7px 9px;
  background: #fffdf7;
  border: 1px solid var(--sale-line);
  border-radius: 7px;
}

.sale-coverage .sale-source-name {
  color: var(--sale-ink);
  font-weight: 600;
}

.sale-coverage .sale-source-time {
  white-space: nowrap;
}

.sale-coverage .sale-source-failed {
  color: #9c3a21;
  font-weight: 800;
}

@media (max-width: 760px) {
  .sale-coverage {
    padding: 14px;
  }

  .sale-coverage .sale-coverage-head {
    flex-direction: column;
  }

  .sale-coverage .sale-snapshot {
    flex-basis: auto;
    width: 100%;
  }

  .sale-coverage .sale-matrix-wrap {
    max-height: 58vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sale-coverage .sale-cell {
    transition: none;
  }

  .sale-coverage .sale-cell:hover {
    transform: none;
  }
}