/* InstantPalette - tools (shared tool-page layer, loaded after site.css and before the page's own file)
   Load order on a tool page: tokens.css -> base.css -> site.css -> tools.css -> <slug>.css

   What lives here: only patterns every tool page shares - the page head block, the tool panel and its control
   rows, labelled inputs, sliders and segmented controls, result grids, swatch tiles with adaptive ink, code
   output blocks, the related-tools strip and tool-page spacing for the in-content ad containers.
   Per-tool layout belongs in css/<slug>.css. Nothing here is index-only (that is css/tool.css).

   Shared elsewhere, do not redefine:
   - the "Open in ..." row (.openin) is in site.css, because the generator uses it too;
   - the page grid, ad rails, ad containers, breadcrumb, prose, callouts, FAQ, tables, strips and footer are in
     site.css; buttons (.btn-o, .ghost, .ib), dialogs, sheets and toasts are in base.css. */

/* ================= Page shell =================
   .tpage carries the head block and the tool itself (wider than the reading measure); the prose, ads, FAQ and
   related strip below it use site.css's .content, so every page keeps one column and one rhythm. */
.tpage {
  max-width: 1000px; margin: 0 auto;
  padding: 28px 20px 0;
}
.tpage > .page-hd { max-width: calc(var(--measure) + 40px); }
.tpage h1 { margin: 0 0 10px; font: 700 32px/1.15 var(--f-sans); letter-spacing: -.02em; }
.tpage .page-sub { margin: 0 0 4px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.tool-note { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.tool-note .i { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

/* ================= Tool panel ================= */
.tpanel {
  margin: 0 0 20px; padding: 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--raised);
}
.tpanel + .tpanel { margin-top: 20px; }
.tpanel-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 12px;
}
.tpanel-hd h2, .tpanel-h { margin: 0; font: 600 15px/1.3 var(--f-sans); }
.tpanel-bd { display: flex; flex-direction: column; gap: 16px; }

/* Control rows: a wrapping row of labelled fields, each label 12px above a >=44px control */
.trow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.trow > .grow { flex: 1 1 220px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-l { font: 400 12px/14px var(--f-sans); color: var(--ink-2); }
.field-hint { font: 400 12px/1.45 var(--f-sans); color: var(--ink-2); }

/* Inputs. 16px minimum on text fields: iOS zooms anything smaller. */
.tinput, .tselect {
  height: 44px; width: 100%; min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--ground); color: var(--ink-1);
  font: 400 16px/1 var(--f-sans);
}
.tinput.mono, .tselect.mono { font: 500 16px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.tinput[aria-invalid="true"] { border: 1.5px dashed var(--ink-1); }
.tselect { padding-right: 8px; }
.tinput::placeholder { color: var(--ink-3); }
/* A hex field with a colour well in front of it */
.thex { display: flex; align-items: center; gap: 8px; }
.thex .tinput { text-transform: uppercase; }
/* The well is a control, so its boundary carries >=3:1 against the panel it sits on (WCAG 2.2 SC 1.4.11), not
   the --line-2 hairline used for text inputs: the fill is often the page's own near-white or near-black, and
   then the border is the only thing that says "control". --ink-3 is 3.36:1 on light --raised and 3.23:1 on dark.
   The inset ring keeps that edge readable from the inside when the fill is close to the surface too. */
.twell {
  width: 44px; height: 44px; flex: none; padding: 0;
  border: 1px solid var(--ink-3); border-radius: var(--r);
  background: var(--sw, var(--sunken));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 16%, transparent);
}
@media (hover: hover) and (pointer: fine) { .twell:hover { border-color: var(--ink-1); } }

/* Sliders. Keyboard operable by default; keep the 22px thumb and the ink ring from the editor. */
.tslider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; }
.tslider .field-l { grid-column: 1; }
.tslider .val { grid-column: 2; font: 500 13px/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* 44px tall: the input box is the whole pointer target (the 22px thumb is painted by a pseudo-element and adds
   nothing to it), so the track keeps its 12px look inside a 44px grab zone. */
.trange { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; background: none; -webkit-appearance: none; appearance: none; }
.trange::-webkit-slider-runnable-track { height: 12px; border-radius: var(--r-sm); background: var(--track, var(--sunken)); }
.trange::-moz-range-track { height: 12px; border-radius: var(--r-sm); background: var(--track, var(--sunken)); }
.trange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -5px;
  border-radius: 50%; background: var(--thumb, var(--raised));
  box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--ink-1);
}
.trange::-moz-range-thumb {
  width: 22px; height: 22px; border: 0;
  border-radius: 50%; background: var(--thumb, var(--raised));
  box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--ink-1);
}
.trange:focus-visible { outline: none; }
.trange:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--raised), 0 0 0 6px var(--ink-1); }
.trange:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--raised), 0 0 0 6px var(--ink-1); }

/* Segmented control (role="radiogroup" + role="radio" buttons). Never filled with hue. */
.tseg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: var(--r-sm);
  background: var(--sunken);
  max-width: 100%; overflow: auto;
}
.tseg button {
  min-height: 40px; padding: 0 12px;
  border-radius: var(--r-xs);
  font: 500 14px/1 var(--f-sans); color: var(--ink-1); white-space: nowrap;
}
/* .tseg scrolls on its inline axis, so the default ring (2px wide at 2px offset, base.css) is clipped top and
   bottom by the 2px padding box. Draw it inside instead of widening the control on six pages. */
.tseg button:focus-visible { outline-offset: -2px; }
.tseg.mono button { font: 500 13px/1 var(--f-mono); }
.tseg button[aria-checked="true"] { background: var(--raised); box-shadow: 0 0 0 1px var(--line-2); }
@media (hover: none), (pointer: coarse) { .tseg button { min-height: 44px; } }

/* The page's single filled control: its primary action, and nothing else */
.tprimary {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 18px;
  border: 0; border-radius: var(--r);
  background: var(--primary); color: var(--on-primary);
  font: 600 16px/1 var(--f-sans); white-space: nowrap; text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .tprimary:hover { background: color-mix(in srgb, var(--primary) 86%, var(--ground)); } }
.tprimary:active { transform: translateY(1px); }
.tprimary .i { color: inherit; }

/* ================= Results ================= */
.tres { margin: 0 0 20px; }
.tres-h { margin: 0 0 10px; font: 600 15px/1.3 var(--f-sans); }
/* Auto-fitting grid of result cards or tiles */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.tgrid.narrow { grid-template-columns: repeat(auto-fill, minmax(min(104px, 100%), 1fr)); }
/* A row of tiles that always stays one row (a shade ramp) */
.tramp { display: flex; flex-wrap: wrap; gap: 6px; }
.tramp > * { flex: 1 1 88px; min-width: 0; }

/* Swatch tile: the colour, its code and one line of meta, all in adaptive ink (ColorUtils.bestText). */
.swtile {
  --ink: #000; --anti: #FFF;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  min-height: 96px; padding: 10px;
  border: 0; border-radius: var(--r);
  background: var(--sw, var(--sunken)); color: var(--ink);
  text-align: left; width: 100%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 10%, transparent);
}
button.swtile { cursor: copy; }
.swtile .code { font: 500 14px/1.2 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.swtile .meta { font: 500 12px/1.3 var(--f-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swtile .step { font: 500 12px/1.2 var(--f-mono); opacity: .82; }
.swtile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--anti); }
@media (hover: hover) and (pointer: fine) { button.swtile:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.swtile.sm { min-height: 64px; }
.swtile.lg { min-height: 132px; }

/* A two-colour specimen (text on background), used by the contrast tools */
.tspec {
  display: flex; align-items: center; gap: 10px;
  min-height: 64px; padding: 12px 14px;
  border-radius: var(--r);
  background: var(--bg, var(--sunken)); color: var(--fg, var(--ink-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 10%, transparent);
}
.tspec .sample { font: 600 17px/1.3 var(--f-sans); }
.tspec .small { font: 400 13px/1.3 var(--f-sans); }

/* A big instrument readout (contrast ratio, count) */
.tbig { font: 500 32px/1.1 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tlevel { font: 600 12px/1 var(--f-sans); letter-spacing: .03em; color: var(--ink-2); }
/* Pass / fail: never colour alone, never red or green */
.tpass, .tfail {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 26px; padding: 0 8px;
  border-radius: var(--r-sm);
  font: 500 12px/1 var(--f-mono);
}
.tpass { border: 1px solid var(--line-2); background: var(--raised); }
.tfail { border: 1px dashed var(--ink-3); background: transparent; }
.tpass .i, .tfail .i { width: 14px; height: 14px; stroke-width: 2.4; }

/* ================= Code output ================= */
.codeout {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--ground);
}
.codeout-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 14px;
}
.codeout-hd h3, .codeout-n { margin: 0; font: 600 13px/1.3 var(--f-sans); }
/* 380px clears a whole 8-colour :root block; anything taller scrolls, and the two shadow layers below say so.
   Browsers here use overlay scrollbars, so without them a clipped block reads as malformed output (a missing
   closing brace) rather than as more content. The two cover layers are attached `local` so they ride with the
   text and hide each shadow at the end it belongs to; the shadows themselves stay fixed to the box. */
.codeout pre {
  margin: 0; padding: 0 14px 14px;
  font: 500 12px/1.65 var(--f-mono);
  max-height: 380px; overflow: auto;
  white-space: pre; tab-size: 2;
  background:
    linear-gradient(var(--ground) 40%, color-mix(in srgb, var(--ground) 0%, transparent)) 0 0 / 100% 22px no-repeat local,
    linear-gradient(color-mix(in srgb, var(--ground) 0%, transparent), var(--ground) 60%) 0 100% / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--ink-1) 22%, transparent), transparent) 0 0 / 100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ink-1) 22%, transparent), transparent) 0 100% / 100% 9px no-repeat scroll;
}
.codeout pre:focus-visible { outline-offset: -2px; }
.codeout .btn-o { height: 32px; min-height: 32px; }
@media (hover: none), (pointer: coarse) { .codeout .btn-o { height: 44px; min-height: 44px; } }

/* ================= Related tools strip ================= */
.related { margin: 0 0 56px; }
.related h2 { margin: 0 0 14px; font: 600 20px/1.25 var(--f-sans); letter-spacing: -.01em; }
.rt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.rt-card {
  display: flex; flex-direction: column; gap: 6px;
  height: 100%; padding: 14px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--raised); color: var(--ink-1); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .rt-card:hover { border-color: var(--ink-1); } }
.rt-card .rt-n { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--f-sans); }
.rt-card .rt-n .i { width: 18px; height: 18px; color: var(--ink-2); }
.rt-card p { margin: 0; font: 400 14px/1.5 var(--f-sans); color: var(--ink-2); }
.rt-card .strip { height: 10px; border-radius: var(--r-xs); margin-top: 2px; }
/* A hairline inside each bar so a near-white swatch still reads as a swatch on the raised card */
.rt-card .strip i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 14%, transparent); }
/* The /tools hub uses the same card, one size up, with a real colour strip as the visual */
.rt-list.hub { grid-template-columns: repeat(auto-fill, minmax(min(292px, 100%), 1fr)); gap: 16px; }
.rt-list.hub .rt-card { padding: 18px 20px 20px; gap: 8px; }
.rt-list.hub .rt-n { font-size: 17px; }
.rt-list.hub .rt-card p { font-size: 15px; }
.rt-list.hub .strip { height: 30px; border-radius: var(--r-sm); margin-top: 8px; }
.rt-card .rt-go { margin-top: auto; padding-top: 10px; font: 500 13px/1 var(--f-sans); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.rt-card .rt-go .i { width: 16px; height: 16px; }

/* ================= Tool-page spacing for shared blocks ================= */
/* On a tool page the site header sits above the page grid (on index it is inside the tool), so the rails only
   need to clear the head block, not a 56px bar inside the column. */
.site-top + .page .rail { padding-top: 28px; }
/* Align the prose column with the head block and the tool above it: the block is as wide as the tool, its
   children keep the 72ch reading measure. */
.site-top + .page .content { max-width: 1000px; }
.site-top + .page .content > * { max-width: calc(var(--measure) + 40px); }
/* 1000px block minus the content's own 20px side padding, so the footer's left edge lines up with the page */
.site-top + .page .foot-in { max-width: 960px; }
/* The in-content ad containers sit inside .content on tool pages too: keep the same 64px rhythm as index. */
.content > .ad-inline:first-child { margin-top: 0; }
.content .faq + .related, .content > section + .related { margin-top: 64px; }

/* Very wide viewports: both rails are in use and still leave ~1800px of main, so a 1000px column reads as a
   narrow strip in an empty field. Let the tool block grow with the column (min() keeps it inside main at every
   width, so nothing changes below 2000px). The prose keeps its reading measure - only the tool panels widen. */
@media (min-width: 2000px) {
  .tpage { max-width: min(1240px, 100%); }
  .site-top + .page .content { max-width: min(1240px, 100%); }
  .site-top + .page .foot-in { max-width: 1200px; }
}

@media (max-width: 600px) {
  .tpage { padding: 20px 20px 0; }
  .tpage h1 { font-size: 26px; }
  .tpage .page-sub { font-size: 17px; }
  .tpanel { padding: 14px; }
  .related h2 { font-size: 18px; }
}