/* ============================================================
   ASTRA GENESIS, 15-secondary-resources.css
   v0.70.0, ressources secondaires : popover du chip "+" de la barre du
   haut et panneau de colonne droite (js/02d-secondary-resources.js).
   Même composant (.sr-group / .sr-row) aux deux endroits.
   ============================================================ */

/* ---------- hub « + MATÉRIAUX » (v0.70.2) ----------
   Pill à contour teal, fond translucide sombre, collé aux primaires.
   Dynamisme SANS canvas (règle WebGL, CLAUDE.md) :
     - shimmer idle : bande en translateX (composité), très faible ;
     - tirets le long du contour : SVG stroke-dashoffset, actifs
       uniquement au survol / focus clavier / popover ouvert ;
     - pulse du "+" : pseudo-élément en scale + opacity (composité),
       seulement en état .is-alert.
   Pause : html.fx-paused (onglet caché, js/01g-effects.js) et
   html.fx-reduced (réglage « Effets réduits » persisté) coupent toute
   animation ; l'alerte reste lisible en statique. */
.res-hub{
  --hub-r:999px;
  position:relative;flex:none;align-self:center;overflow:hidden;
  display:inline-flex;align-items:center;gap:calc(6px*var(--text-scale));
  height:calc(30px*var(--text-scale));margin:0 calc(8px*var(--text-scale)) 0 calc(2px*var(--text-scale));
  padding:0 calc(13px*var(--text-scale)) 0 calc(10px*var(--text-scale));
  border:1px solid rgba(45,212,191,.55);border-radius:var(--hub-r);
  background:rgba(0,4,10,.55);color:#E6EDF5;cursor:pointer;
  font-family:var(--font-head);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.res-hub:hover, .res-hub[aria-expanded="true"]{
  border-color:#2DD4BF;background:rgba(45,212,191,.10);box-shadow:0 0 12px rgba(45,212,191,.22);
}
.res-hub:focus-visible{outline:2px solid #2DD4BF;outline-offset:2px;}
.res-hub-plus{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:calc(16px*var(--text-scale));height:calc(16px*var(--text-scale));border-radius:50%;
  font-family:var(--font-mono);font-size:.82rem;line-height:1;color:#2DD4BF;
}
.res-hub-lbl{position:relative;}

/* shimmer idle : une bande qui traverse le pill toutes les 9 s */
.res-hub::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(45,212,191,.10) 50%, transparent 100%);
  transform:translateX(-120%);will-change:transform;
  animation:resHubShimmer 9s ease-in-out infinite;
}
@keyframes resHubShimmer{
  0%, 70%{transform:translateX(-120%);}
  100%{transform:translateX(320%);}
}

/* tirets le long du contour (géométrie du rect en CSS) */
.res-hub-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.res-hub-dash{
  x:0.5px;y:0.5px;width:calc(100% - 1px);height:calc(100% - 1px);
  rx:calc(15px*var(--text-scale));ry:calc(15px*var(--text-scale));
  fill:none;stroke:#5EEAD4;stroke-width:1.5px;stroke-dasharray:3 4;stroke-linecap:round;
  opacity:0;transition:opacity .2s ease;
}
.res-hub:hover .res-hub-dash, .res-hub:focus-visible .res-hub-dash, .res-hub[aria-expanded="true"] .res-hub-dash{
  opacity:1;animation:resHubDash 1.6s linear infinite;
}
@keyframes resHubDash{from{stroke-dashoffset:0;}to{stroke-dashoffset:-14;}}

/* pulse du "+" : seuil d'alerte d'une ressource secondaire */
.res-hub.is-alert{border-color:#2DD4BF;}
.res-hub-plus::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1.5px solid #2DD4BF;opacity:0;transform:scale(1);
}
.res-hub.is-alert .res-hub-plus{background:rgba(45,212,191,.18);}
.res-hub.is-alert .res-hub-plus::after{animation:resHubPulse 1.6s ease-out infinite;will-change:transform, opacity;}
@keyframes resHubPulse{
  0%{transform:scale(1);opacity:.75;}
  100%{transform:scale(2.3);opacity:0;}
}

/* ligne concernée par l'alerte, dans le popover et le panneau */
.sr-row.is-alert .sr-name{color:#5EEAD4;}
.sr-row.is-alert .sr-ic{box-shadow:0 0 0 1px #2DD4BF;}

/* guards : onglet caché, effets réduits */
html.fx-paused .res-hub::after, html.fx-paused .res-hub-dash, html.fx-paused .res-hub-plus::after,
html.fx-reduced .res-hub::after, html.fx-reduced .res-hub-dash, html.fx-reduced .res-hub-plus::after{animation:none !important;}
html.fx-reduced .res-hub::after{display:none;}
@media (prefers-reduced-motion: reduce){
  .res-hub::after{display:none;}
  .res-hub-dash, .res-hub-plus::after{animation:none !important;}
}

/* ---------- groupes et lignes ---------- */
.sr-body{display:flex;flex-direction:column;gap:10px;}
.sr-group{display:flex;flex-direction:column;gap:2px;}
.sr-group-head{
  margin:0 0 3px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
}
.sr-row{
  display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;align-items:center;gap:8px;
  width:100%;padding:4px 6px;margin:0;border:1px solid transparent;border-radius:8px;
  background:transparent;color:var(--ink-1);font:inherit;text-align:left;cursor:pointer;transition:background .15s, border-color .15s;
}
.sr-row:hover{background:rgba(45,212,191,.06);border-color:rgba(45,212,191,.25);}
.sr-row:focus-visible{outline:2px solid #2DD4BF;outline-offset:1px;}
.sr-row.is-soon{cursor:default;opacity:.5;}
.sr-row.is-soon:hover{background:transparent;border-color:transparent;}
.sr-ic{
  width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  color:var(--res-tint, var(--ink-2));
  background:color-mix(in srgb, var(--res-tint, #9AA7B5) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--res-tint, #9AA7B5) 38%, transparent);
}
.sr-ic svg{width:13px;height:13px;}
.sr-name{font-family:var(--font-head);font-size:.74rem;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sr-tier{font-family:var(--font-mono);font-size:.56rem;color:var(--ink-2);letter-spacing:.04em;}
.sr-v{font-family:var(--font-mono);font-size:.76rem;font-weight:600;color:var(--ink-1);text-align:right;}
.sr-v.up{color:var(--lime);}
.sr-v.down{color:var(--rose);}
.sr-rate{min-width:52px;font-family:var(--font-mono);font-size:.62rem;color:var(--ink-3);text-align:right;}
.sr-rate.up{color:var(--lime);}
.sr-rate.down{color:var(--rose);}

/* ---------- popover ancré sous la barre du haut ---------- */
.sr-pop{
  position:fixed;z-index:650;width:min(320px, calc(100vw - 16px));
  max-height:calc(100vh - var(--hud-h) - var(--nav-h, 80px) - 24px);overflow-y:auto;
  padding:10px 10px 8px;border-radius:12px;
  background:var(--qx-glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--line-strong);box-shadow:var(--shadow-deep);
  scrollbar-width:none;
}
.sr-pop::-webkit-scrollbar{display:none;}
.sr-pop[hidden]{display:none;}
.sr-pop:focus{outline:none;}
.sr-pop-head{
  margin:0 4px 8px;font-family:var(--font-head);font-weight:600;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-1);
}
.sr-pop-all{
  display:block;width:100%;margin-top:8px;padding:6px 8px;border-radius:8px;
  background:#121C2B;border:1px solid #1E2E40;color:var(--cyan);
  font-family:var(--font-mono);font-size:.64rem;cursor:pointer;transition:border-color .15s, background .15s;
}
.sr-pop-all:hover{border-color:#2DD4BF;background:rgba(45,212,191,.08);}
.sr-pop-all:focus-visible{outline:2px solid #2DD4BF;outline-offset:1px;}