/*
 * Interface KONDENSA — modèle Apple (docs/design.md).
 *
 * `system-ui` donne San Francisco nativement sur macOS et iOS, sans problème de
 * licence : c'est la réponse propre au §2 de la note de design.
 *
 * Règle d'arbitrage tenue ici : entre la sobriété et la lisibilité d'une
 * réserve, la réserve gagne. Les blocs ambrés — « à vérifier », OCR, messages
 * non rattachés — gardent leur contraste, en clair comme en sombre.
 *
 * Verre dépoli (galaxie SANTVIA) réservé aux éléments qui recouvrent vraiment
 * autre chose — panneau de réglages, bandeau de mise à jour, confirmation
 * passagère — jamais sur .reserve ni sur le corps d'un digest : un flou n'a
 * rien à faire sur un contenu qui ne recouvre personne, et jamais sur une
 * réserve qu'il rendrait moins lisible.
 */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #edeff3;
  --text: #14181d;
  --muted: #6b7684;
  --faint: #8a94a2;
  --border: #e0e4ea;
  --border-soft: #eef1f5;
  --accent: #4a5bc4;
  --accent-soft: #f3f5fd;

  /* Réserve : calme, mais jamais petite ni pâle. */
  --warn-text: #7a4a0e;
  --warn-strong: #b06a12;
  --warn-bg: #fdfaf4;
  --warn-border: #e6d9c0;

  --ok: #3f7a52;
  --radius: 12px;
  --radius-lg: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10141a;
    --surface: #171c23;
    --surface-2: #1b2129;
    --text: #e9edf2;
    --muted: #8e9aa8;
    --faint: #7b8794;
    --border: #2a323c;
    --border-soft: #232a33;
    --accent: #97a4f2;
    --accent-soft: #1d2333;

    --warn-text: #f0dcbe;
    --warn-strong: #e0a45c;
    --warn-bg: #211c12;
    --warn-border: #4a3d24;

    --ok: #6fbf8c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  display: grid;
  grid-template-columns: 248px 386px 1fr;
  height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
}

/*
 * Réactivité (P1.1) — trois paliers, aucun ne cache une réserve ni ne dépend
 * de JS : la mise en page se resserre, elle ne recompose jamais le produit.
 * En dessous de 1200px la revue et la lecture restent côte à côte mais plus
 * étroites ; en dessous de 900px, un poste plus petit ou une fenêtre partagée,
 * la liste passe au-dessus de la lecture (motif courant des clients de
 * messagerie), la navigation gardant sa hauteur pleine ; en dessous de 560px
 * (fenêtre très réduite), la navigation se resserre encore.
 */
@media (max-width: 1200px) {
  body { grid-template-columns: 208px 320px 1fr; }
}

@media (max-width: 900px) {
  body {
    grid-template-columns: 188px 1fr;
    grid-template-rows: minmax(180px, 34vh) 1fr;
  }
  .nav { grid-column: 1; grid-row: 1 / span 2; }
  .list { grid-column: 2; grid-row: 1; border-right: none; border-bottom: 1px solid var(--border-soft); }
  .reader { grid-column: 2; grid-row: 2; }
}

@media (max-width: 560px) {
  body { grid-template-columns: 148px 1fr; }
  .brand-name { font-size: 14px; }
  .msg-subject { font-size: 17px; }
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- navigation */

.nav {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  overflow: hidden;
}

.brand { padding: 0 20px 22px; display: flex; flex-direction: column; gap: 3px; }
.brand-name { font-size: 15px; font-weight: 640; letter-spacing: -0.01em; }
.brand-account { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.folders { padding: 0 12px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.folder {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 8px; border-radius: 7px; font-size: 13px; color: var(--muted);
  width: 100%; text-align: left;
}
.folder > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder:hover { background: color-mix(in oklab, var(--surface) 60%, transparent); }
.folder.is-on { background: var(--surface); color: var(--text); font-weight: 580; }
.folder-count { font-size: 12px; color: var(--faint); }
.folder.is-on .folder-count { color: var(--accent); }

.nav-foot { margin-top: auto; padding: 14px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.nav-foot::before { content: ""; height: 1px; background: var(--border); }
.privacy { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 550; color: var(--ok); }
.privacy.is-warn { color: var(--warn-strong); }
.privacy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.privacy-note { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.45; }

/* --------------------------------------------------------------------- liste */

.list { background: var(--surface); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; overflow: hidden; }
.list-head { padding: 15px 18px 13px; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 11px; }

.search { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 8px; padding: 7px 11px; }
.search svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; }
.search input { border: 0; background: none; outline: none; width: 100%; font-size: 13px; }

.tabs { display: flex; gap: 6px; }
.tab { font-size: 12.5px; padding: 5px 12px; border-radius: 7px; border: 1px solid var(--border); color: var(--muted); }
.tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 550; }

.rows { flex: 1; overflow-y: auto; }
.row {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px;
  padding: 13px 18px; border-bottom: 1px solid var(--border-soft); border-left: 3px solid transparent;
}
.row:hover { background: var(--bg); }
.row.is-on { background: var(--accent-soft); border-left-color: var(--accent); }
.row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.row-from { font-size: 13.5px; font-weight: 520; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.is-unread .row-from { font-weight: 660; }
.row-date { font-size: 11.5px; color: var(--faint); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.row-subject { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.is-unread .row-subject { color: var(--text); font-weight: 560; }
.row-preview { font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-badges { display: flex; gap: 6px; font-size: 11px; color: var(--faint); }

/* ------------------------------------------------------------------- lecture */

.reader { background: var(--surface); overflow-y: auto; padding: 22px 28px 32px; }
.empty { color: var(--faint); padding: 40px 0; text-align: center; }

.msg-head { display: flex; flex-direction: column; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.msg-subject { font-size: 20px; font-weight: 640; letter-spacing: -0.02em; margin: 0; }
.msg-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); }
.msg-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.action { font-size: 12.5px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 13px; }
.action:hover { border-color: var(--accent); color: var(--accent); }

.msg-body { font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; padding: 20px 0; }

/* Bandeau de condensation — la condensation vit DANS le client. */
.digest-band {
  margin: 18px 0 0; border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  background: var(--accent-soft); border-radius: var(--radius); padding: 17px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.digest-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.digest-title { font-size: 15px; font-weight: 640; letter-spacing: -0.01em; }
.digest-top-right { display: flex; align-items: baseline; gap: 12px; }
.digest-count { font-size: 12px; color: var(--muted); }
.point { display: flex; gap: 12px; align-items: baseline; }
.point-date { font-size: 11.5px; color: var(--faint); width: 46px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.point-text { font-size: 13.5px; line-height: 1.55; }
.cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 5px; padding: 0 5px;
  border: 1px solid var(--border); border-radius: 5px;
  font-size: 10.5px; color: var(--muted); vertical-align: 1px;
}
.mode-note { font-size: 12px; color: var(--muted); border-top: 1px solid var(--border-soft); padding-top: 10px; }

/* RÉSERVES — jamais repliées, jamais pâles. */
.reserve {
  border: 1px solid var(--warn-border); background: var(--warn-bg);
  border-radius: var(--radius); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px; margin-top: 14px;
}
.reserve-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 640; letter-spacing: 0.05em; text-transform: uppercase; color: var(--warn-strong); }
.reserve-head svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.reserve .point-text { color: var(--warn-text); }
.reserve .point-date { color: var(--warn-strong); }
.reserve-note { font-size: 12.5px; color: var(--warn-text); line-height: 1.5; margin: 0; }
.ocr { font-size: 12px; color: var(--warn-strong); font-style: italic; }

.sources { margin-top: 18px; }
.sources-head { font-size: 12px; font-weight: 640; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.source { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.source-subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-from { color: var(--faint); font-size: 12px; flex-shrink: 0; }

.attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
.attachment { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; font-size: 12.5px; }
.attachment.is-unreadable { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }

/* ------------------------------------------------------------- la revue
 *
 * Ce qui cloche doit se voir sans être lu. Une bordure chaude et des étiquettes
 * de raison : jamais une alerte sans explication — une mise en avant qu'on ne
 * peut pas justifier ne sera pas suivie.
 */

.review-since {
  margin: 0;
  padding: 12px 16px 4px;
  font-size: 12px;
  color: var(--muted);
}

.row.is-hot {
  border-left: 3px solid var(--warn-strong);
  padding-left: 13px;
}

.row-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.flag {
  font-size: 11px;
  line-height: 1.55;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  white-space: nowrap;
}

/* Rapprochements suggérés (Kopilvia, ADR 0004 D3.2) — une aide en plus, pas
 * une alerte : même bandeau que la condensation assistée, jamais le ton warn
 * réservé à ce qui cloche. */
.link-suggestions {
  margin: 10px 16px 4px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--border));
  background: var(--accent-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.link-suggestions-head {
  font-size: 11px; font-weight: 640; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.link-suggestion {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.link-suggestion-text { font-size: 12.5px; }
.link-suggestion-actions { display: flex; gap: 6px; flex-shrink: 0; }
.link-suggestion-actions .decision { padding: 5px 11px; font-size: 12px; }

.decisions {
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.decision-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.decision {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.decision:hover { background: var(--accent-soft); border-color: var(--accent); }

/* « Supprimer » ne se distingue que discrètement : assez pour ne pas être
 * cliqué par inadvertance, pas assez pour dramatiser un geste courant. */
.decision.is-grave { color: var(--muted); }
.decision.is-grave:hover {
  color: var(--warn-text);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

/* Même traitement pour un geste irréversible hors barre de décision (purge). */
.action.is-grave { color: var(--muted); }
.action.is-grave:hover {
  color: var(--warn-text);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}


/* --------------------------------------- file de validation clinique
 *
 * Le seul écran du produit où un clic écrit dans le dossier d'un patient. Il
 * doit donc montrer *les deux* identités — celle que le compte rendu prétend et
 * celle que le téléservice a rendue — plutôt qu'une ligne fondue où l'on ne
 * saurait plus laquelle on confirme.
 */

.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: var(--warn-strong); color: #fff;
  font-size: 10.5px; font-weight: 640; vertical-align: 1px;
}
.tab.is-on .tab-count { background: rgb(255 255 255 / 0.28); }

.queue-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-soft);
  font-size: 12px; color: var(--muted); flex-wrap: wrap;
}
.queue-note {
  margin: 0; padding: 10px 16px; font-size: 12px; line-height: 1.5;
  color: var(--warn-text); background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-border);
}

/* Les deux identités, côte à côte. Jamais l'une sans l'autre : c'est leur
 * écart qui justifie la question posée. */
.identities { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
@media (max-width: 1100px) { .identities { grid-template-columns: 1fr; } }

.identity {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.identity.is-verified { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); background: var(--accent-soft); }
.identity-head {
  font-size: 12px; font-weight: 640; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.identity .field-note { margin: 0; }

.reject-note {
  font: inherit; font-size: 13px; width: 100%; margin-top: 6px;
  padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.reject-note:focus { outline: none; border-color: var(--accent); }

/* Confirmer est le geste attendu — mais il n'est proposé que lorsqu'une
 * identité vérifiée existe, jamais « au cas où ». */
.decision.is-primary {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 550;
}
.decision.is-primary:hover { background: color-mix(in oklab, var(--accent) 88%, #000); }

/* ------------------------------------------------- composition et réglages */

.brand-account {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 12px; color: var(--muted);
  background: none; border: none; padding: 0; cursor: default;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand-account.is-switchable { cursor: pointer; }
.brand-account.is-switchable:hover { color: var(--text); text-decoration: underline; }

.settings-open {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 13px; color: var(--muted);
  background: none; border: none; padding: 7px 8px; margin-bottom: 8px;
  border-radius: 7px; cursor: pointer; text-align: left;
}
.settings-open:hover { background: var(--surface); color: var(--text); }
.settings-open svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* Les champs de saisie des réglages. */
.field { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.field-label { flex: 0 0 92px; font-size: 12px; color: var(--muted); }
.field-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

select.action { padding-right: 8px; }

/* Le type du message, là où il se lit — et se corrige. */
.kind-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft);
  font-size: 12px; color: var(--muted);
}
.kind-value {
  font-weight: 580; color: var(--text);
  padding: 1px 8px; border-radius: 999px; background: var(--surface-2);
}
.kind-basis { font-style: italic; }
.kind-fix, .kind-scope { font: inherit; font-size: 12px; }
.kind-fix {
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px;
}
.kind-scope { display: inline-flex; align-items: center; gap: 5px; }

/*
 * Le panneau : on l'ouvre, on ne s'y rend pas.
 *
 * Verre dépoli — mais seulement là où quelque chose est réellement recouvert
 * (ce panneau flotte au-dessus de la liste et du lecteur) : un flou posé sur un
 * fond uni serait un décor, pas de la profondeur. Aucune réserve n'est
 * concernée par ce panneau ; docs/design.md §3 reste intact ailleurs.
 */
.sheet { position: fixed; inset: 0; z-index: 40; }
.sheet-backdrop {
  position: absolute; inset: 0; background: rgba(15, 20, 27, 0.24);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sheet-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(560px, 100%); display: flex; flex-direction: column;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 48px rgba(15, 20, 27, 0.14), inset 1px 0 0 rgba(255, 255, 255, 0.06);
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border-soft);
}
.sheet-title { margin: 0; font-size: 16px; font-weight: 600; }
.sheet-close {
  display: flex; align-items: center; justify-content: center;
  font: inherit; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px;
}
.sheet-close:hover { background: var(--surface-2); color: var(--text); }
.sheet-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sheet-body { flex: 1; overflow-y: auto; padding: 4px 20px 28px; }

.settings-block { padding: 18px 0; border-bottom: 1px solid var(--border-soft); }
.settings-block:last-child { border-bottom: none; }
.settings-title { margin: 0 0 4px; font-size: 13px; font-weight: 620; letter-spacing: 0.01em; }
.settings-lead { margin: 0 0 14px; font-size: 12px; color: var(--muted); line-height: 1.55; }

.setting { margin-bottom: 18px; }
.setting:last-child { margin-bottom: 0; }
.setting-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 540; }
.setting-inline { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.setting-inline .setting-label { margin: 0; font-weight: 460; }
.setting-inline select, .setting-inline input {
  font: inherit; font-size: 13px; padding: 5px 8px; min-width: 150px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 7px;
}

.choices { display: flex; flex-direction: column; gap: 6px; }
.choice {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: baseline;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.choice:hover { border-color: var(--accent); }
.choice.is-on { border-color: var(--accent); background: var(--accent-soft); }
.choice input { margin: 0; grid-row: span 2; align-self: center; }
.choice-label { font-size: 13px; font-weight: 520; }
.choice-hint { grid-column: 2; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Ce que le tri a appris : des lignes lisibles, pas des poids. */
.rules { display: flex; flex-direction: column; gap: 6px; }
.rule {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: 8px;
}
.rule-what { font-size: 13px; }
.rule-meta { grid-column: 1; font-size: 11px; color: var(--muted); }
.rule .action { grid-column: 2; grid-row: span 2; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/*
 * Droit à l'effacement (RGPD) : irréversible, donc jamais un clic accidentel.
 * Même palette « à vérifier » (--warn-*) que la réserve du digest — sobre,
 * pas un rouge d'alarme — parce que ce n'est pas une panne, c'est un droit.
 */
.danger-zone { display: flex; flex-direction: column; gap: 8px; }
.danger-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--warn-border); border-radius: 8px; background: var(--warn-bg);
}
.danger-what { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.danger-what .field-note { margin: 0; }
.danger-confirm {
  font: inherit; font-size: 12.5px; padding: 6px 9px; width: 190px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 7px;
}
.action.is-danger { border-color: var(--warn-border); color: var(--warn-strong); }
.action.is-danger:hover:not(:disabled) { border-color: var(--warn-strong); background: var(--warn-bg); }
.action.is-danger:disabled { opacity: .45; cursor: not-allowed; }

.practitioner-form { display: flex; gap: 8px; margin-top: 12px; }
.practitioner-form input {
  flex: 1; font: inherit; font-size: 13px; padding: 6px 9px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 7px;
}

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  padding: 9px 16px; border-radius: 999px; font-size: 13px;
  color: var(--surface); background: color-mix(in oklab, var(--text) 88%, transparent);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease;
  z-index: 60;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/*
 * Bandeau de mise à jour (coque desktop uniquement, voir update.js).
 * Discret et non bloquant à dessein (CLAUDE.md) : un fil en bas de fenêtre,
 * jamais une boîte de dialogue modale au-dessus du travail en cours.
 */
.update-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--accent-soft) 78%, transparent);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(15, 20, 27, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text); font-size: 13px; z-index: 55;
}
.update-banner .update-banner-text { flex: 1; }
.update-banner button {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer;
}
.update-banner button[data-update-install] { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.update-banner button:disabled { opacity: .6; cursor: default; }
.update-banner button[data-update-dismiss] { padding: 6px; }
.update-banner button[data-update-dismiss] svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}

/*
 * Connexion Idenva (P0.2). N'apparaît que si un issuer Idenva est réellement
 * joignable — sinon l'agent ne sert jamais cet écran, repli local (zéro
 * blocage). Même vocabulaire visuel que le reste (verre dépoli, accent sobre).
 */
.login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.login-card {
  width: min(380px, calc(100vw - 48px));
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 24px 60px rgba(15, 20, 27, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
}
.login-card svg {
  width: 30px; height: 30px; margin: 0 auto 14px;
  fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.login-card h1 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.login-card p { font-size: 13px; color: var(--muted); margin: 0 0 22px; line-height: 1.5; }
.login-card button {
  width: 100%; padding: 11px 16px; border-radius: 10px; border: none;
  background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 550;
  cursor: pointer;
}
.login-card button:hover { background: color-mix(in oklab, var(--accent) 88%, #000); }