/* =========================================================================
   mm-editorial.css — A CAMADA EDITORIAL DO PROTOCOLO (dieta + stack).

   O que os PDFs do Método HQ sempre tiveram e a web logada nunca recebeu:
   a carta do coach, o bloco de segurança, as regras, o mapa da semana, a
   tabela de carbo, as substituições, o que fazer quando o dia sai do script.

   ⚠️ TODA seção só existe quando o dado existe. Nenhuma régua vazia, nenhum
   espaço reservado: sem a chave, a página fica exatamente como sempre foi.

   Linguagem: Fitonist/APEX das páginas logadas — quase-preto #121214 sobre
   #000, limão #AFFF38 como acento raro, pêssego #F7D0BF para o que exige
   cuidado, fio iridescente de 1px no topo do cartão, cantos generosos,
   Satoshi no corpo e Wixmadefordisplay nos números.
   ========================================================================= */

/* ── O cartão editorial ────────────────────────────────────────────────── */
.mm-ed-wrap { display: flex; flex-direction: column; gap: .8rem; }
.mm-ed-wrap:empty { display: none; }
.mm-ed-wrap.is-top { margin-bottom: 1.6rem; }
.mm-ed-wrap.is-bottom { margin-top: 1.6rem; }

.mm-ed-block {
  position: relative;
  padding: 1.5rem 1.7rem;
  background: #121214;
  border: 1px solid #1f2125;
  border-radius: 1rem;
  overflow: hidden;
}
.mm-ed-block::before {
  content: '';
  position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175, 255, 56, .42), transparent);
  pointer-events: none;
}
/* O bloco de segurança fala em pêssego: é a cor do que pede cuidado, nunca
   a do que se conquista. */
.mm-ed-block.is-care { border-color: rgba(247, 208, 191, .30); }
.mm-ed-block.is-care::before { background: linear-gradient(90deg, transparent, rgba(247, 208, 191, .55), transparent); }
.mm-ed-block.is-care .mm-ed-eyebrow { color: #F7D0BF; }

.mm-ed-eyebrow {
  margin: 0 0 .35rem 0;
  color: #AFFF38;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: .66rem; font-weight: 800; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
}
.mm-ed-title {
  margin: 0 0 .75rem 0;
  color: #fff;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: 1.22rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em;
}
.mm-ed-prose { display: flex; flex-direction: column; gap: .7rem; }
.mm-ed-prose p {
  margin: 0;
  color: #d4d4d8;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: .95rem; font-weight: 400; line-height: 1.62;
}
.mm-ed-prose p + p { color: #bdbdc4; }

/* ── Notas título/corpo (regras, fora do script, medidas práticas) ─────── */
.mm-ed-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.mm-ed-note {
  padding: .95rem 1.05rem;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: .75rem;
}
.mm-ed-note-t {
  margin: 0 0 .3rem 0;
  color: #E1F5C1;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: .9rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.3;
}
.mm-ed-note-b {
  margin: 0;
  color: #a1a1aa;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: .9rem; line-height: 1.55;
}

/* ── Mapa da semana ───────────────────────────────────────────────────── */
.mm-ed-week { display: flex; gap: .45rem; flex-wrap: wrap; }
.mm-ed-day {
  flex: 1 1 5.4rem; min-width: 4.6rem;
  padding: .7rem .5rem;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: .7rem;
  text-align: center;
}
.mm-ed-day-l {
  display: block;
  color: #a1a1aa;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-ed-day-c {
  display: block; margin-top: .42rem;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
/* ⚠️ Escala ORDINAL (alto > médio > baixo) — luminosidade do mesmo limão,
   nunca três matizes brigando. O pêssego do "baixo" seria alarme, e um dia
   de carbo baixo não é um problema. */
.mm-ed-day[data-carb="alto"]  { border-color: rgba(175, 255, 56, .50); background: rgba(175, 255, 56, .09); }
.mm-ed-day[data-carb="alto"]  .mm-ed-day-c { color: #AFFF38; }
.mm-ed-day[data-carb="medio"] { border-color: rgba(175, 255, 56, .26); }
.mm-ed-day[data-carb="medio"] .mm-ed-day-c { color: #CCFF80; }
.mm-ed-day[data-carb="baixo"] .mm-ed-day-c { color: #8b8b92; }
.mm-ed-day.is-today { box-shadow: 0 0 0 1px rgba(175, 255, 56, .55); }
.mm-ed-day.is-today .mm-ed-day-l { color: #fff; }
.mm-ed-today-tag {
  display: block; margin-top: .3rem;
  color: #AFFF38; font-family: 'Satoshi Variable', sans-serif;
  font-size: .56rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}

/* ── Tabela de carbo ──────────────────────────────────────────────────── */
.mm-ed-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mm-ed-tablewrap::-webkit-scrollbar { height: 6px; }
.mm-ed-tablewrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .10); border-radius: 99px; }
.mm-ed-table { width: 100%; border-collapse: collapse; min-width: 30rem; }
.mm-ed-table th, .mm-ed-table td {
  padding: .62rem .7rem; text-align: left;
  font-family: 'Satoshi Variable', sans-serif; font-size: .88rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.mm-ed-table thead th {
  border-top: 0; color: #71717a;
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.mm-ed-table tbody th { color: #fff; font-weight: 700; }
.mm-ed-table td { color: #a1a1aa; font-variant-numeric: tabular-nums; }
.mm-ed-table td.is-alto { color: #AFFF38; font-weight: 700; }
.mm-ed-table td.is-medio { color: #CCFF80; }

/* ── Listas curtas (substituições, removidos, evite junto) ─────────────── */
.mm-ed-rows { display: flex; flex-direction: column; gap: .5rem; }
.mm-ed-row {
  display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap;
  padding: .6rem 0; border-top: 1px solid rgba(255, 255, 255, .06);
}
.mm-ed-row:first-child { border-top: 0; padding-top: 0; }
.mm-ed-row-k {
  flex: 0 0 11rem;
  color: #E1F5C1;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: .88rem; font-weight: 800; line-height: 1.4;
}
.mm-ed-row-v {
  flex: 1 1 14rem; min-width: 0;
  color: #a1a1aa;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: .9rem; line-height: 1.55;
}

.mm-ed-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.mm-ed-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .32rem .7rem; border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .10);
  color: #a1a1aa;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
}
.mm-ed-chip.is-out { border-color: rgba(247, 208, 191, .34); color: #F7D0BF; text-decoration: line-through; text-decoration-color: rgba(247, 208, 191, .5); }
.mm-ed-chip.is-in { border-color: rgba(175, 255, 56, .38); color: #CCFF80; }

/* A regra de parar: o que ela faz quando algo sai do esperado. */
.mm-ed-stop {
  display: flex; gap: .65rem; align-items: flex-start;
  margin-top: .85rem; padding: .8rem .95rem;
  background: rgba(247, 208, 191, .06);
  border: 1px solid rgba(247, 208, 191, .26);
  border-radius: .7rem;
}
.mm-ed-stop svg { flex: none; width: 17px; height: 17px; color: #F7D0BF; margin-top: .1rem; }
.mm-ed-stop p { margin: 0; color: #F7D0BF; font-family: 'Satoshi Variable', sans-serif; font-size: .9rem; line-height: 1.55; }

/* ── Dentro do cartão da refeição ─────────────────────────────────────── */
/* As opções equivalentes. Read-only de propósito: `items` continua sendo a
   opção 1 e a única que soma no dia — tratar `options` como comida a mais
   dobraria o total. */
.mm-ed-options { margin-top: .6rem; }
.mm-ed-options > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .38rem;
  color: #AFFF38;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.mm-ed-options > summary::-webkit-details-marker { display: none; }
.mm-ed-options > summary::after {
  content: ''; width: 6px; height: 6px; margin-left: .1rem;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.mm-ed-options[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.mm-ed-opt {
  margin-top: .55rem; padding: .7rem .85rem;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: .65rem;
}
.mm-ed-opt-t {
  margin: 0 0 .32rem 0; color: #E1F5C1;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: .84rem; font-weight: 800; line-height: 1.3;
}
.mm-ed-opt-l { margin: 0; padding: 0; list-style: none; }
.mm-ed-opt-l li {
  color: #a1a1aa; font-family: 'Satoshi Variable', sans-serif;
  font-size: .86rem; line-height: 1.55;
}

/* A suplementação que encosta na comida. Tracejada porque ela NÃO é comida:
   a prescrição vive no stack, isto é só onde ela toca a refeição. */
.mm-ed-supp {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-top: .6rem; padding: .55rem .8rem;
  border: 1px dashed rgba(175, 255, 56, .38);
  border-radius: .6rem;
  background: rgba(175, 255, 56, .04);
}
.mm-ed-supp-when {
  color: #AFFF38; font-family: 'Satoshi Variable', sans-serif;
  font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.mm-ed-supp-sep { color: #52525b; }
.mm-ed-supp-item { color: #E1F5C1; font-family: 'Satoshi Variable', sans-serif; font-size: .88rem; font-weight: 700; }

/* Por item: como pesar · execução · a troca */
.mm-ed-item { margin: .1rem 0 .35rem 0; }
.mm-ed-cues { margin: .22rem 0 0 0; padding: 0; list-style: none; }
.mm-ed-cues li {
  position: relative; padding-left: .8rem;
  color: #8b8b92; font-family: 'Satoshi Variable', sans-serif;
  font-size: .82rem; line-height: 1.5;
}
.mm-ed-cues li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 4px; height: 1px; background: rgba(175, 255, 56, .6);
}
.mm-ed-alt {
  display: block; margin-top: .25rem;
  color: #8b8b92; font-family: 'Satoshi Variable', sans-serif;
  font-size: .82rem; line-height: 1.5;
}
.mm-ed-alt b { color: #CCFF80; font-weight: 800; }

/* ── Dentro do item do stack ──────────────────────────────────────────── */
.mm-ed-stackx { display: flex; flex-direction: column; gap: .45rem; margin-top: .55rem; }
.mm-ed-line { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.mm-ed-line-k {
  flex: 0 0 auto;
  color: #AFFF38; font-family: 'Satoshi Variable', sans-serif;
  font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.6;
}
.mm-ed-line-v {
  flex: 1 1 12rem; min-width: 0;
  color: #a1a1aa; font-family: 'Satoshi Variable', sans-serif;
  font-size: .88rem; line-height: 1.55;
}
.mm-ed-line.is-care .mm-ed-line-k { color: #F7D0BF; }
.mm-ed-line.is-care .mm-ed-line-v { color: #d9c4bb; }

/* ── A pílula "como pesar" / "sobre o ativo" ──────────────────────────── */
.mm-ed-pill {
  appearance: none; -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .3rem; padding: .26rem .62rem;
  border: 1px solid rgba(175, 255, 56, .30);
  background: rgba(175, 255, 56, .06);
  border-radius: 9999px;
  color: #CCFF80; cursor: pointer;
  font-family: 'Satoshi Variable', sans-serif;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  transition: border-color .2s ease, background .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.mm-ed-pill:hover { transform: translateY(-1px); border-color: rgba(175, 255, 56, .62); background: rgba(175, 255, 56, .12); }
.mm-ed-pill svg { width: 12px; height: 12px; }

/* ── O termo tocável dentro da frase ──────────────────────────────────── */
.mm-ed-term {
  appearance: none; -webkit-tap-highlight-color: transparent;
  padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: #E1F5C1; cursor: pointer;
  border-bottom: 1px dotted rgba(175, 255, 56, .65);
  transition: color .18s ease, border-color .18s ease;
}
.mm-ed-term:hover, .mm-ed-term:focus-visible { color: #AFFF38; border-bottom-color: #AFFF38; outline: none; }

/* ── A folha de referência ────────────────────────────────────────────── */
/* ⚠️ 9200/9201, acima dos 9100/9101 das folhas da dieta: o termo também
   aparece DENTRO da ficha da refeição, e a explicação tem de subir por cima
   dela em vez de nascer atrás. */
.mm-ed-overlay {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0, 0, 0, .74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .26s ease;
}
.mm-ed-overlay.is-visible { opacity: 1; pointer-events: auto; }

.mm-ed-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9201;
  display: flex; flex-direction: column;
  max-height: 86vh;
  background: #0e0e12;
  border-top: 1px solid rgba(175, 255, 56, .32);
  border-radius: 1.4rem 1.4rem 0 0;
  box-shadow: 0 -24px 48px -16px rgba(0, 0, 0, .8);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.mm-ed-sheet.is-visible { transform: translateY(0); }
.mm-ed-sheet::before {
  content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175, 255, 56, .55), transparent);
  pointer-events: none;
}
.mm-ed-sheet-handle { flex: none; width: 48px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .18); margin: .8rem auto .4rem; }
.mm-ed-sheet-head { flex: none; padding: .4rem 1.6rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.mm-ed-sheet-eyebrow { margin: 0 0 .3rem 0; color: #AFFF38; font-family: 'Satoshi Variable', sans-serif; font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; line-height: 1; }
.mm-ed-sheet-title { margin: 0; color: #fff; font-family: 'Satoshi Variable', sans-serif; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.18; }
.mm-ed-sheet-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.6rem 1.8rem; -webkit-overflow-scrolling: touch; }
.mm-ed-sheet-body::-webkit-scrollbar { width: 6px; }
.mm-ed-sheet-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .10); border-radius: 99px; }
.mm-ed-sheet-body p { margin: 0; color: #d4d4d8; font-family: 'Satoshi Variable', sans-serif; font-size: .95rem; line-height: 1.62; }
/* ⚠️ Prefixado com `.mm-ed-sheet-body`: sem isso, `.mm-ed-sheet-body p` (que
   é mais específico que uma classe sozinha) vence, e a micro-etiqueta sai do
   tamanho de um parágrafo — foi o que aconteceu na primeira caminhada. */
.mm-ed-sheet-body .mm-ed-sheet-l { margin: 1.15rem 0 .4rem; color: #71717a; font-family: 'Satoshi Variable', sans-serif; font-size: .64rem; font-weight: 800; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.mm-ed-sheet-body .mm-ed-sheet-l:first-child { margin-top: 0; }
.mm-ed-sheet-ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .32rem; }
.mm-ed-sheet-ul li { position: relative; padding-left: .9rem; color: #a1a1aa; font-family: 'Satoshi Variable', sans-serif; font-size: .9rem; line-height: 1.55; }
.mm-ed-sheet-ul li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 1px; background: rgba(175, 255, 56, .6); }
.mm-ed-sheet-ul.is-care li::before { background: rgba(247, 208, 191, .7); }
.mm-ed-sheet-ul.is-care li { color: #d9c4bb; }
.mm-ed-sheet-body .mm-ed-sheet-ex { margin-top: .35rem; color: #8b8b92; font-style: italic; }
.mm-ed-sheet-body .mm-ed-sheet-ev {
  margin-top: 1.15rem; padding: .8rem .95rem;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: .7rem;
  color: #8b8b92; font-family: 'Satoshi Variable', sans-serif; font-size: .86rem; line-height: 1.55;
}

.mm-ed-close {
  position: absolute; top: .9rem; right: .9rem; z-index: 2;
  appearance: none; -webkit-tap-highlight-color: transparent;
  width: 30px; height: 30px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .10); background: #121214; color: #a1a1aa;
  cursor: pointer; transition: border-color .22s, color .22s;
}
.mm-ed-close:hover { border-color: rgba(244, 63, 94, .45); color: #fda4af; }
.mm-ed-close svg { width: 14px; height: 14px; }

/* A tarja da prévia. Existe para ninguém confundir amostra com prescrição. */
.mm-ed-demo {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem; padding: .6rem .95rem;
  border: 1px dashed rgba(253, 230, 138, .45);
  background: rgba(253, 230, 138, .05);
  border-radius: .7rem;
  color: #fde68a; font-family: 'Satoshi Variable', sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
/* ⚠️ SVG inline sem width/height herda o tamanho do container e vira um ícone
   de tela cheia. Todo ícone deste arquivo é dimensionado no CSS. */
.mm-ed-demo svg { flex: none; width: 16px; height: 16px; }

/* ── Responsivo ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mm-ed-block { padding: 1.25rem 1.2rem; }
  .mm-ed-notes { grid-template-columns: 1fr; }
  .mm-ed-row { flex-direction: column; gap: .18rem; }
  .mm-ed-row-k { flex: 1 1 auto; }
  .mm-ed-title { font-size: 1.1rem; }
  .mm-ed-sheet-head, .mm-ed-sheet-body { padding-left: 1.2rem; padding-right: 1.2rem; }
  .mm-ed-day { flex: 1 1 4rem; min-width: 3.9rem; padding: .6rem .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-ed-overlay, .mm-ed-sheet, .mm-ed-pill, .mm-ed-term, .mm-ed-options > summary::after { transition-duration: 1ms !important; }
}

/* ── Encaixe nas páginas existentes ───────────────────────────────────── */
/* A linha do stack deixa de ser uma linha quando ganha a camada editorial:
   com o marcador centralizado, a letra ficaria boiando no meio do texto. */
.stack-row.is-rich { align-items: flex-start; }
.stack-row.is-rich .stack-mark { margin-top: .15rem; }
/* Cada item da refeição vira um bloco (a linha + como pesar + execução + a
   troca), dentro da mesma lista de foods que já existia. */
.dieta-meal-itemwrap { display: block; }