/* {{PRODUCT_NAME}} Documentation Styles - Based on MBXRemote v1.0.25.1221 */

/* Cross-links (right side of nav) */
.cross-links {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.cross-links a {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(232, 163, 23, 0.15);
    color: var(--gold);
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid rgba(232, 163, 23, 0.3);
}

.cross-links a:hover {
    background: rgba(232, 163, 23, 0.22);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Base styles */
:root {
    color-scheme: light dark;
    /* Hive brand */
    --navy: #0E1B33;
    --navy-deep: #132441;
    --gold: #E8A317;
    --cyan: #3FC9D6;

    /* The header and nav sit on navy in BOTH schemes — this is what the
       approved Option A mockup showed, and --bg-primary (white in light)
       would not deliver it. Deliberately NOT overridden in the dark block. */
    --surface-header: var(--navy);
    --on-header: #C9D4E8;

    /* Foreground for anything painted ON --primary-color. A single value cannot
       serve both schemes: primary is navy in light (needs white) and cyan in dark
       (needs navy — white on cyan is 1.99:1). Every rule that used `color: white`
       on a primary background points here instead. */
    --on-primary: #fff;

    --primary-color: var(--navy);
    --primary-hover: var(--navy-deep);
    --accent-color: var(--gold);
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #e11d48;
    --text-primary: #0a0a0a;
    --text-secondary: #2d3748;
    --bg-primary: #ffffff;
    --bg-secondary: #f4f4f4;
    --bg-card: #f8fafc;
    --border-color: #e0e0e0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 25px rgba(0,0,0,0.1);
}

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

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: var(--cyan);
        --primary-hover: #57D6E2;
        --on-primary: var(--navy);
        --text-primary: #f4f4f4;
        --text-secondary: #cbd5e0;
        --bg-primary: var(--navy);
        --bg-secondary: var(--navy-deep);
        --bg-card: #17305C;
        --border-color: #24406E;
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Firefox scrollbar styles */
.code-block pre,
table {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

/* Header */
header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    height: 70px;
    background: var(--surface-header);
}

header #logo {
    display: inline-block;
    flex-shrink: 0;
}

header #logo img {
    height: 50px;
    width: 50px;
    display: block;
}

header h1 {
    margin: 0;
    color: #F2F4F8;
    display: inline-block;
    font-size: 1.5em;
    padding-left: 15px;
    line-height: 1.5;
}

/* Parent attribution, right side of the masthead. Product identity leads on
   the left; the parent sits small on the right as a link, on every page that
   has a masthead - one place a visitor can always find HALRAD without
   scrolling to the footer. The words drop on phones; the mark stays. */
header .parent-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: var(--on-header);
    text-decoration: none;
    font-size: 0.85em;
    opacity: 0.85;
}
header .parent-link:hover,
header .parent-link:focus-visible {
    opacity: 1;
}
header .parent-link img {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 8px;
}

/* Product Navigation (scoped to avoid conflict with site menu) */
nav.mbx-nav {
    background: var(--surface-header);
    border-bottom: 1px solid var(--gold);
    padding: 10px 20px;
    display: flex;
    align-items: center;
}

nav.mbx-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

nav.mbx-nav li {
    margin: 0;
}

nav.mbx-nav a {
    display: inline-block;
    padding: 8px 16px;
    color: var(--on-header);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-weight: 500;
}

nav.mbx-nav a:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

nav.mbx-nav a.active {
    background: var(--gold);
    color: var(--navy);
    font-weight: 600;
}

/* The site-wide focus ring is var(--primary-color), which is navy in light —
   invisible on the navy nav. Gold reads on navy in both schemes. */
nav.mbx-nav a:focus-visible {
    outline-color: var(--gold);
}

/* Content */
.content {
    padding: 20px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.content p, .content ul, .content ol {
    text-align: left;
}

.content ul, .content ol {
    margin-left: 0;
    padding-left: 20px;
}

/* Typography */
h1.page-title {
    color: var(--text-primary);
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: 10px;
    font-size: 2em;
    margin-top: 0;
}

h2 {
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
    margin-top: 40px;
}

h3 {
    color: var(--text-primary);
    margin-top: 30px;
}

h4 {
    color: var(--text-secondary);
    margin-top: 20px;
}

/* Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}


/* Polaroid hero card - realistic proportions */
.polaroid {
    width: 280px;
    margin: 30px auto;
    background-color: #fefefe;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 12px 12px 40px 12px;
    transform: rotate(-2deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.polaroid:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3), 0 12px 40px 0 rgba(0, 0, 0, 0.25);
}

.polaroid-images {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 2px;
}

.polaroid-images img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.polaroid .container {
    text-align: center;
    padding: 12px 10px 0 10px;
    background-color: #fefefe;
    color: #333;
}

.polaroid .container p {
    display: inline-block;
    margin: 4px 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #333;
    letter-spacing: 0.5px;
}

/* Feature boxes */
.feature-box {
    background: var(--bg-card);
    border-left: 4px solid var(--primary-color);
    padding: 15px 20px;
    margin: 15px 0;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

.feature-box h3 {
    color: var(--primary-color);
    margin-top: 0;
}

/* Feature grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.feature-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    border-radius: 12px;
    padding: 24px;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    position: absolute;
    top: -12px;
    left: 20px;
    background: var(--primary-color);
    color: var(--on-primary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.feature-card p {
    margin: 24px 0 0 0;
    color: var(--text-secondary);
    font-size: 0.9em;
    line-height: 1.5;
}

/* Download section */
.download-section {
    background: var(--bg-card);
    padding: 30px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.download-section h3 {
    color: var(--primary-color);
    margin-top: 0;
}

.download-button {
    display: inline-block;
    background: var(--primary-color);
    color: var(--on-primary) !important;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none !important;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    margin: 10px;
    transition: all 0.3s;
    box-shadow: var(--shadow-md);
    border: none;
    cursor: pointer;
}

.download-button:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* Release picker ------------------------------------------------------------
   One entry per published channel. The list on the left is the control; the
   pane on the right swaps. Radio inputs and the sibling combinator, never JS —
   the site has to work offline, and this is the same disclosure trick the
   screenshot gallery on download.html already uses.

   Surfaces: the picker sits ON .download-section, which is --bg-card, so the
   pane takes --bg-primary and the list --bg-secondary. Those three separate in
   both colour schemes; reusing --bg-card for the pane would make it vanish. */
.release-picker {
    position: relative;
    margin: 20px 0;
    text-align: left;
}

/* Off-screen rather than display:none, so they stay keyboard-reachable. */
.release-picker > input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.release-selector {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.release-list {
    width: 200px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
}

.release-list label {
    display: block;
    padding: 13px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid transparent;
}

.release-list label:last-child {
    border-bottom: none;
}

.release-list label:hover {
    background: var(--bg-primary);
}

/* min-width:0 or a long note stretches the row instead of wrapping. */
.release-pane {
    flex: 1;
    min-width: 0;
    padding: 18px;
    background: var(--bg-primary);
}

.release-panel {
    display: none;
}

.release-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.release-head .release-lead {
    flex: 1;
    min-width: 190px;
}

.release-head h4 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.release-notes-list {
    margin: 12px 0 0 0;
    padding-left: 1.2em;
    color: var(--text-secondary);
}

.release-notes-list li {
    margin-bottom: 8px;
}

.release-full {
    margin: 14px 0 0 0;
    font-size: 0.92em;
}

/* The channel's own requirements, one line. Current and Preview need different
   .NET runtimes, which one shared table on this page cannot say. */
.release-req {
    margin: 14px 0 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.88em;
}

/* Stage pill — the channel's role, not the build stage. Navy on the colour,
   which is the choice .status-badge already makes: white on --success-color
   is 3.1:1 and fails at this size, navy on it is 5:1. --navy is not
   overridden in the dark block, so one value serves both schemes. */
.stage-pill {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 11px;
    border-radius: 20px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--navy);
}

.stage-pill.stage-current {
    background: var(--success-color);
}

.stage-pill.stage-preview {
    background: var(--accent-color);
}

/* Selection. Each channel needs its own pair of selectors; a third channel
   is two more lines here and two more elements in the markup. */
#rel-current:checked ~ .release-selector .release-list label[for="rel-current"],
#rel-preview:checked ~ .release-selector .release-list label[for="rel-preview"] {
    background: var(--bg-primary);
    border-left-color: var(--primary-color);
}

#rel-current:checked ~ .release-selector #rel-panel-current,
#rel-preview:checked ~ .release-selector #rel-panel-preview {
    display: block;
}

/* The radios are off-screen, so the focus ring has to be drawn on the label. */
#rel-current:focus-visible ~ .release-selector .release-list label[for="rel-current"],
#rel-preview:focus-visible ~ .release-selector .release-list label[for="rel-preview"] {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

@media (max-width: 640px) {
    .release-selector {
        flex-direction: column;
    }

    .release-list {
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
}

/* Install steps */
.install-steps {
    text-align: left;
    margin: 20px 0;
}

.install-step {
    background: var(--bg-card);
    border-left: 4px solid var(--primary-color);
    padding: 15px 20px;
    margin: 15px 0;
    border-radius: 0 8px 8px 0;
}

.install-step h4 {
    color: var(--primary-color);
    margin: 0 0 10px 0;
}

.install-step p {
    margin: 5px 0;
}

.install-step ul {
    margin: 10px 0;
    padding-left: 20px;
}

/* Tech specs */
.tech-specs {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: var(--shadow-sm);
}

.tech-specs h3 {
    color: var(--primary-color);
    margin-top: 0;
}

/* Note/warning box */
.note {
    background: #fff3cd;
    border-left: 4px solid var(--warning-color);
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
}

.note strong {
    color: #664d03;
}

@media (prefers-color-scheme: dark) {
    .note {
        background: #3a2f0a;
    }
    .note strong {
        color: #ffd54f;
    }
}

/* Critical warning/stop box */
.warning-critical {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 3px solid var(--danger-color);
    border-radius: 12px;
    padding: 25px;
    margin: 25px 0;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.2);
}

.warning-critical h3 {
    color: var(--danger-color);
    margin-top: 0;
    font-size: 1.4em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.warning-critical p {
    color: #991b1b;
    font-size: 1.05em;
    line-height: 1.6;
}

.warning-critical a {
    color: var(--danger-color);
    font-weight: 600;
}

.warning-critical .warning-icon {
    font-size: 2em;
}

@media (prefers-color-scheme: dark) {
    .warning-critical {
        background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
        border-color: #f87171;
    }
    .warning-critical h3 {
        color: #fca5a5;
    }
    .warning-critical p {
        color: #fecaca;
    }
    .warning-critical a {
        color: #f87171;
    }
}

/* Runtime requirement callout */
.runtime-requirement {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
    text-align: left;
}

.runtime-requirement h4 {
    color: #856404;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1em;
}

.runtime-requirement p {
    color: #856404;
    margin-bottom: 10px;
    font-size: 0.9em;
}

@media (prefers-color-scheme: dark) {
    .runtime-requirement {
        background: #3a2f0a;
        border-color: #d69e2e;
    }
    .runtime-requirement h4,
    .runtime-requirement p {
        color: #faf089;
    }
}

/* Code blocks */
.code-block {
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 4px;
    padding: 0;
    margin: 15px 0;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    overflow-x: auto;
    box-shadow: var(--shadow-md);
}

.code-block pre {
    padding: 20px;
    margin: 0;
    white-space: pre;
    overflow-x: auto;
    line-height: 1.5;
}

code {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.9em;
}

/* Share card (partners.html): the mark beside one paragraph and the links that
   matter, the shape a partner can lift whole. Stacks under 520px. */
.share-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px;
    margin: 15px 0;
    background: var(--bg-secondary);
    border-radius: 12px;
}
.share-card img {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 20px;
}
.share-card p {
    margin: 0 0 6px;
}
.share-card p:last-child {
    margin-bottom: 0;
}
@media (max-width: 520px) {
    .share-card {
        flex-direction: column;
    }
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color);
    padding: 12px;
    text-align: left;
}

table td {
    color: var(--text-primary);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 12px;
}

table tr:hover td {
    background: var(--bg-secondary);
}

/* Keyboard keys */
kbd {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.9em;
    box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}

/* Screenshots */
.screenshot {
    max-width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    margin: 10px 0;
}

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.screenshot-container {
    text-align: center;
}

.screenshot-container h4 {
    margin-bottom: 10px;
}

/* Release notes */
.release-notes {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    border-left: 4px solid var(--success-color);
}

.release-notes h3 {
    color: var(--success-color);
    margin-top: 0;
}

.release-notes ul {
    margin: 10px 0;
}

.release-notes li {
    margin-bottom: 8px;
}

/* Version badge */
.version-badge {
    display: inline-block;
    background: var(--primary-color);
    color: var(--on-primary);
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.85em;
    font-weight: 600;
}

/* Status badge for header */
.status-badge {
    display: inline-block;
    background: var(--success-color);
    color: var(--navy);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.75em;
    font-weight: 600;
    margin-left: 10px;
    vertical-align: middle;
}

.status-badge.beta {
    background: var(--warning-color);
    color: #333;
}

.status-badge.dev {
    background: #6366f1;
}

/* Documentation nav cards */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.doc-card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-primary);
    display: block;
}

.doc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
    text-decoration: none;
}

.doc-card h3 {
    color: var(--primary-color);
    margin-top: 0;
}

.doc-card p {
    color: var(--text-secondary);
    font-size: 0.9em;
}

/* Back button */
.back-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: var(--on-primary) !important;
    border-radius: 6px;
    text-decoration: none !important;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    border: none;
    cursor: pointer;
}

.back-button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Footer */
footer {
    text-align: center;
    margin-top: 50px;
    padding: 20px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
}

footer img {
    width: 100px;
    opacity: 0.5;
    margin-bottom: 10px;
}

/* Dev Test Mode / Cheat Sheet Box (dark background box) */
.dev-cheatsheet {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.dev-cheatsheet h3 {
    color: #93c5fd;
    margin-top: 0;
}

.dev-cheatsheet th {
    color: #93c5fd;
    background: rgba(30, 41, 59, 0.8);
}

.dev-cheatsheet td {
    color: #e0f2fe;
    background: transparent;
    border-color: #334155;
}

.dev-cheatsheet td strong {
    color: #bae6fd;
}

.dev-cheatsheet td code {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.2);
}

.dev-cheatsheet p {
    color: #94a3b8;
}

/* Feature callout boxes with consistent theming */
.callout-orange {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.callout-orange h3 {
    color: #92400e;
    margin-top: 0;
}

.callout-orange p,
.callout-orange li {
    color: #78350f;
}

@media (prefers-color-scheme: dark) {
    .callout-orange {
        background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
        border-color: #fbbf24;
    }
    .callout-orange h3 {
        color: #fcd34d;
    }
    .callout-orange p,
    .callout-orange li {
        color: #fef3c7;
    }
}

.callout-blue {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.callout-blue h3 {
    color: #1e40af;
    margin-top: 0;
}

.callout-blue p,
.callout-blue li {
    color: #1e3a8a;
}

@media (prefers-color-scheme: dark) {
    .callout-blue {
        background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
        border-color: #60a5fa;
    }
    .callout-blue h3 {
        color: #93c5fd;
    }
    .callout-blue p,
    .callout-blue li {
        color: #dbeafe;
    }
}

.callout-green {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 2px solid #10b981;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.callout-green h3 {
    color: #065f46;
    margin-top: 0;
}

.callout-green p,
.callout-green li {
    color: #064e3b;
}

@media (prefers-color-scheme: dark) {
    .callout-green {
        background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
        border-color: #34d399;
    }
    .callout-green h3 {
        color: #6ee7b7;
    }
    .callout-green p,
    .callout-green li {
        color: #d1fae5;
    }
}

/* JSON syntax highlighting - works in both themes */
.json-comment { color: #6a9955; }
.json-key { color: #9cdcfe; }
.json-string { color: #ce9178; }
.json-number { color: #b5cea8; }
.json-bool { color: #569cd6; }

/* Success note (green background) */
.note-success {
    background-color: #e8f5e9;
    border-left: 4px solid #4caf50;
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
}

.note-success strong {
    color: #2e7d32;
}

@media (prefers-color-scheme: dark) {
    .note-success {
        background-color: #1b4332;
        border-color: #4caf50;
    }
    .note-success strong {
        color: #81c784;
    }
    .note-success,
    .note-success p {
        color: #c8e6c9;
    }
}

/* Info note (blue background) */
.note-info {
    background-color: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
}

.note-info strong {
    color: #1565c0;
}

.note-info a {
    color: #1976d2;
}

@media (prefers-color-scheme: dark) {
    .note-info {
        background-color: #1e3a5f;
        border-color: #2196f3;
    }
    .note-info strong {
        color: #90caf9;
    }
    .note-info a {
        color: #64b5f6;
    }
    .note-info,
    .note-info p {
        color: #bbdefb;
    }
}

/* Caption text */
.caption {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* Screenshot Gallery - CSS-only click to expand */
.screenshot-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.screenshot-item {
    text-align: center;
    position: relative;
}

.screenshot-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.screenshot-item .thumb-label {
    cursor: pointer;
    display: inline-block;
}

.screenshot-item .thumb {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.screenshot-item .thumb-label:hover .thumb {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.screenshot-item .ss-caption {
    margin-top: 0.75rem;
    color: #666;
    font-weight: bold;
    font-size: 0.9em;
    /* .content p sets text-align: left and targets this element directly, which
       beats the `center` the caption merely INHERITS from .screenshot-item - so
       every caption sat left under a centred image. Three captions on index
       carried an inline text-align to work around it and the rest of the site
       did not. Setting it here wins on specificity (0,2,0 over 0,1,1) and fixes
       the galleries on features, download and dashboard at the same time. */
    text-align: center;
}

/* Fullscreen overlay - hidden by default */
.screenshot-item .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: pointer;
}

.screenshot-item .overlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
/* Never larger than its own pixels. The rule above caps an enlarged capture in CSS px, but
   a scaled display (Windows at 125/150/200%, every phone) draws each CSS px as more than
   one device px, so a capture shown at its "natural" size is enlarged and soft (operator,
   2026-10-09: "it seems like it's being scaled"). Shrunk by the screen's ratio with a
   standard transform - not zoom, which is non-standard, and not width, which would need
   each capture's size. Direct children only: the scrolling column pops lay out by width
   and a transform there would leave gaps. */
@media (min-resolution: 1.25dppx), (-webkit-min-device-pixel-ratio: 1.25) { .screenshot-item .overlay > img { transform: scale(0.8); } }
@media (min-resolution: 1.5dppx),  (-webkit-min-device-pixel-ratio: 1.5)  { .screenshot-item .overlay > img { transform: scale(0.6667); } }
@media (min-resolution: 1.75dppx), (-webkit-min-device-pixel-ratio: 1.75) { .screenshot-item .overlay > img { transform: scale(0.5714); } }
@media (min-resolution: 2dppx),    (-webkit-min-device-pixel-ratio: 2)    { .screenshot-item .overlay > img { transform: scale(0.5); } }
@media (min-resolution: 3dppx),    (-webkit-min-device-pixel-ratio: 3)    { .screenshot-item .overlay > img { transform: scale(0.3334); } }

/* A popup that holds several shots: one column, scrolling INSIDE the overlay so the page
   behind it stays put. The single-image rule above caps an image at 90% of the overlay's
   height, which would shrink every shot in a column to fit one screen - lifted here. */
.screenshot-item .overlay.gallery-pop { align-items: stretch; }
.screenshot-item .overlay .pop-scroll {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 64px 16px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.screenshot-item .overlay .pop-scroll figure { margin: 0; max-width: min(100%, 1100px); }
.screenshot-item .overlay .pop-scroll img { display: block; max-width: 100%; max-height: none; height: auto; }
.screenshot-item .overlay .pop-scroll figcaption {
    color: #fff;
    opacity: 0.8;
    font-size: 0.95em;
    text-align: center;
    margin-top: 10px;
}

.screenshot-item .overlay .close-hint {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 1.2em;
    opacity: 0.7;
}

/* When checkbox is checked, show overlay */
.screenshot-item input[type="checkbox"]:checked + .thumb-label + .ss-caption + .overlay {
    display: flex;
}

/* Also support structure without caption */
.screenshot-item input[type="checkbox"]:checked + .thumb-label + .overlay {
    display: flex;
}

/* Multi-image box (download hero: three HUD shapes in one item, each expanding
   individually). The adjacency chains above cannot pair N inputs with N overlays,
   so these pair by id — general sibling + explicit for-attribute. */
#ss-dl-hero-hud-v:checked ~ label.overlay[for="ss-dl-hero-hud-v"],
#ss-dl-hero-hud-h:checked ~ label.overlay[for="ss-dl-hero-hud-h"],
#ss-dl-hero-hud-mini:checked ~ label.overlay[for="ss-dl-hero-hud-mini"],
#ss-dl-hero-hud-browse:checked ~ label.overlay[for="ss-dl-hero-hud-browse"],
#ss-dl-hero-hud-playing:checked ~ label.overlay[for="ss-dl-hero-hud-playing"],
#ss-dl-hero-hud-queue:checked ~ label.overlay[for="ss-dl-hero-hud-queue"],
#ss-home-hud-browse:checked ~ label.overlay[for="ss-home-hud-browse"],
#ss-home-hud-playing:checked ~ label.overlay[for="ss-home-hud-playing"],
#ss-home-hud-queue:checked ~ label.overlay[for="ss-home-hud-queue"],
#ss-prod-listen-tab:checked ~ label.overlay[for="ss-prod-listen-tab"],
#ss-prod-listen-cast:checked ~ label.overlay[for="ss-prod-listen-cast"],
#ss-page-play:checked ~ label.overlay[for="ss-page-play"],
#ss-page-browse:checked ~ label.overlay[for="ss-page-browse"],
#ss-page-np:checked ~ label.overlay[for="ss-page-np"],
#ss-page-slices:checked ~ label.overlay[for="ss-page-slices"],
#ss-page-mixer:checked ~ label.overlay[for="ss-page-mixer"],
#ss-page-history:checked ~ label.overlay[for="ss-page-history"],
#ss-page-autoq:checked ~ label.overlay[for="ss-page-autoq"],
#ss-page-settings:checked ~ label.overlay[for="ss-page-settings"],
#ss-page-explore:checked ~ label.overlay[for="ss-page-explore"],
#ss-page-tree:checked ~ label.overlay[for="ss-page-tree"],
#ss-page-theme:checked ~ label.overlay[for="ss-page-theme"],
#ss-page-stations:checked ~ label.overlay[for="ss-page-stations"],
#ss-dl-hero-slices-charm:checked ~ label.overlay[for="ss-dl-hero-slices-charm"],
#ss-dl-hero-slices-rows:checked ~ label.overlay[for="ss-dl-hero-slices-rows"],
#ss-dl-hero-slices-settings:checked ~ label.overlay[for="ss-dl-hero-slices-settings"],
#ss-dl-hero-castctl:checked ~ label.overlay[for="ss-dl-hero-castctl"],
#ss-dl-hero-castctl-q:checked ~ label.overlay[for="ss-dl-hero-castctl-q"],
#ss-feat-castctl:checked ~ label.overlay[for="ss-feat-castctl"],
#ss-feat-castctl-q:checked ~ label.overlay[for="ss-feat-castctl-q"],
#ss-dl-settings-dash-layout:checked ~ label.overlay[for="ss-dl-settings-dash-layout"],
#ss-dl-settings-dash-charmbar:checked ~ label.overlay[for="ss-dl-settings-dash-charmbar"],
#ss-dl-settings-dash-footer:checked ~ label.overlay[for="ss-dl-settings-dash-footer"],
#ss-dl-settings-api-profile:checked ~ label.overlay[for="ss-dl-settings-api-profile"],
#ss-dl-settings-api-control:checked ~ label.overlay[for="ss-dl-settings-api-control"],
#ss-dl-settings-api-settings:checked ~ label.overlay[for="ss-dl-settings-api-settings"] {
    display: flex;
}

@media (prefers-color-scheme: dark) {
    .screenshot-item .ss-caption {
        color: #aaa;
    }
}

/* Responsive */
@media (max-width: 768px) {
    header {
        height: auto;
        min-height: 60px;
    }

    header h1 {
        font-size: 1.1em;
    }

    header .parent-link span {
        display: none;
    }

    .content {
        padding: 15px 20px;
    }

    nav.mbx-nav {
        padding: 10px 15px;
        gap: 6px;
        flex-wrap: wrap;
    }

    nav.mbx-nav ul {
        justify-content: flex-start;
        gap: 2px;
    }

    nav.mbx-nav a {
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    .cross-links {
        gap: 4px;
    }

    .cross-links a {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    table {
        font-size: 12px;
        display: block;
        overflow-x: auto;
    }

    .code-block {
        font-size: 12px;
    }

    .polaroid {
        width: 90%;
        max-width: 320px;
    }
}

/* WebKit scrollbar styles (Chrome, Safari, Edge) */
.code-block pre::-webkit-scrollbar,
table::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.code-block pre::-webkit-scrollbar-track,
table::-webkit-scrollbar-track {
    background: transparent;
}

.code-block pre::-webkit-scrollbar-thumb,
table::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.code-block pre::-webkit-scrollbar-thumb:hover,
table::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Screenshot gallery — balanced variant.

   The default .screenshot-gallery is a grid, which aligns each row to its
   tallest item and so leaves ragged gaps under short ones. The download page
   worked around that with three hand-built flex columns, and the workaround
   drifted: every new screenshot went into column one until it held nine
   against four and two, so column one ran on alone long after the others had
   stopped. That reads as a broken layout, and it was reported as one.

   Multi-column balances by HEIGHT rather than by count, which is the thing
   hand-splitting cannot do — and new screenshots just flow, so it cannot drift
   back. Items read down each column, then across.

   break-inside is what stops a caption being orphaned from its thumbnail. */
.screenshot-gallery.balanced {
    display: block;
    column-count: 3;
    column-gap: 1.5rem;
}

.screenshot-gallery.balanced .screenshot-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;   /* older WebKit/Blink spelling */
    page-break-inside: avoid;             /* legacy fallback */
    margin: 0 0 1.5rem;
}

/* An expanded lightbox is fixed-position and must not be treated as column
   content — inside a multi-column container an un-fixed overlay would be
   fragmented across columns. */
.screenshot-gallery.balanced .screenshot-item .overlay {
    break-inside: auto;
}

@media (max-width: 900px) { .screenshot-gallery.balanced { column-count: 2; } }
@media (max-width: 600px) { .screenshot-gallery.balanced { column-count: 1; } }

/* ── Hero feature gallery: three slots always visible, the rest on request ──
   CSS-only, matching the checkbox pattern the screenshot lightboxes already use,
   so the page keeps working with no JavaScript and nothing to load. */
.hero-more {
    display: contents;
}
.hero-toggle-cb {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
/* Hidden by default. display:contents on the wrapper means the revealed items
   rejoin the gallery's own flex layout rather than forming a second row of
   their own. */
.hero-toggle-cb:not(:checked) ~ .screenshot-gallery .hero-more {
    display: none;
}
.hero-toggle {
    display: inline-block;
    margin: 4px 0 18px 0;
    padding: 8px 18px;
    border: 1px solid var(--border, #3a3a3a);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    user-select: none;
}
.hero-toggle:hover {
    border-color: var(--accent, #7aa2f7);
}
.hero-toggle .more-label { display: inline; }
.hero-toggle .less-label { display: none; }
.hero-toggle-cb:checked ~ .hero-toggle .more-label { display: none; }
.hero-toggle-cb:checked ~ .hero-toggle .less-label { display: inline; }

/* A prominent repo call-to-action, for sections that currently bury the link
   in the middle of a paragraph. */
.repo-cta {
    display: inline-block;
    margin: 14px 0 6px 0;
    padding: 12px 20px;
    border: 1px solid var(--accent, #7aa2f7);
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
}
.repo-cta:hover {
    border-width: 2px;
    padding: 11px 19px;
}

/* ------------------------------------------------------------------ */
/* Screenshot popups: pair by containment, not by adjacency.           */
/*                                                                     */
/* The two chains above require .thumb-label IMMEDIATELY after the     */
/* input, so an item that puts its caption first - input > p >         */
/* label.thumb-label > label.overlay - matches NEITHER, and the popup  */
/* is dead while the markup looks complete. Seven of index.html's      */
/* eleven were dead that way, including the dashboard hero and every   */
/* charm shot. This rule does not care where the caption sits.         */
/*                                                                     */
/* .multi is the exception: a box holding several inputs and several   */
/* overlays cannot be paired by position at all, so those keep the     */
/* explicit id pairs above and are excluded here - otherwise opening   */
/* one of the three HUD shots would open all three.                    */
.screenshot-item:not(.multi) input[type="checkbox"]:checked ~ .overlay {
    display: flex;
}

/* ------------------------------------------------------------------ */
/* Page boxes                                                         */
/* One box per page. A box with a screenshot is a label that opens it, */
/* a box without is a span - so the difference between "we have a shot" */
/* and "we do not yet" is visible rather than a dead click.             */
.page-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.page-box {
    display: block;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.72em;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s;
}

.page-box:hover {
    border-color: var(--primary-color);
}

.page-box.is-plain {
    cursor: default;
    opacity: 0.55;
}

.page-box.is-plain:hover {
    border-color: var(--border-color);
}

/* Homepage: existing page previews and examples of external connections. */
.everything-panel {
    margin: 0 0 34px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.everything-panel h2 {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    font-size: 1.4rem;
    line-height: 1.3;
}

.everything-panel h3 {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}

.everything-panel .page-grid {
    justify-content: flex-start;
    gap: 8px;
}

.everything-panel .page-box {
    padding: 9px 12px;
    border-radius: 6px;
    background: var(--bg-card);
    font-size: 0.85rem;
}

.everything-connections {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--border-color);
}

.everything-panel .connection-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.connection-example {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 16px 14px;
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--cyan);
    border-radius: 8px;
    background: var(--bg-card);
}

.connection-icon {
    flex: 0 0 24px;
    margin-top: 2px;
    color: var(--primary-color);
}

.connection-copy {
    min-width: 0;
}

.connection-copy strong,
.connection-copy span {
    display: block;
}

.connection-copy strong {
    font-size: 0.95rem;
    line-height: 1.4;
}

.connection-copy span {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .everything-panel .connection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .everything-panel .connection-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------ */
/* Brand hero (index)                                                  */
.brand-hero {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: var(--on-header);
    text-align: center;
    padding: 38px 20px 42px;
    border-bottom: 1px solid var(--gold);
}

.brand-hero-mark {
    display: block;
    margin: 0 auto 10px;
    width: 132px;
    height: 132px;
}

h1.brand-hero-name {
    margin: 0;
    color: #fff;
    font-size: clamp(2.1rem, 6vw, 3.2rem);
    letter-spacing: 0.01em;
    line-height: 1.1;
    border: 0;
    padding: 0;
}

.brand-hero-tag {
    margin: 6px 0 0;
    color: var(--gold);
    font-size: clamp(1.02rem, 2.6vw, 1.3rem);
    font-weight: 600;
}

.brand-hero-sub {
    margin: 14px auto 0;
    max-width: 56ch;
    color: var(--on-header);
    font-size: 1rem;
    line-height: 1.55;
}

.brand-hero-actions {
    margin: 22px 0 0;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-cta {
    display: inline-block;
    padding: 11px 22px;
    border: 1px solid var(--cyan);
    border-radius: 7px;
    color: var(--on-header);
    font-weight: 600;
    text-decoration: none;
}

.hero-cta:hover {
    background: rgba(63, 201, 214, 0.14);
    color: #fff;
}

.hero-cta-primary {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}

.hero-cta-primary:hover {
    background: #F2B43A;
    border-color: #F2B43A;
    color: var(--navy);
}

.brand-hero a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Six-product card grid (index)                                       */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 18px;
    margin: 22px 0 34px;
}

/* Six cards, so pin three columns once there is room for them: auto-fit lands
   on four across and leaves a ragged 4 + 2, which reads as a grid that ran out
   rather than a set of six. */
@media (min-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
}

.product-card h3 {
    margin: 12px 0 6px;
    font-size: 1.1rem;
}

.product-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.product-links {
    margin-top: auto !important;
    padding-top: 10px;
    font-size: 0.9rem;
}

/* Screenshots differ in shape - contain, so a card never crops one to
   fit the grid. The panel behind the letterboxing is the card's own. */
.product-shot .thumb,
.product-mark {
    width: 100%;
    height: 172px;
    border-radius: 7px;
    background: var(--bg-secondary);
}

.product-shot .thumb {
    object-fit: contain;
}

.product-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

/* ------------------------------------------------------------------ */
/* Charm grid (index) - every charm, one button each                   */
.charm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
    gap: 8px;
    margin: 18px 0 14px;
}

.charm-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--text-primary);
    text-decoration: none;
    text-align: center;
}

.charm-chip:hover {
    border-color: var(--gold);
    background: var(--bg-secondary);
}

.charm-chip-icon {
    /* A BOX that centres whatever is in it, because not every charm icon is an svg.
       Eighteen are; aria.json's is the character U+26A1, and a character needs a real
       line box. `line-height: 0` was invisible for an <svg> and top-aligned the bolt,
       which is the one icon it could affect. Sized here rather than on the svg so both
       kinds land in the same 23px square and the row of chips lines up.

       THE ORANGE BOLT IS DELIBERATE - do not "fix" it. It renders in the system emoji
       font, so `color` cannot reach it and it stands out against eighteen cyan icons.
       Operator, 2026-09-19: "its orange its special it stands out that is cool by
       design". Matching it would mean swapping the icon in aria.json for an svg, which
       would also change the real charm bar - the site is accurate to the product here. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    color: var(--primary-color);
    font-size: 22px;
    line-height: 1;
}

.charm-chip-icon svg {
    width: 23px;
    height: 23px;
}

.charm-chip-name {
    font-size: 0.78rem;
    line-height: 1.25;
}

/* ------------------------------------------------------------------ */
/* Charm index (charms.html) - compact rows, grouped by kind           */
.charm-index {
    margin: 26px 0 8px;
}

h3.charm-group {
    margin: 30px 0 2px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--primary-color);
    font-size: 1.15rem;
}

.charm-group-note {
    margin: 0 0 4px;
    color: var(--text-secondary);
    font-style: italic;
}

ul.charm-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.charm-row {
    display: flex;
    gap: 13px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--border-color);
    scroll-margin-top: 14px;
}

.charm-row:target {
    background: var(--bg-secondary);
    border-radius: 7px;
    box-shadow: 0 0 0 2px var(--gold);
}

.charm-row-icon {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--primary-color);
    line-height: 0;
}

.charm-row-icon svg {
    width: 21px;
    height: 21px;
}

.charm-row-text {
    min-width: 0;
}

.charm-row-text h4 {
    margin: 0 0 5px;
    font-size: 1.02rem;
}

.charm-row-text h4 code {
    margin-left: 6px;
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--text-secondary);
}

.charm-row-text p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.charm-row-target {
    margin-top: 5px !important;
    font-size: 0.86rem;
}

@media (max-width: 768px) {
    .brand-hero {
        padding: 26px 16px 30px;
    }

    .brand-hero-mark {
        width: 96px;
        height: 96px;
    }

    .charm-grid {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 6px;
    }

    .charm-chip-name {
        font-size: 0.72rem;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }
}