/* Écran « Mon agenda » (E5.3 — calendrier .ics) — harmonisé Tracéo à l'É6.
   Pas de maquette dédiée dans le handoff : l'écran reprend les motifs des écrans
   refondus — en-tête `.pagehd` (layout.css), cartes `tr-card`, boutons `tr-btn`,
   champs `tr-input`, segment `tr-seg`, badges `tr-src`. Toutes les couleurs et
   tous les espacements viennent des tokens ; les emoji fonctionnels sont
   remplacés par les pictos SVG (tr-icons.js). Préfixe `cal-` : la portée CSS est
   globale dans ce projet. */

.cal-screen { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ── État « agenda connecté » ───────────────────────────────────
   Bandeau vert discret : le flux est branché, on ne montre plus la saisie. */
.cal-conn {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ok-wash);
  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
  border-radius: var(--r-md);
}
.cal-conn__ic { color: var(--ok); display: grid; place-items: center; flex-shrink: 0; }
.cal-conn__txt {
  flex: 1; min-width: 0;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink);
}
.cal-conn__act { display: flex; gap: 6px; flex-wrap: wrap; }

/* Ligne de fraîcheur (dernière vérif + date de publication du fournisseur) */
.cal-meta {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  font-weight: var(--fw-medium); color: var(--ink-3); line-height: var(--lh-snug);
}
.cal-meta:empty { display: none; }

/* ── Configuration (saisie de l'URL + guide) ────────────────── */
.cal-setup { display: flex; flex-direction: column; gap: var(--sp-3); }
.cal-intro {
  margin: 0; color: var(--ink-3);
  font-size: var(--fs-sm); line-height: var(--lh-snug);
}
.cal-intro strong { color: var(--ink-2); font-weight: var(--fw-bold); }
.cal-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cal-form .tr-input { flex: 1 1 220px; min-width: 0; }
.cal-form .tr-btn { flex-shrink: 0; }

/* Guide « où trouver le lien .ics ? » (Option B) */
.cal-guide { margin: 0; }
.cal-guide > summary {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--traceo-red); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  cursor: pointer; list-style: none; padding: 4px 0;
}
.cal-guide > summary::-webkit-details-marker { display: none; }
.cal-guide > summary::before { content: '▸'; color: var(--ink-faint); }
.cal-guide[open] > summary::before { content: '▾'; }
.cal-guide-body { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-3); }
.cal-prov { align-self: flex-start; }
.cal-step-list {
  margin: 0; padding-left: 1.2rem; color: var(--ink-2);
  font-size: var(--fs-sm); line-height: 1.55;
}
.cal-step-list li { margin-bottom: 6px; }
.cal-step-list strong { color: var(--ink); font-weight: var(--fw-bold); }
.cal-step-list code {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 1px 5px;
  font-family: var(--font-mono); font-size: .86em; color: var(--ink);
}
.cal-step-note {
  margin: 0; color: var(--ink-3);
  font-size: var(--fs-xs); line-height: var(--lh-snug);
}
.cal-help-link {
  align-self: flex-start;
  color: var(--traceo-red); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  text-decoration: none;
}
.cal-help-link:hover { text-decoration: underline; }

/* ── Outils (filtre + ajout manuel) ─────────────────────────── */
.cal-tools { display: flex; flex-direction: column; gap: var(--sp-2); }
.cal-opt {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 32px; color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
}
.cal-opt input[type="checkbox"] { accent-color: var(--traceo-red); width: 16px; height: 16px; }

.cal-add { align-self: flex-start; }
.cal-add > summary {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--traceo-red); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  cursor: pointer; list-style: none; padding: 4px 0;
}
.cal-add > summary::-webkit-details-marker { display: none; }
.cal-add-body {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3); margin-top: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  max-width: 460px;
}
/* Ancrage de la liste d'autocomplétion (mêmes items que l'itinéraire) */
.cal-add-field { position: relative; }
.cal-add-field .ac-list { margin-top: 4px; }
.cal-add-body input[type="datetime-local"] {
  color-scheme: light; accent-color: var(--traceo-red);
  font-family: var(--font-mono);
}
:root[data-theme="dark"] .cal-add-body input[type="datetime-local"] { color-scheme: dark; }
.cal-add-err { color: var(--crit); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.cal-add-err:empty { display: none; }
.cal-add-body .tr-btn { align-self: flex-start; }
.cal-add-hint {
  margin: 0; color: var(--ink-3);
  font-size: var(--fs-2xs); line-height: var(--lh-snug);
}

/* Ligne « N masqué(s) · Tout réafficher » */
.cal-hidden-note {
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-3); font-size: var(--fs-xs);
}
.cal-hidden-note:empty { display: none; }
.cal-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--traceo-red); font-family: inherit; font-size: inherit;
  font-weight: var(--fw-semi); text-decoration: underline;
}

/* ── Liste d'événements ──────────────────────────────────────── */
.cal-events { display: flex; flex-direction: column; gap: var(--sp-3); }
.cal-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
}
/* Événement saisi dans l'app (pas issu du flux) : liseré rouge à gauche */
.cal-card-manual { border-left: 3px solid var(--traceo-red); }
.cal-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); min-width: 0;
}
.cal-when {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--ink-2); text-transform: capitalize;
}
/* Badge de provenance (Google / Outlook / Apple / Agenda / Manuel) — `tr-src` */
.cal-src-manual { background: var(--traceo-red-soft); color: var(--traceo-red); }
.cal-title {
  font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink);
  line-height: var(--lh-snug);
}
.cal-loc {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-3); font-size: var(--fs-sm); min-width: 0;
}
.cal-note {
  color: var(--ink-3); font-size: var(--fs-xs); font-style: italic;
}
.cal-card .tr-btn { align-self: flex-start; margin-top: 2px; }

/* Bouton d'action discret de la carte (masquer / supprimer). Visuellement 36 px
   (gabarit `tr-iconbtn--sm`) mais la CIBLE TACTILE est étendue à 44 px par un
   pseudo-élément : on garde la discrétion sans sacrifier l'accessibilité. */
.cal-act {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-xs);
  color: var(--ink-faint); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.cal-act::after { content: ''; position: absolute; inset: -4px; }
.cal-act:hover { color: var(--ink-2); background: var(--surface-2); border-color: var(--border); }
.cal-act-del:hover { color: var(--crit); background: var(--crit-wash); border-color: transparent; }

@media (max-width: 599.98px) {
  .cal-conn__act { width: 100%; }
  .cal-conn__act .tr-btn { flex: 1; }
  .cal-form .tr-btn { width: 100%; }
}

/* Desktop : l'agenda reste une colonne de lecture bornée (pas de maître-détail :
   une carte d'événement n'a pas de « détail » à afficher à côté). */
@media (min-width: 900px) {
  .cal-screen { max-width: 720px; }
}