/* ============================================================================
   #abō — Type Distinction Extension CSS (v2.33.0 / Phase 2c)
   ============================================================================
   Styles ADDITIFS pour la distinction visuelle abō/contrat.
   Chargé APRÈS screens.css et screens-desktop.css dans index.html.

   Doctrine designer §7 :
     • Icône abō     → squircle 12px radius
     • Icône contrat → carré arrondi 6px + outline 1px Sable
     • Label sous le nom (mono uppercase 10px) : "ABŌ" ou "CONTRAT"
     • Distinction sobre, pas de couleurs criardes
   ============================================================================ */


/* ----- Label CONTRAT / ABŌ dans .sub-meta ----- */

.sub-type-label {
  font-family: var(--font-mono, 'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nuit-soft, #6b7888);
  opacity: 0.65;
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.sub-type-label.is-contract {
  color: var(--nuit, #1a2845);
  opacity: 0.78;
  font-weight: 700;
}

.sub-type-sep {
  display: inline-flex;
  align-items: center;
  color: var(--nuit-soft, #6b7888);
  opacity: 0.4;
  font-weight: 400;
  flex-shrink: 0;
  line-height: 1;
  margin: 0 -2px; /* compense le gap:6px existant de .sub-meta */
}


/* ----- Différenciation visuelle de l'icône (.sub-icon) ----- */

/* abō : squircle subtilement plus rond */
.sub-card[data-sub-type="abo"] .sub-icon {
  border-radius: 12px;
}

/* contrat : carré arrondi + outline subtile Sable */
.sub-card[data-sub-type="contrat"] .sub-icon {
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--sable, #ECDDCB);
}


/* ----- Garde-fou : si la card est en pause ou cancelled, le label suit l'opacité ----- */

.sub-card.is-paused .sub-type-label,
.sub-card.is-paused .sub-type-sep,
.sub-card.is-cancelled .sub-type-label,
.sub-card.is-cancelled .sub-type-sep {
  opacity: 0.4;
}


/* ----- Mode sombre ----- */

@media (prefers-color-scheme: dark) {
  .sub-type-label {
    color: var(--ivoire, #F5EFE0);
    opacity: 0.55;
  }
  .sub-type-label.is-contract {
    color: var(--ivoire, #F5EFE0);
    opacity: 0.85;
  }
  .sub-type-sep {
    color: var(--ivoire, #F5EFE0);
    opacity: 0.3;
  }
  .sub-card[data-sub-type="contrat"] .sub-icon {
    box-shadow: inset 0 0 0 1px rgba(236, 221, 203, 0.25);
  }
}


/* ----- Responsive ----- */

@media (max-width: 480px) {
  /* Sur très petit écran, on garde le label mais légèrement plus compact */
  .sub-type-label {
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }
}


/* ----- Print : on garde la distinction même sur le papier ----- */

@media print {
  .sub-type-label {
    color: #000 !important;
    opacity: 1 !important;
  }
}