html { scrollbar-gutter: stable; }
*, *::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: "Inter", "Noto Sans SC", "IBM Plex Sans JP", "Noto Sans JP", "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", system-ui, sans-serif;
  --color-dim: #52635d;
  --content-max: 1120px;
  --color-accent: #007b6a;
  --color-surface: #f4f7f5;
  --font-heading: "Sora", "Noto Sans SC", "IBM Plex Sans JP", "Noto Sans JP", "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", system-ui, sans-serif;
  --color-bg: #fcfdfc;
  --color-border: #d7e0dc;
  --container-max: 1120px;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --color-text: #111a17;
  --font-display: "Sora", "Noto Sans SC", "IBM Plex Sans JP", "Noto Sans JP", "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", system-ui, sans-serif;
  --space-section: 2.5rem;
  --radius-md: 6px;
  --color-accent-bg: #e3f3ee;
  --color-on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]),
  [data-tone][data-palette]:not([data-mode="light"]) {
    --color-dim: #98a8a3;
    --color-accent: #2ec8ae;
    --color-surface: #101d1a;
    --color-bg: #061211;
    --color-border: #20302b;
    --color-text: #e8f2ee;
    --color-accent-bg: #163f38;
    --color-on-accent: #06120f;
  }
}
[data-tone][data-palette][data-mode="dark"] {
  --color-dim: #98a8a3;
  --color-accent: #2ec8ae;
  --color-surface: #101d1a;
  --color-bg: #061211;
  --color-border: #20302b;
  --color-text: #e8f2ee;
  --color-accent-bg: #163f38;
  --color-on-accent: #06120f;

}


  /* View-tabs — Phase 0.0 spike + 0.5 polish */
  [data-aup-mode="tabs"] > .aup-view-tabs,
  .aup-view[data-mode="tabs"] > .aup-tabs,
  .aup-tabs {
    display: flex;
    flex-direction: row;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 12px;
    padding: 0 4px;
  }
  .aup-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 10px 14px;
    color: var(--color-dim);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms, border-color 120ms;
  }
  .aup-tab:hover { color: var(--color-fg); }
  .aup-tab[aria-selected="true"],
  .aup-tab.active,
  .aup-tab[data-active="true"] {
    color: var(--color-accent, #19B7CC);
    border-bottom-color: var(--color-accent, #19B7CC);
  }
  .aup-tab .aup-tab-icon { width: 14px; height: 14px; flex-shrink: 0; }
  .aup-tab-label { line-height: 1; }
  .aup-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--card-bg);
    color: var(--color-dim);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
  }
  .aup-tab[aria-selected="true"] .aup-tab-count,
  .aup-tab[data-active="true"] .aup-tab-count {
    background: var(--color-accent-bg, rgba(25,183,204,0.16));
    color: var(--color-accent, #19B7CC);
  }


  /* ── comments-surface widget (issue #1006 Phase 1 + Phase 2) ──
     Flat comment list + composer + per-item edit/delete/react. All
     sizing/color/spacing consumes canonical AUP tokens (styles.ts) so
     theme swaps reach it, same discipline as .aup-list-item / .aup-cb-*. */
  .aup-comments-surface { display: flex; flex-direction: column; gap: var(--space-block); }
  /* arc#2935 item 2: was --type-heading (this widget's mount context has no
     idea what level the host page's own headings sit at) — a live doc page's
     own <h2> renders at 24px (docs-page/style.css .docs-content h2:
     clamp(1.35rem, 1.9vw, 1.5rem)), while --type-heading resolved to 28px in
     that same theme, so this section heading visually OUTRANKED the page's
     real section headings despite now (see the <h2> tag change above) being
     one level below them in the outline. --type-subheading is this token
     family's next tier down (styles.ts) — reliably smaller than
     --type-heading in every density preset, not a hardcoded px guess tied to
     one page's own clamp(). */
  .aup-comments-surface-title {
    font-family: var(--font-heading);
    font-size: var(--type-subheading);
    font-weight: var(--heading-weight);
    color: var(--color-text);
  }
  /* Sort-order toggle (arc#2231) — right-aligned, above the list. */
  .aup-comments-surface-toolbar { display: flex; justify-content: flex-end; }
  .aup-comments-surface-list { display: flex; flex-direction: column; gap: var(--space-element); }
  .aup-comments-surface-empty {
    color: var(--color-dim);
    font-size: var(--type-body);
    padding: var(--space-block) 0;
    text-align: center;
  }
  /* Inline error banner for a failed post/edit/delete/react — hidden by
     default (JS toggles display), shown with a plain error-tinted text
     row (no dialog, matches the low-ceremony feel of an inline form error). */
  .aup-comments-surface-error {
    color: var(--color-error);
    font-size: var(--type-caption);
    padding: 0 0 var(--space-element);
  }
  .aup-comment-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-element);
    padding: var(--space-block);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
  }
  /* arc#2935 item 1: the card's own horizontal padding (--space-block, 18px
     in the measured live theme) pushed the VISIBLE comment text/Reply button
     18px inward from the page's document-content edge on both sides — the
     surrounding page content (and this widget's own unpadded sort toggle,
     which already lands flush) has no such inset, so the comment column
     visibly "broke" out of alignment. Compensating with an equal negative
     horizontal margin cancels the padding for anything measured from the
     card's OUTER edge (so the card border/background still bleeds out to
     the full column width, matching the sort toggle) while the padding
     itself keeps the INNER text sitting exactly where it was — now aligned
     with the page's content edge instead of offset from it.
     Scoped to .aup-comments-surface-list > .aup-comment-item (root-level
     items only, direct children of the list) rather than the bare class:
     a NESTED reply's .aup-comment-item lives inside
     .aup-comment-item-children (module doc "Nested reply-tree
     rendering"), whose own padding-left is the intentional per-depth
     indent — an unscoped negative margin here would cancel that indent too
     and collapse every reply back to the root's left edge. */
  .aup-comments-surface-list > .aup-comment-item {
    margin-left: calc(-1 * var(--space-block));
    margin-right: calc(-1 * var(--space-block));
  }
  .aup-comment-item-header { display: flex; align-items: center; gap: var(--space-element); flex-wrap: wrap; }
  .aup-comment-item-author { font-family: var(--font-body); font-size: var(--type-body); font-weight: var(--heading-weight); color: var(--color-text); }
  .aup-comment-item-time { font-size: var(--type-caption); color: var(--color-dim); }
  .aup-comment-item-edited { font-style: italic; }
  /* Optimistic preview row (arc#2226) — same reduced-opacity "in flight"
     treatment as .aup-comment-item-collect-btn._aup-collect-pending below,
     applied to the whole card instead of one button since this row has no
     server-assigned id yet for any per-affordance state. */
  .aup-comment-item--pending { opacity: 0.6; }
  /* Tombstone (issue #6608) — grey placeholder, no author, no reaction entry.
     The card stays in the tree so replies keep their nested depth. */
  .aup-comment-item--deleted { opacity: 0.85; }
  .aup-comment-item-text--deleted { color: var(--color-dim); font-style: italic; }
  /* Pushes the kebab menu button to the row's trailing edge without a
     dedicated flex-justify rule on the header (which also needs to wrap
     author + timestamp on narrow widths). */
  .aup-comment-item-spacer { flex: 1 1 auto; }
  .aup-comment-item-text { font-family: var(--font-body); font-size: var(--type-body); line-height: var(--leading-normal); color: var(--color-text); white-space: normal; word-break: break-word; }
  /* Markdown comment bodies (issue #6609). The same element family css.ts
     styles for post bodies under .aup-text[data-format="markdown"], restated
     here (not imported) because web-device loads ONLY this sheet — the
     bundle's DOM is identical on both hosts, so its baseline styling must
     travel with it. Kept to what would otherwise render bare: block spacing,
     code, media bounds, links, quotes, lists. All values are canonical tokens. */
  .aup-comment-item-text[data-comment-format="markdown"] p { margin: 0 0 var(--space-element); }
  .aup-comment-item-text[data-comment-format="markdown"] > :last-child { margin-bottom: 0; }
  .aup-comment-item-text[data-comment-format="markdown"] code { font-family: var(--font-mono); font-size: var(--type-caption); background: var(--color-bg); color: var(--color-accent); padding: 0 4px; border-radius: var(--radius-sm); }
  .aup-comment-item-text[data-comment-format="markdown"] pre { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-element) var(--space-block); margin: var(--space-element) 0; overflow-x: auto; font-family: var(--font-mono); font-size: var(--type-caption); line-height: var(--leading-normal); }
  .aup-comment-item-text[data-comment-format="markdown"] pre code { background: none; color: var(--color-text); padding: 0; font-size: inherit; }
  .aup-comment-item-text[data-comment-format="markdown"] img,
  .aup-comment-item-text[data-comment-format="markdown"] video { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--space-element) 0; }
  .aup-comment-item-text[data-comment-format="markdown"] a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
  .aup-comment-item-text[data-comment-format="markdown"] a:hover { opacity: 0.8; }
  .aup-comment-item-text[data-comment-format="markdown"] blockquote { margin: var(--space-element) 0; padding: 0 var(--space-block); border-left: 3px solid var(--color-accent); color: var(--color-dim); }
  .aup-comment-item-text[data-comment-format="markdown"] ul,
  .aup-comment-item-text[data-comment-format="markdown"] ol { margin: var(--space-element) 0; padding-left: var(--space-block); }
  .aup-comment-item-text[data-comment-format="markdown"] h1,
  .aup-comment-item-text[data-comment-format="markdown"] h2,
  .aup-comment-item-text[data-comment-format="markdown"] h3,
  .aup-comment-item-text[data-comment-format="markdown"] h4 { font-size: var(--type-body); font-weight: var(--heading-weight); margin: var(--space-element) 0 0; }
  .aup-comment-item-footer { display: flex; align-items: center; gap: var(--space-element); }
  /* Both children are conditional (reactions opt-in, Reply hidden past
     maxDepth/guest-blocked) — an empty footer would otherwise still eat a
     --space-element gap slot in .aup-comment-item's column flex. */
  .aup-comment-item-footer:empty { display: none; }
  /* Kebab/collect buttons reuse list.ts's .aup-list-row-action square
     icon-button chrome — that rule (and its --collect variant tint, plus
     the Edit/Delete popup below) normally comes from css.ts, which is only
     loaded on AUP-hosted pages. A non-AUP host (web-device, issue #2676)
     loads ONLY this COMMENTS_SURFACE_CSS + AUP_PRIMITIVES_CSS, neither of
     which defines them — so on that host these rendered unstyled with the
     browser's default button chrome (arc#2933). Self-contained here (same
     values as css.ts's copy — safe to duplicate, an AUP host loads both and
     the second occurrence is a no-op) so the bundle never depends on a host
     also having loaded css.ts's full AUP-page stylesheet. */
  .aup-comment-item .aup-list-row-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin-left: 4px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-dim); cursor: pointer; opacity: 0; transition: opacity var(--transition), background var(--transition), color var(--transition), border-color var(--transition); flex-shrink: 0; }
  .aup-comment-item .aup-list-row-action svg { width: 14px; height: 14px; }
  .aup-comment-item .aup-list-row-action:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
  .aup-comment-item .aup-list-row-action--collect:hover { background: var(--color-accent-bg); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); color: var(--color-accent); }
  .aup-comment-item:hover .aup-list-row-action,
  .aup-comment-item-menu-btn:focus-visible,
  .aup-comment-item-collect-btn:focus-visible { opacity: 1; }
  .aup-comment-item-menu-btn { margin-left: 0; }
  /* Edit/Delete popup (_commentsSurfaceOpenItemMenu) — same duplication
     rationale as .aup-list-row-action above; css.ts's copy (shared with
     list.ts's own item menu) never reaches a non-AUP host. */
  .aup-list-item-menu-popup { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); min-width: 160px; overflow: hidden; padding: 4px 0; }
  .aup-list-item-menu-item { display: block; width: 100%; padding: var(--space-element) var(--space-block); text-align: left; background: transparent; border: none; color: var(--color-text); font-family: var(--font-body); font-size: var(--type-body); line-height: var(--leading-normal); cursor: pointer; white-space: nowrap; transition: background var(--transition), color var(--transition); }
  .aup-list-item-menu-item:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
  .aup-list-item-menu-item:has(svg) { display: flex; align-items: center; gap: var(--space-element); }
  .aup-list-item-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; }
  /* Collect button (issue #1576) — .aup-list-row-action--collect's hover
     tint already comes from this file's own rule above (arc#2933); the two
     rules below only cover its two extra per-comment states that button
     family doesn't otherwise need: a subtle pulse while the collect
     aup_event is in flight (same idea as reaction.ts's JS-injected
     _aup-reaction-pending keyframes, redeclared here as a plain CSS
     keyframe since this file — not JS — is comments-surface's only style
     source), and staying visibly marked (not fading back to opacity:0 on
     mouseleave) once collected — same "persistent highlight" treatment
     reaction chips give an own-reaction, applied here to a single terminal
     state instead of a toggle. */
  @keyframes aup-comment-collect-pulse { 0%, 100% { box-shadow: 0 0 0 2px transparent; } 50% { box-shadow: 0 0 0 2px var(--color-accent); } }
  .aup-comment-item-collect-btn._aup-collect-pending { animation: aup-comment-collect-pulse 0.9s ease-in-out infinite; opacity: 0.75; }
  .aup-comment-item-collect-btn.is-collected { opacity: 1; color: var(--color-accent); }
  /* Reaction picker placeholder (issue #1626, opt-in via props.reactions —
     see comments-surface-bundle.ts module doc "Reaction picker"). The picker
     element mounted inside it (reaction.ts's _buildReactionPickerEl,
     class .aup-reaction) takes its pill chrome from the injected reaction
     stylesheet, the same metrics as the post-level picker. This rule only
     keeps an empty placeholder from adding stray footer gap before the
     async reaction-data fetch populates it. */
  .aup-comment-item-reactions:empty { display: none; }
  /* Composer — top-level "post a new comment" form. Bordered container in
     the same card-token family as .aup-comment-item so it reads as part
     of the same surface, not a foreign form. */
  .aup-comments-surface-composer {
    display: flex; flex-direction: column; gap: var(--space-element);
    padding: var(--space-block);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
  }
  /* arc#2935 item 1 (composer half): same padding-not-compensated fix as
     .aup-comment-item above, scoped to the top-level "new comment" composer
     only (a direct child of .aup-comments-surface — see _commentsSurfaceBuild)
     — a REPLY composer reuses this same class but is appended inside its
     parent .aup-comment-item (_commentsSurfaceToggleReplyComposer), where it
     is correctly meant to stay inset within the parent card's own padding,
     not bleed to the page edge. */
  .aup-comments-surface > .aup-comments-surface-composer {
    margin-left: calc(-1 * var(--space-block));
    margin-right: calc(-1 * var(--space-block));
  }
  .aup-comments-surface-composer-input,
  .aup-comment-edit-textarea {
    width: 100%; box-sizing: border-box;
    padding: 8px 12px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body); font-size: var(--type-body); line-height: var(--leading-normal);
    outline: none;
    resize: vertical;
    transition: border-color var(--transition);
  }
  .aup-comments-surface-composer-input::placeholder,
  .aup-comment-edit-textarea::placeholder { color: var(--color-dim); }
  .aup-comments-surface-composer-input:focus,
  .aup-comment-edit-textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  .aup-comments-surface[data-variant="thread"] {display:grid;grid-template-columns:minmax(0,1fr) auto;}
  .aup-comments-surface[data-variant="thread"] > * {grid-column:1 / -1;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-title {margin:0;grid-column:1;grid-row:1;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-toolbar {grid-column:2;grid-row:1;align-self:center;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item {background:transparent;box-shadow:none;border-radius:0;border:0;border-bottom:1px solid var(--color-border);margin-inline:0;padding:var(--space-block) 0;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer {margin-inline:0;background:transparent;border:1px solid var(--color-border);padding:var(--space-block);gap:var(--space-element);}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-login-prompt {background:transparent;padding:var(--space-block) 0;display:flex;gap:var(--space-block);align-items:center;flex-wrap:wrap;}
  .aup-comments-surface[data-variant="thread"] {border-top:1px solid var(--color-border);padding-top:var(--space-block);gap:var(--space-element);}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-empty {text-align:left;padding:var(--space-element) 0;margin:0;color:var(--color-dim);}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer {margin-block:0;box-shadow:none;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer:focus-within {border-color:var(--color-accent);}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer > textarea {border:0;box-shadow:none;padding:0;background:transparent;min-height:5em;}
  .aup-post-editor-draft-status {font-size:var(--type-caption);color:var(--color-dim);margin:0;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-text,
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-footer {margin-left:calc(40px + var(--space-block));}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-text {font-size:1rem;line-height:1.65;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item .aup-list-row-action {opacity:1;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer-toolbar {display:flex;align-items:center;border-bottom:1px solid var(--color-border);padding-bottom:var(--space-element);gap:var(--space-element);}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-preview {margin:0;min-height:5em;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-preview[hidden],
  .aup-comments-surface[data-variant="thread"] textarea[hidden] {display:none;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-login-prompt {padding:0;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;padding:0;overflow:hidden;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer > .aup-comments-surface-composer-toolbar {grid-column:1 / -1;grid-row:1;padding:0 var(--space-block);}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer > textarea,
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer > .aup-comments-surface-preview {grid-column:1;grid-row:2;min-height:5em;padding:var(--space-element) var(--space-block);margin:0;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer > .aup-media-insert-btn {grid-column:1;grid-row:2;align-self:center;margin:var(--space-element) 0 var(--space-element) var(--space-block);width:36px;height:36px;padding:0;border:1px solid var(--color-border);}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer > .aup-media-insert-btn span {display:none;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer > .aup-comments-surface-composer-row {grid-column:2;grid-row:2;align-self:center;padding:var(--space-element) var(--space-block);}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer > .aup-media-insert-strip {grid-column:1 / -1;grid-row:3;margin:0;padding:0 var(--space-block) var(--space-element);font-size:var(--type-caption);}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer-toolbar > .aup-media-insert-btn {margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 8px;white-space:nowrap;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer-toolbar > .aup-media-insert-btn svg {flex-shrink:0;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer-note {grid-column:1 / -1;}
  @media(max-width:640px) {
    .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer > .aup-comments-surface-composer-row {grid-column:1 / -1;grid-row:3;}
    .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer > .aup-media-insert-strip {grid-row:4;}
    .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer > textarea,
    .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer > .aup-comments-surface-preview {grid-column:1 / -1;}
  }
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-text img,
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-text video {display:block;width:auto;height:auto;max-width:min(100%,32rem);max-height:280px;object-fit:contain;object-position:left center;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-text > :last-child {margin-bottom:0;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-identity {display:contents;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-header {gap:var(--space-block);}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-list > .aup-comment-item:first-child {padding-top:var(--space-element);}
  @media(max-width:640px) {
    .aup-comments-surface[data-variant="thread"] .aup-comment-item-header {gap:var(--space-element);}
    .aup-comments-surface[data-variant="thread"] .aup-comment-item-spacer {display:none;}
    .aup-comments-surface[data-variant="thread"] .aup-comment-item-identity {display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--space-element);min-width:0;flex:1;}
    .aup-comments-surface[data-variant="thread"] .aup-comment-item-identity .aup-comment-item-author {flex-basis:100%;overflow-wrap:anywhere;}
    .aup-comments-surface[data-variant="thread"] .aup-comment-item-header .aup-avatar {width:40px;height:40px;}
    .aup-comments-surface[data-variant="thread"] .aup-comment-item-text,
    .aup-comments-surface[data-variant="thread"] .aup-comment-item-footer {margin-left:calc(40px + var(--space-element));}
  }
  .aup-comments-surface-composer-row { display: flex; justify-content: flex-end; gap: var(--space-element); }
  .aup-post-editor[data-presentation="page"] .aup-writing-workspace.aup-comments-surface-composer { display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-block) var(--space-section);padding:0;border:0;background:transparent;box-shadow:none; }
  .aup-writing-workspace > .aup-comments-surface-error {grid-column:1 / -1;order:2;}
  .aup-writing-toolbar {grid-column:1 / -1;order:1;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:5;padding:12px 0;background:var(--color-bg);border-bottom:1px solid var(--color-border);}
  .aup-writing-toolbar .aup-form-actions {margin-left:0;flex-shrink:0;}
  .aup-writing-content .aup-post-editor-body-toolbar {flex-wrap:wrap;gap:8px;}
  .aup-writing-identity {display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-width:0;}
  .aup-writing-heading {font:600 16px/1.4 var(--font-body);margin:0;}
  .aup-writing-back.aup-action {gap:6px;min-height:36px;padding:4px 8px;border:0;background:transparent;color:var(--color-dim);}
  .aup-writing-identity .aup-post-editor-draft-status,.aup-writing-identity .aup-post-editor-draft-dot {font-size:12px;}
  .aup-writing-content .aup-post-editor-body-toolbar {border-bottom:1px solid var(--color-border);padding-bottom:8px;}
  .aup-writing-content .aup-post-editor-body-toolbar > .aup-post-editor-body-tabs {flex:0 0 auto;}
  .aup-writing-content .aup-post-editor-body-toolbar > .aup-media-insert-btn {margin-left:auto;}
  .aup-writing-format {display:flex;gap:4px;flex-wrap:wrap;}
  .aup-writing-format .aup-action {min-width:32px;min-height:32px;padding:4px 8px;font-size:13px;}
  .aup-writing-main {order:3;min-width:0;display:flex;flex-direction:column;gap:20px;}
  .aup-writing-title > .aup-post-editor-label,.aup-writing-content > .aup-post-editor-label {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  .aup-post-editor[data-presentation="page"] .aup-writing-title input {width:100%;padding:8px 0;font-family:var(--font-heading);font-size:clamp(24px,2.5vw,30px);font-weight:600;line-height:1.4;border:0;border-radius:0;background:transparent;box-shadow:none;}
  .aup-post-editor[data-presentation="page"] .aup-writing-content textarea {min-height:55vh;min-height:55dvh;width:100%;padding:16px 0;border:0;border-radius:0;background:transparent;box-shadow:none;resize:vertical;font-family:var(--font-body);font-size:16px;line-height:1.75;}
  .aup-post-editor[data-presentation="page"] .aup-writing-content .aup-post-editor-body-preview {min-height:55vh;padding:16px 0;border:0;background:transparent;font-size:16px;line-height:1.75;}
  .aup-writing-settings {position:static;min-width:0;margin-left:auto;}
  .aup-writing-settings > summary {display:flex;align-items:center;list-style:none;min-height:40px;padding:0 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--type-caption);font-weight:500;cursor:pointer;}
  .aup-writing-settings > summary::-webkit-details-marker {display:none;}
  .aup-writing-settings[open] > summary {background:var(--color-accent-bg);color:var(--color-accent);}
  .aup-writing-settings-panel {position:absolute;right:0;top:calc(100% + 8px);z-index:10;width:min(360px,calc(100vw - 32px));box-sizing:border-box;max-height:65vh;max-height:65dvh;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:20px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 12px 32px #00000018;}
  .aup-writing-settings-header {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;}
  .aup-writing-settings-header .aup-action {width:28px;min-height:28px;padding:0;}
  .aup-writing-settings:not([open]) > .aup-writing-settings-panel {display:none;}
  .aup-writing-settings .aup-post-editor-label {font-size:var(--type-caption);font-weight:500;}
  .aup-writing-settings .aup-post-editor-tags {width:100%;}
  @media(max-width:899px) {
    .aup-post-editor[data-presentation="page"] .aup-writing-workspace.aup-comments-surface-composer {gap:16px;}
    .aup-writing-toolbar {flex-wrap:wrap;gap:8px;}
    .aup-writing-identity {flex:1 1 100%;}
    .aup-writing-settings {margin-left:0;}
    .aup-writing-toolbar .aup-form-actions {margin-left:auto;}
    .aup-writing-main {order:4;}
  }
  /* post-editor (issue #1623 round 2): create/edit now mount their form inside
     the shared form-dialog modal (_aupShowFormOverlay, action.ts) instead of an
     always-open inline card, so .aup-post-editor's own composer needs none of
     the card padding/elevation the page-embedded version used to add — the
     dialog body (.aup-view[data-variant="form-dialog-body"]) already supplies
     that chrome. Selector kept (not deleted) so a future non-dialog placement
     of this widget doesn't silently inherit unstyled comment-reply spacing. */
  .aup-post-editor .aup-comments-surface-composer { padding: 0; }
  .aup-post-editor[data-presentation="page"] { width: 100%; min-width: 0; }
  .aup-post-editor[data-presentation="page"] .aup-comments-surface-composer { background: transparent; border: 0; gap: var(--space-block); }
  .aup-post-editor-field { display: flex; flex-direction: column; gap: var(--space-element); min-width: 0; }
  .aup-post-editor-label { font-size: var(--type-body); font-weight: var(--heading-weight); color: var(--color-text); }
  .aup-post-editor[data-presentation="page"] textarea { min-height: 12em; }
  .aup-post-editor[data-presentation="page"] .aup-post-editor-draft-dot { margin-right:auto; align-self:center; }
  .aup-post-editor[data-presentation="page"] .aup-post-editor-body-preview { min-height:12em; }

  /* post-editor body Write/Preview toggle (issue #4057 P1 composer 预览
     sub-capability). Reuses the generic .aup-tab-bar/.aup-tab primitive for
     the toggle and .aup-text[data-format="markdown"] for the rendered
     preview's prose styling — no new tab or typography tokens. */
  .aup-post-editor-body-tabs { margin-bottom: var(--space-element); padding: 0; }
  .aup-post-editor-body-preview {
    box-sizing: border-box;
    /* Approximates the textarea's rows=8 height (em-based, not a magic px)
       so toggling Write/Preview doesn't visibly resize the dialog. */
    min-height: 10em;
    padding: 8px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .aup-post-editor-body-preview-empty { color: var(--color-dim); font-size: var(--type-body); }
  /* media-insert (arc#6621): the upload toolbar button + status strip shared
     by the post editor and (#6622) the comments composer — lives in this
     sheet for the same reason the composer rules do: it is the one stylesheet
     both the AUP page and web-device's comments runtime embed. Tokens only.
     The toolbar row holds the tab bar + the right-aligned upload button. */
  .aup-post-editor-body-toolbar { display: flex; align-items: center; gap: var(--space-element); margin-bottom: var(--space-element); }
  .aup-post-editor-body-toolbar > .aup-post-editor-body-tabs { flex: 1 1 auto; margin-bottom: 0; }
  /* Tag chips (arc#6627): free-text input + whitelist suggestion row. */
  .aup-post-editor-tags { display: flex; flex-direction: column; gap: var(--space-element); }
  .aup-post-editor-tag-chips { display: flex; flex-wrap: wrap; gap: 4px; }
  .aup-post-editor-tag-chips:empty { display: none; }
  .aup-post-editor-tag-input {
    box-sizing: border-box; width: 100%;
    padding: 8px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font: inherit;
  }
  .aup-post-editor-tag-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
    outline: none;
  }
  .aup-post-editor-tag-suggestions { display: flex; flex-wrap: wrap; gap: 4px; }
  .aup-post-editor-tag-suggestions:empty { display: none; }
  .aup-post-editor-tag-suggestion {
    padding: 2px 8px;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: 999px;
    color: var(--color-dim);
    font-size: var(--type-caption);
    cursor: pointer;
  }
  .aup-post-editor-tag-suggestion:hover { border-color: var(--color-accent); color: var(--color-accent); }
  .aup-media-insert-btn { margin-left: auto; flex-shrink: 0; }
  .aup-media-insert-strip {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: var(--space-element);
    font-size: var(--type-small);
    line-height: var(--leading-normal);
    color: var(--color-dim);
  }
  .aup-media-insert-status[data-kind="busy"] { color: var(--color-dim); }
  .aup-media-insert-login-prompt { color: var(--color-accent); }
  .aup-media-insert-items { display: flex; flex-direction: column; gap: 4px; }
  .aup-media-insert-items:empty { display: none; }
  .aup-media-insert-item {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-element);
    padding: 4px var(--space-element);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
  }
  .aup-media-insert-item[data-kind="error"] { border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-border)); }
  .aup-media-insert-item-name { color: var(--color-text); overflow-wrap: anywhere; }
  /* 12em flex-basis: the smallest message column that keeps name / message /
     actions on ONE row at desktop width; no canonical width token covers a
     text-column minimum (the --space-* scale is spacing, not measure). */
  .aup-media-insert-item-msg { flex: 1 1 12em; min-width: 0; color: var(--color-dim); overflow-wrap: anywhere; }
  .aup-media-insert-item[data-kind="error"] .aup-media-insert-item-msg { color: var(--color-error); }
  .aup-media-insert-action {
    padding: 2px var(--space-element);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body); font-size: var(--type-small);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
  }
  .aup-media-insert-action:hover { border-color: var(--color-accent); color: var(--color-accent); }
  .aup-comments-surface-composer-input[data-media-drop="true"] { border-color: var(--color-accent); border-style: dashed; }
  /* Comments composer upload toolbar (arc#6622): one row above the textarea
     holding the shared upload button, right-aligned by the button's own
     margin-left:auto rule above — so the action row below still starts with
     Post/Reply (every host and test keys on that). Only built for a session
     that may upload. */
  .aup-comments-surface-composer-toolbar { display: flex; align-items: center; gap: var(--space-element); }
  /* Per-composer refusal line (arc#6622): same tint/size as the widget-level
     .aup-comments-surface-error, placed under the composer's own strip so a
     reply deep in a thread sees why its Reply click did nothing. */
  .aup-comments-surface-composer-note { color: var(--color-error); font-size: var(--type-caption); }
  .aup-comment-item-edit { display: flex; flex-direction: column; gap: var(--space-element); }
  .aup-comment-item-edit-actions { display: flex; justify-content: flex-end; gap: var(--space-element); }
  .aup-comment-item-edit-actions.aup-form-actions > .aup-action { flex:0 0 auto; width:auto; min-width:80px; }
  /* ── Nested reply-tree (issue #1006 Phase 3) ──
     Indentation compounds purely from DOM nesting: each level wraps the
     next inside another .aup-comment-item-children, so a single
     padding-left naturally produces increasing indent with depth — see
     comments-surface-bundle.ts module doc "Nested reply-tree rendering". */
  .aup-comment-item-children {
    display: flex; flex-direction: column; gap: var(--space-element);
    margin-top: var(--space-element);
    padding-left: var(--space-block);
    border-left: 1px solid var(--card-border);
  }
  /* arc#2933 follow-up (issuecomment-5163252813): no own margin-left here —
     .aup-comment-item-footer already spaces its children via its flex gap
     (same pattern .aup-comment-item-header uses above). A redundant
     margin-left on this button double-spaced it when a reactions picker
     precedes it, and — worse — pushed Reply off the card's own left edge
     whenever it's the footer's ONLY child (reactions disabled, or the
     reaction placeholder collapsed via :empty). Left-alignment must come
     from the footer's own flex layout, not a per-button margin assuming a
     preceding sibling always exists. */
  .aup-comment-reply-btn {
    display: inline-flex; align-items: center;
    padding: 2px var(--space-element);
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--color-dim);
    /* A <button> does not inherit the page font by default (browser UA
       stylesheet), so without this it renders in the platform's default
       UI font (observed as Arial on arc#2933) instead of the site's
       Inter/Noto Sans SC — every other text in this widget already goes
       through _escapeHtml'd content inside a font-family: var(--font-body)
       ancestor (.aup-comment-item-text etc.), only this <button> was left
       on the UA default. */
    font-family: var(--font-body);
    font-size: var(--type-caption);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }
  .aup-comment-reply-btn:hover { background: var(--hover-bg); color: var(--color-text); }
  .aup-comment-reply-composer { padding-top: var(--space-element); }
  /* Guest display-name field (Phase 3 anonymous posting) — same input
     chrome as the composer textarea, single line. */
  .aup-comments-surface-composer-name {
    width: 100%; box-sizing: border-box;
    padding: 8px 12px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body); font-size: var(--type-body);
    outline: none;
    transition: border-color var(--transition);
  }
  .aup-comments-surface-composer-name::placeholder { color: var(--color-dim); }
  .aup-comments-surface-composer-name:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  /* Guest gating (issue #1514) — same card chrome as the composer it
     replaces, so the surface doesn't visually jump when requireAuth flips
     the guest UX from a full form to a read-only prompt. */
  .aup-comments-surface-login-prompt {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    padding: var(--space-block);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    color: var(--color-dim);
    font-size: var(--type-body);
  }

  /* Thread grouping: separators distinguish roots, rails connect descendants. */
  .aup-comments-surface[data-variant="thread"] .aup-comment-item {min-width:0;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-list > .aup-comment-item {border-bottom:0;border-top:1px solid var(--color-border);padding-block:20px;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-list > .aup-comment-item:first-child {border-top:0;padding-top:8px;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-children {min-width:0;margin:0 0 16px 20px;padding-left:20px;border-left:1px solid var(--color-border);gap:0;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-children .aup-comment-item {border-bottom:0;padding-block:12px;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-children .aup-comment-item-header {gap:12px;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-children .aup-comment-item-header .aup-avatar {width:32px;height:32px;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-children .aup-comment-item-text,
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-children .aup-comment-item-footer {margin-left:44px;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-text {overflow-wrap:anywhere;min-width:0;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-item-text pre {max-width:100%;box-sizing:border-box;}
  .aup-comments-surface[data-variant="thread"] .aup-comment-reply-composer {margin-left:60px;}
  .aup-comments-surface[data-variant="thread"] .aup-comments-surface-composer .aup-comments-surface-preview {margin-left:0;}
  @media(max-width:640px) {
    .aup-comments-surface[data-variant="thread"] .aup-comment-item-children {margin-left:12px;padding-left:12px;}
    .aup-comments-surface[data-variant="thread"] .aup-comment-item-children .aup-comment-item-children {margin-left:6px;padding-left:8px;}
    .aup-comments-surface[data-variant="thread"] .aup-comment-item-children .aup-comment-item-children .aup-comment-item-children {margin-left:0;padding-left:0;border-left:0;}
    .aup-comments-surface[data-variant="thread"] .aup-comment-reply-composer {margin-left:0;}
    .aup-comments-surface[data-variant="thread"] .aup-comment-item-children .aup-comment-item-text,
    .aup-comments-surface[data-variant="thread"] .aup-comment-item-children .aup-comment-item-footer {margin-left:0;}
  }


.aup-post-editor-tags { min-width: 0; }
.aup-post-editor-tags .aup-tag-control { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 10px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg); min-height:44px; box-sizing:border-box; }
.aup-post-editor-tags .aup-tag-control:focus-within { border-color:var(--color-accent); box-shadow:0 0 0 2px var(--color-accent-bg); }
.aup-post-editor-tags .aup-post-editor-tag-chips { display:contents; }
.aup-post-editor-tags .aup-post-editor-tag-chip { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:3px 5px 3px 9px; border:0; border-radius:var(--radius-sm); background:var(--color-accent-bg); color:var(--color-text); font-size:13px; line-height:22px; }
.aup-post-editor-tags .aup-chip-label { overflow-wrap:anywhere; }
.aup-post-editor-tags .aup-chip-dismiss { display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px; width:22px; height:22px; margin:0; padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--color-dim); font:inherit; cursor:pointer; }
.aup-post-editor-tags .aup-chip-dismiss:hover { background:var(--color-border); color:var(--color-text); }
.aup-post-editor-tags .aup-tag-control .aup-post-editor-tag-input { flex:1 1 160px; width:0; min-width:100px; min-height:30px; padding:0 2px; margin:0; border:0; outline:0; box-shadow:none; background:transparent; color:var(--color-text); font:inherit; font-size:14px; }
.aup-post-editor-tags .aup-post-editor-tag-suggestions[role="listbox"] { display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:2px; margin-top:8px; padding:4px; max-height:200px; overflow-y:auto; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg); }
.aup-post-editor-tags .aup-post-editor-tag-suggestions[hidden] { display:none; }
.aup-post-editor-tags .aup-post-editor-tag-suggestions [role="option"] { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; width:100%; min-height:36px; padding:7px 10px; box-sizing:border-box; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--color-dim); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.aup-post-editor-tags .aup-post-editor-tag-suggestions [role="option"]::after { content:"+"; color:var(--color-dim); margin-left:12px; }
.aup-post-editor-tags .aup-post-editor-tag-suggestions [role="option"]:hover,
.aup-post-editor-tags .aup-post-editor-tag-suggestions [aria-selected="true"] { background:var(--color-accent-bg); color:var(--color-accent); }
.aup-post-editor-tags .aup-chip-dismiss:focus-visible { outline:2px solid var(--color-accent); outline-offset:1px; }
.aup-post-editor-tags .aup-tag-field-status { display:block; font-size:12px; line-height:1.5; color:var(--color-dim); }
.aup-post-editor-tags .aup-tag-field-status:empty { display:none; }

.detail-content-layout,
.detail-content-layout--has-toc {
  display: block;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  --detail-content-top: var(--space-block);
}
.detail-content-area {
  width: 100%;
  max-width: none;
  padding: var(--space-block) var(--page-gutter);
  box-sizing: border-box;
}
.detail-content-area::before {
  display: none;
}
.detail-content-area :is(h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: var(--space-section);
}
@media (min-width: 1101px) {
  .detail-content-layout--has-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 0 var(--space-section);
    padding-inline: var(--page-gutter);
    box-sizing: border-box;
  }
  .detail-content-layout--has-toc .detail-content-area {
    grid-column: 1;
    grid-row: 1;
    padding-inline: 0;
  }
  .detail-content-layout--has-toc .detail-content-sidebar {
    grid-column: 2;
    grid-row: 1;
    padding: var(--space-block) 0;
    min-width: 0;
  }
  .detail-content-layout--has-toc .detail-content-after {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-inline: 0;
  }
}
.detail-content-area p,
.detail-content-area li {
  font-size: var(--type-body);
  line-height: var(--leading-relaxed);
}
.detail-content-area h2,
.detail-content-area h3 {
  font-family: var(--font-heading);
  margin-top: var(--space-section);
}
.detail-content-after {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--page-gutter);
  box-sizing: border-box;
}
.detail-content-after .comments-surface,
.detail-content-after .post-share,
.detail-content-after .moderation-menu {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.detail-content-area {
  overflow-wrap: anywhere;
  min-width: 0;
}
.detail-content-area .aup-text {
  max-width: 100%;
  margin: 0 0 var(--space-block);
}
.detail-content-area img,
.detail-content-area video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.detail-content-area pre {
  overflow-x: auto;
  max-width: 100%;
  padding: var(--space-block);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.detail-content-area table {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.detail-content-area a {
  color: var(--color-accent);
}

.detail-content-area > .container {
  padding: 0;
  max-width: none;
  width: 100%;
}
.detail-content-area .aup-view > p.aup-text {
  margin: 0;
}
.detail-content-area .aup-view > .aup-text {
  margin: 0;
}
.detail-content-area .aup-view > h2.aup-text,
.detail-content-area .aup-view > h3.aup-text {
  margin-top: var(--space-block);
}
.detail-content-area .aup-view > p:empty {
  display: none;
}
.detail-content-area ul,
.detail-content-area ol {
  margin: 0;
  padding-inline-start: 1.5em;
}
.detail-content-area blockquote.aup-text {
  border-inline-start: 3px solid var(--color-accent);
  padding: var(--space-element) var(--space-block);
  background: var(--color-surface);
  color: var(--color-dim);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.detail-content-area blockquote p {
  margin: 0;
}
.detail-content-area .aup-code-block {
  min-width: 0;
  max-width: 100%;
}
.detail-content-area .aup-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-element) var(--space-block);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--type-caption);
  color: var(--color-dim);
}
.detail-content-area .aup-code-toolbar + pre {
  margin: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.detail-content-area .aup-code-copy-btn {
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.7em;
  cursor: pointer;
}
.detail-content-area .aup-code-copy-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.detail-content-area .aup-markdown-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
.detail-content-after .post-reaction {
  width: 100%;
  margin-inline: 0;
  padding-block: var(--space-element);
}
.detail-content-after .comments-surface {
  margin-top: var(--space-block);
}

.detail-content-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-block);
}
.detail-content-after .post-reaction {
  grid-column: 1;
  grid-row: 1;
}
.detail-content-after .post-share {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
  justify-content: flex-end;
}
.detail-content-after .comments-surface {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0;
}
@media (max-width: 640px) {
  .detail-content-after {
    grid-template-columns: minmax(0, 1fr);
  }
  .detail-content-after .post-share {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
  }
  .detail-content-after .comments-surface {
    grid-row: 3;
  }
}
.detail-content-area p,
.detail-content-area li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
}
#comments {
  scroll-margin-top: var(--space-section);
}

/* Keep the shared page frame; constrain prose rather than changing page width. */
.detail-content-area p.aup-text,
.detail-content-area li {
  max-width: min(100%, 44rem);
}
.detail-content-area:lang(en) p.aup-text {
  font-weight: 300;
}
.detail-content-area > :first-child,
.detail-content-area .aup-view > :first-child {
  margin-top: 0;
}
.detail-content-area li:has(> input[type="checkbox"]) {
  list-style: none;
}
.detail-content-area pre code {
  white-space: pre;
  overflow-wrap: normal;
}

/* Inline media previews are left aligned; the native lightbox retains full-size viewing. */
.detail-content-area .aup-text img,
.detail-content-area .aup-text video,
.detail-content-area img,
.detail-content-area video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 720px);
  max-height: 480px;
  object-fit: contain;
  margin-inline: 0;
}
.detail-content-area .aup-text:has(> img),
.detail-content-area .aup-text:has(> video) {
  text-align: left;
  align-items: flex-start;
}

/* Reading hierarchy: reserve emphasis for headings and intentional strong text. */
.detail-content-area h2.aup-text {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.45;
}
.detail-content-area h3.aup-text {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
}
.detail-content-area strong {
  font-weight: 600;
}
.detail-content-after .aup-comment-item-text {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
}

.moderation-menu [hidden],
.moderation-menu [data-post-edit][hidden] {
  display: none;
}

.moderation-menu {
  width: calc(min(var(--page-max, 72rem), 100%) - 2 * var(--page-gutter, 1.25rem));
  margin: 0 auto;
  padding: 0.75rem 0 0.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.moderation-menu-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.moderation-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-border, #e5e7eb);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-dim, #6b7280);
}

.moderation-badge[data-moderation-badge="locked"] {
  color: var(--color-danger, #b91c1c);
  border-color: color-mix(in srgb, var(--color-danger, #b91c1c) 35%, transparent);
}

.moderation-badge[data-moderation-badge="featured"] {
  color: var(--color-accent, #2563eb);
  border-color: color-mix(in srgb, var(--color-accent, #2563eb) 35%, transparent);
}

.moderation-menu-admin {
  margin-left: 0;
}

.moderation-menu-toggle,
.moderation-menu-panel button,
.moderation-menu-dialog-actions button {
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm);
  background: var(--color-surface, #fff);
  cursor: pointer;
  color: var(--color-text, #0f172a);
}

.moderation-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% - 0.15rem);
  z-index: 4;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.35rem;
  gap: 0.2rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg);
  background: var(--color-surface, #fff);
  box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}

.moderation-menu-panel button {
  text-align: left;
  border: none;
  border-radius: var(--radius-sm);
}

.moderation-menu-panel button:hover {
  background: color-mix(in srgb, var(--color-border, #e5e7eb) 40%, transparent);
}

.moderation-menu-danger {
  color: var(--color-danger, #b91c1c);
}

.moderation-menu-status {
  flex-basis: 100%;
  font-size: 0.875rem;
  color: var(--color-dim, #6b7280);
}

.moderation-menu-status.is-error {
  color: var(--color-danger, #b91c1c);
}

.moderation-menu {
  justify-content: flex-end;
  border-top: 1px solid var(--color-border);
  padding: var(--space-element) 0;
  margin-block: var(--space-block);
}
.moderation-menu-badges {
  margin-right: auto;
}
.moderation-menu [data-post-edit],
.moderation-menu-toggle {
  min-height: 36px;
  padding: 8px 12px;
  font-size: var(--type-caption);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-dim);
  text-decoration: none;
}
/* Anonymous readers should not inherit an empty administration toolbar. */
.moderation-menu:not(
    :has(
        [data-post-edit]:not([hidden]),
        [data-moderation-admin]:not([hidden]),
        [data-moderation-badges]:not([hidden])
      )
  ) {
  display: none;
}

/* The detail layout places this toolbar in its hero slot, before the body. */
.moderation-menu {
  width: 100%;
  max-width: var(--content-max);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 var(--page-gutter) var(--space-element);
  border-top: 0;
}
.moderation-menu-panel {
  right: var(--page-gutter);
}

.moderation-menu [data-post-edit],
.moderation-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  font: inherit;
  font-size: var(--type-caption);
  line-height: 1;
  padding: 0 12px;
}
.moderation-menu [data-post-edit] {
  min-width: 64px;
}
.moderation-menu-toggle {
  width: 36px;
  padding: 0;
}

.moderation-form-hint {
  margin: 8px 0 0;
  font-size: var(--type-caption);
  line-height: 1.6;
  color: var(--color-dim);
}
.moderation-form-error {
  margin: 0;
  color: var(--color-error);
  font-size: var(--type-caption);
}

.moderation-badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  width: 20px;
  height: 24px;
  justify-content: center;
  font-weight: 400;
}
.moderation-state-note {
  flex-basis: 100%;
  font-size: var(--type-caption);
  color: var(--color-dim);
  line-height: 1.5;
}

.moderation-badge[data-moderation-badge="featured"] svg {
  fill: currentColor;
}

.post-hero {
  background: var(--color-bg);
  border: 0;
  overflow: visible;
}
.post-hero::before {
  display: none;
}
.post-hero-inner,
.post-hero--no-cover .post-hero-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-section) var(--page-gutter) var(--space-block);
  display: block;
}
.post-hero-title,
.post-hero-title--long,
.post-hero-title--xlong {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  line-height: var(--leading-tight);
  max-width: none;
  margin: 0 0 var(--space-block);
}
.post-hero-meta {
  font-family: var(--font-body);
  font-size: var(--type-caption);
}
.post-hero-media {
  margin-top: var(--space-block);
  box-shadow: none;
}

.post-hero-inner {
  box-sizing: border-box;
}
.post-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-element);
  font-size: var(--type-caption);
  color: var(--color-dim);
  margin-bottom: var(--space-block);
}
.post-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.post-hero-meta,
.post-hero-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-element);
  color: var(--color-dim);
}
.post-hero-author {
  font-weight: 600;
  color: var(--color-text);
}
.post-hero-tags .tag {
  color: var(--color-dim);
  text-decoration: none;
  padding: 2px 8px;
  background: var(--color-accent-bg);
  border-radius: var(--radius-sm);
  font-size: var(--type-caption);
}
.post-hero-cover {
  max-width: 100%;
  height: auto;
}

.discussion-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-element);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: calc(var(--space-block) + var(--space-element)) var(--page-gutter) 0;
  box-sizing: border-box;
}
.discussion-heading .post-hero,
.discussion-heading .post-hero-inner,
.discussion-heading .post-hero-content {
  display: contents;
}
.discussion-heading .post-breadcrumb {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
}
.discussion-heading .post-hero-title {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}
.discussion-heading .post-hero-meta {
  grid-column: 1 / -1;
  grid-row: 3;
  gap: var(--space-block);
}
.discussion-heading .post-hero-media {
  grid-column: 1 / -1;
  grid-row: 4;
}
.discussion-heading .moderation-menu {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}
.discussion-heading .moderation-menu-panel {
  right: 0;
  top: calc(100% + var(--space-element));
}
.post-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-element);
}
.post-hero-tags .tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.post-hero-tags .tag:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.post-hero-tags .tag:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .discussion-heading {
    grid-template-columns: minmax(0, 1fr);
  }
  .discussion-heading .moderation-menu {
    grid-column: 1;
    grid-row: 4;
    justify-content: flex-start;
  }
  .discussion-heading .post-hero-media {
    grid-row: 5;
  }
}
.post-hero-profile {
  display: flex;
  align-items: center;
  gap: var(--space-block);
}
.post-hero-author-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.post-hero-author-line {
  display: flex;
  align-items: center;
  gap: var(--space-element);
  flex-wrap: wrap;
}
.post-hero-category {
  color: var(--color-accent);
  background: var(--color-accent-bg);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  text-decoration: none;
}
.discussion-heading .post-hero-tags {
  margin-inline: 0;
}
.post-hero-title {
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .discussion-heading .post-hero-tags {
    margin-inline: 0;
  }
}

/* Stable metadata rows regardless of author/category/tag length. */
.discussion-heading .post-hero-meta {
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
}
.post-hero-profile {
  min-width: 0;
  gap: 12px;
}
.post-hero-profile > .aup-avatar {
  flex-shrink: 0;
}
.post-hero-author-details {
  min-width: 0;
}
.post-hero-author {
  overflow-wrap: anywhere;
}
.discussion-heading .post-hero-tags {
  margin: 0 0 0 60px;
  gap: 6px;
}
@media (max-width: 640px) {
  .discussion-heading .post-hero-tags {
    margin-left: 0;
  }
}

.post-hero-tags .tag {
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 400;
}
.post-hero-tags .tag::before {
  content: "#";
  opacity: 0.65;
}
.post-hero-tags .tag:hover {
  text-decoration: underline;
}
.discussion-heading .post-hero-tags {
  gap: 12px;
}

/* The avatar anchors a two-row identity/topic group. */
.post-hero-profile {
  align-items: flex-start;
  gap: 12px;
}
.post-hero-author-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.post-hero-author-line,
.post-hero-topic-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
}
.post-hero-author-line time {
  font-size: var(--type-caption);
  color: var(--color-dim);
}
.discussion-heading .post-hero-tags {
  margin: 0;
  gap: 6px 12px;
}
.post-hero-topic-line .tag {
  overflow-wrap: anywhere;
}

.post-reaction {
  position: relative;
  width: calc(min(var(--page-max, 72rem), 100%) - 2 * var(--page-gutter, 1.25rem));
  margin: 0 auto;
  padding: 0.75rem 0 1.25rem;
}

.post-reaction-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.post-reaction-chip,
.post-reaction-add {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.2;
}

.post-reaction-add {
  font-weight: 600;
  color: var(--color-dim, #6b7280);
}

.post-reaction-picker {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  z-index: 20;
  box-shadow: 0 8px 24px #00000018;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md);
  background: var(--color-surface, #fff);
  max-width: 16rem;
}

.post-reaction-picker button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  padding: 0.25rem;
  line-height: 1;
}

.post-reaction-error {
  margin-top: 0.5rem;
  color: var(--color-danger, #b91c1c);
  font-size: 0.875rem;
}

/* Disclosure on small screens; a quiet reading rail when both columns fit. */
.detail-content-sidebar {
  padding: var(--space-block) var(--page-gutter) 0;
  box-sizing: border-box;
}
.in-page-toc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 0;
}
.in-page-toc .docs-toc-title {
  display: none;
}
.in-page-toc .docs-toc-toggle {
  display: block;
  width: 100%;
  padding: var(--space-element) var(--space-block);
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--color-dim);
  text-align: left;
  cursor: pointer;
}
.in-page-toc .docs-toc-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 var(--space-block) var(--space-block);
}
.in-page-toc.is-open .docs-toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
.in-page-toc a {
  color: var(--color-accent);
  font-size: var(--type-caption);
  text-decoration: none;
}
@media (min-width: 1101px) {
  .detail-content-sidebar .in-page-toc {
    position: sticky;
    top: var(--space-section);
    max-height: calc(100dvh - 2 * var(--space-section));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-radius: 0;
    padding-left: var(--space-block);
  }
  .detail-content-sidebar .docs-toc-title {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-bg);
    padding-bottom: var(--space-element);
    margin: 0 0 var(--space-element);
    font-size: var(--type-caption);
    font-weight: 600;
    color: var(--color-text);
  }
  .detail-content-sidebar .docs-toc-toggle {
    display: none;
  }
  .detail-content-sidebar .docs-toc-list,
  .detail-content-sidebar .in-page-toc.is-open .docs-toc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  .detail-content-sidebar .docs-toc-link {
    display: block;
    padding-block: 6px;
    line-height: 1.5;
    color: var(--color-dim);
    overflow-wrap: anywhere;
  }
  .detail-content-sidebar .docs-toc-link:hover,
  .detail-content-sidebar .docs-toc-link.is-active {
    color: var(--color-accent);
  }
  .detail-content-sidebar .docs-toc-link.is-active {
    font-weight: 600;
  }
  .detail-content-sidebar .docs-toc-item--h3 {
    padding-left: var(--space-element);
  }
}
.in-page-toc a:focus-visible,
.in-page-toc button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Share control only. Column width is theme detail-content --content-max. */

.post-share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-block: 0 1rem;
}

.post-share-copy,
.post-share-native {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #0f172a);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 0.875rem;
  cursor: pointer;
}
.post-share-copy,
.post-share-native {
  height: 36px;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-dim);
  font-size: var(--type-caption);
}
.post-share-copy {
  gap: var(--space-element);
  text-decoration: none;
}

/* comments-surface — host-side layout only (arc#2676).
 *
 * The thread's OWN styling ships with the renderer, in the shared
 * COMMENTS_SURFACE_CSS the `comments-surface-runtime` enhancement injects
 * (issue #2675 extracted it out of css.ts so AUP pages and this page consume
 * one source). Nothing in that sheet is restated here — this file only
 * positions the mount point in the page flow and styles the one state the
 * shared renderer has no concept of: a host transport failure.
 *
 * Every value is a canonical AUP token (providers/runtime/ui/CLAUDE.md rule 1).
 * Pre-rendered pages already embed the full primitives sheet (EPIC #2672 fact
 * 7), so the tokens resolve here exactly as they do inside /app.
 */

.comments-surface {
  margin-top: var(--space-section);
  min-width: 0;
  overflow-wrap: anywhere;
  /* A real layout box before the thread loads. The section is emitted EMPTY
     and, deliberately, NOT `hidden` — `display:none` has no box, and an
     element with no box never intersects, so the IntersectionObserver that
     triggers the lazy fetch would never fire. 1px is invisible to a reader
     and is also what a JS-disabled visitor is left with: an empty band, no
     skeleton residue. */
  min-height: 1px;
}

.comments-surface-error {
  display: flex;
  align-items: center;
  gap: var(--space-element);
  padding: var(--space-block);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-dim);
  font-size: var(--type-caption);
  line-height: var(--leading-normal);
}

.comments-surface-retry {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  /* No canonical token for a control's own height/padding — see rule 4's
     "touch-target heights" carve-out; kept on the spacing scale where it can
     be. */
  padding: 0.25rem var(--space-element);
  cursor: pointer;
  transition: var(--transition);
}

.comments-surface-retry:hover {
  background: var(--hover-bg);
}

/* SSR uses the same AUP thread classes and layout as the live mount. */
.comments-surface-ssr {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Reaction chrome matches the post-level picker (surface pill, 0.875rem).
   SSR paints the "+" before the bundle mounts; the same rules cover the
   live .aup-reaction chips once they replace the row. */
.aup-reaction {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.comments-surface-ssr-reactions {
  display: contents;
}

.comments-surface-ssr-reaction,
.aup-reaction-chip,
.aup-reaction-add {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
}

.aup-reaction-add {
  font-weight: 600;
  color: var(--color-dim, #6b7280);
  cursor: pointer;
}

.aup-reaction-chip.own {
  border-color: var(--color-accent, #0066cc);
  background: var(--color-accent-bg, rgba(0, 102, 204, 0.08));
  color: var(--color-accent, #0066cc);
}

[data-reaction-error],
.post-reaction-error {
  margin-top: 0.5rem;
  color: var(--color-danger, #b91c1c);
  font-size: 0.875rem;
}

.comments-surface[data-comments-locked="1"] .aup-comments-surface-composer,
.comments-surface[data-comments-locked="1"] [data-action="reply-comment"],
.comments-surface[data-comments-locked="1"] .aup-comments-surface-login-prompt {
  display: none !important;
}
[data-comments-lock-notice] {
  padding: 16px 0;
  color: var(--color-dim);
  font-size: var(--type-body);
}
[data-comments-lock-notice][hidden] {
  display: none;
}