/* ==========================================================
   SUMÁRIO: botão "capítulos" + índice do caderninho
   ========================================================== */

#sumario {
  position: fixed;
  right: max(.9rem, env(safe-area-inset-right, 0px));
  bottom: max(.9rem, env(safe-area-inset-bottom, 0px));
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .7rem;
}

body.travado #sumario { display: none; }

.sumario__botao {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: .55rem 1rem .55rem .8rem;
  border-radius: 999px;
  background: rgba(255, 254, 251, .94);
  color: var(--batom);
  font-family: var(--fonte-ui);
  font-weight: 800;
  font-size: .9rem;
  box-shadow: 0 0 0 1.5px var(--rosa), 0 10px 22px -10px rgba(58, 39, 49, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.sumario__botao svg { width: 1.1rem; height: 1.1rem; }
.sumario__botao[aria-expanded='true'] { background: var(--batom); color: #fff; }

.sumario__cartao {
  width: min(16rem, calc(100vw - 2rem));
  max-height: min(70vh, 30rem);
  overflow-y: auto;
  padding: 1rem 1.1rem 1.1rem;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(2.2rem - 1px), rgba(198, 219, 239, .7) calc(2.2rem - 1px) 2.2rem) 0 3rem,
    #fffefb;
  border-radius: 4px;
  box-shadow: var(--sombra-alta);
  transform-origin: 100% 100%;
  animation: sumario-abre .25s cubic-bezier(.3, .7, .3, 1.2);
}

@keyframes sumario-abre {
  from { opacity: 0; transform: translateY(8px) scale(.95); }
}

.sumario__titulo { font-size: 1.05rem; margin-bottom: .3rem; }

.sumario__cartao ol { list-style: none; margin: 0; padding: 0; }

.sumario__link {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  min-height: 2.2rem;
  padding: .35rem .3rem;
  color: var(--tinta);
  text-decoration: none;
  font-size: 1rem;
  border-radius: 4px;
}

.sumario__num {
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: .78rem;
  color: var(--tinta-apagada);
  font-variant-numeric: tabular-nums;
}

.sumario__link:hover { background: rgba(255, 219, 230, .5); }
.sumario__link[aria-current='true'] { color: var(--batom); font-weight: 700; }
.sumario__link[aria-current='true'] .sumario__num { color: var(--batom); }