/* MINICURSOS na marca do site (brand/marca.css), o mesmo desenho "revista"
   dos artigos, desde 28/10/2026. Carregar depois dos estilos de cada edição.

   As edições nasceram escuras e redefinem --bg, --text, --accent… no próprio
   :root. Esta camada devolve essas variáveis à marca (--gz-*), e o resto do
   CSS das edições já usa os papéis (o conversor trocou as cores fixas). Aqui
   ficam letras, botões, cartões, campos de prompt e diálogos. A impressão
   fica de fora: tudo vale só para a tela. */

@media screen {
  :root, :root[data-tema="escuro"] {
    --bg: var(--gz-bg);
    --surface: var(--gz-cartao);
    --text: var(--gz-text);
    --muted: var(--gz-muted);
    --line: var(--gz-line);
    --accent: var(--gz-accent);
    --lime: var(--gz-accent);
    --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: var(--sans);
    --lms-body: var(--gz-body);
    --lms-field: var(--gz-bg);
    --lms-active: var(--gz-surface);
    --lms-active-line: var(--gz-line-2);
  }
  :root { color-scheme: light; }
  :root[data-tema="escuro"] { color-scheme: dark; }

  body { background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 400; }

  /* ---------- Letras: título de cartaz, texto em Figtree ---------- */
  h1, h2, .hero h1, .edition-hero h1, .intro h1 {
    font-family: var(--display); font-weight: 800; font-stretch: 86%; letter-spacing: -.035em; color: var(--text);
  }
  .hero h1, .edition-hero h1, .intro h1 { line-height: .94; text-wrap: balance; }
  h3, h4, .edition-body h2, .tutorial-catalog .edition-body h2, .closing h2, .access-heading h2, .cookie-copy h2, .cookie-dialog h2,
  .prompt-detail h3, .category-header h2, .section-heading h2 {
    font-family: var(--display); font-weight: 750; font-stretch: 90%; letter-spacing: -.025em; color: var(--text);
  }
  .byline, .lead, .hero-description, .edition-body > p:not(.format),
  .closing p, .series-next p, .authorship-note, .footer,
  .intro > div > p:last-child, .steps p, .step-body > p:not(.micro),
  .material p, .material-note p, .tool p, .closing-note p, .cta-grid p {
    color: var(--lms-body);
  }

  /* Etiquetas de série e formato: pequenas, em laranja de texto. */
  .edition, .eyebrow, .format, .micro, .channel-label,
  .scenario h4, .expected h4, .prompt-toolbar h4 {
    font-family: var(--sans); font-weight: 700; font-size: 12px; line-height: 1.5;
    letter-spacing: .06em; text-transform: uppercase; color: var(--accent-texto);
  }
  .hero-meta, .results-count, .material-meta, .attachments,
  .step-number, .prompt-number, .steps li > span { font-variant-numeric: tabular-nums; }

  /* ---------- Topo: marca com o raio, botão de tema ---------- */
  .topbar { border-color: var(--line); }
  .brand, .series-brand {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--display); font-weight: 800; font-stretch: 86%; letter-spacing: -.035em; color: var(--text);
  }
  .brand > span, .series-brand .brand-dot {
    display: inline-block; width: 13px; height: 22px; font-size: 0; color: transparent;
    background: var(--accent); clip-path: var(--raio);
  }
  .byline strong { font-weight: 600; color: var(--text); }
  .byline:hover, .byline:hover strong, .topbar nav a:hover, .site-link:hover,
  .series-next a, .tool-links a, .footer .cookie-settings:hover, .text-link { color: var(--accent-texto); }
  .topbar nav { align-items: center; }
  .topbar .tema { margin-left: 4px; }
  /* No hub não há menu: o botão vai para a direita, antes do link do site. */
  .topbar > .tema { margin-left: auto; }
  .topbar > .tema + .site-link { margin-left: 18px; }

  /* ---------- Fotos: cópia impressa, giro leve ---------- */
  .hero-portrait {
    border: 10px solid var(--cartao); border-radius: 24px; overflow: hidden;
    background: #0a0908; transform: rotate(-2deg); box-shadow: 0 30px 60px -30px var(--sombra);
  }
  /* O véu escuro fica dentro da foto, para as legendas sobre ela seguirem legíveis. */
  .hero-portrait:after { background: linear-gradient(180deg, transparent 40%, rgb(10 9 8 / 88%)) !important; }
  .edition-cover, .material-image { border-radius: 18px; overflow: hidden; }
  .edition-cover { box-shadow: none; }

  /* ---------- Cartões e painéis ---------- */
  .edition-card, .prompt-card, .category, .material, .tool, .worksheet, .personalizer,
  .library-sidebar, .step, .fill-section, #empty-state, .series-next {
    border-color: var(--line-2);
  }
  .edition-card, .category, .material, .tool, .fill-section, #empty-state {
    border-radius: 22px; background: var(--cartao);
  }
  .tutorial-catalog .edition-card { border: 0; box-shadow: 0 30px 60px -40px var(--sombra); }
  .edition-card:hover .edition-cover img { transform: scale(1.03); }
  .edition-cover img { transition: transform .6s var(--sai); }
  .category-header { background: var(--surface) !important; }

  /* O bloco de fecho do hub e o "continue": escuro, como nos artigos. */
  .tutorial-catalog .closing, .closing-note {
    border: 0 !important; border-radius: 30px; background: var(--bloco) !important; color: var(--sobre-bloco);
  }
  .tutorial-catalog .closing h2, .closing-note h2, .closing-note h3 { color: var(--sobre-bloco); }
  .tutorial-catalog .closing p, .closing-note p { color: var(--sobre-bloco-2) !important; }

  /* Newsletter em laranja, ANTI/HYPE em bloco escuro: igual aos artigos. */
  .cta-grid article { border-radius: 22px; border-color: var(--line) !important; }
  .newsletter-cta { background: var(--accent) !important; border-color: var(--accent) !important; }
  .newsletter-cta h3, .newsletter-cta p, .newsletter-cta .eyebrow, .newsletter-cta .channel-label { color: var(--sobre-acc) !important; }
  .antihype-cta { background: var(--bloco) !important; color: var(--sobre-bloco); }
  .antihype-cta h3 { color: var(--sobre-bloco); }
  .antihype-cta p { color: var(--sobre-bloco-2) !important; }
  .cta-grid h3 { font-family: var(--display); font-weight: 800; font-stretch: 88%; letter-spacing: -.035em; }

  /* ---------- Botões: os da marca ---------- */
  .button, .access-submit, .prompts-consent button, .primary, .tutorial-catalog .jump, .tutorial-catalog .closing a {
    border-radius: 999px; border: 1px solid var(--text); background: var(--text); color: var(--bg);
    font-family: var(--sans); font-weight: 600; text-decoration: none;
  }
  .button:hover, .access-submit:hover, .prompts-consent button:hover, .primary:hover,
  .tutorial-catalog .jump:hover, .tutorial-catalog .closing a:hover {
    border-color: var(--accent); background: var(--accent); color: var(--sobre-acc);
  }
  .button.outline { background: transparent; border-color: var(--line-2); color: var(--text); }
  .button.outline:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
  .newsletter-cta .button { border-color: var(--sobre-acc); background: var(--sobre-acc); color: #fff; }
  .tutorial-catalog .closing a, .antihype-cta .button, .cta-grid .anti-button {
    border-color: var(--accent); background: var(--accent); color: var(--sobre-acc);
  }
  .tutorial-catalog .closing a:hover, .cta-grid .anti-button:hover { border-color: var(--sobre-bloco); background: var(--sobre-bloco); color: var(--bloco); }
  .access-submit:disabled { background: var(--surface); border-color: var(--line-2); color: var(--muted); }
  .toast, .skip, .skip-link { border-radius: 12px; background: var(--text); color: var(--bg); }

  /* ---------- Prompts: caixa, texto, lacunas em marca-texto ---------- */
  .prompt-box { border-radius: 22px; background: var(--cartao); }
  .prompt-text, .prompt-box pre {
    background: var(--lms-field); color: var(--body); border-color: var(--line-2);
    font-family: var(--sans); font-size: 15px; font-weight: 400; line-height: 1.8;
    scrollbar-color: var(--muted) var(--lms-field);
  }
  .prompt-text { border-radius: 14px; }
  .prompt-box pre { border-radius: 0 0 22px 22px; }
  .prompt-text mark, .prompt-box mark, mark {
    padding-inline: .15em; border-radius: 4px; background: var(--accent) !important; color: var(--sobre-acc) !important; font-weight: 600;
  }
  /* Cenário e "o que você vai receber": a mesma caixa, com o mesmo respiro. */
.expected, .scenario { margin-top: 18px; padding: 22px 24px !important; border: 1px solid var(--line) !important; border-radius: 16px; background: var(--cartao) !important; }
.scenario h4, .expected h4 { margin-bottom: 8px; }
.scenario p { max-width: none; }
  .expected p, .scenario p { color: var(--lms-body); }
  .personalizer { border-radius: 14px; background: var(--surface) !important; }
  .fields textarea, .worksheet-fields textarea, .access-field input, .search-box, .search-box input {
    background: var(--lms-field); color: var(--text); border-color: var(--line-2); font-family: var(--sans); font-weight: 400;
  }
  .fields textarea, .worksheet-fields textarea, .access-field input { border-radius: 10px; }
  .search-box { border-radius: 999px; }
  .fields textarea::placeholder, .worksheet-fields textarea::placeholder,
  .access-field input::placeholder, .search-box input::placeholder { color: var(--muted); }
  .library-sidebar nav a, .saved-filter { border-radius: 10px; color: var(--lms-body); }
  .library-sidebar nav a.active, .saved-filter[aria-pressed=true],
  .tutorial-futures .saved-filter[aria-pressed=true] {
    background: var(--accent) !important; border-color: var(--accent) !important; color: var(--sobre-acc) !important;
  }
  .tutorial-futures .saved-filter[aria-pressed=true] #saved-count { color: var(--sobre-acc) !important; }

  ::selection { background: var(--accent); color: var(--sobre-acc); }
  :focus-visible, .prompts-consent :focus-visible, .access-field input:focus,
  .access-dialog button:focus-visible { outline-color: var(--accent-texto); }

  /* ---------- Diálogos: cadastro, cookies, imagem ---------- */
  .prompts-consent, .cookie-dialog, .access-dialog, .access-close { font-family: var(--sans); font-weight: 400; color: var(--text); }
  .cookie-notice, .cookie-dialog, .access-dialog, .image-dialog, .media-dialog {
    background: var(--cartao); border-color: var(--line-2); border-radius: 22px; box-shadow: 0 24px 70px -20px var(--sombra);
  }
  .cookie-dialog::backdrop, .image-dialog::backdrop, .media-dialog::backdrop, .access-dialog::backdrop { background: rgb(18 16 13 / 70%); }
  .cookie-copy p, .cookie-dialog > p, .cookie-category small, .cookie-category p, .cookie-information p,
  .access-heading > p:last-child, .access-material, .access-field label span, .access-hint, .access-privacy { color: var(--lms-body); }
  .cookie-category, .cookie-information, .access-material { border-color: var(--line); }
  .cookie-category input { accent-color: var(--accent); }
  .access-series span, .access-suggestion { color: var(--accent-texto); }
  .cookie-actions .cookie-customize, .cookie-dialog .cookie-close { background: transparent; border-color: transparent; color: var(--lms-body); }
  .cookie-actions .cookie-customize:hover, .cookie-dialog .cookie-close:hover, .access-close:hover { color: var(--accent-texto); background: var(--surface); }

  @media (max-width: 700px) {
    /* A abertura deixa de pôr o texto em cima da foto: a foto vem na moldura
       girada e o texto embaixo, no papel, legível nos dois temas. */
    .hero, .edition-hero {
      width: calc(100% - 40px) !important; min-height: 0 !important; margin-inline: auto; padding: 22px 0 36px !important;
    }
    .hero .hero-portrait, .edition-hero .hero-portrait {
      position: relative !important; inset: auto !important; height: auto !important; min-height: 0 !important;
      width: min(100%, 330px); aspect-ratio: 4 / 5; margin: 6px 0 30px 6px;
    }
    .hero-portrait .portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .hero .hero-copy, .edition-hero .hero-copy { padding: 0 !important; }
    .hero-copy .edition { color: var(--accent-texto) !important; }
    .hero-portrait { border-width: 6px; transform: rotate(-1.2deg); }
    /* Hub: o botão de tema e o link do site dividem a segunda linha do topo. */
    .topbar > .tema { grid-column: 1; justify-self: start; margin: 0; }
    .topbar > .tema + .site-link { grid-column: 2; justify-self: end; align-self: center; margin: 0; }
    .fields textarea { font-size: 16px; }
    .prompt-text, .prompt-box pre { font-size: 14px; }
  }
}

/* Tablet: o topo perde o atalho "Continue explorando" (a seção segue no fim da página). */
@media screen and (min-width: 701px) and (max-width: 1000px) {
  .topbar { gap: 18px; }
  .topbar nav { gap: 18px; font-size: 13px; }
  .topbar nav .continue-link { display: none; }
}

@media screen and (max-width: 380px) {
  .topbar .brand, .topbar .series-brand { font-size: 24px; }
  .topbar .byline { font-size: 12px; }
}

@media screen and (prefers-reduced-motion: reduce) {
  .edition-cover img { transition: none; }
}

/* Mesma largura do cabeçalho e das outras áreas (--gz-largura, brand/marca.css). */
.wrap { width: var(--gz-largura) !important; max-width: none !important; }

/* Letras dentro da marca (Gui, 30/10/2026): o sections.css antigo deixava as
   perguntas e as categorias em Bricolage fina (450/500, estreita), que não
   existe em nenhuma outra página do site. Título vai na Bricolage 800 dos
   títulos; pergunta de lista vai na Figtree 600, como as listas do glossário. */
@media screen {
  .tutorial-futures .category-header h2, .tutorial-catalog .edition-body h2 {
    font-family: var(--display); font-weight: 800; font-stretch: 86%; letter-spacing: -.035em;
  }
  .tutorial-futures .prompt-detail h3 {
    font-family: var(--sans); font-weight: 600; font-stretch: normal; font-size: 20px; line-height: 1.4; letter-spacing: -.01em;
  }
}