/*
 * High-contrast sample public view theme.
 * This local view theme is intentionally loud so theme loading is easy to verify.
 */
.content-layout-body {
    --sr-text: #101010;
    --sr-muted: #4a205e;
    --sr-muted-strong: #261032;
    --sr-border: #111111;
    --sr-border-soft: #ff00aa;
    --sr-surface: #fff200;
    --sr-surface-muted: #00f0ff;
    --sr-surface-soft: #e8ff00;
    --sr-primary: #ff0066;
    --sr-on-primary: #ffffff;
    --sr-danger-bg: #ffdde8;
    --sr-danger-border: #ff0066;
    --sr-danger-text: #79002d;
    --sr-shadow-soft: rgba(255, 0, 102, .32);
    --color-body-bg: #00f0ff;
    --color-body-color: #101010;
    --color-card: #fff200;
    --color-primary: #ff0066;
    --color-primary-hover: #c5004c;
    --content-border: #111111;
    --content-text: #101010;
    --content-muted: #4a205e;
    background:
        linear-gradient(135deg, rgba(255, 0, 102, .18) 0 25%, transparent 25% 50%),
        #00f0ff;
    background-size: 28px 28px, auto;
}

[data-color-scheme="dark"] .content-layout-body,
[data-color-scheme="system"] .content-layout-body {
    --sr-text: #f7ff00;
    --sr-muted: #00f0ff;
    --sr-muted-strong: #ffffff;
    --sr-border: #f7ff00;
    --sr-border-soft: #00f0ff;
    --sr-surface: #1a0028;
    --sr-surface-muted: #3b0058;
    --sr-surface-soft: #26003a;
    --sr-primary: #00f0ff;
    --sr-on-primary: #100018;
    --sr-danger-bg: #3b0017;
    --sr-danger-border: #ff4f9a;
    --sr-danger-text: #ffb8d4;
    --sr-shadow-soft: rgba(0, 240, 255, .34);
    --color-body-bg: #100018;
    --color-body-color: #f7ff00;
    --color-card: #1a0028;
    --color-primary: #00f0ff;
    --color-primary-hover: #75f8ff;
    --content-border: #f7ff00;
    --content-text: #f7ff00;
    --content-muted: #00f0ff;
    background:
        linear-gradient(135deg, rgba(0, 240, 255, .16) 0 25%, transparent 25% 50%),
        #100018;
    background-size: 28px 28px, auto;
}

@media (prefers-color-scheme: light) {
    [data-color-scheme="system"] .content-layout-body {
        --sr-text: #101010;
        --sr-muted: #4a205e;
        --sr-muted-strong: #261032;
        --sr-border: #111111;
        --sr-border-soft: #ff00aa;
        --sr-surface: #fff200;
        --sr-surface-muted: #00f0ff;
        --sr-surface-soft: #e8ff00;
        --sr-primary: #ff0066;
        --sr-on-primary: #ffffff;
        --sr-danger-bg: #ffdde8;
        --sr-danger-border: #ff0066;
        --sr-danger-text: #79002d;
        --sr-shadow-soft: rgba(255, 0, 102, .32);
        --color-body-bg: #00f0ff;
        --color-body-color: #101010;
        --color-card: #fff200;
        --color-primary: #ff0066;
        --color-primary-hover: #c5004c;
        --content-border: #111111;
        --content-text: #101010;
        --content-muted: #4a205e;
        background:
            linear-gradient(135deg, rgba(255, 0, 102, .18) 0 25%, transparent 25% 50%),
            #00f0ff;
        background-size: 28px 28px, auto;
    }
}

.content-layout-body .content-layout-header.is-content-layout-header-stuck,
.content-layout-body .content-layout-footer,
.content-layout-body .content-theme-menu,
.content-layout-body .dropdown-menu {
    background: var(--sr-surface);
    border-color: var(--sr-border);
    box-shadow: 0 12px 0 var(--sr-primary);
}

.content-layout-body .content-layout-nav a[aria-current="page"]::after,
.content-layout-body .content-layout-nav a:hover::after {
    border-bottom-color: var(--sr-primary);
    border-bottom-width: 5px;
}

.content-layout-body :is(.content-home, .content-page, .content-group) {
    --content-surface: var(--sr-surface);
    --content-surface-soft: var(--sr-surface-muted);
    --content-border: var(--sr-border);
    --content-text: var(--sr-text);
    --content-muted: var(--sr-muted);
}

.content-layout-body :is(.content-home-hero, .content-home-empty-hero, .content-group-header, .content-header) {
    border-block-end: 6px solid var(--sr-primary);
}

.content-layout-body :is(.content-home-latest-item, .content-body, .content-comments, .content-quiz-link, .content-series-nav, .content-downloads, .content-group-item, .content-group-pick) {
    background: var(--sr-surface);
    border: 4px solid var(--sr-border);
    box-shadow: 10px 10px 0 var(--sr-primary);
}

.content-layout-body :is(.content-body, .content-comments, .content-quiz-link, .content-series-nav, .content-downloads) {
    border-radius: 0;
}

.content-layout-body :is(.content-home-hero h1, .content-header h1, .content-group-header h1, .content-group-item h2, .content-home-latest-copy h2) {
    color: var(--content-text);
    text-decoration: underline;
    text-decoration-color: var(--sr-primary);
    text-decoration-thickness: .18em;
    text-underline-offset: .12em;
}

.content-layout-body :is(.content-home-hero-meta, .content-home-hero-group, .content-home-latest-meta, .content-home-latest-excerpt, .content-home-latest-footer time, .content-meta, .content-group-item-meta, .content-header > p, .content-body blockquote) {
    color: var(--content-muted);
    font-weight: 800;
}

.content-layout-body :is(.content-home-latest-footer span, .content-group-tabs span[aria-current="page"], .btn-solid-primary) {
    background: var(--sr-primary);
    border-color: var(--sr-primary);
    color: var(--sr-on-primary);
}

.content-layout-body :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 4px solid var(--sr-primary);
    outline-offset: 3px;
}

.example-content-theme {
    color: var(--sr-text);
    margin: 0 auto;
    padding: clamp(32px, 6vw, 84px) clamp(20px, 5vw, 72px) 88px;
    width: min(1360px, 100%);
}

.example-content-theme :is(a) {
    color: inherit;
    text-decoration-color: var(--sr-primary);
    text-decoration-thickness: .18em;
    text-underline-offset: .16em;
}

.example-content-hero {
    border: 6px solid var(--sr-border);
    box-shadow: 14px 14px 0 var(--sr-primary);
    display: grid;
    gap: 18px;
    margin: 0 0 clamp(32px, 5vw, 68px);
    padding: clamp(24px, 5vw, 64px);
}

.example-content-kicker {
    color: var(--content-muted);
    font-size: var(--type-caption-size, .75rem);
    font-weight: 900;
    letter-spacing: 0;
    margin: 0;
    text-transform: uppercase;
}

.example-content-hero h1,
.example-content-reader-header h1 {
    font-size: 2.5rem;
    line-height: .9;
    margin: 0;
    max-width: 12ch;
}

.example-content-hero p,
.example-content-reader-header p {
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.55;
    margin: 0;
    max-width: 68ch;
}

.example-content-layout-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
}

.example-content-panel,
.example-content-timeline-item,
.example-content-reader-main,
.example-content-reader-rail,
.example-content-body {
    background: var(--sr-surface);
    border: 4px solid var(--sr-border);
    box-shadow: 10px 10px 0 var(--sr-primary);
    padding: 22px;
}

.example-content-panel h2 {
    margin: 0 0 16px;
}

.example-content-panel :is(ol, ul),
.example-content-index ol,
.example-content-timeline {
    display: grid;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.example-content-index a {
    display: grid;
    gap: 8px;
}

.example-content-index span,
.example-content-timeline-item p,
.example-content-reader-rail,
.example-content-comments p {
    color: var(--content-muted);
}

.example-content-timeline-item {
    display: grid;
    gap: 18px;
    grid-template-columns: 2rem minmax(0, 1fr);
}

.example-content-timeline-marker {
    aspect-ratio: 1;
    background: var(--sr-primary);
    border: 4px solid var(--sr-border);
    display: block;
    width: 2rem;
}

.example-content-reader-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
}

.example-content-reader-rail {
    align-self: start;
    display: grid;
    gap: 12px;
    position: sticky;
    top: 82px;
}

.example-content-reader-main {
    display: grid;
    gap: 28px;
}

.example-content-reader-header {
    border-bottom: 6px solid var(--sr-primary);
    display: grid;
    gap: 18px;
    padding-bottom: 24px;
}

.example-content-body {
    box-shadow: none;
    line-height: 1.75;
}

.example-content-comments {
    margin-top: 28px;
}

.example-content-comments form {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.example-content-comments textarea {
    width: 100%;
}

.example-site-theme,
.example-community-theme,
.example-quiz-theme,
.example-survey-theme {
    --sr-text: #101010;
    --sr-muted: #4a205e;
    --sr-border: #111111;
    --sr-surface: #fff200;
    --sr-surface-muted: #00f0ff;
    --sr-primary: #ff0066;
    --sr-on-primary: #ffffff;
    background:
        linear-gradient(90deg, rgba(255, 0, 102, .18) 0 12px, transparent 12px 28px),
        #00f0ff;
    color: var(--sr-text);
    margin: 0 auto;
    min-height: 70vh;
    padding: clamp(32px, 6vw, 84px) clamp(20px, 5vw, 72px) 88px;
    width: min(1360px, 100%);
}

[data-color-scheme="dark"] :is(.example-site-theme, .example-community-theme, .example-quiz-theme, .example-survey-theme),
[data-color-scheme="system"] :is(.example-site-theme, .example-community-theme, .example-quiz-theme, .example-survey-theme) {
    --sr-text: #f7ff00;
    --sr-muted: #00f0ff;
    --sr-border: #f7ff00;
    --sr-surface: #1a0028;
    --sr-surface-muted: #3b0058;
    --sr-primary: #00f0ff;
    --sr-on-primary: #100018;
    background:
        linear-gradient(90deg, rgba(0, 240, 255, .14) 0 12px, transparent 12px 28px),
        #100018;
}

@media (prefers-color-scheme: light) {
    [data-color-scheme="system"] :is(.example-site-theme, .example-community-theme, .example-quiz-theme, .example-survey-theme) {
        --sr-text: #101010;
        --sr-muted: #4a205e;
        --sr-border: #111111;
        --sr-surface: #fff200;
        --sr-surface-muted: #00f0ff;
        --sr-primary: #ff0066;
        --sr-on-primary: #ffffff;
        background:
            linear-gradient(90deg, rgba(255, 0, 102, .18) 0 12px, transparent 12px 28px),
            #00f0ff;
    }
}

:is(.example-site-theme, .example-community-theme, .example-quiz-theme, .example-survey-theme) :is(a) {
    color: inherit;
    text-decoration-color: var(--sr-primary);
    text-decoration-thickness: .18em;
    text-underline-offset: .16em;
}

:is(.example-site-theme, .example-community-theme, .example-quiz-theme, .example-survey-theme) :is(input, select, textarea) {
    background: var(--sr-surface);
    border: 3px solid var(--sr-border);
    color: var(--sr-text);
    padding: 10px 12px;
}

:is(.example-site-theme, .example-community-theme, .example-quiz-theme, .example-survey-theme) :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 4px solid var(--sr-primary);
    outline-offset: 3px;
}

.example-site-hero,
.example-site-panel,
.example-community-hero,
.example-quiz-hero,
.example-survey-hero,
.example-community-panel,
.example-community-post-card,
.example-community-board-tile,
.example-community-reader-main,
.example-quiz-panel,
.example-quiz-card,
.example-quiz-question,
.example-quiz-result,
.example-survey-panel,
.example-survey-card,
.example-survey-question,
.example-survey-result {
    background: var(--sr-surface);
    border: 4px solid var(--sr-border);
    box-shadow: 10px 10px 0 var(--sr-primary);
    padding: clamp(18px, 3vw, 32px);
}

.example-site-hero,
.example-community-hero,
.example-quiz-hero,
.example-survey-hero {
    display: grid;
    gap: 18px;
    margin-bottom: clamp(28px, 5vw, 64px);
}

.example-site-hero h1,
.example-community-hero h1,
.example-quiz-hero h1,
.example-survey-hero h1 {
    font-size: 2.5rem;
    line-height: .9;
    margin: 0;
    max-width: 12ch;
}

@media (min-width: 800px) {
    .example-content-hero h1,
    .example-content-reader-header h1,
    .example-site-hero h1,
    .example-community-hero h1,
    .example-quiz-hero h1,
    .example-survey-hero h1 {
        font-size: 4.75rem;
    }
}

.example-community-columns,
.example-community-reader-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
}

.example-site-grid,
.example-community-stream,
.example-site-grid,
.example-quiz-grid,
.example-survey-grid,
.example-quiz-question-stack,
.example-survey-question-stack {
    display: grid;
    gap: 22px;
}

.example-quiz-grid,
.example-survey-grid,
.example-community-board-mosaic {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.example-community-link-list,
.example-community-comments ol,
.example-quiz-card,
.example-survey-card {
    display: grid;
    gap: 12px;
}

.example-community-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.example-site-panel h2,
.example-community-post-card h2,
.example-community-board-tile h2,
.example-quiz-card h2,
.example-survey-card h2 {
    margin: 0;
}

.example-community-post-card footer,
.example-quiz-card time,
.example-survey-card time {
    color: var(--sr-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 800;
}

.example-community-searchbar,
.example-community-form-grid {
    background: var(--sr-surface-muted);
    border: 4px solid var(--sr-border);
    box-shadow: 10px 10px 0 var(--sr-primary);
    display: grid;
    gap: 14px;
    margin-bottom: 28px;
    padding: 20px;
}

.example-community-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.example-community-form-wide,
.example-community-form-grid .privacy-consent-fields,
.example-community-form-grid button[type="submit"] {
    grid-column: 1 / -1;
}

.example-community-body,
.example-content-body {
    overflow-wrap: anywhere;
}

.example-quiz-card-image,
.example-survey-card-image,
.example-quiz-cover-image,
.example-survey-cover-image {
    border: 4px solid var(--sr-border);
    display: block;
    height: auto;
    max-width: 100%;
}

.example-quiz-question,
.example-survey-question {
    display: grid;
    gap: 12px;
}

.example-quiz-question legend,
.example-survey-question legend {
    font-weight: 900;
}

@media (max-width: 640px) {
    .content-layout-body :is(.content-home-latest-item, .content-body, .content-comments, .content-quiz-link, .content-series-nav, .content-downloads, .content-group-item, .content-group-pick) {
        box-shadow: 6px 6px 0 var(--sr-primary);
    }

    .example-content-layout-grid,
    .example-content-reader-grid,
    .example-site-grid,
    .example-community-columns,
    .example-community-reader-grid,
    .example-community-form-grid {
        grid-template-columns: 1fr;
    }

    .example-content-reader-rail {
        position: static;
    }
}

/*
 * Module identity override: community sample is a terminal board.
 */
.example-community-layout-shell {
    --sr-text: #eaffda;
    --sr-muted: #a3c8a0;
    --sr-muted-strong: #d9ffd5;
    --sr-border: #2cf25a;
    --sr-border-soft: #275c3a;
    --sr-surface: #07160f;
    --sr-surface-muted: #10281b;
    --sr-surface-soft: #0b1e14;
    --sr-primary: #2cf25a;
    --sr-on-primary: #041008;
    --color-body-bg: #03100a;
    --color-body-color: #eaffda;
    --color-card: #07160f;
    --color-primary: #2cf25a;
    --community-border: #2cf25a;
    --community-text: #eaffda;
    --community-muted: #a3c8a0;
    background:
        linear-gradient(rgba(44, 242, 90, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 242, 90, .06) 1px, transparent 1px),
        #03100a;
    background-size: 30px 30px, 30px 30px, auto;
    color: var(--sr-text);
}

[data-color-scheme="light"] .example-community-layout-shell,
[data-color-scheme="system"] .example-community-layout-shell {
    --sr-text: #102016;
    --sr-muted: #3b6e4d;
    --sr-muted-strong: #143a22;
    --sr-border: #0f8f3d;
    --sr-border-soft: #9fd9b0;
    --sr-surface: #f0fff3;
    --sr-surface-muted: #d7f8dd;
    --sr-surface-soft: #e8ffec;
    --sr-primary: #0f8f3d;
    --sr-on-primary: #ffffff;
    --color-body-bg: #e4f7e8;
    --color-body-color: #102016;
    --color-card: #f0fff3;
    --color-primary: #0f8f3d;
    --community-border: #0f8f3d;
    --community-text: #102016;
    --community-muted: #3b6e4d;
    background:
        linear-gradient(rgba(15, 143, 61, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 143, 61, .1) 1px, transparent 1px),
        #e4f7e8;
    background-size: 30px 30px, 30px 30px, auto;
}

@media (prefers-color-scheme: dark) {
    [data-color-scheme="system"] .example-community-layout-shell {
        --sr-text: #eaffda;
        --sr-muted: #a3c8a0;
        --sr-muted-strong: #d9ffd5;
        --sr-border: #2cf25a;
        --sr-border-soft: #275c3a;
        --sr-surface: #07160f;
        --sr-surface-muted: #10281b;
        --sr-surface-soft: #0b1e14;
        --sr-primary: #2cf25a;
        --sr-on-primary: #041008;
        --color-body-bg: #03100a;
        --color-body-color: #eaffda;
        --color-card: #07160f;
        --color-primary: #2cf25a;
        --community-border: #2cf25a;
        --community-text: #eaffda;
        --community-muted: #a3c8a0;
        background:
            linear-gradient(rgba(44, 242, 90, .08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(44, 242, 90, .06) 1px, transparent 1px),
            #03100a;
        background-size: 30px 30px, 30px 30px, auto;
    }
}

.example-community-layout-shell :is(.community-layout-header, .community-layout-footer, .community-layout-nav) {
    background: var(--sr-surface);
    border-color: var(--sr-border);
    box-shadow: none;
}

.example-community-theme {
    color: var(--sr-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    max-width: 1180px;
}

.example-community-theme :is(.example-community-hero, .example-community-panel, .example-community-post-card, .example-community-board-tile, .example-community-reader-main, .example-community-searchbar, .example-community-form-grid, .community-ui-kit-summary, .community-ui-kit-section) {
    background: var(--sr-surface);
    border: 1px solid var(--sr-border);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(44, 242, 90, .16), 0 0 24px rgba(44, 242, 90, .18);
}

.example-community-theme .example-community-hero::before,
.example-community-theme .example-community-post-card::before,
.example-community-theme .example-community-board-tile::before {
    color: var(--sr-primary);
    content: "> active-thread";
    display: block;
    font-size: .78rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.example-community-theme :is(a, .btn) {
    color: var(--sr-primary);
    text-decoration: none;
}

.example-community-theme :is(a, .btn):hover {
    background: var(--sr-primary);
    color: var(--sr-on-primary);
}

.example-community-theme :is(.example-community-stream, .example-community-board-mosaic) {
    display: grid;
    gap: 14px;
}

.example-community-theme :is(input, select, textarea) {
    background: #020c07;
    border: 1px solid var(--sr-border);
    color: var(--sr-text);
}

[data-color-scheme="light"] .example-community-theme :is(input, select, textarea),
[data-color-scheme="system"] .example-community-theme :is(input, select, textarea) {
    background: #f7fff9;
    color: #102016;
}

@media (prefers-color-scheme: dark) {
    [data-color-scheme="system"] .example-community-theme :is(input, select, textarea) {
        background: #020c07;
        color: #eaffda;
    }
}