/* Dense application chrome; the artwork remains the largest element. */
.drawing-studio [hidden]{display:none!important}
.studio-color-tabs{display:flex;gap:5px;margin-bottom:6px}
.studio-color-tabs button{padding:4px 8px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-size:11px;cursor:pointer}
.studio-color-tabs [aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}
.drawing-studio .studio-tool-extras{display:flex;align-items:center;gap:10px;flex:none;width:max-content}
.drawing-studio .studio-tool-extras label{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:11px}
.drawing-studio .studio-tool-extras input[type=number]{width:58px;min-height:28px;padding:2px 4px;font-variant-numeric:tabular-nums}
.drawing-studio .studio-tool-extras input[type=checkbox]{margin:0}
.drawing-studio .studio-tool-extras button{min-height:28px;padding:3px 7px;white-space:nowrap}
.drawing-studio .drawing-tools [data-tool=brush],.drawing-studio .drawing-tools [data-tool=line],.drawing-studio .drawing-tools [data-tool=hand]{margin-top:5px;border-top:1px solid var(--line);border-radius:0 0 4px 4px}
.drawing-studio .drawing-panels{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.drawing-studio .drawing-color-dock{flex:none;padding:8px 9px;border-bottom:1px solid var(--line)}
.drawing-color-dock header{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.drawing-color-dock header button{font-size:11px;padding:3px 8px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);cursor:pointer}
.drawing-color-dock header button.active{border-color:var(--accent);color:var(--ink)}
.studio-color-editor{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:6px}
.studio-color-editor canvas{width:100%;height:112px;display:block;cursor:crosshair;touch-action:none;border-radius:3px}
.studio-color-editor input[type=range]{writing-mode:vertical-lr;direction:rtl;appearance:auto;width:18px;height:112px;margin:0;accent-color:var(--accent)}
.studio-color-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 7px;grid-column:1/-1;align-items:center}
.studio-color-values label{display:flex;align-items:center;gap:3px;font-size:10px;min-width:0}
.studio-color-values label:first-child{grid-column:1/-1}
.studio-color-values input{min-width:0;width:100%;height:25px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);padding:2px 5px;font:11px monospace}
.studio-color-values [data-color-hex]{width:100%;letter-spacing:.02em}
.studio-swatches-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;max-height:130px;overflow:auto;padding:2px}
.studio-swatches-grid button{height:22px;width:100%;border:1px solid #9299a440;border-radius:2px;background:var(--swatch);cursor:pointer}
.studio-swatch-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.studio-swatch-actions button{min-height:26px;font-size:10px;padding:3px 7px}
.drawing-studio .drawing-color-pair{margin-bottom:6px}
.drawing-studio .drawing-layer-settings{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;padding:7px 9px}
.drawing-studio .drawing-layer-settings>select,.drawing-studio .drawing-layer-settings>label:has(input[type=range]),.drawing-studio .drawing-layer-settings>label:has(input[type=text]){grid-column:1/-1}
.drawing-studio .drawing-layer-settings label{min-width:0;display:flex;gap:5px;align-items:center;font-size:10px;line-height:1.3;min-height:24px}
.drawing-studio .drawing-layer-settings input[type=text]{width:100%;min-width:0;min-height:25px;padding:2px 5px}
.drawing-studio .drawing-layer-settings input[type=range]{min-width:30px;flex:1}
.studio-layer-mask{padding:5px 9px;border-block:1px solid var(--line);font-size:11px}
.studio-layer-mask summary{cursor:pointer;padding:3px 0}
.studio-layer-mask>label{display:flex;align-items:center;gap:5px;margin:4px 0;font-size:10px}
.studio-layer-mask input[type=range]{flex:1;min-width:0}
.studio-layer-mask input[type=number]{width:60px;min-height:25px;padding:2px 4px}
.studio-layer-mask .drawing-layer-actions{flex-wrap:wrap;padding:4px 0;gap:4px}
.studio-layer-mask .drawing-layer-actions .btn{font-size:10px;min-height:25px;padding:3px 6px}
.studio-layer-mask .form-help{margin:4px 0;font-size:10px;line-height:1.4}
.studio-filter-field{display:grid;grid-template-columns:65px minmax(0,1fr) 30px;gap:5px;align-items:center;font-size:11px;margin:7px 0}
.studio-filter-field input[type=range]{min-width:0;width:100%}
.studio-filter-field output{text-align:right;font-variant-numeric:tabular-nums}
.studio-histogram,.studio-curves{display:block;width:100%;border:1px solid var(--line);background:var(--paper);margin:6px 0;touch-action:none}
.studio-curves{cursor:crosshair}
.studio-curve-values{display:flex;gap:5px;font-size:10px;align-items:center}
.studio-curve-values label{display:flex;gap:3px;align-items:center;min-width:0}
.studio-curve-values input{width:45px;min-height:25px;padding:2px 3px}
.studio-curve-values button{font-size:10px;padding:3px;white-space:nowrap}
.studio-gradient-stop{display:flex;gap:7px;align-items:center;margin:5px 0;flex-wrap:wrap;font-size:12px}
.studio-gradient-stop label{display:flex;gap:4px;align-items:center}
.studio-gradient-stop input[type=number]{width:60px;min-height:30px}
.studio-gradient-stop input[type=color]{width:35px;height:30px;padding:2px}
.drawing-studio .drawing-selection-bar .selection-tools>label{display:flex;align-items:center;gap:4px;font-size:10px;white-space:nowrap}
.drawing-studio .drawing-selection-bar [data-selection-feather]{width:46px;min-height:27px;padding:2px}
.drawing-dialog textarea{width:100%;resize:vertical;min-height:130px;padding:8px;line-height:1.45}
@media(max-width:900px),(max-width:1000px) and (max-height:500px){
 .drawing-studio .drawing-menu-bar{min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
 .drawing-studio .drawing-menu-bar>details{flex:none}
 .drawing-studio .drawing-panels{max-height:min(75dvh,100%)}
 .drawing-studio .drawing-color-dock:not([hidden]){display:block}
 .drawing-studio .drawing-color-dock{order:1}
 .drawing-studio .drawing-panel-tabs{order:0;position:sticky;top:0;background:var(--paper);z-index:1}
 .drawing-studio [data-drawing-panel]{order:2}
 .drawing-studio .studio-color-editor{grid-template-columns:minmax(0,1fr) 24px;max-width:420px;margin:auto}
 .drawing-studio .studio-color-editor canvas,.drawing-studio .studio-color-editor input[type=range]{height:125px}
 .drawing-studio .studio-tool-extras label{font-size:11px}
 .drawing-studio .studio-tool-extras input[type=number]{min-height:32px;font-size:16px}
 .drawing-studio .studio-tool-extras button{min-height:32px}
 .drawing-studio .studio-swatches-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
 .drawing-studio .studio-swatches-grid button{min-height:27px}
 .drawing-studio .studio-layer-mask .drawing-layer-actions .btn{min-height:32px}
 .drawing-studio .studio-gradient-stop input[type=number]{font-size:16px}
}

.drawing-layer-group{display:flex;align-items:center;gap:5px;width:100%;padding:5px 8px;border:0;border-bottom:1px solid var(--line);background:var(--desk-chrome);color:var(--ink);text-align:left;font-size:11px;cursor:pointer}
.drawing-layer[data-label=red]{border-left:3px solid #cc6767}.drawing-layer[data-label=orange]{border-left:3px solid #d39b5c}.drawing-layer[data-label=yellow]{border-left:3px solid #ceb849}.drawing-layer[data-label=green]{border-left:3px solid #78a56b}.drawing-layer[data-label=blue]{border-left:3px solid #698fc9}.drawing-layer[data-label=purple]{border-left:3px solid #a489bc}.drawing-layer[data-label=gray]{border-left:3px solid #9199a4}

.studio-move-align{display:flex;gap:2px;border-left:1px solid var(--line);padding-left:7px}.studio-move-align button{width:28px;padding:2px;font-size:17px}
.studio-layer-options{font-size:11px;padding:5px 9px;border-top:1px solid var(--line)}.studio-layer-options summary{cursor:pointer;padding:3px 0}.studio-layer-options label{display:flex;align-items:center;gap:6px;margin:5px 0;font-size:11px}.studio-layer-options input,.studio-layer-options select{min-width:0;flex:1;min-height:27px}
.drawing-tools [data-tool-group=shapes]:after{content:'';position:absolute;right:3px;bottom:3px;border-left:4px solid transparent;border-bottom:4px solid currentColor}