/* Mapa mental (site/js/mapa.js, #/mapa/a/<aula> e #/mapa/d/<disciplina>): o quadro com o desenho (SVG), os botões
   de zoom, o cartão do ramo tocado, a versão em lista e a impressão. Visual do Zero DP (docs/design.md): o tema
   central num bloco vinho cheio, os ramos na cor suave da disciplina com o contorno dela, os itens um tom acima do
   quadro, tudo chapado (sem sombra) e de canto redondo. Só tokens; nenhuma cor escrita à mão. Prefixo mp-.

   Cor: o mapa não codifica dado por cor. Todo ramo tem o título escrito, o número (1, 2, 3…) na bolinha e a versão
   em lista logo abaixo; a cor só diz de qual disciplina é o mapa (no máximo duas na tela: o vinho do centro e a da
   disciplina). */

/* ===== cabeça ===== */
.mp-disc { justify-self: start; max-width: 100%; }
.mp-disc .bolinha-cor { flex: none; }
.mp-disc > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mp-tela .pagina-cabeca p { overflow-wrap: anywhere; }

/* as anotações mudaram depois do mapa: o aviso com o "Fazer de novo" ao lado (no celular, embaixo) */
.mp-mudou { flex-wrap: wrap; align-items: center; }
.mp-mudou > p { flex: 1 1 220px; min-width: 0; }
.mp-mudou > .link-botao { flex: none; margin: -8px 0; cursor: pointer; }

/* a IA montando o mapa e o erro: a frase troca a cada instante, o lugar dela guarda duas linhas */
.mp-pensando p { min-height: 3em; text-wrap: balance; }
.mp-erro p { text-wrap: balance; }

/* ===== quadro ===== */
.mp-quadro {
  position: relative;
  height: min(66dvh, 620px);
  min-height: 360px;
  overflow: hidden;
  border: var(--bw) solid var(--linha);
  border-radius: var(--raio-cartao);
  background-color: var(--superficie);
  /* quadro de desenho: pontinhos (uma cor só) que andam junto com a mão ao arrastar o olho */
  background-image: radial-gradient(circle, var(--linha-media) 1px, transparent 1.5px);
  background-size: 24px 24px;
}
@media (max-width: 640px) { .mp-quadro { border-radius: var(--raio-4); } }
@media (min-width: 900px) { .mp-quadro { height: min(70vh, 700px); } }

.mp-palco {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.mp-palco.pegando { cursor: grabbing; }
.mp-palco:focus-visible { border-radius: var(--raio-4); outline: 3px solid var(--foco); outline-offset: -6px; }
.mp-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* botões de zoom: em coluna à direita no computador, em linha no alto no celular (o .btn do sistema, chapado) */
.mp-botoes { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; gap: 10px; padding-bottom: var(--afunda); }
@media (max-width: 559px) { .mp-botoes { grid-auto-flow: column; } }
.mp-botoes .btn { background-color: var(--superficie-elevada); }

/* o cartão do ramo tocado flutua por cima do desenho (por isso tem sombra) */
.mp-info {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 440px;
  padding: 8px 8px 8px 14px;
  border: var(--bw) solid var(--linha-media);
  border-radius: var(--raio-3);
  background: var(--superficie-elevada);
  box-shadow: var(--sombra-flutua);
}
.mp-info[hidden] { display: none; }
.mp-info > div { display: grid; flex: 1; gap: 2px; min-width: 0; line-height: 1.3; }
.mp-info b { overflow: hidden; font-family: var(--fonte-titulo); font-size: 15.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mp-info small { color: var(--texto-3); font-size: 13.5px; }
.mp-info a { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; color: var(--acento); font-family: var(--fonte-titulo); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--acento-linha); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* o número do ramo (no cartão do ramo tocado e na lista) */
.mp-num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--acento-suave);
  color: var(--acento);
  font-family: var(--fonte-titulo);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
}

.mp-dica { padding: 0 4px; color: var(--texto-3); font-size: 13.5px; line-height: 1.45; }
.mp-impresso { display: none; }

/* tela cheia: o quadro ocupa a janela (funciona no iPhone, que não tem tela cheia de verdade fora de vídeo) */
.mp-quadro.cheia {
  position: fixed;
  inset: 0;
  z-index: 55;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
}
.mp-quadro.cheia .mp-botoes { top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }
.mp-quadro.cheia .mp-info { bottom: calc(12px + env(safe-area-inset-bottom)); }
body.mp-cheia { overflow: hidden; }

/* ===== o desenho ===== */
/* (as medidas de letra daqui são as mesmas do FONTE do mapa.js: o tamanho de cada caixa sai da medida do texto) */
.mp-svg text { fill: var(--texto); font-family: var(--fonte-texto); }
.mp-svg .fundo { stroke-linejoin: round; }

/* centro: o bloco vinho cheio, letra branca (o destaque do mapa) */
.mp-svg .cen .fundo { fill: var(--vinho); stroke: var(--vinho-baixo); stroke-width: 1.5; }
.mp-svg .cen text { fill: var(--sobre-vinho); font-family: var(--fonte-titulo); font-size: 20px; font-weight: 700; }

.mp-svg .ramo { transition: opacity .25s var(--ease); cursor: pointer; }
/* galho do centro até o ramo (afina no caminho) e o fio do ramo até cada item */
.mp-svg .galho { fill: var(--linha-forte); }
.mp-svg .fio { fill: none; stroke: var(--linha-media); stroke-width: 1.5; stroke-linecap: round; }

/* ramo: a cor suave da disciplina, com o contorno dela (é o que se toca pra chegar perto) */
.mp-svg .cab .fundo { fill: var(--cor-soft, var(--acento-suave)); stroke: var(--cor-traco, var(--acento-linha)); stroke-width: 1.5; }
.mp-svg .cab text { font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; }
/* itens: um tom acima do quadro, borda fina */
.mp-svg .item .fundo { fill: var(--superficie-2); stroke: var(--linha-media); stroke-width: 1.5; }
.mp-svg .item text { font-size: 15px; font-weight: 500; }
.mp-svg .item .ref-fundo { fill: var(--acento-suave); }
.mp-svg .item text.ref { fill: var(--acento); font-family: var(--fonte-titulo); font-size: 12.5px; font-weight: 700; }
.mp-svg .num circle { fill: var(--superficie-elevada); stroke: var(--cor-traco, var(--acento-linha)); stroke-width: 1.5; }
.mp-svg .num text { font-family: var(--fonte-titulo); font-size: 12px; font-weight: 700; }

.mp-svg.foco .ramo:not(.ativo) { opacity: .2; }
@media (hover: hover) { .mp-svg:not(.foco) .ramo:hover .cab .fundo { stroke-width: 2.5; } }
@media (prefers-reduced-motion: reduce) { .mp-svg .ramo { transition: none; } }

/* ===== a versão em lista (abre e fecha) ===== */
.mp-lista { padding: 0; }
.mp-lista > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 12px 24px;
  border-radius: var(--raio-cartao);
  font-family: var(--fonte-titulo);
  font-size: 16.5px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.mp-lista > summary::-webkit-details-marker { display: none; }
.mp-lista > summary .ic { flex: none; width: 19px; height: 19px; }
.mp-lista > summary .ic:last-child { width: 18px; height: 18px; margin-left: auto; color: var(--texto-3); stroke-width: 2.4; transition: transform .15s; }
.mp-lista[open] > summary .ic:last-child { transform: rotate(180deg); }
.mp-lista[open] > summary { border-bottom: var(--bw-fio) dashed var(--linha-media); border-radius: var(--raio-cartao) var(--raio-cartao) 0 0; }
.mp-ramos { display: grid; margin: 0; padding: 6px 24px 22px; list-style: none; }
.mp-ramos > li { display: grid; gap: 8px; padding: 16px 0; }
.mp-ramos > li > * { min-width: 0; }
.mp-ramos > li + li { border-top: var(--bw-fio) dashed var(--linha-media); }
.mp-ramos > li:last-child { padding-bottom: 0; }
.mp-ramos h3 { display: flex; align-items: center; gap: 10px; font-size: 16.5px; line-height: 1.3; overflow-wrap: anywhere; }
.mp-ramos ul { display: grid; gap: 6px; margin: 0; padding-left: 38px; color: var(--texto-2); font-size: 15.5px; line-height: 1.5; list-style: disc; overflow-wrap: anywhere; }
.mp-ramos ul li::marker { color: var(--texto-3); }
.mp-ref { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 7px; background: var(--acento-suave); color: var(--acento); font-family: var(--fonte-titulo); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.mp-origem { display: inline-flex; align-items: center; justify-self: start; gap: 7px; min-height: 44px; margin: -6px 0 -10px 38px; color: var(--acento); font-family: var(--fonte-titulo); font-size: 14.5px; font-weight: 600; text-decoration-color: var(--acento-linha); overflow-wrap: anywhere; }
.mp-origem .ic { flex: none; width: 17px; height: 17px; }
@media (max-width: 640px) {
  .mp-lista > summary { padding-inline: 16px; border-radius: var(--raio-4); }
  .mp-lista[open] > summary { border-radius: var(--raio-4) var(--raio-4) 0 0; }
  .mp-ramos { padding-inline: 16px; }
}

/* "Confira nas suas anotações": o que a IA achou diferente da lei e deixou fora do mapa */
.mp-confira > div { display: grid; flex: 1; gap: 8px; min-width: 0; }
.mp-confira h2 { font-size: 16px; font-weight: 600; }
.mp-confira ul { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.mp-confira li { display: grid; gap: 4px; padding-top: 12px; border-top: var(--bw-fio) dashed var(--ouro-linha); overflow-wrap: anywhere; }
.mp-confira q { display: block; color: var(--texto-2); font-family: var(--fonte-leitura); font-size: 15px; font-style: italic; line-height: 1.5; quotes: "“" "”"; }
.mp-confira li a { justify-self: start; color: var(--acento); font-family: var(--fonte-titulo); font-size: 14.5px; font-weight: 600; text-decoration-color: var(--acento-linha); }

@media (max-width: 480px) { .mp-acoes > .btn { flex: 1 1 100%; } }

/* ===== impressão: só o mapa, inteiro, numa folha deitada, sempre no claro =====
   O mapa.js põe data-tema="claro" na .mp-tela enquanto imprime: os tokens do tema claro valem só ali (base.css). */
.mp-tela[data-tema] { color: var(--texto); }
@page mapa { size: A4 landscape; margin: 9mm; }
@media print {
  body:has(.mp-tela) { background: none; }
  .mp-tela .voltar,
  .mp-tela .mp-disc,
  .mp-tela .mp-mudou,
  .mp-tela .mp-botoes,
  .mp-tela .mp-info,
  .mp-tela .mp-dica,
  .mp-tela .mp-lista,
  .mp-tela .mp-confira,
  .mp-tela .mp-nota,
  .mp-tela .mp-acoes { display: none !important; }
  body:has(.mp-tela) main, body:has(.mp-tela) #tela { width: 100%; min-height: 0; margin: 0; padding: 0; }
  .mp-tela { page: mapa; max-width: none; gap: 3mm; }
  .mp-tela .pagina-cabeca { margin: 0; }
  .mp-tela .pagina-cabeca h1 { font-size: 18pt; }
  .mp-quadro, .mp-quadro.cheia {
    position: relative;
    inset: auto;
    width: 100%;
    height: 150mm;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: none;
    break-inside: avoid;
  }
  .mp-palco { position: absolute; inset: 0; }
  .mp-svg, .mp-svg * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mp-svg.foco .ramo:not(.ativo) { opacity: 1; }
  .mp-impresso { display: block; color: var(--texto-3); font-size: 9pt; }
}