/*
  Wortic macOS UI Kit — Page Layouts
  wm-page — ESQUELETOS DE PÁGINA.

  Aqui não mora conteúdo nenhum: só a estrutura onde o conteúdo entra.
  Cada modificador é um arranjo de `grid-template-areas` com os mesmos
  seis slots (header, sidebar, list, detail, main, aside, footer,
  bottom). Você escolhe o esqueleto, pendura componentes do kit nos
  slots e a página está montada.

  Régua: a grade e os breakpoints são os da FUNDAÇÃO
  (foundation/grid.css + os --wm-bp-* de tokens.css). Nenhuma largura
  máxima é chumbada aqui — quem limita é `.wm-container` /
  `.wm-container--prose`, e o respiro lateral é `--wm-grid-margin`.
  CSS não aceita var() na condição de @media: cada valor abaixo vai com
  o token comentado ao lado, como manda foundation/tokens.css.

  Dois regimes de rolagem:
    • documento (padrão) — a página inteira rola, como um site;
    • `wm-page--fill`    — a página ocupa a altura disponível e cada
      região rola por dentro, como um app. É aqui que `min-block-size:0`
      importa: sem ele um filho de grid nunca encolhe e a rolagem
      interna nunca acontece.

  Sem JS: tudo aqui é CSS puro.
*/

@layer components {
  .wm-page {
    display: grid;
    inline-size: 100%;
    min-inline-size: 0;
    background: var(--wm-surface-base);
    color: var(--wm-label-primary);

    /* As três faixas de largura fixa do sistema. A da barra lateral já
       é token da fundação; as outras duas são LOCAIS deste componente
       (pedido de promoção para foundation/tokens.css está na ficha). */
    --wm-page-sidebar-width: var(--wm-nav-sidebar-width);
    --wm-page-list-width: 300px;
    --wm-page-aside-width: 280px;
  }

  /* Regime de app: altura fechada, rolagem por região.
     --wm-page-block-size existe para a página de documentação encaixar
     o esqueleto numa bancada de altura fixa; em produção fica 100dvh. */
  .wm-page--fill {
    block-size: var(--wm-page-block-size, 100dvh);
    overflow: hidden;
  }
  .wm-page--fill > * {
    min-block-size: 0;
    min-inline-size: 0;
  }
  .wm-page--fill .wm-page__sidebar,
  .wm-page--fill .wm-page__list,
  .wm-page--fill .wm-page__detail,
  .wm-page--fill .wm-page__main,
  .wm-page--fill .wm-page__aside {
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* ============================================================
     SLOTS — todo esqueleto usa os mesmos nomes de área.
     ============================================================ */
  .wm-page__header {
    grid-area: header;
    min-inline-size: 0;
    z-index: 1;
  }
  .wm-page__header--sticky {
    position: sticky;
    inset-block-start: 0;
  }
  /* A barra de ferramentas do kit é uma linha só: não quebra e o título
     não trunca. Num cabeçalho de 390px isso empurra o último botão 72px
     para FORA — e como o palco corta (overflow: clip), o documento não
     ganha barra de rolagem e nenhuma medida de scrollWidth acusa. Só o
     print mostra. Enquanto o componente `toolbar` não tratar, o slot de
     cabeçalho trata: deixa a barra quebrar em duas linhas e o título
     encolher. Regra escopada ao slot — fora dele a toolbar é a de sempre. */
  .wm-page__header > .wm-toolbar {
    flex-wrap: wrap;
    row-gap: var(--wm-space-3);
  }
  .wm-page__header > .wm-toolbar > .wm-toolbar__title {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wm-page__sidebar {
    grid-area: sidebar;
    min-inline-size: 0;
    background: var(--wm-surface-sidebar);
    border-inline-end: var(--wm-border-width-hairline) solid var(--wm-separator);
  }
  .wm-page__list {
    grid-area: list;
    min-inline-size: 0;
    background: var(--wm-surface-primary);
    border-inline-end: var(--wm-border-width-hairline) solid var(--wm-separator);
  }
  .wm-page__detail {
    grid-area: detail;
    min-inline-size: 0;
  }
  /* Quando o slot recebe um componente que JÁ traz a própria pele
     (nav-sidebar, toolbar), o slot tira a dele — senão sai borda em
     cima de borda e dois fundos empilhados. */
  .wm-page__sidebar--bare,
  .wm-page__list--bare {
    background: transparent;
    border-inline-end: none;
    /* O componente hospedado precisa ESTICAR até o fim do slot: o
       nav-sidebar tem `flex: none` e, solto no slot, a pele dele parava
       na última linha do menu e deixava um rasgo de fundo embaixo —
       defeito que só o print mostrou. Grid de uma faixa 1fr + altura
       100% no filho resolve sem tocar no CSS do outro componente. */
    display: grid;
    grid-template-rows: minmax(0, 1fr);
  }
  .wm-page__sidebar--bare > *,
  .wm-page__list--bare > * {
    block-size: 100%;
    min-block-size: 0;
  }
  .wm-page__aside--bare {
    border-inline-start: none;
  }
  .wm-page__footer--bare {
    border-block-start: none;
  }
  .wm-page__main {
    grid-area: main;
    min-inline-size: 0;
  }
  .wm-page__aside {
    grid-area: aside;
    min-inline-size: 0;
    border-inline-start: var(--wm-border-width-hairline) solid var(--wm-separator);
  }
  .wm-page__footer {
    grid-area: footer;
    min-inline-size: 0;
    border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
  }
  /* Barra inferior: existe só na faixa estreita, onde a barra lateral
     sai de cena. É onde entra o componente nav-bottom. */
  .wm-page__bottom {
    grid-area: bottom;
    display: none;
    min-inline-size: 0;
  }

  /* Respiro interno padrão de um slot: a margem lateral da faixa.
     Envolva o conteúdo nisto em vez de dar padding ao slot — assim o
     slot continua podendo rolar de borda a borda. */
  .wm-page__body {
    padding: var(--wm-grid-margin);
    display: flex;
    flex-direction: column;
    gap: var(--wm-grid-gutter);
    min-inline-size: 0;
  }
  .wm-page__body--flush {
    padding: 0;
  }
  .wm-page__body--tight {
    padding: var(--wm-space-6);
  }

  /* ============================================================
     1. BARRA LATERAL + CONTEÚDO — o painel clássico.
     ============================================================ */
  .wm-page--sidebar {
    grid-template-areas:
      "sidebar header"
      "sidebar main";
    grid-template-columns: var(--wm-page-sidebar-width) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* ============================================================
     2. TRÊS COLUNAS — barra + lista + detalhe (Mail, Finder, Notas).
     ============================================================ */
  .wm-page--triple {
    grid-template-areas:
      "sidebar list header"
      "sidebar list detail";
    grid-template-columns:
      var(--wm-page-sidebar-width)
      var(--wm-page-list-width)
      minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* ============================================================
     3. LEITURA — topo + coluna única centrada na medida de leitura.
     Quem limita a largura é .wm-container--prose da fundação.
     ============================================================ */
  .wm-page--reading {
    grid-template-areas:
      "header"
      "main"
      "footer";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }

  /* ============================================================
     4. CONTEÚDO + COLUNA DE APOIO (blog com widgets, painel com
        resumo). A coluna de apoio nunca é a principal: ela vem
        DEPOIS no DOM, e some primeiro quando aperta.
     ============================================================ */
  .wm-page--aside {
    grid-template-areas:
      "header header"
      "main   aside"
      "footer footer";
    grid-template-columns: minmax(0, 1fr) var(--wm-page-aside-width);
    grid-template-rows: auto 1fr auto;
  }

  /* ============================================================
     5. EMPILHADO — topo + conteúdo + rodapé. É a base de painel de
        indicadores e de catálogo: a diferença entre os dois está no
        que você põe dentro (wm-layout-grid de 12 colunas para o
        painel, wm-grid--auto-fit para o catálogo), não na casca.
     ============================================================ */
  .wm-page--stacked {
    grid-template-areas:
      "header"
      "main"
      "footer";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }

  /* ============================================================
     6. FOCO — uma coisa só, sem navegação: checkout, onboarding,
        entrar. O conteúdo centra nos dois eixos e nunca encosta na
        borda em telefone.
     ============================================================ */
  .wm-page--focus {
    grid-template-areas:
      "header"
      "main"
      "footer";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    text-align: initial;
  }
  .wm-page--focus .wm-page__header,
  .wm-page--focus .wm-page__main,
  .wm-page--focus .wm-page__footer {
    inline-size: 100%;
  }
  .wm-page--focus .wm-page__main {
    display: grid;
    place-content: center;
    justify-items: stretch;
    padding-block: var(--wm-space-12);
  }

  /* ============================================================
     7. SPLIT — formulário de um lado, arte do outro. Metade/metade
        por padrão; --split-wide dá 3/5 ao lado do conteúdo.
     ============================================================ */
  .wm-page--split {
    grid-template-areas: "main aside";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .wm-page--split-wide {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .wm-page--split .wm-page__main {
    display: grid;
    align-content: center;
  }
  .wm-page--split .wm-page__aside {
    border-inline-start: none;
    display: grid;
    place-items: center;
    background: var(--wm-surface-secondary);
  }

  /* Painel de arte do split: um campo de cor da marca, sem imagem.
     Serve de reserva quando o hospedeiro ainda não tem a foto. */
  .wm-page__art {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: var(--wm-space-14);
    display: grid;
    place-items: center;
    padding: var(--wm-grid-margin);
    /* O gradiente de assinatura da marca já é token; não se remonta
       aqui. (--wm-brand-azul NÃO existe — o nome certo é --wm-brand-blue,
       e para gradiente o certo é --wm-brand-gradient.) */
    background: var(--wm-brand-gradient);
    color: var(--wm-label-on-accent);
  }
  .wm-page__art-text {
    max-inline-size: var(--wm-container-sm);
    font-size: var(--wm-font-size-title2);
    line-height: var(--wm-leading-title2);
    font-weight: var(--wm-font-weight-semibold);
    text-wrap: balance;
  }

  /* ============================================================
     8. CONFIGURAÇÕES — página-documento de ajustes: cabeçalho, nav
        de seções à esquerda (âncoras ou nav-sidebar), conteúdo em
        coluna. A nav não tem pele: gruda no topo e acompanha a
        rolagem do DOCUMENTO (aqui não existe regime --fill; ajustes
        rolam como página). O conteúdo se limita com .wm-container /
        --prose, como sempre.
     ============================================================ */
  .wm-page--settings {
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
    grid-template-columns: var(--wm-page-settings-nav-width) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    /* nav de seções é mais estreita que a barra de app: rótulo curto,
       sem marca, sem busca. Local deste componente, como as faixas
       de lista e apoio. */
    --wm-page-settings-nav-width: 240px;
  }
  .wm-page--settings .wm-page__sidebar {
    background: transparent;
    border-inline-end: none;
    position: sticky;
    inset-block-start: 0;
    align-self: start;
    max-block-size: 100dvh;
    overflow: auto;
  }

  /* ============================================================
     9. BANCADA — dois painéis de TRABALHO lado a lado com divisor
        redimensionável SEM JS: o painel `main` usa o resize nativo
        do CSS (a alça fica no canto inferior do divisor). Editor +
        pré-visualização, consulta + resultado, lista + mapa.
        Não confundir com --split, que é conteúdo + ARTE estática.
     ============================================================ */
  .wm-page--workbench {
    grid-template-areas:
      "header header"
      "main   detail"
      "footer footer";
    /* a coluna da esquerda segue a largura do próprio painel (auto):
       é isso que deixa o resize nativo mandar no layout. */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .wm-page--workbench .wm-page__main {
    /* proporção inicial e limites: nunca menor que uma coluna de
       lista, nunca maior que 4/5 da página. */
    inline-size: var(--wm-page-workbench-start, 50vw);
    min-inline-size: var(--wm-page-list-width);
    max-inline-size: 80vw;
    resize: horizontal;
    overflow: auto;
    border-inline-end: var(--wm-border-width-hairline) solid var(--wm-separator);
  }

  /* ============================================================
     DOBRAS RESPONSIVAS — nos breakpoints canônicos da fundação.
     ============================================================ */

  /* Abaixo de --wm-bp-lg (900px): a coluna de apoio desce para baixo
     do conteúdo, e o esqueleto de três colunas perde a barra lateral
     (a navegação vira o cabeçalho ou o nav-bottom). */
  @media (max-width: 899px) {   /* [--wm-bp-lg] */
    .wm-page--aside {
      grid-template-areas:
        "header"
        "main"
        "aside"
        "footer";
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto auto auto;
    }
    .wm-page--aside .wm-page__aside {
      border-inline-start: none;
      border-block-start: var(--wm-border-width-hairline) solid var(--wm-separator);
    }
    .wm-page--triple {
      grid-template-areas:
        "list header"
        "list detail"
        "bottom bottom";
      grid-template-columns: var(--wm-page-list-width) minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr) auto;
    }
    .wm-page--triple .wm-page__sidebar {
      display: none;
    }
    .wm-page--triple .wm-page__bottom {
      display: block;
    }
  }

  /* Abaixo de --wm-bp-md (680px): sem colunas laterais. A barra lateral
     sai de cena e o slot `bottom` entra — é onde vive o nav-bottom.
     O split vira duas faixas empilhadas, com a arte virando uma tarja. */
  @media (max-width: 679px) {   /* [--wm-bp-md] */
    .wm-page--sidebar {
      grid-template-areas:
        "header"
        "main"
        "bottom";
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr) auto;
    }
    .wm-page--sidebar .wm-page__sidebar {
      display: none;
    }
    .wm-page--sidebar .wm-page__bottom {
      display: block;
    }

    /* Três colunas em telefone: lista em cima, detalhe embaixo. Não
       existe "empurrar a tela" sem JS — o esqueleto empilha em vez de
       fingir navegação que ele não tem. */
    .wm-page--triple {
      grid-template-areas:
        "header"
        "list"
        "detail"
        "bottom";
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto minmax(0, 1fr) auto;
    }
    .wm-page--triple .wm-page__list {
      border-inline-end: none;
      border-block-end: var(--wm-border-width-hairline) solid var(--wm-separator);
    }

    .wm-page--split {
      grid-template-areas:
        "main"
        "aside";
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto;
    }
    .wm-page--split .wm-page__aside {
      min-block-size: 0;
    }
    .wm-page--split .wm-page__art {
      min-block-size: var(--wm-space-13);
    }
    .wm-page--split .wm-page__art-text {
      font-size: var(--wm-font-size-headline);
      line-height: var(--wm-leading-headline);
    }

    /* Ajustes em telefone: a nav de seções vira uma faixa acima do
       conteúdo e volta a rolar com o documento. */
    .wm-page--settings {
      grid-template-areas:
        "header"
        "sidebar"
        "main"
        "footer";
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto 1fr auto;
    }
    .wm-page--settings .wm-page__sidebar {
      position: static;
      max-block-size: none;
      border-block-end: var(--wm-border-width-hairline) solid var(--wm-separator);
    }

    /* Bancada em telefone: painéis empilham e o divisor redimensionável
       sai de cena — arrastar largura não faz sentido em coluna única. */
    .wm-page--workbench {
      grid-template-areas:
        "header"
        "main"
        "detail"
        "footer";
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto minmax(0, 1fr) auto;
    }
    .wm-page--workbench .wm-page__main {
      inline-size: auto;
      min-inline-size: 0;
      max-inline-size: none;
      resize: none;
      border-inline-end: none;
      border-block-end: var(--wm-border-width-hairline) solid var(--wm-separator);
    }

    /* Em telefone ninguém quer rolagem dentro de rolagem: o regime de
       app vira documento, a página inteira rola de uma vez. */
    .wm-page--fill {
      block-size: auto;
      min-block-size: var(--wm-page-block-size, 100dvh);
      overflow: visible;
    }
  }

  /* ============================================================
     BANCADA — moldura para exibir um esqueleto DENTRO de outra
     página (documentação, catálogo, wiki). Em produção o .wm-page
     é a página inteira e não precisa disto.
     ============================================================ */
  .wm-page-stage {
    border-radius: var(--wm-radius-panel);
    overflow: clip;
    isolation: isolate;
    background: var(--wm-surface-base);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
  }

  /* Toda classe que define display precisa do par [hidden]: sem isto,
     esconder um slot pelo atributo nativo perde para o display da classe. */
  .wm-page[hidden],
  .wm-page__header[hidden],
  .wm-page__sidebar[hidden],
  .wm-page__list[hidden],
  .wm-page__detail[hidden],
  .wm-page__main[hidden],
  .wm-page__aside[hidden],
  .wm-page__footer[hidden],
  .wm-page__bottom[hidden],
  .wm-page__body[hidden] {
    display: none;
  }
}