/*
 * Layout do site de documentacao.
 *
 * So layout. Botao, menu, rotulo, nota, tabela, etiqueta e bloco de codigo sao
 * as pecas da biblioteca — a pagina de docs e vitrine, e um segundo desenho aqui
 * seria a contradicao mais visivel possivel. Cor de pagina (fundo, linha, texto
 * de apoio) mora nas variaveis abaixo; cor de componente, nos tokens --tuc-*.
 */

:root {
  --bg: #fbfbfa; --panel: #fff; --fg: #111110; --muted: #6f6f6b; --subtle: #a1a19c;
  --line: #e8e8e5; --code: #f4f4f2; --accent: #FF7501;
  --side: 272px;
}
html.dark {
  --bg: #0b0b0c; --panel: #141416; --fg: #f5f5f4; --muted: #a0a09b; --subtle: #6f6f6b;
  --line: #262629; --code: #1a1a1d; --accent: #FF7501;
}

/* O laranja do tucano e a cor deste site, e nao o padrao do pacote (neutro).
   Branco sobre #FF7501 da 2,7: escolha de marca, tomada sabendo o numero. Como
   cor de texto o vivo nao se le no claro, dai o #B84300 (5,5 sobre branco).
   .dark entra junto porque o pacote redefine o destaque ali: sem ele, o bloco
   escuro de uma demo voltaria ao neutro. Mesmo peso que o do pacote, e vem depois. */
:root, .dark, [data-theme='dark'] {
  --tuc-accent: #FF7501;
  --tuc-accent-hover: #FF8A2A;
  --tuc-accent-fg: #ffffff;
  --tuc-accent-text: #B84300;
  --tuc-thumb: #ffffff;
}
.dark, [data-theme='dark'] { --tuc-accent-text: #FF7501; }

* { box-sizing: border-box; }
/* Fundo e color-scheme no <html>, e nao so no body: e o <html> que o navegador
   pinta enquanto a proxima pagina carrega, e sem cor ali o quadro era branco —
   um clarao a cada clique no tema escuro. */
html { scroll-behavior: smooth; scroll-padding-top: 32px; background: var(--bg); color-scheme: light; }
html.dark { color-scheme: dark; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.7 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; }
:not(pre) > code { background: var(--code); padding: 1px 5px; border-radius: 5px; }

.i-sun { display: none; }
html.dark .i-sun { display: block; }
html.dark .i-moon { display: none; }

/* ---------- marca e barra lateral ---------- */

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand b { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
/* Logo da marca: os dois arquivos, e o tema escolhe (.logo-light/.logo-dark,
   mais abaixo). Declarado antes delas para o display:none da versao escondida
   vencer este display:block, que tem o mesmo peso. */
.brand__logo { display: block; width: 26px; height: auto; }

.side {
  position: fixed; inset: 0 auto 0 0; width: var(--side); padding: 26px 18px 40px;
  border-right: 1px solid var(--line); overflow-y: auto; background: var(--bg);
  /* Chegar ao fim do menu nao rola a pagina de conteudo ao lado. */
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.side__head { display: flex; align-items: center; justify-content: space-between; }
/* Seletor de idioma e botao de tema lado a lado, a direita da marca. */
.side__tools { display: flex; align-items: center; gap: 6px; }
.ver { margin: 10px 0 18px; font-family: ui-monospace, Menlo, monospace; }
/* Pagina ainda nao escrita: fica no menu, apagada, para a estrutura ja aparecer. */
.tuc-menu__item.is-soon { opacity: .42; cursor: default; }
.tuc-menu__item.is-soon:hover { background: transparent; }

.topbar { display: none; }

/* ---------- conteudo ---------- */

.main { margin-left: var(--side); padding: 72px 56px 160px; }
.doc { min-width: 0; max-width: 1040px; margin: 0 auto; }

.doc h1 { margin: 0; font-size: 40px; line-height: 1.12; font-weight: 680; letter-spacing: -.035em; }
/* O paragrafo logo abaixo do titulo e a introducao da pagina. */
.doc h1 + .lead, .intro { margin: 16px 0 0; font-size: 18px; color: var(--muted); max-width: 62ch; }
/* Filhos diretos: com `.doc h2` a regra entrava nos titulos de dentro do editor
   e do .tuc-prose, com borda e 80px de margem no meio do texto. */
.doc > h2 {
  margin: 80px 0 8px; padding-top: 28px; border-top: 1px solid var(--line);
  font-size: 24px; font-weight: 660; letter-spacing: -.02em;
}
.doc > h3 { margin: 40px 0 12px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.lead { margin: 0 0 24px; color: var(--muted); max-width: 66ch; }
.doc p { max-width: 70ch; }

/* Nota e o .tuc-alert is-info; daqui so o respiro. */
.doc .tuc-alert { margin: 24px 0; }
.doc .tuc-alert b { color: var(--fg); }
.doc .tuc-table-wrap { margin: 16px 0 8px; }
/* Topo so nas tabelas de referencia, de texto longo. Nas de demonstracao vale o
   meio da biblioteca: com topo, etiqueta, data e botoes subiam e deixavam de
   alinhar com o avatar da mesma linha. */
.doc > .tuc-table-wrap .tuc-table td { vertical-align: top; }

/* Bloco de codigo: o .tuc-prose da biblioteca pinta e poe o copiar. */
.doc-code { margin: 16px 0; }
.doc-code pre { margin: 0; border: 1px solid var(--line); font-size: 12.5px; }

/* Changelog: a .tuc-timeline da biblioteca; daqui so o respiro entre versoes e
   o titulo, que e h2 e nao pode herdar a borda dos h2 de secao. */
.changelog { margin-top: 56px; }
.changelog > .tuc-timeline__item { padding-bottom: 56px; }
.changelog > .tuc-timeline__item:last-child { padding-bottom: 0; }
.doc .changelog h2.tuc-timeline__title { margin: 0; padding: 0; border: 0; font-size: 20px; letter-spacing: -.015em; }
.changelog .tuc-timeline__body { margin-top: 12px; color: var(--fg); }
.release__group { margin-top: 18px; }
.release__group:first-child { margin-top: 4px; }
/* Subtitulo do grupo em texto: sem caixa nem etiqueta, que pesavam em cada versao. */
.doc .release__heading { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
/* disc declarado: dentro do <ol> da linha do tempo o navegador trocava para o
   marcador de segundo nivel, o circulo vazado. */
.release__list { margin: 4px 0 0; padding-left: 18px; list-style: disc; }
.release__list li { margin: 6px 0; max-width: 72ch; }
.release__list li::marker { color: var(--subtle); }

/* ---------- demonstracao ---------- */

.demo {
  margin: 28px 0; padding: 36px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel);
}
.demo.is-hero { padding: 40px 48px; margin-top: 36px; background: radial-gradient(120% 100% at 0% 0%, color-mix(in oklab, var(--accent) 7%, var(--panel)), var(--panel) 60%); }
.demo-grid { display: grid; gap: 28px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.demo-cell { min-width: 0; }
.demo-cell > h4 { margin: 0 0 4px; font-size: 13px; font-weight: 650; }
.demo-cell > p { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
/* Saida so ocupa lugar quando tem valor: vazia, ela deixava um vao no exemplo. */
.out:empty { display: none; }
.out {
  margin-top: 10px; min-height: 18px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; color: var(--subtle); word-break: break-all;
}
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- api ---------- */

.api-line { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.api-line > span { color: var(--muted); font-size: 13px; }
.api-line code { display: inline-block; margin: 0 4px 4px 0; }

/* ---------- anterior e proxima ---------- */

/* Os botoes sao o .tuc-btn; daqui so o lugar: anterior a esquerda, proxima a direita. */
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 96px; padding-top: 28px; border-top: 1px solid var(--line); }
.pager__prev { margin-right: auto; }
.pager__next { margin-left: auto; }

/* ---------- inicio ---------- */

.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
/* Logo do tucano: um arquivo por tema, porque o circulo de fundo muda de claro
   para escuro. Os dois ficam no HTML; a classe .dark do <html> escolhe. */
.hero__logo { display: block; width: 96px; height: auto; margin-bottom: 20px; }
.logo-dark { display: none; }
html.dark .logo-light { display: none; }
html.dark .logo-dark { display: block; }
.hero h1 { font-size: 44px; line-height: 1.1; }
.hero .intro { font-size: 19px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
/* Botao do GitHub: o .tuc-btn is-primary da biblioteca com as cores trocadas por
   variavel, e nao um segundo desenho de botao. Le a cor de texto e de fundo da
   pagina, para ser preto no claro e branco no escuro. Hover e anel de foco sao
   refeitos aqui porque token derivado nao acompanha a troca num elemento. */
.hero__github {
  --tuc-accent: var(--fg);
  --tuc-accent-hover: color-mix(in oklab, var(--fg) 82%, var(--bg));
  --tuc-accent-fg: var(--bg);
  --tuc-accent-ring: color-mix(in oklab, var(--fg) 30%, transparent);
}
.pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.pills .tuc-badge b { color: var(--fg); font-weight: 600; }
.preview { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 30px 60px -40px rgb(0 0 0 / .35); }
.preview__title { margin: 0 0 18px; font-size: 15px; font-weight: 650; }
.preview .field + .field { margin-top: 14px; }
.preview .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.preview__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.step { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.step b { display: block; margin-bottom: 4px; }
.step span { color: var(--muted); font-size: 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.link-card {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); transition: border-color .15s;
}
a.link-card:hover { border-color: var(--accent); }
.link-card b { font-weight: 600; }
.link-card > span:not(.tuc-badge) { font-size: 13px; color: var(--muted); line-height: 1.5; }
.link-card.is-soon { opacity: .6; }
.link-card .tuc-badge { align-self: flex-start; margin-top: 6px; }

/* ---------- busca ---------- */

/* O gatilho e o .tuc-btn is-outline; daqui so a largura da coluna e o atalho
   encostado a direita, como um campo que ainda nao foi aberto. */
.search-trigger { width: 100%; justify-content: flex-start; margin: -4px 0 16px; color: var(--muted); font-weight: 400; }
.search-trigger kbd { margin-left: auto; font-family: ui-monospace, Menlo, monospace; }

/* O dialogo e o .tuc-modal; a busca sobe para o terco de cima, que e onde o olho
   procura a lista enquanto digita, e o campo ocupa o lugar do titulo. */
.search-dialog.tuc-modal { place-items: start center; padding-top: min(12vh, 96px); }
.search-dialog .tuc-modal__panel { max-height: min(640px, calc(100dvh - 2rem - min(12vh, 96px))); }
.search-dialog .tuc-modal__header { flex: 1; }
.search__input { width: 100%; }
.search__status { margin: 0; }
.search__status:empty { display: none; }
.search__results { overflow: visible; }
.search__option { flex-direction: column; align-items: stretch; gap: 1px; cursor: pointer; line-height: 1.45; }
.search__title { font-weight: 550; }
.search__meta { font-size: 12px; color: var(--muted); font-weight: 400; }
.search__snippet { font-size: 13px; color: var(--muted); font-weight: 400; }
.search__option mark { background: var(--tuc-accent-soft); color: inherit; border-radius: 3px; }
.search__hint { margin: 0; }

/* ---------- transicao entre paginas ---------- */

/* So do site: cada assunto e uma pagina, e o recarregamento seco piscava a tela
   inteira. A barra lateral fica parada; so o conteudo troca. Navegador sem
   suporte troca de pagina como antes, sem quebrar nada. */
@view-transition { navigation: auto; }
.side { view-transition-name: side; }
.topbar { view-transition-name: topbar; }
::view-transition-old(root) { animation: 120ms ease-in both site-fade-out; }
::view-transition-new(root) { animation: 200ms cubic-bezier(0.16, 1, 0.3, 1) both site-fade-in; }
@keyframes site-fade-out { to { opacity: 0; } }
@keyframes site-fade-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- telas menores ---------- */

@media (max-width: 1240px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --side: 0px; }
  .topbar {
    position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line);
  }
  .topbar .ver { margin: 0; }
  .topbar__actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
  .side {
    inset: 53px 0 auto 0; width: auto; max-height: 75vh; border-right: 0;
    border-bottom: 1px solid var(--line); padding: 12px 16px 20px; z-index: 55;
    box-shadow: 0 12px 32px -16px rgb(0 0 0 / .35); display: none;
  }
  .side.is-open { display: block; }
  .side .side__head, .side .ver, .side .search-trigger { display: none; }
  .search-dialog.tuc-modal { padding: 8px; }
  .search__hint { display: none; }
  .main { margin-left: 0; padding: 36px 18px 100px; }
  .doc h1, .hero h1 { font-size: 34px; }
  .doc h2 { margin-top: 56px; }
  .demo, .demo.is-hero { padding: 20px; }
  .demo-grid, .demo-grid.is-3, .steps, .preview .row { grid-template-columns: minmax(0, 1fr); }
}