/* cfw-atlas.css — chrome for the CFW mind map + typed relation atlas. PROJECT-LOCAL chrome for a project-local engine. It CONSUMES design-system-ASK Tier 1 + Tier 2 BY REFERENCE from the pinned ./_dsa-tokens/ mirror, consumes the Spectral State primitive by reference, and FOLLOWS the design-system-ASK interactive-diagram family grammar — bar / canvas / inspector / legend / HUD / caption / corner ticks, glass panels, one --st custom property per node. It claims no conformance to `diagram-interactive-spine`, copies neither that pattern's engine nor its CSS, and asserts no reusable-pattern status. ENCODING CONTRACT colour GOVERNED STATE ONLY, from --state-* by reference shape OBJECT CLASS line RELATIONSHIP PLANE — registered solid + directed, recorded dashed text evidence depth + quotation fidelity, in the inspector only GEOMETRY CLAIM BOUND — enforced in the legend and the caption, and true of the layout itself: radial distance encodes PROJECTION LEVEL only, sector width encodes CORPUS WEIGHT only, angular placement is compositional, and adjacency between sectors carries NO semantic relation. Governed edges are the only relation encoding on this surface. */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: var(--font-sans); background: var(--bg-gradient); background-attachment: fixed; color: var(--fg-1); overflow: hidden; } .shell { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr; } /* ---- top bar ---- */ .bar { display: flex; align-items: center; gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--surface-glass-2); background: var(--surface-glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: 4; } .bar .mark { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--fg-1); } .bar .mark .sep { color: var(--fg-3); font-weight: 200; padding: 0 6px; } .bar .title-block { line-height: 1.3; } .bar .title-block .t { font-weight: 500; font-size: 15px; color: var(--fg-1); } .bar .title-block .s { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); } .bar .spacer { flex: 1; } .bar .stamp { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); text-align: right; } .bar .stamp .k { color: var(--fg-1); font-weight: 500; } .bar .themer { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); background: transparent; border: 1px solid var(--surface-glass-2); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; transition: opacity var(--dur-2) var(--ease-out); } .bar .themer:hover { opacity: 0.92; background: var(--surface-glass-2); } /* ---- canvas ---- */ .canvas-wrap { position: relative; overflow: hidden; } #stage { position: absolute; inset: 0; cursor: grab; touch-action: none; } #stage.panning { cursor: grabbing; } svg { width: 100%; height: 100%; display: block; } /* ---- structural scaffold: the mind-map limbs. NOT a relation encoding. ---- */ .spine { stroke: var(--fg-3); stroke-width: 1; fill: none; opacity: 0.42; } .spine.limb { opacity: 0.6; stroke-width: 1.3; } /* leader from a branch marker to its upright label */ .leader { stroke: var(--fg-3); stroke-width: 1; fill: none; opacity: 0.5; } /* ---- typed cross-links: LINE encodes plane, never hue ---- registered CFW-R canonical semantic relation solid, directed, strongest recorded a structured field in a carrier dashed, weaker unedged a DECLARED NON-LINKAGE never drawn — drawing a line for it would assert the very linkage the record denies */ .edge { fill: none; opacity: 0; transition: opacity var(--dur-2) var(--ease-out); } .edge.on { opacity: 0.8; } .edge.registered { stroke: var(--fg-1); stroke-width: 1.9; marker-end: url(#arrow); } .edge.recorded { stroke: var(--fg-2); stroke-width: 1.15; stroke-dasharray: 5 4; opacity: 0; } .edge.recorded.on { opacity: 0.5; } #arrow path { fill: var(--fg-1); } /* ---- nodes ---- */ .node { cursor: pointer; transition: opacity var(--dur-2) var(--ease-out); } .node .box { fill: var(--st); fill-opacity: 0.15; stroke: var(--st); stroke-width: 1.5; } .node .chip { fill: var(--st); } .node.dim { opacity: 0.14; } /* faded, never removed */ .node:hover .box { stroke-width: 2.4; fill-opacity: 0.24; } .node.sel .box { stroke-width: 2.8; fill-opacity: 0.32; } .node.near .box { stroke-width: 2.1; fill-opacity: 0.24; } /* ---- labels: human text leads, and every overview label is UPRIGHT ---- */ .lbl-root { fill: var(--fg-1); font-size: 23px; font-weight: 400; letter-spacing: -0.02em; text-anchor: middle; dominant-baseline: middle; } .lbl-region { fill: var(--fg-1); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; } .lbl-branch { fill: var(--fg-1); font-size: 13px; font-weight: 400; } .lbl-leaf { fill: var(--fg-1); font-size: 11px; font-weight: 200; } .lbl-count { fill: var(--fg-3); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; } /* CFW identifiers are TECHNICAL METADATA — mono, tertiary, deep zoom only */ .lbl-id { fill: var(--fg-3); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; } .lbl-halo { stroke: var(--bg-from); stroke-width: 4.2; stroke-linejoin: round; stroke-opacity: 0.85; paint-order: stroke fill; } /* labels and their leaders are screen-space callouts that can sit over a concept; they carry no action, so a tap or click passes to what is beneath them */ .lbl-root, .lbl-region, .lbl-branch, .lbl-leaf, .lbl-count, .lbl-id, .leader { pointer-events: none; } /* ---- glass panels ---- */ .glass { position: absolute; background: var(--surface-glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--surface-glass-2); border-radius: var(--radius-md); color: var(--fg-1); } .panel-h { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 7px; } .inspector { top: 18px; right: 18px; width: 322px; max-height: 40%; overflow-y: auto; padding: 16px 18px; font-size: 12px; line-height: 1.5; } /* the inspector's collapse control floats at the panel's top right and stays there while the panel scrolls. Collapsed, the panel is a labelled pill; its label and control take the primary foreground, as the HUD's controls do. */ .inspector .insp-bar { position: sticky; top: 0; float: right; z-index: 1; display: flex; align-items: center; gap: 8px; margin: -8px -10px 0 8px; } .inspector .insp-label { display: none; margin: 0; } .inspector .insp-toggle { font-family: var(--font-mono); font-size: 15px; line-height: 1; width: 26px; height: 26px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--fg-1); cursor: pointer; } .inspector .insp-toggle:hover { background: var(--surface-glass-2); } .inspector #inspbody > .backlink { clear: right; } body.insp-collapsed .inspector { width: auto; max-height: none; overflow: visible; padding: 6px 8px 6px 14px; } body.insp-collapsed .inspector .insp-bar { position: static; float: none; margin: 0; } body.insp-collapsed .inspector .insp-label { display: block; color: var(--fg-1); } body.insp-collapsed .inspector #inspbody { display: none; } .inspector .name { font-size: 14px; font-weight: 500; margin-bottom: 8px; text-wrap: pretty; } .inspector .state-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .inspector .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--st, var(--fg-1)); flex: none; } .inspector .state-name { font-family: var(--font-mono); font-size: 11px; } .inspector .state-mean { color: var(--fg-2); } .inspector .field { margin: 9px 0; } .inspector .field .lbl { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: 2px; } .inspector .val { color: var(--fg-1); text-wrap: pretty; } .inspector .ptr { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-2); word-break: break-word; } .inspector .idle { color: var(--fg-2); } .inspector .rule { height: 1px; background: var(--line-2); margin: 12px 0; } /* an ASK ruling stays VISUALLY DISTINCT from adjacent non-ruled rationale */ .inspector .ruled { border-left: 2px solid var(--state-earned); padding-left: 9px; margin: 9px 0; } .inspector .notruled { border-left: 2px solid var(--fg-3); padding-left: 9px; margin: 9px 0; color: var(--fg-2); } .inspector .plane-tag { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); } .legend { bottom: 18px; right: 18px; padding: 13px 16px 9px; width: 306px; max-height: calc(56% - 34px); overflow-y: auto; } .legend .row { display: flex; align-items: flex-start; gap: 9px; margin: 3px 0; font-size: 11px; } .legend .row .txt { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; } .legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; margin-top: 3px; } .legend .row .lbl { color: var(--fg-1); display: block; } .legend .row .sub { color: var(--fg-2); font-size: 10px; display: block; line-height: 1.28; } .legend .grp { margin-top: 10px; } .legend .kline { flex: none; width: 26px; height: 0; margin-top: 8px; } .legend .kline.registered { border-top: 1.9px solid var(--fg-1); } .legend .kline.recorded { border-top: 1.15px dashed var(--fg-2); } /* the geometry-claim bound, carried in the chrome rather than left to prose */ .legend .bound { margin-top: 9px; font-size: 10px; color: var(--fg-2); line-height: 1.38; } .legend .bound b { color: var(--fg-1); font-weight: 500; } .hud { bottom: 18px; left: 18px; display: flex; align-items: center; gap: 4px; padding: 6px; } .hud button { font-family: var(--font-mono); font-size: 14px; width: 30px; height: 30px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--fg-1); cursor: pointer; } .hud button:hover { background: var(--surface-glass-2); } .hud .pct { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); width: 44px; text-align: center; } .hud .lod { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); padding: 0 8px 0 4px; } .cfw-caption { bottom: 18px; left: 50%; transform: translateX(-50%); padding: 10px 18px; font-size: 11px; color: var(--fg-2); text-align: center; line-height: 1.5; max-width: 560px; text-transform: none; letter-spacing: 0; } .cfw-caption b { color: var(--fg-1); font-weight: 500; } .corner-tick { position: absolute; width: 14px; height: 14px; border: 1px solid var(--surface-glass-2); pointer-events: none; z-index: 3; } .corner-tick.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; } .corner-tick.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; } .corner-tick.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; } .corner-tick.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; } /* ---- map-only export mode: chrome hidden, the figure alone on the field ---- */ body.map-only .bar, body.map-only .glass, body.map-only .atlas-panel, body.map-only .corner-tick { display: none !important; } body.map-only .shell { grid-template-rows: 1fr; } /* ---- reduced motion: honour it, do not merely tolerate it ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ====================================================================== v2 — THE ATLAS NAVIGATION LAYER Added chrome only. No geometry, no encoding and no composition rule above this line is altered. With the control closed the page is materially v1. ====================================================================== */ /* ---- bounded sectional projection ---- `out` = OUTSIDE THE CURRENT SECTION. Distinct from `dim`, which is the selection-reveal treatment and still draws the object. A filter changes membership; it never changes a governed relation, and everything it hides returns intact on reset. */ .node.out, .spine.out, .edge.out, .leader.out { display: none; } /* ---- the atlas button in the top bar ---- */ .bar .atlasbtn { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-1); background: transparent; border: 1px solid var(--surface-glass-2); border-radius: var(--radius-sm); padding: 5px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background var(--dur-2) var(--ease-out); } .bar .atlasbtn:hover { background: var(--surface-glass-2); } .bar .atlasbtn .dot2 { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3); display: inline-block; } /* An active filter is UI STATE, not a governed state. It is expressed in ordinary UI grammar — foreground, border, weight — and uses no --state-* role. v2 used --state-earned here, which told the reader that filtering was an adjudicated governed state. */ body.filtering .bar .atlasbtn { border-color: var(--fg-1); font-weight: 500; } body.filtering .bar .atlasbtn .dot2 { background: var(--fg-1); } /* ---- the control overlay: one panel, closed by default ---- */ .atlas-panel { position: absolute; top: 18px; left: 18px; width: 344px; max-height: calc(100% - 36px); overflow-y: auto; padding: 14px 16px 16px; z-index: 5; display: none; font-size: 12px; line-height: 1.45; } body.atlas-open .atlas-panel { display: block; } .atlas-panel .ap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .atlas-panel .ap-close { background: transparent; border: none; color: var(--fg-2); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; } .atlas-panel .ap-close:hover { color: var(--fg-1); } .atlas-panel .ap-lbl { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: 5px; } .atlas-panel .ap-q { width: 100%; font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); background: var(--surface-glass-2); border: 1px solid var(--surface-glass-2); border-radius: var(--radius-sm); padding: 8px 10px; -webkit-appearance: none; appearance: none; } .atlas-panel .ap-q::placeholder { color: var(--fg-3); } .atlas-panel .ap-res { margin-top: 8px; max-height: 236px; overflow-y: auto; } .atlas-panel .ap-r { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; align-items: baseline; width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--line-2); color: var(--fg-1); padding: 7px 4px; cursor: pointer; font-family: var(--font-sans); font-size: 11.5px; } .atlas-panel .ap-r:hover, .atlas-panel .ap-r[aria-selected="true"] { background: var(--surface-glass-2); } .atlas-panel .ap-rk { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); } .atlas-panel .ap-rl { overflow-wrap: anywhere; } .atlas-panel .ap-rs { font-family: var(--font-mono); font-size: 9px; color: var(--fg-3); white-space: nowrap; } .atlas-panel .ap-none { color: var(--fg-2); font-size: 11px; padding: 8px 4px; } .atlas-panel .ap-census { margin: 12px 0 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--fg-2); border-left: 2px solid var(--fg-3); padding-left: 9px; } .atlas-panel .ap-census.active { color: var(--fg-1); border-left-color: var(--fg-1); border-left-width: 3px; } .atlas-panel .ap-note { color: var(--fg-3); font-size: 10px; line-height: 1.4; margin: 8px 0 12px; } .atlas-panel .ap-dim { border-top: 1px solid var(--line-2); padding: 7px 0; } .atlas-panel .ap-dim summary { cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; list-style: none; } .atlas-panel .ap-dim summary::-webkit-details-marker { display: none; } .atlas-panel .ap-dim summary::before { content: "+"; font-family: var(--font-mono); color: var(--fg-3); margin-right: 7px; font-size: 11px; } .atlas-panel .ap-dim[open] summary::before { content: "\2212"; } .atlas-panel .ap-dt { font-size: 11.5px; color: var(--fg-1); flex: 1; } .atlas-panel .ap-fam { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); } .atlas-panel .ap-dn { color: var(--fg-3); font-size: 10px; line-height: 1.4; margin: 6px 0 7px; } .atlas-panel .ap-opt { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 11px; cursor: pointer; } .atlas-panel .ap-opt.locked { cursor: default; color: var(--fg-3); } .atlas-panel .ap-opt input { accent-color: var(--fg-1); flex: none; margin: 0; } .atlas-panel .ap-opt .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; } .atlas-panel .ap-ol { flex: 1; min-width: 0; overflow-wrap: anywhere; } .atlas-panel .ap-on { font-family: var(--font-mono); font-size: 9px; color: var(--fg-3); flex: none; } .atlas-panel .ap-off { border-top: 1px solid var(--line-2); padding: 8px 0; } .atlas-panel .ap-offtag { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; color: var(--fg-3); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 2px 6px; margin-left: 8px; } .atlas-panel .ap-reset { margin-top: 12px; width: 100%; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-1); background: var(--surface-glass-2); border: 1px solid var(--surface-glass-2); border-radius: var(--radius-sm); padding: 9px; cursor: pointer; } .atlas-panel .ap-reset:hover { opacity: 0.9; } /* ---- inspector: evidence-owner identifiers are ACTIONABLE ---- v1 printed them as static text and told the reader they were "resolvable by exact ID" while supplying no resolver. These are the resolvers. */ .inspector .idlink { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-1); background: transparent; border: none; border-bottom: 1px solid var(--fg-3); padding: 0; cursor: pointer; word-break: break-word; } .inspector .idlink:hover { border-bottom-color: var(--fg-1); } .inspector .showall, .inspector .backlink { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-1); background: var(--surface-glass-2); border: 1px solid var(--surface-glass-2); border-radius: var(--radius-sm); padding: 7px 10px; cursor: pointer; margin-top: 9px; width: 100%; text-align: left; } .inspector .backlink { margin: 0 0 10px; } .inspector .showall:hover, .inspector .backlink:hover { opacity: 0.9; } .inspector .note { color: var(--fg-3); font-size: 10px; line-height: 1.4; margin-top: 12px; border-top: 1px solid var(--line-2); padding-top: 9px; } /* ---- HUD: filter state is reported SEPARATELY from level of detail ---- */ .hud .fsep { width: 1px; height: 15px; background: var(--surface-glass-2); margin: 0 3px; } .hud .fstate { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); padding: 0 8px 0 4px; } .hud .fstate.active { color: var(--fg-1); font-weight: 500; } /* ---- keyboard: a visible focus ring on every reachable control ---- */ .atlas-panel :focus-visible, .bar :focus-visible, .hud :focus-visible, .inspector :focus-visible { outline: 2px solid var(--fg-1); outline-offset: 2px; border-radius: var(--radius-sm); } .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; }