/* colours.css — the colours step and the combination matrix.
   Split out of design.css purely to keep both files readable.

   Same palette rule: one ink, one background, nothing in between. Anything
   that shows a colour shows it on white paper, never on the shell, so a hex
   reads here the same as it will on the swatch sheet. */

/* ---- colour rows ---------------------------------------------------------- */

/* Two lines per colour, so nothing ever has to be squeezed. */
.colour {
  display: grid;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.colour-top {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  justify-items: center;
  gap: 14px;
}
.colour-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
}

.meta-group { display: inline-flex; align-items: center; gap: 8px; }
.meta-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.meta-value { font-size: 11.5px; color: var(--ink); }

/* Where the colour sits on the swatch sheet. Three states, one control. */
.usage { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.usage-option {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  color: var(--dim);
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  padding: 8px 12px;
}
.usage-option:last-child { border-right: none; }
.usage-option:hover { color: var(--ink); }
.usage-option[aria-pressed='true'] { color: var(--bg); background: var(--ink); }

/* The element selector is needed, not decoration. The base rule is
   input[type='text'], which outranks a plain class, so a bare .pantone-input
   width is silently ignored. */
input.pantone-input {
  font-family: var(--mono);
  font-size: 11.5px;
  width: 150px;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
}
input.pantone-input:focus { outline: none; border-color: var(--line-strong); }
input.pantone-input::placeholder { color: var(--dim); }
.colour:last-of-type { border-bottom: none; }

/* A colour sample mounted on paper, like a chip in a swatch book.

   Two failures this has to survive at once, and a thin ring survives neither.
   A black sample on the black shell disappears, leaving what looks like an
   empty outline. A white sample on a white mount disappears into the mount.
   So the paper is wide enough to read as a tile rather than a border, and the
   hairline between sample and paper is dark enough to hold a white sample.

   Both rings are box-shadows, which take no space, so the row keeps its grid. */
.swatch {
  width: 36px;
  height: 36px;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px var(--paper-line),
    0 0 0 7px var(--paper);
}

/* The hex is the main control, so it gets the weight. CMYK sits below it,
   smaller, because print is the second question not the first.
   The element selector is load bearing, not decoration: the base rule is
   input[type='text'], which outranks a plain class, so a bare .hex-input width
   is silently ignored and the field sizes itself to the grid instead. */
input.hex-input {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  width: 170px;
  padding: 11px 10px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  text-transform: uppercase;
}
input.hex-input:focus { outline: none; border-color: var(--line-strong); }
input.hex-input.bad { border-color: var(--bad); }
input.hex-input:disabled { opacity: 0.35; }

.inks { display: flex; gap: 4px; align-items: center; }
.ink-heading {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin-right: 4px;
}
.overink { color: var(--bad); font-size: 10px; margin-left: 4px; }

.colour-name {
  border: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  width: 100%;
  padding: 5px 0;
  text-align: center;
  border-bottom: 1px solid transparent;
}
.colour-name:focus { outline: none; border-bottom-color: var(--line-strong); }
.colour-name::placeholder { color: var(--dim); }

/* ---- chips that show what they mean ---------------------------------------- */

.chip-art { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; }
.chip-tile {
  width: 46px;
  height: 32px;
  border-radius: 2px;
  background: var(--paper);
  display: grid;
  place-items: center;
  padding: 4px;
  overflow: hidden;
  flex: 0 0 auto;
}
.chip-tile svg { max-width: 100%; max-height: 100%; height: auto; }

.chip-colour { display: inline-flex; align-items: center; gap: 14px; }
/* Same mounting as .swatch, scaled down. */
.chip-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--paper-line),
    0 0 0 5px var(--paper);
  flex: 0 0 auto;
}

.pickers { gap: 12px; }

/* ---- combination matrix --------------------------------------------------- */

.matrix-wrap { width: 100%; overflow-x: auto; display: flex; justify-content: center; }
.matrix { display: grid; gap: 8px; }
.matrix .head {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--ink);
  display: grid;
  place-items: center;
  min-width: 62px;
  padding: 0 4px;
  line-height: 1.4;
}
.matrix .head.side { justify-items: end; text-align: right; place-items: center end; }

.cell {
  width: 62px;
  height: 62px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  transition: border-color 0.12s ease;
}
.cell:hover:not(:disabled) { border-color: var(--line-strong); }
.cell[aria-pressed='true'] { border-color: var(--accent); }
.cell:disabled { opacity: 0.18; cursor: default; }
.cell .puck { width: 40px; height: 40px; border-radius: 2px; display: grid; place-items: center; }
.cell .puck i { width: 16px; height: 16px; border-radius: 50%; display: block; }