/* Učbenik in interaktivne demonstracije. Barve samo iz spremenljivk v :root. */

.textbook { --demo-a: #e8833a; --demo-b: #2f9e8f; --demo-c: #7b61d1; }
.dark .textbook { --demo-a: #f2a061; --demo-b: #4cc3b2; --demo-c: #a58ff0; }

.textbook svg:not(.demo-svg) { width: 1.1em; height: 1.1em; vertical-align: -0.15em; margin-right: 6px; }
.tb-head h1 { display: flex; align-items: center; }
.tb-search input {
  width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 1rem;
}
.tb-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.tb-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 18px; }

.tb-book { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tb-book h2 { margin: 2px 0; }
.tb-book p { margin: 0; }
.tb-book .eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.tb-book-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-jump { padding: 8px 0; background: var(--bg, var(--surface)); }
.tb-mine { margin-inline-start: 4px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 800; }
.tb-jump .active .tb-mine { background: var(--surface); }
.tb-part { scroll-margin-top: 130px; }
.tb-part-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 22px 0 8px; }
.tb-part-head h2 { margin: 0; }
.tb-unit h2 { display: flex; align-items: center; gap: 10px; }
.tb-num {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text, #fff); font-size: 0.85rem; flex: none;
}
.tb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tb-topic {
  width: 100%; text-align: start; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 10px;
  border: 0 !important; background: none !important; border-radius: 10px !important; padding: 9px 10px !important; cursor: pointer;
}
.tb-topic:hover { background: var(--surface-2) !important; }
.tb-topic.pending .tb-name { color: var(--muted); }
.tb-name { font-weight: 600; flex: 1 1 200px; }
.tb-sub, .tb-snip { flex-basis: 100%; font-size: 0.85rem; color: var(--muted); }
.tb-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.tb-badge { font-size: 0.72rem; border-radius: 99px; padding: 1px 8px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }
/* besedilo značk pomešano z barvo besedila, da ima na svetlem ozadju kontrast vsaj 4,5 : 1 (oranžna sama 2,3 : 1) */
.tb-badge.demo { background: color-mix(in srgb, var(--demo-a) 18%, transparent); color: color-mix(in srgb, var(--demo-a) 58%, var(--text)); }
.tb-badge.vaje { background: color-mix(in srgb, var(--ok) 16%, transparent); color: color-mix(in srgb, var(--ok) 72%, var(--text)); }

/* PDF in zaklenjen interaktivni del */
.tb-pdf { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.tb-pdf:hover { text-decoration: underline; }
/* Na dotik je povezava visoka le 23 px: površino za dotik povečamo na 44 px, videz ostane enak. */
@media (hover: none) and (pointer: coarse) { .tb-pdf { padding-block: 11px; margin-block: -11px; } }
.tb-locked { border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.tb-checks ol { padding-inline-start: 1.3em; }
.tb-checks > ol > li { margin-bottom: 12px; }
.tb-checks details { background: var(--surface-2); border-radius: 8px; padding: 4px 10px; margin-top: 4px; }

/* lekcija */
.tb-crumb { margin: 2px 0 2px; }
.tb-title { font-size: 1.7rem; margin-bottom: 6px; }
.tb-goals { margin-top: 0; }
.tb-draft { background: color-mix(in srgb, #e0a100 14%, transparent); border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; }
.tb-section .explanation { line-height: 1.65; }
.tb-section .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.tb-why { border-inline-start: 4px solid var(--accent); }
.tb-summary { border-inline-start: 4px solid var(--ok); }
.tb-mistakes { border-inline-start: 4px solid var(--danger); }
/* Vmesno vprašanje »Premisli« v razlagi (:::premisli) */
.tb-think { margin: 12px 0; border-inline-start: 4px solid var(--gold, #e0a100); background: var(--surface-2); border-radius: 0; border-start-end-radius: 10px; border-end-end-radius: 10px; padding: 4px 14px 8px; }
.tb-think-label { margin: 6px 0 0; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.tb-think > details > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 4px 0; }
.tb-formula { margin: 8px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); padding: 0 12px; }
.tb-formula > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 8px 0; list-style: none; }
.tb-formula > summary::-webkit-details-marker { display: none; }
.tb-formula > summary::before { content: "+ "; }
.tb-formula[open] > summary::before { content: "− "; }
.tb-formula[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.tb-formula p { margin: 6px 0; }
.tb-alt { margin-top: 12px; }
.tb-alt-tabs { flex-wrap: wrap; margin: 12px 0 8px; }
.tb-alt-body { background: var(--surface-2); border-radius: 12px; padding: 4px 14px; }
.tb-checks .tb-check { padding: 10px 0; border-top: 1px solid var(--border); }
.tb-checks .tb-check:first-of-type { border-top: 0; }
.tb-q p { margin: 0 0 8px; font-weight: 600; }
.tb-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-opt p { margin: 0; }
.tb-opt .katex { pointer-events: none; }
.tb-opt.ok { border-color: var(--ok) !important; background: color-mix(in srgb, var(--ok) 15%, transparent) !important; }
.tb-opt.bad { border-color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 12%, transparent) !important; }
.tb-checks .tb-why { margin-top: 8px; font-weight: 400; }
.tb-checks .tb-why p { display: inline; }
.tb-nav { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* Lekcija po korakih */
.tb-mode-btn { margin: 0 0 4px; font-size: 0.9rem; }
.tb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.tb-tools .tb-mode-btn { margin: 0; padding-inline: 4px; }
.tb-gradiva { display: contents; }
.tb-gr-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; min-height: 0; }
.tb-gr-btn[aria-pressed="true"] { text-decoration: underline; }
.tb-gr-msg { flex-basis: 100%; margin: 4px 0 0; font-size: 0.9rem; }
/* Na dotik: vrstice orodij so cele 40 px visoke (brez negativnega roba, da se gumbi v več vrsticah ne prekrivajo). */
@media (hover: none) and (pointer: coarse) { .tb-tools { row-gap: 0; } .tb-tools .tb-pdf { min-height: 40px; padding-block: 0; margin-block: 0; } }
.tb-progress { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 4px 0 12px; scroll-margin-top: 80px; }
.tb-progress > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s ease; }
.tb-stepper { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 12px; padding: 10px 0; background: var(--bg); border-top: 1px solid var(--border); box-shadow: 0 64px 0 0 var(--bg); }
.tb-stepper button { min-height: 44px; }
.tb-stepper button[hidden] { display: none; }
.tb-step-count { color: var(--muted); font-size: 0.9rem; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; flex: 1; }
@media (prefers-reduced-motion: reduce) { .tb-progress > span { transition: none; } }

/* demonstracije */
.demo-stage { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.demo-stage.two .demo-svg:first-child { flex: 2 1 280px; }
.demo-stage.two .demo-svg.small { flex: 1 1 180px; max-width: 240px; }
.demo-svg { width: 100%; max-width: 420px; height: auto; touch-action: manipulation; }
.demo-controls { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 6px; }
.demo-slider { display: grid; grid-template-columns: 7.5em 1fr 5.5em; align-items: center; gap: 10px; font-weight: 600; }
.demo-slider input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; }
.demo-slider output { font-variant-numeric: tabular-nums; text-align: right; }
.demo-slider .dd { grid-column: 2 / 4; }
.demo-slider .dd-btn { min-height: 40px; font-weight: 600; }
.demo-check { display: flex; gap: 8px; align-items: center; font-size: 0.92rem; }
.demo-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-readout { margin-top: 6px; }
.demo-readout ul { padding-left: 1.2em; }
.demo-eq { font-size: 1.15rem; margin: 6px 0; overflow-x: auto; }
.demo-try { background: var(--surface-2); border-radius: 10px; padding: 8px 12px; font-size: 0.92rem; }
.demo-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 10px 0; }
.demo-val { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0; }
.demo-val span { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.demo-val b { font-size: 1.2rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 520px) { .demo-values { grid-template-columns: 1fr 1fr; } }
/* Osnovni videz tabele je skupen (style.css, »tabele«); tu samo pomik vstran na ozkem zaslonu. */
.demo-table { display: block; width: max-content; max-width: 100%; overflow-x: auto; }
.demo-table :is(th, td) { white-space: nowrap; }
.demo-table.atoms tr.ok td:last-child { color: var(--ok); font-weight: 700; }
.demo-table.atoms tr.bad td:last-child { color: var(--danger); font-weight: 700; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px !important; padding: 3px 10px !important; font-size: 0.82rem; cursor: pointer; }
.chip-btn i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chips .chip-btn { display: inline-flex !important; border: 1px solid var(--accent) !important; color: var(--accent); background: none !important; }

.demo-svg .grid { stroke: var(--border); stroke-width: 1; }
.demo-svg .axis { stroke: var(--text); stroke-width: 1.6; fill: none; }
.demo-svg .fill-text { fill: var(--text); }
.demo-svg .tick { fill: var(--muted); font-size: 11px; }
.demo-svg .axis-label { fill: var(--text); font-size: 14px; font-style: italic; font-weight: 700; }
.demo-svg .graph-line { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.demo-svg .slope-tri { fill: none; stroke: var(--demo-a); stroke-width: 2; stroke-dasharray: 5 3; }
.demo-svg .slope-label { fill: var(--demo-a); font-size: 12px; font-weight: 700; }
.demo-svg .pt { stroke: var(--surface); stroke-width: 2; }
.demo-svg .pt-n { fill: var(--demo-a); }
.demo-svg .pt-zero { fill: var(--demo-b); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: 0; }
.dot-n, .dot-a { background: var(--demo-a); }
.dot-zero, .dot-b { background: var(--demo-b); }
.dot-c { background: var(--demo-c); }

.demo-svg .sq { stroke: var(--text); stroke-width: 1.5; }
.demo-svg .sq-a { fill: color-mix(in srgb, var(--demo-a) 35%, transparent); }
.demo-svg .sq-b { fill: color-mix(in srgb, var(--demo-b) 35%, transparent); }
.demo-svg .sq-c { fill: color-mix(in srgb, var(--demo-c) 30%, transparent); }
.demo-svg .unit-grid { stroke: var(--text); stroke-opacity: 0.25; stroke-width: 1; }
.demo-svg .tri { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.demo-svg .right-angle { fill: none; stroke: var(--text); stroke-width: 1.5; }
.demo-svg .sq-label { font-size: 13px; font-weight: 700; fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }

.demo-svg .pie { fill: var(--surface-2); stroke: var(--text); stroke-width: 1.5; }
.demo-svg .pie.on { fill: var(--demo-a); }
.demo-svg .nl-range { stroke: var(--demo-a); stroke-width: 5; stroke-linecap: round; }

.demo-svg .wire { fill: none; stroke: var(--muted); stroke-width: 4; stroke-linejoin: round; }
.demo-svg .bg-cut { fill: var(--surface); }
.demo-svg .batt-long { stroke: var(--text); stroke-width: 3; }
.demo-svg .batt-short { stroke: var(--text); stroke-width: 6; }
.demo-svg .resistor { fill: var(--surface); stroke: var(--demo-a); }
.demo-svg .meter { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.demo-svg .meter-label { font-weight: 800; fill: var(--text); font-size: 14px; }
.demo-svg .circ-label { fill: var(--text); font-size: 12px; font-weight: 700; }
.demo-svg .heat { fill: #ff7a2f; filter: blur(5px); }
.demo-svg .electron { fill: var(--accent); }

.demo-svg .ground { stroke: var(--text); stroke-width: 3; }
.demo-svg .ball { fill: var(--demo-a); stroke: var(--text); stroke-width: 1.5; }
.demo-svg .ghost { fill: var(--demo-a); opacity: 0.22; }
.demo-svg .vel { stroke: var(--demo-b); stroke-width: 3; }
.demo-svg .guide { stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 4 4; }
.demo-svg .string { stroke: var(--text); stroke-width: 2; }

.demo-svg .box { fill: var(--surface-2); stroke: var(--text); stroke-width: 2; }
.demo-svg .piston { fill: var(--muted); }
.demo-svg .particle { stroke: none; }

.demo-svg .beaker { fill: none; stroke: var(--text); stroke-width: 2; }

.eq-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; font-size: 1.25rem; margin: 10px 0; }
.eq-term { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.eq-term button { padding: 0 10px !important; margin: 0 !important; line-height: 1.4; font-size: 1rem; }
.eq-formula { font-weight: 700; white-space: nowrap; }
.eq-coef { color: var(--accent); margin-right: 2px; }
.eq-arrow, .eq-plus { color: var(--muted); font-weight: 700; }
.eq-mols { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.eq-group { display: flex; flex-wrap: wrap; gap: 6px; max-width: 160px; padding: 6px; border-radius: 10px; background: var(--surface-2); }
.mol { display: inline-flex; flex-wrap: wrap; max-width: 44px; gap: 1px; }
.mol i, .atom { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 1px solid rgb(0 0 0 / 0.3); }

@media (max-width: 520px) {
  .demo-slider { grid-template-columns: 1fr 4.8em; }
  .demo-slider .demo-slider-label { grid-column: 1 / 3; font-size: 0.88rem; }
  .demo-slider .dd { grid-column: 1 / 3; }
  .tb-title { font-size: 1.4rem; }
}

/* Označi besedilo in vprašaj tutorja */
.tb-sel-ask { position: absolute; z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-text, #fff); font: inherit; font-weight: 600; font-size: 0.95rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); cursor: pointer; }
.tb-sel-ask[hidden] { display: none; }
.tb-sel-ask .i { width: 18px; height: 18px; }
.tb-sel-hint { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; margin: 4px 0 10px; }
.tb-sel-hint .i { width: 16px; height: 16px; flex: none; }

/* ---------- lastne simulacije (public/sim) ---------- */
.demo { --demo-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.demo-canvas { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; border-radius: 12px; background: var(--surface-2); touch-action: none; }
.demo-svg { max-width: 460px; user-select: none; -webkit-user-select: none; }
.demo-svg text { font-family: inherit; }
.demo-seg-wrap { width: 100%; display: flex; justify-content: center; margin-bottom: 6px; }
.demo-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 22px; background: var(--surface-2); }
.demo .demo-seg .seg-btn { min-height: 36px; padding: 5px 14px; border: 0; border-radius: 999px; background: none; font-weight: 800; color: var(--muted); }
.demo .demo-seg .seg-btn.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.demo-controls > .demo-seg, .demo-controls > .demo-buttons { align-self: flex-start; }
.demo-readout p { margin: 6px 0; }
.demo-readout .ok-text { color: var(--ok); }
.demo-try b { color: var(--accent); }

/* barve likov */
.demo-svg .fill-a { fill: var(--demo-a); }
.demo-svg .fill-b { fill: var(--demo-b); }
.demo-svg .fill-c { fill: var(--demo-c); }
.demo-svg .fill-accent { fill: var(--accent); }
.demo-svg .fill-muted { fill: var(--muted); }
.demo-svg .fill-ok { fill: var(--ok); }
.demo-svg .fill-danger { fill: var(--danger); }
.demo-svg .fill-soft { fill: var(--demo-soft); }
.demo-svg .fill-danger-soft { fill: color-mix(in srgb, var(--danger) 30%, var(--surface)); }
.demo-svg .stroke-a { stroke: var(--demo-a); }
.demo-svg .stroke-b { stroke: var(--demo-b); }
.demo-svg .stroke-c { stroke: var(--demo-c); }
.demo-svg .stroke-text { stroke: var(--text); }
.demo-svg .stroke-muted { stroke: var(--muted); }
.demo-svg .stroke-accent { stroke: var(--accent); }
.demo-svg .stroke-danger { stroke: var(--danger); }
.demo-svg .stroke-ok { stroke: var(--ok); }
.demo-svg .vec { stroke-linecap: round; fill: none; }
.demo-svg .lbl { fill: var(--text); font-size: 13px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.demo-svg .lbl.small { font-size: 11px; }
.demo-svg .lbl.big { font-size: 20px; }
.demo-svg .lbl.inv { fill: #fff; stroke: none; font-size: 10px; }
.demo-svg .tick.small { font-size: 9px; }
.demo-svg .tick.b { font-weight: 700; fill: var(--text); }
.demo-svg .pt-lbl { fill: var(--text); font-size: 13px; font-weight: 800; font-style: italic; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.demo-svg .handle { cursor: grab; touch-action: none; }
.demo-svg .handle:active { cursor: grabbing; }
.demo-svg .handle .hit { fill: transparent; }
.demo-svg .handle .pt { stroke: var(--surface); stroke-width: 2.5; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.3)); }
.demo-svg .drag { touch-action: none; }
.demo-svg .pt.open { fill: var(--surface); stroke-width: 2.5; }
.demo-svg .guide.solid { stroke-dasharray: none; stroke: var(--muted); }
.demo-svg .guide.thin, .demo-svg .axis.thin { stroke-width: 0.8; }
.demo-svg .shape { stroke: var(--text); stroke-width: 1.6; fill-opacity: 0.35; stroke-linejoin: round; }
.demo-svg .shape.dashed { fill: none; stroke-dasharray: 5 4; stroke: var(--muted); }
.demo-svg .shape.ghosty { fill-opacity: 0.25; stroke-dasharray: 4 3; }
.demo-svg .angle-fill { fill-opacity: 0.45; stroke: var(--surface); stroke-width: 1; }
.demo-svg .tile { stroke: none; }
.demo-svg .tile.empty, .demo-svg .bar.empty { fill: var(--surface-2); }
.demo-svg .bar { stroke: var(--surface); stroke-width: 1; }
.demo-svg .bar-frame { fill: none; stroke: var(--text); stroke-width: 1.5; }
.demo-svg .brace { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.demo-svg .perim { fill: none; stroke: var(--demo-c); stroke-width: 3.5; stroke-linejoin: round; }
.demo-svg .area-fill { fill: var(--demo-a); fill-opacity: 0.2; }
.demo-svg .node { fill: var(--surface); stroke: var(--text); stroke-width: 1.5; }
.demo-svg .node.prime { fill: var(--demo-b); fill-opacity: 0.85; }
.demo-svg .node-lbl { fill: var(--text); font-size: 11px; font-weight: 800; }
.demo-svg .venn { fill-opacity: 0.16; stroke: var(--text); stroke-width: 1.5; }
.demo-svg .venn-title { fill: var(--text); font-size: 15px; font-weight: 800; }
.demo-svg .venn-num { fill: var(--text); font-size: 13px; font-weight: 600; }
.demo-svg .venn-num.on { fill: #fff; font-weight: 800; }
.demo-svg .venn-hit { fill: var(--accent); }
.demo-svg .set { fill: none; stroke: var(--border); stroke-width: 1.5; }
.demo-svg .set.on { fill: var(--accent); fill-opacity: 0.1; stroke: var(--accent); }
.demo-svg .jump { fill: none; stroke-width: 2.5; stroke-dasharray: 400; stroke-dashoffset: 400; animation: demo-draw 0.6s ease-out forwards; }
@keyframes demo-draw { to { stroke-dashoffset: 0; } }
.demo-svg .ray { stroke-width: 5; stroke-linecap: round; stroke-opacity: 0.85; }
.demo-svg .ray.a { stroke: var(--demo-a); } .demo-svg .ray.b { stroke: var(--demo-b); } .demo-svg .ray.c { stroke: var(--demo-c); }
.demo-svg .cup { stroke: var(--text); stroke-width: 1.2; fill-opacity: 0.8; }
.demo-svg .step { stroke: var(--border); }
.demo-svg .weight.x { fill: var(--demo-c); }
.demo-svg .weight.one { fill: var(--demo-a); }
.demo-svg .weight.neg { fill: var(--danger); }
.demo-svg .beam { stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
.demo-svg .beam-post { stroke: var(--muted); stroke-width: 5; }
.demo-svg .pan { fill: var(--surface-2); stroke: var(--text); stroke-width: 1.5; }
.demo-svg .algtile { stroke: var(--text); stroke-width: 1.2; }
.demo-svg .algtile.pos { fill: color-mix(in srgb, var(--demo-c) 45%, var(--surface)); }
.demo-svg .algtile.x { fill: color-mix(in srgb, var(--demo-b) 45%, var(--surface)); }
.demo-svg .algtile.one { fill: color-mix(in srgb, var(--demo-a) 55%, var(--surface)); }
.demo-svg .algtile.neg { fill: color-mix(in srgb, var(--danger) 45%, var(--surface)); }
.demo-svg .protractor { fill: var(--accent); fill-opacity: 0.07; stroke: var(--accent); stroke-opacity: 0.5; }
.demo-svg .ray-line { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.demo-svg .circle-fill { fill: var(--accent); fill-opacity: 0.08; stroke: var(--accent); stroke-width: 2.5; }
.demo-svg .cons-line { stroke-width: 2; }
.demo-svg .cons-arc { fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 3 3; }
.demo-svg .cons-arc.cur, .demo-svg .cons-line.cur { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: none; }
.demo-svg .axis-sym { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 8 5; }
.demo-svg .par-mark { fill: var(--accent); font-size: 18px; font-weight: 900; }
.demo-svg .arc-thick { fill: none; stroke: var(--demo-c); stroke-width: 5; stroke-linecap: round; }
.demo-svg .thin-line { stroke-width: 2; fill: none; }
.demo-svg .graph-line { fill: none; }
.demo-svg .graph-line.stroke-a { stroke: var(--demo-a); } .demo-svg .graph-line.stroke-b { stroke: var(--demo-b); } .demo-svg .graph-line.stroke-c { stroke: var(--demo-c); }
.demo-svg .wall { fill: var(--surface-2); stroke: var(--text); stroke-width: 1.5; }
.demo-svg .ladder { stroke: var(--demo-a); stroke-width: 6; stroke-linecap: round; }
.demo-svg .edge { stroke: var(--text); stroke-width: 1.8; fill: none; stroke-linejoin: round; }
.demo-svg .edge.hidden { stroke-dasharray: 4 4; stroke-opacity: 0.55; }
.cons-steps { padding-left: 1.3em; font-size: 0.9rem; color: var(--muted); }
.cons-steps li.on { color: var(--text); font-weight: 700; }
.cons-steps li.done { color: var(--text); }
.eq-hist { font-size: 0.95rem; }
.eq-steps { padding-left: 1.4em; margin: 4px 0 8px; }

/* mestne vrednosti */
.pv-table { display: grid; grid-template-columns: repeat(7, minmax(36px, 54px)); gap: 4px; justify-content: center; }
.pv-col { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-radius: 10px; background: var(--surface-2); }
.pv-col.on { background: color-mix(in srgb, var(--demo-a) 25%, var(--surface)); }
.pv-head { font-size: 0.78rem; font-weight: 800; color: var(--muted); }
.pv-digit { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.demo .pv-btn { min-height: 30px; width: 100%; padding: 0; border: 0; background: none; color: var(--accent); font-size: 0.8rem; }
.pv-number { font-size: 1.6rem; font-weight: 800; text-align: center; letter-spacing: 0.02em; margin: 6px 0; font-variant-numeric: tabular-nums; }

/* stotični kvadrat */
.hundred { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; width: 100%; max-width: 420px; margin: 0 auto; }
.demo .hcell { min-height: 0; aspect-ratio: 1; padding: 0; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); font-size: clamp(0.62rem, 2.6vw, 0.85rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.demo .hcell.on-a { background: var(--demo-a); color: #fff; border-color: transparent; }
.demo .hcell.on-b { background: var(--demo-b); color: #fff; border-color: transparent; }
.demo .hcell.on-c { background: var(--demo-c); color: #fff; border-color: transparent; }
.demo .hcell.off { opacity: 0.3; text-decoration: line-through; }
.demo .hcell.ring { box-shadow: 0 0 0 3px var(--accent); }

/* statistika, telesa, funkcije */
.data-editor { display: grid; gap: 6px; }
.data-row { display: flex; align-items: center; gap: 8px; }
.data-row > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-row > b { min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; }
.data-row .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.data-row button { min-width: 34px; }
.demo-svg .pie-slice { stroke: var(--surface); stroke-width: 1.5; }
.demo-svg .theory { stroke: var(--text); stroke-width: 2; stroke-dasharray: 5 3; }
.demo-svg .rect-sum { fill: var(--demo-b); fill-opacity: 0.3; stroke: var(--demo-b); stroke-width: 1; }
.demo-svg .rect-sum.neg { fill: var(--danger); stroke: var(--danger); }
.demo-svg .band { fill: var(--accent); fill-opacity: 0.12; }
.demo-svg .field { stroke: var(--muted); stroke-width: 1.2; stroke-linecap: round; opacity: 0.7; }
.demo-svg .road { stroke: var(--muted); stroke-width: 8; stroke-linecap: round; opacity: 0.25; }
.graf-eq { overflow-x: auto; }
.demo-svg.solid3d { touch-action: none; cursor: grab; }
.demo-svg.solid3d:active { cursor: grabbing; }
.demo-svg .face { --face-col: var(--demo-a); fill: color-mix(in srgb, var(--face-col) var(--lit, 100%), #0b1020); stroke: var(--surface); stroke-width: 0.7; stroke-linejoin: round; }
.demo-svg .face.base { --face-col: var(--demo-b); }
.demo-svg .face.side2 { --face-col: var(--demo-a); }
.demo-svg .face.smooth { stroke: color-mix(in srgb, var(--face-col) var(--lit, 100%), #0b1020); stroke-width: 0.5; }
.demo-svg .face.sphere { --face-col: var(--demo-c); }
.demo-stage > .graf-eq { flex-basis: 100%; text-align: center; margin: 0; }
.demo-pick { margin-bottom: 12px; }
.demo-sub { border-top: 1px solid var(--border); padding-top: 12px; }

/* ---------- kemija ---------- */
.demo-readout .bad-text { color: var(--danger); }
.demo-counter { display: flex; align-items: center; gap: 8px; }
.demo-counter .demo-slider-label { min-width: 90px; }
.demo-counter .cnt-val { min-width: 2.2em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.demo-svg .ghs { cursor: pointer; }
.demo-svg .ghs-frame { fill: #fff; stroke: #e5484d; stroke-width: 6; stroke-linejoin: round; }
.demo-svg .ghs.on .ghs-frame { stroke-width: 9; filter: drop-shadow(0 0 6px var(--accent)); }
.demo-svg .ghs-ink { fill: #111; stroke: none; }
.demo-svg .ghs-line { stroke: #111; stroke-width: 3; stroke-linecap: round; fill: none; }
.demo-svg .ghs-bone { stroke: #111; stroke-width: 4; stroke-linecap: round; }
.demo-svg .ghs-hole { fill: #fff; }
.demo-svg .shell { fill: none; stroke: var(--border); stroke-width: 1.5; }
.demo-svg .shell.last { stroke: color-mix(in srgb, var(--demo-c) 45%, var(--border)); stroke-dasharray: 4 3; }
.demo-svg .electron-dot { fill: var(--accent); }
.demo-svg .electron-dot.val { fill: var(--demo-c); }
.demo-svg .proton { fill: var(--danger); stroke: var(--surface); stroke-width: 1; }
.demo-svg .neutron { fill: var(--muted); stroke: var(--surface); stroke-width: 1; }
.demo-svg.ptable { max-width: 100%; }
.demo-svg .pt-cell { cursor: pointer; }
.demo-svg .pt-bg { fill: var(--surface-2); stroke: var(--border); stroke-width: 0.6; }
.demo-svg .pt-cell.sel .pt-bg { stroke: var(--text); stroke-width: 2.4; }
.demo-svg .pt-z { font-size: 7.5px; fill: var(--muted); }
.demo-svg .pt-sym { font-size: 13px; font-weight: 700; fill: var(--text); }
.demo-svg .pt-legend { font-size: 9.5px; fill: var(--text); }
.demo-svg .k-alkalijska, .demo-svg .g-1 { fill: color-mix(in srgb, #f59e0b 45%, var(--surface)); }
.demo-svg .k-zemeljskoalkalijska, .demo-svg .g-2 { fill: color-mix(in srgb, #facc15 40%, var(--surface)); }
.demo-svg .k-prehodna { fill: color-mix(in srgb, #fb7185 30%, var(--surface)); }
.demo-svg .k-lantanoid { fill: color-mix(in srgb, #f472b6 25%, var(--surface)); }
.demo-svg .k-aktinoid { fill: color-mix(in srgb, #c084fc 25%, var(--surface)); }
.demo-svg .k-ostala, .demo-svg .g-13 { fill: color-mix(in srgb, #94a3b8 40%, var(--surface)); }
.demo-svg .k-polkovina, .demo-svg .g-14 { fill: color-mix(in srgb, #2dd4bf 35%, var(--surface)); }
.demo-svg .k-nekovina, .demo-svg .g-15 { fill: color-mix(in srgb, #4ade80 40%, var(--surface)); }
.demo-svg .g-16 { fill: color-mix(in srgb, #60a5fa 35%, var(--surface)); }
.demo-svg .k-halogen, .demo-svg .g-17 { fill: color-mix(in srgb, #a3e635 45%, var(--surface)); }
.demo-svg .k-zlahtni, .demo-svg .g-18 { fill: color-mix(in srgb, #818cf8 40%, var(--surface)); }
.demo-svg .k-neznano, .demo-svg .k-dim { fill: var(--surface-2); }
.demo-svg .k-sel { fill: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.demo-svg .trend-arrow { stroke: var(--text); stroke-width: 2; }
.demo-svg .bond { stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; }
.demo-svg .bond.thick { stroke-width: 2.4; }
.demo-svg .atom-lbl { font-weight: 700; }
.demo-svg .mol-hl { fill: color-mix(in srgb, var(--demo-a) 30%, transparent); }
.demo-svg .atom-ball { stroke: color-mix(in srgb, var(--text) 35%, transparent); stroke-width: 0.8; }
.demo-svg .shared-pair { fill: color-mix(in srgb, var(--demo-a) 25%, transparent); stroke: var(--demo-a); stroke-width: 1; }
.demo-svg .ion-m { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke: var(--accent); stroke-width: 1.5; }
.demo-svg .ion-x { fill: color-mix(in srgb, var(--demo-b) 22%, var(--surface)); stroke: var(--demo-b); stroke-width: 1.5; }
.demo-svg .e-cloud { fill: color-mix(in srgb, var(--demo-c) 28%, transparent); stroke: var(--demo-c); stroke-width: 1; stroke-dasharray: 3 3; }
.demo-svg .e-cloud.weak { fill: color-mix(in srgb, var(--demo-c) 8%, transparent); }
.demo-svg .zone-a { fill: color-mix(in srgb, var(--demo-b) 40%, var(--surface)); }
.demo-svg .zone-b { fill: color-mix(in srgb, var(--demo-c) 40%, var(--surface)); }
.demo-svg .zone-c { fill: color-mix(in srgb, var(--demo-a) 45%, var(--surface)); }
.demo-svg .ion-tile.cat { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke: var(--accent); stroke-width: 1.5; }
.demo-svg .ion-tile.an { fill: color-mix(in srgb, var(--danger) 18%, var(--surface)); stroke: var(--danger); stroke-width: 1.5; }
.demo-svg .ox-chip { fill: var(--surface-2); stroke: var(--border); }
.demo-svg .ox-chip.unk { fill: color-mix(in srgb, var(--demo-a) 25%, var(--surface)); stroke: var(--demo-a); stroke-width: 2; }
.demo-svg .bar.on { stroke: var(--text); stroke-width: 2; }
.demo-svg .liquid { stroke: none; }
.demo-svg .glass { fill: color-mix(in srgb, var(--surface-2) 60%, transparent); stroke: var(--text); stroke-width: 1.5; }
.demo-svg .bubble { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.demo-svg .metal { fill: #9aa5b8; stroke: var(--text); stroke-width: 1; }
.demo-svg .atom-txt { font-weight: 700; font-size: 11px; }
.demo-svg .salt-bridge { fill: none; stroke: color-mix(in srgb, var(--demo-a) 45%, var(--surface)); stroke-width: 12; stroke-linejoin: round; }
.demo-svg .graph-line.dashed { stroke-dasharray: 6 4; }

/* ---------- tekmovanja ---------- */
.demo-svg .bad-box { stroke: var(--danger); stroke-width: 2; }
.demo-svg .beaker.hot { stroke: var(--danger); stroke-width: 3; }
.demo-svg .cell-light { fill: var(--surface); stroke: var(--border); cursor: pointer; }
.demo-svg .cell-dark { fill: color-mix(in srgb, var(--text) 55%, var(--surface)); stroke: var(--border); cursor: pointer; }
.demo-svg .cell-gone { fill: color-mix(in srgb, var(--danger) 18%, transparent); stroke: var(--border); stroke-dasharray: 3 3; cursor: pointer; }
.demo-svg .domino { fill: color-mix(in srgb, var(--demo-a) 55%, transparent); stroke: var(--demo-a); stroke-width: 2; pointer-events: none; }
.demo-svg .hit-area { fill: transparent; }
.demo-svg .edge-red { stroke: var(--danger); cursor: pointer; }
.demo-svg .edge-blue { stroke: var(--accent); cursor: pointer; }
.demo-svg .edge-none { stroke: var(--border); stroke-dasharray: 4 4; cursor: pointer; }
.demo-svg .edge-on { stroke: var(--muted); }
.demo-svg .lone-pair { fill: color-mix(in srgb, var(--demo-c) 35%, transparent); stroke: var(--demo-c); stroke-width: 1; }
.demo-svg .pulley { fill: var(--surface-2); stroke: var(--text); stroke-width: 2; }

/* ---------- Referenčni material (Moj študij) ---------- */
.tb-mode { flex-basis: 100%; }
.tb-mode > button { display: inline-flex; align-items: center; gap: 6px; }
.tb-mode svg.i { width: 18px; height: 18px; }
.ref-intro { margin: 4px 0 10px; }
.ref-filters { margin: 8px 0 14px; }
.ref-courses { display: grid; gap: 14px; }
.ref-course h2 { margin: 0 0 2px; font-size: 1.1rem; }
.ref-area { margin: 0 0 8px; font-size: 0.9rem; }
.ref-list { padding: 0; box-shadow: none; border: 0; background: none; }
a.ref-row { text-decoration: none; align-items: flex-start; }
a.ref-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ref-row .lr-text b { color: var(--accent); }
.ref-row .ref-desc { color: var(--text); font-size: 0.92rem; margin-top: 2px; }
.ref-badges { margin-top: 6px; align-items: center; }
.ref-badge, .ref-lang { background: var(--surface-2); color: var(--muted); }
.ref-license { font-size: 0.75rem; color: var(--muted); }
.ref-row > svg.i { flex: none; width: 18px; height: 18px; margin-top: 4px; }
.ref-more { margin-top: 6px; color: var(--accent); font-weight: 700; }
@media (min-width: 1200px) {
  .ref-courses { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Simulacije: dovolj veliki cilji za prst, ponastavitev, vidni fokus za tipkovnico (docs/kakovost.md §3) */
.demo button, .demo select { min-height: 36px; }
.demo .demo-check { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.demo .demo-check input { width: 20px; height: 20px; }
.demo .demo-reset { display: block; margin: 8px 0 0 auto; }
.demo .drag:focus { outline: none; }
.demo .drag:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.demo .drag:focus-visible .pt, .demo .drag:focus-visible circle:not(.hit) { stroke: var(--accent); stroke-width: 3; }
/* Ozki zasloni (360 px): izbirni seznami in formule ne smejo razširiti strani */
.demo-slider { grid-template-columns: 7.5em minmax(0, 1fr) 5.5em; }
.demo select { max-width: 100%; min-width: 0; }
.demo-readout { overflow-x: auto; max-width: 100%; }
@media (max-width: 520px) {
  .demo-slider { grid-template-columns: minmax(0, 1fr) 4.8em; }
}
.tb-browse { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; }

/* biologija: vnos zaporedja DNA (public/sim/bio.js) */
.demo-dna { padding: 12px; }
.demo-dna input { width: 100%; font: 600 1.15rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.demo-readout code { letter-spacing: 0.08em; white-space: nowrap; }

/* Virtualni laboratorij (public/sim/lab*.js) */
.lab .demo-stage { flex-direction: column; align-items: center; }
.lab-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; width: 100%; max-width: 420px; }
.lab-lcd { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: var(--radius-sm, 10px); background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.lab-lcd-name { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.lab-lcd-screen { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; padding: 4px 8px; border-radius: 6px; background: #c9d4b0; color: #1d2414; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; min-height: 2.1em; }
.lab-lcd-val { font-size: clamp(1.05rem, 5.2vw, 1.35rem); font-weight: 700; letter-spacing: 0.04em; }
.lab-lcd-unit { font-size: 0.85rem; font-weight: 700; }
.lab-lcd.off .lab-lcd-screen { background: #9aa38c; }
.lab-lcd-note { font-size: 0.74rem; color: var(--muted); min-height: 1.1em; overflow-wrap: anywhere; }
.lab-row { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 10px; font-weight: 600; }
.lab-row .demo-seg { flex-wrap: wrap; }
@media (max-width: 420px) { .lab-row { grid-template-columns: 1fr; gap: 4px; } }
.lab-h { margin: 14px 0 6px; }
.lab-table-wrap { max-height: 260px; overflow: auto; }
.lab-table { font-size: 0.88rem; }
.lab-table :is(th, td) { padding: 6px 8px; }
.lab-table td { font-variant-numeric: tabular-nums; text-align: right; }
.lab-empty { font-size: 0.9rem; margin: 4px 0; }
.lab-graph-wrap { margin: 10px 0 0; }
.lab-graph { max-width: 420px; display: block; margin: 0 auto; }
.lab-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; font-size: 0.85rem; color: var(--muted); }
.lab-leg { display: inline-flex; align-items: center; gap: 6px; }
.lab-sym { display: inline-block; width: 10px; height: 10px; }
.lab-sym.dot { border-radius: 50%; }
.lab-sym.tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bg-a { background: var(--demo-a); } .bg-b { background: var(--demo-b); }
.demo-svg .lab-fit { fill: none; stroke-width: 2; stroke-dasharray: 6 4; }
.demo-svg .lab-pt { stroke: var(--surface); stroke-width: 1.2; }
.lab-fitout { font-size: 0.92rem; }
.lab-log { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.lab-ev { padding: 6px 10px; border-radius: 8px; background: var(--surface-2); border-inline-start: 4px solid var(--border); }
.lab-ev.ok { border-inline-start-color: var(--ok); }
.lab-ev.warn { border-inline-start-color: var(--demo-a); }
.lab-ev.bad { border-inline-start-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)); }
.lab-status { font-weight: 600; min-height: 1.4em; margin: 6px 0 0; }
.lab-q { margin-top: 14px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.lab-q h4 { margin: 0 0 4px; }
.lab-opts { display: flex; flex-direction: column; gap: 6px; }
.lab-opt { display: block; width: 100%; text-align: start; justify-content: flex-start; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; }
.lab-opt.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.lab-opt.bad { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.lab-why { margin: 8px 0 0; }
.lab-notes { margin-top: 12px; font-size: 0.9rem; }
.lab-notes summary { cursor: pointer; font-weight: 600; padding: 9px 0; }
.demo-svg .lab-wire { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linejoin: round; }
.demo-svg .lab-node { fill: var(--text); }
.demo-svg .lab-box { fill: var(--surface-2); stroke: var(--muted); stroke-width: 1.5; }
.demo-svg .lab-led-off { fill: var(--border); }
.demo-svg .lab-meter-body { fill: var(--surface); stroke: var(--text); stroke-width: 2.2; }
.demo-svg .lab-broken { stroke: var(--danger); stroke-width: 2.5; }
.demo-svg .lab-res { fill: #dcc9a0; stroke: #8a7650; stroke-width: 1.2; }
.demo-svg .lab-burnt { fill: #2b2420; stroke: #000; }
.demo-svg .lab-bulb { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.demo-svg .lab-filament { stroke: var(--text); stroke-width: 1.8; fill: none; }
.demo-svg .lab-glow { fill: #ffd84d; }
.demo-svg .lab-smoke { fill: #8b8f96; opacity: 0.55; animation: lab-smoke 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lab-smoke { from { transform: translateY(0) scale(0.7); opacity: 0.6; } to { transform: translateY(-16px) scale(1.3); opacity: 0; } }
.demo-svg .lab-glass { fill: color-mix(in srgb, var(--accent) 6%, transparent); stroke: var(--muted); stroke-width: 2; stroke-linejoin: round; }
.demo-svg .lab-mark { stroke: var(--muted); stroke-width: 1.2; }
.demo-svg .lab-liq { opacity: 0.75; }
.demo-svg .lab-liq-voda, .demo-svg .lab-liq-hcl { fill: #bfe0f7; }
.demo-svg .lab-liq-kis, .demo-svg .lab-liq-mesanica { fill: #efe3bf; }
.demo-svg .lab-liq-limona { fill: #f1e07a; }
.demo-svg .lab-foam { fill: #fbfbf6; stroke: #d8d8cc; stroke-width: 0.8; }
.demo-svg .lab-powder { fill: #f7f7f2; stroke: #c9c9bd; stroke-width: 1; }
.demo-svg .lab-bubble { fill: none; stroke: #6b8db0; stroke-width: 1; }
.demo-svg .lab-milk { fill: #e9e8e0; }
.demo-svg .lab-ppt { fill: #8f8c80; }
.demo-svg .lab-foam-run { fill: none; stroke: #fbfbf6; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.demo-svg .lab-foam-run-edge { fill: none; stroke: #9a9a8c; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.demo-svg .lab-foam-b { fill: #fbfbf6; stroke: #9a9a8c; stroke-width: 0.8; }
.demo-svg .lab-puddle { opacity: 0.9; stroke: #9a9a8c; stroke-width: 0.8; }
.demo-svg .lab-stopper { fill: #7a5a44; }
.demo-svg .lab-tube { fill: none; stroke: var(--muted); stroke-width: 3.5; stroke-linejoin: round; opacity: 0.8; }
.demo-svg .lab-splint { stroke: #b8864b; stroke-width: 4; stroke-linecap: round; }
.demo-svg .lab-flame { fill: #ff9b2f; stroke: #ffd36b; stroke-width: 1.5; }
.demo-svg .lab-scale { stroke: var(--text); stroke-width: 2; }
@media (prefers-reduced-motion: reduce) { .demo-svg .lab-smoke { animation: none; } }
/* napisi na risbi ostanejo berljivi tudi pri 360 px (risba je pomanjšana na ~0,8) */
.demo-svg:is(.lab-circuit, .lab-bench) .lbl.small { font-size: 13px; }
.demo-svg:is(.lab-circuit, .lab-bench) .tick { font-size: 12px; }
.demo-svg:is(.lab-circuit, .lab-bench) .tick.small { font-size: 11px; }
/* dotik: vsaj 40 px */
.lab button.small, .lab .demo-reset { min-height: 40px !important; }
.demo.lab .demo-seg .seg-btn, .lab select, .lab .demo-check { min-height: 40px; }
.lab .demo-slider input[type="range"] { height: 40px; }


/* kratek video iz simulacije (public/gradiva.js) */
.gr-video { width: min(760px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 12px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); overflow-y: auto; }
.gr-video::backdrop { background: rgba(12, 14, 30, 0.6); }
.gr-video-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gr-video-head h2 { margin: 0; font-size: 1.1rem; }
.gr-video-close { min-width: 40px; min-height: 40px; }
.gr-video-sim .demo-reset { display: none; }
/* podnapis in gumbi ostanejo vidni tudi na telefonu, ko je simulacija višja od zaslona */
.gr-video-foot { position: sticky; bottom: -12px; margin: 0 -16px -12px; padding: 4px 16px 12px; background: var(--surface); border-top: 1px solid var(--border); }
.gr-video-cap { min-height: 3.2em; margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 1.02rem; }
.gr-video-cap p { margin: 0; }
.gr-video-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.gr-video-bar progress { flex: 1 1 120px; height: 8px; accent-color: var(--accent); }
.gr-video-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; direction: ltr; unicode-bidi: isolate; }
.gr-video-cap .katex { direction: ltr; unicode-bidi: isolate; }
.gr-video-voice { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.gr-video-draft { margin: 6px 0 0; font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) { .gr-video-cap { transition: none; } }