/*
 * ==============================================================================
 * file_id: SOM-STY-PENDING-v1.0.0
 * name: style.css
 * description: Hex-plate graphite/amber/cyan styles for fluid.somacosf.com (reused by verify.somacosf.com) (stamp pending: Witness assigns)
 * project_id: SOMACO-FLUID
 * category: sty
 * tags: [fluid, styles, hex]
 * created: 2026-10-25
 * modified: 2026-10-25
 * version: 1.0.0
 * agent_id: devin
 * execution: Stylesheet
 * ==============================================================================
 */
:root{--bg:#1d2124;--panel:#262b2f;--line:#3a4247;--teal:#4d6f74;--cyan:#6fd3d0;--amber:#e0a84e;--cream:#f3ead8;--mut:#9aa6a8;--red:#ff6b6b;--green:#7ad38c}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--cream);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.55}
header,main{position:relative;z-index:1}
header{display:flex;align-items:center;gap:18px;padding:10px 18px;border-bottom:1px solid var(--line);background:rgba(29,33,36,.88);backdrop-filter:blur(4px);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:flex;gap:10px;align-items:center}
.brand b{letter-spacing:.14em;font-size:15px;color:var(--amber)}
.brand small{display:block;color:var(--mut);font-size:12px}
nav#tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
button,.btn{font:inherit;color:var(--cream);background:#30373b;border:1px solid var(--line);padding:6px 12px;cursor:pointer;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
button:hover,.btn:hover{background:#3a4348}
button.on{background:var(--teal);border-color:var(--cyan)}
button.primary{background:var(--amber);color:#1d2124;font-weight:700;border-color:var(--amber)}
button.primary:hover{filter:brightness(1.08)}
.pill{background:var(--amber);color:#1d2124;border-radius:8px;padding:0 6px;font-size:11px;font-weight:700}
main{padding:14px 18px 40px;max-width:1500px;margin:0 auto}
.tab{display:none}.tab.on{display:block}
.panel{background:rgba(38,43,47,.92);border:1px solid var(--line);padding:12px 14px;position:relative;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.grid{display:grid;grid-template-columns:340px 1fr 300px;grid-template-areas:"prog viz out" "trace trace trace";gap:12px}
.prog{grid-area:prog}.viz{grid-area:viz;min-height:430px;display:flex;flex-direction:column}.out{grid-area:out}.trace{grid-area:trace}
@media(max-width:1100px){.grid{grid-template-columns:1fr;grid-template-areas:"prog" "viz" "out" "trace"}}
label{display:block;color:var(--mut);font-size:12px;margin:6px 0 3px}
select,input,textarea{font:inherit;color:var(--cream);background:#1a1e21;border:1px solid var(--line);padding:6px 8px;width:100%}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical}
#program{font-size:16px;color:var(--cyan)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.chk{display:flex;align-items:center;gap:6px;margin:0;color:var(--mut)}.chk input{width:auto}
.note{color:var(--amber);margin:4px 0 8px;font-size:13px;min-height:1.2em}
.hint,.small{color:var(--mut);font-size:12px}
code{background:#1a1e21;padding:1px 5px;color:var(--cyan)}
.tokens{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.tok{padding:2px 8px;border:1px solid var(--line);font-family:ui-monospace,monospace;font-size:12px;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%)}
.tok.num{color:var(--cyan)}.tok.op{color:var(--amber)}.tok.done{background:#33403f}.tok.cur{background:var(--amber);color:#1d2124}.tok.bad{background:var(--red);color:#1d2124}
.theta label{display:flex;align-items:center;gap:8px}.theta input{flex:1}
#net{width:100%;flex:1;min-height:380px;display:block}
.legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--mut);font-size:12px;margin-top:6px}
.sw{display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-2px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.sw.dash{background:repeating-linear-gradient(90deg,var(--mut) 0 3px,transparent 3px 6px)}
h2{color:var(--amber);margin:4px 0 10px;font-size:18px;letter-spacing:.03em}
h3{color:var(--amber);margin:4px 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
table{width:100%;border-collapse:collapse;font-size:12px;font-family:ui-monospace,monospace}
th,td{border-bottom:1px solid var(--line);padding:4px 5px;text-align:left}th{color:var(--mut);font-weight:500}
.ebar{display:flex;height:18px;background:#1a1e21;border:1px solid var(--line);margin:4px 0}
.ebar div{height:100%}
.elegend{font-size:12px;font-family:ui-monospace,monospace;display:grid;grid-template-columns:auto 1fr;gap:1px 10px}
.verdict{margin-top:10px;padding:8px 10px;font-size:13px;border-left:3px solid var(--green);background:#1f2a24}
.verdict.bad{border-color:var(--red);background:#2e1f1f}.verdict.warn{border-color:var(--amber);background:#2e291f}
pre{margin:0;white-space:pre-wrap;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#cfd8d6;max-height:300px;overflow:auto}
pre.code{max-height:none;background:#1a1e21;padding:12px;border:1px solid var(--line)}
.prose{max-width:980px;margin:0 auto}
.prose p,.prose li{max-width:78ch}
.prose h2{margin-top:18px}
.opcard{display:grid;grid-template-columns:90px 1fr 1.2fr;gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.opcard .tk{font-family:ui-monospace,monospace;color:var(--amber);font-weight:700;font-size:15px}
.opcard .ex{font-family:ui-monospace,monospace;font-size:12px;color:var(--cyan)}
.opcard .tex{font-size:15px}
.updlist{padding-left:22px}.updlist li{margin:10px 0;padding:8px 10px;background:#1f2427;border:1px solid var(--line)}
.updlist .meta{color:var(--mut);font-size:12px;font-family:ui-monospace,monospace;word-break:break-all}
dialog{background:var(--panel);color:var(--cream);border:1px solid var(--amber);padding:0;width:min(980px,96vw);max-height:92vh}
dialog::backdrop{background:rgba(10,12,14,.7)}
dialog form{display:flex;flex-direction:column;max-height:92vh}
.dlghead{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line);position:static;background:none}
.dlghead b{color:var(--amber);letter-spacing:.1em}
.subtabs{display:flex;gap:4px}
.x{margin-left:auto}
.sub{display:none;padding:10px 14px;overflow:auto}.sub.on{display:block}
dialog footer{display:flex;gap:10px;align-items:end;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line)}
dialog footer label{margin:0}dialog footer .grow{flex:1;min-width:240px}
.err{color:var(--red);font-size:12px;width:100%;white-space:pre-wrap}.err.ok{color:var(--green)}
.opedit{border:1px solid var(--line);padding:8px;margin:8px 0;display:grid;grid-template-columns:120px 1fr 1fr;gap:6px 10px}
.opedit label{margin:0}.opedit .wide{grid-column:1/-1}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--amber);color:#1d2124;padding:8px 16px;font-weight:600;opacity:0;transition:opacity .25s;z-index:20;pointer-events:none}
#toast.on{opacity:1}
/* shared site nav + panel look for learn/flows (shell.js) */
nav.sitenav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav.sitenav a.btn{text-decoration:none;display:inline-block}
nav.sitenav a.btn.on{background:var(--teal);border-color:var(--cyan)}
nav#tabs+nav.sitenav{margin-left:8px}
.fp{background:rgba(38,43,47,.92)!important;border-radius:0!important;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.fp h2{color:var(--amber)}