/* 00 · draw (sections/draw.js). Draw a zero. Any zero. A sheet to draw on, and the line of zeros at the bottom of the stage. */

.draw { container-type: inline-size; container-name: draw; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; row-gap: clamp(0.7rem, 1.6vh, 1.1rem); }
.draw [hidden] { display: none !important; }

/* the counter and the two buttons */
.draw__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.draw__count .q-num { font-size: 1.15rem; line-height: 0; margin: 0 0.15em; }
.draw__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
.draw__acts .q-btn { padding: 0.75em 1.1em 0.7em; font-size: 0.9rem; }
.draw .q-link { font-size: var(--small); }

/* the sheet */
.draw__sheet { position: relative; justify-self: center; height: 100%; max-width: 100%; aspect-ratio: 5 / 4; background: var(--paper); box-shadow: 0 0 0 1px var(--gray-line), 0 40px 70px -55px rgba(16, 17, 15, 0.45); transform: rotate(0.7deg); }
.draw__sheet::before { content: ""; position: absolute; inset: 0.8rem; border: 1px solid var(--gray-line); pointer-events: none; }
.draw__pad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; overflow: visible; }
.draw__pad:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.draw__guide { fill: none; stroke: var(--gray-line); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.3s; }
.draw__sheet.is-drawing .draw__guide, .draw__sheet[data-phase="done"] .draw__guide { opacity: 0; }
.draw__sheet:not([data-phase="one"]) .draw__guide--one { display: none; }
.draw__sheet[data-phase="one"] .draw__guide--zero { display: none; }
.draw__sheet[data-phase="done"] .draw__pad { cursor: default; }
.draw__ink { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.draw__ink.is-returned { stroke: var(--gray-text); transition: stroke 0.2s, opacity 0.6s 0.3s; opacity: 0; }
.draw__head { position: absolute; left: 1.6rem; right: 1.6rem; top: 1.45rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: var(--gray-text); pointer-events: none; }
.draw__serial { font-size: 1rem; color: var(--ink); letter-spacing: 0.04em; white-space: nowrap; }
.draw__stamp { position: absolute; right: 1.6rem; bottom: 1.5rem; font-size: clamp(1rem, 2.4cqw, 1.4rem); opacity: 0; pointer-events: none; }
.draw__stamp.is-pressed { opacity: 1; }
.draw__clerk { position: absolute; z-index: 5; left: -1.2rem; bottom: -0.6rem; height: 38%; width: auto; pointer-events: none; transform: rotate(-0.7deg); }
.draw, .draw__sheet, .stage--draw, .stage--draw > * { overflow: visible !important; }

/* a word from the desk */
.draw__note { min-height: 1.4em; line-height: 1.4; }

/* the line */
.draw__queue { position: relative; --zh: min(13svh, calc(100cqw / 16.6 * 1.75)); }
.draw__figure { font-size: clamp(1.5rem, 8.4cqw, 3.6rem); line-height: 1; white-space: nowrap; margin-bottom: 0.5rem; }
.draw__figure:empty { display: none; }
.draw__ghost { color: var(--gray-line); opacity: 0.9; }
.draw__present { position: absolute; right: 0.4rem; bottom: 18%; font-size: clamp(1.1rem, 3.4cqw, 1.6rem); background: var(--paper); opacity: 0; pointer-events: none; z-index: 1; }
.draw__present.is-pressed { opacity: 1; }
.draw__line { position: relative; display: flex; align-items: flex-end; min-height: var(--zh); border-bottom: 3px solid var(--ink); }
.draw__line > .draw-zero { height: var(--zh); width: auto; flex: 0 1 auto; min-width: 0; }
.draw__line .draw-one { height: calc(var(--zh) * 1.06); margin-right: 0.8cqw; }
.draw-zero { overflow: visible; display: block; }
.draw-zero .z-line { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.draw-zero .z-fill { fill: var(--ink); }
.draw-zero .z-lace { fill: none; stroke: var(--paper); }
.draw-zero .z-sheet { fill: var(--canton); stroke: var(--ink); }
.draw-zero .z-lens { fill: var(--paper); stroke: var(--ink); }
.draw-zero__body { fill: var(--paper); stroke: var(--ink); stroke-linejoin: round; stroke-linecap: round; }
.draw-zero__body--open { fill: none; }

/* keeping */
.draw__keep { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.7rem; min-height: 1.5rem; }
.draw__keep .q-btn { padding: 0.6em 0.9em 0.55em; font-size: 0.85rem; }
.draw__keep .q-btn[disabled] { cursor: default; box-shadow: inset 0 0 0 2px var(--gray-line); color: var(--gray-text); }
.draw__keep .q-btn[disabled]:hover { transform: none; }

@media (max-width: 880px) {
  .draw { padding: 0 1.25rem; grid-template-rows: auto auto auto auto; row-gap: 0.9rem; }
  .draw__sheet { justify-self: stretch; height: auto; width: 100%; aspect-ratio: 1 / 1; max-height: 46svh; transform: none; }
  .draw__clerk { left: -0.5rem; height: 32%; }
  .draw__queue { --zh: calc(100cqw / 8.4 * 1.75); }
  .draw__line { flex-wrap: wrap; row-gap: 0.6rem; }
  .draw__line > .draw-zero { flex: none; }
  .draw__present { bottom: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .draw__guide, .draw__ink.is-returned { transition: none; }
}