/* Documentation composition only; colors inherit the approved Master tokens. */
:root { --handbook-nav: 256px; --handbook-reading: 1152px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; color: var(--color-foreground); background: var(--color-background); font: var(--font-size-body)/1.7 var(--font-family-ui); }
a { color: var(--color-primary-strong); text-underline-offset: 4px; }
button, input, select { font: inherit; }
button, summary { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
[hidden] { display: none !important; }
h1,h2,h3,p { margin-top: 0; }
h2 { font-size: var(--font-size-section); line-height: 1.5; margin-bottom: var(--space-2); }
h3 { font-size: var(--font-size-card); margin-bottom: var(--space-2); }
p { color: var(--color-secondary-text); margin-bottom: var(--space-4); }
small,.caption { font-size: var(--font-size-helper); color: var(--color-secondary-text); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: -100px; left: var(--space-4); z-index: 20; background: var(--color-surface); padding: var(--space-3); }
.skip:focus { top: var(--space-4); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--handbook-nav); background: var(--color-surface); border-right: 1px solid var(--color-border); padding: var(--space-8) var(--space-5); display: flex; flex-direction: column; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--color-foreground); font-size: 24px; font-weight: 750; text-decoration: none; }
.brand-mark { width: 42px; height: 46px; background: var(--color-primary); color: var(--color-on-primary); display: grid; place-items: center; border-radius: var(--radius-md); }
.brand-sub { display: block; color: var(--color-secondary-text); font-size: 10px; letter-spacing: .12em; }
.nav-label,.eyebrow,.node-kicker { font-size: var(--font-size-meta); letter-spacing: .1em; font-weight: 750; color: var(--color-secondary-text); }
.nav-label { margin: 48px var(--space-3) var(--space-3); }
nav { display: grid; gap: var(--space-1); }
nav a { min-height: 48px; padding: var(--space-3); display: flex; gap: var(--space-3); align-items: center; color: var(--color-secondary-text); border-radius: var(--radius-sm); text-decoration: none; }
nav a span { font-size: var(--font-size-meta); color: var(--color-muted-text); }
nav a:hover,nav a[aria-current] { color: var(--color-primary-strong); background: var(--color-primary-soft); }
.sidebar-note { margin-top: auto; padding: var(--space-8) var(--space-3) 0; }
.sidebar-note p { margin: var(--space-3) 0; font-size: var(--font-size-helper); }
.workspace { margin-left: var(--handbook-nav); }
.topbar { min-height: 72px; padding: var(--space-4) var(--space-8); background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; align-items: center; font-size: var(--font-size-helper); }
.topbar a { display: inline-flex; align-items: center; min-height: 44px; }
main { max-width: var(--handbook-reading); margin: auto; padding: 0 var(--space-8); }
section { margin: 64px 0; }
.hero { margin-top: 0; padding: 56px 0 40px; margin-bottom: 0; }
.hero .eyebrow { color: var(--color-primary-strong); }
h1 { font-size: clamp(28px,3.2vw,44px); line-height: 1.45; letter-spacing: -.025em; margin: var(--space-4) 0 var(--space-5); }
h1 span { color: var(--color-secondary-text); font-weight: 500; }
.lead { font-size: var(--font-size-card); max-width: 760px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.button { min-height: 44px; min-width: 44px; padding: var(--space-2) var(--space-4); display: inline-flex; justify-content: center; align-items: center; gap: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-foreground); font-weight: 650; text-decoration: none; }
.button:hover:not(:disabled) { background: var(--color-surface-muted); }
.button.primary { color: var(--color-on-primary); border-color: var(--color-primary); background: var(--color-primary); }
.button.primary:hover:not(:disabled) { background: var(--color-primary-strong); }
.danger-button { color: var(--color-danger); border-color: var(--color-danger-border); }
.hero-meta { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-8); font-size: var(--font-size-helper); color: var(--color-secondary-text); }
.hero-meta span:first-child { color: var(--color-success); }
.stack-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-4); }
.stack-card,.panel,.module-grid article,.swatches article { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); min-width: 0; }
.stack-card h2 { margin-top: var(--space-3); }
.stack-card p { margin-bottom: var(--space-1); }
.note { padding: var(--space-4) var(--space-5); border-left: 3px solid var(--color-primary); background: var(--color-primary-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: var(--space-5) 0; color: var(--color-secondary-text); }
.section-head,.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }
.section-head .eyebrow { margin-bottom: var(--space-2); }
.section-head p,.panel-heading p { margin: 0; }
.status { display: inline-flex; align-items: center; width: fit-content; gap: var(--space-2); border-radius: 999px; padding: var(--space-1) var(--space-3); font-size: var(--font-size-helper); font-weight: 650; }
.success { color: var(--color-success); background: var(--color-success-soft); }
.warning { color: var(--color-warning); background: var(--color-warning-soft); }
.danger { color: var(--color-danger); background: var(--color-danger-soft); }
.neutral { color: var(--color-secondary-text); background: var(--color-surface-muted); }
.text-link { min-height: 44px; display: inline-flex; align-items: center; }
.architecture { margin: 0; padding: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.flow-node { text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); }
.flow-node strong,.flow-node span,.flow-node small { display: block; }
.flow-node strong { font-size: var(--font-size-card); }
.flow-node span { color: var(--color-secondary-text); }
.flow-node .node-kicker { color: var(--color-primary-strong); margin-bottom: var(--space-1); }
.browser { background: var(--color-primary-soft); border-color: var(--color-primary-border); }
.connector { text-align: center; padding: var(--space-2); color: var(--color-primary); font-size: 22px; }
.connector span { font-size: var(--font-size-helper); color: var(--color-secondary-text); vertical-align: middle; }
.api-zone { border: 1px solid var(--color-primary-border); border-radius: var(--radius-md); padding: var(--space-5); background: var(--color-surface-subtle); }
.pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; }
.pipeline>div { display: flex; flex-direction: column; }
.pipeline b { color: var(--color-primary); font-size: var(--font-size-meta); }
.pipeline span { font-size: var(--font-size-helper); color: var(--color-secondary-text); }
.pipe-arrow { color: var(--color-primary); }
.branch-grid,.two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-5); }
.posting { border-color: var(--color-primary-border); background: var(--color-primary-soft); }
.transaction-note { margin: var(--space-4) 0 0; font-size: var(--font-size-helper); }
.database { background: var(--color-success-soft); border-color: var(--color-success-border); }
.support-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px dashed var(--color-border-strong); }
.support-grid strong,.support-grid span { display: block; font-size: var(--font-size-helper); }
.support-grid span { color: var(--color-secondary-text); }
figcaption { margin-top: var(--space-5); font-size: var(--font-size-helper); color: var(--color-secondary-text); }
.principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.principles article>span { color: var(--color-primary); font-weight: 750; }
.principles h3 { margin-top: var(--space-2); }
.principles p { font-size: var(--font-size-helper); }
.portal-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-5); }
.file-details-body { padding: 0 var(--space-5) var(--space-5); overflow-wrap: anywhere; }
.file-details pre { line-height: 1.85; }
.file-responsibilities { margin: var(--space-5) 0; }
.file-responsibilities>div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,3fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.file-responsibilities dt { font-weight: 650; color: var(--color-primary-strong); }
.file-next { margin-top: var(--space-5); }
#layered-files code { overflow-wrap: anywhere; }
@media(max-width:639px) { .file-details-body { padding-inline: var(--space-3); }.file-responsibilities>div { grid-template-columns: 1fr; gap: var(--space-1); } }
.layered-diagram { overflow-wrap: anywhere; }
.layer-heading { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.layer-heading>strong { font-size: var(--font-size-card); }
.layer-heading .node-kicker { color: var(--color-primary-strong); }
.layer-stack { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.layer-stack>li { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: var(--space-3) var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-subtle); }
.layer-stack>li+li::before { content: '↓'; position: absolute; top: calc(-1 * var(--space-5)); left: 50%; color: var(--color-primary); line-height: var(--space-5); }
.layer-stack>li>div:first-child { display: grid; align-content: start; gap: var(--space-1); }
.layer-stack p,.layer-support p { margin: 0; }
.layer-stack>li>small,.layer-branches { grid-column: 1 / -1; }
.layer-branches { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
.layer-branches>div { display: grid; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--color-primary-border); border-radius: var(--radius-sm); background: var(--color-primary-soft); }
.layer-branches span { font-size: var(--font-size-helper); color: var(--color-secondary-text); }
.layer-support { margin-top: var(--space-4); padding: var(--space-4); border-left: 3px solid var(--color-primary); background: var(--color-primary-soft); }
.layer-boundary { display: grid; text-align: center; gap: var(--space-1); padding: var(--space-6) 0; color: var(--color-primary-strong); }
.layer-boundary span { font-size: var(--font-size-helper); color: var(--color-secondary-text); }
.layer-security { display: grid; gap: var(--space-1); padding: var(--space-4); margin-bottom: var(--space-5); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); }
@media(max-width:639px) { .layer-stack>li,.layer-branches { grid-template-columns: 1fr; } }
.check-list { padding-left: var(--space-5); color: var(--color-secondary-text); }
.check-list li { margin-bottom: var(--space-2); }
.mini-note { padding: var(--space-3); background: var(--color-primary-soft); border-radius: var(--radius-sm); color: var(--color-primary-strong); font-size: var(--font-size-helper); }
.module-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); }
.module-grid h3 { margin-top: var(--space-2); }
.module-grid p { margin: 0; font-size: var(--font-size-helper); }
details { margin: var(--space-5) 0; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); }
summary { min-height: 48px; padding: var(--space-4) var(--space-5); font-weight: 650; }
.details-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-4); padding: 0 var(--space-5) var(--space-5); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-surface-subtle); padding: var(--space-4); border-radius: var(--radius-sm); font-size: var(--font-size-helper); }
.details-grid li { padding-bottom: var(--space-3); }
.swatches { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.swatches article { padding: var(--space-3); }
.swatch { height: 64px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.swatches h3 { margin-bottom: 0; }
.swatches p { font-size: var(--font-size-helper); margin: var(--space-1) 0 0; }
.primary-color { background: var(--color-primary); }.success-color { background: var(--color-success); }.warning-color { background: var(--color-warning); }.danger-color { background: var(--color-danger); }.foreground-color { background: var(--color-foreground); }
.type-specimen h3 { font-size: var(--font-size-page); margin-top: var(--space-3); }
.type-display { font-size: 24px; line-height: 1.8; margin-bottom: var(--space-4); }
.spec-list { margin: 0; }
.spec-list>div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
dt { color: var(--color-secondary-text); } dd { margin: 0; }
label { display: block; font-weight: 650; margin: var(--space-4) 0 var(--space-1); }
input,select { width: 100%; min-width: 0; min-height: 48px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-foreground); }
input[readonly] { background: var(--color-surface-subtle); }
input[aria-invalid=true] { border-color: var(--color-danger); }
.required,.field-error { color: var(--color-danger); }
.field-error { display: block; min-height: var(--space-2); font-size: var(--font-size-helper); }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.table-demo { margin-top: var(--space-5); }
.search-field { width: min(100%,280px); }.search-field label { margin-top: 0; }
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
th,td { text-align: left; padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; overflow-wrap: anywhere; }
th { background: var(--color-surface-subtle); color: var(--color-secondary-text); font-size: var(--font-size-helper); }
th:first-child { width: 50%; }
td>strong,td>span:not(.status) { display: block; }
td>strong { margin-bottom: var(--space-1); }
td>span:not(.status) { color: var(--color-secondary-text); }
.catalog { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.catalog>div { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; }.catalog span { display: block; color: var(--color-secondary-text); }
.alert { padding: var(--space-4); border-radius: var(--radius-sm); margin: var(--space-4) 0; }
.alert p { margin: var(--space-1) 0 0; color: inherit; }
.alert a { color: inherit; }.alert ul { margin-bottom: 0; padding-left: var(--space-5); }
.empty-state { padding: var(--space-6) var(--space-3); text-align: center; }.empty-state p { margin: var(--space-2) 0 var(--space-4); }
.feedback-list { margin-top: 0; }.feedback-list>div { margin-bottom: var(--space-4); }.feedback-list dt { color: var(--color-foreground); font-weight: 700; }.feedback-list dd { color: var(--color-secondary-text); }
.skeleton { display: grid; gap: var(--space-3); padding: var(--space-6) 0; }.skeleton span { height: 18px; background: var(--color-surface-muted); border-radius: var(--radius-sm); }.skeleton span:last-child { width: 65%; }
.source-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-4); }.source-grid a { display: block; padding: var(--space-5); border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); text-decoration: none; }.source-grid a:hover { border-color: var(--color-primary); }.source-grid span { display: block; color: var(--color-secondary-text); font-size: var(--font-size-helper); margin-top: var(--space-2); }
.review-card { margin: var(--space-5) 0; }.review-flow { text-align: center; padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); margin-bottom: var(--space-5); }.review-flow>div { background: var(--color-surface-muted); padding: var(--space-3); margin: var(--space-3) 0; border-radius: var(--radius-sm); }.review-flow>span { display: block; font-size: var(--font-size-helper); color: var(--color-secondary-text); }.review-flow.after>div { background: var(--color-primary-soft); color: var(--color-primary-strong); }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); border-top: 1px solid var(--color-border); padding: var(--space-6) 0; font-size: var(--font-size-helper); color: var(--color-secondary-text); }
.toast { position: fixed; bottom: var(--space-5); right: var(--space-5); z-index: 5; width: min(460px,calc(100% - 40px)); display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--color-success-border); border-left: 4px solid var(--color-success); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-float); padding: var(--space-4); }.toast>div { flex: 1; color: var(--color-success-strong); }
dialog { width: min(520px,calc(100% - 32px)); padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-foreground); background: var(--color-surface); box-shadow: var(--shadow-float); }
dialog::backdrop { background: var(--color-foreground); opacity: .4; }
@media(min-width:1024px) and (hover:hover) and (pointer:fine) { input,select { min-height: 36px; padding: var(--space-1) var(--space-2); } }
@media(any-pointer:coarse) { input,select { min-height: 48px; } }
@media(max-width:1100px) { :root { --handbook-nav: 220px; }.sidebar { padding-inline: var(--space-3); } main { padding-inline: var(--space-5); }.portal-layout { grid-template-columns: 1fr; }.swatches { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:1023px) { .sidebar { position: static; width: auto; padding: var(--space-4) var(--space-5); border-right: 0; border-bottom: 1px solid var(--color-border); }.sidebar nav { display: flex; overflow-x: auto; margin-top: var(--space-3); padding-bottom: var(--space-2); }.sidebar nav a { flex-shrink: 0; }.nav-label,.sidebar-note { display: none; }.workspace { margin: 0; }.topbar { padding-inline: var(--space-5); min-height: 64px; }.hero { padding-top: var(--space-8); }.architecture { padding: var(--space-5); }.source-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:639px) { body { font-size: 16px; } main { padding-inline: var(--space-4); }.topbar { padding-inline: var(--space-4); }.topbar>span { display: none; } section { margin-block: 44px; }.hero { margin-top: 0; } h1 { font-size: 28px; }.desktop-only { display: none; }.hero-meta { gap: var(--space-2) var(--space-4); }.stack-grid,.two-col,.principles,.branch-grid,.support-grid,.details-grid,.catalog,.source-grid { grid-template-columns: 1fr; }.stack-card,.panel { padding: var(--space-5); }.stack-card .eyebrow { margin-bottom: var(--space-1); }.stack-card h2 { margin-top: var(--space-1); }.swatches { grid-template-columns: repeat(2,minmax(0,1fr)); }.module-grid { grid-template-columns: 1fr; }.architecture { padding: var(--space-4); }.api-zone { padding: var(--space-4); }.pipeline { grid-template-columns: 1fr; }.pipeline>div { text-align: center; }.pipeline .pipe-arrow { transform: rotate(90deg); text-align: center; }.spec-list>div { display: block; }.spec-list dd { font-weight: 650; }.table-demo { padding: var(--space-4); } th,td { padding: var(--space-3) var(--space-1); font-size: var(--font-size-helper); }th:first-child { width: 44%; } .status { padding-inline: var(--space-2); } .search-field { width: 100%; } .type-display { font-size: 22px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
@media print { .sidebar,.topbar,.actions,.toast { display: none !important; }.workspace { margin: 0; } main { max-width: none; padding: 0; }section { margin: 24px 0; }.panel,.flow-node { break-inside: avoid; } }