/* =========================================================================
GUIDE — megaride.app/guide/, o guia do operador (11 capitulos).

🪤 CÓPIA, não `@import`, de join/join.css — mesma razão do comentário de lá:
o /join/ pode mudar de folha sem que esta página precise pensar em nada. Os
tokens (:root), o cabeçalho (.ob-hdr*), o cartão (.card) e os botões (.btn*)
abaixo são cópia literal — nenhuma cor ou fonte nova nasceu aqui
(constraints.md: "copiar :root, .ob-hdr*, .card, .btn* de join/join.css —
não importar de outra pasta").

O resto (a partir de "LAYOUT DO GUIA") é novo desta página: o índice lateral,
o cartão de cada capítulo, o código da empresa (cap. 5) e o print da tela.
========================================================================= */

:root{
  --bg:#06080D;
  --card:#0D111B;
  --card-2:#10141F;
  --elev:#161B28;
  --press:#1D2333;

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --ink:#F5F7FA;
  --ink-2:#9299A8;
  --ink-3:rgba(245,247,250,.44);

  --accent:#D4A94E;
  --accent-ink:#0A0B10;
  --accent-soft:rgba(212,169,78,.10);
  --accent-line:rgba(212,169,78,.34);

  --ok:#5DBE87;
  --ok-soft:rgba(93,190,135,.12);
  --bad:#E0625A;

  --r:10px; --r-lg:14px;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --serif:"Playfair Display",Georgia,serif;

  --hdr-h:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ═══ CABEÇALHO (cópia de join/join.css) ═══════════════════════════════ */
.ob-hdr{
  position:sticky;top:0;z-index:40;height:var(--hdr-h);
  background:rgba(6,8,13,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.ob-hdr-in{
  max-width:1560px;margin:0 auto;height:100%;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.ob-brand{
  display:flex;align-items:baseline;gap:9px;color:var(--ink);flex:none;
  font:700 18px Inter;letter-spacing:-.02em;
}
.ob-brand span{font:500 13px Inter;color:var(--ink-3);letter-spacing:0}
.ob-brand-art{height:30px;width:auto;display:block}
.ob-signin{flex:none;font:500 13.5px Inter;color:var(--ink-2);white-space:nowrap}
.ob-signin b{color:var(--accent);font-weight:600}
.ob-signin:hover b{text-decoration:underline}
@media(max-width:820px){
  .ob-hdr{height:auto;position:static}
  .ob-hdr-in{flex-wrap:wrap;padding:12px 16px;gap:10px;height:auto}
  .ob-brand{font-size:17px}
  .ob-signin{margin-left:auto}
}
@media(max-width:480px){
  .ob-signin .q{display:none}
}

/* ═══ CARTÃO E BOTÕES (cópia de join/join.css) ══════════════════════════ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink);
  padding:0 20px;min-height:44px;border-radius:var(--r);
  font:600 14px Inter;cursor:pointer;transition:background .16s,border-color .16s,filter .16s;
}
.btn:hover{background:var(--press)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.07);background:var(--accent)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.wide{width:100%}
.btn[hidden]{display:none}

/* ═══ LAYOUT DO GUIA ═════════════════════════════════════════════════════
   Índice fixo na lateral a partir de 1024px; abaixo disso ele é só o
   primeiro bloco da coluna (grid de uma coluna não precisa de nenhuma regra
   própria — é o comportamento padrão sem @media). */
main.guide-shell{
  max-width:1200px;margin:0 auto;padding:28px 16px 64px;
}
@media(min-width:1024px){
  main.guide-shell{
    display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start;
    padding:40px 28px 80px;
  }
  .guide-nav{position:sticky;top:calc(var(--hdr-h) + 24px)}
}

.guide-nav{margin:0 0 32px}
.guide-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.guide-nav-list a{display:block;padding:8px 10px;border-radius:var(--r);color:var(--ink-2);font:500 14px Inter}
.guide-nav-list a:hover{background:var(--press);color:var(--ink)}

.guide-top{margin:0 0 32px}
.guide-top h1{font:600 36px/1.18 var(--serif);letter-spacing:-.01em;margin:0 0 10px}
.guide-top .lede{color:var(--ink-2);margin:0 0 18px;font-size:16px}

.company-banner{
  display:inline-block;margin:0 0 18px;padding:9px 16px;
  border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent);
  border-radius:999px;font:600 13.5px Inter;
}
.company-banner[hidden]{display:none}

#guiaCapitulos{display:flex;flex-direction:column;gap:20px}

/* Final fix round (achado 6 da revisão + Task 8): o salto do índice
   (#cap-N) alinhava o topo da seção ao topo da janela — e o cabeçalho
   sticky de 72px cobria o título inteiro (medido a 1440px: h2 em 27–58px).
   A margem de rolagem = altura do cabeçalho + 16px onde ele é sticky
   (>820px); abaixo disso ele é estático e basta o respiro. */
.chapter{margin:0;scroll-margin-top:calc(var(--hdr-h) + 16px)}
@media(max-width:820px){
  .chapter{scroll-margin-top:16px}
}
.chapter-head{display:flex;align-items:baseline;gap:14px;margin:0 0 12px}
.chapter-num{font:600 15px var(--mono);color:var(--accent);flex:none}
.chapter-title{font:600 24px/1.3 var(--serif);margin:0;letter-spacing:-.01em}
.chapter-why-label{
  font:600 11.5px Inter;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 6px;
}
.chapter-why{color:var(--ink-2);margin:0 0 18px;font-size:15px}
.chapter-steps{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.chapter-steps li{padding-left:4px}

.chapter-code{
  margin:0 0 18px;padding:10px 14px;border:1px solid var(--accent-line);
  background:var(--accent-soft);border-radius:var(--r);font-size:14.5px;
}
.chapter-code code{font-family:var(--mono);font-weight:600;letter-spacing:.04em;color:var(--accent)}

.chapter-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px}
/* O texto que substitui o botão de booking sem empresa (guide.js) é uma
   LINHA própria dentro do flex dos botões — nunca emendado no vizinho. */
.chapter-link-text{color:var(--ink-2);font-size:14px;flex-basis:100%;margin:0}

.chapter-time{color:var(--ink-3);font-size:13px;margin:0 0 20px}

/* R5 do controller: width/height no <img> refletem o manifesto (R6) só
   até o layout — o CSS manda em fluido, nunca no tamanho em pixel fixo. */
.chapter-shots{display:flex;flex-direction:column;gap:14px}
.chapter-shots figure{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card-2)}
.chapter-shots img{display:block;width:100%;height:auto}
.chapter-shots figure[hidden]{display:none}
/* Retrato (altura > largura — futuros prints de App Store, ex.: tela do
   app no celular): a largura total encheria a coluna e ficaria
   desproporcional ao lado de capturas de desktop. Largura fixa (não só
   max-width) para o width:100% do <img> acima resolver contra um valor
   definido, e centrada na coluna (que por padrão estica os filhos). */
.chapter-shots figure.chapter-shot-portrait{width:360px;max-width:100%;align-self:center}

/* ═══ OS VÍDEOS (09/11) ══════════════════════════════════════════════════
   Cartão no molde do capítulo; a moldura do vídeo tem o mesmo desenho da
   figura dos prints (.chapter-shots figure), mas é <div>, não <figure>:
   cena-guia.js conta TODA <figure> da página como print (manifesto vazio
   = zero figuras). Lado a lado a partir de 760px. O
   scroll-margin é o do .chapter: o /onboarding/ chega aqui por #videos e o
   cabeçalho sticky cobriria o título. */
.guide-videos{margin:0 0 20px;scroll-margin-top:calc(var(--hdr-h) + 16px)}
@media(max-width:820px){
  .guide-videos{scroll-margin-top:16px}
}
.guide-videos .chapter-title{margin:0 0 8px}
.guide-videos-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media(min-width:760px){
  .guide-videos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.guide-video{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card-2)}
.guide-videos video{display:block;width:100%;height:auto;aspect-ratio:1440/900;background:var(--bg)}
.guide-video-cap{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px;font-size:14px}
.guide-video-cap span{font:500 13px var(--mono);color:var(--ink-3);flex:none}
/* Dois grupos no cartão (09/11): o rótulo é o .chapter-why-label dos
   capítulos. A série de 3 é 16:9 e só fica lado a lado onde a coluna
   aguenta três (≥1024px, com o índice na lateral); abaixo, uma por linha
   (em duas colunas a terceira ficaria sozinha). */
.guide-videos-sub{margin:20px 0 10px}
.guide-videos-grid.guide-videos-grid-3{grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){
  .guide-videos-grid.guide-videos-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.guide-videos-grid-3 video{aspect-ratio:16/9}
.guide-videos-note{color:var(--ink-3);font-size:13px;margin:14px 0 0}
.guide-print-only{display:none}

/* ═══ IMPRESSÃO (Ruling R11 do controller) ══════════════════════════════
   Nesta ordem: 1 CAPA (logo "light" + "OPERATOR GUIDE" uma vez + o título
   "From sign-up to your first ride" + a introdução) · 1 ÍNDICE (os 11
   títulos, lista numerada simples, sem sticky) · os 11 CAPÍTULOS, cada um
   COMEÇANDO numa página nova — sem prints são 13 páginas; com os prints da
   Task 3 um capítulo pode transbordar para a página seguinte (o guard cobra
   "pelo menos 13, e cada capítulo abre página", não "exatamente 13"). Os
   links levam a URL impressa ao lado — EXCETO os do próprio índice (#cap-N,
   puro ruído em papel) e o botão de download (que nem aparece).

   A ORDEM VISUAL != a ordem do DOM (header, depois nav, depois guide-top) —
   sem tocar no HTML (cena-guia.js testa a ESTRUTURA, não a ordem visual),
   `main.guide-shell` vira flex-column e cada peça pega um `order`; os dois
   wrappers (.guide-content, #guiaCapitulos) ficam `display:contents` para
   que os filhos DELES também participem da ordenação do flex do avô —
   suportado pelo Chromium que gera o PDF (scripts/gerar-guia-pdf.js).

   Paleta de impressão (papel, não tela): a página é escura por padrão; sem
   isto o PDF sairia com fundo preto — legível, mas um desperdício de tinta
   e estranho para um manual impresso. Aqui os tokens viram claros só
   dentro deste media. */
@media print{
  :root{
    --bg:#fff; --card:#fff; --card-2:#f7f6f3;
    --line:#ddd; --line-2:#ccc;
    --ink:#161616; --ink-2:#444; --ink-3:#666;
    --accent:#8a6a1f; --accent-soft:#f6efdc; --accent-line:#c9ab6b;
  }
  body{background:#fff;color:#161616}

  .ob-signin, .company-banner, #baixarPdf{display:none}

  main.guide-shell{display:flex;flex-direction:column;max-width:none;margin:0;padding:0}
  .guide-content{display:contents}

  /* ── PÁGINA 1 — CAPA: logo + "OPERATOR GUIDE" + o h1 (título da spec) +
     a introdução. O lockup é o "light" (MEGA escuro) — o <source
     media="print"> do index.html; o "dark" tinha o MEGA quase branco, que
     sumia no papel branco (final fix round). "Operator guide" aparece UMA
     vez: no rótulo sob a logo (o h1 virou o título da spec). ── */
  .ob-hdr{
    order:1;position:static;height:auto;background:#fff;border:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:130px 60px 0;backdrop-filter:none;
  }
  .ob-hdr-in{display:block;max-width:none;padding:0;height:auto}
  .ob-brand{display:block}
  .ob-brand picture{display:block}
  .ob-brand-art{height:72px;width:auto;margin:0 auto 26px}
  .ob-brand span{display:block;font:600 14px Inter;letter-spacing:.08em;text-transform:uppercase;color:#777;margin-top:10px}

  .guide-top{order:2;margin:0;padding:0 60px;text-align:center;break-after:page}
  .guide-top h1{font-size:40px;margin:48px 0 14px;color:#161616}
  .guide-top .lede{font-size:18px;color:#444;margin:0}

  /* Vídeo não toca no papel: o cartão sai inteiro (e, com .guide-content
     em display:contents, ele viraria filho do flex com order 0 — ANTES da
     capa). No lugar, uma linha na capa com o endereço. */
  .guide-videos{display:none}
  .guide-top .guide-print-only{display:block;font-size:14px;color:#444;margin:22px 0 0}

  /* ── PÁGINA 2 — ÍNDICE: lista numerada simples, sem sticky ── */
  .guide-nav{order:3;position:static;top:auto;margin:0;padding:120px 70px 0;break-after:page}
  .guide-nav::before{content:"Contents";display:block;font:600 30px var(--serif);margin:0 0 30px;color:#161616}
  /* list-style:none — o próprio rótulo do link já é "N. Título"
     (guide.js:montarIndice), e um marcador decimal AO LADO daria "1. 1.
     What you got" (dois números para o mesmo item). */
  .guide-nav-list{list-style:none;padding-left:0;display:block}
  .guide-nav-list li{padding:0;margin:0 0 15px}
  .guide-nav-list a{display:inline;padding:0;color:#161616;font:500 16px Inter}

  /* ── PÁGINA 3 EM DIANTE — os 11 capítulos, cada um abrindo página ── */
  #guiaCapitulos{order:4;display:contents}
  .chapter{order:5;break-before:page;border:0;background:#fff;padding:70px 55px 0}

  /* ── OS PRINTS NO PAPEL (prontos para a Task 3; final fix round) ──
     Uma página Letter aqui tem ~970px úteis; o texto de um capítulo ocupa
     ~430px e um print 1440×900 em largura cheia, ~390px. Os capítulos 4, 5,
     8 e 9 têm DOIS prints (5 e 8 com um retrato da App Store, ~360×780 na
     tela): empilhados, não cabem. No papel eles ficam LADO A LADO, cada um
     com altura máxima de 3.4in (~326px) e encolhendo junto para caber na
     largura — dois prints + o texto cabem numa página. Nenhuma figura se
     parte entre páginas: se não couber no resto da página, ela desce
     inteira (o capítulo seguinte continua abrindo página nova). */
  .chapter-shots{flex-direction:row;align-items:flex-start;justify-content:center;gap:14px;break-inside:avoid}
  .chapter-shots figure{flex:0 1 auto;min-width:0;break-inside:avoid}
  .chapter-shots figure.chapter-shot-portrait{width:auto;align-self:flex-start}
  .chapter-shots img{width:auto;max-width:100%;height:auto;max-height:3.4in}

  a[href]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
  /* Quem imprime direto do navegador (sem o gerador, que já reescreve os
     href relativos para https://megaride.app/… antes de imprimir) leria
     "(/portal/?t=…)" — um caminho que não se digita. O texto impresso
     leva o domínio na frente. */
  a[href^="/"]::after{content:" (https://megaride.app" attr(href) ")"}
  /* O índice e o botão de download não levam a URL impressa ao lado — o
     primeiro é ruído (#cap-N não existe em papel), o segundo nem aparece. */
  .guide-nav-list a[href]::after, #baixarPdf[href]::after{content:none}
  /* Ruling R11b (fix round 1): NENHUMA url impressa dentro do
     cabeçalho/capa — nem o link do logo (.ob-brand), que sem isto
     imprimia "(https://www.megarideusa.com/platform)" sob o wordmark da
     capa. */
  .ob-hdr a[href]::after{content:none}
}