/* =============================================================================
 * ZELO · SISTEMA DE DESIGN · css/zelo.css
 *
 * O sistema num arquivo: tokens, reset, base, layout, componentes z-* do app
 * e do site, utilitários e o bloco de movimento reduzido. Carregado pelo app
 * (/app/, com <html class="z-app">) e pelo site, ANTES do CSS de cada um
 * (css/styles.css e css/site.css). Os componentes que SÓ o site usa moram em
 * css/zelo-site.css, que o site carrega logo depois deste e o app não carrega.
 * Especificação: SISTEMA.md (manda). Guia vivo: app/sistema.html.
 *
 * ORDEM DO ARQUIVO (a cascata é das camadas, não da ordem): fontes · tokens ·
 * reset · base · layout · utilitários · componentes de ações e entrada ·
 * componentes de exibição, retorno e navegação · movimento reduzido.
 *
 * TRÊS NÍVEIS DE TOKEN (prefixos que não colidem com o legado --bg, --t-*):
 *   --ref-*  primitivos (HEX cru). Só são lidos DENTRO de @layer tokens.
 *   --sys-*  semânticos. Têm valor nos dois temas. Componente e JS leem estes.
 *   --cmp-*  do componente. Declarados no seletor raiz dele, com padrão em
 *            --sys-*. Quem especializa o componente troca o --cmp-.
 *
 * CAMADAS (a ordem abaixo é a precedência: a última vence, sem olhar
 * especificidade):
 *   reset        zera o navegador. Perde para tudo.
 *   legado       styles.css e site.css antigos enquanto migram. Vence só o
 *                reset: a base do sistema já vence o legado.
 *   tokens       os valores. Nenhuma regra visual mora aqui.
 *   base         elementos HTML: raiz, corpo, foco, link, campo, seleção.
 *   layout       primitivas de composição (pilha, fileira, grade, medida).
 *   componentes  as peças z-*.
 *   padroes      telas do app (styles.css, por ÁREA) e do site (site.css).
 *   utilitarios  classes de uma função só (z-ic, z-sr, z-type-*, z-num).
 *                Vencem tudo: o que vem na marcação manda.
 *
 * REGRAS (conferidas por tools/check-ds.mjs):
 *   1. Valor literal de cor, tempo, curva, raio, sombra, z-index e font-size
 *      só dentro de @layer tokens. Fora dela, só var().
 *   2. Todo fundo que leva texto é HEX opaco. Translúcido só no que não leva
 *      texto (fio, véu, vidro, sombra).
 *   3. O tema escuro existe DUAS vezes, escrito à mão e idêntico:
 *      @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }
 *      e :root[data-theme="dark"], [data-theme="dark"] (vale em subárvore).
 *      Quem muda um muda o outro. O check-ds confere a paridade.
 *   4. Só transform e opacity animam. Duração e curva só por token.
 *   5. Movimento reduzido: um bloco só, no FIM deste arquivo. Tudo instantâneo.
 *   6. [hidden] sempre vence: é o único !important do sistema.
 *   7. Contraste: cada token de texto traz ao lado a razão calculada
 *      (WCAG 2.x). Tabela completa em SISTEMA.md §2.6.
 * ============================================================================= */

@layer reset, legado, tokens, base, layout, componentes, padroes, utilitarios;

/* ---- Fonte: Inter Variable só onde não há SF --------------------------------
 * iPhone, iPad e Mac usam a fonte do sistema e nunca pedem estes arquivos (o
 * navegador só baixa a face quando a pilha chega nela). Android, Windows e
 * Linux usam a Inter (eixos wght 100 a 900 e opsz). A latin-ext só baixa se
 * aparecer caractere da faixa dela. Fora de @layer por regra do CSS.        */
@font-face {
  font-family: "Inter Zelo";
  src: url("/fonts/inter-latin-opsz.woff2") format("woff2-variations"),
       url("/fonts/inter-latin-opsz.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Zelo";
  src: url("/fonts/inter-latin-ext-opsz.woff2") format("woff2-variations"),
       url("/fonts/inter-latin-ext-opsz.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =============================================================================
 * TOKENS
 * ============================================================================= */
@layer tokens {

/* ---- NÍVEL 1 · PRIMITIVOS ---------------------------------------------------
 * Neutros da Apple, sem tinta: o calor do Zelo vem do esmeralda e dos renders.
 * Um conjunto só para os dois temas, em ordem de luminosidade.              */
:root {
  --ref-gray-0:    #FFFFFF;  /* superfície clara, texto sobre botão cheio     */
  --ref-gray-25:   #FBFBFD;  /* base do vidro do site                         */
  --ref-gray-50:   #F5F5F7;  /* seção alternada do site, texto do escuro      */
  --ref-gray-100:  #F2F2F7;  /* fundo agrupado do app                         */
  --ref-gray-150:  #E9E9EB;  /* preenchimento de controle (o rgba 118 118 128 .16 da Apple composto no branco) */
  --ref-gray-200:  #E5E5EA;  /* trilho do anel, esqueleto, hover              */
  --ref-gray-250:  #D1D1D6;  /* controle e linha pressionados                 */
  --ref-gray-300:  #C7C7CC;  /* alça da folha, texto 2 em alto contraste escuro */
  --ref-gray-350:  #C6C6C8;  /* separador opaco claro                         */
  --ref-gray-400:  #AEAEB2;  /* rótulo 3 claro, desabilitado escuro          */
  --ref-gray-450:  #A1A1A6;  /* texto secundário escuro                       */
  --ref-gray-500:  #8E8E93;  /* gráfico neutro: anel "sem registro"           */
  --ref-gray-550:  #86868B;  /* borda de campo clara                          */
  --ref-gray-600:  #6E6E73;  /* texto secundário claro                        */
  --ref-gray-650:  #636366;  /* rótulo 3 escuro, polegar escuro, desabilitado claro */
  --ref-gray-700:  #48484A;  /* pressionado elevado escuro                    */
  --ref-gray-725:  #3C3C43;  /* texto 2 em alto contraste claro              */
  --ref-gray-750:  #3A3A3C;  /* preenchimento elevado escuro                  */
  --ref-gray-775:  #38383A;  /* separador opaco escuro                        */
  --ref-gray-790:  #323236;  /* preenchimento de controle escuro (composto)   */
  --ref-gray-800:  #2C2C2E;  /* superfície elevada escura                     */
  --ref-gray-850:  #1D1D1F;  /* texto principal claro                         */
  --ref-gray-875:  #1C1C1E;  /* superfície escura                             */
  --ref-gray-900:  #161617;  /* seção alternada do site escuro, base do vidro escuro */
  --ref-gray-1000: #000000;  /* fundo escuro (OLED), ilha do toast            */

  /* Esmeralda (marca). Âncoras: 300, 600, 700, 900. O 500 nunca leva branco (3,18). */
  --ref-emerald-50:  #ECFBF5;  --ref-emerald-100: #D4F6E9;  --ref-emerald-200: #A6ECD2;
  --ref-emerald-300: #3BCFA3;  /* marca no escuro                              */
  --ref-emerald-400: #14B28D;  /* pressionado no escuro                        */
  --ref-emerald-500: #01967A;
  --ref-emerald-600: #0E7C66;  /* marca no claro                               */
  --ref-emerald-650: #0C6F5B;  /* hover no claro                               */
  --ref-emerald-700: #0A5D4C;  /* tinta verde de texto, pressionado claro      */
  --ref-emerald-800: #08483B;  --ref-emerald-900: #0A352C;
  --ref-emerald-950: #07211B;  /* texto sobre o botão esmeralda no escuro      */

  /* Laranja (atenção), a família do systemOrange recalculada para AA.
     Âncoras: 300 (escuro), 500 (área grande), 600 (gráfico), 700 (texto). */
  --ref-amber-50:  #FFF4E8;  --ref-amber-100: #FFE5C7;  --ref-amber-200: #FFCC8A;
  --ref-amber-300: #FFB340;  /* laranja do escuro (gráfico e texto): 11,77 #000 · 9,54 #1C1C1E */
  --ref-amber-400: #FF9F0A;
  --ref-amber-500: #FF9500;  /* área grande, sempre com texto escuro (7,65). Nunca branco */
  --ref-amber-600: #D35F00;  /* gráfico no claro: anel e glifo (3,88 no branco · 3,48 no #F2F2F7) */
  --ref-amber-700: #C93400;  /* texto no claro (5,28 no branco · 4,73 no #F2F2F7) */
  --ref-amber-800: #9A2800;  --ref-amber-900: #6B1C00;

  /* Vermelho (vencido), o systemRed acessível. Âncoras: 300 (escuro), 500 (claro). */
  --ref-red-50:  #FFF0F1;  --ref-red-100: #FFDADD;  --ref-red-200: #FF9F99;
  --ref-red-300: #FF6961;  /* vermelho do escuro: 7,45 #000 · 6,03 #1C1C1E · 4,94 #2C2C2E */
  --ref-red-400: #FF3B30;
  --ref-red-500: #D70015;  /* vermelho do claro e botão destrutivo: 5,38 com branco · 4,83 no #F2F2F7 */
  --ref-red-600: #B0000F;  /* destrutivo pressionado (branco 7,36)              */
  --ref-red-700: #8A000C;  --ref-red-800: #66000A;  --ref-red-900: #450007;

  /* Lavados: composições OPACAS (a sonda da bancada não lê oklch nem mix).
     Claro sobre #FFFFFF: esmeralda 12% e 20%, laranja 10% (do 600), vermelho 8% (do 500).
     Escuro sobre #1C1C1E: esmeralda 18% e 28%, laranja 16% e vermelho 18% (dos 300). */
  --ref-wash-emerald-l:       #E2EFED;  --ref-wash-emerald-d:       #223C36;
  --ref-wash-emerald-press-l: #CFE5E0;  --ref-wash-emerald-press-d: #254E43;
  --ref-wash-amber-l:         #FBEFE6;  --ref-wash-amber-d:         #403423;
  --ref-wash-red-l:           #FCEBEC;  --ref-wash-red-d:           #452A2A;

  /* Séries de gráfico: nunca estado. Validadas para daltonismo, ≥ 3 na superfície.
     claro sobre #FFFFFF | escuro sobre #1C1C1E                                 */
  --ref-series-1-l: #0B9470;  --ref-series-1-d: #1FA882;  /* combustível   3,83 | 5,66 */
  --ref-series-2-l: #6A5AE0;  --ref-series-2-d: #7F72EE;  /* serviços      5,06 | 4,49 */
  --ref-series-3-l: #D9468A;  --ref-series-3-d: #E05A95;  /* outros gastos 4,04 | 4,91 */
  --ref-series-4-l: #2B8FD6;  --ref-series-4-d: #3D9BE3;  /* custos fixos  3,50 | 5,67 */
}

/* ---- NÍVEL 2 · SEMÂNTICOS IGUAIS NOS DOIS TEMAS -----------------------------
 * Tiles de 30 dos Ajustes, com glifo branco: 5,13 · 5,06 · 3,50 · 3,26.
 * No escuro o verde não clareia: branco sobre #3BCFA3 daria 1,97.          */
:root {
  --sys-tile-green:  var(--ref-emerald-600);
  --sys-tile-indigo: var(--ref-series-2-l);
  --sys-tile-blue:   var(--ref-series-4-l);
  --sys-tile-gray:   var(--ref-gray-500);
  --sys-on-tile:     var(--ref-gray-0);
  --sys-switch-thumb: var(--ref-gray-0);       /* polegar do interruptor: branco nos dois temas, como o iOS */
  --sys-device-bezel: #0B0B0C;                 /* borda do iPhone desenhado em CSS (site) */
}

/* ---- NÍVEL 2 · SEMÂNTICOS · CLARO -------------------------------------------
 * Vale no :root e em qualquer subárvore [data-theme="light"].
 * Razões: "branco" #FFFFFF, "bg" #F2F2F7, "alt" #F5F5F7, "fill" #E9E9EB,
 * "vidro" = pior caso do material (conteúdo #000 sob .90 = #E0E0E2).       */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Fundos (todos opacos) */
  --sys-bg:             var(--ref-gray-100);  /* tela agrupada do app             */
  --sys-bg-plain:       var(--ref-gray-0);    /* tela lisa: chat, onboarding, site */
  --sys-bg-alt:         var(--ref-gray-50);   /* seção alternada do site          */
  --sys-bg-inverse:     var(--ref-gray-1000); /* seção da IA no site (preta nos dois) */
  --sys-surface:        var(--ref-gray-0);    /* célula, seção agrupada, ladrilho */
  --sys-surface-well:   var(--ref-gray-100);  /* seção agrupada sobre a tela LISA (onboarding) */
  --sys-fill:           var(--ref-gray-150);  /* botão cinza, segmentado, chip, lente da aba */
  --sys-fill-plain:     var(--ref-gray-150);  /* o preenchimento da tela, que o contexto elevado não sobe (tela preta dentro de moldura de folha) */
  --sys-fill-strong:    var(--ref-gray-250);  /* pressionado                      */
  --sys-fill-hover:     var(--ref-gray-200);  /* hover de controle (ponteiro fino) */
  --sys-row-hover:      var(--ref-gray-100);  /* hover de célula: label-2 continua 4,54 */
  --sys-thumb:          var(--ref-gray-0);    /* polegar do segmentado            */
  /* Contexto elevado (folha, diálogo, painel, popover): no claro nada muda. */
  --sys-bg-elevated:          var(--ref-gray-100);
  --sys-surface-elevated:     var(--ref-gray-0);
  --sys-fill-elevated:        var(--ref-gray-150);
  --sys-fill-strong-elevated: var(--ref-gray-250);
  --sys-fill-hover-elevated:  var(--ref-gray-200);
  --sys-row-hover-elevated:   var(--ref-gray-100);

  /* Texto */
  --sys-label:          var(--ref-gray-850); /* 16,83 branco · 15,08 bg · 15,46 alt · 13,88 fill · 12,77 vidro */
  --sys-label-2:        var(--ref-gray-600); /* 5,07 branco · 4,54 bg · 4,66 alt. PROIBIDO sobre fill (4,18), vidro (3,85) e lavado (4,30) */
  --sys-label-3:        var(--ref-gray-400); /* chevron, alça, glifo decorativo. NUNCA texto, nem desabilitado */
  --sys-label-disabled: var(--ref-gray-650); /* texto desabilitado: 5,99 branco · 5,37 bg · 4,94 fill */
  --sys-placeholder:    var(--ref-gray-650); /* dentro do campo: 5,99 branco · 4,94 fill (AA: "opcional" é informação, não só exemplo) */
  --sys-label-inverse:  var(--ref-gray-50);  /* texto da seção preta: 19,29 sobre #000 */
  --sys-label-inverse-2: var(--ref-gray-450); /* 8,16 sobre #000                  */

  /* Linhas */
  --sys-separator:        rgb(60 60 67 / 0.29); /* fio de 0,5 px, decorativo     */
  --sys-separator-opaque: var(--ref-gray-350);  /* fio sobre material, tabela    */
  --sys-border-control:   var(--ref-gray-550);  /* borda de campo (1.4.11): 3,62 branco · 3,25 bg */

  /* Marca e ação */
  --sys-tint:              var(--ref-emerald-600); /* link e ícone: 5,13 branco · 4,60 bg · 4,71 alt. Ícone no vidro 3,89. PROIBIDO sobre lavado (4,35) */
  --sys-tint-hover:        var(--ref-emerald-650); /* fundo do botão cheio em hover: branco 6,10 */
  --sys-tint-pressed:      var(--ref-emerald-700); /* fundo pressionado: branco 7,83 */
  --sys-on-tint:           var(--ref-gray-0);      /* 5,13 sobre tint              */
  --sys-bubble-me:         var(--sys-tint);        /* a bolha de quem fala: o verde do botão no claro */
  --sys-on-bubble-me:      var(--sys-on-tint);
  --sys-tint-ink:          var(--ref-emerald-700); /* texto verde: 7,83 branco · 7,01 bg · 6,64 lavado · 5,94 lavado pressionado · 6,46 fill · 5,94 vidro */
  --sys-tint-ink-pressed:  var(--ref-emerald-800); /* texto verde pressionado (botão plain, link, voltar): 10,4 branco. A opacidade apagaria abaixo de AA */
  --sys-tint-wash:         var(--ref-wash-emerald-l);       /* tingido e selecionado */
  --sys-tint-wash-pressed: var(--ref-wash-emerald-press-l); /* tingido pressionado */
  --sys-focus:             var(--ref-emerald-600); /* anel de foco: 5,13 branco · 4,23 fill */
  --sys-destructive:         var(--ref-red-500);   /* fundo destrutivo: branco 5,38 */
  --sys-destructive-pressed: var(--ref-red-600);   /* branco 7,36                  */
  --sys-on-destructive:      var(--ref-gray-0);
  --sys-destructive-ink:     var(--ref-red-500);   /* texto destrutivo sem fundo: 5,38 branco · 4,83 bg */
  --sys-destructive-ink-pressed: var(--ref-red-700); /* destrutivo sem fundo, pressionado: 10,07 branco */

  /* Estado do item: GRÁFICO (anel, glifo) · TINTA (texto) · LAVADO (fundo) */
  --sys-overdue:       var(--ref-red-500);     /* gráfico 5,38 branco · 4,83 bg   */
  --sys-overdue-ink:   var(--ref-red-500);     /* 5,38 branco · 4,83 bg · 4,68 lavado */
  --sys-overdue-wash:  var(--ref-wash-red-l);
  --sys-soon:          var(--ref-amber-600);   /* gráfico 3,88 branco · 3,48 bg   */
  --sys-soon-fill:     var(--ref-amber-500);   /* área grande, sempre com --sys-on-soon-fill */
  --sys-on-soon-fill:  var(--ref-gray-850);    /* 7,65                            */
  --sys-soon-ink:      var(--ref-amber-700);   /* 5,28 branco · 4,73 bg · 4,68 lavado */
  --sys-soon-wash:     var(--ref-wash-amber-l);
  --sys-ok:            var(--ref-emerald-600); /* gráfico 5,13 branco             */
  --sys-ok-ink:        var(--ref-emerald-700); /* 7,83 branco · 6,64 lavado       */
  --sys-ok-wash:       var(--ref-wash-emerald-l);
  --sys-unknown:       var(--ref-gray-500);    /* gráfico 3,26 branco: SÓ sobre superfície (2,92 no bg) */
  --sys-unknown-ink:   var(--ref-gray-600);    /* 5,07 branco · 4,54 bg           */
  --sys-unknown-wash:  var(--ref-gray-100);
  --sys-unknown-strong: var(--ref-gray-600);   /* anel sem registro sobre fundo agrupado: 4,54 */
  --sys-ring-track:    var(--ref-gray-200);    /* trilho do anel (decorativo); tinta verde nele 6,23 */
  --sys-badge:         var(--ref-red-500);     /* distintivo: branco 5,38 nos dois temas */
  --sys-on-badge:      var(--ref-gray-0);

  /* Gráficos */
  --sys-series-1: var(--ref-series-1-l);  --sys-series-2: var(--ref-series-2-l);
  --sys-series-3: var(--ref-series-3-l);  --sys-series-4: var(--ref-series-4-l);

  /* Ilha do toast (preta nos dois temas) */
  --sys-island:         var(--ref-gray-1000);
  --sys-on-island:      var(--ref-gray-0);       /* 21                            */
  --sys-island-edge:    none;                    /* no escuro ganha contorno      */
  --sys-island-ok:      var(--ref-emerald-300);  /* 10,64 sobre #000              */
  --sys-island-ok-pressed: var(--ref-emerald-400); /* "Desfazer" pressionado: 7,78 (a opacidade daria 3,7) */
  --sys-island-soon:    var(--ref-amber-300);    /* 11,77                         */
  --sys-island-overdue: var(--ref-red-300);      /* 7,45                          */

  /* Materiais (vidro), só no cromo. Opacidade pelo pior caso: §2.6. */
  --sys-material-chrome-glass: rgb(249 249 251 / 0.90);
  --sys-material-thick-glass:  rgb(249 249 251 / 0.94);
  --sys-material-solid:        #F9F9FB;
  /* O menu e o popover ficam POR CIMA de cartões: no escuro precisam ser
     mais claros que a superfície que cobrem (o elevado da Apple, #2C2C2E);
     no claro é o mesmo vidro grosso. */
  --sys-material-menu-glass:   var(--sys-material-thick-glass);
  --sys-material-menu-solid:   var(--sys-material-solid);
  --sys-material-edge:  inset 0 0 0 0.5px rgb(0 0 0 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.6);
  --sys-scrim:              rgb(0 0 0 / 0.28);   /* véu da folha no celular      */
  --sys-scrim-sheet-tablet: rgb(0 0 0 / 0.20);   /* véu do diálogo central       */

  /* Sombras: só no que FLUTUA (princípio 2) */
  --sys-shadow-lift:    0 1px 2px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.06);
  --sys-shadow-thumb:   0 3px 8px rgb(0 0 0 / 0.12), 0 3px 1px rgb(0 0 0 / 0.04);
  --sys-shadow-float:   0 2px 6px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.08);
  --sys-shadow-popover: 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 12px 40px rgb(0 0 0 / 0.18);
  --sys-shadow-sheet:   0 -0.5px 0 rgb(0 0 0 / 0.08), 0 12px 40px rgb(0 0 0 / 0.14);
  --sys-shadow-device:  0 1px 1px rgb(0 0 0 / 0.08), 0 30px 60px -20px rgb(0 0 0 / 0.30);
  --sys-shadow-contact: drop-shadow(0 8px 12px rgb(0 0 0 / 0.12)); /* render do veículo (filter) */
  --sys-device-rim:     0 0 0 1.5px #A7A7AD, 0 0 0 3px #E3E3E8;   /* aro do iPhone em CSS */
}

/* ---- NÍVEL 2 · SEMÂNTICOS · ESCURO (escrito duas vezes, IDÊNTICO) -----------
 * Razões: "#000" fundo, "sup" #1C1C1E, "sup2" #2C2C2E, "fill" #323236,
 * "fill elev" #3A3A3C, "vidro" = pior caso (#FFF sob .86 = #373737).
 *   label #F5F5F7       19,29 #000 · 15,63 sup · 12,80 sup2 · 11,72 fill · 10,42 fill elev · 10,93 vidro
 *   label-2 #A1A1A6     8,16 #000 · 6,61 sup · 5,42 sup2 · 7,03 #161617 · 4,96 fill. PROIBIDO em fill elev (4,41)
 *   label-disabled #AEAEB2  5,77 fill · 5,13 fill elev · 7,69 sup · 6,30 sup2
 *   tint e tint-ink #3BCFA3  10,64 #000 · 8,62 sup · 7,06 sup2 · 6,02 lavado · 6,47 fill · 5,75 fill elev
 *   on-tint #07211B     8,56 sobre #3BCFA3 · 6,26 sobre pressionado #14B28D
 *   overdue #FF6961     7,45 #000 · 6,03 sup · 4,94 sup2 · 4,60 lavado
 *   soon #FFB340        11,77 #000 · 9,54 sup · 7,81 sup2 · 6,79 lavado
 *   label sobre polegar #636366 5,50 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sys-bg: var(--ref-gray-1000);  --sys-bg-plain: var(--ref-gray-1000);
    --sys-bg-alt: var(--ref-gray-900);  --sys-bg-inverse: var(--ref-gray-1000);
    --sys-surface: var(--ref-gray-875);  --sys-surface-well: var(--ref-gray-800);
    --sys-fill: var(--ref-gray-790);  --sys-fill-strong: var(--ref-gray-750);  --sys-fill-hover: var(--ref-gray-800);
    --sys-fill-plain: var(--ref-gray-790);
    --sys-row-hover: var(--ref-gray-800);  --sys-thumb: var(--ref-gray-650);
    --sys-bg-elevated: var(--ref-gray-875);  --sys-surface-elevated: var(--ref-gray-800);
    --sys-fill-elevated: var(--ref-gray-750);  --sys-fill-strong-elevated: var(--ref-gray-700);
    --sys-fill-hover-elevated: var(--ref-gray-700);  --sys-row-hover-elevated: var(--ref-gray-790);
    --sys-label: var(--ref-gray-50);  --sys-label-2: var(--ref-gray-450);  --sys-label-3: var(--ref-gray-650);
    --sys-label-disabled: var(--ref-gray-400);  --sys-placeholder: var(--ref-gray-450);
    --sys-label-inverse: var(--ref-gray-50);  --sys-label-inverse-2: var(--ref-gray-450);
    --sys-separator: rgb(84 84 88 / 0.65);  --sys-separator-opaque: var(--ref-gray-775);
    --sys-border-control: var(--ref-gray-500);
    --sys-tint: var(--ref-emerald-300);  --sys-tint-hover: var(--ref-emerald-200);  --sys-tint-pressed: var(--ref-emerald-400);
    --sys-on-tint: var(--ref-emerald-950);  --sys-tint-ink: var(--ref-emerald-300);  --sys-tint-ink-pressed: var(--ref-emerald-200);
    --sys-bubble-me: var(--ref-emerald-650);  --sys-on-bubble-me: var(--ref-gray-0);  /* no escuro a bolha escurece (iMessage): branco 6,10; o menta claro ofuscava */
    --sys-tint-wash: var(--ref-wash-emerald-d);  --sys-tint-wash-pressed: var(--ref-wash-emerald-press-d);
    --sys-focus: var(--ref-emerald-300);
    --sys-destructive: var(--ref-red-500);  --sys-destructive-pressed: var(--ref-red-600);
    --sys-on-destructive: var(--ref-gray-0);  --sys-destructive-ink: var(--ref-red-300);  --sys-destructive-ink-pressed: var(--ref-red-200);
    --sys-overdue: var(--ref-red-300);  --sys-overdue-ink: var(--ref-red-300);  --sys-overdue-wash: var(--ref-wash-red-d);
    --sys-soon: var(--ref-amber-300);  --sys-soon-fill: var(--ref-amber-300);  --sys-on-soon-fill: var(--ref-gray-1000);
    --sys-soon-ink: var(--ref-amber-300);  --sys-soon-wash: var(--ref-wash-amber-d);
    --sys-ok: var(--ref-emerald-300);  --sys-ok-ink: var(--ref-emerald-300);  --sys-ok-wash: var(--ref-wash-emerald-d);
    --sys-unknown: var(--ref-gray-500);  --sys-unknown-ink: var(--ref-gray-450);  --sys-unknown-wash: var(--ref-gray-800);
    --sys-unknown-strong: var(--ref-gray-500);  --sys-ring-track: var(--ref-gray-750);
    --sys-badge: var(--ref-red-500);  --sys-on-badge: var(--ref-gray-0);
    --sys-series-1: var(--ref-series-1-d);  --sys-series-2: var(--ref-series-2-d);
    --sys-series-3: var(--ref-series-3-d);  --sys-series-4: var(--ref-series-4-d);
    --sys-island: var(--ref-gray-1000);  --sys-on-island: var(--ref-gray-0);
    --sys-island-edge: 0 0 0 0.5px rgb(255 255 255 / 0.18);
    --sys-island-ok: var(--ref-emerald-300);  --sys-island-soon: var(--ref-amber-300);  --sys-island-overdue: var(--ref-red-300);
    --sys-material-chrome-glass: rgb(22 22 23 / 0.86);  --sys-material-thick-glass: rgb(22 22 23 / 0.92);
    --sys-material-solid: #161617;
    --sys-material-menu-glass: rgb(44 44 46 / 0.9);  --sys-material-menu-solid: #2C2C2E;
    --sys-material-edge: inset 0 0 0 0.5px rgb(255 255 255 / 0.10), inset 0 1px 0 rgb(255 255 255 / 0.12);
    --sys-scrim: rgb(0 0 0 / 0.48);  --sys-scrim-sheet-tablet: rgb(0 0 0 / 0.40);
    --sys-shadow-lift: 0 1px 2px rgb(0 0 0 / 0.40);
    --sys-shadow-thumb: 0 3px 8px rgb(0 0 0 / 0.40), 0 3px 1px rgb(0 0 0 / 0.20);
    --sys-shadow-float: 0 0 0 0.5px rgb(255 255 255 / 0.10), 0 8px 24px rgb(0 0 0 / 0.50);
    --sys-shadow-popover: 0 0 0 0.5px rgb(255 255 255 / 0.12), 0 12px 40px rgb(0 0 0 / 0.60);
    --sys-shadow-sheet: 0 -0.5px 0 rgb(255 255 255 / 0.10), 0 12px 40px rgb(0 0 0 / 0.60);
    --sys-shadow-device: 0 30px 60px -20px rgb(0 0 0 / 0.80);
    --sys-shadow-contact: none;
    --sys-device-rim: 0 0 0 1.5px #5A5A5E, 0 0 0 3px #2C2C2E;
  }
}
:root[data-theme="dark"],
[data-theme="dark"] {
    color-scheme: dark;
    --sys-bg: var(--ref-gray-1000);  --sys-bg-plain: var(--ref-gray-1000);
    --sys-bg-alt: var(--ref-gray-900);  --sys-bg-inverse: var(--ref-gray-1000);
    --sys-surface: var(--ref-gray-875);  --sys-surface-well: var(--ref-gray-800);
    --sys-fill: var(--ref-gray-790);  --sys-fill-strong: var(--ref-gray-750);  --sys-fill-hover: var(--ref-gray-800);
    --sys-fill-plain: var(--ref-gray-790);
    --sys-row-hover: var(--ref-gray-800);  --sys-thumb: var(--ref-gray-650);
    --sys-bg-elevated: var(--ref-gray-875);  --sys-surface-elevated: var(--ref-gray-800);
    --sys-fill-elevated: var(--ref-gray-750);  --sys-fill-strong-elevated: var(--ref-gray-700);
    --sys-fill-hover-elevated: var(--ref-gray-700);  --sys-row-hover-elevated: var(--ref-gray-790);
    --sys-label: var(--ref-gray-50);  --sys-label-2: var(--ref-gray-450);  --sys-label-3: var(--ref-gray-650);
    --sys-label-disabled: var(--ref-gray-400);  --sys-placeholder: var(--ref-gray-450);
    --sys-label-inverse: var(--ref-gray-50);  --sys-label-inverse-2: var(--ref-gray-450);
    --sys-separator: rgb(84 84 88 / 0.65);  --sys-separator-opaque: var(--ref-gray-775);
    --sys-border-control: var(--ref-gray-500);
    --sys-tint: var(--ref-emerald-300);  --sys-tint-hover: var(--ref-emerald-200);  --sys-tint-pressed: var(--ref-emerald-400);
    --sys-on-tint: var(--ref-emerald-950);  --sys-tint-ink: var(--ref-emerald-300);  --sys-tint-ink-pressed: var(--ref-emerald-200);
    --sys-bubble-me: var(--ref-emerald-650);  --sys-on-bubble-me: var(--ref-gray-0);  /* no escuro a bolha escurece (iMessage): branco 6,10; o menta claro ofuscava */
    --sys-tint-wash: var(--ref-wash-emerald-d);  --sys-tint-wash-pressed: var(--ref-wash-emerald-press-d);
    --sys-focus: var(--ref-emerald-300);
    --sys-destructive: var(--ref-red-500);  --sys-destructive-pressed: var(--ref-red-600);
    --sys-on-destructive: var(--ref-gray-0);  --sys-destructive-ink: var(--ref-red-300);  --sys-destructive-ink-pressed: var(--ref-red-200);
    --sys-overdue: var(--ref-red-300);  --sys-overdue-ink: var(--ref-red-300);  --sys-overdue-wash: var(--ref-wash-red-d);
    --sys-soon: var(--ref-amber-300);  --sys-soon-fill: var(--ref-amber-300);  --sys-on-soon-fill: var(--ref-gray-1000);
    --sys-soon-ink: var(--ref-amber-300);  --sys-soon-wash: var(--ref-wash-amber-d);
    --sys-ok: var(--ref-emerald-300);  --sys-ok-ink: var(--ref-emerald-300);  --sys-ok-wash: var(--ref-wash-emerald-d);
    --sys-unknown: var(--ref-gray-500);  --sys-unknown-ink: var(--ref-gray-450);  --sys-unknown-wash: var(--ref-gray-800);
    --sys-unknown-strong: var(--ref-gray-500);  --sys-ring-track: var(--ref-gray-750);
    --sys-badge: var(--ref-red-500);  --sys-on-badge: var(--ref-gray-0);
    --sys-series-1: var(--ref-series-1-d);  --sys-series-2: var(--ref-series-2-d);
    --sys-series-3: var(--ref-series-3-d);  --sys-series-4: var(--ref-series-4-d);
    --sys-island: var(--ref-gray-1000);  --sys-on-island: var(--ref-gray-0);
    --sys-island-edge: 0 0 0 0.5px rgb(255 255 255 / 0.18);
    --sys-island-ok: var(--ref-emerald-300);  --sys-island-soon: var(--ref-amber-300);  --sys-island-overdue: var(--ref-red-300);
    --sys-material-chrome-glass: rgb(22 22 23 / 0.86);  --sys-material-thick-glass: rgb(22 22 23 / 0.92);
    --sys-material-solid: #161617;
    --sys-material-menu-glass: rgb(44 44 46 / 0.9);  --sys-material-menu-solid: #2C2C2E;
    --sys-material-edge: inset 0 0 0 0.5px rgb(255 255 255 / 0.10), inset 0 1px 0 rgb(255 255 255 / 0.12);
    --sys-scrim: rgb(0 0 0 / 0.48);  --sys-scrim-sheet-tablet: rgb(0 0 0 / 0.40);
    --sys-shadow-lift: 0 1px 2px rgb(0 0 0 / 0.40);
    --sys-shadow-thumb: 0 3px 8px rgb(0 0 0 / 0.40), 0 3px 1px rgb(0 0 0 / 0.20);
    --sys-shadow-float: 0 0 0 0.5px rgb(255 255 255 / 0.10), 0 8px 24px rgb(0 0 0 / 0.50);
    --sys-shadow-popover: 0 0 0 0.5px rgb(255 255 255 / 0.12), 0 12px 40px rgb(0 0 0 / 0.60);
    --sys-shadow-sheet: 0 -0.5px 0 rgb(255 255 255 / 0.10), 0 12px 40px rgb(0 0 0 / 0.60);
    --sys-shadow-device: 0 30px 60px -20px rgb(0 0 0 / 0.80);
    --sys-shadow-contact: none;
    --sys-device-rim: 0 0 0 1.5px #5A5A5E, 0 0 0 3px #2C2C2E;
}

/* ---- Contexto ELEVADO (folha, diálogo, painel, popover, menu, alerta) -------
 * No escuro tudo sobe um degrau (#000 → #1C1C1E → #2C2C2E): é o que separa a
 * folha do fundo preto sem sombra. No claro os valores são iguais. Resolve
 * pelo tema herdado, sem bloco escuro próprio. Uma regra só para toda peça
 * que flutua (o markup também traz .z-elevated, e qualquer bloco pode pedir). */
.z-elevated, .z-sheet, .z-menu, .z-popover, .z-alert, .z-actionsheet {
  --sys-bg:          var(--sys-bg-elevated);
  --sys-surface:     var(--sys-surface-elevated);
  --sys-fill:        var(--sys-fill-elevated);
  --sys-fill-strong: var(--sys-fill-strong-elevated);
  --sys-fill-hover:  var(--sys-fill-hover-elevated); /* escuro #48484A (≠ superfície #2C2C2E) */
  --sys-row-hover:   var(--sys-row-hover-elevated);  /* escuro #323236: label-2 4,96 */
}

/* ---- Material: o componente lê --sys-material-chrome/-thick e o filtro. -----
 * A troca para sólido acontece aqui, num lugar só, e vale em subárvore.
 * backdrop-filter e -webkit-backdrop-filter recebem o MESMO token.          */
:root,
[data-theme] {
  --sys-material-chrome: var(--sys-material-chrome-glass);
  --sys-material-thick:  var(--sys-material-thick-glass);
  --sys-material-menu:   var(--sys-material-menu-glass);
  --sys-material-filter:       saturate(180%) blur(20px); /* barra, abas, "+", trilho, nav do site */
  --sys-material-filter-thick: saturate(180%) blur(30px); /* rodapé da folha, menu, popover */
  /* Borda de rolagem (iOS 26, "scroll edge effect"): o conteúdo que passa por
   * baixo de um controle flutuante se desfaz no fundo da tela antes de chegar
   * nele. Sem isso a cápsula e o "+" ficam em cima de texto legível.
   * Atrás do controle o fundo é SÓLIDO (a cor da tela, até o topo dele): o
   * vidro nunca mostra uma frase por baixo, nem quando o aparelho não
   * desfoca (Android fraco, material sólido, navegador sem backdrop-filter).
   * Só a faixa acima do controle (--sys-scroll-edge-rise) funde e desfoca.
   * A metade de baixo da subida já é o fundo inteiro: o que sobra entre o
   * conteúdo e o controle é só a fusão curta do alto, sem vulto legível nem
   * forma (um botão do cartão de baixo meio desfeito lia como sujeira). */
  /* Só opacidade, sem desfoque: o desfoque de uma faixa mascarada deixava um
     halo e duplicava a linha que passava por ela (pior no escuro). O vidro da
     cápsula fica sobre fundo sólido. Fusão curta e suave nos 16 de cima. */
  --sys-scroll-edge-fill:   linear-gradient(to top, var(--sys-bg) 0, var(--sys-bg) calc(100% - 16px), color-mix(in srgb, var(--sys-bg) 70%, transparent) calc(100% - 8px), transparent 100%);
  --sys-scroll-edge-mask:   linear-gradient(to top, black 0, black calc(100% - 16px), rgb(0 0 0 / 0.7) calc(100% - 8px), transparent 100%);
  --sys-scroll-edge-filter: none;
  --sys-scroll-edge-rise:   44px; /* quanto a borda passa do topo do controle */
  /* Cartão do site sobre a seção: alt na seção lisa, superfície na seção
     alternada e na preta (.z-section--alt e --inverse trocam). Ladrilho,
     preço, cartão de modelo, item e sumário leem este papel. */
  --sys-card: var(--sys-bg-alt);
  /* Contorno extra que só existe com contraste aumentado (polegar do
     segmentado, data em lista): 0 aqui, 1 px no bloco do contraste. */
  --sys-edge-contrast: 0px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, [data-theme] {
    --sys-material-chrome: var(--sys-material-solid);
    --sys-material-thick:  var(--sys-material-solid);
    --sys-material-menu:   var(--sys-material-menu-solid);
  }
}
/* Cores forçadas também: o alfa do material sobrevive a elas, e a frase de
   trás aparecia por baixo do título do alerta. */
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  :root, [data-theme] {
    --sys-material-chrome: var(--sys-material-solid);
    --sys-material-thick:  var(--sys-material-solid);
    --sys-material-menu:   var(--sys-material-menu-solid);
    --sys-material-filter: none;  --sys-material-filter-thick: none;
    --sys-scroll-edge-filter: none;
  }
}
/* Ligado por JS quando navigator.deviceMemory ≤ 4 ou hardwareConcurrency ≤ 4. */
html.material-solido,
html.material-solido [data-theme] {
  --sys-material-chrome: var(--sys-material-solid);
  --sys-material-thick:  var(--sys-material-solid);
  --sys-material-menu:   var(--sys-material-menu-solid);
  --sys-material-filter: none;  --sys-material-filter-thick: none;
  --sys-scroll-edge-filter: none;
}

/* ---- Contraste aumentado ----------------------------------------------------
 * Escrito como os blocos de tema: o claro só vale com o claro ativo, senão a
 * tinta escura do alto contraste claro vazaria para o escuro.              */
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --sys-label-2: var(--ref-gray-725);       /* 9,80 bg · 9,02 fill          */
    --sys-separator: var(--ref-gray-500);
    --sys-border-control: var(--ref-gray-725);
    --sys-tint: var(--ref-emerald-700);       /* 7,83 branco                  */
    --sys-tint-hover: var(--ref-emerald-800); /* o hover escurece além do repouso */
    --sys-tint-pressed: var(--ref-emerald-900);
    --sys-tint-ink-pressed: var(--ref-emerald-900);
    --sys-focus: var(--ref-emerald-700);
    --sys-ring-track: var(--ref-gray-500);    /* trilho do anel: 3,26 branco  */
    --sys-edge-contrast: 1px;
  }
}
@media (prefers-contrast: more) {
  [data-theme="light"] {
    --sys-label-2: var(--ref-gray-725);
    --sys-separator: var(--ref-gray-500);
    --sys-border-control: var(--ref-gray-725);
    --sys-tint: var(--ref-emerald-700);
    --sys-tint-hover: var(--ref-emerald-800);
    --sys-tint-pressed: var(--ref-emerald-900);
    --sys-tint-ink-pressed: var(--ref-emerald-900);
    --sys-focus: var(--ref-emerald-700);
    --sys-ring-track: var(--ref-gray-500);
    --sys-edge-contrast: 1px;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sys-label-2: var(--ref-gray-300);       /* 10,10 sup · 6,74 fill elev   */
    --sys-separator: var(--ref-gray-500);
    --sys-border-control: var(--ref-gray-400);
    --sys-ring-track: var(--ref-gray-500);    /* trilho do anel: 5,04 sup     */
    --sys-edge-contrast: 1px;
  }
}
@media (prefers-contrast: more) {
  :root[data-theme="dark"],
  [data-theme="dark"] {
    --sys-label-2: var(--ref-gray-300);
    --sys-separator: var(--ref-gray-500);
    --sys-border-control: var(--ref-gray-400);
    --sys-ring-track: var(--ref-gray-500);
    --sys-edge-contrast: 1px;
  }
}

/* ---- Cores forçadas (Alto contraste do Windows) -----------------------------
 * Anéis e glifos seguem o texto do sistema e o foco segue o realce. O estado
 * continua legível porque sempre há forma própria e frase. :root:root tem a
 * força dos blocos escuros, que de outro modo venceriam no :root.          */
@media (forced-colors: active) {
  :root:root,
  [data-theme] {
    --sys-focus: Highlight;
    --sys-overdue: CanvasText;  --sys-soon: CanvasText;  --sys-soon-fill: CanvasText;
    --sys-ok: CanvasText;  --sys-unknown: CanvasText;  --sys-unknown-strong: CanvasText;
    --sys-ring-track: GrayText;
  }
}

/* ---- TIPOGRAFIA -------------------------------------------------------------
 * Fonte do aparelho: SF no iPhone, iPad e Mac (troca Text/Display sozinha),
 * Inter Zelo no resto. Rampa do iOS no app, display da apple.com no site.
 * Pesos: só 400, 600 e 700.                                                */
:root {
  --sys-font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Zelo", "Segoe UI", Roboto, sans-serif;
  --sys-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Zelo", "Segoe UI", Roboto, sans-serif;
  /* SF Rounded só em número grande (como Saúde e Fitness). Fora da Apple cai na pilha normal. */
  --sys-font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter Zelo", "Segoe UI", Roboto, sans-serif;
  --sys-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Unidade de tipo: 1 px no tamanho padrão. No iOS acompanha o Dynamic Type
     (abaixo, só em html.z-app). No resto, o tamanho de fonte e o zoom.     */
  --u: calc(1rem / 16);
  --u-chrome: min(var(--u), 1.353px);  /* cromo para em XXXL (23/17)        */

  /* Tracking da Inter, em em: -0,0223 + 0,185 · e^(-0,1745 · px). No WebKit
     com a fonte do sistema o SF aplica o dele (--sys-track-on vira 0). Uso:
     letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));     */
  --sys-track-on: 1;

  /* Rampa do APP (iOS, tamanho "Grande"): peso tamanho/altura família */
  --sys-type-large-title:  700 calc(34 * var(--u)) / calc(41 / 34) var(--sys-font-display); --sys-track-large-title: -0.0218em; /* 34/41 nome do veículo, título de tela */
  --sys-type-title-1:      700 calc(28 * var(--u)) / calc(34 / 28) var(--sys-font-display); --sys-track-title-1: -0.0209em;     /* 28/34 */
  --sys-type-title-2:      700 calc(22 * var(--u)) / calc(28 / 22) var(--sys-font-display); --sys-track-title-2: -0.0183em;     /* 22/28 */
  --sys-type-title-3:      600 calc(20 * var(--u)) / calc(25 / 20) var(--sys-font-display); --sys-track-title-3: -0.0167em;     /* 20/25 */
  --sys-type-headline:     600 calc(17 * var(--u)) / calc(22 / 17) var(--sys-font-text);    --sys-track-headline: -0.0128em;    /* 17/22 */
  --sys-type-body:         400 calc(17 * var(--u)) / calc(22 / 17) var(--sys-font-text);    --sys-track-body: -0.0128em;        /* 17/22 */
  --sys-type-body-reading: 400 calc(17 * var(--u)) / calc(25 / 17) var(--sys-font-text);    --sys-track-body-reading: -0.0128em; /* 17/25 */
  --sys-type-callout:      400 calc(16 * var(--u)) / calc(21 / 16) var(--sys-font-text);    --sys-track-callout: -0.0110em;     /* 16/21 */
  --sys-type-subheadline:  400 calc(15 * var(--u)) / calc(20 / 15) var(--sys-font-text);    --sys-track-subheadline: -0.0088em; /* 15/20 */
  --sys-type-footnote:     400 calc(13 * var(--u)) / calc(18 / 13) var(--sys-font-text);    --sys-track-footnote: -0.0032em;    /* 13/18 */
  --sys-type-caption-1:    400 calc(12 * var(--u)) / calc(16 / 12) var(--sys-font-text);    --sys-track-caption-1: 0.0005em;    /* 12/16 */
  --sys-type-caption-2:    600 calc(11 * var(--u)) / calc(13 / 11) var(--sys-font-text);    --sys-track-caption-2: 0.0048em;    /* 11/13 */

  /* Números grandes: SF Rounded, sempre tabulares. O metric-xl tem teto de
     72 px (AX3 a AX5): min() sempre, igual ao padrão até --u 1,5.          */
  --sys-metric-xl-max: 72px;
  --sys-type-metric-xl: 700 min(calc(48 * var(--u)), var(--sys-metric-xl-max)) / calc(52 / 48) var(--sys-font-rounded); --sys-track-metric-xl: -0.0223em; /* 48/52 */
  --sys-type-metric-l:  700 calc(34 * var(--u)) / calc(38 / 34) var(--sys-font-rounded); --sys-track-metric-l: -0.0218em; /* 34/38 */
  --sys-type-metric-m:  600 calc(28 * var(--u)) / calc(32 / 28) var(--sys-font-rounded); --sys-track-metric-m: -0.0209em; /* 28/32 */
  --sys-type-metric-s:  600 calc(20 * var(--u)) / calc(24 / 20) var(--sys-font-rounded); --sys-track-metric-s: -0.0167em; /* 20/24 */

  /* Cromo: não cresce além de XXXL */
  --sys-type-tab-label: 600 calc(11 * var(--u-chrome)) / calc(13 / 11) var(--sys-font-text); --sys-track-tab-label: 0.0048em; /* 11/13 */
  --sys-type-bar-title: 600 calc(17 * var(--u-chrome)) / calc(22 / 17) var(--sys-font-text); --sys-track-bar-title: -0.0128em; /* 17/22 */

  /* Moeda e unidade junto de número grande: metade do corpo do valor, cinza,
     na linha de base (como no Wallet e no Saúde). Uma regra para métrica,
     campo herói e número de destaque do site. */
  --sys-unit-scale: 0.5em;

  /* Campo de formulário: nunca abaixo de 16 px (o iOS daria zoom ao focar). */
  --sys-field-font-size: max(16px, calc(17 * var(--u)));

  /* Rampa do SITE: display fluido de 375 a 1440 de largura. Intercepto em rem
     (cresce com o zoom) e razão máx./mín. ≤ 2,5 (1.4.4).                    */
  --sys-type-display-xxl:  700 clamp(3rem, 1.9437rem + 4.507vw, 6rem) / 1.04 var(--sys-font-display);          /* 48 → 96 herói */
  --sys-type-display-xl:   700 clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem) / 1.05 var(--sys-font-display);       /* 40 → 80 manchete de seção */
  --sys-type-display-l:    700 clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem) / 1.07 var(--sys-font-display);       /* 32 → 56 */
  --sys-type-site-title-1: 700 clamp(1.75rem, 1.4859rem + 1.1268vw, 2.5rem) / 1.1 var(--sys-font-display);    /* 28 → 40 */
  --sys-type-site-title-2: 600 clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem) / 1.125 var(--sys-font-display);     /* 24 → 32 */
  --sys-type-site-title-3: 600 clamp(1.3125rem, 1.2465rem + 0.2817vw, 1.5rem) / 1.19 var(--sys-font-display); /* 21 → 24 */
  --sys-type-lede:         400 clamp(1.1875rem, 1.0775rem + 0.4695vw, 1.5rem) / 1.4 var(--sys-font-text);     /* 19 → 24 introdução */
  --sys-type-eyebrow:      600 clamp(1.0625rem, 0.9745rem + 0.3756vw, 1.3125rem) / 1.2 var(--sys-font-text);  /* 17 → 21, um por página */
  --sys-type-stat:         700 clamp(3.5rem, 2.6197rem + 3.7559vw, 6rem) / 1 var(--sys-font-rounded);          /* 56 → 96 número de destaque */
  --sys-price-size:        clamp(2.5rem, 2.1479rem + 1.5023vw, 3.5rem);                                         /* 40 → 56 */
  --sys-type-price:        700 var(--sys-price-size) / 1 var(--sys-font-rounded);
  --sys-type-site-body-l:  400 clamp(1.0625rem, 1.0185rem + 0.1878vw, 1.1875rem) / 1.47 var(--sys-font-text); /* 17 → 19 guia, modelo */
  --sys-type-site-body:    400 calc(17 * var(--u)) / 1.47 var(--sys-font-text);
  --sys-type-site-small:   400 calc(14 * var(--u)) / 1.43 var(--sys-font-text);
  --sys-type-site-legal:   400 calc(12 * var(--u)) / 1.33 var(--sys-font-text);
  --sys-track-display: -0.0223em;     /* 32 a 96 px: a fórmula satura        */
  --sys-track-site-title: -0.0215em;  /* 21 a 40 px                         */
  --sys-track-lede: -0.0170em;
  --sys-track-eyebrow: -0.0128em;
  --sys-track-site-body: -0.0128em;
  --sys-track-site-small: -0.0062em;
  --sys-track-site-legal: 0em;
}
/* Dynamic Type, SÓ no app e SÓ no iOS. O site carrega este arquivo e não pode
 * herdar: com 1/17 o corpo do site cairia para 16 px no iPhone. E o Safari
 * do Mac não tem -webkit-touch-callout, onde -apple-system-body vale 13 px e
 * encolheria o app em 24%. O font: -apple-system-body mora na base.        */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  :root.z-app { --u: calc(1rem / 17); }
}
/* WebKit com a fonte do sistema: o SF já aplica o tracking por tamanho. */
@supports (font: -apple-system-body) {
  :root { --sys-track-on: 0; }
}

/* ---- ESPAÇO, MEDIDAS E GRADE ------------------------------------------------ */
:root {
  /* Escala base 4, ritmo 8. O nome é o valor. Única exceção: o fio de 0,5 px. */
  --sys-space-0: 0px;    --sys-space-2: 2px;    --sys-space-4: 4px;    --sys-space-6: 6px;
  --sys-space-8: 8px;    --sys-space-12: 12px;  --sys-space-16: 16px;  --sys-space-20: 20px;
  --sys-space-24: 24px;  --sys-space-32: 32px;  --sys-space-40: 40px;  --sys-space-48: 48px;
  --sys-space-64: 64px;  --sys-space-80: 80px;  --sys-space-96: 96px;  --sys-space-128: 128px;
  --sys-space-160: 160px;

  /* App */
  --sys-gutter: 16px;            /* 16 · 20 (≥ 410) · 24 (≥ 600) · 32 (≥ 1024), sempre com a área segura */
  --sys-cell-pad-x: 16px;  --sys-cell-pad-y: 12px;
  --sys-cell-min-1: 44px;        /* célula de uma linha, com ou sem ícone     */
  --sys-cell-min-2: 60px;        /* com subtítulo                             */
  --sys-row-tile: 30px;          /* tile colorido dos Ajustes                 */
  --sys-row-thumb-w: 64px;  --sys-row-thumb-h: 44px;      /* miniatura do veículo */
  --sys-row-thumb-w-lg: 88px;  --sys-row-thumb-h-lg: 58px; /* miniatura na folha Garagem */
  --sys-row-item-min: 68px;      /* linha de manutenção                       */
  --sys-row-item-inset: 68px;    /* recuo do fio: 16 + anel 40 + 12           */
  --sys-group-gap: 32px;         /* entre seções agrupadas                    */
  --sys-group-title-gap: 8px;    /* título da seção até a seção               */
  --sys-bar-h: 44px;             /* barra do topo, sem a área segura          */
  --sys-largetitle-h: 52px;      /* 3 + 41 + 8                                */
  --sys-tabbar-h: 62px;  --sys-tabbar-add: 62px;  --sys-tabbar-gap: 12px; /* cápsula, "+" e vão */
  --sys-tabbar-w: 360px;         /* largura da cápsula a partir de 600 (o menu do "+" se ancora nela) */
  --sys-sheet-header-h: 56px;
  --sys-rail-w: 80px;            /* ≥ 1024 o nav.tabbar vira trilho (≤ 96, e2e:2561) */
  --sys-rail-inset: 8px;
  --sys-rail-item-h: 56px;  --sys-rail-add: 56px;   /* item do trilho (72 de largura: o trilho menos 4 + 4) e o "+" */
  --sys-rail-offset: calc(var(--sys-rail-w) + 2 * var(--sys-rail-inset)); /* padding-left do body: 96 */
  --sys-sidebar-w: 248px;        /* expansão opcional do trilho, recolhida por padrão */
  --sys-inspector-w: 440px;      /* painel: 480 a partir de 1680              */
  --sys-inspector-max: 540px;    /* teto (e2e:2546): nunca passar             */
  --sys-dialog-w: 600px;         /* diálogo central (600 a 1023): min(600px, 100vw - 64px) */
  --sys-card-dialog-w: 560px;    /* onboarding e barreiras no notebook        */
  --sys-plans-dialog-w: 960px;   /* Planos no notebook                        */
  --sys-popover-w: 320px;
  --sys-navbar-safe-top: env(safe-area-inset-top, 0px); /* 0 com a barra de nova versão */
  --sys-toast-top: calc(max(env(safe-area-inset-top, 0px), var(--update-bar-h, 0px)) + 8px);
  --sys-site-nav-h: 48px;  --sys-site-localnav-h: 52px;
  /* Medidos por JS (componente nunca declara valor fixo para eles):
     --topbar-h (44 + área segura), --tabbar-h-medida, --update-bar-h,
     --teclado-h, --i (índice da cascata).                                   */

  /* Controles */
  --sys-target: 44px;            /* alvo mínimo nos dois eixos, sempre, inclusive com mouse */
  --sys-control-l: 50px;         /* botão principal de folha e onboarding     */
  --sys-control-m: 44px;         /* botão comum, segmentado                   */
  --sys-control-s-visual: 32px;  /* botão S: desenho de 32 numa caixa de 44   */
  --sys-field-h: 50px;           /* campo solto                               */
  --sys-focus-width: 2px;  --sys-focus-offset: 2px;  --sys-focus-offset-inset: -2px; /* -2 dentro de seção agrupada */
  --sys-link-underline-offset: 0.18em;

  /* Site */
  --sys-site-gutter:    clamp(1rem, 0.2958rem + 3.0047vw, 3rem);       /* 16 → 48  */
  --sys-site-section:   clamp(4rem, 1.8873rem + 9.0141vw, 10rem);      /* 64 → 160 */
  --sys-site-block:     clamp(2rem, 1.2958rem + 3.0047vw, 4rem);       /* 32 → 64  */
  --sys-site-title-gap: clamp(0.75rem, 0.5739rem + 0.7512vw, 1.25rem); /* 12 → 20  */
  --sys-site-cols: 4;  --sys-site-col-gap: 16px;   /* 8 e 24 a partir de 600, 12 a partir de 1024 */

  /* Larguras */
  --sys-measure-text:  692px;    /* coluna de leitura do site (≈ 68 caracteres a 17 px) */
  --sys-measure-site:  980px;    /* títulos, tabela, comparação               */
  --sys-measure-wide:  1200px;   /* ladrilhos, preço, galeria, modelos        */
  --sys-measure-stage: 1680px;   /* palco de borda a borda (teto)             */
  --sys-measure-app:   720px;    /* coluna de conteúdo do app                 */

  /* PONTOS DE QUEBRA. CSS não aceita var() em @media: escreva o número. Os
     tokens servem ao JS (matchMedia) e à leitura. O check-ds só aceita:
       largura   min-width 360 · 410 · 600 · 1024 · 1280 · 1680 (celular primeiro)
                 max-width 359.98 (só ajuste de componente)
       altura    (max-height: 500px) and (orientation: landscape)  "baixo"
       ponteiro  (hover: hover) and (pointer: fine)                só hover
       e as preferências: prefers-color-scheme, prefers-reduced-motion,
       prefers-reduced-transparency, prefers-contrast, forced-colors,
       display-mode: standalone.
     Componente não usa @media: usa @container em 20 · 30 · 45 · 64 rem.  */
  --sys-bp-estreito: 359.98px;  --sys-bp-celular: 360px;  --sys-bp-largo-celular: 410px;
  --sys-bp-regular: 600px;  --sys-bp-amplo: 1024px;  --sys-bp-amplo-mais: 1280px;  --sys-bp-teto: 1680px;
  --sys-cq-20: 20rem;  --sys-cq-30: 30rem;  --sys-cq-45: 45rem;  --sys-cq-64: 64rem;
}
@media (min-width: 410px)  { :root { --sys-gutter: 20px; } }
@media (min-width: 600px)  { :root { --sys-gutter: 24px;  --sys-site-cols: 8;  --sys-site-col-gap: 24px; } }
@media (min-width: 1024px) { :root { --sys-gutter: 32px;  --sys-site-cols: 12; } }
@media (min-width: 1680px) { :root { --sys-inspector-w: 480px; } }
/* Barra de nova versão (js/app-update.js liga a classe e grava --update-bar-h):
 * ela já cobre a área segura de cima, então a barra do topo não soma de novo. */
html.com-barra-de-atualizacao { --sys-navbar-safe-top: 0px; }

/* ---- RAIOS (concêntrico: o de dentro = o de fora - respiro, mínimo 4) ----- */
:root {
  --sys-radius-4: 4px;    --sys-radius-6: 6px;    --sys-radius-8: 8px;    --sys-radius-12: 12px;
  --sys-radius-16: 16px;  --sys-radius-20: 20px;  --sys-radius-28: 28px;  --sys-radius-38: 38px;  --sys-radius-full: 999px;
  --sys-radius-bar:     var(--sys-radius-4);   /* ponta de barra de gráfico      */
  --sys-radius-tag:     var(--sys-radius-8);   /* miniatura, foto, tile de 30, polegar */
  --sys-radius-control: var(--sys-radius-12);  /* campo, segmentado, código      */
  --sys-radius-card:    var(--sys-radius-20);  /* seção agrupada, bloco-resumo, dica, popover, menu, bolha */
  --sys-radius-sheet:   var(--sys-radius-28);  /* alerta, diálogo, ladrilho do site, palco */
  --sys-radius-sheet-phone: var(--sys-radius-38); /* cantos de cima da folha no celular (iOS 26: concêntrico ao aparelho) */
  /* Canto contínuo onde houver corner-shape: superelipse de expoente 3,43 com
     raio 1,6 vez = mesma profundidade a 45° do círculo r e extensão de 1,6 r
     na aresta (o "smoothing 60%" do iOS). K = log2(3,43) = 1,78.            */
  --sys-corner-k: superellipse(1.78);
  --sys-corner-factor: 1.6;
}

/* ---- CAMADAS (z-index) ------------------------------------------------------ */
:root {
  --sys-z-base: 0;      /* conteúdo                                         */
  --sys-z-raised: 1;    /* célula pressionada, polegar                      */
  --sys-z-sticky: 10;   /* cabeçalho que gruda, barra local do site         */
  --sys-z-header: 20;   /* barra do topo                                    */
  --sys-z-header-view: 21; /* barra própria da vista (chat), por cima da do topo */
  --sys-z-nav: 30;      /* abas, "+", trilho, navegação do site             */
  --sys-z-sheet: 50;    /* folha, painel, diálogo (#modal)                  */
  --sys-z-alert: 55;    /* alerta e folha de ação (#z-alerta, por cima da folha) */
  --sys-z-popover: 60;  /* menu, popover                                    */
  --sys-z-toast: 70;    /* toast                                            */
  --sys-z-banner: 80;   /* barra "nova versão"                              */
  --sys-z-skip: 90;     /* "Pular para o conteúdo"                          */
}

/* ---- ÍCONES (Phosphor usado como SF Symbols) ------------------------------- */
:root {
  --sys-icon-inline: 1.18em;   /* no conteúdo: cresce com o texto            */
  /* ESCALA FECHADA: só estes nove, mais o inline. Até 16 bold, 17 a 32 regular. */
  --sys-icon-13: 13px;  --sys-icon-16: 16px;  --sys-icon-18: 18px;  --sys-icon-20: 20px;
  --sys-icon-22: 22px;  --sys-icon-26: 26px;  --sys-icon-34: 34px;  --sys-icon-48: 48px;
  --sys-icon-64: 64px;
  --sys-icon-bar: 22px;        /* barra do topo, botão de ícone, toast, dica  */
  --sys-icon-tab: 26px;        /* cápsula de abas, trilho e "+"               */
  --sys-icon-ring: 20px;       /* dentro do anel de 40                        */
  --sys-icon-summary: 34px;    /* glifo de estado do bloco-resumo: o disco cheio do próprio glifo */
  --sys-icon-ring-l: 34px;     /* no anel L de 96 (cabeçalho da ficha)        */
  --sys-icon-empty: 48px;
}

/* ---- MOVIMENTO --------------------------------------------------------------
 * Mola do SwiftUI spring(duration d, bounce b), massa 1: k = (2π/d)²,
 * c = 4π(1 - b)/d, ζ = 1 - b (a mesma de js/movimento.js). Duração CSS = até
 * ficar a menos de 0,2% do destino. As curvas linear() saem da solução
 * analítica simplificada com erro ≤ 0,003 (conferido contra o movimento.js).
 * A forma só depende de b: quick, smooth e gentle usam a mesma curva.
 *
 *  nome    d     b     k      c      duração  99% em  pico   uso
 *  quick   0,25  0     631,7  50,27  337 ms   264     1,000  entrada de lista, saída, troca de ícone
 *  snappy  0,35  0,15  322,3  30,52  449 ms   249     1,006  soltar, switch, chip, lente, polegar, dígitos
 *  smooth  0,45  0     195,0  27,93  606 ms   475     1,000  folha, FLIP da lista
 *  bouncy  0,50  0,30  157,9  17,59  728 ms   523     1,046  sucesso: check, toast, distintivo
 *  gentle  0,70  0     80,6   17,95  942 ms   739     1,000  site, gráfico, anel ao aparecer   */
:root {
  --sys-spring-critical: linear(0, 0.005 1.2%, 0.019 2.5%, 0.046 4%, 0.084 5.7%, 0.163 8.5%, 0.362 15%, 0.459 18.3%, 0.551 21.8%, 0.628 25.2%, 0.694 28.5%, 0.753 32%, 0.804 35.7%, 0.846 39.5%, 0.887 44.2%, 0.919 49.2%, 0.945 54.7%, 0.964 60.8%, 0.978 67.5%, 0.988 75.5%, 1);
  --sys-spring-snappy:   linear(0, 0.005 1.3%, 0.023 2.8%, 0.054 4.5%, 0.098 6.3%, 0.19 9.5%, 0.412 16.3%, 0.51 19.5%, 0.608 23%, 0.689 26.3%, 0.755 29.5%, 0.814 32.8%, 0.862 36.2%, 0.902 39.7%, 0.937 43.8%, 0.965 48.3%, 0.984 53.2%, 0.997 58.8%, 1.004 64.8%, 1.006 72.3%, 1);
  --sys-spring-bouncy:   linear(0, 0.007 1.3%, 0.027 2.7%, 0.061 4.2%, 0.11 5.8%, 0.157 7.2%, 0.22 8.8%, 0.476 15%, 0.587 17.8%, 0.693 20.8%, 0.78 23.7%, 0.849 26.3%, 0.908 29.2%, 0.957 32.2%, 0.993 35.2%, 1.017 38%, 1.033 41%, 1.043 44.2%, 1.046 47.8%, 1.042 53.3%, 1.015 68%, 1.005 76.8%, 0.999 88.8%, 1);
  /* Parâmetros para o JS (js/movimento.js lê uma vez por getComputedStyle) */
  --sys-spring-quick-d: 0.25;   --sys-spring-quick-b: 0;
  --sys-spring-snappy-d: 0.35;  --sys-spring-snappy-b: 0.15;
  --sys-spring-smooth-d: 0.45;  --sys-spring-smooth-b: 0;
  --sys-spring-bouncy-d: 0.5;   --sys-spring-bouncy-b: 0.3;
  --sys-spring-gentle-d: 0.7;   --sys-spring-gentle-b: 0;

  /* Curva e duração por mola (o componente lê o par) */
  --sys-ease-quick:  var(--sys-spring-critical);  --sys-dur-quick:  337ms;
  --sys-ease-snappy: var(--sys-spring-snappy);    --sys-dur-snappy: 449ms;
  --sys-ease-smooth: var(--sys-spring-critical);  --sys-dur-smooth: 606ms;
  --sys-ease-bouncy: var(--sys-spring-bouncy);    --sys-dur-bouncy: 728ms;
  --sys-ease-gentle: var(--sys-spring-critical);  --sys-dur-gentle: 942ms;

  /* Fora da família de molas */
  --sys-ease-press: cubic-bezier(0.2, 0, 0, 1);      --sys-dur-press: 90ms;  /* afundar: imediato */
  --sys-ease-fade:  cubic-bezier(0.2, 0, 0, 1);      --sys-dur-fade: 150ms;  /* fundir            */
  --sys-dur-fade-l: 220ms;       /* fusão longa: véu, volta do realce da célula */
  --sys-ease-exit:  cubic-bezier(0.3, 0, 0.8, 0.15); --sys-dur-exit: 200ms;  /* sair: acelera e some */
  --sys-dur-exit-fast: 100ms;    /* conteúdo do toast sai antes da ilha        */
  --sys-ease-exit-sheet: var(--sys-spring-critical); --sys-dur-exit-sheet: 300ms; /* o JS lê */
  --sys-ease-panel: var(--sys-ease-quick);  --sys-dur-panel: var(--sys-dur-quick); /* painel: quick deixa 0,14 px aos 300 ms (e2e:2546) */
  --sys-dur-vt-max: 300ms;       /* teto da View Transition do SITE (o app não usa) */
  --sys-dur-shake: 320ms;        /* tremida de erro de envio                   */
  --sys-dur-instant: 0ms;        /* nunca muda: é o que o movimento reduzido aplica */
  --sys-ease-steps: steps(8);    /* indicador de atividade: 8 traços, 8 passos por volta */
  --sys-dur-spin: 800ms;         /* uma volta do indicador de atividade       */

  /* Atrasos e cascatas */
  --sys-stagger: 25ms;  --sys-stagger-max: 7;  /* entrada de lista: 7 × 25 + 337 = 512 ms */
  --sys-stagger-digit: 30ms;     /* contador que rola, por posição a partir da direita */
  --sys-dur-row-highlight-delay: 80ms; /* realce da célula dentro de rolagem    */
  --sys-delay-sheet-exit-done: 240ms;  /* "Marcar como feito": a folha espera o check */
  --sys-delay-toast-content: 80ms;     /* glifo e frase entram depois da ilha  */
  --sys-delay-feito-toast: 300ms;  --sys-delay-feito-ring: 360ms;  --sys-delay-feito-flip: 520ms;
  --sys-delay-hero-device: 100ms;  --sys-delay-hero-rows: 400ms;   /* herói do site */
  --sys-dur-safety: 60ms;        /* teto do animationend = duração + este      */

  /* Tempos de permanência (não são movimento: o reduzido não mexe) */
  --sys-toast-hold: 2600ms;  --sys-toast-hold-undo: 5000ms;
  --sys-feito-glyph-hold: 900ms; /* o anel mostra feito-circulo e volta       */

  /* Distâncias e escalas: SEMPRE multiplicadas por --motion (0 no reduzido) */
  --motion: 1;
  --sys-dist-enter:  calc(12px * var(--motion));   /* entrada de lista       */
  --sys-dist-step:   calc(24px * var(--motion));   /* passo do onboarding    */
  --sys-dist-panel:  calc(32px * var(--motion));   /* painel do notebook     */
  --sys-dist-reveal: calc(40px * var(--motion));   /* revelação no site      */
  --sys-press-scale:      calc(1 - 0.03 * var(--motion));  /* botão, chip: .97      */
  --sys-press-scale-card: calc(1 - 0.02 * var(--motion));  /* bloco, ladrilho: .98  */
  --sys-press-scale-icon: calc(1 - 0.08 * var(--motion));  /* ícone da aba: .92     */
  --sys-enter-scale:      calc(1 - 0.15 * var(--motion));  /* ícone ativo: .85 → 1  */
  --sys-press-opacity-bar: 0.35;    /* botão de ícone e glifo sem fundo, na hora (o texto escurece em vez de apagar) */
}
/* Sem linear() (Safari < 17.2, Chrome < 113). Com var(), declarar o
 * cubic-bezier antes NÃO funciona: o inválido só aparece no computado. */
@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --sys-spring-critical: cubic-bezier(0.2, 0.8, 0.2, 1);
    --sys-spring-snappy:   cubic-bezier(0.25, 1.1, 0.4, 1);
    --sys-spring-bouncy:   cubic-bezier(0.34, 1.4, 0.64, 1);
    --sys-ease-exit-sheet: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

} /* fim @layer tokens */


/* =============================================================================
 * RESET: moderno e mínimo. Perde para tudo, inclusive o legado.
 * ============================================================================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent; /* a pressão é do componente (:active) */
    overflow-wrap: break-word;                /* palavra longa não rola a tela de lado */
  }

  :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre) { margin: 0; }
  :where(ul, ol)[role="list"] { margin: 0; padding: 0; list-style: none; }

  :where(img, picture, video, canvas) { display: block; max-inline-size: 100%; }
  :where(img, video) { block-size: auto; }
  :where(svg) { max-inline-size: 100%; }   /* continua em linha: o .z-ic vive no texto */

  :where(input, button, textarea, select) {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
  }
  :where(textarea) { resize: vertical; }
  :where(fieldset) { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  :where(table) { border-collapse: collapse; }
  :where(a, button, input, label, select, summary, textarea, [role="button"]) { touch-action: manipulation; }

  /* [hidden] sempre vence: o único !important do sistema. Em @layer reset o
     !important é o mais forte de todas as camadas. */
  [hidden] { display: none !important; }
}


/* =============================================================================
 * BASE: elementos HTML. Vence o legado (ordem das camadas).
 * ============================================================================= */
@layer base {
  /* Cor do texto e dos controles nativos. Repetida em toda subárvore com tema:
     color e accent-color herdam o valor JÁ CALCULADO do pai, então o tema de
     fora vazaria para dentro de um [data-theme] sem esta linha. */
  :root,
  [data-theme] {
    color: var(--sys-label);
    accent-color: var(--sys-tint);
    caret-color: var(--sys-tint);
  }

  /* Fundo opaco na raiz e no corpo (a sonda de contraste sobe até o primeiro
     opaco). Site: liso. App: agrupado. Subárvore com tema pinta o próprio. */
  html, body { background-color: var(--sys-bg-plain); }
  html.z-app, html.z-app body { background-color: var(--sys-bg); }
  [data-theme]:not(:root) { background-color: var(--sys-bg-plain); }
  .z-app [data-theme]:not(:root) { background-color: var(--sys-bg); }

  body {
    font: var(--sys-type-site-body);
    letter-spacing: calc(var(--sys-track-site-body) * var(--sys-track-on));
    font-optical-sizing: auto;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  html.z-app body {
    font: var(--sys-type-body);
    letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  }

  /* App: nada passa da borda (o painel entra pela direita) e, instalado, o
     fundo não puxa para atualizar. */
  html.z-app { overflow-x: clip; }
  @media (display-mode: standalone) {
    html { overscroll-behavior-y: none; }
  }

  /* Dynamic Type: só no app e só no iOS (o porquê está no token --u). */
  @supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
    html.z-app { font: -apple-system-body; }
  }

  /* Títulos equilibrados, parágrafos sem viúva. */
  :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
  :where(p, li, dd, figcaption, blockquote) { text-wrap: pretty; }

  /* Campo nunca abaixo de 16 px (contrato da bancada e zoom do iOS). */
  :where(input, select, textarea) { font-size: var(--sys-field-font-size); }

  /* Link: a tinta da marca, sublinhado fino (no escuro o verde contra o texto
     dá 1,81: só a cor não distinguiria o link, 1.4.1). */
  a {
    color: var(--sys-tint);
    text-decoration-thickness: from-font;
    text-underline-offset: var(--sys-link-underline-offset);
    text-decoration-skip-ink: auto;
  }
  @media (hover: hover) and (pointer: fine) {
    a:hover { color: var(--sys-tint-hover); }
  }

  /* Site: mão no que se toca. App: seta, como app de Mac (só o link tem mão). */
  html:not(.z-app) :where(button, summary, select, [role="button"]) { cursor: pointer; }

  ::selection { background-color: var(--sys-tint-wash-pressed); }

  /* Foco visível: anel de 2 com afastamento 2 (5,13 no branco, 4,23 no fill,
     8,62 no escuro). Componente dentro de seção agrupada troca o afastamento
     para --sys-focus-offset-inset. Nunca outline: none sem substituto. */
  :focus-visible {
    outline: var(--sys-focus-width) solid var(--sys-focus);
    outline-offset: var(--sys-focus-offset);
  }

  /* Rolagem suave só no site e só sem movimento reduzido. No app o scrollTo
     da troca de aba é instantâneo (contrato). */
  html:not(.z-app) { scroll-padding-block-start: var(--sys-site-nav-h); }
  @media (prefers-reduced-motion: no-preference) {
    html:not(.z-app) { scroll-behavior: smooth; }
  }
}


/* =============================================================================
 * LAYOUT: primitivas de composição. Espaço só pela escala. Container queries
 * só em 20 · 30 · 45 · 64 rem.
 * ============================================================================= */
@layer layout {
  /* Contêineres declarados (só estes, só inline-size; size prenderia a
     altura). Precisam de largura própria: um contêiner com largura pelo
     conteúdo (flex sem flex-grow, inline-block) mede zero. */
  main.content > section { container: vista / inline-size; }
  #modal-content         { container: folha / inline-size; }
  .z-group               { container: grupo / inline-size; }
  /* (o ladrilho do site, .z-tile, declara o contêiner dele no zelo-site.css) */

  /* Pilha vertical. --cmp-gap é declarado em cada primitiva, então uma pilha
     dentro de outra não herda o vão da de fora. */
  .z-stack {
    --cmp-gap: var(--sys-space-16);
    display: flex;
    flex-direction: column;
    gap: var(--cmp-gap);
  }

  /* Fileira que quebra (chips, ações, metadados). */
  .z-cluster {
    --cmp-gap: var(--sys-space-8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cmp-gap);
  }
  .z-cluster > * { min-inline-size: 0; }

  /* Fileira que vira coluna quando o contêiner é estreito (a ação da linha
     desce para baixo do texto abaixo de 20rem). */
  .z-reflow {
    --cmp-gap: var(--sys-space-12);
    display: flex;
    align-items: center;
    gap: var(--cmp-gap);
  }
  .z-reflow > * { min-inline-size: 0; }
  @container (width < 20rem) {
    .z-reflow:not(.z-reflow--30) { flex-direction: column; align-items: stretch; }
  }
  @container (width < 30rem) {
    .z-reflow--30 { flex-direction: column; align-items: stretch; }
  }

  /* Grade. Colunas por --cmp-grid-cols, sempre minmax(0, 1fr) (nada estoura). */
  .z-grid {
    --cmp-gap: var(--sys-space-16);
    --cmp-grid-cols: 1;
    --cmp-grid-min: var(--sys-cq-20);
    display: grid;
    grid-template-columns: repeat(var(--cmp-grid-cols), minmax(0, 1fr));
    gap: var(--cmp-gap);
  }
  .z-grid--2 { --cmp-grid-cols: 2; }   /* bloco-resumo 2 × 2 */
  /* Tantas colunas de no mínimo --cmp-grid-min quantas couberem. Funciona sem
     contêiner (site). */
  .z-grid--fit { grid-template-columns: repeat(auto-fill, minmax(min(var(--cmp-grid-min), 100%), 1fr)); }
  /* Pelo contêiner mais próximo: 1 → 2 (30rem) → 3 (45rem) → 4 (64rem). */
  @container (width >= 30rem) { .z-grid--auto { --cmp-grid-cols: 2; } }
  @container (width >= 45rem) { .z-grid--auto { --cmp-grid-cols: 3; } .z-grid--split { --cmp-grid-cols: 2; } }
  @container (width >= 64rem) { .z-grid--auto { --cmp-grid-cols: 4; } }
  /* Grade do site: 4 colunas (< 600), 8 (≥ 600), 12 (≥ 1024). */
  .z-grid--site {
    grid-template-columns: repeat(var(--sys-site-cols), minmax(0, 1fr));
    column-gap: var(--sys-site-col-gap);
  }

  /* Ritmo vertical de texto corrido (FAQ, guia, folha informativa). */
  .z-flow { --cmp-flow-space: var(--sys-space-16); }
  .z-flow > * + * { margin-block-start: var(--cmp-flow-space); }

  /* Medida: coluna centrada com teto de largura. */
  .z-measure {
    --cmp-measure: var(--sys-measure-text);
    max-inline-size: var(--cmp-measure);
    margin-inline: auto;
  }
  .z-measure--app   { --cmp-measure: var(--sys-measure-app); }
  .z-measure--site  { --cmp-measure: var(--sys-measure-site); }
  .z-measure--wide  { --cmp-measure: var(--sys-measure-wide); }
  .z-measure--stage { --cmp-measure: var(--sys-measure-stage); }

  /* Margem lateral segura: a do sistema ou a área segura do aparelho (notch
     e ilha no celular deitado), a maior, lado a lado. */
  .z-gutter {
    padding-inline-start: max(var(--sys-gutter), env(safe-area-inset-left, 0px));
    padding-inline-end:   max(var(--sys-gutter), env(safe-area-inset-right, 0px));
  }
  .z-gutter--site {
    padding-inline-start: max(var(--sys-site-gutter), env(safe-area-inset-left, 0px));
    padding-inline-end:   max(var(--sys-site-gutter), env(safe-area-inset-right, 0px));
  }

  /* Vão das primitivas pela escala (depois delas: vence o padrão). */
  .z-gap-0  { --cmp-gap: var(--sys-space-0); }
  .z-gap-4  { --cmp-gap: var(--sys-space-4); }
  .z-gap-8  { --cmp-gap: var(--sys-space-8); }
  .z-gap-12 { --cmp-gap: var(--sys-space-12); }
  .z-gap-16 { --cmp-gap: var(--sys-space-16); }
  .z-gap-20 { --cmp-gap: var(--sys-space-20); }
  .z-gap-24 { --cmp-gap: var(--sys-space-24); }
  .z-gap-32 { --cmp-gap: var(--sys-space-32); }
  .z-gap-48 { --cmp-gap: var(--sys-space-48); }
}


/* =============================================================================
 * UTILITÁRIOS: uma função por classe. Vencem todas as camadas, então o que é
 * ajuste de componente entra por variável (--cmp-ic-size, --r), nunca
 * competindo com estas regras.
 * ============================================================================= */
@layer utilitarios {
  /* Ícone (js/icones.js devolve <svg class="z-ic" fill="currentColor">). No
     conteúdo mede 1,18 em e cresce com o texto, como o SF Symbol. No cromo o
     tamanho vem da escala fechada: pela classe .z-ic--N ou pelo componente,
     que põe --cmp-ic-size (herda para os ícones de dentro). A cor é sempre
     currentColor. O .z-ic não força fill: os desenhos próprios são de traço. */
  .z-ic {
    inline-size: var(--cmp-ic-size, var(--sys-icon-inline));
    block-size: var(--cmp-ic-size, var(--sys-icon-inline));
    vertical-align: var(--cmp-ic-align, -0.2em);
    flex: none;
  }
  .z-ic--13 { --cmp-ic-size: var(--sys-icon-13); }
  .z-ic--16 { --cmp-ic-size: var(--sys-icon-16); }
  .z-ic--18 { --cmp-ic-size: var(--sys-icon-18); }
  .z-ic--20 { --cmp-ic-size: var(--sys-icon-20); }
  .z-ic--22 { --cmp-ic-size: var(--sys-icon-22); }
  .z-ic--26 { --cmp-ic-size: var(--sys-icon-26); }
  .z-ic--34 { --cmp-ic-size: var(--sys-icon-34); }
  .z-ic--48 { --cmp-ic-size: var(--sys-icon-48); }
  .z-ic--64 { --cmp-ic-size: var(--sys-icon-64); }

  /* Só para leitor de tela (estado da linha, glifo guardado no texto). O
     .status da linha de manutenção é gancho do app: recebe o mesmo recorte. */
  .z-sr, .z-item__main .status {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* "Pular para o conteúdo": fora da tela por cima até receber foco. Mede 44
     o tempo todo (nunca 1 px recortado: a sonda de alvo mede link visível). */
  .z-skip {
    position: fixed;
    inset-inline-start: max(var(--sys-gutter), env(safe-area-inset-left, 0px));
    inset-block-end: 100%;
    z-index: var(--sys-z-skip);
    display: inline-flex;
    align-items: center;
    min-block-size: var(--sys-target);
    min-inline-size: var(--sys-target);
    padding-inline: var(--sys-space-16);
    border-radius: var(--sys-radius-full);
    background-color: var(--sys-island);
    color: var(--sys-on-island);
    font: var(--sys-type-headline);
    letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
    text-decoration: none;
  }
  .z-skip:is(:focus, .is-focused) {
    inset-block-start: max(env(safe-area-inset-top, 0px), var(--sys-space-8));
    inset-block-end: auto;
  }
  .z-skip:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset); }

  /* Rampa do APP. O font zera font-variant-numeric: o .z-num vem depois. */
  .z-type-large-title { font: var(--sys-type-large-title); letter-spacing: calc(var(--sys-track-large-title) * var(--sys-track-on)); text-wrap: balance; }
  .z-type-title-1     { font: var(--sys-type-title-1);     letter-spacing: calc(var(--sys-track-title-1) * var(--sys-track-on));     text-wrap: balance; }
  .z-type-title-2     { font: var(--sys-type-title-2);     letter-spacing: calc(var(--sys-track-title-2) * var(--sys-track-on));     text-wrap: balance; }
  .z-type-title-3     { font: var(--sys-type-title-3);     letter-spacing: calc(var(--sys-track-title-3) * var(--sys-track-on));     text-wrap: balance; }
  .z-type-headline    { font: var(--sys-type-headline);    letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on)); }
  .z-type-body        { font: var(--sys-type-body);        letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on)); }
  .z-type-body-reading { font: var(--sys-type-body-reading); letter-spacing: calc(var(--sys-track-body-reading) * var(--sys-track-on)); text-wrap: pretty; }
  .z-type-callout     { font: var(--sys-type-callout);     letter-spacing: calc(var(--sys-track-callout) * var(--sys-track-on)); }
  .z-type-subheadline { font: var(--sys-type-subheadline); letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on)); }
  .z-type-footnote    { font: var(--sys-type-footnote);    letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on)); }
  .z-type-caption-1   { font: var(--sys-type-caption-1);   letter-spacing: calc(var(--sys-track-caption-1) * var(--sys-track-on)); }
  .z-type-caption-2   { font: var(--sys-type-caption-2);   letter-spacing: calc(var(--sys-track-caption-2) * var(--sys-track-on)); }
  .z-type-tab-label   { font: var(--sys-type-tab-label);   letter-spacing: calc(var(--sys-track-tab-label) * var(--sys-track-on)); }
  .z-type-bar-title   { font: var(--sys-type-bar-title);   letter-spacing: calc(var(--sys-track-bar-title) * var(--sys-track-on)); }

  /* Métricas: SF Rounded e números tabulares, sempre. */
  .z-type-metric-xl { font: var(--sys-type-metric-xl); letter-spacing: calc(var(--sys-track-metric-xl) * var(--sys-track-on)); font-variant-numeric: tabular-nums; }
  .z-type-metric-l  { font: var(--sys-type-metric-l);  letter-spacing: calc(var(--sys-track-metric-l) * var(--sys-track-on));  font-variant-numeric: tabular-nums; }
  .z-type-metric-m  { font: var(--sys-type-metric-m);  letter-spacing: calc(var(--sys-track-metric-m) * var(--sys-track-on));  font-variant-numeric: tabular-nums; }
  .z-type-metric-s  { font: var(--sys-type-metric-s);  letter-spacing: calc(var(--sys-track-metric-s) * var(--sys-track-on));  font-variant-numeric: tabular-nums; }

  /* Rampa do SITE. */
  .z-type-display-xxl  { font: var(--sys-type-display-xxl);  letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on)); text-wrap: balance; hanging-punctuation: first; }
  .z-type-display-xl   { font: var(--sys-type-display-xl);   letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on)); text-wrap: balance; }
  .z-type-display-l    { font: var(--sys-type-display-l);    letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on)); text-wrap: balance; }
  .z-type-site-title-1 { font: var(--sys-type-site-title-1); letter-spacing: calc(var(--sys-track-site-title) * var(--sys-track-on)); text-wrap: balance; }
  .z-type-site-title-2 { font: var(--sys-type-site-title-2); letter-spacing: calc(var(--sys-track-site-title) * var(--sys-track-on)); text-wrap: balance; }
  .z-type-site-title-3 { font: var(--sys-type-site-title-3); letter-spacing: calc(var(--sys-track-site-title) * var(--sys-track-on)); text-wrap: balance; }
  .z-type-lede         { font: var(--sys-type-lede);         letter-spacing: calc(var(--sys-track-lede) * var(--sys-track-on)); text-wrap: pretty; }
  .z-type-eyebrow      { font: var(--sys-type-eyebrow);      letter-spacing: calc(var(--sys-track-eyebrow) * var(--sys-track-on)); }
  .z-type-stat         { font: var(--sys-type-stat);         letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on)); font-variant-numeric: tabular-nums; }
  .z-type-price        { font: var(--sys-type-price);        letter-spacing: calc(var(--sys-track-display) * var(--sys-track-on)); font-variant-numeric: tabular-nums; }
  .z-type-site-body-l  { font: var(--sys-type-site-body-l);  letter-spacing: calc(var(--sys-track-site-body) * var(--sys-track-on)); text-wrap: pretty; }
  .z-type-site-body    { font: var(--sys-type-site-body);    letter-spacing: calc(var(--sys-track-site-body) * var(--sys-track-on)); text-wrap: pretty; }
  .z-type-site-small   { font: var(--sys-type-site-small);   letter-spacing: calc(var(--sys-track-site-small) * var(--sys-track-on)); }
  .z-type-site-legal   { font: var(--sys-type-site-legal);   letter-spacing: calc(var(--sys-track-site-legal) * var(--sys-track-on)); }

  /* Depois dos tipos, para vencer o font no mesmo elemento. */
  .z-em  { font-weight: 600; }                     /* ênfase: 400 vira 600 */
  .z-num { font-variant-numeric: tabular-nums; }   /* km, R$, litro, data, contagem, eixo */

  /* Canto contínuo onde o navegador tem corner-shape. O componente põe o raio
     em --cmp-r (padrão: o do cartão). Não vale em cápsula nem em campo. */
  .z-squircle { border-radius: var(--cmp-r, var(--sys-radius-card)); }
  @supports (corner-shape: superellipse(2)) {
    .z-squircle {
      corner-shape: var(--sys-corner-k);
      border-radius: calc(var(--cmp-r, var(--sys-radius-card)) * var(--sys-corner-factor));
    }
  }
}


/* =============================================================================
 * COMPONENTES · AÇÕES E ENTRADA
 * SISTEMA.md §9 (estados comuns), §10.1 (ações) e §10.2 (entrada).
 *
 * Regras desta parte (as mesmas do zelo.css inteiro):
 * - Valor só por token: --sys-* (a camada tokens deste arquivo) ou --cmp-* declarado no seletor
 *   raiz do componente. Medida sem token (14, 18, 30, 36…) mora num --cmp-.
 * - Fundo que leva texto é HEX opaco (via token). Translúcido só no vidro.
 * - Só transform e opacity animam. Cor de fundo e de texto trocam por
 *   transição curta (troca de pintura, §8.10). Distância e escala de
 *   entrada multiplicadas por --motion (zera no movimento reduzido).
 * - Estados de §9, a MESMA convenção em todo componente interativo (as duas
 *   metades deste arquivo e o zelo-site.css; o check-ds reprova :active sem
 *   .is-pressed e :focus sem .is-focused):
 *     hover        X:hover dentro de (hover: hover) and (pointer: fine), e
 *                  X.is-hover fora (o guia força o estado)
 *     pressionado  X:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed)
 *     foco         X:is(:focus-visible, .is-focused)
 *     desabilitado X:is(:disabled, [aria-disabled="true"]), com --sys-label-disabled
 *   e ainda selecionado, carregando (aria-busy) e erro (aria-invalid).
 *   Desabilitado nunca usa opacity, nem --sys-label-3.
 * - Alvo 44 × 44 nos dois eixos. Peça que se vê menor (botão S, chip,
 *   fechar, caixa de marcar, interruptor) fica dentro de uma caixa de 44:
 *   borda transparente com background-clip, ou pseudo-elemento.
 * - Gancho de teste (.btn, .chip, .seg, .combo, .field…) continua no
 *   markup AO LADO da classe z-. O visual vem da z-; o gancho só entra
 *   aqui quando é ele que diz o ESTADO (.chip-active, .seg-on,
 *   .combo-active, .combo-sel, .combo-off, .field-read), sempre composto
 *   com a z- (assim o legado que ainda não migrou não muda de cara).
 * ============================================================================= */

@layer componentes {

/* =============================================================================
 * §10.1 BOTÃO  .z-btn
 * Anatomia: [ícone opcional, vão 6] rótulo (.z-btn__label). Sempre cápsula.
 * Variantes: --filled (padrão) · --tinted · --gray · --plain ·
 *   --destructive · --destructive-plain · --on-dark (só a seção preta do site)
 * Tamanhos: --l 50 · (M) 44 · --s caixa 44 com desenho 32 · --xl 56 (herói)
 * O componente lê só --cmp-btn-*; variante e tamanho trocam os --cmp-.
 * Carregando: aria-busy="true" + um .z-spinner filho e "Salvando" em .z-sr.
 * O rótulo vai a opacidade 0 (continua na árvore de acessibilidade, então o
 * botão não perde o nome, e a largura não pula).
 * Rótulo longo QUEBRA em linhas equilibradas (texto grande, tela de 320):
 * nunca reticências, que escondem o que o botão faz.
 * ============================================================================= */
.z-btn {
  --cmp-btn-h: var(--sys-control-m);
  --cmp-btn-pad-x: 18px;
  --cmp-btn-pad-y: var(--sys-space-6);        /* respiro do texto grande (o rótulo não quebra) */
  --cmp-btn-inset: 0px;                       /* borda transparente: desenho menor que a caixa */
  --cmp-btn-icon: var(--sys-icon-18);
  --cmp-btn-radius: var(--sys-radius-full);
  --cmp-btn-bg: var(--sys-tint);
  --cmp-btn-fg: var(--sys-on-tint);
  --cmp-btn-bg-hover: var(--sys-tint-hover);
  --cmp-btn-fg-hover: var(--cmp-btn-fg);
  --cmp-btn-fg-pressed: var(--cmp-btn-fg);
  --cmp-btn-bg-pressed: var(--sys-tint-pressed);
  --cmp-btn-press-scale: var(--sys-press-scale);
  --cmp-btn-press-opacity: 1;
  --cmp-btn-focus-offset: var(--sys-focus-offset);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sys-space-6);
  box-sizing: border-box;
  min-block-size: var(--cmp-btn-h);
  /* auto: numa fileira (flex) o botão não fica mais estreito que a maior
     palavra do rótulo, e esse mínimo para no max-inline-size de 100% (com
     texto grande a palavra quebra em vez de vazar). Quem encolhe é o texto
     vizinho: nada de "Atualiz/ar". O preenchimento lateral garante os 44. */
  min-inline-size: auto;
  max-inline-size: 100%;
  margin: 0;
  padding: var(--cmp-btn-pad-y) var(--cmp-btn-pad-x);
  border: var(--cmp-btn-inset) solid transparent;
  border-radius: var(--cmp-btn-radius);
  background-color: var(--cmp-btn-bg);
  background-clip: padding-box;
  color: var(--cmp-btn-fg);
  font: var(--sys-type-subheadline);         /* M e S: Subheadline 15/600 */
  font-weight: 600;
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  text-align: center;
  text-decoration: none;
  white-space: normal;                        /* quebra em linhas (texto grande), nunca reticências */
  vertical-align: middle;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* soltar: mola snappy na escala, troca de pintura em fusão */
  transition:
    transform var(--sys-dur-snappy) var(--sys-ease-snappy),
    opacity var(--sys-dur-fade) var(--sys-ease-fade),
    background-color var(--sys-dur-fade) var(--sys-ease-fade),
    color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-btn > .z-ic {
  --cmp-ic-size: var(--cmp-btn-icon);
  flex: none;
}
.z-btn__label { min-inline-size: 0; overflow-wrap: break-word; text-wrap: balance; }

/* Tamanhos ------------------------------------------------------------------ */
.z-btn--l {
  --cmp-btn-h: var(--sys-control-l);
  --cmp-btn-pad-x: var(--sys-space-24);
  --cmp-btn-pad-y: var(--sys-space-8);
  --cmp-btn-icon: var(--sys-icon-20);
  font: var(--sys-type-headline);            /* L e XL: Headline 17/600 */
  letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
}
/* S: 44 no retângulo que a sonda mede, 32 no desenho. A borda transparente é
   igual nos quatro lados (o círculo do canto fica redondo; só em cima e embaixo
   daria canto elíptico 22 × 16). O foco abraça o desenho com −4.            */
.z-btn--s {
  --cmp-btn-h: var(--sys-target);
  --cmp-btn-inset: calc((var(--sys-target) - var(--sys-control-s-visual)) / 2);
  --cmp-btn-pad-x: 14px;
  --cmp-btn-pad-y: var(--sys-space-4);
  --cmp-btn-icon: var(--sys-icon-16);
  --cmp-btn-focus-offset: calc(2 * var(--sys-focus-offset-inset));
}
.z-btn--xl {
  --cmp-btn-h: 56px;
  --cmp-btn-pad-x: var(--sys-space-32);
  --cmp-btn-pad-y: var(--sys-space-8);
  --cmp-btn-icon: var(--sys-icon-20);
  font: var(--sys-type-headline);            /* L e XL: Headline 17/600 */
  letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
}
.z-btn--block { display: flex; inline-size: 100%; }

/* Variantes ----------------------------------------------------------------- */
.z-btn--tinted {
  --cmp-btn-bg: var(--sys-tint-wash);
  --cmp-btn-fg: var(--sys-tint-ink);            /* 6,64 · escuro 6,02 */
  --cmp-btn-bg-hover: var(--sys-tint-wash-pressed);
  --cmp-btn-bg-pressed: var(--sys-tint-wash-pressed);  /* tinta 5,94 · 4,73 */
}
.z-btn--gray {
  --cmp-btn-bg: var(--sys-fill);
  --cmp-btn-fg: var(--sys-label);               /* 13,88 · escuro 11,72 */
  --cmp-btn-bg-hover: var(--sys-fill-hover);
  --cmp-btn-bg-pressed: var(--sys-fill-strong);
}
.z-btn--plain {
  --cmp-btn-bg: transparent;
  --cmp-btn-fg: var(--sys-tint);                /* 5,13 superfície · 4,60 fundo agrupado */
  --cmp-btn-bg-hover: transparent;
  --cmp-btn-fg-hover: var(--sys-tint-hover);
  --cmp-btn-bg-pressed: transparent;
  --cmp-btn-fg-pressed: var(--sys-tint-ink-pressed);   /* afunda escurecendo: 10,4 (a opacidade .55 dava 2,2) */
  --cmp-btn-press-scale: 1;
}
.z-btn--destructive {
  --cmp-btn-bg: var(--sys-destructive);
  --cmp-btn-fg: var(--sys-on-destructive);      /* 5,44 */
  --cmp-btn-bg-hover: var(--sys-destructive-pressed);
  --cmp-btn-bg-pressed: var(--sys-destructive-pressed);  /* 7,08 */
}
.z-btn--destructive-plain {
  --cmp-btn-bg: transparent;
  --cmp-btn-fg: var(--sys-destructive-ink);     /* 5,44 · escuro 7,14 */
  --cmp-btn-bg-hover: transparent;
  --cmp-btn-bg-pressed: transparent;
  --cmp-btn-fg-pressed: var(--sys-destructive-ink-pressed);  /* 9,3 · escuro 11,9 */
  --cmp-btn-press-scale: 1;
}
/* Seção preta do site: claro sobre preto nos dois temas (19,29). A
   especificação pede #FFFFFF / #1D1D1F, que não têm token igual nos dois
   temas: o par mais próximo é o texto da seção preta e o fundo dela.       */
.z-btn--on-dark {
  --cmp-btn-bg: var(--sys-label-inverse);
  --cmp-btn-fg: var(--sys-bg-inverse);
  --cmp-btn-bg-hover: var(--sys-label-inverse);
  --cmp-btn-bg-pressed: var(--sys-label-inverse);
  --cmp-btn-press-opacity: 0.8;
}

/* Sobre vidro (rodapé de ações, barra) o texto verde é a tinta: 5,94 no pior caso. */
.z-actions .z-btn--plain,
.z-btn--plain.z-btn--on-glass { --cmp-btn-fg: var(--sys-tint-ink); }

/* Estados ------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .z-btn:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover {
    background-color: var(--cmp-btn-bg-hover);
    color: var(--cmp-btn-fg-hover);
  }
}
.z-btn.is-hover {
  background-color: var(--cmp-btn-bg-hover);
  color: var(--cmp-btn-fg-hover);
}
/* afundar: 90 ms; a transição de soltar fica no estado normal (acima) */
.z-btn:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):is(:active, .is-pressed) {
  background-color: var(--cmp-btn-bg-pressed);
  color: var(--cmp-btn-fg-pressed);
  transform: scale(var(--cmp-btn-press-scale));
  opacity: var(--cmp-btn-press-opacity);
  transition-duration: var(--sys-dur-press);
  transition-timing-function: var(--sys-ease-press);
}
.z-btn:focus-visible,
.z-btn.is-focused {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--cmp-btn-focus-offset);
}
/* Selecionado (botão de alternar): tingido, ícone fill vem do markup */
.z-btn[aria-pressed="true"] {
  --cmp-btn-bg: var(--sys-tint-wash);
  --cmp-btn-fg: var(--sys-tint-ink);
  --cmp-btn-bg-hover: var(--sys-tint-wash-pressed);
  --cmp-btn-bg-pressed: var(--sys-tint-wash-pressed);
}
/* Desabilitado: fill + --sys-label-disabled (4,94 · escuro 5,77 · elevado
   5,13). Nunca opacity, nunca --sys-label-3. */
.z-btn:is(:disabled, [aria-disabled="true"]) {
  --cmp-btn-bg: var(--sys-fill);
  --cmp-btn-fg: var(--sys-label-disabled);
}
/* Sem fundo continua sem fundo (botão plain não ganha cápsula ao desabilitar). */
.z-btn:is(.z-btn--plain, .z-btn--destructive-plain):is(:disabled, [aria-disabled="true"]) {
  --cmp-btn-bg: transparent;
}
.z-btn[aria-busy="true"] { pointer-events: none; }
.z-btn[aria-busy="true"] > :not(.z-spinner, .z-sr) { opacity: 0; }
.z-btn > .z-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: var(--sys-icon-18);
  block-size: var(--sys-icon-18);
  color: var(--cmp-btn-fg);
}
.z-btn:not([aria-busy="true"]) > .z-spinner { display: none; }

/* "Marcar como feito" (§8.6): o rótulo sai e o check entra com quique. O
   .z-btn__done é o ícone `feito` bold 22, sempre no DOM, escondido.       */
.z-btn > .z-btn__done {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: var(--sys-icon-22);
  block-size: var(--sys-icon-22);
  opacity: 0;
  transform: scale(calc(1 - 0.6 * var(--motion)));
  transition:
    transform var(--sys-dur-bouncy) var(--sys-ease-bouncy),
    opacity var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-btn.is-done > :not(.z-btn__done, .z-spinner) {
  opacity: 0;
  transition: opacity var(--sys-dur-press) var(--sys-ease-press);
}
.z-btn.is-done > .z-btn__done { opacity: 1; transform: none; }

/* =============================================================================
 * §10.1 BOTÃO DE ÍCONE  .z-iconbtn  (gancho .icon-btn no markup)
 * Caixa 44 × 44 sempre, aria-label obrigatório. O desenho visível (círculo
 * do fechar e do vidro) fica dentro por borda transparente ou pseudo.
 * Variantes: --plain (padrão: ícone 22 tint, barra do topo) ·
 *   --close (círculo 30 fill, `fechar` bold 13 label-2: gráfico 4,18) ·
 *   --glass (círculo 36 de vidro sobre imagem, ícone 16 bold label)
 * Quem especializa (lixeira da linha, câmera do compositor) troca
 * --cmp-iconbtn-fg e --cmp-iconbtn-icon.
 * ============================================================================= */
.z-iconbtn {
  --cmp-iconbtn-size: var(--sys-target);
  --cmp-iconbtn-visual: var(--sys-target);
  --cmp-iconbtn-icon: var(--sys-icon-bar);
  --cmp-iconbtn-bg: transparent;
  --cmp-iconbtn-bg-hover: transparent;
  --cmp-iconbtn-bg-pressed: transparent;
  --cmp-iconbtn-fg: var(--sys-tint);
  --cmp-iconbtn-fg-hover: var(--sys-tint-hover);
  --cmp-iconbtn-press-opacity: var(--sys-press-opacity-bar);
  --cmp-iconbtn-press-scale: 1;
  --cmp-iconbtn-focus-offset: var(--sys-focus-offset-inset);

  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  inline-size: var(--cmp-iconbtn-size);
  block-size: var(--cmp-iconbtn-size);
  margin: 0;
  padding: 0;
  border: calc((var(--cmp-iconbtn-size) - var(--cmp-iconbtn-visual)) / 2) solid transparent;
  border-radius: var(--sys-radius-full);
  background-color: var(--cmp-iconbtn-bg);
  background-clip: padding-box;
  color: var(--cmp-iconbtn-fg);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* botão de ícone na barra: volta em 220 ms */
  transition:
    opacity var(--sys-dur-fade-l) var(--sys-ease-fade),
    transform var(--sys-dur-snappy) var(--sys-ease-snappy),
    background-color var(--sys-dur-fade) var(--sys-ease-fade),
    color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-iconbtn > .z-ic {
  position: relative;          /* fica por cima do vidro do ::before */
  --cmp-ic-size: var(--cmp-iconbtn-icon);
}
.z-iconbtn--close {
  --cmp-iconbtn-visual: 30px;
  --cmp-iconbtn-icon: var(--sys-icon-13);
  --cmp-iconbtn-bg: var(--sys-fill);
  --cmp-iconbtn-bg-hover: var(--sys-fill-hover);
  --cmp-iconbtn-bg-pressed: var(--sys-fill-strong);
  --cmp-iconbtn-fg: var(--sys-label);           /* texto oculto (.z-sr) herda: 13,88 no fill */
  --cmp-iconbtn-fg-hover: var(--sys-label);
  --cmp-iconbtn-press-opacity: 1;
  --cmp-iconbtn-focus-offset: calc((var(--cmp-iconbtn-visual) - var(--sys-target)) / 2 + var(--sys-focus-offset));
}
/* ícone num seletor próprio: --sys-label-2 não divide regra com fundo fill */
.z-iconbtn--close > .z-ic { color: var(--sys-label-2); }
.z-iconbtn--glass {
  --cmp-iconbtn-visual: var(--sys-target);
  --cmp-iconbtn-glass: 36px;
  --cmp-iconbtn-icon: var(--sys-icon-16);
  --cmp-iconbtn-fg: var(--sys-label);           /* 12,77 no pior caso do vidro */
  --cmp-iconbtn-fg-hover: var(--sys-label);
  --cmp-iconbtn-press-opacity: 1;
  --cmp-iconbtn-press-scale: var(--sys-press-scale-icon);
  --cmp-iconbtn-focus-offset: var(--sys-focus-offset-inset);
}
/* O vidro é um pseudo de 36: na própria caixa de 44 o desfoque passaria 4 px
   para fora do círculo pintado (o backdrop-filter pega a caixa da borda).  */
.z-iconbtn--glass::before {
  content: "";
  position: absolute;
  inset: calc((var(--cmp-iconbtn-size) - var(--cmp-iconbtn-glass)) / 2);
  border-radius: var(--sys-radius-full);
  background-color: var(--sys-material-chrome);
  -webkit-backdrop-filter: var(--sys-material-filter);
  backdrop-filter: var(--sys-material-filter);
  box-shadow: var(--sys-material-edge);
}
@media (hover: hover) and (pointer: fine) {
  .z-iconbtn:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover {
    background-color: var(--cmp-iconbtn-bg-hover);
    color: var(--cmp-iconbtn-fg-hover);
  }
}
.z-iconbtn.is-hover {
  background-color: var(--cmp-iconbtn-bg-hover);
  color: var(--cmp-iconbtn-fg-hover);
}
/* afundar na hora (barra: opacidade .35; fechar: fundo; vidro: escala .92) */
.z-iconbtn:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):is(:active, .is-pressed) {
  background-color: var(--cmp-iconbtn-bg-pressed);
  opacity: var(--cmp-iconbtn-press-opacity);
  transform: scale(var(--cmp-iconbtn-press-scale));
  transition-duration: var(--sys-dur-press);
  transition-timing-function: var(--sys-ease-press);
}
.z-iconbtn:focus-visible,
.z-iconbtn.is-focused {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--cmp-iconbtn-focus-offset);
}
.z-iconbtn:is(:disabled, [aria-disabled="true"]) > .z-ic { color: var(--sys-label-disabled); }
.z-iconbtn[aria-busy="true"] { pointer-events: none; }
.z-iconbtn[aria-busy="true"] > .z-ic { opacity: 0; }
.z-iconbtn > .z-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: var(--sys-icon-18);
  block-size: var(--sys-icon-18);
}
.z-iconbtn:not([aria-busy="true"]) > .z-spinner { display: none; }

/* =============================================================================
 * §10.1 LINK  .z-link
 * Dentro de parágrafo: --sys-tint com sublinhado de 1 px a .2em (o alvo é
 * isento por ser inline dentro de p/li). Sozinho (--standalone): sem
 * sublinhado, `avancar` bold 13 depois do texto (o 0,8 em pedido arredonda
 * para a escala fechada), sublinha no hover, caixa de 44 por padding-block.
 * ============================================================================= */
.z-link {
  color: var(--sys-tint);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  border-radius: var(--sys-radius-4);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--sys-dur-fade) var(--sys-ease-fade), opacity var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-link:is(:active, .is-pressed) {
  color: var(--sys-tint-ink-pressed);   /* escurece em vez de apagar: AA no pressionado */
  transition-duration: var(--sys-dur-press);
  transition-timing-function: var(--sys-ease-press);
}
.z-link:focus-visible,
.z-link.is-focused {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset);
}
.z-link--standalone {
  display: inline-flex;
  align-items: center;
  gap: var(--sys-space-4);
  box-sizing: border-box;
  min-block-size: var(--sys-target);
  min-inline-size: var(--sys-target);
  padding-block: var(--sys-space-8);
  text-decoration-line: none;
  touch-action: manipulation;
}
.z-link--standalone > .z-ic {
  --cmp-ic-size: var(--sys-icon-13);
  flex: none;
}
@media (hover: hover) and (pointer: fine) {
  .z-link--standalone:hover { text-decoration-line: underline; }
}
.z-link--standalone.is-hover { text-decoration-line: underline; }

/* No site o ponteiro é a mão em link e botão. No app (<html class="z-app">),
   cursor de app de Mac: seta. */
:root:not(.z-app) :is(.z-btn, .z-iconbtn, .z-link, .z-chip, .z-seg__item,
  .z-stepper__btn, .z-menu__item, .z-actionsheet__item, .z-composer__send,
  .z-combo__clear, .z-combo__list > [role="option"]):not(:disabled, [aria-disabled="true"]) {
  cursor: pointer;
}

/* =============================================================================
 * §10.1 RODAPÉ DE AÇÕES  .z-actions
 * Substitui .modal-actions, -split, .sticky-actions, .ficha-foot,
 * .onb-actions-col. Gruda embaixo da folha, vidro thick, fio de 0,5 em cima.
 * Ordem: principal L filled de largura total · secundário L plain abaixo ·
 * destrutivo separado por 24 (8 do vão + 16).
 * ============================================================================= */
.z-actions {
  position: sticky;
  inset-block-end: 0;
  z-index: var(--sys-z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--sys-space-8);
  padding: var(--sys-space-12) var(--sys-space-16) max(var(--sys-space-12), env(safe-area-inset-bottom));
  border-block-start: 0.5px solid var(--sys-separator);
  background-color: var(--sys-material-thick);
  -webkit-backdrop-filter: var(--sys-material-filter-thick);
  backdrop-filter: var(--sys-material-filter-thick);
}
.z-actions > .z-btn { inline-size: 100%; }
/* Rodapé de tela parada (.z-actions--edge): no fundo da própria tela, sem
   fio. O material e o fio (no ::before) só aparecem quando há conteúdo
   passando por baixo, e somem nos 16 finais da rolagem; sem rolagem nenhuma
   a linha do tempo fica inativa e vale o repouso, sem fio. Sem linha do
   tempo de rolagem no navegador, fica o rodapé de sempre. */
.z-actions--edge {
  border-block-start-color: transparent;
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.z-actions--edge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-block-start: 0.5px solid var(--sys-separator);
  border-radius: inherit;
  background-color: var(--sys-material-thick);
  -webkit-backdrop-filter: var(--sys-material-filter-thick);
  backdrop-filter: var(--sys-material-filter-thick);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .z-actions--edge::before {
    opacity: 0;
    animation: z-reveal auto both reverse;
    animation-timeline: scroll(nearest);
    animation-range: calc(100% - var(--sys-space-16)) 100%;
  }
}
.z-actions > :is(.z-btn--destructive, .z-btn--destructive-plain) {
  margin-block-start: var(--sys-space-16);
}

/* =============================================================================
 * §10.1 MENU  .z-menu  (o "+" das abas e o relatório da Análise)
 * Só existe no DOM enquanto está aberto (montado no abrir, removido no
 * fechar). 250 a 280, raio 20, vidro thick, sombra de popover, contexto
 * elevado (as superfícies de dentro trocam pelas elevadas). Fixo na tela:
 * a âncora diz onde (.z-menu--registrar, na navegação). Linhas de 44: texto
 * Body à esquerda, ícone 20 à direita, fio de 0,5. Grupos (.z-menu__group)
 * separados por faixa de 8 em fill; .z-menu__sep é a mesma faixa solta.
 * Entra da âncora (scale .9 → 1, snappy). --cmp-menu-origin diz o canto.
 * Saída: .is-closing (ou .is-leaving) encolhe e funde, sem toque.
 * ============================================================================= */
.z-menu {
  --cmp-menu-w-min: 250px;
  --cmp-menu-w-max: 280px;
  --cmp-menu-origin: top right;
  --cmp-menu-pad-y: 11px;

  position: fixed;
  z-index: var(--sys-z-popover);
  box-sizing: border-box;
  min-inline-size: min(var(--cmp-menu-w-min), calc(100% - 2 * var(--sys-gutter)));
  max-inline-size: min(var(--cmp-menu-w-max), calc(100% - 2 * var(--sys-gutter)));
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: clip;
  border-radius: var(--sys-radius-card);
  background-color: var(--sys-material-menu);
  -webkit-backdrop-filter: var(--sys-material-filter-thick);
  backdrop-filter: var(--sys-material-filter-thick);
  box-shadow: var(--sys-shadow-popover);
  color: var(--sys-label);
  transform-origin: var(--cmp-menu-origin);
  animation: z-menu-entra var(--sys-dur-snappy) var(--sys-ease-snappy) both;
}
.z-menu:is(.is-closing, .is-leaving) {
  pointer-events: none;
  animation: z-sai-encolhe var(--sys-dur-exit) var(--sys-ease-exit) both;
}
.z-menu__group { margin: 0; padding: 0; list-style: none; }
.z-menu__group + .z-menu__group { border-block-start: var(--sys-space-8) solid var(--sys-fill); }
.z-menu__sep { display: block; block-size: var(--sys-space-8); background-color: var(--sys-fill); }
.z-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sys-space-12);
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--sys-target);
  margin: 0;
  padding: var(--cmp-menu-pad-y, 11px) var(--sys-space-16);   /* com padrão: o item também mora no .z-popover */
  border: 0;
  background-color: transparent;
  color: var(--sys-label);
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  text-align: start;
  text-decoration: none;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sys-dur-fade) var(--sys-ease-fade);
}
:is(.z-menu, .z-menu__group) > :is(.z-menu__item, li) + :is(.z-menu__item, li) {
  border-block-start: 0.5px solid var(--sys-separator);
}
.z-menu__item > .z-ic {
  --cmp-ic-size: var(--sys-icon-20);
  flex: none;
  margin-inline-start: auto;
  color: currentColor;
}
/* O texto ocupa o meio (.z-menu__text, ou o span sem classe do app). */
.z-menu__text, .z-menu__item > span:not([class]) { flex: 1 1 auto; min-inline-size: 0; }
/* Texto grande: o menu cresce até a largura útil e a palavra que ainda não
   couber hifeniza (lang="pt"), em vez de quebrar no meio sem hífen. */
html.texto-grande :is(.z-menu, .z-popover) { --cmp-menu-w-max: 100%; }
:is(.z-menu__text, .z-menu__item > span:not([class])) { overflow-wrap: normal; hyphens: auto; }
/* Menu de escolha: coluna de 16 à esquerda com `feito` bold no marcado. */
.z-menu__item > .z-menu__check {
  display: inline-grid;
  place-items: center;
  inline-size: var(--sys-icon-16);
  block-size: var(--sys-icon-16);
  flex: none;
  margin-inline-start: 0;
  color: var(--sys-label);
  visibility: hidden;
}
.z-menu__check > .z-ic { --cmp-ic-size: var(--sys-icon-16); }
.z-menu__item:is([aria-checked="true"], [aria-current="true"]) > .z-menu__check { visibility: visible; }
.z-menu__item[aria-checked="true"]::before { content: none; }
.z-menu__item--destructive { color: var(--sys-destructive-ink); }
/* Hover e foco não são passagem: o realce de linha mantém o destrutivo AA
   (4,83 · escuro elevado 4,53, sobre o --sys-row-hover-elevated). */
@media (hover: hover) and (pointer: fine) {
  .z-menu__item:not(:disabled, [aria-disabled="true"]):hover { background-color: var(--sys-row-hover); }
}
.z-menu__item.is-hover { background-color: var(--sys-row-hover); }
.z-menu__item:is(:focus-visible, .is-focused) {
  background-color: var(--sys-row-hover);
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset-inset);
}
/* .is-active: o item que a seta do teclado escolheu (aria-activedescendant). */
.z-menu__item.is-active {
  background-color: var(--sys-row-hover);
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset-inset);
}
.z-menu__item:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) {
  background-color: var(--sys-fill-strong);
  transition-duration: var(--sys-dur-press);
}
.z-menu__item:is(:disabled, [aria-disabled="true"]) { color: var(--sys-label-disabled); }

/* =============================================================================
 * §10.1 ALERTA  .z-alert  e  FOLHA DE AÇÃO  .z-actionsheet
 * Moram no nó #z-alerta (irmão do #modal) com a classe .z-alert-layer: véu
 * próprio, --sys-z-alert, por cima da folha sem trocar o #modal-content.
 * Alerta: 300 (cresce com o texto, como o iOS), nunca mais largo que o véu
 * menos o respiro dele; raio 28, superfície elevada, sombra de popover, 20 20 16.
 * O respiro do véu NÃO cresce com o texto: com texto grande o alerta precisa
 * de cada pixel (a 320 com 200% o painel ficava com 192). Título Headline e mensagem
 * Subheadline label-2, centrados. Campo opcional (.z-field). Botões L
 * empilhados, vão 8: seguro (filled), destrutivo, "Cancelar" (gray).
 * Folha de ação: opções num grupo de vidro thick raio 20, linhas de 56 com
 * Body centrado em tint-ink (destrutivo em destructive-ink), "Cancelar" num
 * grupo separado em superfície, 600. Título do grupo em --sys-label (sobre
 * vidro o label-2 dá 3,85 e é proibido).
 * Entra: alerta scale(1.08 → 1) quick; folha de ação sobe (smooth).
 * Sai (.is-closing): opacidade e scale(.96), saída 200.
 * ============================================================================= */
.z-alert-layer {
  position: fixed;
  inset: 0;
  z-index: var(--sys-z-alert);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: min(var(--sys-space-32), 5vw);
  background-color: var(--sys-scrim);
  overscroll-behavior: contain;
  animation: z-funde-entra var(--sys-dur-fade-l) var(--sys-ease-fade) both;
}
.z-alert-layer:has(> .z-actionsheet) {
  place-items: end center;
  padding: var(--sys-space-8) var(--sys-space-8) max(var(--sys-space-8), env(safe-area-inset-bottom));
}
.z-alert-layer.is-closing {
  pointer-events: none;
  animation: z-funde-sai var(--sys-dur-exit) var(--sys-ease-exit) both;
}
.z-alert {
  --cmp-alert-w: calc(300 * var(--u));

  box-sizing: border-box;
  inline-size: min(var(--cmp-alert-w), 100%);
  max-block-size: calc(100dvh - 2 * min(var(--sys-space-32), 5vw));
  overflow-y: auto;
  padding: var(--sys-space-20) var(--sys-space-20) var(--sys-space-16);
  border-radius: var(--sys-radius-sheet);
  background-color: var(--sys-surface);
  box-shadow: var(--sys-shadow-popover);
  color: var(--sys-label);
  text-align: center;
  animation: z-alerta-entra var(--sys-dur-quick) var(--sys-ease-quick) both;
}
.z-alert-layer.is-closing > :is(.z-alert, .z-actionsheet) {
  animation: z-sai-encolhe var(--sys-dur-exit) var(--sys-ease-exit) both;
}
.z-alert__title {
  margin: 0;
  font: var(--sys-type-headline);
  letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
  text-wrap: balance;
}
.z-alert__msg {
  margin: var(--sys-space-4) 0 0;
  color: var(--sys-label-2);                 /* 5,07 · escuro elevado 5,42 */
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  text-wrap: pretty;
}
.z-alert > .z-field { margin-block-start: var(--sys-space-16); text-align: start; }
.z-alert__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sys-space-8);
  margin-block-start: var(--sys-space-20);
}
.z-alert__actions > .z-btn { inline-size: 100%; }

.z-actionsheet {
  --cmp-actionsheet-w: 400px;
  --cmp-actionsheet-row: 56px;

  display: flex;
  flex-direction: column;
  gap: var(--sys-space-8);
  inline-size: min(100%, var(--cmp-actionsheet-w));
  animation: z-sobe var(--sys-dur-smooth) var(--sys-ease-smooth) both;
}
.z-actionsheet__group {
  display: flex;
  flex-direction: column;
  overflow: clip;
  border-radius: var(--sys-radius-card);
  background-color: var(--sys-material-thick);
  -webkit-backdrop-filter: var(--sys-material-filter-thick);
  backdrop-filter: var(--sys-material-filter-thick);
}
.z-actionsheet__head {
  padding: var(--sys-space-16) var(--sys-space-16) var(--sys-space-12);
  color: var(--sys-label);
  text-align: center;
}
.z-actionsheet__title {
  margin: 0;
  font: var(--sys-type-footnote);
  font-weight: 600;
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
}
.z-actionsheet__msg {
  margin: var(--sys-space-2) 0 0;
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
}
.z-actionsheet__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sys-space-8);
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--cmp-actionsheet-row);
  margin: 0;
  padding: var(--sys-space-12) var(--sys-space-16);
  border: 0;
  background-color: transparent;
  color: var(--sys-tint-ink);                /* sobre vidro: 5,94 no pior caso */
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  text-align: center;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-actionsheet__group > * + * { border-block-start: 0.5px solid var(--sys-separator); }
.z-actionsheet__item--destructive { color: var(--sys-destructive-ink); }
.z-actionsheet__cancel {
  border-radius: var(--sys-radius-card);
  background-color: var(--sys-surface);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .z-actionsheet__item:not(:disabled, [aria-disabled="true"]):hover { background-color: var(--sys-row-hover); }
}
.z-actionsheet__item.is-hover { background-color: var(--sys-row-hover); }
.z-actionsheet__item:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) {
  background-color: var(--sys-fill-strong);
  transition-duration: var(--sys-dur-press);
}
.z-actionsheet__item:is(:focus-visible, .is-focused) {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset-inset);
}
.z-actionsheet__cancel:is(:focus-visible, .is-focused) { border-radius: var(--sys-radius-card); }
.z-actionsheet__item:is(:disabled, [aria-disabled="true"]) { color: var(--sys-label-disabled); }

/* =============================================================================
 * §10.2 CAMPO  .z-field  (gancho .field, .field-row, .field-hint no markup)
 * Anatomia:  .z-field (label ou div)
 *              .z-field__label   Footnote 600 label-2, 6 acima da caixa
 *              .z-field__input   a caixa: 50, raio 12, superfície, borda 1 px
 *                                --sys-border-control (3,62 · 3,25 bg), 0 14,
 *                                Body em --sys-field-font-size (≥ 16)
 *           ou .z-field__control a caixa com a unidade dentro:
 *                .z-field__input (sem caixa própria) + .z-field__unit
 *              .z-field__hint    Footnote label-2
 *              .z-field__error   Footnote overdue-ink com status-vencido 13
 * Foco: borda 2 px --sys-focus (borda de 1 + contorno de 1 por dentro; nada mexe no layout).
 * Erro (aria-invalid): borda 2 px --sys-overdue. Desabilitado e só leitura:
 * fundo surface-2, texto label-2 (4,54), sem borda.
 * Variantes: --hero (valor herói) · --inline (dentro de .z-row--field)
 * ============================================================================= */
.z-field {
  --cmp-field-h: var(--sys-field-h);
  --cmp-field-bg: var(--sys-surface);
  --cmp-field-border: var(--sys-border-control);
  --cmp-field-radius: var(--sys-radius-control);
  --cmp-field-pad-x: 14px;
  --cmp-field-pad-y: 13px;                    /* (50 − 2 − 22) / 2 para o textarea */
  --cmp-field-ring: var(--sys-focus);         /* o mesmo anel de combo, código e data (cores forçadas: Highlight) */

  display: flex;
  flex-direction: column;
  gap: var(--sys-space-6);
  min-inline-size: 0;
  margin: 0;
  border: 0;
  padding: 0;
}
.z-field__label {
  color: var(--sys-label-2);                 /* 4,54 bg · 5,07 superfície · escuro 6,61 */
  font: var(--sys-type-footnote);
  font-weight: 600;
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
}
/* A caixa: o input sozinho, ou o .z-field__control que leva a unidade. */
:is(.z-field__input, .z-field__control) {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--cmp-field-h);
  border: 1px solid var(--cmp-field-border);
  border-radius: var(--cmp-field-radius);
  background-color: var(--cmp-field-bg);
  color: var(--sys-label);
  transition:
    border-color var(--sys-dur-fade) var(--sys-ease-fade),
    background-color var(--sys-dur-fade-l) var(--sys-ease-fade);
}
.z-field__input {
  appearance: none;
  -webkit-appearance: none;
  min-inline-size: 0;
  margin: 0;
  padding: 0 var(--cmp-field-pad-x);
  font: var(--sys-type-body);
  font-size: var(--sys-field-font-size);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  caret-color: var(--sys-tint);
  -webkit-text-fill-color: currentColor;       /* o WebKit clareia o desabilitado por conta própria */
  opacity: 1;
}
.z-field__input::placeholder { color: var(--sys-placeholder); opacity: 1; -webkit-text-fill-color: var(--sys-placeholder); }
.z-field__control {
  display: flex;
  align-items: center;
  gap: var(--sys-space-8);
  padding-inline-end: var(--cmp-field-pad-x);
}
.z-field__control > .z-field__input {
  flex: 1 1 auto;
  align-self: stretch;
  min-block-size: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
.z-field__control > .z-field__input:is(:focus-visible, .is-focused) { outline: none; }
.z-field__unit {
  flex: none;
  color: var(--sys-label-2);                 /* sobre superfície: 5,07 · escuro 6,61 / 5,42 */
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
}
.z-field__control > .z-field__unit:first-child { padding-inline-start: var(--cmp-field-pad-x); }
.z-field__control > .z-field__unit:first-child + .z-field__input { padding-inline-start: 0; }
.z-field__hint,
.z-field__error {
  margin: 0;
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  text-wrap: pretty;
}
.z-field__hint { color: var(--sys-label-2); }
.z-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sys-space-4);
  color: var(--sys-overdue-ink);             /* 4,87 bg · 5,44 superfície · escuro 7,14 */
}
.z-field__error > .z-ic {
  --cmp-ic-size: var(--sys-icon-13);
  flex: none;
  margin-block-start: 0.15em;
}
/* Foco: 2 px de tinta (1 de borda + 1 de contorno colado por dentro). O
   anel É o indicador de foco: o :focus-visible casa em todo foco de campo de
   texto, e um contorno por fora dobraria o anel. Sem sombra (campo não
   flutua, P2). */
:is(.z-field__input:not(.z-field__control > *), .z-field__control):is(:focus, :focus-within, .is-focused) {
  border-color: var(--cmp-field-ring);
  outline: calc(var(--sys-focus-width) / 2) solid var(--cmp-field-ring);
  outline-offset: var(--sys-focus-offset-inset);
}
/* Erro: borda 2 px --sys-overdue (nunca só cor: a mensagem tem glifo). */
:is(.z-field__input[aria-invalid="true"]:not(.z-field__control > *),
    .z-field__control:has(> [aria-invalid="true"])) {
  --cmp-field-border: var(--sys-overdue);
  --cmp-field-ring: var(--sys-overdue);
  border-color: var(--sys-overdue);
  outline: calc(var(--sys-focus-width) / 2) solid var(--sys-overdue);
  outline-offset: var(--sys-focus-offset-inset);
}
/* Desabilitado e só leitura: caixa em fill, sem borda. O surface-2 pedido
   (#F2F2F7) é a mesma cor do fundo da folha no claro e o campo sumia; o fill
   aparece nos dois temas. Só leitura é conteúdo: texto em label (13,88).
   Desabilitado: --sys-label-disabled (4,94 · escuro 5,13 no fill elevado). */
:is(.z-field__input:is(:disabled, [readonly]):not(.z-field__control > *),
    .z-field__control:has(> .z-field__input:is(:disabled, [readonly]))) {
  border-color: transparent;
  background-color: var(--sys-fill);
  color: var(--sys-label);
}
:is(.z-field__input:disabled,
    .z-field__control:has(> .z-field__input:disabled)) { color: var(--sys-label-disabled); }
/* unidade sobre fill: label-2 daria 4,18 (proibido); a cinza AA é a do desabilitado */
.z-field__control:has(> .z-field__input:is(:disabled, [readonly])) > .z-field__unit { color: var(--sys-label-disabled); }

/* Lido pela IA (cupom, nota): o gancho .field-read liga o realce. Lavado por
   1,2 s e volta em ~0,4 s; o rótulo ganha `brilho` 13 fill e "Lido da foto". */
.z-field.field-read :is(.z-field__input:not(.z-field__control > *), .z-field__control) {
  animation: z-campo-lido calc(7 * var(--sys-dur-fade-l)) var(--sys-ease-fade) both;
}
/* sobre o lavado só a tinta dele: a unidade em label-2 daria 4,30 */
.z-field.field-read .z-field__unit { color: var(--sys-tint-ink); }
.z-field__read {
  display: inline-flex;
  align-items: center;
  gap: var(--sys-space-4);
  margin-inline-start: var(--sys-space-6);
  color: var(--sys-tint-ink);
  font-weight: 600;
}
.z-field__read > .z-ic {
  --cmp-ic-size: var(--sys-icon-13);
  flex: none;
}

/* Duas colunas (gancho .field-row): cai para uma coluna em contêiner estreito. */
.z-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sys-space-12);
}
@container (max-width: 20rem) {
  .z-field-row { grid-template-columns: minmax(0, 1fr); }
}

/* Valor herói (hodômetro, total do abastecimento): metric-xl centrado,
   cursor verde. A moeda e a unidade seguem a regra do sistema: metade do
   corpo do valor, cinza, na linha de base. O valor encolhe com a largura
   (cqi) antes de cortar. O que diz que o número se edita é a mesma
   superfície arredondada dos outros campos (preenchimento cinza, raio do
   campo), nunca um traço embaixo, que era o sublinhado do Material; com
   foco, o anel do sistema por fora. */
.z-field--hero { container-type: inline-size; align-items: center; text-align: center; }
.z-field--hero .z-field__control {
  justify-content: center;
  align-items: baseline;
  gap: var(--sys-space-4);
  font: var(--sys-type-metric-xl);
  font-size: min(calc(48 * var(--u)), var(--sys-metric-xl-max), 20cqi);
  inline-size: auto;
  max-inline-size: 100%;
  min-block-size: 0;
  padding: var(--sys-space-4) var(--sys-space-16);
  border: 0;
  border-radius: var(--sys-radius-control);
  background-color: var(--sys-fill);   /* em repouso: a superfície diz que o número é campo */
}
.z-field--hero .z-field__control:is(:focus-within, .is-focused) {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset);
}
.z-field--hero .z-field__input {
  flex: 0 1 auto;
  align-self: baseline;
  inline-size: 5ch;
  min-block-size: 0;
  padding: 0;
  font: inherit;
  letter-spacing: calc(var(--sys-track-metric-xl) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  text-align: center;
}
@supports (field-sizing: content) {
  .z-field--hero .z-field__input { field-sizing: content; inline-size: auto; min-inline-size: max(1ch, var(--sys-target));  /* vazio, ainda é um alvo de 44 */ }
}
/* A moeda na frente não leva o recuo do campo comum: ele somava 14 à
   esquerda e o conjunto "R$ 0,00" ficava 7 px fora do centro da caixa. */
.z-field--hero .z-field__control > .z-field__unit:first-child { padding-inline-start: 0; }
.z-field--hero .z-field__unit {
  color: var(--sys-label-disabled);   /* sobre o preenchimento: label-2 daria 4,18 (proibido); a cinza AA sobre fill */
  padding: 0;
  font-size: var(--sys-unit-scale);
  font-weight: 600;
  letter-spacing: 0;
}

/* Em lista (dentro de .z-row--field): rótulo Body à esquerda (40 %), valor à
   direita, sem borda e sem fundo; o separador é da lista. Foco: o rótulo
   vira tinta E a linha ganha o anel de foco por dentro (só a cor não basta,
   1.4.1: quem não distingue o verde precisa da forma). */
.z-field--inline {
  flex: 1 1 auto;
  inline-size: 100%;
  flex-direction: row;
  align-items: center;
  gap: var(--sys-space-12);
  min-block-size: var(--sys-target);
}
.z-field--inline .z-field__label {
  flex: 0 0 40%;
  color: var(--sys-label);
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  transition: color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-field--inline :is(.z-field__input:not(.z-field__control > *), .z-field__control) {
  flex: 1 1 auto;
  min-block-size: var(--sys-target);
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
.z-field--inline .z-field__input { text-align: end; padding-inline: 0; }
.z-field--inline .z-field__control { justify-content: flex-end; gap: var(--sys-space-4); }
.z-field--inline .z-field__control > .z-field__unit:first-child { padding-inline-start: 0; }
@supports (field-sizing: content) {
  /* o prefixo ("R$") encosta no valor; sem field-sizing fica na ponta esquerda */
  .z-field--inline .z-field__control > .z-field__input { flex: 0 1 auto; field-sizing: content; inline-size: auto; min-inline-size: max(2ch, var(--sys-target)); max-inline-size: 100%; }
}
/* Em lista não há caixa: o anel de foco vai na LINHA inteira (por dentro,
   raio de controle), e o erro troca a cor do rótulo (a mensagem leva glifo). */
.z-field--inline :is(.z-field__input, .z-field__control):is(:focus, :focus-within, .is-focused, [aria-invalid="true"], :has(> [aria-invalid="true"])) { outline: none; }
.z-field--inline:is(:focus-within, .is-focused) .z-field__label { color: var(--sys-tint-ink); }
.z-row--field:has(> .z-field--inline:is(:focus-within, .is-focused)) {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset-inset);
  border-radius: var(--sys-radius-control);
}
.z-field--inline:has([aria-invalid="true"]) .z-field__label { color: var(--sys-overdue-ink); }

/* =============================================================================
 * §10.2 TEXTO LONGO  .z-textarea  (com .z-field__input)
 * Igual ao campo, mínimo 3 linhas, cresce até 8 (field-sizing), depois rola.
 * ============================================================================= */
.z-textarea {
  display: block;
  min-block-size: calc(3lh + 2 * var(--cmp-field-pad-y, 13px) + 2px);
  max-block-size: calc(8lh + 2 * var(--cmp-field-pad-y, 13px) + 2px);
  padding-block: var(--cmp-field-pad-y, 13px);
  overflow-y: auto;
  resize: none;
  line-height: inherit;
}
@supports (field-sizing: content) {
  .z-textarea { field-sizing: content; }
}
@supports not (field-sizing: content) {
  .z-textarea { resize: vertical; }
}

/* =============================================================================
 * §10.2 SELEÇÃO  .z-select  (o <select> nativo: a roda do iPhone e a lista
 * do Android são melhores que qualquer desenho)
 * Anatomia: <span class="z-select"> <select class="z-field__input"> +
 *   ícone `seletor` bold 16 label-2 à direita (SVG real, sem máscara data:).
 * Em lista (--inline): sem caixa, valor em tint, `seletor` 13, e o próprio
 * select com 44 × 44 no mínimo (a sonda mede select nos dois eixos).
 * ============================================================================= */
.z-select {
  --cmp-select-icon: var(--sys-icon-16);
  --cmp-select-icon-gap: 14px;
  --cmp-select-pad-end: calc(var(--cmp-select-icon-gap) + var(--cmp-select-icon) + var(--sys-space-8));

  position: relative;
  display: inline-grid;
  grid-template-areas: "x";
  align-items: center;
  inline-size: 100%;
  min-inline-size: 0;
}
.z-select > select {
  grid-area: x;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: var(--sys-target);
  min-block-size: var(--sys-target);
  margin: 0;
  padding-inline-end: var(--cmp-select-pad-end);
  color: var(--sys-label);
  font: var(--sys-type-body);
  font-size: var(--sys-field-font-size);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  text-overflow: ellipsis;
  -webkit-text-fill-color: currentColor;
  cursor: default;
}
.z-select > .z-ic {
  grid-area: x;
  justify-self: end;
  --cmp-ic-size: var(--cmp-select-icon);
  margin-inline-end: var(--cmp-select-icon-gap);
  color: var(--sys-label-2);                 /* gráfico: 5,07 superfície */
  pointer-events: none;
}
.z-select > select:disabled ~ .z-ic { color: var(--sys-label-disabled); }
/* Em lista: o select NÃO leva .z-field__input (sem caixa). */
.z-select--inline {
  --cmp-select-icon: var(--sys-icon-13);
  --cmp-select-icon-gap: var(--sys-space-8);
  --cmp-select-pad-end: calc(var(--sys-icon-13) + var(--sys-space-6) + var(--sys-space-8));
  margin-inline-end: calc(-1 * var(--sys-space-8));   /* o chevron fica na margem da célula */
  inline-size: auto;
  justify-self: end;
}
.z-select--inline > select {
  padding-inline-start: var(--sys-space-8);
  border: 0;
  border-radius: var(--sys-radius-tag);
  background-color: transparent;
  color: var(--sys-tint);                    /* 5,13 superfície · escuro 8,62 / 7,06 */
  text-align: end;
  text-align-last: end;
}
.z-select--inline > select:is(:focus-visible, .is-focused) {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset-inset);
}
.z-select--inline > select:disabled { color: var(--sys-label-disabled); }
.z-select--inline > .z-ic { color: var(--sys-tint); }

/* =============================================================================
 * §10.2 DATA  .z-date  (input type=date nativo, em lista)
 * Cápsula fill de raio 8 com o valor em label, numa caixa de 44: a borda
 * transparente de 5 deixa o desenho em 34 (raio de fora 13 = 8 + 5).
 * Data solta usa .z-field__input como qualquer campo.
 * ============================================================================= */
.z-date {
  --cmp-date-inset: 5px;

  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  min-block-size: var(--sys-target);
  min-inline-size: var(--sys-target);
  margin: 0;
  padding: 0 var(--sys-space-12);
  border: var(--cmp-date-inset) solid transparent;
  border-radius: calc(var(--sys-radius-8) + var(--cmp-date-inset));
  background-color: var(--sys-fill);
  background-clip: padding-box;
  /* Com contraste aumentado a cápsula ganha contorno de 1 (o fill sozinho dá 1,21). */
  outline: var(--sys-edge-contrast) solid var(--sys-border-control);
  outline-offset: calc(-1 * var(--cmp-date-inset));
  color: var(--sys-label);                   /* 13,88 · escuro 11,72 / 10,42 */
  font: var(--sys-type-body);
  font-size: var(--sys-field-font-size);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  -webkit-text-fill-color: currentColor;
  transition: background-color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-date:is(:focus, :focus-visible, .is-focused) {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: calc(-1 * var(--cmp-date-inset) + 2px);
}
.z-date:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) { background-color: var(--sys-fill-strong); transition-duration: var(--sys-dur-press); }
.z-date:is(:disabled, [aria-disabled="true"]) { color: var(--sys-label-disabled); }
.z-date::-webkit-date-and-time-value { text-align: center; }
.z-date::-webkit-calendar-picker-indicator { margin-inline-start: var(--sys-space-4); }
/* O ícone do calendário recebe foco próprio no Chromium: o anel é o do
   sistema, não o padrão do navegador. */
.z-date.is-focused::-webkit-calendar-picker-indicator,
.z-date::-webkit-calendar-picker-indicator:focus-visible {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset);
  border-radius: var(--sys-radius-control);
}

/* =============================================================================
 * §10.2 BUSCA COM LISTA  .z-combo  (gancho .combo, .combo-list, .combo-sel)
 * Um padrão para FIPE e busca de modelo. Marca, modelo e ano são três campos
 * empilhados na mesma vista; o seguinte fica desabilitado até o anterior
 * ter valor (.combo-off ou input:disabled).
 * Campo: caixa de 44, fill, raio 12, `buscar` 16 bold label-2 (gráfico
 * 4,18), texto label, `limpar` fill 16 quando há texto (some com o
 * placeholder visível). Lista: popover de superfície, raio 20, sombra de
 * popover, até 6,5 linhas de 44 (a meia linha avisa que rola), fio de 0,5
 * recuado 16. Ativo por teclado (.combo-active): realce e anel de foco. Escolhido
 * (.combo-sel ou aria-selected): `feito` 16 tint à direita, desenhado em CSS
 * (o combo.js não põe SVG na opção). Trecho que casa (<mark>/<b>) em 600.
 * --inline: a lista entra no fluxo como lista agrupada da folha.
 * ============================================================================= */
.z-combo {
  --cmp-combo-h: var(--sys-target);
  --cmp-combo-row: var(--sys-target);
  --cmp-combo-rows: 6.5;
  --cmp-combo-gap: var(--sys-space-6);

  position: relative;
  min-inline-size: 0;
}
.z-combo:has(> .z-combo__list:not([hidden])) { z-index: var(--sys-z-popover); }
.z-combo__field {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-block-size: var(--cmp-combo-h);
  border: 2px solid transparent;            /* vira tinta no foco sem mexer no layout */
  border-radius: var(--sys-radius-control);
  background-color: var(--sys-fill);
  color: var(--sys-label);
  transition: border-color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-combo__field > .z-ic {
  --cmp-ic-size: var(--sys-icon-16);
  flex: none;
  margin-inline: var(--sys-space-8) var(--sys-space-6);
}
.z-combo__field > .z-ic:first-child { color: var(--sys-label-2); }
.z-combo__input {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  align-self: stretch;
  min-inline-size: 0;
  margin: calc(-1 * var(--sys-space-2)) 0;  /* cobre a borda de 2: alvo de 44 inteiros, como o limpar */
  padding: 0 var(--sys-space-8) 0 0;
  border: 0;
  background-color: transparent;
  color: var(--sys-label);                   /* 13,88 · escuro 11,72 / 10,42 */
  font: var(--sys-type-body);
  font-size: var(--sys-field-font-size);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  caret-color: var(--sys-tint);
  -webkit-text-fill-color: currentColor;
  outline: none;
}
.z-combo__input::placeholder { color: var(--sys-placeholder); opacity: 1; -webkit-text-fill-color: var(--sys-placeholder); }
.z-combo__input::-webkit-search-cancel-button { display: none; }
.z-combo__field:is(:focus-within, .is-focused) { border-color: var(--sys-focus); }
.z-combo__field:has(> [aria-invalid="true"]) { border-color: var(--sys-overdue); }
/* limpar: caixa 44 na ponta direita, só quando há texto */
.z-combo__clear {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--sys-target);
  block-size: var(--sys-target);
  margin: calc(-1 * var(--sys-space-2)) calc(-1 * var(--sys-space-2)) calc(-1 * var(--sys-space-2)) 0;  /* cobre a borda de 2: 44 inteiros */
  padding: 0;
  border: 0;
  border-radius: var(--sys-radius-control);
  background-color: transparent;
  color: var(--sys-label-2);                 /* gráfico 4,18 sobre fill */
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-combo__clear > .z-ic { --cmp-ic-size: var(--sys-icon-16); }
.z-combo__clear:is(:active, .is-pressed) { opacity: var(--sys-press-opacity-bar); transition-duration: var(--sys-dur-press); }
.z-combo__clear:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: calc(2 * var(--sys-focus-offset-inset)); }
.z-combo__input:placeholder-shown ~ .z-combo__clear { display: none; }
/* desabilitado (o próximo nível espera o anterior) */
.z-combo:is(.combo-off, :has(.z-combo__input:disabled)) .z-combo__input {
  color: var(--sys-label-disabled);
  -webkit-text-fill-color: var(--sys-label-disabled);
}
.z-combo:is(.combo-off, :has(.z-combo__input:disabled)) .z-combo__input::placeholder {
  color: var(--sys-label-disabled);
  -webkit-text-fill-color: var(--sys-label-disabled);
}
.z-combo:is(.combo-off, :has(.z-combo__input:disabled)) .z-combo__field > .z-ic { color: var(--sys-label-disabled); }
/* Esperando o anterior, o campo continua com a forma de campo (o
   preenchimento e a lupa): sem eles, "Escolha a marca primeiro" virava texto
   solto, fora do alinhamento das etiquetas. O que diz que ele espera é o
   texto e a lupa no cinza de desabilitado. */
/* a lista */
.z-combo__list {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + var(--cmp-combo-gap));
  z-index: var(--sys-z-popover);
  box-sizing: border-box;
  max-block-size: calc(var(--cmp-combo-rows) * var(--cmp-combo-row));
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--sys-radius-card);
  background-color: var(--sys-surface);
  box-shadow: var(--sys-shadow-popover);
  color: var(--sys-label);
  transform-origin: top center;
  animation: z-menu-entra var(--sys-dur-snappy) var(--sys-ease-snappy) both;
}
.z-combo--inline .z-combo__list {
  position: static;
  margin-block-start: var(--cmp-combo-gap);
  box-shadow: none;
  animation: none;
}
.z-combo__list > li {
  position: relative;
  display: block;                            /* texto corrido: o <b> do trecho não vira item de flex */
  box-sizing: border-box;
  min-block-size: var(--cmp-combo-row);
  padding: calc((var(--cmp-combo-row) - 1lh) / 2) var(--sys-space-16);
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sys-dur-fade) var(--sys-ease-fade);
}
/* fio recuado 16, nenhum antes da primeira linha */
.z-combo__list > li + li::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--sys-space-16) 0;
  border-block-start: 0.5px solid var(--sys-separator);
}
.z-combo__list :is(mark, b, strong) {
  background-color: transparent;
  color: inherit;
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .z-combo__list > [role="option"]:hover { background-color: var(--sys-row-hover); }
}
.z-combo__list > [role="option"].is-hover { background-color: var(--sys-row-hover); }
/* Ativo pelas setas (o foco fica no campo, aria-activedescendant): o anel de
   foco por dentro, além do realce. Só o fundo dava 1,2:1 no claro e 1,1:1
   no escuro, e quem usa teclado não via qual opção o Enter ia escolher. */
.z-combo__list > [role="option"]:is(.combo-active, .is-active) {
  background-color: var(--sys-row-hover);
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset-inset);
}
.z-combo__list > [role="option"]:is(:active, .is-pressed) {
  background-color: var(--sys-fill-strong);
  transition-duration: var(--sys-dur-press);
}
/* escolhido: `feito` 16 em tint à direita, traço de 2 (bold a 16 dá 1,5) */
.z-combo__list > [role="option"]:is(.combo-sel, [aria-selected="true"]) { padding-inline-end: calc(var(--sys-space-16) * 2 + var(--sys-icon-16)); }
.z-combo__list > [role="option"]:is(.combo-sel, [aria-selected="true"])::after {
  content: "";
  position: absolute;
  inset-inline-end: calc(var(--sys-space-16) + 5px);
  inset-block-start: 50%;
  box-sizing: border-box;
  inline-size: 7px;
  block-size: 12px;
  margin-block-start: -7px;
  border: solid var(--sys-tint);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.z-combo__none,
.z-combo__list > .combo-none {
  color: var(--sys-label-2);                 /* sobre superfície 5,07 · escuro elevado 5,42 */
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
}
/* Falhou: estado vazio compacto (sem-internet 34, frase, botão S tingido). */
.z-combo__state,
.z-combo__list > li.z-combo__state {
  display: grid;
  justify-items: center;
  gap: var(--sys-space-8);
  padding: var(--sys-space-20) var(--sys-space-16) var(--sys-space-12);
  color: var(--sys-label-2);
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  text-align: center;
}
.z-combo__state > .z-ic { --cmp-ic-size: var(--sys-icon-34); }
.z-combo__list > li.z-combo__state::before { content: none; }

/* =============================================================================
 * §10.2 INTERRUPTOR  .z-switch  (o próprio <input type="checkbox" switch
 * role="switch">)
 * Onde o switch nativo existe (Safari 17.4+, o JS liga html.z-switch-nativo
 * por 'switch' in HTMLInputElement.prototype) fica o controle do iOS com
 * háptico e accent-color tint. Nos outros, o mesmo input desenhado:
 * caixa de 51 × 44 (alvo), trilho 51 × 31 no ::before (desligado
 * fill-strong, ligado tint), polegar 27 branco nos dois temas no ::after
 * com sombra de polegar, desliza 20 com snappy; pressionado estica
 * scaleX(1.15) para o lado de destino. A margem negativa devolve ao layout
 * o tamanho do trilho (31): o alvo cresce sem empurrar a linha.
 * O alvo de verdade é a célula inteira (o rótulo é o <label>).
 * ============================================================================= */
.z-switch {
  --cmp-switch-w: 51px;  --cmp-switch-h: 31px;  --cmp-switch-thumb-size: 27px;
  --cmp-switch-on: var(--sys-tint);
  --cmp-switch-off: var(--sys-fill-strong);
  --cmp-switch-edge: inset 0 0 0 var(--sys-edge-contrast) var(--sys-border-control);
  --cmp-switch-thumb: var(--sys-switch-thumb);   /* branco nos dois temas, como o iOS */
  --cmp-switch-box: var(--sys-target);
  --cmp-switch-pad: 2px;
  --cmp-switch-travel: calc(var(--cmp-switch-w) - var(--cmp-switch-thumb-size) - 2 * var(--cmp-switch-pad));
  --cmp-switch-inset: calc((var(--cmp-switch-box) - var(--cmp-switch-h)) / 2);

  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  box-sizing: border-box;
  inline-size: var(--cmp-switch-w);
  block-size: var(--cmp-switch-box);
  margin: calc(-1 * var(--cmp-switch-inset)) 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  vertical-align: middle;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.z-switch::before {                          /* trilho */
  content: "";
  position: absolute;
  inset: var(--cmp-switch-inset) 0;
  border-radius: var(--sys-radius-full);
  background-color: var(--cmp-switch-off);
  transition: background-color var(--sys-dur-fade-l) var(--sys-ease-fade);
}
/* Desligado, com contraste aumentado: o contorno de controle (0 no modo
   normal, 1 px a ≥ 3:1 com prefers-contrast: more). Sem ele o trilho cinza
   sobre o grupo ficava em 1,2:1 e só a sombra do polegar o separava. */
.z-switch:not(:checked)::before { box-shadow: var(--cmp-switch-edge); }
.z-switch::after {                           /* polegar */
  content: "";
  position: absolute;
  inset-block-start: calc(var(--cmp-switch-inset) + var(--cmp-switch-pad));
  inset-inline-start: var(--cmp-switch-pad);
  inline-size: var(--cmp-switch-thumb-size);
  block-size: var(--cmp-switch-thumb-size);
  border-radius: var(--sys-radius-full);
  background-color: var(--cmp-switch-thumb);
  box-shadow: var(--sys-shadow-thumb);
  transform-origin: left center;
  transition: transform var(--sys-dur-snappy) var(--sys-ease-snappy);
}
.z-switch:checked::before { background-color: var(--cmp-switch-on); }
.z-switch:checked::after {
  transform: translateX(var(--cmp-switch-travel));
  transform-origin: right center;
}
.z-switch:not(:disabled):is(:active, .is-pressed)::after {
  transform: scaleX(calc(1 + 0.15 * var(--motion)));
}
.z-switch:checked:not(:disabled):is(:active, .is-pressed)::after {
  transform: translateX(var(--cmp-switch-travel)) scaleX(calc(1 + 0.15 * var(--motion)));
}
/* o anel abraça o trilho, não a caixa de 44 */
.z-switch:focus-visible,
.z-switch.is-focused { outline: none; }
.z-switch:is(:focus-visible, .is-focused)::before {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset);
}
/* desabilitado: trilho em fill, polegar some no trilho (sem opacity) */
.z-switch:is(:disabled, [aria-disabled="true"])::before { background-color: var(--sys-fill); }
.z-switch:is(:disabled, [aria-disabled="true"]):checked::before { background-color: var(--sys-tint-wash); }
:root.z-switch-nativo .z-switch[switch] {
  appearance: auto;
  -webkit-appearance: auto;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  accent-color: var(--sys-tint);
}
:root.z-switch-nativo .z-row > .z-switch[switch] { margin-block: calc((1lh - var(--cmp-switch-h)) / 2); }
:root.z-switch-nativo .z-switch[switch]::before,
:root.z-switch-nativo .z-switch[switch]::after { content: none; }

/* =============================================================================
 * §10.2 CAIXA DE MARCAR  .z-check  (uma só para .field-check e label.check)
 * Anatomia: <label class="z-check"> <input type="checkbox|radio"
 *   class="z-check__input"> <span class="z-check__text">… <small
 *   class="z-check__hint">…</small></span> </label>
 * O input é a caixa de 44 × 44 (alvo); o desenho de 22, raio 6, borda 1,5
 * --sys-border-control está no ::before e o check no ::after (traço de 2,
 * como o `feito` bold a 16). Marcado: tint com check on-tint, entra com
 * scale(.6 → 1) snappy. Rádio: o mesmo desenho em círculo (como o círculo
 * de seleção do iOS). Margem negativa: no layout ocupa 22.
 * ============================================================================= */
.z-check {
  --cmp-check-size: 22px;
  --cmp-check-radius: var(--sys-radius-6);
  --cmp-check-box: var(--sys-target);
  --cmp-check-border: 1.5px;
  --cmp-check-inset: calc((var(--cmp-check-box) - var(--cmp-check-size)) / 2);

  display: flex;
  align-items: center;
  gap: var(--sys-space-12);
  min-block-size: var(--sys-target);
  min-inline-size: var(--sys-target);
  color: var(--sys-label);
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.z-check__input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  box-sizing: border-box;
  inline-size: var(--cmp-check-box);
  block-size: var(--cmp-check-box);
  margin: calc(-1 * var(--cmp-check-inset));
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.z-check__input::before {                    /* a caixa desenhada */
  content: "";
  position: absolute;
  inset: var(--cmp-check-inset);
  box-sizing: border-box;
  border: var(--cmp-check-border) solid var(--sys-border-control);
  border-radius: var(--cmp-check-radius);
  background-color: var(--sys-surface);
  transition:
    background-color var(--sys-dur-fade) var(--sys-ease-fade),
    border-color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-check__input[type="radio"]::before { border-radius: var(--sys-radius-full); }
.z-check__input::after {                     /* o check */
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 7px);
  inset-inline-start: calc(50% - 3.5px);
  box-sizing: border-box;
  inline-size: 7px;
  block-size: 12px;
  border: solid var(--sys-on-tint);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(calc(1 - 0.4 * var(--motion)));
  transition:
    transform var(--sys-dur-snappy) var(--sys-ease-snappy),
    opacity var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-check__input:checked::before {
  border-color: var(--sys-tint);
  background-color: var(--sys-tint);
}
.z-check__input:checked::after {
  opacity: 1;
  transform: rotate(45deg);
}
.z-check__input:not(:disabled):is(:active, .is-pressed)::before {
  background-color: var(--sys-fill-strong);
  transition-duration: var(--sys-dur-press);
}
.z-check__input:checked:not(:disabled):is(:active, .is-pressed)::before { background-color: var(--sys-tint-pressed); }
.z-check__input:focus-visible,
.z-check__input.is-focused { outline: none; }
.z-check__input:is(:focus-visible, .is-focused)::before {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset);
}
.z-check__input[aria-invalid="true"]::before { border-color: var(--sys-overdue); border-width: 2px; }
.z-check__input:disabled::before { border-color: transparent; background-color: var(--sys-fill); }
.z-check__input:disabled::after { border-color: var(--sys-label-disabled); }
.z-check:has(.z-check__input:disabled) .z-check__text { color: var(--sys-label-disabled); }
.z-check__text { min-inline-size: 0; }
.z-check__hint {
  display: block;
  margin-block-start: var(--sys-space-2);
  color: var(--sys-label-2);
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
}

/* =============================================================================
 * §10.2 SEGMENTADO  .z-seg  (gancho .seg; ativo .seg-on ou .chip-active)
 * Trilho fill, raio 12, 44. Polegar (.z-seg__thumb, elemento real por
 * baixo dos rótulos) --sys-thumb (branco · #636366), raio 8 (12 − 4),
 * sombra de polegar, recuo 4, desliza por translateX com snappy. O índice
 * e a contagem saem do próprio DOM por :has() (nada de JS de posição).
 * Rótulo como o UISegmentedControl, igual em toda variante: 13 px, 400 nos
 * outros e 600 no escolhido (o sistema só tem 400, 600 e 700), em label (13,88 no trilho · 5,50 no polegar
 * escuro). Com texto grande o rótulo quebra em linhas equilibradas (e
 * hifeniza onde o aparelho sabe) em vez de vazar do trilho.
 * Contraste aumentado: o polegar ganha contorno de 1 (sem ele, polegar contra
 * trilho dá 1,21; a redundância normal é o peso 600 do escolhido).
 * No app cada .z-seg__item é <button role="radio"> com o atributo do
 * despachante; no site, <label> com rádio real por baixo (:has(:checked)).
 * Fios de 0,5 entre segmentos não escolhidos, como no iOS.
 * ============================================================================= */
.z-seg {
  --cmp-seg-track: var(--sys-fill);
  --cmp-seg-thumb: var(--sys-thumb);          /* claro #FFFFFF, escuro #636366 */
  --cmp-seg-h: var(--sys-control-m);
  --cmp-seg-pad: 4px;
  --cmp-seg-thumb-radius: calc(var(--sys-radius-control) - 4px); /* 8: concêntrico */
  --cmp-seg-n: 2;
  --cmp-seg-i: 0;

  position: relative;
  display: flex;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--cmp-seg-h);
  padding: 0;
  border: 0;
  border-radius: var(--sys-radius-control);
  background-color: var(--cmp-seg-track);
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}
.z-seg:has(> .z-seg__item:nth-child(3 of .z-seg__item)) { --cmp-seg-n: 3; }
.z-seg:has(> .z-seg__item:nth-child(4 of .z-seg__item)) { --cmp-seg-n: 4; }
.z-seg:has(> .z-seg__item:nth-child(5 of .z-seg__item)) { --cmp-seg-n: 5; }
.z-seg:has(> .z-seg__item:nth-child(2 of .z-seg__item):is(.seg-on, .chip-active, [aria-checked="true"], [aria-pressed="true"]), > .z-seg__item:nth-child(2 of .z-seg__item) > input:checked) { --cmp-seg-i: 1; }
.z-seg:has(> .z-seg__item:nth-child(3 of .z-seg__item):is(.seg-on, .chip-active, [aria-checked="true"], [aria-pressed="true"]), > .z-seg__item:nth-child(3 of .z-seg__item) > input:checked) { --cmp-seg-i: 2; }
.z-seg:has(> .z-seg__item:nth-child(4 of .z-seg__item):is(.seg-on, .chip-active, [aria-checked="true"], [aria-pressed="true"]), > .z-seg__item:nth-child(4 of .z-seg__item) > input:checked) { --cmp-seg-i: 3; }
.z-seg:has(> .z-seg__item:nth-child(5 of .z-seg__item):is(.seg-on, .chip-active, [aria-checked="true"], [aria-pressed="true"]), > .z-seg__item:nth-child(5 of .z-seg__item) > input:checked) { --cmp-seg-i: 4; }
.z-seg__thumb {
  position: absolute;
  inset-block: var(--cmp-seg-pad);
  inset-inline-start: var(--cmp-seg-pad);
  z-index: var(--sys-z-base);
  inline-size: calc((100% - 2 * var(--cmp-seg-pad)) / var(--cmp-seg-n));
  border-radius: var(--cmp-seg-thumb-radius);
  background-color: var(--cmp-seg-thumb);
  box-shadow: var(--sys-shadow-thumb);
  outline: var(--sys-edge-contrast) solid var(--sys-border-control);
  outline-offset: calc(-1 * var(--sys-edge-contrast));
  transform: translateX(calc(var(--cmp-seg-i) * 100%));
  transition: transform var(--sys-dur-snappy) var(--sys-ease-snappy);
  pointer-events: none;
}
/* nenhum ativo: sem polegar */
.z-seg:not(:has(> .z-seg__item:is(.seg-on, .chip-active, [aria-checked="true"], [aria-pressed="true"]), > .z-seg__item > input:checked)) > .z-seg__thumb { opacity: 0; }
.z-seg__item {
  position: relative;
  z-index: var(--sys-z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sys-space-6);
  flex: 1 1 0;
  box-sizing: border-box;
  min-inline-size: var(--sys-target);
  min-block-size: var(--cmp-seg-h);
  margin: 0;
  padding: var(--sys-space-4) var(--sys-space-8);
  border: 0;
  border-radius: var(--sys-radius-control);
  background-color: transparent;
  color: var(--sys-label);
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;   /* o rótulo é texto solto num flex: sem anywhere a palavra que não cabe (texto grande) vaza do trilho e cola na vizinha */
  hyphens: auto;
  text-decoration: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: opacity var(--sys-dur-fade) var(--sys-ease-fade);
}
/* Com 4 ou 5 opções o segmento é estreito: 4 de cada lado, para "Média/mês"
   caber inteiro a 360 em vez de partir no meio da palavra. */
.z-seg:has(> .z-seg__item:nth-child(4 of .z-seg__item)) > .z-seg__item { padding-inline: var(--sys-space-4); }
.z-seg__item > input { position: absolute; opacity: 0; pointer-events: none; inline-size: 1px; block-size: 1px; margin: 0; }
.z-seg__item > .z-ic { --cmp-ic-size: var(--sys-icon-16); flex: none; }
.z-seg__item:is(.seg-on, .chip-active, [aria-checked="true"], [aria-pressed="true"], :has(> input:checked)) {
  font-weight: 600;
}
/* sem .z-seg__thumb no markup, o ativo pinta o próprio fundo (mesmo desenho) */
.z-seg:not(:has(> .z-seg__thumb)) > .z-seg__item:is(.seg-on, .chip-active, [aria-checked="true"], [aria-pressed="true"], :has(> input:checked)) {
  border: var(--cmp-seg-pad) solid transparent;
  border-radius: var(--sys-radius-control);   /* por dentro: 12 − 4 = 8, o raio do polegar */
  background-color: var(--cmp-seg-thumb);
  background-clip: padding-box;
}
/* fio entre segmentos não escolhidos */
.z-seg__item + .z-seg__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 30%;
  border-inline-start: 0.5px solid var(--sys-separator);
  transition: opacity var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-seg__item:is(.seg-on, .chip-active, [aria-checked="true"], [aria-pressed="true"], :has(> input:checked))::before,
.z-seg__item:is(.seg-on, .chip-active, [aria-checked="true"], [aria-pressed="true"], :has(> input:checked)) + .z-seg__item::before { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .z-seg__item:not(:disabled, .seg-on, .chip-active, [aria-checked="true"], [aria-pressed="true"], :has(> input:checked)):hover { opacity: 0.8; }
}
.z-seg__item:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) {
  opacity: 0.7;                         /* .55 dava 3,6 no rótulo; .7 fica AA nos dois temas */
  transition-duration: var(--sys-dur-press);
}
.z-seg__item:is(:focus-visible, .is-focused, :has(> input:focus-visible)) {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset-inset);
}
.z-seg__item:is(:disabled, [aria-disabled="true"], :has(> input:disabled)) { color: var(--sys-label-disabled); }
/* Desabilitado: o polegar vira superfície. O cinza do desabilitado sobre o
   polegar escuro (#636366) daria 2,71; sobre a superfície dá 5,99 · 7,69 · 6,30. */
.z-seg:has(> .z-seg__item:is(:disabled, [aria-disabled="true"]), > .z-seg__item > input:disabled) > .z-seg__thumb,
.z-seg:not(:has(> .z-seg__thumb)) > .z-seg__item:is(.seg-on, .chip-active, [aria-checked="true"], [aria-pressed="true"], :has(> input:checked)):is(:disabled, [aria-disabled="true"], :has(> input:disabled)) {
  background-color: var(--sys-surface);
  box-shadow: none;
}

/* =============================================================================
 * §10.2 CHIP DE FILTRO  .z-chip  (gancho .chip; ativo .chip-active)
 * Caixa de 44 com desenho de 36 (borda transparente de 4), 0 14,
 * Subheadline 600. Padrão fill + label (13,88). Ativo tingido: lavado +
 * tinta (6,64 · 6,02), ícone fill no markup. Fileira (.z-chips): rola de
 * lado com snap, vão 8 entre alvos; máscara de 24 na direita só com
 * .is-overflow (ligada por IntersectionObserver no último chip).
 * ============================================================================= */
.z-chip {
  --cmp-chip-h: var(--sys-target);
  --cmp-chip-inset: calc((var(--sys-target) - 36px) / 2);
  --cmp-chip-pad-x: 14px;
  --cmp-chip-bg: var(--sys-fill);
  --cmp-chip-fg: var(--sys-label);
  --cmp-chip-bg-hover: var(--sys-fill-hover);
  --cmp-chip-bg-pressed: var(--sys-fill-strong);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sys-space-6);
  flex: none;
  box-sizing: border-box;
  min-block-size: var(--cmp-chip-h);
  min-inline-size: var(--sys-target);
  margin: 0;
  padding: 0 var(--cmp-chip-pad-x);
  border: var(--cmp-chip-inset) solid transparent;
  border-radius: var(--sys-radius-full);
  background-color: var(--cmp-chip-bg);
  background-clip: padding-box;
  color: var(--cmp-chip-fg);
  font: var(--sys-type-subheadline);
  font-weight: 600;
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  white-space: nowrap;
  text-decoration: none;
  scroll-snap-align: start;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--sys-dur-snappy) var(--sys-ease-snappy),
    background-color var(--sys-dur-fade) var(--sys-ease-fade),
    color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-chip > .z-ic { --cmp-ic-size: var(--sys-icon-16); flex: none; }
.z-chip:is(.chip-active, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="true"]) {
  --cmp-chip-bg: var(--sys-tint-wash);
  --cmp-chip-fg: var(--sys-tint-ink);
  --cmp-chip-bg-hover: var(--sys-tint-wash-pressed);
  --cmp-chip-bg-pressed: var(--sys-tint-wash-pressed);
}
@media (hover: hover) and (pointer: fine) {
  .z-chip:not(:disabled, [aria-disabled="true"]):hover { background-color: var(--cmp-chip-bg-hover); }
}
.z-chip.is-hover { background-color: var(--cmp-chip-bg-hover); }
.z-chip:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):is(:active, .is-pressed) {
  background-color: var(--cmp-chip-bg-pressed);
  transform: scale(var(--sys-press-scale));
  transition-duration: var(--sys-dur-press);
  transition-timing-function: var(--sys-ease-press);
}
.z-chip:is(:focus-visible, .is-focused) {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: var(--sys-focus-offset-inset);
}
.z-chip:is(:disabled, [aria-disabled="true"]) {
  --cmp-chip-bg: var(--sys-fill);
  --cmp-chip-fg: var(--sys-label-disabled);
}
.z-chips {
  display: flex;
  gap: var(--sys-space-8);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.z-chips::-webkit-scrollbar { display: none; }
.z-chips.is-overflow {
  -webkit-mask-image: linear-gradient(to left, transparent, currentColor var(--sys-space-24));
  mask-image: linear-gradient(to left, transparent, currentColor var(--sys-space-24));
}

/* =============================================================================
 * §10.2 PASSO A PASSO  .z-stepper
 * Cápsula fill de 94 × 36 numa caixa de 44 (a cápsula é o ::before, recuo 4
 * em cima e embaixo): dois botões de 47 × 44 com `menos` e `adicionar` bold
 * 16, divisor 0,5 × 18. A metade pressionada escurece (fill-strong) no
 * próprio desenho. Segurar repete (120 ms depois de 400 ms) é do JS. O valor
 * fica fora, à esquerda, tabular.
 * ============================================================================= */
.z-stepper {
  --cmp-stepper-w: 94px;
  --cmp-stepper-inset: calc((var(--sys-target) - 36px) / 2);
  --cmp-stepper-divider: 18px;

  position: relative;
  display: inline-flex;
  flex: none;
  inline-size: var(--cmp-stepper-w);
  block-size: var(--sys-target);
  vertical-align: middle;
}
.z-stepper::before {
  content: "";
  position: absolute;
  inset: var(--cmp-stepper-inset) 0;
  border-radius: var(--sys-radius-full);
  background-color: var(--sys-fill);
}
.z-stepper::after {
  content: "";
  position: absolute;
  inset-block: calc((var(--sys-target) - var(--cmp-stepper-divider)) / 2);
  inset-inline-start: 50%;
  border-inline-start: 0.5px solid var(--sys-separator);
}
.z-stepper__btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-inline-size: var(--sys-target);
  block-size: var(--sys-target);
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--sys-label);
  cursor: default;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.z-stepper__btn::before {                     /* a metade pressionada */
  content: "";
  position: absolute;
  inset: var(--cmp-stepper-inset) 0;
  border-radius: var(--sys-radius-full) 0 0 var(--sys-radius-full);
  background-color: transparent;
  transition: background-color var(--sys-dur-fade-l) var(--sys-ease-fade);
}
.z-stepper__btn:last-child::before { border-radius: 0 var(--sys-radius-full) var(--sys-radius-full) 0; }
.z-stepper__btn > .z-ic {
  position: relative;
  --cmp-ic-size: var(--sys-icon-16);
}
.z-stepper__btn:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed)::before {
  background-color: var(--sys-fill-strong);
  transition-duration: var(--sys-dur-press);
}
@media (hover: hover) and (pointer: fine) {
  .z-stepper__btn:not(:disabled, [aria-disabled="true"]):hover::before { background-color: var(--sys-fill-hover); }
}
.z-stepper__btn.is-hover::before { background-color: var(--sys-fill-hover); }
.z-stepper__btn:focus-visible,
.z-stepper__btn.is-focused { outline: none; }
.z-stepper__btn:is(:focus-visible, .is-focused)::before {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: 0;
}
.z-stepper__btn:is(:disabled, [aria-disabled="true"]) > .z-ic { color: var(--sys-label-disabled); }

/* =============================================================================
 * §10.2 COMPOSITOR DO CHAT  .z-composer  (gancho .chat-input-row)
 * Anatomia: [câmera .z-iconbtn 44] [cápsula .z-composer__field:
 *   textarea .z-composer__input + enviar .z-composer__send]
 * Cápsula de superfície, borda 0,5 separador opaco, mínimo 44, raio 22,
 * cresce até 6 linhas. Enviar: círculo de 32 tint com `enviar` bold 16
 * on-tint numa caixa de 44 (contrato: #chat-send ≥ 44, #chat-input ≥ 40).
 * Desabilitado: fill + label-disabled. Miniatura da foto (.z-composer__thumb) 56 ×
 * 56 raio 8 acima, com o fechar no canto. Sobe com o teclado por
 * translateY(−--teclado-h), num quadro.
 * ============================================================================= */
.z-composer {
  --cmp-composer-h: var(--sys-target);
  --cmp-composer-lines: 6;
  --cmp-composer-send: var(--sys-control-s-visual);

  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sys-space-4) var(--sys-space-4);
  min-block-size: var(--cmp-composer-h);
  transform: translateY(calc(-1 * var(--teclado-h, 0px)));
}
.z-composer > .z-iconbtn {
  --cmp-iconbtn-fg: var(--sys-tint);
  --cmp-iconbtn-icon: var(--sys-icon-22);
}
.z-composer__field {
  display: flex;
  align-items: flex-end;
  flex: 1 1 0;
  min-inline-size: 0;
  box-sizing: border-box;
  min-block-size: var(--cmp-composer-h);
  border: 0.5px solid var(--sys-separator-opaque);
  border-radius: var(--sys-radius-full);
  background-color: var(--sys-surface);
  transition: border-color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-composer__field:is(:focus-within, .is-focused) { border-color: var(--sys-border-control); }
.z-composer__input {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  align-self: stretch;
  min-inline-size: 0;
  box-sizing: border-box;
  min-block-size: var(--cmp-composer-h);
  max-block-size: calc(var(--cmp-composer-lines) * 1lh + var(--cmp-composer-h) - 1lh);
  margin: -0.5px 0;                          /* cobre o fio de 0,5 da cápsula: alvo de 44 inteiros */
  padding: calc((var(--cmp-composer-h) - 1lh) / 2) 0 calc((var(--cmp-composer-h) - 1lh) / 2) var(--sys-space-16);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--sys-label);
  font: var(--sys-type-body);
  font-size: var(--sys-field-font-size);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  caret-color: var(--sys-tint);
  -webkit-text-fill-color: currentColor;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  resize: none;
  outline: none;
}
@supports (field-sizing: content) {
  .z-composer__input { field-sizing: content; }
}
.z-composer__input::placeholder { color: var(--sys-placeholder); opacity: 1; -webkit-text-fill-color: var(--sys-placeholder); }
/* Vazio, o campo tem uma linha: a altura só cresce com o que se digita. A
   320 o texto-guia quebrava em duas e o campo ia a 66, mais alto que o
   botão ao lado; agora ele termina em reticências. */
.z-composer__input:placeholder-shown { max-block-size: var(--cmp-composer-h); overflow: hidden; }
.z-composer__input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-composer__input:disabled { color: var(--sys-label-disabled); }
.z-composer__send {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  inline-size: var(--sys-target);
  block-size: var(--sys-target);
  margin: -0.5px;                             /* a caixa de 44 cobre a borda da cápsula */
  padding: 0;
  border: calc((var(--sys-target) - var(--cmp-composer-send)) / 2) solid transparent;
  border-radius: var(--sys-radius-full);
  background-color: var(--sys-tint);
  background-clip: padding-box;
  color: var(--sys-on-tint);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--sys-dur-snappy) var(--sys-ease-snappy),
    background-color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-composer__send > .z-ic { --cmp-ic-size: var(--sys-icon-16); }
.z-composer__send:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) {
  background-color: var(--sys-tint-pressed);
  transform: scale(var(--sys-press-scale-icon));
  transition-duration: var(--sys-dur-press);
  transition-timing-function: var(--sys-ease-press);
}
.z-composer__send:is(:focus-visible, .is-focused) {
  outline: var(--sys-focus-width) solid var(--sys-focus);
  outline-offset: calc(2 * var(--sys-focus-offset-inset));
}
.z-composer__send:is(:disabled, [aria-disabled="true"]) { background-color: var(--sys-fill); }
.z-composer__send:is(:disabled, [aria-disabled="true"]) > .z-ic { color: var(--sys-label-disabled); }
.z-composer__thumb {
  --cmp-composer-thumb: 56px;
  --cmp-composer-thumb-start: calc(var(--sys-target) + var(--sys-space-4));

  position: relative;
  flex: 0 0 100%;
  order: -1;
  box-sizing: border-box;
  block-size: var(--cmp-composer-thumb);
  margin-block-end: var(--sys-space-8);
  padding-inline-start: var(--cmp-composer-thumb-start);
}
.z-composer__thumb > img {
  display: block;
  inline-size: var(--cmp-composer-thumb);
  block-size: var(--cmp-composer-thumb);
  border-radius: var(--sys-radius-tag);
  object-fit: cover;
}
/* fechar dentro do canto da foto (desenho de 22 a 4 da borda), caixa de 44
   centrada nele: passa 7 px para fora, sem cobrir a foto inteira */
.z-composer__thumb > .z-iconbtn {
  --cmp-iconbtn-visual: 22px;
  position: absolute;
  inset-block-start: calc(var(--sys-space-4) + var(--cmp-iconbtn-visual) / 2 - var(--sys-target) / 2);
  inset-inline-start: calc(var(--cmp-composer-thumb-start) + var(--cmp-composer-thumb) - var(--sys-space-4) - var(--cmp-iconbtn-visual) / 2 - var(--sys-target) / 2);
}
.z-composer__thumb > .z-iconbtn > .z-ic { color: var(--sys-label); }

/* =============================================================================
 * §10.2 CÓDIGO DE ACESSO  .z-code
 * 6 caixas de 48 × 56, vão 8, raio 12, fill, algarismo Title 2 rounded
 * tabular. Por baixo, um único input (#ob-code, autocomplete one-time-code,
 * inputmode numeric) cobrindo as caixas, invisível e ≥ 16 px. As caixas são
 * aria-hidden e o JS copia o valor nelas e marca .is-current na posição do
 * cursor: anel de 2 px --sys-focus (borda transparente que vira anel).
 * ============================================================================= */
.z-code {
  --cmp-code-w: 48px;
  --cmp-code-h: 56px;

  position: relative;
  display: inline-block;
  max-inline-size: 100%;
}
/* Abaixo de 6 × 48 + 5 × 8 (texto grande, tela de 320) as caixas estreitam. */
.z-code__boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, var(--cmp-code-w)));
  gap: var(--sys-space-8);
}
.z-code__box {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  block-size: var(--cmp-code-h);
  border: 2px solid transparent;
  border-radius: var(--sys-radius-control);
  background-color: var(--sys-fill);
  color: var(--sys-label);                   /* 13,88 · escuro 11,72 */
  font: var(--sys-type-title-2);
  font-family: var(--sys-font-rounded);
  letter-spacing: calc(var(--sys-track-title-2) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  transition: border-color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-code:is(:focus-within, .is-focused) .z-code__box.is-current { border-color: var(--sys-focus); }
/* Sem .is-current do JS, o anel vai para a primeira caixa vazia. */
.z-code:is(:focus-within, .is-focused) .z-code__boxes:not(:has(.is-current)) .z-code__box:empty:is(:first-child, :not(:empty) + *) {
  border-color: var(--sys-focus);
}
.z-code:has(.z-code__input[aria-invalid="true"]) .z-code__box { border-color: var(--sys-overdue); }
.z-code:has(.z-code__input:disabled) .z-code__box { color: var(--sys-label-disabled); }
.z-code__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--sys-label);
  font: var(--sys-type-body);
  font-size: var(--sys-field-font-size);
  caret-color: transparent;
  opacity: 0;
  outline: none;
}

/* =============================================================================
 * Movimento desta parte (só transform e opacity; distância e escala vezes
 * --motion, então o movimento reduzido vira fusão)
 * ============================================================================= */
@keyframes z-menu-entra {
  from { opacity: 0; transform: scale(calc(1 - 0.1 * var(--motion))); }
}
@keyframes z-alerta-entra {
  from { opacity: 0; transform: scale(calc(1 + 0.08 * var(--motion))); }
}
@keyframes z-sobe {
  from { opacity: 0; transform: translateY(calc(100% * var(--motion))); }
}
@keyframes z-sai-encolhe {
  to { opacity: 0; transform: scale(calc(1 - 0.04 * var(--motion))); }
}
@keyframes z-funde-entra {
  from { opacity: 0; }
}
@keyframes z-funde-sai {
  to { opacity: 0; }
}
/* lido da foto: 1,2 s de lavado, ~0,4 s de volta (troca de pintura) */
@keyframes z-campo-lido {
  0%, 78% { background-color: var(--sys-tint-wash); }
}

/* =============================================================================
 * Cores forçadas (§2.8): a cor some, a forma fica. Fundo de botão vira
 * ButtonFace com borda ButtonText; o estado ligado do interruptor, da caixa
 * e do segmento vira Highlight.
 * ============================================================================= */
@media (forced-colors: active) {
  .z-btn { outline: 1px solid ButtonText; outline-offset: calc(-1 * var(--cmp-btn-inset)); }
  .z-chip { outline: 1px solid ButtonText; outline-offset: calc(-1 * var(--cmp-chip-inset)); }
  :is(.z-combo__field, .z-date, .z-iconbtn--close) { outline: 1px solid ButtonText; }
  .z-switch::before { border: 1px solid ButtonText; }
  .z-switch:checked::before,
  .z-check__input:checked::before { background-color: Highlight; forced-color-adjust: none; }
  .z-switch::after { background-color: ButtonText; forced-color-adjust: none; }
  .z-check__input::after { border-color: HighlightText; forced-color-adjust: none; }
  .z-seg__thumb { border: 2px solid Highlight; }
  .z-chip:is(.chip-active, [aria-pressed="true"]) { outline: 2px solid Highlight; outline-offset: -4px; }
  /* A borda transparente que amplia o alvo vira anel grosso de ButtonText
     nas cores forçadas. Cor do sistema escrita pelo autor é preservada: em
     Canvas ela some, e o contorno de 1 px acima desenha a borda visual. */
  :is(.z-btn, .z-iconbtn, .z-chip, .z-date, .z-seg, .z-seg__item) { border-color: Canvas; }
  .z-iconbtn--close { outline-offset: calc(-1 * (var(--cmp-iconbtn-size) - var(--cmp-iconbtn-visual)) / 2); }
  .z-iconbtn--close > .z-ic { color: ButtonText; }
}

} /* fim @layer componentes */


/* =============================================================================
 * COMPONENTES · EXIBIÇÃO (§10.3), RETORNO (§10.4), NAVEGAÇÃO E ESTRUTURA (§10.5),
 * O ESTADO DO ITEM EM CADA COMPONENTE (§11) e as coreografias do §8.6 destes
 * componentes. Especificação: SISTEMA.md. Valores: a camada tokens deste arquivo.
 *
 * Regras desta parte (as mesmas do check-ds, §17.5):
 *   - Cor, tempo, curva, raio, sombra, camada, tipo, tracking e ícone só por
 *     token. Medida própria de componente mora num --cmp-* declarado no
 *     seletor raiz dele (uma casa por componente, junto das regras que o leem).
 *   - Só transform, translate, scale, rotate e opacity animam (fundo e cor só
 *     como troca de pintura). Distância e escala sempre vezes --motion.
 *   - O estado do item vem de [data-estado] (bloco 0): nenhum componente lê
 *     --sys-overdue e --sys-soon direto, lê --cmp-estado.
 *   - Ganchos que os testes leem (.modal.open, .closing, .tab-active,
 *     .chip-active, .stat-active, .usage-*, .toast-out, .topbar-compact...)
 *     recebem o visual aqui, ao lado das classes z-.
 *   - Movimento reduzido: um bloco só, no fim (tudo instantâneo).
 * ============================================================================= */

@layer componentes {

/* =============================================================================
 * 0. ESTADO DO ITEM (§2.4, §11). Três papéis por estado, num lugar só.
 *    Quem tem data-estado (linha, anel, bloco-resumo, dica, célula da garagem)
 *    passa os papéis para dentro; os componentes leem --cmp-estado*.
 *    Valores: overdue · soon · ok · unknown · missing (falta um dado).
 * ============================================================================= */
[data-estado],
.stat-overdue, .stat-soon, .stat-unknown, .stat-ok {
  --cmp-estado:       var(--sys-unknown);    /* gráfico: anel, glifo, círculo */
  --cmp-estado-ink:   var(--sys-unknown-ink); /* texto                         */
  --cmp-estado-wash:  var(--sys-unknown-wash);/* fundo selecionado             */
  --cmp-estado-icone: var(--sys-label-2);    /* ícone do item dentro do anel  */
}
:is([data-estado="overdue"], .stat-overdue) {
  --cmp-estado: var(--sys-overdue); --cmp-estado-ink: var(--sys-overdue-ink);
  --cmp-estado-wash: var(--sys-overdue-wash); --cmp-estado-icone: var(--sys-overdue);
}
:is([data-estado="soon"], .stat-soon) {
  --cmp-estado: var(--sys-soon); --cmp-estado-ink: var(--sys-soon-ink);
  --cmp-estado-wash: var(--sys-soon-wash); --cmp-estado-icone: var(--sys-soon);
}
:is([data-estado="ok"], .stat-ok) {
  --cmp-estado: var(--sys-ok); --cmp-estado-ink: var(--sys-ok-ink);
  --cmp-estado-wash: var(--sys-ok-wash); --cmp-estado-icone: var(--sys-label-2);
}

/* =============================================================================
 * §10.3 EXIBIÇÃO
 * ============================================================================= */

/* ---- Seção agrupada (.z-group): lista inset do iOS. Superfície, raio 20,
 *      sem sombra nem borda. Título e rodapé ficam FORA, como irmãos.
 *      O recuo do fio é do GRUPO, não de cada linha: começa na coluna de
 *      texto da maior peça de início presente (ícone 22, tile 30, círculo 32
 *      do lançamento, anel 40 da manutenção, miniatura do veículo). Assim
 *      linhas seguidas nunca têm fios em alturas diferentes. ------------- */
.z-group {
  --cmp-group-bg: var(--sys-surface);
  --cmp-group-radius: var(--sys-radius-card);
  --cmp-group-sep: var(--sys-separator);
  --cmp-group-sep-inset: var(--sys-cell-pad-x);
  display: block;
  margin-inline: 0;
  padding: 0;
  list-style: none;
  background: var(--cmp-group-bg);
  border-radius: var(--cmp-group-radius);
  overflow: clip;
}
.z-group:has(.z-row__lead)     { --cmp-group-sep-inset: calc(var(--sys-cell-pad-x) + var(--sys-icon-22) + var(--sys-space-12)); }
.z-group:has(.z-row__tile)     { --cmp-group-sep-inset: calc(var(--sys-cell-pad-x) + var(--sys-row-tile) + var(--sys-space-12)); }
.z-group:has(.z-row--entry)    { --cmp-group-sep-inset: calc(var(--sys-cell-pad-x) + var(--sys-control-s-visual) + var(--sys-space-12)); }
.z-group:has(.z-item, .z-skeleton-item) { --cmp-group-sep-inset: var(--sys-row-item-inset); }
.z-group:has(.z-row--vehicle)  { --cmp-group-sep-inset: calc(var(--sys-cell-pad-x) + var(--sys-row-thumb-w) + var(--sys-space-12)); }
.z-group:has(.z-row--vehicle-lg) { --cmp-group-sep-inset: calc(var(--sys-cell-pad-x) + var(--sys-row-thumb-w-lg) + var(--sys-space-12)); }
:where(ul, ol, dl).z-group { margin-block: 0; }
.z-group > * { position: relative; }
/* Fio de 0,5 px recuado até o texto; nenhum antes da primeira linha visível. */
.z-group:not(.z-group--card) > :not([hidden]) ~ *::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--cmp-group-sep-inset) 0;
  border-block-start: 0.5px solid var(--cmp-group-sep);
  pointer-events: none;
}
/* Grupo MISTO (só algumas linhas com ícone, como o custo de posse com a
   linha da FIPE no fim): o fio acima de uma linha sem ícone começa no texto
   DELA, não na coluna do ícone que ela não tem. Vale só onde o recuo do
   grupo veio do ícone ou do tile; lista de itens, lançamentos e veículos
   têm a peça de início em toda linha. */
.z-group:not(.z-group--card, :has(.z-item, .z-skeleton-item, .z-row--entry, .z-row--vehicle, .z-row--vehicle-lg)) > :not([hidden]) ~ :not(:has(.z-row__lead, .z-row__tile))::before {
  inset-inline-start: var(--sys-cell-pad-x);
}
/* Cartão de conteúdo (métrica, gráfico, medidor): a mesma superfície, com
   respiro de 16 e sem fios entre os filhos. */
.z-group--card { display: grid; gap: var(--sys-space-16); padding: var(--sys-space-16); }
.z-group__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sys-space-8);
  margin-inline: 0;
  margin-block-end: var(--sys-group-title-gap);
  padding-inline: var(--sys-space-4);
  font: var(--sys-type-title-3);
  letter-spacing: calc(var(--sys-track-title-3) * var(--sys-track-on));
  color: var(--sys-label);
  text-wrap: balance;
}
.z-group__count {
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  color: var(--sys-label-2);
}
/* Variante dos Ajustes: Footnote 600, cinza, recuo 16. */
.z-group__title--small {
  padding-inline: var(--sys-cell-pad-x);
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  font-weight: 600;
  color: var(--sys-label-2);
}
.z-group__foot {
  margin: var(--sys-space-8) 0 0;
  padding-inline: var(--sys-cell-pad-x);
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  color: var(--sys-label-2);
  text-wrap: pretty;
}
/* Ritmo entre seções: 32 entre uma e outra, 8 do título até a seção. */
:is(.z-group, .z-group__foot) + :is(.z-group, .z-group__title) { margin-block-start: var(--sys-group-gap); }
@supports (corner-shape: superellipse(2)) {
  .z-group { corner-shape: var(--sys-corner-k); border-radius: calc(var(--cmp-group-radius) * var(--sys-corner-factor)); }
}

/* ---- Célula (.z-row): ganchos .entry-open, .garage-item, .setting-row,
 *      .reminder-item. [início] [título + subtítulo] [valor] [acessório].
 *      Altura do iOS: 44 numa linha (com ou sem ícone), 60 com subtítulo.
 *      O respiro de cima e de baixo é o que falta para 44 na altura de linha
 *      do texto; controle de 44 (campo, seleção, data, interruptor) e tile de
 *      30 entram nesse respiro, em vez de esticar a linha. O título quebra
 *      só entre palavras (e hifeniza onde o aparelho sabe); o valor é curto,
 *      não quebra; sem lugar, desce para a linha de baixo. ------------------ */
.z-row {
  --cmp-row-lead: var(--sys-icon-22);
  --cmp-tile: var(--sys-row-tile);
  --cmp-row-gap: var(--sys-space-12);
  --cmp-row-pad-y: max(var(--sys-space-8), calc((var(--sys-cell-min-1) - 1lh) / 2));
  display: flex;
  align-items: center;
  gap: var(--cmp-row-gap);
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--sys-cell-min-1);
  margin: 0;
  padding: var(--cmp-row-pad-y) var(--sys-cell-pad-x);
  border: 0;
  background-color: transparent;
  color: var(--sys-label);
  text-align: start;
  text-decoration: none;
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  -webkit-tap-highlight-color: transparent;
  appearance: none;
}
.z-row:has(.z-row__sub) { --cmp-row-pad-y: var(--sys-space-8); min-block-size: var(--sys-cell-min-2); }
.z-row__lead {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--cmp-row-lead);
  block-size: var(--cmp-row-lead);
  color: var(--sys-tint);
}
.z-row__lead > .z-ic { --cmp-ic-size: var(--sys-icon-22); }
.z-row__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-inline-size: 0;
  gap: var(--sys-space-2);
}
.z-row__title {
  min-inline-size: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  color: inherit;
}
.z-row__sub {
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  color: var(--sys-label-2);
}
.z-row__value {
  flex: none;
  max-inline-size: 100%;   /* não espreme o título: a linha quebra antes (abaixo) */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--sys-label-2);
}
.z-row__acc {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--sys-label-3);           /* chevron: gráfico, nunca texto */
}
.z-row__acc > .z-ic { --cmp-ic-size: var(--sys-icon-13); }
.z-row__acc--check { color: var(--sys-tint); }
.z-row__acc--check > .z-ic { --cmp-ic-size: var(--sys-icon-20); }
/* Controle de 44 dentro da linha: ocupa o respiro, a linha fica com 44.
   Na linha de campo, menu e data o respiro mora no RÓTULO, não na linha:
   o controle de 44 fica sem margem negativa e, quando a linha quebra
   (aparelho estreito, texto grande), desce inteiro para baixo do rótulo em
   vez de subir por cima dele e cortar as descendentes. */
.z-row--switch > :is(input, select, .z-row__control, .z-field--inline, .z-select, .z-date),
.z-row > .z-switch {
  margin-block: calc(-1 * var(--cmp-row-pad-y));
}
:is(.z-row--field, .z-row--select, .z-row--date) { padding-block: 0; }
/* O <label class="z-field--inline"> que embrulha rótulo e campo NÃO leva o
   respiro: ele mora no rótulo de dentro (senão o respiro dobrava e a linha
   de campo ficava com 66 ao lado das de 44). */
:is(.z-row--field, .z-row--select, .z-row--date) > :is(.z-row__title, label:not(.z-field), .z-row__lead),
.z-row--field > .z-field--inline > .z-field__label { padding-block: var(--cmp-row-pad-y); }
/* Pressão de célula: só o fundo, com 80 ms de atraso (não pisca ao rolar);
   volta em 220. Sem escala: a sonda mede o retângulo. */
:is(button, a, [role="button"], label).z-row {
  cursor: default;
  transition: background-color var(--sys-dur-fade-l) var(--sys-ease-fade);
}
:is(button, a, [role="button"], label).z-row:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) {
  background-color: var(--sys-fill-strong);
  transition: background-color var(--sys-dur-press) var(--sys-ease-press) var(--sys-dur-row-highlight-delay);
}
/* Sobre o realce cinza o texto secundário vai ao label (o cinza e as tintas
   de estado cairiam abaixo de AA no #D1D1D6 · escuro #3A3A3C). */
:is(button, a, [role="button"], label).z-row:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) :is(.z-row__sub, .z-row__value, .z-row__state) { color: var(--sys-label); }
.z-row:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); }
@media (hover: hover) and (pointer: fine) {
  :is(button, a, [role="button"], label).z-row:not(:disabled, [aria-disabled="true"]):hover:not(:active) { background-color: var(--sys-row-hover); }
}
.z-row.is-hover { background-color: var(--sys-row-hover); }
/* Desabilitada: tudo no cinza do desabilitado (nunca opacidade, nunca label-3
   em texto), sem realce. O tile perde a cor e fica no mesmo cinza. */
.z-row:is(:disabled, [aria-disabled="true"]),
.z-row:is(:disabled, [aria-disabled="true"]) :is(.z-row__lead, .z-row__sub, .z-row__value, .z-row__acc) { color: var(--sys-label-disabled); }
.z-row:is(:disabled, [aria-disabled="true"]) .z-row__tile { background: var(--sys-label-disabled); }
/* Selecionada (o painel do notebook mostra esta linha): lavado verde; o
   subtítulo e o valor vão para a tinta (label-2 sobre o lavado dá 4,30). */
.z-row:is([aria-current="true"], [aria-current="page"], [aria-selected="true"], .is-selected) {
  background-color: var(--sys-tint-wash);
}
.z-row:is([aria-current="true"], [aria-current="page"], [aria-selected="true"], .is-selected) :is(.z-row__sub, .z-row__value) {
  color: var(--sys-tint-ink);
}
/* Variantes */
.z-row--action { color: var(--sys-tint); }
.z-row--action .z-row__lead { color: var(--sys-tint); }
.z-row--destructive, .z-row--destructive .z-row__lead { color: var(--sys-destructive-ink); }
:is(.z-row--field, .z-row--select, .z-row--date) > .z-row__title,
:is(.z-row--field, .z-row--select, .z-row--date) > label { flex: 0 0 40%; min-inline-size: 0; }
:is(.z-row--field, .z-row--select, .z-row--date) > :is(input, select, .z-row__control) {
  flex: 1 1 auto;
  min-inline-size: var(--sys-target);
  min-block-size: var(--sys-target);
  text-align: end;
  text-align-last: end;
}
/* Sem lugar na linha (aparelho estreito, texto grande), o rótulo nunca
   disputa largura com o valor nem com o campo: quem não cabe desce para a
   linha de baixo, à direita (com o chevron). Decide o conteúdo, não um
   ponto de quebra: o título pede no mínimo 8rem (cresce com o texto), o
   rótulo do campo pede a própria largura e o campo 6rem. Sem isso o valor
   que não quebra espremia o título até uma letra por linha. */
.z-row:has(> .z-row__value) { flex-wrap: wrap; row-gap: var(--sys-space-2); }
.z-row:has(> .z-row__value) > .z-row__body { flex: 1 1 min(8rem, 60%); }   /* 60%: com texto grande o ícone não fica sozinho na linha */
.z-row > .z-row__value { margin-inline-start: auto; }
:is(.z-row--field, .z-row--select, .z-row--date) { flex-wrap: wrap; row-gap: 0; }
:is(.z-row--field, .z-row--select, .z-row--date) > :is(.z-row__title, label) { flex: 1 0 auto; max-inline-size: 100%; }
:is(.z-row--field, .z-row--select, .z-row--date) > :is(input, select, .z-row__control) { flex: 1 1 6rem; }
/* A data tem largura própria e curta: ela não desce; quem cede é o rótulo,
   que quebra em duas linhas. */
/* O menu que desce para a linha de baixo continua à direita, com o chevron
   na margem, e não solto no meio da célula. */
.z-row--select > .z-select--inline { margin-inline-start: auto; }
.z-row--date { flex-wrap: nowrap; }
.z-row--date > :is(.z-row__title, label) { flex: 1 1 auto; min-inline-size: 0; }
/* Na linha, a data é um valor como os outros (km, total): sem cápsula, sem
   ícone de calendário, à direita, no mesmo corpo. Estreita, ela deixa o
   rótulo numa linha só. O seletor do aparelho abre ao tocar em qualquer
   ponto do valor (o indicador invisível cobre o campo inteiro). */
.z-row--date > .z-date {
  flex: none;
  position: relative;
  padding-inline: 0;
  border-inline-width: 0;
  background-color: transparent;
  text-align: end;
}
.z-row--date > .z-date:not(:focus, :focus-visible, .is-focused) { outline: none; }
.z-row--date > .z-date:is(:focus, :focus-visible, .is-focused) { outline-offset: var(--sys-focus-offset); border-radius: var(--sys-radius-control); }
.z-row--date > .z-date:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) { background-color: transparent; color: var(--sys-label-2); }
.z-row--date > .z-date::-webkit-date-and-time-value { text-align: end; }
.z-row--date > .z-date::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.z-field--inline { flex-wrap: wrap; row-gap: 0; }
.z-field--inline .z-field__label { flex: 1 0 auto; max-inline-size: 100%; }
.z-field--inline :is(.z-field__input:not(.z-field__control > *), .z-field__control) { flex: 1 1 6rem; }
/* Lançamento do extrato: círculo de 32 tingido com ícone 18. Como no Wallet,
   título e subtítulo numa linha cada, com reticências, e o valor inteiro à
   direita. Em contêiner estreito (abaixo de 20rem, ou texto grande) o valor
   desce para baixo do texto e nada mais corta. */
.z-row--entry { --cmp-row-lead: var(--sys-control-s-visual); }
.z-row--entry > .z-row__lead {
  margin-block: calc((1lh - var(--cmp-row-lead)) / 2);
  border-radius: var(--sys-radius-full);
  background: var(--sys-tint-wash);
  color: var(--sys-tint-ink);
}
.z-row--entry > .z-row__lead > .z-ic { --cmp-ic-size: var(--sys-icon-18); }
.z-row--entry :is(.z-row__title, .z-row__sub) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.z-row--entry .z-row__value { max-inline-size: none; color: var(--sys-label); }
.z-row--entry .z-row__value.is-gain { color: var(--sys-tint-ink); }
@container grupo (width < 20rem) {
  .z-row--entry { flex-wrap: wrap; row-gap: var(--sys-space-2); }
  .z-row--entry :is(.z-row__title, .z-row__sub) { white-space: normal; }
  .z-row--entry > .z-row__value { flex-basis: 100%; padding-inline-start: calc(var(--cmp-row-lead) + var(--cmp-row-gap)); text-align: start; white-space: normal; }
}
/* Veículo: miniatura 64 × 44 (88 × 58 na folha Garagem), nome Headline. */
.z-row--vehicle { --cmp-thumb-w: var(--sys-row-thumb-w); --cmp-thumb-h: var(--sys-row-thumb-h); }
.z-row--vehicle-lg { --cmp-thumb-w: var(--sys-row-thumb-w-lg); --cmp-thumb-h: var(--sys-row-thumb-h-lg); }
.z-row__thumb {
  flex: none;
  inline-size: var(--cmp-thumb-w);
  block-size: var(--cmp-thumb-h);
  object-fit: contain;
  border-radius: var(--sys-radius-tag);
}
.z-row--vehicle .z-row__title {
  font: var(--sys-type-headline);
  letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
}
.z-row--vehicle.is-locked .z-row__thumb { opacity: 0.4; }   /* imagem, não texto */
.z-row--vehicle .z-row__lock { color: var(--sys-label-2); }
.z-row--vehicle .z-row__lock > .z-ic { --cmp-ic-size: var(--sys-icon-18); }
/* Estado na célula da garagem (§11): glifo do estado + frase na tinta. */
.z-row__state {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--sys-space-4);
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  color: var(--cmp-estado-ink, var(--sys-label-2));
  white-space: nowrap;
}
.z-row__state > .z-ic { --cmp-ic-size: var(--sys-icon-13); color: var(--cmp-estado, currentColor); }
.z-row__state[data-estado="ok"] { color: var(--sys-label-2); }
/* Tile de 30 dos Ajustes: cheio, igual nos dois temas, glifo 18 branco. Entra
   no respiro da linha (a linha continua com 44). */
.z-row__tile {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--cmp-tile);
  block-size: var(--cmp-tile);
  margin-block: calc((1lh - var(--cmp-tile)) / 2);
  border-radius: var(--sys-radius-tag);
  background: var(--sys-tile-green);
  color: var(--sys-on-tile);
}
.z-row__tile > .z-ic { --cmp-ic-size: var(--sys-icon-18); }
.z-row__tile--indigo { background: var(--sys-tile-indigo); }
.z-row__tile--blue   { background: var(--sys-tile-blue); }
.z-row__tile--gray   { background: var(--sys-tile-gray); }

/* ---- Linha com lixeira (.entry, .hist li, .garage-row, .chat-history-item):
 *      o botão que abre a linha ocupa tudo menos a lixeira de 44 × 44, que
 *      fica visível sempre e só abre a confirmação (cinza, nunca vermelha). */
.z-trashrow {
  display: flex;
  align-items: center;
  padding-inline-end: var(--sys-space-4);
}
.z-trashrow > :first-child { flex: 1 1 auto; min-inline-size: 0; }
/* A lixeira já tem a caixa de 44 com o glifo no meio: a linha não soma os 16
   dela antes da lixeira (o título ganha esse espaço). */
.z-trashrow > .z-row { padding-inline-end: var(--sys-space-4); }
/* O recuo do fio vem do grupo (que olha a miniatura e o círculo dentro da linha). */
.z-trashrow__del {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--sys-target);
  block-size: var(--sys-target);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sys-radius-full);
  background: transparent;
  color: var(--sys-label-2);
  transition: opacity var(--sys-dur-fade-l) var(--sys-ease-fade);
}
.z-trashrow__del > .z-ic { --cmp-ic-size: var(--sys-icon-20); }
@media (hover: hover) and (pointer: fine) {
  .z-trashrow__del:not(:disabled, [aria-disabled="true"]):hover { color: var(--sys-label); }
}
.z-trashrow__del.is-hover { color: var(--sys-label); }
.z-trashrow__del:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) { opacity: var(--sys-press-opacity-bar); transition-duration: var(--sys-dur-press); }
.z-trashrow__del:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); }
.z-trashrow__del:is(:disabled, [aria-disabled="true"]) { color: var(--sys-label-disabled); }

/* ---- Contador (.z-count): cinza, a forma do distintivo. Não é estado nem
 *      pílula. A caixa cresce com a fonte (em), para o número não vazar do
 *      círculo com o texto a 200%. ----------------------------------------- */
.z-count {
  --cmp-count-size: max(22px, calc(22em / 13));
  --cmp-count-bg: var(--sys-fill);
  --cmp-count-fg: var(--sys-label);        /* 13,88                          */
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-inline-size: var(--cmp-count-size);
  block-size: var(--cmp-count-size);
  padding-inline: max(var(--sys-space-6), calc(6em / 13));
  border-radius: var(--sys-radius-full);
  background: var(--cmp-count-bg);
  color: var(--cmp-count-fg);
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* ---- Minigráfico (.z-spark, ganchos .tile-spark e svg.cost-mini): 32 de
 *      altura, barras de 6 (vão 4) ou linha de 2; o último em verde. ------- */
.z-spark {
  --cmp-spark-h: 32px;
  --cmp-spark-bar: 6px;
  display: inline-flex;
  align-items: flex-end;
  gap: var(--sys-space-4);
  block-size: var(--cmp-spark-h);
  color: var(--sys-tint);
}
.z-spark__bar {
  inline-size: var(--cmp-spark-bar);
  block-size: calc(var(--h, 1) * 100%);
  min-block-size: var(--sys-space-2);
  border-radius: var(--sys-radius-bar) var(--sys-radius-bar) 0 0;
  background: var(--sys-fill-strong);
}
.z-spark__bar:last-child, .z-spark__bar.is-current { background: var(--sys-tint); }
svg.z-spark { inline-size: auto; overflow: visible; }
svg.z-spark rect { fill: var(--sys-fill-strong); }
svg.z-spark rect.is-current, svg.z-spark rect:last-of-type { fill: var(--sys-tint); }
svg.z-spark :is(path, polyline) { fill: none; stroke: var(--sys-tint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---- Anel (.z-ring): a fração consumida do intervalo, enchendo no sentido
 *      horário desde as 12 h até vencer (§10.3). SVG com trilho e arco; o
 *      arco recebe stroke-dasharray "p·100 100" (atributo, com pathLength=100)
 *      ou --p no style do .z-ring. Tamanhos S 28 · M 40 · L 96 · XL 120. ---- */
.z-ring {
  --cmp-ring-size: 40px;
  --cmp-ring-stroke: 4px;
  --cmp-ring-track: var(--sys-ring-track);
  --cmp-ring-icon: var(--sys-icon-ring);
  --cmp-ring-color: var(--cmp-estado, var(--sys-ok));
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--cmp-ring-size);
  block-size: var(--cmp-ring-size);
  color: var(--cmp-estado-icone, var(--sys-label-2));
}
.z-ring__svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}
.z-ring__svg circle {
  cx: 50%;
  cy: 50%;
  r: calc(50% - var(--cmp-ring-stroke) / 2);
  fill: none;
  stroke-width: var(--cmp-ring-stroke);
}
.z-ring__track { stroke: var(--cmp-ring-track); }
.z-ring__arc { stroke: var(--cmp-ring-color); stroke-linecap: round; }
.z-ring[style*="--p"] .z-ring__arc { stroke-dasharray: calc(var(--p) * 100) 100; }
.z-ring > .z-ic { position: relative; --cmp-ic-size: var(--cmp-ring-icon); }
/* Vencido: o círculo inteiro. Sem registro e falta um dado: trilho fino e
   contínuo em cinza, sem arco (falta um dado leva "pergunta" no centro). Era
   tracejado, e os traços curtos e radiais formavam o indicador de atividade
   do iOS: a pessoa esperava algo carregar. */
:is(.z-ring[data-estado="overdue"], [data-estado="overdue"] .z-ring) .z-ring__arc { stroke-dasharray: none; }
:is(.z-ring[data-estado="unknown"], [data-estado="unknown"] .z-ring,
    .z-ring[data-estado="missing"], [data-estado="missing"] .z-ring) .z-ring__arc { display: none; }
:is(.z-ring[data-estado="unknown"], [data-estado="unknown"] .z-ring,
    .z-ring[data-estado="missing"], [data-estado="missing"] .z-ring) .z-ring__track {
  stroke: var(--cmp-ring-unknown, var(--sys-unknown));
  stroke-dasharray: none;
  stroke-width: max(1.5px, calc(var(--cmp-ring-stroke) - 2px));
}
/* Sobre o fundo agrupado (cabeçalho da ficha) o cinza reprova: versão forte. */
.z-ring--strong { --cmp-ring-unknown: var(--sys-unknown-strong); }
.z-ring--s  { --cmp-ring-size: 28px;  --cmp-ring-stroke: 3px;  --cmp-ring-icon: var(--sys-icon-16); }
.z-ring--l  { --cmp-ring-size: 96px;  --cmp-ring-stroke: 8px;  --cmp-ring-icon: var(--sys-icon-ring-l); }
.z-ring--xl { --cmp-ring-size: 120px; --cmp-ring-stroke: 10px; --cmp-ring-icon: var(--sys-icon-48); }
/* Anel ao aparecer (primeira pintura): o arco já nasce no valor final; o
   grupo gira de −60° e funde (nada de stroke-dashoffset). */
:is(.z-enter, .card-enter) .z-ring__svg,
.z-ring.z-enter .z-ring__svg {
  animation: z-ring-in var(--sys-dur-smooth) var(--sys-ease-smooth) backwards;
  animation-delay: calc(min(var(--i, 0), var(--sys-stagger-max)) * var(--sys-stagger));
}
/* "Marcar como feito": o anel novo (quase vazio, verde) entra girando. */
.z-ring.is-renewed .z-ring__svg {
  animation: z-ring-renew var(--sys-dur-bouncy) var(--sys-ease-bouncy) backwards;
}

/* ---- Linha de manutenção (.z-item, gancho article.card[data-estado]).
 *      | 16 | anel 40 | 12 | título [marcas 13]          [ Feito ] | 16 |
 *      |    |         |    | glifo + prazo                          |    |
 *      .card-title-btn é o bloco principal (anel, título, prazo): vai da
 *      borda esquerda até 8 antes da ação, altura da linha (≥ 68).
 *      Uma regra só para a ação: na mesma linha, à direita, sempre; ou
 *      embaixo, alinhada ao texto, sempre (contêiner < 20rem, texto grande,
 *      ou .z-item--stack que o JS liga quando o rótulo é largo). Nunca desce
 *      sozinha por falta de alguns pixels. O nome do item quebra em até 3
 *      linhas (nunca reticências na primeira linha) e só entre palavras. */
.z-item {
  --cmp-item-min-h: var(--sys-row-item-min);
  --cmp-item-gap: 12px;
  --cmp-item-sep-inset: var(--sys-row-item-inset);
  display: flex;
  align-items: center;
  column-gap: var(--sys-space-8);
  min-block-size: var(--cmp-item-min-h);
  padding-inline-end: var(--sys-cell-pad-x);
  background-color: transparent;
  transition: background-color var(--sys-dur-fade-l) var(--sys-ease-fade);
  -webkit-tap-highlight-color: transparent;
}
.z-item__main {
  display: flex;
  align-items: center;
  gap: var(--cmp-item-gap);
  flex: 1 1 0;
  box-sizing: border-box;
  min-inline-size: 0;
  min-block-size: var(--cmp-item-min-h);
  margin: 0;
  padding: var(--sys-cell-pad-y) 0 var(--sys-cell-pad-y) var(--sys-cell-pad-x);
  border: 0;
  background: transparent;
  color: var(--sys-label);
  text-align: start;
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  cursor: default;
  appearance: none;
}
.z-item__main:is(:focus-visible, .is-focused),
.z-item.is-focused > .z-item__main { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); border-radius: var(--sys-radius-control); }
/* Linha que só abre (o chevron é a única coisa à direita): no foco a linha
   inteira acende, com o chevron dentro, em vez de um retângulo que parava
   30 px antes da borda. Linha com botão próprio ("Feito") segue com o anel
   no corpo, porque o botão tem o foco dele. */
.z-item:has(> .z-item__action > .z-row__acc:only-child):has(> .z-item__main:focus-visible),
.z-item.is-focused:has(> .z-item__action > .z-row__acc:only-child) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); border-radius: var(--sys-radius-control); }
.z-item:has(> .z-item__action > .z-row__acc:only-child) > .z-item__main:focus-visible,
.z-item.is-focused:has(> .z-item__action > .z-row__acc:only-child) > .z-item__main { outline: none; }
.z-item__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-inline-size: 0;
  gap: var(--sys-space-2);
}
.z-item__head { display: flex; align-items: center; gap: var(--sys-space-4); min-inline-size: 0; }
.z-item__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  min-inline-size: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
  font: var(--sys-type-headline);
  letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
  color: var(--sys-label);
}
/* Procedência (manual, meu item, tração, estimativa): ícones de 13 bold. */
.z-item__marks { display: inline-flex; align-items: center; gap: var(--sys-space-4); flex: none; align-self: flex-start; margin-block-start: 0.25lh; color: var(--sys-label-2); }
.z-item__marks .z-ic { --cmp-ic-size: max(var(--sys-icon-13), 0.8em); }   /* cresce com o texto grande */
/* Dentro do título (colada à última palavra, também com o nome em duas
   linhas): segue a linha do texto. */
.z-item__fim { white-space: nowrap; }
/* Com texto grande a última palavra sozinha pode passar da linha: aí a
   marca desce com ela em vez de cortar. */
html.texto-grande .z-item__fim { white-space: normal; }
html.texto-grande .z-item__marks { white-space: nowrap; }
:is(.z-item__title, .z-item__fim) > .z-item__marks { margin-block-start: 0; margin-inline-start: var(--sys-space-4); vertical-align: -0.05em; }
/* Prazo: em dia e sem registro em cinza 400, sem glifo; vencido e vence logo
   com o glifo fill de 16 na cor gráfica e a frase 600 na tinta do estado. */
.z-item__due {
  display: flex;
  align-items: center;
  gap: var(--sys-space-4);
  min-inline-size: 0;
  margin: 0;
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  color: var(--sys-label-2);
}
.z-item__due > .z-ic { --cmp-ic-size: var(--sys-icon-16); color: var(--cmp-estado); }
.z-item:is([data-estado="overdue"], [data-estado="soon"]) .z-item__due { color: var(--cmp-estado-ink); font-weight: 600; }
.z-item__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sys-space-8);
  flex: none;
  max-inline-size: 60%;
}
/* .status continua na linha (o leitor de tela e o primeiro-uso leem), mas o
   estado na tela é anel + glifo + frase: some para o olho (o mesmo recorte
   do .z-sr, que mora nos utilitários). */
/* Pressão: o fundo da linha (não quando o toque é no botão "Feito"). */
.z-item:has(> .z-item__main:is(:active, .is-pressed)),
.z-item:is(:active, .is-pressed):not(:has(:is(button, a):active)) {
  background-color: var(--sys-fill-strong);
  transition: background-color var(--sys-dur-press) var(--sys-ease-press) var(--sys-dur-row-highlight-delay);
}
/* O prazo (cinza ou tinta do estado) vai ao label sobre o realce: AA; o
   glifo e o anel continuam na cor do estado. */
.z-item:is(:has(> .z-item__main:is(:active, .is-pressed)), :is(:active, .is-pressed):not(:has(:is(button, a):active))) .z-item__due { color: var(--sys-label); }
@media (hover: hover) and (pointer: fine) {
  .z-item:has(> .z-item__main:not(:disabled, [aria-disabled="true"]):hover):not(:active) { background-color: var(--sys-row-hover); }
}
.z-item.is-hover { background-color: var(--sys-row-hover); }
.z-item:has(> .z-item__main:is(:disabled, [aria-disabled="true"])) :is(.z-item__title, .z-item__due, .z-item__marks) { color: var(--sys-label-disabled); }
/* Aberta no painel (≥ 1280): lavado verde. A frase cinza (em dia, sem
   registro) vai para a tinta verde (label-2 sobre o lavado dá 4,30); vence
   logo mantém a tinta do estado (4,68 no claro, 6,79 no escuro); a frase do
   vencido vai ao label, como na pressão (o vermelho sobre o lavado escuro dá
   4,21), e o glifo continua vermelho. O botão tingido ganha a superfície
   para não sumir. */
.z-item:is([aria-current="true"], .is-selected) { background-color: var(--sys-tint-wash); }
.z-item:is([aria-current="true"], .is-selected):not([data-estado="overdue"]):not([data-estado="soon"]) .z-item__due { color: var(--sys-tint-ink); }
.z-item:is([aria-current="true"], .is-selected)[data-estado="overdue"] .z-item__due { color: var(--sys-label); }
.z-item:is([aria-current="true"], .is-selected) .z-item__action :is(.z-btn--tinted, .z-btn--gray) { background-color: var(--sys-surface); }
/* Empilhada: a ação desce para baixo do prazo, alinhada ao texto. */
.z-item--stack { flex-wrap: wrap; }
.z-item--stack > .z-item__main { flex-basis: 100%; min-block-size: 0; padding-block-end: var(--sys-space-4); }
.z-item--stack > .z-item__action { max-inline-size: calc(100% - var(--cmp-item-sep-inset)); margin-inline-start: var(--cmp-item-sep-inset); padding-block-end: var(--sys-cell-pad-y); }
/* Ação que é só o chevron não desce: sozinho na linha de baixo ele caía na
   borda esquerda, entre uma linha e outra. */
@container grupo (width < 20rem) {
  .z-item:not(:has(> .z-item__action > .z-row__acc:only-child)) { flex-wrap: wrap; }
  .z-item:not(:has(> .z-item__action > .z-row__acc:only-child)) > .z-item__main { flex-basis: 100%; min-block-size: 0; padding-block-end: var(--sys-space-4); }
  .z-item:not(:has(> .z-item__action > .z-row__acc:only-child)) > .z-item__action { max-inline-size: calc(100% - var(--cmp-item-sep-inset)); margin-inline-start: var(--cmp-item-sep-inset); padding-block-end: var(--sys-cell-pad-y); }
}
html.texto-grande .z-item:not(:has(> .z-item__action > .z-row__acc:only-child)) { flex-wrap: wrap; }
html.texto-grande .z-item:not(:has(> .z-item__action > .z-row__acc:only-child)) > .z-item__main { flex-basis: 100%; min-block-size: 0; padding-block-end: var(--sys-space-4); }
html.texto-grande .z-item:not(:has(> .z-item__action > .z-row__acc:only-child)) > .z-item__action { max-inline-size: calc(100% - var(--cmp-item-sep-inset)); margin-inline-start: var(--cmp-item-sep-inset); padding-block-end: var(--sys-cell-pad-y); }

/* ---- Entrada de lista (só na 1ª pintura de cada aba): sobe 12 e funde,
 *      quick, degrau de 25 ms até a 7ª linha. Termina em 512 ms. Sem escala.
 *      O JS põe .z-enter (gancho .card-enter) e style="--i:n". ----------- */
:is(.z-enter, .card-enter):not(.z-ring):not(.z-meter):not(.z-chart):not(.z-bubble) {
  animation: z-enter var(--sys-dur-quick) var(--sys-ease-quick) backwards;
  animation-delay: calc(min(var(--i, 0), var(--sys-stagger-max)) * var(--sys-stagger));
}

/* ---- Cabeçalho da ficha (.z-itemhead, gancho .item-situation): anel L,
 *      estado em Headline na tinta, prazo, ação L. Sobre o fundo agrupado. -- */
.z-itemhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sys-space-8);
  padding-block: var(--sys-space-8) var(--sys-space-16);
  text-align: center;
}
.z-itemhead .z-ring { --cmp-ring-unknown: var(--sys-unknown-strong); margin-block-end: var(--sys-space-4); }
.z-itemhead__state {
  margin: 0;
  font: var(--sys-type-headline);
  letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
  color: var(--cmp-estado-ink, var(--sys-label));
}
.z-itemhead__due {
  margin: 0;
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  color: var(--sys-label-2);
  text-wrap: balance;
}
.z-itemhead__action { align-self: stretch; margin-block-start: var(--sys-space-8); }

/* ---- Bloco-resumo (.z-summary + .z-summary__tile, ganchos .summary, .stat,
 *      .stat-num, .stat-label, [data-filter], .stat-active): as listas
 *      inteligentes do Lembretes. 2×2; 4×1 com a vista ≥ 30rem; 1 coluna em
 *      texto grande. É filtro (aria-pressed). O disco colorido é o PRÓPRIO
 *      glifo de estado cheio (status-vencido, status-logo…), na cor gráfica
 *      do estado, com o símbolo vazado na cor do bloco: um círculo só, como
 *      no Lembretes (um círculo pintado com outro glifo circular dentro lia
 *      como alvo). ----------------------------------------------------------- */
.z-summary {
  --cmp-summary-tile-h: 88px;
  --cmp-summary-circle: var(--sys-icon-summary);
  --cmp-summary-gap: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cmp-summary-gap);
}
@container vista (min-width: 30rem) {
  .z-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
html.texto-grande .z-summary { grid-template-columns: minmax(0, 1fr); }
.z-summary__tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  box-sizing: border-box;
  min-block-size: var(--cmp-summary-tile-h);
  margin: 0;
  padding: var(--sys-space-12);
  border: 0;
  border-radius: var(--sys-radius-card);
  background-color: var(--sys-surface);
  color: var(--sys-label);
  text-align: start;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  transition: transform var(--sys-dur-snappy) var(--sys-ease-snappy),
              background-color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-summary__tile:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) {
  transform: scale(var(--sys-press-scale-card));
  transition: transform var(--sys-dur-press) var(--sys-ease-press);
}
.z-summary__tile:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset); }
@media (hover: hover) and (pointer: fine) {
  .z-summary__tile:not(:disabled, [aria-disabled="true"]):hover:not([aria-pressed="true"]):not(.stat-active) { background-color: var(--sys-row-hover); }
}
.z-summary__tile.is-hover:not([aria-pressed="true"]):not(.stat-active) { background-color: var(--sys-row-hover); }
.z-summary__tile:is(:disabled, [aria-disabled="true"]) :is(.z-summary__count, .stat-num, .z-summary__label, .stat-label) { color: var(--sys-label-disabled); }
.z-summary__circle {
  display: grid;
  place-items: center;
  grid-column: 1;
  grid-row: 1;
  inline-size: var(--cmp-summary-circle);
  block-size: var(--cmp-summary-circle);
  margin: calc((var(--sys-space-32) - var(--cmp-summary-circle)) / 2);  /* o disco do glifo ocupa ~ 28 */
  color: var(--cmp-estado);
}
.z-summary__circle > .z-ic { --cmp-ic-size: var(--sys-icon-summary); }
.z-summary__tile :is(.z-summary__count, .stat-num) {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  font: var(--sys-type-metric-l);
  letter-spacing: calc(var(--sys-track-metric-l) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  color: var(--sys-label);
}
.z-summary__tile :is(.z-summary__label, .stat-label) {
  grid-column: 1 / -1;
  grid-row: 3;
  min-inline-size: 0;
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  font-weight: 600;
  color: var(--sys-label-2);
}
/* Zero: contagem em cinza, continua tocável. */
.z-summary__tile.is-zero :is(.z-summary__count, .stat-num) { color: var(--sys-label-2); }
/* Selecionado: o lavado do estado; contagem e rótulo na tinta. */
.z-summary__tile:is([aria-pressed="true"], .stat-active) { background-color: var(--cmp-estado-wash); }
.z-summary__tile:is([aria-pressed="true"], .stat-active) :is(.z-summary__count, .stat-num, .z-summary__label, .stat-label) {
  color: var(--cmp-estado-ink);
}
@supports (corner-shape: superellipse(2)) {
  .z-summary__tile { corner-shape: var(--sys-corner-k); border-radius: calc(var(--sys-radius-card) * var(--sys-corner-factor)); }
}

/* ---- Distintivo (.z-badge): vermelho, Caption 2, conta só os vencidos. Na
 *      aba fica sobre o ícone. Some com scale(0). -------------------------- */
.z-badge {
  --cmp-badge: max(18px, 1.6em);   /* cresce com a fonte: a 200% o número não vaza */
  --cmp-badge-pad: max(5px, 0.45em);
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-inline-size: var(--cmp-badge);
  block-size: var(--cmp-badge);
  padding-inline: var(--cmp-badge-pad);
  border-radius: var(--sys-radius-full);
  background: var(--sys-badge);
  color: var(--sys-on-badge);
  font: var(--sys-type-caption-2);
  letter-spacing: calc(var(--sys-track-caption-2) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
}
.z-badge.is-entering { animation: z-pop var(--sys-dur-bouncy) var(--sys-ease-bouncy) backwards; }
.z-badge.is-leaving { animation: z-scale-out var(--sys-dur-snappy) var(--sys-ease-snappy) forwards; }

/* ---- Contador que rola (.z-dg, §8.6; o .z-num mora nos utilitários): cada dígito novo
 *      entra subindo (ou descendo) e o velho sai pelo ::before. O textContent
 *      é sempre o número. ---------------------------------------------------- */
.z-dg { position: relative; display: inline-block; }
.z-dg::before {
  content: attr(data-velho);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.z-dg[data-dir] {
  animation: z-dg-in var(--sys-dur-snappy) var(--sys-ease-snappy) backwards;
  animation-delay: calc(var(--d, 0) * var(--sys-stagger-digit));
}
.z-dg[data-dir]::before {
  animation: z-dg-out var(--sys-dur-snappy) var(--sys-ease-snappy);
  animation-delay: calc(var(--d, 0) * var(--sys-stagger-digit));
}
.z-dg[data-dir="up"]   { --cmp-dg-de: 0.6em;  --cmp-dg-para: -0.6em; }
.z-dg[data-dir="down"] { --cmp-dg-de: -0.6em; --cmp-dg-para: 0.6em; }

/* ---- Métrica (.z-metric): rótulo Footnote em cima, valor arredondado
 *      tabular, moeda e unidade (.z-metric__unit, antes ou depois do número)
 *      na regra do sistema: metade do corpo do valor, cinza, na linha de
 *      base. Herói de Custos: metric-xl.
 *      Variação (.z-metric__delta): a DIREÇÃO do ícone segue o sinal do
 *      número (subiu, caiu: quem monta escolhe o glifo) e a COR segue o
 *      juízo, passado à parte: --good (tinta verde), --bad (tinta do
 *      vencido) ou nenhum (cinza). Consumo caindo é pior: seta para baixo e
 *      --bad, nunca verde. ------------------------------------------------- */
.z-metric { display: flex; flex-direction: column; gap: var(--sys-space-2); min-inline-size: 0; }
.z-metric__label {
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  color: var(--sys-label-2);
}
.z-metric__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--sys-space-4);
  margin: 0;
  font: var(--sys-type-metric-l);
  letter-spacing: calc(var(--sys-track-metric-l) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  color: var(--sys-label);
}
.z-metric__unit {
  font-size: var(--sys-unit-scale);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sys-label-2);
}
.z-metric__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--sys-space-4);
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  color: var(--sys-label-2);
}
.z-metric__delta > .z-ic { --cmp-ic-size: var(--sys-icon-16); color: currentColor; }
.z-metric__delta--good { color: var(--sys-tint-ink); }
.z-metric__delta--bad  { color: var(--sys-overdue-ink); }
.z-metric--m .z-metric__value { font: var(--sys-type-metric-m); letter-spacing: calc(var(--sys-track-metric-m) * var(--sys-track-on)); font-variant-numeric: tabular-nums; }
.z-metric--s .z-metric__value { font: var(--sys-type-metric-s); letter-spacing: calc(var(--sys-track-metric-s) * var(--sys-track-on)); font-variant-numeric: tabular-nums; }
.z-metric--hero .z-metric__value { font: var(--sys-type-metric-xl); letter-spacing: calc(var(--sys-track-metric-xl) * var(--sys-track-on)); font-variant-numeric: tabular-nums; }
/* AX3 em diante o herói tem teto: o próprio --sys-type-metric-xl já para em
   --sys-metric-xl-max. */
/* Prejuízo no modo profissional: o vermelho vence o herói. */
.z-metric[data-estado="overdue"] .z-metric__value { color: var(--cmp-estado-ink); }

/* ---- Medidor (.z-meter, ganchos .usage-meter, .usage-bar, .usage-fill,
 *      .usage-count, .usage-note; estados usage-warn, usage-full,
 *      usage-unlimited). A largura é o style.width em % escrito em linha
 *      (contrato) e NUNCA anima: só a entrada, por scaleX. --------------- */
.z-meter {
  --cmp-meter-h: 6px;
  --cmp-meter-fill: var(--sys-tint);
  display: grid;
  gap: var(--sys-space-6);
}
.z-meter :is(.z-meter__bar, .usage-bar) {
  display: block;
  block-size: var(--cmp-meter-h);
  border-radius: var(--sys-radius-full);
  background: var(--sys-fill);
  overflow: clip;
}
.z-meter :is(.z-meter__fill, .usage-fill) {
  display: block;
  block-size: 100%;
  max-inline-size: 100%;
  border-radius: inherit;
  background: var(--cmp-meter-fill);
  transform-origin: left center;
}
.z-meter.usage-warn { --cmp-meter-fill: var(--sys-soon); }
.z-meter.usage-full { --cmp-meter-fill: var(--sys-overdue); }
.z-meter :is(.z-meter__count, .usage-count) {
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sys-label);
}
.z-meter :is(.z-meter__note, .usage-note) {
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  color: var(--sys-label-2);
}
.z-meter.usage-unlimited :is(.z-meter__count, .usage-count) { display: inline-flex; align-items: center; gap: var(--sys-space-4); }
.z-meter.usage-unlimited .z-ic { --cmp-ic-size: var(--sys-icon-13); color: var(--sys-tint); }
/* Compacto (barra do Assistente): trilho de 40 ao lado de "2/3". */
.z-meter--compact {
  --cmp-meter-w: 40px;
  --cmp-meter-h: 4px;
  display: inline-flex;
  align-items: center;
  gap: var(--sys-space-6);
}
.z-meter--compact :is(.z-meter__bar, .usage-bar) { inline-size: var(--cmp-meter-w); }
.z-meter.z-enter :is(.z-meter__fill, .usage-fill) {
  animation: z-grow-x var(--sys-dur-smooth) var(--sys-ease-smooth) backwards;
}

/* ---- Progresso de passos (.z-progress, ganchos .onb-progress, .onb-step,
 *      .onb-dots): barra de 4 que enche por scaleX(--p) e o "Passo 3 de 7"
 *      de hoje em Footnote, visível. Os pontos ficam no DOM, fora da vista. */
.z-progress { --cmp-progress-h: 4px; display: grid; gap: var(--sys-space-8); justify-items: center; }
.z-progress__bar {
  inline-size: 100%;
  block-size: var(--cmp-progress-h);
  border-radius: var(--sys-radius-full);
  background: var(--sys-fill);
  overflow: clip;
}
.z-progress__fill {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--sys-tint);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform var(--sys-dur-smooth) var(--sys-ease-smooth);
}
.z-progress :is(.z-progress__text, .onb-step) {
  margin: 0;
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  color: var(--sys-label-2);
}
.z-progress .onb-dots { display: none; }

/* ---- Gráfico (.z-chart, estilo Swift Charts, SVG feito à mão): barras de
 *      ponta arredondada, grade só horizontal, eixo Y à direita, régua e
 *      balão na seleção; séries por data-serie (nunca estado).
 *      O balão mora ACIMA da área do gráfico (uma faixa reservada sempre,
 *      para nada pular ao selecionar), centrado na barra escolhida (--x, em
 *      % da largura, escrito pelo JS) e preso às bordas. ----------------- */
.z-chart {
  --cmp-serie: var(--sys-series-1);
  --cmp-swatch: 8px;
  --cmp-chart-tip-w: 9rem;
  --cmp-chart-tip-h: 3.5rem;
  position: relative;
}
/* Gráfico de barras (o que tem seleção): a faixa do balão fica reservada. */
.z-chart:has(.z-chart__bar) { padding-block-start: calc(var(--cmp-chart-tip-h) + var(--sys-space-8)); }
.z-chart svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.z-chart [data-serie="1"] { --cmp-serie: var(--sys-series-1); }
.z-chart [data-serie="2"] { --cmp-serie: var(--sys-series-2); }
.z-chart [data-serie="3"] { --cmp-serie: var(--sys-series-3); }
.z-chart [data-serie="4"] { --cmp-serie: var(--sys-series-4); }
.z-chart__grid { stroke: var(--sys-separator); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.z-chart__axis {
  font: var(--sys-type-caption-1);
  letter-spacing: calc(var(--sys-track-caption-1) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  fill: var(--sys-label-2);
}
.z-chart__bar { fill: var(--cmp-serie); transition: opacity var(--sys-dur-fade) var(--sys-ease-fade); }
.z-chart__line { fill: none; stroke: var(--cmp-serie); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.z-chart__point { fill: var(--cmp-serie); stroke: var(--sys-surface); stroke-width: 2; }
.z-chart__rule { stroke: var(--sys-label-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Seleção: as outras barras a .35. Teclado: foco na barra. */
.z-chart.is-selecting .z-chart__bar:not(.is-selected) { opacity: 0.35; }
.z-chart__bar:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset); }
.z-chart__tip {
  position: absolute;
  z-index: var(--sys-z-raised);
  inset-block-start: 0;
  inset-inline-start: clamp(0px, calc(var(--x, 50%) - var(--cmp-chart-tip-w) / 2), calc(100% - var(--cmp-chart-tip-w)));
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sys-space-2);
  box-sizing: border-box;
  inline-size: var(--cmp-chart-tip-w);
  min-block-size: var(--cmp-chart-tip-h);
  padding: var(--sys-space-8) var(--sys-space-12);
  border-radius: var(--sys-radius-control);
  background: var(--sys-surface-elevated);
  box-shadow: var(--sys-shadow-popover);
  pointer-events: none;
  white-space: nowrap;
}
.z-chart__tip-value {
  font: var(--sys-type-headline);
  letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  color: var(--sys-label);
}
.z-chart__tip-date {
  font: var(--sys-type-caption-1);
  letter-spacing: calc(var(--sys-track-caption-1) * var(--sys-track-on));
  color: var(--sys-label-2);
}
.z-chart__legend { display: flex; flex-wrap: wrap; gap: var(--sys-space-8) var(--sys-space-16); margin: var(--sys-space-12) 0 0; padding: 0; list-style: none; }
.z-chart__legend > li { display: inline-flex; align-items: center; gap: var(--sys-space-6); font: var(--sys-type-footnote); letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on)); color: var(--sys-label-2); }
.z-chart__swatch {
  display: inline-block;
  inline-size: var(--cmp-swatch);
  block-size: var(--cmp-swatch);
  border-radius: var(--sys-radius-full);
  background: var(--cmp-serie);
}
.z-chart__label {
  font: var(--sys-type-caption-1);
  letter-spacing: calc(var(--sys-track-caption-1) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  fill: var(--sys-label);
  color: var(--sys-label);
}
.z-chart.z-enter .z-chart__bar {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: z-grow-y var(--sys-dur-gentle) var(--sys-ease-gentle) backwards;
  animation-delay: calc(min(var(--i, 0), 13) * var(--sys-stagger) * 0.72);
}

/* ---- Fatos (.z-facts, gancho dl.item-facts): uma célula por fato (div com
 *      dt + dd). Rótulo Body à esquerda, valor Body cinza à direita. ----- */
.z-facts { margin: 0; }
.z-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sys-space-16);
  min-block-size: var(--sys-cell-min-1);
  box-sizing: border-box;
  padding: var(--sys-cell-pad-y) var(--sys-cell-pad-x);
}
.z-facts dt {
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  color: var(--sys-label);
}
.z-facts dd {
  margin: 0;
  text-align: end;
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  color: var(--sys-label-2);
}
/* Fio entre os fatos, recuado 16 (o dl é um filho só do grupo). */
.z-facts > div { position: relative; }
.z-facts > div + div::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--sys-cell-pad-x) 0;
  border-block-start: 0.5px solid var(--sys-separator);
}

/* ---- Grupo expansível (.z-disclosure: details/summary no app). O chevron
 *      gira 180° com snappy; a altura abre seca e o conteúdo funde. ------- */
.z-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sys-space-12);
  min-block-size: var(--sys-target);
  box-sizing: border-box;
  padding: var(--sys-cell-pad-y) var(--sys-cell-pad-x);
  list-style: none;
  cursor: default;
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  font-weight: 600;
  color: var(--sys-label);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sys-dur-fade-l) var(--sys-ease-fade);
}
.z-disclosure > summary::-webkit-details-marker { display: none; }
.z-disclosure > summary:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); }
@media (hover: hover) and (pointer: fine) {
  .z-disclosure > summary:hover { background-color: var(--sys-row-hover); }
}
.z-disclosure > summary.is-hover { background-color: var(--sys-row-hover); }
.z-disclosure > summary:is(:active, .is-pressed) { background-color: var(--sys-fill-strong); transition-duration: var(--sys-dur-press); }
.z-disclosure__chev { flex: none; color: var(--sys-label-2); transition: rotate var(--sys-dur-snappy) var(--sys-ease-snappy); }
.z-disclosure__chev.z-ic, .z-disclosure__chev > .z-ic { --cmp-ic-size: var(--sys-icon-16); }
.z-disclosure[open] > summary .z-disclosure__chev { rotate: 180deg; }
.z-disclosure[open] > :not(summary) { animation: z-fade-in var(--sys-dur-quick) var(--sys-ease-quick); }
.z-disclosure > :not(summary) { padding: 0 var(--sys-cell-pad-x) var(--sys-cell-pad-y); }

/* ---- Render do veículo (.z-vehicle): imagem com width/height, sem moldura,
 *      sombra de chão estática no claro e nenhuma no escuro. -------------- */
.z-vehicle {
  --cmp-vehicle-max: 640px;      /* renders de 900 px borram acima disto */
  display: block;
  inline-size: 100%;
  max-inline-size: var(--cmp-vehicle-max);
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  filter: var(--sys-shadow-contact);
}

/* ---- Estado vazio (.z-empty): um padrão para os 11 vazios. Figura, Title 2,
 *      até duas frases e um botão M tingido. Erro de tela: aviso âmbar. --- */
.z-empty {
  --cmp-empty-w: 300px;
  --cmp-empty-fig-w: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sys-space-8);
  max-inline-size: min(var(--cmp-empty-w), 100%);
  margin-inline: auto;
  padding-block: var(--sys-space-32);
  text-align: center;
}
.z-empty > * { max-inline-size: 100%; min-inline-size: 0; }
.z-empty__fig { display: grid; place-items: center; margin-block-end: var(--sys-space-8); color: var(--sys-label-3); }
.z-empty__fig > img { inline-size: min(var(--cmp-empty-fig-w), 100%); block-size: auto; aspect-ratio: 3 / 2; object-fit: contain; filter: var(--sys-shadow-contact); }
.z-empty__fig > .z-ic { --cmp-ic-size: var(--sys-icon-empty); }
.z-empty--error .z-empty__fig { color: var(--cmp-estado, var(--sys-label-3)); }
.z-empty__title {
  margin: 0;
  font: var(--sys-type-title-2);
  letter-spacing: calc(var(--sys-track-title-2) * var(--sys-track-on));
  color: var(--sys-label);
  text-wrap: balance;
}
.z-empty__text {
  margin: 0;
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  color: var(--sys-label-2);
  text-wrap: pretty;
}
.z-empty__actions { margin-block-start: var(--sys-space-8); }

/* ---- Dica (.z-tip, estilo TipKit; substitui as faixas de aviso). Ícone 22
 *      fill na cor do assunto, título Headline, texto cinza, ações S plain,
 *      fechar 44 no canto. Mais de uma: as de baixo em --compact. -------- */
.z-tip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--sys-space-12);
  row-gap: var(--sys-space-4);
  align-items: start;
  box-sizing: border-box;
  padding: var(--sys-space-16);
  border-radius: var(--sys-radius-card);
  background: var(--sys-surface);
  color: var(--sys-label);
}
.z-tip + .z-tip { margin-block-start: var(--sys-space-12); }
.z-tip__icon { grid-column: 1; grid-row: 1 / span 2; color: var(--cmp-estado, var(--sys-tint)); }
.z-tip__icon > .z-ic, .z-tip__icon.z-ic { display: block; --cmp-ic-size: var(--sys-icon-22); }
.z-tip__title {
  grid-column: 2;
  margin: 0;
  font: var(--sys-type-headline);
  letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
  color: var(--sys-label);
  text-wrap: balance;
}
.z-tip__text {
  grid-column: 2;
  margin: 0;
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  color: var(--sys-label-2);
  text-wrap: pretty;
}
.z-tip__actions {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sys-space-8);
  margin-block-start: var(--sys-space-4);
  margin-inline-start: calc(-1 * var(--sys-space-12));
}
/* Fechar fica fora da grade (não estica a primeira linha), no canto. */
.z-tip__close { position: absolute; inset-block-start: var(--sys-space-4); inset-inline-end: var(--sys-space-4); }
.z-tip:has(> .z-tip__close) > .z-tip__title { padding-inline-end: var(--sys-space-32); }
/* Linhas do lembrete (.reminder-item): sem superfície própria, fio entre elas. */
.z-tip__rows { grid-column: 1 / -1; margin: var(--sys-space-8) calc(-1 * var(--sys-space-16)) 0; }
.z-tip__rows > * + * { border-block-start: 0.5px solid var(--sys-separator); }
.z-tip--compact { padding: var(--sys-space-12); }
.z-tip--compact .z-tip__icon > .z-ic, .z-tip--compact .z-tip__icon.z-ic { --cmp-ic-size: var(--sys-icon-18); }
.z-tip--compact .z-tip__title {
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  font-weight: 600;
}
.z-tip--compact .z-tip__text {
  font: var(--sys-type-footnote);
  letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
}
.z-tip--compact .z-tip__rows { margin-inline: calc(-1 * var(--sys-space-12)); }
/* Dispensar: funde e encolhe a .96 (quick). */
.z-tip.is-leaving { animation: z-out var(--sys-dur-quick) var(--sys-ease-quick) forwards; pointer-events: none; }
@supports (corner-shape: superellipse(2)) {
  .z-tip { corner-shape: var(--sys-corner-k); border-radius: calc(var(--sys-radius-card) * var(--sys-corner-factor)); }
}

/* ---- Esqueleto (.z-skeleton): blocos nas medidas do conteúdo, pulso de
 *      opacidade 1 → .55 → 1 em 1,6 s, sem brilho passando. -------------- */
.z-skeleton {
  --cmp-skeleton-bg: var(--sys-fill-hover);
  --cmp-skeleton-radius: var(--sys-radius-6);
  --cmp-skeleton-h: 12px;
  --cmp-skeleton-ring: 40px;
  display: block;
  inline-size: var(--w, 100%);
  block-size: var(--cmp-skeleton-h);
  border-radius: var(--cmp-skeleton-radius);
  background: var(--cmp-skeleton-bg);
  animation: z-pulse calc(var(--sys-dur-exit) * 8) var(--sys-ease-fade) infinite;
}
.z-skeleton--ring { inline-size: var(--cmp-skeleton-ring); block-size: var(--cmp-skeleton-ring); border-radius: var(--sys-radius-full); flex: none; }
.z-skeleton--title { --cmp-skeleton-h: 17px; }
/* Esqueleto da lista do plano: 4 linhas com anel e duas barras. */
.z-skeleton-item {
  display: flex;
  align-items: center;
  gap: var(--cmp-item-gap, var(--sys-space-12));
  min-block-size: var(--sys-row-item-min);
  box-sizing: border-box;
  padding: var(--sys-cell-pad-y) var(--sys-cell-pad-x);
}
.z-skeleton-item > div { display: grid; gap: var(--sys-space-8); flex: 1; }
.is-paused, .is-paused * { animation-play-state: paused; }

/* ---- Indicador de atividade (.z-spinner): 8 traços (SVG em linha, opacidade
 *      no próprio traço) girando em 8 passos, uma volta a cada 800 ms. ---- */
.z-spinner {
  display: inline-block;
  inline-size: var(--sys-icon-18);
  block-size: var(--sys-icon-18);
  flex: none;
  color: var(--sys-label-2);
  vertical-align: middle;
  animation: z-spin var(--sys-dur-spin) var(--sys-ease-steps) infinite;
}
.z-spinner :is(rect, line, path) { fill: currentColor; stroke: currentColor; }

/* ---- Digitando (.z-typing): três pontos de 7 numa bolha cinza, defasados.
 *      role="status" com o texto oculto no markup. ------------------------- */
.z-typing {
  --cmp-dot: 7px;
  display: inline-flex;
  align-items: center;
  gap: var(--sys-space-4);
  padding: var(--sys-space-12) var(--sys-space-16);
  border-radius: var(--sys-radius-card);
  background: var(--sys-fill);
  inline-size: fit-content;
  justify-self: start;
}
.z-typing > i {
  display: block;
  inline-size: var(--cmp-dot);
  block-size: var(--cmp-dot);
  border-radius: var(--sys-radius-full);
  background: var(--sys-label-2);       /* ponto: gráfico, não texto */
  animation: z-typing calc(var(--sys-dur-smooth) * 2) var(--sys-ease-fade) infinite;
}
.z-typing > i:nth-of-type(2) { animation-delay: var(--sys-dur-fade); }
.z-typing > i:nth-of-type(3) { animation-delay: calc(var(--sys-dur-fade) * 2); }

/* =============================================================================
 * §10.4 RETORNO
 * ============================================================================= */

/* ---- Toast em ilha (.z-toast, gancho .toast): preto nos dois temas, no topo,
 *      um nó só. Sem ação, pointer-events: none (não rouba toque nem o
 *      elementFromPoint da bancada). textContent = a frase (glifo é SVG).
 *      Raio de metade da altura de UMA linha: com uma linha é cápsula, com
 *      duas ou mais vira retângulo de cantos 25 (o raio total faria charuto). Com texto grande a ação desce para uma linha própria.
 *      Progresso ("Sincronizando…") leva o indicador de atividade, não um
 *      glifo de aviso. ------------------------------------------------------ */
.z-toast {
  --cmp-toast-bg: var(--sys-island);
  --cmp-toast-fg: var(--sys-on-island);
  --cmp-toast-h: 50px;
  --cmp-toast-top: var(--sys-toast-top);
  --cmp-toast-max: 360px;
  --cmp-toast-radius: calc(var(--cmp-toast-h) / 2);  /* cápsula em uma linha, cantos de 25 em duas */
  --cmp-toast-glyph: var(--sys-island-ok);
  position: fixed;
  inset-block-start: var(--cmp-toast-top);
  inset-inline: 0;
  z-index: var(--sys-z-toast);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sys-space-4) var(--sys-space-8);
  box-sizing: border-box;
  inline-size: max-content;
  max-inline-size: min(var(--cmp-toast-max), calc(100% - 2 * var(--sys-gutter)));
  min-block-size: var(--cmp-toast-h);
  margin-inline: auto;
  padding: calc(var(--sys-space-8) + var(--sys-space-2)) var(--sys-space-20) calc(var(--sys-space-8) + var(--sys-space-2)) calc(var(--sys-space-12) + var(--sys-space-2));
  border-radius: var(--cmp-toast-radius);
  background: var(--cmp-toast-bg);
  box-shadow: var(--sys-island-edge);
  color: var(--cmp-toast-fg);
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  font-weight: 600;
  text-wrap: balance;
  pointer-events: none;
  transform-origin: 50% 0;
  animation: z-toast-in var(--sys-dur-bouncy) var(--sys-ease-bouncy) backwards;
}
.z-toast > .z-ic, .z-toast__glyph { flex: none; --cmp-ic-size: var(--sys-icon-22); color: var(--cmp-toast-glyph); }
.z-toast > .z-spinner { inline-size: var(--sys-icon-22); block-size: var(--sys-icon-22); color: var(--cmp-toast-fg); }
.z-toast__text { flex: 1 1 0; min-inline-size: min(6em, 100%); }   /* com texto grande a ação desce de linha antes do glifo */
.z-toast :is(.z-ic, .z-toast__glyph, .z-toast__text) {
  animation: z-fade-in var(--sys-dur-fade) var(--sys-ease-fade) backwards;
  animation-delay: var(--sys-delay-toast-content);
}
.z-toast--aviso { --cmp-toast-glyph: var(--sys-island-soon); }
.z-toast--erro  { --cmp-toast-glyph: var(--sys-island-overdue); }
/* Com "Desfazer": só a cápsula aceita toque; botão S plain em verde-ilha. */
.z-toast--action { pointer-events: auto; padding-inline-end: var(--sys-space-4); }
.z-toast__action {
  flex: none;
  margin-inline-start: auto;
  min-inline-size: var(--sys-target);
  min-block-size: var(--sys-target);
  margin: 0 0 0 var(--sys-space-4);
  padding: 0 var(--sys-space-12);
  border: 0;
  border-radius: var(--sys-radius-full);
  background: transparent;
  color: var(--sys-island-ok);
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  font-weight: 600;
  transition: color var(--sys-dur-fade) var(--sys-ease-fade);
}
@media (hover: hover) and (pointer: fine) {
  .z-toast__action:hover { color: var(--sys-island-ok-pressed); }
}
.z-toast__action.is-hover { color: var(--sys-island-ok-pressed); }
/* Pressionado escurece a cor (7,78 no preto); a opacidade .55 dava 3,7. */
.z-toast__action:is(:active, .is-pressed) { color: var(--sys-island-ok-pressed); transition-duration: var(--sys-dur-press); }
.z-toast__action:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-island-ok); outline-offset: var(--sys-focus-offset-inset); }
/* Saída: o conteúdo some em 100, a ilha encolhe e funde (quick). */
.z-toast:is(.toast-out, .is-leaving) {
  animation: z-toast-out var(--sys-dur-quick) var(--sys-ease-quick) forwards;
  pointer-events: none;
}
.z-toast:is(.toast-out, .is-leaving) > * {
  animation: z-fade-out var(--sys-dur-exit-fast) var(--sys-ease-exit) forwards;
}
.z-toast.is-dragging { animation: none; }
/* Notebook: centrada no espaço à direita do trilho. */
@media (min-width: 1024px) {
  .z-toast { inset-inline-start: var(--sys-rail-offset); }
}

/* ---- Barra de nova versão (.z-update, gancho #zelo-update-bar): fundo
 *      OPACO no topo (o conteúdo rola por baixo e não pode aparecer atrás da
 *      frase), 44 + área segura, texto Subheadline, botão S tingido (600) e
 *      fechar. Sem lugar para os três numa linha (texto grande), o botão e o
 *      fechar descem juntos para a linha de baixo, à direita. A posição (fixed, top:0, left:0, right:0) fica em linha no
 *      mostrarBarra, porque o teste lê o código. ------------------------- */
.z-update {
  --cmp-update-btn-weight: 600;  /* atualizacao:535 passa a esperar '600' */
  position: fixed;
  z-index: var(--sys-z-banner);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sys-space-8);
  box-sizing: border-box;
  min-block-size: calc(var(--sys-bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--sys-gutter), env(safe-area-inset-right)) 0 max(var(--sys-gutter), env(safe-area-inset-left));
  background: var(--sys-material-solid);
  border-block-end: 0.5px solid var(--sys-separator);
  color: var(--sys-label);
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
}
.z-update__text { flex: 1 1 10rem; min-inline-size: 0; padding-block: var(--sys-space-4); }
/* O botão não encolhe ("Atualiz/ar"): quem quebra em linhas é a frase. */
.z-update :is(.z-btn, .z-update__btn) { flex: none; margin-inline-start: auto; font-weight: var(--cmp-update-btn-weight); }
.z-update__close { margin-inline-end: calc((var(--sys-icon-22) - var(--sys-target)) / 2); color: var(--sys-label); }

/* =============================================================================
 * §10.5 NAVEGAÇÃO E ESTRUTURA
 * ============================================================================= */

/* ---- Barra do topo (.z-navbar, gancho header.topbar): fixa, altura
 *      constante (44 + área segura; --topbar-h não muda ao rolar). No topo:
 *      transparente. Rolada: a cor opaca da tela e filete (no ::before). Marca à
 *      esquerda, Ajustes à direita, e o título pequeno FORA da grade,
 *      centrado na barra inteira: escondido, ele não toma a largura da marca
 *      (que no aparelho estreito encolhia até sumir). Quando o título entra,
 *      a marca sai (no celular os dois não cabem lado a lado; o iPhone mostra
 *      um título só). Texto sobre o vidro só em label ou tint-ink.
 *      Estados forçados (guia): .is-topo e .is-rolada. ------------------ */
.z-navbar {
  --cmp-back-max: 72px;             /* o rótulo do voltar corta antes do título */
  --cmp-navbar-side: calc(max(var(--sys-gutter), env(safe-area-inset-left)) + var(--sys-target));
  position: fixed;
  inset-block-start: var(--update-bar-h, 0px);
  inset-inline: 0 var(--z-inspector-ocupa, 0px);
  z-index: var(--sys-z-header);
  box-sizing: border-box;
  block-size: calc(var(--sys-bar-h) + var(--sys-navbar-safe-top));
  padding-block-start: var(--sys-navbar-safe-top);
  color: var(--sys-label);
}
/* Fundo da barra rolada: a cor da própria tela, OPACA, com o filete. O
   vidro translúcido deixava a frase de baixo legível ao lado do título (e,
   sem desfoque, as duas se misturavam). Uma faixa que fundisse abaixo da
   barra cobriria o cabeçalho de grupo que gruda logo embaixo dela: por isso
   o topo é sólido e termina no filete, e a fusão fica só no pé da tela. */
.z-navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sys-bg);
  border-block-end: 0.5px solid var(--sys-separator);
  opacity: 0;
  pointer-events: none;
}
.z-navbar__bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  block-size: var(--sys-bar-h);
  padding-inline: max(var(--sys-gutter), env(safe-area-inset-left)) max(var(--sys-gutter), env(safe-area-inset-right));
}
.z-navbar__leading { grid-column: 1; display: flex; align-items: center; gap: var(--sys-space-8); min-inline-size: 0; justify-self: start; }
.z-navbar__trailing {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--sys-space-4);
  justify-self: end;
  margin-inline-end: calc((var(--sys-icon-22) - var(--sys-target)) / 2);
}
/* Marca: marca-z 22 em verde + "Zelo" em Headline. */
.z-navbar__brand { display: flex; align-items: center; gap: var(--sys-space-6); min-inline-size: 0; }
.z-navbar__brand :is(.z-navbar__mark, .brand-mark) { display: inline-grid; flex: none; place-items: center; color: var(--sys-tint); }
.z-navbar__brand :is(.z-navbar__mark, .brand-mark) .z-ic { --cmp-ic-size: var(--sys-icon-22); }
.z-navbar__appname {
  margin: 0;
  font: var(--sys-type-headline);
  letter-spacing: calc(var(--sys-track-headline) * var(--sys-track-on));
  color: var(--sys-label);
  white-space: nowrap;
}
/* Título pequeno (nome do veículo e km): só aparece com a rolagem. Entre as
   laterais simétricas (o lugar do botão de 44 e da margem de cada lado); com
   o voltar, entre as laterais do voltar. */
.z-navbar__title {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: var(--cmp-navbar-side);
  translate: 0 -50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font: var(--sys-type-bar-title);
  letter-spacing: calc(var(--sys-track-bar-title) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  color: var(--sys-label);
  opacity: 0;
  pointer-events: none;
}
.z-navbar:has(.z-navbar__back) { --cmp-navbar-side: calc(max(var(--sys-gutter), env(safe-area-inset-left)) + var(--cmp-back-max) + var(--sys-space-24) + var(--sys-space-4)); }
/* Voltar (telas empurradas): voltar bold 20 + nome da tela anterior. */
.z-navbar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sys-space-2);
  min-block-size: var(--sys-target);
  margin: 0 0 0 calc(-1 * var(--sys-space-8));
  padding: 0 var(--sys-space-8) 0 0;
  border: 0;
  background: transparent;
  color: var(--sys-tint-ink);
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  transition: color var(--sys-dur-fade-l) var(--sys-ease-fade);
}
.z-navbar__back > .z-ic { flex: none; --cmp-ic-size: var(--sys-icon-20); }
.z-navbar__back > span { max-inline-size: var(--cmp-back-max); min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.z-navbar__back:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) { color: var(--sys-tint-ink-pressed); transition-duration: var(--sys-dur-press); }  /* escurece: a opacidade apagaria abaixo de AA */
@media (hover: hover) and (pointer: fine) {
  .z-navbar__back:hover { color: var(--sys-tint-ink-pressed); }
}
.z-navbar__back.is-hover { color: var(--sys-tint-ink-pressed); }
.z-navbar__back:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); border-radius: var(--sys-radius-control); }
/* Vidro e título ao rolar: por linha do tempo de rolagem onde há; senão o
   IntersectionObserver liga html.topbar-compact (contrato) e funde em 150. */
/* O título grande usa a linha do tempo de VISTA (funde enquanto passa por
   baixo da barra, onde quer que esteja: na página, numa folha, no guia), e
   não a da rolagem da página, que o apagava sempre que a página rolava. */
@supports (animation-timeline: scroll()) {
  .z-navbar::before {
    animation: z-reveal auto both;
    animation-timeline: scroll(root);
    animation-range: 0 var(--sys-space-8);
  }
  .z-navbar__title {
    animation: z-reveal auto both;
    animation-timeline: scroll(root);
    animation-range: calc(var(--sys-largetitle-h) - var(--sys-space-16)) var(--sys-largetitle-h);
  }
  .z-navbar:not(.z-navbar--view) .z-navbar__brand {
    animation: z-fade-out auto both;
    animation-timeline: scroll(root);
    animation-range: var(--sys-space-24) var(--sys-space-40);
  }
  .z-largetitle {
    animation: z-largetitle-out auto both;
    animation-timeline: view(block calc(var(--sys-bar-h) + var(--sys-navbar-safe-top)) 0px);
    animation-range: exit 0% exit 100%;
  }
}
@supports not (animation-timeline: scroll()) {
  .z-navbar::before, .z-navbar__title, .z-navbar__brand { transition: opacity var(--sys-dur-fade) var(--sys-ease-fade); }
  html.topbar-compact .z-navbar::before,
  html.topbar-compact .z-navbar__title { opacity: 1; }
  html.topbar-compact .z-navbar:not(.z-navbar--view) .z-navbar__brand { opacity: 0; }
}
/* Estados forçados (o guia mostra os dois sem depender da rolagem). */
.z-navbar:is(.is-topo, .is-rolada)::before,
.z-navbar:is(.is-topo, .is-rolada) :is(.z-navbar__title, .z-navbar__brand) { animation: none; }
.z-navbar.is-topo::before, .z-navbar.is-topo .z-navbar__title { opacity: 0; }
.z-navbar.is-rolada::before, .z-navbar.is-rolada .z-navbar__title { opacity: 1; }
.z-navbar.is-rolada:not(.z-navbar--view) .z-navbar__brand { opacity: 0; }
/* Barras próprias de vista (.chat-top, .ins-head): mesmas medidas, no mesmo
   lugar, sempre com o fundo opaco, por cima da barra da casca, cujos controles somem
   (o JS põe inert neles). */
.z-navbar--view { z-index: var(--sys-z-header-view); }
.z-navbar--view::before { opacity: 1; animation: none; }
.z-navbar--view .z-navbar__title { opacity: 1; animation: none; }
body:has(:not([hidden]) > .z-navbar--view) .z-navbar:not(.z-navbar--view) > * { visibility: hidden; }
@media (min-width: 1024px) {
  .z-navbar { inset-inline-start: var(--sys-rail-offset); }
}

/* ---- Título grande (.z-largetitle, gancho #vehicle-line): é o botão que
 *      abre a Garagem. font no PRÓPRIO botão (o e2e compara com #app-name),
 *      altura mínima 44, até 2 linhas e reticências. Ao rolar, funde e sobe
 *      8 (sem animar altura). ------------------------------------------------ */
.z-largetitle {
  display: inline-flex;
  align-items: center;
  gap: var(--sys-space-6);
  box-sizing: border-box;
  max-inline-size: 100%;
  min-block-size: var(--sys-target);
  margin: var(--sys-space-2) 0 var(--sys-space-6);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sys-label);
  text-align: start;
  font: var(--sys-type-large-title);
  letter-spacing: calc(var(--sys-track-large-title) * var(--sys-track-on));
  transform-origin: left center;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-largetitle--plain { cursor: auto; }
/* Pressionado escurece para o cinza (a opacidade .55 apagava abaixo de AA). */
button.z-largetitle:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) { color: var(--sys-label-2); transition-duration: var(--sys-dur-press); }
@media (hover: hover) and (pointer: fine) {
  button.z-largetitle:hover .z-largetitle__chev { color: var(--sys-label); }
}
button.z-largetitle.is-hover .z-largetitle__chev { color: var(--sys-label); }
.z-largetitle:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset); border-radius: var(--sys-radius-control); }
.z-largetitle__text {
  min-inline-size: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}
.z-largetitle__chev { flex: none; color: var(--sys-label-2); }
.z-largetitle__chev.z-ic, .z-largetitle__chev > .z-ic { --cmp-ic-size: var(--sys-icon-20); }
.z-largetitle > .z-count { align-self: center; }
/* O título que envolve o botão (h2.z-largetitle__h): só semântica, sem
   desenho próprio. Flex, para não somar a linha de texto em volta do botão. */
.z-largetitle__h { display: flex; max-inline-size: 100%; margin: 0; font: inherit; }
/* .z-largetitle--plain: título grande sem botão (Custos, Análise, Conversas). */

/* ---- Palco do veículo (.z-stage, gancho: o bloco de #vehicle-line). Um só
 *      no DOM, no topo do conteúdo: título grande, dono, linha técnica, o
 *      render (só Manutenção) e o hodômetro. Em Custos, sem render. ------- */
.z-stage {
  --cmp-stage-fig: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: var(--sys-space-8) var(--sys-space-16);
}
.z-stage__owner, .z-stage__sub {
  margin: 0;
  font: var(--sys-type-subheadline);
  letter-spacing: calc(var(--sys-track-subheadline) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  color: var(--sys-label-2);
}
.z-stage__owner + .z-stage__sub { margin-block-start: var(--sys-space-2); }
.z-stage__fig {
  align-self: center;
  inline-size: min(100%, var(--cmp-stage-fig));
  margin-block: var(--sys-space-8) var(--sys-space-4);
}
.z-stage > .z-odometer { margin-block-start: var(--sys-space-4); }
.z-stage:has(> .z-stage__fig:not([hidden])) > .z-odometer { align-self: center; }

/* ---- Hodômetro (.z-odometer, gancho .odometer): botão S cinza, desenho de
 *      32 numa caixa de 44, hodometro 18 (o ícone acompanha a altura de
 *      caixa do número de 20/600 ao lado, como no SF Symbols) + km em metric-s. */
.z-odometer {
  display: inline-flex;
  align-items: center;
  gap: var(--sys-space-6);
  box-sizing: border-box;
  min-block-size: var(--sys-target);
  margin: 0;
  padding: 0 var(--sys-space-16) 0 var(--sys-space-12);
  border: 0;
  border-block: var(--sys-space-6) solid transparent;
  border-radius: var(--sys-radius-full);
  background: var(--sys-fill);
  background-clip: padding-box;
  color: var(--sys-label);
  font: var(--sys-type-metric-s);
  letter-spacing: calc(var(--sys-track-metric-s) * var(--sys-track-on));
  font-variant-numeric: tabular-nums;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--sys-dur-snappy) var(--sys-ease-snappy),
              background-color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-odometer :is(.z-odometer__icon, .odometer-label) { display: inline-grid; place-items: center; color: var(--sys-label-2); }
.z-odometer .z-ic { --cmp-ic-size: var(--sys-icon-18); }
.z-odometer:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) {
  background-color: var(--sys-fill-strong);
  transform: scale(var(--sys-press-scale));
  transition: transform var(--sys-dur-press) var(--sys-ease-press), background-color var(--sys-dur-press) var(--sys-ease-press);
}
.z-odometer:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: calc(-1 * var(--sys-space-6) + var(--sys-focus-offset-inset)); }
@media (hover: hover) and (pointer: fine) {
  .z-odometer:not(:disabled, [aria-disabled="true"]):hover:not(:active) { background-color: var(--sys-fill-hover); }
}
.z-odometer.is-hover { background-color: var(--sys-fill-hover); }
.z-odometer:is(:disabled, [aria-disabled="true"]) { color: var(--sys-label-disabled); }
/* Celular deitado (baixo): palco numa linha, nome em Title 3 + km, sem render.
   Só no app (html.z-app): o iPhone desenhado no herói do site é sempre o
   aparelho de pé, qualquer que seja a janela de quem olha. */
@media (max-height: 500px) and (orientation: landscape) {
  html.z-app .z-stage { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--sys-space-12); padding-block: var(--sys-space-4) var(--sys-space-8); }
  html.z-app .z-stage .z-largetitle { margin: 0; font: var(--sys-type-title-3); letter-spacing: calc(var(--sys-track-title-3) * var(--sys-track-on)); }
  html.z-app .z-stage > :is(.z-stage__fig, .z-stage__sub, .z-stage__owner) { display: none; }
  html.z-app .z-stage > .z-odometer { margin: 0; }
  html.z-app .z-largetitle { animation: none; }
}

/* ---- Troca de aba: a vista velha some na hora (hidden), a nova funde em
 *      150, sem deslocar nada (o teste do chat mede aos 200 ms). As barras
 *      fixas da vista não entram na fusão (contexto de empilhamento). ---- */
.z-view:not([hidden]) > :not(.z-navbar):not(.chat-input-row) {
  animation: z-fade-in var(--sys-dur-fade) var(--sys-ease-fade);
}

/* ---- Cápsula de abas (.z-tabbar + .z-tab, ganchos nav.tabbar, .tab,
 *      .tab-active, aria-current, .tab-ico svg path) e o "+" (.z-tabbar-add).
 *      O nav é o invólucro; a cápsula de vidro é .z-tabbar__tabs; a lente
 *      (.z-tabbar__lens) desliza com snappy até a aba ativa.
 *      O rótulo da aba nunca leva reticências (iOS 26): as três abas têm o
 *      mesmo terço (a lente depende disso) e o rótulo encolhe o corpo para
 *      caber no terço quando a cápsula é estreita (11 px é o teto, como o
 *      tamanho do cromo, que para em XXXL). O nome inteiro fica no
 *      aria-label. -------------------------------------------------------- */
.z-tabbar {
  --cmp-tabbar-h: var(--sys-tabbar-h);
  --cmp-tabbar-item: var(--sys-label);
  --cmp-tabbar-item-active: var(--sys-tint-ink);
  --cmp-tabbar-lens: var(--sys-fill);
  --cmp-tabbar-w: var(--sys-tabbar-w);
  --cmp-tabbar-bottom: max(var(--sys-space-12), calc(env(safe-area-inset-bottom) - var(--sys-space-12)));
  --cmp-tab-label-repouso: 11px;   /* o rótulo no tamanho padrão de texto */
  position: fixed;
  inset-block-end: var(--cmp-tabbar-bottom);
  inset-inline: max(var(--sys-gutter), env(safe-area-inset-left)) max(var(--sys-gutter), env(safe-area-inset-right));
  z-index: var(--sys-z-nav);
  display: flex;
  align-items: stretch;
  gap: var(--sys-tabbar-gap);
  block-size: var(--cmp-tabbar-h);
  pointer-events: none;
  transition: opacity var(--sys-dur-quick) var(--sys-ease-quick), transform var(--sys-dur-quick) var(--sys-ease-quick);
}
.z-tabbar > * { pointer-events: auto; }
/* Borda de rolagem atrás da cápsula e do "+": a faixa cobre a largura toda
 * (também o vão entre os dois e as laterais) e sobe um pouco além do topo
 * deles. Fixa na janela; some no trilho e onde a vista tem rodapé próprio. */
.z-tabbar::before {
  content: "";
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: calc(var(--cmp-tabbar-h) + var(--cmp-tabbar-bottom) + var(--sys-scroll-edge-rise));
  background: var(--sys-scroll-edge-fill);
  -webkit-backdrop-filter: var(--sys-scroll-edge-filter);
  backdrop-filter: var(--sys-scroll-edge-filter);
  -webkit-mask-image: var(--sys-scroll-edge-mask);
  mask-image: var(--sys-scroll-edge-mask);
  pointer-events: none;
}
/* A metade lisa da faixa também segura o toque: o fundo ali esconde o
 * conteúdo, e um toque no vão entre a cápsula e o "+" (ou nas laterais) não
 * pode acionar o item invisível de baixo. O .z-tabbar já é contexto de
 * empilhamento (z-index): o ::after fica abaixo da cápsula e do "+" e acima
 * da página. A fusão de cima continua tocável. */
.z-tabbar::after {
  content: "";
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: calc(var(--cmp-tabbar-h) + var(--cmp-tabbar-bottom) + var(--sys-scroll-edge-rise) * 0.5);
  z-index: -1;
  pointer-events: auto;
}
.z-tabbar :is(.z-tabbar__brand, .z-tab--sub, .z-tabbar__toggle) { display: none; }
.z-tabbar__foot { display: contents; }
.z-tabbar__tabs {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  flex: 1 1 auto;
  min-inline-size: 0;
  box-sizing: border-box;
  padding: var(--sys-space-4);
  border-radius: var(--sys-radius-full);
  background: var(--sys-material-chrome);
  -webkit-backdrop-filter: var(--sys-material-filter);
  backdrop-filter: var(--sys-material-filter);
  box-shadow: var(--sys-shadow-float), var(--sys-material-edge);
}
.z-tabbar__lens {
  position: absolute;
  inset-block: var(--sys-space-4);
  inset-inline-start: var(--sys-space-4);
  inline-size: calc((100% - 2 * var(--sys-space-4)) / 3);
  border-radius: var(--sys-radius-full);
  background: var(--cmp-tabbar-lens);
  pointer-events: none;
  transform: translateX(calc(var(--z-tab-i, 0) * 100%));
  transition: transform var(--sys-dur-snappy) var(--sys-ease-snappy), opacity var(--sys-dur-fade) var(--sys-ease-fade);
}
/* A Análise (.z-tab--sub) mora entre Custos e Assistente no DOM, na ordem em
   que o trilho a mostra (e o Tab a percorre); na cápsula ela não aparece e
   não conta para a lente. */
.z-tabbar__tabs:has(> :nth-child(2 of .z-tab:not(.z-tab--sub)):is(.tab-active, [aria-current="page"])) { --z-tab-i: 1; }
.z-tabbar__tabs:has(> :nth-child(3 of .z-tab:not(.z-tab--sub)):is(.tab-active, [aria-current="page"])) { --z-tab-i: 2; }
.z-tabbar__tabs:not(:has(> .z-tab:is(.tab-active, [aria-current="page"]))) > .z-tabbar__lens { opacity: 0; }
.z-tab {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sys-space-2);
  min-inline-size: 0;
  min-block-size: var(--sys-target);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sys-radius-full);
  background: transparent;
  color: var(--cmp-tabbar-item);
  font: var(--sys-type-tab-label);
  letter-spacing: calc(var(--sys-track-tab-label) * var(--sys-track-on));
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.z-tab:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); }
.z-tab :is(.z-tab__ico, .tab-ico) {
  position: relative;
  display: grid;
  place-items: center;
  transition: transform var(--sys-dur-bouncy) var(--sys-ease-bouncy);
}
.z-tab :is(.z-tab__ico, .tab-ico) .z-ic { --cmp-ic-size: var(--sys-icon-tab); }
.z-tab:is(:active, .is-pressed) :is(.z-tab__ico, .tab-ico) { transform: scale(var(--sys-press-scale-icon)); transition: transform var(--sys-dur-press) var(--sys-ease-press); }
.z-tab__label { max-inline-size: 100%; overflow: hidden; white-space: nowrap; font-size: min(calc(11 * var(--u-chrome)), 16cqi); }
.z-tab:is(.tab-active, [aria-current="page"]) { color: var(--cmp-tabbar-item-active); }
/* Regular no inativo, fill no ativo: o JS desenha os dois pesos (.z-ic--off
   e .z-ic--on) e o CSS troca; o ativo entra com scale(.85 → 1). */
.z-tab:not(.tab-active):not([aria-current="page"]) .z-ic--on,
.z-tab:is(.tab-active, [aria-current="page"]) .z-ic--off { display: none; }
.z-tab:is(.tab-active, [aria-current="page"]) .z-ic--on { animation: z-pop var(--sys-dur-snappy) var(--sys-ease-snappy); }
/* Distintivo de vencidos sobre o ícone de Manutenção. */
.z-tab .z-badge {
  position: absolute;
  inset-block-start: calc(-1 * var(--sys-space-6));
  inset-inline-start: calc(50% + var(--sys-space-4));
}
/* Texto grande: o distintivo congela junto com o rótulo da aba (cromo). */
html.texto-grande .z-tab .z-badge { font-size: var(--cmp-tab-label-repouso); }
/* Sem :has(), a lente vira o fundo da própria aba ativa. */
@supports not selector(:has(*)) {
  .z-tabbar__lens { display: none; }
  .z-tab:is(.tab-active, [aria-current="page"]) { background: var(--cmp-tabbar-lens); }
}
/* O "+": círculo de 62 no mesmo vidro, adicionar bold 26 em verde. */
.z-tabbar-add {
  /* Posicionado: sem o filtro do vidro (material sólido, transparência
     reduzida, cores forçadas) ele deixaria de ser camada própria e ficaria
     por baixo da borda de rolagem, que é fixa. */
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--sys-tabbar-add);
  block-size: var(--sys-tabbar-add);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sys-radius-full);
  background: var(--sys-material-chrome);
  -webkit-backdrop-filter: var(--sys-material-filter);
  backdrop-filter: var(--sys-material-filter);
  box-shadow: var(--sys-shadow-float), var(--sys-material-edge);
  color: var(--sys-tint);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--sys-dur-snappy) var(--sys-ease-snappy);
}
.z-tabbar-add .z-ic { --cmp-ic-size: var(--sys-icon-tab); }
.z-tabbar-add:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) { transform: scale(var(--sys-press-scale)); transition: transform var(--sys-dur-press) var(--sys-ease-press); }
.z-tabbar-add:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset); }
@media (hover: hover) and (pointer: fine) {
  .z-tabbar-add:hover { color: var(--sys-tint-hover); }
}
.z-tabbar-add.is-hover { color: var(--sys-tint-hover); }
/* Teclado aberto (--teclado-h > 0, ligado pelo JS; nunca por foco): some. */
html.teclado-aberto .z-tabbar {
  opacity: 0;
  transform: translateY(var(--sys-dist-step));
  pointer-events: none;
}
html.teclado-aberto .z-tabbar > * { pointer-events: none; }
/* Texto grande: o rótulo congela no tamanho de repouso, como a barra de abas
   do iOS (escondê-lo deixava justamente quem aumenta o texto navegando só por
   ícones, e carteira e balão são ambíguos). */
html.texto-grande .z-tab__label { font-size: min(var(--cmp-tab-label-repouso), 16cqi); }
@media (min-width: 600px) {
  .z-tabbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cmp-tabbar-w) minmax(0, 1fr);
    column-gap: var(--sys-tabbar-gap);
  }
  .z-tabbar__tabs { grid-column: 2; }
  .z-tabbar-add { grid-column: 3; justify-self: start; }
}
/* Celular deitado (baixo): cápsula de 44, ícone e rótulo lado a lado. Só no
   app (html.z-app): a cápsula desenhada no herói do site fica a de pé. */
@media (max-height: 500px) and (orientation: landscape) {
  /* A borda de rolagem também baixa: com 44 de subida, barra do topo e faixa
     comiam um terço da tela deitada. */
  /* Deitado a subida é curta (24) e a fusão ocupa a subida inteira, não só a
     metade de cima: com 12 de subida e 6 de fusão, a borda virava um corte
     seco que fatiava a linha e o "Feito" ao meio. */
  html.z-app {
    --sys-scroll-edge-rise: var(--sys-space-32);
  }
  html.z-app .z-tabbar { --cmp-tabbar-h: var(--sys-target); --cmp-tabbar-bottom: max(var(--sys-space-8), env(safe-area-inset-bottom)); }
  html.z-app .z-tabbar__tabs { padding: var(--sys-space-2); }
  html.z-app .z-tabbar__lens { inset-block: var(--sys-space-2); inset-inline-start: var(--sys-space-2); inline-size: calc((100% - 2 * var(--sys-space-2)) / 3); }
  html.z-app .z-tab { flex-direction: row; gap: var(--sys-space-6); min-block-size: 0; }
  html.z-app .z-tab :is(.z-tab__ico, .tab-ico) .z-ic { --cmp-ic-size: var(--sys-icon-22); }
  html.z-app .z-tabbar-add { inline-size: var(--sys-target); block-size: var(--sys-target); }
  html.z-app .z-tabbar-add .z-ic { --cmp-ic-size: var(--sys-icon-22); }
}

/* ---- Trilho (≥ 1024): o MESMO nav.tabbar (e2e:2561 mede ≤ 96). Painel de
 *      80 flutuando a 8 da esquerda, do topo e do pé: marca, as três abas
 *      (64 × 56, ícone 26 sobre rótulo 11), a Análise recuada sob Custos,
 *      e no pé o "+" de 56 e o barra-lateral. O body ganha 96 à esquerda. */
@media (min-width: 1024px) {
  body:has(> .z-tabbar) { padding-inline-start: var(--sys-rail-offset); }
  .z-tabbar::before, .z-tabbar::after { display: none; }
  .z-tabbar {
    inset-block: calc(var(--update-bar-h, 0px) + var(--sys-rail-inset)) var(--sys-rail-inset);
    inset-inline: var(--sys-rail-inset) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sys-space-8);
    box-sizing: border-box;
    inline-size: var(--sys-rail-w);
    block-size: auto;
    padding: var(--sys-space-12) 0;
    border-radius: var(--sys-radius-card);
    background: var(--sys-material-chrome);
    -webkit-backdrop-filter: var(--sys-material-filter);
    backdrop-filter: var(--sys-material-filter);
    box-shadow: var(--sys-shadow-float), var(--sys-material-edge);
    pointer-events: auto;
  }
  .z-tabbar .z-tabbar__brand {
    display: grid;
    place-items: center;
    block-size: var(--sys-target);
    margin-block-end: var(--sys-space-8);
    color: var(--sys-tint);
  }
  .z-tabbar__brand .z-ic { --cmp-ic-size: var(--sys-icon-26); }
  .z-tabbar__tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sys-space-4);
    flex: 0 0 auto;
    padding: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .z-tabbar__lens { display: none; }
  .z-tab {
    inline-size: calc(var(--sys-rail-w) - 2 * var(--sys-space-4));
    min-block-size: var(--sys-rail-item-h);
    padding-inline: 0;
    border-radius: var(--sys-radius-control);
    color: var(--cmp-tabbar-item);
    transition: background-color var(--sys-dur-fade) var(--sys-ease-fade);
  }
  .z-tab:is(.tab-active, [aria-current="page"]) { background: var(--cmp-tabbar-lens); color: var(--cmp-tabbar-item-active); }
  /* Análise: item sob Custos (data-action="open-insights"), com o MESMO
     passo (56 + 4) e o mesmo ícone dos outros: só a ordem e, na barra
     lateral, o recuo dizem que ela é parte de Custos. */
  .z-tabbar .z-tab--sub { display: flex; }
  .z-tabbar__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sys-space-8);
    margin-block-start: auto;
  }
  .z-tabbar-add {
    inline-size: var(--sys-rail-add);
    block-size: var(--sys-rail-add);
    background: var(--sys-fill);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .z-tabbar .z-tabbar__toggle {
    display: grid;
    place-items: center;
    inline-size: var(--sys-target);
    block-size: var(--sys-target);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--sys-radius-full);
    background: transparent;
    color: var(--sys-label);
  }
  .z-tabbar__toggle .z-ic { --cmp-ic-size: var(--sys-icon-22); }
  @media (hover: hover) and (pointer: fine) {
    .z-tab:not(.tab-active):not([aria-current="page"]):hover { background: var(--sys-fill-hover); }
    .z-tabbar__toggle:hover { background: var(--sys-fill-hover); }
  }
  .z-tab.is-hover:not(.tab-active):not([aria-current="page"]),
  .z-tabbar__toggle.is-hover { background: var(--sys-fill-hover); }
  .z-tabbar__toggle:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); }
  .z-tabbar__toggle:is(:active, .is-pressed) { background: var(--sys-fill-strong); }
}

/* ---- Barra lateral (.z-sidebar): o trilho expandido para 248, por escolha
 *      da pessoa (recolhido por padrão, lembrado por aparelho). Itens de 44
 *      com o rótulo em Body ao lado do ícone; selecionado em lavado verde,
 *      raio 12, recuo 8. Embaixo, os veículos da garagem. ----------------- */
@media (min-width: 1024px) {
  body:has(> .z-tabbar.z-sidebar) { padding-inline-start: calc(var(--sys-sidebar-w) + 2 * var(--sys-rail-inset)); }
  .z-tabbar.z-sidebar {
    inline-size: var(--sys-sidebar-w);
    align-items: stretch;
    padding-inline: var(--sys-space-8);
  }
  .z-sidebar .z-tabbar__brand { justify-items: start; padding-inline: var(--sys-space-8); }
  .z-sidebar .z-tabbar__tabs { align-items: stretch; }
  .z-sidebar .z-tab {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--sys-space-12);
    inline-size: auto;
    min-block-size: var(--sys-target);
    padding-inline: var(--sys-space-8);
    font: var(--sys-type-body);
    letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  }
  .z-sidebar .z-tab__label { font-size: inherit; }
  .z-sidebar .z-tab:is(.tab-active, [aria-current="page"]) { background: var(--sys-tint-wash); color: var(--sys-tint-ink); }
  .z-sidebar .z-tab :is(.z-tab__ico, .tab-ico) .z-ic { --cmp-ic-size: var(--sys-icon-22); }
  .z-sidebar .z-tab--sub { padding-inline-start: calc(var(--sys-space-8) + var(--sys-icon-22) + var(--sys-space-12)); margin-block: 0; }
  .z-sidebar .z-tabbar__foot { flex-direction: row; justify-content: space-between; padding-inline: var(--sys-space-4); }
  /* Na barra lateral o distintivo sai de cima do ícone e vira a contagem à
     direita da linha, em Footnote (label: sobre o vidro o label-2 dá 3,85; a
     cápsula vermelha fica no trilho e na cápsula de abas, sem rótulo ao lado). */
  .z-sidebar .z-tab :is(.z-tab__ico, .tab-ico) { display: contents; }
  .z-sidebar .z-tab .z-badge {
    position: static;
    order: 1;
    margin-inline-start: auto;
    padding: 0;
    background: none;
    color: var(--sys-label);
    font: var(--sys-type-footnote);
    letter-spacing: calc(var(--sys-track-footnote) * var(--sys-track-on));
  }
  .z-sidebar .z-tab:is(.tab-active, [aria-current="page"]) .z-badge { color: var(--sys-tint-ink); }
}
.z-sidebar__vehicles { --cmp-sidebar-thumb-w: 28px; --cmp-sidebar-thumb-h: 20px; display: grid; gap: var(--sys-space-2); margin: var(--sys-space-16) 0 0; padding: 0; list-style: none; }
.z-sidebar__vehicle {
  display: flex;
  align-items: center;
  gap: var(--sys-space-12);
  min-block-size: var(--sys-target);
  padding-inline: var(--sys-space-8);
  border-radius: var(--sys-radius-control);
  color: var(--sys-label);
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sys-dur-fade) var(--sys-ease-fade);
}
@media (hover: hover) and (pointer: fine) {
  .z-sidebar__vehicle:hover { background-color: var(--sys-fill-hover); }
}
.z-sidebar__vehicle.is-hover { background-color: var(--sys-fill-hover); }
.z-sidebar__vehicle:is(:active, .is-pressed) { background-color: var(--sys-fill-strong); transition-duration: var(--sys-dur-press); }
.z-sidebar__vehicle:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); }
.z-sidebar__vehicle[aria-current="true"] { background-color: var(--sys-tint-wash); color: var(--sys-tint-ink); }
.z-sidebar__vehicle img { inline-size: var(--cmp-sidebar-thumb-w); block-size: var(--cmp-sidebar-thumb-h); object-fit: contain; }
.z-sidebar__vehicle .z-ic { --cmp-ic-size: var(--sys-icon-16); margin-inline-start: auto; color: var(--sys-tint); }

/* ---- Folha (.z-modal = #modal, a camada; .z-sheet = .modal-card, o
 *      cartão; .z-sheet__content = #modal-content, que rola). Celular: de
 *      baixo, raio 28 em cima, alça, cabeçalho de 56. .open muda NA HORA
 *      (contrato) e .closing só desenha a saída, sem toque. -------------- */
.z-modal {
  position: fixed;
  inset: 0;
  z-index: var(--sys-z-sheet);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  visibility: hidden;
  pointer-events: none;
}
/* O véu é um pseudo: funde sozinho, sem levar o cartão junto. */
.z-modal::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--sys-scrim);
  opacity: 0;
  pointer-events: none;
}
.z-modal:is(.open, .closing) { visibility: visible; }
.z-modal.open { pointer-events: auto; }
.z-modal.open::before { opacity: 1; pointer-events: auto; animation: z-fade-in var(--sys-dur-fade-l) var(--sys-ease-fade) backwards; }
.z-modal.closing::before { animation: z-fade-out var(--sys-dur-exit) var(--sys-ease-exit) forwards; }
.z-modal.closing { pointer-events: none; }
/* Folha aberta trava a rolagem do fundo (menos o painel não modal ≥ 1280).
   Sem scrollbar-gutter: stable: com barra de rolagem clássica (notebook, e o
   Chromium da bancada) o vão encolhe a camada fixa e o painel deixa de colar
   na borda direita (e2e:2546). */
html:has(.z-modal.open) { overflow: hidden; }

.z-sheet {
  /* Contexto elevado sempre: a regra única do contexto elevado (tokens) já
     inclui .z-sheet. */
  --cmp-sheet-radius: var(--sys-radius-sheet-phone);
  --cmp-sheet-handle: var(--sys-label-3);
  /* desconta a barra de nova versão (que já inclui a área segura) */
  --cmp-sheet-max-h: calc(100dvh - max(env(safe-area-inset-top, 0px), var(--update-bar-h, 0px)) - 10px);
  --cmp-dialog-max-h: min(760px, calc(100dvh - 64px - var(--update-bar-h, 0px)));
  --cmp-dialog-w: var(--sys-dialog-w);
  --cmp-sheet-gutter: min(var(--sys-gutter), var(--sys-space-20));
  --cmp-sheet-handle-w: 36px;
  --cmp-sheet-handle-h: 5px;
  --cmp-sheet-min: 240px;        /* detent ajustado: do conteúdo, de 240 até grande */
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: min(var(--cmp-sheet-min), var(--cmp-sheet-max-h));
  max-block-size: var(--cmp-sheet-max-h);
  margin: 0;
  border-radius: var(--cmp-sheet-radius) var(--cmp-sheet-radius) 0 0;
  background: var(--sys-bg);
  box-shadow: var(--sys-shadow-sheet);
  color: var(--sys-label);
  overflow: hidden;
  outline: none;
}
.z-sheet:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); }
/* Alça: 36 × 5 a 6 do topo, decorativa; o gesto vale na faixa de cima. */
.z-sheet::before {
  content: "";
  position: absolute;
  inset-block-start: var(--sys-space-6);
  inset-inline-start: 50%;
  z-index: var(--sys-z-sticky);
  inline-size: var(--cmp-sheet-handle-w);
  block-size: var(--cmp-sheet-handle-h);
  margin-inline-start: calc(var(--cmp-sheet-handle-w) / -2);
  border-radius: var(--sys-radius-full);
  background: var(--cmp-sheet-handle);
  pointer-events: none;
}
/* Detents: ajustada (conteúdo, de 240 até grande), média (50 dvh), grande. */
.z-sheet:is(.z-sheet--large, [data-detent="grande"]) { block-size: var(--cmp-sheet-max-h); }
.z-sheet:is(.z-sheet--medium, [data-detent="media"]) { block-size: min(50dvh, var(--cmp-sheet-max-h)); }
.z-sheet__content {
  container: folha / inline-size;
  flex: 1 1 auto;
  min-block-size: 0;
  box-sizing: border-box;
  padding: 0 var(--cmp-sheet-gutter) max(var(--sys-space-16), env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* O foco do teclado nunca para atrás do cabeçalho que gruda nem do rodapé
     de ação: a rolagem até o campo desconta os dois. */
  scroll-padding-block-start: calc(var(--sys-sheet-header-h) + var(--sys-space-8));
}
.z-sheet__content:has(.z-actions) { scroll-padding-block-end: calc(2 * var(--sys-space-48) + env(safe-area-inset-bottom)); }
/* Cabeçalho de 56 que gruda. Um OU outro, como no iOS:
     formulário  [Cancelar]  título  [Salvar ou nada, se o rodapé salva]
     leitura     [ ]         título  [Editar] [fechar]
   As laterais crescem igual (o título fica no centro de verdade) e nunca
   ficam menores que o próprio conteúdo: com texto grande quem cede é o
   título, que quebra em duas linhas e só então corta; nada passa por cima de nada. */
.z-sheet__header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--sys-z-raised);
  display: grid;
  /* --cmp-sheet-side: a largura do lado mais largo, medida pelo app ao abrir
     a folha. Com botão só de um lado, o outro guarda o mesmo tanto e o
     título fica no meio (sem ela, o lado com "Cancelar" crescia além da
     metade dele e o título saía do centro). */
  grid-template-columns: minmax(var(--cmp-sheet-side, auto), 1fr) minmax(0, max-content) minmax(var(--cmp-sheet-side, auto), 1fr);
  align-items: center;
  column-gap: var(--sys-space-8);
  min-block-size: var(--sys-sheet-header-h);
  margin: 0 calc(-1 * var(--cmp-sheet-gutter));
  padding: 0 var(--sys-space-8);
  background: var(--sys-bg);
}
/* Borda de rolagem do cabeçalho, a mesma da barra de abas: quando a folha
   rola, o texto que passa por baixo some num esmaecido de 16, em vez de ser
   cortado seco na linha do cabeçalho. Parada no topo, não aparece. */
.z-sheet__header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  block-size: var(--sys-space-16);
  background: linear-gradient(var(--sys-bg), transparent);
  opacity: 0;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .z-sheet__header::after {
    animation: z-reveal auto both;
    animation-timeline: scroll(nearest);
    animation-range: 0 var(--sys-space-16);
  }
}
@supports not (animation-timeline: scroll()) {
  .z-sheet__header::after { transition: opacity var(--sys-dur-fade) var(--sys-ease-fade); }
  .is-rolada > .z-sheet__header::after { opacity: 1; }
}
.z-sheet__title {
  grid-column: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 12 em cima e embaixo: numa linha não muda nada (cabe nos 56); em duas,
     o cabeçalho cresce e o texto não sobe na alça. */
  margin: var(--sys-space-12) 0;
  min-inline-size: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  text-align: center;
  font: var(--sys-type-bar-title);
  letter-spacing: calc(var(--sys-track-bar-title) * var(--sys-track-on));
  color: var(--sys-label);
}
.z-sheet__lead { grid-column: 1; justify-self: start; display: flex; align-items: center; }
.z-sheet__trail { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--sys-space-4); }
/* O fechar solto no cabeçalho só ganha a coluna: fica com o inline-grid
   centrado do .z-iconbtn (com flex o X encostava na borda transparente). */
.z-sheet__header > .z-iconbtn--close { grid-column: 3; justify-self: end; }
/* Texto grande com só o "Cancelar" à esquerda: as laterais deixam de ser
   iguais (o botão cresce e o outro lado fica vazio) e o título saía do
   centro. Ele desce para uma linha própria, centrado na largura inteira. */
html.texto-grande .z-sheet__header:has(> .z-sheet__lead):not(:has(> .z-sheet__trail, > .z-iconbtn--close)) > .z-sheet__title {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-block-start: 0;
}
/* "Cancelar" e "Editar" no cabeçalho: texto Body em tinta verde. */
.z-sheet__textbtn {
  flex: none;
  min-inline-size: var(--sys-target);
  min-block-size: var(--sys-target);
  white-space: nowrap;
  margin: 0;
  padding: 0 var(--sys-space-8);
  border: 0;
  background: transparent;
  color: var(--sys-tint-ink);
  font: var(--sys-type-body);
  /* Cromo: para no mesmo teto do título (XXXL); sem teto ele crescia e
     espremia o título até as reticências. */
  font-size: calc(17 * var(--u-chrome));
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  transition: color var(--sys-dur-fade) var(--sys-ease-fade);
}
.z-sheet__textbtn--strong { font-weight: 600; }
/* Voltar de página empurrada: chevron de 18 e o nome da folha de trás. */
.z-sheet__back { display: inline-flex; align-items: center; gap: var(--sys-space-2); padding-inline-start: 0; }
.z-sheet__back > .z-ic { --cmp-ic-size: var(--sys-icon-18); flex: none; }
.z-sheet__textbtn:not(:disabled, [aria-disabled="true"]):is(:active, .is-pressed) { color: var(--sys-tint-ink-pressed); transition-duration: var(--sys-dur-press); }
@media (hover: hover) and (pointer: fine) {
  .z-sheet__textbtn:not(:disabled, [aria-disabled="true"]):hover { color: var(--sys-tint-ink-pressed); }
}
.z-sheet__textbtn.is-hover { color: var(--sys-tint-ink-pressed); }
.z-sheet__textbtn:is(:focus-visible, .is-focused) { outline: var(--sys-focus-width) solid var(--sys-focus); outline-offset: var(--sys-focus-offset-inset); border-radius: var(--sys-radius-control); }
.z-sheet__textbtn:is(:disabled, [aria-disabled="true"]) { color: var(--sys-label-disabled); }
@supports (corner-shape: superellipse(2)) {
  .z-sheet { corner-shape: var(--sys-corner-k); border-radius: calc(var(--cmp-sheet-radius) * var(--sys-corner-factor)) calc(var(--cmp-sheet-radius) * var(--sys-corner-factor)) 0 0; }
}
/* Movimento: abrir sobe da borda (smooth 606, o fill só antes de começar,
   para o gesto de arrastar poder escrever o transform depois); fechar desce
   (crítica 300). "Marcar como feito" atrasa a saída 240 (.is-done). */
.z-modal.open > .z-sheet { animation: z-sheet-up var(--sys-dur-smooth) var(--sys-ease-smooth) backwards; }
.z-modal.closing > .z-sheet { animation: z-sheet-down var(--sys-dur-exit-sheet) var(--sys-ease-exit-sheet) forwards; }
.z-modal.closing.is-done > .z-sheet { animation-delay: var(--sys-delay-sheet-exit-done); }
.z-sheet.z-arrastando { animation: none; transition: none; will-change: transform; }

/* Onboarding e barreiras (.modal-onb, .modal-wall): TELA, não folha. Cheia
   no celular, lisa, sem alça, sem véu; não fecha por gesto nem por véu. */
.z-modal.modal-onb {
  /* Lido AQUI (fora do contexto elevado): branco no claro, #1C1C1E no escuro. */
  --cmp-onb-card: var(--sys-surface);
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sys-bg-plain);
}
.z-modal.modal-onb::before { display: none; }
.z-modal.modal-onb > .z-sheet {
  --sys-bg: var(--sys-bg-plain);
  flex: 1 0 auto;
  min-block-size: 100%;
  max-block-size: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.z-modal.modal-onb > .z-sheet::before { display: none; }
.z-modal.modal-onb > .z-sheet > .z-sheet__content { overflow: visible; padding-block-start: env(safe-area-inset-top); }
.z-modal.modal-onb.open > .z-sheet { animation: z-fade-in var(--sys-dur-fade-l) var(--sys-ease-fade) backwards; }
.z-modal.modal-onb.closing > .z-sheet { animation: z-fade-out var(--sys-dur-exit) var(--sys-ease-exit) forwards; }
.z-modal.modal-wall > .z-sheet > .z-sheet__content { display: flex; flex-direction: column; justify-content: center; }

/* 600 a 1023: diálogo central, raio 28 nos quatro cantos, sem alça, véu
   mais claro. Entra subindo 24 e de .98, funde; sai em .98 (saída 200). */
@media (min-width: 600px) {
  .z-modal { justify-content: center; padding: var(--sys-space-32); }
  .z-modal::before { background: var(--sys-scrim-sheet-tablet); }
  .z-sheet {
    --cmp-sheet-radius: var(--sys-radius-sheet);
    inline-size: min(var(--cmp-dialog-w), 100%);
    max-block-size: var(--cmp-dialog-max-h);
    border-radius: var(--cmp-sheet-radius);
  }
  .z-sheet::before { display: none; }
  .z-sheet:is(.z-sheet--large, [data-detent="grande"]) { block-size: var(--cmp-dialog-max-h); }
  .z-sheet:is(.z-sheet--medium, [data-detent="media"]) { block-size: auto; }
  @supports (corner-shape: superellipse(2)) {
    .z-sheet { border-radius: calc(var(--cmp-sheet-radius) * var(--sys-corner-factor)); }
  }
  .z-modal.open > .z-sheet { animation: z-dialog-in var(--sys-dur-smooth) var(--sys-ease-smooth) backwards; }
  .z-modal.closing > .z-sheet { animation: z-dialog-out var(--sys-dur-exit) var(--sys-ease-exit) forwards; }
  /* Onboarding: cartão de 560 sobre o fundo agrupado. */
  /* safe: mais alto que a janela (celular deitado), o cartão começa no topo
     e rola, em vez de centrar e esconder a barra acima da tela. */
  .z-modal.modal-onb { justify-content: safe center; background: var(--sys-bg); }
  .z-modal.modal-onb > .z-sheet {
    flex: 0 1 auto;
    inline-size: min(var(--sys-card-dialog-w), 100%);
    min-block-size: 0;
    max-block-size: none;
    margin-block: auto;
    border-radius: var(--cmp-sheet-radius);
    --sys-bg: var(--cmp-onb-card);
    box-shadow: var(--sys-shadow-sheet);
  }
  .z-modal.modal-onb.open > .z-sheet { animation: z-dialog-in var(--sys-dur-smooth) var(--sys-ease-smooth) backwards; }
  @supports (corner-shape: superellipse(2)) {
    .z-modal.modal-onb > .z-sheet { border-radius: calc(var(--cmp-sheet-radius) * var(--sys-corner-factor)); }
  }
}

/* ---- Painel (.z-inspector, ≥ 1024): TODA folha vira o painel colado à
 *      direita (440, 480 em ≥ 1680, nunca > 540), right: 0 exato, altura
 *      total menos a barra de versão, raio 20 só do lado esquerdo, fio de
 *      0,5 à esquerda. 1024–1279: modal (véu claro). ≥ 1280: ao lado do
 *      conteúdo, sem véu, a lista continua tocável. Entra com quick (resíduo
 *      < 0,5 px aos 300 ms, e2e:2546). Exceções: onboarding, barreiras,
 *      Planos (.z-modal--dialog, até 960) e o alerta (fora do #modal).
 *      Uma regra só desenha o painel: a folha do app (o #modal) e o
 *      .z-inspector (o guia, ou quem montar um painel fixo) a leem juntos.
 *      Abaixo de 1024 não existe painel: a folha é folha ou diálogo. ---- */
@media (min-width: 1024px) {
  .z-modal:not(.modal-onb):not(.z-modal--dialog) {
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
  }
  .z-inspector,
  .z-modal:not(.modal-onb):not(.z-modal--dialog) > .z-sheet {
    --cmp-inspector-w: min(var(--sys-inspector-w), var(--sys-inspector-max));
    box-sizing: border-box;
    inline-size: var(--cmp-inspector-w);
    max-inline-size: var(--sys-inspector-max);
    block-size: auto;
    min-block-size: 0;
    max-block-size: none;
    border-radius: var(--sys-radius-card) 0 0 var(--sys-radius-card);
    border-inline-start: 0.5px solid var(--sys-separator);
    background: var(--sys-bg);
    box-shadow: var(--sys-shadow-sheet);
    corner-shape: round;
  }
  .z-modal:not(.modal-onb):not(.z-modal--dialog).open > .z-sheet { animation: z-panel-in var(--sys-dur-panel) var(--sys-ease-panel) backwards; }
  .z-modal:not(.modal-onb):not(.z-modal--dialog).closing > .z-sheet { animation: z-panel-out var(--sys-dur-exit) var(--sys-ease-exit) forwards; }
  .z-modal:not(.modal-onb):not(.z-modal--dialog).closing.is-done > .z-sheet { animation-delay: var(--sys-delay-sheet-exit-done); }
  /* Planos: diálogo central largo (4 colunas de preço não cabem em 480). */
  .z-modal--dialog > .z-sheet { inline-size: min(var(--sys-plans-dialog-w), 100%); }
}
@media (min-width: 1280px) {
  .z-modal:not(.modal-onb):not(.z-modal--dialog)::before { display: none; }
  .z-modal:not(.modal-onb):not(.z-modal--dialog).open { pointer-events: none; }
  .z-modal:not(.modal-onb):not(.z-modal--dialog).open > .z-sheet { pointer-events: auto; }
  html:has(.z-modal.open:not(.modal-onb):not(.z-modal--dialog)) {
    overflow: revert-layer;
    /* A casca lê isto para estreitar a coluna no mesmo quadro. */
    --z-inspector-ocupa: min(var(--sys-inspector-w), var(--sys-inspector-max));
  }
}

/* ---- Popover (.z-popover, ≥ 1024 com ponteiro fino). Vidro thick, raio 20,
 *      sombra de popover, contexto elevado. O menu (.z-menu) mora no §10.1,
 *      junto das ações; aqui fica só onde o menu do "+" se ancora. ------- */
.z-popover {
  --cmp-popover-w: var(--sys-popover-w);
  --cmp-popover-origin: top right;
  position: fixed;
  z-index: var(--sys-z-popover);
  box-sizing: border-box;
  inline-size: min(var(--cmp-popover-w), calc(100% - 2 * var(--sys-gutter)));
  padding: var(--sys-space-8) 0;
  border-radius: var(--sys-radius-card);
  background: var(--sys-material-menu);
  -webkit-backdrop-filter: var(--sys-material-filter-thick);
  backdrop-filter: var(--sys-material-filter-thick);
  box-shadow: var(--sys-shadow-popover);
  color: var(--sys-label);
  overflow: clip;
  transform-origin: var(--cmp-popover-origin);
  animation: z-popover-in var(--sys-dur-snappy) var(--sys-ease-snappy) backwards;
}
.z-popover.is-leaving { animation: z-out var(--sys-dur-exit) var(--sys-ease-exit) forwards; pointer-events: none; }
/* Menu do "+": no celular sobe acima do botão, alinhado à direita; no
   notebook sai do pé do trilho como popover. */
.z-menu--registrar {
  --cmp-menu-origin: bottom right;
  inset-inline-end: max(var(--sys-gutter), env(safe-area-inset-right));
  inset-block-end: calc(max(var(--sys-space-12), calc(env(safe-area-inset-bottom) - var(--sys-space-12))) + var(--sys-tabbar-add) + var(--sys-space-8));
}
@media (min-width: 600px) {
  .z-menu--registrar { inset-inline-end: calc(50% - var(--sys-tabbar-w) / 2 - var(--sys-tabbar-gap) - var(--sys-tabbar-add)); }
}
@media (min-width: 1024px) {
  .z-menu--registrar {
    --cmp-menu-origin: bottom left;
    inset-inline: calc(var(--sys-rail-offset) + var(--sys-space-8)) auto;
    inset-block-end: var(--sys-rail-inset);
  }
}

/* ---- Bolha (.z-bubble, gancho .chat-bubble): a pessoa em verde à direita,
 *      raio 20 com o canto de baixo em 6; o assistente SEM bolha, largura
 *      total, texto de leitura. Entrada: .92 a partir do canto de quem fala.
 *      Foto (.z-bubble__photo): mídia PRÓPRIA, fora da bolha e logo acima
 *      dela, do lado de quem mandou, raio de cartão, recortada por cover
 *      (como no iMessage); a bolha verde leva só o texto. */
.z-bubble {
  max-inline-size: 100%;
  margin: 0;
  color: var(--sys-label);
  font: var(--sys-type-body-reading);
  letter-spacing: calc(var(--sys-track-body-reading) * var(--sys-track-on));
  overflow-wrap: break-word;
  transform-origin: left bottom;
}
.z-bubble--me {
  inline-size: fit-content;
  max-inline-size: 78%;
  margin-inline-start: auto;
  padding: calc(var(--sys-space-8) + var(--sys-space-2)) calc(var(--sys-space-12) + var(--sys-space-2));
  border-radius: var(--sys-radius-card) var(--sys-radius-card) var(--sys-radius-6) var(--sys-radius-card);
  background: var(--sys-bubble-me);
  color: var(--sys-on-bubble-me);
  font: var(--sys-type-body);
  letter-spacing: calc(var(--sys-track-body) * var(--sys-track-on));
  transform-origin: right bottom;
}
.z-bubble--me a { color: inherit; text-decoration: underline; }
.z-bubble__photo {
  --cmp-bubble-photo: 220px;
  display: block;
  inline-size: min(var(--cmp-bubble-photo), 78%);
  block-size: auto;
  aspect-ratio: 4 / 3;
  margin: 0 0 var(--sys-space-4) auto;
  border-radius: var(--sys-radius-card);
  background: var(--sys-fill);   /* imagem com transparência ainda lê como mídia, com o canto */
  object-fit: cover;
  transform-origin: right bottom;
}
.z-bubble-day {
  margin: var(--sys-space-16) 0 var(--sys-space-8);
  text-align: center;
  font: var(--sys-type-caption-1);
  letter-spacing: calc(var(--sys-track-caption-1) * var(--sys-track-on));
  color: var(--sys-label-2);
}
/* Lembrete de item dentro da conversa: anel S + frase + ação. */
.z-bubble__item { display: flex; align-items: center; gap: var(--sys-space-12); margin-block: var(--sys-space-8); }
.z-bubble.z-enter, .z-bubble.chat-msg-new { animation: z-bubble-in var(--sys-dur-bouncy) var(--sys-ease-bouncy) backwards; }

/* =============================================================================
 * KEYFRAMES (só transform, translate, scale, rotate e opacity; distâncias e
 * escalas vezes --motion: com movimento reduzido sobra a fusão, e o bloco do
 * fim corta até ela).
 * ============================================================================= */
@keyframes z-fade-in  { from { opacity: 0; } }
@keyframes z-reveal   { from { opacity: 0; } to { opacity: 1; } }   /* o de partida é 0 (barra) */
@keyframes z-fade-out { to   { opacity: 0; } }
@keyframes z-out      { to   { opacity: 0; transform: scale(calc(1 - 0.04 * var(--motion))); } }
@keyframes z-enter    { from { opacity: 0; transform: translateY(var(--sys-dist-enter)); } }
@keyframes z-pop      { from { transform: scale(var(--sys-enter-scale)); } }
@keyframes z-scale-out { to  { transform: scale(calc(1 - var(--motion))); opacity: 0; } }
@keyframes z-ring-in  { from { rotate: calc(-60deg * var(--motion)); opacity: 0; } }
@keyframes z-ring-renew { from { rotate: calc(-120deg * var(--motion)); opacity: 0; } }
@keyframes z-grow-x   { from { transform: scaleX(calc(1 - var(--motion))); } }
@keyframes z-grow-y   { from { transform: scaleY(calc(1 - var(--motion))); } }
@keyframes z-dg-in    { from { opacity: 0; transform: translateY(calc(var(--cmp-dg-de) * var(--motion))); } }
@keyframes z-dg-out   { from { opacity: 1; } to { opacity: 0; transform: translateY(calc(var(--cmp-dg-para) * var(--motion))); } }
@keyframes z-pulse    { 50% { opacity: 0.55; } }
@keyframes z-typing   { 0%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
@keyframes z-spin     { to { rotate: 360deg; } }
@keyframes z-largetitle-out { to { opacity: 0; transform: translateY(calc(-1 * var(--sys-space-8) * var(--motion))); } }
@keyframes z-sheet-up   { from { transform: translateY(100%); } }
@keyframes z-sheet-down { to   { transform: translateY(100%); } }
@keyframes z-dialog-in  { from { opacity: 0; transform: translateY(var(--sys-dist-step)) scale(var(--sys-press-scale-card)); } }
@keyframes z-dialog-out { to   { opacity: 0; transform: scale(var(--sys-press-scale-card)); } }
@keyframes z-panel-in   { from { opacity: 0; transform: translateX(var(--sys-dist-panel)); } }
@keyframes z-panel-out  { to   { opacity: 0; transform: translateX(var(--sys-dist-panel)); } }
@keyframes z-toast-in {
  from { opacity: 0; transform: translateY(calc(-1 * var(--sys-space-16) * var(--motion)))
                                scale(calc(1 - 0.45 * var(--motion)), calc(1 - 0.3 * var(--motion))); }
}
@keyframes z-toast-out { to { opacity: 0; transform: scale(calc(1 - 0.3 * var(--motion))); } }
@keyframes z-popover-in { from { opacity: 0; transform: scale(calc(1 - 0.08 * var(--motion))); } }
@keyframes z-bubble-in  { from { opacity: 0; transform: scale(calc(1 - 0.08 * var(--motion))); } }

/* =============================================================================
 * CORES FORÇADAS: a cor some, a forma fica (anel, glifo e frase).
 * ============================================================================= */
@media (forced-colors: active) {
  /* Anel: trilho em GrayText (o token) e só o arco em CanvasText, para a
     fração continuar visível ("em dia, 0%" diferente de "95%"). */
  .z-ring__arc { stroke: CanvasText; }
  .z-ring, .z-item__due > .z-ic, .z-summary__circle, .z-row__state > .z-ic { color: CanvasText; }
  /* A folha de ação e o alerta: contorno no grupo e fio entre os itens (o
     fundo sozinho some nas cores forçadas). */
  .z-actionsheet__group, .z-actionsheet__cancel, .z-alert { border: 1px solid CanvasText; }
  .z-actionsheet__item + .z-actionsheet__item { border-block-start: 1px solid CanvasText; }
  /* Medidor e progresso: a mesma força das regras de cor (senão o
     preenchimento perde e some), com o trilho contornado. */
  .z-meter :is(.z-meter__fill, .usage-fill),
  .z-progress .z-progress__fill { background: Highlight; forced-color-adjust: none; }
  .z-meter :is(.z-meter__bar, .usage-bar),
  .z-progress .z-progress__bar { outline: 1px solid CanvasText; outline-offset: -1px; }
  .z-tab:is(.tab-active, [aria-current="page"]) { outline: 2px solid Highlight; }
  .z-badge { border: 1px solid CanvasText; }
  .z-navbar::before { border-block-end: 1px solid CanvasText; }
  /* A borda de rolagem é gradiente e máscara, e as cores forçadas tiram os
     dois: sem isto o texto da lista passava por baixo das abas. Fica uma
     faixa sólida em Canvas, da altura da cápsula para baixo, com fio em cima;
     a cápsula e o "+" ganham contorno. */
  .z-tabbar::before {
    block-size: calc(var(--cmp-tabbar-h) + var(--cmp-tabbar-bottom) + var(--sys-space-12));
    background: Canvas;
    -webkit-mask-image: none;
    mask-image: none;
    border-block-start: 1px solid CanvasText;
  }
  .z-tabbar::after { block-size: calc(var(--cmp-tabbar-h) + var(--cmp-tabbar-bottom) + var(--sys-space-12)); }
  .z-tabbar__tabs, .z-tabbar-add { border: 1px solid CanvasText; }
  /* A mesma borda de alvo do bloco de cores forçadas dos controles, nas
     peças declaradas depois dele (o hodômetro e o enviar do compositor). */
  :is(.z-odometer, .z-composer__send) { border-color: Canvas; outline: 1px solid ButtonText; }
  .z-odometer { outline-offset: calc(-1 * var(--sys-space-6)); }
  .z-composer__send { outline-offset: calc(-1 * (var(--sys-target) - var(--cmp-composer-send)) / 2); }
  .z-chart__bar { fill: CanvasText; }
  .z-chart.is-selecting .z-chart__bar.is-selected { fill: Highlight; }
}

} /* fim @layer componentes */


/* =============================================================================
 * MOVIMENTO REDUZIDO · UM BLOCO SÓ, NO FIM DO ARQUIVO
 * Tudo instantâneo, opacidade inclusive (a sonda de contraste mede a
 * composição na hora). Três metades, cada uma na sua camada:
 *   1. tokens: distâncias e escalas a zero (--motion), durações, atrasos e
 *      cascatas a zero. O JS lê os mesmos tokens e chega ao fim no mesmo
 *      quadro (MOVIMENTO.reduz()).
 *   2. componentes: o que só existia na entrada ou na saída para na hora
 *      (o estado final é o natural de cada regra; .closing, .toast-out e
 *      .is-leaving somem); os infinitos param em 0,6.
 *   3. utilitarios: seletor amplo que zera transition e animation em TODO
 *      elemento e pseudo-elemento, inclusive o que outras camadas criarem
 *      depois. Duração zero ainda dispara animationend (o JS que espera o
 *      fim da saída da folha continua funcionando) e não mexe no transform
 *      de repouso (folha fechada em translateY(100%) continua lá).
 *      A rolagem que funde a barra do topo continua: é rolagem, não tempo
 *      (a animação ligada à rolagem volta a ter duração automática).
 * Permanência (toast na tela, glifo do "feito") não é movimento: fica.
 * zelo-site.css não tem bloco próprio: o seletor amplo da metade 3 vale
 * para o site, e as distâncias do site já são vezes --motion.
 * ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  @layer tokens {
    :root {
      --motion: 0;
      --sys-ease-quick: ease-out;  --sys-ease-snappy: ease-out;  --sys-ease-smooth: ease-out;
      --sys-ease-bouncy: ease-out;  --sys-ease-gentle: ease-out;  --sys-ease-exit-sheet: ease-out;
      --sys-dur-quick: 0ms;  --sys-dur-snappy: 0ms;  --sys-dur-smooth: 0ms;
      --sys-dur-bouncy: 0ms;  --sys-dur-gentle: 0ms;
      --sys-dur-press: 0ms;  --sys-dur-fade: 0ms;  --sys-dur-fade-l: 0ms;
      --sys-dur-exit: 0ms;  --sys-dur-exit-fast: 0ms;  --sys-dur-exit-sheet: 0ms;
      --sys-dur-panel: 0ms;  --sys-dur-vt-max: 0ms;  --sys-dur-shake: 0ms;
      --sys-stagger: 0ms;  --sys-stagger-digit: 0ms;
      --sys-dur-row-highlight-delay: 0ms;  --sys-delay-sheet-exit-done: 0ms;  --sys-delay-toast-content: 0ms;
      --sys-delay-feito-toast: 0ms;  --sys-delay-feito-ring: 0ms;  --sys-delay-feito-flip: 0ms;
      --sys-delay-hero-device: 0ms;  --sys-delay-hero-rows: 0ms;
    }
  }
  @layer componentes {
    :is(.z-enter, .card-enter):not(.z-ring):not(.z-meter):not(.z-chart):not(.z-bubble),
    :is(.z-enter, .card-enter) .z-ring__svg, .z-ring.z-enter .z-ring__svg, .z-ring.is-renewed .z-ring__svg,
    .z-meter.z-enter :is(.z-meter__fill, .usage-fill), .z-chart.z-enter .z-chart__bar,
    .z-badge.is-entering, .z-badge.is-leaving, .z-dg[data-dir], .z-dg[data-dir]::before,
    .z-disclosure[open] > :not(summary), .z-tip.is-leaving,
    .z-skeleton, .z-spinner, .z-typing > i,
    .z-toast, .z-toast :is(.z-ic, .z-toast__glyph, .z-toast__text),
    .z-toast:is(.toast-out, .is-leaving), .z-toast:is(.toast-out, .is-leaving) > *,
    .z-view:not([hidden]) > :not(.z-navbar):not(.chat-input-row),
    .z-tab:is(.tab-active, [aria-current="page"]) .z-ic--on,
    .z-modal.open::before, .z-modal.closing::before,
    .z-modal.open > .z-sheet, .z-modal.closing > .z-sheet,
    .z-modal.modal-onb.open > .z-sheet, .z-modal.modal-onb.closing > .z-sheet,
    .z-modal:not(.modal-onb):not(.z-modal--dialog).open > .z-sheet,
    .z-modal:not(.modal-onb):not(.z-modal--dialog).closing > .z-sheet,
    :is(.z-popover, .z-menu), :is(.z-popover, .z-menu):is(.is-leaving, .is-closing),
    .z-bubble.z-enter, .z-bubble.chat-msg-new {
      animation: none;
    }
    .z-row, .z-item, .z-summary__tile, .z-tab, .z-tab :is(.z-tab__ico, .tab-ico), .z-tabbar, .z-tabbar__lens,
    .z-tabbar-add, .z-odometer, .z-chip, .z-largetitle, .z-navbar__back, .z-sheet__textbtn,
    .z-trashrow__del, .z-toast__action, .z-progress__fill, .z-chart__bar, .z-disclosure__chev,
    .z-disclosure > summary, .z-sidebar__vehicle,
    :is(button, a, [role="button"], label).z-row, :is(button, a, [role="button"], label).z-row:is(:active, .is-pressed),
    .z-item:has(> .z-item__main:is(:active, .is-pressed)), .z-item:is(:active, .is-pressed),
    .z-summary__tile:is(:active, .is-pressed), .z-odometer:is(:active, .is-pressed), .z-chip:is(:active, .is-pressed),
    .z-tabbar-add:is(:active, .is-pressed), .z-tab:is(:active, .is-pressed) :is(.z-tab__ico, .tab-ico) {
      transition: none;
    }
    /* Infinitos param (o texto "Carregando" continua). Esqueleto e pontos
       ficam em 0,6. O indicador de atividade fica inteiro: parado, os 8 traços
       em degrau ainda dizem "carregando", e a 0,6 o traço mais forte cairia
       abaixo de 3:1 sobre o botão tingido (2,8). */
    .z-skeleton, .z-typing > i { opacity: 0.6; }
    /* O que só desenhava a saída some na hora. */
    .z-modal.closing { visibility: hidden; }
    .z-toast:is(.toast-out, .is-leaving), .z-tip.is-leaving, :is(.z-popover, .z-menu):is(.is-leaving, .is-closing), .z-badge.is-leaving { opacity: 0; }
    @supports not (animation-timeline: scroll()) {
      .z-navbar::before, .z-navbar__title { transition: none; }
    }
  }
  @layer utilitarios {
    *, *::before, *::after, ::backdrop, ::marker,
    ::view-transition-group(*), ::view-transition-image-pair(*),
    ::view-transition-old(*), ::view-transition-new(*) {
      transition-duration: var(--sys-dur-instant);
      transition-delay: var(--sys-dur-instant);
      animation-duration: var(--sys-dur-instant);
      animation-delay: var(--sys-dur-instant);
      animation-iteration-count: 1;
      scroll-behavior: auto;
    }
    /* Linha do tempo de rolagem: a fusão do vidro e do título acompanha o
       dedo (duração automática = o trecho da rolagem), sem tempo próprio. */
    @supports (animation-timeline: scroll()) {
      .z-navbar::before, .z-navbar__title, .z-navbar__brand, .z-largetitle, .z-globalnav::before,
      .z-sheet__header::after, .z-actions--edge::before {
        animation-duration: auto;
      }
    }
  }
}