/*
 * Coach screens (wagon 3.3, 30/09/2026). Loaded by coach_base.html only,
 * after tokens.css, tokens-marca.css, app.css, telas.css and da.css.
 *
 * Every value here is a token of tokens.css or tokens-marca.css: no colour,
 * no family, no radius of its own. The coach reads on the same dark theme
 * as the member, with the same two families: Archivo for every word,
 * Azeret Mono (.dado) for a figure only (an hour, a date, a value).
 *
 * What the coach screens have and the member does not: a shell that
 * widens to the studio tablet and opens on two columns from 768 px, the
 * day header, the session cards, the neutral alert list, the sober perfil
 * line. Nothing here is a badge, a coloured button or a glyph.
 */

/* ============================================================
   Shell
   ============================================================ */

/* The member column is a phone (430 px). The coach also reads on the
   tablet of the studio: the column follows the viewport up to 1040 px,
   and the day screen opens on two columns from 768 px (below). */
.app-coquilha--coach {
  max-width: 1040px;
}

/* ============================================================
   Header of the coach screens
   ============================================================ */

/* A single row: identity on the left (papel in .rotulo, name in text: a
   name is a word, never a figure), actions on the right (« Modo aluno »
   in .link-discreto, Sair in .botao-fantasma). `wrap`: at 390 px, a long
   name drops down instead of crushing the two touch targets. */
.coach-cabecalho {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco-curto);
  padding-bottom: var(--espaco-curto);
  border-bottom: 1px solid var(--marca-linha);
  margin-bottom: var(--espaco-medio);
}

.coach-cabecalho__nome {
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--tamanho-corpo);
  color: var(--marca-texto);
}

.coach-cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-medio);
}

/* ============================================================
   Words and figures
   ============================================================ */

/* A value that is a WORD (a state, a name, a label served by the
   platform): Archivo, medium weight, text tone. Its counterpart for a
   figure is .dado (app.css), mono. */
.coach-texto {
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: var(--tamanho-corpo);
  line-height: var(--altura-corpo);
  color: var(--marca-texto);
}

/* Abordagem, objetivo and envolvimento on one line, separated by a middle
   dot: « Suave · Reabilitação · Envolvido ». No outline, no colour per
   value: the word carries the meaning. */
.coach-perfil {
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-etiqueta);
  line-height: 1.4;
  color: var(--marca-texto-secundario);
}

/* ============================================================
   Day screen: navigation, filters, blocks
   ============================================================ */

/* Three links of equal width, 44 px target. The displayed day carries
   aria-current server side AND the accent ring: never colour alone. */
.coach-dias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco-micro);
  margin-bottom: var(--espaco-curto);
}

.coach-dias__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--marca-texto-atenuado);
  border-radius: var(--raio-pequeno);
  background: var(--marca-superficie-cartao-2);
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-corpo);
  color: var(--marca-texto);
  text-decoration: none;
}

.coach-dias__item--atual {
  box-shadow: inset 0 0 0 3px var(--marca-acento-secundario);
  background: var(--marca-acento-claro);
  font-weight: 700;
}

/* Date and unit folded behind the 44 px gatilho of .dobra (the same
   component as the sugestoes). Open, the form is one row that wraps at
   390 px, the « Ver » button closing it (GET submission, no script). */
.coach-filtros {
  margin-bottom: var(--espaco-curto);
}

.coach-filtros__corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espaco-curto);
}

.coach-filtros__campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-nano);
  flex: 1 1 140px;
}

/* Same rule as the .formulario fields (44 px, same tokens): the native
   rendering of a date field and a select measured 31.5 px and 27 px
   high, below the 44 px floor and below 16 px of text. */
.coach-filtros input[type="date"],
.coach-filtros select {
  min-height: 44px;
  padding: 0 var(--espaco-curto);
  border: 1px solid var(--marca-linha-alta);
  border-radius: var(--raio-pequeno);
  background: var(--marca-superficie-cartao);
  color: var(--marca-texto);
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-corpo);
}

.coach-filtros .botao {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  padding: 0 var(--espaco-medio);
}

.coach-sugestoes {
  margin-bottom: var(--espaco-curto);
}

.coach-sugestoes__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-curto);
}

/* The day itself. One column on the phone; from 768 px the next session
   and its participants stand on the left, in large, and the lists of the
   day on the right (see the media query at the end of this file). */
.coach-dia {
  display: block;
}

.coach-bloco {
  margin-bottom: var(--espaco-largo);
}

.coach-bloco__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-micro);
  font-family: var(--fonte-display);
  font-size: var(--tamanho-corpo);
  font-weight: 700;
  color: var(--marca-texto);
  margin-bottom: var(--espaco-curto);
}

/* Discrete counter: the muted tint of .rotulo, never a solid badge. */
.coach-contador {
  font-size: var(--tamanho-etiqueta);
  font-weight: 600;
  color: var(--marca-texto-atenuado);
  font-variant-numeric: tabular-nums;
}

.coach-vazio {
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-corpo);
  color: var(--marca-texto-atenuado);
  margin-bottom: var(--espaco-largo);
}

/* ============================================================
   The next session, in large
   ============================================================ */

/* The same surface as the member's home plate (.plate, da.css): a quiet
   card, the hour as the hero figure (Archivo widened, .numero-heroi),
   one line of meta, then the participants. Amber for the session in
   progress only (the imminence state of the tokens), nothing else is
   coloured. */
.coach-proxima {
  padding: var(--espaco-medio);
  margin-bottom: var(--espaco-largo);
  border: 1px solid var(--marca-linha);
  border-radius: var(--raio-grande);
  background: var(--marca-superficie-cartao);
}

.coach-proxima__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espaco-curto);
}

.coach-proxima__cabecalho .plate-rotulo {
  margin-bottom: 0;
}

/* Same tone and size as .plate-state (imminence), without its dot. */
.coach-proxima__estado {
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--tamanho-etiqueta);
  color: var(--marca-disc-amarelo);
}

.coach-proxima .numero-heroi {
  margin-top: var(--espaco-micro);
}

.coach-proxima__meta {
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-etiqueta);
  line-height: 1.5;
  color: var(--marca-texto-secundario);
  margin-top: var(--espaco-micro);
}

/* The participants: one block each, separated by a hairline, the name
   larger than any card title (this is what the coach reads first). */
.coach-participantes {
  list-style: none;
  margin: var(--espaco-medio) 0 0;
  padding: 0;
}

.coach-participante {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-micro);
  padding: var(--espaco-curto) 0;
  border-top: 1px solid var(--marca-linha);
}

.coach-participante__nome {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--tamanho-h2);
  line-height: var(--altura-h2);
  color: var(--marca-texto);
  text-decoration: none;
}

/* One line, wrapped when it must: the segments are separated by a
   middle dot drawn in CSS with margins on both sides (a typed space
   would collapse at a line break), so nothing is typed between them. */
.coach-participante__linha {
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-etiqueta);
  line-height: 1.5;
  color: var(--marca-texto-secundario);
}

.coach-participante__segmento + .coach-participante__segmento::before {
  content: "\00b7";
  margin: 0 0.4em;
  color: var(--marca-texto-atenuado);
}

.coach-participante__linha .dado {
  font-size: var(--tamanho-etiqueta);
  color: var(--marca-texto);
}

.coach-participante__estado {
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--tamanho-etiqueta);
  color: var(--marca-sucesso-texto);
}

.coach-participante__gesto .botao {
  width: auto;
  align-self: flex-start;
  min-width: 160px;
}

.coach-participante__recusa {
  margin-bottom: var(--espaco-micro);
}

.coach-participante__ligacao {
  width: auto;
  align-self: flex-start;
}

.coach-proxima__deixar {
  margin-top: var(--espaco-curto);
  display: flex;
  justify-content: flex-end;
}

/* ============================================================
   Session card
   ============================================================ */

/* `position: relative` anchors the stretched link: the whole card is
   tappable WITHOUT a <form> inside an <a> (HTML forbids it). Tighter
   padding than .cartao: several fit on screen for one day. */
.coach-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-micro);
  padding: var(--espaco-curto);
  margin-bottom: var(--espaco-curto);
}

.coach-cartao__hora {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--espaco-micro);
}

.coach-cartao__titulo {
  font-family: var(--fonte-display);
  font-size: var(--tamanho-corpo);
  font-weight: 700;
  color: var(--marca-texto);
}

/* Stretched link: the ::after covers the whole card; the gestures below
   come back on top through z-index. Maximum target, valid HTML. */
.coach-cartao__ligacao {
  color: var(--marca-texto);
  text-decoration: none;
}

.coach-cartao__ligacao::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raio-grande);
}

.coach-cartao__ligacao:focus-visible::after {
  outline: var(--foco-largura) solid var(--marca-acento-texto);
  outline-offset: -3px;
}

/* The actions row is a full width block raised above the stretched
   link: it lets the pointer through, only its button takes it back. */
.coach-cartao__acoes {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.coach-cartao__acoes .botao {
  pointer-events: auto;
  width: auto;
  align-self: flex-start;
  padding: 0 var(--espaco-medio);
}

.coach-cartao__estado {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--espaco-micro);
}

.coach-cartao__estado .coach-texto {
  font-size: var(--tamanho-etiqueta);
  font-weight: 600;
}

/* The three check-in values, compact: the field name, the figure, the
   label. Two gutters: rows at 8 px, columns at 14 px, so the triplet
   still reads as a group when it wraps at 390 px. */
.coach-checkin-valores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-micro) var(--espaco-curto);
}

.coach-checkin-valor {
  display: inline-flex;
  align-items: baseline;
  gap: var(--espaco-nano);
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-etiqueta);
  color: var(--marca-texto-secundario);
}

.coach-checkin-valor__campo {
  font-weight: 600;
}

.coach-checkin-valor .dado {
  font-size: var(--tamanho-etiqueta);
  color: var(--marca-texto);
}

/* A declared pain is information, in the text tone: red is kept for the
   cancellation alone. */
.coach-dor {
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-etiqueta);
  font-weight: 600;
  color: var(--marca-texto);
}

/* ============================================================
   Alerts: a list, a neutral bar, the severity written
   ============================================================ */

/* One item per alert, on the card as on the sheets. The bar on the left
   is the muted text tone whatever the severity (TextoAtenuado on the
   card surface, 4.54:1, and on the page, 5.07:1: both pairs already
   verified by scripts/contrast_check.py). The severity is a WORD, then
   the text, all of it visible: no fold, no button, no colour. */
.coach-alertas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-micro);
}

.coach-alerta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-nano) var(--espaco-micro);
  padding: 2px 0 2px var(--espaco-curto);
  border-left: 2px solid var(--marca-texto-atenuado);
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-etiqueta);
  line-height: 1.4;
  color: var(--marca-texto);
}

.coach-alerta__severidade {
  font-weight: 600;
  color: var(--marca-texto-secundario);
}

/* ============================================================
   Mini trend: points drawn server side, no library
   ============================================================ */

.coach-tendencias {
  position: relative;
}

.coach-tendencias__gatilho {
  font-size: var(--tamanho-etiqueta);
  color: var(--marca-texto-secundario);
}

.coach-tendencias__corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-curto);
  padding-bottom: var(--espaco-micro);
}

.coach-tendencia__valores {
  font-size: var(--tamanho-etiqueta);
}

.coach-tendencia-item {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-micro);
}

/* AcentoSecundario on the card surface: 4.73:1, above the 3:1 floor of a
   non-text component. */
.coach-tendencia {
  width: 72px;
  height: 24px;
  fill: var(--marca-acento-secundario);
}

/* ============================================================
   Session sheet and aluno sheet
   ============================================================ */

.coach-voltar {
  margin-bottom: var(--espaco-curto);
}

.coach-seccao {
  margin-bottom: var(--espaco-largo);
}

.coach-seccao > h2 {
  font-family: var(--fonte-display);
  font-size: var(--tamanho-h1);
  margin-bottom: var(--espaco-micro);
}

/* Label / value row: on one line while it fits, one under the other at
   390 px rather than breaking a word. */
.coach-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espaco-nano) var(--espaco-micro);
  margin-bottom: var(--espaco-micro);
}

.coach-valores {
  list-style: none;
  margin: 0 0 var(--espaco-curto);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-micro);
}

.coach-valor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espaco-nano) var(--espaco-micro);
  padding-bottom: var(--espaco-micro);
  border-bottom: 1px solid var(--marca-linha);
}

/* Free text of the aluno or of the coach: never on a single line. */
.coach-nota {
  white-space: pre-line;
}

.coach-bandeira {
  margin-top: var(--espaco-curto);
  padding: var(--espaco-curto);
}

.coach-bandeira .aviso-mensagem {
  margin-bottom: var(--espaco-curto);
}

/* The banner is a .cartao, the same surface .botao-secundario carries:
   its only action read as bold text with no boundary. The outline takes
   TextoAtenuado, the component floor already used by .escala__botao. */
.coach-bandeira .botao-secundario {
  background: var(--marca-fundo-pagina);
  border-color: var(--marca-texto-atenuado);
}

.coach-preencher {
  margin-top: var(--espaco-curto);
}

.coach-acoes {
  margin-top: var(--espaco-curto);
}

/* Closing guard: the sentence and the link to the check-in, grouped
   just above the presenca choice. */
.coach-guarda {
  margin-bottom: var(--espaco-curto);
}

.coach-guarda .aviso-mensagem {
  margin-bottom: var(--espaco-micro);
}

/* Attendance option disabled by the closing guard: the label follows the
   greyed dot, so the state reads at 390 px. The guard sentence stays
   above the group: colour never carries the meaning alone. (The option
   labels of a form keep .dado, the field-label role the tokens give the
   mono family; a served VALUE is what .coach-texto is for.) */
.formulario__linha input:disabled + .dado {
  color: var(--marca-texto-atenuado);
}

/* History of the aluno sheet: one entry carries several label / value
   rows, so it cannot be a single .coach-valor row. */
.coach-historico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-curto);
}

.coach-historico__item {
  padding-bottom: var(--espaco-curto);
  border-bottom: 1px solid var(--marca-linha);
}

.coach-historico__item .coach-valor {
  padding-bottom: 0;
  border-bottom: 0;
}

/* ============================================================
   From 768 px: the day on two columns
   ============================================================ */

@media (min-width: 768px) {
  .coach-dia {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    gap: var(--espaco-largo);
    align-items: start;
  }

  /* No next session (a past day, a day already done, a planner who holds
     no session): the lists take the whole width and each block lays its
     cards on two columns, the title across both. */
  .coach-dia__lista:only-child {
    grid-column: 1 / -1;
  }

  .coach-dia__lista:only-child .coach-bloco {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-curto);
    align-items: start;
  }

  .coach-dia__lista:only-child .coach-bloco__titulo,
  .coach-dia__lista:only-child .coach-bloco > .rotulo {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .coach-dia__lista:only-child .coach-cartao {
    margin-bottom: 0;
  }
}

/* ============================================================
   Numbered scales of the coach forms
   ============================================================ */

/* telas.css keeps the legend of a numbered scale small and muted, because
   on the member side that variant only dresses secondary questions
   (intensity, fatigue). On the coach forms the numbered boxes carry the
   MAIN questions: the legend takes the body size and the text tone, as
   the emoji variant does for the member. The fatigue questions, folded
   inside .dobra__corpo, keep the secondary legend. */
.formulario--checkin > .escala--numeros > legend,
.formulario--registo .escala--numeros > legend {
  font-size: var(--tamanho-corpo);
  font-weight: 600;
  color: var(--marca-texto);
}

/* ============================================================
   The offline write queue (coach.js)
   ============================================================ */

/* A line on the page background, between two hairlines: how many writes
   wait for the network, and the ones to review with the platform's
   sentence. TextoSecundario and RecusaTexto on FundoPagina, both pairs
   already verified by scripts/contrast_check.py. */
.coach-fila {
  padding: var(--espaco-curto) 0;
  border-top: 1px solid var(--marca-linha);
  border-bottom: 1px solid var(--marca-linha);
  margin-bottom: var(--espaco-medio);
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-etiqueta);
  line-height: 1.5;
  color: var(--marca-texto-secundario);
}

.coach-fila__contagem {
  font-weight: 600;
  color: var(--marca-texto);
}

.coach-fila__rever {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-micro) var(--espaco-curto);
  margin-top: var(--espaco-micro);
  color: var(--marca-recusa-texto);
}

.coach-fila__esquecer {
  min-height: 36px;
  padding: 0 var(--espaco-curto);
}

/* The answer of a write sent by fetch, in place, above its form: the
   platform's sentence on a refusal, the queue notice without network. */
.coach-escrita__estado {
  margin-bottom: var(--espaco-curto);
}