/* Compact editor controls share the existing editor's state and listeners. */
.tool-button.is-selected,.brush-button.is-selected,.size-button.is-selected{box-shadow:inset 0 0 0 2px var(--purple-dark);color:var(--purple-dark)}
.art-tool-dock{display:flex;gap:8px;padding:7px;background:#fff;border:1px solid var(--line);border-radius:18px}
.dock-button{display:flex;flex:1;min-width:48px;min-height:64px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid #8b7f96;border-radius:12px;background:#faf8fd;color:var(--ink);font-size:12px;font-weight:700}
.dock-button>span:first-child{height:26px;display:grid;place-items:center;font-size:27px;line-height:1}
.dock-button[aria-expanded="true"]{background:var(--lavender);border-color:var(--purple-dark);color:var(--purple-dark)}
.dock-button .dock-color{width:26px;border:1px solid var(--ink);border-radius:50%;background:var(--swatch-color)}
.dock-button>.dock-size:first-child{background:var(--ink);border-radius:50%;height:13px;margin:6.5px 0}
.dock-button>.dock-size:first-child.size-small{height:7px;margin:9.5px 0}
.dock-button>.dock-size:first-child.size-big{height:22px;margin:2px 0}
.art-tool-dialog{position:fixed;inset:auto 0 0;width:min(520px,100%);max-height:calc(100dvh - 24px);margin:0 auto;padding:16px 20px max(20px,env(safe-area-inset-bottom));border:1px solid #8b7f96;border-bottom:0;border-radius:23px 23px 0 0;background:var(--paper);color:var(--ink);box-shadow:0 -10px 50px #40324a30;overflow:auto;overscroll-behavior:contain}
.art-tool-dialog::backdrop{background:#30213e65}
.art-tool-dialog .dialog-heading{margin-bottom:16px}
.art-tool-dialog h2{font-size:22px;letter-spacing:-.5px;margin:0}
.art-tool-dialog .tool-group>h2{display:none}
.art-tool-dialog .art-palette{grid-template-columns:repeat(4,minmax(48px,1fr));gap:7px}
.art-tool-dialog .art-swatch{width:100%;height:48px;min-width:48px}
.art-tool-dialog .art-swatch::before{width:36px;height:36px}
.art-tool-dialog .tool-button{min-height:72px;font-size:14px}
.art-tool-dialog .brush-button{font-size:14px;border:1px solid #8b7f96}
.art-tool-dialog .brush-styles{gap:8px;margin-top:14px}
.art-tool-dialog .brush-sizes{gap:16px;justify-content:center}
.art-tool-dialog .size-button{flex:1;min-height:64px;max-width:100px}
.art-tool-dialog .drawing-guides{padding-top:0;border:0}
.art-tool-dialog .guide-label,.art-tool-dialog .tracing-label,.art-tool-dialog select{font-size:14px}
.art-tool-dialog .drawing-guides small{font-size:12px}

@media (max-width:800px), (max-width:1100px) and (max-height:520px){
  body.compact-editor-open{overflow:hidden}
  .is-compact-editor .art-header,.is-compact-editor .art-footer{display:none}
  .is-compact-editor{--compact-extra-height:0px}
  .is-compact-editor:has(.retry-button:not([hidden])){--compact-extra-height:52px}
  .is-compact-editor .art-main{padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));min-height:0}
  .is-compact-editor .editor-heading{gap:8px;flex-wrap:nowrap;margin:0 0 12px;min-height:52px}
  .is-compact-editor .back-button{padding:0;min-width:48px;justify-content:center}
  .is-compact-editor .back-button>span:last-child{display:none}
  .is-compact-editor .editor-name h1{font-size:20px;line-height:1.15;margin:0 0 4px;letter-spacing:-.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .is-compact-editor .editor-name>span{display:block;font-size:12px;line-height:1.35}
  .is-compact-editor .editor-heading-actions{gap:6px}
  .is-compact-editor .editor-heading-actions>.primary-button{min-width:62px;padding:10px}
  .is-compact-editor .parent-button{min-width:48px;padding:0;justify-content:center}
  .is-compact-editor .parent-button>span:last-child{display:none}
  .is-compact-editor .retry-button{font-size:12px;padding:5px;max-width:83px}
  .is-compact-editor .studio-layout{grid-template-columns:minmax(0,1fr);gap:10px}
  .is-compact-editor .art-tools{display:none}
  .is-compact-editor .drawing-stage{padding:8px;border-radius:17px}
  .is-compact-editor .paper-toolbar{min-height:48px;padding:0;margin:0 0 8px;gap:8px;flex-wrap:nowrap}
  .is-compact-editor .paper-toolbar>span{font-size:12px;line-height:1.4;max-width:none}
  .is-compact-editor .history-controls{gap:5px}
  .is-compact-editor .paper-footer{display:none}
  .is-compact-editor .paper-surface{width:min(100%,calc((100svh - 254px - var(--compact-extra-height))*1.48148));aspect-ratio:800/540;margin:0 auto}
  .is-compact-editor .art-tool-dock{justify-self:center;width:min(100%,650px)}
  body.compact-editor-open:has(.art-toast:not([hidden])){overflow:auto}
  .compact-editor-open .art-toast{position:static;transform:none;margin:10px auto max(16px,env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:650px;pointer-events:none}
  .is-compact-editor .editor-heading:has(.retry-button:not([hidden])){display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px}
  .is-compact-editor .editor-heading:has(.retry-button:not([hidden])) .editor-heading-actions{grid-column:1/-1;justify-content:flex-end}
  .is-compact-editor .editor-heading:has(.retry-button:not([hidden])) .retry-button{max-width:none;padding:8px 12px;margin-right:auto}
}
@media (max-width:359px){
  .is-compact-editor .editor-heading{gap:5px}
  .is-compact-editor .editor-name h1{font-size:17px}
  .is-compact-editor .editor-heading-actions{gap:4px}
  .is-compact-editor .editor-heading-actions>.primary-button{min-width:55px;padding:8px}
  .is-compact-editor .paper-toolbar>span{font-size:12px}
  .is-compact-editor .art-tool-dock{gap:5px;padding:5px}
}
@media (max-width:1100px) and (max-height:520px) and (orientation:landscape){
  .is-compact-editor .art-main{padding-top:8px;padding-bottom:8px}
  .is-compact-editor .editor-heading{margin-bottom:8px}
  .is-compact-editor .studio-layout{grid-template-columns:minmax(0,1fr) 76px;gap:10px;align-items:start}
  .is-compact-editor .drawing-stage{padding:6px}
  .is-compact-editor .paper-toolbar{margin-bottom:5px}
  .is-compact-editor .paper-surface{width:min(100%,calc((100svh - 146px - var(--compact-extra-height))*1.48148))}
  .is-compact-editor .art-tool-dock{width:76px;flex-direction:column;gap:5px;padding:5px}
  .is-compact-editor .dock-button{min-height:55px;gap:2px;flex:none}
  .art-tool-dialog{width:min(520px,calc(100% - 24px));padding:12px 20px;max-height:calc(100dvh - 16px)}
  .art-tool-dialog .art-palette{grid-template-columns:repeat(8,minmax(48px,1fr));gap:4px}
  .art-tool-dialog .dialog-heading{margin-bottom:10px}
}