/* Figure: king − man + woman ≈ queen — vector parallelogram.
   Behaviour lives in static/js/king-queen-parallelogram.js;
   markup is <figure id="king-queen-figure"> in src/index.html. */

/* Colours come from the shared theme (static/js/theme.js), which also handles
   the light/dark switch; the literals here are only fallbacks for if it fails
   to load. */
.kq {
  --kq-surface: var(--vx-surface, #fcfcfb);
  --kq-ink: var(--vx-ink, #16160f);
  --kq-ink-muted: var(--vx-muted, #6b6a63);
  --kq-rule: var(--vx-rule, #d8d7cf);
  /* The two semantic directions, as the palette's own pastels. They are light —
     3.03:1 and 1.42:1 against the surface — so the shafts below are drawn heavier
     than the 2px they used to be, and each arrow keeps its text label, which is
     what actually carries the distinction. */
  --kq-gender: var(--vx-pastel-cool, #8990ba); /* the "woman − man" direction */
  --kq-royalty: var(--vx-pastel-warm, #e3d69e); /* the "king − man" direction */
  margin: 2rem 0 2.5rem;
}

.kq-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--kq-surface);
  overflow: visible;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  touch-action: none;
}

/* ---- vectors ---- */
/* Heavier than the 2px this used to be: the pastel direction colours sit at
   1.4–3.0:1 against the surface, and area is what makes a light colour read. */
.kq-shaft {
  stroke-width: 3.25;
  stroke-linecap: butt;
  fill: none;
}
.kq-head {
  stroke-width: 1;
}
.kq-gender .kq-shaft {
  stroke: var(--kq-gender);
}
.kq-gender .kq-head {
  stroke: var(--kq-gender);
  fill: var(--kq-gender);
}
.kq-royalty .kq-shaft {
  stroke: var(--kq-royalty);
}
.kq-royalty .kq-head {
  stroke: var(--kq-royalty);
  fill: var(--kq-royalty);
}
.kq-arrow-label {
  font-size: 13px;
  font-weight: 600;
  fill: var(--kq-ink);
  paint-order: stroke;
  stroke: var(--kq-surface);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* ---- parallelogram + result ---- */
.kq-parallelogram {
  fill: var(--kq-ink);
  fill-opacity: 0.045;
  stroke: none;
}
.kq-result-ring {
  fill: none;
  stroke: var(--kq-ink);
  stroke-width: 2;
}
.kq-result-label {
  font-size: 13px;
  font-weight: 700;
  fill: var(--kq-ink);
  paint-order: stroke;
  stroke: var(--kq-surface);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.kq-approx-line {
  stroke: var(--kq-ink-muted);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
.kq-approx-label {
  font-size: 16px;
  fill: var(--kq-ink-muted);
}

/* ---- words ---- */
.kq-word {
  cursor: grab;
}
.kq-word.kq-dragging {
  cursor: grabbing;
}
.kq-hit {
  fill: transparent;
}
.kq-point {
  fill: var(--kq-ink);
  stroke: var(--kq-surface);
  stroke-width: 2;
}
.kq-word-queen .kq-point {
  fill: var(--kq-surface);
  stroke: var(--kq-ink);
}
.kq-word:hover .kq-point,
.kq-word.kq-dragging .kq-point {
  r: 7;
}
.kq-word-label {
  font-size: 15px;
  font-weight: 700;
  fill: var(--kq-ink);
  paint-order: stroke;
  stroke: var(--kq-surface);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

/* ---- controls ---- */
.kq-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.kq-btn {
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  color: var(--kq-ink);
  background: transparent;
  border: 1px solid var(--kq-rule);
  border-radius: 4px;
  cursor: pointer;
}
.kq-btn:hover:not([disabled]) {
  border-color: var(--kq-ink-muted);
}
.kq-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}
.kq-btn-play {
  min-width: 44px;
}
.kq-dots {
  display: flex;
  gap: 6px;
  margin-left: 4px;
}
.kq-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--kq-ink-muted);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.kq-dot-active {
  background: var(--kq-ink);
  border-color: var(--kq-ink);
}
.kq-hint {
  margin-left: auto;
  font-size: 12px;
  font-style: italic;
  color: var(--kq-ink-muted);
}
.kq-caption {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kq-ink-muted);
  min-height: 3.2em;
}
.kq-caption b {
  font-weight: 700;
  color: var(--kq-ink);
}