/* Notations Documentation Styles */

:root {
    --primary-color: #991b1b;
    --secondary-color: #57534e;
    --accent-color: #ea580c;
    --text-color: #1c1917;
    --text-light: #78716c;
    --bg-color: #ffffff;
    --bg-light: #faf6f4;
    --border-color: #eae4e0;
    --code-bg: #292524;
    --code-color: #f5f5f4;
    --link-color: #b91c1c;
    --link-hover: #7f1d1d;

    /* Notation component variables (light mode) */
    --notation-stroke-color: black;
    --notation-fill-color: transparent;
    --notation-text-color: #1a1a1a;
    --notation-border-color: gray;
    --notation-bg-color: #ffffff;
}

/* Dark mode */
:root.dark,
[data-theme="dark"] {
    --primary-color: #f87171;
    --secondary-color: #b8ada6;
    --accent-color: #fb923c;
    --text-color: #f8f2ed;
    --text-light: #b8ada6;
    --bg-color: #0e0a08;
    --bg-light: #1a130f;
    --border-color: #33261f;
    --code-bg: #0a0705;
    --code-color: #f5f5f4;
    --link-color: #fca5a5;
    --link-hover: #fed7d7;

    /* Notation component variables (dark mode) */
    --notation-stroke-color: #e5e5e5;
    --notation-fill-color: transparent;
    --notation-text-color: #f0f0f0;
    --notation-border-color: #555;
    --notation-bg-color: #2d3748;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
}

/* Header */
.site-header {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-img {
    height: 32px;
}

/* Navigation */
.main-nav {
    display: flex;
    gap: 2rem;
}

.nav-item {
    position: relative;
}

.nav-link {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    display: block;
    white-space: nowrap;
}

.nav-link:hover {
    background-color: rgba(255,255,255,0.1);
}

/* Dropdown Navigation */
.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 1000;
    margin-top: 0.5rem;
    /* Folding the two guides into one menu made this list long enough to run off the bottom of the
       screen: at 18 entries it measured 900px against an 863px viewport, with the last item
       unreachable because nothing scrolled. Grouped menus now lay out in columns (below), which is
       the real fix. This cap stays as the backstop for a short window and for the ungrouped menus
       such as Tutorials at 13 entries, which was already close. */
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Invisible bridge across the 0.5rem gap between the nav link and its panel, so travelling from
   one to the other does not read as a mouseout and close the menu. It hangs off .nav-item rather
   than off .nav-dropdown, because the panel scrolls (overflow-y above) and a scroll container
   clips anything outside its padding box, which made a bridge on the panel itself unhittable.
   min-width matches the panel's, so a diagonal move toward a wide menu stays over the bridge. */
.nav-item.has-children:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 200px;
    height: 0.5rem;
}

:root.dark .nav-dropdown,
[data-theme="dark"] .nav-dropdown {
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.nav-item:hover .nav-dropdown {
    display: block;
}

.nav-dropdown .dropdown-item,
.nav-dropdown a {
    color: var(--text-color);
    text-decoration: none;
    padding: 0.75rem 1rem;
    display: block;
    transition: background-color 0.2s;
}

.nav-dropdown .dropdown-item:hover,
.nav-dropdown a:hover {
    background-color: var(--bg-light);
}

/* Page Container */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: 2rem;
    height: fit-content;
}

.section-nav h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.section-nav ul {
    list-style: none;
}

.section-nav li {
    margin-bottom: 0.5rem;
}

.section-nav a {
    color: var(--text-color);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    display: block;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.section-nav a:hover {
    background-color: var(--bg-light);
}

/* Main Content */
.main-content {
    min-width: 0;
}

/* Full-width content for playgrounds */
.main-content-full {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

.main-content-full .content {
    max-width: none;
    width: 100%;
}

.main-content-full .content-header,
.main-content-full .content-footer {
    display: none;
}

.main-content-full .content-body {
    width: 100%;
    height: 100%;
}

.content {
    max-width: 800px;
}

.content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.content h2 {
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.content h3 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.content p {
    margin-bottom: 1rem;
}

.content a {
    color: var(--link-color);
    text-decoration: none;
}

.content a:hover {
    text-decoration: underline;
}

.lead {
    font-size: 1.25rem;
    color: var(--text-light);
}

/* Code */
pre, code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
}

code {
    background-color: var(--bg-light);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
}

pre {
    background-color: var(--code-bg);
    color: var(--code-color);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

pre code {
    background: none;
    padding: 0;
}

/* Notation Blocks */
.notation-container {
    margin: 2rem 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.notation-caption {
    background-color: var(--bg-light);
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.notation-source {
    background-color: var(--code-bg);
    color: var(--code-color);
    padding: 1rem;
    font-family: monospace;
    overflow-x: auto;
}

.notation-view {
    padding: 1rem;
    background-color: var(--notation-bg-color);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.btn:hover {
    background-color: var(--link-hover);
}

.btn-secondary {
    background-color: var(--secondary-color);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

/* The hero sits on a fixed warm gradient in both themes, so its buttons use
   fixed colors that contrast with it rather than the theme variables (which go
   light-on-warm in dark mode and blend in). */
.home-hero .btn {
    border: 2px solid transparent;
}

.home-hero .btn-primary {
    background-color: #ffffff;
    color: #7f1d1d;
    border-color: #ffffff;
}

.home-hero .btn-primary:hover {
    background-color: #fbe9e3;
    color: #7f1d1d;
}

.home-hero .btn-secondary,
.home-hero .btn-outline {
    background-color: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.75);
}

.home-hero .btn-secondary:hover,
.home-hero .btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Feature Cards */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.feature-card {
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-light);
}

.feature-card h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

/* Footer */
.site-footer {
    background-color: #17110e;
    color: white;
    padding: 3rem 2rem 1rem;
    margin-top: 4rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.footer-section h4 {
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: #cbd5e0;
    text-decoration: none;
}

.footer-section a:hover {
    color: white;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: #cbd5e0;
}

/* Homepage Styles */
.home-hero {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #7f1d1d 0%, #ea580c 100%);
    color: white;
    border-radius: 8px;
    margin-bottom: 3rem;
}

.home-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: white;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--text-color);
}

.btn-secondary {
    background-color: white;
    color: var(--primary-color);
}

.quick-example {
    margin: 3rem 0;
}

.quick-example h2 {
    text-align: center;
    margin-bottom: 1rem;
}

.quick-example > p {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.quick-example .note {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.sections-grid {
    margin: 4rem 0;
}

.sections-grid h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.section-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.section-card {
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.2s;
}

.section-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.section-card h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.community {
    margin: 4rem 0;
    padding: 2rem;
    background-color: var(--bg-light);
    border-radius: 8px;
}

.community h2 {
    margin-bottom: 1rem;
}

.community ul {
    list-style: none;
    padding: 0;
}

.community li {
    margin-bottom: 0.5rem;
}

/* Notation Blocks (Interactive Examples) */
.notationBlockRoot {
    margin: 2rem 0;
}

.notation-container {
    margin-bottom: 1rem;
}

.notation-caption {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
}

.notation-source {
    background-color: var(--code-bg);
    color: var(--code-color);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.notation-source-pre {
    margin: 0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
}

.notation-view {
    background-color: var(--notation-bg-color);
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow-x: auto;
}

.notation-table {
    border-collapse: collapse;
    margin: 0 auto;
}

.notation-table td {
    padding: 0.5rem;
    border: 1px solid #ddd;
    text-align: center;
}

/* NotationBlock - Copy and Edit Features */
.notation-source-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.notation-source-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.notation-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--code-color);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}

.notation-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.notation-btn svg {
    flex-shrink: 0;
}

.notation-edit-textarea {
    width: 100%;
    min-height: 200px;
    padding: 1rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    background-color: var(--code-bg);
    color: var(--code-color);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    resize: vertical;
    line-height: 1.5;
}

.notation-edit-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
}

.notation-edit-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
}

.notation-apply-btn {
    background-color: #48bb78;
    color: white;
    border-color: #48bb78;
}

.notation-apply-btn:hover {
    background-color: #38a169;
    border-color: #38a169;
}

.notation-cancel-btn {
    background-color: #718096;
    color: white;
    border-color: #718096;
}

.notation-cancel-btn:hover {
    background-color: #4a5568;
    border-color: #4a5568;
}

.notation-source-block {
    background-color: var(--code-bg);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Tabbed Examples */
.tabbed-example {
    margin: 2rem 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.tabbed-example-caption {
    background-color: var(--bg-light);
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.tabbed-example-header {
    display: flex;
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.tabbed-example-header .tab-btn {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.tabbed-example-header .tab-btn:hover {
    color: var(--text-color);
    background-color: rgba(0,0,0,0.05);
}

.tabbed-example-header .tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background-color: var(--bg-color);
}

.tab-content {
    display: none;
    padding: 1rem;
}

.tab-content.active {
    display: block;
}

/* For notation tabs, use visibility so SVG can calculate dimensions */
.tabbed-example .tab-content {
    display: block;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    padding: 0;
}

.tabbed-example .tab-content.active {
    visibility: visible;
    height: auto;
    overflow: visible;
    padding: 1rem;
}

.tab-content pre {
    margin: 0;
    background-color: var(--code-bg);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
}

.tab-content-source {
    background-color: var(--code-bg);
    color: var(--code-color);
    padding: 1rem;
    overflow-x: auto;
}

.tab-content-source pre {
    margin: 0;
    background: none;
    padding: 0;
}

.tab-content-output {
    padding: 1rem;
    background-color: var(--notation-bg-color);
}

/* Integration Cards */
.integration-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.integration-card {
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.2s;
}

.integration-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.integration-card h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.integration-card p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

/* Docs Table */
.docs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.docs-table th,
.docs-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.docs-table th {
    background-color: var(--bg-light);
    font-weight: 600;
}

.docs-table code {
    font-size: 0.85rem;
}

/* Nested Navigation */
.nav-nested {
    margin-left: 1rem;
    margin-top: 0.5rem;
}

.nav-nested li {
    margin-bottom: 0.25rem;
}

.nav-nested a {
    font-size: 0.9rem;
    color: var(--text-light);
}

.nav-nested a:hover {
    color: var(--text-color);
}

/* Theme Toggle */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

/* Show/hide icons based on theme */
.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

:root.dark .theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

:root.dark .theme-toggle .icon-moon,
[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

/* Header actions layout */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Visual Test Suite */
.visual-test-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.test-count {
    color: var(--text-light);
    font-size: 0.9rem;
}

.visual-test-category {
    margin-bottom: 2.5rem;
}

.visual-test-category h2 {
    font-size: 1.3rem;
    color: var(--secondary-color);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.visual-test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
}

.visual-test-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    overflow: hidden;
}

.visual-test-card-header {
    background: var(--bg-light);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.visual-test-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.visual-test-card-id {
    font-size: 0.75rem;
    color: var(--text-light);
    font-family: monospace;
}

.visual-test-card-body {
    padding: 1rem;
}

.visual-test-description {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.visual-test-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.visual-test-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.visual-test-label-row .visual-test-label {
    margin-bottom: 0;
}

.visual-test-copy-btn {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-light);
    transition: all 0.2s;
}

.visual-test-copy-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.visual-test-input {
    background: var(--code-bg);
    color: var(--code-color);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.visual-test-section {
    margin-bottom: 1rem;
}

.visual-test-section:last-child {
    margin-bottom: 0;
}

.visual-test-output {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem;
    min-height: 60px;
    background: var(--notation-bg-color);
}

.visual-test-output svg {
    max-width: 100%;
    height: auto;
}

/* Hide notation wrapper elements when inside visual test output */
.visual-test-output .notationBlockRoot {
    margin: 0;
}

.visual-test-output .notation-output {
    padding: 0;
}

.visual-test-output .notation-output-label {
    display: none;
}

.visual-test-output .notation-view {
    padding: 0;
    border: none;
}

.visual-test-expected {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem;
    min-height: 60px;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-test-expected svg {
    max-width: 100%;
    height: auto;
}

.visual-test-expected-placeholder {
    color: var(--text-light);
    font-size: 0.85rem;
    font-style: italic;
}

.visual-test-error {
    color: #d32f2f;
    font-size: 0.85rem;
    padding: 0.5rem;
    background: #ffebee;
    border-radius: 4px;
}

:root.dark .visual-test-error,
[data-theme="dark"] .visual-test-error {
    background: #4a1515;
    color: #ff8a80;
}

.visual-test-match {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: auto;
}

.visual-test-match.pass {
    background: #e8f5e9;
    color: #2e7d32;
}

.visual-test-match.fail {
    background: #ffebee;
    color: #c62828;
}

.visual-test-match.pending {
    background: var(--bg-light);
    color: var(--text-light);
}

:root.dark .visual-test-match.pass,
[data-theme="dark"] .visual-test-match.pass {
    background: #1b3d1b;
    color: #81c784;
}

:root.dark .visual-test-match.fail,
[data-theme="dark"] .visual-test-match.fail {
    background: #4a1515;
    color: #ff8a80;
}

/* Responsive */
/* Keep wide content inside its column on every screen size */
.content-body pre {
    overflow-x: auto;
}

.content-body table {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.92rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

/* Prose cells WRAP. An earlier `white-space: nowrap` here was meant to stop narrow
   code-ish columns being squeezed, but it applied to every cell, so a table whose
   cells hold sentences laid itself out on one unwrapped line. 47 of the site's 62
   tables overflowed their column that way and the worst ran 5.3x the content width,
   which is a horizontal scrollbar between a reader and every row. Cells wrap now and
   only the tokens that must stay intact are exempted below. */
.content-body th,
.content-body td {
    padding: 0.55rem 0.9rem;
    text-align: left;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: break-word;
    border-bottom: 1px solid var(--border-color);
}

/* An identifier is unreadable broken across lines, so inline code, links inside a
   cell, and the header row keep their old behaviour. A table that is genuinely wide
   because its CONTENT is wide still scrolls, which is what the container above is for. */
.content-body td code,
.content-body th code {
    white-space: nowrap;
}

.content-body thead th {
    background-color: var(--bg-light);
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.content-body tbody tr:last-child td {
    border-bottom: none;
}

/* Collapsed rationale. A page states the decision in the prose and folds the argument
   behind one of these, so the reasoning stays on the page for whoever needs it without
   standing between everyone else and the next decision. Closed by default, and a plain
   <details> so it works with no JavaScript and survives Ctrl-F in most browsers. */
.content-body details {
    margin: 1.25rem 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-light);
    padding: 0 0.9rem;
}

.content-body details > summary {
    cursor: pointer;
    padding: 0.6rem 0;
    font-weight: 600;
    color: var(--text-color);
    list-style: none;
}

.content-body details > summary::-webkit-details-marker {
    display: none;
}

/* The disclosure triangle is drawn rather than inherited, so it picks up the accent
   colour in both themes instead of the browser's default grey. */
.content-body details > summary::before {
    content: "\25B8";
    display: inline-block;
    width: 1em;
    color: var(--accent-color);
    transition: transform 0.15s ease;
}

.content-body details[open] > summary::before {
    transform: rotate(90deg);
}

.content-body details[open] > summary {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.content-body details > *:last-child {
    margin-bottom: 0.9rem;
}

.content img,
.content svg,
.mermaid svg {
    max-width: 100%;
    height: auto;
}

/* Menu and section toggles. Both are hidden above 768px, where the full bar and the sticky
   sidebar fit; the media block above turns them on. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    margin-left: auto;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.nav-toggle svg {
    width: 1.4rem;
    height: 1.4rem;
}

.nav-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}

.sidebar-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.15s;
}

@media (max-width: 768px) {
    .page-container {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1.25rem;
    }

    /* The sidebar used to go `position: static` here, which in a one-column grid put the whole
       section nav ABOVE the article and pushed the page down before a reader saw a word of it. It
       now collapses behind its own toggle and opens on demand. */
    .sidebar {
        position: static;
    }

    .sidebar-toggle {
        display: flex;
    }

    .sidebar-content {
        display: none;
        padding: 0.75rem 0 0.25rem;
    }

    .sidebar.is-open .sidebar-content {
        display: block;
    }

    .sidebar.is-open .sidebar-toggle svg {
        transform: rotate(180deg);
    }

    .header-container {
        /* The container is a flex ROW. Without wrapping, an open menu takes the space beside the
           logo and paints as a narrow column squeezed against the right edge instead of stacking
           under the bar. Wrapping plus a full basis puts it on its own line. */
        flex-wrap: wrap;
        padding: 0 1rem;
    }

    .nav-toggle {
        display: flex;
    }

    /* Collapsed behind the toggle. The old rule kept the full bar on screen and let it scroll
       sideways, which hid most of the sections behind a gesture nobody discovers. */
    .main-nav {
        display: none;
        width: 100%;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        order: 3;
        padding-bottom: 0.5rem;
        max-height: 70vh;
        overflow-y: auto;
    }

    .site-header.nav-open .main-nav {
        display: flex;
    }

    .main-nav .nav-item {
        width: 100%;
    }

    .main-nav .nav-link {
        display: block;
        padding: 0.6rem 0;
    }

    /* The panel is inline here, so there is no gap to bridge. */
    .main-nav .nav-item.has-children:hover::after {
        content: none;
    }

    /* No hover on touch, so a submenu is shown inline rather than as a floating panel. The script
       leaves inline positioning alone below this width, so nothing here has to fight it. */
    .main-nav .nav-dropdown {
        display: block;
        position: static;
        border: none;
        box-shadow: none;
        background: none;
        margin: 0 0 0.5rem 0.75rem;
        min-width: 0;
        max-height: none;
        column-count: 1;
        width: auto;
        max-width: none;
    }

    .main-nav .dropdown-item {
        padding: 0.35rem 0;
    }

    .home-hero {
        padding: 2.5rem 1.25rem;
    }

    .home-hero h1 {
        font-size: 2.2rem;
    }

    .content-header h1 {
        font-size: 1.9rem;
    }

    .notation-btn-text {
        display: none;
    }

    .notation-btn {
        padding: 0.4rem 0.5rem;
    }

    .tabbed-example-header .tab-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
}

/* Enhanced code blocks: line-number gutter + floating copy button (codeblocks.js).
   A consistent dark surface for every code block, tagged or plain, matching the chroma
   Monokai token colors; kept dark in both light and dark site themes on purpose. */
.code-block {
    position: relative;
    margin: 0 0 1.25rem;
    background-color: #21252b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
}

.code-inner {
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.code-block .code-gutter {
    flex: 0 0 auto;
    display: block;
    white-space: pre;
    text-align: right;
    padding: 1rem 0.75rem;
    margin: 0;
    color: #636d7a;
    background-color: #1b1f24;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    user-select: none;
    -webkit-user-select: none;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
}

.code-content {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    padding: 1rem;
}

.code-content pre {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    color: #e6e6e6;
    font-size: 0.85rem;
    line-height: 1.6;
}

.code-content pre code {
    background: none;
    padding: 0;
}

/* Force one shared line box so the gutter numbers line up with chroma's per-line flex spans. */
.code-content pre,
.code-content pre code,
.code-content pre span {
    line-height: 1.6;
}

.code-copy {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
    padding: 0.25rem 0.6rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.72rem;
    line-height: 1;
    color: #cbd5e1;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.code-block:hover .code-copy,
.code-copy:focus-visible {
    opacity: 1;
}

.code-copy:hover {
    background-color: rgba(255, 255, 255, 0.16);
}

.code-copy.is-copied {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.5);
    opacity: 1;
}

/* Touch devices have no hover; keep the button visible there. */
@media (hover: none) {
    .code-copy {
        opacity: 1;
    }
}

/* ---------------------------------------------------------------------------
   agni-viewer — pan/zoom canvas over a build-time-baked design SVG (Tier-1
   docs playground). See docsite/components/AgniViewer.ts.
   --------------------------------------------------------------------------- */
.agni-viewer {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin: 1.5rem 0;
    background: var(--bg-light);
}

.agni-viewer-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--code-bg);
}

.agni-viewer-btn {
    font: inherit;
    font-size: 0.85rem;
    line-height: 1;
    min-width: 1.9rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
}

.agni-viewer-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.agni-viewer-caption {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agni-viewer-stage {
    position: relative;
    height: 460px;
    overflow: hidden;
    background:
        repeating-linear-gradient(0deg, transparent 0 23px, rgba(128, 128, 128, 0.08) 23px 24px),
        repeating-linear-gradient(90deg, transparent 0 23px, rgba(128, 128, 128, 0.08) 23px 24px);
    cursor: grab;
    touch-action: none;
}

.agni-viewer-stage.agni-viewer-dragging {
    cursor: grabbing;
}

.agni-viewer-canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.agni-viewer-canvas svg {
    /* Baked renders carry a light paper fill; frame it so it reads as a canvas
       in dark mode instead of a raw white bleed. */
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.agni-viewer-hint {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    color: var(--text-light);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    opacity: 0.85;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Search (Pagefind)

   The trigger lives in the header, which is a coloured bar with white text, so it
   matches .theme-toggle rather than the page palette. The overlay
   below it is page-coloured, and the Pagefind UI is themed by mapping ITS custom
   properties onto ours, so dark mode falls out of the existing :root.dark block
   instead of needing a second set of rules.
   --------------------------------------------------------------------------- */

.search-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.search-trigger:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.search-trigger .search-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.search-trigger-key {
    padding: 0.05rem 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0.9;
}

/* On narrow screens the trigger collapses to just the magnifier. */
@media (max-width: 720px) {
    .search-trigger-label,
    .search-trigger-key {
        display: none;
    }
}

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 6vh 1rem 1rem;
}

.search-overlay[hidden] {
    display: none;
}

.search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.search-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.search-unavailable {
    margin-top: 0.75rem;
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Lock the page behind the overlay so scrolling does not leak through. */
body.search-open {
    overflow: hidden;
}

/* Pagefind's own theming hooks, mapped onto the site palette. */
.search-panel .pagefind-ui {
    --pagefind-ui-primary: var(--accent-color);
    --pagefind-ui-text: var(--text-color);
    --pagefind-ui-background: var(--bg-color);
    --pagefind-ui-border: var(--border-color);
    --pagefind-ui-tag: var(--bg-light);
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: 8px;
    --pagefind-ui-font: inherit;
}

/* Pagefind's stock highlight is a hard yellow that fights the warm palette and is
   unreadable on the dark background. Tint the accent instead and keep the text colour. */
.search-panel .pagefind-ui mark {
    background: color-mix(in srgb, var(--accent-color) 28%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 0.1em;
}

/* The stock focus ring is browser blue. */
.search-panel .pagefind-ui__search-input:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
    border-color: var(--accent-color);
}

/* Glossary terms ({{ explainable }} + terms.js).
   The link is styled as a definition rather than a navigation link: a dotted underline reads as
   "there is more here" without competing with the real links in the same sentence. Colours come
   from the theme variables so both modes work. */
.xterm {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--accent-color);
    cursor: help;
}

.xterm:hover,
.xterm:focus {
    color: var(--accent-color);
    border-bottom-style: solid;
}

.xterm-pop {
    position: absolute;
    z-index: 60;
    max-width: min(34rem, calc(100vw - 2rem));
    max-height: 70vh;
    overflow-y: auto;
    padding: 1rem 1.15rem;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-color);
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    font-size: 0.94rem;
    line-height: 1.55;
}

.xterm-pop[hidden] {
    display: none;
}

.xterm-pop > :first-child {
    margin-top: 0;
}

.xterm-pop h2 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.xterm-pop p {
    margin: 0.5rem 0;
}

.xterm-pop .mermaid svg {
    max-width: 100%;
    height: auto;
}

.xterm-more {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--link-color);
}

/* A popover is a hover affordance, and a touch device has no hover. terms.js opens it on tap
   instead, so the panel docks to the bottom of the viewport where a thumb can reach it. */
@media (max-width: 640px) {
    .xterm-pop {
        position: fixed;
        left: 0.5rem !important;
        right: 0.5rem;
        top: auto !important;
        bottom: 0.5rem;
        max-width: none;
        max-height: 60vh;
    }
}

/* A dropdown that carries more than one guide needs a divider, or the two run together and the
   reader cannot tell where the user guide ends and the developer guide begins. `group: true` in
   HeaderNavLinks.json marks the entry; it stays a real link, because the section index it points at
   is genuinely where someone clicking a group heading wants to land. */
.dropdown-item.dropdown-group {
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-light);
}

.dropdown-item.dropdown-group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.dropdown-item.dropdown-group:hover {
    color: var(--accent-color);
}


/* NOTE ON ORDER: this block must stay AFTER the .dropdown-item.dropdown-group rules above. Both
   selectors are two classes, so specificity ties and source order decides. Sitting earlier, these
   overrides lost, and the second group kept the divider and the 5.6px top margin meant for the
   single-column layout, which showed up as its heading sitting lower than the first group's. */
/* Multi-column dropdowns.
   A menu carrying two guides reads as one long list unless the groups are laid side by side. The
   markup is a flat run of links, so rather than restructuring it, `break-before: column` on a group
   heading starts each group in its own column. That keeps the data model flat and makes the column
   break MEAN something (one column per guide) instead of falling wherever the halfway point lands. */
.nav-dropdown-cols-2,
.nav-dropdown-cols-3 {
    width: max-content;
    max-width: min(46rem, calc(100vw - 2rem));
    column-gap: 2rem;
}

.nav-dropdown-cols-2 { column-count: 2; }
.nav-dropdown-cols-3 { column-count: 3; }

.nav-dropdown-cols-2 .dropdown-item,
.nav-dropdown-cols-3 .dropdown-item {
    break-inside: avoid;
}

.nav-dropdown-cols-2 .dropdown-group,
.nav-dropdown-cols-3 .dropdown-group {
    break-before: column;
    border-top: none;      /* the column edge is the separator now */
    margin-top: 0;
    padding-top: 0;
}

/* The first group opens the first column, so it must not push one. */
.nav-dropdown-cols-2 .dropdown-group:first-child,
.nav-dropdown-cols-3 .dropdown-group:first-child {
    break-before: auto;
}

/* Narrow windows cannot afford columns; fall back to one and let the cap scroll it. */
@media (max-width: 700px) {
    .nav-dropdown-cols-2,
    .nav-dropdown-cols-3 {
        column-count: 1;
        /* NOT `width: auto`. The script positions an open dropdown `fixed`, and a fixed box with an
           auto width shrink-wraps to the base `min-width: 200px` instead of to its content, which
           left the longest entries painting outside the panel. `max-content` keeps it sized to the
           widest row, and the max-width above keeps that inside the viewport. */
        width: max-content;
    }
    .nav-dropdown-cols-2 .dropdown-group,
    .nav-dropdown-cols-3 .dropdown-group {
        break-before: auto;
        border-top: 1px solid var(--border-color);
        margin-top: 0.35rem;
        padding-top: 0.5rem;
    }
    .nav-dropdown-cols-2 .dropdown-group:first-child,
    .nav-dropdown-cols-3 .dropdown-group:first-child {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }
}

/* The rightmost menu opens leftwards. A dropdown is anchored `left: 0` to its item, which is fine
   while it is narrow, but the two-column Reference menu is wide enough to run past the right edge of
   the window from the last nav position. Measured at 1125px wide, its right edge landed outside the
   viewport entirely. Anchoring the last item's dropdown to the right keeps it on screen without
   needing a JS flip. */
.main-nav .nav-item:last-child .nav-dropdown {
    left: auto;
    right: 0;
}