/* ============================================================================ * Crucible Shell — shared CHROME stylesheet (the approved light wireframe) * ---------------------------------------------------------------------------- * Lifted faithfully from dev-docs/wireframes/crucible/crucible-wireframe.html * (the founder-approved "100x better" light design). This is the SINGLE shared * chrome stylesheet referenced by all three Crucible builds — the IIFE landing * shell + the Objects (ontology) and Forge (workflow) React apps — so the * topbar / activity-rail / nav-tree / surface / inspector look IDENTICAL across * all three by construction (no 3x divergence). * * Colour/elevation/radius/type tokens come from the sibling theme-tokens.css * (var(--bg), --panel, --text, --line, --accent, …). Light is the default; * `data-theme="dark"` on flips to the dark token set. * * SCOPED under `.crx`: every rule is prefixed `.crx …` and the grid root IS * `.crx`. This isolates the wireframe's generic class names (.card/.btn/.tag/ * .search/.badge/.nav) from the dark GEO OPS `style.css` they would otherwise * collide with when the IIFE shell mounts inside the GEO OPS index.html, and * from each React app's own bundle. Every Crucible root element carries * class="crx". * ========================================================================== */ .crx, .crx *{box-sizing:border-box} .crx{display:grid;grid-template-rows:52px 1fr;height:100%;min-height:0; background:var(--bg-grad);background-color:var(--bg);color:var(--text); font-family:var(--font);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased; overflow:hidden;transition:background-color .2s,color .2s} .crx button{font-family:inherit;color:inherit} .crx ::-webkit-scrollbar{width:9px;height:9px} .crx ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px} .crx .icon{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .crx .icon.sm{width:14px;height:14px}.crx .icon.lg{width:18px;height:18px} /* ── topbar ─────────────────────────────────────────────────────────────── */ .crx .topbar{display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--topbar);border-bottom:1px solid var(--line);box-shadow:var(--shadow-s);z-index:30} .crx .brand{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:.2px} .crx .brand .logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,#3da9fc,#7c5cff);color:#fff;box-shadow:0 2px 10px -2px #3da9fc88} .crx .crumbs{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px} .crx .crumbs .sep{color:var(--faint)} .crx .crumbs b{color:var(--text);font-weight:600} .crx .crumbs .thread{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--line2);border-radius:20px;background:var(--panel2);color:var(--accent);font-family:var(--mono);font-size:11.5px} .crx .thread .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)} .crx .spacer{flex:1} .crx .search{display:flex;align-items:center;gap:8px;width:300px;max-width:30vw;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:var(--input);color:var(--muted);transition:.15s} .crx .search:focus-within{border-color:var(--accent-d);box-shadow:0 0 0 3px var(--accent-soft)} .crx .search input{all:unset;flex:1;color:var(--text);font-size:12.5px} .crx .search kbd{font-family:var(--mono);font-size:10px;color:var(--faint);border:1px solid var(--line2);border-radius:4px;padding:1px 5px} .crx .tb-btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);color:var(--text);font-size:12.5px;cursor:pointer;transition:.15s} .crx .tb-btn:hover{background:var(--hover)} .crx .tb-btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-d));border-color:var(--accent-d);color:#fff;font-weight:600;box-shadow:0 2px 10px -3px var(--accent)} .crx .tb-btn.primary:hover{filter:brightness(1.06)} .crx .tb-btn.icon-only{padding:0;width:32px;justify-content:center} .crx .badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:7px;font-size:11px;font-weight:600;background:var(--accent-soft);color:var(--accent-d);border:1px solid var(--line2)} .crx .avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#34d399,#3da9fc);display:grid;place-items:center;color:#06210f;font-weight:700;font-size:12px} /* ── body grid: rail | nav | center | inspector ─────────────────────────── */ /* grid sizing per the approved FIXES wireframe (crucible-fixes-wireframe.html): 56|280|1fr|340 */ .crx .body{display:grid;grid-template-columns:56px 280px 1fr 340px;min-height:0} .crx .body.no-insp{grid-template-columns:56px 280px 1fr} .crx .rail{background:var(--panel2);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:6px} .crx .rail .ritem{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--muted);cursor:pointer;position:relative;transition:.15s} .crx .rail .ritem:hover{background:var(--hover);color:var(--text)} .crx .rail .ritem.active{background:var(--sel);color:var(--sel-fg)} .crx .rail .ritem.active::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--accent)} .crx .rail .ritem .tip{position:absolute;left:48px;white-space:nowrap;background:var(--elev);border:1px solid var(--line2);color:var(--text);padding:5px 9px;border-radius:7px;font-size:11.5px;opacity:0;pointer-events:none;transform:translateX(-4px);transition:.13s;z-index:40;box-shadow:var(--shadow)} .crx .rail .ritem:hover .tip{opacity:1;transform:translateX(0)} .crx .rail .grow{flex:1} .crx .nav{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0} .crx .nav-h{display:flex;align-items:center;justify-content:space-between;padding:12px 13px 8px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase} .crx .nav-scroll{overflow:auto;padding:0 8px 12px;flex:1;min-height:0} .crx .sec{margin-bottom:3px} .crx .sec-h{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;cursor:pointer;color:var(--text);font-weight:600;font-size:12.5px;user-select:none;transition:.12s} .crx .sec-h:hover{background:var(--hover)} .crx .sec-h .chev{margin-left:auto;color:var(--faint);transition:transform .16s} .crx .sec.open>.sec-h .chev{transform:rotate(90deg)} .crx .sec-h .cnt{margin-left:auto;color:var(--faint);font-size:11px;font-family:var(--mono)} .crx .sec.open>.sec-h .cnt{display:none} .crx .sec-h .chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--chip);color:var(--accent)} .crx .sec-body{display:none;padding:3px 2px 8px 6px} .crx .sec.open>.sec-body{display:block;animation:crx-fade .18s ease} @keyframes crx-fade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}} .crx .tree-row{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;cursor:pointer;color:var(--muted);transition:.12s} .crx .tree-row:hover{background:var(--hover);color:var(--text)} .crx .tree-row.sel{background:var(--sel);color:var(--sel-fg);font-weight:600} .crx .tree-row .tdot{width:7px;height:7px;border-radius:2px;flex:0 0 auto} .crx .tree-row .meta{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint)} .crx .tree-group{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);padding:8px 9px 3px} .crx .pal-search{display:flex;align-items:center;gap:7px;margin:2px 4px 8px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--input);color:var(--muted)} .crx .pal-search input{all:unset;flex:1;color:var(--text);font-size:12px} .crx .pal-cat{margin:2px 2px 6px} .crx .pal-cat-h{display:flex;align-items:center;gap:7px;padding:5px 6px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;cursor:pointer} .crx .pal-cat-h .swatch{width:8px;height:8px;border-radius:3px} .crx .pal-cat-h .chev{margin-left:auto;color:var(--faint);transition:transform .16s} .crx .pal-cat.open .pal-cat-h .chev{transform:rotate(90deg)} .crx .tiles{grid-template-columns:1fr 1fr;gap:6px;padding:4px 2px 2px;display:none} .crx .pal-cat.open .tiles{display:grid} .crx .tile{display:flex;flex-direction:column;gap:6px;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--node);cursor:grab;transition:.13s;position:relative} .crx .tile:hover{border-color:var(--accent-d);transform:translateY(-1px);box-shadow:var(--shadow-s)} .crx .tile:active{cursor:grabbing;transform:scale(.98)} .crx .tile .ti{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff} .crx .tile .tn{font-size:11.5px;font-weight:600;color:var(--text);line-height:1.2} .crx .tile .tk{font-family:var(--mono);font-size:9.5px;color:var(--faint)} .crx .tile .grip{position:absolute;top:7px;right:7px;color:var(--faint);opacity:0;transition:.12s} .crx .tile:hover .grip{opacity:1} /* ── center / surface ───────────────────────────────────────────────────── */ .crx .center{position:relative;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--bg)} .crx .surf-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)} .crx .surf-title{display:flex;align-items:center;gap:9px;font-weight:650;font-size:14px} .crx .surf-title .stag{font-size:11px;color:var(--muted);font-weight:500} .crx .seg{display:flex;gap:2px;padding:3px;background:var(--panel2);border:1px solid var(--line);border-radius:9px} .crx .seg button{border:0;background:transparent;color:var(--muted);padding:5px 11px;border-radius:7px;font-size:12px;cursor:pointer;transition:.12s} .crx .seg button:hover{color:var(--text)} .crx .seg button.on{background:var(--panel);color:var(--sel-fg);box-shadow:var(--shadow-s);font-weight:600} .crx .surf-body{flex:1;min-height:0;position:relative;overflow:auto} .crx .canvas{position:absolute;inset:0;background:var(--canvas);background-image:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0);background-size:22px 22px} .crx .canvas-hint{position:absolute;left:50%;top:18px;transform:translateX(-50%);color:var(--faint);font-size:12px;display:flex;align-items:center;gap:8px;border:1px dashed var(--line2);border-radius:20px;padding:6px 14px;background:var(--panel)} .crx svg.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .crx .wires path{stroke:var(--wire);stroke-width:2;fill:none} .crx .node{position:absolute;width:182px;background:var(--node);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);cursor:grab;transition:border-color .12s,box-shadow .12s;overflow:hidden} .crx .node:hover{border-color:var(--accent-d)} .crx .node.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow)} .crx .node .nh{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line)} .crx .node .nh .ni{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;flex:0 0 auto} .crx .node .nh .nt{font-weight:650;font-size:12px} .crx .node .nh .nk{font-family:var(--mono);font-size:9.5px;color:var(--faint)} .crx .node .nb{padding:8px 11px;color:var(--muted);font-size:11px;display:flex;flex-direction:column;gap:4px} .crx .node .nb .kv{display:flex;justify-content:space-between;gap:8px} .crx .node .port{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--panel);border:2px solid var(--line2);top:50%;transform:translateY(-50%)} .crx .node .port.in{left:-6px}.crx .node .port.out{right:-6px;border-color:var(--accent)} .crx .node .pill{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:2px;padding:2px 7px;border-radius:20px;font-size:10px;font-weight:700} .crx .pill.live{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent)} .crx .pill.sandbox{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)} /* ── cards / tables / tags / kpis ───────────────────────────────────────── */ .crx .pad{padding:18px 22px} .crx .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s)} .crx .tbl{width:100%;border-collapse:collapse;font-size:12.5px} .crx .tbl th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.4px;text-transform:uppercase;padding:11px 14px;border-bottom:1px solid var(--line)} .crx .tbl td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--text)} .crx .tbl tr:hover td{background:var(--hover)} .crx .tbl .mono{font-family:var(--mono);font-size:11.5px;color:var(--muted)} .crx .tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;background:var(--accent-soft);color:var(--accent-d);border:1px solid var(--line2)} .crx .tag.g{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)} .crx .tag.a{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)} .crx .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} .crx .kpi{padding:14px 16px} .crx .kpi .l{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px} .crx .kpi .v{font-size:24px;font-weight:700;margin-top:4px} .crx .kpi .v small{font-size:12px;color:var(--muted);font-weight:500} /* ── inspector (right pane) ─────────────────────────────────────────────── */ .crx .insp{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0} .crx .insp-h{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid var(--line)} .crx .insp-h .ii{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff} .crx .insp-h .it{font-weight:650;font-size:13px} .crx .insp-h .ik{font-family:var(--mono);font-size:10px;color:var(--faint)} .crx .insp-h .x{margin-left:auto;color:var(--muted);cursor:pointer;width:26px;height:26px;border-radius:7px;display:grid;place-items:center} .crx .insp-h .x:hover{background:var(--hover);color:var(--text)} .crx .insp-scroll{overflow:auto;padding:14px 15px;flex:1;min-height:0} .crx .fgroup{margin-bottom:16px} .crx .fgroup>.gl{color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:9px;display:flex;align-items:center;gap:7px} .crx .field{margin-bottom:11px} .crx .field label{display:block;color:var(--text);font-size:11.5px;margin-bottom:5px} .crx .field .inp,.crx .field select{width:100%;padding:8px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--input);color:var(--text);font-size:12.5px;font-family:var(--font)} .crx .field .inp.mono{font-family:var(--mono);font-size:11.5px} .crx .field .inp:focus,.crx .field select:focus{outline:0;border-color:var(--accent-d);box-shadow:0 0 0 3px var(--accent-soft)} .crx .field .hint{color:var(--faint);font-size:10.5px;margin-top:4px} .crx .toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line2);border-radius:9px;background:var(--panel2)} .crx .toggle .tl{font-size:12px} .crx .toggle .tl b{color:var(--text)} .crx .sw{width:46px;height:26px;border-radius:20px;background:color-mix(in srgb,var(--warn) 25%,transparent);border:1px solid color-mix(in srgb,var(--warn) 50%,transparent);position:relative;cursor:pointer;transition:.15s;flex:0 0 auto} .crx .sw::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:var(--warn);top:2px;left:2px;transition:.18s} .crx .sw.on{background:color-mix(in srgb,var(--ok) 25%,transparent);border-color:color-mix(in srgb,var(--ok) 50%,transparent)} .crx .sw.on::after{left:22px;background:var(--ok)} .crx .insp-foot{padding:12px 15px;border-top:1px solid var(--line);display:flex;gap:8px} .crx .btn{flex:1;height:34px;border-radius:8px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font-size:12.5px;cursor:pointer;font-weight:600} .crx .btn:hover{background:var(--hover)} .crx .btn.prim{background:linear-gradient(180deg,var(--accent),var(--accent-d));border-color:var(--accent-d);color:#fff} .crx .empty{display:grid;place-items:center;height:100%;color:var(--faint);text-align:center;padding:30px} .crx .empty .ic{width:46px;height:46px;border-radius:12px;background:var(--chip);display:grid;place-items:center;margin:0 auto 12px;color:var(--muted)} .crx .hidden{display:none!important} /* ── shared helpers: Objects sub-tabs / Lineage / Views / Governance ────── */ .crx .subtab{display:none}.crx .subtab.on{display:block} .crx .row-act{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid var(--line2);border-radius:7px;background:var(--panel);color:var(--text);font-size:11.5px;cursor:pointer;transition:.13s} .crx .row-act:hover{background:var(--hover);border-color:var(--accent-d)} .crx .tbl tr.clk{cursor:pointer} .crx .tbl tr.clk.sel td{background:var(--sel)} .crx .cbar{display:flex;align-items:center;gap:8px;min-width:118px} .crx .cbar .track{flex:1;height:6px;border-radius:4px;background:var(--chip);overflow:hidden} .crx .cbar .fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--warn),var(--ok))} .crx .cbar .num{font-family:var(--mono);font-size:11px;color:var(--muted)} .crx .sectitle{display:flex;align-items:center;gap:8px;font-weight:650;font-size:13px;margin:4px 0 12px} .crx .sectitle .sub{color:var(--muted);font-weight:500;font-size:11.5px} .crx .sectitle svg{color:var(--muted)} .crx .barbtn{margin-left:auto} .crx .toolrow{display:flex;align-items:center;gap:10px;margin-bottom:14px} .crx .minisel{padding:4px 8px;border:1px solid var(--line2);border-radius:7px;background:var(--input);color:var(--text);font-size:11.5px;font-family:var(--mono)} .crx .minisel:focus{outline:0;border-color:var(--accent-d);box-shadow:0 0 0 3px var(--accent-soft)} .crx .sw.sm{width:38px;height:22px}.crx .sw.sm::after{width:16px;height:16px}.crx .sw.sm.on::after{left:18px} .crx .mapbox{position:relative;height:420px;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden; background:linear-gradient(180deg,var(--panel2),var(--panel)); background-image:linear-gradient(var(--line) 1px,transparent 0),linear-gradient(90deg,var(--line) 1px,transparent 0); background-size:44px 44px} .crx .mapbox .mpin{position:absolute;transform:translate(-50%,-100%);color:var(--enrich);filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))} .crx .mapbox .mpin.t{color:var(--bad)} .crx .mapbox .mpin.q{color:var(--warn)} .crx .mapbox .mnote{position:absolute;left:12px;bottom:10px;color:var(--faint);font-size:11px;font-family:var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 8px} .crx .lin-wrap{position:absolute;inset:0;overflow:auto} .crx .lin-canvas{position:relative;width:1080px;height:520px;margin:0 auto} .crx .lin-lane{position:absolute;top:14px;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);font-weight:700} .crx .node.lin{width:168px;cursor:default} .crx .node.lin:hover{border-color:var(--line2)} .crx .node.lin .nb{font-size:10.5px} .crx .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px} .crx .vcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);overflow:hidden;cursor:pointer;transition:.13s} .crx .vcard:hover{border-color:var(--accent-d);transform:translateY(-2px);box-shadow:var(--shadow)} .crx .vcard .prev{height:128px;background:var(--panel2);border-bottom:1px solid var(--line);position:relative;overflow:hidden} .crx .vcard .meta-row{display:flex;align-items:center;gap:8px;padding:11px 13px} .crx .vcard .vt{font-weight:650;font-size:12.5px} .crx .vcard .vsub{color:var(--faint);font-size:11px;margin-left:auto;font-family:var(--mono)} .crx .vcard .vfoot{display:flex;align-items:center;gap:8px;padding:0 13px 12px;color:var(--muted);font-size:11px} .crx .pv-bars{display:flex;align-items:flex-end;gap:7px;height:100%;padding:14px} .crx .pv-bars span{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent-soft));border-radius:3px 3px 0 0;opacity:.85} .crx .pv-map{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 0),linear-gradient(90deg,var(--line) 1px,transparent 0);background-size:24px 24px} .crx .pv-map .pp{position:absolute;color:var(--enrich)} .crx .pv-map .pp.t{color:var(--bad)} .crx .pv-rows{padding:12px 14px;display:flex;flex-direction:column;gap:7px} .crx .pv-rows .pr{height:9px;border-radius:3px;background:var(--chip)} .crx .pv-net{position:absolute;inset:0} .crx .gcard{padding:14px 16px;display:flex;flex-direction:column;gap:10px} .crx .gcard .gt{font-weight:650;font-size:13px;display:flex;align-items:center;gap:8px} .crx .gcard .gt .arch{margin-left:auto;font-size:10.5px;color:var(--warn);font-weight:600} .crx .chiprow{display:flex;flex-wrap:wrap;gap:6px} .crx .rolechip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--chip);color:var(--muted);border:1px solid var(--line2)} .crx .avg{display:flex;align-items:center} .crx .avg .a{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#06210f;font-weight:700;font-size:10px;border:2px solid var(--panel);margin-left:-7px;background:linear-gradient(135deg,#34d399,#3da9fc)} .crx .avg .a:first-child{margin-left:0} .crx .matrix td.c{text-align:center} .crx .matrix .yes{color:var(--ok);font-weight:700} .crx .matrix .no{color:var(--faint)}