/* ============================================================================
PRSM SOLAR — FIELD-GUIDE DESIGN SYSTEM
Rugged / off-grid / Vermont-woods utilitarian field manual.
Type: Archivo (UI) + IBM Plex Mono (data/specs/tags)
========================================================================== */
:root {
/* --- type --- */
--f-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
--f-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
/* --- THEME: FIELD GUIDE (default · aged paper) --- */
--paper: oklch(0.955 0.012 86);
--paper-2: oklch(0.925 0.014 84);
--surface: oklch(0.985 0.008 88);
--surface-2: oklch(0.972 0.010 86);
--ink: oklch(0.245 0.018 64);
--ink-2: oklch(0.405 0.018 66);
--ink-3: oklch(0.555 0.016 70);
--rule: oklch(0.255 0.02 64 / 0.16);
--rule-2: oklch(0.255 0.02 64 / 0.30);
--pine: oklch(0.470 0.085 152);
--pine-soft: oklch(0.470 0.085 152 / 0.12);
--amber: oklch(0.585 0.115 58);
--amber-soft: oklch(0.585 0.115 58 / 0.13);
--clay: oklch(0.530 0.135 32);
--clay-soft: oklch(0.530 0.135 32 / 0.13);
--slate: oklch(0.500 0.060 244);
--slate-soft: oklch(0.500 0.060 244 / 0.13);
--shadow: 0 1px 2px oklch(0.245 0.02 64 / 0.06), 0 8px 24px oklch(0.245 0.02 64 / 0.07);
--shadow-lg: 0 2px 6px oklch(0.245 0.02 64 / 0.08), 0 24px 60px oklch(0.245 0.02 64 / 0.13);
--radius: 4px;
--lead: var(--pine);
}
[data-theme="topo"] {
--paper: oklch(0.255 0.018 162);
--paper-2: oklch(0.225 0.018 162);
--surface: oklch(0.305 0.018 160);
--surface-2: oklch(0.285 0.018 160);
--ink: oklch(0.935 0.012 96);
--ink-2: oklch(0.800 0.014 94);
--ink-3: oklch(0.660 0.016 92);
--rule: oklch(0.92 0.01 96 / 0.14);
--rule-2: oklch(0.92 0.01 96 / 0.26);
--pine: oklch(0.680 0.110 154);
--pine-soft: oklch(0.680 0.110 154 / 0.16);
--amber: oklch(0.760 0.130 64);
--amber-soft: oklch(0.760 0.130 64 / 0.16);
--clay: oklch(0.680 0.150 36);
--clay-soft: oklch(0.680 0.150 36 / 0.16);
--slate: oklch(0.700 0.080 240);
--slate-soft: oklch(0.700 0.080 240 / 0.16);
--shadow: 0 1px 2px oklch(0 0 0 / 0.30), 0 10px 30px oklch(0 0 0 / 0.36);
--shadow-lg: 0 2px 6px oklch(0 0 0 / 0.34), 0 28px 64px oklch(0 0 0 / 0.46);
}
[data-theme="birch"] {
--paper: oklch(0.975 0.008 120);
--paper-2: oklch(0.950 0.012 120);
--surface: oklch(0.995 0.004 120);
--surface-2: oklch(0.983 0.006 118);
--ink: oklch(0.285 0.022 158);
--ink-2: oklch(0.440 0.020 150);
--ink-3: oklch(0.585 0.016 140);
--rule: oklch(0.285 0.02 158 / 0.14);
--rule-2: oklch(0.285 0.02 158 / 0.26);
--pine: oklch(0.500 0.110 158);
--pine-soft: oklch(0.500 0.110 158 / 0.12);
--amber: oklch(0.605 0.125 66);
--amber-soft: oklch(0.605 0.125 66 / 0.13);
--clay: oklch(0.545 0.140 34);
--clay-soft: oklch(0.545 0.140 34 / 0.13);
--slate: oklch(0.520 0.070 240);
--slate-soft: oklch(0.520 0.070 240 / 0.13);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: var(--f-sans);
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-height: 1.45;
}
.topo-bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
opacity: 0.55;
background-image:
radial-gradient(120% 90% at 12% 8%, var(--pine-soft), transparent 60%),
radial-gradient(120% 90% at 92% 96%, var(--amber-soft), transparent 62%);
}
.topo-bg::after {
content: ""; position: absolute; inset: 0;
background-image:
repeating-linear-gradient(0deg, var(--rule) 0 1px, transparent 1px 27px),
repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 27px),
repeating-linear-gradient(0deg, var(--rule-2) 0 1px, transparent 1px 135px),
repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 135px);
opacity: 0.4;
-webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 38%, transparent 96%);
mask-image: radial-gradient(130% 100% at 50% 0%, #000 38%, transparent 96%);
}
.mono { font-family: var(--f-mono); }
.tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.08; }
.stamp {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--f-mono); font-size: 10px; font-weight: 500;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 3px 7px; border-radius: 3px; border: 1px solid var(--rule-2);
white-space: nowrap;
}
.stamp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.stamp.computed { color: var(--pine); border-color: color-mix(in oklch, var(--pine) 38%, transparent); background: var(--pine-soft); }
.stamp.estimate { color: var(--amber); border-color: color-mix(in oklch, var(--amber) 38%, transparent); background: var(--amber-soft); }
.stamp.warn { color: var(--clay); border-color: color-mix(in oklch, var(--clay) 38%, transparent); background: var(--clay-soft); }
.stamp.shore { color: var(--slate); border-color: color-mix(in oklch, var(--slate) 38%, transparent); background: var(--slate-soft); }
.stamp.plain { color: var(--ink-3); }
.flag { display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.04em; white-space:nowrap; }
.flag i { width:7px; height:7px; border-radius:50%; flex:none; }
.flag.pass i { background: var(--pine); }
.flag.price_corrected i { background: var(--amber); }
.flag.unverifiable i { background: var(--clay); }
.flag.out_of_stock i { background: var(--clay); box-shadow: inset 0 0 0 1.5px var(--surface); }
.flag.open_quote i { background: var(--slate); }
.flag.owned i { background: var(--ink-3); }
.flag.estimate i { background: var(--amber); opacity: 0.55; }
.sheet { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 6px; border: 3px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.hairline { height: 1px; background: var(--rule); border: 0; }
.dotrule { height: 0; border: 0; border-top: 1px dashed var(--rule-2); }
/* ============================ SCHEMATICS ================================= */
.wire { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wire.thin { stroke-width: 1.5; }
.wire.comms { stroke: var(--slate); stroke-dasharray: 2 4; stroke-width: 1.75; }
.wire.gnd { stroke: var(--ink-3); }
.sym { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sym.fill { fill: var(--surface); }
.node-rect { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.node-rect.pine { stroke: var(--pine); }
.node-rect.amber { stroke: var(--amber); }
.node-rect.slate { stroke: var(--slate); }
.junction { fill: var(--ink); }
.dlabel { font-family: var(--f-mono); color: var(--ink); height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; }
.dlabel .dt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.15; color: var(--ink); }
.dlabel .ds { font-size: 10px; color: var(--ink-2); line-height: 1.35; margin-top: 3px; letter-spacing: 0.01em; }
.dlabel .ds b { color: var(--ink); font-weight: 600; }
.wlabel { font-family: var(--f-mono); font-size: 10px; fill: var(--ink-2); }
.wlabel .hi { fill: var(--ink); font-weight: 600; }
.slabel { font-family: var(--f-mono); font-size: 9.5px; fill: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
.zp-stage { position: relative; overflow: hidden; background: var(--surface-2);
border: 1px solid var(--rule); border-radius: var(--radius); cursor: grab; touch-action: none; }
.zp-stage.dragging { cursor: grabbing; }
.zp-stage svg { display: block; }
.zp-controls { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 4; }
.zp-btn {
font-family: var(--f-mono); font-size: 14px; width: 32px; height: 32px;
display: grid; place-items: center; border-radius: var(--radius);
background: var(--surface); border: 1px solid var(--rule-2); color: var(--ink);
cursor: pointer; box-shadow: var(--shadow); line-height: 1; user-select: none;
}
.zp-btn:hover { background: var(--surface-2); }
.zp-btn.wide { width: auto; padding: 0 11px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.zp-hint { position: absolute; left: 12px; bottom: 14px; z-index: 4; }
.fig-cap { position:absolute; left:14px; top:12px; z-index:4; }