/* Geometry kit: geoboard, protractor and transform boards (SVG). Colours from the app tokens, light and dark. */
.gx { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.gx-board { width: 100%; display: flex; justify-content: center; }
.gx-svg { display: block; width: 100%; max-width: 560px; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; border-radius: 14px; outline: none; cursor: crosshair; }
.gx-svg:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--accent); }
.gx.locked .gx-svg { cursor: default; }
.gx-construct[data-mode="move"] .gx-svg { cursor: grab; }
.gx-transform .gx-svg { cursor: grab; }

/* board */
.gx-bg { fill: var(--surface); }
.gx-dot { fill: none; stroke: var(--ink-3); stroke-width: 5.2; stroke-linecap: round; opacity: .55; }
.gx-gl { stroke: var(--line); stroke-width: 1; }
.gx-axis { stroke: var(--ink-3); stroke-width: 1.6; }
.gx-tick { font-size: 12px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.gx-mirror { stroke: var(--berry); stroke-width: 2.5; stroke-dasharray: 9 7; stroke-linecap: round; }
.gx-centre circle { fill: var(--berry); } .gx-centre path { stroke: var(--berry); stroke-width: 2; }
.gx-ghost { fill: var(--ink-3); fill-opacity: .14; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 5 5; stroke-linejoin: round; }
.gx-guide { fill: none; stroke: var(--accent); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 3 5; }
.gx-fill { fill: var(--accent); fill-opacity: .14; }
.gx-seg { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.gx-seg.fixed { stroke: var(--ink-2); }
.gx-seg.rubber { stroke-opacity: .5; stroke-dasharray: 6 6; }
.gx-circ { fill: var(--sky); fill-opacity: .07; stroke: var(--sky); stroke-width: 3.5; }
.gx-circ.rubber { stroke-dasharray: 6 6; }
.gx-radius { stroke: var(--sky); stroke-width: 2; stroke-dasharray: 3 4; }
.gx-pt { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }
.gx-pt.fixed { fill: var(--ink-2); stroke: var(--surface); stroke-width: 2; }
.gx-pt.ghosted { opacity: .55; }
.gx-pen { fill: none; stroke: var(--sun); stroke-width: 3.5; }
.gx-cursor { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 4 4; }
.gx-cursor.held { stroke: var(--sun); stroke-dasharray: none; }
.gx-lab { font-size: 15px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.gx-m { font-size: 13px; font-weight: 650; fill: var(--ink-2); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.gx-m.big { font-size: 22px; fill: var(--ink); }
.gx-ra { fill: none; stroke: var(--ink-2); stroke-width: 1.8; }
.gx-ra.big { stroke-width: 2.4; }
.gx-reveal { fill: none; stroke: var(--good); stroke-width: 3.5; stroke-dasharray: 7 6; stroke-linecap: round; }
.gx-reveal-pt { fill: var(--good); }
.gx-copy { fill: var(--accent); fill-opacity: .22; stroke: var(--accent); stroke-width: 3.5; stroke-linejoin: round; }
.gx-copy.held { fill-opacity: .32; }
.gx-copy-pt { fill: var(--accent); } .gx-copy-pt.ref { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }

/* static pictures */
.vis.gx-pic { width: min(100%, 420px); height: auto; color: var(--ink); }
.vis.gx-pic.small { width: min(100%, 220px); }
.step-vis > .vis.gx-pic { max-height: 300px; }
.fb-vis .vis.gx-pic, .worked .vis.gx-pic { width: min(100%, 360px); }

/* protractor */
.vis.gx-angle { width: 100%; max-width: 460px; height: auto; }
.vis.gx-angle.small { max-width: 240px; }
.gx-prot { fill: var(--sun); fill-opacity: .10; stroke: var(--ink-3); stroke-width: 1.5; }
.gx-ptick { stroke: var(--ink-3); stroke-width: 1.2; }
.gx-pl { font-size: 10px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.gx-pl.outer { fill: var(--ink-3); }
.gx-pc { fill: var(--ink-2); }
.gx-ray { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.gx-ray.mv { stroke: var(--accent); }
.gx-arc { fill: var(--sun); fill-opacity: .28; stroke: var(--warm); stroke-width: 1.5; }
.gx-handle { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.gx-tri { fill: var(--accent); fill-opacity: .12; }
.gx.locked .gx-handle { opacity: .5; }

/* tools and readout */
.gx-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gx-tool { min-width: 48px; min-height: 48px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 600 15px var(--font); cursor: pointer; }
.gx-tool .ic { width: 24px; height: 24px; }
.gx-tool.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.gx-tool:focus-visible, .gx-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gx-tool.act { color: var(--ink-3); }
.gx.locked .gx-tools { opacity: .55; pointer-events: none; }
.gx-read { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 30px; }
.gx-pill { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.gx-pill .k { color: var(--ink-3); font-size: 13px; }
.gx-pill.good { background: var(--good-bg); color: var(--good); }
.gx-val { min-width: 72px; text-align: center; font: 700 22px var(--font); font-variant-numeric: tabular-nums; color: var(--ink); align-self: center; }
.gx-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gx-chip { min-width: 72px; min-height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 650 17px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.gx-chip.sel { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* unit circle and vectors */
.gx-ucircle { fill: var(--accent); fill-opacity: .05; stroke: var(--ink-2); stroke-width: 2; }
.gx-sin { stroke: var(--berry); stroke-width: 3.5; stroke-dasharray: 6 5; }
.gx-cos { stroke: var(--sky); stroke-width: 4.5; }
.gx-mark { fill: var(--sun); stroke: var(--surface); stroke-width: 3; }
.vis.gx-unitpic { max-width: 300px; }
.vis.gx-unitpic.small { max-width: 200px; }
.gx-unitw .gx-svg { max-width: 420px; }
.gx-vec { stroke-width: 4; stroke-linecap: round; }
.gx-vec.given { stroke: var(--ink-2); } .gx-vhead.given { fill: var(--ink-2); }
.gx-vec.mine { stroke: var(--accent); } .gx-vhead.mine { fill: var(--accent); }
.gx-vec.reveal { stroke: var(--good); stroke-dasharray: 7 6; } .gx-vhead.reveal { fill: var(--good); }
.gx-lab.vl { font-size: 14px; font-style: italic; }
.gx-markb { min-width: 88px; }