/* Swatch fan deck (inc/swatch-deck.php, assets/js/swatch.js): the sample fan we bring to a design visit, with the
 * real swatches from the 2026 brochure. Blades hang from a pin at the top left, like the approved Montana fan.
 * Works on the ink band (range pages, Montana) and on light sections (add .swd--light). */
.swd { --W: 50px; --L: 420px; --px: 34px; --py: 34px; color: var(--silver-hi); }

/* finish type tabs (Montana) */
.swd__tabs { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-bottom: 18px; border: 1px solid rgba(183, 205, 225, .26); border-radius: var(--r); background: rgba(10, 26, 41, .4); }
.swd__tab { position: relative; min-height: 54px; padding: 8px 20px; border: 0; background: none; color: var(--muted-d); display: flex; align-items: center; gap: 12px; transition: color .3s, background .3s; }
.swd__tab + .swd__tab { border-left: 1px solid rgba(183, 205, 225, .2); }
.swd__tab span { font: 400 clamp(1.15rem, 1.4vw, 1.4rem)/1.1 var(--f-d); }
.swd__tab i { font-style: normal; font-size: .875rem; font-weight: 600; color: var(--oak-hi); font-variant-numeric: tabular-nums; }
.swd__tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--oak-hi); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.swd__tab[aria-selected="true"] { color: #fff; background: rgba(183, 205, 225, .07); }
.swd__tab[aria-selected="true"]::after { transform: scaleX(1); }
.swd__tab:hover { color: #fff; }
.swd__tab:first-child { border-radius: var(--r) 0 0 var(--r); } .swd__tab:last-child { border-radius: 0 var(--r) var(--r) 0; }

.swd__body { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(24px, 3.4vw, 56px); align-items: stretch; }
.swd__stage { position: relative; height: clamp(400px, calc(100vh - 330px), 540px); border: 1px solid rgba(183, 205, 225, .24); border-radius: var(--r); background: rgba(8, 22, 36, .38); overflow: clip; }
.swd__fan { position: absolute; inset: 0; }
.js .swd__fan.is-off { visibility: hidden; }
.swd__blades { position: absolute; inset: 0; outline: none; touch-action: pan-y; cursor: grab; }
.swd__blades:focus-visible { outline: 2px solid var(--oak-hi); outline-offset: -6px; border-radius: var(--r); }
.swd__blades.is-drag { cursor: grabbing; }
.swd__b { position: absolute; left: var(--px); top: var(--py); width: var(--L); height: var(--W); margin-top: calc(var(--W) / -2); z-index: calc(var(--i) + 1);
  transform-origin: calc(var(--W) / 2) 50%; transform: rotate(var(--a)); border-radius: 4px; overflow: hidden; background-size: cover; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 10px 20px rgba(4, 12, 20, .38), 0 0 0 1px rgba(4, 12, 20, .25); will-change: transform; }
/* the brochure swatch runs along the blade, so wood grain follows its length */
.swd__b::before { content: ''; position: absolute; left: 50%; top: 50%; width: var(--W); height: var(--L); transform: translate(-50%, -50%) rotate(90deg); background: inherit; background-size: cover; }
/* a sheen across the blade, and the punched hole at the pin end */
.swd__b::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .16)); pointer-events: none; }
.swd__lab { position: absolute; right: 12px; top: 5px; z-index: 1; display: flex; align-items: baseline; gap: 7px; white-space: nowrap; font: 500 .875rem/1.25 var(--f-b); color: #1A1F23; }
.swd__lab b { font-weight: 700; font-variant-numeric: tabular-nums; }
.swd__b.is-dark .swd__lab { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.swd__b.is-pick { box-shadow: 0 0 0 2px var(--oak-hi), 0 18px 34px rgba(4, 12, 20, .55); }
.swd__b.is-pick .swd__lab { font-weight: 600; }
.swd__b--custom { cursor: default; background: var(--graphite-2); border: 1.5px dashed rgba(201, 150, 104, .7);
  background-image: repeating-linear-gradient(135deg, rgba(201, 150, 104, .14) 0 2px, transparent 2px 9px); }
.swd__b--custom::before { display: none; }
.swd__b--custom .swd__lab { color: var(--oak-hi); }
.swd__pin { position: absolute; left: calc(var(--px) + var(--W) / 2); top: var(--py); width: 18px; height: 18px; margin: -9px 0 0 -9px; z-index: 200; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff, var(--silver) 55%, #6E7A82); box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 2px var(--graphite); }
.swd__hint { position: absolute; right: 16px; bottom: 14px; margin: 0; font-size: .875rem; color: var(--muted-d); }
.swd__hint-t { display: none; }
@media (pointer: coarse) { .swd__hint-f { display: none; } .swd__hint-t { display: inline; } }
.swd__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(183, 205, 225, .14); }
.swd__bar i { display: block; height: 100%; background: var(--oak-hi); transform: scaleX(0); transform-origin: left; }
.no-js .swd__hint, .rm .swd__hint, .no-js .swd__bar, .rm .swd__bar { display: none; }
/* without JS every fan shows, one under another, already spread */
.no-js .swd__tabs { display: none; }
.no-js .swd__body { align-items: start; }
.no-js .swd__stage { height: auto; }
.no-js .swd__fan { position: relative; height: clamp(400px, calc(100vh - 330px), 540px); }
.no-js .swd__fan + .swd__fan { border-top: 1px solid rgba(183, 205, 225, .24); }

/* the picked colour, large, on a pair of drawn panels */
.swd__pick { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; border: 1px solid rgba(183, 205, 225, .28); border-radius: var(--r); background: rgba(8, 22, 36, .5); overflow: hidden; }
.swd__sheet { position: relative; min-height: 0; padding: 18px 18px 10px; display: grid; place-items: center;
  background-image: linear-gradient(rgba(183, 205, 225, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(183, 205, 225, .08) 1px, transparent 1px); background-size: 20px 20px; }
.swd__panel { height: 100%; max-height: clamp(300px, calc(100vh - 470px), 420px); width: auto; max-width: 100%; overflow: visible; filter: drop-shadow(0 22px 30px rgba(4, 12, 20, .45)); }
.swd__sun path { fill: rgba(255, 238, 205, .2); }
.swd__edge { fill: none; stroke: rgba(10, 14, 17, .28); stroke-width: .8; }
.swd__rod { stroke: rgba(10, 14, 17, .22); stroke-width: 2.4; stroke-linecap: round; }
.swd__frame { fill: none; stroke: var(--silver-hi); stroke-width: 1.2; }
.swd__dim { fill: none; stroke: var(--oak-hi); stroke-width: 1.1; }
.swd__tb { display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; border-top: 1px solid rgba(183, 205, 225, .24); background: rgba(8, 22, 36, .6); }
.swd__tb > * { padding: 12px 16px; min-width: 0; }
.swd__tb > * + * { border-left: 1px solid rgba(183, 205, 225, .18); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.swd__chip { width: 74px; height: 74px; padding: 0; margin: 10px 0 10px 14px; border-radius: calc(var(--r) - 2px); background-size: cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 8px 20px rgba(0, 0, 0, .35); }
.swd__id b { display: block; font: 400 clamp(1.7rem, 2.2vw, 2.2rem)/1 var(--f-d); color: var(--oak-hi); font-variant-numeric: lining-nums tabular-nums; }
.swd__id span { display: block; margin-top: 4px; font: 400 1.15rem/1.2 var(--f-d); color: #fff; }
.swd__meta .k { margin-bottom: 4px; }
.swd__meta span:last-child { font-size: .95rem; line-height: 1.35; color: var(--silver-hi); }

@media (max-width: 1100px) {
  .swd__tb { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  .swd__meta:last-child { grid-column: 2 / -1; border-top: 1px solid rgba(183, 205, 225, .18); }
}
@media (max-width: 900px) {
  .swd { --W: 40px; --L: min(300px, 70vw); --px: 18px; --py: 24px; }
  .swd__body { grid-template-columns: minmax(0, 1fr); }
  .swd__stage { height: auto; aspect-ratio: 1 / 1.02; }
  .swd__panel { max-height: 300px; }
  .swd__tabs { display: grid; width: 100%; }
  .swd__tab { padding: 8px 10px; justify-content: center; flex-direction: column; gap: 2px; }
  .swd__hint { left: 16px; right: auto; }
}
@media (max-width: 560px) {
  .swd__tb { grid-template-columns: auto minmax(0, 1fr); }
  .swd__meta { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid rgba(183, 205, 225, .18); flex-direction: row !important; justify-content: space-between !important; align-items: baseline; gap: 12px; }
  .swd__meta:last-child { grid-column: 1 / -1; }
  .swd__chip { width: 60px; height: 60px; }
}