/* Linear-algebra demos — shared styles. Layers on the global /style.css.
   Inline SVG + vanilla JS, mounted from elements with data-la="matrix|cross|complex". */

:root {
  --la1: #ff8a3d;      /* orange — first object (î / z₁ / u) */
  --la2: #3b6fe0;      /* blue   — second object (ĵ / z₂ / v) */
  --lares: #2fbf71;    /* green  — the result (image / product / u×v) */
  --lak: #b06fe0;      /* purple — third axis / midpoint accents */
}

.edu-wide { max-width: 820px; }
.crumbs { font-size: 13px; color: var(--muted); margin: -6px 0 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { opacity: .5; margin: 0 7px; }

.la-demo { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px 18px 20px; margin: 18px 0 26px; }
.la-demo h3 { margin: 0 0 4px; font-size: 18px; }
.la-demo .demo-hint { color: var(--muted); font-size: 14px; margin: 0 0 12px; }

.la-stage { display: flex; justify-content: center; }
svg.la-svg { width: 100%; height: auto; max-width: 560px; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }

.la-axis { stroke: rgba(255,255,255,.28); stroke-width: 1.5; }
.la-grid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.la-tick { fill: var(--muted); font-size: 11px; font-family: inherit; }

/* transformed grid (matrix) */
.la-tgrid { stroke: rgba(47,191,113,.22); stroke-width: 1; }
.la-tgrid.major { stroke: rgba(47,191,113,.5); stroke-width: 1.5; }
.la-fill { fill: rgba(47,191,113,.16); stroke: var(--lares); stroke-width: 1.5; }
.la-fill.flip { fill: rgba(176,111,224,.18); stroke: var(--lak); }
.la-fill.zero { fill: none; }

/* arrows (shared with cross/complex) */
.la-shaft { stroke-width: 4; stroke-linecap: round; }
.la-shaft.a { stroke: var(--la1); } .la-shaft.b { stroke: var(--la2); } .la-shaft.r { stroke: var(--lares); } .la-shaft.k { stroke: var(--lak); }
.la-head.a { fill: var(--la1); } .la-head.b { fill: var(--la2); } .la-head.r { fill: var(--lares); } .la-head.k { fill: var(--lak); }
.la-shaft.dim { opacity: .32; } .la-head.dim { opacity: .32; }
.la-lbl { font-size: 15px; font-weight: 800; font-family: inherit; }
.la-lbl.a { fill: var(--la1); } .la-lbl.b { fill: var(--la2); } .la-lbl.r { fill: var(--lares); } .la-lbl.k { fill: var(--lak); }
.la-lbl.mut { fill: var(--muted); font-size: 13px; font-weight: 600; }

.la-arc { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.5; }
.la-arc.a { stroke: rgba(255,138,61,.7); } .la-arc.r { stroke: rgba(47,191,113,.7); }
.la-guide { stroke: rgba(255,255,255,.5); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .8; }
.la-guide.a { stroke: var(--la1); } .la-guide.b { stroke: var(--la2); }
.la-pgram { fill: rgba(47,191,113,.14); stroke: var(--lares); stroke-width: 1.2; stroke-dasharray: 5 4; }

svg.la-svg.spin { cursor: grab; } svg.la-svg.spin:active { cursor: grabbing; }
.la-handle { cursor: grab; } .la-handle:active { cursor: grabbing; }
.la-handle circle.hit { fill: transparent; }
.la-handle circle.dot { stroke: var(--bg-bot); stroke-width: 2.5; }
.la-handle circle.dot.a { fill: var(--la1); }
.la-handle circle.dot.b { fill: var(--la2); }
.la-handle circle.dot.r { fill: var(--lares); }

/* readout */
.la-read { margin: 16px 0 4px; }
.la-eq { text-align: center; font-size: 18px; line-height: 1.7; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); overflow-x: auto; }
.la-eq2 { text-align: center; font-size: 15px; margin-top: 8px; color: var(--ink); }
.la-read .mut { color: var(--muted); font-size: .85em; }
.la-read .c1 { color: var(--la1); } .la-read .c2 { color: var(--la2); } .la-read .cr { color: var(--lares); } .la-read .ck { color: var(--lak); }

.la-flag { text-align: center; font-size: 14px; font-weight: 700; margin: 10px 0 0; min-height: 1.4em; color: var(--muted); opacity: 0; transition: opacity .15s; }
.la-flag.show { opacity: 1; }
.la-flag.good { color: var(--lares); }
.la-flag.warn { color: var(--lak); }

/* the 2×2 matrix box */
.la-matrix { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; margin: 0 .2em; }
.la-matrix .brk { font-size: 2.4em; font-weight: 200; line-height: .8; color: var(--muted); }
.la-matrix .cells { display: grid; grid-template-columns: auto auto; gap: 2px 14px; padding: 0 4px; }
.la-matrix .cells span { text-align: center; min-width: 1.4em; }
.la-matrix .cells .col1 { color: var(--la1); } .la-matrix .cells .col2 { color: var(--la2); }

/* controls */
.la-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 14px; }
.la-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.labtn { appearance: none; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 650; padding: 9px 13px; border-radius: 10px; transition: border-color .12s, background .12s, transform .1s; }
.labtn:hover { border-color: var(--accent); transform: translateY(-1px); }
.labtn.on { border-color: var(--accent); background: rgba(255,255,255,.06); }
.la-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.la-seg button { appearance: none; cursor: pointer; border: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 650; padding: 9px 15px; transition: background .12s, color .12s; }
.la-seg button.on { background: var(--accent); color: #fff; }
.toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink); cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); }

/* slider rows */
.la-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin-top: 14px; }
@media (max-width: 540px) { .la-sliders { grid-template-columns: 1fr; } }
.la-slider { display: flex; align-items: center; gap: 10px; }
.la-slider label { font-size: 13px; font-weight: 700; min-width: 2.4em; font-family: inherit; }
.la-slider .val { font-size: 13px; color: var(--muted); min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
.la-slider input[type=range] { flex: 1; min-width: 0; width: 0; accent-color: var(--accent); }

.formula { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin: 14px 0; font-size: 17px; line-height: 1.9; overflow-x: auto; }
.formula b { color: var(--accent); }

.usegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
@media (max-width: 540px) { .usegrid { grid-template-columns: 1fr; } }
.usebox { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,.03); }
.usebox h4 { margin: 0 0 6px; font-size: 15px; }
.usebox.a { border-color: rgba(255,138,61,.4); }
.usebox.r { border-color: rgba(47,191,113,.4); }