/* styles/responsive/mobile-trace.css
 * ══════════════════════════════════════════════════════════════════
 * Couche mobile du mode LES TRACÉS (#view-trace).
 *   · Toggle ✏ Dessiner / ✋ Déplacer (tactile uniquement) — sans lui,
 *     impossible de panner la carte au doigt (le pan desktop passe
 *     par clic droit / molette / barre espace).
 *   · Brief de mission rétractable ≤640px.
 *   · Rapport de score + leaderboard multi + safe-area.
 * ══════════════════════════════════════════════════════════════════ */

/* ─── Toggle dessin/déplacement : injecté par trace-mode.js,
 * invisible sur les écrans à souris. */
.trace-pan-toggle{ display:none; }

@media (hover: none){
  .trace-pan-toggle{
    display:flex; align-items:center; justify-content:center;
    position:absolute;
    top:150px; right:8px;
    z-index:960;
    min-height:44px;
    padding:10px 14px;
    background:#1a1a1a;
    color:#d8d3c4;
    border:1.5px solid #3a3a3a;
    border-radius:3px;
    font-family:'Barlow Semi Condensed','Barlow',sans-serif;
    font-weight:800; font-size:13px; letter-spacing:1.2px;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .trace-pan-toggle.is-pan{
    background:#0e67b5;
    color:#fff;
    border-color:#0a4f8c;
  }
  html[data-theme="light"] .trace-pan-toggle{
    background:#f8f6f0;
    color:#1a2d52;
    border-color:rgba(0,0,0,.2);
  }
  html[data-theme="light"] .trace-pan-toggle.is-pan{
    background:#0e67b5;
    color:#fff;
  }
}

/* ─── Bouton de repli du brief : injecté par trace-mode.js.
 * Desktop : masqué (le brief ne gêne pas). */
.cb-collapse{ display:none; }

@media (max-width: 640px){
  /* Le brief pleine largeur (pinboard ≤640 : 100vw-32px) passe SOUS la
   * colonne zoom Leaflet fixe (right:8px, z:1000) qui intercepte les
   * taps sur son coin haut-droit (dont le bouton de repli). On laisse
   * cette colonne libre : les boutons zoom font 36px posés à
   * right:18px (8px du container + 10px de margin Leaflet) → le brief
   * s'arrête à 100vw-62px, soit 8px de gouttière avant le zoom. */
  #view-trace.pinboard-theme .trace-mission{
    width:calc(100vw - 78px);
    max-width:calc(100vw - 78px);
  }

  /* ── Toggle dessin/déplacement : à top:150px il recouvrait l'écran
   * CRT du brief, devenu pleine largeur sur téléphone. On le descend
   * en zone pouce, au-dessus de la barre d'actions (cadre dip ≈ 82px
   * + 8px de marge basse + 10px de gouttière). */
  .trace-pan-toggle{
    top:auto;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 100px);
  }
  /* Une fois le rapport de score tiré (même zone basse), le toggle
   * n'a plus d'usage — le tracé est validé. */
  #view-trace:has(#traceScore:not([hidden])) .trace-pan-toggle{
    display:none;
  }

  .trace-mission .cb-collapse{
    display:flex; align-items:center; justify-content:center;
    position:absolute;
    top:8px; right:8px;
    z-index:10;
    width:36px; height:36px;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(232,162,58,.35);
    border-radius:3px;
    color:#e8a23a;
    font-size:14px; line-height:1;
    cursor:pointer;
    transition:transform .2s ease;
  }
  #view-trace.pinboard-theme .trace-mission{ position:absolute; }
  #view-trace.pinboard-theme .trace-mission.is-collapsed .cb-crt,
  #view-trace.pinboard-theme .trace-mission.is-collapsed .cb-progress{
    display:none;
  }
  .trace-mission.is-collapsed .cb-collapse{ transform:rotate(180deg); }

  /* ── HUD COMPACT : la console-brief est dimensionnée pour un
   * moniteur (badge 56px, titre 22px, rangées CRT 22px). Sur
   * téléphone on divise l'échelle ~×0.6 sans toucher à la DA.
   * (`!important` sur le chip : la taille desktop l'est aussi —
   * console-brief.css L82.) */
  #view-trace.pinboard-theme .trace-mission .cb-plate{
    gap:9px;
    padding:6px 44px 7px 9px;   /* right : place du bouton de repli */
    margin-bottom:6px;
  }
  #view-trace.pinboard-theme #traceMissionLine .chip{
    width:30px !important; height:30px !important;
    font-size:18px;
  }
  #view-trace.pinboard-theme .cb-plate-kicker{ font-size:7px; letter-spacing:2px; }
  #view-trace.pinboard-theme .cb-plate-title{ font-size:14px; letter-spacing:.8px; }
  #view-trace.pinboard-theme .cb-plate-state{ font-size:9px; }
  #view-trace.pinboard-theme .trace-mission .cb-crt{ padding:8px 12px 9px; }
  #view-trace.pinboard-theme .trace-mission .cb-crt-mode{
    font-size:10px; letter-spacing:1.2px; margin-bottom:5px;
  }
  #view-trace.pinboard-theme .trace-mission .cb-crt-row{
    font-size:14px; letter-spacing:1px; line-height:1.3;
  }
  #view-trace.pinboard-theme .trace-mission .cb-progress{ font-size:10px; }

  /* Boutons d'action : 52px de haut × typo 13px → 42px × 10px. */
  #view-trace.pinboard-theme .trace-actions .dip-btn{
    height:42px;
    font-size:10px; letter-spacing:1px;
  }

  /* ── Rapport de score "listing" : jamais plus large que l'écran,
   * typo score raisonnable à 320px. Sur écran court (iPhone SE :
   * 568px) le rapport posé à top:300px descendait sur la barre
   * d'actions → plafond + scroll interne (8 + 82 de barre + 16). */
  #view-trace.pinboard-theme .trace-score{
    max-height:calc(100vh - 300px - env(safe-area-inset-bottom, 0px) - 106px);
    max-height:calc(100dvh - 300px - env(safe-area-inset-bottom, 0px) - 106px);
    overflow-y:auto;
  }
  #view-trace.pinboard-theme .trace-score.listing-report .lr-paper{
    padding:12px 22px 14px;
    font-size:11px;
  }
  #view-trace.pinboard-theme .lr-score-val,
  #view-trace.pinboard-theme .trace-score .lr-score-val{ font-size:56px; }

  /* ── Action bar : la colonne (responsive historique) mangeait le
   * centre de la carte → rangée pleine largeur collée en bas,
   * avec safe-area (barre home iOS). */
  #view-trace.pinboard-theme .trace-actions{
    flex-direction:row;
    align-items:stretch;
    left:8px; right:8px;
    transform:none;
    gap:8px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 8px);
  }
  #view-trace.pinboard-theme .trace-actions .dip-btn{
    width:auto; flex:1 1 0; min-width:0;
    font-size:11px; letter-spacing:1.2px;
  }

  /* ── Picker de lignes (free mode) : la grille 5 colonnes donne des
   * chips ~31px sur le brief rétréci → 4 colonnes pour garder des
   * cibles tactiles ≥44px (MÉTRO wrappe en 4 rangées de 4). */
  #view-trace.pinboard-theme .cb-crt-picker .cb-crt-pick-grid{
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
  }

  /* ── Multi : mini-leaderboard sous le theme-toggle, compacté,
   * pour ne plus recouvrir les contrôles haut-droite. */
  .trace-multi-lb{
    top:60px; right:10px;
    min-width:170px; max-width:min(260px, calc(100vw - 20px));
    font-size:11px;
  }
}

/* Très petit écran : typo des chips un cran plus dense, et padding CRT
 * réduit pour que les chips 4 colonnes restent ≥44px à 320px. */
@media (max-width: 400px){
  #view-trace.pinboard-theme .cb-crt-picker .cb-pick-chip{ font-size:15px; }
  #view-trace.pinboard-theme .trace-mission .cb-crt{ padding:8px 10px 9px; }
}

/* Paysage mobile : le brief fixe de 460px de large mangerait la moitié
 * de la carte — on le contraint et on garde les actions compactes. */
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape){
  #view-trace.pinboard-theme .trace-mission{
    min-width:0;
    width:min(340px, 44vw);
    max-width:min(340px, 44vw);
  }
  #view-trace.pinboard-theme .trace-actions{
    flex-direction:row;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 8px);
  }
}