.writing-page {
    width: min(1040px, 86vw);
}

.notes-page {
    width: min(1280px, 94vw);
}

.mind-board-wrap {
    display: grid;
    gap: 18px;
}

.mind-board-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px solid var(--desk-line);
    background-color: var(--desk-surface);
    padding: 12px;
}

.mind-tool-button {
    background-color: var(--desk-surface);
    color: var(--desk-text);
    border: 1px solid var(--desk-line);
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.mind-tool-button:hover {
    border-color: var(--desk-line-strong);
    color: var(--desk-text);
}

.mind-tool-note {
    color: var(--desk-muted);
    font-size: 12px;
    font-weight: 800;
    margin-left: auto;
}

.mind-board {
    position: relative;
    height: 74vh;
    min-height: 680px;
    border: 1px solid var(--desk-line);
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.055), transparent 16%),
        radial-gradient(circle at 75% 70%, rgba(0, 0, 0, 0.22), transparent 24%),
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        var(--desk-surface);
    background-size: auto, auto, 34px 34px, 34px 34px, auto;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}


.mind-board,
.mind-canvas,
.mind-tag-node,
.mind-note-node {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.mind-board,
.mind-tag-node,
.mind-note-node {
    touch-action: none;
}

.mind-node-close,
.mind-tool-button {
    touch-action: manipulation;
}

.mind-board.is-dragging {
    cursor: grabbing;
}

.mind-board::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.025), transparent 34%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.035), transparent 48%);
    pointer-events: none;
    z-index: 0;
}

.mind-canvas {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    z-index: 1;
}

.mind-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.mind-line-main,
.mind-line-note {
    stroke: var(--desk-red);
    stroke-width: 2;
}

.mind-line-note {
    stroke-width: 1.5;
    opacity: 0.86;
}

.mind-line-shared {
    stroke: var(--desk-red);
    stroke-width: 1.25;
    stroke-dasharray: 5 6;
    opacity: 0.72;
    opacity: 0.58;
}

.mind-center-node,
.mind-tag-node,
.mind-note-node {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    border: 1px solid var(--desk-text-soft);
    background-color: var(--desk-surface-raised);
    color: var(--desk-text);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.mind-center-node {
    width: 250px;
    min-height: 82px;
    display: grid;
    place-items: center;
    padding: 16px;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.3px;
    cursor: default;
}

.mind-tag-node {
    min-width: 130px;
    padding: 11px 14px;
    color: var(--desk-text);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    cursor: default;
}

.mind-note-node {
    width: 230px;
    padding: 15px;
    display: grid;
    gap: 9px;
    cursor: pointer;
    transition: width 160ms ease, min-height 160ms ease, border-color 160ms ease;
}

.mind-note-node:hover,
.mind-note-node.is-open {
    border-color: var(--desk-muted);
}

.mind-note-node.is-open {
    width: 340px;
    z-index: 5;
}

.mind-pin {
    position: absolute;
    top: -7px;
    left: 50%;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    transform: translateX(-50%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.mind-note-close {
    display: none;
    justify-self: end;
    background-color: var(--desk-surface);
    color: var(--desk-text-soft);
    border: 1px solid var(--desk-line);
    padding: 4px 7px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.mind-note-node.is-open .mind-note-close {
    display: block;
}

.mind-note-node h2 {
    color: var(--desk-text);
    font-size: 15px;
    font-weight: 800;
    border-bottom: 1px solid var(--desk-line);
    padding-bottom: 5px;
}

.mind-note-subject,
.mind-note-thoughts {
    display: none;
    gap: 5px;
}

.mind-note-node.is-open .mind-note-subject,
.mind-note-node.is-open .mind-note-thoughts {
    display: grid;
}

.mind-note-subject span,
.mind-note-thoughts span {
    color: var(--desk-faint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.mind-note-node p {
    color: var(--desk-text-soft);
    font-size: 12px;
    line-height: 1.6;
}

.mind-note-thoughts p {
    font-size: 13px;
    line-height: 1.75;
}

.mind-subtags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mind-subtags span {
    border: 1px solid var(--desk-line);
    color: var(--desk-muted);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 5px;
}

.essay-index {
    display: grid;
    gap: 18px;
}

.essay-index-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    border: 1px solid var(--desk-line);
    background-color: var(--desk-surface);
    color: inherit;
    text-decoration: none;
    padding: 20px;
}

.essay-index-card:hover {
    border-color: var(--desk-line-strong);
}

.essay-index-number {
    color: var(--desk-muted);
    font-size: 12px;
    font-weight: 800;
    border-right: 1px solid var(--desk-line);
    padding-right: 16px;
}

.essay-index-body {
    display: grid;
    gap: 8px;
}

.essay-index-body h2,
.essay-entry-header h2 {
    color: var(--desk-text);
    font-size: 24px;
    font-weight: 800;
}

.essay-index-body p,
.essay-section p {
    color: var(--desk-text-soft);
    font-size: 14px;
    line-height: 1.8;
}

.essay-entry-card {
    border: 1px solid var(--desk-line);
    background-color: var(--desk-surface);
    padding: 24px;
}

.essay-entry-header {
    display: grid;
    gap: 8px;
    border-bottom: 1px solid var(--desk-line);
    padding-bottom: 14px;
    margin-bottom: 22px;
}

.essay-entry-header span {
    color: var(--desk-muted);
    font-size: 12px;
    font-weight: 800;
}

.essay-entry-body {
    display: grid;
    gap: 26px;
}

.essay-section {
    display: grid;
    gap: 8px;
}

.essay-section h3 {
    color: var(--desk-text);
    font-size: 15px;
    font-weight: 800;
    border-bottom: 1px solid var(--desk-line);
    padding-bottom: 6px;
}

.template-growth-note,
.missing-writing-entry {
    border: 1px solid var(--desk-line);
    color: var(--desk-muted);
    font-size: 13px;
    line-height: 1.7;
    padding: 16px;
    background-color: var(--desk-surface);
}

@media (max-width: 900px) {
    .writing-page,
    .notes-page {
        width: min(92vw, 1040px);
    }

    .mind-board-toolbar {
        align-items: stretch;
    }

    .mind-tool-note {
        width: 100%;
        margin-left: 0;
        line-height: 1.6;
    }

    .mind-board {
        height: 72vh;
        min-height: 560px;
    }

    .mind-center-node {
        width: 210px;
        font-size: 14px;
    }

    .mind-note-node {
        width: 220px;
    }

    .mind-note-node.is-open {
        width: 300px;
    }

    .essay-index-card {
        grid-template-columns: 1fr;
    }

    .essay-index-number {
        border-right: none;
        border-bottom: 1px solid var(--desk-line);
        padding-right: 0;
        padding-bottom: 10px;
    }
}

/* Night desk writing and board layer */
.mind-board-toolbar,
.mind-board,
.mind-center-node,
.mind-tag-node,
.mind-note-node,
.essay-card,
.essay-entry,
.writing-card {
    border-color: var(--desk-line);
    border-radius: var(--desk-radius);
    background:
        linear-gradient(145deg, rgba(216, 205, 162, 0.035), transparent 40%),
        var(--desk-surface);
    box-shadow: 0 18px 34px var(--desk-shadow);
}

.mind-board {
    background:
        radial-gradient(circle at 22% 18%, rgba(216, 205, 162, 0.12), transparent 18%),
        radial-gradient(circle at 75% 70%, rgba(0, 0, 0, 0.24), transparent 24%),
        linear-gradient(rgba(220, 190, 128, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220, 190, 128, 0.025) 1px, transparent 1px),
        var(--desk-bg-deep);
    background-size: auto, auto, 34px 34px, 34px 34px, auto;
}

.mind-tool-button,
.mind-note-close {
    border-color: var(--desk-line);
    border-radius: 6px;
    background-color: var(--desk-bg-deep);
    color: var(--desk-text-soft);
}

.mind-tool-button:hover,
.mind-note-close:hover {
    color: var(--desk-lamp);
    border-color: var(--desk-line-strong);
}

.mind-tool-note,
.mind-note-subject span,
.mind-note-thoughts span,
.mind-subtags span {
    color: var(--desk-muted);
}

.mind-center-node,
.mind-tag-node,
.mind-note-node h2 {
    color: var(--desk-text);
}

.mind-note-node p,
.essay-card p,
.essay-entry p {
    color: var(--desk-text-soft);
}

.mind-line-main,
.mind-line-note {
    stroke: var(--desk-red);
}

.mind-line-shared {
    stroke: var(--desk-lamp);
}

/* Personal light mode: readable writing pages while notes keep contrast */
body.personal-light-mode .mind-board-toolbar,
body.personal-light-mode .essay-index-card,
body.personal-light-mode .essay-entry-card,
body.personal-light-mode .template-growth-note,
body.personal-light-mode .missing-writing-entry {
    border-color: rgba(38, 58, 62, 0.2);
    background:
        linear-gradient(145deg, rgba(255, 242, 197, 0.08), transparent 40%),
        rgba(217, 226, 210, 0.64);
    box-shadow: 0 18px 34px rgba(39, 57, 59, 0.16);
}

body.personal-light-mode .mind-board {
    border-color: rgba(38, 58, 62, 0.24);
    background:
        radial-gradient(circle at 22% 18%, rgba(232, 235, 218, 0.16), transparent 18%),
        radial-gradient(circle at 75% 70%, rgba(31, 48, 52, 0.2), transparent 24%),
        linear-gradient(rgba(232, 235, 218, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 235, 218, 0.04) 1px, transparent 1px),
        rgba(46, 66, 70, 0.72);
    box-shadow: 0 18px 34px rgba(39, 57, 59, 0.18);
}

body.personal-light-mode .mind-center-node,
body.personal-light-mode .mind-tag-node,
body.personal-light-mode .mind-note-node {
    border-color: rgba(38, 58, 62, 0.22);
    background:
        linear-gradient(145deg, rgba(255, 242, 197, 0.08), transparent 40%),
        rgba(232, 235, 218, 0.86);
    color: var(--desk-text);
    box-shadow: 0 12px 24px rgba(31, 48, 52, 0.18), 0 0 18px var(--node-glow, rgba(31, 48, 52, 0.05));
}

body.personal-light-mode .mind-tool-button,
body.personal-light-mode .mind-note-close,
body.personal-light-mode .mind-node-close {
    border-color: rgba(38, 58, 62, 0.2);
    background-color: rgba(232, 235, 218, 0.78);
    color: var(--desk-text-soft);
}

body.personal-light-mode .mind-tool-button:hover,
body.personal-light-mode .mind-note-close:hover,
body.personal-light-mode .mind-node-close:hover {
    color: var(--desk-text);
    border-color: var(--desk-line-strong);
}

body.personal-light-mode .mind-tool-note,
body.personal-light-mode .mind-note-subject span,
body.personal-light-mode .mind-note-thoughts span,
body.personal-light-mode .mind-subtags span,
body.personal-light-mode .mind-main-preview span,
body.personal-light-mode .mind-connected-list span,
body.personal-light-mode .essay-index-number,
body.personal-light-mode .essay-entry-header span {
    color: var(--desk-muted);
}

body.personal-light-mode .mind-center-node,
body.personal-light-mode .mind-tag-node h2,
body.personal-light-mode .mind-note-node h2,
body.personal-light-mode .essay-index-body h2,
body.personal-light-mode .essay-entry-header h2,
body.personal-light-mode .essay-section h3 {
    color: var(--desk-text);
    border-bottom-color: rgba(38, 58, 62, 0.18);
}

body.personal-light-mode .mind-note-node p,
body.personal-light-mode .mind-main-preview p,
body.personal-light-mode .mind-connected-list li,
body.personal-light-mode .essay-index-body p,
body.personal-light-mode .essay-section p,
body.personal-light-mode .template-growth-note,
body.personal-light-mode .missing-writing-entry {
    color: var(--desk-text-soft);
}

body.personal-light-mode .mind-subtags span {
    border-color: rgba(38, 58, 62, 0.18);
    background-color: rgba(132, 106, 44, 0.08);
}

.mind-pin {
    box-shadow: 0 0 0 3px rgba(216, 205, 162, 0.12), 0 5px 10px rgba(0, 0, 0, 0.45);
}

/* v55 notes board, custom main nodes and cleaner connection logic */
.mind-line-main,
.mind-line-note {
    stroke: var(--desk-red);
    stroke-width: 2;
    stroke-dasharray: none;
    opacity: 0.9;
}

.mind-line-note {
    stroke-width: 1.65;
    opacity: 0.84;
}

.mind-line-shared {
    stroke: var(--desk-red);
    stroke-width: 1.35;
    stroke-dasharray: 5 7;
    opacity: 0.72;
}

.mind-tag-node {
    width: 170px;
    min-height: 58px;
    padding: 13px 14px;
    display: grid;
    gap: 8px;
    cursor: pointer;
    text-align: left;
    transition: width 160ms ease, min-height 160ms ease, border-color 160ms ease;
}

.mind-tag-node h2 {
    color: var(--desk-text);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    border-bottom: 1px solid var(--desk-line);
    padding-bottom: 5px;
}

.mind-tag-node:hover,
.mind-tag-node.is-open {
    border-color: var(--desk-muted);
}

.mind-tag-node.is-open {
    width: 360px;
    z-index: 6;
}

.mind-main-preview,
.mind-tag-subject,
.mind-connected-list {
    display: none;
    gap: 5px;
}

.mind-tag-node.is-open .mind-main-preview,
.mind-tag-node.is-open .mind-tag-subject,
.mind-tag-node.is-open .mind-connected-list {
    display: grid;
}

.mind-main-preview span,
.mind-connected-list span {
    color: var(--desk-faint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.mind-main-preview p,
.mind-connected-list li {
    color: var(--desk-text-soft);
    font-size: 12px;
    line-height: 1.65;
}

.mind-connected-list ul {
    display: grid;
    gap: 4px;
    list-style: none;
}

.mind-node-close {
    display: none;
    justify-self: end;
    background-color: var(--desk-surface);
    color: var(--desk-text-soft);
    border: 1px solid var(--desk-line);
    padding: 4px 7px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.mind-tag-node.is-open .mind-node-close,
.mind-note-node.is-open .mind-node-close {
    display: block;
}

.mind-note-node {
    width: 230px;
}

.mind-note-node.is-open {
    width: 350px;
    z-index: 7;
}

.mind-center-node,
.mind-tag-node,
.mind-note-node {
    outline: 1px solid rgba(255, 255, 255, 0.03);
}

.template-growth-note {
    border: 1px solid var(--desk-line);
    background-color: var(--desk-surface);
    color: var(--desk-muted);
    font-size: 12px;
    line-height: 1.7;
    padding: 12px;
}

/* v56 notes board, pin linked lines and colour families */
.mind-lines {
    z-index: 1;
}

.mind-line-main,
.mind-line-note,
.mind-line-shared {
    fill: none;
    stroke-linecap: round;
    pointer-events: none;
}

.mind-line-main {
    stroke-width: 2.2;
    opacity: 0.82;
}

.mind-line-note {
    stroke-width: 1.75;
    opacity: 0.72;
}

.mind-line-shared {
    stroke-width: 1.25;
    stroke-dasharray: 4 7;
    opacity: 0.52;
}

.mind-center-node,
.mind-tag-node,
.mind-note-node {
    z-index: 3;
}

.mind-tag-node,
.mind-note-node {
    border-color: color-mix(in srgb, var(--node-color, var(--desk-text-soft)) 46%, var(--desk-line));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), 0 0 18px var(--node-glow, rgba(255, 255, 255, 0.03));
}

.mind-tag-node h2,
.mind-note-node h2 {
    color: color-mix(in srgb, var(--node-color, var(--desk-text)) 34%, var(--desk-text));
}

.mind-tag-node:hover,
.mind-note-node:hover,
.mind-tag-node.is-open,
.mind-note-node.is-open {
    border-color: color-mix(in srgb, var(--node-color, var(--desk-muted)) 72%, var(--desk-text-soft));
}

.mind-pin {
    z-index: 4;
}

/* Night desk final writing and board overrides */
.mind-board-toolbar,
.mind-board,
.mind-center-node,
.mind-tag-node,
.mind-note-node,
.essay-card,
.essay-entry,
.writing-card {
    border-color: var(--desk-line);
    border-radius: var(--desk-radius);
    background:
        linear-gradient(145deg, rgba(216, 205, 162, 0.035), transparent 40%),
        var(--desk-surface);
    box-shadow: 0 18px 34px var(--desk-shadow);
}

.mind-board {
    background:
        radial-gradient(circle at 22% 18%, rgba(216, 205, 162, 0.12), transparent 18%),
        radial-gradient(circle at 75% 70%, rgba(0, 0, 0, 0.24), transparent 24%),
        linear-gradient(rgba(220, 190, 128, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220, 190, 128, 0.025) 1px, transparent 1px),
        var(--desk-bg-deep);
    background-size: auto, auto, 34px 34px, 34px 34px, auto;
}

.mind-tool-button,
.mind-note-close {
    border-color: var(--desk-line);
    border-radius: 6px;
    background-color: var(--desk-bg-deep);
    color: var(--desk-text-soft);
}

.mind-tool-button:hover,
.mind-note-close:hover {
    color: var(--desk-lamp);
    border-color: var(--desk-line-strong);
}

.mind-tool-note,
.mind-note-subject span,
.mind-note-thoughts span,
.mind-subtags span {
    color: var(--desk-muted);
}

.mind-center-node,
.mind-tag-node,
.mind-note-node h2 {
    color: var(--desk-text);
}

.mind-note-node p,
.essay-card p,
.essay-entry p {
    color: var(--desk-text-soft);
}

.mind-line-main,
.mind-line-note {
    stroke: var(--desk-red);
}

.mind-line-shared {
    stroke: var(--desk-lamp);
}