/* Every selector is under .alg-root. This stylesheet is loaded into the main
   application's document when the tool is embedded - not an iframe, because
   netlify.toml sends X-Frame-Options: DENY - so one unscoped rule here restyles
   the whole app. There is no such thing as a harmless bare selector in this
   file. */

.alg-root{
  --alg-bg:#12161a; --alg-panel:#1a2126; --alg-panel-2:#212a30;
  --alg-border:#333e47; --alg-border-soft:#293138;
  --alg-text:#e8ebed; --alg-dim:#8f9aa3; --alg-faint:#5f6a73;
  --alg-accent:#2FB8C6; --alg-caution:#E8A33D; --alg-bad:#DC0E2F; --alg-good:#7fd6a0;
  --alg-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --alg-sans:'IBM Plex Sans',system-ui,sans-serif;
  background:var(--alg-bg); color:var(--alg-text); font-family:var(--alg-sans);
  min-height:100vh; padding:0 0 60px;
}
.alg-root *{ box-sizing:border-box; }

.alg-top{ display:flex; align-items:center; gap:20px; padding:16px 24px;
  border-bottom:1px solid var(--alg-border-soft); flex-wrap:wrap; }
.alg-brand{ display:flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--alg-text); font-size:17px; letter-spacing:1.5px; }
.alg-brand img{ width:26px; height:26px; }
.alg-brand b{ font-weight:700; }
.alg-top h1{ font-size:16px; font-weight:600; margin:0; color:var(--alg-dim); flex:1; }
.alg-ghost{ background:none; border:1px solid var(--alg-border); color:var(--alg-dim);
  padding:8px 14px; border-radius:3px; cursor:pointer; font-family:var(--alg-mono); font-size:12px; }
.alg-ghost:hover{ color:var(--alg-text); border-color:var(--alg-accent); }

/* The convention warning is caution-coloured, not accent-coloured. It is a
   warning, and --caution exists precisely so those two are never the same. */
.alg-warn{ margin:18px 24px 0; padding:13px 16px; border-left:3px solid var(--alg-caution);
  background:rgba(232,163,61,.08); font-size:13.5px; line-height:1.65; color:#e7d9bd; }
.alg-warn b{ color:var(--alg-caution); }

.alg-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px; padding:18px 24px; align-items:start; }
.alg-card{ background:var(--alg-panel); border:1px solid var(--alg-border-soft);
  padding:20px 22px; }
.alg-card h2{ font-size:14px; text-transform:uppercase; letter-spacing:1.2px;
  margin:0 0 4px; color:var(--alg-accent); }
.alg-card h2:not(:first-child){ margin-top:26px; }
.alg-card h3{ font-size:12.5px; font-weight:600; margin:20px 0 8px; color:var(--alg-text); }
.alg-card h3 em{ color:var(--alg-accent); font-style:normal; }
.alg-note{ font-size:12.5px; line-height:1.6; color:var(--alg-faint); margin:0 0 12px; }
.alg-note em{ color:var(--alg-dim); font-style:normal; }

.alg-dial{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:end; }
.alg-root label{ display:flex; flex-direction:column; gap:5px;
  font-family:var(--alg-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.7px; color:var(--alg-faint); }
.alg-wide{ margin-bottom:11px; }
.alg-root input, .alg-root select{ background:var(--alg-panel-2); border:1px solid var(--alg-border);
  color:var(--alg-text); padding:9px 10px; border-radius:2px;
  font-family:var(--alg-mono); font-size:13.5px; width:100%; }
.alg-root input:focus, .alg-root select:focus{ outline:none; border-color:var(--alg-accent); }

.alg-close{ grid-column:1/-1; font-family:var(--alg-mono); font-size:11.5px;
  color:var(--alg-faint); padding-top:4px; }
.alg-close.bad{ color:var(--alg-bad); }
.alg-close.ok{ color:var(--alg-good); }

.alg-out{ position:sticky; top:18px; }
.alg-foot{ border:1px solid var(--alg-border); padding:14px 16px; margin-bottom:12px; }
.alg-foot h4{ margin:0 0 8px; font-family:var(--alg-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:1px; color:var(--alg-faint); }
.alg-move{ font-size:19px; font-weight:600; line-height:1.35; }
.alg-move.add{ color:var(--alg-good); }
.alg-move.remove{ color:var(--alg-caution); }
.alg-move.none{ color:var(--alg-dim); }
.alg-sub{ font-size:13.5px; color:var(--alg-dim); margin-top:5px; }

.alg-nums{ display:grid; grid-template-columns:1fr auto; gap:5px 14px;
  font-family:var(--alg-mono); font-size:12.5px; margin:14px 0; }
.alg-nums span:nth-child(odd){ color:var(--alg-faint); }
.alg-nums span:nth-child(even){ text-align:right; }

.alg-verdict{ padding:11px 14px; font-family:var(--alg-mono); font-size:12.5px;
  border-left:3px solid var(--alg-faint); background:var(--alg-panel-2); line-height:1.6; }
.alg-verdict.pass{ border-left-color:var(--alg-good); color:var(--alg-good); }
.alg-verdict.fail{ border-left-color:var(--alg-bad); color:#ff8fa3; }

.alg-block{ padding:12px 14px; border-left:3px solid var(--alg-bad);
  background:rgba(220,14,47,.09); color:#ff8fa3; font-size:13px; line-height:1.6; }

@media print{
  .alg-root{ background:#fff; color:#000; }
  .alg-ghost, .alg-warn{ display:none; }
}

/* ---- the machine drawing ----
   Everything is scoped under .alg-root like the rest of this file. The SVG
   shares the page's document rather than sitting in an iframe, so an unscoped
   `line` or `text` rule here would repaint every SVG in the host app. */
.alg-root .alg-svg{ width:100%; height:auto; display:block; margin-top:4px;
  background:var(--alg-panel-2); border:1px solid var(--alg-border-soft); }

.alg-root .alg-svg .alg-plate{ stroke:var(--alg-border); stroke-width:2; }
.alg-root .alg-svg .alg-shaft-fixed{ stroke:var(--alg-dim); stroke-width:3; }
.alg-root .alg-svg .alg-shaft-move{ stroke:var(--alg-accent); stroke-width:3; }
.alg-root .alg-svg .alg-hub{ stroke:var(--alg-text); stroke-width:4; opacity:.75; }
.alg-root .alg-svg .alg-foot-leg{ stroke:var(--alg-dim); stroke-width:5; opacity:.55; }

/* Shim colours match the words: green adds, amber removes, the same pairing
   used by .alg-move so the picture and the instruction cannot disagree. */
.alg-root .alg-svg .alg-shim.add{ fill:var(--alg-good); opacity:.85; }
.alg-root .alg-svg .alg-shim.remove{ fill:var(--alg-caution); opacity:.85; }

.alg-root .alg-svg text{ font-family:var(--alg-mono); fill:var(--alg-faint); }
.alg-root .alg-svg .alg-lbl{ font-size:9px; letter-spacing:1px; }
.alg-root .alg-svg .alg-foot-lbl{ font-size:9px; letter-spacing:1px; }
.alg-root .alg-svg .alg-foot-val{ font-size:11px; fill:var(--alg-dim); }
.alg-root .alg-svg .alg-foot-val.add{ fill:var(--alg-good); }
.alg-root .alg-svg .alg-foot-val.remove{ fill:var(--alg-caution); }
.alg-root .alg-svg .alg-scale{ font-size:9.5px; letter-spacing:.5px; }

/* The drawing sits outside the column grid so it gets the full width. */
.alg-root .alg-draw-card{ margin:0 24px 24px; }
.alg-root .alg-draw-card[hidden]{ display:none; }