/* Figures specific to "Simultaneous equations run the world". Shared rules live in lab-common.css. */
/* matrices */
.mx-wrap{overflow-x:auto; padding:4px 0;}
.mx-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; margin:8px 0;}
.mx-lab{display:flex; flex-direction:column; align-items:center; gap:4px;}
.mx-name{font-size:.72rem; color:var(--muted); font-weight:600; letter-spacing:.02em;}
.mx{display:grid; gap:2px 4px; padding:4px 8px; position:relative; font-family:var(--mono); font-size:.86rem; font-feature-settings:"tnum" 1;}
.mx::before,.mx::after{content:""; position:absolute; top:0; bottom:0; width:6px; border:1.5px solid var(--ink); }
.mx::before{left:0; border-right:none; border-radius:3px 0 0 3px;}
.mx::after{right:0; border-left:none; border-radius:0 3px 3px 0;}
.mx-c{display:inline-flex; align-items:center; justify-content:center; min-width:2.4em; padding:3px 4px; border-radius:5px; transition:background .25s, color .25s;}
.mx-c.hl{background:var(--accent-soft);}
.mx-c.out{background:var(--accent); color:#fff;}
.mx-c.good{color:var(--accent); font-weight:600;}
.mx-c.flash{animation:mxflash 1.1s ease-out;}
@keyframes mxflash{0%{background:var(--accent); color:#fff;} 100%{background:transparent; color:inherit;}}
.mx-sep{font-family:var(--mono); font-size:1.1rem; color:var(--muted);}
.mv-expr{text-align:center;}

/* elimination grid */
.elim-grid{display:grid; gap:4px 6px; max-width:520px; margin:6px auto; font-family:var(--mono); font-size:.9rem; font-feature-settings:"tnum" 1;}
.elim-c{display:flex; align-items:center; justify-content:center; padding:6px 2px; border-radius:6px; background:var(--bg); border:1px solid var(--border); transition:background .3s, color .3s, border-color .3s;}
.elim-c.zero{color:var(--faint); background:transparent; border-style:dashed;}
.elim-c.pivot{border-color:var(--accent); background:var(--accent-soft);}
.elim-c.target{border-color:var(--accent);}
.elim-c.changed{background:var(--accent); color:#fff; border-color:var(--accent);}
.elim-c.solved{color:var(--accent); font-weight:600;}
.elim-bar{border-left:1.5px solid var(--muted); margin:2px 4px;}

/* svg bits */
.lab-svg .wire{fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.lab-svg .wire.thin{stroke:var(--border); stroke-width:1.2;}
.lab-svg .flow{fill:none; stroke:var(--accent); stroke-width:3.5; stroke-dasharray:4 10; stroke-linecap:round; opacity:.6;}
.lab-svg .src{fill:none; stroke:var(--accent); stroke-width:2;}
.lab-svg .node{fill:var(--accent); stroke:var(--surface); stroke-width:2; transition:fill-opacity .3s;}
.lab-svg .lab-t{font-family:var(--sans); font-size:14px; font-weight:600; fill:var(--ink);}
.lab-svg .lab-t.small{font-size:11.5px; font-weight:500; fill:var(--muted);}
.lab-svg .lab-t.muted{fill:var(--faint);}
.lab-svg .edge{fill:none; stroke:var(--muted); stroke-width:1.6;}
.lab-svg .edge.thin{stroke:var(--muted); stroke-width:1; opacity:.45;}
.lab-svg .page{fill:var(--accent); fill-opacity:.9; stroke:var(--surface); stroke-width:2; transition:r .3s ease, fill-opacity .3s;}
.lab-svg .page.soft{fill:var(--accent); fill-opacity:.18; stroke:var(--accent); stroke-width:2;}
.lab-svg .page-name{fill:var(--ink); font-size:17px; paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round;}
.lab-svg .surfer{fill:var(--accent);}
.lab-svg .surfer{fill:var(--ink); opacity:.75;}
.lab-svg .gridline{stroke:var(--border); stroke-width:1;}
.lab-svg .curve{fill:none; stroke:var(--accent); stroke-width:2.5;}
.lab-svg .resid{stroke:var(--muted); stroke-width:2; stroke-dasharray:3 3;}
.lab-svg .pt{fill:var(--ink); stroke:var(--surface); stroke-width:2.5; cursor:grab;}
.lab-svg .pt:active{cursor:grabbing;}

/* pagerank bars */
.pr-bars{margin:10px auto 4px; max-width:440px;}
.pr-bar{display:grid; grid-template-columns:1.6em 1fr 3.6em; align-items:center; gap:10px; margin:5px 0;}
.pr-name{font-weight:600;}
.pr-track{position:relative; height:16px; background:var(--surface-2); border-radius:4px; overflow:hidden;}
.pr-fill{position:absolute; left:0; top:0; bottom:0; transition:width .5s ease;}
.pr-fill.exact{background:var(--accent); opacity:.85;}
.pr-fill.crowd{top:10px; background:var(--ink); opacity:.5;}
.pr-target{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink);}
.pr-num{font-family:var(--mono); font-size:.78rem; text-align:right;}

/* memory bars */
.mem-bars{margin:10px 0 4px;}
.mem-bar{display:grid; grid-template-columns:minmax(9em,12em) 1fr 5em; align-items:center; gap:10px; margin:5px 0; font-size:.78rem;}
.mem-lab{color:var(--muted);}
.mem-track{position:relative; height:12px; background:repeating-linear-gradient(90deg, var(--surface-2) 0 calc(100%/12.9 - 1px), var(--border) calc(100%/12.9 - 1px) calc(100%/12.9)); border-radius:3px; overflow:hidden;}
.mem-fill{height:100%; border-radius:3px; transition:width .4s ease;}
.mem-fill.dense{background:var(--ink);}
.mem-fill.sparse{background:var(--accent);}
.mem-fill.ghost{opacity:.3;}
.mem-num{font-family:var(--mono); text-align:right;}

@media (max-width:600px){
  .post article figure.lab{padding:14px 12px 10px; margin-left:-4px; margin-right:-4px;}
  .lab-slider input[type=range]{width:90px;}
  .mx{font-size:.8rem;}
}

/* scale wall */
.lab-canvas.wide{width:100%; height:auto; border:none; border-radius:4px;}
.scale-rows{margin:10px 0 4px; font-family:var(--mono); font-size:.8rem; font-feature-settings:"tnum" 1;}
.scale-row{display:grid; grid-template-columns:minmax(10em,1fr) 7em 11em; gap:12px; padding:5px 0; border-bottom:1px solid var(--border); align-items:baseline;}
.scale-row.head{color:var(--muted); font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.03em; text-transform:uppercase;}
.scale-row .scale-val{text-align:right;}
.scale-row .scale-val.muted{color:var(--muted);}
.scale-row.nofit .scale-val{color:var(--math); font-weight:600;}
.scale-row.nofit .scale-val.muted{color:var(--math); font-weight:400;}
@media (max-width:600px){ .scale-row{grid-template-columns:1fr 5.5em 7.5em; font-size:.72rem;} }