/* Tábua de maré: a água do dia atravessa a página de ponta a ponta.
   A curva é o desenho principal. O resto fica quieto para os números serem lidos. */

@media (prefers-reduced-motion: reduce) {
  html:not(.anima) { scroll-behavior: auto; }
}

/* Menu: o mesmo do site, com a página atual marcada */

.nav__links > a[aria-current="page"] { background: rgba(7, 54, 60, .08); }
.nav__links > a[aria-current="page"]:hover { background: var(--mare); }

/* Frase de agora e escolha do dia. O menu é fixo, então o conteúdo começa abaixo dele. */

.mare { padding-top: calc(72px + clamp(24px, 4vw, 56px)); }
@media (max-width: 1080px) {
  .mare { padding-top: calc(64px + clamp(20px, 4vw, 40px)); }
}

.mare__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem clamp(24px, 4vw, 64px);
}

.mare__titulo {
  color: var(--texto-2);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  font-stretch: 106%;
  font-weight: 600;
  line-height: 1.3;
}

.mare__frase {
  margin-top: .5rem;
  font-size: clamp(2.5rem, 6.4vw, 5.5rem);
  font-stretch: 116%;
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.mare__apoio {
  max-width: 44rem;
  margin-top: .9rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: 500;
  line-height: 1.4;
}
.mare__apoio:empty { display: none; }

.dia { display: grid; justify-items: end; gap: .75rem; }

.dia__nav { display: flex; align-items: center; gap: .375rem; }

.dia__seta {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.dia__seta:hover:not(:disabled) { background: var(--mare); color: #fff; }
.dia__seta:disabled { opacity: .35; cursor: default; }

.dia__campo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-width: 11.5rem;
  min-height: 48px;
  padding: .4rem 1rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s;
}
.dia__campo:hover { background: rgba(7, 54, 60, .06); }
.dia__campo:focus-within { outline: 2px solid var(--foco); outline-offset: 3px; }

/* A data aparece no texto ao lado. O campo do navegador cobre o botão e abre o calendário. */
.dia__campo input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  opacity: 0;
  cursor: pointer;
}
.dia__campo input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Fora de hoje, ocupa a faixa do "Agora" no alto da curva, sem empurrar nada na página */
.dia__hoje {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  min-height: 40px;
  padding: .3rem 1rem;
  border: 1px solid var(--mare);
  border-radius: 999px;
  background: var(--sal);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
  transition: background-color .2s, color .2s;
}
.dia__hoje:hover { background: var(--mare); color: #fff; }
.dia__hoje[hidden] { display: none; }

/* A curva */

.curva-caixa { position: relative; margin-top: clamp(8px, 1.5vw, 20px); }

.curva {
  position: relative;
  height: clamp(370px, 50vh, 600px);
  overflow: hidden;
  cursor: crosshair;
  touch-action: pan-y;
  user-select: none;
}
.curva:focus-visible { outline-offset: -3px; }

.curva svg { display: block; width: 100%; height: 100%; }

.curva__agua { fill: var(--raso); }
.curva__linha { fill: none; stroke: var(--agua); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.curva__grade { stroke: var(--mare); stroke-opacity: .12; stroke-width: 1; shape-rendering: crispEdges; }
.curva__limite { stroke: var(--mare); stroke-opacity: .3; stroke-width: 1; shape-rendering: crispEdges; }

.curva text {
  fill: var(--mare);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.curva .curva__eixo { fill: var(--texto-2); font-size: 13px; }

.curva .rotulo-hora { font-size: 16px; font-stretch: 106%; font-weight: 650; }
.curva .rotulo-altura { font-size: 14px; }
.curva .halo-sal { paint-order: stroke; stroke: var(--sal); stroke-width: 5px; stroke-linejoin: round; }
.curva .halo-raso { paint-order: stroke; stroke: var(--raso); stroke-width: 5px; stroke-linejoin: round; }
.curva .curva__eixo.halo-sal { stroke-width: 3px; }

.curva__rotulos, .curva__marca-agora, .curva__agora { transition: opacity .25s; }
.curva__ponto { fill: var(--agua); stroke: var(--sal); stroke-width: 2; }

.curva__agora-linha { stroke: var(--mare); stroke-width: 1.5; }
.curva__agora-ponto { fill: var(--acento); stroke: var(--mare); stroke-width: 2; }

.curva__mira { stroke: var(--mare); stroke-width: 1; shape-rendering: crispEdges; }
.curva__mira-ponto { fill: var(--mare); stroke: var(--sal); stroke-width: 2; }

.curva__agora {
  position: absolute;
  top: 6px;
  left: 0;
  padding: .2rem .75rem;
  border-radius: 999px;
  background: var(--mare);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}
.curva__agora[hidden], .curva__leitura[hidden], .curva__vazio[hidden] { display: none; }

.curva__leitura {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  padding: .35rem .7rem;
  border-radius: 8px;
  background: var(--mare);
  color: var(--raso);
  font-size: .875rem;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.curva__leitura b { color: #fff; font-size: 1.125rem; font-weight: 650; }

.curva__vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: var(--g);
  color: var(--texto-2);
  font-weight: 500;
  text-align: center;
}

/* Próximos 7 dias: a água continua, e cada dia tem a sua curva na mesma escala */

.semana {
  padding-block: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 80px);
  background: var(--raso);
}

.semana__lista {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 1.25rem;
  border-top: 1px solid var(--linha);
}
.semana__lista li + li { border-left: 1px solid var(--linha); }

.semana__dia {
  display: grid;
  align-content: start;
  gap: .65rem;
  width: 100%;
  height: 100%;
  padding: .85rem clamp(.5rem, 1vw, 1rem) 1rem;
  border: 0;
  box-shadow: inset 0 3px 0 transparent;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s;
}
.semana__dia:hover { background: rgba(7, 54, 60, .07); }
.semana__dia[aria-pressed="true"] { box-shadow: inset 0 3px 0 var(--mare); }
.semana__dia:focus-visible { outline-offset: -3px; }

.semana__data { display: grid; line-height: 1.25; }
.semana__data b { font-size: 1.0625rem; font-stretch: 106%; font-weight: 650; }
.semana__data span { color: var(--texto-2); font-size: .9375rem; }

.semana__mini { display: block; width: 100%; height: 48px; }
.semana__mini path { fill: var(--agua); }

.semana__evs { display: grid; gap: .1rem; }

/* Um horário da tábua */

.ev {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .4em;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.ev__marca { font-size: .6875rem; line-height: 1; }
.ev b { font-weight: 650; }

/* A tábua do mês */

.tabua { padding-block: clamp(48px, 7vw, 104px); }

.tabua__grade {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 2rem clamp(32px, 5vw, 96px);
  align-items: start;
}

.tabua__lado { position: sticky; top: 96px; }

.tabua__mes { display: block; margin-top: 1.5rem; }
.tabua__mes select {
  width: 100%;
  max-width: 20rem;
  min-height: 48px;
  padding: .5rem 2.75rem .5rem 1rem;
  border: 1px solid var(--mare);
  border-radius: 999px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2307363c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m5 9 7 7 7-7'/%3E%3C/svg%3E") right 1rem center / 1.1rem no-repeat;
  color: var(--mare);
  font: inherit;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}

.tabua__legenda { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: 1.25rem; font-weight: 500; }
.tabua__nota { max-width: 26rem; margin-top: .5rem; color: var(--texto-2); font-size: .9375rem; }

.tabua__tabela { width: 100%; border-collapse: collapse; }
.tabua__tabela th { padding: 0 .5rem .6rem 0; border-bottom: 1px solid var(--mare); font-size: .9375rem; font-weight: 600; text-align: left; }
.tabua__tabela td { padding: .35rem .25rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabua__tabela td:first-child { width: 4.75rem; padding-left: 0; }

.tabua__tabela tr.is-hoje td { background: rgba(168, 236, 18, .2); }
.tabua__tabela tr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--mare); }

.tabua__dia {
  display: grid;
  width: 100%;
  min-height: 44px;
  padding: .2rem 0 .2rem .6rem;
  border: 0;
  background: none;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
}
.tabua__dia b { font-size: 1.0625rem; font-weight: 650; font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.tabua__dia span { color: var(--texto-2); font-size: .8125rem; }
.tabua__dia:hover b { text-decoration-thickness: 2px; }

.tabua__tabela .ev { display: flex; padding: .3rem .5rem; border-radius: 6px; }
.tabua__tabela .ev--b { background: var(--raso); }

/* Como ler */

.ler {
  --foco: var(--acento);
  padding-block: clamp(56px, 8vw, 112px);
  background: var(--mare);
  color: var(--raso);
}
.ler h2, .ler h3 { color: #fff; }
.ler a:not(.btn) { color: #fff; font-weight: 600; text-underline-offset: .25em; }

.ler__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem clamp(32px, 5vw, 96px);
}

.ler__chamada p { max-width: 26rem; margin-block: 1.25rem 1.5rem; }

.ler__textos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem clamp(24px, 3vw, 48px);
  align-content: start;
}
.ler__textos p { margin-top: .6rem; }

.pagina-mares .rodape--legal { padding-block: 1.25rem 5rem; border-top: 1px solid var(--linha-clara); }

/* Telas menores */

@media (max-width: 1180px) {
  .semana__lista { grid-template-columns: repeat(7, minmax(148px, 1fr)); overflow-x: auto; scrollbar-width: thin; }
}

@media (max-width: 1080px) {
  .tabua__grade { grid-template-columns: minmax(0, 1fr); }
  .tabua__lado { position: static; }
  .ler__grade { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .mare__topo { grid-template-columns: minmax(0, 1fr); }
  .dia { justify-items: stretch; }
  .dia__nav { justify-content: space-between; }
  .dia__campo { flex: 1; min-width: 0; }

  /* No celular, cada dia vira uma linha: a curva ao lado da data e os horários embaixo */
  .semana__lista { display: block; overflow: visible; }
  .semana__lista li + li { border-left: 0; border-top: 1px solid var(--linha); }
  .semana__dia {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: .5rem .75rem;
    padding-inline: .5rem;
  }
  .semana__mini { height: 44px; }
  .semana__evs { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
  .semana__evs .ev { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 .3em; }
  .semana__evs .ev__alt { grid-column: 1 / -1; color: var(--texto-2); font-size: .875rem; }
}

@media (max-width: 720px) {
  .ler__textos { grid-template-columns: minmax(0, 1fr); }
  .tabua__tabela td:first-child { width: 3.5rem; }
  .tabua__dia { padding-left: .4rem; }
  .tabua__tabela td { padding-inline: .125rem; }
  .tabua__tabela .ev { display: grid; grid-template-columns: auto 1fr; gap: 0 .25em; padding: .25rem .3rem; font-size: .875rem; }
  .tabua__tabela .ev__alt { grid-column: 1 / -1; color: var(--texto-2); font-size: .8125rem; }
  .tabua__tabela .ev--b .ev__alt { color: var(--mare); }
}

/* A frase guarda o lugar de duas linhas onde ela pode variar, para a curva não pular ao trocar de dia */
@media (min-width: 901px), (max-width: 520px) {
  .mare__frase { display: flex; align-items: flex-end; min-height: 2.04em; }
}

@media (max-width: 360px) {
  .mare__frase { font-size: 2.25rem; }
  .dia__seta { width: 44px; height: 44px; }
  .dia__campo { min-height: 44px; padding-inline: .5rem; font-size: .9375rem; }
  .dia__campo .ico { display: none; }
  .tabua__tabela td:first-child { width: 2.75rem; }
  .tabua__dia { padding-left: .25rem; }
  .tabua__tabela td { padding-inline: 1px; }
  .tabua__tabela .ev { gap: 0 .2em; padding: .2rem; font-size: .8125rem; }
  .tabua__tabela .ev__alt { font-size: .75rem; }
}