/* screens/fil.css — « Entre vous », le fil des parents.  FAMILLE-12-PLAN.md §4 S20.
   TOKENS ONLY (Seam 3 §3.3 rule 1) — every colour below is a var() already declared in
   tokens.css; this file introduces no new token (S20 does not own tokens.css).
   Owner: S20 alone. S18b adds a club onglet here in Wave 4 without touching what is below
   (FAMILLE-12-PLAN.md §6).

   Reuses base.css (.card .list .row .acts .btn .need .note .empty) and modals.css's .picks —
   the SAME shared pill-chooser the custody-week picker in screens/famille.js already wears — for
   the composer's mode toggle and the note's étiquette. No second picker vocabulary invented. */

.fil-composer { display: flex; flex-direction: column; }
.fil-composer .picks { margin-top: 4px; }

/* D3 (S1's rule, honoured here for this screen's own controls): 16px minimum stops iOS Safari
   auto-zooming on focus — textarea and select both. */
.fil-ta, .fil-evt {
  width: 100%; background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); padding: 11px 14px; font: 400 16px/1.4 var(--font); margin-top: 10px; resize: vertical;
}
.fil-send { margin-top: 12px; width: 100%; justify-content: center; }

.fil-pinned { padding: 4px 20px 0; }
.fil-pinned-h {
  font: 600 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); margin: 12px 0 8px;
}
.fil-pinned .fil-msg + .fil-msg { margin-top: 10px; }

.fil-list { padding: 4px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.fil-day {
  font: 600 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); text-align: center; margin: 10px 0 2px;
}
.fil-more { align-self: center; font: 600 12px/1 var(--font); color: var(--voice); padding: 8px 4px; margin-bottom: 4px; }

.fil-msg p { white-space: pre-wrap; word-break: break-word; }

/* Une note porte une bordure de couleur + une étiquette visible — un message reste nu. Même
   grammaire que .card.lit/.card.litB de base.css (background teinté + box-shadow inset côté
   gauche), déclinée sur les quatre étiquettes plutôt que sur les deux lumières existantes. */
.fil-chip {
  font: 600 10.5px/1 var(--font); letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r-pill); background: var(--chip-bg); color: var(--chip-ink);
}
.fil-tone-school { background: var(--school-soft); border-color: var(--school-line); box-shadow: inset 3px 0 0 var(--school), var(--school-glow); }
.fil-tone-school .fil-chip { color: var(--school); }
.fil-tone-sport { background: var(--sport-soft); border-color: var(--sport-line); box-shadow: inset 3px 0 0 var(--sport), var(--sport-glow); }
.fil-tone-sport .fil-chip { color: var(--sport-ink); }
.fil-tone-voice { background: var(--voice-soft); border-color: var(--voice-line); box-shadow: inset 3px 0 0 var(--voice); }
.fil-tone-voice .fil-chip { color: var(--voice); }
/* santé réutilise --danger — l'attention porte sur la santé de l'enfant, jamais un signal contre
   le parent qui écrit (tokens.css's own header reserves --danger as "never a badge ON a parent";
   cette note-ci est écrite PAR un parent, pas au sujet de lui). */
.fil-tone-danger { background: var(--surface); border-color: var(--danger-line); box-shadow: inset 3px 0 0 var(--danger); }
.fil-tone-danger .fil-chip { color: var(--danger); }

.fil-foot { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 11.5px; color: var(--ink-muted); }
.fil-seen { color: var(--voice); font-weight: 600; }
.fil-edited { font-style: italic; }

/* ── S18b · les deux onglets (« Entre vous » · « Le club »), une seule boîte ─────────────────
   TOKENS ONLY (Seam 3 §3.3) — aucune valeur de couleur, que des var() déjà déclarés. .picks fait
   déjà tout le style des puces ; ceci ne pose que l'espacement de la barre et la grammaire du
   groupe club. */
.fil-tabs { margin: 4px 20px 0; }

/* Un groupe = un fil de club (un enfant peut être dans plusieurs groupes). Un filet discret les
   sépare ; le titre du groupe réutilise .fil-pinned-h (déjà défini plus haut). */
.fil-club-group { padding: 4px 0 6px; }
.fil-club-group .fil-pinned-h { padding: 0 20px; }
.fil-club-group + .fil-club-group { border-top: 1px solid var(--line); margin-top: 10px; }

/* Le côté club, marqué d'un filet à gauche à la lumière --sport (le club) — même grammaire que
   les bordures de note, en plus sobre puisqu'un message du club reste un message. */
.fil-club-side { box-shadow: inset 3px 0 0 var(--sport); }