/* Upstream System: peças que o estilo.css ainda não tem (esteira de etapas, cartões de designer,
   gráficos em SVG, tabelas com rolagem, linha do tempo e fontes em details).
   Só usa as variáveis do estilo.css, nos dois temas. Sem cor, fonte ou biblioteca própria. */

/* sobretítulo dentro do h2: o rótulo da seção em cima, o título embaixo */
.upstream-sobre { display: block; margin-bottom: var(--esp-2); color: var(--acento); }

/* o corpo do case limita cada filho a 46rem; estes blocos usam o envelope inteiro */
.caso-detalhe__texto > .upstream-largo { max-width: none; width: 100%; }

.caso-detalhe .fonte {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: var(--filete-fino);
  text-underline-offset: 0.2em;
}
.caso-detalhe .fonte:hover { text-decoration-thickness: var(--filete-medio); }

/* colunas de texto curto: problema e como funciona */
.upstream-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--esp-5) var(--calha);
  margin-block: var(--esp-5);
}
.upstream-colunas > li { border-top: var(--filete-medio) solid var(--filete-forte); padding-top: var(--esp-3); min-width: 0; }
.caso-detalhe__texto .upstream-colunas h3 { margin-block: 0 var(--esp-2); }
.caso-detalhe__texto .upstream-colunas p { font-size: var(--escala-300); color: var(--texto-fraco); margin-bottom: 0; }
.caso-detalhe__texto .upstream-colunas { list-style: none; padding-left: 0; }
.caso-detalhe__texto .upstream-colunas li { margin-bottom: 0; }

/* a esteira: seis etapas, as duas do escopo do autor com filete grosso */
.caso-detalhe__texto .upstream-esteira { list-style: none; padding-left: 0; margin-block: var(--esp-5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--esp-5) var(--calha); }
.caso-detalhe__texto .upstream-etapa { border-top: var(--filete-medio) solid var(--filete-forte); padding-top: var(--esp-3); display: grid; gap: var(--esp-1); align-content: start; min-width: 0; margin-bottom: 0; }
.upstream-etapa--escopo { border-top-width: var(--filete-grosso); border-top-color: var(--marca); }
.caso-detalhe__texto .upstream-etapa h3 { margin-block: 0; }
.caso-detalhe__texto .upstream-etapa p { font-size: var(--escala-300); color: var(--texto-fraco); margin-bottom: 0; }
.upstream-etapa .meta { display: block; }
.upstream-etapa__gate { color: var(--acento); }

/* cartões dos três designers */
.caso-detalhe__texto .upstream-pessoas { list-style: none; padding-left: 0; margin-block: var(--esp-5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: var(--esp-5) var(--calha); }
.caso-detalhe__texto .upstream-pessoa { border: var(--filete-fino) solid var(--filete); padding: var(--esp-5); display: grid; gap: var(--esp-3); align-content: start; min-width: 0; margin-bottom: 0; }
.caso-detalhe__texto .upstream-pessoa h3 { margin-block: 0; }
.caso-detalhe__texto .upstream-pessoa p { font-size: var(--escala-300); color: var(--texto-fraco); margin-bottom: 0; }
.upstream-pessoa dl { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-2) var(--esp-4); font-family: var(--familia-sem-serifa); font-size: var(--escala-200); line-height: var(--entrelinha-ui); }
.upstream-pessoa dt { color: var(--texto-fraco); }
.upstream-pessoa dd { font-weight: var(--peso-medio); }

/* gráficos */
.upstream-grafico { display: grid; gap: var(--esp-3); }
.upstream-legenda { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); font-family: var(--familia-sem-serifa); font-size: var(--escala-100); line-height: var(--entrelinha-ui); color: var(--texto-fraco); }
.caso-detalhe__texto .upstream-legenda { margin-block: 0; padding-left: 0; list-style: none; }
.caso-detalhe__texto .upstream-legenda li { margin-bottom: 0; display: inline-flex; align-items: center; gap: var(--esp-2); }
.upstream-legenda svg { width: 1rem; height: 1rem; flex: none; }
.upstream-rolagem { overflow-x: auto; max-width: 100%; border: var(--filete-fino) solid var(--filete); }
.upstream-rolagem:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.upstream-rolagem svg { display: block; width: 100%; min-width: 56rem; height: auto; }
.upstream-rolagem svg text { font-family: var(--familia-sem-serifa); font-size: var(--escala-100); fill: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.upstream-rolagem svg .u-rotulo { font-size: var(--escala-200); font-weight: var(--peso-forte); fill: var(--texto); }
.upstream-rolagem svg .u-valor { fill: var(--texto); font-weight: var(--peso-medio); }
.upstream-rolagem svg .u-valor--acento { fill: var(--marca); }
.upstream-rolagem svg .u-valor--sobre { fill: var(--fundo); font-weight: var(--peso-forte); }
.u-grade { stroke: var(--filete); stroke-width: 1; }
.u-faixa { stroke: var(--filete); stroke-width: 4; }
.u-mediana { fill: var(--filete-forte); }
.u-antes { fill: var(--texto-fraco); stroke: var(--fundo); stroke-width: 2; }
.u-depois { fill: var(--marca); stroke: var(--fundo); stroke-width: 2; }
.u-barra { fill: var(--fundo-sutil); stroke: var(--texto-fraco); stroke-width: 1.5; }
.u-barra--discovery { fill: var(--marca); stroke: none; }
.upstream-grafico .legenda, .upstream-grafico figcaption { margin-top: 0; font-family: var(--familia-sem-serifa); font-size: var(--escala-100); line-height: var(--entrelinha-ui); color: var(--texto-fraco); }

/* tabelas */
.upstream-tabela { width: 100%; min-width: 40rem; border-collapse: collapse; font-family: var(--familia-sem-serifa); font-size: var(--escala-200); line-height: var(--entrelinha-ui); font-variant-numeric: tabular-nums; }
.upstream-tabela caption { caption-side: top; text-align: left; padding: var(--esp-3) var(--esp-4); color: var(--texto-fraco); font-size: var(--escala-100); }
.upstream-tabela th, .upstream-tabela td { text-align: left; padding: var(--esp-3) var(--esp-4); border-top: var(--filete-fino) solid var(--filete); vertical-align: top; }
.upstream-tabela thead th { font-size: var(--escala-050); font-weight: var(--peso-forte); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--texto-fraco); background: var(--fundo-sutil); }
.upstream-tabela tbody th { font-weight: var(--peso-medio); color: var(--texto); }

/* linha do tempo do caso de ponta a ponta */
.caso-detalhe__texto .upstream-linha { list-style: none; margin: var(--esp-5) 0 var(--esp-5) var(--esp-2); padding-left: 0; border-left: var(--filete-medio) solid var(--filete); }
.upstream-linha li { position: relative; padding: 0 0 var(--esp-4) var(--esp-5); margin-bottom: 0; }
.upstream-linha li:last-child { padding-bottom: 0; }
.upstream-linha li::before { content: ''; position: absolute; left: calc(-0.4375rem - 1px); top: 0.25rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--marca); border: var(--filete-medio) solid var(--fundo); }
.upstream-linha li:last-child::before { background: var(--filete-forte); }
.upstream-linha .meta { display: block; }
.upstream-linha .quando { color: var(--acento); }

/* fontes: um details por número, sem JavaScript */
.upstream-fontes { margin-top: var(--esp-5); border-bottom: var(--filete-fino) solid var(--filete); }
.caso-detalhe__texto details { border-top: var(--filete-fino) solid var(--filete); scroll-margin-top: var(--esp-6); }
.caso-detalhe__texto details:target { outline: var(--filete-medio) solid var(--acento); outline-offset: 2px; }
.caso-detalhe__texto summary { cursor: pointer; display: flex; align-items: center; min-height: var(--alvo-minimo); padding-block: var(--esp-2); font-family: var(--familia-sem-serifa); font-size: var(--escala-200); font-weight: var(--peso-forte); line-height: var(--entrelinha-ui); }
.caso-detalhe__texto summary:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.upstream-corpo { padding-bottom: var(--esp-4); }
.caso-detalhe__texto .upstream-corpo p { font-size: var(--escala-300); margin-bottom: var(--esp-3); }
.caso-detalhe__texto .upstream-corpo ul { margin-block: 0 var(--esp-3); }
.upstream-corpo .rotulo { margin-top: var(--esp-3); margin-bottom: var(--esp-1); }
.upstream-grafico details { border-bottom: var(--filete-fino) solid var(--filete); }
.upstream-dados { margin-top: var(--esp-2); }
.upstream-dados .upstream-rolagem { margin-bottom: var(--esp-3); }

.upstream-nota { margin-top: var(--esp-6); }
.caso-detalhe__texto .upstream-nota { font-family: var(--familia-sem-serifa); font-size: var(--escala-100); line-height: var(--entrelinha-ui); color: var(--texto-fraco); }