/* /color-shades-generator/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts).
   The only literal colours on the page are the generated swatches and the white / black "Aa" samples on
   them, set at run time from the colours themselves. */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}

.cs-input{padding:1rem}
.cs-grid{display:grid;gap:1rem}
@media(min-width:920px){.cs-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.75rem}}
.cs-sets{display:grid;gap:0.25rem;align-content:start}
.cs-sets .modes{margin-bottom:0.75rem}
.cs-sets .field[hidden]{display:none}

.cs-rows{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem}
.cs-row{display:grid;grid-template-columns:2.75rem minmax(0,1.6fr) minmax(0,1fr) auto;gap:0.5rem;align-items:center}
.cs-row:not(:has(.cs-rm)){grid-template-columns:2.75rem minmax(0,1.6fr) minmax(0,1fr)}
.cs-pick{width:2.75rem;height:2.75rem;padding:0.1875rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);cursor:pointer}
.cs-row input[type=text]{font-family:var(--mono);font-size:0.9375rem}
.cs-row input[aria-invalid=true]{border-color:var(--bad)}
.cs-name{color:var(--muted)}
.cs-rm{border:0;background:none;color:var(--muted);font:inherit;font-size:1.25rem;line-height:1;width:2rem;height:2.75rem;cursor:pointer;border-radius:0.375rem}
.cs-rm:hover{color:var(--bad)}
.cs-err{min-height:0;margin:0.375rem 0.125rem 0;font-size:0.8125rem;font-weight:600;color:var(--bad)}
.cs-err:empty{display:none}
.cs-acts{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem;align-items:flex-start}
.cs-acts .btn{flex:1 1 10rem}
.chip:disabled,.btn:disabled{opacity:.5;cursor:default}
.cs-paste{flex:0 1 auto}
.cs-paste[open]{flex:1 1 100%}
.cs-paste>summary{display:inline-block;list-style:none}
.cs-paste>summary::-webkit-details-marker{display:none}
.cs-paste[open]>summary{border-color:var(--accent);color:var(--accent)}
.cs-paste-l{display:block;margin:0.625rem 0 0.375rem;font-size:0.8125rem;color:var(--muted)}
.cs-paste textarea{font-family:var(--mono);font-size:0.875rem;margin-bottom:0.5rem}
.cs-mode-note{margin:0}

.note{font-size:0.8125rem;color:var(--muted);margin:0.75rem 0.125rem 0;line-height:1.5}
.cs-status{min-height:1.2em}
.cs-status.bad{color:var(--bad);font-weight:600}
.cs-legend{margin-top:0.25rem}

.cs-out{display:grid;gap:1.5rem;margin-top:0.75rem}
.cs-sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 0.625rem}
.cs-name-h{font-family:var(--mono);color:var(--ink);text-transform:none;letter-spacing:0;font-size:0.9375rem}
.cs-for{font-weight:500;text-transform:none;letter-spacing:0;color:var(--accent);margin-left:0.5rem}
.cs-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:0.625rem}
@media(max-width:420px){.cs-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem}}
.cs-tile{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:0.625rem;overflow:hidden;display:flex;flex-direction:column}
.cs-tile[data-pinned]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.cs-chip{position:relative;min-height:4.5rem;padding:0.5rem 0.625rem;display:flex;flex-direction:column;justify-content:space-between;gap:0.25rem;font-family:var(--mono)}
.cs-step{font-size:0.9375rem;font-weight:700}
.cs-tag{font-size:0.6875rem;font-weight:600}
.cs-samples{position:absolute;right:0.5rem;bottom:0.375rem;display:flex;gap:0.375rem;font-family:var(--sans);font-weight:700;font-size:1rem}
.cs-vals{display:flex;flex-direction:column;padding:0.375rem 0.375rem 0}
.cs-v{border:0;background:none;text-align:left;font-family:var(--mono);font-size:0.75rem;color:var(--ink);padding:0.3125rem 0.25rem;border-radius:0.3125rem;cursor:copy;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.cs-v:first-child{font-weight:700;font-size:0.8125rem}
.cs-v:hover{background:var(--accent-soft);color:var(--accent)}
.cs-cr{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.375rem;padding:0.25rem 0.625rem;font-size:0.75rem;color:var(--muted)}
.cs-cr:last-child{padding-bottom:0.5rem}
.cs-ratio{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.cs-badges{display:inline-flex;flex-wrap:wrap;gap:0.1875rem}
.cs-b{font-family:var(--mono);font-size:0.625rem;font-weight:700;padding:0.0625rem 0.3125rem;border:1px solid var(--ok);border-radius:0.25rem;color:var(--ok);white-space:nowrap}
.cs-b.cs-fail{border-color:var(--line-2);color:var(--muted);font-weight:500}

.cs-export{margin-top:1.5rem}
.cs-export .modes{margin-bottom:0.75rem}
.cs-code{font-family:var(--mono);font-size:0.8125rem;line-height:1.5;white-space:pre;overflow:auto;resize:vertical;min-height:10rem}
.cs-note-top{margin-top:0.5rem}
.cs-share{overflow-wrap:anywhere;font-family:var(--mono);font-size:0.75rem}
.cs-share[hidden]{display:none}
.cs-offscreen{position:fixed;left:-9999px;top:0}

.chip:focus-visible,.modes button:focus-visible,.btn:focus-visible,.cs-v:focus-visible,.cs-rm:focus-visible,.cs-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.explainer .cs-steps,.explainer .cs-cannot{color:var(--muted);font-size:0.9375rem;margin:0 0 0.75rem;padding-left:1.25rem}
.explainer .cs-steps li,.explainer .cs-cannot li{margin:0 0 0.5rem}
.explainer .cs-steps b,.explainer .cs-cannot b{color:var(--ink)}
.explainer table{max-width:none}
.explainer td code{font-size:0.8125rem;white-space:nowrap}