/**
 * draft_plan_ui_v4.css — the Draft Plan surface (roadmap §32).
 *
 * Shell mirrors historical_drafts_v4.css: body-mounted backdrop + centred
 * modal, MinimizablePanel chrome on the header, ReportActions in it. Every
 * colour is a theme token, including an explicit `color` on the modal — the
 * panel body-mounts, so anything it doesn't set inherits the host page's
 * ambient colour, which is black-on-black against this surface.
 */

#draftPlanModal .dpl-backdrop {
    position: fixed; inset: 0;
    background: var(--jt-overlay-bg);
    backdrop-filter: var(--jt-overlay-blur);
    z-index: 10000;
}
#draftPlanModal .dpl-shell {
    position: fixed; inset: 0; z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
#draftPlanModal .dpl-modal {
    pointer-events: auto;
    display: flex; flex-direction: column;
    width: min(920px, 96vw); height: min(820px, 92vh);
    min-width: 520px; min-height: 380px;
    background: var(--jt-modal-bg);
    color: var(--jt-text-primary);
    border: 1px solid var(--jt-modal-border);
    border-radius: 12px;
    box-shadow: var(--jt-modal-shadow);
    overflow: hidden;
}

#draftPlanModal .dpl-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--jt-bg-primary);
    border-bottom: 1px solid var(--jt-border-primary);
    flex: none;
}
#draftPlanModal .dpl-title  { font-weight: 800; font-size: 14px; white-space: nowrap; }
#draftPlanModal .dpl-league { color: var(--jt-text-secondary); font-size: 12px; }
#draftPlanModal .dpl-spacer { flex: 1; }
#draftPlanModal .dpl-close {
    background: none; border: 0; color: var(--jt-text-muted);
    font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 5px;
}
#draftPlanModal .dpl-close:hover { background: var(--jt-bg-hover); color: var(--jt-text-primary); }

/* ReportActions and the minimize button ship ON-DARK chrome, for report headers
   that are a gradient. This header is a plain surface, so in light theme they
   render white-on-pale and are genuinely hard to read. Flip them — same fix
   historical_drafts_v4.css and transactions_report_v4.css already carry. */
[data-theme="light"] #draftPlanModal .dpl-header .ra-btn,
[data-theme="light"] #draftPlanModal .dpl-header .ra-dl-trigger,
[data-theme="light"] #draftPlanModal .dpl-header .jt-mp-minimize-btn {
    background: var(--jt-bg-tertiary);
    color: var(--jt-text-secondary);
    border-color: var(--jt-border-primary);
}
[data-theme="light"] #draftPlanModal .dpl-header .ra-btn:hover,
[data-theme="light"] #draftPlanModal .dpl-header .ra-dl-trigger:hover,
[data-theme="light"] #draftPlanModal .dpl-header .jt-mp-minimize-btn:hover {
    background: var(--jt-bg-elevated);
    border-color: var(--jt-border-secondary);
    color: var(--jt-text-primary);
}

#draftPlanModal .dpl-body {
    flex: 1; overflow-y: auto; padding: 16px 18px 20px;
}

/* "Still being built" — for a SUBSCRIBER, so deliberately not the locked
   treatment. No dashed border, no upgrade button: a quiet note, not a pitch. */
#draftPlanModal .dpl-building {
    border: 1px solid var(--jt-border-primary);
    border-radius: 9px;
    padding: 11px 13px;
    background: var(--jt-bg-secondary);
}
#draftPlanModal .dpl-building-hd {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; color: var(--jt-text-muted);
}
#draftPlanModal .dpl-building ul { margin: 6px 0 0 16px; }
#draftPlanModal .dpl-building li {
    font-size: 12px; color: var(--jt-text-secondary); line-height: 1.65;
}
#draftPlanModal .dpl-building li i { color: var(--jt-text-muted); font-style: normal; }
#draftPlanModal .dpl-building p {
    font-size: 11.5px; color: var(--jt-text-muted); line-height: 1.6; margin-top: 7px;
}

/* ── The head: the one number ───────────────────────────────────────────── */
#draftPlanModal .dpl-head {
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-accent-green-border);
    border-radius: 12px;
    padding: 16px 18px;
}
#draftPlanModal .dpl-head-plain { border-color: var(--jt-border-secondary); }
#draftPlanModal .dpl-kick {
    font-size: 11.5px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase; color: var(--jt-accent-green-text);
}
#draftPlanModal .dpl-head-plain .dpl-kick { color: var(--jt-text-secondary); }
#draftPlanModal .dpl-big { font-size: 38px; font-weight: 800; line-height: 1.08; margin: 5px 0 2px; }
#draftPlanModal .dpl-big small { font-size: 15px; font-weight: 700; color: var(--jt-text-secondary); }
#draftPlanModal .dpl-head p {
    color: var(--jt-text-secondary); font-size: 12.5px; line-height: 1.6;
    margin-top: 7px; max-width: 64ch;
}
#draftPlanModal .dpl-dim { color: var(--jt-text-muted) !important; }

/* The arithmetic, shown. A bare number invites "says who?" */
#draftPlanModal .dpl-math {
    display: flex; flex-wrap: wrap; margin-top: 12px;
    background: var(--jt-bg-tertiary); border-radius: 8px; overflow: hidden;
}
#draftPlanModal .dpl-math > div {
    padding: 7px 13px; min-width: 92px;
    border-right: 1px solid var(--jt-border-muted);
}
#draftPlanModal .dpl-math > div:last-child { border-right: 0; }
#draftPlanModal .dpl-math i {
    display: block; font-style: normal; font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; color: var(--jt-text-muted);
}
#draftPlanModal .dpl-math b { font-size: 15px; font-weight: 800; }
#draftPlanModal .dpl-neg { color: var(--jt-accent-red-text); }
#draftPlanModal .dpl-math-out b { color: var(--jt-accent-green-text); }
#draftPlanModal .dpl-caveat {
    font-size: 11px; color: var(--jt-text-muted); margin-top: 9px; line-height: 1.6;
}

/* ── Sections ───────────────────────────────────────────────────────────── */
#draftPlanModal .dpl-sect { margin-top: 20px; }
#draftPlanModal .dpl-sect-hd {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
#draftPlanModal .dpl-sect-hd h2 { font-size: 13px; font-weight: 800; }
#draftPlanModal .dpl-why { color: var(--jt-text-muted); font-size: 11.5px; }
#draftPlanModal .dpl-tag {
    font-size: 8.5px; font-weight: 800; padding: 1px 6px;
    border-radius: 4px; letter-spacing: .4px; color: #fff;
}
#draftPlanModal .dpl-tag-pro   { background: var(--jt-gradient-pro); }
#draftPlanModal .dpl-tag-elite { background: var(--jt-gradient-elite); }

#draftPlanModal .dpl-item {
    background: var(--jt-bg-primary);
    border: 1px solid var(--jt-border-primary);
    border-radius: 9px; padding: 10px 12px; margin-bottom: 7px;
    display: flex; gap: 12px; align-items: flex-start;
}
#draftPlanModal .dpl-item-main { flex: 1; min-width: 0; }
#draftPlanModal .dpl-item-t { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
#draftPlanModal .dpl-item-d { color: var(--jt-text-secondary); font-size: 12px; line-height: 1.6; }
#draftPlanModal .dpl-ev {
    margin-top: 5px; font-size: 11px; color: var(--jt-text-muted); line-height: 1.6;
    border-left: 2px solid var(--jt-border-secondary); padding-left: 8px;
}
#draftPlanModal .dpl-empty {
    color: var(--jt-text-muted); font-size: 12px; padding: 10px 12px;
    border: 1px dashed var(--jt-border-primary); border-radius: 9px;
}

/* Chosen state — the plan is a document you work through. */
#draftPlanModal .dpl-kept      { border-color: var(--jt-accent-green-border); background: var(--jt-accent-green-bg); }
#draftPlanModal .dpl-maybe     { border-color: var(--jt-accent-amber-border); background: var(--jt-accent-amber-bg); }
#draftPlanModal .dpl-dismissed { opacity: .45; }

#draftPlanModal .dpl-kmd {
    display: flex; gap: 3px; flex: none;
    background: var(--jt-bg-tertiary); padding: 3px; border-radius: 7px;
}
#draftPlanModal .dpl-kmd button {
    background: none; border: 0; color: var(--jt-text-muted);
    font-size: 11px; font-weight: 700; padding: 4px 9px;
    border-radius: 5px; cursor: pointer; font-family: inherit;
}
#draftPlanModal .dpl-kmd button:hover { background: var(--jt-bg-hover); color: var(--jt-text-primary); }
#draftPlanModal .dpl-kmd button.on[data-v="keep"]    { background: var(--jt-accent-green-bg); color: var(--jt-accent-green-text); }
#draftPlanModal .dpl-kmd button.on[data-v="maybe"]   { background: var(--jt-accent-amber-bg); color: var(--jt-accent-amber-text); }
#draftPlanModal .dpl-kmd button.on[data-v="dismiss"] { background: var(--jt-accent-red-bg);   color: var(--jt-accent-red-text); }

/* Locked tease — blurring the ANSWER, not hiding the question. */
#draftPlanModal .dpl-locked { border-style: dashed; background: var(--jt-bg-secondary); }
#draftPlanModal .dpl-locked .dpl-item-t { color: var(--jt-text-secondary); }
#draftPlanModal .dpl-unlock {
    display: flex; align-items: center; gap: 9px; margin-top: 8px; flex-wrap: wrap;
}
#draftPlanModal .dpl-unlock span { font-size: 11px; color: var(--jt-text-muted); }
#draftPlanModal .dpl-up {
    font-size: 11px; font-weight: 800; padding: 4px 11px; border-radius: 6px;
    border: 0; cursor: pointer; font-family: inherit; color: #fff;
}
#draftPlanModal .dpl-up-pro   { background: var(--jt-gradient-pro); }
#draftPlanModal .dpl-up-elite { background: var(--jt-gradient-elite); }
#draftPlanModal .dpl-soon {
    font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    padding: 2px 7px; border-radius: 5px;
    background: var(--jt-accent-purple-bg); color: var(--jt-accent-purple-text);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
#draftPlanModal .dpl-foot {
    flex: none; padding: 9px 14px;
    background: var(--jt-bg-primary);
    border-top: 1px solid var(--jt-border-primary);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
#draftPlanModal .dpl-count { color: var(--jt-text-secondary); font-size: 12px; }
#draftPlanModal .dpl-count b { color: var(--jt-accent-green-text); }
#draftPlanModal .dpl-saved  { color: var(--jt-accent-green-text); }

/* Print: the plan is meant to be carried to the draft. Drop the chrome, keep
   the content, and let dismissed items disappear rather than print greyed. */
@media print {
    #draftPlanModal .dpl-backdrop,
    #draftPlanModal .dpl-close,
    #draftPlanModal .dpl-kmd,
    #draftPlanModal .dpl-actions-mount,
    #draftPlanModal .dpl-dismissed { display: none !important; }
    #draftPlanModal .dpl-shell { position: static; }
    #draftPlanModal .dpl-modal {
        width: auto; height: auto; border: 0; box-shadow: none; overflow: visible;
    }
    #draftPlanModal .dpl-body { overflow: visible; }
}

@media (max-width: 620px) {
    #draftPlanModal .dpl-modal { width: 100vw; height: 100vh; min-width: 0; border-radius: 0; }
    #draftPlanModal .dpl-item { flex-direction: column; gap: 8px; }
    #draftPlanModal .dpl-big { font-size: 30px; }
}