/*!
 * @Rank – Color Shades Generator
 * The tool's stylesheet. A tool is a thing people come to in order to get
 * something done and leave, so the line is deliberately quiet: ONE deep
 * indigo ink for structure, ONE amber call to action, hairlines instead of
 * shadows, and 6/8 px corners rather than 20. Colour is spent only where it
 * carries meaning — that one ink, that one action, and ok/warn/err.
 *
 * Every rule sits under the root .atrank-shades: the tool is a section inside
 * somebody else's page and must touch nothing outside its own root — no :root,
 * no html, no body, no bare *. See ADR-008.
 *
 * Light only. There is no dark palette and no toggle.
 *
 * Two rules here are function rather than styling:
 *   · a swatch's colour is DATA, so it is set on the element as an inline style
 *     and never in this file. There is one class and N colours, and the browser
 *     pass reads each swatch's computed background back to check it is the hex
 *     printed under it;
 *   · the strip is a grid of equal columns that scrolls sideways rather than
 *     shrinking past the point where a hex is readable. Seventeen shades on a
 *     phone is a scroll, not eight-pixel swatches.
 */

/* ── Design tokens ─────────────────────────────────────────────────────────
     The palette is deliberately narrow. Structure is carried by ONE deep ink
     — #1a044a, the old #26076b darkened, 18.1:1 on white — and nothing else is
     brand does not need to be repeated in every border. Amber stays as the
     single call to action. Two contrast rules are inherited and still hold:
       · Text on the amber CTA is near-black, not white. FormFlow's own
         .ffe-go-pro-button uses #fff on #e8a002, which is 2.22:1 and fails
         WCAG AA. Near-black on the same amber is 8.4:1 and keeps the identity.
       · --ok and --warn are darkened from FormFlow's #16a34a / #e8a002, which
         reach only 3.3:1 and 2.2:1 as TEXT on white. */
.atrank-shades {
}

/* Only two selectors reach past the tool's own elements, and both are scoped to
   the root so they cannot leak into the client's page. */
.atrank-shades, .atrank-shades *{ box-sizing:border-box; }
/* The hidden attribute has to WIN. No element here currently collides with a
   display rule, but Converter Tool had exactly that bug — a bar carrying a
   .row class with display:flex stayed on screen despite being marked hidden,
   because an author rule beats the browser's own display:none for [hidden].
   This costs one line and removes the whole class of mistake. */
.atrank-shades [hidden]{ display:none !important; }.atrank-shades {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	border-radius: var(--r-lg);
	overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────────────────────
   Sticky, so the status stays visible while scrolling a long text. A theme with
   a fixed header of its own sets --atrank-header-top and it sits below it. */
.atrank-shades header{
  position:sticky; top:var(--atrank-header-top, 0px); z-index:5;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:6px 12px; background:var(--panel);
  border-bottom:1px solid var(--line); box-shadow:none;
}

/* ── Layout ─────────────────────────────────────────────────────────────────
   The reference shape: the phone on the left, the controls on the right, and one
   button at the bottom spanning both. Stacked below 1000 px, with the phone
   first — on a narrow screen the picture is what you want to see while typing. */
.atrank-shades main{ display:block; padding:10px 12px 12px; }
.atrank-tool-root .atrank-panel{ display:block; }
.atrank-tool-root .atrank-panel > * + *{ margin-top:0; }.atrank-tool-root .atrank-hint {
	display: block;
	line-height: 1.45;
	margin-top: 7px;
}
.atrank-shades-tail{ margin-top:18px; display:grid; gap:8px; }.atrank-tool-root .atrank-btn {
	white-space: nowrap;
}
.atrank-tool-root .atrank-btn-ghost{ border-color:var(--line2); background:var(--panel); color:var(--muted); }
.atrank-tool-root .atrank-btn-ghost:hover{ color:var(--accent); border-color:var(--accent); background:var(--hover); }.atrank-tool-root .atrank-btn-cta {
	padding: 11px 22px;
	font-size: 14px;
}
.atrank-tool-root .atrank-btn-cta:hover{ background:var(--cta-h); }

/* ── The three controls ────────────────────────────────────────────────────
   One row, as the reference interface has it: the colour, the step, the count. */
.atrank-shades-controls{
  display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom:14px;
}
.atrank-shades-box{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  padding:7px 11px 9px; border:1px solid var(--line2); border-radius:var(--r-lg);
  background:var(--panel); cursor:pointer;
}
.atrank-shades-box:hover{ border-color:var(--accent); }
.atrank-shades-box:focus-within{ border-color:var(--accent); box-shadow:var(--ring); }
.atrank-shades-blabel{
  font-size:11px; font-weight:600; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.atrank-shades-blabel output{ color:var(--txt); font-variant-numeric:tabular-nums; }
.atrank-shades-box input[type="text"], .atrank-shades-box select{
  appearance:none; -webkit-appearance:none; width:100%; min-width:0;
  border:none; background:transparent; padding:0; margin:0;
  font:inherit; font-size:15px; font-weight:600; color:var(--txt);
  line-height:1.35; cursor:text;
}
.atrank-shades-box select{
  cursor:pointer; font-size:13.5px; padding-right:16px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 6px) calc(50% + 1px), calc(100% - 2px) calc(50% + 1px);
  background-size:4px 4px, 4px 4px; background-repeat:no-repeat;
}
.atrank-shades-box input:focus-visible, .atrank-shades-box select:focus-visible{ outline:none; }
.atrank-shades-box input::placeholder{ color:var(--dim); font-weight:400; }

/* The colour box: the swatch and the field on one line, the label above both. */
.atrank-shades-colourbox{ flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; }
.atrank-shades-colourbox .atrank-shades-blabel{ flex:1 1 100%; }
.atrank-shades-swatchwrap{ flex:0 0 auto; display:block; line-height:0; }
/* A native colour input, stripped back to the swatch itself. */
.atrank-shades-colourbox input[type="color"]{
  appearance:none; -webkit-appearance:none; width:30px; height:30px; padding:0;
  border:1px solid var(--line2); border-radius:8px; background:none; cursor:pointer;
}
.atrank-shades-colourbox input[type="color"]::-webkit-color-swatch-wrapper{ padding:2px; }
.atrank-shades-colourbox input[type="color"]::-webkit-color-swatch{ border:none; border-radius:6px; }
.atrank-shades-colourbox input[type="color"]::-moz-color-swatch{ border:none; border-radius:6px; }
.atrank-shades-colourbox input[type="color"]:focus-visible{ outline:none; box-shadow:var(--ring); }
.atrank-shades-colourbox input[type="text"]{ flex:1 1 120px; font-family:var(--mono); }
/* Not an error state — the field is mid-typing more often than it is wrong — so
   it is marked, not reddened. */
.atrank-shades-colourbox input[type="text"].is-bad{ color:var(--warn); }

/* ── The sliders ───────────────────────────────────────────────────────────— */
.atrank-shades-sliderbox{ justify-content:center; cursor:default; }
.atrank-shades-sliderbox input[type="range"]{
  appearance:none; -webkit-appearance:none; width:100%; height:18px;
  background:transparent; cursor:pointer; margin:2px 0 0;
}
/* The filled part of the track is painted by a gradient sized from --pct, which
   the script sets on the input. WebKit has no ::-moz-range-progress and never
   will, so the portion left of the thumb is otherwise simply not drawn — the
   slider looks empty at every value, which is what the first render showed. The
   custom property inherits into the pseudo-element, so one declaration serves
   both engines. */
.atrank-shades-sliderbox input[type="range"]::-webkit-slider-runnable-track{
  height:6px; border-radius:3px;
  background:linear-gradient(var(--accent), var(--accent)) 0 / var(--pct, 0%) 100% no-repeat,
             var(--line);
}
.atrank-shades-sliderbox input[type="range"]::-moz-range-track{
  height:6px; border-radius:3px;
  background:linear-gradient(var(--accent), var(--accent)) 0 / var(--pct, 0%) 100% no-repeat,
             var(--line);
}
.atrank-shades-sliderbox input[type="range"]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; width:16px; height:16px; margin-top:-5px;
  border-radius:50%; background:var(--panel); border:2px solid var(--accent);
  box-shadow:0 1px 3px rgba(15,23,42,.25);
}
.atrank-shades-sliderbox input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--panel);
  border:2px solid var(--accent); box-shadow:0 1px 3px rgba(15,23,42,.25);
}
.atrank-shades-sliderbox input[type="range"]:focus-visible{ outline:none; }
.atrank-shades-sliderbox input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow:var(--ring); }
.atrank-shades-sliderbox input[type="range"]:focus-visible::-moz-range-thumb{ box-shadow:var(--ring); }

/* ── The two ladders ───────────────────────────────────────────────────────
   Equal columns, and a sideways scroll rather than swatches too small to read a
   hex under. Two strips rather than one: twenty-one swatches in a row is 1,764
   units at the readable width, which always scrolls; eleven and eleven fits a
   laptop. */
.atrank-shades-striphead{
  margin:16px 0 7px; font-size:14px; font-weight:600; color:var(--txt);
  letter-spacing:-.01em; font-family:var(--mono);
}
.atrank-shades-striphead:first-of-type{ margin-top:4px; }
.atrank-shades-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(84px, 1fr);
  border:1px solid var(--line); border-radius:var(--r); overflow-x:auto;
  background:var(--panel);
}
.atrank-shades-cell{ display:grid; grid-template-rows:auto auto auto; min-width:0; }
.atrank-shades-sw{
  appearance:none; border:none; padding:0; margin:0; cursor:pointer;
  height:76px; display:block; width:100%;
}
.atrank-shades-sw:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px var(--accent); }
.atrank-shades-hex{
  appearance:none; border:none; border-top:1px solid var(--line); background:var(--panel);
  color:var(--muted); font:inherit; font-family:var(--mono); font-size:11.5px;
  padding:7px 4px; cursor:pointer; text-align:center; width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.atrank-shades-hex:hover{ color:var(--accent); background:var(--hover); }
.atrank-shades-hex:focus-visible{ outline:none; box-shadow:var(--ring); }
/* The marker under the selected swatch, as the reference has it. */
.atrank-shades-mark{ display:block; height:12px; }
.atrank-shades-cell.is-on .atrank-shades-sw{ box-shadow:inset 0 0 0 3px var(--accent); }
.atrank-shades-cell.is-on .atrank-shades-hex{ color:var(--accent); font-weight:700; }
/* The triangle under the selected swatch. One background and a clip-path, not a
   rotated square or a border trick: it has to point up from the middle of a cell
   whose width is decided by the grid. */
.atrank-shades-cell.is-on .atrank-shades-mark{
  background:var(--accent);
  clip-path:polygon(calc(50% - 6px) 100%, 50% 2px, calc(50% + 6px) 100%);
}

/* ── Copy ──────────────────────────────────────────────────────────────────— */
.atrank-shades-actions{
  display:flex; gap:10px; align-items:flex-end; justify-content:center;
  flex-wrap:wrap; margin:10px 0 4px;
}
.atrank-shades-fmtbox{ flex:0 1 250px; }

/* ── The selected colour ───────────────────────────────────────────────────— */
.atrank-shades-detail{
  display:grid; grid-template-columns:120px minmax(0,1fr); align-items:stretch;
  max-width:420px; margin:10px auto 0;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--panel); box-shadow:var(--card-shadow);
}
.atrank-shades-big{ min-height:84px; }
.atrank-shades-facts{ margin:0; padding:10px 12px; display:grid; gap:2px; align-content:center; }
.atrank-shades-facts dt{ font-size:11px; font-weight:600; color:var(--dim); }
.atrank-shades-facts dd{
  margin:0 0 6px; font-family:var(--mono); font-size:15px; font-weight:600; color:var(--txt);
}
.atrank-shades-facts dd:last-of-type{ margin-bottom:0; }
.atrank-shades-detailnote{ grid-column:1 / -1; padding:0 12px 9px; text-align:center; }
@media (max-width:460px){
  .atrank-shades-detail{ grid-template-columns:1fr; }
  .atrank-shades-big{ min-height:90px; }
}.atrank-tool-root .atrank-notice {
	border-left-width: 3px;
}

/* ── Narrow ─────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .atrank-shades main{ padding:9px; }
.atrank-tool-root .atrank-btn-cta{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .atrank-shades *{ transition:none !important; animation:none !important; }
}