/* Copyright © 2026 Christopher Snow. */
.tensor-visual { margin:24px 0; border:1px solid var(--line); border-radius:8px; padding:22px; background:var(--panel); }
.tensor-visual h3 { margin-bottom:10px; }
.tensor-visual-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:16px 0 24px; }
.tensor-visual-controls label { font-size:12px; }
.tensor-visual-controls select { display:block; min-width:80px; }
.tensor-visual-controls button[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.tensor-diagrams { display:grid; grid-template-columns:1fr 1.25fr; gap:26px; align-items:start; }
.tensor-diagrams>div { min-width:0; }
.tensor-caption,.tensor-axis { font-size:12px; color:var(--muted); }
.tensor-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:3px; }
.tensor-cell { padding:8px 1px; text-align:center; font:12px/1.5 ui-monospace,monospace; border:1px solid var(--line); background:var(--soft); border-radius:3px; }
.storage-strip { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:3px; margin-top:25px; }
.storage-cell { text-align:center; border:1px solid var(--line); background:var(--soft); border-radius:3px; padding:9px 0; min-width:0; }
.storage-cell strong { font:600 12px/1.8 ui-monospace,monospace; display:block; }
.storage-cell>span { display:block; font:10px/1.8 ui-monospace,monospace; color:var(--muted); }
.tensor-visual .origin { border:2px dashed var(--accent); }
.tensor-visual .destination { background:var(--accent-soft); border:2px solid var(--accent); color:var(--accent); }
.tensor-visual .crossed { border-bottom:3px solid var(--accent); }
.stride-arrow { margin:16px 0; color:var(--accent); font:14px/1.8 ui-monospace,monospace; text-align:center; }
.tensor-summary { padding:16px; margin:18px 0 0; border-radius:4px; background:var(--soft); font-size:13px; }
.slice-diagram { display:grid; grid-template-columns:1fr 1.2fr; gap:24px; align-items:start; }
.slice-diagram>div { min-width:0; }
.slice-diagram h4 { font-size:12px; margin:16px 0 10px; }
.slice-slots { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.slice-slot { background:var(--soft); border:1px solid var(--line); border-radius:4px; padding:10px 3px; text-align:center; }
.slice-slot strong { display:block; font:15px ui-monospace,monospace; }
.slice-slot span,.slice-slot small { display:block; margin-top:7px; font-size:11px; }
.slice-storage>p { font-size:12px; color:var(--muted); }
.slice-copy-arrow { font-size:12px; color:var(--accent); text-align:center; border-block:1px dashed var(--accent); padding:12px; }
@media(max-width:1100px) { .tensor-diagrams { grid-template-columns:1fr; } }
@media(max-width:1100px) { .slice-diagram { grid-template-columns:1fr; } }
@media(max-width:760px) { .tensor-visual { padding:14px; } .storage-strip { gap:2px; } .storage-cell strong { font-size:11px; } .storage-cell>span { font-size:9px; } }

/* Static worked examples (always visible, no JS required) */
.stride-example, .view-copy-comparison, .sector-comparison { margin:20px 0; padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.stride-example h4, .view-copy-comparison h4, .sector-comparison h4 { font-size:14px; margin:0 0 12px; }
.stride-diagrams { display:grid; grid-template-columns:1fr 1.25fr; gap:20px; align-items:start; }
.stride-diagrams>div { min-width:0; }
.stride-subtitle { font-size:12px; font-weight:650; margin:0 0 8px; }
.stride-grid { margin-bottom:6px; }
.stride-strip { margin-top:8px; }
.stride-summary, .sector-comparison .stride-summary { padding:12px 14px; margin:14px 0 0; border-radius:4px; background:var(--soft); font-size:13px; line-height:1.7; }
.stride-example .origin { border:2px dashed var(--accent); }
.stride-example .destination, .view-copy-comparison .destination { background:var(--accent-soft); border:2px solid var(--accent); color:var(--accent); }
.stride-example .crossed { border-bottom:3px solid var(--accent); }
.view-copy-diagrams { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:start; }
.view-copy-panel { min-width:0; }
.view-copy-panel .slice-slots { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sector-compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.sector-compare-panel { min-width:0; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--bg); }
.sector-mini-strip { display:flex; flex-wrap:wrap; gap:4px; margin:10px 0; }
.sector-mini { min-width:0; }
.sector-mini-label { display:block; font:9px ui-monospace,monospace; color:var(--muted); margin-bottom:2px; }
.sector-mini-words { display:flex; gap:1px; }
.sector-mini-word { font:8px/1 ui-monospace,monospace; padding:3px 1px; border:1px solid var(--line); border-radius:2px; background:var(--soft); color:var(--muted); min-width:14px; text-align:center; }
.sector-mini-word.used { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft); }
.sector-result { font-size:12px; margin:8px 0 0; }
.sector-result strong { color:var(--accent); }
@media(max-width:1100px) { .stride-diagrams { grid-template-columns:1fr; } .view-copy-diagrams { grid-template-columns:1fr; } .sector-compare-grid { grid-template-columns:1fr; } }
@media(max-width:760px) { .stride-example, .view-copy-comparison, .sector-comparison { padding:12px; } .sector-mini-word { font-size:7px; min-width:12px; } }

/* Introductory RAM layout: one static teaching figure, readable without JavaScript. */
.storage-primer { margin:20px 0; padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.storage-primer h3 { font-size:15px; margin:0 0 14px; }
.storage-primer-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:18px; align-items:start; }
.storage-primer-layout>div { min-width:0; }
.storage-primer-subtitle { font-size:12px; font-weight:650; margin:0 0 10px; }
.storage-primer-grid { display:grid; grid-template-columns:48px repeat(4,minmax(0,1fr)); gap:4px; }
.storage-primer-row-label { font-size:12px; align-self:center; }
.storage-primer-memory { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:3px; }
.storage-primer-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:40px; gap:2px; padding:4px 1px; border:1px solid var(--line); border-radius:4px; background:var(--soft); }
.storage-primer-cell.row-one { background:var(--accent-soft); }
.storage-primer-cell strong { font:600 13px/1.3 ui-monospace,monospace; }
.storage-primer-cell small { color:var(--muted); font:10px/1.3 ui-monospace,monospace; white-space:nowrap; }
.storage-primer-note { color:var(--muted); font-size:12px; margin:9px 0 0; }
.storage-primer-caption { padding-top:12px; margin-top:16px; border-top:1px solid var(--line); font-size:13px; }
@media(max-width:760px) {
  .storage-primer { padding:12px; }
  .storage-primer-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
  .storage-primer-memory { gap:2px; }
  .storage-primer-cell { min-height:38px; }
  .storage-primer-cell strong { font-size:12px; }
  .storage-primer-cell small { font-size:9px; }
}