/* Flat Fill Studio-only presentation. Shared rules live in liteworkroom-components.css. */
.studio.design-system { --flat-detail-icon-size:14px; }
.studio {
  min-height:100dvh}
.edition {
  font-size:var(--text-meta);
  color:var(--muted);
  letter-spacing:1.4px}
.app-actions {
  display:flex;
  gap:var(--space-2);
  align-items:center}
.empty-sequence {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-top:var(--space-8);
  font-size:var(--text-meta);
  color:var(--color-text-secondary)}
.empty-sequence b {
  font-weight:500;
  color:var(--color-text-secondary);
  margin-left:var(--space-1)}
.empty-sequence i {
  width:24px;
  height:1px;
  background:var(--color-selection)}
.paper-demo {
  display:block;
  background:var(--color-bg-control);
  width:171px;
  height:231px;
  position:relative;
  padding:var(--space-5) var(--space-4);
  box-shadow:var(--shadow-floating);
  transform:rotate(-5deg);
  transition:transform var(--duration-slow) var(--ease)}
.import-surface:hover .paper-demo {
  transform:rotate(-2deg) translateY(-3px)}
.paper-demo>svg {
  width:100%;
  height:168px;
  stroke:var(--color-text-secondary);
  stroke-width:1.4}
.paper-label {
  display:block;
  font-size:var(--text-meta);
  letter-spacing:1.3px;
  color:var(--color-text-secondary);
  text-align:left}
.paper-colors {
  display:flex;
  gap:var(--space-1);
  margin-top:var(--space-micro)}
.paper-colors i {
  display:block;
  width:16px;
  height:8px;
  background:var(--color-selection)}
.paper-colors i:nth-child(2) {
  background:var(--color-selection)}
.paper-colors i:nth-child(3) {
  background:var(--color-selection)}
.paper-colors i:nth-child(4) {
  background:var(--color-selection)}
.processing {
  min-height:calc(100dvh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:var(--space-5)}
.processing h1 {
  font-size:var(--text-title-lg);
  letter-spacing:-1.3px;
  font-weight:500}
.processing p {
  font-size:var(--text-body);
  color:var(--muted)}
.workbench {
  display:grid;
  grid-template-columns:218px minmax(300px,1fr) 286px;
  height:calc(100dvh - 64px);
  min-height:580px}
.layers-panel {
  background:var(--color-bg-structure);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  padding:var(--space-6) var(--space-3) 0;
  min-height:0;
  overflow:auto}
.document-meta {
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding:0 var(--space-2) var(--space-6);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--space-3)}
.document-meta strong {
  font-size:var(--text-body);
  font-weight:500;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis}
.layer-stack {
  display:flex;
  flex-direction:column;
  gap:var(--space-1)}
.layer-base {
  margin-bottom:var(--space-2)}
.layer-divider {
  height:1px;
  background:var(--line);
  margin:0 var(--space-2) var(--space-2)}
.layer-dot {
  width:10px;
  height:10px;
  border-radius:var(--radius-round);
  flex:none;
  border:1px solid var(--color-border-subtle)}
.layer-name {
  flex:1;
  min-width:0;
  font-size:var(--text-body);
  font-weight:500;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden}
.layer-actions .danger:hover {
  background:var(--color-danger-bg);
  color:var(--danger)}
.merge-bar {
  background:var(--color-selection);
  padding:var(--space-2);
  border-radius:var(--radius-md);
  margin:var(--space-3) 0 0;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  justify-content:space-between;
  font-size:var(--text-meta)}
.merge-bar button {
  font-size:var(--text-meta);
  padding:var(--space-1) var(--space-2);
  min-height:30px}
#st-viewport {
  position:absolute;
  inset:0;
  overflow:hidden;
  touch-action:none;
  background:var(--color-bg-control);
  border:1px solid var(--color-border-subtle);
  outline-offset:1px;
  box-shadow:var(--shadow-floating)}
#st-canvas {
  position:absolute;
  top:0;
  left:0;
  transform-origin:0 0;
  display:block;
  max-width:none;
  pointer-events:none}
.studio.design-system #st-path-overlay {
  position:absolute;
  top:0;
  left:0;
  pointer-events:none;
  overflow:visible;
  transform-origin:0 0;
  will-change:transform;
  z-index:var(--z-sticky)}
#st-gesture {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:var(--z-sticky)}
#st-brush-cursor {
  position:absolute;
  border:1px solid var(--color-ink);
  box-shadow:var(--control-swatch-outline);
  pointer-events:none;
  border-radius:var(--radius-round);
  z-index:var(--z-sticky);
  transform:translate(-50%,-50%)}
[data-mode=color] #st-viewport {
  background-color:var(--color-selection);
  background-image:conic-gradient(var(--color-bg-canvas) 25%,transparent 0 50%,var(--color-bg-canvas) 0 75%,transparent 0);
  background-size:16px 16px}
.fill-mode {
  margin-bottom:var(--space-1)}
.color-well {
  display:block;
  position:relative;
  height:92px;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--color-selection);
  border:1px solid var(--color-border-subtle)}
.color-well input {
  width:100%;
  height:100%}
.color-well>span {
  position:absolute;
  bottom:9px;
  right:9px;
  padding:var(--space-1);
  background:var(--color-bg-control);
  border-radius:var(--radius-sm);
  pointer-events:none}
.color-well svg {
  width:14px;
  height:14px}
.hex-row {
  display:flex;
  gap:var(--space-2);
  align-items:center;
  margin-top:var(--space-2)}
.hex-row label {
  font-size:var(--text-meta);
  color:var(--color-text-secondary)}
.hex-row input {
  width:100%;
  flex:1;
  font-family:var(--font-mono);
  font-size:var(--text-help)}
.swatch-grid {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2)}
.swatch-grid:empty:after, .pattern-library:empty:after {
  content:"Your assigned fills appear here.";
  color:var(--color-text-secondary);
  font-size:var(--text-meta);
  line-height:1.7}
.library-swatch {
  width:28px;
  height:28px;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border-subtle)}
.library-swatch:hover {
  box-shadow:var(--control-swatch-outline)}
.pattern-library {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-2)}
.pattern-library:empty:after {
  grid-column:1/-1}
.pattern-library button {
  height:44px;
  background-size:cover;
  background-position:center;
  width:100%;
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-sm)}
.pattern-tools {
  display:flex;
  gap:var(--space-1);
  margin-top:var(--space-4);
  margin-bottom:var(--space-2)}
.pattern-tools button {
  height:33px;
  flex:1;
  border:1px solid var(--color-border-subtle)}
.pattern-tools button[aria-pressed=true] {
  background:var(--color-selection);
  border-color:var(--color-border-subtle)}
.pattern-tools svg {
  width:15px;
  height:15px}
.number-unit {
  display:flex;
  gap:var(--space-1);
  align-items:center;
  color:var(--color-text-secondary);
  font-size:var(--text-meta)}
.number-unit input {
  width:58px;
  font-size:var(--text-help);
  padding:var(--space-1);
  text-align:right}
.property-group:has(.number-unit) {
  margin-top:var(--space-3)}
.measurement {
  font-size:var(--text-meta);
  display:grid;
  grid-template-columns:1fr 60px 48px;
  align-items:center;
  gap:var(--space-1);
  margin:var(--space-3) 0}
.measurement input, .measurement select {
  padding:var(--space-1) var(--space-1);
  font-size:var(--text-help)}
.original-explainer {
  background:var(--color-selection);
  padding:var(--space-5) var(--space-4);
  border-radius:var(--radius-md);
  text-align:center}
.original-explainer>span:first-child {
  display:inline-block;
  margin-bottom:var(--space-3);
  color:var(--color-text-secondary)}
.original-explainer>span:first-child svg {
  width:30px;
  height:30px}
.original-explainer h3 {
  font-size:var(--text-body-lg);
  margin-bottom:var(--space-2)}
.original-explainer p {
  font-size:var(--text-help);
  color:var(--color-text-secondary);
  line-height:1.8}
.guide-note {
  margin-top:var(--space-3)}
.dock-heading {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:var(--space-2)}
.dock-heading h2 {
  font-size:var(--text-help);
  letter-spacing:0;
  white-space:nowrap}
.dock-heading h2 span {
  font-size:var(--text-meta);
  color:var(--color-text-secondary);
  font-weight:400;
  margin-left:var(--space-1)}
.dock-heading>span {
  font-size:var(--text-meta);
  color:var(--color-text-secondary);
  flex:1}
.dock-heading>button {
  margin-left:auto;
  font-size:var(--text-meta);
  min-height:26px;
  padding:var(--space-1)}
.dock-heading svg {
  width:13px;
  height:13px}
.colorway-strip {
  display:flex;
  overflow:auto;
  gap:var(--space-2);
  scroll-snap-type:x proximity;
  padding:var(--space-micro) var(--space-micro) var(--space-1);
  max-height:190px}
.cc-card {
  flex:0 0 clamp(176px,10vw,184px);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-md);
  background:var(--color-bg-control);
  scroll-snap-align:start;
  padding:var(--space-2);
  transition:border-color var(--duration-standard),box-shadow var(--duration-standard)}
.cc-card[data-active=true] {
  border-color:var(--color-border-subtle);
  box-shadow:var(--control-swatch-outline)}
.cc-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-1);
  margin-bottom:var(--space-2)}
.cc-heading>button:first-child {
  font-size:var(--text-meta);
  padding:var(--space-micro) 0}
.cc-heading small {
  font-size:var(--text-meta);
  color:var(--color-text-secondary);
  margin-left:auto}
.cc-heading .icon-button {
  width:22px;
  height:22px}
.cc-heading svg {
  width:12px;
  height:12px}
.cc-fills {
  display:flex;
  gap:var(--space-2);
  overflow:auto;
  padding:var(--space-micro)}
.fill-target {
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  min-width:37px;
  max-width:55px;
  align-items:center;
  font-size:var(--text-meta);
  color:var(--color-text-secondary)}
.fill-target>span {
  max-width:55px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis}
.fill-chip {
  width:30px;
  height:30px;
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-md);
  background-size:cover;
  background-position:center;
  position:relative}
.fill-chip[data-kind=none] {
  --slash-color:var(--color-border-control);
  --slash-width:1px;
  background:var(--color-bg-control);
  border:var(--slash-width) solid var(--slash-color);
  overflow:hidden}
.fill-chip[data-kind=none]:after {
  content:"";
  position:absolute;
  left:-23%;
  top:50%;
  width:146%;
  height:var(--slash-width);
  background:var(--slash-color);
  transform:translateY(-50%) rotate(-45deg)}
.fill-chip[data-kind=original] {
  background:var(--color-selection);
  color:var(--color-text-secondary)}
.fill-chip[data-kind=original] svg {
  width:16px;
  height:16px}
.fill-chip[data-kind=pattern]:after {
  content:"";
  position:absolute;
  right:1px;
  bottom:1px;
  width:6px;
  height:6px;
  border:1px solid var(--color-bg-control);
  background:var(--color-selection);
  border-radius:var(--radius-sm)}
.pattern-tools [data-tip]:after {
  left:50%;
  top:auto;
  bottom:calc(100% + 8px);
  transform:translateX(-50%)}
#st-drop-cover {
  position:fixed;
  inset:10px;
  z-index:var(--z-drag-overlay);
  background:var(--color-selection);
  border:2px dashed var(--color-border-subtle);
  border-radius:var(--radius-lg);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:var(--space-4);
  pointer-events:none}
#st-drop-cover svg {
  width:40px;
  height:40px}
#st-drop-cover strong {
  font-size:var(--text-title-lg);
  font-weight:500}
#st-drop-cover>span:last-child {
  font-size:var(--text-body);
  color:var(--color-text-secondary)}
#st-toast {
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:var(--z-toast);
  max-width:560px;
  background:var(--color-ink);
  color:var(--color-bg-control);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
  font-size:var(--text-body);
  box-shadow:var(--shadow-floating)}
#st-dialog-body:has(>p) {
  display:flex;
  flex-direction:column;
  align-items:stretch}
#st-dialog-body p+p {
  margin-top:var(--space-3)}
#st-dialog-body dl {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2)}
#st-dialog-body dd {
  margin:0;
  text-align:right;
  color:var(--color-text-secondary)}
#st-dialog-body dt {
  margin:0}
.studio[data-phase=working] .edition {
  display:none}
.studio[data-editing=true] .workspace-modes {
  opacity:.6}
.studio[data-editing=true] .layer-stack {
  opacity:.7}
@media(max-width:1150px) {
.workbench {
  grid-template-columns:180px minmax(270px,1fr) 260px}
.dock-heading>span {
  display:none}
}
@media(max-width:930px) {
.workbench {
  grid-template-columns:155px minmax(240px,1fr) 235px}
.app-actions {
  gap:var(--space-1)}
.app-actions .primary {
  font-size:var(--text-meta);
  padding:var(--space-2)}
.layer-name {
  font-size:var(--text-help)}
.document-meta {
  padding-left:var(--space-1)}
.cc-card {
  flex-basis:202px}
}
@media(max-width:720px) {
.empty-sequence {
  margin-top:var(--space-5)}
.paper-demo {
  width:130px;
  height:170px;
  padding:var(--space-2)}
.paper-demo>svg {
  height:123px}
.workbench {
  min-width:700px}
.studio[data-phase=empty] .app-bar, .studio[data-phase=processing] .app-bar {
  min-width:0}
}
.fill-target, .cc-heading small, .dock-heading>span, .swatch-grid:empty:after, .pattern-library:empty:after {
  color:var(--color-text-secondary)}
.fill-target {
  font-size:var(--text-meta);
  max-width:65px}
.fill-target>span {
  max-width:65px}
#st-edit-description, #st-tool-help {
  white-space:pre-line}
#st-edit-inspector .inspector-note {
  border-top:0;
  padding-top:0}
.studio[data-mode=color] .inspector {
  display:flex;
  flex-direction:column;
  overflow:hidden}
.studio[data-mode=color] #st-fill-inspector {
  flex:1;
  min-height:0;
  overflow:auto}
#st-color-marker {
  position:absolute;
  width:14px;
  height:14px;
  border:2px solid var(--color-bg-control);
  border-radius:var(--radius-round);
  transform:translate(-50%,-50%);
  box-shadow:var(--control-swatch-outline);
  pointer-events:none}
.studio-color-values>#st-color-swatch {
  width:28px;
  height:28px;
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-md)}
#st-color-format {
  height:34px;
  padding:0 var(--space-4) 0 var(--space-1);
  font-size:var(--text-meta)}
.quick-colors {
  display:flex;
  justify-content:flex-end;
  gap:var(--space-2);
  margin-top:var(--space-2)}
.pattern-context-controls {
  display:flex;
  flex-direction:column;
  gap:0}
.pattern-context-controls .property-group {
  margin-top:var(--space-3)}
.pattern-context-controls details {
  margin-top:var(--space-3)}
.reference-action {
  margin-top:var(--space-3)}
.studio.design-system #st-reference-length[data-guide=true] {
  outline:2px solid var(--color-reference);
  outline-offset:3px;
}
.studio.design-system #st-reference-length:focus, .studio.design-system #st-reference-unit:focus {
  outline:2px solid var(--color-keyboard-focus);
  outline-offset:3px;
  border-color:var(--color-border-control);
}
.studio.design-system #st-artwork-height[data-guide=true] {
  border-color:var(--color-border-control);
  background:var(--color-bg-control);
}
.studio.design-system .reference-instruction {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  position:absolute;
  top:var(--space-4);
  left:50%;
  transform:translateX(-50%);
  max-width:calc(100% - 32px);
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--color-ink);
  border-radius:var(--radius-pill);
  background:var(--color-ink);
  color:var(--color-bg-control);
  font:var(--type-body);
  text-align:center;
  box-shadow:var(--shadow-floating);
  pointer-events:none;
  z-index:calc(var(--z-sticky) + 1);
}
.studio.design-system .reference-instruction svg { width:var(--icon-meta); height:var(--icon-meta); flex:none; fill:none; stroke:currentColor; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; }
.studio.design-system #st-viewport:has(.reference-instruction:not([hidden])) .canvas-badge { visibility:hidden; }
#st-reference-overlay {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:var(--z-sticky)}
@media(max-width:1150px) {
.studio-color-values>#st-color-swatch {
  width:25px;
  height:25px}
.studio-color-values>#st-color-format {
  grid-column:2;
  grid-row:2}
}
#st-dialog-body p+p {
  margin-top:var(--space-2)}
@media(max-width:930px) {
.cc-card {
  flex-basis:172px}
}
.layers-panel {
  position:relative}
.structure-actions {
  display:flex;
  align-items:center;
  gap:var(--space-micro)}

/* Color mode shares the lower row with Structure; mobile keeps its existing
   stacked canvas, Colorways and export layout. Session-owned nodes stay put. */
@media(min-width:721px) {
  .studio.design-system[data-mode=color] .workbench { grid-template-rows:minmax(0,1fr) auto; }
  .studio.design-system[data-mode=color] .canvas-column { display:contents; }
  .studio.design-system[data-mode=color] .canvas-area { grid-column:2; grid-row:1; min-width:0; min-height:0; }
  .studio.design-system[data-mode=color] .layers-panel { grid-column:1; grid-row:1; min-width:0; }
  .studio.design-system[data-mode=color] .colorway-dock { grid-column:1 / 3; grid-row:2; min-width:0; margin-bottom:0; }
  .studio.design-system[data-mode=color] .inspector { grid-column:3; grid-row:1 / 3; }
  .studio.design-system[data-mode=color][data-structure-collapsed=true] .workbench { grid-template-columns:0 minmax(var(--canvas-min-width),1fr) var(--inspector-width); }
  .studio.design-system[data-mode=color][data-structure-collapsed=true] .layers-panel { visibility:hidden; padding:0; border:0; overflow:hidden; }
  #st-structure-collapse svg { transform:rotate(180deg); }
  .structure-reveal { position:absolute; top:var(--space-3); left:var(--space-3); z-index:5; background:var(--color-bg-control); }
}
@media(max-width:720px) {
  #st-structure-collapse, #st-structure-reveal { display:none!important; }
}

.edition, .cc-heading small, .dock-heading h2 span, .fill-target { font:var(--type-meta); color:var(--color-text-secondary); }
.workbench { grid-template-columns:var(--structure-width) minmax(var(--canvas-min-width),1fr) var(--inspector-width); height:calc(100dvh - var(--app-bar-height)); }
.layers-panel { background:var(--color-bg-structure); }
.dock-heading h2 { font:var(--type-label); letter-spacing:0; }
.measurement { font:var(--type-help); color:var(--color-ink); }
.layer-name, .document-meta strong { font:var(--type-label); }
/* Compact Structure text roles are local to Flat; retain the button hit areas. */
.studio.design-system .layers-panel {
  --type-body:400 13px/18px var(--font-ui);
  --type-label:600 13px/18px var(--font-ui);
  --type-help:400 12px/16px var(--font-ui);
  --type-meta:500 12px/16px var(--font-ui);
  --type-eyebrow:600 var(--eyebrow-size,14px)/var(--eyebrow-leading,20px) var(--font-ui);
  --type-caption:400 12px/16px var(--font-ui);
  font:var(--type-body);
}
.studio.design-system .layers-panel svg { width:var(--flat-detail-icon-size); height:var(--flat-detail-icon-size); }
.document-meta { gap:var(--space-2); padding:0 var(--space-2) var(--space-6); margin-bottom:var(--space-4); }
.cc-heading .icon-button { width:var(--control-height-compact); height:var(--control-height-compact); min-width:var(--control-height-compact); padding:0; }
.pattern-tools svg, .fill-chip[data-kind=original] svg { width:var(--icon-compact); height:var(--icon-compact); }
.cc-heading svg, .dock-heading svg { width:var(--icon-meta); height:var(--icon-meta); }
.pattern-tools button[aria-pressed=true] { color:var(--color-on-accent); background:var(--color-accent); border-color:var(--color-focus); }
#st-viewport { background:var(--color-bg-control); box-shadow:var(--shadow-none); }
[data-mode=color] #st-viewport { background-color:var(--color-bg-control); background-image:conic-gradient(var(--color-bg-canvas) 25%,transparent 0 50%,var(--color-bg-canvas) 0 75%,transparent 0); }
.number-unit { font-variant-numeric:tabular-nums; }
.number-unit input, .measurement input, .measurement select { font:var(--type-help); min-height:var(--control-height-compact); padding:var(--space-1); }
.measurement { gap:var(--space-1); grid-template-columns:minmax(0,1fr) 60px 48px; }
.design-system .studio-color-values>#st-color-swatch { width:32px; height:32px; }
#st-color-format { height:var(--control-height-default); padding:0 var(--space-4) 0 var(--space-1); font:var(--type-meta); }
.design-system #st-color-format { width:80px; justify-self:end; }
.library-swatch { width:var(--control-height-compact); height:var(--control-height-compact); border:var(--border-control); border-radius:var(--radius-sm); }
.design-system #st-edit-inspector .reset-action { margin-left:0; margin-right:auto; align-self:flex-start; }
.design-system .quick-colors { gap:var(--space-1); }
.design-system .quick-colors .quick-color { width:28px; height:28px; }
.design-system #st-dialog-body, .design-system #st-toast { white-space:pre-line; }
.design-system #st-dialog[data-kind="new-flat"] #st-dialog-body p+p { margin-top:0; }
.pattern-tools { gap:var(--space-1); margin:var(--space-4) 0 var(--space-3); }
.pattern-tools button { min-height:var(--control-height-default); border:var(--border-control); }
.pattern-library button { border:var(--border-control); }
.original-explainer { background:var(--color-selection); padding:var(--space-5) var(--space-4); border-radius:var(--radius-md); }
.original-explainer h3 { font:var(--type-label); }
.original-explainer p { font:var(--type-help); color:var(--color-text-secondary); }
.colorway-strip { gap:var(--space-2); padding:var(--space-micro) var(--space-micro) var(--space-1); }
.cc-card { flex-basis:var(--colorway-card-width); border:var(--border-subtle); border-radius:var(--radius-md); padding:var(--space-2); box-shadow:none; }
.studio.design-system .cc-card[data-fill-count="1"] { flex-basis:120px; }
.studio.design-system .cc-card[data-fill-count="2"] { flex-basis:148px; }
.cc-card[data-active=true] { border-color:var(--color-selection-border); box-shadow:0 0 0 1px var(--color-selection-border); background:var(--color-bg-control); }
.cc-heading { gap:var(--space-1); margin-bottom:var(--space-2); }
.cc-heading>button:first-child { font:var(--type-meta); min-height:var(--control-height-compact); }
.studio.design-system .cc-heading>button:first-child { font:500 12px/16px var(--font-ui); }
.studio.design-system .cc-heading .icon-button svg { width:var(--flat-detail-icon-size); height:var(--flat-detail-icon-size); }
.cc-heading small { white-space:nowrap; font-size:var(--text-meta); line-height:16px; font-weight:400; color:var(--color-text-secondary); }
.cc-fills { gap:var(--space-2); padding:var(--space-1); }
.fill-target { gap:var(--space-1); }
.fill-target>span { font:var(--type-caption); color:var(--color-text-secondary); }
/* Owner-requested compact swatch names; other Workspace captions keep their scale. */
.studio.design-system .fill-target>span { font:400 10px/14px var(--font-ui); display:block; min-width:0; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.studio.design-system .layer-stack { user-select:none; -webkit-user-select:none; }
.fill-chip { width:var(--control-height-compact); height:var(--control-height-compact); border:var(--border-control); border-radius:var(--radius-md); }
.fill-chip[data-kind=none] { --slash-color:var(--color-border-control); }
.fill-chip[data-kind=original] { background:var(--color-selection); color:var(--color-text-secondary); }
#st-dialog-body p { font:inherit; }
#st-toast { color:var(--color-info); background:var(--color-info-bg); border:1px solid var(--color-info); padding:var(--space-3) var(--space-4); font:var(--type-body); box-shadow:var(--shadow-popover); border-radius:var(--radius-md); z-index:var(--z-toast); }
.design-system #st-toast[data-kind="export"] { border-radius:var(--radius-pill); }
#st-drop-cover { background:var(--color-selection); border-color:var(--color-focus); gap:var(--space-4); z-index:var(--z-drag-overlay); }
.empty-sequence { font:var(--type-meta); color:var(--color-text-secondary); }
.paper-label { font:var(--type-meta); letter-spacing:1px; }
.paper-demo { box-shadow:var(--shadow-popover); width:184px; height:244px; }
.paper-demo>svg { stroke:var(--color-text-secondary); }
.processing { padding:var(--space-6); text-align:center; }
.processing h1 { font:var(--type-title-lg); }
.processing p { font:var(--type-body-lg); }
@media (max-width:1150px) {
.studio-color-values>#st-color-format { grid-column:2; grid-row:2; }
}
@media (max-width:720px) {
.paper-demo { width:160px; height:212px; padding:var(--space-3); }
.paper-demo>svg { height:148px; }
.studio[data-phase=working] .compact-workspace-notice { display:block; margin:0; padding:var(--space-3) var(--space-4); background:var(--color-info-bg); color:var(--color-info); font:var(--type-help); }
.studio .workbench { min-width:0; grid-template-columns:minmax(0,1fr); height:calc(100dvh - 220px); min-height:380px; }
.layers-panel, #st-tool-rail { display:none!important; }
#st-viewport { pointer-events:none; }
.zoom-controls [data-action=hand] { display:none; }
.cc-heading .icon-button { display:none; }
}
/* Structure selection is a native button; edit/delete remain independent controls. */
.layer-name { display:block; text-align:left; padding:0; border:0; border-radius:0!important; background:transparent; min-height:0!important; }
.layer-name:disabled { opacity:1; }
@media (pointer:coarse) {
.design-system button:not(.fill-chip):not(.quick-color):not(.library-swatch) { min-height:44px; }
}
#st-area-name { border-radius:var(--radius-pill); }
#st-area-name { padding-inline:var(--space-4); }
.design-system .fill-chip, .design-system .library-swatch, .design-system .pattern-library button { border-radius:var(--radius-md); }
.pattern-library { grid-template-columns:repeat(auto-fill,44px); }
.design-system .pattern-library button { width:44px; height:44px; }
.upload-note { display:block; margin-top:var(--space-10); font:var(--type-help); color:var(--color-text-secondary); }
.import-surface .upload-box-label { position:absolute; top:var(--space-6); left:var(--space-6); font:var(--type-eyebrow); letter-spacing:1.2px; }
.design-system .import-surface .upload-browse {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  margin-top:var(--space-2); padding:var(--space-2) var(--space-6); min-height:var(--control-height-prominent);
  border-radius:var(--radius-pill); font:var(--type-label); color:var(--color-bg-control); background:var(--color-ink);
}
.import-surface:hover .upload-browse { background:var(--color-ink-hover); }
@media (max-width:720px) {
.upload-note { margin-top:var(--space-5); }
.import-surface .upload-box-label { top:var(--space-4); left:var(--space-4); }
}