/* PROTOCOLO DELECTUS: componentes compartilhados das etapas padronizadas.
   Consome apenas os tokens de tokens.css. Vale somente quando #stageView tem
   o atributo data-padrao (definido em app.js, em show()). As regras antigas
   do delectus-grimo-theme.css são desligadas nas mesmas etapas por
   #stageView:where(:not([data-padrao])), então aqui não há !important.
   Componentes: página, cabeçalho da etapa, painel, coluna de leitura, registro
   expansível (linha) com papel, campo de resposta, botão principal, botão
   discreto, dicas, rodapé. */

#stageView[data-padrao] {
  /* JS das etapas pinta mensagens com var(--green)/var(--danger) inline */
  --green: var(--dl-bronze-claro);
  --danger: var(--dl-erro);
}

/* ---------- Página: coluna única sobre o fundo do convite ---------- */
#stageView[data-padrao] .stage-card {
  max-width: calc(var(--dl-coluna) + 2 * var(--dl-gutter));
  min-height: 0;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) var(--dl-gutter) var(--dl-esp-4);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
#stageView[data-padrao] .stage-card::after { display: none; }

/* ---------- Cabeçalho da etapa ---------- */
#stageView[data-padrao] .back-link {
  display: inline-block;
  margin: 0 0 clamp(22px, 5vw, 38px);
  padding: 4px 0;
  border: 0;
  background: none;
  font: 400 11px/1 var(--dl-fonte-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dl-texto-suave);
  cursor: pointer;
  transition: color var(--dl-transicao);
}
#stageView[data-padrao] .back-link::before { content: "‹"; margin-right: .7em; }
#stageView[data-padrao] .back-link:hover { color: var(--dl-bronze-claro); }
#stageView[data-padrao] .back-link:focus-visible { outline: 2px solid var(--dl-texto); outline-offset: 3px; }

#stageView[data-padrao] .stage-hero {
  margin: 0 0 clamp(24px, 4vw, 36px);
  text-align: center;
}
#stageView[data-padrao] .stage-hero .eyebrow {
  margin: 0;
  font: 500 10.5px/1.4 var(--dl-fonte-meta);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dl-meta);
}
#stageView[data-padrao] .stage-hero h1 {
  margin: 12px 0 14px;
  font: 500 clamp(32px, 7vw, 48px)/1 var(--dl-fonte-titulo);
  letter-spacing: .08em;
  color: var(--dl-titulo);
  text-wrap: balance;
}
#stageView[data-padrao] .stage-status-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  margin: 0;
  font: 400 11.5px/1 var(--dl-fonte-meta);
  letter-spacing: .1em;
  color: var(--dl-texto-suave);
}
#stageView[data-padrao] .stage-status-line::before { content: "›"; color: var(--dl-bronze-fosco); }
#stageView[data-padrao] .stage-status-line strong { font-weight: 500; color: var(--dl-bronze); }
#stageView[data-padrao] .stage-status-line strong::before {
  content: "status: ";
  font-weight: 400;
  color: var(--dl-texto-suave);
}

/* ---------- Painel: sem caixa; o título vira uma linha de seção ---------- */
#stageView[data-padrao] .detail-panel {
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
#stageView[data-padrao] .panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dl-esp-2);
  margin: 0 0 var(--dl-esp-3);
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--dl-linha);
  background: none;
}
#stageView[data-padrao] .panel-head h2 {
  margin: 0;
  font: 500 11px/1.4 var(--dl-fonte-meta);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dl-meta);
}
#stageView[data-padrao] .panel-head span {
  font: 400 10.5px/1 var(--dl-fonte-meta);
  letter-spacing: .18em;
  color: var(--dl-texto-apagado);
}

/* ---------- Coluna de leitura ---------- */
#stageView[data-padrao] .context-copy,
#stageView[data-padrao] .mission-copy,
#stageView[data-padrao] .stage-actions { padding: 0; }
#stageView[data-padrao] .context-copy:not(:empty),
#stageView[data-padrao] .mission-copy:not(:empty) {
  margin: 0 0 var(--dl-esp-4);
  font: 400 var(--dl-leitura-tamanho)/var(--dl-leitura-linha) var(--dl-fonte-leitura);
  letter-spacing: 0;
  color: var(--dl-texto-leitura);
  background: none;
  border: 0;
}
#stageView[data-padrao] .context-copy:empty,
#stageView[data-padrao] .mission-copy:empty { display: none; }
#stageView[data-padrao] .context-copy :is(strong, b),
#stageView[data-padrao] .mission-copy :is(strong, b) { font-weight: 600; color: var(--dl-titulo); }
#stageView[data-padrao] .mission-copy--emphasis { font-weight: 600; color: var(--dl-titulo); }

/* ---------- Registro expansível: linha, não caixa ---------- */
#stageView[data-padrao] .records-list,
#stageView[data-padrao] .attachments-list {
  display: block;
  margin: var(--dl-esp-4) 0;
  border-top: 1px solid var(--dl-linha);
}
#stageView[data-padrao] :is(.record-item, .attachment-item, .initiative-material-item, .initiative-document-item) {
  border: 0;
  border-bottom: 1px solid var(--dl-linha);
  border-radius: 0;
  background: none;
  overflow: visible;
}
#stageView[data-padrao] :is(.record-toggle, .attachment-toggle, .initiative-material-toggle, .initiative-document-toggle) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dl-esp-3);
  width: 100%;
  padding: 16px 2px;
  border: 0;
  background: none;
  font: 500 12px/1.5 var(--dl-fonte-meta);
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
  color: var(--dl-bronze-claro);
  cursor: pointer;
  transition: background var(--dl-transicao), color var(--dl-transicao);
}
#stageView[data-padrao] :is(.record-toggle, .attachment-toggle, .initiative-material-toggle, .initiative-document-toggle):hover {
  background: rgba(148, 104, 63, .1);
  color: #f4ecdf;
}
#stageView[data-padrao] :is(.record-toggle, .attachment-toggle, .initiative-material-toggle, .initiative-document-toggle):focus-visible { outline: 2px solid var(--dl-texto); outline-offset: -2px; }
#stageView[data-padrao] :is(.record-toggle, .attachment-toggle, .initiative-material-toggle, .initiative-document-toggle) .chev,
#stageView[data-padrao] :is(.stage45-hints-chev, .stage6-notes-chevron) {
  flex: none;
  font: 400 17px/1 var(--dl-fonte-meta);
  letter-spacing: 0;
  color: var(--dl-bronze);
}

/* Documento aberto: papel bege, fiel ao material de arquivo */
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet),
#stageView[data-padrao] .attachment-content {
  margin: 4px 0 var(--dl-esp-3);
  padding: clamp(18px, 3vw, 28px);
  background: var(--dl-papel);
  border: 1px solid var(--dl-papel-borda);
  border-radius: var(--dl-raio);
  box-shadow: none;
  font: 500 18px/1.65 var(--dl-fonte-leitura);
  letter-spacing: 0;
  color: var(--dl-papel-texto);
}
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet)[hidden],
#stageView[data-padrao] .attachment-content[hidden] { display: none; }
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) :is(p, li, blockquote),
#stageView[data-padrao] .attachment-content :is(p, li, blockquote) {
  margin: 0 0 .8em;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: 0;
  color: var(--dl-papel-texto);
}
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) :is(strong, em),
#stageView[data-padrao] .attachment-content :is(strong, em) { color: var(--dl-papel-texto); }
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) :is(h3, h4, h5, .doc-section-title),
#stageView[data-padrao] .attachment-content :is(h3, h4, h5, .doc-section-title) {
  margin: 1.4em 0 .5em;
  font: 600 12px/1.5 var(--dl-fonte-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dl-papel-titulo);
}
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) :is(h3, h4, h5):first-child,
#stageView[data-padrao] .attachment-content :is(h3, h4, h5):first-child { margin-top: 0; }
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) .doc-meta,
#stageView[data-padrao] .attachment-content .doc-meta {
  margin: 0 0 var(--dl-esp-2);
  font: 400 11px/1.7 var(--dl-fonte-meta);
  letter-spacing: .06em;
  color: var(--dl-papel-meta);
}
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) a,
#stageView[data-padrao] .attachment-content a {
  color: var(--dl-papel-link);
  text-decoration: underline;
  text-underline-offset: .15em;
  word-break: break-word;
}
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) blockquote,
#stageView[data-padrao] .attachment-content blockquote {
  margin: var(--dl-esp-2) 0;
  padding-left: 14px;
  border-left: 2px solid #ad855a;
}
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) :is(ul, ol),
#stageView[data-padrao] .attachment-content :is(ul, ol) { margin: .4em 0 .9em 1.2em; padding: 0; }
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) img,
#stageView[data-padrao] .attachment-content img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--dl-papel-borda);
  border-radius: 2px;
  background: none;
}

/* Anexos dentro do papel: mesma linha, em tons de papel */
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) .attachments-list { margin: var(--dl-esp-3) 0 0; border-top-color: var(--dl-papel-linha); }
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) .attachment-item { border-bottom-color: var(--dl-papel-linha); }
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) .attachment-toggle { color: var(--dl-papel-titulo); }
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) .attachment-toggle:hover { background: rgba(98, 70, 47, .08); color: var(--dl-papel-texto); }
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) .attachment-toggle .chev { color: var(--dl-papel-meta); }
#stageView[data-padrao] :is(.record-content, .initiative-document-sheet) .attachment-content { background: var(--dl-papel-2); border-color: var(--dl-papel-linha); }

/* ---------- Campo de resposta: linha embaixo ---------- */
#stageView[data-padrao] .answer-panel {
  margin: var(--dl-esp-4) 0 0;
  padding: var(--dl-esp-4) 0 0;
  border: 0;
  border-top: 1px solid var(--dl-linha);
}
#stageView[data-padrao] .answer-panel > p {
  margin: 0 0 var(--dl-esp-2);
  font: 400 var(--dl-leitura-tamanho)/var(--dl-leitura-linha) var(--dl-fonte-leitura);
  letter-spacing: 0;
  color: var(--dl-texto-leitura);
}
#stageView[data-padrao] .answer-panel > p strong { font-weight: 600; color: var(--dl-titulo); }
/* Depois da lista de registros a própria lista já fecha com linha: sem segunda linha */
#stageView[data-padrao] .records-list + .answer-panel { margin-top: var(--dl-esp-4); padding-top: 0; border-top: 0; }
/* Título do bloco (ex.: A CAIXA, CONCLUSÃO DA ANÁLISE): rótulo de seção, como o cabeçalho do painel */
#stageView[data-padrao]:is([data-etapa="1"], [data-etapa="2"]) .answer-panel > p:first-child > strong:only-child {
  display: block;
  margin-bottom: var(--dl-esp-1);
  font: 500 11px/1.4 var(--dl-fonte-meta);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dl-meta);
}
#stageView[data-padrao][data-etapa="5"] :is(p:has(+ form), p[data-s5-transition]) > strong:only-child {
  display: block;
  margin-bottom: var(--dl-esp-1);
  font: 500 11px/1.4 var(--dl-fonte-meta);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dl-meta);
}
#stageView[data-padrao] .validation-form { margin: 0; padding: 0; border: 0; }
#stageView[data-padrao] .validation-label {
  display: block;
  margin: var(--dl-esp-3) 0 0;
  font: 400 11px/1.6 var(--dl-fonte-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dl-meta);
}
#stageView[data-padrao] .answer-input {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--dl-bronze-escuro);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: 400 19px/1.3 var(--dl-fonte-meta);
  letter-spacing: .05em;
  text-transform: none;
  color: var(--dl-titulo);
  caret-color: var(--dl-bronze);
  outline: none;
  transition: border-color var(--dl-transicao), box-shadow var(--dl-transicao);
}
#stageView[data-padrao] .answer-input:focus {
  border-bottom-color: var(--dl-bronze);
  box-shadow: 0 1px 0 var(--dl-bronze);
}
#stageView[data-padrao] .answer-input:disabled {
  border-bottom-style: dashed;
  color: var(--dl-texto-suave);
}
#stageView[data-padrao] .answer-message {
  min-height: 1.6em;
  margin: var(--dl-esp-2) 0 0;
  font: 400 12px/1.6 var(--dl-fonte-meta);
  letter-spacing: .06em;
}

/* ---------- Botão principal: bronze, só para enviar ---------- */
#stageView[data-padrao] .primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 11rem;
  margin: var(--dl-esp-3) 0 0;
  padding: 12px 28px 11px;
  border: 1px solid var(--dl-bronze);
  border-radius: var(--dl-raio);
  background: var(--dl-bronze-escuro);
  box-shadow: none;
  font: 600 15px/1 var(--dl-fonte-titulo);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #f8ecd8;
  cursor: pointer;
  transition: background var(--dl-transicao), border-color var(--dl-transicao), color var(--dl-transicao);
}
#stageView[data-padrao] .primary-btn:hover:not(:disabled) {
  background: #a8784a;
  border-color: var(--dl-bronze-claro);
  color: #fff6e6;
}
#stageView[data-padrao] .primary-btn:focus-visible { outline: 2px solid var(--dl-texto); outline-offset: 3px; }
#stageView[data-padrao] .primary-btn:disabled { opacity: .45; cursor: default; }

/* ---------- Dicas e botão discreto ---------- */
#stageView[data-padrao] :is(.stage-hints-v3, .stage45-hints, .stage6-additional-notes) { margin: var(--dl-esp-4) 0 0; }
#stageView[data-padrao] :is(.stage-hints-box, .stage45-hints-box, .stage6-additional-notes) {
  border: 0;
  border-top: 1px solid var(--dl-linha);
  border-bottom: 1px solid var(--dl-linha);
  border-radius: 0;
  background: none;
}
#stageView[data-padrao] :is(.stage-hints-toggle, .stage45-hints-toggle, .stage6-notes-toggle) {
  padding: 14px 2px;
  font: 500 11px/1.4 var(--dl-fonte-meta);
  letter-spacing: .18em;
  color: var(--dl-bronze-claro);
}
#stageView[data-padrao] :is(.stage-hints-history, .stage45-hints-history, .stage6-notes-history) { padding: 2px 2px 12px; border-top: 1px solid var(--dl-linha-suave); }
#stageView[data-padrao] :is(.stage-hints-item, .stage45-hints-item, .stage6-notes-history article) { border-bottom: 1px solid var(--dl-linha-suave); }
#stageView[data-padrao] :is(.stage-hints-label, .stage45-hints-item span, .stage6-notes-history article span) {
  font: 500 10.5px/1.4 var(--dl-fonte-meta);
  letter-spacing: .16em;
  color: var(--dl-texto-suave);
}
#stageView[data-padrao] .stage-hints-item.latest .stage-hints-label { color: var(--dl-bronze); }
#stageView[data-padrao] :is(.stage-hints-item, .stage45-hints-item, .stage6-notes-history article) p {
  font: 400 16px/1.7 var(--dl-fonte-leitura);
  color: var(--dl-texto-leitura);
}
#stageView[data-padrao] :is(.stage-hints-request, .stage45-hints-request, .stage6-notes-request) {
  display: block;
  width: auto;
  margin: var(--dl-esp-3) auto 0;
  padding: 11px 20px 10px;
  border: 1px solid var(--dl-bronze-escuro); /* era --dl-linha (quase invisível); o botão de dica precisa ser achado */
  border-radius: var(--dl-raio);
  background: none;
  font: 400 11px/1 var(--dl-fonte-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dl-texto-suave);
  cursor: pointer;
  transition: border-color var(--dl-transicao), color var(--dl-transicao);
}
#stageView[data-padrao] :is(.stage-hints-request, .stage45-hints-request, .stage6-notes-request):hover:not(:disabled) { border-color: var(--dl-bronze); color: var(--dl-bronze-claro); }

/* ---------- Mídia externa (etapa 3: registro audiovisual) ---------- */
#stageView[data-padrao] .observation-material {
  margin: var(--dl-esp-4) 0;
  padding: var(--dl-esp-3) 0;
  border: 0;
  border-top: 1px solid var(--dl-linha);
  border-bottom: 1px solid var(--dl-linha);
  border-radius: 0;
  background: none;
}
#stageView[data-padrao] .observation-material + .answer-panel { margin-top: 0; padding-top: 0; border-top: 0; }
#stageView[data-padrao] .observation-label {
  margin: 0 0 var(--dl-esp-1);
  font: 400 10.5px/1.4 var(--dl-fonte-meta);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dl-meta);
}
#stageView[data-padrao] .observation-video-link {
  display: inline-block;
  font: 500 15px/1.5 var(--dl-fonte-meta);
  letter-spacing: .02em;
  color: var(--dl-bronze-claro);
  text-decoration: underline;
  text-decoration-color: rgba(220, 195, 160, .4);
  text-underline-offset: .25em;
  word-break: break-all;
  transition: color var(--dl-transicao), text-decoration-color var(--dl-transicao);
}
#stageView[data-padrao] .observation-video-link:hover,
#stageView[data-padrao] .observation-video-link:focus-visible {
  color: #f4ecdf;
  text-decoration-color: var(--dl-bronze);
}

/* ---------- Etapa 4: introdução, material disponível, galeria e sintonizador ---------- */
#stageView[data-padrao] .initiative-copy { margin: 0 0 var(--dl-esp-3); font: inherit; color: inherit; }
#stageView[data-padrao] .context-copy .initiative-copy:last-child { margin-bottom: 0; }
#stageView[data-padrao] .initiative-inventory-item { margin: var(--dl-esp-4) 0 0; border-top: 1px solid var(--dl-linha); }
#stageView[data-padrao] .initiative-materials { margin: var(--dl-esp-4) 0 0; }
#stageView[data-padrao] .initiative-materials-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dl-esp-2);
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--dl-linha);
}
#stageView[data-padrao] .initiative-materials-head h3 {
  margin: 0;
  font: 500 11px/1.4 var(--dl-fonte-meta);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dl-meta);
}
#stageView[data-padrao] .initiative-materials-head span {
  font: 400 10.5px/1 var(--dl-fonte-meta);
  letter-spacing: .18em;
  color: var(--dl-texto-apagado);
}
#stageView[data-padrao] .initiative-material-content { padding: var(--dl-esp-1) 2px var(--dl-esp-3); }
#stageView[data-padrao] .initiative-material-content[hidden],
#stageView[data-padrao] .initiative-document-content[hidden] { display: none; }
#stageView[data-padrao] .initiative-material-content > p {
  margin: 0 0 var(--dl-esp-2);
  font: 400 16px/1.7 var(--dl-fonte-leitura);
  color: var(--dl-texto-leitura);
}
#stageView[data-padrao] .initiative-material-status {
  font: 400 11px/1.6 var(--dl-fonte-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dl-texto-apagado);
}
#stageView[data-padrao] .initiative-documents { margin: var(--dl-esp-2) 0 0; border-top: 1px solid var(--dl-linha); }
#stageView[data-padrao] .initiative-document-content { padding: var(--dl-esp-1) 0 var(--dl-esp-2); }
#stageView[data-padrao] .initiative-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dl-esp-2); margin: var(--dl-esp-2) 0 0; }
#stageView[data-padrao] .initiative-thumb {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--dl-linha);
  border-radius: var(--dl-raio);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dl-transicao);
}
#stageView[data-padrao] .initiative-thumb:hover,
#stageView[data-padrao] .initiative-thumb:focus-visible { border-color: var(--dl-bronze); }
#stageView[data-padrao] .initiative-thumb-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 9px;
  font: 400 10px/1.4 var(--dl-fonte-meta);
  letter-spacing: .1em;
}
#stageView[data-padrao] .initiative-thumb-foot strong { font-weight: 500; text-transform: uppercase; color: var(--dl-texto-leitura); }
#stageView[data-padrao] .initiative-thumb-foot em { font-style: normal; color: var(--dl-bronze); }
#stageView[data-padrao] .initiative-tuner-prompt {
  margin: var(--dl-esp-4) 0 var(--dl-esp-2);
  padding: 0;
  border: 0;
  font: 600 var(--dl-leitura-tamanho)/var(--dl-leitura-linha) var(--dl-fonte-leitura);
  letter-spacing: 0;
  color: var(--dl-titulo);
}
@media (max-width: 700px) {
  #stageView[data-padrao] .initiative-gallery { grid-template-columns: 1fr; }
}

/* ---------- Ação de conclusão (aparece ao resolver a etapa) ---------- */
#stageView[data-padrao] .stage-conclusion-action { margin: var(--dl-esp-3) 0 0; text-align: center; }
#stageView[data-padrao] .stage-conclusion-link {
  display: inline-block;
  padding: 10px 18px 9px;
  border: 1px solid rgba(201, 149, 90, .5);
  border-radius: var(--dl-raio);
  background: none;
  font: 600 14px/1 var(--dl-fonte-titulo);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dl-bronze-claro);
  cursor: pointer;
  transition: background var(--dl-transicao), border-color var(--dl-transicao), color var(--dl-transicao);
}
#stageView[data-padrao] .stage-conclusion-link:hover,
#stageView[data-padrao] .stage-conclusion-link:focus-visible {
  background: rgba(148, 104, 63, .2);
  border-color: var(--dl-bronze);
  color: #f4ecdf;
}

/* ---------- Rodapé ---------- */
#stageView[data-padrao] .stage-foot {
  margin: clamp(30px, 6vw, 48px) 0 0;
  text-align: center;
  font: 400 10px/1 var(--dl-fonte-meta);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dl-texto-apagado);
}

/* Etapa 4: resíduos de verde/ciano do tema antigo (miniaturas, áudio, imagem do dispositivo, replay) */
#stageView[data-padrao] :is(.initiative-thumb-foot, .stage4-device-foot) {
  border-top: 1px solid var(--dl-linha);
}
#stageView[data-padrao] :is(.initiative-thumb-foot, .stage4-device-foot) strong {
  font-family: var(--dl-fonte-meta);
  color: var(--dl-bronze-claro);
}
#stageView[data-padrao] :is(.initiative-thumb-foot, .stage4-device-foot) em {
  font-family: var(--dl-fonte-meta);
  color: var(--dl-meta);
}
#stageView[data-padrao] .stage4-device-card {
  border: 1px solid var(--dl-linha);
  background: transparent;
}
#stageView[data-padrao] .stage4-device-media { background: rgba(0, 0, 0, .35); }
#stageView[data-padrao] :is(.stage4-recovered-audio, .stage4-audio-head, .stage4-audio-note) {
  border-color: var(--dl-linha);
  color: var(--dl-texto-suave);
  font-family: var(--dl-fonte-meta);
}
#stageView[data-padrao] .stage4-recovered-audio {
  background: transparent;
  border-radius: var(--dl-raio);
}
#stageView[data-padrao] .stage4-replay-video {
  border: 1px solid var(--dl-linha);
  background: transparent;
  color: var(--dl-bronze);
  font-family: var(--dl-fonte-meta);
  transition: color var(--dl-transicao), border-color var(--dl-transicao);
}
#stageView[data-padrao] .stage4-replay-video:hover {
  background: transparent;
  color: var(--dl-bronze-claro);
  border-color: var(--dl-bronze-escuro);
}

/* Sem a caixa do cartão antigo, elementos que sangram para fora (ex.: fundo da gaveta da etapa 1)
   passam da largura da tela. clip não cria rolagem e não afeta o 3D dos filhos. */
#stageView[data-padrao] { overflow-x: clip; }

/* Etapa 6: o <style> injetado do JS mira o rótulo das dicas (.stage6-additional-notes span) e
   acaba atingindo os spans do toggle. Aqui o toggle herda a fonte dele, como nas outras etapas. */
#stageView[data-padrao] .stage6-notes-toggle span {
  display: inline;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}
#stageView[data-padrao] .stage6-notes-toggle .stage6-notes-chevron {
  font: 400 17px/1 var(--dl-fonte-meta);
  color: var(--dl-bronze);
}

/* Etapa 6: o JS escreve título e status em maiúsculas (herança da versão antiga, sem motivo
   registrado). Aqui eles aparecem como nas etapas 1 a 5 ("Atenção", "disponível"), sem mudar o texto. */
#stageView[data-padrao]:is([data-etapa="6"]) #stageName,
#stageView[data-padrao]:is([data-etapa="6"]) #stageStatus { text-transform: lowercase; }
#stageView[data-padrao]:is([data-etapa="6"]) #stageName::first-letter { text-transform: uppercase; }

/* Celular: rótulos legíveis ou clicáveis com no mínimo 12px (antes de 8 a 11,5px).
   Ficam menores só as inscrições da ilustração do aparelho da etapa 4 (fita, fabricante,
   nº de série e nome do modelo), que são ornamento e escalam com o desenho. */
@media (max-width: 640px) {
  #stageView[data-padrao] :is(
    .back-link,
    .stage-hero .eyebrow,
    .stage-status-line,
    .panel-head h2,
    .panel-head span,
    .validation-label,
    .attachment-content .doc-meta,
    .source-meta,
    .observation-label,
    .stage-hints-toggle, .stage45-hints-toggle, .stage6-notes-toggle,
    .stage-hints-label, .stage45-hints-item span, .stage6-notes-history article span,
    .stage-hints-request, .stage45-hints-request, .stage6-notes-request,
    .initiative-materials-head h3,
    .initiative-materials-head span,
    .initiative-material-status,
    .initiative-thumb-foot,
    .initiative-thumb-foot :is(strong, em, small, a),
    .stage4-device-foot :is(strong, em),
    .stage4-audio-head :is(strong, span),
    .stage4-audio-note,
    .stage4-tuner-status,
    .stage4-lever-on, .stage4-lever-off,
    .stage4-knob-scale-number,
    .s1-key-label,
    .stage-foot
  ) { font-size: 12px; }
  /* Títulos dos blocos de resposta: as regras deles são mais específicas. */
  #stageView[data-padrao]:is([data-etapa="1"], [data-etapa="2"]) .answer-panel > p:first-child > strong:only-child,
  #stageView[data-padrao][data-etapa="5"] :is(p:has(+ form), p[data-s5-transition]) > strong:only-child { font-size: 12px; }
}

/* Fundo das etapas: brilho quente bem sutil no topo, para dar profundidade sem competir com o texto.
   Para desligar, apague este bloco. */
#stageView[data-padrao] {
  /* Raio horizontal de 62%: o brilho some antes das bordas da coluna, sem formar faixas verticais. */
  background: radial-gradient(ellipse 62% 460px at 50% 0, rgba(150, 90, 50, .27), rgba(70, 36, 22, .10) 55%, transparent 80%) no-repeat;
}