/* ════════════════════════════════════════════════════════════
   MINHA ÁREA — dashboard de evolução. Reusa paleta + passe.css.
   Estética UWorld/Duolingo: painéis claros, dados legíveis, sóbrio.
═════════════════════════════════════════════════════════════ */
.ma-body { background: var(--bg2); }
.ma { min-height: 70vh; }
/* Dentro do app shell, o container não pode usar 92vw (não desconta a sidebar) —
   senão estoura o .app-main e é cortado pelo overflow-x:hidden do body. */
.ma-in-shell .pz-container { width: 100%; max-width: 900px; margin-inline: 0; }

/* Gate / vazio / loading */
.ma-gate, .ma-empty { display: grid; place-items: center; padding: 20px; min-height: 70vh; }
.ma-loading { display: grid; place-items: center; padding: 40px 20px; min-height: 60vh; color: var(--cinza-texto); }
.ma-gate-card {
  background: #fff; border: 1px solid var(--borda); border-radius: 20px; padding: 44px 38px;
  max-width: 460px; width: 100%; text-align: center; box-shadow: 0 20px 44px -12px rgba(29,39,70,.16);
}
/* Ícone dos estados vazios (era emoji — ver icones.js, pendência #9). */
.ma-gate-icon { margin-bottom: 14px; color: var(--accent); display: flex; justify-content: center; }
.ma-gate-icon svg { width: 42px; height: 42px; }
.ma-gate-card h1 { font-size: 1.55rem; font-weight: 800; margin-bottom: 12px; color: var(--preto); letter-spacing: -0.01em; }
.ma-gate-card p { color: var(--cinza-texto); line-height: 1.6; margin-bottom: 24px; }
.ma-gate-card .pz-input { margin-bottom: 14px; text-align: center; }
.ma-gate-foot { margin-top: 20px; font-size: .92rem; }
/* .ma-linklike é o "Criar conta" do /entrar — parece link, mas é o único jeito de
   trocar para cadastro. Ganha alvo de dedo sem virar botão visualmente. */
.ma-gate-foot a, .ma-linklike { color: var(--azul-destaque); font-weight: 600; text-decoration: underline; background: none; border: none; cursor: pointer; font-size: inherit; padding: 10px 4px; margin: -10px -4px; display: inline-block; }

/* Trocar e-mail (dentro do dashboard, ao lado do badge do passe) */
.ma-head-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ma-logout { background: #fff; border: 1px solid var(--borda); border-radius: 999px; padding: 9px 18px; font-weight: 600; font-size: .88rem; color: var(--preto); white-space: nowrap; transition: border-color .15s ease; }
.ma-logout:hover { border-color: var(--preto); }

/* Dashboard */
/* Dentro do app shell: o offset já vem do .app-main (sidebar à esquerda), então
   o padding de topo que existia pra limpar o header fixo de marketing sai. */
.ma-dash { padding: 0 0 20px; }
.ma-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.ma-eyebrow { display: inline-block; font-weight: 700; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-destaque); margin-bottom: 8px; }
.ma-title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; color: var(--preto); }
.ma-sub { color: var(--cinza-texto); margin-top: 8px; font-size: 1.02rem; }
.ma-passe-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: .9rem; background: var(--lima-claro); color: #2f6b12; white-space: nowrap;
}
.ma-passe-badge.expira { background: var(--azul-pill); color: var(--azul-destaque); }

/* Cards de resumo */
.ma-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.ma-card {
  background: #fff; border: 1px solid var(--borda); border-radius: 20px; padding: 22px 22px;
  display: flex; flex-direction: column; gap: 4px; transition: transform .18s ease, box-shadow .18s ease;
}
.ma-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -12px rgba(29,39,70,.16); }
.ma-card-label { font-size: .82rem; font-weight: 600; color: var(--cinza-texto); }
.ma-card-value { font-size: 2.1rem; font-weight: 900; color: var(--preto); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ma-card-value.accent { color: var(--azul-destaque); }
.ma-card-value.green { color: var(--success); }
.ma-card-sub { font-size: .86rem; color: var(--cinza-texto); margin-top: 2px; }
.ma-card-sub .up { color: var(--success); font-weight: 700; }
.ma-card-sub .down { color: var(--red); font-weight: 700; }
.ma-card-sub .flat { color: var(--laranja); font-weight: 700; }
.ma-flame { color: var(--laranja); display: inline-flex; align-items: center; }
.ma-flame .esp-icone { width: 1.15rem; height: 1.15rem; }

/* Foco recomendado (adaptativo) */
.ma-foco {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--borda); border-left: 5px solid var(--azul-destaque);
  border-radius: 20px; padding: 20px 24px; margin-bottom: 24px;
}
.ma-foco.alerta { border-left-color: var(--red); background: #fff8f7; }
.ma-foco.ok { border-left-color: var(--success); background: #f5fbf7; }
/* Ícone do foco (era emoji — icones.js). A cor vem do estado do painel. */
.ma-foco-icon { display: flex; color: var(--azul-destaque); }
.ma-foco-icon svg { width: 30px; height: 30px; }
.ma-foco.alerta .ma-foco-icon { color: var(--red); }
.ma-foco.ok .ma-foco-icon { color: var(--success); }
.ma-foco-copy { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.ma-foco-copy strong { font-size: 1.08rem; font-weight: 800; color: var(--preto); }
.ma-foco-copy span { font-size: .94rem; color: var(--cinza-texto); line-height: 1.5; }
.ma-foco-cta {
  background: var(--preto); color: #fff; font-weight: 700; padding: 12px 20px; border-radius: 999px;
  white-space: nowrap; transition: transform .15s ease, box-shadow .2s ease;
}
.ma-foco-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(29,39,70,.10); }
@media (max-width: 560px) { .ma-foco-cta { width: 100%; text-align: center; white-space: normal; line-height: 1.3; } }

/* Painéis */
.ma-panel { background: #fff; border: 1px solid var(--borda); border-radius: 20px; padding: 26px 28px; margin-bottom: 22px; }
.ma-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ma-panel-head h2 { font-size: 1.2rem; font-weight: 800; color: var(--preto); }
.ma-panel-hint { font-size: .84rem; color: var(--cinza-texto); }
.ma-panel-cta { font-size: .9rem; font-weight: 700; color: var(--azul-destaque); text-decoration: none; padding: 7px 14px; border: 1px solid var(--azul-pill); border-radius: 999px; }
.ma-panel-cta:hover { background: var(--azul-pill); }

/* Atividade (strip 14 dias) */
.ma-atividade { display: grid; grid-template-columns: repeat(14, minmax(0, 34px)); gap: 5px; }
.ma-atv-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ma-atv-cell { width: 100%; aspect-ratio: 1; max-width: 40px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--borda); }
.ma-atv-cell.lvl1 { background: #cfe0c0; border-color: #b8d3a3; }
.ma-atv-cell.lvl2 { background: #8fc06a; border-color: #7fb457; }
.ma-atv-cell.lvl3 { background: #4f9d2b; border-color: #43871f; }
.ma-atv-day { font-size: .72rem; color: var(--cinza-claro); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .ma-atividade { gap: 4px; } .ma-atv-day { font-size: .7rem; } }

/* Gráfico SVG */
.ma-chart { width: 100%; overflow-x: auto; }
/* `height: auto` fazia o SVG herdar a proporção do viewBox e crescer com a
   largura — 238px num container pensado para 190. A curva tem altura FIXA de
   propósito: densidade é o que faz um gráfico parecer instrumento, não enfeite. */
/* SEM `width: 100%`: o SVG é desenhado na largura real do container e traz os
   atributos width/height. Forçar 100% aqui reescalava o desenho — e a escala
   horizontal esmagava o texto dos rótulos junto (o "6,1" saía ilegível). */
.ma-chart svg { display: block; }
.ma-chart-empty { color: var(--cinza-texto); font-size: .95rem; padding: 20px 0; }
.ma-dot { cursor: pointer; }
.ma-chart-tip { fill: var(--preto); }

/* Áreas (mastery bars) */
.ma-areas { display: flex; flex-direction: column; gap: 16px; }
.ma-area-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
/* Critério de foco (Bloco 3): o que a trilha e o drill vão atacar em seguida. */
.ma-area-row--foco { padding: 10px 12px; margin: -10px -12px; border-radius: var(--radius-md); background: var(--accent-soft); }
.ma-crit-foco {
  margin-left: 8px; font-size: .64rem; font-weight: 800;
  background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 999px; vertical-align: middle;
}
.ma-area-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ma-area-name { font-weight: 600; color: var(--preto); }
.ma-area-count { font-size: .82rem; color: var(--cinza-texto); }
.ma-area-val { font-weight: 800; font-variant-numeric: tabular-nums; }
.ma-area-track { height: 12px; background: var(--bg2); border-radius: 999px; overflow: hidden; border: 1px solid var(--borda); }
.ma-area-fill { height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.2,1); }

/* Histórico */
.ma-historico { display: flex; flex-direction: column; }
.ma-hist-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.ma-hist-row:last-child { border-bottom: none; }
.ma-hist-badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #fff; font-variant-numeric: tabular-nums; }
.ma-hist-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ma-hist-area { font-weight: 600; color: var(--preto); }
.ma-hist-meta { font-size: .84rem; color: var(--cinza-texto); }
.ma-hist-pct { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.ma-hist-pct small { display: block; font-weight: 500; font-size: .74rem; color: var(--cinza-texto); }

/* Upsell */
.ma-upsell {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--roxo), var(--azul-card)); color: #fff; border-radius: 20px; padding: 24px 28px; margin-top: 8px;
}
.ev-page > .ma-upsell { margin-inline: 0; }
.ma-upsell strong { display: block; font-size: var(--esp-type-body); font-weight: 800; }
.ma-upsell span { font-size: var(--esp-type-support); opacity: .95; }
.ma-upsell .pz-btn-primary { background: #fff; color: var(--preto); }

@media (max-width: 900px) { .ma-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .ma-dash { padding: 0 0 40px; }
  .ma-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ma-card-value { font-size: 1.7rem; }
  .ma-panel { padding: 20px 18px; }
  .ma-upsell { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MESA DE PREPARAÇÃO — a tela EVOLUÇÃO
   ══════════════════════════════════════════════════════════════════════════════
   Oito painéis de peso igual viraram três movimentos: a manchete (onde estou),
   o player de critérios (onde perco ponto + o que treino) e as tentativas.
   Mesma gramática da home: uma superfície dominante, seções sem moldura, e o
   que não pede decisão vai para o rodapé com peso de rodapé.
════════════════════════════════════════════════════════════════════════════════ */

/* ── Entrada da tela ──
   Mesma gramática de movimento da home: blocos entram de cima para baixo, 40ms
   entre eles. É o que dá ao olho a ordem de leitura que a hierarquia pretende. */
@keyframes ma-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.ma-dash .pz-container > * {
  animation: ma-entra .38s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.ma-dash .pz-container > *:nth-child(1) { animation-delay: 0ms; }
.ma-dash .pz-container > *:nth-child(2) { animation-delay: 40ms; }
.ma-dash .pz-container > *:nth-child(3) { animation-delay: 80ms; }
.ma-dash .pz-container > *:nth-child(4) { animation-delay: 120ms; }
.ma-dash .pz-container > *:nth-child(5) { animation-delay: 160ms; }
.ma-dash .pz-container > *:nth-child(n+6) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  .ma-dash .pz-container > * { animation: none; }
  .ma-treino { transition: none; }
  .ma-treino:hover { transform: none; }
}

/* ── 1. A manchete ── */
.ma-hero { position: relative; margin-bottom: var(--sp-6, 24px); }
.ma-hero-kicker {
  display: block;
  font-size: .7rem; font-weight: 800;
  color: var(--accent-strong, var(--accent-strong));
}
.ma-hero-title {
  margin-top: 8px;
  font-family: var(--font-display), 'Manrope', sans-serif;
  font-size: clamp(1.6rem, 3.6vw, 2.35rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.025em;
  color: var(--fg, var(--esp-ink));
}
.ma-hero-title b { color: var(--warn, var(--warn)); font-weight: 800; }
.ma-hero-title b.ok { color: var(--success, var(--esp-lime-ink)); }
.ma-hero-sub {
  margin-top: 10px; max-width: 62ch;
  font-size: 1rem; line-height: 1.6; color: var(--fg-soft, var(--esp-muted));
}
.ma-hero-sub b { color: var(--fg, var(--esp-ink)); font-weight: 700; }
.ma-hero-sub b.ok { color: var(--success, var(--esp-lime-ink)); }
.ma-hero-sub b.risco { color: var(--danger, var(--esp-danger)); }
.ma-hero-sub a { color: var(--accent-strong, var(--accent-strong)); font-weight: 700; }
.ma-hero-side { position: absolute; top: 0; right: 0; }

/* ── O gráfico, sem moldura de painel ── */
.ma-chart-wrap { margin-bottom: var(--sp-5, 20px); }
.ma-chart-legend {
  margin-top: 8px; font-size: var(--esp-type-caption); color: var(--fg-faint, var(--cinza-claro));
}

/* ── 2. Faixa de contexto ── */
.ma-contexto {
  display: flex; flex-wrap: wrap; gap: var(--sp-5, 20px);
  padding: var(--sp-4, 16px) 0;
  border-top: 1px solid var(--borda, var(--esp-line));
  border-bottom: 1px solid var(--borda, var(--esp-line));
  margin-bottom: var(--sp-8, 32px);
}
.ma-contexto span { font-size: .84rem; color: var(--fg-soft, var(--esp-muted)); white-space: nowrap; }
.ma-contexto b { font-weight: 800; color: var(--fg, var(--esp-ink)); font-variant-numeric: tabular-nums; }

/* ── Seções tipográficas ── */
.ma-secao { margin-bottom: var(--sp-8, 32px); }
.ma-secao-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: var(--sp-4, 16px);
}
.ma-secao-head h2 {
  font-family: var(--font-display), 'Manrope', sans-serif;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--fg, var(--esp-ink));
}
.ma-secao-head span { font-size: .8rem; color: var(--fg-faint, var(--cinza-claro)); }
.ma-secao-cta { font-size: .82rem; font-weight: 700; color: var(--accent-strong, var(--accent-strong)); }
.ma-secao--rodape { opacity: .9; }
.ma-secao--rodape .ma-areas { margin-top: var(--sp-5, 20px); }
.ma-vazio {
  padding: 22px; border: 1px dashed var(--borda, var(--esp-line)); border-radius: 16px;
  font-size: .9rem; line-height: 1.6; color: var(--fg-soft, var(--esp-muted));
}

/* ── 3. O player de critérios ── */
.ma-player {
  display: grid; grid-template-columns: minmax(210px, 270px) 1fr; gap: var(--sp-5, 20px);
  align-items: start;
}
.ma-player-abas { display: flex; flex-direction: column; gap: 2px; }
.ma-aba {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 10px;
  padding: 11px 12px; border: 0; border-radius: 12px;
  background: transparent; text-align: left; width: 100%;
  transition: background .15s ease;
}
.ma-aba:hover { background: var(--surface-2, var(--surface-2)); }
.ma-aba[aria-selected="true"] { background: var(--accent-soft, var(--esp-periwinkle-soft)); }
.ma-aba-nome {
  display: flex; align-items: center; gap: 7px;
  font-size: .9rem; font-weight: 700; color: var(--fg, var(--esp-ink));
}
.ma-aba-nome i {
  font-style: normal; font-size: .68rem; font-weight: 800; padding: 2px 6px; border-radius: 999px;
  background: var(--accent, var(--esp-periwinkle)); color: #fff;
}
.ma-aba-pct { font-size: .86rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ma-aba-track {
  grid-column: 1 / -1; height: 3px; border-radius: 999px;
  background: var(--borda, var(--esp-line)); overflow: hidden;
}
.ma-aba-track i { display: block; height: 100%; border-radius: 999px; }

/* O painel: a superfície pesada da tela, como o próximo movimento é na home. */
.ma-player-painel {
  background: var(--surface, #fff);
  border: 1px solid var(--borda, var(--esp-line));
  border-radius: var(--radius-lg, 20px);
  padding: var(--sp-5, 20px) var(--sp-6, 24px);
  box-shadow: var(--shadow-md);
}
.ma-painel-topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.ma-painel-num b {
  display: block;
  font-family: var(--font-display), 'Manrope', sans-serif;
  font-size: 2rem; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--fg, var(--esp-ink));
}
.ma-painel-num span { font-size: .8rem; color: var(--fg-soft, var(--esp-muted)); }
.ma-painel-tend {
  font-size: .78rem; font-weight: 800; padding: 5px 10px; border-radius: 999px;
  background: var(--surface-2, var(--surface-2)); color: var(--fg-soft, var(--esp-muted));
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ma-painel-tend.subindo { background: var(--success-soft, var(--success-soft)); color: var(--success, var(--esp-lime-ink)); }
.ma-painel-tend.caindo { background: #fdeef0; color: var(--danger, var(--esp-danger)); }

/* Sparkline da trajetória */
/* Sem width/height fixos: o SVG vem dimensionado em pixels do JS. Esta regra
   antiga esticava o desenho e achatava o rótulo "6,0" junto. */
.ma-spark { display: block; max-width: none; overflow: visible; }
.ma-spark-corte { stroke: var(--accent, var(--esp-periwinkle)); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; }
.ma-spark-area { fill: var(--accent-soft, var(--esp-periwinkle-soft)); }
.ma-spark-linha { fill: none; stroke: var(--accent, var(--esp-periwinkle)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ma-spark-fim { fill: var(--accent-strong, var(--accent-strong)); stroke: #fff; stroke-width: 2; }

.ma-painel-vered { margin-top: 10px; font-size: .92rem; line-height: 1.5; }
.ma-vered b { font-weight: 800; }
.ma-vered.ok { color: var(--success, var(--esp-lime-ink)); }
.ma-vered.risco { color: var(--danger, var(--esp-danger)); }
.ma-vered.neutro { color: var(--fg-soft, var(--esp-muted)); }
.ma-painel-custo { margin-top: 6px; font-size: .84rem; color: var(--fg-faint, var(--cinza-claro)); }
.ma-painel-custo b { color: var(--fg, var(--esp-ink)); font-weight: 700; }

/* O caso concreto: a ponte para a sala, dentro do diagnóstico */
.ma-treino {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  min-height: var(--tap-min); padding: 13px 15px; border-radius: 16px;
  background: var(--surface-dark); color: var(--surface-dark-ink);
  transition: transform .15s ease;
}
.ma-treino:hover { transform: translateY(-1px); }
.ma-treino-tag {
  flex: 0 0 auto; font-size: .68rem; font-weight: 800; padding: 4px 9px; border-radius: 999px;
  background: var(--lima); color: var(--approve-ink);
}
.ma-treino-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ma-treino-copy b { font-size: .92rem; font-weight: 700; }
.ma-treino-copy span { font-size: .78rem; color: var(--surface-dark-soft); }
.ma-treino-seta { flex: 0 0 auto; font-weight: 800; color: var(--lima); }

/* ── Tentativas: linha do tempo ── */
/* A 4ª coluna é a chevron de "abrir". Fica declarada mesmo nas linhas que não
   abrem (as sem correction_id): coluna `auto` vazia não ocupa largura, e assim
   as duas variantes alinham a nota na mesma vertical. */
.ma-tent {
  display: grid; grid-template-columns: 92px 1fr auto auto; align-items: center; gap: 14px;
  padding: 13px 4px; border-bottom: 1px solid var(--borda, var(--esp-line));
}
.ma-tent:first-child { border-top: 1px solid var(--borda, var(--esp-line)); }
.ma-tent-quando {
  font-size: .78rem; font-weight: 700; color: var(--fg-faint, var(--cinza-claro));
  font-variant-numeric: tabular-nums;
}
.ma-tent-o-que { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ma-tent-o-que b { font-size: .92rem; font-weight: 700; color: var(--fg, var(--esp-ink)); }
.ma-tent-o-que i { font-style: normal; font-size: .78rem; color: var(--fg-soft, var(--esp-muted)); }
.ma-tent-nota {
  font-family: var(--font-display), 'Manrope', sans-serif;
  font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.ma-tent-nota small { font-size: .72rem; font-weight: 700; color:var(--fg-soft); opacity:1; margin-left: 2px; }

/* A linha que ABRE a correção. Não vira botão: continua sendo a mesma linha da
   tabela — o que muda é a chevron à direita (o único sinal de que há mais coisa
   atrás) e o realce sob o dedo/cursor. Alvo de toque: a linha inteira. */
.ma-tent--abre { min-height: var(--tap-min); text-decoration: none; color: inherit; cursor: pointer; margin: 0 -10px; padding-inline: 14px; border-radius: 12px; transition: background var(--t-fast); }
.ma-tent--abre:hover { background: var(--surface-2, var(--bg2)); }
.ma-tent--abre:focus-visible { outline: 2px solid var(--accent, var(--roxo)); outline-offset: 2px; }
.ma-tent-abrir { font-size: 1.2rem; font-weight: 700; color: var(--fg-faint, var(--cinza-claro)); line-height: 1; }
.ma-tent--abre:hover .ma-tent-abrir { color: var(--accent, var(--roxo)); }

@media (max-width: 860px) {
  /* Abas viram faixa horizontal rolável: em coluna, num celular, elas empurravam
     o painel (que é o conteúdo) para baixo da dobra. */
  .ma-player { grid-template-columns: 1fr; }
  .ma-player-abas {
    flex-direction: row; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 2px 16px 6px;
  }
  .ma-player-abas::-webkit-scrollbar { display: none; }
  .ma-aba { width: auto; flex: 0 0 auto; min-width: 138px; }
  .ma-player-painel { padding: 18px; }
  .ma-hero-side { position: static; margin-top: 12px; }
  .ma-contexto { gap: 12px 18px; }
  .ma-tent { grid-template-columns: 1fr auto auto; gap: 4px 12px; }
  .ma-tent-quando { grid-column: 1 / -1; }
}

/* ══ REFINO: a curva, as abas e o painel ══════════════════════════════════════
   O que ainda lia como improviso não era falta de enfeite. Era o gráfico com
   metade da área vazia (domínio fixo 0–100 para notas que vivem entre 4,5 e
   7,5), a trajetória achatada contra a base pelo mesmo motivo, e duas unidades
   — "%" e "pts" — disputando a mesma tela. Aqui: domínio que acompanha os
   dados, uma unidade só (nota), e peso onde existe decisão. */

/* ── A curva ── */
.ma-chart { position: relative; }
.ma-curva { display: block; overflow: visible; }
.ma-g-linha { stroke: var(--borda); stroke-width: 1; }
.ma-g-rot, .ma-g-data {
  font-family: var(--font-body), Inter, sans-serif;
  font-size: 11px; font-weight: 600; fill: var(--fg-faint, var(--cinza-claro));
  font-variant-numeric: tabular-nums;
}
/* O corte é a única linha com cor: é a régua contra a qual tudo é medido. */
.ma-g-corte { stroke: #4f741b; stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .82; }
.ma-g-corte-rot {
  font-family: var(--font-body), Inter, sans-serif;
  font-size: 11px; font-weight: 800; fill: #4f741b;
  font-variant-numeric: tabular-nums;
}
.ma-c-linha {
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ma-c-guia { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .45; }
.ma-c-ponto { fill: var(--surface); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ma-c-fim { stroke: var(--surface); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ma-c-fim.acima { fill: #4f741b; }
.ma-c-fim.abaixo { fill: #9a5a12; }
.ma-c-fim-rot {
  font-family: var(--font-display), Manrope, sans-serif;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.ma-c-fim-rot.acima { fill: #4f741b; }
.ma-c-fim-rot.abaixo { fill: #9a5a12; }
.ma-chart-vazio {
  padding: 30px 22px; border: 1px dashed var(--borda); border-radius: 16px;
  font-size: .9rem; color: var(--fg-soft); text-align: center;
}

/* ── Abas: lista de prioridade, não barrinhas ── */
.ma-aba {
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 12px 13px;
  border-left: 3px solid transparent;
  border-radius: 0 12px 12px 0;
}
.ma-aba[aria-selected="true"] { border-left-color: var(--accent); }
/* O custo é o número que decide a prioridade — ele carrega o peso da linha. */
.ma-aba-custo {
  font-family: var(--font-display), Manrope, sans-serif;
  font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; color: var(--fg);
}
.ma-aba-pct {
  grid-column: 1 / -1;
  font-size: .7rem; font-weight: 600; color: var(--fg-faint, var(--cinza-claro));
  font-variant-numeric: tabular-nums;
}
.ma-aba-track { grid-column: 1 / -1; height: 3px; margin-top: 1px; }

/* ── Painel: o custo é a manchete ── */
.ma-painel-topo { align-items: flex-end; }
.ma-painel-custo { display: flex; flex-direction: column; gap: 1px; }
.ma-painel-custo-rot {
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fg-faint, var(--cinza-claro));
}
.ma-painel-custo b {
  font-family: var(--font-display), Manrope, sans-serif;
  font-size: 2.5rem; font-weight: 800; line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  color: var(--danger, var(--esp-danger));
}
.ma-painel-custo-un { font-size: .8rem; font-weight: 600; color: var(--fg-soft); }
.ma-painel-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ma-painel-ap { font-size: .8rem; color: var(--fg-soft); white-space: nowrap; }
.ma-painel-ap b { font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; }

/* ── Trajetória com respiro ── */
.ma-spark { display: block; margin: 18px 0 6px; }
.ma-spark-slot { min-height: 0; overflow-x: auto; scrollbar-width: thin; }
.ma-spark-ini { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.ma-spark-corte-rot {
  font-family: var(--font-body), Inter, sans-serif;
  font-size: 10px; font-weight: 800; fill: #4f741b;
}
.ma-painel-vered { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }

/* ── Faixa de constância: heat strip, não calendário vazio ──
   Eram 14 quadrados cinzas com o dia do mês embaixo — lia como calendário em
   branco. A letra do dia da semana é como se pensa em rotina ("treino terça e
   quinta"), o número só aparece quando houve treino, e hoje ganha anel. */
/* `repeat(14, 1fr)` esticava cada célula até 65px de largura no desktop e, com
   aspect-ratio 1, virava uma fileira de caixas enormes e vazias — o oposto de
   "constância". A faixa tem tamanho PRÓPRIO e se alinha à esquerda: é um
   indicador, não um layout que precisa preencher a linha. */
.ma-atividade {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 34px));
  gap: 5px; justify-content: start;
}
.ma-atv-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 100%; max-width: none; aspect-ratio: 1;
  border-radius: 8px; background: var(--surface-2); border: 1px solid var(--borda);
}
.ma-atv-cell i {
  font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .03em;
  color: var(--fg-faint, var(--cinza-claro));
}
.ma-atv-cell b { font-size: .78rem; font-weight: 800; line-height: 1; }
.ma-atv-cell.lvl1 { background: #eaf5dc; border-color: #d5ebba; }
.ma-atv-cell.lvl2 { background: #cfe7a6; border-color: #b9db85; }
.ma-atv-cell.lvl3 { background: #a9d472; border-color: #94c655; }
.ma-atv-cell.lvl1 i, .ma-atv-cell.lvl2 i, .ma-atv-cell.lvl3 i,
.ma-atv-cell.lvl1 b, .ma-atv-cell.lvl2 b, .ma-atv-cell.lvl3 b { color: var(--approve-ink, var(--approve-ink)); }
.ma-atv-cell.hoje { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

@media (max-width: 860px) {
  .ma-aba { border-left: 0; border-bottom: 3px solid transparent; border-radius: 12px; }
  .ma-aba[aria-selected="true"] { border-left-color: transparent; border-bottom-color: var(--accent); }
  .ma-painel-topo { align-items: flex-start; }
  .ma-painel-meta { align-items: flex-start; }
  .ma-painel-custo b { font-size: 2.1rem; }
}
@media (max-width: 560px) {
  /* Célula legível é mais importante que espremer 14 dias em 7px de texto. A faixa
     mantém a cronologia e começa nos dias recentes pelo JS. */
  .ma-atividade { grid-template-columns: repeat(14, minmax(0, 30px)); gap: 4px; overflow-x: auto; padding: 3px 3px 7px; scrollbar-width: thin; }
  .ma-atv-cell { border-radius: 8px; }
  .ma-atv-cell i { font-size: .68rem; }
  .ma-atv-cell b { font-size: .7rem; }
}