/* SPDX-FileCopyrightText: 2026 Kartoza
 * SPDX-License-Identifier: MIT
 *
 * The drawings.
 *
 * Two rules govern everything here.
 *
 * First, the colour code is fixed: the half of the drawing that belongs to the
 * horizontal plane is tinted like the floor, the half that belongs to the
 * frontal plane like the wall, and those two hues are never borrowed for
 * anything else. The same code appears in the notation printed in the prose.
 *
 * Second, colour never carries meaning alone. A horizontal projection is a
 * hollow-centred dot and a frontal projection is a solid one; hidden edges are
 * dashed; every projection is labelled with its subscript. The drawing stays
 * readable in greyscale, and to a colour-blind reader.
 */

.monge { position: relative; }
.monge__svg { user-select: none; }

/* --- the two half-planes -------------------------------------------------- */

.surface { stroke: none; }
.surface--nu { fill: var(--floor-plane); }
.surface--phi { fill: var(--wall-plane); }
/* The bissectors are auxiliary geometry, not objects of study, so they get
   their own muted hues rather than borrowing the floor, wall or feedback
   colours, and they sit well back in the picture. */
.surface--b13 { fill: var(--bissector-odd); }
.surface--b24 { fill: var(--bissector-even); }
.plane-surface { fill: currentColor; stroke: currentColor; stroke-width: 1; }

.grid-line { stroke: var(--rule); stroke-width: 0.5; opacity: 0.55; }

/* --- the ground line, the one line every drawing is built on -------------- */

.ground-line { stroke: var(--ink); stroke-width: 1.5; }
.origin-dot { fill: var(--ink); }
.axis-label {
  fill: var(--ink-muted);
  font-family: var(--font-mark);
  font-size: 13px;
  font-style: italic;
}
.dihedral-label {
  fill: var(--ink-faint);
  font-family: var(--font-mark);
  font-size: 15px;
  font-weight: 600;
}

/* --- construction -------------------------------------------------------- */

.recall-line { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.ray { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 4; }

/* --- emphasis sets the colour of an object; `currentColor` does the rest -- */

.emph--primary { color: var(--ink); }
.emph--secondary { color: var(--ink-muted); }
.emph--accent { color: var(--accent); }
.emph--muted { color: var(--ink-faint); }
.emph--construction { color: var(--ink-faint); }
.emph--correct { color: var(--yes); }
.emph--wrong { color: var(--almost); }
.emph--ghost { color: var(--yes); }

/* --- points -------------------------------------------------------------- */

.dot { stroke: var(--paper-raised); stroke-width: 1.5; fill: currentColor; }
/* A horizontal projection is hollow-centred, a frontal one solid: the two are
   told apart without relying on colour or on position. */
.dot--h { fill: var(--paper-raised); stroke: currentColor; stroke-width: 3; }
.dot--f { fill: currentColor; stroke: var(--paper-raised); stroke-width: 1.5; }
.dot--space { fill: currentColor; stroke: var(--paper-raised); stroke-width: 2; }
.dot--trace { fill: var(--paper-raised); stroke: var(--ink); stroke-width: 2.5; }
.dot--collapsed { fill: currentColor; stroke: var(--paper-raised); stroke-width: 2; }
.emph--ghost .dot, .dot.emph--ghost { opacity: 0.55; stroke-dasharray: 2 2; }

/* --- lines, figures, solids ---------------------------------------------- */

.stroke { stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.stroke--space { stroke-width: 2.5; }
.stroke.is-dashed { stroke-dasharray: 7 5; }

.plane-trace { stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; }

.poly { stroke: currentColor; stroke-width: 2; fill: none; stroke-linejoin: round; }
.poly.is-filled { fill: currentColor; fill-opacity: 0.12; }

.edge { stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; }
/* Hidden edges are dashed, which is the universal drafting convention. */
.edge.is-hidden-edge { stroke-dasharray: 5 4; stroke-width: 1.25; }

.measure { stroke: currentColor; stroke-width: 1.25; fill: none; }
.marker--plain { fill: var(--ink-muted); }
.marker--accent { fill: var(--accent); }
.measure-label {
  fill: var(--ink-muted);
  font-family: var(--font-mark);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* --- labels -------------------------------------------------------------- */

.label {
  fill: currentColor;
  font-family: var(--font-mark);
  font-size: 14px;
  font-weight: 600;
  paint-order: stroke fill;
  stroke: var(--paper-raised);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.label.note { font-weight: 400; font-size: 12.5px; }

/* --- interaction --------------------------------------------------------- */

.handle { fill: transparent; stroke: none; cursor: grab; }
.handle--pick { cursor: pointer; }
.handle.is-dragging { cursor: grabbing; }
.handle:hover { fill: var(--ink); fill-opacity: 0.07; }
.handle:focus-visible {
  outline: none;
  fill: var(--ink);
  fill-opacity: 0.12;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 3 3;
}

@media (prefers-reduced-motion: no-preference) {
  .dot, .stroke, .plane-trace, .poly { transition: opacity var(--motion-fast) linear; }
}