/* InstantPalette - shade generator (/shade-generator only, layer 5)
   Loaded after tokens.css -> base.css -> site.css -> tools.css.

   Only what is specific to this tool lives here: the native colour well, the colour-set chips, the checkbox row
   and the scale table (a colour-filled first column plus two contrast columns and a lock button).
   Panels, rows, fields, inputs, sliders, segmented controls, the primary button, code blocks, pass/fail chips
   and the related strip all come from tools.css - do not restyle them here. */

/* ================= Base colour field ================= */
/* The colour well is a real <input type="color">, so it opens the system picker with no extra script. */
.sg-well {
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.sg-well::-webkit-color-swatch-wrapper { padding: 0; }
.sg-well::-webkit-color-swatch { border: 0; border-radius: calc(var(--r) - 1px); }
.sg-well::-moz-color-swatch { border: 0; border-radius: calc(var(--r) - 1px); }

.thex .tinput { flex: 1 1 auto; }
.thex .btn-o.ic { flex: none; height: 44px; min-height: 44px; width: 44px; }
.field-hint code { font: 500 12px/1 var(--f-mono); }

/* ================= Colour set ================= */
.sg-set { display: flex; flex-direction: column; gap: 8px; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* One colour in the set: a swatch dot, its hex, and (when more than one) a remove button. */
.sg-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 4px 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--raised); color: var(--ink-1);
}
.sg-chip.on { border-color: var(--ink-1); box-shadow: inset 0 0 0 1px var(--ink-1); }
.sg-chip > .pick {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 2px;
  font: 500 13px/1 var(--f-mono); color: inherit;
}
.sg-chip .dot {
  width: 18px; height: 18px; flex: none;
  border-radius: var(--r-xs); background: var(--sw, var(--sunken));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 18%, transparent);
}
/* Remove is destructive and sits next to Edit, so the painted 34x38 box stays small while the *target* is 44x44.
   The extra area is pushed away from .pick (2px toward it, 8px the other way, into the chip's own padding and the
   8px flex gap), so a near miss does not delete a color. Same trick as .ipx-pin::before and .gstop::after. */
.sg-chip .rm { position: relative; width: 34px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-2); }
.sg-chip .rm::after { content: ""; position: absolute; inset: -3px -8px -3px -2px; }
.sg-chip .rm .i { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .sg-chip:hover { border-color: var(--ink-3); }
  .sg-chip .rm:hover { background: var(--hover); color: var(--ink-1); }
}
.sg-chip[hidden] { display: none; }
#sg-add { height: 44px; min-height: 44px; }
#sg-add .i { width: 18px; height: 18px; }

/* ================= Options ================= */
/* Three sliders side by side: align their tops, since only one of them carries a hint below. */
.sg-sliders { align-items: flex-start; }
.sg-sliders > .grow { flex: 1 1 200px; gap: 4px; }
/* The input lives inside its label, so the whole row - box plus wrapped text - is one 44px target. */
.sg-check { display: flex; min-height: 44px; }
.sg-check label {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 0;
  font: 400 15px/1.4 var(--f-sans); cursor: pointer;
}
.sg-check input { width: 24px; height: 24px; flex: none; accent-color: var(--ink-1); margin: 0; }
/* A control that the current method does not use: dimmed, still readable, never hidden. */
.field.is-off .field-l, .field.is-off .val, .field.is-off .field-hint { color: var(--ink-3); }
.field.is-off .trange { opacity: .5; }

/* ================= Results ================= */
.sg-legend { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; }
.sg-scale { margin: 0 0 28px; }
.sg-scale-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 8px; }
.sg-scale-hd h3 { margin: 0; font: 600 15px/1.3 var(--f-sans); }
.sg-scale-hd .base { font: 500 13px/1.3 var(--f-mono); color: var(--ink-2); }
.sg-scale-hd .btn-o { height: 34px; min-height: 34px; margin-left: auto; font-size: 13px; }
@media (hover: none), (pointer: coarse) { .sg-scale-hd .btn-o { height: 44px; min-height: 44px; } }

/* The scale table. Fixed layout so the two contrast columns never shift between colours. */
.sg-tbl {
  width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 4px;
}
.sg-tbl th, .sg-tbl td { padding: 0; vertical-align: middle; }
.sg-tbl thead th {
  padding: 0 6px 4px; text-align: right;
  font: 400 12px/1.3 var(--f-sans); color: var(--ink-2); font-weight: 400;
}
.sg-tbl thead th:first-child { text-align: left; padding-left: 2px; }
.sg-tbl col.c-num { width: 78px; }

/* The colour cell fills its own row: adaptive ink only, no scrim, no translucent pill.
   The lock sits inside it (like the generator's lock tab) so the colour keeps the width instead of a column. */
.sg-swc {
  --ink: #000; --anti: #FFF;
  position: relative;
  border-radius: var(--r); overflow: hidden;
  background: var(--sw, var(--sunken)); color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 12%, transparent);
}
.sg-copy {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px;
  width: 100%; min-height: 46px; padding: 6px 46px 6px 8px;
  color: inherit; text-align: left; cursor: copy;
  border-radius: var(--r);
}
.sg-lock {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--ink);
}
.sg-lock .i { width: 19px; height: 19px; }
.sg-lock[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--ink); }
.sg-lock:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; box-shadow: 0 0 0 2px var(--anti); }
@media (hover: hover) and (pointer: fine) { .sg-lock:hover { box-shadow: inset 0 0 0 1px var(--ink); } }
@media (hover: none), (pointer: coarse) { .sg-lock { width: 44px; height: 44px; right: 1px; } }
.sg-step { font: 500 12px/1.2 var(--f-mono); font-variant-numeric: tabular-nums; min-width: 24px; opacity: .85; }
.sg-hexv { font: 500 12px/1.2 var(--f-mono); letter-spacing: -.01em; }
.sg-flag {
  font: 500 12px/1 var(--f-sans);
  padding: 3px 7px; border-radius: var(--r-sm);
  border: 1px solid var(--ink); opacity: .9;
}
.sg-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; box-shadow: inset 0 0 0 4px var(--anti); }
@media (hover: hover) and (pointer: fine) { .sg-copy:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }

/* Contrast columns: on a phone the ratio sits above the level chip, so 82px is enough at 360px wide;
   from 620px they sit side by side. */
.sg-c { padding: 0 5px !important; }
.sg-c > span { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sg-num { font: 500 13px/1.1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink-1); }
.sg-c .tpass, .sg-c .tfail { min-height: 22px; padding: 0 4px; gap: 3px; }
.sg-c .tpass .i, .sg-c .tfail .i { width: 13px; height: 13px; }

/* The adjust bar, shown only under a locked step */
.sg-adj td { padding: 4px 0 8px !important; }
.sg-adjin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 10px; }
.sg-adjin .lbl { font: 400 12px/1.3 var(--f-sans); color: var(--ink-2); margin-right: 2px; }
.sg-adjin .btn-o { height: 36px; min-height: 36px; font-size: 13px; padding: 0 10px; }
@media (hover: none), (pointer: coarse) { .sg-adjin .btn-o { height: 44px; min-height: 44px; } }

@media (min-width: 620px) {
  /* 156px = 20px cell padding + the widest ratio ("19.3:1", 55px) + the 8px gap + the widest level chip
     ("Large", 71px), with a few pixels to spare. Anything less and the ratio spills into the next column. */
  .sg-tbl col.c-num { width: 156px; }
  .sg-tbl thead th { text-align: left; padding-left: 10px; }
  .sg-tbl thead th:last-child { padding-left: 0; }
  .sg-copy { min-height: 44px; padding: 4px 50px 4px 14px; gap: 2px 12px; }
  .sg-step { font-size: 13px; min-width: 30px; }
  .sg-hexv { font-size: 13px; }
  .sg-c { padding: 0 10px !important; }
  .sg-c > span { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  .sg-c .tpass, .sg-c .tfail { min-height: 26px; padding: 0 8px; gap: 6px; }
}

/* Empty / error state */
.sg-empty {
  margin: 0; padding: 20px;
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
}

/* Export block spacing inside the panel */
#sg-code { min-height: 120px; }
#sg-fmt { max-width: 100%; flex: 0 1 auto; }
@media (max-width: 760px) {
  .sg-exphd { flex-wrap: wrap; }
  .sg-exphd #sg-fmt { width: 100%; }
}
/* Neither segmented control fits one phone row: the three methods need 331px and the five formats far more.
   .tseg scrolls by default, which hides the last options behind a swipe nobody guesses and clips the focus
   ring of the first and last button. Wrap to two rows instead, so every option is visible and the rings are
   not cut off. The buttons grow so the rows stay flush. */
@media (max-width: 540px) {
  #sg-fmt, #sg-method { flex-wrap: wrap; overflow: visible; }
  #sg-fmt button, #sg-method button { flex: 1 1 auto; }
  #sg-method { display: flex; }
}