/* The Well — reading plane: right-side panel, reading rooms, peek cards. * Editorial-premium: serif bodies, hairlines, generous whitespace, no * boxes-in-boxes. Vocabulary only from css/tokens.css. See DESIGN.md. */ /* ================================================================== */ /* Host + motion */ /* ================================================================== */ .panel-host { position: fixed; inset: 0; z-index: 40; pointer-events: none; /* the dimmed scene on the left stays clickable */ } .panel-host .reader { pointer-events: auto; } /* ---- close / back button (concern: getting out of a record) ---- */ /* Lives on , fixed to the top-right corner. Hidden until a record or room is open. A real, large tap target so mobile has a reliable way back and desktop needn't click the scene (which risks opening a neighbouring node). */ .rd-close { position: fixed; top: 12px; right: 14px; z-index: 50; width: 40px; height: 40px; display: none; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-2); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); box-shadow: 0 6px 20px -8px rgba(20, 30, 55, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; opacity: 0; transform: scale(0.9); transition: opacity var(--t-micro) var(--glide), transform var(--t-micro) var(--glide), color var(--t-micro) var(--glide), background var(--t-micro) var(--glide), border-color var(--t-micro) var(--glide); } .rd-close.is-vis { display: flex; opacity: 1; transform: none; } .rd-close:hover { color: var(--text); background: var(--surface); border-color: color-mix(in srgb, var(--text-3) 55%, var(--border)); } .rd-close:active { transform: scale(0.94); } .rd-close:focus-visible { outline: 2px solid var(--hue, var(--vision)); outline-offset: 2px; } /* while reading, the top-right status strip yields the corner to the button */ body.reading #status { opacity: 0; pointer-events: none; transition: opacity var(--t-micro) var(--glide); } .mono { font-family: var(--mono); } /* ---- panel plane ---- */ .reader--panel { position: absolute; top: 0; right: 0; height: 100%; width: 46vw; min-width: 420px; max-width: 720px; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--hue)) 0%, var(--surface) 120px); border-left: 1px solid var(--border); box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateX(28px); transition: transform var(--t-local) var(--glide), opacity var(--t-local) var(--glide); } .panel-host.is-shown .reader--panel { opacity: 1; transform: none; } .reader-inner { max-width: 680px; padding: 46px clamp(26px, 4.5vw, 58px) 84px; transition: opacity 120ms var(--glide); } .reader-inner.is-fading { opacity: 0; } /* thin, quiet scrollbars */ .reader-scroll { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .reader-scroll::-webkit-scrollbar { width: 10px; } .reader-scroll::-webkit-scrollbar-thumb { background: var(--border); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; } /* ---- reading room ---- */ .reader--room { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); opacity: 0; transition: opacity 300ms var(--glide); } .panel-host.is-shown .reader--room { opacity: 1; } @media (min-width: 900px) { .reader--room { grid-template-columns: clamp(180px, 22vw, 280px) minmax(0, 1fr); } } .room-toc { display: none; padding: 96px 16px 40px 32px; overflow-y: auto; } @media (min-width: 900px) { .room-toc { display: block; } } .room-toc-inner { position: sticky; top: 0; max-width: 240px; } .toc-head { margin-bottom: 14px; color: var(--hue); opacity: 0.8; } .toc-link { display: block; padding: 5px 0 5px 14px; border-left: 2px solid var(--border); color: var(--text-3); font-size: 12.5px; line-height: 1.4; text-decoration: none; transition: color 150ms var(--glide), border-color 150ms var(--glide); } .toc-l3 { padding-left: 28px; font-size: 12px; } .toc-link:hover { color: var(--text-2); } .toc-link.is-active { color: var(--text); border-color: var(--hue); } .room-col { overflow-y: auto; overscroll-behavior: contain; padding: 0 24px; } .room-col-inner { max-width: 720px; margin: 0 auto; padding: 88px 8px 140px; animation: room-rise 450ms var(--glide) both; } @keyframes room-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .room-prose { font-family: var(--serif); font-size: 17px; line-height: 1.65; } .room-col .rd-header { margin-bottom: 8px; } /* ================================================================== */ /* Header */ /* ================================================================== */ .rd-header { margin-bottom: 34px; } .rd-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .hue-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hue, var(--text-3)); box-shadow: 0 0 10px color-mix(in srgb, var(--hue, #8a93a6) 60%, transparent); flex: none; } .rd-titlerow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .rd-title { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; color: var(--text); } .reader--room .rd-title { font-size: 34px; } /* edit (pencil) — header chrome, same family as the code chip / close button. Pushed to the end of the title row; appears only when onEdit is wired. */ .rd-edit { margin-left: auto; align-self: center; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--text-3); background: transparent; border: 1px solid var(--border); cursor: pointer; transition: color var(--t-micro) var(--glide), background var(--t-micro) var(--glide), border-color var(--t-micro) var(--glide); } .rd-edit:hover { color: var(--text); background: var(--surface-2); border-color: color-mix(in srgb, var(--text-3) 55%, var(--border)); } .rd-edit:active { transform: scale(0.94); } .rd-edit:focus-visible { outline: 2px solid var(--hue, var(--vision)); outline-offset: 2px; } /* files: the download block — a tinted card with a mono meta line + Download. */ .rd-file { margin-top: 20px; padding: 16px 18px; border-radius: 12px; background: color-mix(in srgb, var(--hue, var(--files)) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--hue, var(--files)) 22%, var(--border)); } .rd-file-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .rd-file-meta { min-width: 0; } .rd-file-line { font-size: 13px; color: var(--text-2); } .rd-file-sha { margin-top: 4px; font-size: 11px; color: var(--text-3); } .rd-download { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #fff; background: var(--hue, var(--files)); border: 1px solid color-mix(in srgb, var(--hue, var(--files)) 70%, #000); cursor: pointer; transition: filter var(--t-micro) var(--glide), transform var(--t-micro) var(--glide); } .rd-download:hover { filter: brightness(1.08); } .rd-download:active { transform: scale(0.96); } .rd-download:focus-visible { outline: 2px solid var(--hue, var(--files)); outline-offset: 2px; } /* The field guide: a doc room with a hairline-ruled title above the prose. */ .room-doc-head { margin-bottom: 38px; padding-bottom: 22px; border-bottom: 1px solid var(--border); } .reader--room .room-doc-title { font-size: 40px; } .reader--room.is-doc .room-prose > .md-h:first-child { margin-top: 0; } .rd-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .rd-pill { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; color: var(--text-2); background: color-mix(in srgb, var(--text-3) 14%, transparent); border: 1px solid color-mix(in srgb, var(--text-3) 26%, transparent); } .rd-pill--status { color: var(--hue); background: color-mix(in srgb, var(--hue) 12%, transparent); border-color: color-mix(in srgb, var(--hue) 34%, transparent); } .rd-pill--qtype { color: var(--warn); background: color-mix(in srgb, var(--warn) 11%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .rd-prov { margin-top: 16px; font-size: 11.5px; line-height: 1.5; color: var(--text-3); word-break: break-word; } /* ================================================================== */ /* Field blocks */ /* ================================================================== */ .rd-block { margin: 26px 0; } .rd-block--body { margin: 22px 0; } .rd-label { margin-bottom: 10px; color: var(--hue); opacity: 0.85; } .rd-text { color: var(--text); font-size: 15px; line-height: 1.55; } /* prose (markdown) — the editorial voice */ .rd-md, .room-prose { font-family: var(--serif); font-size: 17px; line-height: 1.65; color: var(--text); } .rd-md { max-width: 680px; } .rd-md .md-p, .room-prose .md-p { margin: 0 0 1.05em; } .rd-md > :first-child, .room-prose > :first-child { margin-top: 0; } .rd-md > :last-child, .room-prose > :last-child { margin-bottom: 0; } .md-h { font-family: var(--serif); font-weight: 600; line-height: 1.25; color: var(--text); letter-spacing: -0.005em; } h2.md-h { font-size: 21px; margin: 1.7em 0 0.7em; padding-bottom: 0.35em; border-bottom: 1px solid color-mix(in srgb, var(--hue) 40%, var(--border)); } h3.md-h { font-size: 17.5px; margin: 1.5em 0 0.5em; color: var(--text); } h4.md-h, h5.md-h, h6.md-h { font-size: 15px; margin: 1.3em 0 0.4em; color: var(--text-2); } .md-list { margin: 0 0 1.05em; padding-left: 1.35em; } .md-list li { margin: 0.3em 0; } .md-list .md-list { margin: 0.35em 0 0.5em; } .md-quote { margin: 1.1em 0; padding: 2px 0 2px 20px; border-left: 3px solid color-mix(in srgb, var(--hue) 55%, transparent); color: var(--text-2); font-style: italic; } .md-quote .md-p { margin-bottom: 0.6em; } .md-hr { border: 0; border-top: 1px solid var(--border); margin: 1.8em 0; } a.md-link { color: var(--hue); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--hue) 45%, transparent); } a.md-link:hover { border-bottom-color: var(--hue); } .md-doclink { color: var(--text-2); border-bottom: 1px dotted var(--text-3); } /* code */ .md-inlinecode { font-family: var(--mono); font-size: 0.86em; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); color: var(--text); } .md-code { font-family: var(--mono); font-size: 13px; line-height: 1.6; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 1.2em 0; overflow-x: auto; color: var(--text-2); } .md-code code { font-family: inherit; white-space: pre; } /* tables — hairlines + horizontal scroll */ .md-tablewrap { margin: 1.3em 0; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; } .md-table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; } .md-table th, .md-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: top; } .md-table th:last-child, .md-table td:last-child { border-right: 0; } .md-table tbody tr:last-child td { border-bottom: 0; } .md-table th { color: var(--text-2); font-weight: 600; background: color-mix(in srgb, var(--hue) 8%, transparent); white-space: nowrap; } .md-table td { color: var(--text); } /* inline record autolinks in bodies */ a.code-link { font-family: var(--mono); font-size: 0.9em; color: var(--hue); text-decoration: none; padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--hue) 10%, transparent); transition: background 120ms var(--glide); white-space: nowrap; } a.code-link:hover { background: color-mix(in srgb, var(--hue) 22%, transparent); } /* ---- list-kind field ---- */ .rd-list { margin: 0; padding-left: 1.3em; font-size: 15px; line-height: 1.55; } .rd-list li { margin: 0.35em 0; } /* ---- bool ---- */ .bool-pill { display: inline-block; font-size: 12px; letter-spacing: 0.03em; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--border); } .bool-pill.is-yes { color: var(--vision); background: color-mix(in srgb, var(--vision) 12%, transparent); border-color: color-mix(in srgb, var(--vision) 34%, transparent); } .bool-pill.is-no { color: var(--text-3); } /* ---- token value + swatch ---- */ .token-value { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; } .token-swatch { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border); flex: none; } /* ================================================================== */ /* Special treatments */ /* ================================================================== */ /* owner-segment jtbd — large serif pull-quote */ .rd-pullquote-block { margin: 30px 0; } .rd-pullquote { font-family: var(--serif); font-size: 23px; line-height: 1.4; font-style: italic; color: var(--text); margin: 0; padding-left: 20px; border-left: 3px solid var(--hue); } /* open-question risk / answer callouts */ .rd-callout { margin: 24px 0; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--border); } .rd-callout-label { margin-bottom: 8px; } .rd-callout--warn { background: color-mix(in srgb, var(--warn) 9%, transparent); border-color: color-mix(in srgb, var(--warn) 32%, transparent); } .rd-callout--warn .rd-callout-label { color: var(--warn); } .rd-callout--answer { background: color-mix(in srgb, var(--learning) 8%, transparent); border-color: color-mix(in srgb, var(--learning) 30%, transparent); } .rd-callout--answer .rd-callout-label { color: var(--learning); } .rd-callout .rd-md { font-size: 16px; } /* historical marker — a record no longer the current as-is (superseded TD, answered/superseded question, rejected principle/feature, done task, …) */ .rd-historical { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; padding: 12px 16px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); } .rd-historical .smallcaps { color: var(--warn); } /* inbox filing note — a curated-layer misfit capture's triage hint */ .rd-filing { margin: 0 0 22px; padding: 12px 16px; border-radius: 10px; background: color-mix(in srgb, var(--hue, var(--learning)) 9%, transparent); border: 1px solid color-mix(in srgb, var(--hue, var(--learning)) 26%, transparent); font-size: 15px; line-height: 1.55; color: var(--text); } .rd-filing .smallcaps { color: color-mix(in srgb, var(--hue, var(--learning)) 70%, var(--text)); } /* a curated type's json field — plain preformatted value */ .rd-json { margin: 6px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--panel-sunken, color-mix(in srgb, var(--text) 5%, transparent)); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-x: auto; } /* ================================================================== */ /* Strategic-decision options + LEAN ribbon */ /* ================================================================== */ .lean-ribbon { position: relative; margin: 0 0 22px; padding: 16px 20px 16px 22px; border-radius: 12px; background: color-mix(in srgb, var(--vision) 12%, transparent); border: 1px solid color-mix(in srgb, var(--vision) 34%, transparent); border-left: 3px solid var(--vision); } .lean-tag { display: block; margin-bottom: 8px; color: var(--vision); } .lean-body { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--text); } .lean-body .md-p { margin: 0 0 0.6em; } .lean-body .md-p:last-child { margin-bottom: 0; } .opt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .opt-card { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 15px 18px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 55%, transparent); transition: opacity 200ms var(--glide), border-color 200ms var(--glide), box-shadow 200ms var(--glide); } .opt-letter { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1; color: var(--hue); text-align: center; padding-top: 2px; } .opt-name { font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 4px; } .opt-desc { font-size: 14px; line-height: 1.55; color: var(--text-2); } .opt-desc .md-p { margin: 0 0 0.5em; } .opt-desc .md-p:last-child { margin-bottom: 0; } .opt-card.is-dimmed { opacity: 0.4; } .opt-card.is-spotlit { border-color: color-mix(in srgb, var(--hue) 60%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hue) 40%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--hue) 50%, transparent); } /* ================================================================== */ /* Feature innovation gates */ /* ================================================================== */ .gate-chips { display: flex; flex-wrap: wrap; gap: 8px; } .gate-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; padding: 5px 11px; border-radius: 8px; text-decoration: none; transition: border-color 120ms var(--glide), background 120ms var(--glide); } .gate-diamond { width: 8px; height: 8px; transform: rotate(45deg); flex: none; } .gate-chip.is-pending { color: var(--text-3); background: transparent; border: 1px dashed var(--border); } .gate-chip.is-pending .gate-diamond { border: 1px solid var(--text-3); } .gate-chip.is-pending:hover { color: var(--text-2); border-color: var(--roadmap); } .gate-chip.is-pass { color: var(--roadmap); background: color-mix(in srgb, var(--roadmap) 12%, transparent); border: 1px solid color-mix(in srgb, var(--roadmap) 34%, transparent); } .gate-chip.is-pass .gate-diamond { background: var(--roadmap); } .gate-chip.is-fail { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); } .gate-chip.is-fail .gate-diamond { background: var(--warn); } .gate-note { margin-top: 10px; color: var(--text-3); } .gate-footnote { margin-top: 14px; padding: 11px 14px; border-radius: 10px; font-size: 13px; line-height: 1.7; color: var(--text-2); background: color-mix(in srgb, var(--vision) 8%, transparent); border: 1px solid color-mix(in srgb, var(--vision) 24%, transparent); } .gate-footnote .smallcaps { color: var(--vision); margin-right: 4px; } /* ================================================================== */ /* Connections rail */ /* ================================================================== */ .rd-connections { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border); } .conn-group { margin-bottom: 18px; } .conn-verb { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .conn-arrow { color: var(--text-2); } .conn-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; margin: 0 -10px; border-radius: 9px; text-decoration: none; transition: background 120ms var(--glide); } .conn-row:hover { background: color-mix(in srgb, var(--hue) 10%, transparent); } .conn-row .code-chip { flex: none; } .conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hue); flex: none; margin: 0 3px; } .conn-title { color: var(--text); font-size: 14px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .conn-row.is-mention { opacity: 0.62; } .conn-row.is-mention .conn-title { color: var(--text-2); font-style: italic; } .conn-row.is-mention:hover { opacity: 0.9; } .conn-row.is-inline { display: inline-flex; margin: 0; padding: 4px 8px; } /* ================================================================== */ /* Footer */ /* ================================================================== */ .rd-footer { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .rd-aliases { display: flex; flex-wrap: wrap; gap: 7px; } .alias-chip { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); } .rd-updated { color: var(--text-3); } /* ================================================================== */ /* Peek cards */ /* ================================================================== */ .peek-card { position: fixed; z-index: 60; width: 280px; height: 160px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--hue, var(--border)); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6); text-decoration: none; overflow: hidden; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(4px) scale(0.985); transition: opacity 160ms var(--glide), transform 160ms var(--glide); pointer-events: auto; } .peek-card.is-vis { opacity: 1; transform: none; } /* Node-hover peek: a pure preview floated beside a canvas node. It must never swallow a click meant for the node underneath — the node is the travel target — so it stays out of the pointer's way entirely. */ .peek-card--node { pointer-events: none; } .peek-kicker { color: var(--hue); opacity: 0.85; } .peek-head { display: flex; align-items: baseline; gap: 8px; } .peek-title { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .peek-blurb { font-size: 12.5px; line-height: 1.5; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } /* usable at 1280px and below: panel gives way to a wider share */ @media (max-width: 1100px) { .reader--panel { width: 62vw; } } /* Phones: the panel is the whole screen. Its 420px min-width would otherwise overflow a narrow viewport (clipping the left edge) and the 62vw tablet rule above leaves it too narrow for long German words. Must come AFTER that rule so it wins at phone widths. The fixed close button keeps its top-right seat. */ @media (max-width: 480px) { .reader--panel { width: 100vw; min-width: 0; max-width: none; border-left: 0; } }