/* ════════════════════════════════════════════════════════════════════════ DEEPEN REFINERY — DESIGN SYSTEM Extracted verbatim from Assets/Deepen Refinery Mock/deepen_refinery.html. Tokens and class names are preserved EXACTLY so any page can use them. FONTS — pages MUST add these tags in (this stylesheet does NOT @import them; the mock loads them via for non-blocking fetch): THEME — set data-theme on ("light" default, "dark" for dark mode). The mock's pre-paint script reads localStorage('refinery-theme'). ════════════════════════════════════════════════════════════════════════ */ /* ─── COLOR SYSTEM: ONE ACCENT + SEMANTIC ONLY ────────────────────────── */ :root{ --bg0:#f4f2ee;--bg1:#f7f5f1;--bg2:#faf9f5;--bg3:#fcfbf8;--bg4:#ffffff; --b0:#edeae4;--b1:#e3e0da;--b2:#d4d0c9; --t1:#14110c;--t2:#5c5953;--t3:#6f6c64; /* --t3 darkened from #8c8881 for WCAG AA on warm backgrounds — intentional accessibility deviation from the mock */ /* Single accent — used for interactive elements, active states, links */ --a:#e84e0f;--ad:rgba(232,78,15,.1);--ag:rgba(232,78,15,.05); /* Semantic — used only for their meaning */ --green:#3f8e5b;--gd:rgba(63,142,91,.1); --amber:#b5790a;--wd:rgba(181,121,10,.1); --red:#d33a2c;--rd:rgba(211,58,44,.1); /* Quality tier labels — contained to badges/tier cards only */ --bronze:#9a7b53;--bzd:rgba(154,123,83,.1); --silver:#6b7585;--svd:rgba(107,117,133,.1); --gold:#b5790a; /* same as amber — intentional */ --platinum:#7c5bc2;--ptd:rgba(124,91,194,.1); /* Persona accents — ONLY in portal header banners */ --p-partner:#7c5bc2; --p-processor:#0e9384; --p-consumer:#3f8e5b; --r:8px;--r2:12px;--r3:16px; } /* ─── BASE / RESET ─────────────────────────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box} :focus-visible{outline:2px solid var(--a);outline-offset:2px} body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg0);color:var(--t1);-webkit-font-smoothing:antialiased;line-height:1.5;font-size:14px} .mono{font-family:'JetBrains Mono',monospace} .serif{font-family:'Fraunces',serif} ::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-thumb{background:var(--b1);border-radius:2px} /* ─── AUTH STATE — gate overlay + banner ───────────────────────────────── */ /* .gated: reserved for future use — gate-overlay is now a standalone card */ .gate-overlay{display:flex;align-items:center;justify-content:center;background:var(--bg1);border:1px solid rgba(232,78,15,.2);border-radius:var(--r2);padding:20px 16px;text-align:center;margin-top:4px} .is-auth .gate-overlay{display:none!important} .auth-banner{background:linear-gradient(135deg,rgba(232,78,15,.12),rgba(124,91,194,.08));border:1px solid rgba(232,78,15,.25);border-radius:var(--r2);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px} .is-auth .auth-banner{display:none} /* ─── NAV ──────────────────────────────────────────────────────────────── */ #nav{position:sticky;top:0;z-index:200;height:52px;background:rgba(244,242,238,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--b0);display:flex;align-items:center;padding:0 28px;gap:0} .nav-logo{display:flex;align-items:center;gap:10px;margin-right:28px;cursor:pointer;flex-shrink:0} .nav-mark{display:none} .nav-brand{font-family:'Inter',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.3px;color:var(--a)} .nav-brand em{font-style:normal;font-weight:400;color:var(--t1)} .nav-links{display:flex;align-items:center;flex:1;gap:1px} .nl{height:52px;padding:0 12px;font-size:13px;font-weight:500;color:var(--t3);cursor:pointer;border:none;background:none;font-family:'Inter',sans-serif;transition:.15s;position:relative;white-space:nowrap} .nl:hover{color:var(--t2)} .nl.on{color:var(--t1)} .nl.on::after{content:'';position:absolute;bottom:0;left:12px;right:12px;height:2px;background:var(--a);border-radius:2px 2px 0 0} .ndiv{width:1px;height:18px;background:var(--b1);margin:0 6px;flex-shrink:0} .nav-r{display:flex;gap:6px;align-items:center;margin-left:auto} /* ─── BUTTONS ──────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:5px;padding:8px 18px;border:none;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:.15s;text-decoration:none;white-space:nowrap;line-height:1} .btn:hover{opacity:.88;transform:translateY(-1px)} .btn:active{transform:none} .btn-p{background:var(--a);color:#fff} .btn-s{background:var(--bg4);color:var(--t2);border:1px solid var(--b1)} .btn-s:hover{border-color:var(--b2);color:var(--t1)} .btn-g{background:transparent;color:var(--a);border:1px solid rgba(232,78,15,.3)} .btn-g:hover{background:var(--ad)} .btn-danger{background:var(--rd);color:var(--red);border:1px solid rgba(211,58,44,.2)} .btn-sm{padding:5px 12px;font-size:12px;border-radius:6px} .btn-xs{padding:3px 9px;font-size:11px;border-radius:5px} .btn-lg{padding:12px 26px;font-size:14px} /* Portal-specific buttons — only used in those portals */ .btn-partner{background:var(--p-partner);color:#fff} .btn-consumer{background:var(--green);color:#fff;font-weight:700} .btn-processor{background:var(--p-processor);color:#fff;font-weight:700} /* ─── BADGES ───────────────────────────────────────────────────────────── */ .bd{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600} .bd-a{background:var(--ad);color:var(--a);border:1px solid rgba(232,78,15,.2)} .bd-g{background:var(--gd);color:var(--green);border:1px solid rgba(63,142,91,.15)} .bd-w{background:var(--wd);color:var(--amber);border:1px solid rgba(181,121,10,.2)} .bd-r{background:var(--rd);color:var(--red);border:1px solid rgba(211,58,44,.2)} .bd-n{background:rgba(100,116,139,.1);color:var(--t2);border:1px solid var(--b0)} /* Tier badges — used ONLY for quality tier labels */ .bd-bz{background:var(--bzd);color:var(--bronze);border:1px solid rgba(154,123,83,.25);font-weight:700} .bd-sv{background:var(--svd);color:var(--silver);border:1px solid rgba(107,117,133,.2);font-weight:700} .bd-gd{background:var(--wd);color:var(--gold);border:1px solid rgba(181,121,10,.25);font-weight:700} .bd-pt{background:var(--ptd);color:var(--platinum);border:1px solid rgba(124,91,194,.25);font-weight:700} .bd-cert{background:rgba(14,147,132,.12);color:#0e9384;border:1px solid rgba(14,147,132,.3);font-weight:700} /* ─── LAYOUT ───────────────────────────────────────────────────────────── */ .page{display:none;min-height:calc(100vh - 52px)} .page.on{display:block} .wrap{max-width:1360px;margin:0 auto;padding:28px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} .grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px} /* ─── CARDS ────────────────────────────────────────────────────────────── */ .card{background:var(--bg3);border:1px solid var(--b0);border-radius:var(--r2)} .card2{background:var(--bg4);border:1px solid var(--b1);border-radius:var(--r)} /* ─── STAT ROW ─────────────────────────────────────────────────────────── */ .srow{display:grid;background:var(--b0);border-radius:var(--r2);overflow:hidden} .sc{background:var(--bg3);padding:18px 20px} .sv{font-family:'Fraunces',serif;font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1} .sl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:4px} .sd{font-size:11px;font-weight:600;margin-top:3px} .up{color:var(--green)}.dn{color:var(--red)}.neu{color:var(--t3)} /* ─── TABS ─────────────────────────────────────────────────────────────── */ .tbar{display:flex;border-bottom:1px solid var(--b0);margin-bottom:22px} .tb{padding:10px 18px;font-size:13px;font-weight:600;color:var(--t3);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:'Inter',sans-serif;transition:.15s;white-space:nowrap} .tb:hover{color:var(--t2)} .tb.on{color:var(--t1);border-bottom-color:var(--a)} .tp{display:none}.tp.on{display:block} /* ─── FORMS ────────────────────────────────────────────────────────────── */ .fg{margin-bottom:16px} .fl{display:block;font-size:11px;font-weight:600;color:var(--t2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em} .fi,.fs,.ft{width:100%;padding:9px 12px;background:var(--bg1);border:1px solid var(--b1);border-radius:var(--r);color:var(--t1);font-size:13px;font-family:'Inter',sans-serif;transition:.15s} .fi:focus,.fs:focus,.ft:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px var(--ag)} .ft{min-height:80px;resize:vertical} .fr{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* ─── TABLE ────────────────────────────────────────────────────────────── */ .tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{padding:9px 12px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);border-bottom:1px solid var(--b1)} .tbl td{padding:11px 12px;border-bottom:1px solid var(--b0);vertical-align:middle} .tbl tbody tr:hover td{background:rgba(20,17,13,.015)} .tbl tbody tr:last-child td{border-bottom:none} /* ─── DATASET CARD ─────────────────────────────────────────────────────── */ .dsc{background:var(--bg3);border:1px solid var(--b0);border-radius:var(--r2);overflow:hidden;transition:.2s} .dsc:hover{border-color:var(--b2);transform:translateY(-1px);box-shadow:0 4px 20px rgba(20,17,13,.12)} .dsc-thumb{height:98px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden} .dsc-body{padding:12px 14px} .dsc-name{font-size:13px;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dsc-desc{font-size:11px;color:var(--t3);margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .dsc-chips{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:8px} .dsc-chip{padding:2px 6px;border-radius:3px;font-size:9px;font-weight:700;text-transform:uppercase;background:rgba(20,17,13,.05);color:var(--t2)} .dsc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid var(--b0)} .dsc-price{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--green)} .dsc-price span{font-size:10px;color:var(--t3);font-weight:400} /* ─── FILTER SIDEBAR ───────────────────────────────────────────────────── */ .fsb{background:var(--bg3);border:1px solid var(--b0);border-radius:var(--r2);padding:16px;position:sticky;top:60px} .fgt{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-bottom:9px;margin-top:14px} .fgt:first-child{margin-top:0} .fo{display:flex;align-items:center;gap:7px;padding:4px 0;font-size:12px;color:var(--t2);cursor:pointer;transition:.1s;user-select:none} .fo:hover{color:var(--t1)} .fo.on{color:var(--a)} .fcb{width:14px;height:14px;border:1.5px solid var(--b2);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;transition:.15s} .fcb.on{background:var(--a);border-color:var(--a);color:#fff} .fct{margin-left:auto;font-size:10px;color:var(--t3)} .fsep{height:1px;background:var(--b0);margin:10px 0} /* ─── PACKAGE BUILDER ──────────────────────────────────────────────────── */ .bzone{min-height:110px;border:1.5px dashed var(--b1);border-radius:var(--r);padding:12px;display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;position:relative;transition:.2s} .bzone:hover{border-color:var(--b2)} .bi{padding:5px 10px;background:var(--bg4);border:1px solid var(--b1);border-radius:6px;font-size:11px;color:var(--t2);display:flex;align-items:center;gap:5px} .bi.on{border-color:var(--green);background:var(--gd);color:var(--green)} .bi-x{cursor:pointer;color:var(--t3);font-size:13px;line-height:1}.bi-x:hover{color:var(--red)} .bempty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t3);pointer-events:none} .berow{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid var(--b0);font-size:12px;color:var(--t2);cursor:pointer} .berow:last-child{border-bottom:none} .berow:hover{color:var(--t1)} .bck{width:13px;height:13px;border:1.5px solid var(--b2);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;transition:.15s} .bck.on{background:var(--a);border-color:var(--a);color:#fff} .tier-opt{padding:7px;border:1px solid var(--b0);border-radius:6px;text-align:center;cursor:pointer;font-size:11px;font-weight:700;transition:.15s} .tier-opt:hover{border-color:var(--b2)} /* ─── CERT BADGE ───────────────────────────────────────────────────────── */ .cert-wrap{display:flex;align-items:flex-start;gap:16px;background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r2);padding:16px} .cr{position:relative;width:60px;height:60px;flex-shrink:0} .cr svg{position:absolute;top:0;left:0;transform:rotate(-90deg)} .cr-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .cr-n{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;line-height:1} .cr-l{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-top:1px} .cm-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--b0);font-size:11px} .cm-row:last-child{border-bottom:none} .cm-k{color:var(--t3)}.cm-v{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:10px} /* ─── PIPELINE VIZ ─────────────────────────────────────────────────────── */ .pipe{display:flex;background:var(--bg3);border:1px solid var(--b0);border-radius:var(--r2);overflow:hidden} .ps{flex:1;padding:20px 14px;text-align:center;border-right:1px solid var(--b0)} .ps:last-child{border-right:none} .ps-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin:0 auto 9px;font-size:18px} .ps-n{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px} .ps-t{font-size:14px;font-weight:700;margin-bottom:4px} .ps-s{font-size:11px;color:var(--t3);line-height:1.4} /* ─── PROGRESS ─────────────────────────────────────────────────────────── */ .bar{height:4px;background:var(--bg2);border-radius:2px;overflow:hidden} .bar-f{height:100%;border-radius:2px} .qrow{display:flex;align-items:center;gap:9px;margin-bottom:10px} .qlbl{font-size:11px;color:var(--t2);width:140px;flex-shrink:0} .qtrk{flex:1;height:4px;background:var(--bg2);border-radius:2px;overflow:hidden} .qf{height:100%;border-radius:2px} .qval{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;width:44px;text-align:right;flex-shrink:0} /* ─── CERT STEPS ───────────────────────────────────────────────────────── */ .csteps{display:flex;align-items:center;flex-wrap:wrap;gap:3px} .cstep{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:5px;font-size:11px;font-weight:600} .cdot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .cstep.done{color:var(--green)}.cstep.done .cdot{background:var(--green)} .cstep.act{color:var(--a)}.cstep.act .cdot{background:var(--a);box-shadow:0 0 0 3px var(--ag)} .cstep.pend{color:var(--t3)}.cstep.pend .cdot{background:var(--b2)} .carrow{color:var(--b2);font-size:10px;padding:0 1px} /* ─── MODAL ────────────────────────────────────────────────────────────── */ .mo{display:none;position:fixed;inset:0;background:rgba(20,17,13,.18);z-index:500;align-items:center;justify-content:center;padding:16px} .mo.open{display:flex} .md{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r3);max-width:660px;width:100%;max-height:90vh;overflow-y:auto} .md-h{padding:20px 20px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:sticky;top:0;background:var(--bg2);border-bottom:1px solid var(--b0)} .md-x{cursor:pointer;font-size:16px;color:var(--t3);background:none;border:none;border-radius:5px;padding:3px;line-height:1;transition:.15s} .md-x:hover{color:var(--t1);background:var(--bg4)} .md-b{padding:20px} /* ─── WIZARD ───────────────────────────────────────────────────────────── */ .wsteps{display:flex;align-items:center;gap:0;margin-bottom:24px;overflow-x:auto;padding-bottom:2px} .ws{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--t3);white-space:nowrap} .wsn{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--b2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;transition:.2s} .ws.done .wsn{background:var(--green);border-color:var(--green);color:#fff} .ws.act{color:var(--t1)}.ws.act .wsn{background:var(--a);border-color:var(--a);color:#fff} .wa{color:var(--b2);font-size:10px;padding:0 5px} .wp{display:none}.wp.on{display:block} /* ─── CODE BLOCK ───────────────────────────────────────────────────────── */ .cb{background:var(--bg0);border:1px solid var(--b1);border-radius:var(--r);padding:12px 14px;font-family:'JetBrains Mono',monospace;font-size:11.5px;overflow-x:auto;position:relative;line-height:1.6} .cb-cp{position:absolute;top:7px;right:7px;background:var(--bg4);border:1px solid var(--b1);border-radius:4px;padding:2px 7px;font-size:10px;font-weight:600;color:var(--t3);cursor:pointer;font-family:'Inter',sans-serif;transition:.15s} .cb-cp:hover{color:var(--t1)} .ck{color:var(--a)}.cs{color:#3f8e5b}.cn{color:#c2410c}.cc{color:var(--t3)} /* ─── DCA ──────────────────────────────────────────────────────────────── */ .dca-c{background:var(--bg0);border:1px solid var(--b1);border-radius:var(--r);padding:12px;margin-bottom:8px} .dca-t{font-size:11px;font-weight:700;color:var(--t1);margin-bottom:5px} .dca-b{font-size:11px;color:var(--t2);line-height:1.55} /* ─── PORTAL HEADERS — persona colors only here ────────────────────────── */ .ph-partner{background:linear-gradient(135deg,rgba(124,91,194,.07),rgba(232,78,15,.03));border:1px solid rgba(124,91,194,.15);border-radius:var(--r2);padding:22px;margin-bottom:22px} .ph-processor{background:linear-gradient(135deg,rgba(14,147,132,.07),rgba(232,78,15,.03));border:1px solid rgba(14,147,132,.15);border-radius:var(--r2);padding:22px;margin-bottom:22px} .ph-consumer{background:linear-gradient(135deg,rgba(63,142,91,.07),rgba(232,78,15,.03));border:1px solid rgba(63,142,91,.15);border-radius:var(--r2);padding:22px;margin-bottom:22px} .ph-admin{background:linear-gradient(135deg,rgba(181,121,10,.06),rgba(232,78,15,.03));border:1px solid rgba(181,121,10,.12);border-radius:var(--r2);padding:22px;margin-bottom:22px} /* ─── MISC ─────────────────────────────────────────────────────────────── */ .dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:4px} .dot-g{background:var(--green)}.dot-a{background:var(--amber)}.dot-r{background:var(--red)}.dot-b{background:var(--a)}.dot-n{background:var(--t3)} .divider{height:1px;background:var(--b0);margin:18px 0} .empty-state{padding:40px;text-align:center;color:var(--t3);font-size:13px} .mc{background:var(--bg4);border:1px solid var(--b0);border-radius:var(--r);padding:16px} .mc-val{font-family:'Fraunces',serif;font-size:24px;font-weight:800;letter-spacing:-1px;line-height:1} .mc-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-top:3px} /* Provenance chain */ .prov{display:flex;background:var(--bg3);border:1px solid var(--b0);border-radius:var(--r2);overflow:hidden} .pn{flex:1;padding:14px;text-align:center;border-right:1px solid var(--b0)} .pn:last-child{border-right:none} .pn-l{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px} .pn-d{font-size:10px;color:var(--t2);line-height:1.4} /* Tier cards */ .tc{background:var(--bg3);border:1px solid var(--b0);border-radius:var(--r2);padding:20px;text-align:center;transition:.2s} .tc:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(20,17,13,.10)} .tc-bz{border-top:2px solid var(--bronze)}.tc-sv{border-top:2px solid var(--silver)} .tc-gd{border-top:2px solid var(--gold)}.tc-pt{border-top:2px solid var(--platinum)} /* Toast */ #toast{position:fixed;bottom:20px;right:20px;z-index:999;background:var(--bg4);border:1px solid var(--b2);border-radius:var(--r);padding:10px 16px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px;transform:translateY(60px);opacity:0;transition:.25s;pointer-events:none} #toast.show{transform:translateY(0);opacity:1} /* ─── ANIMATIONS ───────────────────────────────────────────────────────── */ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} @keyframes geoPulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.15}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}} .pulse{animation:pulse 1.8s infinite} /* ─── REDUCED MOTION — authoritative catch-all (stops infinite pulse/geoPulse) ─── */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } } /* ─── LEAFLET MAP OVERRIDES ────────────────────────────────────────────── */ .leaflet-container{background:#f4f2ee !important;font-family:Inter,sans-serif;z-index:1 !important} #geo-leaflet-map{position:relative;z-index:1} .leaflet-popup-content-wrapper{background:rgba(244,242,238,.92);color:#3d3b38;border:1px solid rgba(20,17,13,.08);border-radius:8px;box-shadow:0 12px 32px rgba(20,17,13,.14)} .leaflet-popup-tip{background:rgba(244,242,238,.92)} .leaflet-popup-content{margin:10px 14px;font-size:12px;line-height:1.6} .leaflet-control-zoom a{background:rgba(244,242,238,.85) !important;color:#3d3b38 !important;border-color:rgba(20,17,13,.08) !important} .leaflet-control-zoom a:hover{background:#fff !important;color:var(--a) !important} .leaflet-control-attribution{background:rgba(244,242,238,.6) !important;color:rgba(20,17,13,.2) !important;font-size:8px !important} .leaflet-control-attribution a{color:rgba(232,78,15,.4) !important} /* ─── PATHWAY / FLOW WIDGET (pw) ───────────────────────────────────────── */ .pw-chip{background:var(--bg2);border:1px solid var(--b0);border-radius:6px;padding:6px 10px;font-size:10px;cursor:pointer;transition:.15s;user-select:none}.pw-chip:hover{border-color:var(--a);background:rgba(232,78,15,.06)}.pw-chip.used{opacity:.35;pointer-events:none;text-decoration:line-through} .pw-node{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;transition:.15s}.pw-node:hover{filter:brightness(1.3)} .pw-arrow{color:var(--t3);font-size:11px;margin:0 2px} /* ════════════════════════════════════════════════════════════════════════ DEEPEN VALIDATE LAYER — leaderboard / safety scoring components (v-*) ════════════════════════════════════════════════════════════════════════ */ .v-badge{display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:700;padding:2px 6px;border-radius:3px;background:rgba(14,147,132,.12);color:#0e9384;border:1px solid rgba(14,147,132,.3);white-space:nowrap} .v-badge.dev{background:rgba(107,117,133,.12);color:var(--silver);border-color:rgba(107,117,133,.3)} .v-score{font-family:'JetBrains Mono',monospace;font-weight:700;line-height:1} .v-bar-track{height:5px;border-radius:3px;background:var(--bg3);overflow:hidden;flex:1} .v-bar-fill{height:100%;border-radius:3px} .v-pill{font-size:9px;font-weight:700;padding:2px 8px;border-radius:4px;white-space:nowrap} .v-sec{max-width:1000px;margin:0 auto;padding:0 24px} .v-h2{font-family:'Fraunces',serif;font-size:23px;font-weight:600;letter-spacing:-.4px;margin-bottom:6px} .v-eyebrow{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#0e9384;margin-bottom:9px} .v-lead{font-size:12.5px;color:var(--t2);max-width:680px;line-height:1.65} .v-frame{border:1px solid var(--b1);border-radius:var(--r2);overflow:hidden;background:var(--bg1)} .v-lb-row{display:grid;grid-template-columns:24px 36px 1fr 70px 92px 1fr;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--b0);font-size:12px;cursor:pointer} .v-lb-row.head{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);font-weight:700;border-top:none;cursor:default} .v-lb-row.top{background:rgba(14,147,132,.05)} .v-lb-det{display:none;padding:14px 16px 16px 50px;border-top:1px solid var(--b0);background:var(--bg2)} .v-lb-det.open{display:block} .v-chip{font-size:10.5px;padding:4px 10px;border-radius:999px;background:var(--bg2);border:1px solid var(--b1);color:var(--t2)} .v-tog{font-size:11px;font-weight:600;padding:6px 14px;border-radius:7px;border:1px solid var(--b1);background:var(--bg2);color:var(--t2);cursor:pointer;transition:.15s} .v-tog.on{background:rgba(14,147,132,.14);border-color:rgba(14,147,132,.4);color:#0e9384} .v-modetab{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:9px 18px;border-radius:9px;border:1px solid var(--b1);background:var(--bg2);color:var(--t2);cursor:pointer;transition:.15s} .v-modetab.on{background:#0e9384;color:#ffffff;border-color:#0e9384} .v-steps{display:flex;gap:0;flex-wrap:wrap} .v-step{flex:1;min-width:150px;padding:0 16px 0 0} .v-step .pn{font-family:'JetBrains Mono',monospace;font-size:11px;color:#0e9384;font-weight:700;margin-bottom:6px} .v-step .pt{font-size:12.5px;font-weight:700;margin-bottom:4px;line-height:1.3} .v-step .pd{font-size:10.5px;color:var(--t2);line-height:1.5} .v-harm-row{display:grid;grid-template-columns:18px 150px 1fr 92px;align-items:center;gap:12px;padding:9px 0;cursor:pointer} .v-harm-bar{display:flex;height:18px;border-radius:4px;overflow:hidden;background:var(--bg3)} .v-harm-seg{height:100%} .v-harm-det{display:none;margin:2px 0 10px 30px;padding:12px 14px;border-left:2px solid rgba(14,147,132,.4);background:var(--bg2);border-radius:0 6px 6px 0} .v-harm-det.open{display:block} .v-h2h{width:100%;border-collapse:collapse;font-size:11px} .v-h2h th,.v-h2h td{padding:9px 8px;text-align:center;border-top:1px solid var(--b0)} .v-h2h th{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);font-weight:700;border-top:none} .v-h2h tr.dr{cursor:pointer} .v-h2h tr.detrow{display:none} .v-h2h tr.detrow.open{display:table-row} .v-h2h td.dom{text-align:left;color:var(--t2);font-weight:500;white-space:nowrap} .v-h2h td.sota{color:#0e9384;font-weight:800} .v-h2h .colhi{background:rgba(14,147,132,.05)} .v-h2h td.detcell{text-align:left;padding:0} .v-h2h .detbox{padding:12px 14px;background:var(--bg2);font-size:11px;line-height:1.6} .v-cv{color:var(--green)} .v-cx{color:var(--red)} .v-chev{color:var(--t3);font-size:10px;transition:transform .15s} #nav-portals-menu .btn-xs{font-size:11px} /* ════════════════════════════════════════════════════════════════════════ THEME SYSTEM — light (default) + warm/calm dark + polish layer ════════════════════════════════════════════════════════════════════════ */ :root, html[data-theme="light"]{ color-scheme:light; --logo:#2f5bd7; --thumb-grad:linear-gradient(135deg,#F1EEE8,#E6E2DA); --thumb-ink:#1c1813; --chip:rgba(20,17,13,.05); --nav-bg:rgba(244,242,238,.82); --fab-shadow:0 10px 30px -8px rgba(20,17,13,.42); } html{ background:var(--bg0); } body{ background:var(--bg0); position:relative; } /* subtle paper grain, like the marketing site */ body::before{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.022; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* nav: glassy, theme-aware; keep the Deepen wordmark BLUE */ #nav{ background:var(--nav-bg); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--b1); } .nav-brand{ color:var(--logo); } .nav-brand em{ color:var(--t1); } /* buttons: moderate corners across the app, not pills */ .btn{ border-radius:8px; } .btn-sm{ border-radius:7px; } .btn-xs{ border-radius:6px; } .btn-lg{ border-radius:9px; } .btn-p:hover{ filter:brightness(.95); opacity:1; } /* theme toggle */ .theme-tog{ padding:5px 9px!important; font-size:13px; line-height:1; } /* dropdown menus: plain rows, no bubble/pill backgrounds */ #nav-portals-menu .btn, #nav-user-menu .btn{ background:transparent!important; border:1px solid transparent!important; box-shadow:none!important; border-radius:7px; justify-content:flex-start; padding:7px 10px; font-weight:500; color:var(--t1); } #nav-portals-menu .btn:hover, #nav-user-menu .btn:hover{ background:var(--bg1)!important; border-color:transparent!important; color:var(--t1); } /* search bar: raised surface + clear border + focus ring */ #ai-search-wrap{ background:var(--bg4)!important; border:1.5px solid var(--b2)!important; box-shadow:0 1px 2px rgba(20,17,13,.05); } #ai-search-wrap:focus-within{ border-color:var(--a)!important; box-shadow:0 0 0 3px var(--ag); } /* relocated episode/qty chip on the dataset thumbnail */ .dsc-thumb{ color:var(--thumb-ink); } .dsc-vol{ font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700; letter-spacing:-.2px; padding:2px 6px; border-radius:6px; background:var(--bg4); border:1px solid var(--b1); color:var(--t1); box-shadow:0 1px 3px rgba(20,17,13,.14); } /* card elevation */ .card{ box-shadow:0 1px 2px rgba(20,17,13,.04), 0 14px 40px -28px rgba(20,17,13,.16); } .card2{ box-shadow:0 1px 2px rgba(20,17,13,.03); } /* package builder: floating FAB + slide-in drawer */ #pkg-fab{ position:fixed; right:22px; bottom:22px; z-index:260; display:none; align-items:center; gap:8px; padding:11px 17px; border:none; cursor:pointer; border-radius:999px; background:var(--a); color:#fff; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; box-shadow:var(--fab-shadow); transition:transform .15s; } #pkg-fab:hover{ transform:translateY(-2px); } .pkg-fab-count{ display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:#fff; color:var(--a); font-size:11px; font-weight:800; } #pkg-shell{ position:fixed; inset:0; z-index:270; overflow:hidden; pointer-events:none; contain:layout paint; } #pkg-backdrop{ position:absolute; inset:0; background:rgba(20,17,13,.34); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .25s; } #pkg-backdrop.open{ opacity:1; pointer-events:auto; } #pkg-drawer.open{ pointer-events:auto; } #pkg-drawer{ position:absolute; top:0; right:0; height:100%; width:368px; max-width:90vw; pointer-events:auto; background:var(--bg2); border-left:1px solid var(--b1); box-shadow:-18px 0 50px -24px rgba(20,17,13,.5); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); } #pkg-drawer.open{ transform:translateX(0); } .pkg-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--b0); flex:none; } .pkg-close{ background:transparent; border:none; cursor:pointer; font-size:22px; line-height:1; color:var(--t3); padding:0 6px; border-radius:7px; } .pkg-close:hover{ background:var(--bg0); color:var(--t1); } .pkg-drawer-body{ padding:16px 18px 26px; overflow-y:auto; flex:1; } .pkg-drawer-body .bzone{ min-height:90px; } /* polished scrollbar + selection (overrides the 3px base scrollbar above) */ ::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-thumb{ background:var(--b2); border-radius:999px; } ::-webkit-scrollbar-thumb:hover{ background:var(--t3); } ::selection{ background:var(--ad); } .leaflet-container{ background:var(--bg1) !important; } .leaflet-popup-content-wrapper{ box-shadow:0 12px 32px rgba(20,17,13,.18) !important; } .btn-consumer,.btn-processor,.btn-partner{ color:#fff; } /* ===== Mobile guard (catalog is desktop-first; keep it usable on phones) ===== */ @media (max-width:760px){ .wrap{ padding-left:14px; padding-right:14px; } #nav{ overflow-x:auto; -webkit-overflow-scrolling:touch; gap:8px; } #nav::-webkit-scrollbar{ display:none; } #cat-hero{ grid-template-columns:repeat(3,1fr) !important; } #cat-layout{ grid-template-columns:1fr !important; } #cat-layout .fsb{ position:static !important; top:auto; } #cat-grid{ grid-template-columns:1fr !important; } #geo-leaflet-map{ height:260px !important; } #pkg-drawer{ width:100vw; max-width:100vw; } #ft-grid{ grid-template-columns:1fr 1fr !important; gap:22px 18px !important; } #ft-grid > div:first-child{ grid-column:1 / -1; } footer{ overflow-x:hidden; } } /* ════════════════════════════════════════════════════════════════════════ CALMER DATASET CARDS — less orange, fewer pills, distinct thumbs (overrides the base .dsc rules above — keep file load order intact) ════════════════════════════════════════════════════════════════════════ */ .dsc{ transition:border-color .18s, transform .18s, box-shadow .18s; } .dsc:hover{ border-color:var(--b2); transform:translateY(-2px); box-shadow:0 12px 30px -20px rgba(20,17,13,.3); } .dsc-thumb-tags{ position:absolute; top:8px; right:8px; display:flex; gap:4px; } .dsc-thumb-mods{ position:absolute; bottom:8px; left:8px; display:flex; gap:4px; } .dsc-thumb-vol{ position:absolute; bottom:8px; right:8px; } /* unified, quiet modality chips (no rainbow) */ .dsc-chip{ text-transform:uppercase; letter-spacing:.05em; font-size:8.5px; font-weight:700; padding:2px 7px; border-radius:5px; background:var(--chip); color:var(--t2); border:1px solid transparent; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .dsc-chip-more{ color:var(--t3); } /* subtle outline tags (was filled orange/green) */ .dsc-tag{ font-size:8px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:5px; background:var(--chip); color:var(--t2); border:1px solid var(--b1); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); text-transform:uppercase; } .dsc-tag-new{ color:var(--green); border-color:rgba(63,142,91,.32); } /* meta line — muted, no orange pin */ .dsc-meta{ font-size:10px; color:var(--t3); margin-bottom:9px; display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dsc-meta .dot{ opacity:.45; } /* one Validate chip + one quiet trust line (replaces 4 pills) */ .dsc-trustrow{ display:flex; align-items:center; gap:9px; margin-bottom:11px; flex-wrap:wrap; } .dsc-trust{ font-size:10px; color:var(--t3); letter-spacing:.01em; } /* Add: neutral at rest, orange only on hover (orange becomes deliberate) */ .dsc-add.btn-g{ background:transparent; color:var(--t2); border:1px solid var(--b1); font-weight:600; } .dsc-add.btn-g:hover{ color:var(--a); border-color:var(--a); background:var(--ad); } /* slightly quieter Validate badge so it sits as one calm signal */ .dsc-trustrow .v-badge{ font-size:8.5px; } /* ════════════════════════════════════════════════════════════════════════ â–‘â–‘ SAAS APP SHELL â–‘â–‘ (rebuild — left rail, full-bleed, modern controls) Evolves the warm-paper system; does NOT replace the tokens above. ════════════════════════════════════════════════════════════════════════ */ /* ── FOUNDATIONS (PR R1) — type scale, spacing scale, font-family vars ────── Additive :root custom properties (merge with the mock's :root above; do NOT replace it). Every component below should read fonts/sizes/spacing from these instead of a literal. ────────────────────────────────────── */ :root { /* Font families — one var per job. Never hardcode the family string. */ --font-display: 'Fraunces', serif; --font-ui: 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Type scale — Fraunces display sizes + Inter body sizes (docs/DESIGN.md §2). Every hardcoded font-size in this file collapses onto one of these. */ --fs-display-1: clamp(26px, 3.4vw, 40px); /* workspace/balance titles + tile numerals (.ws-title/.dk-balance-amount/.dk-tile-value) */ --fs-display-2: clamp(24px, 3vw, 34px); /* page titles (.page-title) */ --fs-display-3: clamp(22px, 3vw, 26px); /* stat numerals (.stat-v/.dk-stat-v) */ --fs-body: 14px; --fs-small: 13px; --fs-caption: 11px; /* Spacing scale — 4px base. Sweep .wrap/.card/.dk-tile/tables/forms onto it. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; /* Shell dimension (PR R2). The topbar's PINNED height (.topbar sets height: var(--topbar-h), so this can never drift from the rendered bar): 12px pad + 40px tallest control + 12px pad + 1px border. Same at every breakpoint (the mobile burger is also 40px). Anything sticky that must dock UNDER the topbar (.dk-tabbar, future R3 section rails) uses this as its `top`. */ --topbar-h: 65px; /* ── Print-grade addendum (2026-07-02, docs/DESIGN.md §0) ────────────── These OVERRIDE milder choices above (2px radius everywhere) and add the hairline/ink/eyebrow language every touched page composes from. Never re-widen --r/--r2/--r3 back up on new work. */ --r: 2px; --r2: 2px; --r3: 2px; --hair: rgba(20, 17, 12, .18); --hair-soft: rgba(20, 17, 12, .1); --ink-60: rgba(20, 17, 12, .6); --ink-40: rgba(20, 17, 12, .4); --hair-shadow: 0 1px 0 rgba(20, 17, 12, .06); /* ── Design System v3 (LOCKED 2026-07-03, docs/DESIGN.md §-1) ────────── Overrides the print-grade addendum's semantic hexes with the locked values and adds the document-ink token. Paper/surface/ink already match the locked hexes (bg0 #f4f2ee ≈ paper, bg3 #fcfbf8 ≈ surface, t1 #14110c ≈ ink) so no --bg/--t override is needed here; only the three semantic colors actually changed. Never re-widen these back to the pre-v3 hexes. */ --green: #1a7f37; --gd: rgba(26, 127, 55, .1); --amber: #9a6700; --wd: rgba(154, 103, 0, .1); --red: #b42318; --rd: rgba(180, 35, 24, .1); /* Document ink — wordmark, certificates, engraved/printed artifacts ONLY. Never an in-app control color: no indigo button, link, active state, or chip. See seal-engraved-indigo.svg (platform/web/assets/brand/). */ --indigo: #232a66; /* Motion law (v3, docs/DESIGN.md §-1). Hover = wash, never a lift; expand/ collapse = 200ms; the drawer = 240ms. The seal's one-time stamp animation is the sole exception to "nothing bounces or floats". */ --dur-hover: 120ms; --dur-expand: 200ms; --dur-drawer: 240ms; } /* Base feel (§0): body copy, headings, links, focus ring. Scoped to the app shell (#root) so the protected verbatim mock markup above is untouched. */ #root { font-family: var(--font-ui); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #root h1, #root h2, #root h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; } #root h1 { font-size: 2rem; } #root h2 { font-size: 1.4rem; } #root h3 { font-size: 1.1rem; } #root a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } #root a:hover { color: var(--a); } /* Design System v3 nav law: chrome never underlines (rail, topbar, tabs, profile menu) -- content links keep the underline above. #root's ID specificity beats a plain class, so these chrome anchor rules are scoped to #root too (not just to their own class) or the base rule above wins. */ #root .rail-item, #root .rail-subitem, #root .rail-brand, #root .topbar-brand, #root .inbox-bell { text-decoration: none; } #root .rail-item:hover, #root .rail-subitem:hover, #root .inbox-bell:hover { text-decoration: none; color: var(--t1); } #root :focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; } /* ── reset-ish helpers used by the new app ───────────────────────────── */ html, body { height: 100%; } #root { min-height: 100%; } .muted { color: var(--t3); } .tiny { font-size: 10.5px; } /* ink-45 -- a lighter muted-ink tint than .muted (var(--t3)), for a quiet inline note that should read even softer (e.g. a release-queue row's "releases at certified" note). No app-wide ink-45 token exists yet; this is the one-off per the founder's own fallback (rgba(20,17,12,.45)). */ .ink-45 { color: rgba(20, 17, 12, .45); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .mt2 { margin-top: 8px; } .mt3 { margin-top: 18px; } .mt0 { margin-top: 0; } .mb2 { margin-bottom: var(--sp-2); } .mb3 { margin-bottom: var(--sp-3); } .mb4 { margin-bottom: var(--sp-4); } .mb6 { margin-bottom: var(--sp-6); } .ml2 { margin-left: var(--sp-2); } .pl6 { padding-left: var(--sp-6); } .pl8 { padding-left: var(--sp-8); } .gap-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; } /* generic bounded-width wrapper (replaces one-off inline max-width) */ .w-narrow { max-width: 380px; } .w-prose { max-width: 36rem; margin: 0 auto; } .link-btn { background: none; border: none; color: var(--a); font: inherit; font-weight: 600; cursor: pointer; padding: 0; } .link-btn:hover { text-decoration: underline; } /* Ink underlined text link -- founder ruling (2026-07-03): a per-row/per-card action (leaderboard Audit, browse/compare Open) is navigation, not THE view's one decision, so it reads as underlined ink text, never an orange button. Distinct from .link-btn (which stays accent-colored for the handful of inline prose actions already using it elsewhere) so this pass does not recolor call sites outside today's scope. */ .text-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--t1); text-decoration: underline; text-underline-offset: 3px; } .text-link:hover { color: var(--a); } .skip-link { position: fixed; top: -60px; left: 12px; z-index: 999; background: var(--a); color: #fff; padding: 8px 14px; border-radius: var(--r); font-size: 12px; font-weight: 600; transition: top .15s; } .skip-link:focus { top: 12px; } .spinner { width: 18px; height: 18px; border: 2px solid var(--b1); border-top-color: var(--a); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ── boot skeleton (in index.html before mount) ──────────────────────── */ .boot { display: flex; min-height: 100vh; } .boot-rail { width: 230px; background: var(--bg1); border-right: 1px solid var(--b0); } .boot-main { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--t3); } .boot-spin { width: 20px; height: 20px; border: 2px solid var(--b2); border-top-color: var(--a); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; } @media (max-width: 860px) { .boot-rail { display: none; } } /* ── app frame: full-bleed, rail + content ───────────────────────────── */ .app-frame { display: flex; min-height: 100vh; width: 100%; } .app-shell { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Rail and topbar stay full-bleed; page content does not (founder ruling, 2026-07-03 -- docs/DESIGN.md's page grammar reads best at a bounded measure, not stretched edge-to-edge). .app-main keeps the vertical rhythm and stays a full-width flex child; .app-main-inner is the ONE place the 1360px reading measure is applied, at the shell level, so no page adds its own max-width. A wide DataTable/compare matrix scrolls within this bound (overflow-x on the table wrap) rather than forcing the page wider. */ .app-main { flex: 1; min-width: 0; padding: var(--sp-7) 0 64px; outline: none; } .app-main-inner { max-width: 1360px; margin: 0 auto; padding: 0 32px; } body.has-overlay { overflow: hidden; } /* ── LEFT RAIL ───────────────────────────────────────────────────────── */ .rail { width: 234px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; background: var(--bg1); border-right: 1px solid var(--hair); display: flex; flex-direction: column; padding: 18px 14px; gap: 14px; z-index: 60; } .rail-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 4px 8px; } .rail-mark { font-family: var(--font-ui); font-weight: 800; font-size: 19px; letter-spacing: -.4px; color: var(--a); line-height: 1; } .rail-mark-flip { display: inline-block; transform: scaleX(-1); } .rail-brand-tx { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; color: var(--t1); line-height: 1.1; } .rail-brand-tx small { font-weight: 500; font-size: 9.5px; color: var(--t3); letter-spacing: .01em; } /* Side switcher — only rendered for multi-sided orgs (NAV_AND_IA §1). Swaps the menu; can never grant a role the org lacks (options are the org's own sides). */ .side-switch { display: flex; flex-direction: column; gap: 4px; padding: 0 6px; } .side-switch-l { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--t3); padding: 0 4px; } .side-switch-sel { appearance: none; -webkit-appearance: none; width: 100%; padding: 8px 28px 8px 11px; border-radius: var(--r); border: 1px solid var(--b1); background: var(--bg1); color: var(--t1); font-size: 13px; font-weight: 600; cursor: pointer; transition: .14s; background-image: linear-gradient(45deg, transparent 50%, var(--t3) 50%), linear-gradient(135deg, var(--t3) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .side-switch-sel:hover { border-color: var(--a); } .side-switch-sel:focus-visible { border-color: var(--a); box-shadow: 0 0 0 3px var(--ag); outline: none; } /* Persistent processor KYC status chip (PR R2) - read-only, next to the side switcher, visible whenever the processor side is active. Reuses the Badge semantic colors; never a control, never changes the gate. */ .rail-kyc { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; } .rail-kyc-l { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--t3); } /* Partner-source provenance label (Browse cards + table + My datasets). A quiet whisper at --t3 so it never competes with the dataset name; the â—† is pinned to --t3, never accent, so it can never read as a second accent action. */ .dcard-source, .dsl-source { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--t3); } .dcard-source { margin-top: 3px; } .dcard-source-ico, .dsl-source-ico { color: var(--t3); opacity: .7; font-size: 9px; } /* Browse header: the source filter and the card/table toggle share one bottom baseline so the two-control cluster reads balanced, not lopsided. */ .page-head-actions.browse-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .browse-source { display: flex; flex-direction: column; gap: 4px; } .browse-source-l { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--t3); padding-left: 2px; } .rail-agent { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: linear-gradient(135deg, var(--ad), rgba(124,91,194,.07)); border: 1px solid rgba(232,78,15,.22); border-radius: var(--r2); padding: 10px 11px; cursor: pointer; transition: border-color var(--dur-hover) ease-out; color: var(--t1); } .rail-agent:hover { border-color: var(--a); } .rail-agent-tx { display: flex; flex-direction: column; flex: 1; font-size: 12.5px; font-weight: 700; line-height: 1.2; } .rail-agent-tx small { font-weight: 500; font-size: 9.5px; color: var(--t3); } .rail-agent-kbd { font-family: var(--font-mono); font-size: 10px; background: var(--bg4); border: 1px solid var(--b1); border-radius: 4px; padding: 1px 6px; color: var(--t3); } .rail-agent-orb { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 32% 30%, #ffd2bd, var(--a) 62%, #b23c0a); box-shadow: 0 0 0 3px var(--ag); animation: orbPulse 3.2s ease-in-out infinite; } @keyframes orbPulse { 0%,100% { box-shadow: 0 0 0 3px var(--ag); } 50% { box-shadow: 0 0 0 5px var(--ag); } } .rail-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .rail-group-h { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--t3); padding: 0 10px; margin-bottom: 5px; } .rail-list { list-style: none; display: flex; flex-direction: column; gap: 2px; } /* Design System v3 nav law: chrome never underlines; active state is a 2px ink bar (never accent-orange -- orange is the one-per-view action color, never a nav wayfinding wash). */ .rail-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); text-decoration: none; color: var(--t2); font-size: 13px; font-weight: 500; transition: background var(--dur-hover) ease-out, color var(--dur-hover) ease-out; position: relative; min-height: 38px; } .rail-item:hover { background: var(--chip); color: var(--t1); text-decoration: none; } .rail-item.is-active { background: var(--bg2); color: var(--t1); font-weight: 600; } .rail-item.is-active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--t1); } .rail-ico { width: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-60); flex-shrink: 0; } .rail-item.is-active .rail-ico { color: var(--t1); } .rail-count { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--t2); border: 1px solid var(--b1); border-radius: var(--r); padding: 1px 6px; line-height: 1.4; } /* Subtree: renders only under the ONE auto-expanded active section (D1 nav tree). 21px indent per the locked kit spec; mirrors the page's own TabBar exactly (js/app.js's `tabs` on the owning SIDES item), so a subtree click and a page-tab click move the identical hash. */ .rail-sublist { list-style: none; display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px; } .rail-subitem { display: flex; align-items: center; padding: 6px 10px 6px 21px; border-radius: var(--r); text-decoration: none; color: var(--t3); font-size: 12.5px; font-weight: 500; transition: .14s; position: relative; min-height: 30px; } .rail-subitem:hover { background: var(--chip); color: var(--t1); text-decoration: none; } .rail-subitem.is-active { color: var(--t1); font-weight: 600; } .rail-subitem.is-active::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: var(--t1); } .rail-foot { padding-top: 10px; border-top: 1px solid var(--hair); } .rail-foot-note { font-size: 10px; line-height: 1.4; color: var(--t3); padding: 0 6px; margin: 0; } .rail-scrim { display: none; } /* -- top bar: spans the content area right of the rail, ALL viewport sizes. Left = the wordmark block (locked topbar spec, 2026-07-03); right = search / bell / avatar. The rail carries its own (larger) brand mark too -- that is fine, a wordmark repeats in document chrome the same way a masthead repeats across a printed piece. Mobile (<=860px, below): the burger reappears because the rail becomes an off-canvas drawer. -- */ .topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 50; height: var(--topbar-h); /* pinned; keep the :root var honest */ padding: var(--sp-3) clamp(var(--sp-5), 3vw, 24px); background: var(--nav-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--hair); } .topbar-agent, .topbar-burger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--bg4); border: 1px solid var(--b1); border-radius: var(--r); padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--t1); cursor: pointer; min-height: 40px; } .topbar-burger { display: none; } /* desktop: the rail owns the nav reveal */ /* Wordmark block -- tidied: no underline (the chrome no-underline rule at #root .topbar-brand already covers rest+hover), even 8px gap between the mark and the wordtype, vertically centered on the 65px topbar row. */ .topbar-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--t1); } .topbar-brand-mark { font-family: var(--font-ui); font-weight: 800; font-size: 17px; letter-spacing: -.4px; color: var(--a); line-height: 1; } .topbar-brand-flip { display: inline-block; transform: scaleX(-1); } .topbar-brand-tx { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; color: var(--t1); line-height: 1.1; } .topbar-brand-tx small { font-weight: 500; font-size: 9.5px; color: var(--t3); letter-spacing: .01em; } .topbar-spacer { flex: 1; } .topbar-right { display: flex; align-items: center; gap: 4px; } /* -- quick search: an attached panel docked directly under the search button (locked topbar spec, 2026-07-03) -- replaces the old expand-on- hover far-side-drawer-jump behavior. Hairline border, no shadow (unlike .pm-menu, which does use a soft shadow -- search is a lighter-weight affordance than the account menu). Esc closes + returns focus to the trigger (handled in app.js, same convention as ProfileMenu/Sheet). -- */ .qsearch { display: flex; align-items: center; position: relative; } .qsearch-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--t2); cursor: pointer; flex-shrink: 0; transition: background .12s, border-color .12s, color .12s; } .qsearch-btn:hover { background: var(--chip); color: var(--t1); } .qsearch.is-open .qsearch-btn { background: var(--bg4); border-color: var(--b1); color: var(--t1); } .qsearch-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: 280px; background: var(--bg4); border: 1px solid var(--hair); border-radius: var(--r2); box-shadow: none; padding: var(--sp-3); } .qsearch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* visually hidden, a11y only */ .qsearch-panel-row { display: flex; align-items: center; gap: 6px; height: 38px; border-radius: var(--r); background: var(--bg1); border: 1px solid var(--b1); padding: 0 6px 0 11px; } .qsearch-panel-row:focus-within { border-color: var(--t1); box-shadow: 0 0 0 3px var(--ag); } .qsearch-field { flex: 1; width: 100%; border: none; background: none; color: var(--t1); font-family: var(--font-ui); font-size: var(--fs-small); min-width: 0; } .qsearch-kbd { font-family: var(--font-mono); font-size: 10px; color: var(--t3); background: var(--bg2); border: 1px solid var(--b1); border-radius: 4px; padding: 1px 5px; } /* The submit control inside the attached panel -- a small icon action scoped to the panel itself, not a page-level primary action, so it stays outside the one-orange-per-view accounting the pages below are held to. */ .qsearch-go { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--a); color: #fff; cursor: pointer; font-size: 12px; flex-shrink: 0; } .qsearch-go:hover { background: #d4480e; } @media (prefers-reduced-motion: reduce) { .qsearch-btn { transition: none !important; } } /* -- inbox bell: bell icon only, no "Inbox" text label (locked topbar spec, 2026-07-03). The unread count is an ink-outlined mono chip beside the bell, never an orange-filled circle -- an unread count is not a certified/revoked/warning signal, so it never reaches for semantic color, it stays ink per the palette discipline. -- */ .inbox-bell { display: inline-flex; align-items: center; gap: 5px; width: 36px; height: 36px; padding: 0 8px; border-radius: 999px; color: var(--t2); transition: background .12s, color .12s; } .inbox-bell:has(.inbox-badge) { width: auto; } .inbox-bell:hover { background: var(--chip); color: var(--t1); } .inbox-badge { font-size: 10.5px; font-weight: 600; line-height: 1.4; color: var(--t1); border: 1px solid var(--b1); border-radius: var(--r); padding: 1px 5px; } /* -- account menu (avatar trigger + dropdown) -- */ .pm { position: relative; } .pm-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--b1); background: var(--bg4); color: var(--t1); font-family: var(--font-ui); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .14s, box-shadow .14s; } .pm-avatar:hover, .pm-avatar.is-open { border-color: var(--a); box-shadow: 0 0 0 3px var(--ag); } .pm-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: 240px; background: var(--bg4); border: 1px solid var(--b1); border-radius: var(--r2); box-shadow: 0 20px 48px -24px rgba(20,17,13,.35); padding: var(--sp-2) 0; overflow: hidden; } .pm-head { display: flex; align-items: center; gap: 10px; padding: var(--sp-3) var(--sp-4); } .pm-head-av { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--ad); color: var(--a); font-size: 12px; font-weight: 700; } .pm-head-id { display: flex; flex-direction: column; min-width: 0; } .pm-head-id strong { font-size: var(--fs-small); color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-head-id small { font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-sep { height: 1px; background: var(--b0); margin: var(--sp-2) 0; } .pm-list { list-style: none; padding: 0 var(--sp-2); } .pm-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: var(--sp-2) var(--sp-3); border: none; background: none; border-radius: var(--r); font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 500; color: var(--t1); cursor: pointer; text-align: left; transition: background .14s; } .pm-item:hover, .pm-item:focus-visible { background: var(--chip); } .pm-item.is-danger { color: var(--red); } .pm-item-ico { width: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-60); } .pm-item-kbd { margin-left: auto; font-size: 10px; color: var(--t3); text-transform: uppercase; } /* ════════════════════════════════════════════════════════════════════════ MODERN CONTROLS — Button, Chip, Badge, Segmented, AddControl ════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--r); font-family: var(--font-ui); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: transform .14s ease-out, background .14s, border-color .14s, color .14s, box-shadow .14s; white-space: nowrap; text-decoration: none; min-height: 40px; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn:not(:disabled):active { transform: translateY(0); } .btn-primary { background: var(--a); color: #fff; transition: background var(--dur-hover) ease-out; } .btn-primary:not(:disabled):hover { background: #d4480e; } .btn-secondary { background: var(--bg4); color: var(--t1); border-color: var(--b1); transition: border-color var(--dur-hover) ease-out; } .btn-secondary:not(:disabled):hover { border-color: var(--b2); } .btn-ghost { background: transparent; color: var(--a); border-color: rgba(232,78,15,.3); } .btn-ghost:not(:disabled):hover { background: var(--ad); } .btn-quiet { background: transparent; color: var(--t2); border-color: transparent; } .btn-quiet:not(:disabled):hover { background: var(--chip); color: var(--t1); } .btn-danger { background: var(--rd); color: var(--red); border-color: rgba(211,58,44,.25); } .btn-success { background: var(--gd); color: var(--green); border-color: rgba(63,142,91,.25); } .btn-sm { padding: 6px 12px; font-size: 12px; min-height: 34px; border-radius: 7px; } .btn-lg { padding: 12px 22px; font-size: 14px; min-height: 46px; } .btn-spin { width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; opacity: .8; } /* Chip — tappable filter token */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; min-height: 32px; border: 1px solid var(--b1); border-radius: 999px; background: var(--bg4); font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--t2); cursor: pointer; transition: .14s ease-out; } .chip:hover { border-color: var(--b2); color: var(--t1); } .chip.is-active { background: var(--ad); border-color: var(--a); color: var(--a); font-weight: 600; } .chip-count { font-family: var(--font-mono); font-size: 10px; opacity: .7; } .chip.is-active .chip-count { opacity: .9; } .chip-x { font-size: 11px; opacity: .6; } .chip-x:hover { opacity: 1; } /* .chip-pg -- the print-grade hairline pill referenced by Identity/Network/ Oversight for a code_name value (CONTRACTS.md §6.2/§6.3) but never given CSS until now (rendered as a bare unstyled inline span). Quiet hairline outline, no fill -- matches the founder's dot-not-fill ruling even though this specific use has no semantic color at all, it is a machine value. */ .chip-pg { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r); border: 1px solid var(--hair); background: var(--bg4); color: var(--t1); font-size: 11px; } .chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; } /* Badge — founder ruling (2026-07-03): color lives on a small dot, never on the chip's fill. Every kind is now the SAME quiet hairline-outline pill (surface bg, --hair border, ink text); the kind only changes the color of the leading .bd-dot glyph, restricted to the same palette StatusDot uses (green=certified/verified/approved/accepted/online/live, amber=pending/ ingested/beta/warning, red=revoked/rejected, ink=everything else). No tinted background survives this pass -- .bd-a/-g/-w/-r/-n/-cert all read identically except for the dot. */ .bd { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: var(--r); font-size: 11px; font-weight: 600; line-height: 1.3; background: var(--bg4); color: var(--t1); border: 1px solid var(--hair); } .bd-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* kind only tints the dot (via color, which .bd-dot inherits through currentColor) -- the pill itself never changes fill. */ .bd-a { color: var(--t1); } .bd-a .bd-dot { color: var(--t1); } .bd-g { color: var(--t1); } .bd-g .bd-dot { color: var(--green); } .bd-w { color: var(--t1); } .bd-w .bd-dot { color: var(--amber); } .bd-r { color: var(--t1); } .bd-r .bd-dot { color: var(--red); } .bd-n { color: var(--t1); } /* cert = certified = green, never the processor-teal it used to borrow. */ .bd-cert { color: var(--t1); font-weight: 700; } .bd-cert .bd-dot { color: var(--green); } /* selection/leader mark — ink border, never an orange fill (docs/DESIGN.md §0) */ .bd-ink { background: var(--bg2); color: var(--t1); border: 1px solid var(--t1); font-weight: 700; } /* Segmented control */ .seg { display: inline-flex; background: var(--bg1); border: 1px solid var(--b1); border-radius: 9px; padding: 3px; gap: 2px; width: 100%; } .seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 10px; border: none; background: none; border-radius: 6px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--t2); cursor: pointer; transition: .14s; min-height: 32px; } .seg-btn:hover { color: var(--t1); } /* Founder ruling (2026-07-03): the sort control's active state is ink with an underline, not orange -- sorting is a selection, not the page's action. */ .seg-btn.is-active { background: var(--bg4); color: var(--t1); text-decoration: underline; text-underline-offset: 3px; box-shadow: 0 1px 3px rgba(20,17,13,.1); } .seg-count { font-family: var(--font-mono); font-size: 10px; opacity: .7; } .seg-sm .seg-btn { padding: 5px 8px; font-size: 11.5px; } /* AddControl */ .add-ctl { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 34px; border: 1px solid var(--b1); border-radius: 999px; background: var(--bg4); font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--t2); cursor: pointer; transition: .16s ease-out; } .add-ctl:hover { border-color: var(--a); color: var(--a); background: var(--ad); } .add-ctl.is-added { background: var(--gd); border-color: rgba(63,142,91,.4); color: var(--green); } .add-ico { font-size: 14px; line-height: 1; } /* ════════════════════════════════════════════════════════════════════════ PAGE STRUCTURE — headers, stat strips ════════════════════════════════════════════════════════════════════════ */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; } .page-eyebrow { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--ink-60); margin-bottom: 7px; } .page-title { font-size: var(--fs-display-2); font-weight: 800; letter-spacing: -.8px; line-height: 1.05; } .page-lede { font-size: 13.5px; max-width: 60ch; margin-top: 8px; line-height: 1.55; } .page-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .stat-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--b0); border: 1px solid var(--b0); border-radius: var(--r2); overflow: hidden; margin-bottom: 26px; } .stat-tile { background: var(--bg3); padding: 16px 18px; } .stat-v { font-size: var(--fs-display-3); font-weight: 800; letter-spacing: -1px; line-height: 1; } .stat-a { color: var(--a); } .stat-green { color: var(--green); } .stat-amber { color: var(--amber); } .stat-l { font-size: 9.5px; color: var(--t3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-top: 6px; } .stat-d { font-size: 11px; font-weight: 600; margin-top: 3px; } .stat-d.up { color: var(--green); } .stat-d.dn { color: var(--red); } /* ════════════════════════════════════════════════════════════════════════ METER (with floor marker) ════════════════════════════════════════════════════════════════════════ */ .meter-row { margin-bottom: 10px; } .meter-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; margin-bottom: 5px; } .meter-label { color: var(--t2); } .meter-val { font-size: 11px; font-weight: 600; color: var(--t1); } .meter-val.is-below { color: var(--red); } .meter { position: relative; height: 5px; background: var(--bg1); border-radius: 3px; overflow: visible; } /* Founder ruling (2026-07-03): a meter is measured data, not a pass/fail verdict on its own -- the fill is ink, not green. Below-floor stays red (that IS a warning signal, floor markers are unchanged either way). */ .meter > i { display: block; height: 100%; border-radius: 3px; background: var(--t1); transition: width .5s ease-out; } .meter > i.is-below { background: var(--red); } .meter-floor { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--t1); opacity: .5; border-radius: 1px; } /* ════════════════════════════════════════════════════════════════════════ CATALOG — filter rail + grid + cards (full-bleed) ════════════════════════════════════════════════════════════════════════ */ .catalog-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 26px; align-items: start; } .filter-rail { position: sticky; top: 18px; background: var(--bg3); border: 1px solid var(--b0); border-radius: var(--r2); padding: 16px; display: flex; flex-direction: column; gap: 16px; } .filter-rail-head { display: flex; align-items: center; justify-content: space-between; } .filter-rail-title { font-size: 12px; font-weight: 700; color: var(--t1); } .filter-clear { background: var(--ad); color: var(--a); border: none; border-radius: 5px; padding: 3px 9px; font-size: 11px; font-weight: 600; cursor: pointer; } .filter-clear:hover { background: rgba(232,78,15,.16); } .filter-grp-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); margin-bottom: 9px; display: flex; justify-content: space-between; align-items: baseline; } .filter-grp-v { color: var(--a); font-weight: 600; text-transform: none; letter-spacing: 0; } .filter-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--t2); cursor: pointer; } .filter-toggle input { width: 16px; height: 16px; accent-color: var(--a); } .range { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px; background: var(--bg1); outline: none; } .range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--a); cursor: pointer; border: 2px solid var(--bg4); box-shadow: 0 1px 3px rgba(20,17,13,.2); } .range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--a); cursor: pointer; border: 2px solid var(--bg4); } .range-scale { display: flex; justify-content: space-between; margin-top: 6px; } .catalog-main { min-width: 0; } .catalog-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .search-pill { flex: 1; display: flex; align-items: center; gap: 9px; background: var(--bg4); border: 1.5px solid var(--b1); border-radius: 10px; padding: 0 14px; min-height: 44px; transition: border-color .15s, box-shadow .15s; } .search-pill:focus-within { border-color: var(--a); box-shadow: 0 0 0 3px var(--ag); } .search-ico { font-size: 16px; color: var(--t3); } .search-field { flex: 1; border: none; background: none; font-family: var(--font-ui); font-size: 14px; color: var(--t1); outline: none; min-width: 0; } .search-x { background: none; border: none; color: var(--t3); cursor: pointer; font-size: 13px; padding: 4px; } .search-x:hover { color: var(--t1); } .catalog-count { display: flex; align-items: baseline; gap: 5px; font-size: 13px; white-space: nowrap; } /* compact filter toolbar + dropdown panel (replaces the left filter rail) */ .cf { position: relative; margin-bottom: 20px; } .cf-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cf-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--bg4); border: 1px solid var(--hair); border-radius: var(--r); padding: 8px 13px; min-height: 40px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--t1); cursor: pointer; transition: border-color .15s; } .cf-toggle:hover { border-color: var(--t1); } .cf-toggle.is-open { border-color: var(--t1); } .cf-toggle-ico { width: 16px; height: 16px; color: var(--t2); } .cf-badge { background: var(--a); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } .cf-sort { display: inline-flex; align-items: center; gap: 8px; } .cf-sort-l { text-transform: uppercase; letter-spacing: .07em; font-weight: 700; } .cf-active { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; flex: 1; min-width: 0; } .cf-active-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ad); color: var(--a); border: none; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s; } .cf-active-chip:hover { background: rgba(232,78,15,.16); } .cf-active-chip .cf-x { font-size: 10px; opacity: .8; } .cf-clear { background: none; border: none; color: var(--t3); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px; } .cf-clear:hover { color: var(--a); } .cf-count { margin-left: auto; display: flex; align-items: baseline; gap: 4px; font-size: 13px; white-space: nowrap; color: var(--t1); } .cf-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: min(680px, 92vw); background: var(--bg4); border: 1px solid var(--hair); border-radius: var(--r2); box-shadow: var(--hair-shadow), 0 18px 48px -20px rgba(20,17,13,.4); padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; animation: cf-pop .14s ease-out; } .cf-grp-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); margin-bottom: 9px; display: flex; justify-content: space-between; align-items: baseline; } @keyframes cf-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (max-width: 720px) { .cf-panel { grid-template-columns: 1fr; width: min(440px, 92vw); } .cf-count { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .cf-panel { animation: none; } } .dcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .dcard { position: relative; background: var(--bg3); border: 1px solid var(--hair-soft); border-radius: var(--r2); overflow: hidden; box-shadow: var(--hair-shadow); transition: border-color .18s; display: flex; flex-direction: column; } .dcard:hover { border-color: var(--t1); } .dcard-hit { position: absolute; inset: 0; z-index: 1; background: none; border: none; cursor: pointer; } .dcard-hit:focus-visible { outline: 2px solid var(--t1); outline-offset: -2px; border-radius: var(--r2); } .dcard-viz { position: relative; height: 118px; background: var(--bg2); border-bottom: 1px solid var(--hair-soft); } .dcard-viz-tags { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 4px; align-items: center; } /* Certified-row glyph (v3 die-mark asset, docs/DESIGN.md §-1) — a small ink-70 mark next to the Tier badge on a certified card only (tier === t3); never rendered for verified/unmeasured, so it stays a genuine certified signal, not decoration. */ .dcard-die-mark { opacity: .7; } /* cthumb- : real uploaded image thumbnail in the card viz slot. Prefix collision-audited against app.css (no prior `cthumb-` rules). Fills the same 118px footprint the SampleViz used so there is no layout shift. */ .cthumb-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; } .cthumb-img { display: block; width: 100%; height: 100%; object-fit: cover; border-top-left-radius: var(--r2); border-top-right-radius: var(--r2); } .cthumb-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .cthumb-box { fill: none; stroke: var(--a); stroke-width: 1.25; vector-effect: non-scaling-stroke; opacity: .55; } .cthumb-chip { position: absolute; left: 8px; bottom: 8px; z-index: 2; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--ag); color: var(--a); border: 1px solid var(--b1); pointer-events: none; } .dcard-body { padding: 13px 15px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .dcard-top { position: relative; z-index: 2; pointer-events: none; } .dcard-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dcard-fam { font-family: var(--font-mono); font-size: 10px; color: var(--t3); text-transform: capitalize; } .dcard-chips { display: flex; flex-wrap: wrap; gap: 4px; position: relative; z-index: 2; pointer-events: none; } .mod-chip { font-family: var(--font-mono); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--hair); background: none; color: var(--t2); } .mod-chip.is-more { color: var(--t3); } .dcard-trust { position: relative; z-index: 2; pointer-events: none; } .dcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hair-soft); position: relative; z-index: 2; } .dcard-meta { display: flex; align-items: baseline; gap: 6px; min-width: 0; pointer-events: none; } .dcard-price { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--t1); } .dcard-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .card-skel { height: 320px; border-radius: var(--r2); background: linear-gradient(100deg, var(--bg2) 30%, var(--bg3) 50%, var(--bg2) 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border: 1px solid var(--b0); } @keyframes shimmer { to { background-position: -200% 0; } } /* ── Datasets list view (`dsl-`) — the dense table counterpart to the card grid. Reuses .page-head, .dk-tile-grid, .dk-ops-panel, .search-pill, .seg, .mod-chip and the DataTable kit; these few atoms fill the gaps. ───────── */ .dsl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .dsl-toggle { width: auto; } /* override .seg full-width for the head toggle */ .dsl-toggle .seg-btn { text-decoration: none; } .dsl-toolbar { flex-wrap: wrap; } .dsl-sort { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .dsl-select { font-family: var(--font-ui); font-size: 13px; color: var(--t1); background: var(--bg4); border: 1.5px solid var(--b1); border-radius: 10px; padding: 0 30px 0 12px; min-height: 44px; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--t3) 50%), linear-gradient(135deg, var(--t3) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; transition: border-color .15s, box-shadow .15s; } .dsl-select:focus-visible { border-color: var(--a); box-shadow: 0 0 0 3px var(--ag); } .dsl-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; } .dsl-name { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; } .dsl-id { font-size: 12.5px; font-weight: 700; } .dsl-fam { text-transform: capitalize; } .dsl-vol { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; } /* ── Sample viz frame ─────────────────────────────────────────────────── */ .sampleviz { position: relative; width: 100%; height: 100%; cursor: ew-resize; touch-action: pan-y; } .sampleviz:focus-visible { outline: 2px solid var(--a); outline-offset: -2px; } .sampleviz svg { display: block; } .sv-tag { position: absolute; left: 8px; bottom: 6px; font-size: 8px; color: var(--t3); background: var(--bg3); padding: 1px 6px; border-radius: 4px; opacity: .85; pointer-events: none; } .is-compact .sv-tag { font-size: 7.5px; } /* ════════════════════════════════════════════════════════════════════════ DATASET WORKSPACE (full-screen) ════════════════════════════════════════════════════════════════════════ */ /* Workspace root — namespaced `dw-` (dataset-workspace) to avoid colliding with the mock design system's `.ws` wizard-step pill (display:flex; font-size:11px; white-space:nowrap). The root is a full-width vertical stack: three bands (identity header → context → guided journey) stack top to bottom with generous spacing, using the full content width (no side column, no gutter). */ .dw { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: none; margin: 0; min-width: 0; } .dw-crumbs { margin-bottom: 14px; } .dw-crumb { background: none; border: none; color: var(--t2); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; } .dw-crumb:hover { color: var(--a); } .ws-loading { display: flex; align-items: center; gap: 10px; padding: 60px; justify-content: center; } /* ── identity header — band 1, full-width ────────────────────────────── */ .dw-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 36px; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--b0); width: 100%; } .ws-head-id { min-width: 0; } .ws-head-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--t3); text-transform: capitalize; margin-bottom: 8px; } .ws-title { font-size: var(--fs-display-1); font-weight: 800; letter-spacing: -1px; line-height: 1.04; word-break: break-word; overflow-wrap: anywhere; } .ws-head-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .ws-head-lede { font-size: 13px; line-height: 1.55; margin-top: 14px; max-width: 56ch; } .ws-head-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; } .ws-price { text-align: right; } .ws-price-v { font-size: clamp(28px, 3vw, 34px); font-weight: 800; letter-spacing: -1px; color: var(--green); display: block; line-height: 1; } .ws-price-l { font-size: 11px; display: block; margin-top: 5px; } .ws-head-prog { font-size: 10.5px; color: var(--t3); letter-spacing: .02em; } /* ── context band — band 2, the data & its proof (internal responsive grid) ── */ .dw-context { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "viz prov" "score score"; gap: 18px; align-items: stretch; width: 100%; margin-bottom: 26px; } .ws-panel-viz { grid-area: viz; } .ws-panel-score { grid-area: score; } .ws-panel-prov { grid-area: prov; } /* dw-prov — standalone full-width Provenance panel between the context band and the journey. Reuses .ws-panel chrome; this only spaces it off the journey. */ .dw-prov { margin-bottom: 26px; } .ws-panel { background: var(--bg3); border: 1px solid var(--hair-soft); border-radius: var(--r2); padding: 18px 20px; min-width: 0; box-shadow: var(--hair-shadow); } .ws-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } /* eyebrow treatment (docs/DESIGN.md §0), matching .dk-surface-title */ .ws-panel-title { font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-60); } .ws-viz { height: 240px; background: var(--bg2); border: 1px solid var(--b1); border-radius: var(--r); overflow: hidden; } .ws-viz-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; } .ws-score { display: flex; flex-direction: column; gap: 16px; } .ws-score-ring { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--b0); } .ws-score-big { font-size: 22px; font-weight: 700; color: var(--green); line-height: 1; } .ws-score-ring-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .scorecard-foot { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--t3); } .scorecard-foot b { color: var(--t1); } .scorecard-note { margin-top: 8px; } .prov-chain { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--b0); border: 1px solid var(--b0); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; } .prov-node { background: var(--bg2); padding: 13px 10px; text-align: center; min-width: 0; } .prov-node.is-trust { background: var(--ag); } .prov-l { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; color: var(--t1); } .prov-node.is-trust .prov-l { color: var(--a); } .prov-d { font-size: 10px; color: var(--t2); line-height: 1.4; } .ws-facts { display: grid; grid-template-columns: 1fr; gap: 0; } .kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--b0); font-size: 12px; min-width: 0; } .kv-k { flex-shrink: 0; } .kv-v { text-align: right; font-weight: 600; word-break: break-all; overflow-wrap: anywhere; min-width: 0; } /* CertRing */ .cert-ring { position: relative; flex-shrink: 0; } .cert-ring svg { display: block; } .cert-ring-arc { transition: stroke-dashoffset .8s ease-out; } .cert-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .cert-ring-n { font-size: 15px; font-weight: 700; line-height: 1; } .cert-ring-l { font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t3); margin-top: 2px; } /* ════════════════════════════════════════════════════════════════════════ THE JOURNEY — full-width guided verify-to-checkout spine ════════════════════════════════════════════════════════════════════════ */ /* band 3 — full-width guided journey, never a narrow right rail */ .dw-journey { width: 100%; background: var(--bg4); border: 1px solid var(--b1); border-radius: var(--r3); padding: clamp(18px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 22px; box-shadow: 0 18px 50px -34px rgba(20,17,13,.45); scroll-margin-top: 18px; min-width: 0; } .dw-journey:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; } .dw-journey-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .dw-journey-title { font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; letter-spacing: -.4px; } .dw-journey-sub { font-size: 13px; line-height: 1.55; margin-top: 5px; max-width: 64ch; } .dw-journey-count { font-size: 12px; color: var(--t3); border: 1px solid var(--b1); border-radius: 999px; padding: 4px 11px; flex-shrink: 0; } /* horizontal progress rail */ .prail { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: start; gap: 0; padding-bottom: 4px; } .prail-step { position: relative; min-width: 0; } .prail-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 4px 6px 2px; cursor: pointer; border-radius: var(--r); transition: background .14s ease-out; text-align: center; min-width: 0; } .prail-btn:disabled { cursor: default; } .prail-btn:not(:disabled):hover { background: var(--chip); } /* Wizard stepper ink discipline (founder ruling, 2026-07-03): future/locked steps are hairline circles, the current step is an ink-FILLED dot -- no orange dots anywhere in this rail. Done stays green (it is a real verified state: the step passed), everything else is ink or hairline. */ .prail-dot { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 1.5px solid var(--hair); color: var(--t3); background: var(--bg4); transition: background .2s ease-out, border-color .2s ease-out; position: relative; z-index: 1; } .prail-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .prail-label { font-size: 12.5px; font-weight: 700; color: var(--t2); line-height: 1.2; } .prail-hint { font-size: 10.5px; color: var(--t3); line-height: 1.25; } .prail-line { position: absolute; top: 19px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: var(--hair); z-index: 0; } .prail-step.is-done .prail-dot { background: var(--green); border-color: var(--green); color: #fff; } .prail-step.is-done .prail-label { color: var(--t1); } .prail-step.is-done .prail-line { background: var(--green); } .prail-step.is-active .prail-dot { background: var(--t1); border-color: var(--t1); color: var(--bg0); } .prail-step.is-active .prail-label, .prail-step.is-current .prail-label { color: var(--t1); } .prail-step.is-locked .prail-dot { opacity: .55; } .prail-step.is-locked .prail-label, .prail-step.is-locked .prail-hint { opacity: .55; } /* journey stage (where the active step + result chips live) */ .dw-journey-stage { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--b0); padding-top: 20px; min-width: 0; } .ws-alert { background: var(--rd); color: var(--red); border: 1px solid rgba(211,58,44,.25); border-radius: var(--r); padding: 10px 13px; font-size: 12.5px; display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; } /* neutral (non-error) inline notice banner — e.g. "your free trial ended" */ .notice-banner { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--bg1); border: 1px solid var(--b0); border-radius: var(--r); font-size: var(--fs-small); } .err-text { color: var(--red); margin-top: var(--sp-2); } .note-tight { margin: 2px 0 0; } .list-plain { list-style: none; padding: 0; margin: 0; } .panel-title-lg { font-size: 1.3rem; } .dk-surface-h.is-nested, .dk-ops-panel-h.is-nested { gap: var(--sp-3); margin: 0; } /* collapsed result chips for completed steps */ .rchip { border: 1px solid rgba(63,142,91,.3); background: var(--gd); border-radius: var(--r2); overflow: hidden; } .rchip-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap; min-width: 0; } .rchip-icon { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .rchip-label { font-size: 12px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; } .rchip-summary { font-size: 12px; color: var(--t2); font-family: var(--font-mono); flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .rchip-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; } .rchip-toggle { background: var(--bg4); border: 1px solid var(--b1); border-radius: 6px; padding: 4px 11px; font-size: 11px; font-weight: 600; color: var(--t2); cursor: pointer; font-family: var(--font-ui); min-height: 30px; transition: border-color .14s, color .14s; } .rchip-toggle:hover { border-color: var(--b2); color: var(--t1); } .rchip-body { padding: 0 14px 14px; border-top: 1px solid rgba(63,142,91,.2); padding-top: 12px; } /* the active step — the single prominent action */ .ws-active-step { background: var(--bg2); border: 1px solid var(--b1); border-radius: var(--r2); padding: clamp(16px, 2vw, 24px); min-width: 0; } .astep { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .astep-head { display: flex; flex-direction: column; gap: 4px; } .astep-n { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--ink-60); } .astep-title { font-size: clamp(16px, 1.8vw, 19px); font-weight: 700; letter-spacing: -.3px; color: var(--t1); } .astep-why { font-size: 13px; line-height: 1.6; max-width: 62ch; overflow-wrap: anywhere; } .astep-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .astep-note { overflow-wrap: anywhere; } .astep-locked { padding: 12px 14px; background: var(--bg1); border: 1px dashed var(--b1); border-radius: var(--r); } .astep-next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 4px; } /* Selection cards (Contribute's listing-mode picker, Onboarding's tier picker) -- documented as shipped (CONTRACTS.md §6.2) but the rule was missing from this file; added here per the founder's selection-card law: selected state is a 1px ink border + an ink check, never a thick orange border or fill (docs/DESIGN.md §0 "Selection cards"). */ .co-mode-picker, .ob-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .co-mode-card, .ob-tier-card { position: relative; display: flex; align-items: flex-start; gap: 12px; text-align: left; cursor: pointer; background: var(--bg3); border: 1px solid var(--hair); border-radius: var(--r2); padding: 16px; transition: border-color .14s ease-out; } .co-mode-card:hover, .ob-tier-card:hover { border-color: var(--b2); } .co-mode-card.is-selected, .ob-tier-card.is-selected { border: 1px solid var(--t1); } /* Onboarding's tier card has no dedicated icon element in its markup (unlike the listing-mode card's .co-mode-ico) -- an ink check mark, CSS-only, so the selected state still carries a visible check, not just a border. */ .ob-tier-card.is-selected::after { content: "✓"; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--t1); color: var(--bg0); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .co-mode-ico { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--t3); border: 1.5px solid var(--hair); background: var(--bg4); } .co-mode-card.is-selected .co-mode-ico { color: var(--t1); border-color: var(--t1); } .co-mode-title, .ob-tier-label { font-size: 13.5px; font-weight: 700; color: var(--t1); margin-bottom: 3px; } .co-mode-sub, .ob-tier-blurb { line-height: 1.5; } .ob-tier-radio { position: absolute; opacity: 0; pointer-events: none; } .ob-tier-body { min-width: 0; } .ob-tier-splits { margin: 6px 0; } .step-next { color: var(--green); font-weight: 600; flex: 1 1 auto; min-width: 0; } .step-form { display: flex; flex-direction: column; gap: 14px; } .step-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .field-l { font-size: 11px; font-weight: 600; color: var(--t2); text-transform: uppercase; letter-spacing: .04em; } .field-i { padding: var(--sp-3) var(--sp-3); background: var(--bg4); border: 1px solid var(--b1); border-radius: var(--r); font-family: var(--font-ui); font-size: var(--fs-small); color: var(--t1); min-height: 42px; width: 100%; min-width: 0; } .field-i:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 3px var(--ag); } /* verify result */ .verify-result { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .verify-banner { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: var(--r); background: var(--gd); border: 1px solid rgba(63,142,91,.25); min-width: 0; } .verify-banner-tx { min-width: 0; overflow-wrap: anywhere; } .verify-result.is-bad .verify-banner { background: var(--rd); border-color: rgba(211,58,44,.25); } .verify-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; } .verify-result.is-bad .verify-icon { background: var(--red); } .verify-icon.is-sm { width: 20px; height: 20px; font-size: 12px; } .verify-title { font-size: 13px; font-weight: 700; } .verify-report { list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; min-width: 0; } .verify-report li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; padding: 3px 0; min-width: 0; } .vr-mark { flex-shrink: 0; font-weight: 700; } .vr-text { min-width: 0; overflow-wrap: anywhere; word-break: break-word; font-family: var(--font-mono); font-size: 11.5px; } .vr-pass .vr-mark { color: var(--green); } .vr-fail .vr-mark { color: var(--red); } .vr-info .vr-mark { color: var(--t3); } .vr-fail { color: var(--red); } /* detail stacks reused inside chips + step cards */ .detail-stack { display: flex; flex-direction: column; gap: 0; min-width: 0; } .grant-card, .sample-card, .order-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .grant-h, .order-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--green); } .sample-bytes { min-width: 0; } .sample-bytes-h { margin-bottom: 5px; } .sample-pre { background: var(--bg0); border: 1px solid var(--b1); border-radius: var(--r); padding: 10px; font-size: 11px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; color: var(--t2); max-height: 160px; overflow-y: auto; } /* in-browser SHA-256 verification verdict (tv- prefix; audited free of collisions) */ .tv-verdict { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border-radius: var(--r); border: 1px solid var(--b1); background: var(--bg0); min-width: 0; } .tv-verdict.is-match { background: var(--gd); border-color: rgba(63,142,91,.25); } .tv-verdict.is-mismatch { background: var(--rd); border-color: rgba(211,58,44,.3); } .tv-vhead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; } .tv-vtext { font-size: 12px; line-height: 1.5; color: var(--t2); min-width: 0; overflow-wrap: anywhere; } .tv-verdict.is-mismatch .tv-vtext { color: var(--red); font-weight: 600; } .tv-vicon { flex-shrink: 0; font-size: 13px; color: var(--t3); } .tv-hashes { display: flex; flex-direction: column; gap: 0; min-width: 0; } .tv-spin { width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--b2); border-top-color: var(--t2); display: inline-block; vertical-align: middle; margin-right: 8px; animation: tv-spin .7s linear infinite; } @keyframes tv-spin { to { transform: rotate(360deg); } } .tv-herolink { background: none; border: none; padding: 0; cursor: pointer; } .tv-herosub { margin-top: 8px; line-height: 1.5; } .rchip.tv-rchip-bad { border-color: rgba(211,58,44,.3); background: var(--rd); } .rchip.tv-rchip-bad .rchip-icon { background: var(--red); } .rchip.tv-rchip-bad .rchip-label { color: var(--red); } @media (prefers-reduced-motion: reduce) { .tv-spin { animation: none; } } /* governed image + VLM overlay (ev- prefix = enrichment view; audited free of collisions: no prior .ev- rule existed in this file). Reuses .mod-chip + tokens. */ .ev-block { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .ev-figure { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ev-stage { position: relative; width: 100%; max-width: 560px; border: 1px solid var(--b1); border-radius: var(--r); overflow: hidden; background: var(--bg0); line-height: 0; } .ev-img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; } .ev-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .ev-rect { fill: none; } .ev-rect-obj { stroke: var(--a); stroke-width: 1.5; fill: var(--ag); } .ev-rect-pii { stroke: var(--red); stroke-width: 1.5; fill: var(--rd); } .ev-labels { position: absolute; inset: 0; pointer-events: none; } .ev-tag { position: absolute; transform: translateY(-100%); max-width: 60%; font-family: var(--font-mono); font-size: 10px; font-weight: 600; line-height: 1.3; padding: 1px 5px; border-radius: 4px 4px 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } .ev-tag-obj { background: var(--a); } .ev-tag-pii { background: var(--red); } .ev-conf { opacity: .85; font-weight: 700; } .ev-controls { display: flex; align-items: center; gap: 10px; } .ev-controls-top { justify-content: flex-end; margin-bottom: 2px; } .ev-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); cursor: pointer; } .ev-toggle input { accent-color: var(--a); width: 14px; height: 14px; cursor: pointer; } .ev-toggle input:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; } /* Overlay layer picker (RAW / VLM / PII, D3): ink selection per the v3 "selection is ink, never orange" rule (docs/DESIGN.md) — matches TabBar/rail active state, not a filter chip. A disabled option (no data for this sample) dims and shows an honest title hint instead of silently doing nothing. */ .ev-overlay-toggle { display: inline-flex; border: 1px solid var(--hair); border-radius: var(--r2); overflow: hidden; } .ev-ov-btn { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 5px 12px 3px; background: var(--bg3); border: none; border-right: 1px solid var(--hair); border-bottom: 2px solid transparent; color: var(--t2); cursor: pointer; } .ev-ov-btn:last-child { border-right: none; } .ev-ov-btn:hover:not(:disabled) { background: var(--bg2); color: var(--t1); } /* selection is a border, never a fill (v3 lock, docs/DESIGN.md §-1) — same ink-underline language TabBar uses for its active state. */ .ev-ov-btn.is-active { color: var(--t1); font-weight: 700; border-bottom-color: var(--t1); } .ev-ov-btn:disabled { color: var(--t3); opacity: .45; cursor: not-allowed; } .ev-ov-btn:focus-visible { outline: 2px solid var(--t1); outline-offset: -2px; } .ev-overlay-hint { margin: 0; } .ev-context { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .ev-caption { font-size: 14px; line-height: 1.5; color: var(--t1); overflow-wrap: anywhere; } .ev-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ev-flag { background: var(--rd); color: var(--red); } .ev-meta { overflow-wrap: anywhere; } .ev-attrib { line-height: 1.5; overflow-wrap: anywhere; } /* raw vs processed (rvp- prefix, video/clip datasets only). Reuses .ws-panel chrome + the .ev-overlay/.ev-rect/.ev-tag overlay pattern + tokens. The two frame columns share one transport; stack under ~720px. */ .dw-rvp-band { width: 100%; margin-bottom: 26px; } .rvp-score { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .rvp-score-note { margin: 0; max-width: 52ch; line-height: 1.5; } /* The provisional ring is amber + NEUTRAL (not green). The measured ring keeps the kit's green arc. Same DOM in both states so the flip is layout-stable. */ .rvp-ring-provisional .cert-ring-arc { stroke: var(--amber); } .rvp-ring-provisional .cert-ring-n { color: var(--amber); } /* Indeterminate/pending ring (provisional, no measured number yet): empty track, em-dash in the number slot. The em-dash is a NEUTRAL pending mark, never amber or green, so it does not read as a real or failing score. */ .cert-ring.is-indeterminate .cert-ring-n { color: var(--t3); } .rvp-ring-provisional .cert-ring.is-indeterminate .cert-ring-n { color: var(--t3); } /* Lot-level "annotations pending" note near the panel header (all frames empty). */ .rvp-pending-lot { margin: 0 0 14px; line-height: 1.5; } /* Per-frame quiet pending caption on the processed pane (this frame has no objects). Understated, hairline, neutral. A data state, not an alarm. No red/green. */ .rvp-pane-pending { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 8px; border: 1px solid var(--b1); border-radius: var(--r); background: color-mix(in srgb, var(--bg3) 88%, transparent); color: var(--t3); line-height: 1.3; } .rvp-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; } .rvp-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; } .rvp-col-cap { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t3); } .rvp-cap-sub { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--t3); } .rvp-pane { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--b1); border-radius: var(--r); overflow: hidden; background: var(--bg0); line-height: 0; } .rvp-img { display: block; width: 100%; height: 100%; object-fit: contain; } .rvp-pane-load, .rvp-pane-fail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1.4; } .rvp-transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .rvp-scrub { flex: 1 1 120px; min-width: 100px; accent-color: var(--a); cursor: pointer; } .rvp-scrub:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; } .rvp-frame { color: var(--t3); white-space: nowrap; } .rvp-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; } .rvp-rm-note { margin: 10px 0 0; line-height: 1.5; } .rvp-attrib { margin: 12px 0 0; line-height: 1.5; overflow-wrap: anywhere; } @media (max-width: 720px) { .rvp-stage { grid-template-columns: 1fr; } } .ev-note { margin: 0; } /* license summary + confirmation */ .license-summary { display: flex; flex-direction: column; gap: 12px; } .license-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--b0); font-size: 13px; min-width: 0; } .license-line .mono { overflow-wrap: anywhere; word-break: break-all; text-align: right; } .license-total { font-weight: 700; border-bottom: none; } .license-price { font-size: 22px; font-weight: 800; color: var(--green); letter-spacing: -.5px; } .order-celebrate { display: flex; align-items: center; gap: 13px; } .order-tick { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; } .order-h2 { font-size: 19px; font-weight: 700; letter-spacing: -.3px; } .order-note { overflow-wrap: anywhere; } /* ════════════════════════════════════════════════════════════════════════ AI SEARCH DRAWER (left side) ════════════════════════════════════════════════════════════════════════ */ /* v3 motion law (docs/DESIGN.md §-1): same 240ms / 25% ink scrim as the right-side Sheet component, aligned here rather than duplicated as a new component — this is a left-side slide, everything else matches. */ .ai-scrim { position: fixed; inset: 0; background: rgba(20,17,12,.25); z-index: 90; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .ai-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(420px, 92vw); z-index: 95; background: var(--bg2); border-right: 1px solid var(--b1); display: flex; flex-direction: column; transform: translateX(-104%); transition: transform var(--dur-drawer) ease-out; box-shadow: 18px 0 50px -30px rgba(20,17,13,.5); } .ai-drawer.is-open { transform: translateX(0); } .ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--b0); } .ai-head-id { display: flex; align-items: center; gap: 11px; } .ai-orb { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #ffd2bd, var(--a) 62%, #b23c0a); box-shadow: 0 0 0 4px var(--ag); animation: orbPulse 3.2s ease-in-out infinite; flex-shrink: 0; } .ai-title { font-size: 14px; font-weight: 700; } .ai-sub { font-size: 10.5px; } .ai-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; } .ai-msg { display: flex; gap: 9px; align-items: flex-start; } .ai-msg.ai-user { flex-direction: row-reverse; } .ai-msg-orb { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 32% 30%, #ffd2bd, var(--a) 62%, #b23c0a); margin-top: 2px; } .ai-bubble { max-width: 84%; padding: 10px 13px; border-radius: 13px; font-size: 12.5px; line-height: 1.5; } .ai-agent .ai-bubble { background: var(--bg4); border: 1px solid var(--b0); border-top-left-radius: 4px; } .ai-user .ai-bubble { background: var(--a); color: #fff; border-top-right-radius: 4px; } .ai-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; } .ai-chip { font-size: 10px; padding: 3px 8px; border-radius: 5px; background: var(--ad); color: var(--a); } .ai-chip b { text-transform: uppercase; letter-spacing: .04em; opacity: .7; font-size: 8.5px; margin-right: 3px; } .ai-count { font-size: 11px; color: var(--green); font-weight: 700; margin-top: 8px; } .ai-typing { display: inline-flex; gap: 4px; } .ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--t3); animation: typing 1.2s infinite ease-in-out; } .ai-typing i:nth-child(2) { animation-delay: .15s; } .ai-typing i:nth-child(3) { animation-delay: .3s; } @keyframes typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .ai-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px; border-top: 1px solid var(--b0); } .ai-suggest .chip { font-size: 11px; } .ai-input { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--b0); } .ai-field { flex: 1; padding: 11px 14px; background: var(--bg4); border: 1.5px solid var(--b1); border-radius: 10px; font-family: var(--font-ui); font-size: 13px; color: var(--t1); min-height: 44px; } .ai-field:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 3px var(--ag); } /* ════════════════════════════════════════════════════════════════════════ PORTALS (Partners / Processors / Validate / Admin) ════════════════════════════════════════════════════════════════════════ */ .partner-grid, .proc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .partner-card { background: var(--bg3); border: 1px solid var(--b0); border-radius: var(--r2); padding: 18px; display: flex; flex-direction: column; gap: 14px; } .partner-card-h { display: flex; align-items: center; gap: 11px; } .partner-accent { width: 4px; height: 34px; border-radius: 2px; flex-shrink: 0; } .partner-name { font-size: 14px; font-weight: 700; } .partner-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--b0); border-radius: var(--r); overflow: hidden; } .partner-list { display: flex; flex-direction: column; gap: 2px; } .partner-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: none; background: none; border-radius: var(--r); cursor: pointer; font-size: 11.5px; text-align: left; transition: .14s; } .partner-row:hover { background: var(--chip); } .proc-card { position: relative; background: var(--bg3); border: 1px solid var(--b0); border-radius: var(--r2); padding: 18px; padding-left: 22px; overflow: hidden; } .proc-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .proc-name { font-size: 14px; font-weight: 700; margin-bottom: 5px; } .proc-note { font-size: 12px; margin-bottom: 10px; } .proc-key { color: var(--t3); } .portal-note { margin-top: 18px; padding: 16px; background: var(--bg2); border: 1px solid var(--b0); border-radius: var(--r2); font-size: 12.5px; } /* ─────────────────────────── Processor work board (pwb-) ─────────────────── The interactive Enrich work board. Reuses dk-ops-panel, Badge, Button, KV, and ws-facts; this block only adds the card grid, the per-card meta layout, the action/disclosure column, and the terminal-state accents. Collision- audited: no prior `.pwb-` rule existed in this file. */ .pwb-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .pwb-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: start; background: var(--bg2); border: 1px solid var(--b0); border-left: 3px solid var(--b1); border-radius: var(--r2); padding: 16px; min-width: 0; } .pwb-accepted { border-left-color: var(--green); } .pwb-rejected { border-left-color: var(--red); } .pwb-rework { border-left-color: var(--amber); } /* Kill teal (founder ruling, 2026-07-03): claimed/submitted are in-progress states, not a persona-accent moment -- ink, matching "everything else". */ .pwb-claimed, .pwb-submitted { border-left-color: var(--t1); } .pwb-card-main { min-width: 0; } .pwb-card-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } /* the work id IS the card header (D3 work order) — mono masthead, not a small label buried among the meta fields. Machine values never wrap. */ .pwb-id { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } /* the expanded (workbench) card leads with the work id as its dominant mono masthead — bumped up from the queue-row size so the signing panel reads as a work order, not a generic label with a bigger box under it. */ .pwb-card.is-open .pwb-id { font-size: 22px; letter-spacing: -0.02em; } /* progress hairline — a quiet 3-stop rail re-reading the SAME status the badge already shows as a position, never a second source of truth. */ .pwb-rail { display: flex; gap: 3px; margin-bottom: 12px; } .pwb-rail-seg { flex: 1; height: 2px; background: var(--hair); border-radius: 1px; } .pwb-rail-seg.is-done { background: var(--t1); } .pwb-rail-seg.is-current { background: var(--t1); } .pwb-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; } .pwb-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pwb-mk { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); } .pwb-mv { font-size: 12px; font-weight: 600; color: var(--t1); overflow-wrap: anywhere; word-break: break-word; min-width: 0; } /* machine values never wrap (docs/DESIGN.md hard rule) — the mono variant (lot id, input root) truncates with an ellipsis instead of breaking mid-hash. */ .pwb-mv.mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; display: block; } .pwb-mv .bd { white-space: nowrap; } .pwb-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .pwb-action { display: flex; } .pwb-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--green); } .pwb-no { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--red); } .pwb-disclose { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 2px 0; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--t2); } .pwb-disclose:hover { color: var(--a); } .pwb-reject { grid-column: 1 / -1; margin: 0; padding: 9px 12px; background: var(--rd, rgba(176,58,46,.08)); border: 1px solid rgba(176,58,46,.18); border-radius: var(--r); font-size: 12px; color: var(--red); overflow-wrap: anywhere; } .pwb-rework-note { grid-column: 1 / -1; margin: 0; padding: 9px 12px; background: var(--wd); border: 1px solid rgba(181,121,10,.2); border-radius: var(--r); font-size: 12px; color: var(--amber); overflow-wrap: anywhere; } .pwb-expiry { font-size: 11.5px; color: var(--t3); } .pwb-disabled-note { font-size: 11px; color: var(--t3); text-align: right; max-width: 220px; } .pwb-facts { grid-column: 1 / -1; margin-top: 2px; padding: 12px 14px; background: var(--bg3); border: 1px solid var(--b0); border-radius: var(--r); } /* signing panel (D3 work order): fingerprint + a plain consequence line, the same instrument-panel weight Validate's trust-root panel uses. */ .pwb-sign-panel { border-color: var(--hair); } .pwb-sign-consequence { margin: 12px 0 0; color: var(--ink-60); line-height: 1.5; } /* Enrichment steps -- a 4-up grid of quiet cards (D-series polish). 4 columns on wide screens, collapsing responsively; each card matches the app's quiet-card language (hairline border, --bg3 fill, --r2 radius) instead of the old flat list-row look. */ .pwb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); } .pwb-step { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: var(--sp-4); background: var(--bg3); border: 1px solid var(--hair-soft); border-radius: var(--r2); } .pwb-step-ico { width: 30px; height: 30px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--hair); color: var(--t1); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .pwb-step-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .pwb-step-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .validate-top { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* Retired (D-series polish, 2026-07-03): the audit pipeline widget moved from a stacked numbered list to a horizontal flow (.audit-flow* below). Zero call sites reference .validate-stages/.vstage/.vstage-n anymore -- kept per the retire-don't-delete convention (CONTRACTS.md §1), not deleted. */ .validate-stages { list-style: none; display: flex; flex-direction: column; gap: 10px; } .vstage { display: flex; align-items: center; gap: 12px; } .vstage-n { width: 26px; height: 26px; border-radius: 50%; background: var(--bg2); border: 1px solid var(--hair); color: var(--t1); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; } .vstage div { display: flex; flex-direction: column; } .vstage span.muted { font-size: 10.5px; } /* Audit pipeline horizontal flow (D-series polish) -- three stages connected by hairline arrows, ink-only step markers (no colored fill). */ .audit-flow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .audit-flow-stage { display: flex; align-items: center; gap: 10px; min-width: 0; } .audit-flow-marker { width: 24px; height: 24px; border-radius: 50%; background: transparent; border: 1px solid var(--t1); color: var(--t1); font-family: var(--font-mono); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .audit-flow-stage div { display: flex; flex-direction: column; gap: 1px; } .audit-flow-stage span.muted { font-size: 10.5px; } .audit-flow-arrow { color: var(--ink-40); font-size: 14px; flex-shrink: 0; } @media (max-width: 640px) { .audit-flow { flex-direction: column; align-items: flex-start; gap: 10px; } .audit-flow-arrow { transform: rotate(90deg); align-self: center; } } /* Validate — dataset audit panel (va-). Reuses dk-ops-panel + ws-facts shells; these classes only cover the audit-specific chrome: header row, the signed processing chain, the verify report, and the inline revoke confirm. */ .va-audit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .va-audit-id { font-size: 12px; color: var(--t2); } .va-sub { margin: 18px 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); font-weight: 700; } .va-chain { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; } .va-chain-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--b0); border-radius: var(--r); } .va-chain-n { width: 22px; height: 22px; border-radius: 50%; background: rgba(63,142,91,.12); color: var(--green); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0; } .va-chain-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; } .va-chain-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .va-chain-roots { display: flex; align-items: center; gap: 8px; color: var(--t2); flex-wrap: wrap; } .va-arrow { color: var(--t3); } .va-report { list-style: none; margin: 0; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--b0); border-radius: var(--r); display: flex; flex-direction: column; gap: 4px; color: var(--t2); } .va-revoke { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--b0); } .va-confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .va-confirm-l { font-size: 12.5px; font-weight: 600; color: var(--red); } .va-confirm-in { flex: 1; min-width: 160px; padding: 7px 10px; font-size: 12.5px; background: var(--bg4); border: 1px solid var(--b1); border-radius: var(--r); color: var(--t1); font-family: inherit; } .va-confirm-in:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; } .va-revoked-note { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 12.5px; color: var(--red); } /* Lot Inspect / Audit two-surface additions (lp-): processing summary, the quiet pipeline-artifacts disclosure, the ghost audit link, and the quiet amber pending banner. Reuses ws-facts/va-sub/pwb-disclose/pwb-facts for everything else. */ .lp-summary { display: flex; flex-direction: column; gap: 10px; } .lp-checks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lp-checks-l { flex-shrink: 0; } .lp-checks-fail { display: flex; flex-direction: column; gap: 6px; } .lp-fail-list { list-style: none; margin: 0; padding: 8px 10px; background: var(--rd); border: 1px solid rgba(211,58,44,.2); border-radius: var(--r); color: var(--red); display: flex; flex-direction: column; gap: 3px; } .lp-artifacts { margin-top: 14px; } .lp-audit-link { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--b0); } .lp-pending-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 14px; background: var(--wd); border: 1px solid rgba(181,121,10,.25); border-radius: var(--r); font-size: 12.5px; color: var(--amber); } .lp-pending-banner .bd-dot { flex-shrink: 0; } .lp-pending-banner a { color: var(--amber); font-weight: 600; text-decoration: underline; } /* Inspect examination document (D3, docs/DESIGN.md v3): the release-queue drill-down reads as a scientific paper's specimen record — masthead, mono summary strip, the RELEASE decision zone above the fold, then specimen plates as evidence figures. Full-ink text throughout (var(--t1)), not the dimmer --t2/--t3 duo the rest of the panel uses for secondary copy — this fixes the D3 fix-list's "right-panel contrast" note: the examination document's own facts read at full ink, same weight as a printed record, not as muted metadata. */ .lp-doc-title { font-size: 1.3rem; font-weight: 600; color: var(--t1); margin: 2px 0 10px; letter-spacing: -0.01em; } .lp-doc-title-sep { color: var(--ink-60); font-weight: 400; } .lp-doc-badges { display: flex; gap: 8px; align-items: center; } .lp-doc-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0 16px; border-bottom: 1px solid var(--hair); margin-bottom: 16px; font-size: .78rem; color: var(--t1); } .lp-doc-strip span[aria-hidden] { color: var(--hair); } .lp-decision { margin: 4px 0 22px; padding: 14px 16px; background: var(--bg2); border: 1px solid var(--hair); border-radius: var(--r2); } .lp-decision-note { margin: 0 0 10px; color: var(--amber); } .lp-decision-note.is-bad { color: var(--red); } .lp-decision-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } /* Specimen plates — evidence figures, paper-first (path/hash/size only; no fabricated thumbnail — there is no byte fetch available for a still- pending lot). One plate per FIG., a light frame with a glyph standing in for the artifact kind, a captioned mono footer. */ .sp-plate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 0 0 20px; } .sp-plate { margin: 0; } .sp-plate-frame { aspect-ratio: 4 / 3; background: var(--bg2); border: 1px solid var(--hair); border-radius: var(--r); display: flex; align-items: center; justify-content: center; } .sp-plate-glyph { font-size: 26px; color: var(--ink-60); } .sp-plate-cap { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; font-size: 10.5px; color: var(--t3); } .sp-plate-cap span[aria-hidden] { color: var(--hair); } .admin-table { border: 1px solid var(--b0); border-radius: var(--r2); overflow: hidden; } .admin-tr { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1.4fr; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--b0); font-size: 12.5px; } .admin-tr:first-child { border-top: none; } .admin-th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); font-weight: 700; background: var(--bg2); } /* ════════════════════════════════════════════════════════════════════════ DASH KIT (dk-) — reusable dashboard components (Criptic CRAFT, OUR brand) Soft low-chroma tinted tiles + watermark glyphs, big serif numerals, inline sparklines, soft area/bar charts, dense semantic tables. Single-accent discipline: orange is the only interactive/active color; tints are muted washes of our own hues. Prefixed `dk-` to avoid any historic collisions. ════════════════════════════════════════════════════════════════════════ */ /* ── Sparkline ───────────────────────────────────────────────────────────── */ .dk-spark { display: block; overflow: visible; } .dk-spark-line { vector-effect: non-scaling-stroke; } /* TabBar (PR R2) - the second-level in-page section nav. The rail picks the side; TabBar picks the section within a multi-section page. Sticky under the page head so it stays reachable on long pages. */ .dk-tabbar { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--b0); margin-bottom: var(--sp-5); position: sticky; top: var(--topbar-h); background: var(--bg0); z-index: 5; overflow-x: auto; } .dk-tab { display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-3) var(--sp-4); margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; background: none; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; color: var(--t3); cursor: pointer; white-space: nowrap; transition: color var(--dur-hover) ease-out, border-color var(--dur-expand) ease-out; } .dk-tab:hover { color: var(--t1); } /* v3 lock (docs/DESIGN.md §-1): tabs are a 2px INK underline, never accent — supersedes the print-grade addendum's accent-underline tab spec. Tab selection is ink, matching the rail/chip-selection "selection is ink, never orange" rule; orange stays reserved for the one primary action. */ .dk-tab.is-active { color: var(--t1); border-bottom-color: var(--t1); } .dk-tab-count { font-size: 10px; opacity: .7; } /* ── Delta atom ──────────────────────────────────────────────────────────── */ .dk-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; font-family: var(--font-mono); white-space: nowrap; } .dk-delta-arr { font-size: 8px; line-height: 1; } .dk-delta.is-up { color: var(--green); } .dk-delta.is-dn { color: var(--red); } .dk-delta.is-flat { color: var(--t3); } /* ── TintTile ────────────────────────────────────────────────────────────── */ .dk-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); } .dk-tile { position: relative; overflow: hidden; border-radius: var(--r3); border: 1px solid var(--b0); padding: var(--sp-4) var(--sp-4) var(--sp-4); min-height: 132px; display: flex; flex-direction: column; isolation: isolate; transition: border-color .18s ease-out; } /* v3 motion law (docs/DESIGN.md §-1): hover is a wash, never a lift — no transform/box-shadow on hover, even where Tile itself still renders. */ /* Founder ruling (2026-07-03): TintTile loses its tint backgrounds and watermark glyphs -- surface + hairline instead, whichever `tint` prop a caller passes. The tint variants stay as distinct class names (so no call site needs to change) but they all resolve to the same quiet surface + hairline chrome now; the KPI number and sparkline (data, not decoration) still carry the tile's meaning. */ .dk-tile-paper, .dk-tile-green, .dk-tile-slate, .dk-tile-violet { background: var(--bg3); border-color: var(--hair); } .dk-tile-glyph { display: none; } .dk-tile-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .dk-tile-label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--t3); } .dk-tile-value { font-size: var(--fs-display-1); font-weight: 800; letter-spacing: -1.2px; line-height: 1.04; color: var(--t1); overflow-wrap: anywhere; } .dk-tile-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; } .dk-tile-sub { font-size: 11px; color: var(--t3); overflow-wrap: anywhere; min-width: 0; } .dk-tile-spark { margin-top: 10px; opacity: .85; } /* ── Charts (Area / Bar) ─────────────────────────────────────────────────── */ .dk-chart { width: 100%; min-width: 0; } .dk-chart-svg { display: block; width: 100%; overflow: visible; } .dk-chart-grid { stroke: var(--b1); stroke-width: 1; stroke-dasharray: 2 4; opacity: .8; } .dk-area-fill { opacity: .14; } .dk-area-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .dk-bar { transition: opacity .18s ease-out; } .dk-bar:hover { opacity: .82; } .dk-chart-x { display: flex; justify-content: space-between; margin-top: 7px; gap: 4px; } .dk-chart-xl { font-family: var(--font-mono); font-size: 9.5px; color: var(--t3); text-align: center; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; } .dk-chart-x .dk-chart-xl.is-hidden { visibility: hidden; } .dk-chart-empty { padding: 36px 16px; text-align: center; font-size: 12.5px; } /* ── DataTable (v3 ledger restyle, docs/DESIGN.md §-1): small-caps hairline header, hairline rows, 3.5% ink hover wash on every row (not just clickable ones — a ledger row reads as scannable data whether or not it opens a drill-down), mono numerals right-aligned via the existing `mono`/`align:"end"` column props (no markup change needed). ────────── */ .dk-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hair); border-radius: var(--r2); } .dk-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 540px; } .dk-table-cap { text-align: left; padding: 12px 16px 0; font-size: 11px; color: var(--t3); caption-side: top; } .dk-th { padding: var(--sp-3) var(--sp-4); text-align: left; font-size: 9.5px; font-weight: 700; font-variant: small-caps; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); background: var(--bg2); border-bottom: 1px solid var(--hair); white-space: nowrap; } .dk-th.is-end { text-align: right; } .dk-th.is-center { text-align: center; } .dk-td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--hair-soft); vertical-align: middle; color: var(--t1); } .dk-td.is-end { text-align: right; } .dk-td.is-center { text-align: center; } .dk-td.mono.is-end { font-variant-numeric: tabular-nums; } /* Machine values never wrap (docs/DESIGN.md hard rule) -- known mobile bug: a mono lot/dataset id cell stacked one letter per line on a narrow viewport because .dk-td.mono had no white-space control and .dk-td-lead-v forced overflow-wrap:anywhere. Fixed with nowrap + ellipsis + a floor min-width so the column never gets crushed to near-zero first. */ .dk-td.mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 90px; } .dk-tr:last-child .dk-td { border-bottom: none; } .dk-tr { transition: background var(--dur-hover) ease-out; } .dk-tr:hover .dk-td { background: rgba(20, 17, 12, .035); } .dk-tr.is-clickable { cursor: pointer; } .dk-tr.is-clickable:focus-visible { outline: 2px solid var(--t1); outline-offset: -2px; } /* Nested/breakdown row inside a DataTable (e.g. a payout period's per-dataset rows) -- a tint + shorter row instead of a box, so the parent/child relationship reads at a glance without a heavy divider. */ .dk-tr-sub .dk-td { background: var(--bg1); padding-top: 7px; padding-bottom: 7px; } .dk-td-lead { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .dk-td-ico { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 6px; background: var(--chip); font-size: 12px; color: var(--t2); } /* A leading-column value with an icon/badge (StatusDot + lot id, etc.) -- the wrapping span itself stays flexible, but a mono child inside it still gets the nowrap+ellipsis treatment via .dk-td.mono above; this rule only covers the (rare) non-mono lead value, which is free to wrap normally. */ .dk-td-lead-v { min-width: 0; overflow-wrap: break-word; } .dk-table-empty { padding: 32px 16px; text-align: center; font-size: 13px; } /* Multiple action controls (a button, an InlineConfirm) inside one action cell. */ .dk-td-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } /* ── StatRow ─────────────────────────────────────────────────────────────── */ .dk-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--b0); border: 1px solid var(--b0); border-radius: var(--r2); overflow: hidden; } .dk-stat { background: var(--bg3); padding: 14px 16px; } .dk-stat-l { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); } .dk-stat-v { font-size: var(--fs-display-3); font-weight: 800; letter-spacing: -.8px; line-height: 1.1; margin-top: 4px; color: var(--t1); } .dk-stat-foot { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; } .dk-stat-sub { font-size: 10.5px; color: var(--t3); } /* ── StatCounter (docs/DESIGN.md §-1/§0) ───────────────────────────────── Bare mono digits + an ink-60 caption, never tile-boxed. Documented as shipped across ~10 pages (CONTRACTS.md §6.2/§6.3) but the CSS itself was missing from this file; added here so the primitive actually renders the spec instead of falling back to unstyled inline text. A `.stat-counter-row` is a ruled strip: dotted separators between cells (the "dotted separators" DESIGN.md calls for), no card chrome, no fill. */ .stat-counter-row { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } .stat-counter { flex: 1 1 160px; min-width: 140px; padding: 14px 20px 14px 0; margin-right: 20px; border-right: 1px dotted var(--hair); } .stat-counter:last-child { border-right: none; } .stat-counter-v { font-family: var(--font-mono); font-size: var(--fs-display-3); font-weight: 700; letter-spacing: -0.02em; color: var(--t1); line-height: 1.1; } .stat-counter-l { font-size: 10.5px; color: var(--ink-60); margin-top: 4px; } /* ── BalanceCard / EarningsCard ──────────────────────────────────────────── */ .dk-balance { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, rgba(232,78,15,.05), rgba(232,78,15,.01) 60%), var(--bg4); border: 1px solid var(--b1); border-radius: var(--r3); padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; } .dk-balance-glyph { position: absolute; right: -8px; top: -18px; z-index: -1; font-size: 108px; line-height: 1; font-weight: 800; opacity: .07; color: var(--a); pointer-events: none; user-select: none; } .dk-balance-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .dk-balance-id { min-width: 0; } .dk-balance-title { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--t3); } .dk-balance-amount { font-size: var(--fs-display-1); font-weight: 800; letter-spacing: -1.4px; line-height: 1.02; margin-top: 5px; color: var(--t1); overflow-wrap: anywhere; } .dk-balance-sub { font-size: 12px; margin-top: 6px; } .dk-balance-action { flex-shrink: 0; } .dk-balance-spark { opacity: .9; } .dk-balance-rows { display: grid; gap: 0; border-top: 1px solid var(--b0); padding-top: 4px; } .dk-balance-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--b0); font-size: 12px; } .dk-balance-row:last-child { border-bottom: none; } .dk-balance-rl { flex-shrink: 0; } .dk-balance-rv { font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; } /* ── Admin/Ops page scaffolding (dk-ops-) ────────────────────────────────── */ .dk-ops-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 26px; } /* Superadmin oversight fences itself off from the operational dashboard above: a hairline rule + extra whitespace signal "you crossed into audited god-mode (real cross-org identities below)". A full-width divider, not a card. */ .dk-ops-region { padding-top: 30px; border-top: 1px solid var(--b1); } .dk-ops-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--bg2); border: 1px solid var(--b1); border-radius: 999px; padding: 6px 12px; font-size: 11px; max-width: 100%; } .dk-ops-chip-k { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); flex-shrink: 0; } .dk-ops-chip-v { font-family: var(--font-mono); font-weight: 600; color: var(--t1); overflow-wrap: anywhere; word-break: break-all; min-width: 0; } /* ── Surface (PR R1) — the ONE structural container card. Same chrome as .dk-ops-panel (kept as an alias so existing markup keeps working); every new structural card should use the component / .dk-surface class instead of hand-rolling a bordered div. ───────────────────────── */ .dk-surface, .dk-ops-panel { background: var(--bg3); border: 1px solid var(--hair-soft); border-radius: var(--r2); padding: var(--sp-5) var(--sp-5); min-width: 0; box-shadow: var(--hair-shadow); } .dk-surface-h, .dk-ops-panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; } /* Surface titles render the addendum's eyebrow treatment (docs/DESIGN.md §0): letterspaced uppercase, not a plain bold label. */ .dk-surface-title, .dk-ops-panel-title { font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-60); } /* ════════════════════════════════════════════════════════════════════════ SHEET / OVERLAY (generic) ════════════════════════════════════════════════════════════════════════ */ /* v3 motion law (docs/DESIGN.md §-1): drawer = 240ms slide, 25% ink scrim (was 20%/.26s) — right slide, Esc + focus return unchanged (Sheet component). */ .scrim { position: fixed; inset: 0; background: rgba(20,17,12,.25); z-index: 100; display: flex; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .sheet { background: var(--bg2); border: 1px solid var(--b1); display: flex; flex-direction: column; max-height: 100vh; overflow: hidden; animation: sheetIn var(--dur-drawer) ease-out; } .sheet-right { margin-left: auto; width: min(560px, 96vw); height: 100vh; border-radius: 0; } .sheet-left { margin-right: auto; width: min(440px, 92vw); height: 100vh; } .sheet-full { width: 100%; height: 100vh; } .sheet.is-wide { width: min(820px, 96vw); } /* Inspect drawer width -- founder ruling (2026-07-03): the release-queue Inspect drill-down gets its own ~720px width, distinct from the 560px default and the 820px .is-wide variant. */ .sheet.is-lot-inspect { width: min(720px, 96vw); } @keyframes sheetIn { from { transform: translateX(8px); opacity: .6; } to { transform: none; opacity: 1; } } .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--b0); } .sheet-title { font-size: 16px; font-weight: 700; } .sheet-sub { font-size: 12px; margin-top: 3px; } .sheet-body { flex: 1; overflow-y: auto; padding: 20px; } /* ════════════════════════════════════════════════════════════════════════ TOAST ════════════════════════════════════════════════════════════════════════ */ .toast-host { position: fixed; bottom: 22px; right: 22px; z-index: 999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: var(--bg4); border: 1px solid var(--b2); border-radius: var(--r); padding: 10px 16px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; box-shadow: 0 10px 30px -12px rgba(20,17,13,.4); animation: toastIn .25s ease-out; } @keyframes toastIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } /* ════════════════════════════════════════════════════════════════════════ EMPTY / TOOLTIP ════════════════════════════════════════════════════════════════════════ */ .empty { text-align: center; padding: 48px 24px; color: var(--t3); } .empty-icon { font-size: 28px; margin-bottom: 10px; opacity: .7; } .empty-title { font-size: 15px; font-weight: 700; color: var(--t2); margin-bottom: 6px; } .empty-body { font-size: 13px; } /* RBAC route guard: a calm, centered panel for sides the org has not enabled. Reuses .ws-panel chrome + .empty layout; this only frames it on the page. */ .rg-guard { max-width: 520px; margin: 48px auto; } .rg-guard .empty-body { display: flex; flex-direction: column; align-items: center; gap: 16px; } .rg-guard .empty-body p { margin: 0; max-width: 40ch; } .tip-wrap { position: relative; display: inline-flex; } .tip { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: var(--t1); color: var(--bg0); font-size: 11px; padding: 5px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 200; } .tip-wrap:hover .tip, .tip-wrap:focus-visible .tip { opacity: 1; } /* ════════════════════════════════════════════════════════════════════════ RESPONSIVE — tablet (1024) / small tablet (860) / phone (640) ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .catalog-body { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; } .stat-strip { grid-template-columns: repeat(3, 1fr); } .validate-top { grid-template-columns: 1fr; } /* context band → stack the proof column under the data */ .dw-context { grid-template-columns: minmax(0, 1fr); grid-template-areas: "viz" "score" "prov"; } .dk-ops-split { grid-template-columns: 1fr; } } @media (max-width: 860px) { .rail { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-104%); transition: transform .26s cubic-bezier(.22,.61,.36,1); box-shadow: 14px 0 40px -24px rgba(20,17,13,.5); } .rail.is-open { transform: translateX(0); } .rail-scrim { display: block; position: fixed; inset: 0; background: rgba(20,17,13,.3); z-index: 55; } .topbar-burger, .topbar-brand { display: inline-flex; } .app-main { padding: 20px clamp(16px, 4vw, 24px) 64px; } .catalog-body { grid-template-columns: 1fr; } .filter-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 14px 20px; } .filter-grp { flex: 1; min-width: 140px; } .dw-head { grid-template-columns: 1fr; align-items: start; } .ws-head-buy { align-items: flex-start; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } .ws-price { text-align: left; } .ws-head-prog { width: 100%; } /* progress rail goes vertical so step labels never clip */ .prail { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; } .prail-step { display: flex; gap: 12px; padding-bottom: 14px; } .prail-btn { flex-direction: row; align-items: center; gap: 12px; text-align: left; padding: 4px 6px; } .prail-meta { align-items: flex-start; } .prail-line { top: 36px; bottom: -10px; left: 19px; right: auto; width: 2px; height: auto; } .step-form-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } .dcard-grid { grid-template-columns: 1fr; } .partner-grid, .proc-grid { grid-template-columns: 1fr; } .page-head { flex-direction: column; align-items: flex-start; } .admin-tr { grid-template-columns: 1fr 1fr; row-gap: 4px; } .admin-th { display: none; } .prov-chain { grid-template-columns: 1fr 1fr; } .dw-journey { padding: 16px; } .rchip-summary { flex-basis: 100%; order: 3; } .rchip-actions { margin-left: 0; } /* work board: single column, action drops under the meta and goes full width */ .pwb-board { grid-template-columns: 1fr; } .pwb-card { grid-template-columns: 1fr; } .pwb-meta { grid-template-columns: 1fr; } .pwb-card-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } } /* ── reduced motion: stop the orb/typing/shimmer loops ────────────────── */ @media (prefers-reduced-motion: reduce) { .rail-agent-orb, .ai-orb, .ai-typing i, .card-skel { animation: none !important; } .ai-drawer, .rail { transition: none !important; } .cert-ring-arc { transition: none !important; } /* workspace / journey: no easing on dots, chips, fields, buttons */ .prail-btn, .prail-dot, .rchip-toggle, .field-i, .meter > i { transition: none !important; } /* dash kit: tiles/bars/rows render statically (sparklines + charts are SVG, no anim) */ .dk-tile, .dk-bar, .dk-tr { transition: none !important; } .au-card { animation: none !important; } /* v3 kit (docs/DESIGN.md §-1 motion law): the drawer/scrim, accordion expand, and status-dot/seal animations all collapse to instant. */ .sheet, .accordion-body, .seal-stamp { animation: none !important; transition: none !important; } } /* ── profile dropdown: org role chips + email row (search.css owns .pm-) ── */ .pm-head-email { font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-roles { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px 6px; } .pm-role-chip { font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .02em; padding: 3px 7px; border-radius: 999px; text-transform: capitalize; background: var(--ad); color: var(--a); border: 1px solid rgba(232,78,15,.2); } /* ════════════════════════════════════════════════════════════════════════ AUTH — login / signup gate (au- prefix). Warm paper, single accent, Fraunces heading. Responsive + reduced-motion safe. ════════════════════════════════════════════════════════════════════════ */ .au-screen { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; padding: var(--sp-7) var(--sp-5); background: var(--bg0); } /* The auth card is a CertFrame-lite moment (docs/DESIGN.md §0): the double ink rule (border + offset outline) reads as a governed session gate, not a generic signup form, but skips the full corner guilloche -- ceremony that reads right on a certificate reads as over-decorated on a login screen. */ .au-card { width: 100%; max-width: 420px; position: relative; background: var(--bg3); border: 1px solid var(--t1); outline: 1px solid var(--t1); outline-offset: 4px; border-radius: 0; margin: 4px; padding: clamp(var(--sp-6), 5vw, var(--sp-8)); animation: au-rise .35s ease both; } .au-authority { text-align: center; font-size: .68rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-60); margin: 2px 0 var(--sp-5); } @keyframes au-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (max-width: 480px) { .au-card { outline-offset: 3px; } } /* The wordmark moment: bigger mark, more room under it, so it reads as the one credibility signal on an otherwise plain form screen. */ .au-brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; margin-bottom: var(--sp-6); } .au-mark { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 24px; width: 44px; height: 44px; border-radius: var(--r2); background: var(--a); color: #fff; letter-spacing: -.5px; box-shadow: 0 8px 20px -10px rgba(178,60,10,.55); } .au-mark-flip { display: inline-block; transform: scaleX(-1); } .au-brand-tx { display: flex; flex-direction: column; line-height: 1.05; font-weight: 700; font-size: var(--fs-body); color: var(--t1); } .au-brand-tx small { font-weight: 500; font-size: 10px; color: var(--t3); letter-spacing: .04em; } .au-title { font-family: var(--font-display); font-size: var(--fs-display-2); font-weight: 600; color: var(--t1); margin: var(--sp-1) 0 var(--sp-1); letter-spacing: -.4px; } .au-sub { font-size: var(--fs-small); color: var(--t3); margin-bottom: var(--sp-5); } .au-seg { display: flex; gap: 2px; padding: 3px; background: var(--bg1); border: 1px solid var(--b1); border-radius: var(--r); margin-bottom: var(--sp-5); } .au-seg-btn { flex: 1; padding: var(--sp-2) var(--sp-3); border: none; background: transparent; cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; color: var(--t3); border-radius: 6px; transition: .15s; } .au-seg-btn:hover { color: var(--t1); } .au-seg-btn.is-active { background: var(--bg4); color: var(--t1); box-shadow: 0 1px 2px rgba(20,17,12,.08); } .au-form { display: flex; flex-direction: column; gap: var(--sp-4); } .au-field { display: flex; flex-direction: column; gap: 5px; } .au-label { font-size: var(--fs-caption); font-weight: 600; color: var(--t2); text-transform: uppercase; letter-spacing: .05em; } .au-input { width: 100%; padding: var(--sp-3) var(--sp-3); font-family: var(--font-ui); font-size: var(--fs-body); color: var(--t1); background: var(--bg3); border: 1px solid var(--b1); border-radius: var(--r); transition: border-color .15s, box-shadow .15s; } .au-input::placeholder { color: var(--t3); } .au-input:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 3px var(--ad); } .au-select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--t3) 50%), linear-gradient(135deg, var(--t3) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; } /* Honest error state: a filled banner (not just red text) so a real server message (wrong password vs. account not found vs. network error) reads as a distinct, noticed event rather than a quiet caption. */ .au-err { display: none; } .au-err.is-shown { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-small); color: var(--red); line-height: 1.4; background: var(--rd); border: 1px solid rgba(211,58,44,.25); border-radius: var(--r); padding: var(--sp-3) var(--sp-3); } .au-submit { width: 100%; justify-content: center; margin-top: 2px; } .au-or { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--t3); font-size: var(--fs-caption); } .au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--b1); } .au-demo { width: 100%; justify-content: center; } .au-foot { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--t3); text-align: center; } .au-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--a); font-weight: 600; } .au-link:hover { text-decoration: underline; } @media (max-width: 480px) { .au-card { padding: var(--sp-5) var(--sp-4); border-radius: var(--r2); } } @media (prefers-reduced-motion: reduce) { .au-card { animation: none; } } /* ════════════════════════════════════════════════════════════════════════ CONTRIBUTE — partner "Accumulate" page (co- prefix). Reuses page-head, dk-* tiles, the dw-journey + prail rail, and the field/step-form classes. This block only adds: the form sections, the upload list, the stage timeline, and the result panels. Warm paper, single accent, a11y + reduced-motion safe. ════════════════════════════════════════════════════════════════════════ */ .co-tiles { margin-bottom: 4px; } .co-select { cursor: pointer; } .co-select.is-locked { cursor: default; background: var(--bg1); } /* form sections inside step 1 */ .co-form-section { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--bg1); border: 1px solid var(--b1); border-radius: var(--r2); } .co-form-section-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t2); } .co-form-section-sub { max-width: 64ch; overflow-wrap: anywhere; } .co-field-hint { overflow-wrap: anywhere; } .co-field-err { color: var(--red); overflow-wrap: anywhere; } .co-field-bad { border-color: var(--red) !important; } .co-field-bad:focus { box-shadow: 0 0 0 3px rgba(211,58,44,.18) !important; } .co-collector { padding: 10px 13px; background: var(--bg2); border: 1px dashed var(--b1); border-radius: var(--r); overflow-wrap: anywhere; } /* modality picker (step 2, replaces the old free-text field) */ .co-mod-picker { display: flex; flex-wrap: wrap; gap: 6px; } .co-mod-other { margin-left: auto; } .ws-alert-col { flex-direction: column; align-items: flex-start; } .ws-alert-row { display: flex; gap: 8px; align-items: flex-start; } /* shared lot-id chip */ .co-lot-id { overflow-wrap: anywhere; } /* step 2 — upload */ .co-upload { display: flex; flex-direction: column; gap: 12px; } .co-file { display: flex; align-items: center; gap: 13px; cursor: pointer; padding: 14px 16px; background: var(--bg4); border: 1.5px dashed var(--b2); border-radius: var(--r2); transition: border-color .15s, background .15s; } .co-file:hover { border-color: var(--a); background: var(--bg3); } .co-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .co-file-input:focus-visible + .co-file, .co-file-input:focus + .co-file { outline: 2px solid var(--a); outline-offset: 2px; } .co-file-ico { font-size: 22px; color: var(--a); line-height: 1; } .co-file-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .co-file-l { font-size: 14px; font-weight: 600; color: var(--t1); } .co-file-h { overflow-wrap: anywhere; } .co-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .co-file-row { display: grid; grid-template-columns: 20px 1fr auto auto 20px; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg3); border: 1px solid var(--b0); border-radius: var(--r); } .co-file-row.is-done { border-color: var(--b2); } .co-file-row.is-error { border-color: rgba(211,58,44,.35); background: var(--rd); } .co-file-mark { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--t3); } .co-file-row.is-done .co-file-mark { color: var(--t1); } .co-file-row.is-error .co-file-mark { color: var(--red); } .co-file-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .co-file-state { color: var(--t3); white-space: nowrap; } .co-file-state-err { color: var(--red); white-space: normal; overflow-wrap: anywhere; } .co-file-rm { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: var(--r); color: var(--t3); font-size: 11px; line-height: 1; } .co-file-rm:hover { color: var(--red); border-color: rgba(211,58,44,.4); background: var(--rd); } .co-file-rm:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; } .co-file-rm-ph { width: 20px; height: 20px; } .co-upload-foot { padding-top: 2px; } .co-note { overflow-wrap: anywhere; } /* spinner atom (mirrors .spinner but local to this page) */ .co-spin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ad); border-top-color: var(--a); animation: co-spin .7s linear infinite; vertical-align: middle; } @keyframes co-spin { to { transform: rotate(360deg); } } /* step 3 — certification timeline */ .co-stages { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; } .co-stage { display: flex; align-items: center; gap: 9px; } .co-stage-dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--bg2); border: 1.5px solid var(--b1); color: var(--t3); } .co-stage.is-done .co-stage-dot { background: var(--gd); border-color: rgba(63,142,91,.4); color: var(--green); } .co-stage.is-active .co-stage-dot { background: var(--ad); border-color: var(--a); color: var(--a); } .co-stage.is-rejected .co-stage-dot { opacity: .45; } .co-stage-label { font-size: 13px; font-weight: 600; color: var(--t2); } .co-stage.is-active .co-stage-label { color: var(--t1); } .co-poll { display: flex; align-items: center; gap: 8px; } .co-result { padding: 16px 18px; border-radius: var(--r2); border: 1px solid var(--b1); background: var(--bg3); display: flex; flex-direction: column; gap: 12px; } .co-result.is-ok { border-color: rgba(63,142,91,.35); background: var(--gd); } .co-result.is-bad { border-color: rgba(211,58,44,.3); background: var(--rd); } .co-result-h { display: flex; align-items: flex-start; gap: 12px; } .co-result-ico { font-size: 22px; line-height: 1.1; } .co-result.is-ok .co-result-ico { color: var(--green); } .co-result.is-bad .co-result-ico { color: var(--red); } .co-result-title { font-size: 18px; font-weight: 700; color: var(--t1); } /* contributions table — stacked rights/exclusivity cell */ .co-cell-stack { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; } /* step 1 — data agreement (scroll-to-accept + typed signature) */ .co-dca { display: flex; flex-direction: column; gap: 14px; } .co-dca-box { max-height: 260px; overflow-y: auto; padding: 16px 18px; background: var(--bg4); border: 1px solid var(--b1); border-radius: var(--r2); } .co-dca-box:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; } .co-dca-doc { display: flex; flex-direction: column; gap: 12px; max-width: 70ch; } .co-dca-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .co-dca-title { font-size: 16px; font-weight: 700; color: var(--t1); } .co-dca-clause { display: flex; flex-direction: column; gap: 3px; } .co-dca-ch { margin: 0; font-size: 13px; font-weight: 700; color: var(--t1); } .co-dca-cb { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--t2); overflow-wrap: anywhere; } .co-dca-end { padding-top: 4px; border-top: 1px dashed var(--b1); } .co-dca-prompt { margin: -6px 0 0; } .co-accept { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--b1); border-radius: var(--r); } .co-accept.is-locked { opacity: .55; cursor: not-allowed; } .co-accept-box { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--a); flex-shrink: 0; } .co-accept-tx { font-size: 12.5px; line-height: 1.5; color: var(--t2); overflow-wrap: anywhere; } .co-dca-degraded { padding: 10px 13px; background: var(--bg2); border: 1px dashed var(--b1); border-radius: var(--r); overflow-wrap: anywhere; } /* step 2 — restricted-buyers toggle (quiet, advanced) */ .co-restrict-h { display: flex; align-items: center; } .co-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; } .co-toggle-box { width: 16px; height: 16px; accent-color: var(--a); } .co-toggle-l { font-size: 13px; font-weight: 600; color: var(--t1); } /* step 3 — sensor rows */ .co-sensors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .co-sensor-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--b1); border-radius: var(--r2); } .co-sensor-grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; min-width: 0; } .co-sensor-rm { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin-top: 22px; cursor: pointer; background: var(--bg4); border: 1px solid var(--b1); border-radius: var(--r); color: var(--t3); font-size: 12px; line-height: 1; transition: color .14s, border-color .14s, background .14s; } .co-sensor-rm:hover { color: var(--red); border-color: rgba(211,58,44,.4); background: var(--rd); } .co-sensor-rm:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; } /* step 4 — price advisory (muted, never a measured price) */ .co-advisory { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 13px 15px; background: var(--bg2); border: 1px dashed var(--b2); border-radius: var(--r2); } .co-advisory-h { display: flex; align-items: center; gap: 8px; } .co-advisory-ico { color: var(--t3); font-size: 14px; line-height: 1; } .co-advisory-l { color: var(--t3); text-transform: uppercase; letter-spacing: .05em; } .co-advisory-range { font-size: 17px; font-weight: 700; color: var(--t2); } .co-advisory-note { overflow-wrap: anywhere; max-width: 64ch; } /* ── Pricing simulator payout cards (psc-) ───────────────────────────────── */ .psc-row { display: flex; border: 1px solid var(--b1); border-radius: var(--r2); overflow: hidden; margin-top: 8px; } .psc-card { flex: 1; padding: 18px 14px; border-right: 1px solid var(--b1); text-align: center; min-width: 0; } .psc-card:last-child { border-right: none; } .psc-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--t3); margin-bottom: 5px; } .psc-amount { font-size: clamp(20px, 3vw, 28px); font-weight: 800; letter-spacing: -.8px; color: var(--t1); line-height: 1.1; font-family: var(--font-mono); } .psc-pct { font-size: 11px; color: var(--t3); margin-top: 3px; font-family: var(--font-mono); } @media (max-width: 600px) { .psc-row { flex-direction: column; } .psc-card { border-right: none; border-bottom: 1px solid var(--b1); padding: 14px; } .psc-card:last-child { border-bottom: none; } } /* step 5 — review summary + video note + file tag */ .co-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .co-review-sec { display: flex; flex-direction: column; gap: 6px; padding: 13px 15px; background: var(--bg2); border: 1px solid var(--b1); border-radius: var(--r2); } .co-review-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--a); margin-bottom: 2px; } .co-review-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .co-review-k { font-size: 12px; flex-shrink: 0; } .co-review-v { font-size: 12.5px; color: var(--t1); text-align: right; overflow-wrap: anywhere; min-width: 0; } .co-video-note { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; background: var(--bg2); border: 1px solid var(--b1); border-radius: var(--r); color: var(--t2); } .co-video-ico { color: var(--a); font-size: 14px; line-height: 1.2; flex-shrink: 0; } .co-file-tag { display: inline-block; padding: 0 6px; border-radius: 999px; vertical-align: middle; background: var(--ad); color: var(--a); font-weight: 600; font-size: 10px; } /* wizard nav (Back / Continue) under the active step */ .co-wiznav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--b1); } /* Readiness hint: informational, not an error. Own line below Back/Continue, soft ink (not full-ink, which would read as an alarm; not muted, which is too quiet for a blocker). No accent: that is reserved for the one primary action. */ .co-wiznav-note { flex-basis: 100%; overflow-wrap: anywhere; color: var(--t2); } @media (max-width: 640px) { .co-file-row { grid-template-columns: 18px 1fr auto 18px; } .co-file-state { grid-column: 2 / -2; } .co-review { grid-template-columns: 1fr; } .co-sensor-grid { grid-template-columns: 1fr; } .co-sensor-rm { margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .co-spin { animation: none; border-top-color: var(--a); } .co-file, .co-stage-dot, .co-sensor-rm, .co-file-rm { transition: none !important; } } /* ─────────────────────────── Request data (rq-) ──────────────────────────── Buyer "Request data" page. Reuses page-head, dk-* tiles, dk-ops-panel, the field/co-form-section form classes and the Empty/DataTable kit. This block only adds the request form's responsive grid, the required marker, the full width fields (notes), the inline submit-OK line and the table cells. */ .rq-tiles { margin-bottom: 4px; } .rq-form { display: flex; flex-direction: column; gap: 16px; } .rq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .rq-field-full { grid-column: 1 / -1; } .rq-textarea { min-height: 78px; resize: vertical; line-height: 1.45; padding-top: 9px; } .rq-req { color: var(--a); font-weight: 700; } .rq-form-msg:empty { display: none; } .rq-ok { display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; background: var(--gn, rgba(45,122,74,.08)); color: var(--green); border: 1px solid rgba(45,122,74,.25); border-radius: var(--r); padding: 10px 13px; font-size: 12.5px; } .rq-action { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .rq-note { overflow-wrap: anywhere; } .rq-cell-title { font-weight: 600; color: var(--t1); overflow-wrap: anywhere; } .rq-trunc { display: inline-block; max-width: 100%; overflow-wrap: anywhere; } @media (max-width: 640px) { .rq-grid { grid-template-columns: 1fr; } } /* ─────────────────────────── Compare (cmp-) ──────────────────────────────── Buyer "Compare" page. Reuses page-head, the dk-table-wrap overflow container, Tier/Meter/Badge/Chip, mod-chip, and the mono/muted/tiny utilities. This block only adds: the picker, the comparison matrix table, and the "best" cell mark. Warm paper, single accent, a11y + reduced-motion safe. */ .cmp { display: flex; flex-direction: column; gap: 18px; } /* picker — chips of chosen datasets + an add dropdown, capped at 3 */ .cmp-picker { display: flex; align-items: center; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; padding: 14px 16px; background: var(--bg2); border: 1px solid var(--b1); border-radius: var(--r2); } .cmp-picker-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; } .cmp-picker-add { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .cmp-select { font-family: var(--font-ui); font-size: 13px; color: var(--t1); cursor: pointer; padding: 8px 12px; background: var(--bg4); border: 1px solid var(--b1); border-radius: var(--r); max-width: 240px; } .cmp-select:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; } .cmp-select:disabled { cursor: not-allowed; opacity: .55; } .cmp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* matrix — real , rows are attributes, columns are datasets */ .cmp-wrap { overflow-x: auto; border: 1px solid var(--hair-soft); border-radius: var(--r2); box-shadow: var(--hair-shadow); } .cmp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 520px; } .cmp-corner { padding: 10px 14px; text-align: left; background: var(--bg2); border-bottom: 1px solid var(--hair); white-space: nowrap; vertical-align: bottom; } .cmp-corner-l { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--ink-60); } .cmp-colh { padding: 10px 14px; text-align: left; vertical-align: top; background: var(--bg2); border-bottom: 1px solid var(--hair); border-left: 1px solid var(--hair-soft); min-width: 168px; } .cmp-colh-id { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--t1); overflow-wrap: anywhere; } .cmp-colh-fam { margin-top: 2px; } .cmp-colh-act { display: flex; align-items: center; gap: 8px; margin-top: 9px; } .cmp-rm { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; cursor: pointer; background: var(--bg4); border: 1px solid var(--hair); border-radius: var(--r); color: var(--t3); font-size: 12px; line-height: 1; transition: color .14s, border-color .14s; } .cmp-rm:hover { color: var(--t1); border-color: var(--t1); } .cmp-rm:focus-visible { outline: 2px solid var(--t1); outline-offset: 1px; } /* row-label cells: letterspaced eyebrow + a dotted hairline leader filling the gap to the first value column (docs/DESIGN.md §0 "Comparison-matrix recipe"). The leader is a pseudo-element flex spacer so it stretches with the sticky cell's own width, same look as the KV dotted leader applied to a table row. */ .cmp-rowh { padding: 9px 14px; text-align: left; font-weight: 600; color: var(--ink-60); font-size: .68rem; text-transform: uppercase; letter-spacing: .22em; background: var(--bg1); border-bottom: 1px solid var(--hair-soft); white-space: nowrap; vertical-align: middle; position: sticky; left: 0; z-index: 1; display: table-cell; } .cmp-rowh-in { display: flex; align-items: baseline; gap: 8px; min-width: 148px; } .cmp-rowh-line { flex: 1 1 auto; min-width: 12px; border-bottom: 1px dotted var(--hair); transform: translateY(-3px); } .cmp-td { padding: 9px 14px; border-bottom: 1px solid var(--hair-soft); border-left: 1px solid var(--hair-soft); vertical-align: middle; color: var(--t1); font-size: .8rem; } /* every machine value in the matrix is mono (docs/DESIGN.md §0); row cells already wrap numeric values in .mono at the call site (compare.js), this just pins the size to the recipe's 0.8rem. */ .cmp-td .mono { font-size: .8rem; } /* section boundary: the header row's bottom edge is the stronger two-level hairline; interior row separators stay on --hair-soft. */ .cmp-corner, .cmp-colh { border-bottom: 1px solid var(--hair); } .cmp-tr:last-child .cmp-td, .cmp-tr:last-child .cmp-rowh { border-bottom: none; } .cmp-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cmp-cell-v { min-width: 0; overflow-wrap: anywhere; } .cmp-meter { min-width: 132px; max-width: 220px; } .cmp-mods { display: inline-flex; flex-wrap: wrap; gap: 5px; } .cmp-cert { font-family: var(--font-mono); display: inline-block; max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* "best" cell — ink border (never an orange fill; selection/leader marks are ink per docs/DESIGN.md §0) AND a "Best" Badge (never color alone). */ .cmp-td.is-best { background: var(--bg2); box-shadow: inset 2px 0 0 var(--t1); } .cmp-best { flex-shrink: 0; } /* Picker's selected chips: ink border, not the shared accent-fill Chip.is-active (docs/DESIGN.md §0 "Comparison-matrix recipe") — selection here is a pick/leader mark, not a live filter control, so it stays off orange. The Browse filter-rail chips keep .chip.is-active unchanged. */ .cmp-picker-chips .chip.is-active { background: var(--bg4); border-color: var(--t1); color: var(--t1); } @media (max-width: 640px) { .cmp-picker { flex-direction: column; align-items: stretch; } .cmp-picker-add { justify-content: space-between; } .cmp-select { max-width: none; flex: 1; } } @media (prefers-reduced-motion: reduce) { .cmp-rm { transition: none !important; } } /* ─────────────────────────── Account & roles (acct-) ─────────────────────── The Account settings page. Reuses .page-head, .dk-ops-panel, .ws-facts, KV, Badge, Button and the dash-kit TintTile; these acct- rules only add the roles-specific layout (current-sides list and the four standard-side rows). All new selectors are uniquely acct- prefixed (collision-audited). */ .acct-current-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .acct-current-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .acct-current-row .bd { flex-shrink: 0; } .acct-sides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .acct-side { display: flex; flex-direction: column; gap: 10px; } .acct-side-action { display: flex; } .acct-side-action .btn { width: 100%; justify-content: center; } /* the calm "Active" state — text-led, not color alone (the word "Active" plus the Badge in the list above carry the meaning; the dot is decorative). */ .acct-active { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--green); padding: 7px 12px; border: 1px solid rgba(63,142,91,.22); border-radius: var(--r); background: var(--gd); width: 100%; justify-content: center; } .acct-active-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; } .acct-reload-note { margin: 14px 0 0; padding: 9px 12px; font-size: 12px; color: var(--t2); border: 1px solid var(--b1); border-left: 2px solid var(--a); border-radius: var(--r); background: var(--bg3); } /* ════════════════════════════════════════════════════════════════════════ ADMIN MANAGEMENT ACTIONS (superadmin, Phase 3) — scoped classes only. Reuses the va-confirm / va-revoke inline-confirm classes for destructive actions; these style the lifecycle/KYC rows, the per-member role chips, and the standard editor. Semantic color stays load-bearing (badges carry it). ════════════════════════════════════════════════════════════════════════ */ .ad-mgmt { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--b1); border-radius: var(--r2); background: var(--bg3); } .ad-mgmt-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .ad-mgmt-l { display: inline-flex; align-items: center; gap: 10px; } .ad-mgmt-k { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--t3); font-weight: 700; } .ad-mgmt-c { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ad-mgmt-note { margin: 0; font-size: 12.5px; color: var(--red); } .ad-label-edit { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .ad-label-edit .field { flex: 1; min-width: 180px; } .ad-label-edit-actions { display: inline-flex; gap: 8px; flex-shrink: 0; } /* members list with per-member role management */ .ad-members { display: flex; flex-direction: column; } .ad-member { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--b0); } .ad-member:last-child { border-bottom: 0; } .ad-member-id { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ad-roles { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* role chip: off = quiet outline; on = accent (interactive active state, --a) */ .ad-role { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; font-family: inherit; color: var(--t2); cursor: pointer; background: var(--bg4); border: 1px solid var(--b1); border-radius: 999px; transition: background .12s, border-color .12s, color .12s; } .ad-role:hover:not(:disabled) { border-color: var(--b2); } .ad-role:disabled { opacity: .55; cursor: default; } .ad-role:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; } /* Held role = a fact, not the brand action: neutral ink-filled chip with a check glyph. The accent stays reserved for the primary action + :focus-visible. */ .ad-role.is-on { color: var(--t1); background: var(--bg2); border-color: var(--b2); font-weight: 600; } .ad-role-dot { font-size: 11px; line-height: 1; } /* standard editor */ .ad-std-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-items: end; } .ad-std-field { display: flex; flex-direction: column; gap: 6px; } .ad-std-l { font-size: 12.5px; font-weight: 600; color: var(--t1); } .ad-std-in { padding: 8px 11px; font-size: 13px; background: var(--bg4); border: 1px solid var(--b1); border-radius: var(--r); color: var(--t1); } .ad-std-in:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; } .ad-std-in.is-bad { border-color: var(--red); } .ad-std-in.is-bad:focus-visible { outline-color: var(--red); } .ad-std-err { font-size: 11.5px; color: var(--red); } .ad-std-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; } @media (max-width: 640px) { .ad-std-grid { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════════ TRACK D — buyer checkout: tab bar + structure panel ════════════════════════════════════════════════════════════════════════ */ .ds-tab-bar { display: flex; gap: .5rem; margin: 1.5rem 0 0; } .ds-tab { background: none; border: none; padding: .4rem .9rem; border-radius: 4px; cursor: pointer; font-size: .85rem; color: var(--t3); border-bottom: 2px solid transparent; } .ds-tab.is-active { color: var(--t1); border-bottom-color: var(--a); font-weight: 500; } .ds-struct { display: flex; flex-direction: column; gap: .25rem; margin-top: .75rem; } .ds-struct-row { display: flex; gap: 1rem; align-items: baseline; padding: .3rem 0; border-bottom: 1px solid var(--b1); } .ds-struct-path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; } /* ══ Track C: listing mode picker + AM approval state ═════════════════════ .co-mode-picker/.co-mode-card/.co-mode-ico/.co-mode-title/.co-mode-sub are now owned by the selection-card rule above (line ~1352) -- this block used to redeclare all five with a thick orange border + box-shadow selected state, later in the cascade, silently overriding the locked ink-border selection-card rule. Removed rather than retired since it duplicated (not extended) live class names and its concrete effect was the exact bug being fixed (founder's round-2 finding: "still show a thick orange border when selected"). .co-mode-section/.co-mode-h (layout-only, no conflict) stay. */ .co-mode-section{padding:20px 0 14px;} .co-mode-h{font-size:1.1rem;margin-bottom:8px;} /* Compact variant: the listing-type picker folded into wizard step 1, above the agreement text (docs/DESIGN.md §-1 consolidation ruling, 2026-07-03). Tighter padding than the old standalone page-level section, plus a hairline rule underneath to separate it from the agreement box that follows, since it is now one of several things stacked inside the step instead of its own page section. */ .co-mode-section.is-compact { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--hair-soft); } .co-mode-section.is-compact .co-mode-h { font-size: 1rem; } .co-result.is-wait{border-color:var(--b2);background:var(--bg2);} .co-result.is-wait .co-result-ico{color:var(--t2);} /* Neutral terminal state — a real, completed outcome that is not verified/healthy (green) and not pending (is-wait). Same tokens as is-wait so it reads calm, but a distinct class name since this state is done, not waiting. */ .co-result.is-neutral{border-color:var(--b2);background:var(--bg2);} .co-result.is-neutral .co-result-ico{color:var(--t2);} .pg-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40vh; text-align: center; padding: 2rem; gap: .75rem; } /* -- inbox bell (topbar, Track E): superseded by the locked ink-chip badge spec above (`.inbox-bell`/`.inbox-badge`, 2026-07-03) -- this block used to redeclare both with an orange-filled circle badge, later in the cascade, silently overriding the ink-chip version. Removed rather than retired since it duplicated (not extended) an existing, still-referenced class name and its concrete effect was the exact bug being fixed. `.inbox-label` is unreferenced by any component (the bell is icon-only, no text label per the locked topbar spec) and is dropped with it. -- */ /* -- notification rows (notifications page + sourcing inbox) -- */ .notif-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--b0); transition: opacity .14s; } .notif-row:last-child { border-bottom: none; } .notif-row.is-read { opacity: .55; } .notif-row-body { flex: 1; min-width: 0; } .notif-row-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .notif-row-summary { font-size: 13px; line-height: 1.45; } .notif-row-detail { margin-top: 4px; } .notif-title { font-weight: 600; color: var(--t1); } .ml2 { margin-left: 8px; } .mt1 { margin-top: 4px; } .text-end { text-align: right; } /* ── Identity page: reveal-real-name switch (id-) ────────────────────────── A native button[role=switch], not a checkbox skin -- accent-on when ON (the org has chosen to be visible), neutral track when OFF (default, anonymous). Semantic color stays load-bearing elsewhere (green/red); this is a single-accent interactive control, matching the one-accent rule. */ .id-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--b1); background: var(--bg2); cursor: pointer; padding: 0; transition: background .15s, border-color .15s; } .id-switch:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; } .id-switch.is-on { background: var(--a); border-color: var(--a); } .id-switch.is-busy { opacity: .6; cursor: default; } .id-switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg4); border: 1px solid var(--b1); box-sizing: border-box; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; } .id-switch.is-on .id-switch-knob { transform: translateX(20px); } @media (prefers-reduced-motion: reduce) { .id-switch, .id-switch-knob { transition: none !important; } } /* ══════════════════════════════════════════════════════════════════════ PRINT-GRADE ADDENDUM (docs/DESIGN.md §0, 2026-07-02) — new primitives. These replace the legacy component styles on any page/component that composes them; see CONTRACTS.md for the JS-side exports (ui.js: KV already renders this, CertFrame, Seal, StatCounter). ══════════════════════════════════════════════════════════════════════ */ /* ── dotted-leader KV row (replaces the plain .kv row app-wide) ── Capped at ~720px so the dotted leader does not stretch absurdly inside a wide container (founder finding, 2026-07-03: "the inspect detail rows currently span the full page"). A KV row nested in a narrower parent (a CertFrame's 640px body, a Sheet's body) is unaffected -- max-width only ever pulls the row narrower than its parent, never wider. */ .kv-lead { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--hair-soft); font-size: 13px; min-width: 0; max-width: 720px; } .kv-lead-k { flex-shrink: 0; color: var(--ink-60); white-space: nowrap; } .kv-lead-line { flex: 1; border-bottom: 1px dotted var(--hair); transform: translateY(-4px); min-width: 12px; } .kv-lead-v { font-family: var(--font-mono); font-size: .8rem; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; } /* ── eyebrow (panel-title treatment; Surface's default h2 uses this) ── */ .eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-60); } /* ── panel + instrument grid wash ── */ .panel { background: var(--bg3); border: 1px solid var(--hair-soft); border-radius: var(--r2); padding: var(--sp-5); box-shadow: var(--hair-shadow); } .panel.instrument { background-image: linear-gradient(var(--hair-soft) 1px, transparent 1px), linear-gradient(90deg, var(--hair-soft) 1px, transparent 1px); background-size: 16px 16px; background-position: -1px -1px; } /* ── certificate frame (flagship pattern) ── Document max-width ~640px, centered on the page -- a terms-of-record artifact reads as a printed document, not a full-bleed panel (founder ruling, 2026-07-03: "the CertFrame ... stretches full width"). z-index 55 sits above the sticky .topbar (50) so the topbar never paints over the certificate document mid-scroll, and below .rail (60) / dropdowns (80) / scrims (90+) so app overlays still win when they need to. */ .cert-frame { position: relative; z-index: 55; background: var(--bg3); border: 1px solid var(--t1); outline: 1px solid var(--t1); outline-offset: 4px; padding: 3.5rem 3rem; margin: 4px auto; border-radius: 0; max-width: 640px; } .cert-frame-authority { text-align: center; font-size: .68rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 10px; } .cert-frame-title { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -.01em; margin-bottom: 1.75rem; } .cert-frame-section-title { display: flex; align-items: center; gap: 14px; justify-content: center; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); margin: 1.75rem 0 1rem; } .cert-frame-section-title::before, .cert-frame-section-title::after { content: ""; display: block; width: 42px; height: 1px; background: var(--hair); } .cert-frame-body { max-width: 62ch; margin: 0 auto; } .cert-frame-kicker { display: flex; justify-content: center; margin-bottom: 1.25rem; } .cert-frame-center { text-align: center; } /* corner guilloches: 5 concentric hairline arcs per corner, mirrored */ .cert-frame::before, .cert-frame::after, .cert-frame-body::before, .cert-frame-body::after { content: none; } /* 5 concentric hairline arcs, tight radius steps (8px, not the old 7px-over- 31px-span smear) so each ring reads distinct at the actual 64px render size, plus a stepped opacity per ring (.28 at the innermost down to .10 at the outermost) instead of one flat .22 wash across all five (R7 rework — design-director finding: the old uniform steps + flat opacity blurred into a single blob at render size). Each ring gets its own opacity by mixing --hair (stronger, .18 base alpha) for the inner rings and --hair-soft (weaker, .10 base alpha) for the outer ones, layered so the visual falloff still reads as engraved rings, not a wash. */ /* Each corner is a 64px square clipped to the frame's actual corner (overflow hidden), with every radial-gradient arc's CENTER anchored at that same corner point (0,0 for top-left; mirrored per corner via transform, same as before) -- so only the inner quarter-circle of each ring ever renders, reading as an engraved corner flourish anchored to the frame edge, never a floating full circle poking into the page (founder finding, 2026-07-03: "broken corner ornaments -- circles floating top-left/bottom-right"). */ .cert-frame-corner { position: absolute; width: 64px; height: 64px; pointer-events: none; overflow: hidden; background-image: radial-gradient(circle at top left, transparent 9px, var(--hair) 10px, var(--hair) 11px, transparent 12px), radial-gradient(circle at top left, transparent 16px, var(--hair) 17px, var(--hair) 18px, transparent 19px), radial-gradient(circle at top left, transparent 23px, var(--hair-soft) 24px, var(--hair-soft) 25px, transparent 26px), radial-gradient(circle at top left, transparent 30px, var(--hair-soft) 31px, var(--hair-soft) 32px, transparent 33px), radial-gradient(circle at top left, transparent 37px, var(--hair-soft) 38px, var(--hair-soft) 39px, transparent 40px); opacity: .85; } .cert-frame-corner.is-tl { top: 0; left: 0; } .cert-frame-corner.is-tr { top: 0; right: 0; transform: scaleX(-1); } .cert-frame-corner.is-bl { bottom: 0; left: 0; transform: scaleY(-1); } .cert-frame-corner.is-br { bottom: 0; right: 0; transform: scale(-1, -1); } @media (max-width: 600px) { .cert-frame { padding: 2rem 1.25rem; outline-offset: 3px; } .cert-frame-corner { display: none; } } /* ── field system (.field/.hint/.err) ── */ .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .field-label { font-size: .8rem; font-weight: 600; color: var(--t1); } .field input[type="text"], .field input[type="email"], .field input[type="number"], .field input[type="password"], .field select, .field textarea { padding: var(--sp-3); background: var(--bg4); border: 1px solid var(--hair); border-radius: var(--r); font-family: var(--font-ui); font-size: var(--fs-small); color: var(--t1); min-height: 42px; width: 100%; min-width: 0; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--t1); outline-offset: 2px; border-color: var(--t1); } .field input[type="checkbox"] { accent-color: var(--t1); } .field input.is-bad { border-color: var(--red); } .field input.is-bad:focus-visible { outline-color: var(--red); } .hint { font-size: .78rem; color: var(--ink-60); line-height: 1.4; } .err { font-size: .78rem; color: var(--red); font-weight: 600; } /* ── tag input with suggestion chips ── */ .tag-field { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px; background: var(--bg4); border: 1px solid var(--hair); border-radius: var(--r); min-height: 42px; align-items: center; } .tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--hair); border-radius: 999px; font-size: .72rem; background: var(--bg2); } .tag-chip-x { cursor: pointer; opacity: .6; font-size: .7rem; } .tag-chip-x:hover { opacity: 1; } .tag-field input { flex: 1; min-width: 80px; border: none; background: none; outline: none; font-family: var(--font-ui); font-size: var(--fs-small); color: var(--t1); } .tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .tag-suggest-chip { font-family: var(--font-mono); font-size: .7rem; padding: 3px 9px; border: 1px dashed var(--hair); border-radius: 999px; background: none; color: var(--ink-60); cursor: pointer; transition: border-color .12s, color .12s; } .tag-suggest-chip:hover { border: 1px solid var(--t1); border-style: solid; color: var(--t1); } /* ── selection cards (docs/DESIGN.md §0: selected = ink border, never an orange fill) — onboarding's tier picker ── */ .ob-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); } .ob-tier-card { position: relative; display: block; cursor: pointer; background: var(--bg3); border: 1px solid var(--hair-soft); border-radius: var(--r2); padding: var(--sp-4) var(--sp-5); transition: border-color .12s; } .ob-tier-card:hover { border-color: var(--hair); } .ob-tier-card.is-selected { border-color: var(--t1); border-width: 2px; padding: calc(var(--sp-4) - 1px) calc(var(--sp-5) - 1px); } .ob-tier-radio { position: absolute; top: 12px; right: 12px; accent-color: var(--t1); } .ob-tier-label { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 8px; padding-right: 20px; } .ob-tier-splits { margin-bottom: 8px; } .ob-tier-blurb { margin: 0; } /* ── chip system (hairline pill + semantic tint) ── */ .chip-pg { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; border: 1px solid var(--hair); background: var(--bg2); color: var(--t2); } .chip-pg.mono { font-family: var(--font-mono); } .chip-pg.is-good { color: var(--green); border-color: rgba(63,142,91,.35); background: var(--gd); } .chip-pg.is-bad { color: var(--red); border-color: rgba(211,58,44,.35); background: var(--rd); } .chip-pg.is-amber { color: var(--amber); border-color: rgba(181,121,10,.35); background: var(--wd); } .chip-pg.is-ink { color: var(--t1); border-color: var(--t1); } /* ── seal (double-ring circle, Fraunces mark, letterspaced caption) ── */ .seal { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; } .seal-ring { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--t1); outline: 1px solid var(--t1); outline-offset: 3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .seal-mark { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; } .seal-caption { font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-60); text-align: center; } .seal.is-pending .seal-ring { border-color: var(--amber); outline-color: var(--amber); } .seal.is-pending .seal-mark { color: var(--amber); } .seal.is-revoked .seal-ring { border-color: var(--red); outline-color: var(--red); } .seal.is-revoked .seal-mark { color: var(--red); } /* ── state panel (empty/error, replaces bare .empty-state) ── */ .state-panel { background: var(--bg3); border: 1px solid var(--hair); border-radius: var(--r2); padding: 40px 24px; text-align: center; color: var(--t3); } .state-panel .st-title { font-size: 15px; font-weight: 600; color: var(--t1); margin-bottom: 6px; } .state-panel .st-icon { font-size: 26px; margin-bottom: 10px; opacity: .7; } .state-panel .st-body { font-size: 13px; } .state-panel.is-error { border-color: var(--red); } .state-panel.is-error .st-title { color: var(--red); } /* ── toast bars (solid green/red, bottom-right, plain x) ── */ .toast-pg-host { position: fixed; bottom: 22px; right: 22px; z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .toast-pg { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r); font-size: 12.5px; font-weight: 600; color: #fff; box-shadow: 0 10px 30px -12px rgba(20,17,13,.4); animation: toastIn .2s ease-out; max-width: 360px; } .toast-pg.is-good { background: var(--green); } .toast-pg.is-bad { background: var(--red); } .toast-pg-x { cursor: pointer; opacity: .8; font-size: 11px; margin-left: auto; flex-shrink: 0; } .toast-pg-x:hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { .toast-pg { animation: none; } } /* ── stat counter: superseded by the ruled-strip StatCounter rule above (~line 1897, "a .stat-counter-row is a ruled strip: dotted separators between cells") -- this block used to redeclare all three class names with a plain flex-column + bare gap, no rule/dotted-separator, later in the cascade, silently overriding the locked ruled-strip look. Removed rather than retired since it duplicated (not extended) live class names used app-wide (every StatCounter row in the product), and its concrete effect was exactly why the strip read as a bare flex row instead of the ruled, dotted-separator strip the design system calls for. ── */ /* ══════════════════════════════════════════════════════════════════════ DESIGN SYSTEM v3 (LOCKED 2026-07-03, docs/DESIGN.md §-1) — new kit primitives: status dot / row rail, field system promoted to a real component, tag input, accordion, drawer motion alignment. Composes the v3 semantic-color and motion tokens declared in the :root block above. ══════════════════════════════════════════════════════════════════════ */ /* ── status dot / row rail — color lives on the dot or a row's left edge, NEVER a chip fill. Palette is restricted on purpose: green=certified, red=revoked, ink=everything else (pending/active/in-progress/...). ── */ .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .status-dot.is-certified { background: var(--green); } .status-dot.is-revoked { background: var(--red); } .status-dot.is-neutral { background: var(--t1); opacity: .55; } .row-rail { position: relative; } .row-rail::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--t1); opacity: .35; } .row-rail.is-certified::before { background: var(--green); opacity: 1; } .row-rail.is-revoked::before { background: var(--red); opacity: 1; } /* ── field system, promoted to a v3 primitive (Field in ui.js). Reuses the addendum's shipped .field/.field-label/.hint/.err CSS (docs/DESIGN.md §0) unchanged — this only tightens the focus ring to ink (was already ink via .field input:focus below; no override needed, kept here as the v3 anchor comment so the rule isn't mistaken for dead code on a future sweep). ── */ /* ── tag input (TagInput component) — the .tag-field/.tag-chip/.tag-suggest CSS already shipped in the print-grade addendum; this only adds the fill- on-click affordance for a selected suggestion so the two states (offered vs already added) read differently at a glance. ── */ .tag-suggest-chip.is-added { border-style: solid; border-color: var(--t1); color: var(--t1); background: var(--bg2); } /* ── accordion — hairline rows, chevron rotates on expand, 200ms ease-out. ── */ .accordion { border: 1px solid var(--hair); border-radius: var(--r2); overflow: hidden; } .accordion-item + .accordion-item { border-top: 1px solid var(--hair-soft); } .accordion-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--sp-3) var(--sp-4); background: var(--bg3); border: none; cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; color: var(--t1); text-align: left; transition: background var(--dur-hover) ease-out; } .accordion-head:hover { background: rgba(20, 17, 12, .035); } .accordion-chevron { flex-shrink: 0; display: inline-flex; color: var(--ink-60); transition: transform var(--dur-expand) ease-out; } .accordion-item.is-open .accordion-chevron { transform: rotate(180deg); } .accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-expand) ease-out; } .accordion-item.is-open .accordion-body { grid-template-rows: 1fr; } .accordion-body-in { overflow: hidden; } .accordion-body-pad { padding: var(--sp-4); border-top: 1px solid var(--hair-soft); } /* ══════════════════════════════════════════════════════════════════════ D4 TRUST PACK (2026-07-03) — the locked certificate document + the public verify page. Composes CertFrame/KV/Badge; no new JS primitive beyond SealStamp (ui.js) and the verify page's own layout classes. ══════════════════════════════════════════════════════════════════════ */ /* ── seal stamp (the orange stamp image, ACROSS an edge, rotated, never centered — locked law). Positioned absolutely inside a `.cert-frame` that sets position:relative (it already does). Rotation is picked per call site from a locked 4-9deg range, never 0. Static placement here; the certify-moment stamp ANIMATION is a separate, out-of-scope concern (`.seal-stamp` is already reduced-motion-exempted in app.css, forward- declared in D2 for whichever surface builds the animated version). ── */ .cert-seal-stamp { position: absolute; width: 92px; height: 92px; opacity: .92; pointer-events: none; z-index: 1; } .cert-seal-stamp img { width: 100%; height: 100%; display: block; } /* Edge placements — bottom-right straddling the frame's own edge is the default "stamped across an edge" position; callers can override via an inline style if a document needs a different edge, but never centered. */ .cert-seal-stamp.is-corner-br { right: -28px; bottom: 18px; transform: rotate(-6deg); } .cert-seal-stamp.is-corner-tr { right: -24px; top: 22px; transform: rotate(7deg); } @media (max-width: 600px) { .cert-seal-stamp { width: 64px; height: 64px; } .cert-seal-stamp.is-corner-br { right: -14px; bottom: 8px; } .cert-seal-stamp.is-corner-tr { right: -12px; top: 10px; } } /* ── offline-verify block, printed on the certificate document itself: plain instruction + certificate/root links + QR + the plain-text URL under it (phishing defense, locked law — a viewer can type the URL by hand instead of trusting the QR blindly). ── */ .cert-verify-block { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px dotted var(--hair); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; text-align: left; } .cert-verify-copy { flex: 1 1 260px; min-width: 220px; } .cert-verify-copy p { font-size: .82rem; color: var(--t2); line-height: 1.55; margin: 0 0 8px; } .cert-verify-links { display: flex; gap: 14px; flex-wrap: wrap; } .cert-verify-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } .cert-verify-qr img { width: 92px; height: 92px; border: 1px solid var(--hair); background: #fff; } .cert-verify-qr-url { font-family: var(--font-mono); font-size: .66rem; color: var(--t2); letter-spacing: .01em; white-space: nowrap; } @media (max-width: 600px) { .cert-verify-block { justify-content: center; text-align: center; } } /* ── public verify page (#/verify/{cert_id}, sessionless) — a standalone document page, no rail, no topbar. Quiet indigo wordmark header (document- ink is allowed here per docs/DESIGN.md v3 — this is a printed-artifact surface, not an in-app control). ── */ .verify-page { min-height: 100vh; background: var(--bg0); padding: 48px 20px 64px; } .verify-page-head { max-width: 720px; margin: 0 auto 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .verify-page-brand { display: flex; align-items: baseline; gap: 8px; color: var(--indigo); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; } .verify-page-brand small { font-family: var(--font-ui); font-weight: 500; font-size: .68rem; letter-spacing: .04em; color: var(--t3); text-transform: none; } .verify-page-body { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .verify-page-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--r2); border: 1px solid; } .verify-page-banner.is-valid { background: var(--gd); border-color: rgba(26,127,55,.3); color: var(--green); } .verify-page-banner.is-revoked { background: var(--rd); border-color: rgba(180,35,24,.3); color: var(--red); } .verify-page-banner.is-unknown { background: var(--bg3); border-color: var(--hair); color: var(--t2); } .verify-page-banner-icon { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; background: currentColor; } .verify-page-banner-icon span { color: var(--bg3); } .verify-page-banner-tx { min-width: 0; } .verify-page-banner-title { font-weight: 600; font-size: .92rem; color: var(--t1); } .verify-page-banner-sub { font-size: .78rem; color: var(--t2); margin-top: 2px; } .verify-page-note { text-align: center; font-size: .74rem; color: var(--t3); line-height: 1.6; }