/* Colour palette tool (public/color-palette.js), 2026-10-27. New look only: --ui-* tokens in
   light and dark, 1px hairlines, 16px cards, pill buttons of one height per row, mono labels,
   purple only for what is selected. No glows, blur or gradients beyond the shared button gloss. */

.pal-work{padding-top:8px}
.pal-label{margin:0 0 8px;font:500 12px/16px var(--ui-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ui-faint)}
.pal-note{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--ui-dim)}
.pal-note a{color:var(--ui-link)}
.pal-none{font-size:13px;color:var(--ui-faint)}

/* ---- Small colour pills: a dot, a label, the hex ---- */
.pal-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 8px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-card);color:var(--ui-text);font:500 13px/1 var(--ui-font);cursor:pointer;white-space:nowrap;transition:border-color .15s}
.pal-chip:hover{border-color:var(--ui-line-strong)}
.pal-chip:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.pal-chip i{flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ui-line-strong)}
.pal-chip code{font:500 12.5px var(--ui-mono);color:var(--ui-dim)}
.pal-chip span+code{margin-left:2px}

/* ---- Segmented rows (styles, views, formats, themes) ---- */
.pal-modes,.pal-tabs,.pal-seg-row,.pal-pv-switch{display:flex;gap:2px;max-width:100%;padding:3px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-well);overflow-x:auto;scrollbar-width:none}
.pal-modes::-webkit-scrollbar,.pal-tabs::-webkit-scrollbar,.pal-seg-row::-webkit-scrollbar{display:none}
.pal-modes button,.pal-tabs button,.pal-seg-row button,.pal-pv-switch button{flex:none;height:32px;padding:0 14px;border:1px solid transparent;border-radius:999px;background:none;color:var(--ui-dim);font:500 14px/1 var(--ui-font);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:color .15s,background-color .15s}
.pal-modes button:hover,.pal-tabs button:hover,.pal-seg-row button:hover,.pal-pv-switch button:hover{color:var(--ui-text)}
:is(.pal-modes,.pal-seg-row,.pal-pv-switch) button[aria-checked=true],.pal-tabs button[aria-selected=true]{border-color:var(--ui-btn2-line);background:var(--ui-accent-soft);color:var(--ui-link)}
:is(.pal-modes,.pal-tabs,.pal-seg-row,.pal-pv-switch) button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}

/* ================================ Generator ================================ */
.pal-gen{scroll-margin-top:calc(var(--sp-header-height,56px) + 16px)}
.pal-gen-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:56px 0 16px;padding-top:40px;border-top:1px solid var(--ui-line)}
.pal-gen-head[hidden]{display:none}
.pal-gen-head h2{margin:0;font-size:28px;font-weight:500;letter-spacing:-.03em}
.pal-gen-head p{margin:0;font-size:14.5px;color:var(--ui-dim)}
.pal-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-card)}
.pal-toolbar #cp-generate{min-width:132px}
.pal-modes{flex:0 1 auto}
.pal-exports{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.ui .pal-exports .ft-btn{height:40px;padding:0 15px;font-size:15px;gap:7px}
.pal-exports .ft-btn img{width:14px;height:14px}

.pal-cols{display:flex;height:min(60vh,520px);min-height:340px;margin-top:12px;border:1px solid var(--ui-line);border-radius:16px;overflow:hidden}
.pal-col{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:22px 8px}
.pal-col-tools{display:flex;gap:6px;margin-bottom:auto}
.pal-col-tools button,.pal-pick{position:relative;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid color-mix(in srgb,currentColor 26%,transparent);border-radius:10px;background:color-mix(in srgb,currentColor 9%,transparent);color:inherit;cursor:pointer;transition:background-color .15s,opacity .15s}
.pal-col-tools button:hover,.pal-pick:hover{background:color-mix(in srgb,currentColor 18%,transparent)}
.pal-col-tools button[aria-pressed=true]{background:color-mix(in srgb,currentColor 24%,transparent);border-color:color-mix(in srgb,currentColor 45%,transparent)}
.pal-col-tools button:focus-visible,.pal-pick:focus-within{outline:2px solid currentColor;outline-offset:2px}
.pal-pick input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
@media (hover:hover){.pal-col-tools>*{opacity:0}.pal-col:hover .pal-col-tools>*,.pal-col:focus-within .pal-col-tools>*,.pal-col-tools button[aria-pressed=true]{opacity:1}}
.pal-hex{width:8ch;max-width:100%;padding:2px 0;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:inherit;font:600 clamp(16px,1.7vw,22px)/1.2 var(--ui-mono);letter-spacing:.02em;text-align:center;text-transform:uppercase}
.pal-hex:hover{border-bottom-color:color-mix(in srgb,currentColor 35%,transparent)}
.pal-hex:focus{outline:none;border-bottom-color:currentColor}
.pal-name{font-size:13.5px;font-weight:500;opacity:.85;text-align:center}
.pal-ratio{font:400 11.5px var(--ui-mono);opacity:.72;text-align:center}
.pal-copy{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:96px;height:34px;margin-top:4px;padding:0 13px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:999px;background:color-mix(in srgb,currentColor 10%,transparent);color:inherit;font:500 13.5px var(--ui-font);cursor:pointer;transition:background-color .15s}
.pal-copy:hover{background:color-mix(in srgb,currentColor 18%,transparent)}
.pal-copy:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ---- Views under the columns and in a site's result ---- */
.pal-views{margin-top:20px}
.pal-tabs{width:max-content}
.pal-panel{padding-top:16px}
.pal-panel:focus-visible{outline:2px solid var(--ui-accent);outline-offset:4px;border-radius:8px}

/* Preview: a small real UI in the palette's roles, light and dark side by side. */
.pal-pv-switch{display:none;width:max-content;margin-bottom:12px}
.pal-pvs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pal-pv-wrap{margin:0;min-width:0}
.pal-pv-wrap figcaption{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.pal-pv-wrap figcaption b{font-size:14px;font-weight:600}
.pal-pv-wrap figcaption span{font:400 12px var(--ui-mono);color:var(--ui-faint)}
.pal-pv{overflow:hidden;border:1px solid var(--pv-line);border-radius:14px;background:var(--pv-bg);color:var(--pv-t1);font:400 14px/1.5 var(--ui-font);box-shadow:0 0 0 1px var(--ui-line)}
.pv-nav{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--pv-line)}
.pv-nav b{margin-right:auto;font-size:14px;font-weight:600;color:var(--pv-t0)}
.pv-nav span{font-size:13px;color:var(--pv-t2)}
.pv-logo{width:18px;height:18px;margin-right:-8px;border-radius:5px;background:var(--pv-brand)}
/* Buttons in the site's own colours and corners (--pv-r from the measured button). */
.pv-btn,.pv-btn2{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:var(--pv-r,9px);font-size:13.5px;font-style:normal;font-weight:600;white-space:nowrap}
.pv-btn{background:var(--pv-p);color:var(--pv-on)}
.pv-btn2{border:1px solid var(--pv-b2-line);border-radius:var(--pv-r2,9px);background:var(--pv-b2);color:var(--pv-on2)}
.pv-sm{height:30px;padding:0 12px;font-size:12.5px}
.pv-hero{padding:22px 18px 18px}
/* A big coloured area of the first screen (a coloured hero, a banner) paints the hero. */
.pv-hero.has-hero{margin:0 0 18px;background:var(--pv-hero)}
.pv-hero.has-hero strong{color:var(--pv-h0)}
.pv-hero.has-hero p{color:var(--pv-h2)}
.pv-hero.has-hero u{color:var(--pv-hlink)}
.pv-tag{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:2px 10px 2px 8px;border:1px solid var(--pv-line);border-radius:999px;background:var(--pv-bg);color:var(--pv-t2);font-size:12px;font-weight:600}
.pv-tag i{width:8px;height:8px;border-radius:50%;background:var(--pv-brand)}
.pv-hero strong{display:block;font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--pv-t0)}
.pv-hero p{margin:8px 0 16px;color:var(--pv-t2)}
.pv-hero u{color:var(--pv-link);text-underline-offset:2px}
.pv-hero u.pv-plain{text-decoration:none;font-weight:600}
.pv-row{display:flex;flex-wrap:wrap;gap:8px}
.pv-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 18px 18px}
.pv-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px;border:1px solid var(--pv-line);border-radius:11px;background:var(--pv-s1)}
.pv-card b{font-size:13.5px;font-weight:600}
.pv-card small{font-size:12.5px;color:var(--pv-t3)}
.pv-field{margin-top:4px;padding:7px 10px;border:1px solid var(--pv-line);border-radius:8px;background:var(--pv-bg);font-size:12.5px;color:var(--pv-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-bar{display:block;height:8px;border-radius:4px;background:var(--pv-s2);overflow:hidden}
.pv-bar i{display:block;width:62%;height:100%;border-radius:4px;background:var(--pv-acc)}
.pv-dots{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:12px;font-weight:500;color:var(--pv-t2)}
.pv-dots span{display:inline-flex;align-items:center;gap:5px}
.pv-dots i{width:8px;height:8px;border-radius:50%}
/* The part you point at in the legend (or in the preview) is selected, in purple. */
.pal-pv .is-hl,.pal-pv.is-hl{outline:2px solid var(--ui-accent);outline-offset:2px}
.pal-pv.is-hl{outline-offset:3px}
.pv-hero.is-hl,.pv-cards .is-hl.pv-bar{outline-offset:-2px}

/* What each color does: every part of the preview, where its colour came from, both themes. */
.pal-key{margin-top:16px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-card);overflow:hidden}
.pal-key-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding:14px 16px 12px}
.pal-key-head h3{margin:0;font-size:15px;font-weight:600}
.pal-key-head p{margin:0;font-size:13px;color:var(--ui-dim)}
.pal-key-cols{display:flex;border-top:1px solid var(--ui-line);background:var(--ui-well)}
.pal-key-cols>div,.pal-key-list>li{display:grid;grid-template-columns:minmax(0,1fr) 124px 124px;align-items:center;gap:0 12px;padding:0 16px}
.pal-key-cols>div{flex:1;padding-block:8px;font:500 11.5px/1.4 var(--ui-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ui-faint)}
.pal-key-cols>div+div{display:none;border-left:1px solid var(--ui-line)}
.pal-key-cols small{display:block;font-size:11px;letter-spacing:0;text-transform:none}
.pal-key-list{margin:0;padding:0;list-style:none}
.pal-key-list>li{min-height:54px;padding-block:8px;border-top:1px solid var(--ui-line);break-inside:avoid;transition:background-color .12s}
.pal-key-list>li.is-hl{background:var(--ui-accent-soft)}
.pal-key-part{min-width:0}
.pal-key-part b{display:block;font-size:14px;font-weight:600}
.pal-key-part small{display:block;margin-top:1px;font-size:12.5px;line-height:1.4;color:var(--ui-faint);overflow-wrap:anywhere}
.pal-key-val{min-width:0}
/* Wide screens: two columns of rows, each under its own header. */
@media (min-width:1100px){
  .pal-key-cols>div+div{display:grid}
  .pal-key-list{columns:2;column-gap:0;column-rule:1px solid var(--ui-line)}
}
.pal-key .pal-chip{height:28px;padding:0 10px 0 6px;gap:6px}
.pal-key .pal-chip i{width:16px;height:16px}
.pal-key .pal-chip code{font-size:12px}

/* Contrast: the pairs a site uses, and the generator's grid of every pair. */
.pal-ct-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:10px}
.pal-ct-head b{font-size:16px;font-weight:600}
.pal-ct-head span{font-size:13.5px;color:var(--ui-dim)}
.pal-ct ul{margin:0;padding:0;list-style:none;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-card);overflow:hidden}
.pal-ct-row{display:grid;grid-template-columns:52px minmax(0,1fr) 72px 136px;align-items:center;gap:6px 14px;padding:12px 16px;border-top:1px solid var(--ui-line)}
.pal-ct-row:first-child{border-top:0}
.pal-ct-sample{display:grid;place-items:center;height:36px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--ui-line-strong);font:600 16px var(--ui-font)}
.pal-ct-what{min-width:0}
.pal-ct-what b{display:block;font-size:14px;font-weight:600}
.pal-ct-what small{display:block;margin-top:2px;font-size:12.5px;color:var(--ui-faint)}
.pal-ct-what code{font:12px var(--ui-mono);color:var(--ui-dim)}
.pal-ct-ratio{font:600 14px var(--ui-mono);white-space:nowrap}
.pal-ct-row .pal-ct-ratio{text-align:right}
.pal-ct-marks{display:flex;gap:6px}
.pal-mark{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 8px 0 6px;border-radius:999px;background:color-mix(in srgb,var(--ui-green) 13%,transparent);color:var(--ui-green);font:600 11.5px/1 var(--ui-mono);font-style:normal}
.pal-mark.is-no{background:color-mix(in srgb,var(--ui-red) 12%,transparent);color:var(--ui-red)}
.pal-ct-fix{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ui-dim)}
.pal-ct-fix>span{font:500 12.5px var(--ui-mono)}
.pal-mx-scroll{overflow-x:auto;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-card)}
.pal-mx table{width:100%;min-width:520px;border-collapse:collapse;table-layout:fixed}
.pal-mx th,.pal-mx td{padding:0;border:1px solid var(--ui-card);text-align:center}
.pal-mx thead th,.pal-mx tbody th{height:44px;font-weight:400}
.pal-mx thead th i,.pal-mx tbody th i{display:inline-block;width:14px;height:14px;margin-right:6px;border-radius:50%;vertical-align:-2px;box-shadow:inset 0 0 0 1px var(--ui-line-strong)}
.pal-mx code{font:500 11.5px var(--ui-mono);color:var(--ui-dim)}
.pal-mx tbody th{padding:0 10px;text-align:left;white-space:nowrap}
.pal-mx td{height:84px;vertical-align:middle}
.pal-mx td b{display:block;font-size:20px;font-weight:600;line-height:1.1}
.pal-mx-tag{display:inline-block;margin-top:6px;padding:2px 7px;border-radius:999px;background:var(--ui-card);color:var(--ui-text);font:500 11.5px/16px var(--ui-mono);white-space:nowrap}
.pal-mx-tag em{font-style:normal;font-weight:600;color:var(--ui-green)}
.pal-mx td.is-low .pal-mx-tag{color:var(--ui-dim)}
.pal-mx td.is-self{background:var(--ui-well)}
.pal-mx td.is-self .pal-mx-tag{background:none;color:var(--ui-faint)}
.pal-mx .pal-note{margin:0 0 10px}

/* Shades: 50–950 for each colour. */
.pal-scales{display:grid;gap:14px}
.pal-scale-name{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:14px}
.pal-scale-name i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ui-line-strong)}
.pal-scale-name b{font-weight:600}
.pal-scale-name code{font:12.5px var(--ui-mono);color:var(--ui-faint)}
.pal-scale-row{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));height:64px;border:1px solid var(--ui-line);border-radius:12px;overflow:hidden}
.pal-scale-row button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-width:0;padding:0 0 8px;border:0;cursor:pointer;font:600 11px var(--ui-mono)}
.pal-scale-row button code{font:500 10px var(--ui-mono);opacity:.8}
.pal-scale-row button.is-own::before{content:"";position:absolute;top:9px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:currentColor}
.pal-scale-row button:focus-visible{outline:2px solid currentColor;outline-offset:-4px}

/* ================================ A website's palette ================================ */
.pal-site:empty,.pal-next:empty{display:none}
.pal-site{scroll-margin-top:calc(var(--sp-header-height,56px) + 16px)}
.pal-head{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:center;scroll-margin-top:calc(var(--sp-header-height,56px) + 20px)}
.pal-head:not(:has(.pal-shot)){grid-template-columns:minmax(0,1fr)}
.pal-shot{margin:0;overflow:hidden;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-well)}
.pal-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.pal-kicker{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:400 13px var(--ui-mono);color:var(--ui-faint)}
.pal-kicker img{border-radius:4px}
.pal-head h2{margin:0;font-size:32px;font-weight:500;line-height:1.15;letter-spacing:-.03em}
.pal-sub{margin:8px 0 18px;font-size:15px;color:var(--ui-dim)}
.pal-actions{display:flex;flex-wrap:wrap;gap:8px}
.ui .pal-actions .ft-btn,.ui .pal-more .ft-btn{height:40px;font-size:15px;gap:7px}
.pal-actions .ft-btn img{width:15px;height:15px}

.pal-usage{margin-top:24px;padding:16px 18px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-card)}
.pal-usage-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:12px}
.pal-usage-head h3{margin:0;font-size:15px;font-weight:600}
.pal-usage-head p{margin:0;font:400 12.5px var(--ui-mono);color:var(--ui-faint)}
.pal-strip{display:flex;height:40px;overflow:hidden;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-well)}
.pal-seg{display:flex;align-items:center;min-width:3px;height:100%;padding:0 0 0 10px;overflow:hidden;border:0;border-right:1px solid var(--ui-line-strong);font:500 12px/1 var(--ui-mono);white-space:nowrap;cursor:pointer}
.pal-seg-other{color:var(--ui-dim)}
.pal-seg:last-child{border-right:0}
.pal-seg:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
.pal-seg-other{background:var(--ui-well2);cursor:default}
.pal-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;font-size:13px;color:var(--ui-dim)}
.pal-legend span{display:inline-flex;align-items:center;gap:6px}
.pal-legend i{width:10px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--ui-line-strong)}
.pal-legend b{font:500 12.5px var(--ui-mono);color:var(--ui-text)}
.pal-dot-other{background:var(--ui-well2)}
.pal-strip-mini{width:100%;min-width:120px;height:20px;border-radius:6px}
.pal-strip-mini .pal-seg{padding:0;cursor:default}

.pal-harmony{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px 28px;align-items:start;padding:16px 18px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-card)}
.pal-harmony-kind b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em}
.pal-harmony-kind span{display:block;margin-top:4px;font-size:14px;color:var(--ui-dim)}
.pal-harmony-ext>div{display:flex;flex-wrap:wrap;gap:8px}

.pal-roles{display:grid;gap:20px;margin-top:20px}
.pal-role h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:500 12px/16px var(--ui-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ui-faint)}
.pal-role h3 span{padding:0 7px;border:1px solid var(--ui-line);border-radius:999px;font-size:11px;letter-spacing:0}
.pal-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px}
.pal-swatch{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-card);color:var(--ui-text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,transform .15s var(--ui-ease)}
.pal-swatch:hover{border-color:var(--ui-line-strong)}
.pal-swatch:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.pal-chip-fill{position:relative;display:block;height:64px;border-bottom:1px solid var(--ui-line)}
.pal-chip-fill.is-alpha{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='12' height='12' fill='%23f2f2f4'/%3E%3Cpath d='M0 0h6v6H0zM6 6h6v6H6z' fill='%23cfcfd4'/%3E%3C/svg%3E") 0 0/12px 12px}
.pal-chip-fill em{position:absolute;inset:0}
.pal-swatch-text{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px 12px}
.pal-swatch-text b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-swatch-text code{font:500 12.5px var(--ui-mono);color:var(--ui-dim)}
.pal-swatch-text small{font-size:12px;color:var(--ui-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-swatch-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pal-swatch-meta em{padding:1px 7px;border:1px solid var(--ui-line);border-radius:999px;font:500 11px/18px var(--ui-mono);font-style:normal;color:var(--ui-dim)}
.pal-swatch-meta em.is-ok{color:var(--ui-green);border-color:color-mix(in srgb,var(--ui-green) 35%,transparent)}
.pal-swatch-meta em.is-low{color:var(--ui-red);border-color:color-mix(in srgb,var(--ui-red) 35%,transparent)}
.pal-stops{display:flex;flex-wrap:wrap;gap:8px}

/* Export */
.pal-ex-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:12px}
.pal-switch{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ui-dim);cursor:pointer}
.pal-switch input{appearance:none;flex:none;position:relative;width:38px;height:22px;margin:0;border:1px solid var(--ui-line-strong);border-radius:999px;background:var(--ui-well2);cursor:pointer;transition:background-color .15s,border-color .15s}
.pal-switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ui-card);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s var(--ui-ease)}
.pal-switch input:checked{border-color:var(--ui-accent);background:var(--ui-accent)}
.pal-switch input:checked::after{transform:translateX(16px)}
.pal-switch input:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.pal-code{overflow:hidden;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-card)}
.pal-code-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--ui-line);background:var(--ui-well)}
.pal-file{font:500 13px var(--ui-mono);color:var(--ui-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-code-actions{display:flex;gap:8px}
.ui .pal-code-actions .ft-btn{height:36px;padding:0 14px;font-size:14px;gap:6px}
.pal-code pre{max-height:360px;margin:0;padding:14px 16px;overflow:auto;font:400 13px/1.6 var(--ui-mono);color:var(--ui-text);tab-size:2}
.pal-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* Compare */
.pal-cmp-form{display:flex;gap:8px;max-width:620px;padding:6px;border:1px solid var(--ui-field-line);border-radius:999px;background:var(--ui-card)}
.pal-cmp-form input{flex:1;min-width:0;height:40px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ui-text);font:400 16px var(--ui-font)}
.pal-cmp-form input:focus{outline:none}
.pal-cmp-form:focus-within{border-color:var(--ui-accent)}
.pal-cmp-form[data-busy] button{opacity:.6;pointer-events:none}
.pal-cmp-msg{margin:8px 0 0;font-size:13.5px;color:var(--ui-red)}
.pal-cmp-out{margin-top:16px}
.pal-cmp-scroll{overflow-x:auto;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-card)}
.pal-cmp-table{width:100%;min-width:480px;border-collapse:collapse}
.pal-cmp-table th,.pal-cmp-table td{padding:10px 14px;border-top:1px solid var(--ui-line);text-align:left;vertical-align:middle;font-size:14px}
.pal-cmp-table thead td,.pal-cmp-table thead th{border-top:0}
.pal-cmp-table tbody th{width:28%;font-weight:500;color:var(--ui-dim)}
.pal-cmp-site{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--ui-mono)}
.pal-cmp-site img{border-radius:4px}

/* ================================ Phones and tablets ================================ */
@media (max-width:960px){
  .pal-exports{margin-left:0;width:100%}
  .pal-pvs{grid-template-columns:minmax(0,1fr)}
  .pal-pv-switch{display:flex}
  .pal-pvs[data-show="0"] .pal-pv-wrap[data-pv-i="1"],.pal-pvs[data-show="1"] .pal-pv-wrap[data-pv-i="0"]{display:none}
  .pal-head{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:22px}
  .pal-harmony{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pal-toolbar{display:grid;grid-template-columns:minmax(0,1fr)}
  .pal-toolbar #cp-generate{width:100%}
  .pal-exports{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ui .pal-exports .ft-btn{min-width:0;padding:0 8px}
  .pal-head{grid-template-columns:minmax(0,1fr)}
  .pal-shot{max-width:520px}
  .pal-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pal-actions .ft-btn,.pal-more .ft-btn{min-width:0;padding:0 10px}
  .pal-more{display:grid;grid-template-columns:minmax(0,1fr)}
  .pal-gen-head{display:block;margin-top:40px;padding-top:28px}
  .pal-gen-head p{margin-top:6px}
}
@media (max-width:600px){
  .pal-cols{flex-direction:column;height:auto;min-height:0}
  .pal-col{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"hex tools" "name copy";align-items:center;gap:4px 10px;min-height:96px;padding:12px 14px}
  .pal-col-tools{grid-area:tools;margin:0}
  .pal-col-tools>*{opacity:1}
  .pal-hex{grid-area:hex;justify-self:start;text-align:left;font-size:19px}
  .pal-name{grid-area:name;justify-self:start;text-align:left}
  .pal-ratio{display:none}
  .pal-copy{grid-area:copy;margin:0;height:34px;min-width:84px}
  .pal-col-tools button,.pal-pick{width:34px;height:34px}
  .pal-tabs{width:auto}
  .pal-tabs:has(>:nth-child(4)){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:22px}
  .pal-tabs:has(>:nth-child(4)) button{padding:0 6px}
  .pal-tabs button,.pal-modes button,.pal-seg-row button{height:36px;padding:0 13px}
  .pal-head h2{font-size:26px}
  .pal-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pal-chip-fill{height:56px}
  .pal-ct-row{grid-template-columns:44px minmax(0,1fr) auto;padding:12px}
  .pal-ct-row .pal-ct-ratio{text-align:left}
  .pal-ct-marks{grid-column:2/-1}
  .pal-scale-row{height:56px}
  .pal-scale-row button code{display:none}
  .pal-scale-row button{font-size:10px;padding-bottom:7px}
  .pal-ex-bar{align-items:stretch}
  .pal-seg-row{width:100%}
  .pal-code-bar{flex-wrap:wrap}
  .pal-cmp-form{border-radius:20px;flex-direction:column}
  .pal-cmp-form .ft-btn{width:100%}
  .pv-cards{grid-template-columns:minmax(0,1fr)}
  .pv-nav{gap:12px}
  .pv-nav .pv-hide{display:none}
  .pal-key-head{padding:12px 12px 10px}
  .pal-key-cols>div,.pal-key-list>li{grid-template-columns:minmax(0,1fr) 88px 88px;gap:0 6px;padding-inline:12px}
  .pal-key-list>li{min-height:0}
  .pal-key .pal-chip{padding:0 7px 0 5px;gap:4px}
  .pal-key .pal-chip i{width:12px;height:12px}
  .pal-key .pal-chip code{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.pal-chip,.pal-swatch,.pal-switch input,.pal-switch input::after,.pal-col-tools button,.pal-pick{transition:none}}