/* =====================================================
   HONESTLY, E — The Vision Board (Emory, Phase 3, 2026-10-09)
   Sticky notes on a free canvas: beats placed by hand, colored and
   shaped for grouping on two independent axes, threaded by typed
   connections, each note opening into the writing lightbox.
   Trace mode lights the why-chain upstream of any note.
   Her palette: light blue · light green · rose · creamy light
   orange · lavender · warm grey. Notes read as paper in any theme.
   ===================================================== */

.vb-wrap { position: relative; }

.vb-toolbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin: 10px 0;
}
.vb-toolbar .vb-hint {
    font-size: 12px; color: var(--text-muted); font-family: var(--font-sans);
}
.vb-view-toggle { display: inline-flex; border: 1px solid var(--border-medium); border-radius: 8px; overflow: hidden; }
.vb-view-toggle button {
    border: none; background: var(--bg-card); color: var(--text-secondary);
    font-family: var(--font-sans); font-size: 13px; padding: 6px 14px; cursor: pointer;
}
.vb-view-toggle button.active { background: var(--navy); color: #fff; }
.vb-trace-btn {
    border: 1px solid var(--border-medium); background: var(--bg-card); color: var(--text-secondary);
    font-family: var(--font-sans); font-size: 13px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
}
.vb-trace-btn.active { background: var(--gold); border-color: var(--gold-dark); color: #fff; }

.vision-board {
    position: relative; height: 72vh; min-height: 420px;
    border: 1px solid var(--border-light); border-radius: 12px;
    overflow: hidden; cursor: grab;
    background-color: var(--cream);
    background-image: radial-gradient(circle, rgba(27,54,93,0.10) 1px, transparent 1px);
    background-size: 26px 26px;
    touch-action: none;
}
.vision-board.panning { cursor: grabbing; }
.vision-board.tracing { cursor: help; }

.vb-canvas { position: absolute; left: 0; top: 0; width: 3200px; height: 2200px; transform-origin: 0 0; }
.vb-threads { position: absolute; left: 0; top: 0; width: 3200px; height: 2200px; pointer-events: none; }

/* ── the thread types — the why made visible ── */
.vb-thread { fill: none; stroke-width: 2; opacity: 0.55; transition: opacity .35s ease, stroke-width .35s ease; }
.vb-thread.t-follows      { stroke: #9aa4b1; }
.vb-thread.t-causes       { stroke: #B9833F; stroke-width: 2.5; }
.vb-thread.t-contradicts  { stroke: #B44A3D; stroke-dasharray: 7 5; }
.vb-thread.t-parallels    { stroke: #4A7C59; stroke-dasharray: 2 5; stroke-linecap: round; }
.vb-thread.t-flashback    { stroke: #6B7FB3; stroke-dasharray: 12 6; }

/* ── the notes ── */
.vb-note {
    position: absolute; box-sizing: border-box;
    width: 185px; min-height: 150px; padding: 14px 14px 26px;
    background: #F7DFC4; /* creamy light orange is the default paper */
    color: #333; font-family: var(--font-serif);
    box-shadow: 0 3px 10px rgba(30, 30, 30, 0.18);
    border-radius: 3px;
    transform: rotate(var(--tilt, 0deg));
    cursor: pointer; user-select: none;
    transition: box-shadow .15s ease, opacity .35s ease, filter .35s ease;
}
.vb-note:hover { box-shadow: 0 6px 18px rgba(30,30,30,0.26); z-index: 5; }
.vb-note.dragging { box-shadow: 0 14px 30px rgba(30,30,30,0.32); z-index: 30; cursor: grabbing; transition: none; }

.vb-note .vb-label {
    font-size: 15.5px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.vb-note .vb-foot {
    position: absolute; left: 12px; right: 10px; bottom: 7px;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-sans); font-size: 10.5px; color: rgba(40,40,40,0.55);
}
.vb-note .vb-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.vb-dot.s-idea     { background: #BBB; }
.vb-dot.s-drafted  { background: #C5A572; }
.vb-dot.s-revised  { background: #6B7FB3; }
.vb-dot.s-done     { background: #4A7C59; }

/* her pastels */
.vb-note.c-blue     { background: #C9DEF0; }
.vb-note.c-green    { background: #CFE5CC; }
.vb-note.c-rose     { background: #F2CFD4; }
.vb-note.c-orange   { background: #F7DFC4; }
.vb-note.c-lavender { background: #DCD3EC; }
.vb-note.c-grey     { background: #E3DED7; }

/* shapes — the second grouping axis */
.vb-note.sh-wide  { width: 265px; min-height: 120px; }
.vb-note.sh-round { width: 180px; min-height: 180px; border-radius: 50%; padding: 34px 24px; text-align: center; }
.vb-note.sh-round .vb-foot { left: 30px; right: 26px; bottom: 20px; }
.vb-note.sh-torn  {
    border-radius: 0;
    clip-path: polygon(1% 3%, 8% 0%, 22% 2%, 37% 0%, 52% 3%, 66% 1%, 81% 3%, 94% 0%, 100% 5%, 99% 22%, 100% 41%, 98% 60%, 100% 78%, 99% 95%, 93% 100%, 77% 98%, 60% 100%, 44% 98%, 28% 100%, 12% 98%, 0% 100%, 1% 80%, 0% 60%, 2% 40%, 0% 20%);
}

/* trace mode */
.vb-note.vb-dim { opacity: 0.18; filter: grayscale(0.7); }
.vb-thread.vb-dim { opacity: 0.06; }
.vb-note.vb-lit { opacity: 1; filter: none; box-shadow: 0 0 0 3px var(--gold), 0 8px 22px rgba(30,30,30,0.3); z-index: 20; }
.vb-thread.vb-lit { opacity: 0.95; stroke-width: 3.5; }

/* ── the style popover (Shift+click / long-press) ── */
.vb-popover {
    position: absolute; z-index: 60;
    background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.22); padding: 10px;
    font-family: var(--font-sans);
}
.vb-popover .vb-row { display: flex; gap: 7px; margin-bottom: 8px; }
.vb-popover .vb-row:last-child { margin-bottom: 0; }
.vb-swatch {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; box-sizing: border-box;
}
.vb-swatch.selected, .vb-swatch:hover { border-color: var(--navy); }
.vb-shape-opt {
    width: 30px; height: 26px; cursor: pointer; background: var(--cream-dark);
    border: 2px solid transparent; border-radius: 3px; box-sizing: border-box;
}
.vb-shape-opt.o-wide { width: 40px; height: 20px; align-self: center; }
.vb-shape-opt.o-round { border-radius: 50%; width: 26px; }
.vb-shape-opt.o-torn { clip-path: polygon(4% 6%, 30% 0%, 65% 4%, 96% 0%, 100% 30%, 96% 66%, 100% 96%, 68% 100%, 32% 96%, 0% 100%, 4% 64%, 0% 32%); }
.vb-shape-opt.selected, .vb-shape-opt:hover { border-color: var(--navy); }

/* ── the writing lightbox ── */
.vb-lightbox-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(20, 26, 38, 0.55);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.vb-lightbox {
    width: min(860px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
    background: var(--warm-white); border-radius: 14px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.vb-lb-head {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px;
    border-bottom: 1px solid var(--border-light);
}
.vb-lb-head input.vb-lb-label {
    flex: 1; border: none; background: transparent; color: var(--text-primary);
    font-family: var(--font-serif); font-size: 20px; outline: none;
}
.vb-lb-close { border: none; background: none; font-size: 22px; color: var(--text-muted); cursor: pointer; }
.vb-lb-body { flex: 1; overflow-y: auto; padding: 16px 22px; }
.vb-lb-editor {
    width: 100%; min-height: 38vh; box-sizing: border-box; resize: vertical;
    border: 1px solid var(--border-light); border-radius: 8px; padding: 16px 18px;
    background: var(--bg-card); color: var(--text-primary);
    font-family: var(--font-serif); font-size: 17.5px; line-height: 1.65; outline: none;
}
.vb-lb-editor:focus { border-color: var(--gold); }
.vb-lb-meta { display: flex; gap: 14px; align-items: center; margin: 10px 0 0; font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.vb-lb-actions { display: flex; gap: 10px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border-light); flex-wrap: wrap; }
.vb-lb-save {
    border: none; background: var(--navy); color: #fff; font-family: var(--font-sans);
    font-size: 14px; padding: 9px 22px; border-radius: 8px; cursor: pointer;
}
.vb-lb-save:disabled { opacity: 0.5; cursor: default; }
.vb-lb-secondary {
    border: 1px solid var(--border-medium); background: var(--bg-card); color: var(--text-secondary);
    font-family: var(--font-sans); font-size: 13px; padding: 8px 14px; border-radius: 8px; cursor: pointer;
}
.vb-lb-status { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); }

.vb-lb-section { margin-top: 18px; }
.vb-lb-section h4 { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 8px; }
.vb-lb-list { display: flex; flex-direction: column; gap: 6px; }
.vb-lb-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 8px;
    font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary);
}
.vb-lb-item .grow { flex: 1; }
.vb-lb-item .vb-badge { font-size: 10.5px; background: var(--gold); color: #fff; border-radius: 10px; padding: 2px 8px; }
.vb-lb-item button { border: 1px solid var(--border-medium); background: none; border-radius: 6px; font-size: 12px; padding: 3px 10px; cursor: pointer; color: var(--text-secondary); }
.vb-lb-item button.danger { color: var(--error); border-color: var(--error-light); }
.vb-lb-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-family: var(--font-sans); font-size: 13px; }
.vb-lb-inline select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border-medium); background: var(--bg-card); color: var(--text-primary); font-size: 13px; max-width: 320px; }

/* ── The Line-Edit Desk (Phase 4) ── */
.vb-marks-badge {
    position: absolute; top: 6px; right: 8px;
    font-family: var(--font-sans); font-size: 10.5px; color: #8a4a3d;
    background: rgba(255,255,255,0.55); border-radius: 9px; padding: 1px 7px;
}
.vb-redline-preview {
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 8px;
    padding: 14px 16px; margin-bottom: 10px;
    font-family: var(--font-serif); font-size: 16px; line-height: 1.65; color: var(--text-primary);
    max-height: 34vh; overflow-y: auto;
}
.vb-redline { cursor: pointer; border-radius: 3px; }
.vb-redline del { color: #B44A3D; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.vb-redline ins { color: #B44A3D; text-decoration: none; font-style: italic; margin-left: 2px; }
.vb-redline:hover { background: rgba(180, 74, 61, 0.08); }
.vb-redline.accepted { color: var(--text-primary); font-weight: 600; }
.vb-redline.accepted:hover { background: rgba(74, 124, 89, 0.10); }
mark.vb-hl { border-radius: 3px; padding: 0 2px; }
mark.vb-hl.i-note       { background: #F6E8B8; }
mark.vb-hl.i-expand     { background: #CFE5CC; }
mark.vb-hl.i-edit_focus { background: #F2CFD4; }

@media (max-width: 640px) {
    .vision-board { height: 64vh; }
    .vb-lightbox { width: 100vw; max-height: 100vh; border-radius: 0; }
    .vb-lightbox-overlay { padding: 0; }
}