/* ArchMeta generated site — single hand-written stylesheet. */ :root { --bg: #fff; --panel: #fafbfc; --rule: #e3e6eb; --text: #222; --muted: #6a737d; --link: #1976d2; --sidebar-w: 280px; --top-h: 44px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: ui-monospace, Menlo, monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* --- Business / Full detail modes --------------------------------------- Business is the BASE: with no class on , technical markup is hidden. Written as :not(.detail-full) rather than as a pair of display rules on purpose — in Full mode `.tech-only` then carries NO display override at all, so each element keeps its own (.type-chip is inline-block, .element-id is block). A `display: revert` in the "on" state would flatten them to the user-agent default instead. */ html:not(.detail-full) .tech-only { display: none; } html.detail-full .business-only { display: none; } .detail-toggle { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; } .detail-btn { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; padding: 2px 10px; cursor: pointer; } .detail-btn.active { background: var(--link); color: #fff; } .top-strip { position: sticky; top: 0; z-index: 10; height: var(--top-h); display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--rule); } .top-title { font-weight: 600; color: var(--text); } .top-sep { color: var(--muted); } .top-build { color: var(--muted); font-size: 12px; } .top-link { margin-left: auto; font-size: 12px; } .layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: calc(100vh - var(--top-h)); } .sidebar { position: sticky; top: var(--top-h); align-self: start; height: calc(100vh - var(--top-h)); overflow-y: auto; padding: 16px 12px; border-right: 1px solid var(--rule); background: var(--panel); } .sidebar ul { list-style: none; margin: 0; padding-left: 14px; } .sidebar .root { padding-left: 0; } .sidebar .node { margin: 2px 0; } .sidebar .seg { font-weight: 600; color: var(--text); cursor: pointer; user-select: none; } .sidebar .seg::before { content: "▾ "; color: var(--muted); } .sidebar .seg.collapsed::before { content: "▸ "; } .sidebar .seg.collapsed + ul { display: none; } .sidebar .view-link { display: block; padding: 2px 0; color: var(--link); font-size: 13px; } .main-pane { padding: 20px 28px 60px 28px; max-width: 980px; } .main-pane h1 { font-size: 22px; margin: 0 0 6px 0; } .main-pane h2 { font-size: 17px; margin: 28px 0 8px 0; border-bottom: 1px solid var(--rule); padding-bottom: 4px; } .main-pane h3 { font-size: 15px; margin: 20px 0 6px 0; } .main-pane code { background: #eef1f5; padding: 1px 4px; border-radius: 3px; font-family: var(--mono); font-size: 12.5px; } .main-pane pre { background: #f6f8fa; padding: 10px 12px; border-radius: 4px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; } .main-pane .view-desc { color: var(--muted); margin: 4px 0 12px 0; } .main-pane .svg-wrap { margin: 12px 0 24px 0; border: 1px solid var(--rule); border-radius: 4px; background: #fafbfc; padding: 8px; overflow: auto; } .view-svg { width: 100%; max-height: 720px; display: block; cursor: zoom-in; } .svg-empty { padding: 32px; color: var(--muted); font-style: italic; text-align: center; } /* Diagram zoom modal — opened by clicking on any .view-svg. Background matches the normal .svg-wrap so the diagram visually expands into a full-viewport version of itself. */ .dz-overlay { position: fixed; inset: 0; background: var(--panel); display: none; z-index: 1000; } .dz-overlay.open { display: block; } .dz-stage { position: absolute; inset: 0; overflow: hidden; } .dz-stage > svg { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; } .dz-stage.panning > svg { cursor: grabbing; } .dz-controls { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; z-index: 2; } .dz-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: var(--bg); color: var(--text); font-size: 18px; font-family: var(--mono, monospace); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .dz-btn:hover { background: #eef1f5; } .dz-btn:focus { outline: 2px solid var(--link); outline-offset: 2px; } .dz-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 11px; font-family: var(--mono, monospace); pointer-events: none; } /* Element + relationship sections flow as page content (no box). A thin horizontal rule separates them so the eye can still segment. */ .element-section, .relationship-section { padding: 0; border: none; border-radius: 0; margin: 28px 0 0 0; background: transparent; border-top: 1px solid var(--rule); padding-top: 14px; } .element-section:first-of-type, .relationship-section:first-of-type { border-top: none; padding-top: 0; margin-top: 12px; } .element-section h3, .relationship-section h3 { margin: 0 0 4px 0; font-size: 16px; } .element-section .element-id, .relationship-section .element-id { margin-bottom: 8px; } .element-section .el-desc, .relationship-section .el-desc { margin: 8px 0; color: var(--text); white-space: pre-wrap; } .element-section .el-md, .relationship-section .el-md { margin: 8px 0; } /* --- Rendered Markdown ------------------------------------------------- A `description-file` body reaches the page as HTML from markdown-it, and until 2026-08-21 nothing here styled it: `.ep-value` sets inline `code` and nothing else, and `.el-md` set a margin. So a description's nested lists, headings, fenced code, quotes and tables arrived unstyled — the structure was in the DOM and invisible on the page. The Viewer has carried these rules in MetadataPopup.css all along; this is the same set, so the popup on screen and the popup on the site render an authored `.md` the same way. One selector list covers both containers rather than two that can drift apart. */ .ep-md, .el-md { line-height: 1.5; } .ep-md > :first-child, .el-md > :first-child { margin-top: 0; } .ep-md > :last-child, .el-md > :last-child { margin-bottom: 0; } .ep-md h1, .ep-md h2, .ep-md h3, .ep-md h4, .el-md h1, .el-md h2, .el-md h3, .el-md h4 { color: var(--text); line-height: 1.25; margin: 12px 0 6px; } .ep-md h1, .el-md h1 { font-size: 17px; } .ep-md h2, .el-md h2 { font-size: 15px; } .ep-md h3, .el-md h3 { font-size: 14px; } .ep-md h4, .el-md h4 { font-size: 13px; } .ep-md p, .el-md p { margin: 1em 0; } /* The indentation. A nested list is a nested