/* =============================================================
   Bench — Tool pages
   Shell · controls · Password · Image · Colour · JSON · Diff
   ============================================================= */

/* ---------- Page head ---------------------------------------- */

.page-head {
  padding-block: clamp(26px, 4vw, 46px) clamp(22px, 3vw, 34px);
  position: relative;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.79rem;
  color: var(--ink-3);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.crumbs a { transition: color var(--t-fast) var(--ease); }
.crumbs a:hover { color: var(--accent); }
.crumbs svg { width: 12px; height: 12px; color: var(--ink-4); flex-shrink: 0; }
.crumbs [aria-current] { color: var(--ink-2); }

/* The page title takes the site's one heading voice from core.css — the
   display serif at 400. This rule only sizes it for the head band. */
.page-head h1 {
  font-size: clamp(2.4rem, 6vw, 3.9rem);
  line-height: 1.03;
  margin-bottom: 14px;
}

.page-head h1 em {
  font-style: italic;
  color: var(--accent);
  padding-right: 0.06em;
}

.page-head .lede { font-size: 1rem; }

/* Running head. Just the breadcrumb now — the rule and the dateline that
   used to share this line are gone, so nothing draws a border under it. */
.page-head__top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3.2vw, 36px);
}

.page-head__top .crumbs { margin-bottom: 0; }

/* ---------- The box ------------------------------------------ */

/* One surface, one hairline, one label strip. The whole point of these
   pages is that a reader never has to work out where the tool starts
   and where it stops, and the only way to get that is to draw it.

   Everything that is not the tool lives outside this element: the note,
   the related rail and the writing below it. If it is inside the box,
   it is part of the tool. */
.tool-box {
  margin-top: clamp(24px, 3.4vw, 38px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2xl);
  background: var(--card-face);
  box-shadow: var(--card-shadow);
  overflow: hidden;               /* clips the strip to the radius */
}

/* The lip along the top of the box. It carries no text on purpose: the
   page title and the lede have already named the tool two inches above
   it, and a third statement of the same name is noise. What is left is
   the thing that was actually doing the work — a band at the top of the
   box that is visibly not part of the tool, so the box reads as opening
   and closing rather than as a rectangle the controls happen to sit in. */
.tool-box__strip {
  height: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--inset);
}

.tool-box__body { padding: clamp(16px, 2.2vw, 24px); }

/* The note that used to sit inside the tool. Out here it reads as
   commentary on the tool rather than part of it. */
.tool-note { margin-top: clamp(20px, 2.6vw, 30px); }

/* ---------- Related rail ------------------------------------- */

/* Directly under the box, not at the foot of the page: someone who has
   finished with the tool should not have to read a thousand words to
   find the next one, and its position at the box's own edge is half of
   what makes "the tool ended here" legible. */
.related-group {
  margin-top: clamp(20px, 2.6vw, 30px);
  display: grid;
  gap: 12px;
}

.related-group__label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.71rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 980px) { .tool-layout { grid-template-columns: minmax(0, 1fr); } }

.tool-layout--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) { .tool-layout--even { grid-template-columns: minmax(0, 1fr); } }

.field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.field-hint { font-size: 0.775rem; font-weight: 400; color: var(--ink-3); }

.readout-value {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  min-width: 2.5ch;
  text-align: right;
}

/* ---------- Segmented control -------------------------------- */

.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--inset);
  max-width: 100%;
  flex-wrap: wrap;
}

.segmented button {
  padding: 7px 15px;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.segmented button:hover { color: var(--ink); }

.segmented button[aria-pressed='true'] {
  background: var(--surface-3);
  color: var(--ink);
  box-shadow: var(--edge);
}

/* ---------- Range slider ------------------------------------- */

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: none;
  cursor: pointer;
  padding: 0;
  border: 0;
  box-shadow: none;
}

input[type='range']:focus { box-shadow: none; }

input[type='range']::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--fill, 50%), var(--surface-3) var(--fill, 50%));
}

input[type='range']::-moz-range-track { height: 5px; border-radius: 3px; background: var(--surface-3); }
input[type='range']::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--accent); }

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

input[type='range']::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.14); }
input[type='range']:active::-webkit-slider-thumb {
  transform: scale(1.22);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 34%, transparent);
}

/* ---------- Switch ------------------------------------------- */

.switch-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.switch-row:hover { border-color: var(--line-2); background: var(--surface-2); }
.switch-row__text { min-width: 0; }
.switch-row__text b { display: block; font-size: 0.86rem; font-weight: 600; }
.switch-row__text span { display: block; font-size: 0.765rem; color: var(--ink-3); }

.switch {
  position: relative;
  flex-shrink: 0;
  width: 40px; height: 23px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  transition: background var(--t) var(--ease);
}

.switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform var(--t) var(--ease);
}

.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row input:checked ~ .switch { background: var(--accent); box-shadow: 0 0 14px -2px var(--glow); }
.switch-row input:checked ~ .switch::after { transform: translateX(17px); background: #fff; }
.switch-row input:focus-visible ~ .switch { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Callout ------------------------------------------ */

.callout {
  display: flex;
  gap: 13px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent-soft);
  font-size: 0.855rem;
  color: var(--ink-2);
  line-height: 1.62;
}

.callout svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.callout b { color: var(--ink); font-weight: 600; }

/* ---------- Checklist ---------------------------------------- */

.checklist { display: flex; flex-direction: column; gap: 13px; }
.checklist li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.9rem; color: var(--ink-2); line-height: 1.6; }
.checklist svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 4px; }
.checklist b { color: var(--ink); font-weight: 600; }

/* ---------- Related card ------------------------------------- */

.related {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.related:hover {
  border-color: color-mix(in srgb, var(--hue, var(--accent)) 40%, transparent);
  background: var(--surface-2);
  transform: translateX(3px);
}

.related__text { min-width: 0; flex: 1; }
.related__text b { display: block; font-size: 0.88rem; font-weight: 600; }
.related__text span { display: block; font-size: 0.78rem; color: var(--ink-3); }
.related > svg { width: 16px; height: 16px; color: var(--ink-4); flex-shrink: 0; }

/* ---------- Stat grid ---------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

/* The cells used to be mixed against --bg, because the stat row sat
   directly on the page. It now sits inside the box, which is a
   --card-face surface, so the cells are drawn as recessed wells
   against that face instead. */
.stat-cell { background: var(--inset); padding: 15px 16px; }
.stat-cell dt { font-size: 0.725rem; color: var(--ink-3); margin-bottom: 4px; }
.stat-cell dd {
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  word-break: break-word;
}

/* =============================================================
   Password generator
   ============================================================= */

.pw-output {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--inset);
  padding: 20px 18px;
  min-height: 94px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.pw-output:hover { border-color: var(--line-2); }
.pw-output.is-weak { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.pw-output.is-strong { border-color: color-mix(in srgb, var(--ok) 40%, transparent); box-shadow: 0 0 30px -14px var(--ok); }

.pw-output__text {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
  word-break: break-all;
  user-select: all;
  flex: 1;
  min-width: 0;
}

.pw-output__text .ch-digit { color: var(--accent); }
.pw-output__text .ch-symbol { color: var(--accent); opacity: 0.7; }

.pw-empty { color: var(--ink-4); font-family: var(--font-ui); font-size: 0.92rem; }

.strength { margin-top: 18px; }

.strength__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.81rem;
}

.strength__label { font-weight: 700; letter-spacing: -0.01em; }
.strength__label[data-level='0'] { color: var(--ink-3); }
.strength__label[data-level='1'] { color: var(--danger); }
.strength__label[data-level='2'] { color: var(--warn); }
.strength__label[data-level='3'],
.strength__label[data-level='4'] { color: var(--ok); }

.strength__bits { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.strength__bars { display: flex; gap: 4px; }

.strength__bars i {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-3);
  transition: background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}

.strength__bars i.on[data-tier='1'] { background: var(--danger); box-shadow: 0 0 10px -1px var(--danger); }
.strength__bars i.on[data-tier='2'] { background: var(--warn); box-shadow: 0 0 10px -1px var(--warn); }
.strength__bars i.on[data-tier='3'],
.strength__bars i.on[data-tier='4'] { background: var(--ok); box-shadow: 0 0 10px -1px var(--ok); }

.copy-btn.is-done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.copy-btn.is-done svg { animation: pop 320ms var(--ease-out); }

@keyframes pop {
  0%   { transform: scale(0.55); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.charset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 440px) { .charset-grid { grid-template-columns: minmax(0, 1fr); } }

.charset {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.charset:hover { border-color: var(--line-2); background: var(--surface-2); }
.charset:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }

.charset input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--line-3);
  border-radius: 6px;
  background: transparent;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.charset input:checked { background: var(--accent); border-color: var(--accent); }

.charset input::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--t-fast) var(--ease-out);
}

.charset input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

.charset__label { min-width: 0; }
.charset__label b { display: block; font-size: 0.845rem; font-weight: 600; line-height: 1.3; }
.charset__label span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.71rem;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.length-presets { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

.length-presets button {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: all var(--t-fast) var(--ease);
}

.length-presets button:hover { border-color: var(--line-2); color: var(--ink); }
.length-presets button.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.bulk-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }

.bulk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 15px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  transition: background var(--t-fast) var(--ease);
}

.bulk-item + .bulk-item { border-top: 1px solid var(--line); }
.bulk-item:hover { background: var(--surface-2); }

.bulk-item__idx {
  width: 22px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-4);
}

.bulk-item__text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.bulk-item__text::-webkit-scrollbar { display: none; }

.bulk-item button {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 8px;
  color: var(--ink-3);
  display: grid;
  place-items: center;
  transition: all var(--t-fast) var(--ease);
}

.bulk-item button:hover { background: var(--surface-3); color: var(--ink); }
.bulk-item button svg { width: 14px; height: 14px; }
.bulk-item button.is-done { color: var(--ok); }

/* =============================================================
   Image compressor
   ============================================================= */

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  min-height: 360px;
  padding: 46px 26px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-2xl);
  background: var(--card-face);
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
}

.dropzone:hover, .dropzone.is-over {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.dropzone.is-over { transform: scale(1.006); }

.dropzone__icon {
  width: 62px; height: 62px;
  border-radius: 19px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 34px -10px var(--glow);
  transition: transform var(--t) var(--ease);
}

.dropzone:hover .dropzone__icon, .dropzone.is-over .dropzone__icon { transform: translateY(-4px) scale(1.05); }
.dropzone__icon svg { width: 27px; height: 27px; }

.dropzone h3 { font-size: 1.12rem; }
.dropzone p { font-size: 0.87rem; color: var(--ink-2); max-width: 44ch; }
.dropzone .btn { pointer-events: none; margin-top: 4px; }
.dropzone__formats { font-size: 0.75rem; color: var(--ink-4); letter-spacing: 0.02em; }

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

.compare {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  margin-inline: auto;
  background-color: var(--inset);
  background-image:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

.compare img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

.compare__after { clip-path: inset(0 0 0 50%); }

.compare__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 16px var(--glow-strong);
  pointer-events: none;
}

.compare__handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 55%, transparent), 0 4px 18px rgba(0, 0, 0, 0.6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-5 6 5 6'/%3E%3Cpath d='m15 6 5 6-5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--t-fast) var(--ease);
}

.compare:hover .compare__handle::after { transform: translate(-50%, -50%) scale(1.08); }

.compare__tag {
  position: absolute;
  top: 12px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(6, 6, 8, 0.7);
  border: 1px solid var(--line-2);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

.compare__tag--before { left: 12px; }
.compare__tag--after { right: 12px; }

.savings {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  color: var(--ok);
  font-size: 0.79rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.savings.is-negative {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger);
}

.savings svg { width: 13px; height: 13px; }

.progress { height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }

.progress__bar {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px var(--glow);
  transition: width 260ms var(--ease);
}

/* =============================================================
   Colour studio
   ============================================================= */

.grad-preview {
  position: relative;
  height: clamp(200px, 30vw, 300px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  overflow: hidden;
  box-shadow: var(--edge), 0 20px 50px -26px rgba(0, 0, 0, 0.9);
  transition: background 260ms var(--ease);
}

.grad-preview__label {
  position: absolute;
  left: 16px; bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  padding: 4px 11px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Colour stop rows */
.stops { display: flex; flex-direction: column; gap: 8px; }

.stop {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease);
}

.stop:hover { border-color: var(--line-2); }

.stop__swatch {
  position: relative;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  cursor: pointer;
  box-shadow: var(--edge);
}

.stop__swatch input {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  border: 0;
  padding: 0;
  cursor: pointer;
  background: none;
}

.stop__swatch input::-webkit-color-swatch-wrapper { padding: 0; }
.stop__swatch input::-webkit-color-swatch { border: 0; }
.stop__swatch input::-moz-color-swatch { border: 0; }

.stop__hex {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 6px 8px;
  letter-spacing: 0.03em;
}

.stop__hex:hover { background: var(--inset); border-color: var(--line); }

.stop__pos { width: 76px; flex-shrink: 0; }
.stop__pos input { padding: 6px 8px; font-size: 0.8rem; text-align: center; font-family: var(--font-mono); }

.stop__del {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  color: var(--ink-4);
  display: grid;
  place-items: center;
  transition: all var(--t-fast) var(--ease);
}

.stop__del:hover { background: var(--danger-soft); color: var(--danger); }
.stop__del svg { width: 14px; height: 14px; }

/* Palette swatches */
.palette-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }


.swatch {
  position: relative;
  border-radius: var(--r);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.swatch:hover { transform: translateY(-3px); border-color: var(--line-3); }

.swatch__color { height: 74px; }

.swatch__meta {
  padding: 9px 10px;
  background: var(--inset);
  border-top: 1px solid var(--line);
}

.swatch__meta b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.swatch__meta span { display: block; font-size: 0.64rem; color: var(--ink-4); margin-top: 1px; }

@media (max-width: 560px) { .palette-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Contrast checker */
.contrast-demo {
  border-radius: var(--r);
  border: 1px solid var(--line);
  padding: 22px 20px;
  transition: background 220ms var(--ease), color 220ms var(--ease);
}

.contrast-demo b { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.contrast-demo span { display: block; font-size: 0.85rem; margin-top: 5px; opacity: 0.85; }

.verdict-row { display: flex; gap: 8px; flex-wrap: wrap; }

.verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  font-size: 0.735rem;
  font-weight: 700;
  border: 1px solid;
}

.verdict--pass { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 32%, transparent); color: var(--ok); }
.verdict--fail { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }

.contrast-ratio {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* =============================================================
   JSON formatter
   ============================================================= */

.code-pane {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--inset);
  overflow: hidden;
}

.code-pane__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-wrap: wrap;
}

.code-pane__title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.code-input {
  display: block;
  width: 100%;
  min-height: 340px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
  resize: vertical;
  box-shadow: none;
  tab-size: 2;
}

.code-input:focus { box-shadow: none; border: 0; }

.code-out {
  margin: 0;
  padding: 16px;
  min-height: 340px;
  max-height: 620px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
  tab-size: 2;
  white-space: pre;
  color: var(--ink-2);
}

/* JSON token colours */
.tk-key  { color: var(--n-images); }
.tk-str  { color: var(--n-text); }
.tk-num  { color: var(--accent); }
.tk-bool { color: var(--n-data); }
.tk-null { color: var(--ink-4); }
.tk-punc { color: var(--ink-4); }

.status-line {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.83rem;
  font-weight: 500;
}

.status-line svg { width: 15px; height: 15px; flex-shrink: 0; }
.status-line--ok { border-color: color-mix(in srgb, var(--ok) 32%, transparent); background: var(--ok-soft); color: var(--ok); }
.status-line--err { border-color: color-mix(in srgb, var(--danger) 32%, transparent); background: var(--danger-soft); color: var(--danger); }

/* =============================================================
   Diff checker
   ============================================================= */

.diff-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) { .diff-inputs { grid-template-columns: minmax(0, 1fr); } }

.diff-area {
  display: block;
  width: 100%;
  min-height: 220px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  resize: vertical;
}

.diff-view {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: auto;
  max-height: 620px;
  font-family: var(--font-mono);
  font-size: 0.81rem;
  line-height: 1.72;
}

.diff-row { display: flex; border-bottom: 1px solid var(--line); }
.diff-row:last-child { border-bottom: 0; }

.diff-row__no {
  width: 46px;
  flex-shrink: 0;
  padding: 2px 9px;
  text-align: right;
  color: var(--ink-4);
  background: var(--surface);
  border-right: 1px solid var(--line);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.diff-row__txt {
  flex: 1;
  min-width: 0;
  padding: 2px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.diff-row--add { background: color-mix(in srgb, var(--ok) 9%, transparent); }
.diff-row--add .diff-row__no { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.diff-row--add .diff-row__txt { color: color-mix(in srgb, var(--ok) 78%, var(--ink)); }

.diff-row--del { background: color-mix(in srgb, var(--danger) 9%, transparent); }
.diff-row--del .diff-row__no { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.diff-row--del .diff-row__txt { color: color-mix(in srgb, var(--danger) 78%, var(--ink)); }

.diff-row--empty { background: var(--surface); opacity: 0.45; }

.diff-row ins {
  background: color-mix(in srgb, var(--ok) 26%, transparent);
  border-radius: 3px;
  text-decoration: none;
  padding: 0 2px;
}

.diff-row del {
  background: color-mix(in srgb, var(--danger) 26%, transparent);
  border-radius: 3px;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  padding: 0 2px;
}

.diff-stats { display: flex; gap: 8px; flex-wrap: wrap; }

.diff-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.79rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.diff-stat svg { width: 13px; height: 13px; }
.diff-stat--add { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: var(--ok-soft); }
.diff-stat--del { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-soft); }

/* Side-by-side split view */
.diff-split {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: auto;
  max-height: 620px;
  font-family: var(--font-mono);
  font-size: 0.81rem;
  line-height: 1.72;
}

.diff-split__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}

.diff-split__row:last-child { border-bottom: 0; }

.dn {
  padding: 2px 9px;
  text-align: right;
  color: var(--ink-4);
  background: var(--surface);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  user-select: none;
  border-right: 1px solid var(--line);
}

.dc {
  padding: 2px 13px;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.dc--add { background: color-mix(in srgb, var(--ok) 9%, transparent); color: color-mix(in srgb, var(--ok) 78%, var(--ink)); }
.dc--del { background: color-mix(in srgb, var(--danger) 9%, transparent); color: color-mix(in srgb, var(--danger) 78%, var(--ink)); }
.dc--empty { background: var(--surface); }

.dn--add { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.dn--del { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

.diff-split__row .dc:nth-child(2) { border-right: 1px solid var(--line); }

/* Colour studio — tab panels, pickers & copy feedback */

[hidden] { display: none !important; }

.swatch-pick {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  cursor: pointer;
  box-shadow: var(--edge);
}

.swatch-pick input {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  border: 0;
  padding: 0;
  cursor: pointer;
  background: none;
}

.swatch-pick input::-webkit-color-swatch-wrapper { padding: 0; }
.swatch-pick input::-webkit-color-swatch { border: 0; }
.swatch-pick input::-moz-color-swatch { border: 0; }

.hex-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.swatch.is-copied { border-color: var(--ok); }
.swatch.is-copied .swatch__meta b { color: var(--ok); }

.field-stack { display: flex; flex-direction: column; gap: 14px; }