/* Shared Liteworkroom component and layout rules. Values live in liteworkroom-tokens.css. */
:root {
  font-family:var(--font-ui);
  color:var(--color-ink);
  background:var(--color-bg-app);
  font-synthesis:none;
  --ink:var(--color-ink);
  --muted:var(--color-text-secondary);
  --line:var(--color-border-subtle);
  --paper:var(--color-bg-control);
  --canvas:var(--color-bg-canvas);
  --accent:var(--color-accent);
  --accent-ink:var(--color-on-accent);
  --selected:var(--color-selection);
  --danger:var(--color-destructive);
  --radius:var(--radius-md);
  --ease:var(--ease-standard)}
* {
  box-sizing:border-box}
body {
  margin:0}
button, input, select {
  font:inherit}
button, a, input, summary {
  -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer;
  color:inherit;
  border:0;
  background:none;
  font-size:var(--text-body);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  transition:background var(--duration-fast),color var(--duration-fast),box-shadow var(--duration-fast),transform var(--duration-press)}
button:active:not(:disabled) {
  transform:translateY(1px)}
button:disabled {
  opacity:.38;
  cursor:not-allowed}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--color-focus);
  outline-offset:3px}
button svg, span[data-icon] svg {
  width:18px;
  height:18px;
  flex-shrink:0;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:var(--icon-stroke);
  stroke-linecap:round;
  stroke-linejoin:round}
[hidden] {
  display:none!important}
h1, h2, h3, p {
  margin:0}
h2 {
  font-size:var(--text-title-sm);
  font-weight:600;
  letter-spacing:-.4px}
h3 {
  font-size:var(--text-body);
  font-weight:600}
input, select {
  color:var(--ink);
  background:var(--color-bg-control);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-2);
  min-width:0;
  font-size:var(--text-body)}
input[type=range] {
  padding:0;
  accent-color:var(--color-slider);
  width:100%;
  height:18px;
  cursor:pointer;
  border:0}
input[type=color] {
  padding:0;
  border:0;
  cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper {
  padding:0}
input[type=color]::-webkit-color-swatch {
  border:0}
a {
  color:inherit;
  text-decoration:none}
.app-bar {
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--space-6);
  border-bottom:1px solid var(--line);
  background:var(--color-selection);
  gap:var(--space-5);
  position:relative;
  z-index:var(--z-app-bar)}
.brand {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  font-size:var(--text-body-lg);
  font-weight:600;
  letter-spacing:-.5px;
  line-height:1.1}
.brand-mark {
  font-size:var(--text-title-lg);
  font-weight:700;
  letter-spacing:-3px;
  width:38px;
  padding-bottom:var(--space-2)}
.brand-product {
  display:block;
  font-size:var(--text-meta);
  font-weight:500;
  color:var(--muted);
  letter-spacing:.4px;
  margin-top:var(--space-1)}
.workspace-modes {
  display:flex;
  border:1px solid var(--line);
  padding:var(--space-micro);
  border-radius:var(--radius-md);
  background:var(--color-selection);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  gap:var(--space-micro)}
.workspace-modes button {
  padding:var(--space-2) var(--space-5);
  border-radius:var(--radius-sm);
  font-weight:500;
  color:var(--color-text-secondary);
  min-width:116px}
.workspace-modes button[aria-pressed=true] {
  background:var(--color-bg-control);
  color:var(--ink);
  box-shadow:var(--shadow-floating)}
.mode-number {
  font-size:var(--text-meta);
  opacity:.55}
.primary {
  background:var(--ink);
  color:var(--color-bg-control);
  min-height:36px;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius);
  box-shadow:var(--shadow-floating)}
.primary:hover:not(:disabled) {
  background:var(--color-on-accent)}
.secondary {
  background:var(--color-bg-control);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius);
  min-height:36px;
  padding:var(--space-2) var(--space-3)}
.secondary:hover:not(:disabled) {
  background:var(--color-selection);
  border-color:var(--color-border-subtle)}
.quiet {
  padding:var(--space-2) var(--space-2);
  color:var(--color-text-secondary);
  min-height:34px;
  border-radius:var(--radius-sm)}
.quiet:hover {
  background:var(--color-selection);
  color:var(--ink)}
.wide {
  width:100%}
.icon-button {
  width:30px;
  height:30px;
  border-radius:var(--radius-sm)}
.icon-button:hover {
  background:var(--color-selection)}
.eyebrow {
  font-size:var(--text-meta);
  letter-spacing:1.5px;
  font-weight:600;
  color:var(--color-text-secondary);
  display:block}
.empty-workspace {
  max-width:1120px;
  margin:auto;
  min-height:calc(100dvh - 64px);
  display:grid;
  grid-template-columns:1fr 1fr;
  align-content:center;
  gap:var(--space-10) var(--space-20);
  padding:var(--space-16) var(--space-12) var(--space-6)}
.empty-copy {
  align-self:center}
.empty-copy .eyebrow {
  margin-bottom:var(--space-7);
  color:var(--color-text-secondary)}
.empty-copy h1 {
  font-size:clamp(44px,4.3vw,65px);
  line-height:1.04;
  font-weight:500;
  letter-spacing:-3px}
.empty-copy em {
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-2.6px}
.empty-copy p {
  font-size:var(--text-body-lg);
  line-height:1.8;
  color:var(--color-text-secondary);
  margin-top:var(--space-6)}
.import-surface {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--space-2);
  min-height:442px;
  border:1px solid var(--color-border-subtle);
  background:var(--color-selection);
  border-radius:var(--radius-lg);
  position:relative;
  padding:var(--space-6) var(--space-5);
  transition:background var(--duration-standard),box-shadow var(--duration-standard)}
.import-surface:hover {
  background:var(--color-selection);
  box-shadow:var(--shadow-floating)}
.import-surface strong {
  font-size:var(--text-body-lg);
  font-weight:600;
  margin-top:var(--space-1)}
.import-surface>.upload-instruction {
  font-size:var(--text-body);
  font-weight:400;
  color:var(--color-text-secondary)}
.import-surface small {
  font-size:var(--text-meta);
  font-weight:400;
  color:var(--color-text-secondary);
  margin-top:var(--space-2)}
.import-arrow {
  display:flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-round);
  background:var(--color-selection);
  margin-top:var(--space-3)}
.empty-foot {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  font-size:var(--text-meta);
  color:var(--color-text-secondary);
  margin-top:var(--space-10)}
.processing-orbit {
  width:44px;
  height:44px;
  border:1px solid var(--color-border-subtle);
  border-top:2px solid var(--color-border-subtle);
  border-radius:var(--radius-round);
  animation:orbit var(--duration-activity-cycle) linear infinite;
  margin-bottom:var(--space-2)}
@keyframes orbit {
  to {
  transform:rotate(360deg)}
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--space-2);
  margin:var(--space-1) 0 var(--space-3);
  gap:var(--space-2)}
.section-heading h2 {
  font-size:var(--text-help);
  letter-spacing:.2px;
  font-weight:600}
.layer {
  min-height:46px;
  border:1px solid transparent;
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-1) var(--space-1) var(--space-1) var(--space-2);
  position:relative;
  cursor:pointer;
  transition:background var(--duration-fast),border-color var(--duration-fast);
  flex-shrink:0}
.layer:hover {
  background:var(--color-hover)}
.layer[data-selected=true] {
  background:var(--color-selection);
  border-color:var(--color-border-subtle)}
.layer[data-target=true]:before {
  content:"";
  position:absolute;
  left:-1px;
  top:12px;
  bottom:12px;
  width:2px;
  background:var(--color-selection)}
.layer small {
  font-size:var(--text-meta);
  color:var(--color-text-secondary);
  display:block;
  font-weight:400;
  margin-top:var(--space-micro)}
.layer-actions {
  display:flex;
  gap:0}
.layer-actions button {
  height:26px;
  width:24px;
  opacity:.55}
.layer-actions button:hover, .layer:focus-within .layer-actions button {
  opacity:1}
.layer-actions svg {
  width:14px;
  height:14px}
.selection-hint {
  font-size:var(--text-help);
  line-height:1.7;
  color:var(--color-text-secondary);
  padding:var(--space-4) var(--space-2)}
.canvas-column {
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:var(--canvas)}
.canvas-heading {
  height:75px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--space-7);
  gap:var(--space-2);
  flex:none}
.canvas-heading h1 {
  font-size:var(--text-body-lg);
  font-weight:500;
  letter-spacing:-.3px;
  margin-top:var(--space-1)}
.canvas-heading .eyebrow {
  font-size:var(--text-meta);
  letter-spacing:1.2px}
.canvas-badge {
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-sm);
  padding:var(--space-1) var(--space-2);
  color:var(--color-text-secondary);
  font-size:var(--text-meta);
  white-space:nowrap}
.canvas-area {
  position:relative;
  flex:1;
  min-height:160px;
  margin:0 var(--space-5) var(--space-3)}
.tool-rail {
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  z-index:var(--z-floating-tools);
  background:var(--color-bg-control);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-floating);
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  padding:var(--space-1)}
.tool-rail button {
  width:34px;
  height:34px;
  border-radius:var(--radius-sm);
  position:relative}
.tool-rail button:hover {
  background:var(--color-hover)}
.tool-rail button[aria-pressed=true] {
  background:var(--accent);
  color:var(--accent-ink)}
.tool-separator {
  height:1px;
  background:var(--line);
  margin:var(--space-micro) var(--space-1)}
.canvas-utilities {
  position:absolute;
  bottom:13px;
  left:13px;
  right:13px;
  display:flex;
  justify-content:space-between;
  gap:var(--space-2);
  pointer-events:none;
  z-index:var(--z-floating-tools)}
.canvas-utilities>div {
  pointer-events:auto;
  background:var(--color-bg-control);
  box-shadow:var(--shadow-floating);
  border:1px solid var(--color-border-subtle);
  display:flex;
  align-items:center;
  border-radius:var(--radius-md);
  padding:var(--space-micro);
  gap:var(--space-micro)}
.canvas-utilities button {
  height:30px;
  min-width:30px;
  padding:0 var(--space-2);
  border-radius:var(--radius-sm)}
.canvas-utilities button:hover {
  background:var(--color-hover)}
.canvas-utilities svg {
  width:15px;
  height:15px}
.zoom-controls output {
  font-size:var(--text-meta);
  min-width:40px;
  text-align:center;
  font-variant-numeric:tabular-nums}
.inspector {
  border-left:1px solid var(--line);
  background:var(--color-bg-control);
  overflow:auto;
  min-height:0}
.inspector-section {
  padding:var(--space-7) var(--space-5);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  animation:inspector-in var(--duration-standard) var(--ease)}
@keyframes inspector-in {
  from {
  opacity:0;
  transform:translateY(4px)}
to {
  opacity:1;
  transform:none}
}
.inspector-section>h2 {
  font-size:var(--text-title-lg);
  line-height:1.15;
  font-weight:500;
  letter-spacing:-1px}
.inspector-section>p {
  font-size:var(--text-body);
  line-height:1.8;
  color:var(--color-text-secondary)}
.review-actions {
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  margin-top:var(--space-2)}
.review-actions button {
  justify-content:flex-start}
.inspector-note {
  border-top:1px solid var(--color-border-subtle);
  padding-top:var(--space-4);
  display:flex;
  align-items:flex-start;
  gap:var(--space-2);
  color:var(--color-text-secondary);
  margin-top:var(--space-2)}
.inspector-note svg {
  width:15px;
  height:15px;
  margin-top:var(--space-micro)}
.inspector-note p {
  font-size:var(--text-help);
  line-height:1.7}
.inspector-section>.primary {
  margin-top:var(--space-3);
  justify-content:space-between;
  background:var(--color-accent);
  color:var(--color-on-accent);
  border:1px solid var(--color-border-subtle)}
.inspector-section>.primary:hover {
  background:var(--color-accent)}
.field {
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  font-size:var(--text-meta);
  color:var(--color-text-secondary)}
.field input {
  font-size:var(--text-body);
  padding:var(--space-2)}
.property-group {
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  border-bottom:1px solid var(--color-border-subtle);
  padding:var(--space-1) 0 var(--space-5)}
.property-group>label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:var(--text-help);
  font-weight:500}
.fill-mode + .field-help { font:var(--type-help); color:var(--color-text-secondary); margin-bottom:var(--space-1); }
.field-label {
  font-size:var(--text-help);
  font-weight:500}
.field-help {
  font-size:var(--text-meta);
  line-height:1.65;
  color:var(--color-text-secondary)}
.segment {
  background:var(--color-selection);
  border:1px solid var(--color-border-subtle);
  padding:var(--space-micro);
  display:flex;
  gap:var(--space-micro);
  border-radius:var(--radius-md)}
.segment button {
  min-height:30px;
  flex:1;
  font-size:var(--text-help);
  border-radius:var(--radius-sm);
  color:var(--color-text-secondary)}
.segment button[aria-pressed=true], .segment button[aria-selected=true] {
  background:var(--color-bg-control);
  box-shadow:var(--shadow-floating);
  color:var(--color-on-accent)}
.segment button[data-selection=remove][aria-pressed=true] {
  background:var(--color-danger-bg);
  color:var(--color-danger)}
.segment svg {
  width:14px;
  height:14px}
.range-labels {
  display:flex;
  justify-content:space-between;
  font-size:var(--text-meta);
  color:var(--color-text-secondary)}
.reset-action {
  justify-content:flex-start;
  margin-top:var(--space-1);
  font-size:var(--text-help)}
.edit-completion {
  display:flex;
  gap:var(--space-2);
  margin-top:var(--space-2)}
.edit-completion button {
  flex:1}
.fill-status {
  font-size:var(--text-meta);
  color:var(--color-text-secondary);
  margin-top:-8px}
.quick-color {
  width:24px;
  height:24px;
  border-radius:var(--radius-sm);
  border:1px solid var(--color-border-subtle);
  flex:none}
.white {
  background:var(--color-bg-control)}
.black {

  background:#000}
.section-heading.small {
  padding:0;
  margin-top:var(--space-6);
  margin-bottom:var(--space-3)}
.section-heading.small h3 {
  font-size:var(--text-meta)}
.section-heading.small span {
  font-size:var(--text-meta);
  color:var(--color-text-secondary)}
details {
  border-bottom:1px solid var(--color-border-subtle);
  margin-top:var(--space-3);
  padding-bottom:var(--space-3)}
summary {
  font-size:var(--text-help);
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center}
summary svg {
  width:14px;
  height:14px;
  transition:transform var(--duration-standard)}
details[open] summary svg {
  transform:rotate(90deg)}
details p {
  margin-top:var(--space-3)}
.completion-mark {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-1);
  font-size:var(--text-meta);
  color:var(--color-text-secondary);
  margin-top:var(--space-4)}
.completion-mark svg {
  width:13px;
  height:13px}
.colorway-dock {
  background:var(--color-selection);
  border-top:1px solid var(--color-border-subtle);
  flex:none;
  padding:var(--space-3) var(--space-4) var(--space-3);
  margin-bottom:var(--space-2)}
[data-tip] {
  position:relative}
[data-tip]:after {
  content:attr(data-tip);
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  transform:translate(3px,-50%);
  background:var(--color-ink);
  color:var(--color-bg-control);
  border-radius:var(--radius-sm);
  white-space:nowrap;
  font-size:var(--text-meta);
  font-weight:400;
  padding:var(--space-2) var(--space-2);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--duration-fast),transform var(--duration-fast);
  z-index:var(--z-tooltip)}
[data-tip]:hover:after, [data-tip]:focus-visible:after {
  opacity:1;
  transform:translate(0,-50%);
  transition-delay:280ms}
.canvas-utilities [data-tip]:after {
  left:50%;
  top:auto;
  bottom:calc(100% + 8px);
  transform:translateX(-50%)}
dialog {
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-lg);
  background:var(--color-bg-control);
  color:var(--ink);
  padding:var(--space-6);
  width:min(420px,90vw);
  box-shadow:var(--shadow-floating)}
dialog::backdrop {
  background:var(--color-selection);
  backdrop-filter:blur(2px)}
.dialog-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:var(--space-5)}
dialog h2 {
  font-size:var(--text-title-md);
  font-weight:500;
  margin-bottom:var(--space-3)}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:var(--space-2);
  margin-top:var(--space-6)}
@media(max-width:1150px) {
.inspector-section {
  padding:var(--space-6) var(--space-4)}
.canvas-heading {
  padding:0 var(--space-4)}
.canvas-area {
  margin:0 var(--space-3) var(--space-2)}
.app-bar {
  padding:0 var(--space-4)}
.layer {
  gap:var(--space-1);
  padding-left:var(--space-2)}
.layer-actions button {
  width:20px}
.empty-workspace {
  gap:var(--space-10) var(--space-12)}
.workspace-modes button {
  min-width:94px;
  padding:var(--space-2) var(--space-3)}
}
@media(max-width:930px) {
.app-bar {
  gap:var(--space-2)}
.brand-product {
  display:none}
.brand {
  font-size:var(--text-body)}
.brand-mark {
  font-size:var(--text-title-md);
  width:30px}
.workspace-modes {
  position:static;
  transform:none}
.workspace-modes button {
  min-width:72px;
  padding:var(--space-2) var(--space-2)}
.layer-actions {
  flex-direction:column}
.layer-actions button {
  height:19px}
.layer {
  min-height:49px}
.canvas-badge {
  display:none}
.inspector-section>h2 {
  font-size:var(--text-title-md)}
.selection-hint {
  font-size:var(--text-meta)}
.colorway-dock {
  padding:var(--space-2)}
.canvas-utilities {
  left:8px;
  right:8px;
  bottom:8px}
.canvas-utilities button {
  min-width:25px;
  padding:0 var(--space-1)}
}
@media(max-width:720px) {
.empty-workspace {
  grid-template-columns:1fr;
  padding:var(--space-8) var(--space-6);
  gap:var(--space-7)}
.empty-copy h1 {
  font-size:var(--text-title-lg)}
.empty-copy {
  max-width:420px}
.empty-copy h1 br {
  display:none}
.empty-copy h1 em {
  display:block}
.import-surface {
  min-height:300px}
.empty-foot {
  gap:var(--space-5);
  margin-top:var(--space-2)}
.app-bar {
  min-width:700px}
.brand-product {
  display:block}
}
.field-help, .range-labels, .fill-status, .layer small, .section-heading.small span {
  color:var(--color-text-secondary)}
.field-help, .selection-hint, .inspector-note p {
  font-size:var(--text-help)}
.eyebrow {
  color:var(--color-text-secondary)}
.canvas-status {
  font-size:var(--text-meta)}
.empty-foot, .import-surface small {
  color:var(--color-text-secondary)}
.layer-actions button {
  min-width:24px;
  min-height:24px}
.colorway-dock {
  animation:inspector-in var(--duration-standard) var(--ease)}
.tool-rail {
  left:auto;
  right:13px}
.tool-rail[data-align=selection] {
  top:var(--selection-tools-top);
  transform:none}
.tool-rail [data-tip]:after {
  left:auto;
  right:calc(100% + 10px);
  transform:translate(-3px,-50%)}
.tool-rail [data-tip]:hover:after, .tool-rail [data-tip]:focus-visible:after {
  transform:translate(0,-50%)}
@media(max-width:930px) {
.tool-rail {
  right:8px}
}
@media(prefers-reduced-motion:reduce) {
*, *:before, *:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}
.selection-hint {
  display:flex;
  align-items:center;
  gap:var(--space-2)}
.selection-hint>span:first-child {
  display:flex;
  flex:none}
.selection-hint svg {
  width:13px;
  height:13px}
.canvas-area {
  margin-top:var(--space-5)}
.canvas-badge {
  display:inline-block;
  position:absolute;
  right:12px;
  top:12px;
  z-index:var(--z-floating-tools);
  pointer-events:none;
  background:var(--color-bg-control)}
@media(max-width:1150px) {
.canvas-area {
  margin-top:var(--space-3)}
}
.selection-hint {
  display:block}
.base-description {
  margin:0;
  font-size:var(--text-body);
  line-height:1.8;
  color:var(--color-text-secondary)}
.base-description p {
  margin:0}
.base-description p+p {
  margin-top:var(--space-2)}
.inspector-divider {
  width:100%;
  height:0;
  margin:0;
  border:0;
  border-top:1px solid var(--line)}
.inspector-divider+.primary {
  margin-top:0}
.inspector-footer {
  flex:none;
  padding:0 var(--space-5) var(--space-5);
  background:var(--color-bg-control)}
.inspector-footer:before {
  content:"";
  display:block;
  border-top:1px solid var(--line);
  margin-bottom:var(--space-4)}
.inspector-footer .primary {
  justify-content:center;
  width:100%}
.studio-color-picker {
  min-width:0}
.studio-color-surface {
  --picker-hue:hsl(30 100% 50%);
  position:relative;
  height:112px;
  overflow:hidden;
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-md);
  background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--picker-hue);
  cursor:crosshair;
  touch-action:none}
.studio-color-surface:focus-visible, .studio-color-surface:has(.color-picker-axis:focus-visible) {
  outline:2px solid var(--color-focus);
  outline-offset:3px}
.studio-hue-control {
  display:block;
  margin-top:var(--space-2)}
.studio-hue-control input {
  display:block;
  width:100%;
  height:12px;
  margin:0;
  border:0;
  border-radius:var(--radius-lg);
  appearance:none;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.studio-hue-control input::-webkit-slider-thumb {
  width:16px;
  height:16px;
  border:3px solid var(--color-bg-control);
  border-radius:var(--radius-round);
  appearance:none;
  background:transparent;
  box-shadow:var(--control-swatch-outline)}
.studio-color-values {
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 64px 30px;
  align-items:center;
  gap:var(--space-1);
  margin-top:var(--space-3)}
.studio-color-fields {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  min-width:0;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--color-bg-control)}
.studio-color-fields label {
  display:flex;
  align-items:center;
  min-width:0;
  gap:var(--space-micro);
  padding:0 var(--space-1);
  border-right:1px solid var(--line)}
.studio-color-fields label:last-child {
  border-right:0}
.studio-color-fields span {
  font-size:var(--text-meta);
  color:var(--color-text-secondary)}
.studio-color-fields span:empty {
  display:none}
.studio-color-fields input {
  width:100%;
  height:32px;
  padding:var(--space-micro) var(--space-micro);
  border:0;
  font-family:var(--font-mono);
  font-size:var(--text-meta)}
.studio-color-fields input[aria-invalid=true] {
  color:var(--color-error)}
.studio-color-fields:has(input[aria-invalid=true]) {
  border-color:var(--color-danger)}
.color-field-error {
  font:var(--type-help);
  color:var(--color-danger);
  margin-top:var(--space-2)}
.studio-eyedropper {
  width:30px;
  height:34px}
.studio-eyedropper svg {
  width:15px;
  height:15px}
@media(max-width:1150px) {
.inspector-footer {
  padding:0 var(--space-4) var(--space-4)}
.inspector-footer:before {
  margin-bottom:var(--space-4)}
.studio-color-values {
  grid-template-columns:25px minmax(0,1fr) 28px;
  gap:var(--space-1)}
.studio-color-values>.studio-eyedropper {
  grid-column:3;
  grid-row:2}
}
.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important}
.studio-color-fields:has(label:nth-child(2)[hidden]) {
  grid-template-columns:1fr}
.canvas-column {
  position:relative}
body { font: var(--type-body); }
button { font: var(--type-label); }
p, .base-description { font: var(--type-body); color:var(--color-text-secondary); }
h2 { font:var(--type-title-sm); }
h3 { font:var(--type-label); }
.brand { font:var(--type-body-lg); font-family:var(--font-display); font-weight:700; letter-spacing:0; gap:var(--space-3); }
.brand-mark { width:32px; height:32px; flex:none; padding:0; }
.brand-product, .mode-number, .range-labels, .layer small, .section-heading.small span { font:var(--type-meta); color:var(--color-text-secondary); }
.eyebrow, .empty-copy .eyebrow { font:var(--type-eyebrow); color:var(--color-text-secondary); letter-spacing:1.2px; }
/* Navy is a small contextual cue, not a heading or body-text palette. */
.design-system .inspector-section>.eyebrow,
.design-system .colors-sidebar>.eyebrow,
.design-system .results-eyebrow { color:var(--color-eyebrow-emphasis); }
.design-system .segment button[data-selection=add][aria-pressed=true] { color:var(--color-on-accent); }
.batch-design-system[data-work-mode=lock] .segment button[data-selection=add][aria-pressed=true] { color:var(--color-lock); }
.mode-number { opacity:1; }
.app-bar { height:var(--app-bar-height); padding:0 var(--space-6); background:var(--color-bg-inspector); gap:var(--space-5); z-index:var(--z-app-bar); }
.inspector, .inspector-footer { background:var(--color-bg-inspector); }
.inspector-section { padding:var(--space-6) var(--space-4); gap:var(--space-3); }
.inspector-section>h2 { font:var(--type-title-lg); }
.inspector-section>p { font:var(--type-body); }
.inspector-footer { padding:0 var(--space-5) var(--space-5); }
.inspector-footer:before { margin-bottom:var(--space-4); }
.inspector-note p, .selection-hint, .field-help { font:var(--type-help); color:var(--color-text-secondary); }
.section-heading h2, .section-heading.small h3 { font:var(--type-label); letter-spacing:0; }
.field, .field-label, .property-group>label { font:var(--type-help); color:var(--color-ink); }
.layer { min-height:44px; gap:var(--space-2); padding:var(--space-1) var(--space-2); border-radius:var(--radius-md); }
.layer-actions { flex:none; }
.layer-actions button { width:var(--control-height-compact); height:var(--control-height-compact); min-width:var(--control-height-compact); opacity:1; color:var(--color-text-secondary); padding:0; }
.layer-actions button:disabled { opacity:var(--button-disabled-opacity); }
.layer[data-selected=true] { background:var(--color-selection); border-color:var(--color-selection-border); }
.layer[data-target=true]:before { background:var(--color-active-target); }
.primary, .secondary { min-height:var(--control-height-default); padding:var(--space-1) var(--space-4); border-radius:var(--radius-pill); }
.primary, .inspector-section>.primary { background:var(--color-ink); color:var(--color-bg-control); border:1px solid var(--color-ink); box-shadow:var(--shadow-none); }
.primary:hover:not(:disabled), .inspector-section>.primary:hover:not(:disabled) { background:var(--button-primary-hover); border-color:var(--button-primary-hover); }
.inspector-section>.primary, .inspector-footer .primary { min-height:var(--control-height-prominent); }
.secondary { background:var(--color-bg-control); border:var(--border-control); }
.secondary:hover:not(:disabled), .quiet:hover:not(:disabled), .icon-button:hover:not(:disabled) { background:var(--color-hover); color:var(--color-ink); }
.quiet { min-height:var(--control-height-compact); padding:var(--space-1) var(--space-3); color:var(--color-text-secondary); }
.icon-button { width:var(--control-height-compact); height:var(--control-height-compact); min-width:var(--control-height-compact); padding:0; }
button:disabled { opacity:var(--button-disabled-opacity); transform:none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .studio-color-surface:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }
button svg, span[data-icon] svg { stroke-width:var(--icon-stroke); width:var(--icon-standard); height:var(--icon-standard); }
.canvas-utilities svg, .layer-actions svg, .studio-eyedropper svg { width:var(--icon-compact); height:var(--icon-compact); }
.selection-hint svg, .completion-mark svg { width:var(--icon-meta); height:var(--icon-meta); }
.workspace-modes, .segment { background:var(--color-bg-canvas); border:var(--border-subtle); border-radius:var(--radius-md); padding:var(--space-1); gap:var(--space-micro); }
.workspace-modes button, .segment button { font:var(--type-label); min-height:var(--control-height-compact); padding:var(--space-1) var(--space-2); color:var(--color-text-secondary); }
.workspace-modes button { padding-inline:var(--space-5); }
.workspace-modes button[aria-pressed=true], .segment button[aria-pressed=true], .segment button[aria-selected=true] { color:var(--color-ink); background:var(--color-bg-control); box-shadow:var(--shadow-control); }
.segment button[data-selection=remove][aria-pressed=true] { color:var(--color-remove); border-color:var(--color-remove); background:var(--color-remove-bg); }
.tool-rail button[aria-pressed=true] { color:var(--color-on-accent); background:var(--editor-tool-accent,var(--editor-accent)); border-color:var(--color-focus); }
.tool-rail { right:var(--canvas-chrome-inset); padding:var(--space-1); gap:var(--space-1); border:var(--border-subtle); background:var(--color-bg-control); border-radius:var(--radius-md); box-shadow:var(--shadow-floating); z-index:var(--z-floating-tools); }
.tool-rail button { width:var(--control-height-default); height:var(--control-height-default); }
.canvas-utilities { bottom:var(--canvas-chrome-inset); left:var(--canvas-chrome-inset); right:var(--canvas-chrome-inset); z-index:var(--z-floating-tools); }
.canvas-utilities>div { background:var(--color-bg-control); border-radius:var(--radius-md); box-shadow:var(--shadow-floating); gap:var(--space-micro); }
.canvas-utilities button { height:var(--control-height-compact); min-width:var(--control-height-compact); padding:0 var(--space-1); border-radius:var(--radius-sm); }
.canvas-badge { font:var(--type-meta); padding:var(--space-1) var(--space-2); color:var(--color-text-secondary); border:var(--border-subtle); background:var(--color-bg-control); }
input, select { font:var(--type-body); padding:var(--space-2); border:var(--border-control); border-radius:var(--radius-sm); min-height:var(--control-height-default); }
input[type=range] { accent-color:var(--color-slider); min-height:24px; }
input[type=number], .zoom-controls output { font-variant-numeric:tabular-nums; }
input[aria-invalid=true] { border-color:var(--color-danger); outline-color:var(--color-danger); color:var(--color-danger); background:var(--color-danger-bg); }
.field input { font:var(--type-body); padding:var(--space-2); }
summary { font:var(--type-label); min-height:var(--control-height-compact); }
.studio-color-surface { border:var(--border-control); border-radius:var(--radius-md); }
.studio-color-fields { border:var(--border-control); }
.studio-color-fields span { font:var(--type-meta); color:var(--color-text-secondary); }
.studio-color-fields input { height:var(--control-height-default); min-height:0; font:var(--type-help); font-family:var(--font-mono); padding:var(--space-micro) 0; }
.studio-color-fields label { padding:0 var(--space-1); }
.studio-color-values { grid-template-columns:32px minmax(0,1fr) 80px var(--control-height-compact); gap:var(--space-1); margin-top:var(--space-3); }
.studio-eyedropper { height:var(--control-height-default); }
.quick-color { width:var(--control-height-compact); height:var(--control-height-compact); border:var(--border-control); border-radius:var(--radius-sm); }
.completion-mark { font:var(--type-meta); color:var(--color-success); }
.colorway-dock { background:var(--color-bg-structure); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-2); border-top:var(--border-subtle); }
[data-tip]:after { font:var(--type-meta); color:var(--color-bg-control); background:var(--color-ink); box-shadow:var(--shadow-popover); border-radius:var(--radius-sm); z-index:var(--z-tooltip); padding:var(--space-2); }
dialog { width:min(460px,calc(100vw - 32px)); background:var(--color-bg-inspector); border:var(--border-control); padding:var(--space-6); border-radius:var(--radius-lg); box-shadow:var(--shadow-dialog); z-index:var(--z-dialog); max-height:calc(100dvh - 32px); overflow:auto; }
dialog h2 { font:var(--type-title-md); margin-bottom:var(--space-3); }
dialog::backdrop { background:var(--overlay-scrim); backdrop-filter:none; }
.empty-workspace { gap:var(--space-10) var(--space-20); padding:var(--space-16) var(--space-12) var(--space-6); }
.empty-copy h1 { font:var(--type-display); }
.empty-copy em { font-family:var(--font-display); font-style:normal; }
.empty-copy p { font:var(--type-body-lg); color:var(--color-text-secondary); }
.empty-copy .eyebrow { margin-bottom:var(--space-8); }
.empty-foot { font:var(--type-meta); color:var(--color-text-secondary); }
.import-surface { background:var(--color-selection); border:var(--border-control); border-radius:var(--radius-lg); }
.import-surface:hover { background:var(--color-selection); box-shadow:var(--shadow-floating); }
.import-surface strong { font:var(--type-title-sm); }
.import-surface>.upload-instruction { font:var(--type-body); color:var(--color-text-secondary); }
.import-surface small { font:var(--type-help); color:var(--color-text-secondary); }
.processing-orbit { border-color:var(--color-border-subtle); border-top-color:var(--color-focus); }
.compact-workspace-notice { display:none; }
@media (max-width:1150px) {
.inspector-section { padding:var(--space-6) var(--space-4); }
.inspector-footer { padding:0 var(--space-4) var(--space-5); }
.studio-color-values { grid-template-columns:32px minmax(0,1fr) var(--control-height-compact); }
.studio-color-values>.studio-eyedropper { grid-column:3; grid-row:2; }
}
@media (max-width:930px) {
.workspace-modes { position:relative; left:auto; transform:none; }
.inspector-section>h2 { font:var(--type-title-md); }
.workspace-modes button { min-width:72px; padding:var(--space-1) var(--space-2); }
.app-bar { padding-inline:var(--space-4); }
.layer { padding-inline:var(--space-1); gap:var(--space-1); }
.canvas-utilities { gap:var(--space-1); }
.canvas-utilities button { padding:0; min-width:24px; }
.zoom-controls output { min-width:30px; }
}
@media (max-width:720px) {
.app-bar { min-width:0; height:auto; min-height:var(--app-bar-height); flex-wrap:wrap; gap:var(--space-2); padding:var(--space-3) var(--space-4); }
.brand-mark { display:none; }
.workspace-modes { position:relative; left:auto; transform:none; order:3; width:100%; justify-content:center; }
.workspace-modes button { flex:1; }
.empty-workspace { padding:var(--space-8) var(--space-6); gap:var(--space-7); }
.empty-copy h1 { font:var(--type-display); font-size:50px; }
.empty-copy h1 br { display:block; }
.empty-foot { flex-direction:column; gap:var(--space-2); }
.inspector, .history-controls, [data-action=add-cc] { display:none!important; }
.canvas-utilities { justify-content:flex-start; }
.canvas-column>.inspector-footer:not([hidden]) { display:block; padding:0 var(--space-4) var(--space-4); background:var(--color-bg-inspector); }
dialog { width:calc(100vw - 32px); }
}
.design-system button { border-radius:var(--radius-pill); }
.workspace-modes, .segment, .canvas-utilities>div { border-radius:var(--radius-pill); }
.workspace-modes, .segment { isolation:isolate; }
.segment { position:relative; }
.sliding-segment::before {
  content:""; position:absolute; left:0; top:0; pointer-events:none; z-index:-1;
  width:var(--segment-width,0px); height:var(--segment-height,0px);
  transform:translate(var(--segment-x,0px),var(--segment-y,0px));
  border-radius:var(--radius-pill); background:var(--segment-color,var(--color-bg-control));
  box-shadow:inset 0 0 0 1px var(--segment-border-color,var(--color-selection-border)), var(--shadow-control); opacity:0;
}
.sliding-segment[data-indicator-ready]::before { opacity:1; }
.sliding-segment[data-indicator-animate]::before {
  transition:transform var(--duration-standard) var(--ease-standard),width var(--duration-standard) var(--ease-standard),height var(--duration-standard) var(--ease-standard),background-color var(--duration-fast);
}
.sliding-segment button { position:relative; }
.sliding-segment button:active:not(:disabled) { transform:none; }
.sliding-segment button[aria-pressed=true], .sliding-segment button[aria-selected=true], .segment.sliding-segment button[data-selection][aria-pressed=true] { background:transparent; box-shadow:none; }
.sliding-segment:has(button[data-selection=remove][aria-pressed=true]) { --segment-border-color:var(--color-remove); }
/* The indicator owns the fill and 1px edge for both modes; an opaque button
 * would paint over its inset edge. */
/* Reference gets utility coral only while a marking/measurement task is active. */
.design-system .reference-action { color:var(--color-ink); border-color:var(--color-border-control); background:var(--color-bg-control); }
.design-system .reference-action:hover:not(:disabled) { background:var(--color-hover); }
.design-system .reference-action:focus-visible { outline-color:var(--color-keyboard-focus); }
.design-system .reference-action[data-reference-active=true] { color:var(--color-reference); border-color:var(--color-reference); background:var(--color-reference-bg); opacity:1; }
.design-system .reference-action[data-reference-active=true]:hover:not(:disabled) { background:var(--color-red-hover); }
@media (pointer:coarse) {
.design-system .icon-button { min-width:44px; }
}
@media (prefers-reduced-motion:reduce) {
*, *:before, *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
.upload-site-header { display:none; }
.design-system[data-phase=empty]>.app-bar { display:none; }
.design-system[data-phase=empty]>.upload-site-header {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  position:relative; z-index:var(--z-app-bar); min-height:var(--upload-header-height);
  padding:var(--space-3) max(32px,calc((100vw - var(--upload-content-max))/2 + 40px));
  background:var(--color-bg-inspector); border-bottom:var(--border-subtle); gap:var(--space-6);
}
.upload-brand { display:inline-flex; align-items:center; gap:var(--space-3); justify-self:start; color:var(--color-ink); text-decoration:none; font:var(--type-label); font-family:var(--font-display); font-weight:700; }
.upload-brand-slot { flex:none; width:32px; height:32px; }
.brand-mark { display:block; }
.brand-mark img, .upload-brand-slot img { display:block; width:100%; height:100%; object-fit:contain; }
.upload-navigation { display:contents; }
.upload-product-links, .upload-account-links { display:flex; align-items:center; gap:var(--space-6); }
.upload-account-links { justify-self:end; gap:var(--space-2); }
.upload-navigation a, .upload-navigation button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; white-space:nowrap; color:var(--color-text-secondary); font:var(--type-label); text-decoration:none; }
.upload-navigation a:hover, .upload-navigation a[aria-current] { color:var(--color-ink); }
.upload-navigation button { background:none; border:0; padding:0; }
.upload-navigation button[aria-disabled=true] { cursor:default; }
.upload-account-links button { padding:var(--space-2) var(--space-5); color:var(--color-ink); }
.upload-account-links .upload-login { border:var(--border-subtle); }
.upload-account-links .upload-signup { background:var(--color-accent); color:var(--color-on-accent); }
.design-system .upload-menu-toggle { display:none; width:44px; height:44px; padding:0; align-items:center; justify-content:center; border:0; background:transparent; color:var(--color-ink); }
.upload-product-links a, .upload-product-links button, .upload-account-links .upload-login { font-weight:400; }
@media (max-width:960px) {
.design-system[data-phase=empty]>.upload-site-header { grid-template-columns:1fr auto; padding-inline:24px; gap:var(--space-3); }
.design-system .upload-menu-toggle { display:flex; }
.upload-navigation { position:absolute; top:calc(100% + 8px); left:24px; right:24px; display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-5); border:var(--border-subtle); border-radius:var(--radius-lg); background:var(--color-bg-inspector); box-shadow:var(--shadow-popover); }
.upload-product-links { align-items:stretch; flex-direction:column; gap:var(--space-1); }
.upload-product-links a, .upload-product-links button { justify-content:flex-start; padding-inline:var(--space-3); }
.upload-account-links { border-top:var(--border-subtle); padding-top:var(--space-4); }
.upload-account-links button { flex:1; }
}
.tool-rail, .canvas-badge { border-radius:var(--radius-pill); }
.design-system .quick-color { border-radius:var(--radius-md); }
.design-system .empty-workspace {
  max-width:none; width:100%; min-height:calc(100dvh - var(--app-bar-height));
  grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:1fr auto;
  align-content:stretch; align-items:stretch;
  padding:clamp(24px,4vw,64px); gap:var(--space-12) clamp(32px,5vw,80px);
}
.empty-copy { padding-block:var(--space-6); }
.empty-copy h1 { letter-spacing:-2px; }
.empty-copy .eyebrow { margin-bottom:var(--space-6); }
.upload-intro { margin-top:var(--space-6); }
.upload-intro p { margin:0; }
.upload-intro p+p { margin-top:var(--space-2); }
.design-system .import-surface {
  min-width:0; min-height:360px; border-radius:var(--upload-box-radius); border:1px dashed var(--color-border-control);
  overflow:hidden; isolation:isolate;
  background:var(--color-bg-inspector); padding:var(--space-12) var(--space-6); gap:var(--space-4);
  text-align:center; box-shadow:none;
}
.design-system .import-surface:not(:disabled):not([aria-disabled=true]):hover { background:var(--color-bg-inspector); border-color:var(--color-focus); }
.design-system .import-surface:focus-visible { outline-color:var(--color-keyboard-focus); }
.design-system .import-surface > * { position:relative; z-index:1; }
.design-system .import-surface::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:var(--upload-origin-x, 50%); top:var(--upload-origin-y, 50%);
  width:var(--upload-circle-size, 64px); height:var(--upload-circle-size, 64px);
  border-radius:var(--radius-round);
  background:radial-gradient(circle, var(--color-upload-hover) 98%, transparent 100%);
  transform:translate(-50%, -50%) scale(1);
  transition:transform var(--duration-upload-return) ease-in-out;
}
.design-system .import-surface:not(:disabled):not([aria-disabled=true]):hover::before {
  transform:translate(-50%, -50%) scale(var(--upload-fill-scale, 1));
  transition-duration:var(--duration-upload-fill); transition-timing-function:linear;
}
@media (prefers-reduced-motion:reduce) {
  .design-system .import-surface::before { transition:none; }
}
.design-system .import-surface:active { transform:none; }
.import-surface .import-arrow { width:64px; height:64px; margin:0 0 var(--space-2); border:0; border-radius:var(--radius-round); background:var(--color-accent); color:var(--color-on-accent); }
.import-surface .import-arrow svg { width:32px; height:32px; }
.import-surface strong { font:var(--type-title-md); margin:0; }
.import-surface .upload-instruction { font:var(--type-body); }
.design-system .import-surface .upload-meta { display:flex; flex-direction:column; gap:var(--space-1); font:var(--type-help); margin-top:var(--space-2); }
.empty-foot.upload-workflow {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-8);
  margin:0; padding-top:var(--space-6); border-top:var(--border-subtle);
}
.upload-workflow .eyebrow { margin-bottom:var(--space-3); }
.upload-workflow strong { font:var(--type-label); color:var(--color-ink); }
.upload-workflow p { font:var(--type-help); margin-top:var(--space-2); max-width:34ch; }
@media (max-width:930px) {
.design-system .empty-workspace { gap:var(--space-8); padding:var(--space-6); }
.empty-copy h1 { font-size:50px; }
.upload-intro { max-width:28ch; }
}
@media (max-width:720px) {
.design-system .empty-workspace { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; padding:var(--space-6); gap:var(--space-6); }
.empty-copy { padding-block:var(--space-3); }
.empty-copy h1 { font-size:50px; }
.empty-copy .eyebrow { margin-bottom:var(--space-4); }
.design-system .import-surface { min-height:340px; padding:var(--space-12) var(--space-4) var(--space-6); }
.empty-foot.upload-workflow { grid-template-columns:1fr; gap:var(--space-6); }
}
.design-system .empty-workspace {
  width:100%; max-width:var(--upload-content-max); margin-inline:auto; min-height:calc(100dvh - var(--upload-header-height));
  padding:64px 40px 40px; gap:64px;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:1fr auto;
  align-content:stretch; align-items:center;
}
.empty-copy { container-type:inline-size; max-width:none; padding:0; }
.empty-copy h1 { font:var(--type-upload-display); letter-spacing:-.035em; }
.empty-copy h1 br { display:block; }
.empty-copy h1 em { display:inline; white-space:nowrap; font-family:var(--font-display); font-style:normal; font-weight:500; }
.upload-intro { max-width:none; margin-top:var(--space-6); }
.design-system .import-surface { min-height:400px; padding:var(--space-8) var(--space-6); }
.import-surface .import-arrow { width:56px; height:56px; }
.import-surface .import-arrow svg { width:28px; height:28px; }
.empty-foot.upload-workflow { gap:var(--space-6); }
.upload-workflow p { max-width:36ch; }
@media (max-width:1100px) {
.design-system .empty-workspace { padding:48px 40px 32px; gap:48px 32px; }
.design-system .import-surface { min-height:360px; }
}
@media (max-width:800px) {
.design-system .empty-workspace { max-width:640px; padding:40px 24px 32px; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; gap:32px; }
.empty-copy .eyebrow { margin-bottom:var(--space-4); }
.design-system .import-surface { min-height:340px; padding:var(--space-6) var(--space-4); }
.empty-foot.upload-workflow { grid-template-columns:1fr; gap:var(--space-6); }
}

.dialog-body { font:var(--type-body); color:var(--color-text-secondary); white-space:pre-line; }
input[aria-invalid=true]:focus-visible { outline-color:var(--color-keyboard-focus); }

/* Results completion action reuses the existing primary hierarchy and geometry. */
.result-primary-action { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); }
.result-primary-action:focus-visible { outline-color:var(--color-keyboard-focus); }

/* Editor/selection focus is independent of selected green edges and mode fills.
 * ColorField and Dialog retain their established focus rules. */
.tool-rail button:focus-visible, .canvas-utilities button:focus-visible,
.workspace-modes button:focus-visible, .segment button:focus-visible,
.layer-name:focus-visible, .layer-actions button:focus-visible,
.cc-card button:focus-visible, .colorway-card:focus-visible,
.pattern-tools button:focus-visible, .pattern-library button:focus-visible,
.library-swatch:focus-visible, .fill-chip:focus-visible,
.swatch-library-item:focus-visible { outline-color:var(--color-keyboard-focus); }
.zoom-controls button[aria-pressed=true] { background:var(--color-accent); color:var(--color-on-accent); box-shadow:inset 0 0 0 1px var(--color-selection-border); }
.library-swatch[aria-pressed=true], .fill-chip[aria-pressed=true],
.pattern-library button[aria-pressed=true], .swatch-library-item[aria-pressed=true],
.background-choice:has(input:checked) {
  outline:2px solid var(--color-selection-border); outline-offset:2px;
}
.library-swatch:focus-visible, .fill-chip:focus-visible,
.pattern-library button:focus-visible, .swatch-library-item:focus-visible,
.background-choice:has(input:focus-visible), .background-choice:has(button:focus-visible) {
  outline:2px solid var(--color-keyboard-focus); outline-offset:5px;
}
.library-swatch[aria-pressed=true]:focus-visible, .fill-chip[aria-pressed=true]:focus-visible,
.pattern-library button[aria-pressed=true]:focus-visible, .swatch-library-item[aria-pressed=true]:focus-visible,
.background-choice:has(input:checked):has(:focus-visible) {
  box-shadow:0 0 0 2px var(--color-bg-control), 0 0 0 4px var(--color-selection-border);
}

/* Results heading and action groups retain native wrapping at narrow widths. */
.result-heading-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
.result-heading-row>div { flex:1 1 240px; min-width:0; }
.result-heading-row>fieldset { margin-left:auto; }
.result-selection-bar>.result-toolbar-right { margin-left:auto; }