/* ============================================================ Hi-fi token foundation · ported from notes/design/hifi-prototype/explorer.css ------------------------------------------------------------ Inert until components consume them. Coexists with the legacy tokens (--bg/--fg/--accent/etc.) below; legacy components continue to work, new/migrated components reach for the hifi tokens. Migration plan: PLAN-DESIGN.md Phase 3. ------------------------------------------------------------ Light mode is the default per prototype; dark mode is opt-in via [data-theme="dark"] on . The live site currently sets data-theme="dark" in explorer.html so we render against the dark vocabulary while migrating. ============================================================ */ :root { /* === paper, ink === */ --paper: #f4f1ea; --paper-2: #ece8de; --paper-3: #e3dfd2; --ink: #1a1a1a; --ink-2: #4a4a4a; --ink-3: #8a8a82; --line: #1a1a1a; --rule: #c9c4b6; --note: #c0392b; /* spec-doc / annotation only · not for production UI */ /* === folder palette · 12 hues, frequency-ranked v0.18.2 === fills sit at L≈0.84 / C≈0.085 (legible black-on, even weight) edges sit at L≈0.50 / C≈0.10 (small-area accents) */ --pal-01: oklch(0.84 0.085 30); --pal-01-edge: oklch(0.55 0.110 30); /* coral · conditions */ --pal-02: oklch(0.84 0.085 60); --pal-02-edge: oklch(0.55 0.110 60); /* peach · items */ --pal-03: oklch(0.86 0.090 95); --pal-03-edge: oklch(0.58 0.110 95); /* sand · interactions */ --pal-04: oklch(0.86 0.090 130); --pal-04-edge: oklch(0.55 0.110 130); /* moss · condtrigs */ --pal-05: oklch(0.84 0.085 165); --pal-05-edge: oklch(0.52 0.090 165); /* sage · condrules */ --pal-06: oklch(0.84 0.085 200); --pal-06-edge: oklch(0.50 0.090 200); /* mist · slots */ --pal-07: oklch(0.84 0.085 235); --pal-07-edge: oklch(0.50 0.100 235); /* sky · loot */ --pal-08: oklch(0.83 0.085 270); --pal-08-edge: oklch(0.50 0.100 270); /* periwinkle · lifeevents */ --pal-09: oklch(0.83 0.085 300); --pal-09-edge: oklch(0.50 0.100 300); /* lilac · installables */ --pal-10: oklch(0.84 0.085 330); --pal-10-edge: oklch(0.50 0.100 330); /* mauve · rooms */ --pal-11: oklch(0.83 0.075 0); --pal-11-edge: oklch(0.50 0.090 0); /* dusty pink · condowners */ --pal-12: oklch(0.86 0.040 90); --pal-12-edge: oklch(0.55 0.050 90); /* parchment · everything else */ /* === semantic accents · reserved, never used for folders === */ --accent-banner-bg: oklch(0.93 0.040 240); --accent-banner-edge: oklch(0.40 0.150 240); --accent-mismatch-bg: oklch(0.91 0.010 90); --accent-mismatch-edge: var(--ink-3); --accent-callout-bg: oklch(0.93 0.070 90); --accent-callout-edge: var(--ink); /* === fonts === */ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-ui: "Lexend", "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-hand: "Caveat", "Comic Sans MS", cursive; /* === type scale · base 14, ratio 1.2 === */ --fs-1: 10px; --fs-2: 11px; --fs-3: 12px; --fs-4: 13px; --fs-5: 14px; --fs-6: 17px; --fs-7: 20px; --fs-8: 24px; --fs-9: 32px; /* === spacing · 4-base, 8 steps === */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* === radii / borders / shadow === */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-pill: 999px; --bw: 1.5px; /* default border weight */ --bw-2: 2px; --shadow-1: 2px 2px 0 var(--line); --shadow-2: 3px 3px 0 var(--line); --shadow-3: 4px 4px 0 var(--line); /* dark-only tokens · null in light mode, declared so refs don't break */ --plasma: transparent; --rust: var(--ink-3); --rust-edge: var(--ink-2); } /* ============================================================ Legacy tokens (pre-hifi). Existing components still consume these; migrating components reach for the hifi tokens above. In dark mode (data-theme="dark") the [data-theme="dark"] block below redefines these to alias the hifi tokens, so unmigrated components inherit the hifi vocabulary without per-rule edits. ============================================================ */ :root { --bg: #1a1d23; --bg-elev: #242830; --fg: #e6e6e6; --muted: #8a8f99; --accent: #6cb4ff; --accent-dim: #4a85c2; --border: #353a44; --warn: #d9a73a; --bad: #d95e5e; } /* ============================================================ DARK THEME · Industrial cyberpunk (hifi tokens) ------------------------------------------------------------ cold hydraulic blues; warning amber as primary action color; plasma cyan rationed (ONE live readout per page); rust patina decorative only, never interactive; condensation-white ink. ============================================================ */ [data-theme="dark"] { --paper: #14171b; --paper-2: #1c2026; --paper-3: #252a31; --ink: #C4CDD4; --ink-2: #8a96a1; --ink-3: #5a6571; --line: #2d333b; --rule: #2d333b; --note: #c0392b; --pal-01: oklch(0.32 0.045 30); --pal-01-edge: oklch(0.58 0.080 30); --pal-02: oklch(0.33 0.045 60); --pal-02-edge: oklch(0.60 0.080 60); --pal-03: oklch(0.34 0.045 95); --pal-03-edge: oklch(0.62 0.080 95); --pal-04: oklch(0.34 0.045 130); --pal-04-edge: oklch(0.60 0.075 130); --pal-05: oklch(0.33 0.045 165); --pal-05-edge: oklch(0.58 0.070 165); --pal-06: oklch(0.33 0.050 200); --pal-06-edge: oklch(0.60 0.080 200); --pal-07: oklch(0.33 0.050 235); --pal-07-edge: oklch(0.60 0.080 235); --pal-08: oklch(0.33 0.050 270); --pal-08-edge: oklch(0.60 0.080 270); --pal-09: oklch(0.33 0.045 300); --pal-09-edge: oklch(0.60 0.075 300); --pal-10: oklch(0.33 0.045 330); --pal-10-edge: oklch(0.60 0.075 330); --pal-11: oklch(0.32 0.040 0); --pal-11-edge: oklch(0.58 0.070 0); --pal-12: oklch(0.32 0.025 90); --pal-12-edge: oklch(0.55 0.045 90); --accent-banner-bg: #18222b; --accent-banner-edge: #4a7a96; --accent-mismatch-bg: #1a1d21; --accent-mismatch-edge: #4a5560; --accent-callout-bg: #2a1f0a; --accent-callout-edge: #d18a2c; --plasma: #38e0e6; --plasma-glow: 0 0 8px rgba(56,224,230,0.55), 0 0 1px rgba(56,224,230,0.9); --amber: #d18a2c; --amber-soft: #b97a25; --rust: #8a4a2e; --rust-edge: #6b3a23; --shadow-1: 0 1px 0 #000, 0 0 0 1px #2d333b; --shadow-2: 0 2px 0 #000, 0 0 0 1px #2d333b; --shadow-3: 0 0 0 1.5px #2d333b, 0 4px 0 rgba(0,0,0,0.6); /* Legacy-token aliases — point the pre-hifi tokens at their hifi equivalents so unmigrated components inherit the hifi vocabulary without per-rule edits. Removes the slight visual mismatch between migrated components (--paper #14171b) and legacy ones (--bg #1a1d23). Companion light-mode aliases live in [data-theme="light"] below so flipping the toggle doesn't strand legacy components on dark hex values atop a paper bg. */ --bg: var(--paper); --bg-elev: var(--paper-2); --fg: var(--ink); --muted: var(--ink-3); --border: var(--line); --accent: var(--accent-banner-edge); --accent-dim: var(--ink-2); --warn: var(--accent-callout-edge); --bad: #d95e5e; color-scheme: dark; } /* ============================================================ LIGHT THEME · paper-and-ink vocabulary (hifi default values) ------------------------------------------------------------ The hifi :root block defines the light-mode hifi tokens already (--paper #f4f1ea, --ink #1a1a1a, etc.). This block exists to alias the legacy --bg/--fg/--accent/etc. tokens to their light-mode equivalents so unmigrated components don't render dark text on dark bg over a cream paper page when the user toggles to light. ============================================================ */ [data-theme="light"] { --bg: var(--paper); --bg-elev: var(--paper-2); --fg: var(--ink); --muted: var(--ink-3); --border: var(--rule); --accent: var(--accent-banner-edge); --accent-dim: var(--ink-2); --warn: oklch(0.55 0.150 80); --bad: var(--note); color-scheme: light; } /* ============================================================ Theme toggle button · injected by theme-toggle.js into
============================================================ */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--paper); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r-pill); padding: 0.2rem 0.65rem; font-family: inherit; font-size: 0.75rem; cursor: pointer; transition: background 0.1s, color 0.1s, border-color 0.1s; } .theme-toggle:hover { background: var(--paper-2); } .theme-toggle:focus-visible { outline: 2px solid var(--accent-callout-edge); outline-offset: 2px; } .theme-toggle .glyph { font-size: 0.95rem; line-height: 1; } .theme-toggle .label { letter-spacing: 0.02em; } /* ============================================================ PRINT · suppress chrome, force monochrome on folder colors ------------------------------------------------------------ The page prints as a research-doc snapshot of one detail page. - topbar / tabs / folder rail / theme toggle / search dropdown are interactive chrome and add nothing to a printed reference; suppressed. - folder colors reduce to grayscale, but the .detail-head edge and .folder-badge border-left thickness stay (HANDOFF rule: "color is never sole carrier of meaning"). Black ink stripes still distinguish kinds. - Force light vocabulary regardless of toggle so prints land on paper-readable values; user-toggle only affects screen. - Page-break: avoid splitting a detail-head, refs-block group, or the thresh-panel mid-card. ============================================================ */ @media print { :root, [data-theme="dark"], [data-theme="light"] { --paper: #ffffff; --paper-2: #ffffff; --paper-3: #f3f3f3; --ink: #000000; --ink-2: #333333; --ink-3: #666666; --line: #000000; --rule: #999999; --bg: #ffffff; --bg-elev: #ffffff; --fg: #000000; --muted: #555555; --border: #999999; --accent: #000000; --accent-banner-bg: #ffffff; --accent-banner-edge: #000000; --accent-mismatch-bg: #ffffff; --accent-mismatch-edge: #555555; --accent-callout-bg: #ffffff; --accent-callout-edge: #000000; --warn: #000000; --bad: #000000; } html, body { background: #ffffff; color: #000000; } /* suppress interactive chrome */ header, #tabs, aside#folders, .copy-ref, .explainer-dismiss, .strtype-dispatch-trigger, .strtype-dispatch-close, .filter-pills, .theme-toggle, #search-results, .meta-chip { display: none !important; } /* main content takes full width */ main { display: block !important; } section#detail { padding: 0; overflow: visible; } /* folder edges drop to black; edge thickness still distinguishes kinds */ .detail-head { border-left-color: #000 !important; } .folder-badge { border-left-color: #000 !important; --badge-color: #000 !important; } .strtype-badge { border-color: #000 !important; } /* page-break hygiene */ .detail-head, .prefix-explainer, .folder-mismatch-note, .edit-this-callout, .thresh-panel { page-break-inside: avoid; } .refs-block .group { page-break-inside: avoid; } h2, h3 { page-break-after: avoid; } /* hide the trailing crumb-style hover help cursor */ * { cursor: default !important; } /* ensure links print as-rendered (no underline-on-print accidents) */ a { color: inherit; text-decoration: none; } a[href^="#/"]::after { content: ""; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.5; height: 100%; } body { display: flex; flex-direction: column; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; } /* ─── header ───────────────────────────────────────────────── */ header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 0.75rem 1.25rem; background: var(--paper-2); border-bottom: var(--bw) solid var(--ink-2); flex: 0 0 auto; } header h1 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); } .status { margin: 0; color: var(--ink-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; white-space: nowrap; } /* ─── search ───────────────────────────────────────────────── */ .search-wrap { position: relative; max-width: 480px; width: 100%; justify-self: stretch; } #search { width: 100%; padding: 0.4rem 0.75rem; background: var(--paper); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r-1); font-size: 0.875rem; font-family: inherit; } #search:focus { outline: 2px solid var(--accent-callout-edge); outline-offset: 2px; border-color: var(--ink); } #search::placeholder { color: var(--ink-3); } /* Search-scope filter row — three checkboxes (glossary / strName / description) plus a folder combo. Sits directly under the input; results dropdown still anchors to the wrap so it doesn't overlap. Keep it visually quiet — it's metadata about the next search, not the search itself. */ .search-filters { display: flex; flex-wrap: wrap; gap: 0.4rem 0.85rem; align-items: center; margin-top: 0.3rem; font-size: 0.75rem; color: var(--ink-2); } .search-filters label { display: inline-flex; align-items: center; gap: 0.2rem; cursor: pointer; user-select: none; } .search-filters input[type=checkbox] { margin: 0; vertical-align: middle; } .search-filters .folder-filter { margin-left: auto; gap: 0.3rem; } .search-filters select { background: var(--paper); color: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r-1); padding: 0.1rem 0.35rem; font-size: 0.75rem; font-family: inherit; max-width: 180px; } #search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 360px; overflow-y: auto; margin: 0; padding: 0.25rem 0; list-style: none; background: var(--paper-2); border: var(--bw) solid var(--ink); border-radius: var(--r-1); box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 10; } #search-results li { padding: 0.3rem 0.75rem; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; } #search-results li:hover, #search-results li.active { background: var(--paper-3); } #search-results .name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #search-results .folder { color: var(--ink-3); font-size: 0.75rem; } #search-results .empty { color: var(--ink-3); font-style: italic; cursor: default; text-align: center; } /* UX 1.1 — glossary cards in the search dropdown. Distinct from strName-match rows: full-width block instead of name|folder line. Uses the *banner* semantic accent (pedagogical context — "this is a concept, not an object") per HANDOFF "Semantic accents". */ #search-results li.glossary-card { display: block; padding: 0.55rem 0.75rem; border-left: 3px solid var(--accent-banner-edge); background: var(--accent-banner-bg); margin: 0.15rem 0; } #search-results li.glossary-card:hover { background: var(--paper-3); } #search-results .glossary-card .card-head { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.2rem; } #search-results .glossary-card .card-label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-banner-edge); border: 1px solid var(--accent-banner-edge); border-radius: var(--r-1); padding: 0 0.25rem; } #search-results .glossary-card .card-name { font-size: 0.875rem; font-weight: 600; color: var(--ink); } #search-results .glossary-card .card-summary { font-size: 0.8125rem; color: var(--ink); line-height: 1.4; margin-bottom: 0.3rem; } #search-results .glossary-card .card-cta { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; } #search-results .glossary-card .cta-label { color: var(--ink-3); margin-right: 0.25rem; } #search-results .glossary-card .card-cta .folder { color: var(--ink-3); } #search-results .glossary-card .card-cta .name { color: var(--accent-banner-edge); font-weight: 500; } #search-results .glossary-card .hint-line, #search-results .glossary-card .wiki { display: block; font-size: 0.75rem; color: var(--ink-3); margin-top: 0.2rem; font-style: italic; } /* ─── tabs ─────────────────────────────────────────────────── */ /* Page tabs · hifi treatment per HANDOFF "Page shell" - Active tab inverts to body (--paper) bg, with bottom-border the same paper color so it visually "fuses" into the page below. - Inactive tabs sit on the recessed panel (--paper-2) with --ink-3 text. - Active indicator color is amber in dark mode (matches the focus-ring and callout vocabulary). */ #tabs { display: flex; gap: 0; background: var(--paper-2); border-bottom: var(--bw) solid var(--ink-2); padding: 0 1rem; flex: 0 0 auto; } #tabs a { color: var(--ink-3); padding: 0.5rem 0.9rem; border-bottom: 2px solid transparent; font-size: 0.8125rem; cursor: help; /* hover-tooltip on each tab — modder-pov blurb in title */ text-decoration: none; white-space: nowrap; } #tabs a:hover { color: var(--ink); background: var(--paper-3); text-decoration: none; } #tabs a.active { color: var(--ink); background: var(--paper); border-bottom-color: var(--paper); cursor: default; position: relative; font-weight: 600; } [data-theme="dark"] #tabs a.active::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent-callout-edge); } /* page-intro blurb that appears at the top of each non-Explorer page */ .page-blurb { background: rgba(108, 180, 255, 0.07); border-left: 2px solid var(--accent-dim); padding: 0.6rem 0.85rem; margin: 0 0 1.25rem; font-size: 0.8125rem; color: var(--fg); border-radius: 0 3px 3px 0; } .page-blurb strong { color: var(--accent); } .page-blurb code { background: var(--bg-elev); padding: 0.05em 0.3em; border-radius: 2px; } /* ─── main layout ──────────────────────────────────────────── */ main { display: grid; grid-template-columns: 240px 1fr; flex: 1 1 auto; min-height: 0; } aside#folders { background: var(--bg-elev); border-right: 1px solid var(--border); overflow-y: auto; padding: 0.75rem 0; } #folders h2 { margin: 0 1rem 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } #folder-list { list-style: none; margin: 0; padding: 0; } #folder-list li { padding: 0.25rem 1rem; cursor: pointer; display: flex; align-items: center; gap: 0.55rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; } #folder-list li .folder-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } #folder-list li:hover { background: var(--paper-3); } #folder-list li.active { background: var(--paper-3); color: var(--ink); font-weight: 600; } #folder-list .count { color: var(--muted); } /* Hi-fi folder swatch — 9px square that picks up the fNN palette of the row. In dark mode the prototype uses the *light-mode* L≈0.84 fills so the rail reads like a strip of indicator lights against the dark ground (the "indicator-light strip" pattern, the only place the dark override inverts). Falls back to var(--pal-NN) (the dim L≈0.32 fill) if the user ever switches to light mode. */ #folder-list li .swatch { width: 9px; height: 9px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.7); background: var(--badge-color, var(--muted)); flex: none; } #folder-list li.f01 .swatch { background: oklch(0.84 0.085 30); } #folder-list li.f02 .swatch { background: oklch(0.84 0.085 60); } #folder-list li.f03 .swatch { background: oklch(0.86 0.090 95); } #folder-list li.f04 .swatch { background: oklch(0.86 0.090 130); } #folder-list li.f05 .swatch { background: oklch(0.84 0.085 165); } #folder-list li.f06 .swatch { background: oklch(0.84 0.085 200); } #folder-list li.f07 .swatch { background: oklch(0.84 0.085 235); } #folder-list li.f08 .swatch { background: oklch(0.83 0.085 270); } #folder-list li.f09 .swatch { background: oklch(0.83 0.085 300); } #folder-list li.f10 .swatch { background: oklch(0.84 0.085 330); } #folder-list li.f11 .swatch { background: oklch(0.83 0.075 0); } #folder-list li.f12 .swatch { background: oklch(0.86 0.040 90); } #folder-list li .swatch { box-shadow: 0 0 4px rgba(255,255,255,0.05); } /* PLAN-AST synthetic-folder section — visually separated from data folders. Heading is non-clickable (no hover), borrowing the upper-aside heading styling so it reads as a sub-header inside the same scrolling list. */ #folder-list .folder-section-heading { margin: 0.75rem 0 0.25rem; padding: 0.4rem 1rem 0.25rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); cursor: help; border-top: 1px solid var(--border); background: transparent; pointer-events: auto; } #folder-list .folder-section-heading:hover { background: transparent; } /* ─── detail panel ─────────────────────────────────────────── */ section#detail { overflow-y: auto; padding: 1.5rem 2rem; } .hint { color: var(--muted); } .detail-head { position: relative; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 1rem; /* hifi: 6px folder-edge applied via .detail-head.fNN below; the page identity at a glance, locked to the frequency-ranked palette. The base rule reserves the inset so non-fNN heads (schema overview, coverage, etc.) line up with folder-scoped heads. */ padding-left: 0.85rem; border-left: 6px solid transparent; } .detail-head.f01 { border-left-color: var(--pal-01-edge); } .detail-head.f02 { border-left-color: var(--pal-02-edge); } .detail-head.f03 { border-left-color: var(--pal-03-edge); } .detail-head.f04 { border-left-color: var(--pal-04-edge); } .detail-head.f05 { border-left-color: var(--pal-05-edge); } .detail-head.f06 { border-left-color: var(--pal-06-edge); } .detail-head.f07 { border-left-color: var(--pal-07-edge); } .detail-head.f08 { border-left-color: var(--pal-08-edge); } .detail-head.f09 { border-left-color: var(--pal-09-edge); } .detail-head.f10 { border-left-color: var(--pal-10-edge); } .detail-head.f11 { border-left-color: var(--pal-11-edge); } .detail-head.f12 { border-left-color: var(--pal-12-edge); } .detail-head .copy-ref { position: absolute; top: 0; right: 0; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 3px; padding: 0.15rem 0.5rem; font-size: 0.7rem; font-family: inherit; cursor: pointer; } .detail-head .copy-ref:hover { color: var(--fg); border-color: var(--accent-dim); } .detail-head .copy-ref.copied { color: var(--accent); border-color: var(--accent); } .detail-head .crumbs { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; } .detail-head h2 { margin: 0 0 0.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.125rem; word-break: break-all; } .detail-head .file { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; } .refs-block { margin-top: 1.25rem; } .refs-block h3 { font-size: 0.875rem; margin: 0 0 0.5rem; color: var(--fg); font-weight: 600; } .refs-block .group { margin-bottom: 0.75rem; } .refs-block .group-head { color: var(--muted); font-size: 0.8125rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-bottom: 0.25rem; cursor: help; /* signal that hovering shows the description tooltip */ } .refs-block .group-head .desc { /* hover-only field description; surfaced via a separate tooltip rule */ } .refs-block ul { list-style: none; padding: 0; margin: 0; } .refs-block li { padding: 0.2rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; display: flex; gap: 0.5rem; align-items: baseline; } .refs-block .field { color: var(--muted); } .refs-block .arrow { color: var(--muted); } .refs-block .meta { color: var(--warn); font-size: 0.75rem; } .refs-block .dangling { color: var(--bad); font-style: italic; } .refs-block .empty { color: var(--muted); font-style: italic; padding: 0.25rem 0; } /* UX 1.2 — per-prefix explainer banner. Dismissible, sits above the Fields block. Tone is "about this kind of thing", not "here's what to do" — that distinction matters for the visual hierarchy on a busy detail page. Maps to the hifi *banner* semantic accent (pedagogical context, coolant blue in dark mode). See HANDOFF "Semantic accents". */ .prefix-explainer { position: relative; margin: 0.6rem 0 0.4rem; padding: 0.6rem 2rem 0.7rem 0.85rem; background: var(--accent-banner-bg); border: 1px solid var(--border); border-left: 3px solid var(--accent-banner-edge); border-radius: 4px; font-size: 0.875rem; line-height: 1.45; } .prefix-explainer .explainer-title { font-weight: 600; color: var(--accent-banner-edge); margin-bottom: 0.25rem; } .prefix-explainer .explainer-body { color: var(--fg); } .prefix-explainer .explainer-wiki { display: inline-block; margin-top: 0.4rem; font-size: 0.75rem; color: var(--muted); } .prefix-explainer .explainer-wiki:hover { color: var(--fg); } .prefix-explainer .explainer-dismiss { position: absolute; top: 0.25rem; right: 0.4rem; background: none; border: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; } .prefix-explainer .explainer-dismiss:hover { color: var(--fg); } /* UX 1.4 — derived "Modifies thresholds of this" panel. Sits between the Fields block and the code-refs block. Visually distinct from the regular refs panel — this is a *derived* relationship from a name pattern, not a real schema-driven edge, so the panel-blurb explains it. */ .thresh-panel { margin-top: 1.25rem; padding: 0.55rem 0.75rem 0.65rem; border: 1px solid var(--border); border-left: 3px solid var(--accent-banner-edge); border-radius: 0 4px 4px 0; background: var(--accent-banner-bg); } .thresh-panel h3 { font-size: 0.875rem; margin: 0 0 0.3rem; color: var(--accent); font-weight: 600; } .thresh-panel .panel-blurb { margin: 0 0 0.4rem; font-size: 0.8125rem; color: var(--muted); line-height: 1.4; } .thresh-panel ul { list-style: none; margin: 0; padding: 0; } .thresh-panel li { padding: 0.2rem 0; display: flex; gap: 0.5rem; align-items: baseline; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; } .thresh-panel .thresh-incount, .thresh-panel .thresh-meta { color: var(--muted); font-size: 0.75rem; } .thresh-panel .thresh-overflow { font-style: italic; color: var(--muted); } .thresh-panel.thresh-empty { border-left-color: var(--accent-callout-edge); background: var(--accent-callout-bg); } .thresh-panel.thresh-empty h3 { color: var(--warn); } /* UX 1.8 — strType dispatch trigger + popover. Trigger is the small `?` next to a strType value in the Fields block. Click pops a table mapping each strType value to the folder Loot routes through. */ .strtype-dispatch-trigger { display: inline-block; margin-left: 0.4rem; background: rgba(108,180,255,0.12); border: 1px solid rgba(108,180,255,0.25); color: var(--accent); padding: 0 0.35rem; border-radius: 50%; font-size: 0.7rem; font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1.2; } .strtype-dispatch-trigger:hover { background: rgba(108,180,255,0.25); } .strtype-dispatch { display: block; position: relative; margin: 0.4rem 0; padding: 0.6rem 0.85rem 0.7rem; background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 4px; max-width: 42rem; box-shadow: 0 6px 18px rgba(0,0,0,0.3); font-family: inherit; font-size: 0.8125rem; } .strtype-dispatch .primer-title { font-weight: 600; color: var(--accent); margin-bottom: 0.4rem; } .strtype-dispatch table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; } .strtype-dispatch th, .strtype-dispatch td { text-align: left; padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--border); vertical-align: top; } .strtype-dispatch th { color: var(--muted); font-weight: 500; font-size: 0.75rem; } .strtype-dispatch td code { background: rgba(108,180,255,0.10); color: var(--accent); padding: 0 0.2rem; border-radius: 2px; } .strtype-dispatch .active-row { background: rgba(108,180,255,0.08); } .strtype-dispatch .active-row td { font-weight: 500; } .strtype-dispatch-close { position: absolute; top: 0.25rem; right: 0.4rem; background: none; border: none; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; } .strtype-dispatch-close:hover { color: var(--fg); } /* UX 1.10 — "Edit this" callout. Strongest visual emphasis on the page when it appears: the modder came here to do an edit, this is the destination not the journey. Maps to the hifi *callout* semantic accent (primary action, amber edge in dark, hard ink shadow in light). The amber-on-dark copy-path button is the single point of brightest visual emphasis in dark mode — don't compete with it. See HANDOFF "Semantic accents". */ .edit-this-callout { margin: 0.6rem 0 0.8rem; padding: 0.65rem 0.9rem 0.7rem; background: var(--accent-callout-bg); border: 1px solid var(--accent-callout-edge); border-left: 4px solid var(--accent-callout-edge); border-radius: 4px; font-size: 0.875rem; line-height: 1.45; } .edit-this-callout .callout-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; } .edit-this-callout .callout-label { font-weight: 600; color: var(--accent-callout-edge); font-size: 0.95rem; } .edit-this-callout .callout-copy-path { background: var(--accent-callout-edge); border: 1px solid var(--accent-callout-edge); color: var(--paper); border-radius: 3px; padding: 0.1rem 0.55rem; font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: inherit; } .edit-this-callout .callout-copy-path:hover { background: #e89a3a; border-color: #e89a3a; box-shadow: 0 0 12px rgba(209,138,44,0.4); } .edit-this-callout .callout-copy-path.copied { background: var(--good, #aed581); border-color: var(--good, #aed581); color: var(--paper); } .edit-this-callout .callout-body { color: var(--fg); margin-bottom: 0.35rem; } .edit-this-callout .callout-body code { background: rgba(0,0,0,0.25); padding: 0 0.25rem; border-radius: 2px; font-size: 0.8125rem; } .edit-this-callout .callout-steps { margin: 0; padding-left: 1.1rem; color: var(--fg); } .edit-this-callout .callout-steps li { padding: 0.1rem 0; } .edit-this-callout .callout-steps code { background: rgba(0,0,0,0.25); padding: 0 0.2rem; border-radius: 2px; font-size: 0.8125rem; } .edit-this-callout + .callout-sub { margin: -0.55rem 0 0.6rem; padding: 0.4rem 0.9rem; background: var(--accent-callout-bg); border: 1px solid var(--accent-callout-edge); border-top: 0; border-radius: 0 0 4px 4px; font-size: 0.8125rem; color: var(--ink-2); font-style: italic; opacity: 0.85; } /* UX 1.9 — folder-mismatch inline note. Maps to the hifi *mismatch* semantic accent (neutral observation, dashed gunmetal in dark). Use when the data has a quirk worth flagging (comma suffix, prefix↔folder mismatch, synthesized strType) — never alarming, never instructive, "fwiw, this is what's going on." Dashed border distinguishes it from the solid-bordered banner so kind reads at a glance. */ .folder-mismatch-note { margin: 0.4rem 0 0.6rem; padding: 0.5rem 0.75rem; background: var(--accent-mismatch-bg); border: 1px dashed var(--accent-mismatch-edge); border-radius: 3px; font-size: 0.8125rem; line-height: 1.4; color: var(--ink); font-style: italic; } .folder-mismatch-note strong { display: block; color: var(--ink); margin-bottom: 0.15rem; font-style: normal; } .folder-mismatch-note code { font-size: 0.75rem; background: rgba(196,205,212,0.08); padding: 0 0.25rem; border-radius: 2px; font-style: normal; } /* UX 1.5 — folder badge: stable per-folder color via fNN class set in JS. Pill shape with a colored left bar so the visual works on its own AND combines with text label for accessibility (color is never sole carrier of meaning). The fNN→pal-NN-edge mapping is the hifi frequency-ranked palette (v0.18.2); folders past the top 11 fall through to f12 parchment. See notes/design/hifi-prototype/HANDOFF.md "Folder palette doctrine". */ .folder-badge { display: inline-block; border-left: 3px solid var(--badge-color, var(--muted)); background: rgba(255,255,255,0.04); color: var(--fg); padding: 0 0.4rem 0 0.35rem; border-radius: 2px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; margin-right: 0.05rem; } .folder-badge.f01 { --badge-color: var(--pal-01-edge); } .folder-badge.f02 { --badge-color: var(--pal-02-edge); } .folder-badge.f03 { --badge-color: var(--pal-03-edge); } .folder-badge.f04 { --badge-color: var(--pal-04-edge); } .folder-badge.f05 { --badge-color: var(--pal-05-edge); } .folder-badge.f06 { --badge-color: var(--pal-06-edge); } .folder-badge.f07 { --badge-color: var(--pal-07-edge); } .folder-badge.f08 { --badge-color: var(--pal-08-edge); } .folder-badge.f09 { --badge-color: var(--pal-09-edge); } .folder-badge.f10 { --badge-color: var(--pal-10-edge); } .folder-badge.f11 { --badge-color: var(--pal-11-edge); } .folder-badge.f12 { --badge-color: var(--pal-12-edge); } /* UX 1.5 — strType badge: monochrome dashed treatment per hifi spec. strTypes are a different axis from folders (engine dispatch, ~7 enum values), so they never compete with folder color. The dashed border is the visual distinguisher from the folder-badge solid edge — same kind of badge shape, different border style for at-a-glance kind. Selector is global so any badge anywhere on the page picks it up (matches the slice-2 broadening for .folder-badge). */ .strtype-badge { display: inline-block; background: var(--paper-2); color: var(--ink); border: var(--bw) dashed var(--ink-2); padding: 0 0.4rem; border-radius: var(--r-1); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; margin-right: 0.05rem; } /* UX 1.6 — filter pills row above ref panels. Maps to the hifi pill states (HANDOFF "Component contracts" .pill): default paper bg, ink border hover paper-2 bg active INVERTED — ink bg, paper text. Loudest "this filter is on" cue. focus 2px banner-edge outline (light) / amber (dark) clear dashed border, ink-2 text The strType italics flag is a content variant, not a state. */ .refs-block .filter-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.25rem 0 0.6rem; align-items: center; } .filter-pill { background: var(--paper); border: var(--bw) solid var(--ink); color: var(--ink); border-radius: var(--r-pill); padding: 0.1rem 0.6rem; font-size: 0.75rem; cursor: pointer; font-family: inherit; transition: background 0.1s, color 0.1s, border-color 0.1s, box-shadow 0.1s; } .filter-pill:hover { background: var(--paper-2); } .filter-pill:focus-visible { outline: 2px solid var(--accent-callout-edge); outline-offset: 2px; } .filter-pill.active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .filter-pill .pill-count { display: inline-block; margin-left: 0.3rem; opacity: 0.7; font-size: 0.7rem; } .filter-pill.strtype { font-style: italic; } .filter-pill.clear { color: var(--ink-2); border-style: dashed; background: transparent; } .filter-pill.clear:hover { background: var(--paper-2); color: var(--ink); } .filter-status { color: var(--ink-3); font-size: 0.75rem; margin-left: 0.4rem; } /* UX 1.7 — labeled DSL meta-chips. Render as small clickable tags within the per-edge metadata block; click pins a primer popover. */ .refs-block .meta-chip { display: inline-block; padding: 0 0.35rem; border-radius: 2px; background: rgba(255,210,128,0.10); color: var(--warn); font-size: 0.7rem; cursor: pointer; user-select: none; } .refs-block .meta-chip:hover { background: rgba(255,210,128,0.20); } .refs-block .meta-chip.dsl-condstring { background: rgba(108,180,255,0.10); color: var(--accent); } .refs-block .meta-chip.dsl-condstring:hover { background: rgba(108,180,255,0.22); } .refs-block .meta-chip.dsl-lootstring { background: rgba(155,225,120,0.10); color: #9ccc65; } .refs-block .meta-chip.dsl-lootstring:hover { background: rgba(155,225,120,0.22); } .refs-block .meta-chip.meta-verb { font-weight: 500; } .dsl-primer { display: block; position: relative; margin: 0.4rem 0; padding: 0.6rem 0.85rem 0.7rem; background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 4px; max-width: 38rem; font-family: inherit; font-size: 0.8125rem; box-shadow: 0 6px 18px rgba(0,0,0,0.3); } .dsl-primer .primer-title { font-weight: 600; color: var(--accent); margin-bottom: 0.25rem; } .dsl-primer .primer-example { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-bottom: 0.4rem; color: var(--fg); } .dsl-primer .primer-parts { list-style: none; padding: 0; margin: 0 0 0.5rem; } .dsl-primer .primer-parts li { padding: 0.1rem 0; line-height: 1.4; } .dsl-primer .primer-parts code { background: rgba(108,180,255,0.10); color: var(--accent); padding: 0 0.2rem; border-radius: 2px; } .dsl-primer .primer-desc { color: var(--muted); font-style: italic; } .dsl-primer .primer-tip { color: var(--muted); font-size: 0.75rem; line-height: 1.4; } .dsl-primer .dsl-primer-close { position: absolute; top: 0.25rem; right: 0.4rem; background: none; border: none; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; } .dsl-primer .dsl-primer-close:hover { color: var(--fg); } /* folder index */ .folder-index .meta { color: var(--muted); font-size: 0.8125rem; margin-bottom: 0.75rem; } .folder-index ul { list-style: none; padding: 0; margin: 0; } .folder-index li { padding: 0.15rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; display: flex; gap: 0.5rem; align-items: baseline; } .folder-index .ref-marker { width: 1.1rem; flex: 0 0 auto; text-align: center; font-size: 0.75rem; } .folder-index .ref-counts { color: var(--muted); font-size: 0.75rem; margin-left: auto; } /* ghost rules — in schema, not deserialized by game C# */ .ghost { color: var(--warn); font-style: italic; font-size: 0.75rem; } /* fields block on object detail page — scalar non-reference data */ .fields-block { margin-top: 1.25rem; } .fields-block h3 { font-size: 0.875rem; margin: 0 0 0.5rem; font-weight: 600; } .fields-block ul { list-style: none; padding: 0; margin: 0; } .fields-block li { padding: 0.15rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; } /* UX 1.3 — Fields block grew from one row per field (name + value) to two rows (name + value, optional inline description). Old `display: flex` on the li stacked everything horizontally; now the li is a vertical container and the `.field-line` child carries the original flex layout for name/value. */ .fields-block .field-line { display: flex; gap: 0.75rem; align-items: baseline; } .fields-block .field-name { color: var(--muted); min-width: 12em; flex: 0 0 auto; } .fields-block .field-name[title] { cursor: help; border-bottom: 1px dotted var(--border); } .fields-block .field-value { color: var(--fg); word-break: break-word; } .fields-block em.muted { color: var(--muted); font-style: italic; } /* Inline schema description below the field row. Sans-serif on purpose so the prose reads as prose, not as more code. Indented to line up with the value. */ .fields-block .field-desc { margin: 0.1rem 0 0.45rem 12.75em; color: var(--muted); font-style: italic; font-family: inherit; font-size: 0.8125rem; line-height: 1.4; } .fields-block.descriptions-hidden .field-desc { display: none; } .fields-block .fields-desc-toggle { margin-left: 0.6rem; font-size: 0.75rem; font-weight: 400; background: none; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 0.05rem 0.45rem; cursor: pointer; } .fields-block .fields-desc-toggle:hover { color: var(--fg); } /* Calculated field row (e.g. items/ "Num Rows" derived from sockets) — same * layout as a regular field-row but visually distinguished by a small f(x) * badge and a slightly muted background. */ .fields-block .field-row-calc { background: var(--row-alt, rgba(127,127,127,0.06)); } .fields-block .field-row-calc .calc-badge { display: inline-block; margin-left: 0.4rem; padding: 0 0.25rem; font-size: 0.65rem; font-family: var(--mono, ui-monospace, Menlo, monospace); color: var(--muted); border: 1px solid var(--border); border-radius: 3px; vertical-align: middle; } /* Item socket grid — items/ entries' aSocketAdds / aSocketForbids / * aSocketReqs rendered as labeled CSS grids. Body grid is nCols×nRows; halo * grids are (nCols+2)×(nRows+2) with the inner body region highlighted. */ .socket-block { --socket-cell: 28px; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); } .socket-block h4 { font-size: 0.85rem; margin: 0 0 0.4rem; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .socket-legend { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.6rem; } .socket-grids { display: flex; flex-wrap: wrap; gap: 1.2rem 1.5rem; } .socket-grid-fig { margin: 0; } .socket-grid-fig figcaption { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.25rem; font-family: var(--mono, ui-monospace, Menlo, monospace); } .socket-grid-fig .socket-dim { margin-left: 0.4rem; color: var(--muted); opacity: 0.75; } .socket-grid { display: grid; gap: 2px; background: var(--border); padding: 2px; border-radius: 3px; width: fit-content; } .socket-cell { width: var(--socket-cell); height: var(--socket-cell); display: flex; align-items: center; justify-content: center; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 0.62rem; background: var(--bg); color: var(--fg); user-select: none; border-radius: 1px; overflow: hidden; } .socket-cell.socket-blank { background: var(--bg-alt, rgba(127,127,127,0.08)); color: transparent; } .socket-cell.socket-add { background: rgba( 80,160, 80, 0.30); color: var(--fg); } .socket-cell.socket-forbid { background: rgba(200, 80, 80, 0.30); color: var(--fg); } .socket-cell.socket-req { background: rgba( 80,120,200, 0.30); color: var(--fg); } .socket-cell.socket-other { background: rgba(180,140, 60, 0.28); color: var(--fg); } .socket-cell.socket-inner { outline: 1px dashed var(--accent, #88a); outline-offset: -2px; } /* code-refs block — hardcoded string literals found in decomp */ .code-refs-block { margin-top: 1.25rem; } .code-refs-block h3 { font-size: 0.875rem; margin: 0 0 0.5rem; font-weight: 600; } .code-refs-block .muted-note { color: var(--muted); font-weight: 400; font-size: 0.75rem; } .code-refs-block ul { list-style: none; padding: 0; margin: 0; } .code-refs-block li { margin-bottom: 0.5rem; } .code-refs-block .code-loc { display: block; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; margin-bottom: 0.15rem; } .code-refs-block .code-line, .code-out .code-line { margin: 0; padding: 0.4rem 0.65rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; white-space: pre-wrap; word-break: break-all; } .code-refs-block .code-source { margin-bottom: 0.25rem; font-size: 0.85rem; } .code-refs-block .code-source .muted { color: var(--muted); font-size: 0.75rem; } /* Phase 3.1C — multi-edge sibling group inside the data-side Code references block (mirrors .code-out-group). Same labeled-header treatment. */ .code-refs-block .code-refs-group { padding: 0.4rem 0.65rem; margin-top: 0.35rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 3px; } .code-refs-block .code-refs-group .group-head { font-size: 0.8rem; margin-bottom: 0.25rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .code-refs-block .code-refs-group .group-head code { color: var(--fg); background: transparent; } .code-refs-block .code-refs-group .meta { color: var(--muted); font-size: 0.75rem; } /* Coverage-misses block — visually distinct (warning hue) so the safety-net nature is obvious. Mirrors the .code-refs-block sizing for familiarity. */ .cov-misses-block { margin-top: 1.25rem; padding: 0.6rem 0.75rem; background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid #d39a2a; border-radius: 3px; } .cov-misses-block h3 { font-size: 0.875rem; margin: 0 0 0.5rem; font-weight: 600; } .cov-misses-block .muted-note { color: var(--muted); font-weight: 400; font-size: 0.75rem; display: block; margin-top: 0.2rem; } .cov-misses-block .cov-miss-group { margin-top: 0.5rem; } .cov-misses-block .cov-miss-field { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.2rem; } .cov-misses-block .cov-miss-field code { color: var(--fg); background: transparent; } .cov-misses-block ul { list-style: none; padding: 0; margin: 0 0 0 0.75rem; } .cov-misses-block li { font-size: 0.8rem; margin-bottom: 0.15rem; } .cov-misses-block li code { background: transparent; color: var(--fg); } .cov-misses-block .muted { color: var(--muted); font-size: 0.75rem; } /* code-method / code-class detail page — outgoing literal listing */ .code-out { list-style: none; padding: 0; margin: 0; } .code-out > li { margin-bottom: 0.5rem; } .code-out .arrow { margin-right: 0.4rem; color: var(--muted); } .code-out .meta { color: var(--muted); font-size: 0.75rem; } /* Phase 1.1 — grouped sibling literals (array initializer entries, args of one call) collapse under one labeled header instead of N look-alike rows. */ .code-out-group { padding: 0.4rem 0.65rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 3px; } .code-out-group .group-head { font-size: 0.8rem; margin-bottom: 0.25rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .code-out-group .group-head code { color: var(--fg); background: transparent; } .code-out-group ul { list-style: none; padding: 0; margin: 0; } .code-out-group ul li { font-size: 0.8125rem; padding: 0.1rem 0; } /* code-component detail (PLAN-AST Phase 2) — in-port specs, cond-touch role groupings, condowner wiring listings */ .ports-list { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; } .ports-list > li { margin: 0.25rem 0; } .ports-list .port-index { display: inline-block; min-width: 2rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); } .ports-list .muted { color: var(--muted); font-size: 0.75rem; } .cond-role { margin-bottom: 0.75rem; } .cond-role h4 { margin: 0 0 0.25rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .cond-role ul { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; } .cond-role li { margin: 0.15rem 0; } .cond-role .meta { color: var(--muted); font-size: 0.75rem; } .wired-list { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; } .wired-list li { margin: 0.15rem 0; } .wired-list .meta { color: var(--muted); font-size: 0.75rem; margin-left: 0.5rem; } /* PLAN-AST Phase 3 — runtime ports + runtime-wired edges */ .runtime-ports-list .port-key { display: inline-block; min-width: 11rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--fg); } .player-wired-badge { display: inline-block; margin-left: 0.5rem; padding: 0 0.4rem; background: rgba(217,167,58,0.15); border: 1px solid var(--warn); color: var(--warn); border-radius: 2px; font-size: 0.7rem; cursor: help; } /* Dashed visual for runtime-wired graph edges (RuntimeWiresTo). The binding is either a static default in the guipropmap or player-set at runtime. */ .refs-block li.runtime-edge { border-left: 2px dashed var(--accent-dim); padding-left: 0.5rem; margin-left: -0.5rem; } .refs-block li.runtime-edge .arrow { color: var(--accent-dim); } /* dotted underline + help cursor on field-group headers when they have a tooltip */ .refs-block .group-head[title] { border-bottom: 1px dotted var(--border); display: inline-block; } /* alt-folder suffix on ref values — when a strName lives in multiple folders the suffix lists the alternates as clickable links. Sits next to the primary ref. Muted styling so it's a hint not the main signal. */ .alt-folders { color: var(--muted); font-size: 0.7rem; margin-left: 0.4em; cursor: help; } .alt-folders a.alt-folder { color: var(--muted); border-bottom: 1px dotted var(--border); } .alt-folders a.alt-folder:hover { color: var(--accent-dim); border-bottom-color: var(--accent-dim); text-decoration: none; } /* auto-detected refs (phase 2 detector) — schema doesn't yet cover these fields, but the value matches a known node in the candidate target folder. Visually distinct from schema-derived edges so users know the link is provisional and could be wrong. */ .fields-block a.auto-detected { color: var(--accent-dim); border-bottom: 1px dashed var(--accent-dim); } .fields-block a.auto-detected:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Schema-backed inline ref — distinct from auto-detect (no 🔍, solid underline, standard link color). Visual signal: this is a canonical schema reference, not a sampled guess. */ .fields-block a.schema-ref { color: var(--accent); border-bottom: 1px solid transparent; } .fields-block a.schema-ref:hover { border-bottom-color: var(--accent); } /* Search landing page — reached by pressing Enter on a query without picking a dropdown row. Two stacked sections: glossary cards on top, then strName matches grouped by folder with chip-style jump links. */ .search-landing-section { margin: 1rem 0 1.5rem; } .search-landing-section h3 { font-size: 1rem; margin: 0 0 0.6rem; } .search-landing-section h4 { font-size: 0.875rem; margin: 0.8rem 0 0.3rem; } .search-landing-glossary { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .search-landing-card { padding: 0.6rem 0.8rem; background: var(--paper-2); border: 1px solid var(--ink-3); border-left: 3px solid var(--accent); border-radius: var(--r-1); } .search-landing-card .g-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; } .search-landing-card .g-label { font-size: 0.7rem; text-transform: uppercase; color: var(--muted); letter-spacing: 0.05em; } .search-landing-card .g-name { font-weight: 600; } .search-landing-card .g-summary { font-size: 0.8125rem; color: var(--ink-2); margin-bottom: 0.3rem; } .search-landing-card .g-cta { font-size: 0.8125rem; } .search-landing-card .g-hint { font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; } .search-landing-folder-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.8rem; } .search-landing-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--ink-3); font-size: 0.75rem; color: var(--ink-2); text-decoration: none; } .search-landing-chip:hover { background: var(--paper-3); color: var(--ink); } .search-landing-chip .chip-count { font-weight: 600; color: var(--accent); } .search-landing-folder-group { margin: 0.4rem 0 0.6rem; } .search-landing-folder-group ul { list-style: none; padding: 0 0 0 0.3rem; margin: 0; } .search-landing-folder-group li { font-size: 0.8125rem; padding: 0.05rem 0; } .fields-block .folder-prefix { color: var(--muted); margin-right: 0.05em; } .fields-block .auto-badge { margin-left: 0.4em; font-size: 0.7em; opacity: 0.7; cursor: help; } /* health/coverage page — folders & detector findings */ .health-block { margin-top: 1.25rem; } .health-block h3 { font-size: 0.875rem; margin: 0 0 0.5rem; font-weight: 600; } .health-block table { width: 100%; border-collapse: collapse; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; } .health-block th, .health-block td { text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; } .health-block th { color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; } .health-block td.num { text-align: right; font-variant-numeric: tabular-nums; } .health-block td.bad { color: var(--bad); } .health-block td.warn { color: var(--warn); } .health-block tr.zero-edges td { background: rgba(217, 94, 94, 0.08); } .health-block .filter-row { margin: 0.5rem 0 0.75rem; font-size: 0.8125rem; color: var(--muted); } .health-block .filter-row label { margin-right: 1rem; cursor: pointer; } .health-block .targets-cell { font-size: 0.75rem; color: var(--muted); } .health-block .targets-cell strong { color: var(--fg); font-weight: 500; } .health-block .encoded-tag { display: inline-block; padding: 0 0.3em; margin-left: 0.3em; border-radius: 2px; background: rgba(217, 167, 58, 0.18); color: var(--warn); font-size: 0.7em; } /* templating block on detail pages — folder-wide template + per-object note */ .template-block { margin-top: 1.25rem; } .template-block h3 { font-size: 0.875rem; margin: 0 0 0.5rem; font-weight: 600; display: flex; align-items: baseline; gap: 0.5rem; } .template-block .head-actions { margin-left: auto; font-size: 0.75rem; } .template-block .head-actions button { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 3px; padding: 0.15rem 0.5rem; font-size: 0.75rem; cursor: pointer; font-family: inherit; margin-left: 0.25rem; } .template-block .head-actions button:hover { color: var(--fg); border-color: var(--accent-dim); } .template-block .rendered { padding: 0.5rem 0.75rem; background: var(--bg-elev); border-left: 2px solid var(--accent-dim); border-radius: 2px; white-space: pre-wrap; font-size: 0.875rem; line-height: 1.5; } .template-block .rendered.empty { color: var(--muted); font-style: italic; border-left-color: var(--border); } .template-block .editor { display: grid; grid-template-columns: 1fr 240px; gap: 0.5rem; } .template-block textarea { width: 100%; min-height: 9em; padding: 0.5rem 0.75rem; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; resize: vertical; } .template-block textarea:focus { outline: none; border-color: var(--accent-dim); } .template-block .legend { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.6rem; max-height: 16em; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; } .template-block .legend-title { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; } .template-block .legend ul { list-style: none; padding: 0; margin: 0; } .template-block .legend li { padding: 0.1rem 0; cursor: pointer; color: var(--accent-dim); } .template-block .legend li:hover { color: var(--accent); background: rgba(108,180,255,0.08); } .template-block .editor-actions { margin-top: 0.4rem; display: flex; gap: 0.4rem; } /* LLM-candidate page */ .llm-block { margin-top: 1.25rem; } .llm-block ul { list-style: none; padding: 0; margin: 0; } .llm-block li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; } .llm-block .ref-count { color: var(--warn); min-width: 4em; text-align: right; flex: 0 0 auto; } .llm-block .actions { margin-left: auto; display: flex; gap: 0.3rem; } .llm-block button { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 3px; padding: 0.15rem 0.5rem; font-size: 0.7rem; cursor: pointer; font-family: inherit; } .llm-block button:hover { color: var(--fg); border-color: var(--accent-dim); } .llm-block button.copied { color: var(--accent); border-color: var(--accent); } /* ─── Mode-aware sidebar (Tier-1 follow-up) ─────────────────── */ /* On schema/coverage/data-health/llm pages the folder rail is irrelevant — the page is global, not folder-scoped. Hide the aside entirely so the detail panel claims the full width. */ main[data-mode="nosidebar"] aside#folders { display: none; } main[data-mode="nosidebar"] section#detail { width: 100%; } /* In facets/plots modes the rail is repurposed as a clustered nav. Same structural CSS as the folder list (container width, spacing) but the contents are different. The shared .meta-sidebar-* classes below pick up wherever the heading + list need bespoke rules. */ .meta-sidebar-blurb { font-size: 0.72rem; color: var(--muted); margin: 0 0 0.5rem; line-height: 1.35; } .meta-sidebar-blurb code { font-size: 0.72rem; background: var(--paper-3); padding: 0 0.2rem; border-radius: 2px; } .meta-sidebar-list { list-style: none; margin: 0; padding: 0; } .meta-sidebar-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.18rem 0.4rem; font-size: 0.82rem; cursor: pointer; border-radius: 2px; } .meta-sidebar-row:hover { background: var(--paper-3); } .meta-sidebar-row .folder-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meta-sidebar-row .count { color: var(--muted); font-size: 0.7rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-left: 0.5rem; flex-shrink: 0; } .meta-sidebar-overflow { list-style: none; font-size: 0.7rem; color: var(--muted); font-style: italic; padding: 0.3rem 0.4rem 0; } .meta-sidebar-back { margin: 0.6rem 0 0; font-size: 0.72rem; } .meta-sidebar-back a { color: var(--accent); text-decoration: none; } .meta-sidebar-back a:hover { text-decoration: underline; } /* Scroll-flash: when the user clicks a sidebar cluster, briefly highlight the target section with a banner-edge tint so the eye can find the new position without bouncing. */ @keyframes scroll-flash-pulse { 0% { box-shadow: 0 0 0 2px var(--accent-banner-edge); } 100% { box-shadow: 0 0 0 0 transparent; } } .refs-block.scroll-flash { animation: scroll-flash-pulse 1.2s ease-out; } /* ─── Tier-1 meta pages: facets + plot beats ────────────────── */ /* Affordance row on object detail pages: small pill links to the matching facet / plot-beat aggregator. Tucked above the Edit-this callout so the first thing a modder sees is "this is part of something larger". */ .meta-page-links { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.6rem 0 0.4rem; } .meta-page-link { display: inline-block; padding: 0.18rem 0.55rem; border: 1px dashed var(--accent-banner-edge); border-radius: 4px; background: var(--accent-banner-bg); color: var(--accent); font-size: 0.78rem; font-weight: 500; text-decoration: none; transition: background 0.1s ease; } .meta-page-link:hover { background: var(--accent-banner-edge); color: var(--paper); border-style: solid; } /* Facet aggregator — stacked cards, one per folder the strName lives in. */ .facet-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.75rem; margin-top: 0.5rem; } .facet-card { border: 1px solid var(--border); border-left: 3px solid var(--badge-color, var(--accent)); border-radius: 4px; background: var(--paper-2); padding: 0.55rem 0.7rem 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; } .facet-card-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .facet-card-body { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font-size: 0.8125rem; } .facet-file { color: var(--muted); font-size: 0.75rem; word-break: break-all; } .facet-counts { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; white-space: nowrap; } .facet-open { margin-left: auto; font-size: 0.78rem; color: var(--accent); text-decoration: none; } .facet-open:hover { text-decoration: underline; } /* Unified-inbound block, grouped by source folder. */ .facet-inbound-folder { margin-top: 0.7rem; } .facet-inbound-folder h4 { font-size: 0.85rem; margin: 0 0 0.3rem; display: flex; align-items: center; gap: 0.4rem; } .facet-inbound-count { color: var(--muted); font-weight: 400; font-size: 0.75rem; } .facet-inbound-folder ul { list-style: none; margin: 0; padding: 0 0 0 0.4rem; border-left: 2px solid var(--paper-3); } .facet-inbound-folder li { padding: 0.2rem 0 0.2rem 0.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; } .facet-inbound-field { color: var(--muted); font-size: 0.75rem; } .facet-target-tag { display: inline-block; background: var(--paper-3); border: 1px solid var(--border); border-radius: 3px; padding: 0.05rem 0.35rem; font-size: 0.7rem; color: var(--ink-2); white-space: nowrap; } /* Facets index page — name list grouped by family. */ .facets-name-list { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 1.5rem; } .facets-name-list li { break-inside: avoid; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; padding: 0.15rem 0; display: flex; justify-content: space-between; gap: 0.5rem; } .facets-name-list .meta { color: var(--muted); font-size: 0.7rem; white-space: nowrap; } @media (max-width: 1100px) { .facets-name-list { columns: 2; } } @media (max-width: 700px) { .facets-name-list { columns: 1; } } /* Plot meta-page — bucket lists per surface. */ .plot-bucket-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 0.2rem 1rem; } .plot-bucket-list li { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; padding: 0.18rem 0; display: flex; align-items: baseline; gap: 0.4rem; } /* Plots index — table with per-surface column counts. */ .plots-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; margin-top: 0.4rem; } .plots-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--border); padding: 0.3rem 0.5rem; } .plots-table th[title] { cursor: help; } .plots-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--paper-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .plots-table td.num { text-align: right; } .plots-table tbody tr:hover { background: var(--paper-2); } .plots-table a { text-decoration: none; color: var(--accent); } .plots-table a:hover { text-decoration: underline; }