@layer reset, base, layout, components, states;

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

    html {
        color-scheme: light;
    }

    body,
    h1,
    h2,
    h3,
    p,
    dl,
    ul,
    ol {
        margin: 0;
    }

    ul,
    ol {
        padding: 0;
    }

    button,
    input {
        font: inherit;
    }

    img {
        display: block;
        max-inline-size: 100%;
    }
}

@layer base {
    :root {
        --bg-top: #f8f3e7;
        --bg-bottom: #efe3c9;
        --ink-strong: #221f1a;
        --ink-soft: #5d564f;
        --ink-muted: #756c63;
        --line-soft: rgba(62, 50, 37, 0.14);
        --panel: rgba(255, 252, 245, 0.92);
        --panel-strong: #fffdf7;
        --board-shadow: 0 18px 45px rgba(55, 38, 22, 0.12);
        --note-shadow: 0 12px 24px rgba(51, 38, 22, 0.1);
        --note-shadow-strong: 0 16px 30px rgba(51, 38, 22, 0.16);
        --radius-panel: 1.25rem;
        --radius-note: 1rem;
        --space-1: 0.28rem;
        --space-2: 0.5rem;
        --space-3: 0.8rem;
        --space-4: 1rem;
        --space-5: 1.3rem;
        --space-6: 1.8rem;
        --space-7: 2.5rem;
        --max-shell: 94rem;
        --focus-ring: #254ca7;
        --font-heading: "Avenir Next Condensed", "Gill Sans", "Trebuchet MS", sans-serif;
        --font-body: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
        --font-ui: "Trebuchet MS", "Avenir Next", "Segoe UI", sans-serif;
        --note-creative: #f6f1df;
        --note-creative-alt: #f0e7c8;
        --note-systems: #edf3f7;
        --note-systems-alt: #dce8f0;
        --note-movement: #eef6e7;
        --note-movement-alt: #dcead0;
        --note-rhythm: #fff0df;
        --note-rhythm-alt: #f6dfbf;
        --note-coordination: #f7ebef;
        --note-coordination-alt: #eed9df;
        --note-restorative: #f3f0f8;
        --note-restorative-alt: #e2dcf0;
        --note-brain: #f6ebdf;
        --note-brain-alt: #ead8bf;
        --evidence-a: #1f6a5c;
        --evidence-b: #955d14;
        --evidence-c: #73403f;
    }

    html {
        min-block-size: 100%;
        background:
            radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.65), transparent 30%),
            radial-gradient(circle at 90% 10%, rgba(230, 0, 18, 0.08), transparent 24%),
            linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    }

    body {
        min-block-size: 100vh;
        color: var(--ink-strong);
        font-family: var(--font-body);
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 14%),
            repeating-linear-gradient(
                0deg,
                rgba(154, 132, 102, 0.04) 0,
                rgba(154, 132, 102, 0.04) 2px,
                transparent 2px,
                transparent 22px
            );
    }

    a {
        color: #9f1f17;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.16em;
    }

    a:hover {
        text-decoration-thickness: 0.12em;
    }

    :focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 3px;
    }

    .visually-hidden {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}

@layer layout {
    .skip-link {
        position: absolute;
        inset-block-start: var(--space-3);
        inset-inline-start: var(--space-3);
        z-index: 20;
        padding: 0.72rem 1rem;
        border-radius: 999px;
        background: var(--panel-strong);
        box-shadow: var(--board-shadow);
        transform: translateY(-160%);
        transition: transform 180ms ease;
    }

    .skip-link:focus-visible {
        transform: translateY(0);
    }

    .page-shell {
        inline-size: min(100% - 1.5rem, var(--max-shell));
        margin-inline: auto;
        padding-block: 1rem 3rem;
    }

    .hero,
    .legend-strip,
    .control-bar,
    .search-results,
    .board,
    .page-footer {
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.55);
        box-shadow: var(--board-shadow);
    }

    .hero,
    .legend-strip,
    .control-bar,
    .search-results,
    .page-footer {
        border-radius: var(--radius-panel);
        background:
            linear-gradient(180deg, rgba(255, 252, 246, 0.96), rgba(250, 244, 233, 0.94)),
            linear-gradient(135deg, rgba(230, 0, 18, 0.03), transparent 55%);
    }

    .hero {
        display: grid;
        gap: var(--space-5);
        padding: clamp(1rem, 2vw, 1.7rem);
        margin-block-end: var(--space-4);
    }

    .legend-strip,
    .control-bar,
    .search-results {
        padding: 1rem;
        margin-block-end: var(--space-4);
    }

    .controls-grid,
    .legend-grid {
        display: grid;
        gap: var(--space-4);
    }

    .live-row {
        display: grid;
        gap: var(--space-2);
        margin-block-start: var(--space-3);
        padding-block-start: var(--space-3);
        border-block-start: 1px solid var(--line-soft);
    }

    .search-results {
        padding-block: 0.9rem;
    }

    .board {
        padding: clamp(1rem, 2vw, 1.5rem);
        border-radius: calc(var(--radius-panel) + 0.25rem);
        background:
            radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.26), transparent 18%),
            radial-gradient(circle at 90% 5%, rgba(230, 0, 18, 0.05), transparent 12%),
            linear-gradient(180deg, #e8d4ad 0%, #dfc799 100%);
        border-color: rgba(135, 103, 53, 0.18);
    }

    .board-section + .board-section {
        margin-block-start: var(--space-7);
    }

    .notes-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
        align-items: start;
    }

    .page-footer {
        margin-block-start: var(--space-4);
        padding: 1rem 1.2rem;
    }

    @media (min-width: 800px) {
        .hero {
            grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 1fr);
            align-items: end;
        }

        .legend-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .controls-grid {
            grid-template-columns: 1.35fr 1fr 1fr 1.1fr;
            align-items: start;
        }
    }
}

@layer components {
    .hero::before,
    .legend-strip::before,
    .control-bar::before,
    .search-results::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 45%),
            repeating-linear-gradient(
                135deg,
                rgba(112, 86, 49, 0.03) 0,
                rgba(112, 86, 49, 0.03) 5px,
                transparent 5px,
                transparent 12px
            );
        opacity: 0.6;
    }

    .hero-copy,
    .legend-head,
    .results-head,
    .cluster-head,
    .section-header {
        display: grid;
        gap: var(--space-2);
    }

    .hero-kicker,
    .section-kicker,
    .note-eyebrow,
    .legend-grade {
        font-family: var(--font-ui);
        font-size: 0.83rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #7b261f;
    }

    .hero h1,
    .section-header h2 {
        font-family: var(--font-heading);
        font-weight: 700;
        line-height: 0.95;
        letter-spacing: -0.03em;
    }

    .hero h1 {
        font-size: clamp(2.2rem, 5vw, 4.4rem);
        max-inline-size: 14ch;
    }

    .hero-summary,
    .hero-card-copy,
    .legend-head p,
    .cluster-head p,
    .section-summary,
    .fallback-note,
    .scope-summary,
    .page-footer p,
    .results-head p,
    .note-credit,
    .note-evidence-copy {
        color: var(--ink-soft);
        line-height: 1.45;
        font-size: 0.99rem;
    }

    .hero-card {
        padding: 1rem;
        border-radius: 1rem;
        background: rgba(255, 252, 247, 0.88);
        border: 1px solid rgba(62, 50, 37, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .hero-card-title,
    .cluster-head h2,
    .legend-head h2,
    .results-head h2 {
        font-family: var(--font-ui);
        font-size: 0.94rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--ink-muted);
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin-block: var(--space-4);
    }

    .hero-stats div {
        padding: 0.8rem 0.65rem;
        border-radius: 0.85rem;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(62, 50, 37, 0.08);
    }

    .hero-stats dt {
        font-family: var(--font-ui);
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--ink-muted);
        margin-block-end: 0.25rem;
    }

    .hero-stats dd {
        font-family: var(--font-heading);
        font-size: 1.55rem;
        font-weight: 700;
        color: var(--ink-strong);
    }

    .legend-card,
    .control-cluster {
        display: grid;
        gap: var(--space-3);
        padding: 0.95rem;
        border-radius: 1rem;
        border: 1px solid rgba(62, 50, 37, 0.08);
        background: rgba(255, 255, 255, 0.72);
    }

    .legend-card--a {
        border-color: color-mix(in srgb, var(--evidence-a) 20%, white);
    }

    .legend-card--b {
        border-color: color-mix(in srgb, var(--evidence-b) 22%, white);
    }

    .legend-card--c {
        border-color: color-mix(in srgb, var(--evidence-c) 24%, white);
    }

    .legend-card p:last-child {
        color: var(--ink-soft);
    }

    .search-field input {
        inline-size: 100%;
        padding: 0.8rem 0.95rem;
        border-radius: 0.9rem;
        border: 1px solid rgba(62, 50, 37, 0.16);
        background: #fffdfa;
        color: var(--ink-strong);
    }

    .cluster-actions,
    .active-filters,
    .note-tags,
    .cluster-actions--wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        align-items: center;
    }

    .check-row {
        display: inline-flex;
        gap: 0.55rem;
        align-items: center;
        font-family: var(--font-ui);
        font-size: 0.92rem;
        color: var(--ink-soft);
    }

    .check-row input {
        accent-color: #9f1f17;
    }

    .toolbar-button,
    .note-button,
    .filter-chip,
    .filter-option {
        font-family: var(--font-ui);
        font-size: 0.92rem;
        line-height: 1.1;
    }

    .toolbar-button,
    .note-button {
        border: 1px solid rgba(62, 50, 37, 0.16);
        border-radius: 999px;
        padding: 0.62rem 0.88rem;
        background: #fffdfa;
        color: var(--ink-strong);
        cursor: pointer;
        transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
    }

    .toolbar-button:hover,
    .note-button:hover {
        background: #fff5ef;
        border-color: rgba(159, 31, 23, 0.26);
    }

    .toolbar-button--ghost,
    .note-button--ghost {
        background: rgba(255, 255, 255, 0.58);
    }

    .filter-panel {
        border: 1px solid rgba(62, 50, 37, 0.12);
        border-radius: 0.95rem;
        background: rgba(255, 255, 255, 0.6);
        overflow: hidden;
    }

    .filter-panel summary {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
        padding: 0.85rem 0.95rem;
        cursor: pointer;
        list-style: none;
    }

    .filter-panel summary::-webkit-details-marker {
        display: none;
    }

    .filter-panel summary span {
        font-family: var(--font-ui);
        font-size: 0.92rem;
        color: var(--ink-soft);
    }

    .filter-panel summary strong {
        font-family: var(--font-ui);
        font-size: 0.92rem;
        color: var(--ink-strong);
    }

    .filter-panel-body {
        display: grid;
        gap: 0.55rem;
        padding: 0 0.95rem 0.95rem;
    }

    .filter-option {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.55rem 0;
        color: var(--ink-soft);
    }

    .filter-option label {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
        inline-size: 100%;
    }

    .filter-option__count {
        color: var(--ink-muted);
        font-size: 0.82rem;
    }

    .filter-chip {
        border: 1px solid rgba(62, 50, 37, 0.14);
        border-radius: 999px;
        padding: 0.48rem 0.72rem;
        background: rgba(255, 255, 255, 0.78);
        color: var(--ink-strong);
        cursor: pointer;
    }

    .results-list {
        display: grid;
        gap: 0.55rem;
        padding-inline-start: 1.1rem;
    }

    .section-header h2 {
        font-size: clamp(1.7rem, 2.2vw, 2.4rem);
    }

    .note {
        --note-paper: var(--note-creative);
        --note-paper-alt: var(--note-creative-alt);
    }

    .board-section[data-category-key="creative"] .note {
        --note-paper: var(--note-creative);
        --note-paper-alt: var(--note-creative-alt);
    }

    .board-section[data-category-key="systems"] .note {
        --note-paper: var(--note-systems);
        --note-paper-alt: var(--note-systems-alt);
    }

    .board-section[data-category-key="movement"] .note {
        --note-paper: var(--note-movement);
        --note-paper-alt: var(--note-movement-alt);
    }

    .board-section[data-category-key="rhythm"] .note {
        --note-paper: var(--note-rhythm);
        --note-paper-alt: var(--note-rhythm-alt);
    }

    .board-section[data-category-key="coordination"] .note {
        --note-paper: var(--note-coordination);
        --note-paper-alt: var(--note-coordination-alt);
    }

    .board-section[data-category-key="restorative"] .note {
        --note-paper: var(--note-restorative);
        --note-paper-alt: var(--note-restorative-alt);
    }

    .board-section[data-category-key="brain"] .note {
        --note-paper: var(--note-brain);
        --note-paper-alt: var(--note-brain-alt);
    }

    .note-surface {
        display: grid;
        gap: 0.8rem;
        padding: 0.9rem;
        border-radius: var(--radius-note);
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--note-paper) 86%, white 14%), var(--note-paper-alt)),
            linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent 55%);
        box-shadow: var(--note-shadow);
        border: 1px solid rgba(89, 71, 42, 0.11);
    }

    .note-media {
        position: relative;
        overflow: hidden;
        border-radius: 0.85rem;
        aspect-ratio: 16 / 9;
        background:
            radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.55), transparent 25%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(219, 204, 176, 0.85));
        border: 1px solid rgba(89, 71, 42, 0.1);
    }

    .note-media img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: contain;
        padding: 0.45rem;
    }

    .evidence-badge {
        position: absolute;
        inset-block-start: 0.6rem;
        inset-inline-end: 0.6rem;
        inline-size: 2rem;
        block-size: 2rem;
        display: grid;
        place-items: center;
        border-radius: 999px;
        font-family: var(--font-ui);
        font-size: 0.94rem;
        font-weight: 800;
        color: white;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
    }

    .evidence-badge--a {
        background: var(--evidence-a);
    }

    .evidence-badge--b {
        background: var(--evidence-b);
    }

    .evidence-badge--c {
        background: var(--evidence-c);
    }

    .note-head {
        display: grid;
        gap: 0.25rem;
    }

    .note-title {
        font-family: var(--font-heading);
        font-size: 1.5rem;
        line-height: 0.96;
        letter-spacing: -0.03em;
    }

    .note-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        font-family: var(--font-ui);
        font-size: 0.8rem;
        color: var(--ink-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .note-summary {
        font-size: 1.01rem;
        line-height: 1.42;
    }

    .note-angle {
        margin-block-start: 0.55rem;
        padding-inline-start: 0.8rem;
        border-inline-start: 3px solid rgba(159, 31, 23, 0.22);
        color: var(--ink-soft);
        font-size: 0.96rem;
        line-height: 1.4;
    }

    .note-tags {
        gap: 0.45rem;
    }

    .note-tag {
        display: inline-flex;
        align-items: center;
        padding: 0.34rem 0.58rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(89, 71, 42, 0.1);
        font-family: var(--font-ui);
        font-size: 0.79rem;
        color: var(--ink-soft);
    }

    .note-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        font-family: var(--font-ui);
        font-size: 0.88rem;
    }

    .note-credit,
    .note-evidence-copy {
        font-size: 0.86rem;
    }

    .note-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .note-details {
        display: grid;
        gap: 0.75rem;
        padding-block-start: 0.75rem;
        border-block-start: 1px dashed rgba(89, 71, 42, 0.18);
    }

    .note-details p {
        line-height: 1.48;
    }

    .board-empty {
        padding: 1.1rem 1.2rem;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.72);
        color: var(--ink-soft);
        margin-block-end: var(--space-4);
    }

    .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        margin-block-start: 0.7rem;
        font-family: var(--font-ui);
        font-size: 0.9rem;
    }
}

@layer states {
    .controls-grid.js-only,
    .search-results.js-only,
    .note-actions.js-only,
    .live-row.js-only,
    .app-message.js-only {
        display: none;
    }

    .js .live-row.js-only,
    .js .controls-grid.js-only {
        display: grid;
    }

    .js .search-results.js-only,
    .js .app-message.js-only {
        display: block;
    }

    .js .note-actions.js-only {
        display: flex;
    }

    .js .note-details {
        display: none;
    }

    .js .note.is-expanded .note-details {
        display: grid;
    }

    .note.is-bookmarked .note-surface {
        border-color: rgba(159, 31, 23, 0.34);
        box-shadow: 0 0 0 2px rgba(159, 31, 23, 0.08), var(--note-shadow-strong);
    }

    .note.is-match .note-surface {
        box-shadow: 0 0 0 2px rgba(37, 76, 167, 0.12), var(--note-shadow-strong);
    }

    .note.is-dimmed {
        opacity: 0.4;
    }

    .note[hidden],
    .board-section[hidden],
    .search-results[hidden],
    .board-empty[hidden],
    .app-message[hidden] {
        display: none !important;
    }

    .toolbar-button[aria-pressed="true"],
    .note-button[aria-pressed="true"] {
        background: #9f1f17;
        color: white;
        border-color: #9f1f17;
    }

    .note:focus-within .note-surface,
    .toolbar-button:focus-visible,
    .note-button:focus-visible,
    .filter-chip:focus-visible,
    .filter-panel summary:focus-visible,
    .search-field input:focus-visible {
        box-shadow: 0 0 0 3px rgba(37, 76, 167, 0.12);
    }

    @media (hover: hover) and (pointer: fine) {
        .note:hover .note-surface {
            box-shadow: var(--note-shadow-strong);
        }
    }

    @media (max-width: 720px) {
        .hero h1 {
            max-inline-size: 11ch;
        }

        .hero-stats {
            grid-template-columns: 1fr;
        }

        .section-header h2 {
            font-size: 1.9rem;
        }
    }
}