/* ==========================================================================
   finish.css — the colourway switcher
   --------------------------------------------------------------------------
   Loaded by app/viewer.html and app/room.html. Depends only on the tokens in
   keca-tokens.css, never on keca-base.css or on either page's own stylesheet,
   because room.html does not link keca-base.css and the switcher has to look
   the same on both pages. Every rule below therefore carries its own values
   rather than inheriting page furniture.

   HOUSE STYLE, HONOURED
     - square corners everywhere (--radius is 0px and is used, not assumed)
     - no resting shadow
     - monochrome chrome; the FURNITURE supplies the colour, and on this
       component the swatches are the furniture
     - Montserrat 500/600 uppercase for headings, Nunito Sans for body

   SELECTION IS NEVER SIGNALLED BY COLOUR ALONE (WCAG 1.4.1). It cannot be:
   these chips ARE colours, so a colour cue would be invisible against them.
   A selected chip carries a solid outline AND a drawn tick; a focused chip
   carries a haloed ring further out. Weight and shape, exactly as the rest of
   this app does it.

   TOUCH TARGETS are 44 x 44 CSS px minimum (WCAG 2.5.5 AAA / iOS HIG). The
   grid gap is 10px so that neither the selection outline nor the focus halo
   can overlap a neighbouring chip and make two look selected.
   ========================================================================== */

.finish {
  --finish-chip: 44px;
  margin: 0;
}

/* Matches .rule-label from keca-base.css so the two pages agree, and is
   self-contained so room.html gets it without linking that file. */
.finish__heading {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--head-font, "Montserrat", Helvetica, Arial, sans-serif);
  font-weight: 500;
  font-size: var(--keca-fs-micro, 0.6875rem);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--paper-muted, #6a6a6a);
  margin: 0 0 .9rem;
}

.finish__heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line, #d6d4d2);
}

/* --------------------------------------------------------------------------
   THE NAME
   Designers specify by name. It is the headline of this component and the
   largest thing in it; the hex is a supporting detail underneath.
   -------------------------------------------------------------------------- */

.finish__name {
  margin: 0;
  font-family: var(--head-font, "Montserrat", Helvetica, Arial, sans-serif);
  font-weight: 600;
  font-size: clamp(1rem, 3.2vw, 1.2rem);
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper, #1c1b1b);
  /* Long published names such as "FAUX LEATHER - MILAS 942 - BEIGE" must wrap
     rather than push the panel wide on a phone. */
  overflow-wrap: anywhere;
}

.finish__meta {
  margin: .3rem 0 0;
  font-family: var(--body-font, "Nunito Sans", Helvetica, Arial, sans-serif);
  font-size: .74rem;
  line-height: 1.5;
  color: var(--paper-muted, #6a6a6a);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   THE CHIPS
   -------------------------------------------------------------------------- */

.finish__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: .95rem 0 0;
}

.finish__chip {
  /* A button, reset to a plain square. */
  appearance: none;
  -webkit-appearance: none;
  display: block;
  box-sizing: border-box;
  width: var(--finish-chip);
  height: var(--finish-chip);
  min-width: var(--finish-chip);
  min-height: var(--finish-chip);
  padding: 3px;
  margin: 0;
  border: 1px solid var(--line, #d6d4d2);
  border-radius: var(--radius, 0px);
  background: var(--surface, #ffffff);
  box-shadow: none;
  cursor: pointer;
  /* Stop a double-tap on a phone from zooming the page instead of picking a
     colour, and stop the tap-highlight square from covering the swatch. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: outline-color .12s linear, border-color .12s linear;
}

.finish__chip-swatch {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--finish-swatch, #ffffff);
  /* A hairline inside the swatch so IVORY WHITE (#f6f1e3) is still a visible
     object on a white panel rather than a hole in it. */
  box-shadow: inset 0 0 0 1px rgba(28, 27, 27, .22);
  position: relative;
}

/* Selected: outline + tick. Two independent, non-colour cues. */
.finish__chip[aria-checked="true"] {
  outline: 2px solid var(--paper, #1c1b1b);
  outline-offset: 2px;
  border-color: var(--paper, #1c1b1b);
}

.finish__chip[aria-checked="true"] .finish__chip-swatch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 6px;
  margin: -5px 0 0 -6px;
  border-left: 2px solid var(--finish-ink, #1c1b1b);
  border-bottom: 2px solid var(--finish-ink, #1c1b1b);
  transform: rotate(-45deg);
}

/* Focus sits FURTHER OUT than the selection outline and is haloed, so a
   focused-but-unselected chip and a selected-but-unfocused chip can never be
   confused, and the ring stays visible over a dark swatch. */
.finish__chip:focus-visible {
  outline: 2px solid var(--paper, #1c1b1b);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--surface, #ffffff), 0 0 0 4px var(--paper, #1c1b1b);
}

.finish__chip:hover {
  border-color: var(--paper-muted, #6a6a6a);
}

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

/* Windows High Contrast / forced-colours: the swatch colour is suppressed by
   the OS, so the tick and the outline are the only cues left. Make sure they
   survive. */
@media (forced-colors: active) {
  .finish__chip { border: 1px solid CanvasText; }
  .finish__chip[aria-checked="true"] { outline: 3px solid Highlight; }
  .finish__chip[aria-checked="true"] .finish__chip-swatch::after {
    border-left-color: CanvasText;
    border-bottom-color: CanvasText;
  }
}

.finish__hint {
  margin: .55rem 0 0;
  min-height: 1.2em;               /* reserve the line so nothing jumps */
  font-family: var(--body-font, "Nunito Sans", Helvetica, Arial, sans-serif);
  font-size: .72rem;
  line-height: 1.2;
  color: var(--paper-muted, #6a6a6a);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   THE PHOTOGRAPH
   Shown only when it can honestly be attributed to the selected colourway.
   finish-ui.js decides; this only has to lay it out.
   -------------------------------------------------------------------------- */

.finish__photo {
  margin: 1rem 0 0;
  padding: 0;
}

.finish__photo-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--card-line, #e2dfda);
  border-radius: var(--radius, 0px);
  background: var(--tint, #efece7);
}

.finish__photo-cap {
  margin: .5rem 0 0;
  font-family: var(--body-font, "Nunito Sans", Helvetica, Arial, sans-serif);
  font-size: .72rem;
  line-height: 1.55;
  color: var(--paper-muted, #6a6a6a);
}

/* When no photograph can be shown, the caption is the whole content and reads
   better set off the way the app sets off its other honest admissions. */
.finish__photo[data-state="none"] .finish__photo-cap {
  border-left: 3px solid var(--line, #d6d4d2);
  padding-left: .8rem;
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   THE STANDING NOTE and the no-data message
   -------------------------------------------------------------------------- */

.finish__note,
.finish__empty {
  margin: 1rem 0 0;
  padding-left: .8rem;
  border-left: 3px solid var(--line, #d6d4d2);
  font-family: var(--body-font, "Nunito Sans", Helvetica, Arial, sans-serif);
  font-size: .74rem;
  line-height: 1.55;
  color: var(--paper-muted, #6a6a6a);
}

.finish__empty { margin-top: 0; }

/* --------------------------------------------------------------------------
   FINISHES PUBLISHED BY NAME, WITH NO COLOUR VALUE
   --------------------------------------------------------------------------
   Deliberately typographic. Nothing here is a square, a dot, or a filled
   rule, because anything coloured beside these names would be read as the
   finish colour — and the colour is precisely what KECA does not publish for
   them. A list of words is the honest shape for a list of words.
   -------------------------------------------------------------------------- */

.finish__named {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--card-line, #e2dfda);
}

.finish__named[hidden] { display: none; }

/* The only thing in the section: no chips above it, so nothing to divide it
   from. The heading rule immediately above is separator enough. */
.finish__named--only {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.finish__named-h {
  margin: 0 0 .6rem;
  font-family: var(--head-font, Montserrat, Helvetica, Arial, sans-serif);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-muted, #6a6a6a);
}

.finish__named-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* Row gap carries the 44px tap floor's spirit without pretending these are
     controls: they are not tappable, because there is nothing to select. */
  gap: .35rem .5rem;
}

.finish__named-item {
  margin: 0;
  padding: .35rem .55rem;
  border: 1px solid var(--card-line, #e2dfda);
  background: var(--tint, #efece7);
  font-family: var(--body-font, "Nunito Sans", Helvetica, Arial, sans-serif);
  font-size: .78rem;
  line-height: 1.3;
  color: var(--paper, #1c1b1b);
}

.finish__named-note { margin-top: .9rem; }

@media (forced-colors: active) {
  .finish__named-item { border: 1px solid CanvasText; }
}

/* --------------------------------------------------------------------------
   ROOM PAGE EXTRAS
   The product picker and the live preview canvas that room.html puts above
   the switcher. Styled here so the whole finish feature lives in one file.
   -------------------------------------------------------------------------- */

.finish-pick {
  margin: 0 0 1rem;
}

.finish-pick__label {
  display: block;
  font-family: var(--head-font, "Montserrat", Helvetica, Arial, sans-serif);
  font-weight: 500;
  font-size: var(--keca-fs-micro, 0.6875rem);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--paper-muted, #6a6a6a);
  margin: 0 0 .35rem;
}

.finish-pick__select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* 44px tall: this is a phone control too. */
  min-height: 44px;
  padding: .55rem .7rem;
  font-family: var(--body-font, "Nunito Sans", Helvetica, Arial, sans-serif);
  /* MUST be >= 16px. iOS Safari zooms the whole page in when a <select> or
     text field smaller than 16px receives focus, and it does not zoom back
     out — the specifier is left on a horizontally-scrolled page mid-task.
     This control was .88rem (14.08px) and did exactly that. Its sibling
     #opt-grid-step on room.html was already 16px; this one had been missed.
     The height was right; only the type was wrong. */
  font-size: 1rem;
  color: var(--paper, #1c1b1b);
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #d6d4d2);
  border-radius: var(--radius, 0px);
}

.finish-pick__select:focus-visible {
  outline: 2px solid var(--paper, #1c1b1b);
  outline-offset: 2px;
}

.finish-preview {
  position: relative;
  margin: 0 0 1rem;
  border: 1px solid var(--card-line, #e2dfda);
  border-radius: var(--radius, 0px);
  background: var(--tint, #efece7);
  /* Wide enough to read a chair at a glance, short enough not to push the
     swatches below the fold on a phone. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.finish-preview__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.finish-preview__state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 1rem;
  text-align: center;
  background: var(--tint, #efece7);
  font-family: var(--body-font, "Nunito Sans", Helvetica, Arial, sans-serif);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--paper-muted, #6a6a6a);
}

.finish-preview__state[hidden] { display: none; }

.finish-preview__state strong {
  font-family: var(--head-font, "Montserrat", Helvetica, Arial, sans-serif);
  font-weight: 500;
  font-size: var(--keca-fs-micro, 0.6875rem);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--paper, #1c1b1b);
}

.finish-preview__hint {
  margin: -.6rem 0 1rem;
  font-family: var(--body-font, "Nunito Sans", Helvetica, Arial, sans-serif);
  font-size: .72rem;
  line-height: 1.55;
  color: var(--paper-muted, #6a6a6a);
}

/* --------------------------------------------------------------------------
   PHONE
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  /* Chips grow slightly rather than shrink: a 44px target is the floor, not
     the design intent, and thumbs are not styluses. */
  .finish { --finish-chip: 46px; }
  .finish__chips { gap: 12px; }
}

@media print {
  .finish__chips,
  .finish__hint { display: none; }
  .finish__photo-img { break-inside: avoid; }
}