/* ========== The adventure's Rencontres tab (8B): the list beside the open encounter ==========
   Mockup AdvEncounters (1440 GM, 1180 landscape, 820 portrait): two panes, gap 16 px, the list
   340 px (>= 1280), 290 px (1024-1279.98), 250 px (<= 1023.98). */

/* The Places recipe (places.css): the adventure's title scrolls away, then both panes stick
   under the app bar and the sub-tab bar and each scrolls inside itself. */
.anima-main-content:has(.encounters-page) {
  padding-bottom: 12px;
}
.encounters-page {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.encounters-list,
.encounter-open {
  position: sticky;
  top: calc(var(--chrome-h) + var(--subtab-bar-h) + 1px + 12px);
  max-height: calc(100dvh - var(--chrome-h) - var(--subtab-bar-h) - 1px - 24px);
  min-width: 0;
  box-sizing: border-box;
}

/* On this page the ambient button leaves the bottom-right corner, over the open encounter
   (the Places precedent). */
body:has(.encounters-page) .anima-ambient-fab {
  right: auto;
  left: 24px;
}

/* ── The list ── */
.encounters-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.encounters-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: var(--touch-min);
}
.encounters-list-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.encounters-new {
  min-height: var(--touch-min);
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  /* In portrait the 250 px list cannot hold it beside the title: it goes under it, whole. */
  white-space: nowrap;
}
.encounters-new:hover {
  background: var(--accent-hover);
}
.encounters-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Room under the last row: it scrolls clear of the ambient button, now bottom left. */
  padding-bottom: 5rem;
  scrollbar-width: thin;
}
.encounters-row {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  text-align: left;
}
.encounters-row:hover {
  border-color: var(--border-strong);
}
/* The open encounter: a 2 px accent border, the padding 1 px less so the row does not move. */
.encounters-row[aria-current='true'] {
  padding: 7px 11px;
  border: 2px solid var(--accent);
  background: var(--selected);
}
.encounters-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}
.encounters-row-name {
  font-size: 0.85rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.encounters-row-meta {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.encounters-row-live {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8rem;
  font-weight: 700;
}
.encounters-row-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
}
.encounters-list-empty {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

/* ── The open encounter ── */
.encounter-open {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  scrollbar-width: thin;
}
/* Everything in the pane takes its width. */
.encounter-open > * {
  align-self: stretch;
}
.encounter-open-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.encounter-open-heading {
  flex: 1;
  min-width: 0;
}
.encounter-open-eyebrow {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.encounter-open-description {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}
.encounter-open-header-actions {
  flex: none;
  display: flex;
  gap: 8px;
}
.encounter-open-secondary {
  min-height: var(--touch-min);
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
}
.encounter-open-danger {
  color: var(--danger);
}
/* The action bar: combat, board, time passage. It wraps on narrow panes. */
.encounter-open-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.encounter-open-action {
  min-height: 52px;
}
.encounter-open-start,
.encounter-open-board {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.encounter-open-start {
  padding: 0 22px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.encounter-open-start:hover {
  background: var(--accent-hover);
}
.encounter-open-start svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
/* The chrome token: the dark button the board's own bars use. */
.encounter-open-board {
  background: var(--chrome);
  color: var(--chrome-ink);
  font-weight: 500;
}
.encounter-open-turn {
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.anima-time-passage-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.anima-time-passage-inline-label {
  font-size: 0.8rem;
  color: var(--muted);
}
.anima-time-passage-inline-amount,
.anima-time-passage-inline-unit {
  min-height: var(--touch-min);
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.anima-time-passage-inline-amount {
  width: 64px;
  font-family: var(--font-num);
}
.anima-time-passage-inline-apply {
  min-height: var(--touch-min);
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
}
.encounter-open-title {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-size: 1.35rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.encounter-open--empty {
  height: calc(100dvh - var(--chrome-h) - var(--subtab-bar-h) - 1px - 24px);
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  border: 2px dashed var(--border-strong);
  border-radius: 12px;
  text-align: center;
}
.encounter-open--empty > :not(button) {
  align-self: center;
}
.encounter-open-empty-icon {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
}
.encounter-open-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}
.encounter-open-empty-hint {
  max-width: 420px;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}
.encounter-open-new {
  min-height: 52px;
  padding: 0 22px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
}
.encounter-open-new:hover {
  background: var(--accent-hover);
}

/* ── The participants, out of combat: cards 3 / 2 / 1 columns, spectators, the GM's tools ── */
.participant-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.participant-cards-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.participant-cards-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.participant-cards-hint {
  font-size: 0.8rem;
  color: var(--muted);
}
.participant-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}
.participant-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
/* The open card: a 2 px accent border, the padding 1 px less so the card does not move. */
.participant-card.is-open {
  padding: 9px 11px;
  border: 2px solid var(--accent);
}
.participant-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.participant-card-head .anima-character-avatar,
.participant-spectator .anima-character-avatar {
  flex: none;
  width: 40px;
  height: 40px;
}
.participant-card-name {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  font-family: var(--font-body);
}
.participant-card-name-text {
  max-width: 100%;
  font-size: 0.85rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.participant-card-meta {
  max-width: 100%;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.participant-card-kind {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.participant-card-kind.is-pc {
  border-color: var(--token-pc);
  background: var(--token-pc);
  color: var(--bg);
}
.participant-card-hp {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}
.participant-card-hp-label {
  font-weight: 700;
}
/* The bar fills the card's width: the HP component, its edit toggle (GM, owner) and the bar are
   all stretched, and the track takes what the label leaves. */
.participant-card-hp .anima-participant-hp,
.participant-card-hp .anima-participant-hp-toggle {
  display: flex;
  flex: 1;
  min-width: 0;
}
.participant-card-hp .anima-participant-hp-toggle {
  min-height: var(--touch-min);
  align-items: center;
}
.participant-card-hp .anima-hp-bar {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.participant-card-hp .anima-hp-bar-track {
  flex: 1;
  min-width: 0;
}
.participant-card-hp .anima-hp-bar-label {
  font-family: var(--font-num);
  color: var(--ink);
}
.participant-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.participant-card-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
}
.participant-card-pill--hidden {
  background: var(--chrome);
  color: var(--chrome-ink);
}
.participant-card-pill--effect {
  border: 1px solid var(--danger);
  color: var(--danger);
}
.participant-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.participant-card-body > .anima-participant-sheet {
  align-self: stretch;
}
/* In a card the sheet is not a box of its own: the card is. */
.participant-card .anima-participant-sheet--embedded {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.participant-card-detail,
.participant-spectator-join {
  min-height: var(--touch-min);
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
}
.participant-spectators-title {
  margin: 4px 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.participant-spectators {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.participant-spectator {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 4px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
}
.participant-spectator-name {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.participant-tools {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.participant-tool {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
}
.participant-tool--add {
  color: var(--accent);
}

@media (max-width: 1279.98px) {
  .encounters-page {
    grid-template-columns: 290px minmax(0, 1fr);
  }
  .participant-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023.98px) {
  .encounters-page {
    grid-template-columns: 250px minmax(0, 1fr);
  }
  /* The header's buttons go under the name; the time passage takes its own row. */
  .encounter-open-header {
    flex-wrap: wrap;
  }
  .anima-time-passage-inline {
    flex-basis: 100%;
    margin-left: 0;
  }
  .participant-cards-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ========== « Ajouter un participant » side panel (8B, mockup AdvEncounters) ==========
   Tabs, a search, three chips, rows of 52 px; the footer says the panel stays open. */
.add-participant-panel .anima-side-panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}
.add-participant-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.add-participant-tab {
  flex: 1;
  height: 48px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 500;
}
.add-participant-tab[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.add-participant-error {
  margin: 0 20px;
}
.add-participant-existing,
.add-participant-oneshot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 20px 12px;
}
.add-participant-search {
  min-height: var(--touch-min);
}
.add-participant-filters {
  display: flex;
  gap: 6px;
}
.add-participant-filter {
  flex: 1;
  min-height: var(--touch-min);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 500;
}
.add-participant-filter[aria-pressed="true"] {
  border: 2px solid var(--accent);
  background: var(--selected);
}
.add-participant-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.add-participant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  border-bottom: 1px solid var(--border);
}
.add-participant-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}
.add-participant-kind {
  padding: 1px 6px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 0.8rem;
}
.add-participant-kind.is-pnj {
  border-color: var(--hp);
  color: var(--hp);
}
.add-participant-kind.is-pj {
  border-color: var(--success);
  color: var(--success);
}
.add-participant-added {
  width: 120px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}
.add-participant-add {
  width: 120px;
  min-height: var(--touch-min);
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
}
.add-participant-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.add-participant-label {
  font-size: 0.8rem;
  color: var(--muted);
}
.add-participant-submit {
  align-self: flex-end;
  min-height: var(--touch-min);
}
.add-participant-panel .anima-side-panel-actions {
  align-items: center;
  justify-content: space-between;
}
.add-participant-note {
  flex: 1;
  font-size: 0.8rem;
  color: var(--muted);
}
.add-participant-close {
  min-height: 52px;
}

/* « Nouvelle rencontre » / « Modifier la rencontre »: short windows, 480 px (mockup [AdvEncounters]).
   The socle's `.anima-modal.anima-modal--short` (components.css) sets 520 px: the third class
   makes this rule win by specificity, whatever order the stylesheets load in. */
.anima-modal.anima-modal--short.encounter-form-window {
  width: min(480px, calc(100vw - 48px));
}
.encounter-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.encounter-form-field,
.encounter-place-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.encounter-form-label {
  font-size: 0.8rem;
  color: var(--muted);
}
.encounter-form-input {
  box-sizing: border-box;
  min-height: var(--touch-min);
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 0.9rem;
}
.encounter-form-input:focus {
  border: 2px solid var(--accent);
  outline: none;
  padding: 0 11px;
}
.encounter-place-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.encounter-place-chip {
  min-height: var(--touch-min);
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 500;
}
.encounter-place-chip[aria-pressed="true"] {
  border: 2px solid var(--accent);
  background: var(--selected);
}
.encounter-form-cancel,
.encounter-form-submit {
  min-height: 48px;
  border-radius: 10px;
  font-size: 0.85rem;
}
.encounter-form-cancel {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink);
  font-weight: 500;
}
.encounter-form-submit {
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}