/* Finishes: three looks for the same wall. The default (no attribute or "navy") is Navy & Brass in site.css.
   finish.js sets html[data-finish] from ?finish=, then from the visitor's last choice. */

/* Coastal White: bright porcelain, sea-glass field, sand trim */
html[data-finish="coastal"] {
  --grout: oklch(0.925 0.008 210);
  --grout-deep: oklch(0.82 0.012 210);
  --porcelain: oklch(0.995 0.002 200);
  --porcelain-matte: oklch(0.968 0.006 200);
  --inlet: oklch(0.895 0.034 198);
  --inlet-deep: oklch(0.8 0.044 200);
  --sea: oklch(0.955 0.022 85);
  --brass: oklch(0.74 0.075 70);
  --brass-deep: oklch(0.5 0.07 60);
  --ink: oklch(0.24 0.04 235);
  --ink-soft: oklch(0.42 0.035 230);
  --on-inlet: oklch(0.22 0.045 235);
  --on-inlet-soft: oklch(0.33 0.04 230);
  --line: oklch(0.24 0.04 235 / 0.14);
  --line-on-inlet: oklch(0.24 0.04 235 / 0.22);
}
html[data-finish="coastal"] .t-red, html[data-finish="coastal"] .t-red .ic { color: oklch(0.99 0 0); }
html[data-finish="coastal"] .t-inlet :focus-visible, html[data-finish="coastal"] .t-inlet:focus-visible { outline-color: var(--ink); }
html[data-finish="coastal"] .sheet-photo { background: var(--grout-deep); }

/* Black Slate: graphite and slate tiles, near-black joints, brass */
html[data-finish="slate"] {
  --grout: oklch(0.155 0.004 250);
  --grout-deep: oklch(0.21 0.006 250);
  --porcelain: oklch(0.245 0.007 250);
  --porcelain-matte: oklch(0.215 0.007 250);
  --inlet: oklch(0.13 0.004 250);
  --inlet-deep: oklch(0.1 0.003 250);
  --sea: oklch(0.31 0.016 70);
  --brass: oklch(0.79 0.1 84);
  --brass-deep: oklch(0.79 0.1 84);
  --lighthouse: oklch(0.55 0.175 27);
  --lighthouse-deep: oklch(0.48 0.165 27);
  --ink: oklch(0.95 0.006 85);
  --ink-soft: oklch(0.77 0.01 85);
  --on-inlet: oklch(0.96 0.006 85);
  --on-inlet-soft: oklch(0.78 0.012 85);
  --line: oklch(1 0 0 / 0.13);
  --line-on-inlet: oklch(0.79 0.1 84 / 0.35);
  --edge: 0 0 0 0.5px oklch(1 0 0 / 0.06);
  --edge-dark: 0 0 0 0.5px oklch(1 0 0 / 0.08);
}
html[data-finish="slate"] .chip, html[data-finish="slate"] .seg button { background: oklch(1 0 0 / 0.05); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.22); }
html[data-finish="slate"] .chip:has(input:checked), html[data-finish="slate"] .seg button[aria-pressed="true"] { background: var(--brass); color: oklch(0.16 0.01 80); }
html[data-finish="slate"] .f input[type="text"], html[data-finish="slate"] .f input[type="tel"], html[data-finish="slate"] .f input[type="email"], html[data-finish="slate"] .f select, html[data-finish="slate"] .f textarea { border-color: oklch(1 0 0 / 0.28); background-color: oklch(0.2 0.006 250); }
html[data-finish="slate"] .f select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23efece6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
html[data-finish="slate"] .f ::placeholder { color: oklch(0.68 0.01 85); }
html[data-finish="slate"] .drop { border-color: oklch(1 0 0 / 0.3); background-color: oklch(0.2 0.006 250); }
html[data-finish="slate"] .drop:hover { background: oklch(0.27 0.007 250); }
html[data-finish="slate"] .err { color: oklch(0.74 0.14 27); }
html[data-finish="slate"] .brand svg { background: oklch(0.96 0.006 85); border-radius: 2px; padding: 3px 4px; }
html[data-finish="slate"] .tag, html[data-finish="slate"] .piece-cap, html[data-finish="slate"] .fb > span { box-shadow: 0 10px 22px -10px oklch(0 0 0 / 0.7); }
html[data-finish="slate"] .t-herring { background-color: var(--porcelain-matte); }
html[data-finish="slate"] .sheet-photo { background: var(--inlet-deep); }

/* the finish picker: three sample chips in a small tray */
.finish { position: fixed; right: calc(var(--joint) * 3); bottom: calc(var(--joint) * 3); z-index: 55; display: flex; align-items: center; gap: var(--joint); padding: 5px; background: var(--porcelain); border-radius: var(--ease); box-shadow: var(--edge), 0 14px 30px -14px oklch(0.12 0.03 240 / 0.6); }
.finish-label { display: grid; gap: 2px; padding: 0 10px 0 7px; line-height: 1.1; }
.finish-label small { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.finish-label b { font-size: 0.86rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.finish-btn { width: 44px; height: 44px; padding: 4px; border-radius: var(--ease); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.2s, transform 0.3s var(--out); }
.finish-btn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--ink); }
.finish-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.sw { display: block; width: 100%; height: 100%; border-radius: 1px; }
.sw-navy { background: linear-gradient(135deg, oklch(0.285 0.055 232) 0 58%, oklch(0.77 0.095 84) 58% 68%, oklch(0.925 0.011 84) 68%); }
.sw-coastal { background: linear-gradient(135deg, oklch(0.895 0.034 198) 0 58%, oklch(0.74 0.075 70) 58% 68%, oklch(0.995 0.002 200) 68%); }
.sw-slate { background: linear-gradient(135deg, oklch(0.13 0.004 250) 0 58%, oklch(0.79 0.1 84) 58% 68%, oklch(0.31 0.016 70) 68%); }
.finish-cycle { display: none; }
@media (max-width: 640px) {
  .finish { display: none; }
  .bar:has(.finish-cycle) { grid-template-columns: 54px 1fr 1.6fr; }
  .finish-cycle { display: flex; padding: 8px; }
  .finish-cycle .sw { width: 100%; height: 100%; }
}
@media print { .finish { display: none; } }