.drawing-workspace { display:flex; flex:1; flex-direction:column; min-height:0; min-width:0; color:var(--ink); background:var(--panel); }
.drawing-workspace[hidden] { display:none; }
#new-drawing-button { margin-top:20px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--panel); font:inherit; cursor:pointer; }
.drawing-tools,.drawing-options,.drawing-view { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:8px 10px; border-bottom:1px solid var(--line); flex-shrink:0; }
.drawing-tools button,.drawing-options button,.drawing-options select,.drawing-view button,.drawing-view select { padding:5px 8px; min-height:30px; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--ink); font:inherit; font-size:12px; }
.drawing-tools button[aria-pressed=true] { background:var(--accent); border-color:var(--accent); color:#fff; }
.drawing-options label,.drawing-view label { display:flex; align-items:center; gap:4px; font-size:12px; margin-right:6px; }
.drawing-options input[type=color] { width:30px; height:28px; padding:2px; border:1px solid var(--line); border-radius:4px; }
.drawing-options button:disabled { opacity:.4; }
.drawing-options select { min-width:0; max-width:100%; }
.drawing-scroll { position:relative; flex:1; min-height:0; overflow:auto; padding:16px; overscroll-behavior:contain; }
.drawing-scroll canvas { display:block; background:#fff; box-shadow:0 1px 7px #0002; outline-offset:3px; touch-action:none; }
.drawing-status { padding:5px 10px; font-size:11px; color:var(--muted); border-top:1px solid var(--line); flex-shrink:0; }
.drawing-text-dialog { position:absolute; z-index:2; padding:10px; border:1px solid var(--accent); border-radius:8px; background:var(--surface); color:var(--ink); box-shadow:0 4px 18px #0003; }
.drawing-text-dialog[hidden] { display:none; }
.drawing-text-dialog form,.drawing-text-dialog label { display:flex; flex-direction:column; gap:8px; }
.drawing-text-dialog textarea { width:100%; min-height:70px; max-height:180px; resize:vertical; font:16px/1.4 var(--ui-font,sans-serif); color:var(--ink); background:var(--panel); }
.drawing-text-dialog form>div { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.drawing-text-dialog form>div label { flex-direction:row; align-items:center; margin-right:auto; font-size:12px; }
.drawing-text-dialog input { width:55px; }
.drawing-text-dialog button { min-height:36px; padding:5px 8px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:var(--panel); }

.drawing-tools { flex-wrap:nowrap; overflow-x:auto; gap:0; padding:6px; }
.drawing-tool-group { position:relative; display:flex; gap:3px; flex-shrink:0; padding:0 8px 19px; border-right:1px solid var(--line); }
.drawing-tool-group:last-child { border-right:0; }
.drawing-group-caption { position:absolute; bottom:0; left:0; right:0; text-align:center; font:10px/16px var(--ui-font); color:var(--muted); }
.drawing-tools button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:48px; border-color:transparent; background:transparent; font-size:11px; }
.drawing-tools button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.drawing-tools button:hover:not([aria-pressed=true]) { background:var(--hover); border-color:var(--line); }
.drawing-workspace button:focus-visible,.drawing-help summary:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.drawing-group-label { font:10px var(--ui-font); color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding-right:3px; }
.drawing-group-label:not(:first-child) { padding-left:10px; border-left:1px solid var(--line); }
.drawing-view { border-top:1px solid var(--line); border-bottom:0; }
.drawing-help { font:11px/1.5 var(--ui-font); color:var(--muted); flex-shrink:0; padding:3px 10px; }
.drawing-help summary { cursor:pointer; width:max-content; }
.drawing-help p { margin:5px 0; max-width:760px; }
.drawing-help ul { margin:6px 0; padding-left:18px; }
.drawing-help li+li { margin-top:6px; }

@media(max-width:720px) {
  .drawing-tools { padding:4px; }
  .drawing-tools button { min-width:52px; min-height:50px; }
  .drawing-group-caption { display:none; }
  .drawing-tool-group { padding:0 5px; }
  .drawing-options { flex-wrap:nowrap; overflow-x:auto; padding:4px 6px; }
  .drawing-options>* { flex-shrink:0; }
  .drawing-options button,.drawing-options select,.drawing-view button,.drawing-view select { min-height:44px; }
  .drawing-view { padding:4px 84px 4px 6px; gap:4px; }
  .drawing-view label { margin:0; min-height:44px; }
  .drawing-view label:first-child { flex:1; }
  .drawing-help p { max-height:95px; overflow-y:auto; padding-right:64px; }
  .drawing-text-dialog button { min-height:44px; }
  .drawing-scroll { padding:12px; }
  .drawing-status { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

.drawing-options input[type=number] { width:58px; padding:5px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:var(--surface); font:12px var(--ui-font); }
.drawing-options label[data-mixed=true]::after { content:"Mixed"; color:var(--muted); font-size:10px; }
.drawing-options input:disabled { opacity:.4; }
.drawing-options label[hidden],.drawing-options [data-action=edit-text]:disabled { display:none; }
@media(max-width:720px) { .drawing-options input[type=number] { min-height:44px; } }
/* The canvas is a viewport: panning does not depend on scrollable paper edges. */
.drawing-scroll { overflow:hidden; padding:0; }
.drawing-scroll canvas { box-shadow:none; }


@media(max-width:720px) {
  .drawing-tools { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; overflow:visible; }
  .drawing-tool-group { display:contents; }
  .drawing-tools button { min-width:0; padding:4px 1px; }
}

.drawing-scroll:has(.drawing-text-dialog:not([hidden])) { overflow:visible; z-index:1; }

.drawing-toolbar { position:relative; display:flex; align-items:stretch; flex-shrink:0; border-bottom:1px solid var(--line); }
.drawing-toolbar .drawing-tools { flex:1; min-width:0; border-bottom:0; }
.drawing-canvas-settings { flex-shrink:0; padding:6px; border-left:1px solid var(--line); font:12px/1.5 var(--ui-font); }
.drawing-canvas-panel { position:absolute; top:100%; right:6px; width:min(480px,calc(100% - 12px)); max-height:65vh; overflow:auto; padding:12px; z-index:3; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 4px 18px #0003; }
.drawing-canvas-settings>summary { cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:48px; min-height:50px; border-radius:5px; font-size:11px; list-style:none; }
.drawing-canvas-settings>summary::-webkit-details-marker { display:none; }
.drawing-canvas-settings>summary:hover,.drawing-canvas-settings[open]>summary { background:var(--hover); }
.drawing-canvas-settings>summary:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.drawing-canvas-settings>summary svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.drawing-canvas-settings form { display:flex; flex-wrap:wrap; align-items:end; gap:8px; margin-top:8px; }
.drawing-canvas-settings form[hidden] { display:none; }
.drawing-canvas-settings label { display:inline-flex; align-items:center; gap:6px; }
.drawing-canvas-settings input[type=number] { width:76px; }
.drawing-canvas-settings input,.drawing-canvas-settings select,.drawing-canvas-settings button { min-height:32px; padding:4px 6px; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--ink); font:inherit; }
.drawing-canvas-settings p { margin:6px 0; max-width:650px; color:var(--muted); }
.drawing-input-settings { display:flex; flex-direction:column; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.drawing-input-settings>label { min-height:44px; flex-wrap:wrap; justify-content:space-between; }
.drawing-input-status { padding:8px; border:1px solid var(--line); border-radius:5px; background:var(--panel); }
.drawing-canvas-panel>.drawing-help { padding:8px 0 0; }
.drawing-canvas-panel>.drawing-help summary { min-height:32px; align-items:start; font-size:11px; }
.drawing-editbar { position:relative; display:flex; flex-shrink:0; border-bottom:1px solid var(--line); }
.drawing-format { flex:1; min-width:0; }
.drawing-format>summary { display:none; }
.drawing-format>.drawing-options { display:flex; border-bottom:0; }
.drawing-history { display:flex; gap:4px; align-items:center; padding:6px; }
.drawing-history button { min-width:32px; min-height:32px; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; }
.drawing-history button:disabled { opacity:.4; cursor:default; }
.drawing-format>summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
@media(max-width:720px) {
  body:has(.drawing-format[open]) .companion { display:none; }
  .drawing-format>summary { display:flex; align-items:center; gap:8px; min-height:52px; padding:4px 12px; font:12px var(--ui-font); cursor:pointer; list-style:none; }
  .drawing-format>summary::-webkit-details-marker { display:none; }
  .drawing-format>summary::after { content:'▾'; margin-left:auto; }
  .drawing-format[open]>summary { background:var(--hover); }
  .drawing-format[open]>summary::after { content:'▴'; }
  .drawing-format:not([open])>.drawing-options { display:none; }
  .drawing-format[open]>.drawing-options { position:absolute; z-index:3; top:100%; left:6px; right:6px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; max-height:min(340px,calc(100dvh - 260px)); overflow:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 4px 18px #0003; }
  .drawing-options .drawing-group-label { grid-column:1/-1; padding:0 0 4px; border:0; }
  .drawing-options .drawing-group-label:not(:first-child) { padding-top:10px; border-top:1px solid var(--line); }
  .drawing-options label { min-width:0; min-height:44px; justify-content:space-between; margin:0; flex-wrap:wrap; }
  .drawing-options input[type=color] { width:44px; height:44px; }
  .drawing-history { padding:4px 6px; }
  .drawing-history button { min-width:44px; min-height:44px; }
  body:has(.drawing-canvas-settings[open]) .companion { display:none; }
  .drawing-toolbar { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; padding:4px; }
  .drawing-toolbar .drawing-tools { display:contents; }
  .drawing-canvas-settings { padding:0; border:0; }
  .drawing-canvas-settings>summary { min-width:0; }
  .drawing-canvas-settings input,.drawing-canvas-settings select,.drawing-canvas-settings button { min-height:44px; }
}