/* Styles de la page — extraits des styles en ligne du JSX (lot 6).
   Palette et z-index viennent de design-system.css. */

/* ===== Ossature de la rubrique ===== */
.intel-loading {
    padding: var(--space-8);
    color: var(--color-text-secondary);
}

.intel-tabs {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}
.intel-tab {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 3px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
}
.intel-tab--active {
    border-color: rgba(167, 139, 250, .6);
    background: rgba(167, 139, 250, .18);
    color: var(--color-accent-purple);
}

/* ===== Blocs et espacements récurrents ===== */
.intel-section       { margin-top: var(--space-4); }
.intel-section-tight { margin-top: var(--space-3); }
.intel-block         { margin-bottom: var(--space-3); }
.intel-scroll-x      { overflow-x: auto; }
.intel-section-label {
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ===== Textes récurrents =====
   Les rôles, pas les teintes : ce que la ligne dit du jeu décide de sa classe. */
.intel-text    { font-size: var(--text-sm); color: var(--color-text-secondary); }
.intel-subtext { font-size: var(--text-sm); color: var(--color-text-muted); }
.intel-note    { font-size: var(--text-xs); color: var(--color-text-secondary); }
.intel-hint    { font-size: var(--text-xs); color: var(--color-text-muted); }
.intel-warning-note { font-size: var(--text-xs); color: var(--color-accent-amber); }
.intel-warning-text { font-size: var(--text-sm); color: var(--color-accent-amber); }
.intel-prose {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.intel-prose--spaced { margin-bottom: 10px; }

.intel-name           { color: var(--color-text-primary); }
.intel-name-enemy     { color: var(--color-accent-red); }
.intel-secondary-text { color: var(--color-text-secondary); }
.intel-muted-text     { color: var(--color-text-muted); }
.intel-alert-text     { color: var(--color-accent-amber); }
.intel-accent-text    { color: var(--color-accent-purple); }
.intel-info-text      { color: var(--color-accent-cyan); }
.intel-ok-text        { color: var(--color-accent-green); }
/* Le vert pâle du « discret » : ni l'état OK ni un accent du thème. */
.intel-discreet       { color: #7ee0a8; }

/* ===== Cartes et en-têtes =====
   Le sélecteur porte `.card` pour repasser devant `.card:hover`, qui sinon
   reprendrait la bordure au survol (l'ancien style en ligne l'en empêchait). */
.card.intel-card-own      { border: 1px solid rgba(0, 229, 255, .35); }
.card.intel-log-card      { border: 1px solid rgba(0, 230, 118, .3); }
.card.intel-card-turned   { border: 1px solid rgba(167, 139, 250, .35); }
.card.intel-card-networks { border: 1px solid rgba(255, 138, 128, .35); }

.intel-card-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}
.intel-card-title { font-size: 15px; font-weight: var(--weight-bold); }
.intel-card-title--own     { color: var(--color-accent-cyan); }
.intel-card-title--report  { color: var(--color-accent-green); }
.intel-card-title--foreign { color: var(--color-accent-red); }

.intel-panel-title {
    margin-bottom: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}
.intel-panel-title--turned    { color: var(--color-accent-purple); }
.intel-panel-title--networks  { margin-bottom: var(--space-2); color: var(--color-accent-red); }
.intel-panel-title--operation { color: var(--color-accent-cyan); }

/* ===== Climat politique ===== */
.intel-climate-footnote {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.intel-foreign-footnote {
    margin-top: 10px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.intel-foreign-implantation { font-size: var(--text-xs); color: var(--color-accent-purple); }
/* La couleur dit si tous les axes sont lisibles : elle reste en ligne. */
.intel-foreign-axes { font-size: var(--text-xs); }

/* ===== Bandeau des points ===== */
.intel-points-bar {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.intel-points-value { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.intel-points-note  { font-size: var(--text-xs); }

/* ===== Tableaux =====
   `tr:last-child td { border-bottom: none }` de components.css est plus
   spécifique qu'une simple classe : d'où le `.intel-table td.intel-cell`. */
.intel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
}
.intel-table-head {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    text-align: left;
    text-transform: uppercase;
}
.intel-table th.intel-cell,
.intel-table td.intel-cell {
    padding: 6px var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    vertical-align: top;
}
.intel-cell-assignment { min-width: 200px; }
.intel-cell-skills     { min-width: 220px; }
.intel-cell-node       { min-width: 230px; }
.intel-cell-role       { white-space: nowrap; }
.intel-cell-stat       { text-align: center; color: var(--color-text-primary); }
.intel-cell-name       { color: var(--color-text-primary); font-weight: var(--weight-semibold); }

/* ===== Rapport des services ===== */
.intel-log-table th,
.intel-log-table td { padding: var(--space-1) var(--space-2); }
.intel-log-table th { font-weight: var(--weight-normal); }
.intel-log-head  { color: var(--color-text-muted); text-align: left; }
.intel-log-num   { text-align: right; }
.intel-log-row   { border-top: 1px solid rgba(255, 255, 255, .06); }
.intel-log-cell  { color: var(--color-text-secondary); }
.intel-log-axis  { color: var(--color-text-primary); }
.intel-log-delta { text-align: right; font-weight: var(--weight-bold); }

/* ===== Jauge de difficulté ===== */
.intel-gauge {
    position: relative;
    min-width: 104px;
    height: 18px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
    flex-shrink: 0;
}
.intel-gauge-fill { position: absolute; inset: 0; opacity: .28; }
.intel-gauge-edge { position: absolute; inset: 0; }
.intel-gauge-label {
    position: relative;
    display: block;
    text-align: center;
    line-height: 18px;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: .02em;
}

/* ===== Effets en cours ===== */
.intel-empty-title {
    margin-bottom: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
}
.intel-split {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.intel-split--top  { align-items: flex-start; }
.intel-split-main  { flex: 1 1 320px; min-width: 0; }
.intel-split-aside { text-align: right; }

.intel-effect-title  { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.intel-effect-detail {
    margin-top: 2px;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.intel-effect-source {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.intel-effect-countdown {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: 1.1;
}

/* ===== Sécurité intérieure ===== */
.intel-network-row {
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.intel-network-left { color: #6ee7a8; }

.intel-system-select {
    width: 100%;
    max-width: 420px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 3px;
    background: #0d1420;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}
.intel-quota {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.intel-quote-loading {
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.intel-pending-banner {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: var(--space-2) 10px;
    border: 1px solid rgba(110, 231, 168, .4);
    border-radius: 3px;
    background: rgba(110, 231, 168, .08);
}
.intel-pending-note   { font-size: var(--text-xs); color: #6ee7a8; }
.intel-pending-cancel { font-size: var(--text-xs); }

.intel-mission-row {
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.intel-mission-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
}
.intel-mission-axis {
    margin-left: 6px;
    font-size: var(--text-xs);
    color: var(--color-accent-purple);
}
.intel-mission-desc {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.intel-mission-refusal {
    margin-top: 3px;
    font-size: var(--text-xs);
    color: var(--color-accent-amber);
}
.intel-mission-aside  { min-width: 110px; text-align: right; }
.intel-mission-cost   { font-size: 15px; font-weight: var(--weight-bold); color: var(--color-accent-cyan); }
.intel-mission-launch { margin-top: 6px; font-size: var(--text-xs); }

.intel-row-extra { margin-top: var(--space-2); }
.intel-inline-select {
    padding: var(--space-1) 6px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 3px;
    background: #0d1420;
    color: var(--color-text-primary);
    font-size: var(--text-xs);
}
.intel-sens-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: var(--space-2);
}
.intel-sens {
    flex: 1 1 200px;
    padding: 6px var(--space-2);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 3px;
    background: transparent;
    color: var(--color-text-secondary);
    text-align: left;
    font-size: var(--text-xs);
    line-height: 1.45;
    cursor: pointer;
}
.intel-sens--active {
    border-color: rgba(34, 211, 238, .6);
    background: rgba(34, 211, 238, .12);
    color: var(--color-accent-cyan);
}

/* ===== Opportunités ===== */
.intel-filters {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.intel-filters-label { letter-spacing: .05em; text-transform: uppercase; }
.intel-filter-select {
    padding: var(--space-1) 6px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 3px;
    background: #111827;
    color: var(--color-text-primary);
    font-size: var(--text-xs);
}
.intel-filter-reset {
    border-color: rgba(167, 139, 250, .4);
    color: var(--color-accent-purple);
    cursor: pointer;
}
.intel-settled-row {
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.intel-opportunity-head  { min-width: 0; }
.intel-opportunity-title {
    font-size: 17px;
    font-weight: var(--weight-bold);
    color: var(--color-accent-cyan);
    line-height: 1.25;
}
.intel-opportunity-target {
    margin-top: 1px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent-red);
}
.intel-probability {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-accent-purple);
    line-height: 1.1;
}
.intel-discretion {
    display: inline-block;
    margin-top: var(--space-1);
    padding: 1px 6px;
    border-radius: 9px;
    font-size: var(--text-xs);
    letter-spacing: .03em;
    white-space: nowrap;
    cursor: help;
}
.intel-discretion--alerts {
    border: 1px solid rgba(255, 179, 0, .35);
    background: rgba(255, 179, 0, .10);
    color: var(--color-accent-amber);
}
.intel-discretion--quiet {
    border: 1px solid rgba(126, 224, 168, .35);
    background: rgba(126, 224, 168, .10);
    color: #7ee0a8;
}
.intel-opportunity-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 10px 0 var(--space-2);
}
.intel-opportunity-label { font-size: var(--text-sm); color: var(--color-text-primary); }
/* La teinte dit le type de l'opportunité : elle reste en ligne. */
.intel-opportunity-type  { font-size: var(--text-xs); }

.intel-flavor {
    margin: 0 0 var(--space-2);
    padding-left: 10px;
    border-left: 2px solid rgba(167, 139, 250, .35);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.intel-effect-box {
    margin-bottom: var(--space-2);
    padding: var(--space-2) 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 3px;
    background: rgba(255, 255, 255, .03);
}
.intel-box-label {
    margin-bottom: 3px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.intel-box-text {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
}
.intel-node-box {
    margin-bottom: var(--space-2);
    padding: var(--space-2);
    border: 1px solid rgba(0, 230, 118, .3);
    border-radius: 3px;
    background: rgba(0, 230, 118, .06);
}
.intel-node-unlock {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-accent-green);
}
.intel-node-effect {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.intel-logistics {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.intel-logistics-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}
.intel-slider { width: 100%; accent-color: var(--color-accent-purple); }
.intel-surcharge {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-accent-amber);
    line-height: 1.45;
}
.intel-post-picker {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.intel-post-select {
    max-width: 260px;
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 3px;
    background: #111827;
    color: var(--color-text-primary);
    font-size: var(--text-xs);
}
.intel-post-warning { margin-top: 3px; color: var(--color-accent-amber); }
.intel-post-note    { margin-top: 3px; color: var(--color-text-muted); }

.intel-engaged {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: var(--space-2) 10px;
    border: 1px solid rgba(0, 230, 118, .35);
    border-radius: 3px;
    background: rgba(0, 230, 118, .07);
}
.intel-engaged-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-accent-green);
}
.intel-engaged-detail {
    margin-top: 2px;
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    color: var(--color-text-secondary);
}
.intel-cancel-btn {
    padding: 5px var(--space-3);
    border: 1px solid var(--color-accent-amber);
    border-radius: 3px;
    background: transparent;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}
.intel-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.intel-engage-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 3px;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

/* ===== Territoires ===== */
.intel-implantation-row { display: flex; align-items: center; gap: 6px; }
.intel-implantation-bar {
    width: 70px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .09);
    overflow: hidden;
}
.intel-implantation-fill { height: 100%; }
/* Vert « agent sur place » ou ambre « tenu à distance » : couleur en ligne. */
.intel-agent-status { font-size: var(--text-xs); }
.intel-construction {
    margin-top: 5px;
    padding-top: var(--space-1);
    border-top: 1px dashed rgba(255, 255, 255, .12);
}
.intel-construction-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-accent-purple);
}
.intel-construction-row {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* ===== Espions ===== */
.intel-linkish {
    padding: 0;
    border: none;
    background: none;
    text-decoration: underline;
    cursor: pointer;
}
.intel-link-territories { font-size: var(--text-sm); color: var(--color-accent-purple); }
.intel-link-cancel      { font-size: var(--text-xs); color: var(--color-accent-red); }
.intel-post-label { font-weight: var(--weight-semibold); }
.intel-assign-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.intel-assign-select {
    max-width: 190px;
    padding: 3px 6px;
    font-size: var(--text-xs);
}
.intel-pending-flag {
    font-size: var(--text-xs);
    color: var(--color-accent-amber);
    white-space: nowrap;
}
/* Violet si la compétence est cataloguée, gris sinon : couleur en ligne. */
.intel-skill { font-size: var(--text-xs); }

/* ===== Arbres d'influence ===== */
.intel-defensive-note {
    margin-bottom: 14px;
    padding: 10px var(--space-3);
    border: 1px solid rgba(34, 211, 238, .25);
    border-radius: 3px;
    background: rgba(34, 211, 238, .05);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.intel-branches {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.intel-branch {
    padding: var(--space-1) 10px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 3px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    cursor: pointer;
}
.intel-branch--active {
    border-color: rgba(34, 211, 238, .6);
    background: rgba(34, 211, 238, .15);
    color: var(--color-accent-cyan);
}
.intel-role-name  { font-weight: var(--weight-bold); color: var(--color-accent-purple); }
/* Acquis / à portée / verrouillé : la couleur vient de l'état, en ligne. */
.intel-node-state { font-weight: var(--weight-semibold); }
.intel-node-line {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.intel-node-blocker {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-accent-red);
}
.intel-node-surcharge {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-accent-amber);
}
.intel-node-flavor {
    display: block;
    margin-top: 3px;
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--color-text-muted);
    line-height: 1.45;
}