/* ========================================================================== bitcoin-forks.org : shared stylesheet Visual language adapted from merge-mining-monitor. No external fonts, scripts, or assets. Theme policy (operator decision, 2026-07-16): dark is the unconditional default, regardless of system preference (prefers-color-scheme is not consulted at all). The light palette below is kept only as a clearly marked, optional override for a future toggle: stamping data-theme="light" on (the existing header theme-button already does this) switches to it. Do not gate the default on prefers-color-scheme; that was the old (pre-revision) behaviour and is intentionally removed. ========================================================================== */ /* ---- Design tokens (from mmm tokens.css, extended) ---------------------- */ /* Base = dark palette, unconditional default render. */ :root { color-scheme: dark; --bg: #171a18; --surface: #202520; --surface-alt: #2a302b; --surface-sunk: #191d19; --line: #404941; --line-strong: #66746b; --text: #edf2ed; --muted: #b8c3bb; --faint: #99a69e; --focus: #7dd3fc; --link: #84a9ff; /* Semantic accents shared with mmm */ --canonical: #65b88c; /* healthy / BIP-valid / live */ --stale: #f06f67; /* rejection / divergence / alarm */ --near: #e4a84f; /* caution / mandatory window / MOCK amber */ --unknown: #aaa7ff; /* undetermined */ --live: #4bc0c8; /* fresh telemetry */ --proof: #84a9ff; /* signalling / header claim */ --mock: #ffd79a; /* MOCK label ink (on amber field) */ --mock-bg: #3a2f16; --mock-line: #7a5b23; --shadow: 0 1px 2px rgba(0, 0, 0, 0.32); --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.42); --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --maxw: 1120px; --maxw-wide: 1320px; --radius: 8px; --radius-sm: 6px; } /* ---- OPTIONAL light override (not active by default) -------------------- Future toggle only. Stamped via data-theme="light" on , as the existing header theme-button already does. Nothing in prefers-color-scheme triggers this; it is purely an explicit, user-chosen override. ---------- */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f5f0; --surface: #ffffff; --surface-alt: #eef1ec; --surface-sunk: #e7ebe4; --line: #cfd7d0; --line-strong: #8f9c94; --text: #18211c; --muted: #5d6c62; --faint: #7b877f; --focus: #005f73; --link: #1f6feb; --canonical: #2e7d5b; --stale: #b13f3a; --near: #b7771f; --unknown: #5d5aa8; --live: #087e8b; --proof: #1f6feb; --mock: #9a5b00; --mock-bg: #fbe6bf; --mock-line: #e2b56b; --shadow: 0 1px 2px rgba(24, 33, 28, 0.08); --shadow-lg: 0 12px 36px rgba(24, 33, 28, 0.16); } /* ---- Reset and base ----------------------------------------------------- */ * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.55; -webkit-text-size-adjust: 100%; } h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; } h1 { font-size: 26px; letter-spacing: -0.01em; } h2 { font-size: 19px; } h3 { font-size: 15px; } p { margin: 0; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } code, .mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; } button, input, select { font: inherit; color: var(--text); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 12px; z-index: 100; } .skip-link:focus { left: 8px; top: 8px; } /* ---- Layout primitives -------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 18px; } .container.wide { max-width: var(--maxw-wide); } .stack > * + * { margin-top: 14px; } .section { padding: 34px 0; } .section-tight { padding: 22px 0; } .muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 13px; } .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* ---- Site header / nav -------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); } .site-header-inner { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 8px 18px; max-width: var(--maxw-wide); margin: 0 auto; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); } .brand:hover { text-decoration: none; } .brand-mark { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, transparent 30%, color-mix(in srgb, var(--canonical) 22%, transparent) 31%, transparent 33%), radial-gradient(circle at 50% 50%, transparent 52%, color-mix(in srgb, var(--proof) 26%, transparent) 53%, transparent 55%), var(--surface-alt); box-shadow: inset 0 0 0 1px var(--line); } .brand-mark span { width: 8px; height: 8px; border-radius: 50%; background: var(--stale); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stale) 22%, transparent); } .brand-copy { display: grid; gap: 1px; line-height: 1.1; } .brand-copy strong { font-size: 15px; font-weight: 700; } .brand-copy small { font-size: 11px; color: var(--muted); } .site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: wrap; } .site-nav a { color: var(--muted); padding: 7px 11px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; } .site-nav a:hover { color: var(--text); background: var(--surface-alt); text-decoration: none; } .site-nav a[aria-current="page"] { color: var(--text); background: var(--surface-alt); } .header-tools { display: flex; align-items: center; gap: 8px; } .icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; } .icon-button:hover { border-color: var(--line-strong); background: var(--surface-alt); } .icon-button svg { width: 17px; height: 17px; display: block; } /* Dark is the default render, so the sun (switch-to-light) shows by default; the moon (switch-to-dark) shows only under the light override. Selectors are qualified with .icon-button (not just the bare icon class) so they outrank ".icon-button svg { display: block }" above. */ .icon-button .theme-icon-moon { display: none; } .icon-button .theme-icon-sun { display: block; } :root[data-theme="light"] .icon-button .theme-icon-sun { display: none; } :root[data-theme="light"] .icon-button .theme-icon-moon { display: block; } /* Mobile nav: horizontal scroll strip. */ @media (max-width: 860px) { .site-header-inner { flex-wrap: wrap; } .site-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 2px; flex-wrap: nowrap; } .header-tools { margin-left: auto; } } /* ---- MOCK labelling ----------------------------------------------------- */ .mock { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mock); background: var(--mock-bg); border: 1px solid var(--mock-line); border-radius: 4px; padding: 1px 5px; vertical-align: middle; } .mock-banner { display: flex; align-items: flex-start; gap: 10px; background: var(--mock-bg); border: 1px solid var(--mock-line); border-radius: var(--radius-sm); color: var(--mock); padding: 10px 14px; font-size: 13px; font-weight: 600; } .mock-banner strong { font-family: var(--mono); letter-spacing: 0.04em; } /* Small, unobtrusive A/B layout-compare banner (Live pages only). Deliberately quieter than .mock-banner so it does not compete with the MOCK-data notice. */ .ab-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); padding: 7px 12px; font-size: 12px; } .ab-banner strong { color: var(--text); } .ab-banner a { font-weight: 600; white-space: nowrap; } /* ---- Cards / panels ----------------------------------------------------- */ .card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .panel { display: flex; flex-direction: column; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px 9px; border-bottom: 1px solid var(--line); } .panel-head h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; } .panel-head .panel-head-meta { display: flex; align-items: center; gap: 8px; } .panel-body { padding: 14px; } .panel-foot { padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; background: var(--surface-alt); border-radius: 0 0 var(--radius) var(--radius); } .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* ---- Status beads and pills (from mmm source-status) -------------------- */ .bead { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--unknown); box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 12%, transparent); } .bead.live { background: var(--live); } .bead.stale { background: var(--stale); } .bead.caution { background: var(--near); } .bead.ok { background: var(--canonical); } .bead.signal { background: var(--proof); } .freshness { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .pill { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); color: var(--muted); background: var(--surface-alt); } .pill.ok { color: var(--canonical); border-color: color-mix(in srgb, var(--canonical) 45%, var(--line)); } .pill.alarm { color: var(--stale); border-color: color-mix(in srgb, var(--stale) 45%, var(--line)); } .pill.caution { color: var(--near); border-color: color-mix(in srgb, var(--near) 45%, var(--line)); } .pill.signal { color: var(--proof); border-color: color-mix(in srgb, var(--proof) 45%, var(--line)); } .pill.live { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, var(--line)); } .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); background: var(--surface-alt); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 15px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; } .btn:hover { background: var(--surface-alt); text-decoration: none; } .btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); } .btn.primary:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)); } /* ---- Event clock / height track ---------------------------------------- */ .clock { background: radial-gradient(1200px 400px at 15% -20%, color-mix(in srgb, var(--proof) 8%, transparent), transparent 60%), var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; } .clock-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 32px; margin-bottom: 26px; } .clock-height-label { font-size: 12px; } .clock-height { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(34px, 7vw, 54px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .clock-phase { display: grid; gap: 4px; } .clock-next { display: grid; gap: 4px; } .clock-next .num { font-family: var(--mono); font-size: 22px; font-weight: 700; } /* Milestone rail */ .track { position: relative; display: flex; justify-content: space-between; gap: 8px; padding-top: 26px; } .track::before { content: ""; position: absolute; top: 32px; left: 12px; right: 12px; height: 2px; background: var(--line); } .track-fill { position: absolute; top: 32px; left: 12px; height: 2px; background: var(--canonical); } .tick { position: relative; z-index: 1; display: grid; justify-items: center; gap: 5px; flex: 1 1 0; min-width: 0; text-align: center; } .tick-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); } .tick.passed .tick-dot { background: var(--canonical); border-color: var(--canonical); } .tick.next .tick-dot { background: var(--near); border-color: var(--near); box-shadow: 0 0 0 4px color-mix(in srgb, var(--near) 22%, transparent); } .tick-h { font-family: var(--mono); font-size: 13px; font-weight: 700; } .tick-name { font-size: 12px; color: var(--muted); line-height: 1.25; } .tick-date { font-size: 11px; color: var(--faint); font-family: var(--mono); } .tick .tag { margin-top: 2px; } /* "You are here" marker sits on the track between passed and next. */ .you-are-here { position: absolute; top: 24px; transform: translateX(-50%); z-index: 2; display: grid; justify-items: center; gap: 3px; } .you-are-here .marker { width: 16px; height: 16px; border-radius: 50%; background: var(--proof); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--proof); } .you-are-here .marker-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--proof); white-space: nowrap; } @media (max-width: 720px) { .track { flex-direction: column; align-items: stretch; padding-top: 6px; } .track::before { top: 0; bottom: 0; left: 19px; right: auto; width: 2px; height: auto; } .track-fill { display: none; } .tick { grid-template-columns: 38px 1fr; justify-items: start; text-align: left; gap: 4px 12px; padding: 8px 0; } .tick-dot { grid-row: 1 / 3; align-self: center; } .you-are-here { position: static; transform: none; flex-direction: row; } } /* ---- Tables ------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data th, table.data td { padding: 9px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; } table.data thead th { border-top: 0; border-bottom: 1px solid var(--line-strong); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } table.data tbody tr:hover { background: var(--surface-alt); } table.data .num, table.data td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; } table.data caption { caption-side: bottom; text-align: left; color: var(--muted); font-size: 12px; padding: 9px 12px 2px; } /* ---- KPI / stat blocks -------------------------------------------------- */ .kpi { display: grid; gap: 3px; } .kpi .kpi-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; line-height: 1; } .kpi .kpi-label { font-size: 12px; color: var(--muted); } .kpi-row { display: flex; flex-wrap: wrap; gap: 26px; } /* Comparison (two-source) row used by mempool divergence */ .compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; } .compare .col { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--surface-alt); } .compare .col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 8px; } .compare .divider { display: grid; place-items: center; color: var(--faint); font-size: 12px; font-weight: 700; } .compare .big { font-family: var(--mono); font-size: 24px; font-weight: 700; } @media (max-width: 620px) { .compare { grid-template-columns: 1fr; } .compare .divider { padding: 4px 0; } } /* Simple horizontal meter */ .meter { position: relative; height: 10px; border-radius: 999px; background: var(--surface-sunk); border: 1px solid var(--line); overflow: hidden; } .meter > span { position: absolute; inset: 0 auto 0 0; background: var(--proof); border-radius: 999px; } .meter.threshold::after { /* Fixed marker at the BIP-110 voluntary threshold (55%). */ content: ""; position: absolute; left: 55%; top: -3px; bottom: -3px; width: 2px; background: var(--stale); } /* ---- Hero (landing) ----------------------------------------------------- */ .lede { font-size: 18px; line-height: 1.55; color: var(--text); max-width: 62ch; } .lede.muted { color: var(--muted); } .summary-strip { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .summary-strip .cell { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; background: var(--surface); } .summary-strip .cell h4 { font-size: 13px; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; } .summary-strip .cell p { font-size: 13px; color: var(--muted); } /* ---- Education entry cards ---------------------------------------------- */ .entry-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); } a.entry-card:hover { border-color: var(--line-strong); text-decoration: none; box-shadow: var(--shadow-lg); } .entry-card .entry-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--proof); } .entry-card h3 { font-size: 16px; } .entry-card p { font-size: 13px; color: var(--muted); } .entry-card .entry-more { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--link); } /* ---- Article / prose ---------------------------------------------------- */ .article { max-width: 760px; margin: 0 auto; } .prose { font-size: 16px; line-height: 1.68; } .prose > * + * { margin-top: 18px; } .prose h2 { font-size: 22px; margin-top: 38px; padding-top: 6px; } .prose h3 { font-size: 17px; margin-top: 28px; } .prose ul, .prose ol { margin: 0; padding-left: 22px; } .prose li + li { margin-top: 6px; } .prose code { background: var(--surface-alt); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 0.88em; } .prose strong { font-weight: 700; } .callout { border-left: 3px solid var(--near); background: var(--surface-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 12px 16px; font-size: 15px; } .callout.key { border-left-color: var(--proof); } /* Figure slots referencing staged diagram assets */ .figure { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: repeating-linear-gradient(45deg, transparent, transparent 9px, color-mix(in srgb, var(--line) 40%, transparent) 9px, color-mix(in srgb, var(--line) 40%, transparent) 10px), var(--surface-alt); padding: 22px 18px; display: grid; gap: 6px; place-items: center; text-align: center; } .figure .figure-slot { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } .figure .figure-name { font-weight: 700; font-family: var(--mono); font-size: 14px; } .figure figcaption { font-size: 13px; color: var(--muted); max-width: 60ch; } .figure.interactive .figure-slot { color: var(--live); } /* Phase timeline (vertical) */ .phases { display: grid; gap: 0; } .phase { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); } .phase:first-child { border-top: 0; } .phase .phase-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; background: var(--surface); border: 2px solid var(--line-strong); } .phase.done .phase-dot { background: var(--canonical); border-color: var(--canonical); } .phase.active .phase-dot { background: var(--near); border-color: var(--near); box-shadow: 0 0 0 4px color-mix(in srgb, var(--near) 20%, transparent); } .phase h4 { font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .phase h4 .num { font-size: 12px; color: var(--muted); } .phase p { font-size: 13px; color: var(--muted); margin-top: 3px; } /* Prev / next article nav */ .article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); } .article-nav a { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); } .article-nav a:hover { border-color: var(--line-strong); text-decoration: none; background: var(--surface-alt); } .article-nav .dir { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .article-nav .to-next { text-align: right; } @media (max-width: 620px) { .article-nav { grid-template-columns: 1fr; } } /* ---- TOC / sidebar ------------------------------------------------------ */ .with-aside { display: grid; grid-template-columns: 1fr 240px; gap: 34px; align-items: start; } .toc { position: sticky; top: 76px; font-size: 13px; display: grid; gap: 6px; } .toc .eyebrow { margin-bottom: 4px; } .toc a { color: var(--muted); display: block; padding: 2px 0; } .toc a:hover { color: var(--text); } @media (max-width: 980px) { .with-aside { grid-template-columns: 1fr; } .toc { position: static; order: -1; } } /* ---- Footer ------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 48px; } .site-footer-inner { max-width: var(--maxw-wide); margin: 0 auto; padding: 28px 18px; display: grid; gap: 22px; grid-template-columns: 1.5fr 1fr 1fr; } .site-footer h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 8px; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; } .site-footer a { color: var(--muted); } .site-footer a:hover { color: var(--text); } .site-footer .foot-note { font-size: 12px; color: var(--faint); line-height: 1.5; } .foot-bar { border-top: 1px solid var(--line); padding: 12px 18px; max-width: var(--maxw-wide); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; font-size: 12px; color: var(--faint); } @media (max-width: 720px) { .site-footer-inner { grid-template-columns: 1fr; } } /* ---- Utility ------------------------------------------------------------ */ .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row.between { justify-content: space-between; } .divider-line { height: 1px; background: var(--line); border: 0; margin: 0; } .nowrap { white-space: nowrap; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== Additions for the built site (beyond the mockup stylesheet). ========================================================================== */ /* ---- Figure slots: "figure pending" state ------------------------------- */ /* The mockup .figure block reads coherently before any diagram is exported. A "pending" tag makes the not-yet-drawn status explicit on the page. */ .figure .figure-pending { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; } .figure.interactive .figure-pending { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, var(--line)); } /* ---- Live-pending chips -------------------------------------------------- */ /* Where the read model will inject a live value at launch, the prose carries a labelled placeholder chip instead of a fabricated number. */ .live-pending { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--live); background: color-mix(in srgb, var(--live) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--live) 45%, var(--line)); border-radius: 999px; padding: 1px 10px; vertical-align: baseline; line-height: 1.6; } .live-pending::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px color-mix(in srgb, var(--live) 22%, transparent); } /* A grouped note wrapping one or more live-pending chips, used where the drafts marked a block of values as rendered live at launch. */ .live-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; border-left: 3px solid var(--live); background: var(--surface-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 12px 16px; font-size: 13px; } .live-note .live-note-label { color: var(--muted); font-weight: 600; } /* ---- Timeline / developments ledger ------------------------------------- */ .ledger { display: grid; gap: 14px; } .ledger-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-alt); padding: 22px 20px; display: grid; gap: 8px; text-align: center; color: var(--muted); } .ledger-empty .figure-slot { color: var(--faint); } .ledger-entry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; display: grid; gap: 8px; } .ledger-entry .ledger-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; } .category-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--proof); background: var(--surface-alt); border: 1px solid color-mix(in srgb, var(--proof) 40%, var(--line)); border-radius: 4px; padding: 1px 6px; } /* ---- Stub / short-page prose -------------------------------------------- */ .stub-note { border-left: 3px solid var(--proof); background: var(--surface-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 12px 16px; font-size: 15px; color: var(--muted); }