/* ==========================================================================
   board.css — Sala de Conselho no layout do spec aprovado
   (web/preview/board-apple-v1.html, Rafael 2026-09-23)

   Carrega DEPOIS de foundation.css: usa os tokens de lá, nunca hex novo.
   Classes .sala-* são desta tela só (board.js). As classes herdadas que a
   Sala reaproveita (.agora-card, .vs-table, .pimi-fez-*, .board-briefing-*,
   .card, .caminho-alavanca) só recebem aqui o ajuste de NÍVEL de superfície
   que o layout novo pede — o desenho delas continua no styles.css.

   Ordem da tela: origem dos dados → situação → o que fazer agora →
   números do mês → mais contexto (recolhido).
   ========================================================================== */


/* --- 0. Origem dos dados ---------------------------------------------------
   Uma linha discreta no lugar da faixa de fonte. Neutra; só erro tem cor. */
.sala-sources { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s5); }
.sala-src {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--muted);
  font-size: 12px; line-height: 16px; font-weight: var(--fw-medium);
  white-space: nowrap; cursor: default;
}
.sala-src::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.sala-src.is-warn  { background: rgba(255, 159, 10, .16); color: var(--warning); }
.sala-src.is-error { background: rgba(255, 69, 58, .16);  color: var(--danger); }


/* --- 1. Status pill (situação + gráfico) ---------------------------------- */
.sala-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-xs);
  font-size: 12px; line-height: 16px; font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.sala-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sala-status.is-ok   { background: rgba(48, 209, 88, .16);  color: var(--success); }
.sala-status.is-warn { background: rgba(255, 159, 10, .16); color: var(--warning); }
.sala-status.is-bad  { background: rgba(255, 69, 58, .16);  color: var(--danger); }


/* --- 2. Card de situação — "como tô?" em < 2 s ----------------------------- */
.sala-situation {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--s6) var(--s6) var(--s5);
}
.sala-situation-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s3); }
.sala-situation-when { font-size: var(--fs-foot); line-height: var(--lh-foot); color: var(--muted); font-variant-numeric: tabular-nums; }
.sala-situation-title {
  margin: 0 0 var(--s2);
  max-width: 30ch;
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); font-weight: var(--fw-bold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sala-situation-title .is-ok   { color: var(--success); }
.sala-situation-title .is-warn { color: var(--warning); }
.sala-situation-title .is-bad  { color: var(--danger); }
.sala-situation-sub {
  margin: 0; max-width: 78ch;
  font-size: 16px; line-height: 21px; letter-spacing: -.012em;
  color: var(--muted);
}
.sala-situation-sub strong { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.sala-situation-cta { margin-top: var(--s4); }

/* Tile = UM passo mais claro que o card que o contém (--surface-2 dentro de
   --surface). Separação pela cor do fundo, sem borda. */
.sala-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.sala-tile {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 14px var(--s4) var(--s4);
}
.sala-tile-label {
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro); font-weight: var(--fw-semibold);
  text-transform: uppercase; color: var(--muted);
}
.sala-tile-value {
  font-size: var(--fs-kpi-sm); line-height: var(--lh-kpi-sm);
  letter-spacing: var(--ls-kpi-sm); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; color: var(--text);
  overflow-wrap: anywhere;
}
.sala-tile-value small { font-size: 15px; font-weight: var(--fw-medium); letter-spacing: -.007em; color: var(--dim); }
.sala-tile-value.is-ok   { color: var(--success); }
.sala-tile-value.is-warn { color: var(--warning); }
.sala-tile-value.is-bad  { color: var(--danger); }
.sala-tile-delta { font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sala-tile-delta.is-ok   { color: var(--success); }
.sala-tile-delta.is-warn { color: var(--warning); }
.sala-tile-delta.is-bad  { color: var(--danger); }
.sala-tile-link { font-size: 12px; line-height: 16px; font-weight: var(--fw-semibold); color: var(--accent-text); margin-top: auto; }

/* Tile que navega: feedback no press (pointer-down), não no release. */
.sala-tile.is-link {
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
/* hover = --fill-quiet sobreposto ao tile: um passo mais claro, sem hex novo */
@media (hover: hover) and (pointer: fine) {
  .sala-tile.is-link:hover { background-image: linear-gradient(var(--fill-quiet), var(--fill-quiet)); }
}
.sala-tile.is-link:active { transform: scale(.985); }
.sala-tile.is-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Barra: contexto do número sem texto extra. */
.sala-meter { height: 4px; border-radius: 2px; background: rgba(120, 120, 128, .40); overflow: hidden; margin-top: 2px; }
.sala-meter > i { display: block; height: 100%; border-radius: 2px; background: var(--accent-data); }
.sala-meter.is-warn > i { background: var(--warning); }
.sala-meter.is-bad  > i { background: var(--danger-fill); }
.sala-meter.is-plan > i { background: var(--dim); }


/* --- 3. Seções ------------------------------------------------------------- */
.sala-section { margin-top: var(--s8); }
.sala-section:focus { outline: none; }
.sala-section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--s3); margin-bottom: 14px; }
.sala-h2 {
  margin: 0;
  font-size: var(--fs-title); line-height: var(--lh-title);
  letter-spacing: var(--ls-title); font-weight: var(--fw-semibold);
  color: var(--text);
}
.sala-h3 {
  margin: 0 0 2px;
  font-size: var(--fs-head); line-height: var(--lh-head);
  letter-spacing: var(--ls-head); font-weight: var(--fw-semibold);
  color: var(--text);
}
.sala-aside { font-size: var(--fs-foot); line-height: var(--lh-foot); color: var(--dim); font-variant-numeric: tabular-nums; }
.sala-link {
  margin-left: auto;
  min-height: 30px; padding: 6px 10px;
  border: 0; border-radius: var(--r-xs); background: transparent;
  color: var(--accent-text);
  font: inherit; font-size: var(--fs-foot); font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.sala-link:hover { background: var(--fill-quiet); }
.sala-link:active { transform: scale(var(--press)); }

/* Decisões soltas sobre o fundo: o card sobe pro nível 1 (--surface), com a
   curva e a sombra do spec. Domínio não pinta mais a borda (S2). */
#page-board .sala-decisions .agora-card {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 18px 18px var(--s4);
}
#page-board .sala-decisions .agora-meta strong { font-variant-numeric: tabular-nums; }


/* --- 4. Números do mês ---------------------------------------------------- */
.sala-chart-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--s5) var(--s5) var(--s4);
}
.sala-chart-head { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-bottom: var(--s2); }
.sala-chart-head .sala-status { margin-left: auto; }
.sala-chart-sub { margin: 0; font-size: var(--fs-foot); line-height: var(--lh-foot); color: var(--dim); }
.sala-chart { width: 100%; height: 340px; }

.sala-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; font-size: var(--fs-foot); line-height: var(--lh-foot); color: var(--muted); }
.sala-legend b { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.sala-legend .sw { display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.sala-legend .sw.is-real { background: var(--accent-data); }
.sala-legend .sw.is-proj { background: var(--accent-soft); }
.sala-legend .sw.is-meta { background: var(--success); }
.sala-legend .sw.is-plan { background: var(--muted); }

.sala-chart-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s5);
  margin-top: 14px; padding-top: var(--s3);
  border-top: 1px solid var(--separator-soft);
}
.sala-label {
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro); font-weight: var(--fw-semibold);
  text-transform: uppercase; color: var(--muted);
}
.sala-need {
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
.sala-need span { color: var(--dim); font-weight: var(--fw-regular); }
.sala-need.is-ok { color: var(--success); }
.sala-chart-note { margin: 0; max-width: 62ch; font-size: 12px; line-height: 16px; color: var(--muted); }

/* Vazio / indisponível: frase + saída, nunca caixa em branco. */
.sala-chart-empty {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 180px; padding: var(--s4) var(--s2);
  color: var(--muted); font-size: 14px; line-height: 19px;
}
.sala-chart-empty strong { display: block; color: var(--text); font-weight: var(--fw-semibold); }
.sala-chart-empty p { margin: 4px 0 0; }
.sala-chart-empty .secondary-button { margin-top: var(--s3); }
.sala-chart-empty-ic {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--dim);
}


/* --- 5. Mais contexto — inset grouped list, fechada por padrão ------------- */
.sala-more { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.sala-more-item + .sala-more-item > summary { border-top: 1px solid var(--separator-soft); }
.sala-more-item > summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 13px 18px;
  list-style: none; cursor: pointer;
  font-size: inherit; letter-spacing: normal;
  transition: background-color var(--dur-fast) ease;
}
.sala-more-item > summary::-webkit-details-marker { display: none; }
.sala-more-item > summary:hover { background: rgba(120, 120, 128, .10); }
.sala-more-item > summary:active { background: rgba(120, 120, 128, .16); }
.sala-more-item > summary:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.sala-more-item[open] > summary { background: rgba(120, 120, 128, .07); }
.sala-more-ttl { font-size: 16px; line-height: 21px; font-weight: var(--fw-medium); letter-spacing: -.012em; color: var(--text); }
.sala-more-sub { font-size: var(--fs-foot); line-height: var(--lh-foot); color: var(--muted); margin-left: 2px; font-variant-numeric: tabular-nums; }
.sala-more-chev {
  margin-left: auto; flex: none;
  color: var(--dim); font-size: 15px;
  transition: transform 180ms var(--ease-out);
}
.sala-more-item[open] > summary .sala-more-chev { transform: rotate(90deg); }
.sala-more-body { padding: var(--s4) 18px var(--s5); border-top: 1px solid var(--separator-soft); }

.sala-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--muted);
  font-size: 12px; line-height: 16px; font-weight: var(--fw-medium); white-space: nowrap;
}
.sala-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }

.sala-more-note { margin: 0 0 var(--s3); font-size: 14px; line-height: 20px; color: var(--muted); }
.sala-caption { margin: var(--s3) 0 0; font-size: 12px; line-height: 16px; color: var(--dim); }

/* Dentro do grupo (--surface), o que era card sobe pro nível 2. */
.sala-more-body .card,
.sala-more-body .caminho-alavanca { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.sala-more-body .caminho-alavanca { margin-bottom: var(--s3); border-radius: var(--r-sm); }
.sala-more-body strong { font-variant-numeric: tabular-nums; }
.sala-more-body .vs-table { border-color: var(--separator-soft); }
.sala-more-body .grid-2 { margin-bottom: 0; }
.sala-more-body .pimi-fez-list { margin-top: 0; }

/* Causa do dia: severidade na borda lateral (a cor É a informação). */
.sala-causa { border-left: 3px solid var(--sev, var(--separator)); padding-left: 14px; }
.sala-causa-title { display: block; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.sala-causa-summary { margin: var(--s2) 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.sala-causa-points { margin: var(--s2) 0 0; padding-left: 18px; font-size: var(--fs-foot); line-height: 20px; color: var(--muted); }

/* Pergunte ao Pimi: campo + botão na mesma linha. */
.sala-ask { display: flex; gap: var(--s2); }
.sala-ask input {
  flex: 1; min-width: 0; min-height: 40px; padding: 10px 14px;
  font-size: var(--fs-body); color: var(--text);
}
.sala-ask .secondary-button { flex: none; }


/* --- 6. Responsivo — 375px não pode quebrar -------------------------------- */
@media (max-width: 1100px) {
  .sala-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sala-situation { padding: 18px var(--s4) var(--s4); }
  .sala-situation-title { font-size: 24px; line-height: 30px; letter-spacing: -.02em; }
  .sala-section { margin-top: var(--s7); }
  .sala-chart-card { padding: var(--s4) var(--s3) 14px; }
  .sala-chart { height: 290px; }
  .sala-link { min-height: 44px; }
  .sala-tile.is-link { min-height: 44px; }
  /* Linha recolhida: título em cima, resumo embaixo, chevron ancorado — sem
     isso o título quebra em 2 linhas de 3 palavras no 375. */
  .sala-more-item > summary { flex-wrap: wrap; row-gap: 2px; position: relative; padding: var(--s4) 42px var(--s4) var(--s4); min-height: 52px; }
  .sala-more-sub { flex: 1 1 100%; margin-left: 0; }
  .sala-more-chev { position: absolute; right: var(--s4); top: 50%; transform: translateY(-50%); margin: 0; }
  .sala-more-item[open] > summary .sala-more-chev { transform: translateY(-50%) rotate(90deg); }
  .sala-more-body { padding: 14px var(--s4) var(--s4); }
  .sala-ask { flex-wrap: wrap; }
  .sala-ask input, .sala-ask .secondary-button { flex: 1 1 100%; min-height: 44px; }
  /* 44px também nos disclosures de dentro do card de decisão (⋯, Detalhes)
     e da evidência crua da Causa do dia. */
  #page-board .agora-card details > summary { min-height: 44px; }
  #page-board .agora-card .agora-more > summary { min-width: 44px; }
  #page-board .sala-more-body details > summary { padding-block: 14px; }
}
@media (max-width: 420px) {
  .sala-tiles { grid-template-columns: minmax(0, 1fr); }
}