*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body, system-ui, -apple-system, sans-serif); line-height: 1.6; color: var(--color-text, #1a1a2e); background: var(--color-bg, #fff); min-height: 100vh; display: flex; flex-direction: column; position: relative; }
main { flex: 1; }
a { color: var(--color-accent, #6366f1); }
.aup-skip-link {
position: absolute;
inset-inline-start: 1rem;
inset-block-start: -3.5rem;
z-index: 1000;
padding: 0.5rem 1rem;
border-radius: 4px;
background: var(--color-text, #1a1a2e);
color: var(--color-bg, #fff);
font-weight: 600;
text-decoration: none;
transition: inset-block-start 0.15s;
}
.aup-skip-link:focus {
inset-block-start: 1rem;
outline: 2px solid var(--color-accent, #6366f1);
outline-offset: 2px;
}
:root {
--page-max: var(--container-max, 1280px);
}
body > main {
width: 100%;
max-width: var(--aup-content-max, none);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
body > .aup-app-footer,
body > header.aup-app-header > .aup-app-header-bar,
body > header.aup-app-header > .aup-app-header-strip {
width: 100%;
max-width: var(--page-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
box-sizing: border-box;
}
.container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter); width: 100%; }
.page-header { padding: 3rem 0 2rem; }
.page-header h1 { margin: 0 0 0.5rem; font-size: 2rem; font-weight: 700; }
.page-header-desc { margin: 0; color: var(--color-text-muted, #64748b); font-size: 1.1rem; }
.section-header { padding: 2rem 0 1rem; }
.section-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0; color: var(--color-accent, #6366f1); margin-bottom: 0.25rem; }
.section-title { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 600; }
.section-desc { margin: 0; color: var(--color-text-muted, #64748b); }
.aup-input-field,
.aup-editor {
display: grid;
gap: 0.45rem;
width: 100%;
}
.aup-input-label,
.aup-editor-label {
color: color-mix(in srgb, var(--color-text, #111827) 82%, var(--color-dim, #64748b));
font-size: 0.86rem;
font-weight: 720;
}
.aup-input-control,
.aup-editor-control {
width: 100%;
min-height: 2.65rem;
padding: 0.62rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 82%, transparent);
border-radius: var(--radius-lg, 8px);
color: var(--color-text, #111827);
background: color-mix(in srgb, var(--color-surface, #f8fafc) 92%, var(--color-bg, #fff));
font: inherit;
}
.aup-input-control:focus,
.aup-editor-control:focus {
outline: 2px solid color-mix(in srgb, var(--color-accent, #6366f1) 34%, transparent);
outline-offset: 1px;
border-color: color-mix(in srgb, var(--color-accent, #6366f1) 62%, var(--color-border, #e2e8f0));
}
.aup-input-control[role="switch"] {
width: 2.6rem;
min-height: 1.35rem;
accent-color: var(--color-accent, #6366f1);
}
.aup-input-control[type="range"] {
padding-inline: 0;
accent-color: var(--color-accent, #6366f1);
}
progress.aup-input-control {
padding: 0;
overflow: hidden;
accent-color: var(--color-accent, #6366f1);
}
.aup-editor-control {
min-height: 12rem;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
font-size: 0.92rem;
line-height: 1.55;
resize: vertical;
}
.aup-action[data-exec][data-exec-state="running"] {
cursor: wait;
opacity: 0.72;
}
.aup-action[data-exec][data-exec-state="error"] {
border-color: color-mix(in srgb, var(--color-error, #dc2626) 68%, var(--color-border, #e2e8f0));
}
.aup-exec-result {
margin-top: 0.55rem;
padding: 0.62rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 82%, transparent);
border-radius: var(--radius-lg, 8px);
background: color-mix(in srgb, var(--color-surface, #f8fafc) 94%, var(--color-bg, #fff));
color: color-mix(in srgb, var(--color-text, #111827) 84%, var(--color-dim, #64748b));
font-size: 0.86rem;
line-height: 1.45;
}
.aup-exec-result:empty {
display: none;
}
.aup-exec-result[data-state="success"] {
border-color: color-mix(in srgb, var(--color-success, #16a34a) 52%, var(--color-border, #e2e8f0));
color: var(--color-text, #111827);
}
.aup-exec-result[data-state="error"] {
border-color: color-mix(in srgb, var(--color-error, #dc2626) 58%, var(--color-border, #e2e8f0));
color: var(--color-error, #dc2626);
}
main .aup-view[data-variant="settings-sidebar"] {
position: sticky;
top: 88px;
max-height: calc(100vh - 112px);
overflow: auto;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 78%, transparent);
border-radius: var(--radius-lg, 8px);
background:
linear-gradient(180deg, color-mix(in srgb, var(--color-accent, #6366f1) 9%, transparent), transparent 42%),
color-mix(in srgb, var(--color-surface, #f8fafc) 94%, var(--color-bg, #fff));
box-shadow: 0 20px 56px color-mix(in srgb, #000 10%, transparent);
}
main .aup-view[data-variant="settings-sidebar"] > .aup-text:first-child {
margin: 0 0 0.65rem;
padding: 0 0 0.8rem;
border-bottom: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 70%, transparent);
color: var(--color-text, #111827);
font-size: 0.86rem;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
}
main .aup-view[data-variant="settings-sidebar"] .aup-action {
min-height: 2.35rem;
margin: 0.12rem 0;
padding: 0.45rem 0.65rem;
border: 1px solid transparent;
border-radius: var(--radius-lg, 8px);
color: color-mix(in srgb, var(--color-text, #111827) 76%, var(--color-dim, #64748b));
font-weight: 700;
text-decoration: none;
}
main .aup-view[data-variant="settings-sidebar"] .aup-action:hover {
color: var(--color-text, #111827);
background: color-mix(in srgb, var(--color-accent, #6366f1) 8%, transparent);
}
main .aup-view[data-variant="settings-sidebar"] .aup-action[data-variant="primary"] {
width: 100%;
margin: 0.12rem 0;
border-color: color-mix(in srgb, var(--color-accent, #6366f1) 36%, transparent);
color: var(--color-text, #111827);
background:
linear-gradient(90deg, color-mix(in srgb, var(--color-accent, #6366f1) 16%, transparent), transparent),
color-mix(in srgb, var(--color-surface, #f8fafc) 86%, var(--color-accent, #6366f1));
box-shadow: none;
}
main .aup-view[data-variant="settings-content"] {
width: min(100%, 860px);
padding: 0.5rem 0 4rem;
}
main .aup-view[data-variant="settings-content"] > .aup-text[data-variant="badge"]:first-child {
width: fit-content;
margin: 0 0 1rem;
padding: 0.32rem 0.58rem;
border: 1px solid color-mix(in srgb, var(--color-accent, #6366f1) 34%, var(--color-border, #e2e8f0));
border-radius: 999px;
color: var(--color-accent, #6366f1);
background: color-mix(in srgb, var(--color-accent, #6366f1) 8%, transparent);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0;
}
main .aup-view[data-variant="settings-content"] > .aup-text[data-level="1"] {
max-width: 780px;
margin: 0 0 1rem;
color: var(--color-text, #111827);
font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
font-size: clamp(2.4rem, 6vw, 4.8rem);
font-weight: 820;
line-height: 0.98;
letter-spacing: 0;
}
main .aup-view[data-variant="settings-content"] > .aup-text:not([data-level]):not([data-mode]) {
max-width: 760px;
margin: 0 0 1.05rem;
color: color-mix(in srgb, var(--color-text, #111827) 82%, var(--color-dim, #64748b));
font-size: 1.02rem;
line-height: 1.82;
}
main .aup-view[data-variant="settings-content"] > .aup-text[data-level="2"] {
margin: 2.5rem 0 0.75rem;
padding-top: 1.25rem;
border-top: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 68%, transparent);
color: var(--color-text, #111827);
font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
font-size: clamp(1.45rem, 3vw, 2rem);
font-weight: 760;
line-height: 1.16;
letter-spacing: 0;
}
main .aup-view[data-variant="settings-content"] > .aup-view[data-layout="row"] {
gap: 0.75rem;
margin-top: 1.4rem;
}
main .aup-view[data-variant="settings-content"] > .aup-view[data-layout="row"] .aup-action {
min-height: 2.55rem;
padding: 0.55rem 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 72%, transparent);
border-radius: 999px;
color: var(--color-text, #111827);
background: color-mix(in srgb, var(--color-surface, #f8fafc) 86%, transparent);
font-weight: 800;
text-decoration: none;
box-shadow: none;
}
main .aup-view[data-variant="settings-content"] > .aup-view[data-layout="row"] .aup-action[data-variant="primary"] {
border-color: color-mix(in srgb, var(--color-accent, #6366f1) 52%, transparent);
color: var(--color-on-accent, #fff);
background: linear-gradient(
135deg,
var(--color-accent, #6366f1),
var(--color-accent-secondary, var(--color-accent, #6366f1))
);
}
main .aup-view[data-variant="settings-content"] > .aup-view[data-layout="row"] .aup-action:hover {
transform: translateY(-1px);
}
@media (max-width: 860px) {
main .aup-view[data-variant="settings-sidebar"] {
position: static;
width: 100% !important;
max-height: none;
}
main .aup-view[data-variant="settings-content"] {
width: 100%;
}
}
.aup-deck-frame .aup-overlay-shell.open,
.aup-overlay-shell.open {
display: block;
position: relative;
min-height: 160px;
width: 100%;
}
.aup-overlay-shell.open > .aup-overlay-backdrop {
position: absolute;
border-radius: var(--radius-lg, 12px);
}
.aup-overlay-shell.open > .aup-overlay-dialog,
.aup-overlay-shell.open > .aup-overlay-drawer {
position: absolute;
max-width: min(92%, 420px);
max-height: 70%;
}
.aup-overlay-shell[data-mode="toast"].open {
min-height: auto;
}
.aup-overlay-toast {
display: inline-flex;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-md, 8px);
background: var(--color-surface, #f8fafc);
border: 1px solid var(--color-border, #e2e8f0);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.aup-explorer-shell,
.aup-surface-shell,
.aup-wm-shell,
.aup-chat-shell,
.aup-cmt-shell,
.aup-entity-overview-shell,
.aup-terminal-shell {
background: var(--card-bg, var(--color-surface, #fff));
border: var(--card-border, 1px solid var(--color-border, #e2e8f0));
border-radius: var(--radius-lg, 12px);
overflow: hidden;
}
.aup-explorer-header,
.aup-surface-chrome,
.aup-wm-titlebar,
.aup-chat-header,
.aup-cmt-header,
.aup-entity-overview-header,
.aup-terminal-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.55rem 0.85rem;
border-bottom: 1px solid var(--color-border, #e2e8f0);
font-weight: 600;
font-size: 0.9rem;
}
.aup-surface-badge,
.aup-wm-badge,
.aup-chat-badge,
.aup-cmt-badge {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-dim, #64748b);
}
.aup-explorer-list { list-style: none; margin: 0; padding: 0.35rem 0; }
.aup-explorer-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.85rem;
font-size: 0.9rem;
}
.aup-explorer-path { margin-left: auto; color: var(--color-dim, #64748b); font-size: 0.75rem; font-family: ui-monospace, monospace; }
.aup-explorer-root { font-size: 0.75rem; color: var(--color-dim, #64748b); }
.aup-surface-content,
.aup-wm-body { padding: 0.85rem; }
.aup-chat-shell { min-height: 220px; max-height: 360px; }
.aup-cb-history { flex: 1; overflow: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.55rem; }
.aup-cb-msg { border-radius: 8px; padding: 0.5rem 0.7rem; background: color-mix(in srgb, var(--color-surface, #f8fafc) 90%, transparent); }
.aup-cb-msg-user { align-self: flex-end; background: color-mix(in srgb, var(--color-accent, #6366f1) 14%, transparent); }
.aup-cb-role { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--color-dim, #64748b); margin-bottom: 0.2rem; }
.aup-cb-bar { display: flex; gap: 0.4rem; padding: 0.55rem; border-top: 1px solid var(--color-border, #e2e8f0); }
.aup-cb-input { flex: 1; min-width: 0; padding: 0.4rem 0.55rem; border-radius: 6px; border: 1px solid var(--color-border, #e2e8f0); }
.aup-cb-send { padding: 0.4rem 0.75rem; border-radius: 6px; border: 1px solid var(--color-border, #e2e8f0); }
.aup-cb-bar--disabled { opacity: 0.65; }
.aup-chip-shell {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-accent, #6366f1) 10%, transparent);
color: var(--color-text, #111);
font-size: 0.85rem;
font-weight: 600;
margin-inline-end: 0.35rem;
}
.aup-chip-shell[data-color="success"] { background: color-mix(in srgb, #34a853 14%, transparent); color: #1e7e34; }
.aup-chip-shell[data-color="warning"] { background: color-mix(in srgb, #f9ab00 16%, transparent); color: #a66a00; }
.aup-chip-shell[data-color="error"] { background: color-mix(in srgb, #ea4335 14%, transparent); color: #c5221f; }
.aup-chip-shell[data-color="info"] { background: color-mix(in srgb, #1a73e8 12%, transparent); color: #1a73e8; }
.aup-chip-count {
min-width: 1.1rem;
padding: 0 0.3rem;
border-radius: 999px;
background: color-mix(in srgb, currentColor 12%, transparent);
font-size: 0.75rem;
text-align: center;
}
.aup-breadcrumb-shell .aup-breadcrumb-list {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.35rem;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.9rem;
}
.aup-breadcrumb-sep { margin: 0 0.15rem; color: var(--color-dim, #64748b); }
.aup-breadcrumb-current { font-weight: 600; }
.aup-kv-shell,
.aup-entity-card .aup-kv {
display: grid;
gap: 0.35rem;
padding: 0.65rem 0.85rem;
}
.aup-kv-row {
display: grid;
grid-template-columns: minmax(6rem, 34%) 1fr;
gap: 0.5rem;
padding: 0.25rem 0;
border-bottom: 1px solid color-mix(in srgb, var(--color-border, #e2e8f0) 70%, transparent);
font-size: 0.9rem;
}
.aup-kv-label { color: var(--color-dim, #64748b); font-weight: 600; }
.aup-kv-title,
.aup-entity-card-title {
margin: 0;
padding: 0.55rem 0.85rem 0;
font-size: 0.95rem;
font-weight: 700;
}
.aup-entity-cards { display: grid; gap: 0.65rem; padding: 0.65rem; }
.aup-entity-card {
border: 1px solid var(--color-border, #e2e8f0);
border-radius: var(--radius-md, 8px);
overflow: hidden;
}
.aup-pagination-shell {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.4rem 0.55rem;
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 999px;
font-size: 0.85rem;
}
.aup-pagination-btn {
border: 0;
background: transparent;
color: var(--color-dim, #64748b);
cursor: not-allowed;
}
.aup-tooltip-shell {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
.aup-tooltip-content {
display: inline-block;
padding: 0.35rem 0.55rem;
border-radius: 6px;
background: var(--color-text, #111);
color: var(--color-bg, #fff);
font-size: 0.78rem;
max-width: 16rem;
}
.aup-terminal-shell { background: #0c0c0c; color: #e2e8f0; }
.aup-terminal-titlebar { border-bottom-color: #222; color: #94a3b8; }
.aup-terminal-body {
margin: 0;
padding: 0.75rem 0.9rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.82rem;
line-height: 1.45;
white-space: pre-wrap;
min-height: 120px;
}
.aup-terminal-line { margin: 0; }
.aup-canvas-toolbar--static {
display: flex;
justify-content: space-between;
gap: 0.5rem;
padding: 0.4rem 0.65rem;
border-bottom: 1px solid var(--color-border, #e2e8f0);
font-size: 0.8rem;
color: var(--color-dim, #64748b);
}
.aup-canvas-area { padding: 0.5rem; }
.aup-cmt-list { padding: 0.65rem 0.85rem; display: grid; gap: 0.65rem; }
.aup-cmt-item {
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 8px;
padding: 0.55rem 0.7rem;
}
.aup-cmt-meta {
display: flex;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.8rem;
margin-bottom: 0.25rem;
}
.aup-cmt-body { margin: 0; font-size: 0.9rem; }
.aup-cmt-empty { padding: 0.85rem; color: var(--color-dim, #64748b); font-size: 0.9rem; }
.aup-calendar-agenda { display: grid; gap: 0.4rem; }
.aup-calendar-agenda-row { display: flex; gap: 0.75rem; font-size: 0.85rem; }
.aup-calendar-agenda-date { color: var(--color-dim, #64748b); min-width: 6rem; font-variant-numeric: tabular-nums; }
.aup-deck-widget-shell {
border: 1px solid var(--color-border, #e2e8f0);
border-radius: var(--radius-md, 8px);
overflow: hidden;
background: var(--color-surface, #fff);
}
.aup-deck-widget-chrome {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.55rem 0.85rem;
border-bottom: 1px solid var(--color-border, #e2e8f0);
font-weight: 600;
font-size: 0.9rem;
}
.aup-deck-widget-badge {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-dim, #64748b);
}
.aup-deck-widget-body { padding: 0.85rem; }
.aup-deck-widget-note { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--color-dim, #64748b); }
.aup-afs-stat-value { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.aup-afs-stat-label { color: var(--color-dim, #64748b); font-size: 0.9rem; }
.aup-dropzone-area {
display: grid;
gap: 0.35rem;
place-items: center;
min-height: 8rem;
padding: 1.25rem;
border: 2px dashed var(--color-border, #e2e8f0);
border-radius: 8px;
text-align: center;
}
.aup-finance-table, .aup-natal-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.aup-finance-table th, .aup-finance-table td,
.aup-natal-table th, .aup-natal-table td {
text-align: left;
padding: 0.35rem 0.5rem;
border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.aup-progress-track {
height: 0.85rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-border, #e2e8f0) 80%, transparent);
overflow: hidden;
}
.aup-progress-fill {
height: 100%;
background: var(--color-accent, #6366f1);
}
.aup-searchable-dropdown-current {
padding: 0.45rem 0.65rem;
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 6px;
margin-bottom: 0.5rem;
}
.aup-searchable-dropdown-list { list-style: none; margin: 0; padding: 0; }
.aup-searchable-dropdown-item { padding: 0.3rem 0.5rem; }
.aup-searchable-dropdown-item.selected { font-weight: 700; }
.aup-webgl-placeholder {
display: grid;
place-items: center;
min-height: 10rem;
background: color-mix(in srgb, var(--color-accent, #6366f1) 8%, transparent);
border-radius: 8px;
font-weight: 700;
}
.aup-post-editor-body { width: 100%; min-height: 8rem; font-family: inherit; }
.aup-type-block-body { white-space: pre-wrap; font-size: 0.9rem; }
.aup-xeyes-shell { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px 8px; }
:root,
[data-tone][data-palette] {
  --ds-bg: var(--color-bg);
  --ds-surface: var(--color-surface);
  --ds-text: var(--color-text);
  --ds-dim: var(--color-dim);
  --ds-accent: var(--color-accent);
  --ds-accent-bg: var(--color-accent-bg);
  --ds-border: var(--color-border);
  --ds-error: var(--color-error);
  --ds-success: var(--color-success);
  --ds-radius: var(--radius-md);
  --ds-radius-sm: var(--radius-sm);
  --ds-radius-lg: var(--radius-lg);
  --ds-spacing: var(--space-element);
  --ds-spacing-block: var(--space-block);
  --ds-spacing-section: var(--space-section);
  --ds-font-body: var(--font-body);
  --ds-font-heading: var(--font-heading);
  --font-body: "Sora", sans-serif;
  --color-dim: #6b6b78;
  --content-max: 640px;
  --color-accent: #2a6e00;
  --color-surface: #ffffff;
  --font-heading: "DM Serif Display", serif;
  --color-bg: #fafaf8;
  --color-border: rgba(0,0,0,0.08);
  --container-max: 1200px;
  --font-mono: "JetBrains Mono", monospace;
  --color-text: #1a1a1f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]),
  [data-tone][data-palette]:not([data-mode="light"]) {
    --color-dim: #8b89a0;
    --color-accent: #c4f04d;
    --color-surface: #1a1a25;
    --color-bg: #0a0a0f;
    --color-border: rgba(255,255,255,0.06);
    --color-text: #e8e6f0;
  }
}
[data-tone][data-palette][data-mode="dark"] {
  --color-dim: #8b89a0;
  --color-accent: #c4f04d;
  --color-surface: #1a1a25;
  --color-bg: #0a0a0f;
  --color-border: rgba(255,255,255,0.06);
  --color-text: #e8e6f0;

}
.portal-header {
  --portal-accent: #a86f08;
  --portal-accent-hover: #8f5f07;
  --portal-accent-ink: #fffaf0;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid transparent;
  padding: 0;
  backdrop-filter: blur(20px) saturate(1.1);
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

.portal-header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: rgba(226, 219, 207, 0.85);
}

[data-mode="dark"] .portal-header {
  --portal-accent: #d99735;
  --portal-accent-hover: #f0ad47;
  --portal-accent-ink: #17110b;
  background: rgba(21, 17, 13, 0.9);
  color: #efe6d5;
}

[data-mode="dark"] .portal-header.scrolled {
  background: rgba(21, 17, 13, 0.96);
  border-bottom-color: rgba(90, 70, 49, 0.82);
}

.portal-header .container {
  /* Match the Aside landing shell: min(1440px, 100% - 32px). */
  width: min(1440px, calc(100% - 32px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 1.5rem;
}

/* Header grammar: left group holds logo + main nav; right group holds
   language picker, mode toggle, and a reserved user-menu slot. */
.portal-header .header-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.6rem);
}

.portal-header .logo {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: 0;
  color: #3b352e;
  text-decoration: none;
}

[data-mode="dark"] .portal-header .logo,
[data-mode="dark"] .portal-header .logo .logo-svg svg {
  color: #efe6d5;
}

/* When the site provides an inline SVG logo, hide the textual site name —
   the SVG is the brand mark — and size the SVG to header height. */
.portal-header .logo .logo-svg {
  display: inline-flex;
  align-items: center;
}

.portal-header .logo .logo-svg svg {
  height: 1.65rem;
  width: auto;
  display: block;
  /* The wordmark uses currentColor so it follows light/dark mode; the
     branded gradient mark inside the SVG keeps its own colors. */
  color: #3b352e;
}

.portal-header.has-logo-svg .logo {
  gap: 0;
}

.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;
}

.portal-header .main-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.portal-header .main-nav a {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-dim, #6b7280);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition: color 0.2s ease;
  position: relative;
}

.portal-header .main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--portal-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.portal-header .main-nav a:hover {
  color: var(--color-text, #0f172a);
}

[data-mode="dark"] .portal-header .main-nav a:hover {
  color: #f4ead8;
}

.portal-header .main-nav a:hover::after {
  transform: scaleX(1);
}

/* Header controls: optional CTA + locale picker + mode toggle + user slot. */
.portal-header .header-controls {
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

/* Primary CTA (nav item with variant:"cta") — a filled accent pill sized to
   the 32px control row so it reads as the header's main action rather than a
   stray label. Marketing sites opt in per nav item; default nav links are
   unaffected. */
.portal-header .nav-cta {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 0.95rem;
  margin-right: 0.25rem;
  border-radius: 999px;
  background: var(--portal-accent);
  color: var(--portal-accent-ink);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.portal-header .nav-cta:hover {
  background: var(--portal-accent-hover);
  transform: translateY(-1px);
}

.portal-header .user-slot:empty {
  display: none;
}

.portal-header .user-slot {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin-left: 0;
}

/* Align the runtime-rendered header-actions strip (.web/template/header-actions
   → .aup-app-header-action buttons, e.g. the anonymous Login trigger) with the
   portal control pills above: same 32px round pill, transparent fill, dim
   stroke/glyph, and accent hover. Only presentation — markup stays owned by
   the shared SSR renderer. */
.portal-header .user-slot .aup-app-header-action {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 60%, transparent);
  color: var(--color-dim, #6b7280);
}

[data-mode="dark"] .portal-header .user-slot .aup-app-header-action {
  border-color: rgba(112, 89, 61, 0.72);
  color: #b8a993;
}

.portal-header .user-slot .aup-app-header-action:hover {
  color: var(--color-text, #0f172a);
  background: transparent;
  border-color: color-mix(in srgb, var(--portal-accent) 40%, var(--color-border, #e5e7eb));
}

[data-mode="dark"] .portal-header .user-slot .aup-app-header-action:hover {
  color: #f4ead8;
  border-color: color-mix(in srgb, var(--portal-accent) 52%, rgba(112, 89, 61, 0.72));
}

.portal-header .user-slot .aup-app-header-action svg {
  width: 16px;
  height: 16px;
}

/* Post-hydration authenticated state: keep the avatar trigger on the same
   32px control row. */
.portal-header .user-slot .aup-app-header-user-menu-trigger {
  height: 32px;
  box-sizing: border-box;
}

.portal-header .locale-picker {
  position: relative;
}

.portal-header .locale-picker-btn,
.portal-header .mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 32px;
  padding: 0 0.65rem;
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 60%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-dim, #6b7280);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-mode="dark"] .portal-header .locale-picker-btn,
[data-mode="dark"] .portal-header .mode-toggle {
  border-color: rgba(112, 89, 61, 0.72);
  color: #b8a993;
}

/* Both are icon-only square pills (the locale picker is now a globe-only
   trigger aligned with the AUP app-header locale-switcher). */
.portal-header .locale-picker-btn,
.portal-header .mode-toggle {
  width: 32px;
  padding: 0;
}

.portal-header .locale-picker-btn:hover,
.portal-header .mode-toggle:hover {
  color: var(--color-text, #0f172a);
  border-color: color-mix(in srgb, var(--portal-accent) 40%, var(--color-border, #e5e7eb));
}

[data-mode="dark"] .portal-header .locale-picker-btn:hover,
[data-mode="dark"] .portal-header .mode-toggle:hover {
  color: #f4ead8;
  border-color: color-mix(in srgb, var(--portal-accent) 52%, rgba(112, 89, 61, 0.72));
}

.portal-header .locale-picker-btn .icon-globe {
  transition: transform 0.2s;
}

.portal-header .locale-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 152px;
  background: color-mix(in srgb, var(--color-bg, #fff) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 70%, transparent);
  border-radius: 12px;
  box-shadow: 0 22px 48px color-mix(in srgb, var(--color-text, #0f172a) 12%, transparent);
  padding: 6px;
  z-index: 100;
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
}

[data-mode="dark"] .portal-header .locale-dropdown {
  background: rgba(27, 22, 17, 0.96);
  border-color: rgba(112, 89, 61, 0.78);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
}

.portal-header .locale-dropdown[hidden] {
  display: none;
}

.portal-header .locale-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.8rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-dim, #6b7280);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.86rem;
  font-weight: 460;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

[data-mode="dark"] .portal-header .locale-option {
  color: #b8a993;
}

.portal-header .locale-option:hover {
  background: color-mix(in srgb, var(--portal-accent) 6%, transparent);
  color: var(--color-text, #0f172a);
}

[data-mode="dark"] .portal-header .locale-option:hover {
  color: #f4ead8;
}

.portal-header .locale-option.active {
  color: var(--portal-accent);
  font-weight: 540;
}

.portal-header .locale-option.active::before {
  content: "•";
  color: var(--portal-accent);
  font-weight: 700;
}

/* Show sun by default, moon when dark */
.portal-header .mode-toggle .icon-moon {
  display: none;
}
.portal-header .mode-toggle .icon-sun {
  display: block;
}
.portal-header .mode-toggle.is-dark .icon-moon {
  display: block;
}
.portal-header .mode-toggle.is-dark .icon-sun {
  display: none;
}

.portal-header :is(a, button):focus-visible {
  outline: 3px solid var(--portal-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .portal-header,
  .portal-header *,
  .portal-header *::before,
  .portal-header *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 860px) {
  .portal-header .container {
    min-height: auto;
    /* Horizontal gutter stays var(--page-gutter) (shared column); only add
       vertical breathing room now that the row can wrap. */
    padding-block: 0.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Only let the left group grow when it actually holds a nav (which needs the
     room / scrolls). A logo-only left group must stay its natural width, or it
     expands to fill the row and pushes the controls onto a second line — the
     stray line-break on minimal headers like aside. */
  .portal-header .container:has(.main-nav a) .header-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 1.25rem;
  }

  .portal-header .header-controls {
    flex-shrink: 0;
  }

  .portal-header .main-nav {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 1rem;
  }

  .portal-header .main-nav::-webkit-scrollbar {
    display: none;
  }

  .portal-header .main-nav a {
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  /* Content-fit tightening so a minimal single-row header (logo + CTA + control
     pills) fits a ~375px phone without wrapping. The horizontal gutter stays
     var(--page-gutter) (16px) so the header still aligns with the sections;
     only the inter-item gaps + CTA padding shrink. */
  .portal-header .container {
    gap: 0.5rem;
    padding-inline: 16px;
  }
  .portal-header .header-controls {
    gap: 0.24rem;
  }
  .portal-header .nav-cta {
    padding: 0 0.58rem;
    margin-right: 0;
    font-size: 0.72rem;
  }

  /* Stack into rows ONLY when there's an actual left nav that needs a full row
     to breathe. A minimal header — logo + right-side controls/CTA with an empty
     main-nav (e.g. aside, whose only action is a right-side "Open Web" CTA)
     — fits comfortably on one row, so forcing a second row just looked like a
     stray line-break. :has() keeps the crowded-nav sites stacking as before;
     the container's flex-wrap (from the 860px block) still catches overflow on
     very narrow screens for the single-row case. */
  .portal-header .container:has(.main-nav a) {
    flex-direction: column;
    align-items: flex-start;
  }

  .portal-header .container:has(.main-nav a) .header-left {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .portal-header .container:has(.main-nav a) .header-controls {
    width: 100%;
    justify-content: space-between;
  }
}

/* Docs owns its grid placement; these rules give article detail pages the same
   TOC disclosure and active-link vocabulary without coupling either layout. */
.detail-content-sidebar .in-page-toc {
  position: sticky;
  top: 6rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-border, #e8e8e8);
}

.detail-content-sidebar .docs-toc-title {
  margin: 0 0 0.8rem;
  color: var(--color-text, #171717);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-content-sidebar .docs-toc-toggle {
  display: none;
}

.detail-content-sidebar .docs-toc-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-content-sidebar .docs-toc-link {
  display: block;
  padding: 0.32rem 0;
  color: var(--color-dim, #737373);
  font-size: 0.82rem;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.15s ease;
}

.detail-content-sidebar .docs-toc-item--h3 .docs-toc-link {
  padding-left: 0.85rem;
  font-size: 0.77rem;
}

.detail-content-sidebar .docs-toc-link:hover,
.detail-content-sidebar .docs-toc-link.is-active {
  color: var(--color-accent, #1e6fd9);
}

.detail-content-sidebar .docs-toc-link.is-active {
  font-weight: 650;
}

@media (max-width: 1100px) {
  .detail-content-sidebar .in-page-toc {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 1px solid var(--color-border, #e8e8e8);
    border-radius: var(--radius-lg, 8px);
    background: var(--color-surface, #fafafa);
  }

  .detail-content-sidebar .docs-toc-title {
    display: none;
  }

  .detail-content-sidebar .docs-toc-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 0;
    background: transparent;
    color: var(--color-text, #171717);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
  }

  .detail-content-sidebar .docs-toc-toggle-icon::before {
    content: "+";
  }

  .detail-content-sidebar .docs-toc-toggle[aria-expanded="true"] .docs-toc-toggle-icon::before {
    content: "−";
  }

  .detail-content-sidebar .docs-toc-list {
    display: none;
    padding: 0 1rem 0.85rem;
  }

  .detail-content-sidebar .in-page-toc.is-open .docs-toc-list {
    display: flex;
  }
}

[data-media-lightbox] .media-lightbox-figure {
  max-width: 100%;
  margin: 1.4rem 0;
}

[data-media-lightbox] .media-lightbox-trigger {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

[data-media-lightbox] .media-lightbox-trigger:focus-visible {
  border-radius: var(--radius-lg, 8px);
  outline: 3px solid var(--color-accent, #1e6fd9);
  outline-offset: 4px;
}

[data-media-lightbox] .media-lightbox-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}

[data-media-lightbox][data-media-breakout] .media-lightbox-figure {
  width: min(var(--media-breakout-max, var(--container-max, 1280px)), calc(100vw - 2rem));
  max-width: min(var(--media-breakout-max, var(--container-max, 1280px)), calc(100vw - 2rem));
  margin: 1.75rem 50%;
  transform: translateX(-50%);
}

[data-media-lightbox][data-media-breakout] .media-lightbox-trigger {
  width: 100%;
}

[data-media-lightbox][data-media-breakout] .media-lightbox-figure img {
  width: auto;
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--color-border, #e8e8e8) 78%, transparent);
}

[data-media-lightbox] .media-lightbox-caption {
  max-width: var(--content-max, 820px);
  margin: 0.75rem auto 0;
  color: var(--color-dim, #737373);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
}

.media-lightbox[hidden] {
  display: none;
}

.media-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  background: color-mix(in srgb, #000 88%, transparent);
  animation: media-lightbox-fade-in 180ms ease-out;
}

.media-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  object-fit: contain;
  animation: media-lightbox-image-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.media-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 999px;
  background: rgb(0 0 0 / 55%);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

.media-lightbox-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

body.media-lightbox-open {
  overflow: hidden;
}

@keyframes media-lightbox-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes media-lightbox-image-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-lightbox,
  .media-lightbox img {
    animation: none;
  }
}

@media (max-width: 768px) {
  [data-media-lightbox][data-media-breakout] .media-lightbox-figure {
    width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
  }
}

/* docs-page — Mintlify-style docs layout.
   Two columns: sidebar nav + prose content.
   Inherits site tokens: --color-bg / --color-text / --color-accent / --font-display / --font-body / --font-mono. */

.docs-shell {
  --docs-sidebar: 280px;
  --docs-content: 760px;
  --docs-rule: color-mix(in srgb, var(--color-border, #e5e7eb) 55%, transparent);
  --docs-rule-soft: color-mix(in srgb, var(--color-border, #e5e7eb) 35%, transparent);
  --docs-muted: color-mix(in srgb, var(--color-dim, #6b7280) 88%, var(--color-text, #0f172a));
  --docs-soft-bg: color-mix(
    in srgb,
    var(--color-accent, #2563eb) 5%,
    var(--color-surface, #fafafa)
  );

  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--page-gutter) clamp(4rem, 8vw, 7rem);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--docs-sidebar) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  color: var(--color-text, #0f172a);
}

@media (min-width: 961px) {
  .docs-shell {
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
    gap: clamp(2rem, 3vw, 2.5rem);
  }
}

/* ── Sidebar ──────────────────────────────────────── */

.docs-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  padding-right: 0.75rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.docs-sidebar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
  color: var(--color-text, #0f172a);
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 460;
  letter-spacing: -0.005em;
  text-decoration: none;
}

.docs-sidebar-brand:hover {
  color: var(--color-accent, #2563eb);
}

.docs-sidebar-mark {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: linear-gradient(
    135deg,
    var(--color-accent, #2563eb),
    var(--color-accent-secondary, var(--color-accent, #2563eb))
  );
}

.docs-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.docs-nav-group-label {
  margin: 0 0 0.75rem;
  padding-left: 0.7rem;
  color: var(--color-dim, #6b7280);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.docs-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.docs-nav-link {
  display: block;
  padding: 0.45rem 0.7rem;
  border-left: 2px solid transparent;
  margin-left: -2px;
  color: var(--docs-muted);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.9rem;
  font-weight: 440;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.docs-nav-link:hover {
  color: var(--color-text, #0f172a);
  background: color-mix(in srgb, var(--color-accent, #2563eb) 5%, transparent);
}

.docs-nav-link.is-active {
  color: var(--color-accent, #2563eb);
  border-left-color: var(--color-accent, #2563eb);
  font-weight: 500;
}

/* ── Recursive `_nav.yaml` sidebar tree (arc#2436 Phase 4) ─── */
/* Same `.docs-sidebar-nav` container, same mobile drawer toggle as the flat
   sections nav above — this only changes what's inside it when a collection
   has a `_nav.yaml`. */

.docs-nav-tree,
.docs-nav-tree-children {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-nav-tree-children {
  padding-left: 0.9rem;
  margin-top: 0.05rem;
}

.docs-nav-tree-children[hidden] {
  display: none;
}

.docs-nav-tree-row {
  display: flex;
  align-items: stretch;
}

.docs-nav-tree-row .docs-nav-tree-link {
  flex: 1;
}

.docs-nav-tree-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border: 0;
  background: transparent;
  color: var(--docs-muted);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  cursor: pointer;
}

.docs-nav-tree-toggle--group {
  width: 100%;
  justify-content: space-between;
  padding: 0.45rem 0.7rem;
  border-left: 2px solid transparent;
  margin-left: -2px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.docs-nav-tree-toggle:hover {
  color: var(--color-text, #0f172a);
}

.docs-nav-tree-toggle-icon {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.docs-nav-tree-toggle[aria-expanded="true"] .docs-nav-tree-toggle-icon {
  transform: rotate(45deg);
}

/* ── Mobile nav drawer toggle (hidden on desktop; arc#2303) ─── */

.docs-nav-toggle {
  display: none;
}

.docs-nav-close,
.docs-toc-toggle {
  display: none;
}

.docs-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  background: color-mix(in srgb, #000 45%, transparent);
}

/* ── Main column ──────────────────────────────────── */

.docs-main {
  min-width: 0;
  max-width: var(--docs-content);
}

/* Collection landing pages are navigation surfaces, not prose. Let their
   entry-card grid consume the full main column so its right edge aligns with
   the shared header container. Detail pages keep the readable prose width. */
.docs-main:has(.docs-entry-groups) {
  max-width: none;
}

.docs-body {
  min-width: 0;
}

.docs-detail-layout {
  min-width: 0;
}

/* ── In-page TOC ("On this page") ────────────────── */

.docs-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.docs-toc-title {
  margin: 0 0 0.75rem;
  color: var(--color-dim, #6b7280);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.docs-toc-list {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--docs-rule-soft);
}

.docs-toc-link {
  display: block;
  padding: 0.32rem 0 0.32rem 0.85rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--docs-muted);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.86rem;
  line-height: 1.4;
  text-decoration: none;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.docs-toc-item--h3 .docs-toc-link {
  padding-left: 1.3rem;
  font-size: 0.82rem;
}

.docs-toc-link:hover {
  color: var(--color-text, #0f172a);
}

.docs-toc-link.is-active {
  color: var(--color-accent, #2563eb);
  border-left-color: var(--color-accent, #2563eb);
  font-weight: 500;
}

/* Detail pages preserve the full prose measure on wide screens.
   The page-level grid starts the TOC beside the heading, then lets it span the
   article and pager rows in the unused space to the right of the container. */
@media (min-width: 1480px) {
  .docs-main:has(.docs-detail-layout--has-toc) {
    width: 100%;
    max-width: var(--docs-content);
  }

  .docs-detail-layout--has-toc {
    display: grid;
    width: calc(100% + 2.5rem + var(--docs-toc-width, 200px));
    grid-template-columns: minmax(0, var(--docs-content)) var(--docs-toc-width, 200px);
    column-gap: 2.5rem;
    align-items: start;
  }

  .docs-detail-layout--has-toc > .docs-heading {
    grid-column: 1;
    grid-row: 1;
  }

  .docs-detail-layout--has-toc > .docs-body {
    grid-column: 1;
    grid-row: 2;
  }

  .docs-detail-layout--has-toc > .docs-toc {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .docs-detail-layout--has-toc > .docs-pager {
    grid-column: 1;
    grid-row: 3;
  }
}

/* At intermediate desktop widths there is room for the navigation sidebar
   and the prose column, but not a third persistent rail. Reuse the existing
   accessible disclosure instead of squeezing the article. */
@media (min-width: 961px) and (max-width: 1479px) {
  .docs-main:has(.docs-detail-layout--has-toc) {
    width: 100%;
    max-width: var(--docs-content);
  }

  .docs-detail-layout--has-toc {
    display: grid;
    grid-template-columns: minmax(0, var(--docs-content));
  }

  .docs-detail-layout--has-toc > .docs-heading {
    grid-row: 1;
  }

  .docs-detail-layout--has-toc > .docs-toc {
    grid-row: 2;
    margin-bottom: 1rem;
    position: static;
    max-height: none;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  .docs-detail-layout--has-toc > .docs-body {
    grid-row: 3;
  }

  .docs-detail-layout--has-toc > .docs-pager {
    grid-row: 4;
  }
}

@media (max-width: 1479px) {
  .docs-toc-title {
    display: none;
  }

  .docs-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--docs-rule);
    border-radius: 8px;
    background: var(--color-surface, #fafafa);
    color: var(--color-text, #0f172a);
    font-family: var(--font-body, "Inter", system-ui, sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }

  .docs-toc-toggle-icon {
    width: 0.55rem;
    height: 0.55rem;
    flex-shrink: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
  }

  .docs-toc-toggle[aria-expanded="true"] .docs-toc-toggle-icon {
    transform: rotate(-135deg);
  }

  .docs-toc-list {
    display: none;
    margin-top: 0.5rem;
    padding: 0.45rem;
    border: 1px solid var(--docs-rule-soft);
    border-radius: 8px;
    background: var(--color-surface, #fafafa);
  }

  .docs-toc.is-open .docs-toc-list {
    display: flex;
  }
}

/* arc#2450: wraps the breadcrumb + the mobile drawer
   toggle in one row, so the two no longer stack as separate pre-content
   rows on mobile. Also rendered (with only the breadcrumb visible) above
   the 960px breakpoint since the toggle is hidden there regardless of which
   container it lives in — this rule is deliberately unscoped so it doesn't
   need a matching desktop override. */
.docs-entry-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.5rem;
  color: var(--color-dim, #6b7280);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.docs-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

.docs-breadcrumb a:hover {
  color: var(--color-accent, #2563eb);
}

.docs-breadcrumb span[aria-hidden] {
  opacity: 0.45;
  letter-spacing: 0;
}

.docs-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 2rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--docs-rule);
}

.docs-heading-main {
  min-width: 0;
  flex: 1 1 auto;
}

.docs-heading-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* arc#2452: brief visual confirmation for Copy page / Copy link (icon-only
   buttons — no visible text label to swap, unlike code-copy.ts's inline code
   copy button), paired with the aria-live announcement in script.js for
   assistive tech. */
.docs-heading-actions .aup-app-header-action.is-success {
  color: var(--color-success, #22c55e);
}
.docs-heading-actions .aup-app-header-action.is-error {
  color: var(--color-error, #ef4444);
}

/* Same visually-hidden pattern as portal-header/style.css's
   `.visually-hidden` — this component doesn't share that file, so it's
   mirrored here for the aria-live copy-status region (script.js). */
.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;
}

.docs-eyebrow {
  margin: 0 0 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-accent, #2563eb);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.docs-eyebrow::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.docs-title {
  margin: 0;
  color: var(--color-text, #0f172a);
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.018em;
}

.docs-summary {
  margin: 1rem 0 0;
  max-width: 38rem;
  color: var(--docs-muted);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
}

/* ── Prose content ───────────────────────────────── */

/* Intrinsic content — a wide GFM table or a long unbroken code line — must
   shrink inside the detail layout instead of forcing the whole page to scroll.
   min-width: 0 removes the content-based automatic minimum size; max-width:
   100% keeps this column within its container regardless of display mode. */
.docs-content {
  min-width: 0;
  max-width: 100%;
  color: var(--color-text, #0f172a);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.78;
}

/* AUP's root view is a flex column with its own block gap. Docs prose already
   owns vertical rhythm through semantic margins on paragraphs, headings,
   lists, media, code, and callouts; keeping both makes consecutive paragraph
   spacing add up to roughly 36px. Remove only the article root's
   generic gap so nested AUP components retain their intended layout. */
.docs-content > .aup-view {
  gap: 0;
}

.docs-content > .aup-text:first-child,
.docs-content > p:first-child {
  margin-top: 0;
}

/* Markdown-authored img/video can carry any intrinsic size — constrain to the
   prose column so a wide screenshot or embed can't push .docs-main into
   horizontal scroll (arc#2301). Gallery tiles live under .aup-media-gallery and
   own their own gap — do not add prose image margins there (they stack into
   huge inter-tile whitespace, especially in masonry columns). */
.docs-content img,
.docs-content video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.4rem 0;
  border-radius: 8px;
}
.docs-content .aup-media-gallery img,
.docs-content .aup-media-gallery video {
  margin: 0;
  border-radius: 0;
}

.docs-content p,
.docs-content .aup-text {
  margin: 0 0 1.1rem;
  color: color-mix(in srgb, var(--color-text, #0f172a) 88%, var(--docs-muted));
}

/* arc#2456 Phase 1: prose gets an explicit font-weight instead of relying on
   an unset cascade (body → .docs-content had no font-weight anywhere in the
   chain — see style.css history / document-css.ts:12 — so the rendered
   weight depended on the loaded variable font's default instance, which is
   exactly how "text reads too light" bugs happen with no single owner).

   arc#2456 Phase 2 correction: Phase 1's comment claimed this rule "can
   never cascade into code/table/blockquote/admonition text", but that
   wasn't actually true — `renderQuote()`/`renderCode()`
   (renderer/primitives/text.ts:137,148,161) put a bare `aup-text` class on
   the `<pre>` code-block wrapper, the `<blockquote>` element, and the
   admonition `<div>` themselves (it's a generic AUP-primitive marker, not a
   "plain paragraph" marker), and the selector list included the bare
   `.docs-content` container too, which leaked via inheritance into any
   descendant with no `font-weight` of its own (inline `<code>`, `<td>`).
   Both matches happened to still compute to 400 (browser initial value),
   so there was no visible regression, but the isolation the comment/tests
   asserted was accidental, not structural. Dropping the bare `.docs-content`
   selector and excluding `pre`/`blockquote`/`.aup-admonition` from the
   `.aup-text` match makes the isolation real: those elements keep whatever
   font-weight their own rules below declare (or the browser default),
   independent of any future change to this rule's value. */
.docs-content p,
.docs-content .aup-text:not(pre):not(blockquote):not(.aup-admonition),
.docs-content ul,
.docs-content ol,
.docs-content li {
  font-weight: 400;
}

.docs-content h2,
.docs-content h2.aup-text {
  margin: 2.6rem 0 0.85rem;
  padding-top: 0;
  border-top: 0;
  color: var(--color-text, #0f172a);
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-size: clamp(1.35rem, 1.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  /* arc#2386: portal-header is sticky — without this, a TOC/anchor jump
     lands the heading right under (partly hidden by) the header. */
  scroll-margin-top: 96px;
}

.docs-content h3,
.docs-content h3.aup-text {
  margin: 1.9rem 0 0.6rem;
  color: var(--color-text, #0f172a);
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-size: clamp(1.15rem, 1.7vw, 1.32rem);
  font-weight: 480;
  line-height: 1.24;
  letter-spacing: -0.005em;
  scroll-margin-top: 96px;
}

.docs-content h4,
.docs-content h4.aup-text {
  margin: 1.6rem 0 0.4rem;
  color: var(--color-text, #0f172a);
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-size: 1.06rem;
  font-weight: 500;
}

.docs-content a,
.docs-content .aup-text a {
  color: var(--color-accent, #2563eb);
  text-decoration: none;
  background-image: linear-gradient(0deg, currentColor 0 0);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease;
}

.docs-content a:hover {
  background-size: 100% 1.4px;
}

.docs-content ul,
.docs-content ol {
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
  color: color-mix(in srgb, var(--color-text, #0f172a) 88%, var(--docs-muted));
}

.docs-content li {
  margin: 0.35rem 0;
}

.docs-content code,
.docs-content .aup-text code {
  padding: 0.12rem 0.42rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-accent, #2563eb) 10%, var(--color-surface, #fafafa));
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 50%, transparent);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.86em;
  color: var(--color-text, #0f172a);
}

/* arc#2392: fenced code blocks get a toolbar (language label + copy button)
   wrapping the <pre> — inline code (single backtick) is untouched. */
.docs-content .aup-code-block {
  margin: 1.4rem 0;
}

.docs-content pre,
.docs-content pre.aup-text {
  margin: 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--docs-rule);
  border-radius: 10px;
  background: var(--color-surface, #fafafa);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.86rem;
  line-height: 1.6;
  overflow-x: auto;
}

.docs-content .aup-code-block .aup-code-toolbar + pre,
.docs-content .aup-code-block .aup-code-toolbar + pre.aup-text {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.docs-content pre code,
.docs-content pre.aup-text code {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
}

.docs-content .aup-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--docs-rule);
  border-bottom: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: color-mix(in srgb, var(--color-accent, #2563eb) 4%, var(--color-surface, #fafafa));
}

.docs-content .aup-code-lang {
  color: var(--color-dim, #6b7280);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.docs-content .aup-code-copy-btn {
  margin-left: auto;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--docs-rule);
  border-radius: 6px;
  background: var(--color-surface, #fafafa);
  color: var(--color-dim, #6b7280);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.76rem;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.docs-content .aup-code-copy-btn:hover {
  color: var(--color-text, #0f172a);
  border-color: color-mix(in srgb, var(--color-accent, #2563eb) 40%, var(--docs-rule));
}

.docs-content .aup-code-copy-btn:focus-visible {
  outline: 2px solid var(--color-accent, #2563eb);
  outline-offset: 2px;
}

.docs-content .aup-code-copy-btn.is-success {
  color: #16a34a;
  border-color: #16a34a;
}

.docs-content .aup-code-copy-btn.is-error {
  color: #dc2626;
  border-color: #dc2626;
}

.docs-content blockquote,
.docs-content blockquote.aup-text {
  margin: 1.4rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--color-accent, #2563eb);
  border-radius: 0 10px 10px 0;
  background: var(--docs-soft-bg);
  color: color-mix(in srgb, var(--color-text, #0f172a) 88%, var(--docs-muted));
  font-style: normal;
}

.docs-content blockquote > p:last-child,
.docs-content blockquote .aup-text:last-child {
  margin-bottom: 0;
}

/* GFM alert blocks (`> [!WARNING]` etc, arc#2302) — same shape as a plain
   blockquote plus a colored left border + uppercase type label per intent. */
.docs-content .aup-admonition {
  margin: 1.4rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--docs-admonition-color, var(--color-accent, #2563eb));
  border-radius: 0 10px 10px 0;
  background: var(--docs-soft-bg);
  color: color-mix(in srgb, var(--color-text, #0f172a) 88%, var(--docs-muted));
  /* arc#2451 验收标准: 长 URL/code 在窄视口下局部 containment，不撑破容器。
     同 detail-content/style.css 里 `.aup-text` 已用的属性，此前 docs-page 里
     admonition 容器没有对应规则。 */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.docs-content .aup-admonition > p:last-child {
  margin-bottom: 0;
}

.docs-content .aup-admonition-title {
  margin: 0 0 0.35rem;
  color: var(--docs-admonition-color, var(--color-accent, #2563eb));
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* arc#2451 Phase 3: icon + label, non-color intent differentiation. */
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.docs-content .aup-admonition-icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.docs-content .aup-admonition[data-intent="note"] {
  --docs-admonition-color: #2563eb;
}

/* arc#2451 验收标准 2 — light-mode contrast fix. Phase 3 measured and fixed
   dark-mode contrast (see the block below) but never re-checked light mode
   against the real light tokens (tokens.json: accent #1E6FD9, surface
   #FAFAFA → --docs-soft-bg ≈ #eff3f8). Measured with the same WCAG formula:
   tip 2.96:1, warning 2.86:1, caution 4.33:1 — all below AA text's 4.5:1
   (note 4.64:1 and important 5.11:1 already passed, left unchanged). Darkened
   along each color's own hue/saturation (not a hue shift) to ~4.6-4.7:1. */
.docs-content .aup-admonition[data-intent="tip"] {
  --docs-admonition-color: #117d39;
}

.docs-content .aup-admonition[data-intent="important"] {
  --docs-admonition-color: #7c3aed;
}

.docs-content .aup-admonition[data-intent="warning"] {
  --docs-admonition-color: #a55a05;
}

.docs-content .aup-admonition[data-intent="caution"] {
  --docs-admonition-color: #d52222;
}

/* arc#2451 Phase 3 — dark-mode contrast fix. Measured against the real
   dark-token values (tokens.json's "dark" section) mixed into
   `--docs-soft-bg`: note/important/caution's light-mode hex values compute
   to 2.97–3.51:1 against that background (WCAG AA text needs 4.5:1;
   tip/warning already measure 5.14/5.32:1 and are left unchanged). Same
   selector pattern `design-tokens.ts`'s `buildSiteTokenCSS` uses for every
   other dark-mode override in this site (`[data-tone][data-palette]` +
   `data-mode`/`prefers-color-scheme`), not the unrelated `page-sections`
   component's own `[data-theme]` convention. */
[data-tone][data-palette][data-mode="dark"] .docs-content .aup-admonition[data-intent="note"] {
  --docs-admonition-color: #5686ef;
}

[data-tone][data-palette][data-mode="dark"] .docs-content .aup-admonition[data-intent="important"] {
  --docs-admonition-color: #a070f2;
}

[data-tone][data-palette][data-mode="dark"] .docs-content .aup-admonition[data-intent="caution"] {
  --docs-admonition-color: #e55b5b;
}

@media (prefers-color-scheme: dark) {
  [data-tone][data-palette]:not([data-mode="light"])
    .docs-content
    .aup-admonition[data-intent="note"] {
    --docs-admonition-color: #5686ef;
  }

  [data-tone][data-palette]:not([data-mode="light"])
    .docs-content
    .aup-admonition[data-intent="important"] {
    --docs-admonition-color: #a070f2;
  }

  [data-tone][data-palette]:not([data-mode="light"])
    .docs-content
    .aup-admonition[data-intent="caution"] {
    --docs-admonition-color: #e55b5b;
  }
}

.docs-content hr {
  margin: 2.5rem 0;
  border: 0;
  height: 1px;
  background: var(--docs-rule-soft);
}

.docs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4rem 0;
  min-width: 0;
  max-width: 100%;
}

.docs-content table,
.docs-content .aup-markdown-table {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.95rem;
  /* Prefer reflow over max-content expansion (arcblock-site#361). */
  min-width: 0;
  table-layout: auto;
}

.docs-content table th,
.docs-content table td,
.docs-content .aup-markdown-table th,
.docs-content .aup-markdown-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--docs-rule-soft);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.docs-content table code,
.docs-content .aup-markdown-table code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.docs-content table th {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-dim, #6b7280);
  border-bottom: 1px solid var(--docs-rule);
}

/* ── Docs Link/Action Cards (arc#2454 Phase 2) ─────── */
/* Docs-scoped compact card style for `::link-card{...}` / `:::action-card{...}:::`
   (content-reader.ts's `contentCardToAup`, arc#2454 Phase 1), rendered as
   `.aup-view[data-mode="card"][data-variant="docs-link-card"|"docs-action-card"]`.
   Every selector here is scoped under `.docs-content` so it can never leak
   into non-docs surfaces that also load AUP_PRIMITIVES_CSS. Deliberately its
   OWN visual language, not the homepage/collection `.content-card` marketing
   grid above — different field model (single title+description+href vs. a
   collection array), different container (inline in prose vs. a page-width
   section) — see the issue's own "don't reuse the marketing card" constraint.
   Base look (bg/border/radius/shadow) plus hover-lift/focus-visible ring
   already come for free from the shared `.aup-view[data-mode="card"]` /
   `.aup-action` rules in packages/aup/src/primitives-css.ts — everything
   below only adds what's genuinely Docs-specific: grouping/columns, type
   scale for the title/description text roles, the link-card corner
   affordance, and the disabled/unavailable degrade look. */

/* card-group: an `auto-fit`/`minmax()` grid — same technique the
   `content-card` component's own `.content-cards` grid uses (style.css
   above) — so the column count tracks the REAL available width of the docs
   prose column (which itself narrows when the TOC rail is docked), not a
   fixed viewport breakpoint. At the 390px viewport width called out in the
   issue the content column is far below the 2-column threshold and this
   collapses to a single column automatically; on desktop widths the column
   is wide enough for 2 (occasionally 3) cards per row. */
.docs-content .aup-view[data-mode="card-group"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
}

/* A lone (non-grouped) card sitting directly in prose keeps its own block
   vertical rhythm, matching the blockquote/code-block margin above. Cards
   inside a group get that spacing from the grid's own `gap` instead. */
.docs-content .aup-view[data-mode="card"][data-variant^="docs-"] {
  margin: 1.4rem 0;
  min-width: 0; /* grid/flex item: allow shrinking below the intrinsic content
                   minimum so an unbroken long label/URL cannot force this
                   card — or the page — into horizontal scroll. */
}

.docs-content .aup-view[data-mode="card-group"] > .aup-view[data-mode="card"] {
  margin: 0;
}

.docs-content
  .aup-view[data-mode="card"][data-variant^="docs-"]
  .aup-text[data-variant="docs-card-title"] {
  margin: 0 0 0.3rem;
  color: var(--color-text, #0f172a);
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 560;
  line-height: 1.32;
  /* CJK/long-English/URL-as-title robustness: reflow instead of overflowing
     or relying solely on the card's own `overflow: hidden` to silently clip. */
  overflow-wrap: anywhere;
}

.docs-content
  .aup-view[data-mode="card"][data-variant^="docs-"]
  .aup-text[data-variant="docs-card-description"] {
  margin: 0;
  color: var(--docs-muted);
  font-size: 0.86rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Missing optional field (no description, or — in the empty-card edge case —
   no title either): nothing here assumes a fixed child count/order, so the
   card simply shows whichever text nodes `contentCardToAup` produced with no
   gap artifacts. No CSS below depends on a specific number of children. */

/* ── link-card: whole card is the <a> (aup-view-link, Phase 0) ─────── */
.docs-content .aup-view[data-mode="card"][data-variant="docs-link-card"] {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-right: 2.1rem; /* reserve room for the corner arrow so it never
                             sits under the last line of a full-width
                             description */
  padding-bottom: 2rem;
}

/* Corner "go to" affordance — a plain arrow for in-app navigation, a
   distinct "open in new" glyph when the author set `target="_blank"`
   (perceivable external-link indicator, issue AC), keyed off the real
   `target` attribute `view.ts` already renders (Phase 0) rather than a new
   host-comparison mechanism. Text glyphs, not a new SVG/icon pipeline for a
   purely decorative affordance the underlying `target`/`rel` already backs
   functionally. */
.docs-content .aup-view[data-mode="card"][data-variant="docs-link-card"]::after {
  content: "→";
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  color: var(--color-accent, #2563eb);
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.55;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

.docs-content .aup-view[data-mode="card"][data-variant="docs-link-card"][target="_blank"]::after {
  content: "↗";
}

.docs-content .aup-view[data-mode="card"][data-variant="docs-link-card"]:hover::after,
.docs-content .aup-view[data-mode="card"][data-variant="docs-link-card"]:focus-visible::after {
  transform: translateX(2px);
  opacity: 0.9;
}

/* :active press feedback — the shared `.aup-view[data-mode="card"]:hover`
   lift (primitives-css.ts) has no matching `:active` reset, so a click
   without this would keep floating at -2px through the press. */
.docs-content .aup-view[data-mode="card"][data-variant="docs-link-card"]:active {
  transform: translateY(0);
  box-shadow: var(--shadow-card);
}

.docs-content .aup-view[data-mode="card"][data-variant="docs-link-card"]:focus-visible {
  outline: 2px solid var(--color-accent, #2563eb);
  outline-offset: 2px;
}

/* Disabled/unavailable (issue AC): no safe href → Phase 0's view.ts already
   degrades this to a plain, non-interactive `<div>` (no `aup-view-link`
   class). Keyed off that existing class difference, not a new prop — makes
   the degrade state read as "not clickable" instead of looking identical to
   a working card minus the click. */
.docs-content .aup-view[data-mode="card"][data-variant="docs-link-card"]:not(.aup-view-link) {
  cursor: default;
  opacity: 0.7;
}

.docs-content
  .aup-view[data-mode="card"][data-variant="docs-link-card"]:not(.aup-view-link)::after {
  content: none;
}

/* ── action-card: title/description block, then a wrapping action row ── */
.docs-content .aup-view[data-mode="card"][data-variant="docs-action-card"] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.6rem;
}

/* Not itself a link (Phase 1: action-card never sets `props.href`) — cancel
   the shared card's whole-box hover-lift so only the genuinely-interactive
   nested `.aup-action` buttons look clickable. */
.docs-content .aup-view[data-mode="card"][data-variant="docs-action-card"]:hover {
  transform: none;
}

.docs-content .aup-view[data-mode="card"][data-variant="docs-action-card"] .aup-text {
  flex: 1 1 100%;
}

.docs-content .aup-view[data-mode="card"][data-variant="docs-action-card"] .aup-action {
  flex: 0 1 auto;
  max-width: 100%;
  /* Base `.aup-action` is `white-space: nowrap` (primitives-css.ts) — fine
     for short labels, but an unusually long one must wrap within its own
     button rather than bleeding past the card's edge. */
  white-space: normal;
  text-align: center;
}

/* Disabled/unavailable (issue AC): an action-card authored with no
   `::action{}` children at all (Phase 1's own "empty card, no crash" case) —
   read as an inert info block, same visual treatment as link-card's
   no-href degrade above. */
.docs-content .aup-view[data-mode="card"][data-variant="docs-action-card"]:not(:has(.aup-action)) {
  opacity: 0.7;
}

/* ── info-card: non-interactive Info/Rich Card content block (arc#2546) ──
   `::info-card{title="..." description="..."} ...block content... :::`
   (content-reader.ts's `contentCardToAup`, reused with `withHref: false`)
   is deliberately never a link and never wraps `::action{}` buttons — a
   *genuine* information block, not a degraded/disabled card. It must NOT
   read like the disabled/unavailable states above (link-card's
   `:not(.aup-view-link)` / action-card's `:not(:has(.aup-action))`, both
   `opacity: 0.7`, cursor: default) — that would defeat the whole point of
   this issue (a reader must be able to tell "intentionally informational"
   apart from "broken link" at a glance). Full opacity plus a permanent left
   accent bar is the distinguishing affordance instead. */
.docs-content .aup-view[data-mode="card"][data-variant="docs-info-card"] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-left: 3px solid var(--color-accent, #2563eb);
  opacity: 1;
}

/* Never interactive — cancel the shared card's hover-lift AND its
   accent-stripe-on-hover (that stripe means "this responds to hover", which
   an info-card never does — it already has its own permanent left accent
   bar as its identity marker). Same hover-lift cancellation technique
   action-card uses above. */
.docs-content .aup-view[data-mode="card"][data-variant="docs-info-card"]:hover {
  transform: none;
}
.docs-content .aup-view[data-mode="card"][data-variant="docs-info-card"]::before {
  display: none;
}

/* Block-children spacing reset: nested paragraph/list/code-block/callout
   render through the exact same shared/docs prose CSS already used
   elsewhere in the article body (no new mechanism) — only the OUTER spacing
   between them needs a card-scoped reset here, so they don't carry the
   docs-prose margins meant for full-width paragraphs (would look wrong
   inside a padded card). Lower specificity (4 vs 6 class-level selectors)
   than the title/description rules above, so those keep their own margins;
   this only touches generic children (paragraph/list/code/callout) that have
   no more-specific rule of their own. */
.docs-content .aup-view[data-mode="card"][data-variant="docs-info-card"] > * {
  margin: 0;
}
.docs-content .aup-view[data-mode="card"][data-variant="docs-info-card"] > * + * {
  margin-top: 0.5rem;
}

/* ── Card icon (arc#2547) ───────────────────────────── */
/* Controlled, OPTIONAL icon reusing the existing shared icon registry
   (`buildIconSvg`/`ICON_PATHS`, packages/aup/src/icons.ts) — the SAME
   vocabulary the app-footer social icons already consume, not a second icon
   system. `view.ts` resolves `props.icon` (an author-supplied string key) to
   an inline `<svg>` and wraps it in `.aup-card-icon`; unknown/missing keys
   resolve to `null` there and no `.aup-card-icon` span is emitted at all —
   nothing below can create a layout gap for the no-icon/unknown-icon case,
   the element simply isn't in the DOM. Rendered before the title/description
   text nodes; both card variants are `display: flex` containers, so a bare,
   unstretched flex item naturally sits on its own line above the
   `flex: 1 1 100%` title/description block — no extra positioning rules
   needed for link-card (column) vs action-card (row) to agree visually.
   Always decorative (`aria-hidden="true"`, set unconditionally by
   `buildIconSvg` itself) — a Card's title text is required and always
   visible, so the icon is never the sole information carrier. */
.docs-content .aup-view[data-mode="card"][data-variant^="docs-"] .aup-card-icon {
  display: inline-flex;
  color: var(--color-accent, #2563eb);
  margin-bottom: 0.35rem;
}

.docs-content .aup-view[data-mode="card"][data-variant^="docs-"] .aup-card-icon-svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── Collection landing entries (arc#2384) ─────────── */
/* Renders the same grouped doc entries as the sidebar nav, in the article
   body, for collection landing pages that have no content.md of their own. */

.docs-entry-groups {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.docs-entry-group-label {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
  color: var(--color-text, #0f172a);
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.docs-entry-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-entry-item {
  margin: 0;
}

.docs-entry-link {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid var(--docs-rule-soft);
  border-radius: 10px;
  color: var(--color-text, #0f172a);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.94rem;
  font-weight: 460;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.docs-entry-link:hover {
  border-color: color-mix(in srgb, var(--color-accent, #2563eb) 40%, var(--docs-rule));
  background: color-mix(in srgb, var(--color-accent, #2563eb) 4%, transparent);
}

.docs-content-empty {
  padding: 2rem;
  border: 1px dashed var(--docs-rule);
  border-radius: 12px;
  color: var(--docs-muted);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
}

/* ── Collection homepage: recursive `_nav.yaml` listing (arc#2436 Phase 4) ── */
/* Tree-mode equivalent of .docs-entry-groups above — same collection-homepage
   body slot, computed from the same navTree the sidebar renders. */

.docs-entry-tree-root,
.docs-entry-tree-children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-entry-tree-root {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.docs-entry-tree-children {
  padding-left: 1.4rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.docs-entry-tree-label {
  display: block;
  padding: 0.3rem 0;
  color: var(--color-text, #0f172a);
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 500;
}

.docs-entry-tree .docs-entry-link {
  display: inline-block;
}

/* ── Pager ────────────────────────────────────────── */

.docs-pager {
  margin: 3.5rem 0 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--docs-rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.docs-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--docs-rule-soft);
  border-radius: 10px;
  color: var(--color-text, #0f172a);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease;
}

.docs-pager-link:hover {
  border-color: color-mix(in srgb, var(--color-accent, #2563eb) 40%, var(--docs-rule));
  background: color-mix(in srgb, var(--color-accent, #2563eb) 4%, transparent);
}

.docs-pager-link.is-next {
  text-align: right;
  align-items: flex-end;
}

.docs-pager-direction {
  color: var(--color-dim, #6b7280);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.docs-pager-label {
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 460;
  letter-spacing: -0.005em;
}

/* Keep detail navigation on the same measure as the article and lower
   its visual weight so it closes the reading flow instead of resembling two
   prominent call-to-action cards. */
.docs-pager {
  max-width: var(--docs-content);
  margin-top: 3rem;
  padding-top: 0;
  border-top: 0;
  gap: 0.75rem;
}

.docs-pager-link {
  min-width: 0;
  flex-direction: row;
  align-items: center;
  padding: 1rem 1.1rem;
  border-color: transparent;
  border-radius: 6px;
  background: var(--docs-soft-bg);
}

.docs-pager-link.is-next {
  align-items: center;
  justify-content: flex-end;
}

.docs-pager-link.is-prev .docs-pager-direction {
  margin-right: 0.65rem;
}

.docs-pager-link.is-next .docs-pager-direction {
  order: 2;
  margin-left: 0.65rem;
}

.docs-pager-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Responsive ───────────────────────────────────── */

@media (max-width: 960px) {
  .docs-shell {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .docs-heading {
    flex-wrap: wrap;
  }

  .docs-heading-actions {
    order: -1;
    justify-content: flex-end;
    width: 100%;
  }

  .docs-sidebar {
    position: static;
    max-height: none;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--docs-rule-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-surface, #fafafa) 92%, transparent);
  }

  .docs-sidebar-brand {
    margin-bottom: 0.85rem;
  }

  /* Collapsed by default — only the toggle (showing the current section) is
     visible until the user opens the drawer (arc#2303). */
  .docs-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--docs-rule);
    border-radius: 9px;
    background: var(--color-surface, #fafafa);
    color: var(--color-text, #0f172a);
    font-family: var(--font-body, "Inter", system-ui, sans-serif);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
  }

  .docs-nav-toggle-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .docs-nav-toggle-icon {
    width: 0.55rem;
    height: 0.55rem;
    flex-shrink: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
  }

  .docs-nav-toggle[aria-expanded="true"] .docs-nav-toggle-icon {
    transform: rotate(-135deg);
  }

  .docs-sidebar-nav {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 0.85rem;
  }

  /* .docs-nav-backdrop is `position: fixed; z-index: 20`; without an
     explicit stacking context the open sidebar (position: static above)
     painted below it, leaving nav links unclickable while the drawer was
     open (arc#2303 follow-up). */
  .docs-sidebar.is-open {
    position: relative;
    z-index: 21;
  }

  .docs-sidebar.is-open .docs-sidebar-nav {
    display: grid;
  }

  .docs-sidebar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
  }

  .docs-sidebar-brand {
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  .docs-nav-toggle {
    width: auto;
    max-width: 55%;
    flex: 0 1 auto;
  }

  /* arc#2450: the toggle now renders in `.docs-entry-bar` (beside the
     breadcrumb) instead of inside `.docs-sidebar`, and
     the site-name brand row is redundant with the global Header — hide both
     in the closed state. Without the second rule, the base ≤960px
     `.docs-sidebar` rule above still gives this element a border/background/
     border-radius/padding even though every child is now hidden or moved
     out — a visible empty box sitting above the entry-bar. `.is-open`
     restores full-drawer display via the existing rule below (mutually
     exclusive by `:not()`, not by source order). */
  .docs-sidebar-brand {
    display: none;
  }

  .docs-sidebar:not(.is-open) {
    display: none;
  }

  .docs-sidebar.is-open {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1002;
    display: block;
    width: min(88vw, 360px);
    height: 100dvh;
    max-height: none;
    box-sizing: border-box;
    padding: 1rem;
    overflow-y: auto;
    border-radius: 0 14px 14px 0;
    background: var(--color-bg, #fff);
  }

  .docs-sidebar.is-open .docs-sidebar-brand {
    display: inline-flex;
    margin: 0 2.75rem 1rem 0;
  }

  .docs-sidebar.is-open .docs-nav-toggle {
    width: 100%;
    max-width: none;
  }

  .docs-nav-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: none;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--docs-rule);
    border-radius: 8px;
    background: var(--color-surface, #fafafa);
    color: var(--color-text, #0f172a);
    cursor: pointer;
  }

  .docs-sidebar.is-open .docs-nav-close {
    display: block;
  }

  .docs-nav-close span::before,
  .docs-nav-close span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 2px;
    background: currentColor;
  }

  .docs-nav-close span::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .docs-nav-close span::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .docs-nav-backdrop:not([hidden]) {
    z-index: 1001;
  }

  .docs-nav-backdrop:not([hidden]) {
    display: block;
  }

  /* arc#2450: breadcrumb collapses from 3 segments ("Docs / Collection /
     Current") to 2 ("Collection › Current page") on mobile. Hides by DOM
     position rather than reworking `breadcrumbHtml`'s generation, so the
     desktop breadcrumb output — and its 3-segment a11y tree — is untouched;
     only visibility changes below this breakpoint. A page with no collection
     (2-segment breadcrumb: Docs / Current) collapses to just "Current",
     which is the correct behavior — there is no intermediate level to keep. */
  .docs-breadcrumb > :nth-child(1),
  .docs-breadcrumb > :nth-child(2) {
    display: none;
  }

  /* arc#2450 adversarial-pass fix: a pathologically long collection label or
     page title (real-world case: a long CJK collection name) otherwise wraps
     the breadcrumb across several lines, defeating the whole point of a
     "compact" entry row and pushing the toggle button awkwardly off-center.
     `min-width: 0` lets the flex row/items shrink below their content size
     (the flexbox default `min-width: auto` is exactly what blocks
     shrinking); each remaining visible segment then truncates independently
     instead of wrapping. The `:not([aria-hidden])` guard leaves the tiny "/"
     separator alone — it's already short and shouldn't need an ellipsis. */
  .docs-entry-bar .docs-breadcrumb {
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .docs-entry-bar .docs-breadcrumb > a,
  .docs-entry-bar .docs-breadcrumb > span:not([aria-hidden]) {
    overflow: hidden;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* arc#2450: the heavy divider directly under the H1 is one of the stacked
     elements pushing the first paragraph down; dropping it (mobile only,
     desktop keeps the base rule) is pure spacing, no content is hidden. */
  .docs-heading {
    padding-bottom: 0;
    border-bottom: 0;
    margin-bottom: 1rem;
  }

  .docs-toc {
    order: -1;
    position: static;
    max-height: none;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--docs-rule-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-surface, #fafafa) 92%, transparent);
  }

  .docs-toc-list {
    border-left: 0;
  }

  .docs-toc-link {
    padding-left: 0.5rem;
  }

  .docs-toc-item--h3 .docs-toc-link {
    padding-left: 1.3rem;
  }

  /* arc#2450: overrides the blanket .docs-toc order:-1 rule above (higher
     specificity wins regardless of source order) so the TOC disclosure no
     longer blocks the article body — the DOM already places .docs-content
     before .docs-toc (render.js), this simply stops CSS from visually
     reversing that order. */
  .docs-toc {
    order: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    /* arc#2935 item 7 (deliberately NOT spelling out the widget's own
       hyphenated class-name-shaped identifier here — this stylesheet is
       always embedded, comments enabled or not, and a detail-mount test
       elsewhere in this package asserts that exact string is absent from a
       no-comments page's rendered HTML): this rule strips the
       desktop/tablet .docs-toc box's own padding+background (arc#2450,
       above), but .docs-body's last child on this breakpoint, when the
       comments widget is mounted, is ITS OWN card content — that sibling
       stylesheet only gives IT a margin-top, nothing pushes the TOC away
       from whatever precedes it. The "On this page" toggle bar landed flush
       against the comment card below it: same width, same-ish background,
       zero gap, reading as one merged block. --space-section is the same
       canonical "separate this section from whatever precedes it" token
       that sibling stylesheet's own margin-top already uses (its line 16)
       — .docs-pager (line ~1327) reaches the same outcome with a hardcoded
       3.5rem instead; --space-section is used here so the gap scales with
       the active density/theme preset like the rest of this shared-token
       widget does, not a third
       independent magic number. */
    margin-top: var(--space-section);
  }
}

@media (max-width: 720px) {
  .docs-shell {
    width: min(100% - 36px, 1280px);
    padding-top: 1.5rem;
  }

  .docs-pager {
    grid-template-columns: 1fr;
  }

  .docs-pager-link.is-next {
    text-align: left;
    align-items: flex-start;
  }
}

/* CJK rhythm: zero out negative tracking, give breathing room on body lines. */
:where([lang|="zh"], [lang="ja"], [lang="ko"]) .docs-title,
:where([lang|="zh"], [lang="ja"], [lang="ko"]) .docs-content h2,
:where([lang|="zh"], [lang="ja"], [lang="ko"]) .docs-content h3,
:where([lang|="zh"], [lang="ja"], [lang="ko"]) .docs-content h4,
:where([lang|="zh"], [lang="ja"], [lang="ko"]) .docs-entry-group-label,
:where([lang|="zh"], [lang="ja"], [lang="ko"]) .docs-pager-label {
  letter-spacing: 0;
  font-feature-settings: "palt" 1;
}

:where([lang|="zh"], [lang="ja"], [lang="ko"]) .docs-content,
:where([lang|="zh"], [lang="ja"], [lang="ko"]) .docs-summary {
  line-height: 1.86;
  font-feature-settings: "palt" 1;
}