/* Vectors interactive demo — shared styles. Layers on the global /style.css.
   Inline SVG + vanilla JS, mounted from elements with data-vec="...". */

:root {
  --vu: #ff8a3d;      /* orange — vector u */
  --vv: #3b6fe0;      /* blue   — vector v */
  --vproj: #2fbf71;   /* green  — the projection (shadow) */
}

.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; }

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

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

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

.v-shaft { stroke-width: 4; stroke-linecap: round; }
.v-shaft.u { stroke: var(--vu); } .v-shaft.v { stroke: var(--vv); }
.v-head.u { fill: var(--vu); } .v-head.v { fill: var(--vv); }
.v-lbl { font-size: 16px; font-weight: 800; font-family: inherit; }
.v-lbl.u { fill: var(--vu); } .v-lbl.v { fill: var(--vv); }
.v-lbl.th { fill: var(--ink); font-size: 14px; }

.v-arc { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.v-proj { stroke: var(--vproj); stroke-width: 5; stroke-linecap: round; opacity: .95; }
.v-perp { stroke: var(--vproj); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .8; }
.v-comp { stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .7; }
.v-comp.u { stroke: var(--vu); } .v-comp.v { stroke: var(--vv); }

.v-handle { cursor: grab; } .v-handle:active { cursor: grabbing; }
.v-handle circle.hit { fill: transparent; }
.v-handle circle.dot { stroke: var(--bg-bot); stroke-width: 2.5; }
.v-handle circle.dot.u { fill: var(--vu); }
.v-handle circle.dot.v { fill: var(--vv); }

/* readout */
.vec-read { margin: 16px 0 4px; }
.vec-eq { text-align: center; font-size: 19px; line-height: 1.7; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); overflow-x: auto; }
.vec-eq2 { text-align: center; font-size: 15px; margin-top: 8px; color: var(--ink); }
.vec-read .mut { color: var(--muted); font-size: .85em; }
.vec-read .du { color: var(--vu); } .vec-read .dth { color: var(--vv); } .vec-read .dpj { color: var(--vproj); }

.vec-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; }
.vec-flag.show { opacity: 1; }
.vec-flag.perp { color: var(--vproj); }

/* controls */
.vec-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 14px; }
.vbtn { 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; }
.vbtn:hover { border-color: var(--accent); transform: translateY(-1px); }
.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); }

.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); }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; line-height: 1.15; margin: 0 .16em; font-size: .8em; }
.frac > .num { padding: 0 .5em .06em; } .frac > .den { padding: .06em .5em 0; border-top: 2px solid currentColor; }

.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.u { border-color: rgba(255,138,61,.4); }
.usebox.g { border-color: rgba(47,191,113,.4); }