/* ===========================================================================
   Demonstração do grupo d (rodada 13): teste de sobrecarga hídrica.
   Faixa escura (cor literal, nunca token). Só transform e opacity se animam.
   Usa as peças comuns dmb- de demos-b.css. Prefixo: tsh-.
   =========================================================================== */
/* o copo, o gráfico e a legenda numa fila; o gráfico se mede pela altura que sobra
   (leitura + controles + fala embaixo) */
.tsh{ --dmb-col:22rem; --dmb-col-m:18.5rem;
  --tsh-alt:min(15rem, max(6rem, calc(var(--tela) - var(--tsh-resto, 19rem)))) }
/* grade: copo | gráfico | legenda; a frase do eixo fica embaixo do gráfico, numa linha só */
.tsh__quadro{ display:grid; grid-template-columns:auto auto minmax(0, 1fr); align-items:center;
  justify-content:start; gap:0 var(--e-2) }
.tsh__copo{ grid-column:1; grid-row:1 }
.tsh__grafico{ grid-column:2; grid-row:1 }
.tsh__eixo{ grid-column:2 / -1; grid-row:2 }
.tsh__leg{ grid-column:3; grid-row:1 }
.tsh__copo{ flex:0 0 auto; width:3rem; height:auto }
.tsh__vidro{ fill:none; stroke:#CBD7F2; stroke-width:4; stroke-linejoin:round }
.tsh__agua{ fill:#9FD3FF; opacity:.85 }
.tsh.e-bebeu .tsh__agua{ opacity:0 }

.tsh__grafico{ position:relative; min-width:0; margin:0 0 1.6rem 2.2rem;
  width:calc(var(--tsh-alt) * 400 / 260) }
.tsh__leg{ min-width:0; margin:0; flex-direction:column; gap:.3rem; line-height:1.3 }
.tsh__area{ position:relative }
.tsh__svg{ display:block; width:100%; height:auto }
.tsh__faixa{ fill:rgba(168,182,220,.16) }
.tsh__grade line{ stroke:rgba(203,215,242,.22); stroke-width:1.5 }
.tsh__base{ stroke:#A8B6DC; stroke-width:2 }
.tsh__seg{ stroke-width:4; stroke-linecap:round }
.tsh__curva--a .tsh__seg{ stroke:#9FD3FF }
.tsh__curva--b .tsh__seg{ stroke:#FFB08A }
.tsh__curva--a .tsh__pt{ fill:#9FD3FF; stroke:#0E1F45; stroke-width:2.5 }
.tsh__curva--b .tsh__pt{ fill:#FFB08A; stroke:#0E1F45; stroke-width:2.5 }
.tsh .e-oculto{ opacity:0 }
.tsh__niveis span{ position:absolute; right:100%; padding-right:.45rem; transform:translateY(-50%);
  font-size:var(--t--1); color:#CBD7F2 }
.tsh__tempos span{ position:absolute; top:100%; margin-top:.35rem; transform:translateX(-50%);
  font-size:var(--t--1); color:#CBD7F2; white-space:nowrap }
.tsh__eixo{ margin:0 0 0 2.2rem; font-size:var(--t--1); color:#CBD7F2; line-height:1.3 }

.tsh__leitura{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .8rem; color:#fff; line-height:1.25 }
.tsh__tempo{ font-family:Archivo; font-size:var(--t-0) }
.tsh__v{ font-family:Archivo; font-size:var(--t-1) }
.tsh__v b{ font-weight:800; font-size:var(--t-1) }
.tsh__v--a b{ color:#9FD3FF }
.tsh__v--b b{ color:#FFB08A }
.tsh__leitura small{ font-size:var(--t--1); color:#CBD7F2 }
.tsh-cor--a{ background:#9FD3FF }
.tsh-cor--b{ background:#FFB08A }
.tsh__ctrl{ display:flex; flex-direction:column; gap:.3rem }
.tsh__linha{ display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--e-2) }
.tsh__linha > label{ font-weight:700; color:#fff; line-height:1.3 }
.tsh__linha .dmb-faixa{ flex:1 1 9rem; width:auto; max-width:none }
.tsh__ctrl .dmb-acoes{ margin:0; gap:.6rem }
.tsh .btn:focus-visible{ outline:3px solid #FFB08A; outline-offset:3px }
.tsh .btn:disabled{ opacity:.55; cursor:default; transform:none }

@media (prefers-reduced-motion: no-preference){
  .tsh__seg, .tsh__pt, .tsh__agua{ transition:opacity .45s var(--saida) }
}
/* computador estreito e celular: a legenda vai para baixo, numa fila */
@media (max-width:76rem){
  .tsh{ --tsh-resto:24rem }
  .tsh__quadro{ grid-template-columns:auto auto }
  .tsh__v, .tsh__v b{ font-size:var(--t-0) }
  .tsh__linha .dmb-faixa{ flex-basis:6.5rem }
  .tsh .dmb-fala, .tsh .dmb-fantasma{ font-size:var(--t--1) }
  .tsh__inter{ gap:.6rem }
  .tsh__leg{ grid-column:1 / -1; grid-row:3; margin-top:.4rem; flex-direction:row; flex-wrap:wrap;
    gap:0 1rem; font-size:.85rem }
}
@media (max-width:40rem){
  .tsh{ --tsh-resto:22rem }
  /* o celular comum (390x664) cabe com os espacos mais justos e o grafico um pouco menor */
  .tsh{ --tsh-alt:min(15rem, max(5.4rem, calc(var(--tela) - var(--tsh-resto, 19rem)))) }
  .tsh__inter{ gap:.35rem }
  .tsh__leg{ margin-top:.2rem }
  .tsh__grafico{ margin-bottom:1.4rem }
  .tsh__copo{ width:2.4rem }
  .tsh__eixo{ grid-column:1 / -1; margin-left:0; font-size:.85rem }
  .tsh__leitura{ display:grid; grid-template-columns:auto 1fr; gap:0 .8rem }
  .tsh__ctrl .dmb-acoes{ flex-wrap:nowrap }
  .tsh__ctrl .dmb-acoes .btn{ flex:1 1 auto; min-width:0; min-height:44px; padding:.4rem .6rem; font-size:.95rem;
    line-height:1.15; text-align:center }
  .tsh .dmb-fala, .tsh .dmb-fantasma{ font-size:var(--t--1); line-height:1.45 }
  .tsh__inter{ gap:.5rem }
  .tsh__grafico{ margin-bottom:1.4rem }
}
@media (max-width:24rem){ .tsh{ --tsh-resto:24rem } }
@media (max-height:31rem){ .tsh{ --tsh-alt:12rem } }
html[data-fonte="2"] .tsh, html[data-fonte="3"] .tsh{ --tsh-alt:15rem }
/* letra grande (A+): o gráfico ocupa a largura que houver e a legenda desce */
html[data-fonte="2"] .tsh__quadro, html[data-fonte="3"] .tsh__quadro{ grid-template-columns:auto minmax(0, 1fr) }
html[data-fonte="2"] .tsh__grafico, html[data-fonte="3"] .tsh__grafico{ width:auto; max-width:24rem }
html[data-fonte="2"] .tsh__leg, html[data-fonte="3"] .tsh__leg{ grid-column:1 / -1; grid-row:3; margin-top:.4rem;
  flex-direction:row; flex-wrap:wrap; gap:0 1rem }
html[data-fonte="2"] .tsh__ctrl .dmb-acoes, html[data-fonte="3"] .tsh__ctrl .dmb-acoes{ flex-wrap:wrap }

/* alto contraste: preto, branco e amarelo */
html[data-contraste="alto"] .tsh__niveis span, html[data-contraste="alto"] .tsh__tempos span,
html[data-contraste="alto"] .tsh__leitura small, html[data-contraste="alto"] .tsh__eixo{ color:#fff }
html[data-contraste="alto"] .tsh__base, html[data-contraste="alto"] .tsh__vidro{ stroke:#fff }
html[data-contraste="alto"] .tsh__grade line{ stroke:rgba(255,255,255,.4) }
html[data-contraste="alto"] .tsh__curva--a .tsh__seg{ stroke:#00E0FF }
html[data-contraste="alto"] .tsh__curva--a .tsh__pt, html[data-contraste="alto"] .tsh-cor--a{ fill:#00E0FF; background:#00E0FF }
html[data-contraste="alto"] .tsh__v--a b{ color:#00E0FF }
html[data-contraste="alto"] .tsh__curva--b .tsh__seg{ stroke:#FFD75E }
html[data-contraste="alto"] .tsh__curva--b .tsh__pt, html[data-contraste="alto"] .tsh-cor--b{ fill:#FFD75E; background:#FFD75E }
html[data-contraste="alto"] .tsh__v--b b{ color:#FFD75E }
html[data-contraste="alto"] .tsh__curva--a .tsh__pt, html[data-contraste="alto"] .tsh__curva--b .tsh__pt{ stroke:#000 }
html[data-contraste="alto"] .tsh .btn:focus-visible{ outline-color:#00E0FF }