/* 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);
}

/* The gutter has to widen with the viewport or the page sits inside the nav above it.
   Every 80rem surface is max-width + margin: 0 auto, so the border boxes line up
   however far the CONTENT is inset -- which is why /actions was 16px adrift for weeks
   with the width guards green. #1268 caught that one by measuring content edges; this
   page had the same gap and was not in the set being measured. */
@media (min-width: 640px) {
  .zw-alt-page { padding-inline: 1.5rem; } /* sm:px-6 */
}

@media (min-width: 1024px) {
  .zw-alt-page { padding-block: 44px 72px; padding-inline: 2rem; } /* lg:px-8 */
}

.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); }

/* The heading is ToolHeadingComponent. This page used to size its own -- a
   clamp(30px, 3.4vw, 40px) title and a 16px dek, close enough to the tools' 32px/15px
   to look deliberate and far enough to render 8px larger beside them on a wide screen.
   It was the last copy of these values outside zw_components.css. */

.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); }
}