/* Murasan Color configurator — restyled after MC-Bauchemie's own corporate design
   guide: HKS 47 process blue, HKS 8 orange, Pantone Cool Gray 7C, and Univers
   Condensed as the house type system. The render stays the only saturated thing on
   screen — brand colour is UI chrome only, per the product brief — but the chrome
   itself now reads as MC's rather than as a generic SaaS panel: a condensed grotesk
   standing in for Univers Condensed (a licensed typeface, not embeddable here), a
   true neutral grey instead of the previous blue-tinted slate, and a crisper,
   less-rounded edge to match the brand's rectangular, engineering-drawing character.
   Orange appears in exactly one place, the render viewport's frame — in every piece
   of MC collateral the design guide shows, orange is used nowhere except as the
   rectangle that frames the MC mark itself, so that is the one on-brand place for it
   here too. Everywhere else stays blue-and-grey, which is how MC's own materials
   actually read. */

@font-face {
  /* Self-hosted so the app keeps making zero network requests at runtime — the
     brief for this tool. Variable font, one file, weight range 300–700 covers the
     Univers Condensed weights the guide specifies (Light/Regular/Bold Condensed). */
  font-family: "Brand Condensed";
  src: url("./fonts/roboto-condensed-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #009fe3;
  --brand-dark: #0083bd;
  --brand-tint: #e6f6fd;
  --accent-orange: #ee7100;
  --ink: #1c1c1b;
  --ink-soft: #4a4a49;
  --ink-muted: #6f6f6e;
  --line: #e2e2e0;
  --line-strong: #c7c7c5;
  --panel: #f5f5f4;
  --bg: #ffffff;
  --font-condensed: "Brand Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --radius: 6px;
  --radius-sm: 3px;
  --ease: cubic-bezier(0.2, 0.6, 0.25, 1);
  --t-fast: 180ms;
  --t: 260ms;
  --t-slow: 380ms;
  --shadow: 0 1px 2px rgba(22, 32, 42, 0.06), 0 8px 24px rgba(22, 32, 42, 0.06);
}

* { box-sizing: border-box; }

/* `hidden` must win over every component's own display rule */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.app {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 14px);
  min-height: 100%;
  padding: clamp(12px, 1.6vw, 20px) clamp(12px, 2vw, 24px);
  max-width: 1560px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------- top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; }

.brand__title {
  font-family: var(--font-condensed);
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-left: 11px;
  border-left: 4px solid var(--brand);
  line-height: 1.05;
}

.brand__subtitle {
  font-family: var(--font-condensed);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

.lang-switch {
  flex: none;
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.lang-switch__item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.lang-switch__item + .lang-switch__item { border-left: 1px solid var(--line); }
.lang-switch__item:hover { background: var(--panel); color: var(--ink); }
.lang-switch__item.is-active { background: var(--brand); color: #fff; }

/* ----------------------------------------------------------------- layout */
/* The stone never leaves the screen. Wide: an app shell — the photo holds the left
   of the window, the controls scroll in their own panel, the page itself never
   scrolls. Narrow: the page scrolls, and the photo pins to the top while the
   controls pass underneath it. */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 410px);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "products panel"
    "stage    panel";
  column-gap: clamp(12px, 1.6vw, 20px);
  row-gap: 10px;
  flex: 1;
  min-height: 0;
}

.stage { grid-area: stage; }
.products { grid-area: products; }
.panel { grid-area: panel; }

@media (min-width: 900px), (min-aspect-ratio: 4/3) and (min-width: 600px) {
  html, body { height: 100%; }
  body { overflow: hidden; }
  .app { height: 100vh; height: 100dvh; min-height: 0; }
  .stage { min-height: 0; }
  .panel {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media not all and (min-width: 900px) {
  @media not all and (min-aspect-ratio: 4/3) and (min-width: 600px) {
    /* whatever is scrolled or tabbed into view lands below the pinned photo,
       not underneath it */
    html { scroll-padding-top: calc(clamp(210px, 44svh, 480px) + 8px); }
    .app { gap: 0; padding-bottom: 24px; }
    .topbar { margin-bottom: 10px; }
    .workspace { display: flex; flex-direction: column; gap: 0; }
    .products { padding: 4px 0 12px; flex-wrap: wrap; row-gap: 8px; }
    .products .product-strip { flex: 1 1 100%; }
    .products .view-switch { margin-left: 0; }
    .products .product-strip {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      margin-right: calc(-1 * clamp(12px, 2vw, 24px));
      padding-right: clamp(12px, 2vw, 24px);
    }
    .products .product-strip::-webkit-scrollbar { display: none; }
    .stage {
      order: -1;
      position: sticky;
      /* clear of a phone's status bar where the page runs edge to edge */
      top: env(safe-area-inset-top, 0px);
      z-index: 5;
      height: clamp(210px, 44svh, 480px);
      /* a strip of page colour under the pinned photo, so controls scrolling up
         behind it do not show through the rounded corners */
      padding-block: 8px 10px;
      margin: -8px calc(-1 * clamp(12px, 2vw, 24px)) 0;
      padding-inline: clamp(12px, 2vw, 24px);
      background: var(--bg);
    }
    .panel { margin-top: 0; }
  }
}

/* ------------------------------------------------------------------ stage */
.stage { display: flex; flex-direction: column; min-width: 0; }

.stage__viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  /* the floor tone of the photograph, so the frame reads as one surface before
     the image arrives */
  background: #e4e5e6;
  /* The one deliberate use of the brand orange: everywhere in MC's own collateral
     orange appears only as the rectangle that frames the MC mark, never as a general
     UI colour, so this frame around the photo — the one thing on the page worth
     framing — is the on-brand place to use it. */
  box-shadow: var(--shadow);
}

.stage__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}

.stage__viewport.is-ready .stage__canvas { opacity: 1; }
.stage__viewport.has-failed .stage__canvas { opacity: 0; }

/* the frame sits above the photo */
.stage__viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--accent-orange);
  pointer-events: none;
}

.stage__status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--font-condensed);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  pointer-events: none;
}

.stage__status:empty { display: none; }

/* "simulated, not a photograph" — it looks like one now, so this matters more */
.stage__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  margin: 0;
  width: fit-content;
  /* never under the tools, however many a photo has: the stage measures them */
  max-width: calc(100% - 36px - var(--tools-w, 0px));
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.78);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  pointer-events: none;
}

/* the current selection, captioned on the photo — two captions while comparing */
.captions {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.caption {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  max-width: min(100%, 460px);
  padding: 8px 12px 8px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(22, 32, 42, 0.08), 0 6px 18px rgba(22, 32, 42, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

/* undo, on the caption of the look it takes back */
.caption__undo {
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 -4px 0 2px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
}
.caption__undo .icon { width: 16px; height: 16px; }
@media (hover: hover) {
  .caption__undo:hover { border-color: var(--brand); color: var(--ink); }
}

/* while comparing: A bottom left, B bottom right */
.caption--a { order: -1; }
.stage__viewport:not(.is-comparing) .captions { justify-content: flex-start; }
.stage__viewport.is-comparing .caption { max-width: calc(50% - 6px); }

.caption__chips {
  flex: none;
  display: flex;
  width: 36px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(22, 32, 42, 0.14);
}

.caption__chip {
  flex: 1 1 0;
  transition: background-color var(--t) var(--ease), flex-grow var(--t) var(--ease);
}

.caption__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.caption__title { display: flex; align-items: baseline; gap: 6px; min-width: 0; }

.caption__tag {
  flex: none;
  align-self: center;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.caption__name {
  font-family: var(--font-condensed);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caption__meta,
.caption__hex {
  font-family: var(--font-condensed);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.caption__hex { color: var(--ink-muted); letter-spacing: 0.02em; }

/* tools, top right of the photo */
.stage__tools {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tool-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font-condensed);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.tool-button .icon { width: 17px; height: 17px; flex: none; }
@media (hover: hover) {
  .tool-button:hover:not(:disabled) { border-color: var(--brand); color: var(--ink); }
}
.tool-button:disabled { opacity: 0.55; cursor: progress; }

.tool-button--overlay {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(22, 32, 42, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.tool-button.is-active,
.tool-button.is-active:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }

.stage__loading {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.85);
  font-family: var(--font-condensed);
  font-size: 11.5px;
  color: var(--ink-muted);
}

/* the comparison divider */
.split {
  --split: 50%;
  position: absolute;
  inset: 0;
  cursor: ew-resize;
  touch-action: none;
}

.split::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(22, 32, 42, 0.12), 0 0 12px rgba(22, 32, 42, 0.18);
}

.split__grip {
  position: absolute;
  top: 50%;
  left: var(--split);
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22, 32, 42, 0.3), 0 4px 14px rgba(22, 32, 42, 0.18);
}

.split__grip::before,
.split__grip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -5px;
  border: 5px solid transparent;
}
.split__grip::before { left: 6px; border-right: 6px solid var(--ink-soft); }
.split__grip::after { right: 6px; border-left: 6px solid var(--ink-soft); }

.split__label {
  position: absolute;
  top: 50px;
  padding: 2px 7px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  pointer-events: none;
}
.split__label--a { left: calc(var(--split) - 32px); }
.split__label--b { left: calc(var(--split) + 10px); }

/* transient messages */
.toast {
  position: absolute;
  left: 50%;
  top: 56px;
  transform: translate(-50%, -8px);
  max-width: min(92%, 520px);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* comparing, the top of the divider carries the side labels and the difference */
.stage__viewport.is-comparing .toast { top: 136px; }
.toast__action {
  appearance: none;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.toast__action:hover { background: rgba(255, 255, 255, 0.15); }
.caption.is-preview { outline: 2px dashed var(--brand); outline-offset: -2px; }

.toast__field {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 2px;
  font: inherit;
  color: var(--ink);
}

/* the tools answer to the photo's width, not the window's: icons only when the
   labels would crowd the simulation notice */
.stage__viewport { container-type: inline-size; }
@container (max-width: 860px) {
  .tool-button--overlay .tool-button__label { display: none; }
  .tool-button--overlay { padding: 7px; }
}

@media (max-width: 520px) {
  .captions { left: 8px; right: 8px; bottom: 8px; }
  .caption { padding: 6px 10px 6px 6px; gap: 8px; }
  .caption__chips { width: 28px; }
  .caption__name { font-size: 16px; }
  .caption__meta, .caption__hex { font-size: 11.5px; }
  .stage__viewport.is-comparing .caption__hex { display: none; }
  .stage__badge { top: 8px; left: 8px; font-size: 9.5px; max-width: calc(100% - 26px - var(--tools-w, 0px)); }
  .stage__tools { top: 6px; right: 6px; }
}

/* ------------------------------------------------------------------ panel */
.panel {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.panel__section {
  padding: 14px clamp(14px, 1.4vw, 20px);
  border-top: 1px solid var(--line);
}

.panel__section:first-child { border-top: 0; }

.panel__notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  background: var(--bg);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* the face-layer fact is the point of the photo, so it sits above the small print */
.panel__face-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 10px;
  border-left: 3px solid var(--brand);
}

.disclaimer {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* product bar: what the photo is of */
.products { display: flex; align-items: center; gap: 12px; min-width: 0; }
@media (max-width: 1180px) { .products > .field__label { display: none; } }

/* one line, always: the row scrolls sideways rather than wrapping and pushing the
   photo down */
.product-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  padding-right: 14px;
}
.product-strip::-webkit-scrollbar { display: none; }

.product-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 5px 10px 5px 7px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--ink-soft);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.product-chip .icon { width: 22px; height: 22px; flex: none; }

.product-chip__label {
  font-family: var(--font-condensed);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.product-chip__pending {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-muted);
  padding: 1px 4px;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.product-chip:hover:not(:disabled) { border-color: var(--brand); color: var(--ink); }

.product-chip.is-active {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.product-chip:disabled { opacity: 0.55; cursor: not-allowed; background: transparent; }

/* element or installed */
.view-switch {
  flex: none;
  display: inline-flex;
  margin-left: auto;
  padding: 3px;
  gap: 3px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.view-switch__item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  border-radius: 2px;
  padding: 4px 10px;
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.view-switch__item:hover:not(:disabled) { background: var(--brand-tint); }
.view-switch__item.is-active { background: var(--brand); color: #fff; }
.view-switch__item:disabled { opacity: 0.5; cursor: not-allowed; }

.view-switch__pending {
  font-size: 9.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------- controls */
.stack { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 9px; }

.field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.field__label {
  font-family: var(--font-condensed);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.field-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-muted); }
.field-note--limit { color: var(--ink-soft); }

.field-note--warn {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-soft);
}

/* segmented format control */
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.segmented__item {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 4px;
  padding: 7px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.segmented__code {
  font-family: var(--font-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.segmented__name {
  font-family: var(--font-condensed);
  font-size: 11px;
  color: inherit;
  opacity: 0.72;
}
.segmented__item:hover { background: var(--brand-tint); }
.segmented__item.is-active { background: var(--brand); color: #fff; }
.segmented__item.is-active .segmented__name { opacity: 0.9; }

/* family tabs */
.family-tabs { display: flex; flex-wrap: wrap; gap: 4px; }

.family-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.family-tab:hover { color: var(--ink); border-color: var(--line-strong); }
.family-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* swatches */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 8px;
}

.swatch {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  cursor: pointer;
}

.swatch__chip {
  display: block;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(22, 32, 42, 0.14);
  box-shadow: inset 0 -6px 10px -8px rgba(0, 0, 0, 0.5);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    background-color var(--t) var(--ease);
}

.swatch__code {
  font-family: var(--font-condensed);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ink-muted);
  transition: color var(--t-fast) var(--ease);
}

.swatch:hover .swatch__chip { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(22, 32, 42, 0.16); }

.swatch.is-active .swatch__chip {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand);
}

.swatch.is-active .swatch__code { color: var(--ink); font-weight: 650; }
.swatch.has-note .swatch__code::after { content: " *"; color: var(--brand); }

/* dosage */
.dosage__value {
  font-family: var(--font-condensed);
  font-size: 23px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.dosage__input {
  --fill: 50%;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

.dosage__input::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 3px;
  background: var(--ramp, var(--line-strong));
  box-shadow: inset 0 0 0 1px rgba(22, 32, 42, 0.12);
}

.dosage__input::-moz-range-track {
  height: 10px;
  border-radius: 3px;
  background: var(--ramp, var(--line-strong));
  box-shadow: inset 0 0 0 1px rgba(22, 32, 42, 0.12);
}

.dosage__input::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(22, 32, 42, 0.28);
  transition: transform var(--t-fast) var(--ease);
}

.dosage__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(22, 32, 42, 0.28);
}

.dosage__input:hover::-webkit-slider-thumb { transform: scale(1.08); }
.dosage__input:active::-webkit-slider-thumb { transform: scale(1.12); }

.dosage__scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  margin-top: -4px;
}

/* cement */
.cement-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.cement {
  appearance: none;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 6px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.cement__chip {
  width: 100%;
  height: 26px;
  border-radius: 4px;
  border: 1px solid rgba(22, 32, 42, 0.12);
}

.cement__label {
  font-family: var(--font-condensed);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-soft);
}
.cement:hover { border-color: var(--brand); }
.cement.is-active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cement.is-active .cement__label { color: var(--ink); font-weight: 620; }

/* ------------------------------------------------------------------- tabs */
.panel__tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px clamp(14px, 1.4vw, 20px) 0;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}

.tabs { display: flex; gap: 2px; }

.tabs__tab {
  appearance: none;
  flex: 1 1 auto;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: 7px 6px 8px;
  font-family: var(--font-condensed);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.tabs__tab:hover { color: var(--ink); }
.tabs__tab.is-active { color: var(--ink); border-bottom-color: var(--brand); }
.tabpanel .panel__section:first-child { border-top: 0; }

.panel__intro { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.field__label--minor { font-size: 11.5px; }

.tabs__count {
  display: inline-block;
  min-width: 17px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
}

/* ------------------------------------------------------------ saved looks */
.button-primary {
  appearance: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 9px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-condensed);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.button-primary .icon { width: 16px; height: 16px; }
.button-primary:hover { background: var(--brand-dark); }

.saved { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.saved__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.saved__photo { aspect-ratio: 3 / 2; border-radius: 2px; overflow: hidden; }
.saved__thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.saved__name { font-family: var(--font-condensed); font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved__meta { font-family: var(--font-condensed); font-size: 11.5px; color: var(--ink-muted); }
.saved__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.saved__actions .mix-slot__remove { margin-left: auto; }

/* ---------------------------------------------------------------- presets */
.preset-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

.preset {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 8px 5px 5px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.preset:hover { border-color: var(--brand); }
.preset:active { transform: translateY(1px); }

.preset__swatch {
  flex: none;
  width: 30px;
  height: 24px;
  border-radius: 2px;
  border: 1px solid rgba(22, 32, 42, 0.14);
}

.preset__name {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- blends */
.segmented--two { grid-template-columns: repeat(2, 1fr); }
.segmented--two .segmented__item { padding: 6px 4px; }
.segmented--two .segmented__code { font-size: 13.5px; }

.mix-blend { display: flex; flex-direction: column; gap: 9px; }
.mix-slots { display: flex; flex-direction: column; gap: 6px; }

.mix-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 38px 26px;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.mix-slot.is-active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

.mix-slot__pick {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.mix-slot__chip {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 2px;
  border: 1px solid rgba(22, 32, 42, 0.14);
  transition: background-color var(--t) var(--ease);
}

.mix-slot__text { display: flex; flex-direction: column; min-width: 0; }
.mix-slot__name { font-family: var(--font-condensed); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.mix-slot__detail { font-family: var(--font-condensed); font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mix-slot__share { --fill: 50%; width: 100%; margin: 0; accent-color: var(--brand); }

.mix-slot__value {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mix-slot__remove {
  appearance: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.mix-slot__remove .icon { width: 15px; height: 15px; }
.mix-slot__remove:hover { background: var(--panel); color: var(--ink); }

.mix-add {
  appearance: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-condensed);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}
.mix-add .icon { width: 15px; height: 15px; }
.mix-add:hover { border-color: var(--brand); color: var(--ink); }

/* small chip choices (match options, units) */
.chip-group { display: flex; flex-wrap: wrap; gap: 4px; }

.chip {
  appearance: none;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font-condensed);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}
.chip:hover { border-color: var(--brand); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------------------------------------------------------- colour match */
.match__inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.match__color {
  width: 44px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
}

.match__hex,
.number-input {
  width: 96px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font-condensed);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.match__hex { text-transform: uppercase; letter-spacing: 0.03em; }

.visually-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.match__photo-box { position: relative; max-width: 100%; align-self: flex-start; }
.match__photo {
  display: block;
  max-width: 100%;
  max-height: 260px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  cursor: crosshair;
}

.match__marker {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.match__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.match__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.match__result {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.match__pair { display: flex; height: 40px; border-radius: 2px; overflow: hidden; border: 1px solid rgba(22, 32, 42, 0.14); }
.match__pair > span { flex: 1; }
.match__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.match__name { font-family: var(--font-condensed); font-size: 13.5px; font-weight: 700; }
.match__detail { font-family: var(--font-condensed); font-size: 12px; color: var(--ink-muted); }
.match__score { font-family: var(--font-condensed); font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.match__score--imperceptible, .match__score--veryClose { color: #0a7d3f; }
.match__score--noticeable, .match__score--different { color: #a4561a; }

.match__apply {
  appearance: none;
  padding: 5px 10px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-condensed);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.match__apply:hover { background: var(--brand-dark); }

/* -------------------------------------------------------- pigment demand */
.demand__quantity { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.demand__quantity .number-input { width: 110px; }

.demand__result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.demand__total {
  margin: 0;
  font-family: var(--font-condensed);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.demand__figures {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  font-family: var(--font-condensed);
  font-size: 13px;
}
.demand__figures dt { color: var(--ink-muted); }
.demand__figures dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.demand__slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.demand__slots li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-family: var(--font-condensed);
  font-size: 12.5px;
}
.demand__chip { width: 16px; height: 16px; border-radius: 2px; border: 1px solid rgba(22, 32, 42, 0.14); }

.demand__through {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
}

.demand__assumptions { font-size: 12.5px; }
.demand__assumptions summary {
  cursor: pointer;
  font-family: var(--font-condensed);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.demand__fields { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 8px; }
.demand__field { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.demand__field label { color: var(--ink-soft); }
.demand__input { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-condensed); color: var(--ink-muted); }
.demand__input .number-input { width: 84px; }

.link-button {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--brand-dark);
  text-decoration: underline;
  cursor: pointer;
}

/* Short screens — a phone on its side, a low embed: every pixel of height goes to
   the photo and the controls. The product row stops wrapping (the disabled entries
   keep their tooltip), the subtitle and the caption's hex line step aside. */
@media (max-height: 520px) {
  .app { padding-block: 8px; gap: 8px; }
  .topbar { padding-bottom: 6px; }
  .brand__subtitle { display: none; }
  .brand__title { font-size: 18px; }
  .products .field__label { display: none; }
  .products .product-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .products .product-strip::-webkit-scrollbar { display: none; }
  .product-chip__pending { display: none; }
  .caption { left: 8px; bottom: 8px; padding: 5px 9px 5px 5px; gap: 8px; }
  .caption__chip { width: 24px; }
  .caption__name { font-size: 15px; }
  .caption__meta { font-size: 11px; }
  .caption__hex { display: none; }
  .stage__badge { top: 8px; left: 8px; font-size: 9px; padding: 3px 6px; }
  .panel__section { padding-block: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* the loupe: the pointer is the lens, so it hides; a finger drags it without
   scrolling the page, and the comparison moves by its grip alone meanwhile */
.stage__viewport.is-loupe .stage__canvas { cursor: none; touch-action: none; }
.stage__viewport.is-loupe .split { pointer-events: none; }
.stage__viewport.is-loupe .split__grip { pointer-events: auto; }

/* how far apart A and B are, on the divider under the side labels */
.split__diff {
  position: absolute;
  top: 82px;
  left: clamp(84px, var(--split), calc(100% - 84px));
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(28, 28, 27, 0.86);
  color: #fff;
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
.split__diff { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.split__contrast { font-weight: 400; font-size: 11.5px; opacity: 0.92; }

/* the dosage ladder: the element at every whole percent, and what each step adds */
.ladder-field { margin-top: 14px; }
.ladder {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 6px;
}
.ladder__step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .ladder__step:hover { border-color: var(--brand); }
}
.ladder__step.is-current { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.ladder__thumb {
  position: relative;
  display: block;
  aspect-ratio: 132 / 104;
  border-radius: 2px;
  overflow: hidden;
}
.ladder__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ladder__pct {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}
.ladder__step.is-current .ladder__pct { color: var(--ink); }
.ladder__gains {
  display: grid;
  grid-template-columns: 0.5fr repeat(var(--gaps, 4), minmax(0, 1fr)) 0.5fr;
  gap: 6px;
  margin-top: 5px;
}
.ladder__gain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-condensed);
  font-size: 11px;
  color: var(--ink-soft);
}
.ladder__gain i {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand) var(--w), var(--line) var(--w));
}
.ladder__gain.is-faint { color: var(--ink-muted); }
.ladder__gain.is-faint i { background: linear-gradient(90deg, var(--ink-muted) var(--w), var(--line) var(--w)); }
.ladder__note { margin-top: 6px; }

/* pigment cost, once the plant's own price per kg is in */
.demand__prices { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.demand__cost {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.demand__cost-total {
  margin: 0;
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.demand__cost-line {
  margin: 0;
  font-family: var(--font-condensed);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.demand__cost .field-note { margin: 4px 0 0; }

.link-button--icon { display: inline-flex; align-items: center; gap: 5px; }
.link-button--icon .icon { width: 15px; height: 15px; }

/* the colour card: every pigment of a format as a photograph of the element */
.card {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(22, 32, 42, 0.35);
}
.card[open] { display: flex; flex-direction: column; }
.card::backdrop { background: rgba(22, 32, 42, 0.55); }
.card__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 16px 68px 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.card__heading { flex: 1 1 260px; min-width: 0; }
.card__title {
  margin: 0;
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.card__title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 0.9em;
  margin-right: 10px;
  vertical-align: -0.08em;
  background: var(--brand);
}
.card__meta { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.card__close {
  position: absolute;
  top: 14px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
}
.card__close .icon { width: 18px; height: 18px; }
@media (hover: hover) {
  .card__close:hover { border-color: var(--brand); color: var(--ink); }
}
.card__body { overflow: auto; padding: 8px 20px 4px; }
.card__family { padding: 10px 0 6px; }
.card__family + .card__family { border-top: 1px solid var(--line); }
.card__family-name {
  margin: 0 0 8px;
  font-family: var(--font-condensed);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.card__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.card__tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 4px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .card__tile:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(22, 32, 42, 0.12); }
}
.card__tile.is-current { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 264 / 198;
  border-radius: 2px;
  overflow: hidden;
}
.card__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.card__label { display: flex; flex-direction: column; padding: 0 4px; font-family: var(--font-condensed); line-height: 1.25; }
.card__label strong { font-size: 13.5px; color: var(--ink); }
.card__label span { font-size: 11.5px; color: var(--ink-muted); }
.card__note { margin: 0; padding: 10px 20px 16px; }
@media (max-width: 520px) {
  .card { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .card__head { padding: 12px 12px 10px; }
  .card__heading { padding-right: 44px; }
  .card__close { top: 10px; right: 10px; }
  .card__body { padding: 4px 12px; }
  .card__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card__note { padding: 8px 12px 12px; }
}

/* the saved image, shown before it goes anywhere */
.saveview { width: min(980px, calc(100vw - 32px)); }
.saveview__body { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 18px; overflow: auto; }
.saveview__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 62dvh;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.saveview__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.saveview__actions .button-primary { display: inline-flex; align-items: center; gap: 6px; }
.saveview__actions .icon { width: 16px; height: 16px; }
.saveview__copy { padding-block: 7px; }
.saveview__status { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.saveview .field-note { margin: 0; }
@media (max-width: 520px) {
  .saveview__body { padding: 12px; }
}

.saved__board-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.saved__board { display: inline-flex; align-items: center; gap: 6px; padding-block: 7px; }
.saved__board .icon { width: 15px; height: 15px; }
.saved__board-row .field-note { margin: 0; }

/* colour ideas: the card's grid, photos in the stage's own proportions */
.ideas .card__thumb { aspect-ratio: 3 / 2; }
.ideas .card__tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 520px) {
  .ideas .card__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ideas__chips { display: flex; gap: 3px; margin-top: 3px; }
.ideas__chips i { width: 14px; height: 14px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(22, 32, 42, 0.14); }

/* the visitor's own photo, over the render: letterboxed on the stage's floor tone */
.ownphoto {
  position: absolute;
  inset: 0;
  background: #e4e5e6;
}
.ownphoto__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.ownphoto__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 24px 96px;
  text-align: center;
  background: #e4e5e6;
}
.ownphoto__intro { max-width: 36ch; margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); text-wrap: balance; }
.ownphoto__small { max-width: 42ch; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-muted); }
.ownphoto__empty .button-primary { align-self: center; gap: 8px; }
.ownphoto__empty .icon { width: 18px; height: 18px; }
.ownphoto__hint {
  position: absolute;
  left: 50%;
  top: 52px;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(88%, 560px);
  margin: 0;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: rgba(28, 28, 27, 0.82);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
.ownphoto__controls {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ownphoto__control {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(22, 32, 42, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-soft);
  cursor: pointer;
}
.ownphoto__control .icon { width: 18px; height: 18px; }
.ownphoto__control:disabled { opacity: 0.4; cursor: default; }
.ownphoto__hint { transition: opacity var(--t-slow) var(--ease); }
.ownphoto__hint.is-faded { opacity: 0; }
/* a small stage: the controls as a row under the notice */
@container (max-width: 520px) {
  .ownphoto__controls { top: 52px; right: auto; left: 8px; transform: none; flex-direction: row; gap: 4px; }
  .ownphoto__control { width: 32px; height: 32px; }
  .ownphoto__control .icon { width: 16px; height: 16px; }
  .ownphoto__hint { top: 92px; font-size: 11.5px; }
}
@media (hover: hover) {
  .ownphoto__control:hover:not(:disabled) { border-color: var(--brand); color: var(--ink); }
}
/* on the visitor's photo the render's own tools do not apply */
.stage__viewport.is-ownphoto [data-tool="loupe"],
.stage__viewport.is-ownphoto [data-tool="wet"],
.stage__viewport.is-ownphoto [data-tool="compare"],
.stage__viewport.is-ownphoto [data-tool="swap"] { display: none; }
.view-switch__item--own { display: inline-flex; align-items: center; gap: 5px; }
.view-switch__item--own .icon { width: 15px; height: 15px; }

/* presenting the saved looks: the whole window, the photo as large as it goes */
.presenter {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--ink);
}
.presenter[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.presenter::backdrop { background: rgba(22, 32, 42, 0.6); }
.presenter__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
}
.presenter__brand { font-family: var(--font-condensed); font-size: 18px; font-weight: 700; letter-spacing: 0.02em; }
.presenter__brand::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 0.9em;
  margin-right: 10px;
  vertical-align: -0.08em;
  background: var(--brand);
}
.presenter__count { font-family: var(--font-condensed); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.presenter__actions { display: flex; gap: 6px; margin-left: auto; }
.presenter__button, .presenter__nav {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
}
.presenter__button { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.presenter__button .icon { width: 18px; height: 18px; }
.presenter__nav { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); }
.presenter__nav .icon { width: 22px; height: 22px; }
@media (hover: hover) {
  .presenter__button:hover, .presenter__nav:hover { border-color: var(--brand); color: var(--ink); }
}
.presenter__main {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  background: #e4e5e6;
}
.presenter__stage { position: relative; width: 100%; height: 100%; min-height: 0; transition: opacity var(--t) var(--ease); }
.presenter__stage.is-loading { opacity: 0.55; }
.presenter__image { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.presenter__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}
.presenter__letter {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-condensed);
  font-size: 24px;
  font-weight: 700;
}
.presenter__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 320px; }
.presenter__title { font-family: var(--font-condensed); font-size: 18px; font-weight: 700; }
.presenter__lines { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-family: var(--font-condensed); font-size: 14px; }
.presenter__lines li { display: flex; align-items: center; gap: 6px; }
.presenter__lines i { width: 14px; height: 14px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(22, 32, 42, 0.14); }
.presenter__cement { font-size: 12.5px; color: var(--ink-muted); }
.presenter__notice {
  flex: 0 1 auto;
  margin-left: auto;
  max-width: 34ch;
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: right;
}
@media (max-width: 640px) {
  .presenter__main { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .presenter__nav { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); }
  .presenter__nav--prev { left: 14px; }
  .presenter__nav--next { right: 14px; }
  .presenter__notice { margin-left: 0; text-align: left; }
}
.saved__board-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
button.saved__photo { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; font: inherit; }

/* pigment per mixer batch */
.demand__batch { display: flex; flex-direction: column; gap: 6px; }
.demand__batch-line { margin: 0; }