/*
 * Same tokens as coloring-theme, so the app reads as part of DoodleGrove:
 * red = download, blue = navigation, ink for text and the active tool.
 * The crayon box is the one playful element; everything around it stays quiet.
 */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --wash: #e7eaf3;
  --wash-deep: #d5daea;
  --ink: #26235c;
  --ink-soft: #565490;
  --crayon-red: #d7263d;
  --crayon-red-dark: #a91c2e;
  --crayon-blue: #2274a5;
  --font-display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --line: 1px solid var(--wash-deep);
  --lift: 0 0 0 1px rgb(38 35 92 / .08), 0 8px 22px -10px rgb(38 35 92 / .45);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.4; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a:focus-visible, button:focus-visible, input:focus-visible,
.dgoc-swatch--custom:has(input:focus-visible),
.dgoc-paper-size label:has(input:focus-visible) { outline: 3px solid var(--crayon-blue); outline-offset: 2px; }

.dgoc-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dgoc-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Shell: the app is exactly one screen tall, so tools never scroll away. */
.dgoc-app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 236px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "header header header" "tools stage box";
}

/* Header */
.dgoc-header { grid-area: header; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; min-height: 60px; padding: 0 20px; border-bottom: var(--line); }
.dgoc-back { justify-self: start; display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding-right: 6px; color: var(--crayon-blue); font-weight: 700; text-decoration: none; }
.dgoc-back:hover span { text-decoration: underline; text-underline-offset: 3px; }
.dgoc-back .dgoc-icon { margin-left: -6px; }
.dgoc-title { margin: 0; overflow: hidden; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.dgoc-brand { justify-self: end; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; text-decoration: none; }
.dgoc-brand img { border-radius: 50%; }
.dgoc-export-toggle { display: none; }

/* Tool rail */
.dgoc-tools { grid-area: tools; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-right: var(--line); }
.dgoc-tool { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; padding: 9px 4px 7px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.dgoc-tool:hover { background: var(--wash); color: var(--ink); }
.dgoc-tool.is-active { background: var(--ink); color: var(--paper); }

/* Stage */
.dgoc-stage { grid-area: stage; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--wash); }
.dgoc-viewport { position: absolute; inset: 0; display: flex; overflow: auto; padding: 28px 28px 84px; }
/* margin:auto centres the sheet but still lets a zoomed sheet scroll to every edge. */
.dgoc-sheet { flex: none; width: max-content; margin: auto; background: var(--paper); box-shadow: 0 1px 2px rgb(38 35 92 / .12), 0 18px 36px -18px rgb(38 35 92 / .4); }
.dgoc-paper { position: relative; background: var(--paper); }
/* Size the page before app.js runs, with the same rule as setZoom() at 100%: the stage's
   content box, minus the watermark row, at the artwork's ratio (inline --dgoc-ratio).
   Without it the sheet grew from 0 when the script ran: CLS 0.2155 (SEO_PLAN.md S-06). */
.dgoc-viewport { container-type: size; }
.dgoc-paper { width: max(200px, min(100cqw, (100cqh - 19px) * var(--dgoc-ratio, 0.7735))); }
.dgoc-paper canvas, .dgoc-paper img, .dgoc-interaction { position: absolute; inset: 0; width: 100%; height: 100%; }
.dgoc-paper img { pointer-events: none; user-select: none; -webkit-user-select: none; }
.dgoc-interaction { touch-action: none; cursor: crosshair; }
/* Brush and eraser outline: its diameter is the stroke width at the current zoom. The
   white halo and dark inner edge keep it visible on white paper and on dark paint. */
.dgoc-brush-cursor { position: absolute; top: 0; left: 0; width: 0; height: 0; border: 1.5px solid var(--brush, var(--ink)); border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 255 255 / .9), inset 0 0 0 1px rgb(38 35 92 / .45); pointer-events: none; opacity: 0; transition: opacity .12s; }
.dgoc-brush-cursor.is-visible { opacity: 1; }
.dgoc-app[data-tool="eraser"] .dgoc-brush-cursor { border-style: dashed; border-color: var(--ink); }
.dgoc-watermark { display: block; padding: 4px 0 4px; color: #404040; font: 500 11px/1 var(--font-body); text-align: right; pointer-events: none; user-select: none; }

.dgoc-dock { position: absolute; left: 50%; bottom: 16px; display: flex; align-items: center; gap: 2px; padding: 4px; transform: translateX(-50%); border-radius: 999px; background: var(--paper); box-shadow: var(--lift); }
.dgoc-dock button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); }
.dgoc-dock button:not(:disabled):hover { background: var(--wash); }
.dgoc-dock button:disabled { opacity: .3; }
.dgoc-dock-rule { width: 1px; height: 22px; margin: 0 6px; background: var(--wash-deep); }
.dgoc-zoom-label { min-width: 46px; color: var(--ink-soft); font-size: .82rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

.dgoc-status { position: absolute; top: 14px; left: 50%; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 8px 16px; transform: translate(-50%, -6px); border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .9rem; font-weight: 500; text-align: center; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.dgoc-status.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* Crayon box */
.dgoc-box { grid-area: box; display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; padding: 20px 18px 18px 22px; border-left: var(--line); }
.dgoc-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
.dgoc-swatch { position: relative; display: block; width: 100%; height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
  /* The outline follows the crayon shape, so white and cream stay visible. */
  filter: drop-shadow(0 0 .6px rgb(38 35 92 / .7)) drop-shadow(0 1px 1px rgb(38 35 92 / .15)); }
.dgoc-crayon {
  display: block; height: 100%; border-radius: 0 5px 5px 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .38) 0 16%, transparent 16% 72%, rgb(0 0 0 / .08) 72%),
    linear-gradient(90deg, transparent 0 36%, rgb(0 0 0 / .16) 36% 38.5%, transparent 38.5% 86%, rgb(0 0 0 / .16) 86% 88.5%, transparent 88.5%),
    var(--crayon, #f26574);
  /* Tip points left, toward the picture. */
  clip-path: polygon(0 40%, 7% 30%, 24% 12%, 24% 0, 100% 0, 100% 100%, 24% 100%, 24% 88%, 7% 70%, 0 60%);
  transition: transform .16s ease-out;
}
.dgoc-swatch:hover .dgoc-crayon { transform: translateX(-4px); }
.dgoc-swatch[aria-pressed="true"] .dgoc-crayon,
.dgoc-swatch--custom.is-selected .dgoc-crayon { transform: translateX(-11px); }
.dgoc-swatch[aria-pressed="true"]::after,
.dgoc-swatch--custom.is-selected::after { content: ""; position: absolute; top: 50%; right: -9px; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--ink); }
.dgoc-swatch--custom { grid-column: 1 / -1; width: calc(50% - 6px); }
.dgoc-swatch--custom:not(.is-picked) .dgoc-crayon { background: linear-gradient(90deg, #f26574, #f8bf43 30%, #8bd4ab 55%, #568ed5 78%, #8e6ec7); }
.dgoc-swatch--custom::before { content: "Any color"; position: absolute; top: 50%; left: calc(100% + 14px); transform: translateY(-50%); color: var(--ink-soft); font-size: .85rem; font-weight: 700; white-space: nowrap; }

.dgoc-size { display: flex; flex-direction: column; gap: 6px; color: var(--ink-soft); font-size: .85rem; font-weight: 700; }
.dgoc-size input { width: 100%; margin: 0; accent-color: var(--ink); }
.dgoc-app:not([data-tool="brush"]):not([data-tool="eraser"]) .dgoc-size { display: none; }

.dgoc-export { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1.5px dashed var(--wash-deep); }
.dgoc-paper-size { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 0; padding: 3px; border: 0; border-radius: 10px; background: var(--wash); }
.dgoc-paper-size legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dgoc-paper-size label { position: relative; border-radius: 8px; cursor: pointer; }
.dgoc-paper-size input { position: absolute; opacity: 0; pointer-events: none; }
.dgoc-paper-size span { display: block; padding: 7px 4px; border-radius: 8px; color: var(--ink-soft); font-size: .88rem; font-weight: 700; text-align: center; }
.dgoc-paper-size input:checked + span { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgb(38 35 92 / .22); }
.dgoc-download { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--crayon-red); color: var(--paper); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; white-space: nowrap; }
.dgoc-download:not(:disabled):hover { background: var(--crayon-red-dark); }
.dgoc-download:disabled { opacity: .6; }
.dgoc-export-note { margin: 0; color: var(--ink-soft); font-size: .8rem; }
.dgoc-sheet-backdrop { display: none; }

@media (max-height: 760px) and (min-width: 761px) {
  .dgoc-box { gap: 14px; padding-top: 14px; }
  .dgoc-colors { row-gap: 7px; }
  .dgoc-swatch { height: 24px; }
}

@media (max-width: 1024px) and (min-width: 761px) {
  .dgoc-app { grid-template-columns: 76px minmax(0, 1fr) 220px; }
  .dgoc-box { padding-right: 16px; padding-left: 18px; }
  .dgoc-download { padding-inline: 12px; }
  .dgoc-tool { width: 58px; }
  .dgoc-brand span { display: none; }
}

/* Phone: picture in the middle, crayons and tools docked at the bottom. */
@media (max-width: 760px) {
  .dgoc-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "header" "stage" "box" "tools"; }

  .dgoc-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; min-height: 54px; padding: 0 8px; }
  .dgoc-back { justify-content: center; width: 44px; height: 44px; padding: 0; }
  .dgoc-back .dgoc-icon { width: 26px; height: 26px; margin: 0; }
  .dgoc-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dgoc-title { font-size: 1.08rem; }
  .dgoc-brand { display: none; }
  .dgoc-export-toggle { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: var(--crayon-red); color: var(--paper); font-family: var(--font-display); font-weight: 600; }
  .dgoc-export-toggle .dgoc-icon { width: 19px; height: 19px; stroke-width: 2.1; }

  .dgoc-viewport { padding: 14px 14px 66px; }
  .dgoc-dock { bottom: 10px; }
  .dgoc-dock button { width: 38px; height: 38px; }
  .dgoc-status { top: 10px; font-size: .84rem; }

  .dgoc-box { gap: 0; overflow: hidden; padding: 0; border-left: 0; border-top: var(--line); }
  .dgoc-colors { display: flex; gap: 8px; overflow-x: auto; padding: 16px 14px 8px; scrollbar-width: none; }
  .dgoc-colors::-webkit-scrollbar { display: none; }
  .dgoc-swatch, .dgoc-swatch--custom { flex: 0 0 24px; width: 24px; height: 48px; }
  .dgoc-crayon {
    border-radius: 0 0 4px 4px;
    background:
      linear-gradient(90deg, rgb(255 255 255 / .38) 0 18%, transparent 18% 72%, rgb(0 0 0 / .08) 72%),
      linear-gradient(180deg, transparent 0 42%, rgb(0 0 0 / .16) 42% 45%, transparent 45% 86%, rgb(0 0 0 / .16) 86% 89%, transparent 89%),
      var(--crayon, #f26574);
    /* Tip points up, toward the picture. */
    clip-path: polygon(40% 0, 60% 0, 72% 8%, 90% 26%, 100% 26%, 100% 100%, 0 100%, 0 26%, 10% 26%, 28% 8%);
  }
  .dgoc-swatch:hover .dgoc-crayon { transform: none; }
  .dgoc-swatch[aria-pressed="true"] .dgoc-crayon,
  .dgoc-swatch--custom.is-selected .dgoc-crayon { transform: translateY(-10px); }
  .dgoc-swatch[aria-pressed="true"]::after,
  .dgoc-swatch--custom.is-selected::after { display: none; }
  .dgoc-swatch--custom:not(.is-picked) .dgoc-crayon { background: linear-gradient(180deg, #f26574, #f8bf43 30%, #8bd4ab 55%, #568ed5 78%, #8e6ec7); }
  .dgoc-swatch--custom::before { display: none; }
  .dgoc-size { flex-direction: row; align-items: center; gap: 12px; padding: 4px 16px 10px; font-size: .8rem; white-space: nowrap; }

  .dgoc-tools { position: relative; z-index: 1; flex-direction: row; justify-content: space-around; gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: var(--line); background: var(--paper); }
  .dgoc-tool { flex: 1 1 0; width: auto; max-width: 76px; padding: 7px 2px 5px; font-size: .72rem; }

  .dgoc-export { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); border-top: 0; border-radius: 20px 20px 0 0; background: var(--paper); box-shadow: 0 -12px 32px -10px rgb(38 35 92 / .35); transform: translateY(105%); visibility: hidden; transition: transform .2s ease-out, visibility 0s .2s; }
  .dgoc-export::before { content: "Download your picture"; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
  .dgoc-app.is-export-open .dgoc-export { transform: none; visibility: visible; transition: transform .2s ease-out; }
  .dgoc-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 15; border: 0; background: rgb(38 35 92 / .35); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .dgoc-app.is-export-open .dgoc-sheet-backdrop { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}