/* =============================================================================
   MENU — CSS da tela. Medidas em px CSS para a viewport de 430x932.
   Tokens em css/app.css.

   Estrutura do documento rolável (y = coordenada do DOCUMENTO):

     0    ->  59   .menu__safe     faixa #1441C1 (a .safe-top desenha por cima)
     59   -> 175   .menu__header   header #085DE6 STICKY (altura 116) — os tiles
                                   passam por baixo dele
     175  -> ...   .menu__body     corpo BRANCO, padding lateral 16

   Ritmo vertical medido nos frames 16-20 (docs/inventario-frames.md):

     fim do header (175)          -> cap-top do 1o titulo de secao   26,7
     cap-top do titulo            -> topo da 1a linha de tiles       31,3  (= cap-bottom + 20)
     linha de tiles               -> proxima linha                  100    (82 + 18)
     ultima linha de tiles        -> divisoria de 1px                16
     divisoria                    -> cap-top do proximo titulo       19,3

   Como isso vira CSS: o cap-top do texto nao e a borda da caixa, entao o ritmo
   e ancorado nas CAIXAS e nao no cap-top — com valores INTEIROS, para que tudo
   caia na grade de 1/3 px do dpr 3 e as bordas de 1px fiquem nitidas:

     corpo (175) + 22 (padding) + 36 (cabecalho)            = 233  1a linha de tiles
     ultima linha + 16 -> divisoria; divisoria + 1 + 14 + 36 = +51  proxima linha

   Isso reproduz exatamente os marcos medidos (tiles 233 / 482 / 1031 / 1280 /
   1529 / 1678, divisorias 431 / 980 / 1229 / 1478 / 1627). O cap-top do titulo
   sai do proprio texto (`--menu-cap-off` + o nudge de 0,6 px em .msec__title).
   ============================================================================= */

.menu {
  position: relative;

  /* -- calibracao vertical (ver cabecalho) ------------------------------- */
  --menu-cap-off:    4.24px;  /* topo do bbox do texto dentro da caixa de 14px/20 Montserrat (medido) */
  --menu-head-h:       36px;  /* altura do cabecalho de secao */
  --menu-first-top:    22px;  /* corpo (175) -> caixa do 1o titulo: 175+22+36 = 233 */
  --menu-gap-top:      14px;  /* divisoria -> caixa do titulo: divisoria+1+14+36 = +51 */

  /* -- tiles -------------------------------------------------------------- */
  --tile-w:      104px;
  --tile-h:       82px;
  --tile-gap-x:    8px;       /* colunas em x=16 / 128 / 240 */
  --tile-gap-y:   18px;       /* passo vertical de 100 */
  /* Os PNGs de assets/img/menu-icons sao recortes de 36x36 px CSS (108 px @3x)
     feitos em tile+34 / tile+13 — conferido por casamento exato contra os frames
     16-20. Exibi-los a 36 px nessa posicao e pixel a pixel identico ao app real;
     a "caixa de 28 px com topo em +17" do PROMPT descreve a TINTA do desenho
     (18-28 px), nao o recorte. Os -1px descontam a borda de 1px do tile (o bloco
     absoluto e posicionado a partir da caixa de padding). */
  --tile-icon:    36px;
  --tile-icon-x:  33px;       /* +34 na caixa de borda */
  --tile-icon-y:  12px;       /* +13 na caixa de borda */
  --tile-label-y: 49.6px;     /* cap-top em +52 (Inter 13px/14,3; calibrado no shot) */
}

.menu__safe {
  height: var(--safe-top);
  background: var(--blue-splash);
}

/* ============================== Header fixo =============================== */
/* Sticky (e nao `fixed`): dentro do frame de desktop o `fixed` se ancoraria na
   janela, e nao no aparelho de 430x932. `top: var(--safe-top)` prende o header
   em y=59; os tiles rolam por baixo. */
.menu__header {
  position: sticky;
  top: var(--safe-top);
  z-index: 3;
  height: 116px;                 /* y=59 -> 175 */
  background: var(--blue-primary);
}

/* "Menu" branco, cap y=85,3..95,3, centrado em x=215. 14px (e nao os 15px do
   PROMPT): a 15px o bbox de Montserrat sai 41,0 x 11,0 contra os 38,3 x 10,0
   medidos no frame; a 14px bate nos dois eixos. */
.menu__title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(26.3px - var(--menu-cap-off));
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  color: var(--white);
}

/* ============================= Campo de busca ============================= */
/* x=16..414, y=115..159 (44 de altura), branco, borda 1px #222222, raio ~3,
   sem sombra. Fica 16px acima do fim do header. */
.menu__search {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);          /* fluido: em 430 da os 398 medidos; em 360 nao estoura */
  top: 56px;                     /* 115 - 59 */
  height: 44px;
}

.menu__input {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 1.4px 42px 0 16px;    /* tinta do texto em x=34 e centro 0,7px abaixo */
  appearance: none;
  -webkit-appearance: none;
  background: var(--white);
  border: 1px solid var(--search-border);
  border-radius: 3px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  outline: none;
  box-shadow: none;
}
/* Indicador de foco de teclado: a borda de 1 px #222 e igual em repouso e com
   foco. O box-shadow nao ocupa espaco (nenhum reflow) e so aparece com foco;
   os frames 16-20 nao focam o campo, entao o QA nao muda. */
.menu__input:focus-visible {
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 2px var(--blue-primary);
}
.menu__input::placeholder { color: #474747; opacity: 1; }
.menu__input::-webkit-search-decoration,
.menu__input::-webkit-search-cancel-button,
.menu__input::-webkit-search-results-button,
.menu__input::-webkit-search-results-decoration { display: none; }

/* Lupa 19,3 px em x=381,3..400,7 / y=127,3..146,7 (padding direito 13) */
.menu__lupa {
  position: absolute;
  right: 13.3px;                 /* fim da tinta em x=400,7 (414 - 13,3) */
  top: 12.3px;                   /* 127,3 - 115 */
  width: 19.3px;
  height: 19.3px;
  color: #484848;
  pointer-events: none;
}
.menu__lupa svg { width: 100%; height: 100%; }

/* ================================ Corpo =================================== */
/* Branco puro (nao #F3F3F3). O padding inferior reserva a tab bar (102) + os
   16 px que separam o ultimo tile dela. */
.menu__body {
  padding: var(--menu-first-top) var(--gutter) calc(var(--tabbar-total) + 16px);
  background: var(--white);
}

/* ============================ Secao + cabecalho =========================== */
/* A divisoria de 1px #D5D5D5 (x=16..414) e a borda superior da secao. A classe
   e aplicada pelo JS a toda secao VISIVEL que nao seja a primeira, para o filtro
   da busca nunca deixar uma divisoria orfa no topo da lista. */
.msec { position: relative; }

.msec.is-divided {
  margin-top: 16px;
  border-top: 1px solid var(--divider);
  padding-top: var(--menu-gap-top);
}

.msec__head {
  position: relative;
  height: var(--menu-head-h);
}

/* Titulo de secao #161616; a tinta comeca em x=17,3 (o lado esquerdo do glifo ja
   da os 1,3 px). 14px pelo mesmo motivo do titulo do header: a 15px Montserrat
   fica 6-8 % mais larga que o frame ("Carreiras e vagas" 127,0 contra 119,0) e o
   ancora reprova por dw; a 14px o dw cai para <= 1,0. */
.msec__title {
  position: relative;
  top: .6px;                     /* ajuste fino do cap-top (nao afeta o layout) */
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #161616;
}

/* arrow_forward 10,7 x 9,3 em x=392,7..403,3 (11 px antes do fim do conteudo) */
.msec__arrow {
  position: absolute;
  right: 10.7px;
  top: calc(var(--menu-cap-off) + 1.3px);
  width: 10.7px;
  height: 9.3px;
  color: #161616;
}
.msec__arrow svg { width: 100%; height: 100%; }
.msec__arrow:active { opacity: .7; }

/* ============================ Grade de tiles ============================== */
/* Largura FIXA de 104 px alinhada a esquerda: colunas em 16 / 128 / 240 e ~70 px
   vazios a direita. Nao esticar. */
.msec__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tile-gap-y) var(--tile-gap-x);
  align-content: flex-start;
}

.mtile {
  position: relative;
  flex: 0 0 var(--tile-w);
  width: var(--tile-w);
  height: var(--tile-h);
  background: var(--white);
  border: 1px solid var(--tile-border);
  border-radius: 7px;
  text-align: center;
  /* sem sombra e sem overflow:hidden — o badge "Novo" fica a cavalo da borda */
}
.mtile:active { opacity: .7; }

.mtile__icon {
  position: absolute;
  left: var(--tile-icon-x);
  top: var(--tile-icon-y);
  width: var(--tile-icon);
  height: var(--tile-icon);
}

/* Label 13px Inter 400 #303030, line-height 14,3, cap-top em +52, ate 2 linhas
   com reticencias. `overflow-wrap: break-word` faz a palavra longa quebrar e
   gerar uma 3a linha, que e o que aciona o "..." do -webkit-line-clamp —
   e assim "Cursos complementares" vira "Cursos / complementa...", como no app. */
/* A caixa tem 100 px (e nao os 102 da caixa de padding): e a janela que separa
   "Indique e ganhe" (98,6 px em Inter, 1 linha nos frames) de "Manual do aluno"
   (101,6 px, 2 linhas nos frames). Com 102 o segundo caberia numa linha so. */
.mtile__label {
  position: absolute;
  left: 1px;
  right: 1px;
  top: var(--tile-label-y);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 14.3px;
  color: var(--tile-label);
  text-align: center;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Badge "Novo": pill 42x16 #B80046, centrado no tile e a cavalo da borda
   superior (8 px acima / 8 px dentro). O -9px desconta a borda de 1px. */
.mtile__badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 16px;
  border-radius: 8px;
  background: var(--novo-badge);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -.1px;
  text-align: center;
}