/* =========================================================================
   Swatches

   The row of buttons that switches a section between variants of the same
   pictures — the cladding on the exteriors, the palette on the interiors.
   Driven by src/js/ui/variants.js.

   They borrow the call to action's language: the same sheen sweeping
   across on hover, the same lift, the same corner. The one in use does not
   lift, so it never stands proud of its neighbours after being pressed.

   Each carries a --swatch-colour of its own, and the glass is mixed from
   it: a tinted fill, a lit top edge and a soft halo, so choosing a finish
   is answered in the colour of that finish. Anything without a colour of
   its own falls back to the page's gold.
   ========================================================================= */

/* The head of a section that carries them: label left, swatches right. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--head-gap);
}

.swatches {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The prompt that sits with them, set like the enquiry line under each
   row — "Settled on a palette? Register your interest." — so the two
   asks on the page speak in the same voice. It lives inside the group
   and names it, which is why the group no longer carries an aria-label
   of its own: two names for one thing. */
.swatches__label {
  margin-inline-end: var(--space-3);
  font-size: var(--fs-small);
  /* Set in caps and tracked out. The tracking is doing two jobs: caps set
     solid close up on each other, and the extra width is what closes the
     gap the prompt used to leave between itself and the first button. */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  white-space: nowrap;
}

.swatch {
  --swatch-colour: var(--c-gold);

  position: relative;
  overflow: hidden;      /* holds the sheen inside the button */
  /* The right padding is short by one tracking step: the letter-spacing
     leaves a space after the final letter, and without this the lettering
     sits left of centre. Taking it off the padding rather than nudging the
     text keeps the button from simply growing to absorb the nudge. */
  padding: 0.4rem calc(0.8rem - var(--track-mono)) 0.4rem 0.8rem;
  line-height: 1;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  white-space: nowrap;     /* a toggle label reads as one thing, not two */
  color: var(--c-ink-3);
  /* The page's glass (tokens.css, liquid glass). The first layer draws
     the line along the cut corner, which the border cannot reach. */
  --notch-edge: rgb(255 255 255 / 0.09);
  background:
    var(--notch-line),
    var(--glass-frost);
  /* One corner taken off, so these read as swatches rather than buttons.
     Three corners keep their radius: the clip only removes what the rounding
     had already left unpainted. */
  clip-path: var(--notch-clip);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow:
    inset 0 1px 1.5px rgb(255 255 255 / 0.14),
    inset 0 0 10px rgb(255 255 255 / 0.03);
  border: 1px solid rgb(255 255 255 / 0.09);
  /* a little softer than the call to action's 2px, but square enough to
     hold its own against the cut corner */
  border-radius: var(--notch-corners);
  /* a true hairline where the screen can draw one: 0.5px is a single
     device pixel at 2x, where 1px reads as a heavy rule at this size */
  cursor: pointer;
  transition:
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease,
    box-shadow 0.45s,
    transform 0.45s;
}

/* (No light sweeping across: the glass is lit by its bevel, not a sheen
   passing over it.) */

/* Hover only where there is a real pointer, so taps do not stick.

   The one in use never lifts, not even under the pointer. Otherwise it
   stays raised after being clicked — the pointer is still on it — and
   reads as permanently standing proud of the other two. It still catches
   the sheen, which says the button is live without moving it. */
@media (hover: hover) {
  .swatch:not(.is-selected):not(.is-pending):hover {
    --notch-edge: rgb(255 255 255 / 0.16);

    color: color-mix(in oklab, var(--swatch-colour) 35%, var(--c-ink-2));
    border-color: rgb(255 255 255 / 0.16);
    background:
      var(--notch-line),
      radial-gradient(90% 90% at 50% 135%,
        color-mix(in oklab, var(--swatch-colour) 18%, transparent),
        transparent 78%),
      var(--glass-frost);
  }
}

/* The one in use: the milkier glass, its own colour a soft wash in its
   foot, its name lit in that colour. No coloured rim, no halo. */
.swatch.is-selected {
  --notch-edge: rgb(255 255 255 / 0.2);

  color: color-mix(in oklab, var(--swatch-colour) 45%, #fff);
  border-color: rgb(255 255 255 / 0.2);
  background:
    var(--notch-line),
    radial-gradient(95% 95% at 50% 140%,
      color-mix(in oklab, var(--swatch-colour) 55%, transparent),
      transparent 80%),
    var(--glass-lit-frost);
  box-shadow:
    inset 0 1px 1.5px rgb(255 255 255 / 0.32),
    inset 0 0 10px rgb(255 255 255 / 0.06);
}

/* ---- The colours themselves ---- */
.swatch[data-variant="burgundy"] { --swatch-colour: var(--c-burgundy); }
.swatch[data-variant="sage"]     { --swatch-colour: var(--c-sage); }
.swatch[data-variant="tide"]     { --swatch-colour: var(--c-tide); }
.swatch[data-variant="vine"]     { --swatch-colour: var(--c-vine); }
.swatch[data-joinery="oak"],
.swatch[data-variant="oak"]      { --swatch-colour: var(--c-oak); }
.swatch[data-joinery="walnut"],
.swatch[data-variant="walnut"]   { --swatch-colour: var(--c-walnut); }
.swatch[data-variant="obsidian"] { --swatch-colour: var(--c-obsidian); }
.swatch[data-variant="ivory"]    { --swatch-colour: var(--c-ivory); }
.swatch[data-variant="forge"]    { --swatch-colour: var(--c-forge); }
.swatch[data-variant="char"]     { --swatch-colour: var(--c-char); }
.swatch[data-variant="amber"]    { --swatch-colour: var(--c-amber); }

/* A choice that is not a colour — the model, on the floor plan, or the
   register's furnishings — is lit in the page's own silver-white rather
   than the gold, which would read as a finish. */
.swatch[data-model-choice],
.swatch[data-interest] { --swatch-colour: #dfe7ed; }

.swatch:focus-visible {
  outline: 1px solid var(--c-gold);
  outline-offset: 2px;
}

@media (min-resolution: 2dppx) {
  .swatch {
    border-width: 0.5px;
  }
}

/* A variant whose pictures do not exist yet. variants.js marks these on
   its own by looking for the images, so the button comes to life the
   moment they are added — there is no flag to remember to remove. */
.swatch.is-pending {
  opacity: 0.4;
  cursor: default;
}

/* Phones: the finishes sit to the right of their own line.

   The head wraps at this width, and a wrapped line lays its one item out
   from the start, so space-between has nothing left to push against. An
   auto margin takes up the slack instead. Scoped to the two picture
   sections: the plan's head carries the model toggle and reads better
   under the heading it belongs to. */
@media (max-width: 47.99rem) {
  /* The prompt stays on the line with its buttons at this width, which
     three claddings only just allow: they and a tracked "CLADDING:" come
     to 343 of a 335px column at full size. The row gives back the
     difference — a tighter gap between the buttons and a little off their
     sides — rather than the prompt dropping to a line of its own. */
  .swatches {
    gap: 5px;
    /* Cladding is the binding case and it is measured with the fonts
       loaded: 74.5 for the prompt, three gaps, and 246.9 of buttons in a
       335 column. It was trimmed to clear by a couple of pixels once and
       that was not enough — the first measurement had been taken before
       the webfonts settled, and the real metrics wrapped it. The margin
       here is about ten pixels, which should also survive Neue Montreal
       arriving. If it ever does not fit, the last button drops to a
       second line rather than running off the edge. */
    flex-wrap: wrap;
  }

  .swatch {
    padding: 0.4rem calc(0.45rem - var(--track-mono)) 0.4rem 0.45rem;
  }

  .swatches__label {
    margin-inline-end: var(--space-2);
  }

  /* The prompt sits against the page's left edge, in line with the
     section's own heading, and the buttons stay against the right. The
     group takes the whole line and an auto margin after the prompt holds
     the two apart — the alternative, space-between, would spread the
     buttons out as well. */
  .exteriors .section-head .swatches,
  .plan .section-head .swatches {
    width: 100%;
  }

  .exteriors .section-head .swatches__label,
  .plan .section-head .swatches__label {
    margin-inline-end: auto;
  }

  /* Five claddings will not share a line with their prompt at this
     width. The prompt takes a line of its own and the buttons share the
     one below, each growing from its own width so the row runs edge to
     edge without a lone button wrapping onto a third. */
  .exteriors .section-head .swatches__label {
    flex-basis: 100%;
    margin-bottom: var(--space-2);
  }

  .exteriors .section-head .swatch {
    flex: 1 1 auto;
    text-align: center;
    /* a little closer set than elsewhere, which is what lets five fit */
    letter-spacing: 0.2em;
    padding-inline: 0.35rem calc(0.35rem - 0.2em);
  }
}