/* episode-tapestry.css — v7 Note Evolution course tapestry, scoped to
 * the takeover middle pane. Dark Roast --dr-* tokens only (with safe
 * fallbacks). Dormant unless __ENABLE_EPISODE_TAPESTRY (the markup is
 * never emitted otherwise). Never affects the rail or census. */

.nev-tap {
    display: grid;
    gap: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    color: var(--dr-bone, #EBE1D7);
}

.nev-tap-spine {
    display: grid;
    border: 1px solid rgba(107, 86, 74, .58);
    background: rgba(18, 12, 6, .44);
}
.nev-tap-phase {
    border: 0;
    border-right: 1px solid rgba(107, 86, 74, .46);
    background: rgba(30, 20, 14, .72);
    color: var(--dr-bone, #EBE1D7);
    padding: 7px 6px;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 2px;
}
.nev-tap-phase:last-child { border-right: 0; }
.nev-tap-phase .d { font: 10px/1 inherit; color: var(--dr-crema, #FFF7EE); }
.nev-tap-phase .dt { font: 8px/1 inherit; color: var(--dr-mocha, #8B7355); }

.nev-tap-aware { display: flex; gap: 6px; flex-wrap: wrap; }
.nev-tap-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(191, 161, 98, .44);
    background: rgba(18, 12, 6, .44);
    color: var(--dr-warm-white, #F0E6D0);
    padding: 3px 7px;
    font: 9px/1 inherit;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 2px;
}
.nev-tap-pill.pending { color: var(--dr-amber, #E69A4C); border-color: rgba(230, 154, 76, .62); }
.nev-tap-pill.ready { color: var(--dr-teal, #4CC4B4); border-color: rgba(76, 196, 180, .55); }
.nev-tap-pill.dim { color: var(--dr-mocha, #8B7355); }

.nev-tap-board {
    border: 1px solid rgba(107, 86, 74, .62);
    background: rgba(18, 12, 6, .35);
}
.nev-tap-lane {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    min-height: 60px;
    border-bottom: 1px solid rgba(107, 86, 74, .42);
}
.nev-tap-lane:last-child { border-bottom: 0; }
.nev-tap-lane[data-kind="readiness"] { background: rgba(169, 137, 214, .05); }
.nev-tap-lane-label {
    padding: 8px 10px;
    border-right: 1px solid rgba(107, 86, 74, .55);
    background: rgba(42, 28, 19, .55);
}
.nev-tap-lane-label .nm { font: 11px/1.2 inherit; color: var(--dr-crema, #FFF7EE); }
.nev-tap-lane-label .ty {
    font: 8px/1.2 inherit;
    color: var(--dr-mocha, #8B7355);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 4px;
}
.nev-tap-track {
    display: grid;
    align-items: center;
    position: relative;
    padding: 8px 0;
    background: repeating-linear-gradient(
        90deg, transparent 0 calc(14.285% - 1px),
        rgba(107, 86, 74, .26) calc(14.285% - 1px) 14.285%);
}
.nev-tap-ep {
    height: 26px;
    margin: 0 4px;
    border: 1px solid rgba(191, 161, 98, .40);
    border-left: 4px solid var(--incl, var(--dr-brass, #BFA162));
    background: rgba(42, 28, 19, .72);
    display: flex;
    align-items: center;
    padding: 0 8px;
    min-width: 0;
    overflow: hidden;
    font: 9px/1 inherit;
    color: var(--dr-bone, #EBE1D7);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.nev-tap-ep[data-state="watch"],
.nev-tap-ep[data-state="conflict"],
.nev-tap-ep[data-state="worsening"] { background: rgba(196, 76, 76, .09); }
.nev-tap-ep[data-state="resolved"],
.nev-tap-ep[data-state="controlled"],
.nev-tap-ep[data-state="improving"] { background: rgba(76, 196, 180, .06); }

.nev-tap-knot {
    position: relative;
    z-index: 3;
    justify-self: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 247, 238, .54);
    display: grid;
    place-items: center;
    font: 9px/1 inherit;
    color: var(--dr-void, #120C06);
    background: var(--dr-brass, #BFA162);
    box-shadow: 0 0 0 3px rgba(18, 12, 6, .85);
    cursor: pointer;
}
.nev-tap-knot.proposed { background: var(--dr-amber, #E69A4C); box-shadow: 0 0 0 3px rgba(18,12,6,.85), 0 0 12px rgba(230,154,76,.55); }
.nev-tap-knot.detected { background: var(--dr-brass, #BFA162); }
.nev-tap-knot.accepted { background: var(--dr-teal, #4CC4B4); opacity: .8; }
.nev-tap-knot.edited { background: var(--dr-violet, #A989D6); }
.nev-tap-knot.rejected { background: var(--dr-crater, #6B564A); color: var(--dr-mocha, #8B7355); opacity: .45; }
.nev-tap-knot.conflict { background: var(--dr-scarlet, #C44C4C); box-shadow: 0 0 0 3px rgba(18,12,6,.85), 0 0 14px rgba(196,76,76,.65); }
.nev-tap-knot.apply_failed { background: var(--dr-scarlet, #C44C4C); border-style: dashed; }
.nev-tap-knot.carried_forward { background: transparent; color: var(--dr-mocha, #8B7355); border-color: rgba(139,115,85,.7); }
.nev-tap-knot.selected { outline: 2px solid var(--dr-crema, #FFF7EE); outline-offset: 3px; }
.nev-tap-knot.pulse { animation: nevTapPulse 1.4s ease-in-out infinite; }
@keyframes nevTapPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }

/* Ledger knots (2026-05-27, plan KTD11): a pending Δ marks an unreconciled
 * HyperDrive delta the note hasn't absorbed — sourced from the ledger, NOT an
 * LLM patch. Dashed amber ring + transparent fill reads as "flagged, not yet
 * acted", visually distinct from the solid patch-knot states above so the
 * doctor can tell the two apart at a glance. Reconciling reuses .pulse while
 * the scoped propose streams (U5). */
.nev-tap-knot.ledger_pending,
.nev-tap-knot.ledger_reconciling {
    background: transparent;
    color: var(--dr-amber, #E69A4C);
    border: 1.5px dashed var(--dr-amber, #E69A4C);
    font-weight: 600;
}
/* U6: carried-forward = a dim hollow ◇ waypoint. The considered-and-kept
 * decision stays visible but recedes (low contrast, no ring) so it reads as
 * "looked at, intentionally not amended" rather than "needs action". Dismiss
 * has NO style — the knot is removed from the lane entirely (audit row only). */
.nev-tap-knot.ledger_carried_forward {
    background: transparent;
    color: var(--dr-mocha, #8B7355);
    border: 1px solid rgba(139, 115, 85, .45);
    opacity: .55;
    font-weight: 500;
}

/* Knot state-transition cue (2026-05-26): a one-shot "this just reconciled"
 * gesture, applied by episode-tapestry-column.js ONLY to a knot whose patch
 * state changed since the last render. The knot's state color is already on
 * the element (.accepted/.rejected/etc.); this only adds the *motion* of the
 * change settling into place. Default = a brief seat (pop down to rest); the
 * ::after sonar ping echoes the meaning's direction (teal = accepted/locked
 * in, scarlet = conflict/failed, crema = edited/rejected/carried). Conflict &
 * apply-failed shake instead of seat so they read as "needs attention". All
 * one-shot — on the next render the changed class is simply not re-emitted. */
.nev-tap-knot.nev-knot-just-changed {
    animation: nevKnotSeat .24s cubic-bezier(.34, 1.56, .64, 1) both;
}
.nev-tap-knot.nev-knot-just-changed::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1.5px solid var(--nev-knot-ping, var(--dr-crema, #FFF7EE));
    animation: nevKnotPing .5s ease-out both;
    pointer-events: none;
}
.nev-tap-knot.nev-knot-to-accepted::after { --nev-knot-ping: var(--dr-teal, #4CC4B4); }
.nev-tap-knot.nev-knot-to-conflict::after,
.nev-tap-knot.nev-knot-to-apply_failed::after { --nev-knot-ping: var(--dr-scarlet, #C44C4C); }
.nev-tap-knot.nev-knot-to-conflict.nev-knot-just-changed,
.nev-tap-knot.nev-knot-to-apply_failed.nev-knot-just-changed {
    animation: nevKnotShake .3s ease-in-out both;
}
@keyframes nevKnotSeat { 0% { transform: scale(1.28); } 62% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes nevKnotPing { from { transform: scale(1); opacity: .7; } to { transform: scale(2.4); opacity: 0; } }
@keyframes nevKnotShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-1.5px); } 80% { transform: translateX(1.5px); } }
.nev-tap-knot .kl {
    position: absolute;
    left: 50%;
    top: 24px;
    transform: translateX(-50%);
    font: 8px/1 inherit;
    color: var(--dr-mocha, #8B7355);
    white-space: nowrap;
    pointer-events: none;
}
.nev-tap-knot:focus-visible,
.nev-tap-phase:focus-visible { outline: 1px solid var(--dr-teal, #4CC4B4); outline-offset: 2px; }

/* Divergence 1 — inline-at-knot action popover. Markup is emitted only
 * when the nested __ENABLE_NEV_INLINE_ACTIONS + takeover + tapestry flag
 * chain is true. The popover is inserted as a board-flow sibling after
 * the lane row, not a floating overlay, so it pushes later lanes down. */
.nev-tap-knot-popover {
    border-bottom: 1px solid rgba(107, 86, 74, .42);
    border-left: 3px solid var(--dr-brass, #BFA162);
    background: rgba(18, 12, 6, .64);
    padding: 10px 12px 10px 160px;
    display: grid;
    gap: 8px;
}
.nev-tap-pop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.nev-tap-pop-title {
    font: 11px/1.2 inherit;
    color: var(--dr-crema, #FFF7EE);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nev-tap-pop-cat,
.nev-tap-pop-status {
    border: 1px solid rgba(191, 161, 98, .36);
    color: var(--dr-brass, #BFA162);
    background: rgba(42, 28, 19, .55);
    border-radius: 2px;
    padding: 2px 5px;
    font: 8px/1 inherit;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.nev-tap-pop-x {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(107, 86, 74, .58);
    background: transparent;
    color: var(--dr-mocha, #8B7355);
    cursor: pointer;
}
.nev-tap-cf {
    border: 1px solid rgba(196, 76, 76, .38);
    background: rgba(196, 76, 76, .07);
}
.nev-tap-cf-head {
    display: flex;
    gap: 7px;
    padding: 7px 8px;
    border-bottom: 1px solid rgba(196, 76, 76, .28);
    color: var(--dr-bone, #EBE1D7);
}
.nev-tap-cf-marker {
    color: var(--dr-scarlet, #C44C4C);
    font: 8px/1.2 inherit;
    letter-spacing: .08em;
}
.nev-tap-cf-msg { font: 9px/1.25 inherit; }
.nev-tap-cf-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 6px 8px;
    border-top: 1px solid rgba(107, 86, 74, .32);
    font: 9px/1.25 inherit;
}
.nev-tap-cf-label { color: var(--dr-brass, #BFA162); }
.nev-tap-cf-val { color: var(--dr-bone, #EBE1D7); }
.nev-tap-cf-meta { color: var(--dr-mocha, #8B7355); }
.nev-tap-pop-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.nev-tap-pop-btn {
    border: 1px solid rgba(107, 86, 74, .62);
    background: rgba(30, 20, 14, .72);
    color: var(--dr-bone, #EBE1D7);
    border-radius: 2px;
    padding: 5px 8px;
    font: 9px/1 inherit;
    cursor: pointer;
}
.nev-tap-pop-btn.accept,
.nev-tap-pop-btn.ehr { border-color: rgba(76, 196, 180, .55); color: var(--dr-teal, #4CC4B4); }
.nev-tap-pop-btn.doctor,
.nev-tap-pop-btn.secondary { border-color: rgba(191, 161, 98, .50); color: var(--dr-brass, #BFA162); }
.nev-tap-pop-btn.reject { border-color: rgba(196, 76, 76, .55); color: var(--dr-scarlet, #C44C4C); }
/* U5 ledger-knot popover: amber accent (matches the Δ glyph) + a delta line
 * showing {old}→{new}. The arrow color encodes trajectory (KTD11) — worsening
 * scarlet, improving teal, neutral mocha — so the doctor reads direction
 * pre-attentively, with no interpretation text. */
.nev-tap-knot-popover.ledger { border-left-color: var(--dr-amber, #E69A4C); }
.nev-tap-pop-delta {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 10px/1.3 inherit;
    color: var(--dr-bone, #EBE1D7);
}
.nev-tap-arrow { font-weight: 700; }
.nev-tap-arrow.worse { color: var(--dr-scarlet, #C44C4C); }
.nev-tap-arrow.better { color: var(--dr-teal, #4CC4B4); }
.nev-tap-arrow.neutral { color: var(--dr-mocha, #8B7355); }
.nev-tap-pop-btn:hover,
.nev-tap-pop-x:hover { background: rgba(255, 247, 238, .06); }

/* Knot -> note FOCUS overlay (Sprint 1 Phase 2). Set by
 * NoteEvolutionWorkspace.focusProblemBlock as data-nev-focus on
 * .nev-bn-problem. CSS-only; never set unless a tapestry knot is
 * clicked (caller gated behind __ENABLE_EPISODE_TAPESTRY), so the
 * rail/one-shot render is unaffected. FOCUS, not zoom — opacity +
 * accent only, no transform/scale. */
.nev-bn-problem[data-nev-focus="dim"] {
    opacity: .42;
    transition: opacity .16s ease;
}
.nev-bn-problem[data-nev-focus="active"] {
    opacity: 1;
    outline: 1px solid rgba(255, 247, 238, .5);
    outline-offset: -1px;
    background: rgba(42, 28, 19, .55);
    transition: opacity .16s ease;
}

/* Phase 3 — block ribbon + today's-log (foot of the tapestry pane). */
.nev-tap-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.nev-tap-foot-h {
    font: 8px/1.2 inherit;
    color: var(--dr-brass, #BFA162);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.nev-tap-ribbon,
.nev-tap-log {
    border: 1px solid rgba(107, 86, 74, .58);
    background: rgba(18, 12, 6, .48);
    padding: 8px;
    min-height: 96px;
    max-height: 200px;
    overflow: auto;
}
.nev-tap-rib {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    gap: 6px;
    align-items: center;
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(107, 86, 74, .32);
    background: transparent;
    color: var(--dr-bone, #EBE1D7);
    padding: 6px 4px;
    text-align: left;
    cursor: pointer;
}
.nev-tap-rib:last-child { border-bottom: 0; }
.nev-tap-rib:hover { background: rgba(255, 247, 238, .05); }
.nev-tap-rib .rk { width: 8px; height: 16px; background: var(--dr-crater, #6B564A); }
.nev-tap-rib .rl {
    font: 9px/1.15 inherit;
    color: var(--dr-bone, #EBE1D7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nev-tap-rib .rs {
    font: 8px/1 inherit;
    color: var(--dr-mocha, #8B7355);
    text-transform: uppercase;
}
.nev-tap-rib.pending .rk { background: var(--dr-amber, #E69A4C); }
.nev-tap-rib.accepted .rk { background: var(--dr-teal, #4CC4B4); }
.nev-tap-rib.edited .rk { background: var(--dr-violet, #A989D6); }
.nev-tap-rib.conflict .rk { background: var(--dr-scarlet, #C44C4C); }
.nev-tap-rib.blocked .rk {
    background: var(--dr-scarlet, #C44C4C);
    background-image: repeating-linear-gradient(
        45deg, transparent 0 3px, rgba(0, 0, 0, .28) 3px 5px);
}
.nev-tap-logrow {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 6px;
    align-items: start;
    font: 9px/1.3 inherit;
    color: var(--dr-bone, #EBE1D7);
    border-bottom: 1px solid rgba(107, 86, 74, .3);
    padding: 5px 0;
}
.nev-tap-logrow:last-child { border-bottom: 0; }
.nev-tap-logrow.muted { color: var(--dr-mocha, #8B7355); }
.nev-tap-logrow .t { color: var(--dr-brass, #BFA162); }
.nev-tap-revert {
    border: 1px solid rgba(191, 161, 98, .42);
    background: rgba(18, 12, 6, .5);
    color: var(--dr-bone, #EBE1D7);
    font: 8px/1 inherit;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 5px;
    cursor: pointer;
    border-radius: 2px;
}
.nev-tap-revert:hover { color: var(--dr-crema, #FFF7EE); border-color: rgba(255, 247, 238, .6); }
.nev-tap-rib:focus-visible,
.nev-tap-revert:focus-visible { outline: 1px solid var(--dr-teal, #4CC4B4); outline-offset: 2px; }

@media (max-width: 1100px) {
    .nev-tap-foot { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .nev-tap-knot.pulse { animation: none; }
    .nev-tap-knot.nev-knot-just-changed { animation: none; }
    .nev-tap-knot.nev-knot-just-changed::after { animation: none; content: none; }
    .nev-bn-problem[data-nev-focus] { transition: none; }
}