/* ==========================================================================
   REASONING TREE — v3 SURFACES (Argument View takeover + lane strip/drawer)

   EXTRACTION (2026-08-19): these rules were previously injected at runtime
   from JS string literals (argument-view.js:_injectStyle,
   rt-lane-overlay.js:_injectStyle) — an unversioned second source of truth
   with the parchment fallback palette baked into JS. They now live here,
   load via static_url cache-busting, and consume the shared --rt-* token
   block (defined in reasoning-tree.css on #rtArgumentView / .rt-lane-badge /
   .rt-diff-strip / .rt-diff-drawer), which chains --dr-* → --term-* → DR hex.

   IDIOM: Dark Roast takeover contract (see note-evolution-takeover.css):
   1px hairline borders, ≤2px radius, no drop shadows, no backdrop-filter,
   warm-coffee scanline overlay, eyebrow+title header, mono uppercase ghost
   buttons. Interactive accents match the takeover (amber family); epistemic
   status colors follow the theme via --rt-*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared epistemic-status color vocabulary (glyphs, leads, ledger, sparkline)
   -------------------------------------------------------------------------- */

#rtArgumentView .rt-av-confirmed { color: var(--rt-confirmed); }
#rtArgumentView .rt-av-active { color: var(--rt-accent); }
#rtArgumentView .rt-av-deferred { color: var(--rt-deferred); }
#rtArgumentView .rt-av-superseded { color: var(--rt-superseded); }
#rtArgumentView .rt-av-pruned { color: var(--rt-ink-muted); }

.rt-diff-strip .rt-diff-confirmed,
.rt-diff-drawer .rt-diff-confirmed { color: var(--rt-confirmed); }
.rt-diff-strip .rt-diff-active,
.rt-diff-drawer .rt-diff-active { color: var(--rt-accent); }
.rt-diff-strip .rt-diff-deferred,
.rt-diff-drawer .rt-diff-deferred { color: var(--rt-deferred); }
.rt-diff-strip .rt-diff-superseded,
.rt-diff-drawer .rt-diff-superseded { color: var(--rt-superseded); }
.rt-diff-strip .rt-diff-pruned,
.rt-diff-drawer .rt-diff-pruned { color: var(--rt-ink-muted); }

/* ==========================================================================
   ARGUMENT VIEW — full-picture takeover (ENABLE_RT_ARGUMENT_VIEW)
   ========================================================================== */

#rtArgumentView {
    position: fixed;
    inset: 0;
    z-index: var(--dr-z-modal, 500);
    background: var(--dr-void, var(--term-bg-void, #120C06));
    color: var(--rt-ink-secondary);
    display: flex;
    flex-direction: column;
    font-family: var(--rt-font-body);
    font-size: var(--dr-text-sm, 0.75rem);
    line-height: 1.45;
    overflow: hidden;
}

/* Warm-coffee scanline, pinned to the surface (same register as the NE
   takeover); content sits above it via .rt-av-chrome z-index. */
#rtArgumentView::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(230, 154, 76, 0.012) 0,
            rgba(230, 154, 76, 0.012) 1px,
            transparent 1px,
            transparent 3px
        );
    z-index: 1;
}

#rtArgumentView .rt-av-chrome {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#rtArgumentView .rt-av-loading,
#rtArgumentView .rt-av-empty {
    margin: auto;
    color: var(--rt-ink-muted);
    font-family: var(--rt-font-mono);
    font-size: var(--dr-text-sm, 0.75rem);
}

/* — Header strip: eyebrow + title + ledger + tabs + close — */

#rtArgumentView .rt-av-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 10px;
    background: var(--rt-bg);
    border-bottom: 1px solid var(--rt-border);
}

#rtArgumentView .rt-av-title {
    font-family: var(--dr-font-heading, 'Instrument Sans', -apple-system, sans-serif);
    font-size: var(--dr-text-base, 0.875rem);
    font-weight: 600;
    color: var(--rt-ink);
    letter-spacing: var(--dr-tracking-wide, 0.05em);
    white-space: nowrap;
}

#rtArgumentView .rt-av-title .rt-av-marker {
    display: inline-block;
    margin-right: 8px;
    font-family: var(--rt-font-mono);
    font-size: var(--dr-text-xs, 0.625rem);
    font-weight: 400;
    color: var(--dr-amber, #E69A4C);
    letter-spacing: var(--dr-tracking-widest, 0.20em);
    text-transform: uppercase;
}

#rtArgumentView .rt-av-ledger {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex: 1;
    flex-wrap: wrap;
    font-family: var(--rt-font-mono);
    font-size: var(--dr-text-xs, 0.625rem);
    letter-spacing: var(--dr-tracking-wide, 0.05em);
}

#rtArgumentView .rt-av-dot { color: var(--rt-ink-muted); }
#rtArgumentView .rt-av-led { white-space: nowrap; }

/* — Ghost buttons (tabs, classic link, close): transparent, 1px hairline,
     mono uppercase, amber hover — the takeover button contract. — */

#rtArgumentView .rt-av-tabs { display: flex; gap: 4px; }

#rtArgumentView .rt-av-tab {
    background: transparent;
    border: 1px solid var(--rt-border-strong);
    border-radius: 2px;
    color: var(--rt-ink-secondary);
    font-family: var(--rt-font-mono);
    font-size: var(--dr-text-xs, 0.625rem);
    letter-spacing: var(--dr-tracking-wide, 0.05em);
    text-transform: uppercase;
    padding: 4px 10px;
    cursor: pointer;
    transition: border-color 120ms var(--dr-easing, cubic-bezier(0.4, 0, 0.2, 1)),
                color 120ms var(--dr-easing, cubic-bezier(0.4, 0, 0.2, 1));
}

#rtArgumentView .rt-av-tab:hover { border-color: var(--dr-amber, #E69A4C); color: var(--rt-ink); }

#rtArgumentView .rt-av-tab.on {
    color: var(--dr-amber, #E69A4C);
    border-color: var(--dr-amber, #E69A4C);
    background: var(--dr-amber-subtle, rgba(230, 154, 76, 0.10));
}

#rtArgumentView .rt-av-tab:focus-visible {
    outline: 2px solid var(--dr-amber, #E69A4C);
    outline-offset: 2px;
}

#rtArgumentView .rt-av-tab[disabled] { opacity: 0.45; cursor: not-allowed; }
#rtArgumentView .rt-av-tab[disabled]:hover { border-color: var(--rt-border-strong); color: var(--rt-ink-secondary); }

#rtArgumentView .rt-av-classic {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--rt-ink-muted);
    font-family: var(--rt-font-mono);
    font-size: var(--dr-text-xs, 0.625rem);
    letter-spacing: var(--dr-tracking-wide, 0.05em);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

#rtArgumentView .rt-av-classic:hover { color: var(--rt-ink); }

#rtArgumentView .rt-av-close {
    background: transparent;
    border: 1px solid var(--rt-border);
    border-radius: 2px;
    color: var(--rt-ink-secondary);
    font-family: var(--rt-font-mono);
    font-size: var(--dr-text-sm, 0.75rem);
    padding: 4px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 120ms var(--dr-easing, cubic-bezier(0.4, 0, 0.2, 1)),
                color 120ms var(--dr-easing, cubic-bezier(0.4, 0, 0.2, 1));
}

#rtArgumentView .rt-av-close:hover {
    border-color: var(--dr-amber, #E69A4C);
    color: var(--rt-ink);
}

#rtArgumentView .rt-av-close:focus-visible {
    border-color: var(--dr-amber, #E69A4C);
    color: var(--rt-ink);
    outline: 2px solid var(--dr-amber, #E69A4C);
    outline-offset: 2px;
}

#rtArgumentView .rt-av-close .rt-av-close-key {
    font-size: 0.5625rem;
    color: var(--rt-ink-muted);
    letter-spacing: var(--dr-tracking-wider, 0.10em);
}

/* — Body: four epistemic-status columns — */

#rtArgumentView .rt-av-body { flex: 1; overflow: auto; padding: 12px 14px; }
#rtArgumentView .rt-av-hidden { display: none; }

#rtArgumentView .rt-av-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

@media (max-width: 1100px) {
    #rtArgumentView .rt-av-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    #rtArgumentView .rt-av-grid { grid-template-columns: minmax(0, 1fr); }
}

#rtArgumentView .rt-av-col-h {
    font-family: var(--rt-font-mono);
    font-size: var(--dr-text-xs, 0.625rem);
    text-transform: uppercase;
    letter-spacing: var(--dr-tracking-wider, 0.10em);
    color: var(--rt-ink-muted);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rt-border);
    display: flex;
    gap: 6px;
    align-items: baseline;
}

#rtArgumentView .rt-av-col-n { color: var(--rt-ink-secondary); }
#rtArgumentView .rt-av-none { color: var(--rt-border-strong); padding: 6px 2px; }

/* — Hypothesis card: hairline, square, no shadow — */

#rtArgumentView .rt-av-card {
    background: var(--rt-bg);
    border: 1px solid var(--rt-border);
    border-radius: 2px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

#rtArgumentView .rt-av-card-pruned,
#rtArgumentView .rt-av-card-superseded { opacity: 0.62; }

#rtArgumentView .rt-av-eyebrow {
    font-family: var(--rt-font-mono);
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: var(--dr-tracking-wider, 0.10em);
    color: var(--rt-ink-muted);
    margin-bottom: 3px;
}

#rtArgumentView .rt-av-hypo {
    font-family: var(--dr-font-heading, 'Instrument Sans', -apple-system, sans-serif);
    color: var(--rt-ink);
    font-weight: 600;
    font-size: var(--dr-text-sm, 0.75rem);
}

#rtArgumentView .rt-av-card-pruned .rt-av-hypo { text-decoration: line-through; font-weight: 400; }

/* Confidence: thin ink bar; null = dotted "unassessed" (missingness
   discipline: unknown is NOT average). Width is data-driven, set inline. */
#rtArgumentView .rt-av-conf {
    height: 3px;
    border-radius: 1px;
    margin: 7px 0 5px;
    background: var(--rt-bg-hover);
    overflow: hidden;
}

#rtArgumentView .rt-av-conf span {
    display: block;
    height: 100%;
    background: var(--rt-ink-secondary);
    border-radius: 1px;
}

#rtArgumentView .rt-av-conf.unassessed {
    background: none;
    border-bottom: 1px dotted var(--rt-ink-muted);
    height: 2px;
    border-radius: 0;
}

#rtArgumentView .rt-av-quote {
    font-style: italic;
    margin: 4px 0;
    padding-left: 8px;
    border-left: 2px solid var(--rt-border-strong);
}

#rtArgumentView .rt-av-await {
    color: var(--rt-deferred);
    font-style: italic;
    font-size: 0.6875rem;
}

#rtArgumentView .rt-av-meta {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-top: 5px;
    font-family: var(--rt-font-mono);
}

#rtArgumentView .rt-av-ev { font-size: var(--dr-text-xs, 0.625rem); color: var(--rt-ink-muted); }
#rtArgumentView .rt-av-spark { font-size: 0.5625rem; letter-spacing: 1px; }

/* Next-step chips: square ghost chips, never pills. */
#rtArgumentView .rt-av-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

#rtArgumentView .rt-av-step {
    padding: 1px 7px;
    border-radius: 2px;
    font-family: var(--rt-font-mono);
    font-size: 0.5625rem;
    letter-spacing: var(--dr-tracking-wide, 0.05em);
    border: 1px solid var(--rt-border-strong);
    color: var(--rt-ink-secondary);
}

#rtArgumentView .rt-av-step-dx { border-color: var(--rt-accent-dim); color: var(--rt-accent); }
#rtArgumentView .rt-av-step-tx { border-color: var(--dr-gold-dim, rgba(218, 165, 32, 0.40)); color: var(--rt-gold); }
#rtArgumentView .rt-av-step-caution { border-color: var(--dr-scarlet-dim, rgba(196, 76, 76, 0.40)); color: var(--rt-refuting); }

/* — Pinned footer: mono status line, top hairline — */

#rtArgumentView .rt-av-foot {
    padding: 6px 14px;
    font-family: var(--rt-font-mono);
    font-size: var(--dr-text-xs, 0.625rem);
    letter-spacing: var(--dr-tracking-wide, 0.05em);
    color: var(--rt-ink-muted);
    border-top: 1px solid var(--rt-border);
    background: var(--rt-bg);
}

/* ==========================================================================
   LANE BADGE + DIFFERENTIAL STRIP + DRAWER (Tapestry / board decorators)
   ========================================================================== */

.rt-lane-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    padding: 0 6px;
    font-family: var(--rt-font-mono);
    font-size: var(--dr-text-xs, 0.625rem);
    line-height: 16px;
    border-radius: 2px;
    border: 1px solid var(--rt-border);
    color: var(--rt-ink-muted);
    background: transparent;
    user-select: none;
    pointer-events: auto;
    cursor: help;
    vertical-align: middle;
}

/* Quiet, theme-following register — informational, not a control. The
   strip/drawer follow whatever theme the tapestry is wearing. */
.rt-diff-strip {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    font-family: var(--rt-font-mono);
    font-size: 0.625rem;
    line-height: 1.35;
    color: var(--rt-ink-secondary);
    user-select: none;
    cursor: pointer;
    border-radius: 2px;
}

.rt-diff-strip:hover,
.rt-diff-strip:focus-visible {
    background: color-mix(in srgb, var(--rt-accent) 6%, transparent);
    outline: none;
}

.rt-diff-strip:focus-visible {
    outline: 1px solid var(--rt-accent-dim);
    outline-offset: 1px;
}

.rt-diff-strip[aria-expanded="true"] {
    background: var(--rt-accent-subtle);
}

.rt-diff-strip .rt-diff-glyph {
    margin-right: 3px;
    font-size: 0.5625rem;
}

.rt-diff-strip .rt-diff-lead { color: var(--rt-ink); }

.rt-diff-strip .rt-diff-chip {
    color: var(--rt-ink-muted);
    white-space: nowrap;
}

.rt-diff-strip .rt-diff-awaiting {
    color: var(--rt-deferred);
    font-style: italic;
    white-space: nowrap;
}

/* Day-sparkline glyphs. The `.chg` glow intentionally uses currentColor:
   each glyph glows in its OWN status color, so a fixed --dr-glow-* base
   would be wrong here. */
.rt-spark {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    white-space: nowrap;
}

.rt-spark-g { font-size: 0.53125rem; }
.rt-spark-g.chg { text-shadow: 0 0 4px currentColor; }

.rt-spark-label {
    margin-left: 4px;
    font-size: 0.5625rem;
    color: var(--rt-ink-muted);
}

/* — Evidence drawer (push-down under the lane, Tapestry ref-drawer idiom) — */

.rt-diff-drawer {
    margin: 2px 0 8px 0;
    padding: 10px 12px;
    background: var(--rt-bg);
    border: 1px solid var(--rt-border);
    border-radius: 2px;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--rt-ink-secondary);
}

.rt-diff-drawer .rt-dd-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.rt-diff-drawer .rt-dd-title {
    color: var(--rt-ink);
    font-family: var(--dr-font-heading, 'Instrument Sans', -apple-system, sans-serif);
    font-weight: 600;
    font-size: var(--dr-text-sm, 0.75rem);
    flex: 1;
    min-width: 200px;
}

.rt-diff-drawer .rt-dd-status {
    font-family: var(--rt-font-mono);
    font-size: var(--dr-text-xs, 0.625rem);
    text-transform: uppercase;
    letter-spacing: var(--dr-tracking-wide, 0.05em);
    color: var(--rt-ink-muted);
}

.rt-diff-drawer .rt-dd-close {
    background: transparent;
    border: 1px solid var(--rt-border);
    border-radius: 2px;
    color: var(--rt-ink-muted);
    font-family: var(--rt-font-mono);
    font-size: var(--dr-text-xs, 0.625rem);
    cursor: pointer;
    padding: 2px 8px;
    transition: border-color 120ms var(--dr-easing, cubic-bezier(0.4, 0, 0.2, 1)),
                color 120ms var(--dr-easing, cubic-bezier(0.4, 0, 0.2, 1));
}

.rt-diff-drawer .rt-dd-close:hover {
    border-color: var(--dr-amber, #E69A4C);
    color: var(--rt-ink);
}

.rt-diff-drawer .rt-dd-rationale {
    margin-bottom: 8px;
    font-style: italic;
    padding-left: 8px;
    border-left: 2px solid var(--rt-border-strong);
}

.rt-diff-drawer .rt-dd-sec { margin-bottom: 8px; }

.rt-diff-drawer .rt-dd-sec-h {
    font-family: var(--rt-font-mono);
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: var(--dr-tracking-wider, 0.10em);
    color: var(--rt-ink-muted);
    margin-bottom: 3px;
}

.rt-diff-drawer .rt-dd-for .rt-dd-sec-h { color: var(--rt-confirmed); }
.rt-diff-drawer .rt-dd-against .rt-dd-sec-h { color: var(--rt-refuting); }

.rt-diff-drawer ul { list-style: none; margin: 0; padding: 0; }

.rt-diff-drawer .rt-dd-ev {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 1px 0;
}

.rt-diff-drawer .rt-dd-ev.abn .rt-dd-val { color: var(--rt-deferred); }

.rt-diff-drawer .rt-dd-src {
    font-family: var(--rt-font-mono);
    font-size: 0.5625rem;
    letter-spacing: var(--dr-tracking-wide, 0.05em);
    color: var(--rt-ink-muted);
    min-width: 46px;
}

.rt-diff-drawer .rt-dd-val { color: var(--rt-ink); }
.rt-diff-drawer .rt-dd-more { color: var(--rt-ink-muted); font-size: var(--dr-text-xs, 0.625rem); }

.rt-diff-drawer .rt-dd-steps { display: flex; flex-wrap: wrap; gap: 4px; }

.rt-diff-drawer .rt-dd-step {
    padding: 1px 7px;
    border-radius: 2px;
    border: 1px solid var(--rt-border-strong);
    font-family: var(--rt-font-mono);
    font-size: 0.5625rem;
    letter-spacing: var(--dr-tracking-wide, 0.05em);
    color: var(--rt-ink-secondary);
}

.rt-diff-drawer .rt-dd-step-dx { border-color: var(--rt-accent-dim); color: var(--rt-accent); }
.rt-diff-drawer .rt-dd-step-tx { border-color: var(--dr-gold-dim, rgba(218, 165, 32, 0.40)); color: var(--rt-gold); }
.rt-diff-drawer .rt-dd-step-caution { border-color: var(--dr-scarlet-dim, rgba(196, 76, 76, 0.40)); color: var(--rt-refuting); }

.rt-diff-drawer .rt-dd-alt { padding: 1px 0; }
.rt-diff-drawer .rt-dd-alt.struck { text-decoration: line-through; opacity: 0.6; }
.rt-diff-drawer .rt-dd-alt em { color: var(--rt-ink-muted); }

.rt-diff-drawer .rt-dd-foot {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--rt-border);
    font-family: var(--rt-font-mono);
    font-size: 0.5625rem;
    letter-spacing: var(--dr-tracking-wide, 0.05em);
    color: var(--rt-ink-muted);
}