/* you-draw-it.css — neutral, fully skinnable via --yd-* custom properties.
 * Library law 1: every site MUST override these. Never ship the demo palette.
 *
 * Skin variables:
 *   --yd-bg        panel background      --yd-fg       text
 *   --yd-stage-bg  chart background      --yd-muted    secondary text
 *   --yd-zone      guess-area tint       --yd-grid     gridlines
 *   --yd-known     history line          --yd-guess    the visitor's line
 *   --yd-truth     the revealed truth    --yd-diff     guess↔truth shading
 *   --yd-accent    buttons/focus         --yd-accent-fg
 *   --yd-border    borders               --yd-radius   rounding
 *   --yd-font      UI font               --yd-mono     axis numerals
 */

yd-chart {
  display: block;
  font-family: var(--yd-font, system-ui, sans-serif);
  color: var(--yd-fg, #33302b);
}

yd-chart .yd-box {
  background: var(--yd-bg, #faf9f6);
  border: 1px solid var(--yd-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--yd-radius, 10px);
  padding: 1rem;
}

yd-chart .yd-title {
  margin: 0 0 0.25rem;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}
yd-chart .yd-prompt {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--yd-muted, #8a857c);
}

yd-chart .yd-stage { width: 100%; }
yd-chart .yd-canvas {
  display: block;
  width: 100%;
  border-radius: calc(var(--yd-radius, 10px) * 0.6);
  cursor: crosshair;
}

yd-chart .yd-hud {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--yd-muted, #8a857c);
  min-height: 1.2em;
  font-variant-numeric: tabular-nums;
}

yd-chart .yd-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
yd-chart .yd-btn {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45em 1.1em;
  border-radius: calc(var(--yd-radius, 10px) * 0.6);
  border: 1px solid var(--yd-border, rgba(0, 0, 0, 0.12));
  background: var(--yd-stage-bg, #f4f2ee);
  color: inherit;
  cursor: pointer;
}
yd-chart .yd-btn--reveal,
yd-chart .yd-btn--image {
  background: var(--yd-accent, #31597a);
  color: var(--yd-accent-fg, #fff);
  border-color: transparent;
}
yd-chart .yd-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
yd-chart .yd-btn:not(:disabled):hover { filter: brightness(1.06); }
yd-chart .yd-btn:focus-visible {
  outline: 2px solid var(--yd-accent, #31597a);
  outline-offset: 2px;
}
yd-chart .yd-btn--skip {
  background: transparent;
  border-color: transparent;
  color: var(--yd-muted, #8a857c);
  text-decoration: underline;
}

yd-chart .yd-result { margin-top: 0.5rem; }
yd-chart .yd-score {
  margin: 0.4rem 0 0;
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
yd-chart .yd-insight {
  margin: 0.45rem 0 0;
  padding: 0.55em 0.8em;
  font-size: 0.88rem;
  line-height: 1.45;
  background: var(--yd-stage-bg, #f4f2ee);
  border-radius: calc(var(--yd-radius, 10px) * 0.6);
}

/* crawlable fallback: sr-only once enhanced, still in the DOM */
yd-chart.yd-ready .yd-fallback--enhanced {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  yd-chart .yd-btn { transition: none; }
}