/* doc-style.css -- ACMS document chrome. * Refactored 2026-05-12 to consume semantic tokens from tokens.css (WS-Theme). * No hard-coded colours. All values flow through tokens; the active theme is * selected on by the runtime theme switcher. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-weight: var(--font-weight-regular); color: var(--fg-primary); background: var(--bg-canvas); font-size: var(--font-size-base); line-height: var(--line-height-normal); } .doc { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); max-width: var(--doc-shell-max); margin: 0 auto; gap: 0; background: var(--bg-elevated); min-height: 100vh; box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-4); } aside.toc { position: sticky; /* Sticky offset accounts for the fixed .app-nav AND the slide-in .doc-compact-header so the TOC never tucks behind either. The compact header height is set as a CSS var on body at runtime; defaults to 0. */ top: calc(var(--app-nav-height, 52px) + var(--doc-compact-height, 0px)); align-self: start; height: calc(100vh - var(--app-nav-height, 52px) - var(--doc-compact-height, 0px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--space-10) var(--space-8) var(--space-10) var(--space-9); border-right: 1px solid var(--border-default); background: var(--bg-elevated); font-size: var(--font-size-sm); scrollbar-width: thin; transition: top .28s cubic-bezier(.2,.7,.2,1), height .28s cubic-bezier(.2,.7,.2,1); } aside.toc::-webkit-scrollbar { width: 6px; } aside.toc::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-xs); } .toc-eyebrow { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-tertiary); margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-default); } .toc-back { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-tertiary); text-decoration: none; margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-default); width: 100%; transition: color var(--duration-normal) var(--ease-out-quint); } .toc-back:hover { color: var(--accent-bg); } .toc-back .arr { font-size: var(--font-size-sm); line-height: 1; } .toc-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--fg-primary); margin-bottom: var(--space-2); line-height: var(--line-height-snug); } .toc-sub { font-size: var(--font-size-xs); color: var(--fg-tertiary); margin-bottom: var(--space-7); } aside.toc ol { list-style: none; padding: 0; margin: 0; } aside.toc > ol > li { margin-bottom: var(--space-1); } aside.toc a { color: var(--fg-secondary); text-decoration: none; display: block; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8); border-radius: var(--radius-xs); position: relative; line-height: var(--line-height-snug); transition: color var(--duration-normal) var(--ease-out-quint), background-color var(--duration-normal) var(--ease-out-quint); } aside.toc > ol > li > a::before { content: attr(data-num); position: absolute; left: 0; top: var(--space-2); font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--fg-tertiary); letter-spacing: 0.04em; } aside.toc a:hover { color: var(--accent-bg); background: var(--accent-subtle-bg); } aside.toc ol ol { padding-left: var(--space-8); margin-top: var(--space-1); margin-bottom: var(--space-3); } aside.toc ol ol li { font-size: var(--font-size-xs); } aside.toc ol ol a { padding: var(--space-1) var(--space-3); color: var(--fg-tertiary); } aside.toc ol ol a::before { display: none; } main { padding: 0; min-width: 0; } .content { max-width: 860px; padding: var(--space-12) var(--space-12) var(--space-14); } .cover { padding: var(--space-13) var(--space-12) var(--space-11); border-bottom: 1px solid var(--border-default); background: radial-gradient(ellipse 600px 220px at 90% -20%, var(--accent-subtle-bg), transparent 70%), var(--bg-elevated); } .cover .stamp { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bg); margin-bottom: var(--space-8); display: flex; align-items: center; gap: var(--space-5); } .cover .stamp::after { content: ''; flex: 1; height: 1px; background: var(--border-default); max-width: 280px; } .cover h1 { font-family: var(--font-sans); font-weight: var(--font-weight-light); font-size: var(--font-size-4xl); line-height: var(--line-height-tight); letter-spacing: -0.02em; margin: 0 0 var(--space-5); color: var(--fg-primary); max-width: 18ch; } .cover h1 em { font-style: normal; font-weight: var(--font-weight-medium); color: var(--accent-bg); } .cover .lede { font-size: var(--font-size-lg); color: var(--fg-secondary); font-weight: var(--font-weight-regular); max-width: 56ch; line-height: var(--line-height-snug); margin-bottom: var(--space-9); } .cover-header-image { float: right; max-width: 300px; margin: 0; } .cover-header-image img { display: block; width: auto; max-width: 100%; max-height: 180px; object-fit: contain; object-position: left center; } .cover-template-editorial { position: relative; padding-top: var(--space-14); } .cover.cover-has-header-image { padding-top: 40px; } .cover-template-editorial .stamp::after { max-width: 160px; } .cover-template-editorial h1 { font-size: var(--font-size-5xl); max-width: 12ch; } .cover-template-editorial .lede { max-width: 46ch; } .cover-template-executive { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: var(--space-7) var(--space-10); align-items: start; background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--bg-elevated) 68%, var(--bg-inset) 68%, var(--bg-inset) 100%); } .cover-template-executive .cover-header-image { grid-column: 1 / -1; } .cover-template-executive .stamp, .cover-template-executive h1, .cover-template-executive .lede { grid-column: 1; } .cover-template-executive .stamp { margin-bottom: var(--space-4); } .cover-template-executive .stamp::after { max-width: 120px; } .cover-template-executive h1 { font-size: var(--font-size-3xl); max-width: 18ch; } .cover-template-executive .lede { font-size: var(--font-size-base); margin-bottom: 0; } .cover-template-executive .cover-meta { grid-column: 2; grid-row: 2 / span 3; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; padding: var(--space-7); border: 1px solid var(--border-default); border-top: 3px solid var(--accent-bg); background: var(--bg-elevated); } .cover-template-executive .cover-meta > div + div { padding-top: var(--space-5); margin-top: var(--space-5); border-top: 1px solid var(--border-default); } .cover-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7) var(--space-8); margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--border-default); } .cover-meta .k { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-tertiary); margin-bottom: var(--space-2); } .cover-meta .v { font-size: var(--font-size-sm); color: var(--fg-primary); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; } .content h1 { display: none; } .content h2 { font-family: var(--font-sans); font-weight: var(--font-weight-medium); font-size: var(--font-size-2xl); line-height: var(--line-height-tight); letter-spacing: -0.01em; margin: var(--space-13) 0 var(--space-8); padding-top: var(--space-3); color: var(--fg-primary); scroll-margin-top: calc(var(--app-nav-height, 52px) + var(--doc-compact-height, 0px) + var(--space-5)); position: relative; } .content h2::before { content: ''; position: absolute; top: calc(var(--space-8) * -1); left: 0; width: 48px; height: 1px; background: var(--accent-bg); } .content h3 { font-family: var(--font-sans); font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg); line-height: var(--line-height-snug); margin: var(--space-11) 0 var(--space-5); color: var(--fg-primary); scroll-margin-top: calc(var(--app-nav-height, 52px) + var(--doc-compact-height, 0px) + var(--space-5)); letter-spacing: -0.005em; } .content h4 { font-family: var(--font-sans); font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); line-height: var(--line-height-snug); margin: var(--space-8) 0 var(--space-4); color: var(--accent-bg); } .content p, .content li { max-width: 70ch; color: var(--fg-secondary); } .content p { margin: 0 0 var(--space-5); } .content strong { color: var(--fg-primary); font-weight: var(--font-weight-semibold); } .content em { color: var(--fg-primary); font-style: italic; font-family: var(--font-serif); } .content ul, .content ol { padding-left: 1.4em; margin: 0 0 var(--space-6); } .content ul li, .content ol li { margin-bottom: var(--space-3); line-height: var(--line-height-snug); } .content ul li::marker { color: var(--accent-bg); } .content ol li::marker { color: var(--fg-tertiary); font-family: var(--font-mono); font-size: 0.9em; } .content ul ul, .content ol ol { margin-top: var(--space-3); margin-bottom: 0; } .content code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-inset); padding: 1px var(--space-3); border-radius: var(--radius-xs); color: var(--fg-primary); border: 1px solid var(--border-subtle); } .content a { color: var(--accent-bg); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-bg) 30%, transparent); transition: border-color var(--duration-normal) var(--ease-out-quint); } .content a:hover { border-bottom-color: var(--accent-bg); } .content a code { color: var(--accent-bg); } .content a.doc-xref { /* Cross-document reference links generated by doc-render.js. Slightly subdued to differentiate from author-supplied markdown links, with a dotted underline so they read as references rather than primary CTAs. */ border-bottom-style: dotted; border-bottom-color: color-mix(in srgb, var(--accent-bg) 50%, transparent); white-space: nowrap; } .content a.doc-xref:hover { border-bottom-style: solid; border-bottom-color: var(--accent-bg); } .sec-anchor { /* invisible scroll target injected before numbered headings. Offset so fragment-link scrolls land below the fixed app-nav + compact-doc bar. */ scroll-margin-top: calc(var(--app-nav-height, 52px) + var(--doc-compact-height, 0px) + var(--space-5)); } .content .adr { scroll-margin-top: calc(var(--app-nav-height, 52px) + var(--doc-compact-height, 0px) + var(--space-5)); } .content pre { background: var(--bg-inset); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-6); overflow-x: auto; font-family: var(--font-mono); font-size: var(--font-size-xs); line-height: var(--line-height-snug); color: var(--fg-primary); margin: var(--space-6) 0 var(--space-8); max-width: 100%; } .content pre code { background: none; border: none; padding: 0; font-size: inherit; } .content table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0 var(--space-8); font-size: var(--font-size-sm); background: var(--bg-elevated); } .content table th, .content table td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); vertical-align: top; color: var(--fg-secondary); line-height: var(--line-height-snug); } .content table th { font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-tertiary); background: transparent; border-bottom: 1.5px solid var(--fg-primary); padding-bottom: var(--space-4); } .content table tbody tr:last-child td { border-bottom: 1px solid var(--fg-primary); } .content table tbody tr:hover td { background: color-mix(in srgb, var(--accent-subtle-bg) 60%, transparent); } .content table td:first-child, .content table th:first-child { font-weight: var(--font-weight-medium); color: var(--fg-primary); } .content table td code { font-size: 0.82em; } .content blockquote { margin: var(--space-7) 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 2px solid var(--accent-bg); color: var(--fg-secondary); font-style: italic; } .content hr { border: none; height: 1px; background: var(--border-default); margin: var(--space-11) 0; } .mermaid-wrap { margin: var(--space-7) 0 var(--space-8); padding: var(--space-8) var(--space-7) var(--space-8); background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; position: relative; cursor: zoom-in; transition: border-color var(--duration-normal) var(--ease-out-quint), box-shadow var(--duration-normal) var(--ease-out-quint), transform var(--duration-normal) var(--ease-out-quint); } .mermaid-wrap:hover { border-color: color-mix(in srgb, var(--accent-bg) 40%, var(--border-default)); box-shadow: var(--shadow-3); } .mermaid-wrap:focus-visible { outline: 2px solid var(--accent-bg); outline-offset: 2px; } .mermaid-wrap::before { content: 'Figure ' attr(data-fig-num); position: absolute; top: var(--space-4); left: var(--space-5); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-tertiary); } .fig-zoom-hint { position: absolute; top: var(--space-4); right: var(--space-5); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-tertiary); display: inline-flex; align-items: center; gap: var(--space-3); opacity: 0.7; transition: color var(--duration-normal) var(--ease-out-quint), opacity var(--duration-normal) var(--ease-out-quint); } .mermaid-wrap:hover .fig-zoom-hint { color: var(--accent-bg); opacity: 1; } .fig-zoom-icon { display: inline-flex; align-items: center; justify-content: center; } .mermaid { font-family: var(--font-sans) !important; text-align: center; min-width: 100%; overflow-x: auto; } .mermaid svg { max-width: 100%; height: auto; display: block; margin: 0 auto; } /* ===== Figure zoom modal ===== */ body.fig-modal-lock { overflow: hidden; } .fig-modal { position: fixed; inset: 0; background: var(--bg-overlay); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); z-index: var(--z-modal); display: flex; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration-normal) var(--ease-out-quint), visibility var(--duration-normal) var(--ease-out-quint); } .fig-modal.open { opacity: 1; visibility: visible; pointer-events: auto; } .fig-modal-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) var(--space-7); background: var(--signoff-bar-bg); border-bottom: 1px solid var(--border-default); color: var(--signoff-bar-fg); } .fig-modal-caption { display: flex; flex-direction: row; align-items: baseline; gap: var(--space-4); min-width: 0; } .fig-modal-num { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-tertiary); white-space: nowrap; flex-shrink: 0; } .fig-modal-sep { color: var(--fg-tertiary); font-size: var(--font-size-sm); flex-shrink: 0; } .fig-modal-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--signoff-bar-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; } .fig-modal-tools { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } .fig-btn { border: 1px solid var(--border-default); background: var(--bg-inset); color: var(--signoff-bar-fg); width: 32px; height: 32px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background-color var(--duration-fast) var(--ease-out-quint), border-color var(--duration-fast) var(--ease-out-quint); } .fig-btn:hover { background: var(--accent-subtle-bg); border-color: var(--border-strong); } .fig-btn-num { width: auto; padding: 0 var(--space-4); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.06em; min-width: 58px; } .fig-btn-close { font-size: var(--font-size-xl); font-weight: var(--font-weight-light); } .fig-modal-stage { flex: 1; position: relative; overflow: hidden; cursor: grab; display: flex; align-items: center; justify-content: center; } .fig-modal-stage.grabbing { cursor: grabbing; } .fig-modal-content { transform-origin: center center; transition: transform 60ms linear; will-change: transform; background: var(--bg-elevated); border-radius: var(--radius-md); padding: var(--space-8) var(--space-8); box-shadow: var(--shadow-4); } .fig-modal-content svg { max-width: none !important; max-height: none !important; height: auto; display: block; } .fig-modal-hint { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-tertiary); text-align: center; padding: var(--space-4) var(--space-5) var(--space-5); background: var(--signoff-bar-bg); border-top: 1px solid var(--border-default); } @media (max-width: 680px) { .fig-modal-title { max-width: 40vw; font-size: var(--font-size-sm); } .fig-btn-num { min-width: 50px; } .fig-modal-hint { font-size: var(--font-size-xs); letter-spacing: 0.08em; } } .adr { border: 1px solid var(--border-default); background: var(--bg-elevated); border-radius: var(--radius-sm); padding: var(--space-7) var(--space-7); margin: 0 0 var(--space-6); position: relative; } .adr::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-bg); border-radius: var(--radius-sm) 0 0 var(--radius-sm); } footer.colophon { margin-top: var(--space-13); padding-top: var(--space-8); border-top: 1px solid var(--border-default); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); display: flex; justify-content: space-between; max-width: 70ch; } @media (max-width: 980px) { .doc { grid-template-columns: 1fr; } aside.toc { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border-default); } .cover { padding: var(--space-11) var(--space-8) var(--space-9); } .cover h1 { font-size: var(--font-size-3xl); } .cover-template-editorial h1 { font-size: var(--font-size-4xl); } .cover-template-executive { grid-template-columns: minmax(0, 1fr); background: var(--bg-elevated); } .cover-template-executive .cover-header-image, .cover-template-executive .stamp, .cover-template-executive h1, .cover-template-executive .lede, .cover-template-executive .cover-meta { grid-column: 1; grid-row: auto; } .cover-meta { grid-template-columns: repeat(2, 1fr); } .content { padding: var(--space-9) var(--space-8) var(--space-12); } .content h2 { font-size: var(--font-size-xl); } } @media print { body { background: var(--bg-canvas); font-size: 10.5pt; } .doc { display: block; box-shadow: none; max-width: none; } aside.toc { display: none; } .cover { page-break-after: always; padding: 0 0 var(--space-9); } .content { padding: 0; max-width: none; } .content h2 { page-break-before: auto; page-break-after: avoid; } .content h3, .content h4 { page-break-after: avoid; } .content pre, .mermaid-wrap, table { page-break-inside: avoid; } a { color: inherit; border: none; } } /* ========= INDEX (main menu) ========= */ .index-wrap { max-width: var(--doc-shell-max); margin: 0 auto; background: var(--bg-elevated); min-height: 100vh; box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-4); padding: var(--space-13) var(--space-13) var(--space-14); } .index-stamp { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bg); margin-bottom: var(--space-8); display: flex; align-items: center; gap: var(--space-5); } .index-stamp::after { content: ''; flex: 1; height: 1px; background: var(--border-default); max-width: 360px; } .index-wrap h1 { font-family: var(--font-sans); font-weight: var(--font-weight-light); font-size: var(--font-size-5xl); line-height: var(--line-height-tight); letter-spacing: -0.02em; margin: 0 0 var(--space-6); color: var(--fg-primary); max-width: 18ch; } .index-wrap h1 em { font-style: normal; font-weight: var(--font-weight-medium); color: var(--accent-bg); } .index-wrap .lede { font-size: var(--font-size-lg); line-height: var(--line-height-snug); color: var(--fg-secondary); max-width: 62ch; margin: 0 0 var(--space-11); } .index-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7) var(--space-9); padding: var(--space-8) 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-11); } .index-meta .k { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-tertiary); margin-bottom: var(--space-2); } .index-meta .v { font-size: var(--font-size-sm); color: var(--fg-primary); font-weight: var(--font-weight-medium); } .docs-eyebrow { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-tertiary); margin-bottom: var(--space-3); } .docs-heading { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); color: var(--fg-primary); margin: 0 0 var(--space-8); letter-spacing: -0.005em; } .docs-list { list-style: none; padding: 0; margin: 0; } .doc-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 0 var(--space-8); align-items: start; padding: var(--space-8) 0; border-top: 1px solid var(--border-default); text-decoration: none; color: inherit; transition: background-color var(--duration-normal) var(--ease-out-quint); position: relative; } .doc-card:last-child { border-bottom: 1px solid var(--border-default); } .doc-card:hover { background: linear-gradient(90deg, var(--accent-subtle-bg) 0%, transparent 80%); } .doc-card:hover .doc-arrow { transform: translateX(4px); color: var(--accent-bg); } .doc-num { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.1em; color: var(--fg-tertiary); padding-top: var(--space-2); } .doc-body { min-width: 0; } .doc-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); color: var(--fg-primary); letter-spacing: -0.005em; margin: 0 0 var(--space-2); line-height: var(--line-height-snug); } .doc-desc { font-size: var(--font-size-sm); color: var(--fg-secondary); line-height: var(--line-height-snug); margin: 0 0 var(--space-4); max-width: 58ch; } .doc-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); } .doc-tag { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); background: var(--bg-inset); padding: var(--space-1) var(--space-3); border-radius: var(--radius-xs); } .doc-arrow { font-family: var(--font-mono); font-size: var(--font-size-md); color: var(--fg-tertiary); padding-top: var(--space-2); transition: transform var(--duration-slow) var(--ease-out-quint), color var(--duration-normal) var(--ease-out-quint); } @media (max-width: 980px) { .index-wrap { padding: var(--space-11) var(--space-8) var(--space-12); } .index-wrap h1 { font-size: var(--font-size-3xl); } .index-meta { grid-template-columns: repeat(2, 1fr); } .doc-card { grid-template-columns: 1fr auto; } .doc-num { display: none; } } /* WS-Reading polish: estimated reading time + anchor copy link. Both are appended by reading.js as the final children of each h2/h3. Render them as a muted block beneath the heading, not inline. */ .content h2, .content h3 { position: relative; } .content h2 .acms-read-time, .content h3 .acms-read-time { display: block; margin: var(--space-2) 0 0; font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 400; letter-spacing: 0.04em; color: var(--fg-tertiary); } .content h2 .acms-anchor-link, .content h3 .acms-anchor-link { display: inline-block; margin-left: var(--space-3); font-family: var(--font-mono); font-size: var(--font-size-sm); font-weight: 400; color: var(--fg-tertiary); text-decoration: none; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out-quint); } .content h2:hover .acms-anchor-link, .content h3:hover .acms-anchor-link, .content h2:focus-within .acms-anchor-link, .content h3:focus-within .acms-anchor-link { opacity: 1; } .content .acms-anchor-link:hover { color: var(--accent-bg); } .content .acms-anchor-link.copied { color: var(--accent-bg); opacity: 1; } .content .acms-anchor-link.copied::after { content: " copied"; margin-left: var(--space-1); font-size: var(--font-size-xs); }