/* The swap catalogue — /alternatives.
   Ported from the 3.0 kit's "8 Alternatives" comp (2026-08-22).

   Loaded via yield :page_stylesheets, not on every page.

   Radii tabulated from the comp before writing any of this, rather than mapped onto
   the app's nearest rung — that mapping is what turned the last kit screen's pills
   into rounded rectangles. The comp uses: lg (14px) for the card and the search
   shell, sm (10px) for filter rows, pill for tags, xl for the empty state, 2xl for
   the compare panel, and one 4px square — the filter tick box, which is the only
   small square in the design and reads as a radio button the moment it is rounded.

   Page width mirrors the site header, as the map, calendar and actions tools all
   do. A tool surface wider or narrower than the menu above it reads as a broken
   page. */

.zw-alt-page {
  width: 100%;
  max-width: 80rem; /* the site header's measure — one width on every surface */
  margin: 0 auto;
  padding: 28px 1rem 72px;
  color: var(--zw-ink-warm);
}

.zw-alt-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--zw-muted);
  transition: color 200ms var(--zw-ease-out);
}

.zw-alt-back:hover { color: var(--zw-ink-warm); }

.zw-alt-title {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 10px;
  max-width: 600px;
  text-wrap: balance;
}

.zw-alt-dek {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--zw-muted);
  max-width: 560px;
  text-wrap: pretty;
}

.zw-alt-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* --- Filters ---------------------------------------------------------------- */

.zw-alt-filters {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 20px;
}

.zw-alt-filter-group__label {
  margin: 0 0 9px 11px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zw-quiet);
}

.zw-alt-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border-radius: var(--zw-radius-sm);
  cursor: pointer;
  transition: background 200ms var(--zw-ease-out);
}

.zw-alt-filter:hover { background: var(--zw-panel); }
.zw-alt-filter--on { background: var(--zw-panel); }

/* 4px, the only small square in the design. Rounded any further it reads as a radio
   button — "pick one of these" rather than "tick what applies" — which is a semantic
   change, not a cosmetic one. --zw-border-warm-strong is the only warm border allowed
   on an interactive outline; the others are structural hairlines and vanish here. */
.zw-alt-filter__box {
  appearance: none;
  width: 15px;
  height: 15px;
  flex: none;
  margin: 0;
  border: 1.5px solid var(--zw-border-warm-strong);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
}

.zw-alt-filter__box::after {
  content: "";
  width: 7px;
  height: 7px;
  transform: scale(0);
  background: var(--zw-surface);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.zw-alt-filter__box:checked {
  background: var(--zw-blue-700);
  border-color: var(--zw-blue-700);
}

.zw-alt-filter__box:checked::after { transform: scale(1); }

.zw-alt-filter__box:focus-visible {
  outline: 2px solid var(--zw-blue-700);
  outline-offset: 2px;
}

.zw-alt-filter__label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--zw-ink-warm-3);
}

.zw-alt-filter--on .zw-alt-filter__label { color: var(--zw-ink-warm); }

.zw-alt-filter__count {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--zw-muted);
}

.zw-alt-filters__clear { margin-left: 11px; }

/* --- Toolbar ---------------------------------------------------------------- */

.zw-alt-results { min-width: 0; }

.zw-alt-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}

.zw-alt-search {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  background: var(--zw-surface);
  border: 1px solid var(--zw-border-warm-soft);
  border-radius: var(--zw-radius-lg);
  box-shadow: var(--zw-shadow-hairline);
  color: var(--zw-quiet);
}

.zw-alt-search__icon { display: flex; flex: none; }

.zw-alt-search__field {
  flex: 1;
  min-width: 0;
  height: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--zw-ink-warm);
  background: transparent;
  border: none;
  outline: none;
}

.zw-alt-apply {
  height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--zw-surface);
  background: var(--zw-blue-700);
  border: none;
  border-radius: var(--zw-radius-sm);
  cursor: pointer;
}

/* --- The grid --------------------------------------------------------------- */

.zw-alt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* A <details> rather than a modal: the comparison is content, and this degrades to
   an open disclosure with no script at all. Open, it spans the grid so the panel has
   room to lay two alternatives side by side rather than squeezing them into a third
   of the width. */
.zw-alt-card {
  min-width: 0;
  background: var(--zw-surface);
  border: 1px solid var(--zw-border-warm-2);
  border-radius: var(--zw-radius-lg);
  box-shadow: var(--zw-shadow-hairline);
  overflow: hidden;
  transition:
    box-shadow 320ms var(--zw-ease-out),
    border-color 200ms var(--zw-ease-out);
}

.zw-alt-card:hover {
  box-shadow: var(--zw-shadow-lift);
  border-color: var(--zw-border-warm-strong);
}

.zw-alt-card[open] {
  grid-column: 1 / -1;
  border-color: var(--zw-blue-700);
  box-shadow: var(--zw-shadow-float);
}

.zw-alt-card__summary {
  display: grid;
  gap: 0;
  align-content: start;
  cursor: pointer;
  list-style: none;
}

.zw-alt-card__summary::-webkit-details-marker { display: none; }

.zw-alt-card__frame {
  position: relative;
  display: block;
  width: 100%;
  height: 170px;
  overflow: hidden;
  background: var(--zw-panel);
}

.zw-alt-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zw-alt-card__saves {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  background: var(--zw-surface);
  color: var(--zw-green-800);
  border-radius: var(--zw-radius-pill);
  box-shadow: var(--zw-shadow-hairline);
  white-space: nowrap;
}

.zw-alt-card__body {
  display: grid;
  gap: 4px;
  padding: 12px 14px 14px;
}

.zw-alt-card__eyebrow { font-size: 12px; color: var(--zw-muted); }

.zw-alt-card__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--zw-ink-warm);
}

.zw-alt-card__pick {
  font-size: 13px;
  line-height: 1.45;
  color: var(--zw-ink-warm-3);
  min-width: 0;
}

.zw-alt-card__foot {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.zw-alt-card__count { font-size: 13px; color: var(--zw-muted); }

/* Without a photo the pill has no frame to sit on, so it leads the body instead. */
.zw-alt-card__saves--inline {
  position: static;
  justify-self: start;
  margin-bottom: 2px;
  box-shadow: none;
  padding: 3px 8px 3px 0;
  background: transparent;
}

/* An open card is already showing the comparison; still inviting the reader to
   "Compare" is an affordance pointing at what they are looking at. */
.zw-alt-card[open] .zw-alt-card__compare { display: none; }

.zw-alt-card__compare {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--zw-blue-700);
  white-space: nowrap;
}

/* --- The comparison --------------------------------------------------------- */

.zw-alt-detail {
  padding: 20px 18px 22px;
  border-top: 1px solid var(--zw-border-warm);
  background: var(--zw-paper-3);
}

.zw-alt-detail__why {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--zw-ink-warm-2);
  max-width: 560px;
  text-wrap: pretty;
}

.zw-alt-detail__pending {
  margin: 0;
  font-size: 15px;
  color: var(--zw-muted);
}

.zw-alt-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.zw-alt-option {
  padding: 16px 18px;
  background: var(--zw-paper-3);
  border: 1px solid var(--zw-border-warm-2);
  border-radius: var(--zw-radius-lg);
}

/* Green measures — this marks the option that saves most, which is a measurement
   rather than an action, so the tint is correct here. */
.zw-alt-option--pick {
  background: var(--zw-green-50);
  border-color: var(--zw-green-100); /* the kit's green-line */
}

.zw-alt-option__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  min-height: 22px;
}

.zw-alt-option__saves {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--zw-green-800);
  white-space: nowrap;
}

.zw-alt-option__name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--zw-ink-warm);
}

.zw-alt-option__note {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--zw-ink-warm-3);
  text-wrap: pretty;
}

.zw-alt-option__meta {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--zw-border-warm-inner);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--zw-muted);
}

.zw-alt-option__where {
  margin-left: auto;
  text-align: right;
}

.zw-alt-detail__caveat {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--zw-border-warm);
  font-size: 14px;
  line-height: 1.6;
  color: var(--zw-muted);
}

/* --- Empty ------------------------------------------------------------------ */

.zw-alt-empty {
  padding: 34px 20px;
  text-align: center;
  background: var(--zw-surface);
  border: 1px solid var(--zw-border-warm-2);
  border-radius: var(--zw-radius-xl);
}

.zw-alt-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--zw-ink-warm);
}

.zw-alt-empty__dek {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--zw-muted);
}

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 1000px) {
  .zw-alt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .zw-alt-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* Unpinned: a sticky sidebar above the results is just a block that will not scroll. */
  .zw-alt-filters {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

@media (max-width: 560px) {
  .zw-alt-grid { grid-template-columns: minmax(0, 1fr); }
}