/* Notes layout */
.notes-page {
    display: grid;
    gap: var(--brand-space-64);
}

.notes-section-header {
    display: grid;
    gap: var(--brand-space-12);
    max-width: 720px;
    margin-bottom: var(--brand-space-24);
}

.notes-section-header h2 {
    margin: 0;
    color: var(--brand-text);
    font-size: var(--brand-text-section-title);
    line-height: 1.1;
}

.notes-filter-note,
.notes-summary {
    max-width: 640px;
    margin: 0 0 var(--brand-space-16);
    color: var(--brand-text-muted);
    line-height: 1.7;
}

/* Category Labels */
.notes-category-rail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--brand-space-8);
}

.notes-category-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding-inline: var(--brand-space-12);
    border: 1px dashed var(--brand-border);
    border-radius: var(--brand-radius-small);
    color: var(--brand-text-muted);
    background: transparent;
    font-size: var(--brand-text-caption);
    font-weight: 700;
}

.notes-category-label:first-child {
    color: var(--brand-accent-ink);
    border-style: solid;
    border-color: var(--brand-border);
    background: var(--brand-accent-soft);
}

/* Note Row */
.note-list {
    display: grid;
    border-top: 1px solid var(--brand-border);
}

.note-row {
    display: grid;
    grid-template-columns: minmax(120px, .22fr) minmax(0, 1fr) auto;
    gap: var(--brand-space-24);
    align-items: start;
    min-width: 0;
    padding: var(--brand-space-24) 0;
    border-bottom: 1px solid var(--brand-border);
    transition: background .2s ease, padding-inline .2s ease;
}

.note-row:hover {
    padding-inline: var(--brand-space-16);
    background: color-mix(in srgb, var(--brand-accent-soft) 38%, transparent);
}

.note-row-main {
    display: grid;
    gap: var(--brand-space-8);
    min-width: 0;
}

.note-category {
    margin: 0;
    color: var(--brand-accent);
    font-size: var(--brand-text-caption);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.note-row h3 {
    margin: 0;
    color: var(--brand-text);
    font-size: var(--brand-text-card-title);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.note-summary {
    margin: 0;
    color: var(--brand-text-muted);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.note-body-detail {
    min-width: 120px;
}

.note-body-detail summary {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    color: var(--brand-accent-ink);
    font-size: var(--brand-text-caption);
    font-weight: 700;
    cursor: pointer;
}

.note-body-detail summary:hover {
    color: var(--brand-accent);
}

.note-body {
    margin: var(--brand-space-12) 0 0;
    color: var(--brand-text-muted);
    line-height: 1.75;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Empty State */
.notes-empty-state {
    display: grid;
    gap: var(--brand-space-12);
    padding: var(--brand-space-48);
    border: 1px dashed var(--brand-border-strong);
    background: var(--brand-surface-subtle);
}

.notes-empty-state h3,
.notes-empty-state p {
    margin: 0;
}

.notes-empty-state h3 {
    color: var(--brand-text);
    font-size: var(--brand-text-card-title);
}

.notes-empty-state p:not(.section-label) {
    color: var(--brand-text-muted);
    line-height: 1.7;
}

/* Reading desk layer */
.notes-page { gap: clamp(64px, 9vw, 124px); }
.notes-page .brand-page-heading h1 { font-size: clamp(3.4rem, 7vw, 6.6rem); }
.notes-desk-prologue { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(280px, .95fr); align-items:stretch; border-block:1px solid var(--brand-editorial-line); }
.notes-desk-prologue__image { min-height:480px; background:url("../../assets/editorial/relmua-notes-desk.png") center / cover no-repeat; }
.notes-desk-prologue > div:last-child { display:grid; align-content:center; gap:18px; padding:clamp(28px,5vw,72px); background:var(--brand-surface); }
.notes-desk-prologue h2 { margin:0; font-family:Georgia,"Noto Serif JP",serif; font-size:clamp(2rem,3.5vw,4rem); font-weight:500; letter-spacing:-.04em; line-height:1.1; }
.notes-desk-prologue p:not(.section-label) { max-width:440px; margin:0; color:var(--brand-text-muted); line-height:1.85; }
.note-list { border-top-color:var(--brand-editorial-line); }.note-row { position:relative; grid-template-columns:120px minmax(0, 1fr) auto; gap:clamp(18px,3vw,40px); padding:32px 16px; }.note-row::before { position:absolute; left:0; top:0; width:3px; height:0; background:var(--brand-warm); content:""; transition:height .2s ease; }.note-row:hover { padding-inline:24px; background:color-mix(in srgb,var(--brand-warm-soft) 46%,transparent); }.note-row:hover::before { height:100%; }.note-row h3 { font-family:Georgia,"Noto Serif JP",serif; font-size:clamp(1.25rem,2vw,1.8rem); font-weight:500; }.note-body-detail summary { border-bottom:1px solid var(--brand-border); }
@media(max-width:800px){.notes-desk-prologue{grid-template-columns:1fr}.notes-desk-prologue__image{min-height:300px}.note-row{grid-template-columns:1fr;gap:12px}}
@media(max-width:640px){.notes-desk-prologue__image{min-height:240px}.notes-desk-prologue>div:last-child{padding:28px 20px}.note-row{padding:24px 10px}.note-row:hover{padding-inline:16px}}

/* Responsive */
@media (max-width: 900px) {
    .note-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--brand-space-12);
    }
}

@media (max-width: 640px) {
    .notes-page {
        gap: var(--brand-space-48);
    }

    .note-row {
        padding-block: var(--brand-space-20);
    }

    .notes-empty-state {
        padding: var(--brand-space-20);
    }
}