/* ============================================================================
   Design overlay: a numbered 12x12 grid plus a drawing surface.

   A working aid, not part of the site. It is inert until Ctrl+Shift+K, draws
   nothing, listens for nothing else, and adds no visible element to the page.

   Styles live in their own file because the CSP is style-src 'self' with no
   unsafe-inline: a <style> element injected by script would be blocked, so
   this is linked like any other stylesheet.

   Magenta throughout, deliberately: it is the one hue that reads against both
   the white canvas and the brand ink canvas, and it belongs to nothing in the
   brand palette, so a guide can never be mistaken for the design.
   ========================================================================= */

.dg {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  --dg-line: rgba(255, 0, 110, .34);
  --dg-strong: rgba(255, 0, 110, .62);
  --dg-ink: #FF006E;
}
.dg.is-on { display: block; }

/* ---- the grid ----------------------------------------------------------- */
.dg__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  pointer-events: none;      /* a guide is never a target */
}
.dg.no-grid .dg__grid { display: none; }

.dg__cell {
  position: relative;
  border-right: 1px solid var(--dg-line);
  border-bottom: 1px solid var(--dg-line);
}
.dg__cell:nth-child(12n) { border-right: 0; }
.dg__cell:nth-child(n+133) { border-bottom: 0; }

.dg__cell span {
  position: absolute;
  top: 3px; left: 5px;
  font: 600 10px/1 ui-monospace, 'Cascadia Code', Consolas, monospace;
  letter-spacing: .04em;
  color: var(--dg-ink);
  opacity: .72;
  /* a halo so the label survives both a white section and a photograph */
  text-shadow:
     0 0 2px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .95),
     0 0 6px rgba(255, 255, 255, .8);
}
:root[data-theme='dark'] .dg__cell span {
  text-shadow:
     0 0 2px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .95),
     0 0 6px rgba(0, 0, 0, .85);
}

/* every third line heavier, so counting across twelve is possible at a glance */
.dg__cell.is-major { border-right-color: var(--dg-strong); }
.dg__cell.is-majorRow { border-bottom-color: var(--dg-strong); }

/* ---- the drawing surface ------------------------------------------------ */
.dg__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;      /* the page stays usable until Draw is armed */
  touch-action: none;
}
.dg.is-drawing .dg__canvas { pointer-events: auto; cursor: crosshair; }

/* ---- the toolbar -------------------------------------------------------- */
.dg__bar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #11131A;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .7);
  font: 500 12px/1 'Outfit', system-ui, sans-serif;
  color: #F5F7FA;
  max-width: calc(100vw - 24px);
  flex-wrap: wrap;
  justify-content: center;
}

.dg__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: #F5F7FA;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.dg__btn:hover { border-color: rgba(255, 255, 255, .45); }
.dg__btn[aria-pressed='true'] { background: var(--dg-ink); border-color: var(--dg-ink); color: #FFFFFF; }
.dg__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.dg__sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .18); margin: 0 2px; }

.dg__sw {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.dg__sw[aria-pressed='true'] { border-color: #FFFFFF; }

.dg__hint { opacity: .55; font-size: 11px; white-space: nowrap; }

.dg__read {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 999px;
  background: #11131A;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #F5F7FA;
  font: 700 12px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
  pointer-events: none;
}

@media (max-width: 620px) {
  .dg__cell span { font-size: 8px; top: 2px; left: 3px; }
  .dg__hint { display: none; }
}

@media print { .dg { display: none !important; } }