/* DS-16: canonical component CSS owns global base, controls, state, tables and shared surfaces. */
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fw-regular) var(--fs-m)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.17em}a:hover{color:var(--link)}
:where(.w,.wrap,.grid,.card-grid,.row2,.specs,.tl,.pal,.contrast,.kv)>*{min-width:0}
:where(img,svg,video,canvas){max-width:100%}
:where(button,input,select,textarea){font-family:var(--font-sans)}
:where(.card,.chip,.btn,.b,.solid,button,summary){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where(.btn,.b,.solid,.chip,button){min-height:44px}
:where(.field,.tl input,.tl select,.inputs input){min-width:0;max-width:100%;min-height:44px;box-sizing:border-box}
:where(button,[role=button],.btn)[aria-disabled=true],:where(button,[role=button]):disabled{opacity:.55;cursor:not-allowed}
:where(a,button,input,select,textarea,summary):focus-visible{outline:var(--focus-w) solid var(--link);outline-offset:3px}
:where(.card,.btn,.b,.solid,.chip,.theme-toggle){transition:transform var(--dur),background-color var(--dur),border-color var(--dur),box-shadow var(--dur)}
:where(.btn,.b,.solid,.chip):active{transform:translateY(1px)}
/* DS-50: shared visually-hidden instructions remain in the accessibility tree. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Brand & navigation */
.skip-link{position:fixed;inset-block-start:var(--sp-8);inset-inline-start:var(--page-gutter);z-index:100;transform:translateY(-200%);display:flex;align-items:center;padding:var(--sp-12) var(--sp-16);min-height:44px;background:var(--ink);color:var(--panel);border-radius:var(--r-m);text-decoration:none;font-weight:var(--fw-semi)}
.skip-link:focus-visible{transform:none}
:where(.w,.wrap) main:focus{outline:none}
:where(.site-header,header.top){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-12) var(--sp-24);padding:var(--sp-12) 0 var(--sp-24);border-bottom:1px solid var(--line)}
:where(.site-header,header.top) .site-brand{display:inline-flex;align-items:center;gap:var(--sp-12);min-height:44px;font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:-.045em;color:var(--ink);text-decoration:none;min-width:0;max-width:100%;white-space:normal}
:where(.site-header,header.top) .site-brand>span:last-child{min-width:0;overflow-wrap:anywhere}
.brand-mark{display:grid;flex:none;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);width:32px;height:32px;padding:var(--sp-4);border-radius:var(--r-s);background:var(--panel);box-shadow:var(--shadow-1)}
.brand-mark i{display:block;border-radius:var(--sp-4);background:var(--accent-blue)}
.brand-mark i:nth-child(2){background:var(--accent-coral)}.brand-mark i:nth-child(3){background:var(--accent-mint)}.brand-mark i:nth-child(4){background:var(--accent-yellow)}
:where(.site-header,header.top) nav{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4);font-size:var(--fs-s);font-weight:var(--fw-semi)}
:where(.site-header,header.top) nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--sp-8) var(--sp-12);border-radius:var(--r-s);color:var(--mute);text-decoration:none;white-space:nowrap}
:where(.site-header,header.top) nav a:hover,:where(.site-header,header.top) nav a[aria-current=page]{background:var(--surface);color:var(--ink)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--sp-8) var(--sp-16);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);color:var(--ink);font:var(--fw-semi) var(--fs-s) var(--font-sans);cursor:pointer}
.theme-toggle:hover{background:var(--surface);border-color:var(--mute)}
/* Universal controls */
:where(.btn,.b,.solid,button.b){display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);min-height:44px;padding:var(--sp-12) var(--sp-16);border-radius:var(--r-m);font:var(--fw-semi) var(--fs-s) var(--font-sans);text-align:center;text-decoration:none;cursor:pointer}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.btn--primary,button.b{border:1px solid var(--ink);background:var(--ink);color:var(--bg)}
.btn--secondary{border:1px solid var(--line);background:var(--panel);color:var(--ink)}
:where(.btn,.b,.solid,button.b):not(:disabled):not([aria-disabled=true]):hover{transform:translateY(-1px);box-shadow:var(--shadow-1)}
.field,.tl input[type=text],.tl input[type=number],.tl select{width:100%;min-height:50px;padding:var(--sp-12) var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel);color:var(--ink);font:var(--fw-semi) var(--fs-m) var(--font-sans)}
:where(.field,.tl input,.tl select)::placeholder{color:var(--mute);font-weight:var(--fw-regular)}
:where(.field,.tl input[type=text],.tl input[type=number],.tl select):focus{border-color:var(--link)}
:where(.field,.tl input[type=text],.tl input[type=number],.tl select):not(:disabled):hover:not(:focus){border-color:var(--mute)}
:where(.field,.tl input[type=text],.tl input[type=number],.tl select):disabled{opacity:.62;cursor:not-allowed}
.chip{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:var(--sp-8) var(--sp-16);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);color:var(--ink);font:var(--fw-semi) var(--fs-s) var(--font-sans);cursor:pointer}
.chip:hover{background:var(--surface);border-color:var(--mute)}
.chip[aria-pressed=true],.tabs button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* Panels/cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--sp-16)}
.card{display:block;min-width:0;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);color:var(--ink);box-shadow:var(--shadow-1);font:inherit;text-align:left;text-decoration:none;overflow:hidden}
a.card,button.card{cursor:pointer}
:where(a.card,button.card):hover{transform:translateY(-3px);border-color:var(--link);box-shadow:var(--shadow-2);color:var(--ink);text-decoration:none}
.card b{display:block;margin-bottom:var(--sp-8);font-size:var(--fs-l);line-height:1.35;letter-spacing:-.025em}
.card span{display:block;color:var(--mute);font-size:var(--fs-s)}
.card em{display:inline-block;margin-top:var(--sp-8);padding:var(--sp-4) var(--sp-8);border-radius:var(--r-pill);border:1px solid var(--line);font:var(--fw-semi) var(--fs-xs) var(--font-sans);font-style:normal}
.card-grid--directory{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:var(--sp-16)}
.card-grid--directory .card{position:relative;display:flex;flex-direction:column;justify-content:flex-start;min-height:8.5rem;gap:var(--sp-8);padding:clamp(var(--sp-16),2vw,var(--sp-24));border-top:1px solid var(--line);box-shadow:var(--shadow-flat)}
.card-grid--directory .card::after{content:'↗';position:absolute;inset-block-start:var(--sp-16);inset-inline-end:var(--sp-16);display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--fs-m);color:var(--link);background:var(--surface)}
.card-grid--directory .card b{padding-inline-end:var(--sp-32)}
.card-grid--directory .card span{max-width:45ch;line-height:1.65}
/* Directory card: scan-friendly title, secondary description, decisive affordance. */
.card-grid--directory .card:hover{box-shadow:var(--shadow-1);border-color:var(--link);background:var(--panel)}
.card-grid--color{grid-template-columns:repeat(auto-fill,minmax(min(100%,11.75rem),1fr));gap:var(--sp-16)}
.card--color{padding:0;border-radius:var(--r-m);box-shadow:var(--shadow-flat)}
.card--color i{display:block;height:7rem}
.card-swatch{position:relative;display:block;width:100%;height:7rem;padding:0;border:0;border-radius:0;cursor:pointer;transition:filter var(--dur)}
.card-swatch:hover{filter:brightness(.96)}
.card-swatch:focus-visible{outline-offset:-4px}
.card--color:focus-within{border-color:var(--link);box-shadow:var(--shadow-1)}
.card--color span{display:block;margin:0;padding:var(--sp-12) var(--sp-16) var(--sp-4);color:var(--ink);font-size:var(--fs-m);line-height:1.45;font-weight:var(--fw-semi)}
.card--color a{color:inherit;text-decoration:none}.card--color a:hover{color:var(--link);text-decoration:underline}
.card--color small{display:block;padding:var(--sp-4) 0 var(--sp-8);color:var(--mute);font:var(--fw-regular) var(--fs-s)/1.45 var(--font-mono);overflow-wrap:anywhere}
/* Search directory navigation: one component for all color-family links. */
.color-family-nav{display:grid;gap:var(--sp-12);margin:var(--sp-24) 0;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);box-shadow:var(--shadow-1)}
.color-family-nav>b{display:block;font-size:var(--fs-m);font-weight:var(--fw-bold)}
.color-family-links{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.color-family-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--sp-8) var(--sp-16);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-size:var(--fs-s);font-weight:var(--fw-semi);text-decoration:none}
.color-family-links a:hover,.color-family-links a:focus-visible{border-color:var(--link);color:var(--link);background:var(--panel)}
/* Secondary interface & data */
.note{color:var(--mute);font-size:var(--fs-s)}
.badge-list{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.badge{display:inline-flex;align-items:center;padding:var(--sp-4) var(--sp-12);border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:var(--fw-semi);background:var(--panel)}
.badge--off{opacity:.78;border-style:dashed}
.kv{display:grid;gap:var(--sp-8);min-width:0}
.kv div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4) var(--sp-12);align-items:center;padding:var(--sp-12) var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel)}
.kv b{grid-column:1;grid-row:1;color:var(--mute);font-size:var(--fs-xs);font-weight:var(--fw-semi);text-transform:uppercase;letter-spacing:.035em}
.kv code{grid-column:1;grid-row:2;min-width:0;color:var(--ink);font:var(--fw-semi) var(--fs-s)/1.45 var(--font-mono);overflow-wrap:anywhere}
.kv button{grid-column:2;grid-row:1/3;min-width:5rem;min-height:44px;padding:var(--sp-8) var(--sp-12);border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink);font:var(--fw-semi) var(--fs-s) var(--font-sans);cursor:pointer}
.kv button:hover{border-color:var(--link);background:var(--panel)}
.kv>a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-s)}
.specs{display:flex;flex-wrap:wrap;gap:var(--line-w);margin:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-m);background:var(--line)}
.specs div{flex:1 1 14.5rem;min-width:0;padding:var(--sp-12) var(--sp-16);border:0;border-radius:0;background:var(--panel)}
.specs dt{color:var(--mute);font-size:var(--fs-s);font-weight:var(--fw-semi);letter-spacing:0}
.specs dd{margin:var(--sp-4) 0 0;font:var(--fw-semi) var(--fs-m)/1.5 var(--font-mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.specs dd a{font-family:var(--font-sans)}
/* WCAG sample is exact user data; the result panel always uses design-system colors. */
.cbox{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);box-shadow:var(--shadow-1)}
.cbox__sample{display:flex;align-items:center;justify-content:center;min-height:8rem;padding:var(--sp-24);font-size:var(--fs-2xl);font-weight:var(--fw-bold);line-height:var(--lh-tight)}
.cbox__content{min-width:0;padding:var(--sp-16) var(--sp-16) var(--sp-24);color:var(--ink);background:var(--panel)}
.cbox__summary{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-8);font-size:var(--fs-m)}
.cbox__ratio{font:var(--fw-bold) var(--fs-l)/1.35 var(--font-mono);font-variant-numeric:tabular-nums}
.cbox__advice{margin:var(--sp-8) 0 0;color:var(--mute);font-size:var(--fs-s);line-height:1.5}
.cbox .badge-list{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-16)}
.cbox .badge-list .badge{display:inline-flex;align-items:center;min-height:36px;width:auto;max-width:100%;margin:0;padding:var(--sp-8) var(--sp-12);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-size:var(--fs-xs);line-height:1.4;font-weight:var(--fw-semi);white-space:normal;opacity:1;text-decoration:none}
.cbox .badge-list .badge--off{border-style:dashed;opacity:1;text-decoration:none}
/* Tool contrast output: sample remains literal, guidance stays on a neutral surface. */
.tool-result-badges .badge--off{opacity:1;text-decoration:none;border-style:dashed}

/* Readable metadata for the four pre-rendered contrast previews on color detail pages. */
.pv.pv--wcag{display:flex;flex-direction:column;justify-content:space-between;gap:0;min-height:10rem;padding:0;overflow:hidden}
.pv--wcag>b{display:flex;flex:1;align-items:center;justify-content:center;min-height:6rem;padding:var(--sp-16);font-size:var(--fs-2xl);line-height:1.2}
.pv--wcag>p{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-8);width:100%;margin:0;padding:var(--sp-12) var(--sp-16);background:var(--panel);color:var(--ink);font-size:var(--fs-s);font-weight:var(--fw-semi);line-height:1.5}
.pv--wcag-status{display:inline-block;padding:var(--sp-4) var(--sp-8);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-size:var(--fs-xs);white-space:normal}

.swatches{display:flex;min-height:4rem;overflow:hidden;border-radius:var(--r-m)}
.swatches--sm{min-height:3.5rem}.swatches--lg{min-height:6rem}
.swatches>*{display:flex;align-items:end;justify-content:center;flex:1;min-width:0;padding:var(--sp-12) var(--sp-4);border:0;font:var(--fw-semi) var(--fs-xs)/1.4 var(--font-mono);overflow-wrap:anywhere}
.swatches>button{cursor:pointer}
.swatches--wrap{flex-wrap:wrap}.swatches--wrap>*{flex:1 0 5.5rem;min-height:4.5rem}
.pv{min-width:0;min-height:8.5rem;padding:var(--sp-24);display:grid;align-content:center;gap:var(--sp-8);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-1)}
.pv p{margin:0}
.pv>:where(b,strong,code){min-width:0;max-width:100%;overflow-wrap:anywhere}
.toc{margin:var(--sp-24) 0 var(--sp-32);padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel)}
.toc>b{display:block;margin-bottom:var(--sp-8);font-size:var(--fs-s)}
.toc ol{margin:0;padding-inline-start:var(--sp-24);columns:2 16rem;column-gap:var(--sp-32)}
.toc li{padding:var(--sp-4) 0;break-inside:avoid;font-size:var(--fs-s)}
.toc a{color:var(--mute)}.toc a:hover{color:var(--link)}
.toc--color ol{columns:3 12rem}
/* DS-60: on small screens, long color-detail indices become accessible
   horizontal quick links rather than a page-length vertical link list. */
/* Compact, immediately navigable family index on long palette pages */
.toc--families>b{margin-bottom:var(--sp-16);font-size:var(--fs-m)}
.toc--families ol{display:flex;flex-wrap:wrap;gap:var(--sp-8);padding:0;margin:0;list-style:none;columns:auto}
.toc--families li{padding:0;margin:0}
.toc--families a{display:inline-flex;align-items:center;min-height:44px;padding:var(--sp-8) var(--sp-12);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-weight:var(--fw-semi);text-decoration:none}
.toc--families a:hover{border-color:var(--link);background:var(--panel);color:var(--link)}
.toc--families-hint{display:none;margin:var(--sp-8) 0 0;color:var(--mute);font-size:var(--fs-xs)}
.tbl-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel)}
/* Visible small-screen hint: data tables retain their column widths instead of squeezing text. */
@media(max-width:560px){.tbl-wrap.is-hscroll::before{content:"↔ Cuộn ngang để xem đủ bảng";position:sticky;left:0;display:block;width:max-content;max-width:100%;padding:var(--sp-8) var(--sp-16);border-bottom:1px solid var(--line);background:var(--panel);color:var(--mute);font-size:var(--fs-xs);font-weight:var(--fw-semi)}}
.tbl{width:100%;min-width:34rem}
/* DS-49: the same readable column measure and quiet rows on editorial tables.
   Scroll within the bordered table, never squeeze a 3-column guide to 250px. */
.tbl-wrap>table:not(.tbl){min-width:34rem}
.tbl-wrap>table:not(.tbl) tbody tr:nth-child(even)>:is(th,td){background:var(--table-stripe)}
.tbl-wrap>table:not(.tbl) tbody tr:last-child>:is(th,td){border-bottom:0}
/* DS-47: a single quiet table design for all data surfaces, including WCAG.
   The first (all-TH) row is the header even in legacy JSON lacking THEAD. */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;vertical-align:middle;padding:var(--sp-16);border-bottom:1px solid var(--line);overflow-wrap:anywhere;font-size:var(--fs-s);line-height:1.5}
th{background:var(--surface);color:var(--ink);font-weight:var(--fw-semi)}
.tbl tr:first-child>th{background:var(--surface);font-weight:var(--fw-bold)}
.tbl tr:not(:first-child)>th{background:transparent;font-weight:var(--fw-semi)}
.tbl tr:nth-child(even)>:is(th,td){background:var(--table-stripe)}
.tbl tr:last-child>:is(th,td){border-bottom:0}
.tbl-wrap .badge{display:inline-flex;align-items:center;gap:var(--sp-8);min-height:32px;padding:var(--sp-4) var(--sp-12);border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:var(--fs-s);font-weight:var(--fw-semi);white-space:nowrap}
.tbl-wrap .badge:not(.badge--off)::before{content:'✓';color:var(--link);font-weight:var(--fw-bold)}
.tbl-wrap .badge--off::before{content:'×';color:var(--mute);font-weight:var(--fw-bold)}
pre{margin:0;max-width:100%;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);overflow-x:auto;font:var(--fw-regular) var(--fs-s)/var(--lh-body) var(--font-mono)}
/* Code-block toolbar is inserted by the sole shared clipboard owner. */
.code-block{max-width:100%;margin:var(--sp-16) 0 var(--sp-24);border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel);overflow:hidden}
.code-block__toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12) var(--sp-8) var(--sp-16);background:var(--surface);border-bottom:1px solid var(--line)}
.code-block__label{font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--mute)}
.code-block__copy{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);min-width:min(100%,9.25rem);min-height:44px;padding:var(--sp-8) var(--sp-12);border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);color:var(--ink);font:var(--fw-semi) var(--fs-s) var(--font-sans);cursor:pointer}
.code-block__copy[aria-busy="true"]{opacity:.7;cursor:progress}
.code-block__copy:hover{border-color:var(--link);color:var(--link)}
.code-block__copy svg{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.code-block>pre{margin:0;padding:var(--sp-24);border:0;border-radius:0;background:var(--panel);overflow-x:auto;scrollbar-gutter:auto;white-space:pre;font:var(--fw-regular) var(--fs-s)/1.8 var(--font-mono);tab-size:2}
.code-block>pre code{padding:0;border:0;background:transparent;border-radius:0;color:inherit;font:inherit;white-space:inherit}
.code-block>pre:focus-visible,.tbl-wrap:focus-visible{outline:var(--focus-w) solid var(--link);outline-offset:-3px}
.im{max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-m)}
.dot{display:inline-block;width:1.25rem;height:1.25rem;vertical-align:middle;border:1px solid var(--line);border-radius:var(--r-s)}
:where(article,.w>main) h3{margin:var(--sp-24) 0 var(--sp-8);font-size:var(--fs-xl);line-height:1.4}
:where(article,.w>main) p{overflow-wrap:break-word}
:where(article,.w>main) code{overflow-wrap:anywhere}
/* FAQ: one shared accordion across homepage, color pages, tools and guides. */
details{max-width:100%;margin:0 0 var(--sp-12);padding:0 var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel)}
details[open]{border-color:var(--link)}
summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);min-width:0;overflow-wrap:anywhere;min-height:56px;padding:var(--sp-12) 0;list-style:none;cursor:pointer;font-weight:var(--fw-semi);line-height:1.5}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:var(--r-s);background:var(--surface);color:var(--ink);font-size:var(--fs-xl);font-weight:var(--fw-regular);line-height:1}
details[open]>summary::after{content:'−';background:var(--ink);color:var(--bg)}
details> :where(p,ul,ol,div):not(summary){margin:0 0 var(--sp-16);color:var(--mute)}
details> :where(ul,ol){padding-left:var(--sp-24)}
.page-head{margin:var(--sp-16) 0 var(--sp-32)}
.page-head h1{max-width:24ch;margin:0 0 var(--sp-12);font-size:var(--fs-hero-page);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:-.045em}.page-head p{max-width:var(--detail-prose-rail);margin:0;color:var(--mute);font-size:var(--fs-l);line-height:1.65}
/* Shared editorial advisory. Keep the entire block aligned to the content rail. */
.reference-advisory{display:block;width:100%;min-width:0;margin:var(--sp-16) 0 var(--sp-24);padding:var(--sp-16) var(--sp-24);border:1px solid var(--line);border-inline-start:4px solid var(--brand);border-radius:var(--r-m);background:var(--panel);color:var(--ink)}
.reference-advisory p{max-width:100%;margin:0;line-height:1.7}
.reference-advisory strong{font-weight:var(--fw-bold)}

.tl{padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel)}
.palette-bar{display:grid;gap:var(--sp-16);margin:var(--sp-24) 0;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel)}
.palette-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8)}
.palette-row>.note{flex-basis:100%;font-weight:var(--fw-semi)}
.palette-group h2,.palette-group h3{margin:var(--sp-32) 0 var(--sp-12);font-size:var(--fs-xl)}
.palette-group{min-width:0}
.palette-empty{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-16);margin:var(--sp-16) 0;padding:var(--sp-24);border:1px dashed var(--line);border-radius:var(--r-l);background:var(--panel)}
.palette-empty p{margin:0;color:var(--mute)}
.palette-list .card-grid--color{margin-bottom:var(--sp-24)}
/* Nearest-color results are swatch cards, not unstructured text rows. */
.nearest-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--sp-12);margin-top:var(--sp-16)}
.nearest-color{display:grid;grid-template-columns:1fr auto;align-content:start;align-items:center;gap:var(--sp-12);min-width:0;padding:var(--sp-12);border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel)}
.nearest-color__swatch{grid-column:1/-1;display:block;min-height:5.5rem;border-radius:var(--r-s);border:1px solid var(--line)}
.nearest-color__info{display:grid;gap:var(--sp-4);min-width:0}
.nearest-color__info b{font-size:var(--fs-s);line-height:1.35}
.nearest-color__info code{font:var(--fw-regular) var(--fs-xs)/1.5 var(--font-mono);color:var(--mute);overflow-wrap:anywhere}
.nearest-color>.btn{align-self:center}
.form-message--error{color:var(--ink);padding:var(--sp-12) var(--sp-16);border:1px solid var(--accent-coral);border-radius:var(--r-s);background:var(--surface)}
.field[aria-invalid=true]{border-color:var(--accent-coral);outline-color:var(--accent-coral)}
.toast{position:fixed;left:50%;bottom:calc(var(--sp-24) + env(safe-area-inset-bottom,0px));z-index:99;transform:translateX(-50%);max-width:calc(100% - var(--sp-32));padding:var(--sp-12) var(--sp-24);border-radius:var(--r-pill);background:var(--ink);color:var(--bg);font-size:var(--fs-s);text-align:center;opacity:0;pointer-events:none;transition:opacity var(--dur)}.toast.on{opacity:1}
/* DS-57: screenshot-guided UI refinement. Keep tertiary platform code behind
   native disclosure; essential CSS examples remain immediately visible. */
.color-code-more{width:100%;margin:var(--sp-24) 0;padding:var(--sp-8) var(--sp-24);background:var(--panel)}
.color-code-more>summary{font-size:var(--fs-m);font-weight:var(--fw-semi)}
.color-code-more[open]{padding-bottom:var(--sp-24)}
.color-code-more>h3{margin:var(--sp-24) 0 var(--sp-8);font-size:var(--fs-l)}
.color-code-more>.code-block{margin:0 0 var(--sp-16)}
.color-code-more>.code-block:last-child{margin-bottom:0}
/* Converter: tighter first-task focus and readable copyable output, without
   changing shared palettes, forms or other tools. */
.tool-workspace--converter{gap:var(--sp-16);padding:var(--sp-24)}
.tool-workspace--converter>label{gap:var(--sp-8)}
.tool-workspace--converter .converter-hint{margin:calc(var(--sp-12)*-1) 0 0;font-size:var(--fs-s);line-height:1.65;color:var(--mute)}
.converter-hint code{padding:var(--sp-4) var(--sp-8);border-radius:var(--r-s);background:var(--surface);font:var(--fw-semi) var(--fs-xs) var(--font-mono)}
.tool-workspace--converter .converter-error:empty{display:none}
.tool-workspace--converter .converter-error:not(:empty){margin:0;padding:var(--sp-12) var(--sp-16);border:1px solid var(--accent-coral);border-radius:var(--r-s);background:var(--surface);color:var(--ink)}
.tool-workspace--converter .tool-output-heading{margin-top:var(--sp-4);padding-top:var(--sp-16)}
.tool-workspace--converter .tool-result-grid{gap:var(--sp-16);grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);align-items:start}
.tool-workspace--converter .tool-result-grid .pv{min-height:clamp(13rem,22vw,17rem);align-self:start}
.tool-workspace--converter #cv-out{gap:var(--sp-8)}
.tool-workspace--converter #cv-out>div{padding:var(--sp-8) var(--sp-16);column-gap:var(--sp-16)}
.tool-workspace--converter #cv-out .chip{grid-row:1 / span 2;grid-column:2;align-self:center}
.tool-workspace--converter #cv-out b{grid-column:1;grid-row:1;font-size:var(--fs-xs);letter-spacing:.025em}
.tool-workspace--converter #cv-out code{grid-column:1;grid-row:2;font-size:var(--fs-s);overflow-wrap:anywhere}
.tool-workspace--converter #cv-out>a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-s);font-weight:var(--fw-semi);color:var(--link)}
@media(max-width:560px){
 .color-code-more{padding-inline:var(--sp-16)}
 .tool-workspace--converter{padding:var(--sp-16)}
 .tool-workspace--converter .tool-result-grid{grid-template-columns:minmax(0,1fr)}
 .tool-workspace--converter .tool-result-grid .pv{min-height:11rem}
}
/* Color detail */
.color-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-16);padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);box-shadow:var(--shadow-1)}
.color-hero__info{display:flex;align-content:center;align-items:center;flex-wrap:wrap;gap:var(--sp-12);min-width:0;padding:clamp(16px,2.6vw,32px)}
.color-hero__info::before{content:'HỒ SƠ MÀU SẮC';flex-basis:100%;font-size:var(--fs-xs);letter-spacing:.13em;font-weight:var(--fw-bold);color:var(--link)}
.color-hero__info h1{flex-basis:100%;margin:0;font-size:var(--fs-hero-page);letter-spacing:-.045em;overflow-wrap:anywhere}
.color-hero .color-hero__info p{flex-basis:100%;max-width:56ch;margin:0 0 var(--sp-16);color:var(--mute);font-size:var(--fs-m);font-weight:var(--fw-regular)}
.color-hero__preview{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-24);min-height:18rem;padding:var(--sp-32);border-radius:var(--r-l);overflow-wrap:anywhere}
.color-hero__preview strong{font:var(--fw-bold) clamp(2.1rem,4vw,4.5rem)/1.1 var(--font-mono);letter-spacing:-.07em}
.color-hero__sample-label,.color-hero__sample-caption{font-size:var(--fs-s);font-weight:var(--fw-semi)}
/* Workspaces and controls */
.tool-workspace{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-24);padding:clamp(16px,2.8vw,36px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);box-shadow:var(--shadow-1)}
.tool-workspace>label{gap:var(--sp-12)}
.tool-workspace .row2{gap:var(--sp-16)}
.tool-workspace .in input[type=text]{flex:1;min-width:0}
.tool-workspace .pv{min-height:11rem}
.tool-workspace [role=status]:not(.toast){min-height:1.5em}
.tool-output-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-4) var(--sp-16);padding-top:var(--sp-24);margin-top:var(--sp-8);border-top:1px solid var(--line)}
.tool-output-heading h2{margin:0;font-size:var(--fs-xl);line-height:1.35}
.tool-output-heading p{flex:1 1 15rem;max-width:100%;margin:0;color:var(--mute);font-size:var(--fs-s)}
.tool-result-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:var(--sp-16);min-width:0;align-items:stretch}
.tool-result-grid>*{min-width:0}.tool-result-grid .kv{align-content:start}.tool-result-grid .pv{min-height:18rem}
.tool-result-grid .tool-result-preview{display:flex;align-items:center;justify-content:center;text-align:center}
.tool-preview-code{display:block;max-width:100%;font:var(--fw-bold) var(--fs-2xl)/var(--lh-tight) var(--font-mono);letter-spacing:-.04em;overflow-wrap:anywhere}
.tool-workspace .tool-result-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:var(--sp-8)}
/* DS-64: contrast preview and compliance summary share a single result stage.
   Keep every WCAG verdict and the live status in document order. */
.contrast-result-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch;gap:var(--sp-16);min-width:0}
.contrast-result-grid>*{min-width:0}
.contrast-result-grid .pv{min-height:15rem;box-shadow:var(--shadow-flat)}
.contrast-result-data{display:grid;align-content:start;gap:var(--sp-12);min-width:0}
.contrast-result-ratio{margin:0;min-height:0;padding:var(--sp-12) var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);font-size:var(--fs-m);line-height:1.5;font-weight:var(--fw-semi);font-variant-numeric:tabular-nums}
.contrast-result-grid .tool-result-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)}
.contrast-result-grid .tool-result-badges .badge{min-width:0;min-height:44px;padding:var(--sp-8) var(--sp-12);line-height:1.4;overflow-wrap:anywhere}
.tool-workspace .tool-result-badges .badge{display:flex;align-items:center;min-height:44px;background:var(--surface);border-radius:var(--r-m)}
.tool-workspace .tool-code-output{border:1px solid var(--line)}
.tool-workspace .tool-color-grid,.tool-workspace #im-out .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,7rem),1fr));gap:var(--sp-12);min-height:0;overflow:visible}
.tool-workspace .tool-color-grid>button,.tool-workspace #im-out .swatches>button{display:flex;align-items:flex-end;justify-content:center;min-width:0;min-height:7.5rem;padding:var(--sp-12) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-m);font:var(--fw-semi) var(--fs-s)/1.45 var(--font-mono);text-align:center;overflow-wrap:anywhere;cursor:pointer}
/* DS-65: original palette is an anchor; three simulations become equal,
   comparable cards. Use the same HEX positions across all four groups. */
.tool-workspace .tool-inline-status{margin:0;min-height:0}
.tool-workspace .tool-inline-status:empty{display:none}
.tool-cvd-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:var(--sp-12);min-width:0}
.tool-cvd-list .cvr{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--sp-12);min-width:0;padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel)}
.tool-cvd-list .cvr>b{display:block;min-width:0;font-size:var(--fs-m);line-height:1.4;font-weight:var(--fw-semi)}
.tool-cvd-list .cvr--original{grid-column:1/-1;background:var(--surface);border-color:var(--line)}
.tool-cvd-list .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8);min-width:0;min-height:0;overflow:visible;border-radius:0}
.tool-cvd-list .swatches>span{display:flex;align-items:end;justify-content:center;min-width:0;min-height:5rem;padding:var(--sp-12) var(--sp-4);border-radius:var(--r-s);font:var(--fw-semi) var(--fs-xs)/1.4 var(--font-mono);white-space:nowrap;overflow:visible}
.tool-cvd-list .cvr--original .swatches{grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr))}
.tool-matrix{padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-m);overflow-x:auto;max-width:100%}
/* DS-20: comparison sample deliberately reflects true colors; decision lives on neutral surface. */
.tool-matrix .matrix-result-cell{min-width:9rem;padding:var(--sp-8);background:var(--panel);color:var(--ink);vertical-align:top}
.tool-matrix .matrix-sample{display:flex;align-items:center;justify-content:center;min-height:3.25rem;border-radius:var(--r-s);font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.tool-matrix .matrix-result-detail{display:grid;gap:var(--sp-4);padding:var(--sp-8) var(--sp-4);background:var(--panel);color:var(--ink)}
.tool-matrix .matrix-result-detail strong{font-family:var(--font-mono);font-size:var(--fs-s);font-variant-numeric:tabular-nums}
.tool-matrix .matrix-result-verdict{color:var(--mute);font-size:var(--fs-xs);line-height:1.5}
/* DS-51: keep matrix row/column color labels horizontal on touch screens.
   The table scrolls in its wrapper instead of crushing the sticky row header. */
.tool-matrix table{min-width:100%;width:max-content}
.tool-matrix th{white-space:nowrap;overflow-wrap:normal}
.tool-matrix th:first-child{min-width:9rem;position:sticky;left:0;z-index:1;background:var(--surface)}
/* DS-44 image picker: one shared component owner; all colors from system tokens.
   Cropped pixels are shown inside a responsive preview, never via page-wide zoom. */
.image-upload-zone{display:grid;gap:var(--sp-12);justify-items:start;min-width:0;padding:var(--sp-24);border:2px dashed var(--line);border-radius:var(--r-l);background:var(--surface);cursor:default}
.image-upload-zone.is-dragging{border-color:var(--link);background:var(--panel)}
.image-upload-zone strong{font-size:var(--fs-l);line-height:1.35}
.image-upload-zone p{margin:0;color:var(--mute);font-size:var(--fs-s);line-height:1.6}
.image-upload-zone>label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--sp-8) var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel);color:var(--ink);font:var(--fw-semi) var(--fs-s) var(--font-sans);cursor:pointer}
.image-upload-zone:has(input[type=file]:focus-visible)>label{outline:var(--focus-w) solid var(--link);outline-offset:3px}
.image-upload-zone input[type=file]{position:absolute;width:1px;height:1px;min-height:0;padding:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap;opacity:0}
.image-preview-stage{position:relative;align-self:flex-start;max-width:100%;width:fit-content;border-radius:var(--r-m)}
.image-preview-stage .im{display:block;width:auto;max-width:100%;height:auto;cursor:crosshair;touch-action:manipulation}
.image-pixel-marker{position:absolute;width:1.35rem;height:1.35rem;border:2px solid var(--panel);border-radius:var(--r-pill);box-shadow:var(--shadow-1);outline:2px solid var(--ink);transform:translate(-50%,-50%);pointer-events:none}
.image-picked{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-16);min-width:0}
.image-loupe{width:132px;height:132px;max-width:100%;flex:none;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);image-rendering:pixelated}
.image-picked-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12);min-width:0;flex:1}
.image-picked-actions :where(button,a){min-width:0;max-width:100%;overflow-wrap:anywhere}

.image-point-controls{display:flex;flex-wrap:wrap;align-items:end;gap:var(--sp-12);margin:var(--sp-16) 0}
.image-point-controls[hidden]{display:none}.image-point-controls label{display:grid;gap:var(--sp-4);flex:1 1 10rem}
.image-point-controls input{width:100%;min-height:44px;padding:var(--sp-8);border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);color:var(--ink)}
/* Color-selection surface: works for gradient and other color-only fields. */
.tool-workspace .row2>label:has(>input[type=color]){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:5rem;padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.tool-workspace .row2>label>input[type=color]{grid-column:2;grid-row:1;width:56px;height:56px;min-width:56px;cursor:pointer}
.tool-workspace input[type=range],.tool-workspace input[type=checkbox]{accent-color:var(--link)}

/* Tool checkbox / option rows: replace browser-default tiny controls with the same
   visual contract used by the rest of the form system. */
.tool-workspace label:has(input[type=checkbox]){display:block}
.tool-workspace label>span:has(input[type=checkbox]){display:inline-flex;align-items:flex-start;gap:var(--sp-12);width:100%;max-width:100%;padding:var(--sp-12) var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel);box-sizing:border-box;line-height:1.6}
.tool-workspace input[type=checkbox]{width:1.125rem;height:1.125rem;flex:none;margin:0;accent-color:var(--link);translate:0 .16rem}
/* Give WCAG preview cards more breathing room and stable clipping behaviour. */
.pv.pv--wcag{border-radius:var(--r-l)}
.pv--wcag>b{padding-block:var(--sp-24)}
.pv--wcag>p{align-items:flex-start}
/* DS-54: gradient controls and shared result swatches. Native color is a large,
   direct-access picker; HEX edits stay adjacent and use the shared field/error design. */
.gradient-stops{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--sp-12);min-width:0}
.gradient-stop{display:grid;align-content:start;gap:var(--sp-8);min-width:0;padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.gradient-stop>label{font-size:var(--fs-s);font-weight:var(--fw-semi)}
.gradient-stop__controls{display:flex;align-items:center;gap:var(--sp-8);min-width:0}
.gradient-stop__controls>input[type=color]{flex:none;width:56px;height:48px;min-height:48px;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);cursor:pointer}
.gradient-stop__controls>.field{flex:1;min-width:0;min-height:48px;padding:var(--sp-8);font:var(--fw-semi) var(--fs-s)/1.45 var(--font-mono)}
.gradient-stop__hint{margin:0;color:var(--ink);font-size:var(--fs-xs);line-height:1.5}
.gradient-stop--optional:has(input:disabled){display:none}
.gradient-stops>.gradient-middle-toggle{display:flex;align-items:center;min-width:0}
.gradient-stops>.gradient-middle-toggle>span{min-height:100%;align-items:center}
.gradient-stops>.gradient-stop--optional{grid-column:1/-1;width:min(100%,25rem)}
.gradient-stop__controls>input:disabled{cursor:not-allowed}
.tool-workspace .image-point-error{flex:1 0 100%;margin:0;padding:var(--sp-8) var(--sp-12);border-radius:var(--r-s);background:var(--surface);font-size:var(--fs-s);line-height:1.5}
/* Keep HEX labels stable while clipboard feedback is layered over the swatch. */
.tool-workspace #im-out .swatches>button[data-copy-state]{position:relative}
.tool-workspace #im-out .swatches>button[data-copy-state]::after{position:absolute;top:var(--sp-8);left:var(--sp-8);right:var(--sp-8);padding:var(--sp-4);border-radius:var(--r-s);background:var(--panel);color:var(--ink);font:var(--fw-semi) var(--fs-xs)/1.4 var(--font-sans);text-align:center;box-shadow:var(--shadow-1)}
.tool-workspace #im-out .swatches>button[data-copy-state=success]::after{content:'✓ Đã sao chép'}
.tool-workspace #im-out .swatches>button[data-copy-state=error]::after{content:'Không sao chép được'}
@media(max-width:560px){
 .gradient-stop{padding:var(--sp-12)}
 .tool-workspace #im-out .swatches>button,.tool-workspace .tool-color-grid>button{min-height:5.5rem;padding:var(--sp-8) var(--sp-4)}
 /* 11-step scale: three scannable columns instead of six tall rows on phones. */
 .tool-workspace #sc-s{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8)}
 .tool-workspace #sc-s>button{min-height:5.5rem;font-size:var(--fs-xs);overflow-wrap:anywhere}
 .image-picked-actions :where(button,a){min-height:44px;flex:1 1 9rem}
}
/* DS-40: palette editor – same owner for color swatches and keyboard controls. */
.pg-toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.pg-editor{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:var(--sp-12);min-width:0}
.pg-item{display:flex;flex-direction:column;min-width:0;padding:var(--sp-12);gap:var(--sp-8);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.pg-item__swatch{display:grid;place-items:center;width:100%;min-height:7rem;padding:var(--sp-12);border:1px solid var(--line);border-radius:var(--r-s);font:var(--fw-bold) var(--fs-m)/1.4 var(--font-mono);cursor:pointer;overflow-wrap:anywhere}
.pg-item__tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:var(--sp-4);min-width:0}
.pg-item__tools>.pg-item__action:first-child{grid-column:span 2}
.pg-item__action{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);color:var(--ink);font:var(--fw-semi) var(--fs-xs)/1.3 var(--font-sans);cursor:pointer;overflow-wrap:anywhere}
.pg-item__action[aria-pressed="true"]{border-color:var(--link);background:var(--ink);color:var(--bg)}
.pg-item__picker{display:block;width:100%;min-width:0;min-height:44px;height:44px;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);cursor:pointer}
.pg-item__action:disabled{opacity:.45;cursor:not-allowed}
.pg-item__action:not(:disabled):hover{border-color:var(--link)}
/* DS-52: compact horizontal palette rows on phones keep all 5 touch targets.
   No additional UI/CSS owner; editable swatches remain the same DOM controls. */
@media(max-width:560px){
 .tool-workspace :is(.pg-editor){grid-template-columns:minmax(0,1fr)}
 .tool-workspace :is(.pg-item){display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);align-items:stretch;padding:var(--sp-8)}
 .tool-workspace :is(.pg-item__swatch){min-height:5.25rem;padding:var(--sp-4);font-size:var(--fs-xs);line-height:1.45;overflow-wrap:anywhere}
 .tool-workspace :is(.pg-item__tools){grid-template-columns:repeat(2,minmax(0,1fr));align-content:center}
 .pg-item__action,.pg-item__picker{min-height:44px}
 .tool-workspace>.pg-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)}
 .tool-workspace>.pg-toolbar>.btn{min-width:0;min-height:44px;white-space:normal;line-height:1.4}
 .tool-workspace>.pg-toolbar>.btn:first-child{grid-column:1/-1}
}
/* DS-45: color-wheel owns its circular picker and harmony swatches; shared tokens, fields,
   tool headings, buttons and reading rail remain canonical. No page-local overrides. */
.color-wheel{min-width:0}
.cw-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));align-items:stretch;gap:var(--sp-16);min-width:0}
.cw-panel,.cw-results{display:grid;align-content:start;gap:var(--sp-16);min-width:0;padding:clamp(16px,2.3vw,28px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);box-shadow:var(--shadow-flat)}
.cw-panel .tool-output-heading,.cw-results .tool-output-heading{margin:0}
.cw-wheel-area{display:flex;justify-content:center;min-width:0}
.cw-wheel-frame{position:relative;width:min(100%,360px);aspect-ratio:1}
.cw-wheel-canvas{display:block;width:100%;height:100%;border-radius:50%;touch-action:none;cursor:crosshair}
.cw-wheel-marker{position:absolute;pointer-events:none;left:50%;top:50%;width:1.3rem;height:1.3rem;border:3px solid var(--on-dark);border-radius:50%;transform:translate(-50%,-50%);box-shadow:var(--shadow-wheel)}
.cw-wheel-help{margin:0;text-align:center;font-size:var(--fs-s)}
.cw-seed{display:grid;grid-template-columns:3.5rem minmax(0,1fr) 3.5rem;align-items:end;gap:var(--sp-12);min-width:0}
.cw-seed__preview{min-height:3.5rem;border:1px solid var(--line);border-radius:var(--r-m)}
.cw-seed label{min-width:0}.cw-seed label input{width:100%;min-width:0;min-height:44px}
.color-wheel .cw-seed input[type=color]{width:3.5rem;height:3.5rem;min-width:0;padding:var(--sp-4)}
.cw-controls{display:grid;gap:var(--sp-16)}
.color-wheel .cw-controls label{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-8);min-width:0}
.cw-controls output{font:var(--fw-bold) var(--fs-s)/1.6 var(--font-mono);color:var(--ink)}
.cw-controls input[type=range],.cw-controls select{grid-column:1/-1;width:100%;min-height:44px;accent-color:var(--brand)}
.cw-controls select{min-width:0}
.cw-info{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:var(--sp-16)}
.cw-info b{display:block}.cw-info p{margin:var(--sp-8) 0 0;color:var(--mute);line-height:1.6}
.cw-actions{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.cw-actions :is(.btn,button){flex:1 1 11rem;min-height:44px;text-align:center}
.cw-results{gap:var(--sp-16)}
.cw-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:var(--sp-12);min-width:0}
.cw-result{display:grid;gap:var(--sp-8);min-width:0;padding:var(--sp-8);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.cw-result__swatch{display:grid;place-items:end center;min-height:6.5rem;width:100%;padding:var(--sp-12);border:1px solid var(--line);border-radius:var(--r-s);font:var(--fw-semi) var(--fs-s)/1.4 var(--font-sans);cursor:pointer}
.cw-result__swatch:hover{filter:brightness(.96)}
.cw-result__role{color:var(--mute);font-size:var(--fs-s)}
.cw-result strong{font:var(--fw-bold) var(--fs-s)/1.45 var(--font-mono);overflow-wrap:anywhere}
.cw-results>.note{margin:0}
/* DS-53: the HEX editor gets the full mobile rail. The two native visual
   pickers share one compact row instead of becoming three tall stacked rows. */
@media(max-width:560px){
 .cw-panel,.cw-results{padding:var(--sp-16)}
 .cw-actions :is(.btn,button){flex-basis:calc(50% - var(--sp-8));min-width:0}
 .cw-actions :is(.btn,button):last-child{flex-basis:100%}
 .cw-result{padding:var(--sp-8)}
 .cw-result__swatch{min-height:5.5rem;padding:var(--sp-8)}
 .cw-seed{grid-template-columns:3.5rem minmax(0,1fr);align-items:center}
 .cw-seed label{grid-column:1/-1;grid-row:1}
 .cw-seed__preview{grid-column:1;grid-row:2;width:3.5rem}
 .color-wheel .cw-seed input[type=color]{grid-column:2;grid-row:2;justify-self:end;max-width:100%}
}

/* DS-46: palette refinement is a subcomponent of the existing palette editor; no page CSS. */
.pg-refine{display:grid;gap:var(--sp-16);min-width:0;padding:clamp(16px,2.3vw,28px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.pg-refine .tool-output-heading{margin:0}.pg-refine .tool-output-heading h3{margin:0}
.pg-refine__controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:var(--sp-16)}
.pg-refine__controls label{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-8);min-width:0;font-weight:var(--fw-semi)}
.pg-refine__controls label output{font:var(--fw-bold) var(--fs-s)/1.5 var(--font-mono)}
.pg-refine__controls input[type=range]{grid-column:1/-1;width:100%;min-height:44px;cursor:pointer}
.pg-refine__preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr));gap:var(--sp-8);min-width:0}
.pg-refine__tokens{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:var(--sp-8);min-width:0}
.pg-refine__preview-item,.pg-refine__token{display:grid;gap:var(--sp-4);min-width:0;font-size:var(--fs-s);overflow-wrap:anywhere}
.pg-refine__preview-swatch{display:grid;place-items:center;min-height:4.75rem;padding:var(--sp-8);border:1px solid var(--line);border-radius:var(--r-m);font-family:var(--font-mono);font-size:var(--fs-s);font-weight:var(--fw-semi)}
.pg-refine__site-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,16rem);align-items:end;gap:var(--sp-12);border-top:1px solid var(--line);padding-top:var(--sp-16)}
.pg-refine__site-controls h4{margin:0}.pg-refine__site-controls label{display:grid;gap:var(--sp-8);min-width:0}
.pg-refine__site-controls select{width:100%;max-width:100%;min-height:44px}
.pg-refine__site{min-width:0;overflow:hidden;border:1px solid var(--pg-ui-border);border-radius:var(--r-l);background:var(--pg-ui-surface);color:var(--pg-ui-text)}
.pg-refine__site-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-8);padding:var(--sp-12) var(--sp-16);border-bottom:1px solid var(--pg-ui-border);font-size:var(--fs-s)}
.pg-refine__site-hero{display:grid;justify-items:start;gap:var(--sp-12);padding:clamp(16px,3vw,30px);background:var(--pg-ui-soft)}
.pg-refine__site-hero h5{margin:0;font-size:var(--fs-l);color:var(--pg-ui-text)}
.pg-refine__site-hero p{margin:0;color:var(--pg-ui-text)}
.pg-refine__site-tag{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--pg-ui-primary)}
.pg-refine__site-button{display:inline-flex;align-items:center;min-height:44px;padding:var(--sp-12) var(--sp-16);border-radius:var(--r-s);background:var(--pg-ui-primary);color:var(--on-dark);font-weight:var(--fw-semi)}
.pg-refine__site-button:hover{background:var(--pg-ui-hover)}
.pg-refine__token{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-8);padding:var(--sp-8);border:1px solid var(--line);border-radius:var(--r-s)}
.pg-refine__token-swatch{width:2.5rem;height:2.5rem;flex:none;border:1px solid var(--line);border-radius:var(--r-s)}
.pg-refine>.note{margin:0}
@media(max-width:560px){.pg-refine__site-controls{grid-template-columns:minmax(0,1fr)}.pg-refine__site-controls h4{font-size:var(--fs-m)}.pg-refine>.pg-toolbar>.btn{flex:1 1 100%}}

/* DS-69: contrast guidance inside Palette Editor. Color preview is user color data;
   interface surfaces, borders, focus and text continue to use semantic tokens. */
.pg-access{display:grid;gap:var(--sp-16);min-width:0;padding:clamp(16px,2.3vw,28px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel)}
.pg-access>.tool-output-heading{margin:0}.pg-access .tool-output-heading h3{margin:0}
.pg-access__fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--sp-12)}
.pg-access__fields>label{display:grid;gap:var(--sp-8);min-width:0;font-weight:var(--fw-semi)}
.pg-access__fields select{width:100%;min-width:0;min-height:44px}
.pg-access__overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-16);align-items:stretch}
.pg-access__sample{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-8);min-height:9rem;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-m);overflow-wrap:anywhere}
.pg-access__sample strong{font-size:var(--fs-l);line-height:1.3}.pg-access__sample span{font-size:var(--fs-s)}
.pg-access__results{display:grid;align-content:center;gap:var(--sp-8);min-width:0;padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.pg-access__results strong{font-size:var(--fs-xl);line-height:1.3;font-variant-numeric:tabular-nums}
.pg-access__results p{margin:0;overflow-wrap:anywhere}.pg-access__results .note{font-size:var(--fs-s)}
.pg-access__choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12)}
.pg-access__choice{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-12);min-width:0;padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m)}
.pg-access__choice strong{font-size:var(--fs-m)}.pg-access__choice p{min-height:2.5em;margin:0;color:var(--mute);font-size:var(--fs-s);overflow-wrap:anywhere}
.pg-access__choice .btn{margin-top:auto;min-height:44px;white-space:normal;text-align:center}
.pg-access>.note{margin:0}
@media(max-width:560px){.pg-access__overview,.pg-access__choices{grid-template-columns:minmax(0,1fr)}.pg-access__sample{min-height:7rem;padding:var(--sp-16)}.pg-access__results{padding:var(--sp-12)}.pg-access__choice{padding:var(--sp-12)}}

/* DS-41: the local palette library reuses button, label and field owners. */
.pg-library{display:grid;gap:var(--sp-16);min-width:0;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.pg-library>h3{margin:0;font-size:var(--fs-xl)}
.pg-library>.note{margin:0}
.pg-library__fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--sp-16)}
.pg-library__fields>label{display:grid;gap:var(--sp-8);min-width:0}
.pg-library__import{position:relative;overflow:hidden;cursor:pointer}
.pg-library__import>input{position:absolute;width:1px;height:1px;opacity:0;inset-inline-start:50%;inset-block-end:0}
.pg-library__import:focus-within{outline:var(--focus-w) solid var(--link);outline-offset:3px}
/* Palette family panels */
.pfam{margin:var(--sp-32) 0;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);box-shadow:var(--shadow-flat);scroll-margin-top:var(--sp-24)}
.pfam h2{margin:0 0 var(--sp-16);font-size:var(--fs-xl)}.pfam .palette-row{margin-bottom:var(--sp-16)}
.pfam .swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,6.75rem),1fr));gap:var(--sp-12);min-height:0;overflow:visible}
.pfam .swatches>button{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0;min-height:7.5rem;padding:var(--sp-12) var(--sp-8);border:1px solid var(--line);border-radius:var(--r-m);font:var(--fw-semi) var(--fs-xs)/1.5 var(--font-mono);overflow-wrap:anywhere;cursor:pointer}
.pfam .swatches>button:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
/* Copy feedback never claims success unless the shared clipboard service confirms it. */
:where(.card-swatch,.pfam .swatches>button)[data-copy-state]{position:relative}
:where(.card-swatch,.pfam .swatches>button)[data-copy-state]::after{position:absolute;inset-inline:var(--sp-4);inset-block-start:var(--sp-8);display:block;max-width:100%;padding:var(--sp-4) var(--sp-8);border-radius:var(--r-s);background:var(--ink);color:var(--panel);font:var(--fw-semi) var(--fs-xs)/1.35 var(--font-sans);text-align:center}
:where(.card-swatch,.pfam .swatches>button)[data-copy-state=success]::after{content:'✓ Đã chép'}
:where(.card-swatch,.pfam .swatches>button)[data-copy-state=error]::after{content:'Chép lỗi'}
/* Footer */
/* Shared footer HTML comes from template-parts/site-footer.php (home + inner pages). */
.site-footer{display:block;margin-top:var(--sp-48);padding:var(--sp-32) 0 var(--sp-16);border-top:1px solid var(--line);color:var(--mute);font-size:var(--fs-s)}
.site-footer__top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:var(--sp-24) var(--sp-48)}
.site-footer__top--compact{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.site-footer__brand{min-width:0}.site-footer__brand a{display:inline-flex;align-items:center;min-height:44px;gap:var(--sp-8);color:var(--ink);font-size:var(--fs-l);font-weight:var(--fw-bold);text-decoration:none}
.site-footer__brand p{max-width:36ch;margin:var(--sp-8) 0 0;line-height:1.6}
.site-footer__group{min-width:0}.site-footer__group h2{margin:0 0 var(--sp-12);color:var(--ink);font-size:var(--fs-s);font-weight:var(--fw-bold)}
.site-footer__group nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:var(--sp-4) var(--sp-8)}
.site-footer a{width:fit-content;max-width:100%;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.site-footer a:hover{color:var(--link);text-decoration:underline}
.site-footer__bottom{margin-top:var(--sp-32);padding-top:var(--sp-16);border-top:1px solid var(--line);font-size:var(--fs-xs)}

/* DS-22: one shared reference + FAQ composition for the seventeen color tools.
   No fixed 58rem outer width: cards use their available grid width while prose
   remains bounded to the reading measure. Grid automatically stacks when narrow. */
.tool-reference{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));align-items:start;gap:var(--sp-24);margin:var(--sp-32) 0 var(--sp-24)}
.tool-reference__explainer,.tool-reference__faq{min-width:0;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);box-shadow:var(--shadow-flat)}
.tool-reference__explainer h2,.tool-reference__faq h2{margin:0 0 var(--sp-16);font-size:var(--fs-xl);line-height:1.3;letter-spacing:-.025em}
.tool-reference__explainer p{max-width:100%;margin:0 0 var(--sp-16);line-height:1.75;overflow-wrap:anywhere}
.tool-reference__explainer p:last-child{margin-bottom:0}
.tool-reference__explainer code{padding:var(--sp-4) var(--sp-8);background:var(--surface);border-radius:var(--r-s);font:var(--fw-semi) var(--fs-s) var(--font-mono);overflow-wrap:anywhere}
.tool-reference__faq details{max-width:none}
.tool-reference__faq details:last-child{margin-bottom:0}
/* Give the FAQ label enough space under 200% zoom; the trigger itself remains >=44px. */
.tool-reference__faq summary{gap:var(--sp-8);font-size:var(--fs-s);overflow-wrap:anywhere}
.tool-reference__faq summary::after{width:1.5rem;height:1.5rem}
/* Bundled explanatory pages are a safety net only for otherwise-empty WP pages. */
.editorial-bundled{max-width:100%}
.editorial-bundled p{line-height:1.75}

/* Long-form guides, standalone pages, and archive cards */
.editorial-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(12rem,.32fr);align-items:start;gap:var(--sp-24)}
.editorial-content{min-width:0;padding:clamp(20px,3vw,40px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);box-shadow:var(--shadow-1)}
.editorial-content h1{max-width:23ch;margin:var(--sp-8) 0 var(--sp-24);font-size:var(--fs-hero-page);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:-.045em;overflow-wrap:anywhere}
.editorial-content> :where(p,ul,ol,blockquote){max-width:var(--reading-rail)}
.editorial-content h2{max-width:var(--reading-rail);margin:var(--sp-32) 0 var(--sp-12);font-size:var(--fs-2xl);font-weight:var(--fw-bold);line-height:1.28;letter-spacing:-.03em}
.editorial-content h3{max-width:var(--reading-rail);margin:var(--sp-24) 0 var(--sp-8);font-size:var(--fs-xl);line-height:1.35}
.editorial-content :where(p,ul,ol){margin-block:0 var(--sp-16);line-height:1.72}
.editorial-content :where(ul,ol){padding-inline-start:var(--sp-24)}
.editorial-content :where(p,ul,ol):last-child{margin-block-end:0}
.editorial-content li+li{margin-top:var(--sp-8)}
.editorial-content blockquote{margin:var(--sp-24) 0;padding:var(--sp-16) var(--sp-24);border-left:3px solid var(--brand);border-radius:var(--r-s);background:var(--surface)}
.editorial-content :where(img,video){height:auto;max-width:100%;border-radius:var(--r-m)}
.editorial-content :where(pre,.tbl-wrap){margin:var(--sp-16) 0 var(--sp-24)}.editorial-content .code-block>pre{margin:0}
.editorial-content a:not(.btn){color:var(--link);text-decoration-thickness:1px}
.editorial-eyebrow{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;color:var(--mute);font-size:var(--fs-s);font-weight:var(--fw-semi)}
.editorial-sidebar{min-width:0;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel)}
.editorial-sidebar h2{margin:0 0 var(--sp-12);font-size:var(--fs-xl);letter-spacing:-.025em}
.editorial-sidebar nav{display:grid;gap:var(--sp-8)}
.editorial-sidebar a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);min-height:48px;padding:var(--sp-8) var(--sp-12);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink);font-size:var(--fs-s);font-weight:var(--fw-semi);text-decoration:none}
.editorial-sidebar a::after{content:'↗';color:var(--link);font-size:var(--fs-m)}
.editorial-sidebar__toc a::after{content:'↓'}
.editorial-content h2[id]{scroll-margin-top:var(--sp-24)}
.editorial-sidebar a:hover{background:var(--surface);border-color:var(--link)}
.editorial-shell--full{grid-template-columns:minmax(0,1fr)}
.editorial-shell--full .editorial-content{max-width:100%;width:100%;box-sizing:border-box}
/* When there is no TOC, center the reading rail within a full-width article surface.
   A page with one paragraph must not collapse into a half-width card. */
.editorial-shell--full .editorial-content> :where(h1,h2,h3,p,ul,ol,blockquote,figure){width:100%;max-width:var(--reading-rail);margin-inline:auto}
.guide-directory{margin:var(--sp-16) 0 var(--sp-32)}
.guide-directory .card{display:flex;flex-direction:column;gap:var(--sp-8)}
.guide-directory .card span{line-height:1.6}
.navigation.pagination{margin:var(--sp-32) 0}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.navigation.pagination .page-numbers{display:inline-flex;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:var(--sp-8) var(--sp-12);border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);color:var(--ink);text-decoration:none}
.navigation.pagination :where(.current,.page-numbers:hover){background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media(max-width:560px){
 /* WCAG samples lead the row without consuming a full extra card-height on phones. */
 .cbox{display:grid;grid-template-columns:minmax(0,5.5rem) minmax(0,1fr)}
 .cbox__sample{min-height:0;padding:var(--sp-8);font-size:var(--fs-l)}
 .cbox__content{padding:var(--sp-12)}
 .cbox .badge-list{gap:var(--sp-4);margin-top:var(--sp-12)}
 .cbox .badge-list .badge{padding:var(--sp-4) var(--sp-8)}
 .site-footer__top,.site-footer__top--compact,.editorial-shell{grid-template-columns:minmax(0,1fr)}
 .editorial-shell--contents .editorial-sidebar{order:-1}
 .site-footer__group nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tool-reference__explainer,.tool-reference__faq{padding:var(--sp-16)}
 .editorial-content{padding:var(--sp-16)}
 .editorial-content h2{margin-top:var(--sp-32);font-size:var(--fs-xl)}
 :where(.site-header,header.top){gap:var(--sp-8);padding-bottom:var(--sp-16)}
 :where(.site-header,header.top) nav{order:3;width:100%;min-width:0;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;padding:var(--sp-4) 0 var(--sp-8);scroll-snap-type:x proximity}
 :where(.site-header,header.top) nav a{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
 .card-grid--directory{grid-template-columns:minmax(0,1fr)}
 .card-grid--color{grid-template-columns:repeat(auto-fill,minmax(min(100%,8.5rem),1fr))}
 .page-head p{font-size:var(--fs-m)}
 .color-hero{grid-template-columns:minmax(0,1fr);padding:var(--sp-12)}
 .color-hero__info{padding:var(--sp-12);gap:var(--sp-8)}
 .color-hero .color-hero__info p{margin-bottom:var(--sp-8)}
 .color-hero__preview{min-height:12rem;padding:var(--sp-24)}
 .color-hero__preview strong{font-size:clamp(2rem,9vw,3rem)}
 .color-hero__info .btn{flex:1 1 9rem;padding-inline:var(--sp-8)}
 .color-hero__preview{min-height:10rem;padding:var(--sp-16);gap:var(--sp-12)}
 .toc{padding:var(--sp-16)}.toc ol{columns:1}
 .toc--color{margin-block:var(--sp-16) var(--sp-24)}
 .toc--color>b{margin-bottom:var(--sp-12)}
 .toc--color ol{display:flex;flex-wrap:nowrap;gap:var(--sp-8);width:100%;min-width:0;margin:0;padding:0 0 var(--sp-8);list-style:none;columns:auto;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-snap-type:x proximity}
 .toc--color li{flex:0 0 auto;margin:0;padding:0;scroll-snap-align:start}
 .toc--color a{display:inline-flex;align-items:center;min-height:44px;padding:var(--sp-8) var(--sp-12);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);text-decoration:none;white-space:nowrap}
 .toc--color a:hover,.toc--color a:focus-visible{border-color:var(--link);background:var(--panel);color:var(--link)}
 .toc--color::after{content:'Vuốt ngang để xem thêm mục →';display:block;margin-top:var(--sp-4);color:var(--mute);font-size:var(--fs-xs)}
 /* Compact, scannable key–value list in place of 15 tall card surfaces. */
 .specs{display:grid;grid-template-columns:minmax(0,1fr);gap:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel)}
 .specs>div{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);align-items:start;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);border:0;border-radius:0;background:transparent}
 .specs>div+div{border-top:1px solid var(--line)}
 .specs dd{margin:0;font-size:var(--fs-s);line-height:1.55}
 .tool-workspace{padding:var(--sp-16);gap:var(--sp-16)}
 .tool-result-grid{grid-template-columns:minmax(0,1fr)}
 .contrast-result-grid{grid-template-columns:minmax(0,1fr)}
 .contrast-result-grid .pv{min-height:10rem}
 .contrast-result-grid .tool-result-badges{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tool-result-grid .pv{min-height:10rem}
 .tool-output-heading p{flex-basis:100%}
 .tool-cvd-list{grid-template-columns:minmax(0,1fr)}
 .tool-cvd-list .swatches,.tool-cvd-list .cvr--original .swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;overflow:hidden;border-radius:var(--r-s)}
 .tool-cvd-list .swatches>span{min-height:4.5rem;padding:var(--sp-8) var(--sp-4);font-size:clamp(.65rem,2.7vw,var(--fs-xs));border-radius:0}
 .toc--families ol{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:var(--sp-8)}
 .toc--families li{flex:none}
 .toc--families-hint{display:block}
 .nearest-results{grid-template-columns:minmax(0,1fr)}
 .pfam{padding:var(--sp-16)}.pfam .swatches{grid-template-columns:repeat(auto-fit,minmax(min(100%,5rem),1fr))}
 .swatches:not(.swatches--wrap){flex-wrap:wrap}.swatches:not(.swatches--wrap)>*{flex:1 0 4.5rem;min-height:44px}
}
@media(forced-colors:active){:where(.btn,.b,.solid,.chip,.theme-toggle):focus-visible{outline-color:Highlight}}

/* DS-34: one reusable static UI application preview on every color-detail page.
   Only the validated swatch uses inline color DATA; all surfaces use tokens. */
.color-application{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16);margin-bottom:var(--sp-32)}
.color-application__card,.color-application__code{min-width:0;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);color:var(--ink);box-shadow:var(--shadow-1)}
.color-application__kicker{display:block;margin-bottom:var(--sp-12);color:var(--mute);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.color-application__card h3,.color-application__code h3{margin:0 0 var(--sp-8);font-size:var(--fs-l)}
.color-application__card p,.color-application__code p{margin:0 0 var(--sp-16);color:var(--mute);font-size:var(--fs-s);line-height:1.6}
.color-application__fake-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;padding:var(--sp-12) var(--sp-24);border:1px solid var(--line);border-radius:var(--r-m);font-size:var(--fs-s);font-weight:var(--fw-bold);text-align:center;overflow-wrap:anywhere}
.color-application__color-surface{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-8);min-height:9rem;margin:var(--sp-12) 0 var(--sp-16);padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-m);overflow-wrap:anywhere}
.color-application__color-surface strong{font-size:var(--fs-2xl);font-family:var(--font-mono)}
.color-application__color-surface span{font-size:var(--fs-s)}
.color-application__card .color-application__metric{margin-bottom:0;color:var(--ink)}
.color-application__code{grid-column:1/-1}
.color-application__code-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-16);margin-bottom:var(--sp-16)}
.color-application__code-head p{margin-bottom:0}
.color-application__code-head .btn{flex:none}
.color-application__code pre{margin:0;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:560px){.color-application{grid-template-columns:minmax(0,1fr)}.color-application__card,.color-application__code{padding:var(--sp-16)}}

/* DS-42: a single scoped Website Color Visualizer; UI chrome keeps design-system tokens.
   Preview roles are user color data, never global theme color overrides. */
.viz-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));gap:var(--sp-12)}
.viz-field{display:grid;gap:var(--sp-8);min-width:0;padding:var(--sp-12);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}
.viz-field>strong{font-size:var(--fs-s)}
.viz-field__edit{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8);min-width:0}
.viz-field__edit input[type=color]{display:block;min-width:44px;width:100%;height:44px;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);cursor:pointer}
.viz-field__edit .field{min-width:0;width:100%;padding-inline:var(--sp-4);font:var(--fw-semi) var(--fs-xs)/1.5 var(--font-mono)}
.viz-library{display:flex;align-items:end;flex-wrap:wrap;gap:var(--sp-12)}
.viz-library label{display:grid;flex:1 1 14rem;gap:var(--sp-8);min-width:0;font-size:var(--fs-s);font-weight:var(--fw-semi)}
.viz-library .btn{flex:0 1 auto}
.viz-preview{min-width:0;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--viz-background);color:var(--viz-text);overflow-wrap:anywhere}
.viz-preview :where(h3,p){max-width:none}
.viz-preview__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-16);padding:var(--sp-12) 0 var(--sp-24);border-bottom:1px solid color-mix(in srgb,var(--viz-text) 22%,var(--viz-background))}
.viz-preview__brand{font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.viz-preview__top nav{display:flex;gap:var(--sp-16);flex-wrap:wrap;font-size:var(--fs-s)}
.viz-preview__hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--sp-24);align-items:stretch;margin:var(--sp-24) 0}
.viz-preview__hero>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-12);justify-content:center;padding-block:var(--sp-16)}
.viz-preview__hero h3{margin:0;font-size:var(--fs-2xl);line-height:1.25}
.viz-preview__hero p,.viz-preview__card p,.viz-preview__feature p{margin:0;line-height:1.65}
.viz-preview__hero small,.viz-preview__feature small{font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:.08em}
.viz-preview__cta{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:44px;padding:var(--sp-12) var(--sp-24);border-radius:var(--r-m);background:var(--viz-primary);color:var(--viz-primary-ink);font-weight:var(--fw-bold);font-size:var(--fs-s);text-align:center}
.viz-preview__cta--small{padding-inline:var(--sp-16)}
.viz-preview__feature{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--sp-12);padding:var(--sp-16);border:1px solid color-mix(in srgb,var(--viz-text) 18%,var(--viz-background));border-radius:var(--r-l);background:var(--viz-surface)}
.viz-preview__feature strong{font-size:var(--fs-xl)}
.viz-preview__accent-mark{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--sp-8) var(--sp-16);border-radius:var(--r-pill);background:var(--viz-accent);color:var(--viz-accent-ink);font-size:var(--fs-s);font-weight:var(--fw-bold)}
.viz-preview__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-12)}
.viz-preview__card{display:grid;align-content:start;gap:var(--sp-8);min-width:0;min-height:8rem;padding:var(--sp-16);border:1px solid color-mix(in srgb,var(--viz-text) 18%,var(--viz-background));border-radius:var(--r-m);background:var(--viz-surface)}
.viz-preview__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-s);background:var(--viz-accent);color:var(--viz-accent-ink);font-weight:var(--fw-bold);font-size:var(--fs-xl)}
.viz-preview__footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-12);margin-top:var(--sp-32);padding:var(--sp-16) 0 0;border-top:1px solid color-mix(in srgb,var(--viz-text) 22%,var(--viz-background));font-size:var(--fs-s)}
.viz-preview__status{display:inline-flex;align-items:center;min-height:44px;padding:var(--sp-8) var(--sp-16);border:1px solid color-mix(in srgb,var(--viz-text) 22%,var(--viz-background));border-radius:var(--r-pill)}
.viz-wcag{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:var(--sp-12);color:var(--ink)}
.viz-wcag__item{display:grid;align-content:start;gap:var(--sp-8);padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.viz-wcag__item strong{font-size:var(--fs-s)}
.viz-wcag__item span{font-size:var(--fs-s);font-weight:var(--fw-semi)}
.viz-wcag__pass::before{content:'✓ ';color:var(--link)}
.viz-wcag__fail::before{content:'! ';color:var(--link)}
/* DS-43: WCAG suggestion is owned by the visualizer component, not page CSS. */
.viz-wcag__action{justify-self:start;align-self:end;min-height:44px;font-size:var(--fs-s)}
.viz-suggest__toolbar{display:flex;align-items:end;flex-wrap:wrap;gap:var(--sp-16);margin:var(--sp-16) 0}
.viz-suggest__toolbar label{display:grid;gap:var(--sp-8);min-width:min(100%,18rem);font-size:var(--fs-s);font-weight:var(--fw-semi)}
.viz-suggest__toolbar .note{flex:1 1 20rem;min-width:0;margin:0}
.viz-suggest{min-width:0;margin:var(--sp-16) 0;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.viz-suggest h3{margin:0 0 var(--sp-16);font-size:var(--fs-l)}
.viz-suggest__comparison{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--sp-12);margin:var(--sp-16) 0}
.viz-suggest__example{min-width:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--panel)}
.viz-suggest__swatch{display:grid;place-items:center;min-height:8rem;font-size:var(--fs-2xl);font-weight:var(--fw-bold)}
.viz-suggest__example p{margin:0;padding:var(--sp-12) var(--sp-16);background:var(--panel);color:var(--ink);font-size:var(--fs-s);overflow-wrap:anywhere}
.viz-suggest__example p span{font:var(--fw-semi) var(--fs-s)/1.5 var(--font-mono)}

@media(max-width:560px){.viz-preview{padding:var(--sp-16)}.viz-preview__hero,.viz-preview__cards{grid-template-columns:minmax(0,1fr)}.viz-preview__top nav{order:3;width:100%}.viz-preview__hero{gap:var(--sp-12);margin-block:var(--sp-16)}.viz-preview__feature{padding:var(--sp-16)}.viz-preview__card{min-height:0;padding:var(--sp-12)}.viz-preview__cards{gap:var(--sp-8)}}


/* DS-48: practical UI states + isolated light/dark preview switch. */
.viz-preview-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-12);margin:var(--sp-16) 0}
.viz-preview-toolbar__modes{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.viz-mode-btn{min-height:44px}
.viz-mode-btn[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--on-dark)}
.viz-preview-toolbar .note{margin:0}
.viz-preview__details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16);margin-top:var(--sp-24)}
.viz-preview__form,.viz-preview__notices{display:grid;align-content:start;gap:var(--sp-12);min-width:0;padding:var(--sp-24);border:1px solid color-mix(in srgb,var(--viz-text) 22%,var(--viz-surface));border-radius:var(--r-m);background:var(--viz-surface)}
.viz-preview__details h4{margin:0;color:var(--viz-text);font-size:var(--fs-l)}
.viz-preview__details p{margin:0;max-width:none;color:var(--viz-text);font-size:var(--fs-s)}
.viz-preview__eyebrow{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.09em;color:var(--viz-text)}
.viz-preview__form-label{font-size:var(--fs-s);font-weight:var(--fw-semi)}
.viz-preview__input{width:100%;min-width:0;min-height:44px;padding:var(--sp-12);background:var(--viz-background);color:var(--viz-text);border:1px solid var(--viz-text);border-radius:var(--r-s);font:inherit}
.viz-preview__input:focus-visible{outline:3px solid var(--viz-primary);outline-offset:2px}
.viz-preview__actions{display:flex;gap:var(--sp-8);flex-wrap:wrap;align-items:center}
.viz-preview__secondary,.viz-preview__disabled{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--sp-8) var(--sp-16);border:1px solid var(--viz-text);border-radius:var(--r-m);color:var(--viz-text);font-size:var(--fs-s);font-weight:var(--fw-semi)}
.viz-preview__disabled{opacity:.52;border-style:dashed}
.viz-preview__notice{display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:start;gap:var(--sp-8);min-width:0;padding:var(--sp-12);border:1px solid color-mix(in srgb,var(--viz-text) 24%,var(--viz-surface));border-left:4px solid var(--viz-primary);border-radius:var(--r-s);background:var(--viz-background)}
.viz-preview__notice>span{display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--r-pill);background:var(--viz-primary);color:var(--viz-primary-ink);font-weight:var(--fw-bold)}
.viz-preview__notice strong{font-size:var(--fs-s)}
.viz-preview__notice--warn{border-left-color:var(--viz-accent)}
.viz-preview__notice--warn>span{background:var(--viz-accent);color:var(--viz-accent-ink)}
.viz-preview__notice--error{border-left-style:dashed}
.viz-preview__helper{font-size:var(--fs-xs)}
@media(max-width:560px){.viz-preview__details{grid-template-columns:minmax(0,1fr)}.viz-preview__form,.viz-preview__notices{padding:var(--sp-16)}.viz-preview-toolbar__modes{width:100%}.viz-mode-btn{flex:1 1 0}}

.pg-refine #pg-open-viz[aria-disabled=true]{opacity:.5;pointer-events:none;cursor:not-allowed}
/* DS-56: one quiet local-session panel in the Palette Editor, owned by the
   shared component sheet. Restore is always opt-in, never a modal. */
.pg-session{display:grid;gap:var(--sp-16);min-width:0;padding:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.pg-session .tool-output-heading{margin:0}
.pg-session .tool-output-heading h3{margin:0}
.pg-session .tool-output-heading p{margin-top:var(--sp-8)}
.pg-session__recovery{display:grid;gap:var(--sp-12);padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg)}
.pg-session__recovery[hidden]{display:none}
.pg-session__recovery p,.pg-session>.note{margin:0}
@media(max-width:560px){.pg-session{padding:var(--sp-16)}.pg-session>.pg-toolbar>.btn,.pg-session>.pg-toolbar>.pg-library__import,.pg-session__recovery .btn{flex:1 1 100%;min-width:0}}

/* DS-61: long color-detail components. The source HEX values remain content
   data in each view; these classes only change grouping, reading order and
   responsive presentation. Do not apply to the interactive color tools. */
.color-contrast-previews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:var(--sp-12);margin-block:var(--sp-16) var(--sp-32)}
.color-contrast-previews .pv--wcag{min-height:0;border-radius:var(--r-m);box-shadow:var(--shadow-flat)}
.color-contrast-previews .pv--wcag>b{min-height:6rem;padding:var(--sp-16)}
.color-contrast-previews .pv--wcag>p{display:grid;align-content:start;justify-content:stretch;gap:var(--sp-8);min-height:5.75rem;padding:var(--sp-12);font-size:var(--fs-s);line-height:1.5}
.color-contrast-previews .pv--wcag-status{justify-self:start}
.color-tone-hint{display:none;margin:0 0 var(--sp-12);font-size:var(--fs-s);color:var(--mute)}
.color-tone-list{display:grid;gap:var(--sp-16);margin:var(--sp-16) 0 var(--sp-32)}
.color-tone-group{min-width:0;padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel)}
.color-tone-group h3{margin:0 0 var(--sp-12);font-size:var(--fs-m);font-weight:var(--fw-semi);line-height:1.4;letter-spacing:-.015em}
.color-tone-group .swatches--tone{min-height:5rem}
.color-tone-group .swatches--tone>span{min-height:5rem;align-items:flex-end;padding:var(--sp-12) var(--sp-4);white-space:nowrap;overflow-wrap:normal}
.color-harmony-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16);margin:var(--sp-16) 0 var(--sp-32)}
.color-harmony-grid .color-harmony-card{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--sp-12);min-width:0;margin:0;padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel)}
.color-harmony-card h3{margin:0;font-size:var(--fs-m);font-weight:var(--fw-semi);line-height:1.4;letter-spacing:-.015em}
.color-harmony-card .swatches--sm{min-width:0;min-height:4.5rem;overflow:visible;flex-wrap:wrap;gap:var(--sp-4);border-radius:0}
.color-harmony-card .swatches--sm>*{min-width:0;flex:1 1 5rem;min-height:4.5rem;align-items:flex-end;border-radius:var(--r-s);padding:var(--sp-8) var(--sp-4);font-size:var(--fs-xs)}
.swatches--usage{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,1.4fr) minmax(0,1.4fr);gap:var(--sp-8);min-height:0;margin:var(--sp-16) 0 var(--sp-32);overflow:visible;border-radius:0}
.swatches--usage>*{min-width:0;min-height:6rem;border-radius:var(--r-s);padding:var(--sp-12) var(--sp-8);text-align:center;overflow-wrap:anywhere}
@media(max-width:560px){
 .color-contrast-previews{grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:var(--sp-8)}
 .color-contrast-previews .pv--wcag>b{min-height:5rem;padding:var(--sp-12)}
 .color-contrast-previews .pv--wcag>p{min-height:8rem;padding:var(--sp-12)}
 .color-tone-hint{display:block}
 .color-tone-list{gap:var(--sp-12)}
 .color-tone-group{padding:var(--sp-12)}
 .color-tone-group .swatches--tone{display:flex;flex-wrap:nowrap;gap:0;min-height:5rem;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;border-radius:var(--r-s);scroll-snap-type:x proximity}
 .color-tone-group .swatches--tone>span{flex:0 0 6.25rem;min-height:5rem;scroll-snap-align:start}
 .color-harmony-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-12)}
 .color-harmony-card .swatches--sm>*{flex-basis:4.5rem;min-height:4rem}
 .swatches--usage{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)}
 .swatches--usage>*{min-height:5rem}
}
.color-tone-group .swatches--tone:focus-visible{outline:var(--focus-w) solid var(--link);outline-offset:-3px}
/* DS-68: shared color-discovery search surface; all cards use existing directory owner. */
.palette-search{display:grid;gap:var(--sp-8);min-width:0}
.palette-search>.field{width:100%;margin:0}
.palette-search-help{margin:0;line-height:1.55}
.palette-quick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8);margin-top:var(--sp-4)}
.palette-quick>.chip{font-size:var(--fs-s)}
.palette-match{margin:var(--sp-24) 0;min-width:0}
.palette-match>h2,.palette-match>h3{font-size:var(--fs-xl);margin:0 0 var(--sp-8)}
.palette-match>.note{margin:0 0 var(--sp-16);max-width:var(--detail-prose-rail);line-height:1.65}
.palette-match-note{margin:0 0 var(--sp-16);max-width:var(--detail-prose-rail)}
.palette-row>.chip:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:560px){.palette-bar{padding:var(--sp-16)}.palette-quick>.chip{flex:1 1 auto}}

/* DS-70: scale method and token export, owned by shared tool components. */
.scale-method-row{display:flex;align-items:end;gap:var(--sp-16);flex-wrap:wrap;margin-top:var(--sp-16)}
.scale-method-field{flex:1 1 15rem;min-width:0}
.scale-preserve{display:flex;align-items:center;gap:var(--sp-8);flex:1 1 16rem;min-height:44px}
.scale-method-note{margin:var(--sp-8) 0 var(--sp-16);color:var(--mute)}
.scale-tokens{margin-top:var(--sp-24);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-16);background:var(--panel);min-width:0}
.scale-tokens>summary{cursor:pointer;font-weight:var(--fw-semi);min-height:44px;align-content:center}
.scale-tokens>.palette-row{margin:var(--sp-16) 0}
.scale-tokens .code-block{min-width:0}
.scale-tokens pre{max-height:22rem;overflow:auto}

/* DS-71: shared workspace link and multi-tab conflict use existing session owner. */
.pg-share{display:grid;gap:var(--sp-12);min-width:0;padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg)}
.pg-share>h4{margin:0;font-size:var(--fs-m)}
.pg-share>p{margin:0}
#pg-share-result{display:flex;gap:var(--sp-8);align-items:end;flex-wrap:wrap;min-width:0}
#pg-share-result[hidden]{display:none}
#pg-share-result label{display:grid;gap:var(--sp-8);flex:1 1 16rem;min-width:0;font-weight:var(--fw-semi)}
#pg-share-url{width:100%;max-width:100%;min-height:44px;font-family:var(--font-mono);font-size:var(--fs-s)}
#pg-share-result .btn{min-height:44px}
#pg-share-offer[hidden],#pg-session-conflict[hidden]{display:none}
#pg-share-status{min-height:0}
@media(max-width:560px){.pg-share{padding:var(--sp-12)}#pg-share-result .btn{width:100%}}

/* DS-71: visualizer reuses the session share surface, not a second design language. */
.viz-share{margin-top:var(--sp-24)}
.viz-share>h3{margin:0;font-size:var(--fs-l)}
#viz-share-result{display:flex;gap:var(--sp-8);align-items:end;flex-wrap:wrap;min-width:0}
#viz-share-result[hidden],#viz-share-offer[hidden]{display:none}
#viz-share-result label{display:grid;gap:var(--sp-8);flex:1 1 16rem;min-width:0;font-weight:var(--fw-semi)}
#viz-share-url{width:100%;min-height:44px;font-family:var(--font-mono);font-size:var(--fs-s)}
#viz-share-result .btn{min-height:44px}
@media(max-width:560px){#viz-share-result .btn{width:100%}}

/* DS-73: guided Brand Color System, scoped component owner. */
.brand-system{display:grid;gap:var(--sp-24)}
.brand-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8);padding:0;margin:0}
.brand-steps li{min-width:0;margin:0;padding:0}
.brand-step{width:100%;min-height:44px;background:var(--surface);color:var(--ink);border:var(--line-w) solid var(--line);border-radius:var(--r-m);font:inherit;font-weight:var(--fw-semi);padding:var(--sp-8);cursor:pointer;line-height:1.3}
.brand-step[aria-current="step"]{background:var(--brand);color:var(--on-dark);border-color:var(--brand)}
.brand-panel{min-width:0}
.brand-panel .tool-output-heading{margin-bottom:var(--sp-16)}
.brand-input-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-12)}
.brand-input-card,.brand-role{min-width:0;border:var(--line-w) solid var(--line);border-radius:var(--r-m);background:var(--panel);padding:var(--sp-12)}
.brand-input-card label,.brand-role__label{font-weight:var(--fw-semi);display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
.brand-required{font-size:var(--fs-xs);color:var(--mute);font-weight:var(--fw-regular)}
.brand-checkbox{min-height:24px;cursor:pointer}
.brand-checkbox input{min-width:20px;min-height:20px}
.brand-input-row,.brand-role__edit{display:flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-8);min-width:0}
.brand-input-row input[type=color],.brand-role__picker{flex:none;width:48px;height:44px;padding:var(--sp-4);border:var(--line-w) solid var(--line);border-radius:var(--r-s);background:var(--panel);cursor:pointer}
.brand-input-row .field,.brand-role__edit .field{min-width:0;flex:1;width:100%;text-transform:uppercase;font-family:var(--font-mono)}
.brand-field-error{color:var(--ink);font-size:var(--fs-xs);margin:var(--sp-4) 0 0;line-height:1.4}
.brand-field-error:empty{display:none}
.brand-quick-actions,.brand-step-foot,.brand-export-actions,.brand-transfers{display:flex;gap:var(--sp-8);flex-wrap:wrap;align-items:center;margin-top:var(--sp-16)}
.brand-step-foot{justify-content:flex-end;border-top:var(--line-w) solid var(--line);padding-top:var(--sp-16)}
.brand-step-foot .note{flex:1 1 18rem;margin:0}
.brand-scale{margin-top:var(--sp-16)}
.brand-scale__label{font-weight:var(--fw-semi);margin-bottom:var(--sp-8)}
.brand-scale__colors{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:var(--sp-4)}
.brand-scale__cell{white-space:pre-line;min-width:0;min-height:76px;padding:var(--sp-8) var(--sp-4);border:0;border-radius:var(--r-s);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semi);line-height:1.5;cursor:pointer;overflow-wrap:anywhere}
.brand-mode{display:flex;gap:var(--sp-8);margin:var(--sp-12) 0 var(--sp-16)}
.brand-mode [aria-pressed="true"]{background:var(--brand);color:var(--on-dark);border-color:var(--brand)}
.brand-role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-12)}
.brand-role__label{line-height:1.4}
.brand-role__swatch{display:inline-block;width:24px;height:24px;flex:none;border:var(--line-w) solid var(--line);border-radius:var(--r-s)}
.brand-audit{margin-top:var(--sp-24)}
.brand-audit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)}
.brand-audit__item{display:flex;gap:var(--sp-8);justify-content:space-between;align-items:center;flex-wrap:wrap;border:var(--line-w) solid var(--line);border-radius:var(--r-m);padding:var(--sp-12);background:var(--surface)}
.brand-audit__item--fail{border-style:dashed}
.brand-audit__item strong{flex:1 1 10rem}
.brand-audit__item span{font-variant-numeric:tabular-nums}
.brand-audit-summary{margin:var(--sp-12) 0;color:var(--ink);font-weight:var(--fw-semi)}
.brand-mini-preview{margin-top:var(--sp-24);border:var(--line-w) solid var(--bs-border);border-radius:var(--r-l);overflow:hidden;background:var(--bs-background);color:var(--bs-text)}
.brand-mini-preview__header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);padding:var(--sp-16);background:var(--bs-surface);border-bottom:var(--line-w) solid var(--bs-border)}
.brand-mini-preview__body{padding:var(--sp-24);display:grid;gap:var(--sp-12)}
.brand-mini-preview__body h3,.brand-mini-preview__body p{color:var(--bs-text);margin:0}
.brand-mini-preview__actions,.brand-mini-preview__alerts{display:flex;gap:var(--sp-8);flex-wrap:wrap}
.brand-mini-preview__actions span,.brand-mini-preview__alerts span{border-radius:var(--r-s);padding:var(--sp-8) var(--sp-12);font-weight:var(--fw-semi)}
.brand-preview-primary{background:var(--bs-primary);color:var(--bs-onprimary)}
.brand-preview-secondary{color:var(--bs-text);border:var(--line-w) solid var(--bs-border)}
.brand-preview-success{color:var(--bs-success);background:var(--bs-surface)}
.brand-preview-error{color:var(--bs-error);background:var(--bs-surface)}
.brand-export-actions{margin:0 0 var(--sp-24)}
.brand-import{position:relative;cursor:pointer}
.brand-import input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.brand-import:focus-within{outline:var(--focus-w) solid var(--link);outline-offset:3px}
.brand-export-block{margin-top:var(--sp-16);min-width:0}
.brand-export-block pre{max-height:22rem;overflow:auto}
.brand-export-block summary{min-height:44px;cursor:pointer;font-weight:var(--fw-semi)}
.brand-transfers{padding-top:var(--sp-16);border-top:var(--line-w) solid var(--line)}
.brand-status{font-size:var(--fs-s);color:var(--mute);min-height:1.5em;margin:0}
@media(max-width:560px){
.brand-steps{gap:var(--sp-4)}
.brand-step{font-size:var(--fs-xs);padding:var(--sp-8) var(--sp-4)}
.brand-input-grid,.brand-role-grid{grid-template-columns:1fr}
.brand-audit-grid{grid-template-columns:1fr}
.brand-scale__colors{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:var(--sp-8)}
.brand-scale__cell{flex:0 0 76px;scroll-snap-align:start}
.brand-step-foot .btn{flex:1 1 100%}
.brand-transfers .btn{flex:1 1 100%}
.brand-mini-preview__body{padding:var(--sp-16)}
}


/* DS-74 Image Color Extractor: one owner for crop controls and frequency swatches. */
.image-analysis{display:grid;gap:var(--sp-12);min-width:0;padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.image-analysis h2{margin:0;font-size:var(--fs-l)}
.image-analysis .note{margin:0}
.image-analysis__settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12)}
.image-analysis__settings>label{display:grid;gap:var(--sp-4);min-width:0;font-size:var(--fs-s)}
.image-analysis__settings select,.image-analysis__coords input{width:100%;min-width:0;min-height:44px;padding:var(--sp-8);border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);color:var(--ink)}
.image-analysis__settings .image-analysis__check{align-self:center;display:block}
.image-analysis__region,.image-analysis__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-8)}
.image-analysis__region>button,.image-analysis__actions>a{min-height:44px}
.image-analysis__region [aria-pressed="true"]{border-color:var(--link);outline:2px solid var(--link);outline-offset:1px}
.image-analysis__coords{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:var(--sp-8)}
.image-analysis__coords[hidden]{display:none}
.image-analysis__coords>label{display:grid;gap:var(--sp-4);font-size:var(--fs-s);min-width:0}
.image-analysis__coords>button{grid-column:1/-1;justify-self:start}
.image-region-box{position:absolute;z-index:1;border:2px solid var(--link);outline:1px solid var(--panel);background:color-mix(in srgb,var(--link) 12%,transparent);pointer-events:none;box-sizing:border-box}
.image-preview-stage .im.im--select-region{cursor:crosshair;touch-action:none}
.tool-workspace #im-out .swatches>button{display:flex;flex-direction:column;gap:var(--sp-4);align-items:center;justify-content:flex-end}
.tool-workspace #im-out .swatches>button strong{font:var(--fw-bold) var(--fs-s)/1.35 var(--font-mono)}
.tool-workspace #im-out .swatches>button small{font:var(--fw-semi) var(--fs-xs)/1.35 var(--font-sans)}
@media(max-width:560px){.image-analysis__coords{grid-template-columns:repeat(2,minmax(0,1fr))}.image-analysis__region>*{flex:1 1 10rem}.image-analysis__settings{gap:var(--sp-8)}.image-analysis__settings .image-analysis__check{grid-column:1/-1}}