/* ==========================================================================
   Chronique galactique — page publique index.php?page=chronique
   --------------------------------------------------------------------------
   Chargee par le bloc « script » de page.chronique.default.tpl, APRES
   stargate-theme.css : elle en reutilise les jetons publics (--sg-panel,
   --sg-panel-border, --sg-text, --sg-text-bright, --sg-primary, --sg-accent).

   Les jetons de sg-2026.css (factions, etats, echelle, rayons) ne sont PAS
   charges sur les pages publiques, et --sg-accent n'y a pas la meme valeur
   (cyan en jeu, or ici). On en recopie donc ici les seuls dont on a besoin,
   memes noms et memes formules, bornes a .sg-chr : la page ne peut rien
   deregler ailleurs. Source : styles/theme/gow/sg-2026.css, § 2.

   Mobile d'abord (390 px), puis min-width. Aucun style en ligne (CSP).
   ========================================================================== */

.sg-chr {
    --sg-source: #1ac0ff;

    --sg-tauri:   oklch(from var(--sg-source) .80 .13 h);
    --sg-goauld:  oklch(from var(--sg-source) .82 .15 calc(h + 165));
    --sg-anciens: oklch(from var(--sg-source) .88 .10 calc(h + 30));
    --sg-asgard:  oklch(from var(--sg-source) .86 .06 calc(h - 25));
    --sg-wraith:  oklch(from var(--sg-source) .72 .14 calc(h + 95));
    --sg-ori:     oklch(from var(--sg-source) .85 .14 calc(h + 200));
    /* Absente de sg-2026.css (septieme faction arrivee apres) : meme
       mecanique, teinte placee entre Wraith et Ori. */
    --sg-replicateurs: oklch(from var(--sg-source) .80 .08 calc(h + 130));

    --sg-ok:   oklch(.78 .16 152);
    --sg-warn: oklch(.82 .15 75);
    --sg-ko:   oklch(.68 .20 25);

    --sg-edge-faint: oklch(from var(--sg-source) .38 .04 h / .35);
    --sg-font-num:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --sg-fs-xs: 11px;
    --sg-fs-sm: 12px;
    --sg-fs-md: 13px;
    --sg-fs-lg: 15px;
    --sg-fs-xl: 20px;
    --sg-fw-med:  600;
    --sg-fw-bold: 800;

    --sg-step: 4px;
    --sg-gap:  8px;
    --sg-pad:  12px;
    --sg-r-pane: 10px;
    --sg-r-ctl:  6px;

    /* Couleur de faction de l'element courant (voir [data-faction]). */
    --chr-faction: var(--sg-primary);

    color: var(--sg-text);
}

.sg-chr [data-faction="tauri"]        { --chr-faction: var(--sg-tauri); }
.sg-chr [data-faction="goauld"]       { --chr-faction: var(--sg-goauld); }
.sg-chr [data-faction="anciens"]      { --chr-faction: var(--sg-anciens); }
.sg-chr [data-faction="asgard"]       { --chr-faction: var(--sg-asgard); }
.sg-chr [data-faction="wraith"]       { --chr-faction: var(--sg-wraith); }
.sg-chr [data-faction="ori"]          { --chr-faction: var(--sg-ori); }
.sg-chr [data-faction="replicateurs"] { --chr-faction: var(--sg-replicateurs); }

/* -- En-tete ---------------------------------------------------------------- */

.sg-chr-head {
    margin-bottom: calc(var(--sg-step) * 6);
}

.sg-chr-kicker {
    margin: 0 0 var(--sg-gap);
    color: var(--sg-primary);
    font-size: var(--sg-fs-sm);
    font-weight: var(--sg-fw-med);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sg-chr .sg-chr-title {
    margin: 0 0 var(--sg-pad);
    font-size: calc(var(--sg-fs-xl) * 1.4);
    font-weight: var(--sg-fw-bold);
    line-height: 1.15;
}

.sg-chr-lede {
    max-width: 68ch;
    margin: 0 0 var(--sg-gap);
    font-size: var(--sg-fs-lg);
    line-height: 1.55;
    color: var(--sg-text-bright);
}

.sg-chr-meta,
.sg-chr-note,
.sg-chr-when {
    margin: 0;
    color: var(--sg-text);
    font-size: var(--sg-fs-sm);
    opacity: .85;
}

/* -- Chiffres cles ---------------------------------------------------------- */

.sg-chr-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sg-gap);
    margin: 0 0 calc(var(--sg-step) * 6);
    padding: 0;
    list-style: none;
}

.sg-chr-stats li {
    display: flex;
    flex-direction: column;
    gap: var(--sg-step);
    padding: var(--sg-pad);
    background: var(--sg-panel);
    border: 1px solid var(--sg-panel-border);
    border-radius: var(--sg-r-pane);
}

.sg-chr-stat-num {
    color: var(--sg-accent);
    font-family: var(--sg-font-num);
    font-size: var(--sg-fs-xl);
    font-weight: var(--sg-fw-med);
    font-variant-numeric: tabular-nums;
}

.sg-chr-stat-lbl {
    font-size: var(--sg-fs-sm);
}

/* -- Cartes ----------------------------------------------------------------- */

.sg-chr-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start; /* une carte vide (Trahisons) ne s'etire pas sur la voisine */
    gap: calc(var(--sg-step) * 4);
    margin-bottom: calc(var(--sg-step) * 6);
}

.sg-chr-card,
.sg-chr-letter {
    padding: calc(var(--sg-step) * 4);
    background: var(--sg-panel);
    border: 1px solid var(--sg-panel-border);
    border-radius: var(--sg-r-pane);
}

.sg-chr .sg-chr-h {
    margin: 0 0 var(--sg-pad);
    color: var(--sg-primary) !important; /* h2 est force en --sg-text-bright par stargate-theme.css */
    font-size: var(--sg-fs-md);
    font-weight: var(--sg-fw-med);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sg-chr-list,
.sg-chr-rank {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-chr-list > li {
    display: flex;
    flex-direction: column;
    gap: var(--sg-step);
    padding: var(--sg-gap) 0;
    border-bottom: 1px solid var(--sg-edge-faint);
    font-size: var(--sg-fs-md);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.sg-chr-list > li:last-child {
    border-bottom: 0;
}

.sg-chr strong {
    color: var(--sg-text-bright);
    font-weight: var(--sg-fw-med);
}

.sg-chr-faction {
    color: var(--chr-faction);
    font-size: var(--sg-fs-sm);
}

.sg-chr-empty {
    color: var(--sg-text);
    font-size: var(--sg-fs-md);
    font-style: italic;
    opacity: .85;
}

/* -- Classement ------------------------------------------------------------- */

.sg-chr-rank-row {
    display: grid;
    grid-template-columns: calc(var(--sg-step) * 7) minmax(0, 1fr) auto calc(var(--sg-step) * 4);
    align-items: center;
    gap: var(--sg-gap);
    padding: var(--sg-gap) 0 var(--sg-gap) var(--sg-gap);
    border-left: var(--sg-step) solid var(--chr-faction);
    border-bottom: 1px solid var(--sg-edge-faint);
}

.sg-chr-rank-place,
.sg-chr-rank-pts {
    font-family: var(--sg-font-num);
    font-variant-numeric: tabular-nums;
}

.sg-chr-rank-place {
    color: var(--sg-accent);
    font-weight: var(--sg-fw-med);
}

.sg-chr-rank-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sg-chr-rank-pts {
    font-size: var(--sg-fs-sm);
    text-align: right;
}

.sg-chr-trend      { text-align: center; font-size: var(--sg-fs-sm); }
.sg-chr-trend-up   { color: var(--sg-ok); }
.sg-chr-trend-down { color: var(--sg-ko); }

/* -- Pastilles -------------------------------------------------------------- */

.sg-chr-badge {
    align-self: flex-start;
    padding: 0 var(--sg-gap);
    border: 1px solid currentColor;
    border-radius: var(--sg-r-ctl);
    font-size: var(--sg-fs-xs);
    font-weight: var(--sg-fw-med);
    letter-spacing: .06em;
    line-height: 1.8;
    text-transform: uppercase;
}

.sg-chr-badge-ok,
.sg-chr-kind-accord      { color: var(--sg-ok); }
.sg-chr-badge-off        { color: var(--sg-text); opacity: .75; }
.sg-chr-kind-refus       { color: var(--sg-warn); }
.sg-chr-kind-sommation   { color: var(--sg-ko); }
.sg-chr-kind-transmission { color: var(--sg-primary); }

/* -- Combats ---------------------------------------------------------------- */

.sg-chr .sg-chr-sub {
    margin: var(--sg-pad) 0 var(--sg-step);
    color: var(--sg-text-bright) !important; /* h3 : meme forcage que h2 */
    font-size: var(--sg-fs-sm);
    font-weight: var(--sg-fw-med);
}

.sg-chr-vs {
    color: var(--sg-text);
    font-size: var(--sg-fs-sm);
}

.sg-chr-outcome {
    font-size: var(--sg-fs-sm);
}

.sg-chr-outcome-attacker { color: var(--sg-ok); }
.sg-chr-outcome-defender { color: var(--sg-warn); }

.sg-chr-list > li.sg-chr-betrayal {
    padding-left: var(--sg-gap);
    border-left: var(--sg-step) solid var(--sg-ko);
}


/* Une entree de mouvement tient sur une ligne : « A → B  128 reconnaissances ». */
.sg-chr-list > li.sg-chr-move {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sg-step) var(--sg-gap);
}

.sg-chr-count {
    color: var(--sg-accent);
    font-family: var(--sg-font-num);
    font-size: var(--sg-fs-sm);
}

/* -- Correspondance --------------------------------------------------------- */

.sg-chr-letter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--sg-step) * 4);
    margin-top: var(--sg-pad);
}

.sg-chr-letter {
    display: flex;
    flex-direction: column;
    gap: var(--sg-gap);
    border-top: var(--sg-step) solid var(--chr-faction);
}

.sg-chr-letter-head {
    display: flex;
    flex-direction: column;
    gap: var(--sg-step);
    font-size: var(--sg-fs-md);
    overflow-wrap: anywhere;
}

.sg-chr .sg-chr-quote {
    margin: 0;
    padding: 0 0 0 var(--sg-pad);
    border-left: 2px solid var(--chr-faction);
    color: var(--sg-text-bright);
    font-size: var(--sg-fs-lg);
    font-style: italic;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* -- Filtre du fil (raisonnements / lettres), sans script ------------------- */

/* Les radios restent focalisables (pas de display:none) : le clavier s'en sert. */
.sg-chr-view-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sg-chr-view {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sg-gap);
    margin: 0 0 calc(var(--sg-step) * 4);
    font-size: var(--sg-fs-sm);
}

.sg-chr-view label {
    padding: var(--sg-step) var(--sg-pad);
    background: var(--sg-panel);
    border: 1px solid var(--sg-panel-border);
    border-radius: var(--sg-r-ctl);
    cursor: pointer;
}

#sg-chr-view-all:checked ~ .sg-chr-view label[for="sg-chr-view-all"],
#sg-chr-view-traces:checked ~ .sg-chr-view label[for="sg-chr-view-traces"],
#sg-chr-view-letters:checked ~ .sg-chr-view label[for="sg-chr-view-letters"] {
    color: var(--sg-accent);
    border-color: currentColor;
}

#sg-chr-view-all:focus-visible ~ .sg-chr-view label[for="sg-chr-view-all"],
#sg-chr-view-traces:focus-visible ~ .sg-chr-view label[for="sg-chr-view-traces"],
#sg-chr-view-letters:focus-visible ~ .sg-chr-view label[for="sg-chr-view-letters"] {
    outline: 2px solid var(--sg-accent);
    outline-offset: 2px;
}

#sg-chr-view-traces:checked ~ .sg-chr-letters,
#sg-chr-view-letters:checked ~ .sg-chr-traces {
    display: none;
}

/* -- Raisonnements de l'oracle ---------------------------------------------- */

.sg-chr-traces {
    margin-bottom: calc(var(--sg-step) * 6);
}

.sg-chr-list > li.sg-chr-trace {
    padding-left: var(--sg-pad);
    border-left: var(--sg-step) solid var(--chr-faction);
}

.sg-chr-trace-head,
.sg-chr-trace-why,
.sg-chr-trace-alt {
    margin: 0;
}

.sg-chr-trace-why {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sg-step) var(--sg-gap);
    font-size: var(--sg-fs-sm);
}

.sg-chr-layer {
    color: var(--sg-accent);
}

.sg-chr-trace .sg-chr-quote {
    font-size: var(--sg-fs-md);
}

.sg-chr-trace-alt {
    font-size: var(--sg-fs-sm);
    opacity: .85;
}

.sg-chr-more > summary {
    padding: var(--sg-gap) 0;
    color: var(--sg-primary);
    font-size: var(--sg-fs-sm);
    cursor: pointer;
}

/* -- Tablette et plus ------------------------------------------------------- */

@media (min-width: 768px) {
    .sg-chr-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sg-chr-grid,
    .sg-chr-letter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sg-chr .sg-chr-title {
        font-size: calc(var(--sg-fs-xl) * 1.8);
    }
}

@media (min-width: 1200px) {
    .sg-chr-stats {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sg-chr-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sg-chr-ranking {
        grid-row: span 2;
    }
}