/* かんたんドット — few words, big friendly controls. Layout rows stay creation-draw.css's; this is the look. */
body[data-page="draw"] { background: #eef0ea; }
body[data-page="draw"] .draw-page { gap: 6px; }

/* ---- top: name + size ---- */
body[data-page="draw"] .draw-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
body[data-page="draw"] .draw-heading h1 { display: flex; align-items: center; gap: 8px; margin: 0; color: #17232d; font-size: 1.05rem; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.draw-logo { width: 22px; height: 22px; border-radius: 6px; background:
  linear-gradient(#e75445 0 0) 3px 3px / 7px 7px no-repeat, linear-gradient(#ffe066 0 0) 12px 3px / 7px 7px no-repeat,
  linear-gradient(#4c82c3 0 0) 3px 12px / 7px 7px no-repeat, linear-gradient(#6d9b68 0 0) 12px 12px / 7px 7px no-repeat, #17232d; }
.draw-size-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 14px; background: #15202b; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.draw-size-seg button { min-width: 44px; min-height: 36px; padding: 0 8px; border: 0; border-radius: 11px; background: transparent; color: rgba(255,255,255,.72); font: 900 .86rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; transition: background .15s, color .15s, transform .12s cubic-bezier(.2,1.3,.4,1); }
.draw-size-seg button[aria-checked="true"] { background: #ffd35a; color: #17232d; box-shadow: 0 2px 0 #b88f1d; }
.draw-size-seg button:active { transform: translateY(2px); }
.draw-size-seg button:focus-visible { outline: 3px solid #ffd35a; outline-offset: 2px; }
body[data-page="draw"] .draw-heading .draw-size { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap; margin: 0; padding: 0; border: 0; }

/* ---- messages float over the canvas and fade ---- */
body[data-page="draw"] .draw-meta { position: relative; z-index: 6; height: 0; min-height: 0; margin: 0; padding: 0; overflow: visible; }
body[data-page="draw"] .draw-size-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
body[data-page="draw"] #draw-status { position: absolute; left: 50%; top: 8px; max-width: min(92%, 420px); margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(21,32,43,.9); color: #fff; font-size: .76rem; font-weight: 700; line-height: 1.35; text-align: center; white-space: normal; transform: translate(-50%, -6px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
body[data-page="draw"] #draw-status.is-show { opacity: 1; transform: translate(-50%, 0); }
body[data-page="draw"] #draw-zoom-label { position: absolute; right: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(21,32,43,.78); color: #fff; font: 900 .7rem/1 ui-monospace, monospace; opacity: 0; transition: opacity .2s; pointer-events: none; }
body[data-page="draw"] #draw-zoom-label.is-zoomed { opacity: 1; }

/* ---- the canvas: a soft stage, grid lines, a cell cursor, the mirror axis ---- */
body[data-page="draw"] .draw-board { position: relative; border-radius: 20px; background: #dfe3da; box-shadow: inset 0 0 0 3px #15202b, inset 0 8px 20px rgba(21,32,43,.12); overflow: hidden; }
body[data-page="draw"] #draw-canvas { cursor: crosshair; box-shadow: 0 6px 18px rgba(21,32,43,.18); background: repeating-conic-gradient(#e9ece5 0 25%, #fbfbf8 0 50%) 0 0 / calc(200% / var(--cols, 16)) calc(200% / var(--rows, 16)) !important; }
body[data-page="draw"] #draw-canvas[data-tool="picker"] { cursor: copy; }
.draw-grid { position: absolute; z-index: 2; display: none; pointer-events: none;
  background-image: linear-gradient(to right, rgba(23,35,45,.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(23,35,45,.16) 1px, transparent 1px);
  background-size: calc(100% / var(--cols, 16)) calc(100% / var(--rows, 16)); box-shadow: inset -1px -1px 0 rgba(23,35,45,.16); }
.draw-grid.is-fine { background-image: linear-gradient(to right, rgba(23,35,45,.09) 1px, transparent 1px), linear-gradient(to bottom, rgba(23,35,45,.09) 1px, transparent 1px); }
.draw-board.has-grid .draw-grid, .draw-board.has-symmetry .draw-grid { display: block; overflow: hidden; }
.draw-board.has-symmetry:not(.has-grid) .draw-grid { background-image: none; box-shadow: none; }
.draw-symmetry-axis { position: absolute; left: calc(50% - var(--symmetry-length) / 2); top: calc(50% - 1px); width: var(--symmetry-length); height: 2px; transform-origin: center; background: repeating-linear-gradient(to right, #ffd35a 0 6px, transparent 6px 10px); }
.draw-symmetry-axis[hidden] { display: none; }
.axis-horizontal { transform: rotate(90deg); }
.axis-diagonalDown { transform: rotate(45deg); }
.axis-diagonalUp { transform: rotate(-45deg); }
.draw-cursor { position: absolute; z-index: 3; box-sizing: border-box; pointer-events: none; border: 2px solid #fff; border-radius: 2px; background: var(--draw-color, transparent); box-shadow: 0 0 0 1px #15202b, 0 2px 6px rgba(0,0,0,.25); opacity: .85; transition: left .04s linear, top .04s linear; }
.draw-cursor[data-tool="eraser"] { border-style: dashed; background: rgba(255,255,255,.35); }
.draw-cursor[data-tool="picker"] { border-radius: 50%; background: transparent; }
.draw-cursor-twin { opacity: .45; }
.draw-cursor[hidden] { display: none; }

/* ---- colours: the chosen one large on the left, the 16 as pressable tiles ---- */
body[data-page="draw"] .draw-control-row { display: grid !important; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; }
.draw-current { position: relative; width: 52px; height: 52px; border-radius: 14px; background: #1d2b38; box-shadow: 0 3px 0 rgba(0,0,0,.45); }
.draw-current span { position: absolute; inset: 7px; border-radius: 9px; background: var(--draw-color, #e75445); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 0 0 2px #ffd35a; transition: background .15s; }
.draw-current.is-clear span { background: repeating-conic-gradient(#cfd4cc 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
body[data-page="draw"] .draw-palette .draw-color { border: 2px solid rgba(255,255,255,.22); border-radius: 9px !important; box-shadow: 0 3px 0 rgba(0,0,0,.45); transition: transform .12s cubic-bezier(.2,1.3,.4,1), box-shadow .12s; }
body[data-page="draw"] .draw-palette .draw-color--transparent { background: repeating-conic-gradient(#cfd4cc 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
body[data-page="draw"] .draw-palette .draw-color[aria-pressed="true"] { border-color: #fff; transform: translateY(-3px) scale(1.08); box-shadow: 0 0 0 3px #ffd35a, 0 5px 0 rgba(0,0,0,.45); }
body[data-page="draw"] .draw-palette .draw-color:active { transform: translateY(2px); }

/* ---- tools: icons only ---- */
body[data-page="draw"] .draw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
body[data-page="draw"] .draw-tools, body[data-page="draw"] .draw-toggles, body[data-page="draw"] .draw-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
body[data-page="draw"] .draw-tools button, body[data-page="draw"] .draw-toggles button, body[data-page="draw"] .draw-actions button, body[data-page="draw"] .draw-import > summary {
  display: grid; place-items: center; width: 42px; height: 42px; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 13px !important; background: #1d2b38 !important; color: #fff !important; box-shadow: 0 3px 0 rgba(0,0,0,.45); cursor: pointer; list-style: none; transition: transform .12s cubic-bezier(.2,1.3,.4,1), box-shadow .12s, background .15s; }
body[data-page="draw"] .draw-import > summary::-webkit-details-marker { display: none; }
body[data-page="draw"] .draw-toolbar svg, body[data-page="draw"] .draw-actions svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="draw"] .draw-tools button[aria-pressed="true"] { background: #ffd35a !important; color: #17232d !important; box-shadow: 0 3px 0 #b88f1d; transform: translateY(-2px); }
body[data-page="draw"] .draw-toggles button[aria-pressed="true"] { background: #8ecdf0 !important; color: #17232d !important; box-shadow: 0 3px 0 #4f8fb3; }
body[data-page="draw"] .draw-tools button:active, body[data-page="draw"] .draw-toggles button:active, body[data-page="draw"] .draw-actions button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,.45); }
body[data-page="draw"] .draw-actions { justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
body[data-page="draw"] .draw-actions button:disabled { opacity: .35; }
body[data-page="draw"] #draw-clear { color: #ff9c8f !important; }
body[data-page="draw"] #draw-to-globe { color: #ffd35a !important; box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,211,90,.55); }

/* ---- "open" sheet ---- */
body[data-page="draw"] .draw-import { position: relative; margin: 0; }
body[data-page="draw"] .draw-import[open] > summary { background: #ffd35a !important; color: #17232d !important; }
body[data-page="draw"] .draw-import__options { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 80; display: grid; gap: 6px; width: min(calc(100vw - 32px), 360px); max-height: calc(100dvh - 180px); overflow-y: auto; padding: 12px; border-radius: 18px; background: #15202b; box-shadow: 0 18px 40px rgba(0,0,0,.4); transform: translateX(-50%); }
body[data-page="draw"] .draw-import__options > button, body[data-page="draw"] .draw-import__options button { width: 100% !important; height: auto !important; min-height: 44px !important; padding: 8px 12px !important; border-radius: 12px !important; font-size: .82rem; font-weight: 900; text-align: left; display: block !important; }
body[data-page="draw"] .draw-import > p { display: none; }

@media (max-height: 620px) {
  body[data-page="draw"] .draw-current { width: 40px; height: 40px; } body[data-page="draw"] .draw-control-row { grid-template-columns: 40px minmax(0, 1fr); }
  body[data-page="draw"] .draw-tools button, body[data-page="draw"] .draw-toggles button, body[data-page="draw"] .draw-actions button, body[data-page="draw"] .draw-import > summary { width: 36px; height: 36px; border-radius: 11px !important; }
  body[data-page="draw"] .draw-toolbar, body[data-page="draw"] .draw-actions { margin-top: 5px; } body[data-page="draw"] .draw-actions { padding-top: 5px; }
  .draw-size-seg button { min-height: 32px; min-width: 38px; }
}
/* short landscape: the controls sit in a narrow column, so the tools wrap and shrink */
@media (max-height: 400px) and (min-width: 480px) {
  body[data-page="draw"] .draw-control-row { grid-template-columns: 30px minmax(0, 1fr); gap: 6px; }
  body[data-page="draw"] .draw-current { width: 30px; height: 30px; border-radius: 9px; } body[data-page="draw"] .draw-current span { inset: 4px; border-radius: 6px; }
  body[data-page="draw"] .draw-toolbar { flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
  body[data-page="draw"] .draw-tools, body[data-page="draw"] .draw-toggles, body[data-page="draw"] .draw-actions { flex-wrap: wrap; gap: 4px; justify-content: flex-start; }
  body[data-page="draw"] .draw-tools button, body[data-page="draw"] .draw-toggles button, body[data-page="draw"] .draw-actions button, body[data-page="draw"] .draw-import > summary { width: 32px; height: 32px; border-radius: 10px !important; }
  body[data-page="draw"] .draw-toolbar svg, body[data-page="draw"] .draw-actions svg { width: 18px; height: 18px; }
  body[data-page="draw"] .draw-import__options { bottom: auto; top: 12px; max-height: calc(100dvh - 24px); }
}
/* ---- colour editor: a small sheet above the controls ---- */
button.draw-current { display: block; padding: 0; border: 0; cursor: pointer; font: inherit; }
button.draw-current:focus-visible { outline: 3px solid #ffd35a; outline-offset: 2px; }
button.draw-current[aria-expanded="true"] span { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 0 0 3px #8ecdf0; }
.draw-canvas.is-grab, canvas.is-grab { cursor: grab; }
.draw-canvas.is-panning, canvas.is-panning { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { body[data-page="draw"] * { transition: none !important; } }
/* seven actions fit a 320px phone */
@media (max-width: 380px) {
  body[data-page="draw"] .draw-actions { gap: 3px; }
  body[data-page="draw"] .draw-actions button, body[data-page="draw"] .draw-actions .draw-import > summary { width: 37px; height: 37px; }
}
.draw-timelapse-more { display: flex; justify-content: flex-end; margin-top: 5px; }
.draw-timelapse-more > summary { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(21,32,43,.2); border-radius: 12px; color: #263238; font-size: .75rem; font-weight: 800; cursor: pointer; list-style: none; }
.draw-timelapse-more > summary::-webkit-details-marker { display: none; }
.draw-timelapse-more[open] > summary { background: #fff5ce; }
.draw-timelapse-more__options { display: flex; justify-content: flex-end; padding-top: 5px; }
.draw-timelapse-more__options button { min-width: 44px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 12px; background: #1d2b38; color: #fff; font: inherit; font-size: .78rem; font-weight: 900; cursor: pointer; }
.draw-timelapse-more__options button:focus-visible, .draw-timelapse-more > summary:focus-visible { outline: 3px solid #ffd35a; outline-offset: 2px; }
/* Keep save actions finger-sized; narrow screens wrap rather than shrink them. */
body[data-page="draw"] .draw-actions { flex-wrap: wrap; }
body[data-page="draw"] .draw-actions button,
body[data-page="draw"] .draw-actions .draw-import > summary { flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px !important; }
@media (max-width: 380px) {
  .draw-timelapse-more { justify-content: flex-start; }
  .draw-timelapse-more__options { justify-content: flex-start; }
}

/* ==== the canvas gets the room: no title row, the size lives in the ⋯ sheet, and on wide screens the
   controls move to a column on the right ==== */
.draw-title { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-page="draw"] .draw-page > .draw-size { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
body.app-page--tool-draw { display: flex; flex-direction: column; height: 100dvh; }
body.app-page--tool-draw #main { flex: 1 1 auto; min-height: 0; height: auto; }
body[data-page="draw"] .draw-page {
  display: grid; grid-template-areas: "board" "controls"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px; padding: 6px 8px 6px; /* the body already keeps room for the bottom bar */
}
body[data-page="draw"] .draw-meta, body[data-page="draw"] .draw-board { grid-area: board; }
body[data-page="draw"] .draw-meta { align-self: start; }
body[data-page="draw"] .draw-controls { grid-area: controls; }
body[data-page="draw"] .draw-board { border-radius: 0; }
body[data-page="draw"] #draw-canvas { width: min(calc(100cqw - 12px), calc((100cqh - 12px) * var(--draw-aspect, 1))); }
body[data-page="draw"] .draw-current { width: 44px; height: 44px; }
body[data-page="draw"] .draw-control-row { grid-template-columns: 44px minmax(0, 1fr); }
/* the size chip on the ⋯ button, and the sheet it opens */
.draw-size-chip { font: 900 .86rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.02em; }
body[data-page="draw"] .draw-import__options .draw-size-seg { justify-content: stretch; width: 100%; box-sizing: border-box; }
body[data-page="draw"] .draw-import__options .draw-size-seg button { flex: 1; width: auto !important; min-height: 44px !important; background: transparent !important; box-shadow: none !important; color: rgba(255,255,255,.72) !important; }
body[data-page="draw"] .draw-import__options .draw-size-seg button[aria-checked="true"] { background: #ffd35a !important; color: #17232d !important; box-shadow: 0 2px 0 #b88f1d !important; }

/* landscape phones, tablets and PCs: canvas on the left; colours, then every tool, in a column on the right */
@media (orientation: landscape) and (min-width: 560px) {
  body[data-page="draw"] .draw-page { --b: 38px; grid-template-areas: "board controls"; grid-template-columns: minmax(0, 1fr) clamp(214px, 26vw, 330px); grid-template-rows: minmax(0, 1fr); gap: 8px; padding: 6px 10px 6px; }
  body[data-page="draw"] .draw-controls { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(var(--b), 1fr)); align-content: start; justify-items: center; align-self: stretch; gap: 6px; min-height: 0; overflow-y: auto; padding: 10px; }
  body[data-page="draw"] .draw-control-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; }
  body[data-page="draw"] .draw-toolbar, body[data-page="draw"] .draw-tools, body[data-page="draw"] .draw-toggles, body[data-page="draw"] .draw-actions { display: contents !important; }
  body[data-page="draw"] .draw-current { width: 100%; height: 30px; border-radius: 10px; }
  body[data-page="draw"] .draw-current span { inset: 5px; border-radius: 6px; }
  body[data-page="draw"] .draw-palette { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 6px !important; width: 100%; }
  body[data-page="draw"] .draw-palette .draw-color { width: 100% !important; max-width: 40px !important; }
  body[data-page="draw"] .draw-tools button, body[data-page="draw"] .draw-toggles button, body[data-page="draw"] .draw-actions button, body[data-page="draw"] .draw-import > summary { width: var(--b) !important; height: var(--b) !important; }
  body[data-page="draw"] .draw-import__options { right: 12px; left: auto; bottom: auto; top: 76px; transform: none; width: min(300px, calc(100vw - 24px)); }
}
/* short landscape phones: no colour bar, 9 swatches a row, smaller buttons */
@media (orientation: landscape) and (max-height: 460px) {
  body[data-page="draw"] .draw-page { --b: 44px; padding-top: 4px; }
  body[data-page="draw"] .draw-controls { gap: 4px; padding: 6px; }
  body[data-page="draw"] .draw-current { display: none; }
  body[data-page="draw"] .draw-palette { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; gap: 3px !important; }
  body[data-page="draw"] .draw-tools button, body[data-page="draw"] .draw-toggles button, body[data-page="draw"] .draw-actions button, body[data-page="draw"] .draw-import > summary { border-radius: 10px !important; }
  body[data-page="draw"] .draw-toolbar svg, body[data-page="draw"] .draw-actions svg { width: 18px; height: 18px; }
  body[data-page="draw"] .draw-import__options { top: calc(var(--creation-editor-header, 64px) + 8px); max-height: calc(100dvh - var(--creation-editor-header, 64px) - var(--creation-editor-bottom, 88px) - 16px); overflow-y: auto; }
}
/* big screens: roomier column, bigger swatches and buttons */
@media (orientation: landscape) and (min-width: 1000px) and (min-height: 640px) {
  body[data-page="draw"] .draw-page { --b: 48px; grid-template-columns: minmax(0, 1fr) 340px; padding: 12px 20px 10px; gap: 14px; }
  body[data-page="draw"] .draw-controls { gap: 10px; padding: 16px; }
  body[data-page="draw"] .draw-current { height: 40px; }
}
/* narrow phones: seven actions in one row */
@media (max-width: 380px) and (orientation: portrait) {
  body[data-page="draw"] .draw-actions { gap: 4px; }
  body[data-page="draw"] .draw-actions > button, body[data-page="draw"] .draw-actions .draw-import > summary { width: 44px !important; height: 44px !important; }
  body[data-page="draw"] .draw-tools button, body[data-page="draw"] .draw-toggles button { width: 40px !important; height: 40px !important; }
  body[data-page="draw"] .draw-actions button, body[data-page="draw"] .draw-actions .draw-import > summary, body[data-page="draw"] .draw-tools button, body[data-page="draw"] .draw-toggles button { min-width: 0 !important; }
  body[data-page="draw"] .draw-toolbar, body[data-page="draw"] .draw-tools, body[data-page="draw"] .draw-toggles { gap: 4px; }
}
/* the tool name in the header reads like a title */
body[data-page="draw"] .px-header-brand--tool > span:not(.brand-mark) { color: #17232d; font-weight: 900; }
body[data-page="draw"] .draw-actions > .draw-import { grid-column: auto; flex: none; }
@media (orientation: portrait) { body[data-page="draw"] .draw-actions { flex-wrap: nowrap; } }
body[data-page="draw"] .draw-controls { backdrop-filter: none; -webkit-backdrop-filter: none; } /* so the sheets inside can cover the whole screen */
/* the sheet's own buttons are full-width rows, whatever size the action buttons are */
body[data-page="draw"] .draw-actions .draw-import__options > button, body[data-page="draw"] .draw-actions .draw-import__options > * > button:not([data-draw-size]) { width: 100% !important; height: auto !important; min-height: 44px !important; padding: 8px 14px !important; justify-content: flex-start; text-align: left; }
body[data-page="draw"] .draw-actions .draw-import__options .draw-size-seg button { width: auto !important; height: 40px !important; min-height: 40px !important; }
body[data-page="draw"] .draw-actions .draw-import__options { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-items: stretch !important; }
body[data-page="draw"] .draw-actions .draw-import__options > * { justify-self: stretch; width: 100% !important; box-sizing: border-box; }
body[data-page="draw"] .draw-actions .draw-import__options .draw-size-seg button { justify-content: center !important; text-align: center !important; padding: 0 !important; }
/* wide screens: sheets open over the canvas, never over the colours on the right */
@media (orientation: landscape) and (min-width: 560px) {
  body[data-page="draw"] .pxd-panel { right: auto; left: max(12px, env(safe-area-inset-left)); }
  body[data-page="draw"] .draw-import__options { right: auto !important; left: max(12px, env(safe-area-inset-left)) !important; }
}