/*
 * Fiche carte (T26) — transcription du drawer du prototype (export L983–1104).
 *
 * La même feuille habille la page pleine et le panneau latéral (T43) : le corps est le même
 * template. Seul l'encart latéral diffère, porté par `--rb-card-detail-inset` — nul en page
 * pleine, où `rb-shell__content` fournit déjà sa gouttière, 24px dans le panneau, où l'en-tête
 * doit rester à fond perdu.
 *
 * Toute donnée chiffrée est en `--rb-font-mono`, comme partout ailleurs dans le terminal.
 */
.rb-card-detail {
    --rb-card-detail-inset: 0;

    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---- En-tête : vignette, identité, fermeture ---- */

.rb-card-detail__header {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 24px;
    background-color: var(--rb-bg-surface);
    border-bottom: 1px solid var(--rb-border-default);
}

.rb-card-detail__image {
    flex: none;
    width: 84px;
    height: 116px;
    object-fit: cover;
    border-radius: 7px;
    box-shadow: 0 12px 30px rgb(0 0 0 / 50%);
}

.rb-card-detail__identity {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    min-width: 0;
}

.rb-card-detail__name {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.rb-card-detail__meta {
    margin: 0;
    color: var(--rb-text-muted);
    font-size: 12.5px;
}

.rb-card-detail__price {
    margin: 6px 0 0;
    color: var(--rb-text-primary);
    font-family: var(--rb-font-mono);
    font-size: 20px;
    font-weight: 700;
}

.rb-card-detail__close {
    flex: none;
    padding: 7px 12px;
    color: var(--rb-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    background-color: rgb(8 13 24 / 70%);
    border: 1px solid var(--rb-border-muted);
    border-radius: 7px;
}

.rb-card-detail__close:hover {
    color: var(--rb-text-primary);
}

/* ---- Blocs ---- */

.rb-card-detail__block {
    margin-inline: var(--rb-card-detail-inset);
    padding: 18px;
    background-color: var(--rb-bg-surface);
    border: 1px solid var(--rb-border-default);
    border-radius: 12px;
}

.rb-card-detail__block h2 {
    margin: 0 0 14px;
    color: var(--rb-text-heading);
    font-size: 14px;
    font-weight: 700;
}

/* L'indisponibilité d'un bloc est un texte, jamais une couleur seule. */
.rb-card-detail__unavailable {
    margin: 0;
    color: var(--rb-text-faint);
    font-size: 13px;
}

/* ---- Listes clé / valeur : référentiel, variations, métagame, stock ---- */

.rb-card-detail__referential,
.rb-card-detail__deltas,
.rb-card-detail__meta,
.rb-card-detail__stock {
    display: grid;
    gap: 12px 20px;
    margin: 0;
}

.rb-card-detail__referential dt,
.rb-card-detail__meta dt,
.rb-card-detail__stock dt,
.rb-card-detail__deltas dt {
    color: var(--rb-text-subdued);
    font-size: 12.5px;
}

.rb-card-detail__referential dd,
.rb-card-detail__meta dd,
.rb-card-detail__stock dd,
.rb-card-detail__deltas dd {
    margin: 0;
    color: var(--rb-text-secondary-light);
    font-family: var(--rb-font-mono);
    font-size: 13px;
}

.rb-card-detail__referential > div,
.rb-card-detail__meta > div {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--rb-border-row);
}

/* Variations et stock : tuiles chiffrées, libellé au-dessus de la valeur. */
.rb-card-detail__deltas,
.rb-card-detail__stock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rb-card-detail__deltas > div {
    padding: 11px 12px;
    background-color: var(--rb-bg-surface-alt);
    border: 1px solid var(--rb-border-default);
    border-radius: 9px;
}

.rb-card-detail__deltas dt,
.rb-card-detail__stock dt {
    color: var(--rb-text-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rb-card-detail__deltas dd,
.rb-card-detail__stock dd {
    margin-top: 6px;
    color: var(--rb-text-primary);
    font-size: 15px;
    font-weight: 700;
}

/* ---- Pourquoi ce signal : le bloc porteur de la maquette ---- */

.rb-card-detail__block--explanations {
    background: linear-gradient(180deg, rgb(169 140 255 / 8%), var(--rb-bg-surface) 70%);
    border-color: var(--rb-border-accent-purple);
}

.rb-card-detail__explanations {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rb-card-detail__explanation {
    display: flex;
    gap: 10px;
    align-items: baseline;
    color: var(--rb-text-secondary-light);
    font-size: 13px;
    line-height: 1.5;
}

/*
 * Pastille de sens du signal. Décorative : le texte de la ligne porte l'information, la couleur
 * ne fait que la redoubler (RGAA). Vide, donc jamais restituée par un lecteur d'écran.
 */
.rb-card-detail__explanation::before {
    flex: none;
    width: 8px;
    height: 8px;
    background-color: var(--rb-explanation-color, var(--rb-text-faint));
    transform: rotate(45deg);
    content: "";
}

.rb-card-detail__explanation[data-marker="RISE"] { --rb-explanation-color: var(--rb-accent-green); }
.rb-card-detail__explanation[data-marker="FALL"] { --rb-explanation-color: var(--rb-accent-red); }
.rb-card-detail__explanation[data-marker="FLAT"] { --rb-explanation-color: var(--rb-accent-gray); }
.rb-card-detail__explanation[data-marker="REPRINT"] { --rb-explanation-color: var(--rb-accent-orange); }

/* ---- Bandeau de fiabilité : marché illiquide signalé par le moteur ---- */

.rb-card-detail__reliability {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    margin: 0 0 14px;
    padding: 10px 14px;
    color: var(--rb-accent-orange);
    font-size: 12.5px;
    background-color: rgb(255 170 80 / 10%);
    border: 1px solid var(--rb-accent-orange);
    border-radius: 9px;
}

.rb-card-detail__reliability-confidence {
    color: var(--rb-text-secondary-light);
    font-family: var(--rb-font-mono);
}

/* ---- Historique de prix ---- */

.rb-card-detail__chart-source {
    margin: -8px 0 14px;
    color: var(--rb-text-faint);
    font-size: 11.5px;
}

.rb-card-detail__chart {
    position: relative;
    margin: 0;
    width: 100%;
    height: 120px;
}

.rb-card-detail__chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.rb-card-detail__chart-area {
    fill: rgb(95 227 245 / 10%);
}

.rb-card-detail__chart-line {
    fill: none;
    stroke: var(--rb-accent-cyan);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* La moyenne 7 jours se distingue de la tendance par son tracé pointillé, pas seulement sa couleur. */
.rb-card-detail__chart-line--avg7 {
    stroke: var(--rb-accent-purple);
    stroke-dasharray: 4 3;
}

/* avg1 : trait fin plein ; low : pointillé serré. Couleur et tracé redondants. */
.rb-card-detail__chart-line--avg1 {
    stroke: var(--rb-accent-green);
    stroke-width: 1;
}

.rb-card-detail__chart-line--low {
    stroke: var(--rb-accent-gold);
    stroke-dasharray: 1 3;
}

.rb-card-detail__chart-line--hidden {
    display: none;
}

/* ---- Légende : pastilles cochables, trait plein/pointillé redondant avec le libellé ---- */

.rb-card-detail__chart-legend {
    margin: 0 0 10px;
}

.rb-card-detail__chart-legend-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rb-card-detail__chart-legend-item {
    --rb-series-color: var(--rb-accent-cyan);
    --rb-series-dash: none;

    display: flex;
}

.rb-card-detail__chart-legend-item--avg7 {
    --rb-series-color: var(--rb-accent-purple);
    --rb-series-dash: 1 4;
}

.rb-card-detail__chart-legend-item--avg1 {
    --rb-series-color: var(--rb-accent-green);
    --rb-series-dash: 5 4;
}

.rb-card-detail__chart-legend-item--low {
    --rb-series-color: var(--rb-accent-gold);
    --rb-series-dash: 2 3;
}

.rb-card-detail__chart-legend-item label {
    display: flex;
    gap: 7px;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    color: var(--rb-text-label);
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid var(--rb-border-chip);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.rb-card-detail__chart-legend-item:has(input:checked) label {
    color: #DCE7F5;
    background-color: color-mix(in srgb, var(--rb-series-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--rb-series-color) 40%, transparent);
}

.rb-card-detail__chart-legend-item:has(input:focus-visible) label {
    outline: 2px solid var(--rb-accent-cyan);
    outline-offset: 2px;
}

.rb-card-detail__chart-legend-swatch {
    flex: none;
    stroke: var(--rb-series-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: var(--rb-series-dash);
    opacity: 0.45;
}

.rb-card-detail__chart-legend-item:has(input:checked) .rb-card-detail__chart-legend-swatch {
    opacity: 1;
}

/* L'avertissement sur low n'a de sens que si la série est affichée. */
.rb-card-detail__chart-legend-help {
    display: none;
    margin: 10px 0 0;
    padding: 9px 12px;
    color: #D9C69C;
    font-size: 11.5px;
    background-color: rgb(232 195 122 / 7%);
    border: 1px solid rgb(232 195 122 / 25%);
    border-radius: var(--rb-radius-md);
}

.rb-card-detail__chart-legend:has(input[value="low"]:checked) .rb-card-detail__chart-legend-help {
    display: block;
}

/* ---- Survol : une zone par relevé, un repère et une bulle ---- */

.rb-card-detail__chart-bands {
    position: absolute;
    inset: 0;
    display: flex;
}

.rb-card-detail__chart-band {
    flex: 1;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rb-card-detail__chart-band:hover,
.rb-card-detail__chart-band:focus-visible {
    background: linear-gradient(180deg, rgb(95 227 245 / 0%), rgb(95 227 245 / 8%));
    outline: none;
}

.rb-card-detail__chart-marker {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 2px solid var(--rb-bg-panel);
    border-radius: 50%;
    background: var(--rb-accent-cyan);
    translate: -50% -50%;
    pointer-events: none;
}

.rb-card-detail__chart-tooltip {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border: 1px solid var(--rb-border-muted);
    border-radius: 7px;
    background: var(--rb-bg-inset);
    box-shadow: 0 12px 30px rgb(0 0 0 / 50%);
    white-space: nowrap;
    /* Au-dessus du point et centrée dessus. */
    translate: -50% calc(-100% - 12px);
    pointer-events: none;
}

.rb-card-detail__chart-tooltip-date {
    color: var(--rb-text-secondary);
    font-size: 11px;
}

.rb-card-detail__chart-tooltip-series {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rb-card-detail__chart-tooltip-row {
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--rb-text-primary);
    font-family: var(--rb-font-mono);
    font-size: 12px;
}

.rb-card-detail__chart-tooltip-row::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rb-accent-cyan);
    content: "";
}

.rb-card-detail__chart-tooltip-row--avg7::before {
    background: var(--rb-accent-purple);
}

.rb-card-detail__chart-tooltip-row--avg1::before {
    background: var(--rb-accent-green);
}

.rb-card-detail__chart-tooltip-row--low::before {
    background: var(--rb-accent-gold);
}

.rb-card-detail__chart-tooltip-label {
    color: var(--rb-text-secondary);
    font-family: inherit;
}

/* ---- Archétypes, tags et variantes : jetons ---- */

.rb-card-detail__archetypes,
.rb-card-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rb-card-detail__archetypes li,
.rb-card-detail__tags li,
.rb-card-detail__variant {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 5px 10px;
    color: var(--rb-text-secondary);
    font-size: 11.5px;
    background-color: var(--rb-bg-inset);
    border: 1px solid var(--rb-border-chip);
    border-radius: 999px;
}

.rb-card-detail__archetypes li span:last-child {
    color: var(--rb-text-faint);
    font-family: var(--rb-font-mono);
}

.rb-card-detail__text {
    margin: 14px 0 0;
    color: var(--rb-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.rb-card-keyword {
    padding: 1px 6px;
    border-radius: 3px;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.rb-card-keyword--green { background-color: #24705f; }
.rb-card-keyword--grey { background-color: #6c6d6c; }
.rb-card-keyword--pink { background-color: #cc356e; }
.rb-card-keyword--lime { background-color: #97b028; color: #000; }

.rb-card-symbol {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
}

.rb-card-energy {
    display: inline-block;
    min-width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background-color: #6c6d6c;
    color: #fff;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.4em;
    text-align: center;
}

/* ---- Chronologie ---- */

.rb-card-detail__timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rb-card-detail__timeline li {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 10px;
    align-items: baseline;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rb-border-row);
}

.rb-card-detail__timeline li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.rb-card-detail__timeline time {
    color: var(--rb-text-faint);
    font-family: var(--rb-font-mono);
    font-size: 10.5px;
}

.rb-card-detail__timeline li span {
    color: var(--rb-text-secondary-light);
    font-size: 12.5px;
    line-height: 1.5;
}

/* ---- Stock ---- */

.rb-card-detail__exit-advice {
    margin: 16px 0 0;
    padding: 12px 14px;
    color: var(--rb-text-secondary-light);
    font-size: 12.5px;
    line-height: 1.55;
    background-color: var(--rb-bg-inset);
    border: 1px solid var(--rb-border-chip);
    border-radius: 9px;
}

.rb-card-detail__vinted-status {
    margin: 10px 0 0;
    color: var(--rb-accent-purple);
    font-size: 12.5px;
}

.rb-card-detail__vinted-form {
    margin-top: 16px;
}

.rb-card-detail__vinted-form button {
    width: 100%;
    padding: 12px;
    color: var(--rb-text-on-accent);
    font-weight: 700;
    font-size: 13.5px;
    font-family: var(--rb-font-sans);
    background: linear-gradient(100deg, var(--rb-accent-cyan), var(--rb-accent-cyan-dark));
    border: none;
    border-radius: 9px;
    cursor: pointer;
}

@media (min-width: 760px) {
    .rb-card-detail__deltas,
    .rb-card-detail__stock {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rb-card-detail__referential,
    .rb-card-detail__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}