.draw-page{box-sizing:border-box;width:min(100% - 24px,720px);margin:0 auto;padding:14px 0 112px;color:var(--ink,#252820)}
.draw-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}.draw-heading h1{margin:0;font-size:1.35rem}.draw-heading p{margin:.1em 0 0;color:#586052;font-size:.86rem}.draw-size{display:flex;align-items:center;gap:7px;font-size:.84rem;font-weight:700;white-space:nowrap}.draw-size select{min-height:36px;padding:4px 8px;border:1px solid #c5cbbd;border-radius:10px;background:#fff;color:inherit;font:inherit}
.draw-size-label{margin:0;color:#586052;font-size:.78rem}.draw-status{min-height:1.25em;margin:4px 0;color:#485044;font-size:.86rem}
.draw-board{display:grid;place-items:center;min-height:0}
#draw-canvas{display:block;width:min(100%,min(56vh,520px));height:auto;aspect-ratio:1;border:1px solid #aeb5a6;border-radius:8px;image-rendering:pixelated;touch-action:none;background-color:#fff;background-image:linear-gradient(45deg,#e3e5df 25%,transparent 25%),linear-gradient(-45deg,#e3e5df 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e5df 75%),linear-gradient(-45deg,transparent 75%,#e3e5df 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.draw-controls{display:grid;gap:8px;margin-top:8px}.draw-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));justify-items:center;align-items:center;gap:6px;max-height:88px;overflow:auto;padding:3px 4px;overscroll-behavior:contain}.draw-tools,.draw-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px}
.draw-color{box-sizing:border-box;width:30px;height:30px;border:2px solid #fff;border-radius:50%;background:var(--draw-color);box-shadow:0 0 0 1px #9ca494;cursor:pointer}.draw-color[aria-pressed=true]{box-shadow:0 0 0 3px #263238}.draw-color--transparent{background-color:#fff;background-image:linear-gradient(45deg,#cfd4ca 25%,transparent 25%),linear-gradient(-45deg,#cfd4ca 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cfd4ca 75%),linear-gradient(-45deg,transparent 75%,#cfd4ca 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}
.draw-tools button,.draw-actions button,.draw-import__options button{min-height:40px;padding:7px 12px;border:1px solid #c5cbbd;border-radius:12px;background:#fff;color:inherit;font:inherit;font-size:.9rem;cursor:pointer}.draw-tools button[aria-pressed=true]{border-color:#49643c;background:#e5eddf;font-weight:700}.draw-actions button:disabled,.draw-import__options button:disabled{opacity:.45;cursor:default}.draw-actions #draw-save{border-color:#49643c;background:#49643c;color:#fff;font-weight:700}
.draw-import{border:1px solid #d5d9cf;border-radius:12px;background:#fff;overflow:hidden}.draw-import summary{min-height:38px;padding:8px 12px;display:flex;align-items:center;font-weight:700;cursor:pointer}.draw-import__options{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:4px 8px}.draw-import__options button{min-height:34px;padding:4px 9px;font-size:.84rem}.draw-import>p{margin:2px 10px 8px;color:#586052;font-size:.76rem}.draw-file-input{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.draw-page button:focus-visible,.draw-page select:focus-visible,.draw-import summary:focus-visible,#draw-canvas:focus-visible{outline:3px solid #335cbe;outline-offset:3px}.draw-page [hidden]{display:none!important}.draw-page .mobile-nav{z-index:25}
@media(max-width:380px){.draw-page{width:calc(100% - 16px);padding-top:8px}.draw-heading h1{font-size:1.2rem}.draw-heading p{font-size:.78rem}.draw-size{gap:4px;font-size:.78rem}.draw-size select{min-height:32px;padding:3px 5px}#draw-canvas{width:min(100%,min(43vh,440px))}.draw-controls{gap:6px}.draw-palette,.draw-tools,.draw-actions{gap:5px}.draw-color{width:28px;height:28px}.draw-tools button,.draw-actions button{min-height:36px;padding:5px 8px;font-size:.84rem}}
@media(max-width:600px){#draw-canvas{width:min(100%,min(42vh,360px))}}
@media(max-height:620px){.draw-page{padding-top:6px;padding-bottom:78px}.draw-heading h1{font-size:1.15rem}.draw-heading p{font-size:.76rem}.draw-status{min-height:.9em;margin:2px 0;font-size:.76rem}.draw-size-label{font-size:.72rem}#draw-canvas{width:min(100%,min(38vh,420px))}.draw-controls{gap:4px;margin-top:4px}.draw-palette{gap:4px;max-height:64px}.draw-color{width:26px;height:26px}.draw-import summary{min-height:30px;padding:5px 9px;font-size:.84rem}.draw-tools button,.draw-actions button{min-height:32px;padding:3px 7px;font-size:.8rem}.draw-import__options button{min-height:30px;padding:3px 7px;font-size:.78rem}}
@media(max-width:380px) and (max-height:620px){#draw-canvas{width:min(100%,min(30vh,320px))}.draw-page{padding-bottom:76px}.draw-controls{gap:3px;margin-top:3px}.draw-palette{max-height:54px}.draw-tools button,.draw-actions button{min-height:30px;padding:2px 6px;font-size:.78rem}}

/* Drawing is the workspace; the surrounding chrome stays quiet and compact. */
body.app-page--tool-draw{height:100dvh;overflow:hidden}
body.app-page--tool-draw .site-header,body.app-page--tool-draw .site-footer{display:none}
body.app-page--tool-draw #main{height:100dvh}
.draw-page{width:100%;height:100%;max-width:none;margin:0;padding:clamp(8px,1.5vh,18px) clamp(10px,2vw,24px) calc(76px + env(safe-area-inset-bottom));display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(5px,1vh,10px);overflow:hidden}
.draw-heading{margin:0}.draw-heading h1{font-size:clamp(1.05rem,2.4vw,1.4rem)}.draw-heading p{font-size:.76rem}
.draw-meta{display:flex;align-items:center;gap:12px;min-width:0;color:#62685d;font-size:.74rem}.draw-meta p{margin:0}.draw-meta #draw-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.draw-meta #draw-zoom-label{font-variant-numeric:tabular-nums;color:#475343}
.draw-board{min-height:0;overflow:hidden;place-items:center;border:1px solid rgba(92,105,81,.18);border-radius:18px;background:radial-gradient(ellipse at center,#f8f7f1,#eceee7 78%);touch-action:none;overscroll-behavior:contain}
#draw-canvas{width:min(100%,calc(100dvh - 250px),560px);height:auto;max-width:100%;max-height:100%;aspect-ratio:1;transform-origin:center center;will-change:transform;border-radius:8px;box-shadow:0 10px 36px rgba(31,43,28,.12)}
.draw-controls{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;margin:0;padding:7px 10px;border:1px solid rgba(92,105,81,.16);border-radius:16px;background:rgba(255,255,252,.88);backdrop-filter:blur(12px)}
.draw-import{grid-column:1/-1;border:0;background:transparent}.draw-import summary{min-height:26px;padding:2px 3px;color:#66705e;font-size:.78rem}.draw-import>p{display:none}.draw-import__options{justify-content:flex-start;padding:2px 0 5px}
.draw-control-row{min-width:0}.draw-palette{display:flex;justify-content:flex-start;flex-wrap:nowrap;max-width:100%;max-height:none;overflow-x:auto;overflow-y:hidden;padding:4px;gap:8px;scrollbar-width:thin}.draw-color{flex:0 0 30px}
.draw-tools{justify-content:flex-end;flex-wrap:nowrap;gap:4px}.draw-tools button,.draw-actions button{min-height:34px;padding:5px 9px;font-size:.8rem}.draw-actions{grid-column:1/-1;justify-content:flex-end;gap:5px}.draw-actions button{min-width:36px}.draw-actions #draw-save{margin-left:auto}
.draw-page .draw-color:focus-visible,.draw-page button:focus-visible{outline-offset:2px}
.draw-actions #draw-to-globe{border-color:#a8b59c;background:#f0f4eb;color:#344332}
@media(max-width:560px){.draw-page{padding-right:8px;padding-left:8px;grid-template-rows:auto auto minmax(0,1fr) auto}.draw-board{border-radius:14px}#draw-canvas{width:min(100%,calc(100dvh - 235px),560px)}.draw-controls{grid-template-columns:1fr;padding:5px 7px}.draw-control-row{display:grid;gap:3px}.draw-palette{justify-content:center}.draw-tools{justify-content:center}.draw-actions{grid-column:1;justify-content:center}.draw-actions #draw-save{margin-left:auto}}
@media(max-height:620px){.draw-page{padding-top:5px;padding-bottom:calc(66px + env(safe-area-inset-bottom));gap:4px}.draw-heading p{display:none}.draw-meta{font-size:.68rem}.draw-controls{gap:3px;padding:4px 7px}.draw-import summary{min-height:22px;padding:0 3px}.draw-color{width:26px;height:26px;flex-basis:26px}.draw-tools button,.draw-actions button{min-height:29px;padding:3px 7px}.draw-actions{gap:3px}}

/* The stage is the canvas' containing box, including on narrow/short screens. */
.draw-board{display:flex;align-items:center;justify-content:center;container-type:size}
#draw-canvas{flex:none;width:min(100cqw,100cqh,560px);max-width:none;max-height:none;height:auto}
.draw-page{padding-bottom:calc(98px + env(safe-area-inset-bottom))}
@media(max-height:620px){.draw-page{padding-bottom:calc(92px + env(safe-area-inset-bottom))}}
@media(max-height:400px) and (min-width:480px){
  .draw-page{grid-template-columns:minmax(0,1fr) minmax(188px,230px);grid-template-rows:auto auto minmax(0,1fr);padding-bottom:calc(82px + env(safe-area-inset-bottom));gap:3px 7px}
  .draw-heading,.draw-meta{grid-column:1/-1}
  .draw-board{grid-column:1;grid-row:3}
  .draw-controls{grid-column:2;grid-row:3;display:block;min-height:0;overflow-y:auto;padding:4px}
  .draw-control-row{display:grid;gap:4px}
  .draw-palette{justify-content:flex-start;max-height:43px}
  .draw-tools,.draw-actions{justify-content:flex-start;flex-wrap:wrap;margin-top:4px}
  .draw-tools button,.draw-actions button{min-height:28px;padding:2px 6px}
}