/* reactor.css — "Reactor Control" homepage components (v4 control-room skin). * * Loaded ONLY by index.html, AFTER dashboard.css + themes.css. Every color is * derived from the theme token bridge dashboard.css sets on * (--bg/--bg-elev/--border/--text/--accent/--gold/--warn/--danger/--info/--glow), * so the public theme switcher re-skins the whole panel deck for free. Canvas * instruments (gauges, strip chart) read the same tokens at draw time in * js/reactor-dashboard.js and re-render on theme change. * * Component map (mirrors a reactor operator's panel wall): * .placard engraved spec strip (pool terms + live network conditions) * .panel bezelled instrument panel with corner screws + title strip * .annun/.lamp annunciator warning-light grid (service + region health) * .counter seven-segment style numeric readouts * .ledbar segmented LED bargraph (share quality) * .mimic SVG process-flow diagram (miners → stratum → core → node) * .switchbank region patch-bay toggle switches * .rods fuel-rod block-maturity columns * .tty payout teletype log */ /* derived chrome tokens (neutral bezels regardless of theme accent) */ body { --rx-inset: color-mix(in srgb, var(--bg) 80%, #000); --rx-bezel: color-mix(in srgb, var(--text) 16%, var(--bg)); --rx-bezel-hi: color-mix(in srgb, var(--text) 28%, var(--bg)); --rx-line: color-mix(in srgb, var(--text) 9%, var(--bg)); } /* ── page head: operator strip (UTC clock + master lamp) ────────────────── */ .deck-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .deck-head h1 { font-family: var(--mono); font-size: 22px; margin: 0; font-weight: 700; letter-spacing: .5px; color: var(--text); text-shadow: 0 0 10px var(--glow); } .deck-head .sub { color: var(--text-dim); font-size: 14px; } .deck-clockrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .master-lamp { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--bg)); border-radius: 5px; padding: 6px 13px; background: color-mix(in srgb, var(--ok) 7%, transparent); box-shadow: 0 0 14px -4px var(--glow); } .master-lamp .led { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: rx-lampbeat 3s ease-in-out infinite; flex: none; } .master-lamp.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--bg)); background: color-mix(in srgb, var(--warn) 7%, transparent); box-shadow: none; } .master-lamp.warn .led { background: var(--warn); box-shadow: 0 0 8px var(--warn); } .master-lamp.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--bg)); background: color-mix(in srgb, var(--danger) 7%, transparent); box-shadow: none; } .master-lamp.bad .led { background: var(--danger); box-shadow: 0 0 8px var(--danger); } @keyframes rx-lampbeat { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* ── spec placard (static pool facts, engraved) ─────────────────────────── */ .placard { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border: 1px solid var(--rx-bezel); border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 80%, var(--text) 4%), var(--bg-elev)); box-shadow: inset 0 1px 0 var(--rx-bezel-hi); margin-bottom: 16px; } .placard span { display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; text-align: center; padding: 8px 12px; font-family: var(--mono); border-right: 1px solid var(--rx-line); border-bottom: 1px solid var(--rx-line); } /* engraved label (uppercased) sits above the live value; value keeps its natural case so units like "kG/s" read correctly. */ .placard i { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--text-mute); } .placard b { font-size: 13px; letter-spacing: .04em; color: var(--accent); font-weight: 700; text-shadow: 0 0 8px var(--glow); white-space: nowrap; } /* ── panel chrome: bezel + corner screws + engraved title strip ─────────── */ .deck { display: flex; flex-direction: column; gap: 16px; } .deck-row { display: grid; gap: 16px; } /* minmax(0,…) — a bare 1fr is minmax(auto,1fr); the auto floor lets a panel with wide/unbreakable dynamic content (long payout lines, rods) blow its track past the viewport and desync sibling widths. minmax(0,…) lets tracks shrink below content. */ .deck-row.half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* align-items:start so P-01 (tall: gauges + counters + LED bar) and P-02 (short lamp grid) size to their own content — the annunciator no longer stretches to P-01's height and leaves a dead strip at its foot. (half rows stay stretched so their side-by-side panels stay matched.) */ .deck-row.main { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } /* P-04/P-05 connect row: neither panel can be designated the tall one. P-05 carries the region-colour

, which swings its height ~110px, so opening it flips which side is taller — and start-alignment then just moves the gap to the other panel's foot. So: keep the row stretch-aligned (the two bezels always match, whatever is open) and let each body centre itself, so the slack lands as symmetric padding instead of a hole at one panel's foot. Same fill pattern as .gateways-panel below. */ .connect-row > .panel { display: flex; flex-direction: column; } .connect-row > .panel > .panel-body { flex: 1; display: flex; flex-direction: column; justify-content: center; } /* Chart wraps hold fixed-height canvases — never let the flex context shrink them. */ .connect-row .chart-wrap { flex: none; } .panel { min-width: 0; /* pair with minmax(0,…) so overflow:auto children clip instead of expanding the panel */ position: relative; border: 1px solid var(--rx-bezel); border-radius: var(--radius); background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 86%, var(--text) 3%), var(--bg-elev)); box-shadow: inset 0 1px 0 var(--rx-bezel-hi), 0 10px 30px -18px #000; } .panel::before, .panel::after, .panel > .screws::before, .panel > .screws::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--rx-bezel-hi), var(--rx-inset) 70%); box-shadow: inset 0 0 2px #000; } .panel::before { top: 7px; left: 7px; } .panel::after { top: 7px; right: 7px; } .panel > .screws::before { bottom: 7px; left: 7px; } .panel > .screws::after { bottom: 7px; right: 7px; } .panel-title { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 22px 9px; border-bottom: 1px solid var(--rx-line); font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); text-shadow: none; } .panel-title .tag { color: var(--accent2); letter-spacing: .1em; white-space: nowrap; } .panel-title .right { margin-left: auto; color: var(--text-mute); letter-spacing: .06em; font-weight: 400; text-transform: none; text-align: right; } /* Live UTC station clock, inlined into the P-01 title strip (was a boxed chip in the header). Tinted + tabular so the seconds tick doesn't shift the "· live · 60s" text. */ .panel-title .pt-clock { color: var(--info); font-variant-numeric: tabular-nums; } .panel-body { padding: 18px 22px 20px; } /* ── right column: P-02 annunciator + P-02b gateway array stacked ───────── The two short lamp panels stack in one grid cell; the cell stretches to P-01's height (overriding the row's align-items:start) and the gateway panel flex-grows to absorb the slack — so the right column no longer leaves a dead band below the annunciator. */ .deck-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .deck-row.main .deck-col { align-self: stretch; } .deck-row.main .gateways-panel { flex: 1 1 auto; display: flex; flex-direction: column; } .gateways-panel .panel-body { flex: 1; display: flex; flex-direction: column; justify-content: center; } /* ── annunciator grid ───────────────────────────────────────────────────── */ .annun { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } /* Category divider label — spans the full lamp grid, engraved-plate styling. */ .annun-cat { grid-column: 1 / -1; margin-top: 6px; padding-left: 2px; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); } .annun-cat:first-child { margin-top: 0; } /* Integrity has 2 lamps — span each across 2 of the 4 columns so the row fills evenly instead of leaving a ragged gap. Targeted by id (not a class) because setLamp() rebuilds each lamp's className every poll, which would wipe a modifier class. */ #an-stale, #an-orphan { grid-column: span 2; } /* ── gateway array (P-02b): region health lamps, 2-wide for larger targets ── */ .gateways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; } .gateways-empty { grid-column: 1 / -1; text-align: center; padding: 18px 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); } .lamp { border: 1px solid var(--rx-line); border-radius: 5px; text-align: center; padding: 10px 8px 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--text-dim) 45%, var(--bg)); background: var(--rx-inset); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5); } .lamp small { display: block; font-size: 9px; letter-spacing: .08em; margin-top: 2px; color: inherit; opacity: .8; } .lamp.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--bg)); background: color-mix(in srgb, var(--ok) 7%, var(--rx-inset)); text-shadow: 0 0 8px var(--glow); box-shadow: inset 0 0 14px color-mix(in srgb, var(--ok) 10%, transparent); } .lamp.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--bg)); background: color-mix(in srgb, var(--warn) 7%, var(--rx-inset)); text-shadow: 0 0 8px color-mix(in srgb, var(--warn) 50%, transparent); animation: rx-annblink 2.2s step-end infinite; } .lamp.alarm { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--bg)); background: color-mix(in srgb, var(--danger) 7%, var(--rx-inset)); text-shadow: 0 0 8px color-mix(in srgb, var(--danger) 50%, transparent); animation: rx-annblink 1.1s step-end infinite; } @keyframes rx-annblink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .45; } } /* ── instruments: gauges (top) + counters + LED bargraph (below) ─────────── */ /* Stacked flex column so the two gauges sit on their own row and the counters/LED bar run full width beneath them — no more vertical-centering gap beside a taller readout column, and it mirrors the mobile stack so there's a single layout to reason about. */ .instruments { display: flex; flex-direction: column; gap: 18px; } .gauge-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(16px, 5vw, 52px); } .gauge-block { text-align: center; } .gauge-block canvas { display: block; margin: 0 auto; width: 190px; height: 150px; max-width: 100%; } .gauge-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; line-height: 1.6; } .gauge-label b { color: var(--accent); text-shadow: 0 0 8px var(--glow); font-size: 12.5px; } /* Legend for the hashrate dial's info-blue 24h-peak reference tick (matches --info). */ .gauge-peakkey { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin-top: 3px; } .gauge-peakkey .pk { display: inline-block; width: 2px; height: 8px; margin-right: 4px; vertical-align: -1px; background: var(--info); box-shadow: 0 0 6px var(--info); } /* Full-width 3-column strip under the gauges (6 readouts → 2 rows); minmax(0,1fr) lets each tile shrink to its track, and each .counter is overflow:hidden + container-type so labels clip and values self-shrink instead of overflowing. Drops to 2 columns on phones. */ .counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .counter { background: var(--rx-inset); border: 1px solid var(--rx-line); border-radius: 6px; padding: 10px 14px 9px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, .55); /* min-width:0 lets the grid item shrink to its track; overflow guards against any value ever spilling the tile; container-type sizes the readout to THIS tile's width (cqw) so a long value like block height self-shrinks instead of overflowing. */ min-width: 0; overflow: hidden; container-type: inline-size; } .counter .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); } .counter .v { font-family: var(--mono); font-size: clamp(14px, 11cqw, 24px); font-weight: 700; letter-spacing: .03em; margin-top: 3px; color: var(--accent); text-shadow: 0 0 10px var(--glow); font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; } .counter .v small { font-size: 12px; color: var(--text-dim); text-shadow: none; letter-spacing: .04em; } .counter.alt .v { color: var(--info); text-shadow: 0 0 10px color-mix(in srgb, var(--info) 45%, transparent); } .ledbar-wrap { margin-top: 14px; } .ledbar-title { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; } .ledbar { display: flex; gap: 3px; height: 16px; } .ledbar span { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--text) 6%, var(--rx-inset)); } .ledbar span.g { background: color-mix(in srgb, var(--ok) 62%, var(--bg)); box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 35%, transparent); } .ledbar span.a { background: color-mix(in srgb, var(--warn) 62%, var(--bg)); box-shadow: 0 0 6px color-mix(in srgb, var(--warn) 30%, transparent); } .ledbar span.r { background: color-mix(in srgb, var(--danger) 62%, var(--bg)); box-shadow: 0 0 6px color-mix(in srgb, var(--danger) 30%, transparent); } .ledbar-key { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); letter-spacing: .05em; font-variant-numeric: tabular-nums; } .ledbar-key .g { color: var(--ok); } .ledbar-key .a { color: var(--warn); } .ledbar-key .r { color: var(--danger); } /* ── mimic flow diagram — reflowing circuit (row on desktop, column on mobile) ── Rebuilt from a fixed 920px SVG (needed horizontal swipe on phones) to an HTML flex circuit that stacks vertically on narrow screens. Stations keep their live IDs (mi-miners, mi-regions, the mi-core-… set, mi-node) so reactor-dashboard.js is unchanged. NB: don't write the core IDs with a star-slash wildcard here — that sequence closes the CSS comment early and the next rule gets eaten. */ .mimic-wrap { overflow: visible; } .mimic { display: flex; align-items: stretch; flex-wrap: nowrap; } .mimic .mnode { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 13px; border-radius: 8px; border: 1px solid var(--rx-bezel); background: var(--rx-inset); box-shadow: inset 0 1px 0 var(--rx-bezel-hi); } .mimic .mnode.core { border-color: color-mix(in srgb, var(--accent) 55%, var(--bg)); box-shadow: inset 0 1px 0 var(--rx-bezel-hi), 0 0 18px -7px var(--glow); } .mimic .lbl { color: var(--text-dim); font: 700 10px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; } .mimic .val { color: var(--accent); font: 700 12.5px/1.25 var(--mono); letter-spacing: .04em; overflow-wrap: anywhere; } .mimic .val.cy { color: var(--info); } .mimic .val.mg { color: var(--accent2); } .mimic .val.bad { color: var(--danger); } /* animated RGB "dot" connector between stations */ .mimic .mlink { flex: 0 0 42px; min-width: 42px; align-self: center; position: relative; height: 24px; } .mimic .mlink i { position: absolute; left: 4px; right: 4px; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 4px; background: linear-gradient(90deg, #ff2d55, #ff9500, #ffd60a, #34c759, #00c7be, #0a84ff, #5e5ce6, #bf5af2, #ff2d55); background-size: 300% 100%; -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 15px); mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 15px); animation: rx-dots 1s linear infinite, rx-rgb 6s linear infinite; } .mimic .mlink::after { content: attr(data-flow); position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); font: 700 8px var(--mono); letter-spacing: .1em; color: var(--text-mute); white-space: nowrap; } @keyframes rx-dots { to { -webkit-mask-position: 15px 0; mask-position: 15px 0; } } @keyframes rx-rgb { to { background-position: 300% 0; } } .mimic-note { margin: 14px 0 0; font-size: 12px; color: var(--text-dim); line-height: 1.5; } .mimic-note b { color: var(--text); } .mimic-note .dim { color: var(--text-mute); } @media (max-width: 760px) { .mimic { flex-direction: column; align-items: stretch; } .mimic .mnode { flex: 0 0 auto; } .mimic .mlink { flex: 0 0 30px; height: 34px; min-width: 0; width: 100%; } .mimic .mlink i { left: 50%; right: auto; top: 4px; bottom: 4px; height: auto; width: 4px; transform: translateX(-50%); background: linear-gradient(180deg, #ff2d55, #ff9500, #ffd60a, #34c759, #00c7be, #0a84ff, #5e5ce6, #bf5af2, #ff2d55); background-size: 100% 300%; -webkit-mask: repeating-linear-gradient(180deg, #000 0 4px, transparent 4px 15px); mask: repeating-linear-gradient(180deg, #000 0 4px, transparent 4px 15px); animation: rx-dots-v 1s linear infinite, rx-rgb-v 6s linear infinite; } .mimic .mlink::after { bottom: auto; top: 50%; left: calc(50% + 14px); transform: translateY(-50%); } } @keyframes rx-dots-v { to { -webkit-mask-position: 0 15px; mask-position: 0 15px; } } @keyframes rx-rgb-v { to { background-position: 0 300%; } } /* ── strip chart ────────────────────────────────────────────────────────── */ .chart-wrap { position: relative; } .chart-wrap canvas { display: block; width: 100%; height: 240px; } .chart-tip { position: absolute; pointer-events: none; display: none; z-index: 5; background: var(--rx-inset); border: 1px solid var(--rx-bezel); border-radius: 5px; padding: 6px 10px; font-family: var(--mono); font-size: 12px; color: var(--accent); white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums; } .chart-tip .t { color: var(--text-mute); } .chart-empty { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--text-mute); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; } /* P-04 stacked recorders: sub-labels between charts + per-chart heights (three traces share one panel, so each runs shorter than the default 240px single chart). */ .chart-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin: 14px 0 6px; /* flex (not a float) so the right-aligned share readout wraps to its own line on narrow screens instead of overlapping the label text */ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .chart-sub:first-child { margin-top: 0; } .chart-sub .dim { color: var(--text-mute); text-transform: none; letter-spacing: .06em; } /* Pool share of network hashrate, printed on the network sub-label. The relationship between the two traces is a NUMBER, not a second line squashed onto the pool axis — at a fraction of a percent, any shared-axis or wedge rendering of it is invisible. Text tokens only. */ .chart-sub .share { margin-left: auto; text-transform: none; letter-spacing: .04em; color: var(--text-dim); font-variant-numeric: tabular-nums; } .chart-sub .share[hidden] { display: none; } .chart-sub .share b { color: var(--accent); font-weight: 700; } .chart-wrap--pool canvas { height: 170px; } /* Network runs as a short sparkline: its job here is shape comparison against the pool trace above (which carries the shared x axis), so it doesn't need full height or its own labels. */ .chart-wrap--net canvas { height: 70px; } /* 24H/7D/30D toggle riding the panel title (same interaction as the miners-stats rangebar, sized down to fit a title row). */ .chart-range { display: inline-flex; gap: 4px; } .chart-range button { font: inherit; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; padding: 2px 8px; border-radius: 4px; cursor: pointer; background: var(--rx-inset, rgba(255,255,255,.04)); color: var(--text-dim); border: 1px solid var(--rx-bezel, rgba(255,255,255,.12)); transition: background .12s, color .12s; } .chart-range button:hover { color: var(--text); } .chart-range button.active { background: var(--accent); border-color: var(--accent); color: var(--bg, #07090c); font-weight: 600; } /* ── region patch bay ───────────────────────────────────────────────────── */ /* Stack the switch bank (full-width row of region toggles) above the endpoint readout — the old `auto 1fr` grid reserved a tall empty column beside the short switch row and crushed the endpoint/notes into a narrow strip. */ .patchbay { display: flex; flex-direction: column; gap: 22px; } .switchbank { display: flex; gap: 10px; flex-wrap: wrap; } /* Region SELECTOR chips. This is a single-select — "which region's endpoint do I want to copy" — NOT an on/off switch (the old toggle metaphor implied you were powering a region up/down). Selection is shown by the accent outline; a separate LED shows live status, so "I'm viewing this" never gets confused with "this is up". */ .rgn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 13px; border-radius: 8px; font-family: var(--mono); background: var(--rx-inset); border: 1px solid var(--rx-bezel); color: var(--text-dim); transition: border-color .12s ease, background .12s ease, color .12s ease; } .rgn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--bg)); color: var(--text); } .rgn .rgn-led { width: 9px; height: 9px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--text) 20%, var(--bg)); } .rgn.s-online .rgn-led { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .rgn.s-idle .rgn-led { background: var(--info); box-shadow: 0 0 7px color-mix(in srgb, var(--info) 55%, transparent); } .rgn.s-degraded .rgn-led { background: var(--warn); } .rgn.s-down .rgn-led { background: var(--danger); box-shadow: 0 0 8px var(--danger); } .rgn .rgn-name { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .rgn .rgn-pin { font-size: 11px; margin-left: -2px; } /* selected — accent outline, deliberately NOT the LED colour */ .rgn.sel { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--rx-inset)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 14px -6px var(--glow); } .rgn.sel .rgn-name { color: var(--accent); } /* Collapsed colour-legend + guidance disclosure (default closed — keeps the patch bay compact). */ .rgn-help { font-family: var(--mono); } .rgn-help > summary { cursor: pointer; width: fit-content; list-style: none; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); padding: 2px 0; } .rgn-help > summary::-webkit-details-marker { display: none; } .rgn-help > summary::before { content: "▸ "; color: var(--accent2); } .rgn-help[open] > summary::before { content: "▾ "; } .rgn-help > summary:hover { color: var(--text); } .rgn-help .rgn-legend { margin-top: 10px; } .rgn-help .rgn-note { margin-top: 8px; } /* LED legend */ .rgn-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--text-mute); } .rgn-legend span { display: inline-flex; align-items: center; gap: 6px; } .rgn-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .rgn-legend .l-online { background: var(--ok); box-shadow: 0 0 6px var(--ok); } .rgn-legend .l-idle { background: var(--info); box-shadow: 0 0 6px color-mix(in srgb, var(--info) 55%, transparent); } .rgn-legend .l-down { background: var(--danger); box-shadow: 0 0 6px var(--danger); } .rgn-note { margin-top: 8px; max-width: 620px; font-size: 11.5px; line-height: 1.55; color: var(--text-mute); } .rgn-note b { font-weight: 600; } .rgn-note .c-ok { color: var(--ok); } .rgn-note .c-info { color: var(--info); } .rgn-note .c-bad { color: var(--danger); } .patch-readout { max-width: 760px; } /* keep the endpoint box + notes at a readable width on wide desktop */ .patch-readout .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; } .uri-row { display: flex; gap: 8px; align-items: stretch; } .uri-row code { flex: 1; display: flex; align-items: center; font-family: var(--mono); font-size: 13.5px; padding: 11px 14px; background: var(--rx-inset); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--bg)); border-radius: 5px; color: var(--accent); text-shadow: 0 0 8px var(--glow); word-break: break-all; box-shadow: inset 0 2px 10px rgba(0, 0, 0, .55); } .patch-meta { font-family: var(--mono); font-size: 11.5px; color: var(--text-mute); margin-top: 8px; letter-spacing: .04em; font-variant-numeric: tabular-nums; } .patch-note { margin-top: 14px; font-size: 13px; color: var(--text-dim); line-height: 1.75; } .patch-note code { font-family: var(--mono); color: var(--info); background: var(--rx-inset); border: 1px solid var(--rx-line); border-radius: 4px; padding: 1px 6px; font-size: 12px; } /* Pointer from the patch bay down to the P-05b setup panel (the guide used to live here). */ .patch-hint { margin-top: 12px; font-size: 12.5px; color: var(--text-mute); } .patch-hint b { color: var(--text-dim); font-weight: 600; } /* Miner-setup guide — a theme-native mock of an ASIC web panel's "Pool Setting" form beside the steps that explain it. Always visible in the full-width P-05b panel; the old .miner-guide

chrome was dropped with the disclosure (2026-07-19). */ .mform { margin-top: 12px; max-width: 560px; border: 1px solid var(--rx-line); border-radius: 6px; background: var(--rx-inset); overflow: hidden; box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35); } .mform-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); background: color-mix(in srgb, var(--accent) 7%, transparent); border-bottom: 1px solid var(--rx-line); } .mform-crumb { font-size: 9.5px; letter-spacing: .08em; text-transform: none; color: var(--text-mute); } .mform-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 12px; } .mform-row + .mform-row { border-top: 1px solid color-mix(in srgb, var(--rx-line) 55%, transparent); } .mform-k { font-family: var(--mono); font-size: 11px; color: var(--text-mute); text-align: right; } .mform-val { font-family: var(--mono); font-size: 12px; color: var(--text-dim); padding: 6px 10px; background: var(--bg); border: 1px solid var(--rx-line); border-radius: 4px; word-break: break-all; min-width: 0; } .mform-val.is-live { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--bg)); text-shadow: 0 0 8px var(--glow); } .mguide-steps { margin: 12px 0 2px; padding-left: 20px; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); } .mguide-steps li + li { margin-top: 6px; } .mguide-steps code { font-family: var(--mono); color: var(--info); background: var(--rx-inset); border: 1px solid var(--rx-line); border-radius: 4px; padding: 0 5px; font-size: 11.5px; } /* Two-up layout for the full-width P-05b panel: the ASIC mock beside the steps that describe it, so you read a field and its explanation on the same line of sight. Single column below 1000px (and inside any narrower host) — the mock's 120px label column plus a wrapping value needs ~360px before it starts looking squeezed. */ .mguide-cols { display: grid; gap: 12px 28px; align-items: start; } .mguide-cols > .mform { margin-top: 0; } .mguide-cols > .mguide-steps { margin-top: 0; } @media (min-width: 1000px) { .mguide-cols { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); } } @media (max-width: 480px) { .mform-row { grid-template-columns: minmax(0, 1fr); gap: 3px; } .mform-k { text-align: left; } } /* ── fuel-rod block maturity ────────────────────────────────────────────── */ .rods { display: flex; gap: 18px; align-items: flex-end; overflow-x: auto; padding: 6px 2px 2px; scrollbar-width: thin; } .rods .rods-empty { color: var(--text-mute); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; padding: 30px 0; } .rod { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; } .rod .tube { width: 26px; height: 120px; border-radius: 6px; position: relative; overflow: hidden; background: var(--rx-inset); border: 1px solid var(--rx-line); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6); } .rod .fill { position: absolute; left: 2px; right: 2px; bottom: 2px; border-radius: 4px; min-height: 3px; background: linear-gradient(180deg, var(--warn), color-mix(in srgb, var(--warn) 55%, var(--bg))); box-shadow: 0 0 10px color-mix(in srgb, var(--warn) 35%, transparent); } .rod.done .fill { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--bg))); box-shadow: 0 0 10px var(--glow); } .rod.orphan .fill { background: linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 55%, var(--bg))); box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 35%, transparent); } .rod .h { font-family: var(--mono); font-size: 10.5px; color: var(--text); letter-spacing: .03em; font-variant-numeric: tabular-nums; } .rod .m { font-family: var(--mono); font-size: 9.5px; color: var(--text-mute); font-variant-numeric: tabular-nums; } .rod.done .m { color: var(--ok); } .rod.orphan .m { color: var(--danger); } /* ── payout teletype ────────────────────────────────────────────────────── */ .tty { background: var(--rx-inset); border: 1px solid var(--rx-line); border-radius: 6px; box-shadow: inset 0 2px 12px rgba(0, 0, 0, .55); padding: 13px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.9; color: var(--text-dim); height: 172px; overflow: hidden; position: relative; font-variant-numeric: tabular-nums; } .tty div b { color: var(--accent); font-weight: 600; } .tty div .via { color: var(--info); } .tty::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px; background: linear-gradient(var(--rx-inset), transparent); pointer-events: none; } /* ── procedures ─────────────────────────────────────────────────────────── */ .proc { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; } .proc li { break-inside: avoid; padding: 8px 0 8px 24px; position: relative; color: var(--text-dim); font-size: 13.5px; border-bottom: 1px dashed var(--rx-line); } .proc li::before { content: "▸"; position: absolute; left: 4px; color: var(--accent2); } .proc b { color: var(--text); } /* ── motion & responsive ────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .master-lamp .led, .lamp.warn, .lamp.alarm, .mimic .mlink i { animation: none !important; } } @media (max-width: 900px) { .deck-row.half, .deck-row.main { grid-template-columns: minmax(0, 1fr); } .patchbay { gap: 18px; } .proc { columns: 1; } .panel-body { padding: 15px 16px 17px; } .panel-title { padding: 10px 16px 8px; letter-spacing: .16em; } } @media (max-width: 640px) { /* gauge-row flex-wraps the two gauges to a vertical stack on its own; counters tighten to 2 columns so the readouts stay legible on a phone. */ .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .annun { grid-template-columns: repeat(2, 1fr); } .deck-head { align-items: flex-start; flex-direction: column; } }