/*
 * Scoped presentation owner for the public AI Dossier surface.
 *
 * Every colour resolves from the active html[data-theme] token layer owned by
 * rewards-themes.css. This file deliberately contains no palette literal, so the
 * three product themes can never mix here and no retired palette can leak in.
 * The only literals are neutral black shadows and `transparent`, which carry no
 * theme identity. It does not select the Material Board, replay geometry or any
 * backend/runtime node.
 */

.tp-ai-dossier {
    --ai-surface: var(--tp-product-surface, var(--tp-color-surface));
    --ai-surface-2: var(--tp-product-surface-raised, var(--tp-color-surface-raised));
    --ai-surface-3: var(--tp-product-surface-soft, var(--tp-color-surface-soft));
    --ai-canvas: var(--tp-product-canvas, var(--tp-color-page));
    --ai-border: var(--tp-product-border, var(--tp-color-border));
    --ai-text: var(--tp-product-text, var(--tp-color-text));
    --ai-muted: var(--tp-product-muted, var(--tp-color-text-muted));
    --ai-accent: var(--tp-product-gold, var(--tp-color-primary));
    --ai-accent-hover: var(--tp-product-gold-hover, var(--tp-color-primary-hover));
    --ai-ok: var(--tp-product-success, var(--tp-color-success));
    --ai-warn: var(--tp-product-danger, var(--tp-color-danger));
    color: var(--ai-text);
}

.tp-ai-root {
    display: grid;
    gap: clamp(18px, 3vw, 30px);
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: clamp(12px, 2.5vw, 24px) clamp(12px, 3vw, 24px) calc(96px + env(safe-area-inset-bottom));
    min-width: 0;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.tp-ai-hero {
    border: 1px solid var(--ai-border);
    border-radius: 22px;
    background: linear-gradient(150deg, var(--ai-surface-2), var(--ai-surface));
    padding: clamp(18px, 3.5vw, 34px);
    min-width: 0;
}

.tp-ai-hero__kicker,
.tp-ai-section__kicker {
    margin: 0 0 6px;
    color: var(--ai-accent);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.tp-ai-hero__title {
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 4.4vw, 2.35rem);
    line-height: 1.15;
}

.tp-ai-hero__lede {
    margin: 0 0 20px;
    max-width: 62ch;
    color: var(--ai-muted);
    font-size: clamp(.94rem, 2.2vw, 1.02rem);
}

.tp-ai-hero__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

/* ── Facts ────────────────────────────────────────────────────────────── */

.tp-ai-fact {
    display: grid;
    gap: 3px;
    align-content: start;
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    background: var(--ai-surface);
    padding: 10px 12px;
    min-width: 0;
}

.tp-ai-fact__label {
    color: var(--ai-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tp-ai-fact__value {
    overflow-wrap: anywhere;
    font-size: .98rem;
}

.tp-ai-fact--ok .tp-ai-fact__value { color: var(--ai-ok); }
.tp-ai-fact--warn .tp-ai-fact__value { color: var(--ai-warn); }
.tp-ai-fact--accent .tp-ai-fact__value { color: var(--ai-accent); }

.tp-ai-factrow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

/* ── Strength estimate ────────────────────────────────────────────────── */

.tp-ai-estimate {
    margin-top: 18px;
    border: 1px solid color-mix(in srgb, var(--ai-accent) 42%, var(--ai-border));
    border-radius: 16px;
    background: color-mix(in srgb, var(--ai-accent) 10%, var(--ai-surface));
    padding: 14px 16px;
}

.tp-ai-estimate__label {
    display: block;
    color: var(--ai-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tp-ai-estimate__value {
    display: block;
    margin: 4px 0 8px;
    color: var(--ai-accent);
    font-size: clamp(1rem, 3vw, 1.32rem);
    line-height: 1.2;
}

.tp-ai-estimate__note {
    margin: 0;
    max-width: 68ch;
    color: var(--ai-muted);
    font-size: .88rem;
}

/* ── Sections ─────────────────────────────────────────────────────────── */

.tp-ai-section {
    border: 1px solid var(--ai-border);
    border-radius: 20px;
    background: var(--ai-surface);
    padding: clamp(16px, 3vw, 26px);
    min-width: 0;
}

.tp-ai-section__title {
    margin: 0 0 8px;
    font-size: clamp(1.12rem, 3vw, 1.4rem);
}

.tp-ai-section__lede {
    margin: 0 0 16px;
    max-width: 66ch;
    color: var(--ai-muted);
    font-size: .92rem;
}

/* ── Timeline ─────────────────────────────────────────────────────────── */

.tp-ai-timeline { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.tp-ai-timeline__item {
    border: 1px solid var(--ai-border);
    border-radius: 16px;
    background: var(--ai-surface-2);
    padding: 14px;
    min-width: 0;
}

.tp-ai-timeline__item.is-promoted {
    border-color: color-mix(in srgb, var(--ai-ok) 48%, var(--ai-border));
    background: color-mix(in srgb, var(--ai-ok) 8%, var(--ai-surface-2));
}

.tp-ai-timeline__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.tp-ai-timeline__index { font-weight: 800; }

/* ── Badges ───────────────────────────────────────────────────────────── */

.tp-ai-badge {
    border: 1px solid var(--ai-border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .06em;
    white-space: nowrap;
}

.tp-ai-badge--ok {
    border-color: color-mix(in srgb, var(--ai-ok) 55%, transparent);
    background: color-mix(in srgb, var(--ai-ok) 16%, var(--ai-surface));
    color: var(--ai-ok);
}

.tp-ai-badge--blocked {
    border-color: color-mix(in srgb, var(--ai-warn) 50%, transparent);
    background: color-mix(in srgb, var(--ai-warn) 14%, var(--ai-surface));
    color: var(--ai-warn);
}

.tp-ai-badge--unknown {
    border-color: color-mix(in srgb, var(--ai-accent) 44%, transparent);
    background: color-mix(in srgb, var(--ai-accent) 12%, var(--ai-surface));
    color: var(--ai-accent);
}

/* ── Score bar ────────────────────────────────────────────────────────── */

.tp-ai-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--ai-canvas);
    overflow: hidden;
}

.tp-ai-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--ai-accent);
    transition: width .3s ease;
}

.tp-ai-bar__fill.is-promoted { background: var(--ai-ok); }

/* The parity marker is the 50% line: below it a candidate is worse than the champion. */
.tp-ai-bar__parity {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--ai-text);
    opacity: .55;
}

/* ── Callouts and notes ───────────────────────────────────────────────── */

.tp-ai-callout {
    border: 1px solid color-mix(in srgb, var(--ai-warn) 40%, var(--ai-border));
    border-radius: 16px;
    background: color-mix(in srgb, var(--ai-warn) 10%, var(--ai-surface-2));
    padding: 14px 16px;
    margin-bottom: 14px;
}

.tp-ai-callout.is-ok {
    border-color: color-mix(in srgb, var(--ai-ok) 45%, var(--ai-border));
    background: color-mix(in srgb, var(--ai-ok) 10%, var(--ai-surface-2));
}

.tp-ai-callout__title {
    display: block;
    margin-bottom: 6px;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .07em;
}

.tp-ai-callout__body { margin: 0; max-width: 68ch; color: var(--ai-muted); font-size: .9rem; }

.tp-ai-note {
    margin: 10px 0 0;
    max-width: 68ch;
    color: var(--ai-muted);
    font-size: .84rem;
}

.tp-ai-empty {
    margin: 0;
    border: 1px dashed var(--ai-border);
    border-radius: 14px;
    background: var(--ai-surface-2);
    padding: 16px;
    color: var(--ai-muted);
    text-align: center;
}

/* ── Gates ────────────────────────────────────────────────────────────── */

.tp-ai-gates { display: grid; gap: 8px; }

.tp-ai-gate {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    background: var(--ai-surface-2);
    padding: 11px 13px;
    min-width: 0;
}

.tp-ai-gate__status {
    border-radius: 999px;
    padding: 3px 9px;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .05em;
    white-space: nowrap;
}

.tp-ai-gate.is-pass { border-left: 3px solid var(--ai-ok); }
.tp-ai-gate.is-fail { border-left: 3px solid var(--ai-warn); }

.tp-ai-gate.is-pass .tp-ai-gate__status {
    background: color-mix(in srgb, var(--ai-ok) 16%, var(--ai-surface));
    color: var(--ai-ok);
}

.tp-ai-gate.is-fail .tp-ai-gate__status {
    background: color-mix(in srgb, var(--ai-warn) 16%, var(--ai-surface));
    color: var(--ai-warn);
}

.tp-ai-gate__label { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.tp-ai-gate__value { color: var(--ai-muted); font-size: .82rem; text-align: right; white-space: nowrap; }

/* ── Colour analysis ──────────────────────────────────────────────────── */

.tp-ai-colourgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.tp-ai-colourcard {
    display: grid;
    gap: 8px;
    border: 1px solid var(--ai-border);
    border-radius: 16px;
    background: var(--ai-surface-2);
    padding: 14px;
    min-width: 0;
}

.tp-ai-colourcard__title { margin: 0; font-size: .98rem; }

/* ── Lists ────────────────────────────────────────────────────────────── */

.tp-ai-list { display: grid; gap: 8px; margin: 0; padding-left: 1.1rem; }
.tp-ai-list li { color: var(--ai-muted); font-size: .92rem; }
.tp-ai-list--known { list-style: none; padding-left: 0; }

.tp-ai-list--known li {
    border-left: 3px solid var(--ai-ok);
    border-radius: 0 10px 10px 0;
    background: var(--ai-surface-2);
    padding: 9px 12px;
}

.tp-ai-list--roadmap li { padding-left: 4px; }

/* ── Unknown / details ────────────────────────────────────────────────── */

.tp-ai-unknown { display: grid; gap: 8px; }

.tp-ai-unknown__item {
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    background: var(--ai-surface-2);
    padding: 4px 12px;
}

.tp-ai-unknown__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}

.tp-ai-unknown__summary::-webkit-details-marker { display: none; }
.tp-ai-unknown__summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ai-accent-hover) 34%, transparent);
    outline-offset: 2px;
}

.tp-ai-unknown__question { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }

.tp-ai-unknown__reason {
    margin: 0 0 12px;
    max-width: 70ch;
    color: var(--ai-muted);
    font-size: .87rem;
}

/* ── Pipeline ─────────────────────────────────────────────────────────── */

.tp-ai-pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ai-stage;
}

.tp-ai-pipeline__stage {
    display: grid;
    gap: 4px;
    align-content: start;
    border: 1px solid var(--ai-border);
    border-top: 3px solid var(--ai-accent);
    border-radius: 14px;
    background: var(--ai-surface-2);
    padding: 12px;
    counter-increment: ai-stage;
    min-width: 0;
}

.tp-ai-pipeline__label::before {
    content: counter(ai-stage) '. ';
    color: var(--ai-accent);
}

.tp-ai-pipeline__detail { color: var(--ai-muted); font-size: .84rem; }

/* ── Table ────────────────────────────────────────────────────────────── */

/* Wide content scrolls inside its own container so the page never scrolls sideways. */
.tp-ai-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
}

.tp-ai-table { width: 100%; border-collapse: collapse; min-width: 520px; }

.tp-ai-table th,
.tp-ai-table td {
    border-bottom: 1px solid var(--ai-border);
    padding: 10px 12px;
    text-align: left;
    font-size: .86rem;
}

.tp-ai-table th {
    background: var(--ai-surface-3);
    color: var(--ai-muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tp-ai-table tbody tr:last-child td { border-bottom: 0; }
.tp-ai-table td { color: var(--ai-muted); }
.tp-ai-table td:first-child { color: var(--ai-text); font-weight: 700; }
.tp-ai-flag { font-weight: 800; white-space: nowrap; }

/* ── Load / error state ───────────────────────────────────────────────── */

.tp-ai-state {
    border: 1px solid var(--ai-border);
    border-radius: 18px;
    background: var(--ai-surface);
    padding: 26px;
    color: var(--ai-muted);
    text-align: center;
}

.tp-ai-state--error {
    border-color: color-mix(in srgb, var(--ai-warn) 42%, var(--ai-border));
    color: var(--ai-warn);
}

/* ── Loading skeleton and settled reveal ─────────────────────────────── */

.tp-ai-skeleton {
    min-width: 0;
    display: grid;
    gap: 12px;
    border: 1px solid var(--ai-border);
    border-radius: 20px;
    background: var(--ai-surface);
    padding: clamp(16px, 3vw, 26px);
}

.tp-ai-skeleton--hero { min-height: 250px; }
.tp-ai-skeleton--section { min-height: 190px; }

.tp-ai-skeleton .tp-skeleton {
    display: block;
    margin: 0;
    background: color-mix(in srgb, var(--ai-text) 9%, var(--ai-surface-2));
}

.tp-ai-skeleton__title { width: min(76%, 560px); height: 30px; }
.tp-ai-skeleton__line { width: min(100%, 680px); height: 12px; }
.tp-ai-skeleton__line--short { width: min(68%, 460px); }
.tp-ai-skeleton__label { width: 112px; height: 9px; }
.tp-ai-skeleton__value { width: min(72%, 180px); height: 16px; }
.tp-ai-skeleton__section-title { width: min(62%, 410px); height: 23px; }

.tp-ai-skeleton__facts,
.tp-ai-skeleton__evidence {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
}

.tp-ai-skeleton__fact {
    min-height: 68px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--ai-border);
    border-radius: 14px;
    background: var(--ai-surface-2);
}

.tp-ai-root.is-ready > * {
    animation: tp-ai-reveal var(--tp-motion-base) var(--tp-ease-standard) both;
}

.tp-ai-root.is-ready > :nth-child(2) { animation-delay: 40ms; }
.tp-ai-root.is-ready > :nth-child(3) { animation-delay: 80ms; }
.tp-ai-root.is-ready > :nth-child(4) { animation-delay: 120ms; }
.tp-ai-root.is-ready > :nth-child(n + 5) { animation-delay: 160ms; }

@keyframes tp-ai-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Compact ──────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
    .tp-ai-root { gap: 14px; }
    .tp-ai-hero, .tp-ai-section { border-radius: 16px; }
    .tp-ai-gate { grid-template-columns: auto 1fr; }
    .tp-ai-gate__value { grid-column: 1 / -1; text-align: left; white-space: normal; }
}

@media (max-width: 420px) {
    .tp-ai-hero__grid { grid-template-columns: 1fr 1fr; }
    .tp-ai-factrow { grid-template-columns: 1fr 1fr; }
    .tp-ai-pipeline { grid-template-columns: 1fr; }
    .tp-ai-colourgrid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-ai-bar__fill { transition: none; }
    .tp-ai-root.is-ready > * { animation: none; }
}