/**
 * jerry_intent_panel_v4.css — Jerry Intents panel (roadmap §31).
 *
 * THEME CONTRACT (scripts/check-theme-tokens): the header is a FIXED-dark
 * gradient in both themes, so everything painted on it uses --jt-on-dark-*.
 * Everything below the header sits on themed surfaces (--jt-bg-*) and therefore
 * uses the flipping --jt-text-* / --jt-accent-* family. Do not mix the two.
 */

/* ── Panel shell ─────────────────────────────────────────────────────────── */
.jip-panel {
    position: fixed;
    z-index: 10040;
    display: flex;
    flex-direction: column;
    width: 400px;
    max-width: calc(100vw - 24px);
    max-height: min(78vh, 860px);
    background: var(--jt-bg-deep);
    border: 1px solid var(--jt-border-primary);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    font-size: 14px;
}

/* ── Header — FIXED dark gradient: --jt-on-dark-* only ───────────────────── */
.jip-header {
    background: var(--jt-gradient-primary);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: move;
    flex: none;
}
.jip-mark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--jt-on-dark-bg-active);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--jt-on-dark-text-bright);
    flex: none;
}
.jip-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--jt-on-dark-text-bright);
    margin: 0;
    line-height: 1.25;
}
.jip-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--jt-on-dark-text-dim);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jip-close {
    background: none;
    border: none;
    color: var(--jt-on-dark-text-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 5px;
}
.jip-close:hover { color: var(--jt-on-dark-text-bright); background: var(--jt-on-dark-bg-hover); }

/* ── "Where you stand" strip ─────────────────────────────────────────────── */
.jip-stand {
    padding: 9px 14px;
    border-bottom: 1px solid var(--jt-border-muted);
    background: var(--jt-accent-purple-hover-bg);
    flex: none;
}
.jip-stand-label {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jt-text-muted);
    margin-bottom: 4px;
}
.jip-stand-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.jip-phase {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--jt-bg-tertiary);
    color: var(--jt-text-primary);
}
.jip-stat { font-size: 11.5px; color: var(--jt-text-secondary); }
.jip-stat b { color: var(--jt-text-primary); font-weight: 600; }
.jip-dot { color: var(--jt-text-muted); font-size: 10px; }

/* ── Body ────────────────────────────────────────────────────────────────── */
.jip-body {
    padding: 11px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow-y: auto;
    flex: 1;
}
.jip-group {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* -secondary, not -muted: 10px muted on --jt-bg-deep is 4.41:1 in light,
       under AA. Same measurement as .jip-pos below. */
    color: var(--jt-text-secondary);
    margin: 2px 0 -2px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.jip-group::after { content: ""; flex: 1; height: 1px; background: var(--jt-border-muted); }

/* ── Finding card ────────────────────────────────────────────────────────── */
.jip-card {
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-border-primary);
    border-radius: 10px;
    padding: 9px 11px 10px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.jip-bullet {
    width: 19px;
    flex: none;
    display: grid;
    place-items: center;
    margin-top: 2px;
    font-size: 11px;
    color: var(--jt-text-muted);
}
.jip-cc { flex: 1; min-width: 0; }
.jip-headline { font-size: 12.5px; font-weight: 700; line-height: 1.35; margin: 0 0 3px; color: var(--jt-text-primary); }
.jip-why { font-size: 11.5px; color: var(--jt-text-secondary); line-height: 1.45; margin: 0; }

.jip-ev { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.jip-ev span {
    font-size: 10px;
    color: var(--jt-text-muted);
    background: var(--jt-bg-deep);
    border: 1px solid var(--jt-border-muted);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}
.jip-ev span b { color: var(--jt-text-secondary); font-weight: 600; }

.jip-cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid var(--jt-border-secondary);
    background: var(--jt-bg-tertiary);
    color: var(--jt-text-primary);
    cursor: pointer;
}
.jip-cta:hover { border-color: var(--jt-accent-purple); }

/* ── Hosted mode — `choose` inside the comparison modal's split pane ─────── */
/* The modal owns the chrome, so the panel drops its own frame and fills the pane. */
.jip-panel--hosted {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.jip-panel--hosted .jip-header { cursor: default; }
.jip-panel--hosted .jip-close { display: none; }

/* ── propose · the trade lines ───────────────────────────────────────────── */
.jip-tl {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 6px 0 0;
    padding: 7px 9px;
    background: var(--jt-bg-deep);
    border: 1px solid var(--jt-border-muted);
    border-radius: 7px;
}
.jip-tline { display: flex; gap: 7px; font-size: 11.5px; align-items: baseline; }
.jip-dir {
    font-size: 9px; font-weight: 800; letter-spacing: 0.03em;
    width: 34px; flex: none; padding-top: 1px;
}
.jip-dir.out { color: var(--jt-accent-red); }
.jip-dir.in  { color: var(--jt-accent-green); }
.jip-pl { color: var(--jt-text-primary); font-weight: 600; min-width: 0; }
/* --jt-text-secondary, not -muted: muted on --jt-bg-deep measures 4.41:1 in
   light mode, under AA for 10px text. check-theme-tokens validates token FAMILY
   pairing, not numeric contrast on flat surfaces, so this one is measured by hand. */
.jip-pos { color: var(--jt-text-secondary); font-weight: 700; font-size: 10px; }
.jip-partner {
    font-size: 10.5px;
    color: var(--jt-text-secondary);   /* see .jip-pos — muted fails AA here in light */
    margin-top: 4px;
    padding-top: 5px;
    border-top: 1px solid var(--jt-border-muted);
}
.jip-partner b { color: var(--jt-text-primary); }

/* ── choose · grid verdict strip ─────────────────────────────────────────── */
.jip-verdict {
    padding: 10px 14px;
    border-bottom: 1px solid var(--jt-border-muted);
    background: var(--jt-accent-purple-hover-bg);
    flex: none;
}
.jip-vrow { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.jip-vrow:last-child { margin-bottom: 0; }
.jip-vname {
    font-size: 12px; font-weight: 600; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--jt-text-primary);
}
.jip-vbar {
    width: 96px; height: 6px; border-radius: 3px; flex: none;
    background: var(--jt-bg-tertiary); overflow: hidden;
}
.jip-vbar i { display: block; height: 100%; border-radius: 3px; background: var(--jt-accent-blue); }
.jip-vgrade {
    font-size: 11px; font-weight: 800; width: 54px; text-align: right; flex: none;
    font-variant-numeric: tabular-nums; color: var(--jt-text-secondary);
}
.jip-vwin {
    font-size: 9px; font-weight: 800; letter-spacing: 0.04em; padding: 1px 5px;
    border-radius: 3px; flex: none;
    background: var(--jt-bg-tertiary); color: var(--jt-accent-green);
}
.jip-vpad { width: 38px; flex: none; }

/* ── choose · factor deltas ──────────────────────────────────────────────── */
.jip-deltas {
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-border-primary);
    border-radius: 10px;
    padding: 9px 11px;
}
.jip-dl {
    font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--jt-text-muted); margin-bottom: 6px;
}
.jip-drow { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 2.5px 0; }
.jip-dk { flex: 1; min-width: 0; color: var(--jt-text-secondary); }
.jip-dbar { width: 120px; height: 4px; position: relative; flex: none; }
/* Centre line = parity. Bars grow right for the winner, left for the runner-up. */
.jip-dbar::before {
    content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px;
    width: 1px; background: var(--jt-border-secondary);
}
.jip-dbar i { position: absolute; top: 0; height: 4px; border-radius: 2px; }
.jip-dbar i.pos { background: var(--jt-accent-green); }
.jip-dbar i.neg { background: var(--jt-accent-red); }
.jip-dv {
    width: 34px; text-align: right; font-weight: 700; flex: none; font-size: 11px;
    font-variant-numeric: tabular-nums;
    /* Base colour matters: the propose empty-state renders .jip-dv with NO
       .pos/.neg modifier, so without this it inherited from an ancestor that
       sets none and went unreadable in light mode. */
    color: var(--jt-text-primary);
}
.jip-dv.pos { color: var(--jt-accent-green); }
.jip-dv.neg { color: var(--jt-accent-red); }
.jip-dfoot {
    font-size: 10.5px; color: var(--jt-text-muted);
    margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--jt-border-muted);
}

/* ── choose · tie-band disclosure ────────────────────────────────────────── */
/* Shown ONLY when Jerry picked against the grid. The rule is that he must say
   the gap is inside the margin — this is that sentence, not a decoration. */
.jip-tieband {
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-accent-amber);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--jt-text-secondary);
}

/* ── choose · the three answer cards ─────────────────────────────────────── */
.jip-card--flip { border-left: 3px solid var(--jt-accent-amber); }
.jip-card--cost { border-left: 3px solid var(--jt-border-secondary); }
.jip-klab {
    font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 800; margin-bottom: 4px;
}
.jip-klab--flip { color: var(--jt-accent-amber); }
.jip-klab--cost { color: var(--jt-text-muted); }
.jip-ctas { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.jip-cta--main {
    background: var(--jt-accent-purple);
    border-color: var(--jt-accent-purple);
    color: var(--jt-on-dark-text-bright);
}
.jip-cta--main:hover { background: var(--jt-accent-purple-hover); border-color: var(--jt-accent-purple-hover); }

/* ── Ranked state (Jerry) ────────────────────────────────────────────────── */
.jip-card--act { border-left: 3px solid var(--jt-accent-purple); }
.jip-card--first {
    border-color: var(--jt-accent-purple);
    background: var(--jt-accent-purple-hover-bg);
}
.jip-num {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--jt-bg-tertiary);
    color: var(--jt-text-secondary);
    font-size: 10.5px;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex: none;
    margin-top: 1px;
}
/* The lead card's numeral sits on solid purple — fixed dark, so on-dark text. */
.jip-card--first .jip-num {
    background: var(--jt-accent-purple);
    color: var(--jt-on-dark-text-bright);
}

/* "Leave this alone" — the block that subtracts from the to-do list. */
.jip-calm {
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-accent-green);
    border-radius: 10px;
    padding: 9px 11px;
}
.jip-calm-label {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jt-accent-green);
    margin-bottom: 5px;
    font-weight: 700;
}
.jip-calm p {
    margin: 0 0 5px;
    font-size: 11.5px;
    color: var(--jt-text-secondary);
    line-height: 1.45;
    padding-left: 14px;
    position: relative;
}
.jip-calm p:last-child { margin-bottom: 0; }
.jip-calm p::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--jt-accent-green);
    font-size: 10px;
}
.jip-calm p b { color: var(--jt-text-primary); }

/* ── Thinking strip ──────────────────────────────────────────────────────── */
.jip-think {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--jt-text-secondary);
    padding: 7px 10px;
    background: var(--jt-bg-secondary);
    border: 1px dashed var(--jt-border-secondary);
    border-radius: 8px;
}
.jip-spin {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--jt-accent-purple);
    border-top-color: transparent;
    animation: jip-spin 0.8s linear infinite;
    flex: none;
}
@keyframes jip-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .jip-spin { animation-duration: 2.4s; }
}

/* Ranking failed — a missing bonus, not a broken panel, so it is deliberately
   quieter than .jip-warn. The findings below it are unchanged and correct. */
.jip-note {
    font-size: 11px;
    color: var(--jt-text-muted);
    line-height: 1.45;
    padding: 7px 10px;
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-border-primary);
    border-radius: 8px;
}
.jip-retry {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--jt-accent-blue);
    cursor: pointer;
}
.jip-retry:hover { color: var(--jt-accent-blue-hover); }

/* ── All-clear ───────────────────────────────────────────────────────────── */
.jip-clear { text-align: center; padding: 14px 10px 6px; }
.jip-clear-icon { font-size: 26px; margin-bottom: 4px; }
.jip-clear h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--jt-text-primary); }
.jip-clear p { margin: 0; font-size: 11.5px; color: var(--jt-text-secondary); line-height: 1.45; }

/* ── Degraded banner ─────────────────────────────────────────────────────── */
.jip-warn {
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-accent-red);
    border-radius: 10px;
    padding: 8px 11px;
    font-size: 11.5px;
    color: var(--jt-text-secondary);
    line-height: 1.45;
}
.jip-warn b { color: var(--jt-accent-red-hover); }

/* ── Upgrade / lock ──────────────────────────────────────────────────────── */
.jip-lock {
    background: var(--jt-bg-secondary);
    border: 1px solid var(--jt-accent-purple);
    border-radius: 10px;
    padding: 10px 12px;
}
.jip-lock h4 {
    margin: 0 0 3px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--jt-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.jip-lock p { margin: 0; font-size: 11.5px; color: var(--jt-text-secondary); line-height: 1.45; }
.jip-lock-btn {
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 7px;
    background: var(--jt-accent-purple);
    color: var(--jt-on-dark-text-bright);
    border: none;
    cursor: pointer;
}
.jip-lock-btn:hover { background: var(--jt-accent-purple-hover); }
.jip-pro-chip {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--jt-bg-tertiary);
    color: var(--jt-accent-amber-hover);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.jip-footer {
    border-top: 1px solid var(--jt-border-muted);
    padding: 7px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: var(--jt-text-muted);
    background: var(--jt-bg-primary);
    flex: none;
}
.jip-refresh {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--jt-text-secondary);
    cursor: pointer;
    font-weight: 600;
    font-size: 10.5px;
    padding: 0;
}
.jip-refresh:hover { color: var(--jt-text-primary); }

/* ── Mobile: bottom sheet ────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .jip-panel {
        left: 0 !important;
        right: 0;
        bottom: 0;
        top: auto !important;
        width: 100%;
        max-width: 100%;
        max-height: 82vh;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
    }
    .jip-header { cursor: default; }
}