/* RealSmart AI Work Summary Reader · shared stylesheet Extracted byte-equivalent from OpenDesign V1 canonical reader. Source: /Users/iampoom/Library/Application Support/Open Design/namespaces/release-stable/data/projects/7c9be0c8-91a4-4ea1-9ce8-15382b2a1ab4/realsmart-ai-work-summary-reader.html Brand spec: Corporate Light · Thai-first · system font stack · no network deps. */ :root { color-scheme: light; /* ---- V1.0.1 Reader size scale (compact / comfortable / large) ---- Default = 1.0 (compact baseline). Body[data-reader-size="..."] overrides these to scale the reading body+headings+lists+tables proportionally while leaving sidebar/topbar/badges/UI chrome at fixed sizes. */ --rs-reader-font-scale: 1; --rs-reader-line-scale: 1; --rs-navy: #0A1628; --rs-navy-soft: #1F2A40; --rs-blue: #0066FF; --rs-blue-deep: #1226AA; --rs-blue-bright: #1B45D0; --rs-blue-soft: #E8F0FF; --rs-bg: #F0F2F5; --rs-surface: #FFFFFF; --rs-border: #E2E8F0; --rs-rule: #EEF2F7; --rs-ink: #0A1628; --rs-ink-soft: #1F2A40; --rs-muted: #5B6577; --rs-faint: #8A93A4; --rs-yellow: #FFD100; --rs-orange: #FA6E30; --rs-red: #D7282F; --rs-blue-mid: #1226AA; --rs-ribbon: linear-gradient(90deg, var(--rs-yellow) 0%, var(--rs-orange) 22%, var(--rs-red) 42%, var(--rs-blue-mid) 70%, var(--rs-blue-bright) 100%); --rs-ok: #059669; --rs-ok-bg: #E7F6EF; --rs-ok-bd: #B8E6CF; --rs-warn: #B45309; --rs-warn-bg: #FEF3C7; --rs-warn-bd: #FCD980; --rs-bad: #B91C1C; --rs-bad-bg: #FEE2E2; --rs-bad-bd: #F4B6B6; --rs-info: #1226AA; --rs-info-bg: #E8F0FF; --rs-info-bd: #C8DCFF; --rs-mute-bg: #F1F4F9; --rs-mute-bd: #DDE3EC; --font-th: "Anuphan", "Noto Sans Thai", "IBM Plex Sans Thai", "Sukhumvit Set", "Prompt", "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif; --font-en: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; --sidebar-w: 304px; --topbar-h: 76px; --gutter: clamp(20px, 3.4vw, 56px); --shadow-card: 0 1px 2px rgba(10,22,40,0.04), 0 1px 1px rgba(10,22,40,0.02); --shadow-sticky: 0 1px 0 rgba(10,22,40,0.06); } * { box-sizing: border-box; } html, body { min-height: 100%; width: 100%; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--rs-bg); color: var(--rs-ink); font-family: var(--font-th); font-size: calc(16px * var(--rs-reader-font-scale)); line-height: calc(1.65 * var(--rs-reader-line-scale)); letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- V1.0.1 Reader size variants ---- Default is the new V1.0.1 default (a bit more readable than the original V1 16px/1.65). Compact = old V1 baseline. Large = clearly larger for review/readability. Scales apply only to reading content (body, headings, paragraphs, lists, table, metadata, callouts) so the sidebar/topbar/badges stay UI-sized. */ body[data-reader-size="compact"] { --rs-reader-font-scale: 1.00; --rs-reader-line-scale: 1.00; } body[data-reader-size="comfortable"] { --rs-reader-font-scale: 1.10; --rs-reader-line-scale: 1.04; } body[data-reader-size="large"] { --rs-reader-font-scale: 1.42; --rs-reader-line-scale: 1.14; } /* Scale a few explicitly-sized reading elements proportionally (so they stay in proportion to the scaled body). UI chrome (sidebar / topbar / badges / filterbar / chips) is left at fixed sizes on purpose. */ .rs-table { font-size: calc(14px * var(--rs-reader-font-scale)); } .rs-table td .mono { font-size: calc(12.5px * var(--rs-reader-font-scale)); } .rs-meta-row .v { font-size: calc(14px * var(--rs-reader-font-scale)); } .rs-meta-row .v.mono { font-size: calc(12.5px * var(--rs-reader-font-scale)); } .rs-decision p { font-size: calc(14px * var(--rs-reader-font-scale)); } .rs-files li { font-size: calc(12.5px * var(--rs-reader-font-scale)); } .rs-paths li { font-size: calc(12.5px * var(--rs-reader-font-scale)); } pre.rs-code { font-size: calc(12.5px * var(--rs-reader-font-scale)); } .rs-timeline .note { font-size: calc(13px * var(--rs-reader-font-scale)); } .rs-lane .lane-row .v { font-size: calc(13.5px * var(--rs-reader-font-scale)); } .rs-check li { font-size: calc(14px * var(--rs-reader-font-scale)); } .rs-callout { font-size: calc(15px * var(--rs-reader-font-scale)); line-height: calc(1.55 * var(--rs-reader-line-scale)); } /* ---- V1.0.1 Reader size segmented control (sits in topbar) ---- */ .rs-reader-size { display: inline-flex; align-items: center; gap: 0; padding: 2px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; font-family: var(--font-en); flex-shrink: 0; } .rs-reader-size .rs-reader-size-label { font-family: var(--font-en); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A93A4; font-weight: 600; padding: 0 8px 0 6px; white-space: nowrap; } .rs-reader-size button { appearance: none; background: transparent; border: 0; color: #C7D2E0; font-family: var(--font-en); font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; padding: 5px 11px; border-radius: 6px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; min-width: 36px; line-height: 1.2; } .rs-reader-size button:hover { color: #FFFFFF; background: rgba(255,255,255,0.06); } .rs-reader-size button:focus-visible { outline: 2px solid var(--rs-blue); outline-offset: 2px; } .rs-reader-size button[aria-pressed="true"] { background: rgba(0,102,255,0.22); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0,102,255,0.55); } .rs-reader-size button[data-reader-size="compact"] { font-size: 11px; } .rs-reader-size button[data-reader-size="comfortable"] { font-size: 13px; } .rs-reader-size button[data-reader-size="large"] { font-size: 15px; } code, kbd, .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } button { font: inherit; } .rs-ribbon-top { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--rs-ribbon); z-index: 50; pointer-events: none; } .rs-reader-shell { min-height: 100vh; width: 100%; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .rs-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; background: var(--rs-navy); color: #E2E8F0; padding: 30px 20px 24px; border-right: 1px solid rgba(255,255,255,0.06); } .rs-sidebar .brand { font-family: var(--font-th); font-size: 16px; font-weight: 700; letter-spacing: 0.005em; color: #FFFFFF; display: flex; align-items: center; gap: 10px; line-height: 1.3; } .rs-sidebar .brand::before { content: ""; width: 22px; height: 3px; background: var(--rs-ribbon); border-radius: 2px; flex-shrink: 0; } .rs-sidebar .brand-sub { color: #94A3B8; font-size: 12px; margin: 6px 0 24px 32px; letter-spacing: 0.005em; line-height: 1.5; } .rs-toc-eyebrow { color: #6B7A93; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin: 18px 0 8px 12px; } .rs-toc-eyebrow:first-of-type { margin-top: 0; } .rs-toc { list-style: none; padding: 0; margin: 0; } .rs-toc li { margin: 1px 0; } .rs-toc button, .rs-toc a { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 7px; color: #C7D2E0; background: transparent; border: 0; text-align: left; font-family: inherit; font-size: 13.5px; line-height: 1.4; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; text-decoration: none; } .rs-toc button .ix, .rs-toc a .ix { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-en); font-size: 11px; font-weight: 600; color: #8A93A4; border: 1px solid rgba(255,255,255,0.12); border-radius: 5px; } .rs-toc button:hover, .rs-toc a:hover { background: rgba(0,102,255,0.10); color: #FFFFFF; text-decoration: none; } .rs-toc button.active, .rs-toc a.active { background: rgba(0,102,255,0.18); color: #FFFFFF; } .rs-toc button.active .ix, .rs-toc a.active .ix { color: var(--rs-blue); border-color: var(--rs-blue); } .rs-sidebar .foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); color: #6B7A93; font-size: 11px; line-height: 1.7; letter-spacing: 0.005em; } .rs-sidebar .foot strong { color: #C7D2E0; font-weight: 600; } .rs-sidebar .foot kbd { display: inline-block; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: #C7D2E0; font-size: 10.5px; } .rs-main { min-width: 0; width: 100%; display: flex; flex-direction: column; } .rs-topbar { position: sticky; top: 0; z-index: 20; min-height: var(--topbar-h); background: var(--rs-navy); color: #FFFFFF; padding: 14px var(--gutter); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: var(--shadow-sticky); } .rs-topbar .title-wrap { display: flex; flex-direction: column; min-width: 0; } .rs-topbar h1 { margin: 0; font-family: var(--font-th); font-size: 17px; font-weight: 600; line-height: 1.35; color: #FFFFFF; } .rs-topbar .meta { color: #94A3B8; font-family: var(--font-en); font-size: 12px; letter-spacing: 0.01em; margin-top: 2px; } .rs-topbar .badges { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .rs-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 500; font-family: var(--font-en); letter-spacing: 0.01em; border: 1px solid transparent; background: rgba(255,255,255,0.08); color: #E2E8F0; white-space: nowrap; } .rs-badge .k { color: #94A3B8; font-weight: 400; } .rs-badge.ok { background: rgba(5,150,105,0.18); color: #BAEAD0; border-color: rgba(5,150,105,0.35); } .rs-badge.warn { background: rgba(212,136,6,0.20); color: #FFE0A5; border-color: rgba(212,136,6,0.40); } .rs-badge.bad { background: rgba(230,57,70,0.20); color: #FFC2C7; border-color: rgba(230,57,70,0.40); } .rs-badge.info { background: rgba(0,102,255,0.20); color: #C7DAFF; border-color: rgba(0,102,255,0.45); } .rs-reading-canvas { width: 100%; padding: 28px var(--gutter) 96px; background: var(--rs-bg); flex: 1; } .rs-view[hidden] { display: none !important; } .rs-view-head { margin: 4px 0 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .rs-view-head .view-kicker { font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rs-blue-deep); } .rs-view-head .view-title { font-family: var(--font-th); font-size: 26px; font-weight: 700; letter-spacing: 0; color: var(--rs-ink); } .rs-view-head .view-sub { color: var(--rs-muted); font-size: 13.5px; } .rs-section { width: 100%; background: var(--rs-surface); border: 1px solid var(--rs-border); border-radius: 8px; padding: 26px clamp(18px, 2.4vw, 32px) 28px; margin: 0 0 18px; box-shadow: var(--shadow-card); scroll-margin-top: calc(var(--topbar-h) + 12px); position: relative; overflow: hidden; } .rs-section.with-ribbon::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rs-ribbon); opacity: 0.85; } .rs-section .eyebrow { display: inline-block; font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rs-blue-deep); margin-bottom: 6px; } .rs-section h2 { margin: 4px 0 6px; font-family: var(--font-th); font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--rs-ink); letter-spacing: 0; } .rs-section h3 { margin: 22px 0 8px; font-family: var(--font-th); font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--rs-ink); } .rs-section h3:first-child { margin-top: 0; } .rs-copy { max-width: 980px; } .rs-section p { margin: 8px 0 12px; color: var(--rs-ink-soft); } .rs-section ul, .rs-section ol { padding-left: 22px; margin: 10px 0; } .rs-section li { margin: 6px 0; color: var(--rs-ink-soft); } .rs-section code:not(.block) { background: var(--rs-blue-soft); border: 1px solid var(--rs-info-bd); color: var(--rs-blue-deep); border-radius: 5px; padding: 1.5px 7px; font-size: 0.92em; } .rs-section-actions { position: absolute; top: 14px; right: 16px; display: flex; gap: 6px; } .rs-icon-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-family: var(--font-en); font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--rs-muted); background: var(--rs-surface); border: 1px solid var(--rs-border); border-radius: 6px; cursor: pointer; transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .rs-icon-btn:hover { color: var(--rs-blue-deep); border-color: var(--rs-info-bd); background: var(--rs-blue-soft); } .rs-icon-btn.is-ok { color: var(--rs-ok); border-color: var(--rs-ok-bd); background: var(--rs-ok-bg); } .rs-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 6px; } .rs-card { background: var(--rs-surface); border: 1px solid var(--rs-border); border-radius: 8px; padding: 16px 18px; } .rs-card .kicker { font-family: var(--font-en); color: var(--rs-muted); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; } .rs-card .metric { font-family: var(--font-en); font-size: 26px; font-weight: 700; color: var(--rs-ink); line-height: 1.2; letter-spacing: 0; font-feature-settings: "tnum" 1; } .rs-card .metric.txt { font-family: var(--font-th); font-size: 18px; font-weight: 600; } .rs-card .note { color: var(--rs-muted); font-size: 13px; margin-top: 6px; line-height: 1.55; } .rs-status { display: inline-flex; align-items: center; padding: 2.5px 10px; border-radius: 999px; font-weight: 600; font-size: 11.5px; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; font-family: var(--font-en); } .rs-status.ok { color: var(--rs-ok); background: var(--rs-ok-bg); border-color: var(--rs-ok-bd); } .rs-status.warn { color: var(--rs-warn); background: var(--rs-warn-bg); border-color: var(--rs-warn-bd); } .rs-status.bad { color: var(--rs-bad); background: var(--rs-bad-bg); border-color: var(--rs-bad-bd); } .rs-status.info { color: var(--rs-info); background: var(--rs-info-bg); border-color: var(--rs-info-bd); } .rs-status.mute { color: var(--rs-muted);background: var(--rs-mute-bg); border-color: var(--rs-mute-bd); } .rs-meta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border: 1px solid var(--rs-border); border-radius: 8px; overflow: hidden; margin: 12px 0 6px; background: #FAFBFE; } .rs-meta-row > div { padding: 12px 16px; border-right: 1px solid var(--rs-border); } .rs-meta-row > div:last-child { border-right: 0; } .rs-meta-row .k { font-family: var(--font-en); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rs-muted); font-weight: 600; margin-bottom: 4px; } .rs-meta-row .v { font-family: var(--font-th); font-size: 14px; font-weight: 600; color: var(--rs-ink); line-height: 1.4; } .rs-meta-row .v.mono { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; word-break: break-all; } .rs-table-wrap { width: 100%; overflow-x: auto; margin: 12px 0 4px; } .rs-table { width: 100%; border-collapse: collapse; background: var(--rs-surface); font-size: 14px; } .rs-table th, .rs-table td { border-bottom: 1px solid var(--rs-border); padding: 10px 14px; text-align: left; vertical-align: top; } .rs-table thead th { background: #F7F9FD; color: var(--rs-ink-soft); font-weight: 700; font-size: 12.5px; letter-spacing: 0.01em; border-bottom: 1px solid var(--rs-border); white-space: nowrap; } .rs-table tbody tr:last-child td { border-bottom: none; } .rs-table tbody tr:hover { background: #FAFBFE; } .rs-table td.num, .rs-table th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-en); } .rs-table td .mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--rs-ink-soft); } .rs-callout { border-left: 3px solid var(--rs-blue); background: var(--rs-blue-soft); padding: 14px 16px; border-radius: 0 8px 8px 0; margin: 14px 0; color: var(--rs-ink-soft); } .rs-callout.warn { border-left-color: var(--rs-warn); background: var(--rs-warn-bg); } .rs-callout.ok { border-left-color: var(--rs-ok); background: var(--rs-ok-bg); } .rs-callout.bad { border-left-color: var(--rs-bad); background: var(--rs-bad-bg); } .rs-callout .label { display: block; font-family: var(--font-en); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rs-muted); margin-bottom: 4px; } .rs-callout strong { color: var(--rs-ink); } .rs-decision { background: var(--rs-surface); border: 1px solid var(--rs-border); border-left: 4px solid var(--rs-blue); border-radius: 8px; padding: 16px 18px; margin: 12px 0; } .rs-decision .tag { font-family: var(--font-en); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rs-muted); } .rs-decision h3 { margin: 4px 0 6px; font-size: 15.5px; } .rs-decision p { margin: 6px 0; color: var(--rs-ink-soft); font-size: 14px; line-height: 1.6; } .rs-decision .approval { display: inline-block; margin-top: 8px; padding: 6px 10px; border-radius: 6px; font-family: var(--font-mono); font-size: 12px; background: var(--rs-blue-soft); color: var(--rs-blue-deep); border: 1px solid var(--rs-info-bd); word-break: break-all; font-weight: 500; } .rs-paths { list-style: none; padding: 0; margin: 10px 0 0; } .rs-paths li { font-family: var(--font-mono); font-size: 12.5px; color: var(--rs-ink-soft); background: #F7F9FD; border: 1px solid var(--rs-border); border-radius: 6px; padding: 8px 12px; margin: 6px 0; word-break: break-all; display: flex; align-items: center; gap: 10px; } .rs-paths li .pkind { flex-shrink: 0; font-family: var(--font-en); font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--rs-muted); padding: 2px 7px; border-radius: 999px; background: var(--rs-mute-bg); border: 1px solid var(--rs-mute-bd); } .rs-check { list-style: none; padding: 0; margin: 10px 0; } .rs-check li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--rs-rule); color: var(--rs-ink-soft); font-size: 14px; } .rs-check li:last-child { border-bottom: 0; } .rs-check li::before { content: "\2713"; flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--rs-ok-bg); color: var(--rs-ok); border: 1px solid var(--rs-ok-bd); font-weight: 700; font-size: 12px; margin-top: 1px; } .rs-check li.pending::before { content: "\00B7"; background: var(--rs-mute-bg); color: var(--rs-muted); border-color: var(--rs-mute-bd); font-size: 18px; line-height: 1; } .rs-check li.warn::before { content: "!"; background: var(--rs-warn-bg); color: var(--rs-warn); border-color: var(--rs-warn-bd); } .rs-files { list-style: none; padding: 0; margin: 10px 0; } .rs-files li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--rs-border); border-radius: 6px; margin: 5px 0; font-family: var(--font-mono); font-size: 12.5px; background: var(--rs-surface); word-break: break-all; } .rs-files .op { flex-shrink: 0; width: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 2px 0; border-radius: 4px; font-family: var(--font-en); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; } .rs-files .op.add { background: var(--rs-ok-bg); color: var(--rs-ok); border: 1px solid var(--rs-ok-bd); } .rs-files .op.mod { background: var(--rs-info-bg); color: var(--rs-info); border: 1px solid var(--rs-info-bd); } .rs-files .op.del { background: var(--rs-bad-bg); color: var(--rs-bad); border: 1px solid var(--rs-bad-bd); } .rs-files .path { color: var(--rs-ink-soft); flex: 1; min-width: 0; } .rs-files .lines { flex-shrink: 0; font-family: var(--font-en); font-size: 11.5px; color: var(--rs-muted); font-variant-numeric: tabular-nums; } pre.rs-code { background: #F7F9FD; border: 1px solid var(--rs-border); border-radius: 8px; padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--rs-ink-soft); margin: 12px 0; } .rs-artifact { border: 1px dashed var(--rs-border); border-radius: 8px; padding: 14px; background: #FBFCFE; margin: 12px 0; } .rs-artifact .label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rs-muted); font-weight: 600; margin-bottom: 10px; } .rs-artifact .slot { background: repeating-linear-gradient(45deg, #F0F2F5, #F0F2F5 8px, #E9EEF6 8px, #E9EEF6 16px); border: 1px solid var(--rs-border); border-radius: 6px; min-height: 220px; display: flex; align-items: center; justify-content: center; color: var(--rs-muted); font-family: var(--font-mono); font-size: 12.5px; } .rs-artifact .caption { margin-top: 8px; color: var(--rs-muted); font-size: 12.5px; font-family: var(--font-en); word-break: break-all; } .rs-artifact img { max-width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--rs-border); } .rs-timeline { list-style: none; padding: 0; margin: 12px 0; position: relative; } .rs-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--rs-border); } .rs-timeline li { position: relative; padding: 4px 0 14px 28px; } .rs-timeline li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--rs-surface); border: 2px solid var(--rs-blue); } .rs-timeline li.done::before { background: var(--rs-blue); border-color: var(--rs-blue); } .rs-timeline li.warn::before { background: var(--rs-surface); border-color: var(--rs-warn); } .rs-timeline li.muted::before { background: var(--rs-surface); border-color: var(--rs-faint); } .rs-timeline .ts { font-family: var(--font-en); font-size: 11.5px; color: var(--rs-muted); letter-spacing: 0.01em; } .rs-timeline .title { display: block; font-family: var(--font-th); font-size: 14.5px; font-weight: 600; color: var(--rs-ink); margin: 1px 0 2px; } .rs-timeline .note { color: var(--rs-ink-soft); font-size: 13px; } .rs-lane-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 14px 0 4px; } .rs-lane { background: var(--rs-surface); border: 1px solid var(--rs-border); border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; } .rs-lane::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rs-blue); opacity: 0.9; } .rs-lane[data-tone="warn"]::before { background: var(--rs-warn); } .rs-lane[data-tone="ok"]::before { background: var(--rs-ok); } .rs-lane[data-tone="bad"]::before { background: var(--rs-bad); } .rs-lane[data-tone="mute"]::before { background: var(--rs-faint); } .rs-lane .lane-head { display: flex; align-items: center; gap: 10px; padding-top: 4px; } .rs-lane .lane-name { font-family: var(--font-th); font-size: 15px; font-weight: 700; color: var(--rs-ink); letter-spacing: 0.005em; } .rs-lane .lane-role { font-family: var(--font-en); font-size: 11px; color: var(--rs-muted); letter-spacing: 0.01em; } .rs-lane .lane-row { display: flex; flex-direction: column; gap: 2px; } .rs-lane .lane-row .k { font-family: var(--font-en); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rs-muted); font-weight: 600; } .rs-lane .lane-row .v { font-size: 13.5px; color: var(--rs-ink-soft); line-height: 1.5; } .rs-lane .lane-row .v.mono { font-family: var(--font-mono); font-size: 11.5px; word-break: break-all; } .rs-lane .lane-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--rs-rule); } .rs-filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--rs-surface); border: 1px solid var(--rs-border); border-radius: 8px; margin: 0 0 16px; } .rs-filterbar input[type="search"] { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid var(--rs-border); border-radius: 6px; font: inherit; font-size: 14px; color: var(--rs-ink); background: #FAFBFE; } .rs-filterbar input[type="search"]:focus { outline: none; border-color: var(--rs-blue); background: var(--rs-surface); } .rs-chip { padding: 5px 11px; border-radius: 999px; background: var(--rs-mute-bg); border: 1px solid var(--rs-mute-bd); color: var(--rs-ink-soft); font-family: var(--font-en); font-size: 11.5px; font-weight: 500; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .rs-chip:hover { background: var(--rs-blue-soft); color: var(--rs-blue-deep); border-color: var(--rs-info-bd); } .rs-chip.active { background: var(--rs-blue); color: #FFFFFF; border-color: var(--rs-blue); } .rs-tag { display: inline-block; padding: 1.5px 8px; border-radius: 4px; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.02em; font-weight: 500; background: var(--rs-mute-bg); color: var(--rs-ink-soft); border: 1px solid var(--rs-mute-bd); margin-right: 4px; } .rs-tag.blue { background: var(--rs-info-bg); color: var(--rs-info); border-color: var(--rs-info-bd); } .rs-tag.ok { background: var(--rs-ok-bg); color: var(--rs-ok); border-color: var(--rs-ok-bd); } .rs-tag.warn { background: var(--rs-warn-bg); color: var(--rs-warn); border-color: var(--rs-warn-bd); } .rs-tag.bad { background: var(--rs-bad-bg); color: var(--rs-bad); border-color: var(--rs-bad-bd); } .rs-tag.add { cursor: pointer; border-style: dashed; color: var(--rs-muted); } .rs-tag.add:hover { color: var(--rs-blue-deep); border-color: var(--rs-blue); background: var(--rs-blue-soft); } .rs-two { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; } @media (max-width: 900px) { .rs-two { grid-template-columns: 1fr; } } .rs-anchornav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 12px 14px; background: var(--rs-surface); border: 1px solid var(--rs-border); border-radius: 8px; } .rs-anchornav a { padding: 4px 10px; border-radius: 999px; background: var(--rs-mute-bg); border: 1px solid var(--rs-mute-bd); color: var(--rs-ink-soft); font-family: var(--font-en); font-size: 11.5px; text-decoration: none; } .rs-anchornav a:hover { background: var(--rs-blue-soft); color: var(--rs-blue-deep); border-color: var(--rs-info-bd); } .rs-pattern { margin: 0 0 22px; } .rs-pattern .ptn-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .rs-pattern .ptn-num { font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--rs-blue-deep); } .rs-pattern h3 { margin: 0; font-family: var(--font-th); font-size: 17px; font-weight: 700; color: var(--rs-ink); } .rs-pattern .ptn-desc { color: var(--rs-muted); font-size: 13px; margin: 0 0 10px; } .rs-pattern .ptn-frame { background: #FAFBFE; border: 1px solid var(--rs-border); border-radius: 8px; padding: 16px; } .rs-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 14px 0 6px; } .rs-guide-card { background: var(--rs-surface); border: 1px solid var(--rs-border); border-radius: 8px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; text-align: left; font-family: inherit; color: inherit; } .rs-guide-card:hover { border-color: var(--rs-blue); transform: translateY(-1px); } .rs-guide-card .gnum { font-family: var(--font-en); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rs-blue-deep); font-weight: 600; } .rs-guide-card .gname { font-family: var(--font-th); font-size: 17px; font-weight: 700; color: var(--rs-ink); } .rs-guide-card .gdesc { color: var(--rs-ink-soft); font-size: 13.5px; line-height: 1.55; } .rs-guide-card .gtags { margin-top: 6px; } .rs-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; } .rs-strip .item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--rs-surface); border: 1px solid var(--rs-border); border-radius: 999px; font-family: var(--font-en); font-size: 11.5px; color: var(--rs-ink-soft); letter-spacing: 0.01em; } .rs-strip .item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rs-blue); } .rs-lanesummary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 900px) { .rs-lanesummary { grid-template-columns: 1fr; } } .rs-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rs-border); border-radius: 8px; overflow: hidden; margin: 12px 0; font-family: var(--font-mono); font-size: 12.5px; white-space: pre-wrap; } .rs-diff > div { padding: 12px 14px; } .rs-diff .before { background: #FFF5F5; border-right: 1px solid var(--rs-border); color: #6E1414; } .rs-diff .after { background: #F1FBF5; color: #144B2A; } .rs-diff .lbl { display: block; font-family: var(--font-en); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; } .rs-diff .before .lbl { color: #B91C1C; } .rs-diff .after .lbl { color: var(--rs-ok); } @media (max-width: 700px) { .rs-diff { grid-template-columns: 1fr; } .rs-diff .before { border-right: 0; border-bottom: 1px solid var(--rs-border); } } a { color: var(--rs-blue-deep); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } .rs-state { border: 1px dashed var(--rs-border); border-radius: 8px; padding: 28px 22px; text-align: center; color: var(--rs-muted); background: #FBFCFE; } .rs-state .icon { display: inline-block; width: 34px; height: 34px; border-radius: 50%; background: var(--rs-mute-bg); border: 1px solid var(--rs-mute-bd); line-height: 32px; color: var(--rs-muted); font-family: var(--font-en); font-size: 16px; margin-bottom: 10px; } .rs-state .title { font-family: var(--font-th); font-size: 15px; font-weight: 600; color: var(--rs-ink); margin-bottom: 4px; } .rs-state .hint { font-size: 13px; line-height: 1.6; } .rs-state.loading .icon { animation: rsSpin 1.2s linear infinite; border-top-color: var(--rs-blue); } .rs-state.error .icon { background: var(--rs-bad-bg); color: var(--rs-bad); border-color: var(--rs-bad-bd); } @keyframes rsSpin { to { transform: rotate(360deg); } } .rs-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--rs-navy); color: #FFFFFF; padding: 10px 18px; border-radius: 8px; font-size: 13px; box-shadow: 0 8px 24px rgba(10,22,40,0.18); opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; z-index: 100; font-family: var(--font-th); } .rs-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .rs-toast .ribbon { display: inline-block; width: 12px; height: 2px; background: var(--rs-ribbon); margin-right: 8px; border-radius: 1px; vertical-align: middle; } /* Reader-size final overrides. These sit after component declarations so A+ scales dense reading surfaces consistently: cards, tables, status pills, path/code blocks, timelines, lane cards, and pattern/reference cards. Topbar/sidebar chrome stays fixed. */ .rs-view-head .view-kicker { font-size: calc(11px * var(--rs-reader-font-scale)); } .rs-view-head .view-title { font-size: calc(26px * var(--rs-reader-font-scale)); } .rs-view-head .view-sub { font-size: calc(13.5px * var(--rs-reader-font-scale)); line-height: calc(1.55 * var(--rs-reader-line-scale)); } .rs-section .eyebrow { font-size: calc(11px * var(--rs-reader-font-scale)); } .rs-section h2 { font-size: calc(22px * var(--rs-reader-font-scale)); line-height: calc(1.3 * var(--rs-reader-line-scale)); } .rs-section h3 { font-size: calc(16px * var(--rs-reader-font-scale)); line-height: calc(1.45 * var(--rs-reader-line-scale)); } .rs-icon-btn { font-size: calc(11.5px * var(--rs-reader-font-scale)); } .rs-card .kicker { font-size: calc(10.5px * var(--rs-reader-font-scale)); } .rs-card .metric { font-size: calc(26px * var(--rs-reader-font-scale)); } .rs-card .metric.txt { font-size: calc(18px * var(--rs-reader-font-scale)); line-height: calc(1.25 * var(--rs-reader-line-scale)); } .rs-card .note { font-size: calc(13px * var(--rs-reader-font-scale)); line-height: calc(1.55 * var(--rs-reader-line-scale)); } .rs-status { font-size: calc(11.5px * var(--rs-reader-font-scale)); line-height: calc(1.35 * var(--rs-reader-line-scale)); } .rs-meta-row .k { font-size: calc(10.5px * var(--rs-reader-font-scale)); } .rs-meta-row .v { font-size: calc(14px * var(--rs-reader-font-scale)); line-height: calc(1.4 * var(--rs-reader-line-scale)); } .rs-meta-row .v.mono { font-size: calc(12.5px * var(--rs-reader-font-scale)); } .rs-table { font-size: calc(14px * var(--rs-reader-font-scale)); } .rs-table th, .rs-table td { line-height: calc(1.45 * var(--rs-reader-line-scale)); } .rs-table thead th { font-size: calc(12.5px * var(--rs-reader-font-scale)); } .rs-table td .mono { font-size: calc(12.5px * var(--rs-reader-font-scale)); } .rs-callout { font-size: calc(15px * var(--rs-reader-font-scale)); line-height: calc(1.55 * var(--rs-reader-line-scale)); } .rs-callout .label { font-size: calc(10.5px * var(--rs-reader-font-scale)); } .rs-decision .tag { font-size: calc(10.5px * var(--rs-reader-font-scale)); } .rs-decision h3 { font-size: calc(15.5px * var(--rs-reader-font-scale)); } .rs-decision p { font-size: calc(14px * var(--rs-reader-font-scale)); line-height: calc(1.6 * var(--rs-reader-line-scale)); } .rs-decision .approval { font-size: calc(12px * var(--rs-reader-font-scale)); } .rs-paths li { font-size: calc(12.5px * var(--rs-reader-font-scale)); line-height: calc(1.45 * var(--rs-reader-line-scale)); } .rs-paths li .pkind { font-size: calc(10px * var(--rs-reader-font-scale)); } .rs-check li { font-size: calc(14px * var(--rs-reader-font-scale)); line-height: calc(1.5 * var(--rs-reader-line-scale)); } .rs-files li { font-size: calc(12.5px * var(--rs-reader-font-scale)); line-height: calc(1.45 * var(--rs-reader-line-scale)); } .rs-files .op { font-size: calc(10.5px * var(--rs-reader-font-scale)); } .rs-files .lines { font-size: calc(11.5px * var(--rs-reader-font-scale)); } pre.rs-code { font-size: calc(12.5px * var(--rs-reader-font-scale)); line-height: calc(1.65 * var(--rs-reader-line-scale)); } .rs-artifact .label { font-size: calc(11px * var(--rs-reader-font-scale)); } .rs-artifact .slot { font-size: calc(12.5px * var(--rs-reader-font-scale)); } .rs-artifact .caption { font-size: calc(12.5px * var(--rs-reader-font-scale)); } .rs-timeline .ts { font-size: calc(11.5px * var(--rs-reader-font-scale)); } .rs-timeline .title { font-size: calc(14.5px * var(--rs-reader-font-scale)); line-height: calc(1.35 * var(--rs-reader-line-scale)); } .rs-timeline .note { font-size: calc(13px * var(--rs-reader-font-scale)); line-height: calc(1.45 * var(--rs-reader-line-scale)); } .rs-lane .lane-name { font-size: calc(15px * var(--rs-reader-font-scale)); } .rs-lane .lane-role { font-size: calc(11px * var(--rs-reader-font-scale)); } .rs-lane .lane-row .k { font-size: calc(10px * var(--rs-reader-font-scale)); } .rs-lane .lane-row .v { font-size: calc(13.5px * var(--rs-reader-font-scale)); line-height: calc(1.5 * var(--rs-reader-line-scale)); } .rs-lane .lane-row .v.mono { font-size: calc(11.5px * var(--rs-reader-font-scale)); } .rs-filterbar input[type="search"] { font-size: calc(14px * var(--rs-reader-font-scale)); } .rs-chip { font-size: calc(11.5px * var(--rs-reader-font-scale)); } .rs-tag { font-size: calc(11px * var(--rs-reader-font-scale)); } .rs-anchornav a { font-size: calc(11.5px * var(--rs-reader-font-scale)); } .rs-pattern .ptn-num { font-size: calc(11px * var(--rs-reader-font-scale)); } .rs-pattern h3 { font-size: calc(17px * var(--rs-reader-font-scale)); } .rs-pattern .ptn-desc { font-size: calc(13px * var(--rs-reader-font-scale)); line-height: calc(1.5 * var(--rs-reader-line-scale)); } .rs-guide-card .gnum { font-size: calc(10.5px * var(--rs-reader-font-scale)); } .rs-guide-card .gname { font-size: calc(17px * var(--rs-reader-font-scale)); } .rs-guide-card .gdesc { font-size: calc(13.5px * var(--rs-reader-font-scale)); line-height: calc(1.55 * var(--rs-reader-line-scale)); } .rs-strip .item { font-size: calc(11.5px * var(--rs-reader-font-scale)); } .rs-diff { font-size: calc(12.5px * var(--rs-reader-font-scale)); line-height: calc(1.55 * var(--rs-reader-line-scale)); } .rs-diff .lbl { font-size: calc(10.5px * var(--rs-reader-font-scale)); } .rs-state .title { font-size: calc(15px * var(--rs-reader-font-scale)); } .rs-state .hint { font-size: calc(13px * var(--rs-reader-font-scale)); line-height: calc(1.6 * var(--rs-reader-line-scale)); } @media (max-width: 1024px) { .rs-reader-shell { grid-template-columns: 1fr; } .rs-sidebar { position: static; height: auto; padding: 20px 22px 16px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); } .rs-sidebar .brand-sub { margin-left: 32px; margin-bottom: 12px; } .rs-toc-eyebrow { margin-top: 14px; } .rs-toc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; } .rs-sidebar .foot { display: none; } } @media (max-width: 640px) { .rs-topbar { padding: 12px var(--gutter); } .rs-topbar h1 { font-size: 15.5px; } .rs-topbar .meta { font-size: 11.5px; } .rs-topbar .badges { width: 100%; justify-content: flex-start; margin-left: 0; } .rs-toc { grid-template-columns: 1fr; } .rs-section { padding: 22px 16px 24px; } .rs-section h2 { font-size: 19px; } .rs-view-head .view-title { font-size: 22px; } .rs-section-actions { position: static; margin-bottom: 10px; } .rs-meta-row { grid-template-columns: 1fr 1fr; } .rs-meta-row > div:nth-child(2n) { border-right: 0; } .rs-meta-row > div { border-bottom: 1px solid var(--rs-border); } .rs-meta-row > div:nth-last-child(-n+2) { border-bottom: 0; } } @media print { .rs-sidebar, .rs-topbar, .rs-filterbar, .rs-anchornav, .rs-section-actions { display: none; } .rs-reader-shell { grid-template-columns: 1fr; } .rs-reading-canvas { padding: 18px 28px 28px; } .rs-section { box-shadow: none; border-color: #BFC7D2; page-break-inside: avoid; } .rs-view[hidden] { display: block !important; } }