/* ==========================================================
   Draw & Colour - the picture chooser on the page and the
   full-screen drawing studio. Loaded after assets/style.css.
   ========================================================== */

/* ---------- picture chooser on the page ---------- */
.dc-start { max-width: 980px; margin-inline: auto; background: #fff; border: 5px solid var(--c1); border-radius: var(--round); padding: clamp(1rem, 3vw, 2rem); box-shadow: var(--shadow-m); text-align: center; }
.dc-start h2 { margin: 0 0 .4rem; }
.dc-start .lede { margin: 0 auto 1.2rem; }
.dc-grid { display: grid; gap: clamp(.6rem, 1.6vw, 1rem); grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr)); }
.dc-pic {
  font: inherit; color: var(--ink); cursor: pointer; display: grid; gap: .3rem; justify-items: center;
  background: #FFFDF8; border: 4px solid #EEE7DA; border-radius: 22px; padding: .6rem .6rem .8rem;
  box-shadow: 0 5px 0 rgba(42,46,67,.10); transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s;
  touch-action: manipulation;
}
.dc-pic:hover, .dc-pic:focus-visible { transform: translateY(-4px) rotate(-1deg); border-color: var(--c1); }
.dc-pic svg { width: 100%; height: auto; aspect-ratio: 1; background: #fff; border-radius: 14px; }
.dc-pic b { font-size: 1rem; font-weight: 900; }
.dc-pic.dc-blank svg { background: repeating-linear-gradient(45deg, #fff, #fff 14px, #FAF6EE 14px, #FAF6EE 28px); }
.dc-note { margin: 1rem 0 0; font-size: .85rem; color: var(--ink-soft); }

/* ---------- the studio: covers the whole screen while open ---------- */
html.dc-lock, html.dc-lock body { overflow: hidden; }
.dc-overlay {
  position: fixed; inset: 0; z-index: 2147483000; display: none; flex-direction: column;
  background: #FFF4E2; font-family: var(--font); color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.dc-overlay.is-open { display: flex; }
.dc-overlay [hidden] { display: none !important; }

.dc-bar {
  flex: none; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .5rem clamp(.5rem, 2vw, 1rem); padding-top: max(.5rem, env(safe-area-inset-top));
  background: #fff; box-shadow: 0 4px 0 rgba(42,46,67,.10); position: relative; z-index: 3;
}
.dc-gap { flex: 1; }
.dc-round, .dc-btn {
  font: inherit; font-weight: 900; color: var(--ink); cursor: pointer; touch-action: manipulation;
  border: 3px solid #E4DCCB; background: var(--cream); height: 46px;
}
.dc-round { width: 46px; border-radius: 50%; font-size: 1.2rem; padding: 0; }
.dc-btn { border-radius: 999px; padding: 0 1rem; font-size: .95rem; display: inline-flex; align-items: center; gap: .35rem; }
.dc-save { background: var(--green-1); border-color: var(--green-1); color: #fff; box-shadow: 0 4px 0 #2B7A41; }
@media (max-width: 520px) {
  .dc-bar { flex-wrap: nowrap; gap: .3rem; }
  .dc-btn span { display: none; }
  .dc-round, .dc-btn { height: 40px; }
  .dc-round { width: 40px; font-size: 1.05rem; }
  .dc-btn { padding: 0 .55rem; }
  .dc-save span { display: inline; }
}

.dc-main {
  flex: 1; min-height: 0; display: grid; gap: clamp(.4rem, 1.4vw, .9rem);
  grid-template-columns: auto minmax(0, 1fr) auto; padding: clamp(.4rem, 1.4vw, .9rem);
}
.dc-tools, .dc-colours { display: flex; flex-direction: column; gap: .45rem; align-content: center; justify-content: center; }
.dc-colours { display: grid; grid-template-columns: repeat(2, 46px); grid-auto-rows: 46px; }
.dc-board { min-width: 0; min-height: 0; display: grid; place-items: center; }
.dc-paper {
  position: relative; background: #fff; border-radius: 18px; overflow: hidden; touch-action: none;
  box-shadow: 0 0 0 5px #fff, 0 8px 0 5px rgba(42,46,67,.12); cursor: crosshair;
}
.dc-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dc-lines { pointer-events: none; }

.dc-tool {
  width: 58px; height: 58px; border-radius: 18px; border: 4px solid #E4DCCB; background: #fff; cursor: pointer;
  font-size: 1.6rem; line-height: 1; display: grid; place-items: center; padding: 0; touch-action: manipulation;
}
.dc-tool[aria-pressed="true"] { border-color: var(--ink); background: #FFF0B8; transform: scale(1.06); }
.dc-dot { width: var(--d); height: var(--d); border-radius: 50%; background: var(--ink-now, #E8384F); display: block; }
.dc-colour {
  width: 46px; height: 46px; border-radius: 50%; border: 4px solid #fff; background: var(--sw); cursor: pointer; padding: 0;
  box-shadow: 0 0 0 2px #D9CFBC; touch-action: manipulation;
}
.dc-colour[data-colour="#FFFFFF"] { box-shadow: 0 0 0 2px #B9B0A0; }
.dc-rainbow { background: conic-gradient(#E8384F, #FF8A1F, #FFCF26, #3FBF6F, #2E8CF0, #8E5CF5, #E8384F) !important; }
.dc-colour[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--ink); transform: scale(1.12); }

/* stamp picker pops up beside the stamp button */
.dc-stamps {
  position: absolute; z-index: 4; left: 90px; top: 50%; translate: 0 -50%; display: grid; grid-template-columns: repeat(3, 70px); gap: .4rem;
  background: #fff; border: 4px solid var(--ink); border-radius: 22px; padding: .6rem; box-shadow: var(--shadow-m);
}
.dc-stamps button { width: 70px; height: 70px; border-radius: 16px; border: 3px solid #EEE7DA; background: var(--cream); padding: 4px; cursor: pointer; }
.dc-stamps button[aria-pressed="true"] { border-color: var(--ink); background: #FFF0B8; }
.dc-stamps canvas { width: 100%; height: 100%; display: block; }

/* phones held upright: tools along the top, colours along the bottom */
@media (orientation: portrait) {
  .dc-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .dc-tools { flex-direction: row; flex-wrap: wrap; }
  .dc-tool { width: 52px; height: 52px; font-size: 1.4rem; }
  .dc-colours { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .4rem; }
  .dc-colour { width: 40px; height: 40px; }
  .dc-stamps { left: 50%; top: 130px; translate: -50% 0; }
}

/* panels: pictures, start again?, saved */
.dc-panel { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1rem; background: rgba(16,40,70,.45); overflow-y: auto; }
.dc-sheet { width: min(100%, 680px); max-height: 100%; overflow-y: auto; background: var(--cream); border: 5px solid #fff; border-radius: var(--round); padding: clamp(1rem, 3vw, 1.8rem); text-align: center; box-shadow: var(--shadow-l); }
.dc-sheet h2 { margin: 0 0 .6rem; }
.dc-sheet .dc-pics { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.dc-small { font-size: .85rem; color: var(--ink-soft); margin: .8rem 0 0; }
.dc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }