/* ═══════════════════════════════════════════════════════════════════
   AURIAN DS · Componentes base
   ═══════════════════════════════════════════════════════════════════

   Estilos compartilhados dos componentes em src/components/ds/.
   Dependem dos tokens definidos em src/tokens.css.

   Componentes:
     Button     · .ds-btn, .ds-btn--{solid|ghost|icon|glass}, .ds-btn--glass-crystal,
                  .ds-btn--connection-dock
                  .ds-btn--{sm|lg}
     Card       · .ds-card, .ds-card--{elevated|feature|glass|interactive}
     PageHeader · .ds-page-header, .ds-ph-{label,content,title,note,actions}
     Field      · .ds-field, .ds-field-{label,hint,helper,error}, .ds-input
     Search     · .ds-search-select
     Pill       · .ds-pill, .ds-pill--{gold|info|ok|warn|err}
     Table      · .ds-table-wrap, .ds-table
     Drawer     · .ds-drawer-scrim, .ds-drawer, .ds-drawer-{head,eyebrow,title,close,body}
     Segmented  · .ds-seg, .ds-seg-opt
     Wipe       · .ds-wipe (micro-gesto de compromisso)
     Preflight  · .ds-preflight--{brief|full}, .ds-pf-{body,stratum,read,num,groove,when,wave,group}
     Composer   · .ds-composer, .ds-composer--{plate|hero},
                  .ds-composer-{core,rail,rail-sp,meta,var,count,pick,hints,hint}
     Decisão    · .ds-decision, .ds-decision-tray, .ds-decision-key
   ═══════════════════════════════════════════════════════════════════ */


/* ══════ BUTTON ══════ */
.ds-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .4s cubic-bezier(0.4,0,0.2,1),
              transform .4s cubic-bezier(0.4,0,0.2,1),
              box-shadow .4s cubic-bezier(0.4,0,0.2,1),
              border-color .4s ease,
              color .3s ease;
}
.ds-btn svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.ds-btn--sm { padding: 6px 14px; font-size: var(--fs-body-sm); }
/* Resgatado da Control Bench 2.2: em toque, o alvo nunca fica abaixo de 44px. */
@media (pointer: coarse) {
  .ds-btn { min-width: var(--touch-target-min); min-height: var(--touch-target-min); }
}
.ds-btn--lg { padding: 14px 24px; font-size: 15px; }

/* foco por teclado — anel de ouro-alias nos `.ds-btn` de contrato próprio (vidro, dock).
   Só :focus-visible (teclado), nunca no clique de mouse. A família em tecla tem o dela. */
.ds-btn:focus-visible:not(:where(.ds-btn--solid, .ds-btn--ghost, .ds-btn--icon)) {
  outline: none;
  box-shadow: var(--sh-sm), 0 0 0 3px var(--gold-soft);
}

/* ── Família em TECLA FÍSICA (2026-09-25) · ponte `Button` e markup `.ds-btn--solid/--ghost/--icon`.
   A mesma tecla do `AuroraButton`, pelos mesmos tokens (`tokens.css`, TECLA FÍSICA). Os
   seletores são os de antes; só os valores mudaram, então a precedência com o CSS das telas
   fica igual. Desenho: docs/plans/2026-09-25-botoes-tecla.md. */
.ds-btn--solid, .ds-btn--ghost, .ds-btn--icon {
  border: 0; border-radius: var(--rad-tecla);
  transition: background var(--dur-3) var(--ease), color var(--dur-3) var(--ease),
    box-shadow var(--dur-3) var(--ease), transform var(--dur-2) var(--spring);
}
.ds-btn--solid:not(.ds-btn--sm):not(.ds-btn--lg),
.ds-btn--ghost:not(.ds-btn--sm):not(.ds-btn--lg) { min-height: 36px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-body-sm); }
@media (pointer: coarse) {
  .ds-btn--solid:not(.ds-btn--sm):not(.ds-btn--lg) { min-height: var(--touch-target-min); }
}

/* solid · tecla de TINTA (a do primário) */
.ds-btn--solid { background: var(--tecla-face); color: var(--tecla-contra); box-shadow: var(--sh-tecla); }
.ds-btn--solid:hover:not(:disabled) { background: var(--tecla-face); transform: translateY(-1px); box-shadow: var(--sh-tecla-alta); }
.ds-btn--solid:active:not(:disabled) {
  background: var(--tecla-face-funda); transform: translateY(3px); transition-duration: var(--dur-1); box-shadow: var(--sh-tecla-funda);
}

/* ghost · rente à superfície; a placa emerge no hover */
.ds-btn--ghost { background: transparent; color: var(--ink-3); box-shadow: var(--sh-tecla-rente); }
.ds-btn--ghost:hover:not(:disabled) { color: var(--ink-1); background: var(--placa-face); transform: translateY(-1px); box-shadow: var(--sh-placa-alta); }
.ds-btn--ghost:active:not(:disabled) {
  background: var(--placa-face-funda); transform: translateY(3px); transition-duration: var(--dur-1); box-shadow: var(--sh-placa-funda);
}

/* icon · tecla de PLACA quadrada, só ícone */
.ds-btn--icon {
  padding: 0;
  width: 36px; height: 36px;
  gap: 0;
  background: var(--placa-face);
  color: var(--ink-3);
  box-shadow: var(--sh-placa);
}
.ds-btn--icon.ds-btn--sm { width: 28px; height: 28px; }
.ds-btn--icon.ds-btn--lg { width: 40px; height: 40px; }
.ds-btn--icon:hover:not(:disabled) { color: var(--ink-1); background: var(--placa-face); transform: translateY(-1px); box-shadow: var(--sh-placa-alta); }
.ds-btn--icon:active:not(:disabled) {
  background: var(--placa-face-funda); transform: translateY(3px); transition-duration: var(--dur-1); box-shadow: var(--sh-placa-funda);
}

/* Foco: anel de prata a 3 px (o mesmo do AuroraButton); nunca de luz. */
.ds-btn:is(.ds-btn--solid, .ds-btn--ghost, .ds-btn--icon):focus-visible { outline: 2px solid var(--silver); outline-offset: 3px; }

.ds-btn:disabled { cursor: not-allowed; }
.ds-btn:disabled:not(:where(.ds-btn--solid, .ds-btn--ghost, .ds-btn--icon)) {
  opacity: .5;
  transform: none !important;
}
.ds-btn:disabled::before { display: none; }
/* indisponível · tecla travada: sem parede, sem luz, texto legível (nada de opacidade).
   O `!important` é o do legado: nenhum hover de tela levanta um botão indisponível. */
.ds-btn:is(.ds-btn--solid, .ds-btn--ghost, .ds-btn--icon):disabled:not([aria-busy="true"]) {
  background: var(--tecla-trava); color: var(--ink-4); transform: none !important; box-shadow: var(--sh-tecla-trava);
}
/* carregando (`Button loading`) · tecla segurada: afundada enquanto processa */
.ds-btn:is(.ds-btn--solid, .ds-btn--ghost, .ds-btn--icon)[aria-busy="true"]:disabled {
  background: var(--placa-face-funda); cursor: progress; transform: translateY(3px); box-shadow: var(--sh-placa-funda);
}
.ds-btn.ds-btn--solid[aria-busy="true"]:disabled { background: var(--tecla-face-funda); box-shadow: var(--sh-tecla-segura); }
@media (prefers-reduced-motion: reduce) {
  .ds-btn--solid, .ds-btn--ghost, .ds-btn--icon { transition: none; }
  .ds-btn--solid:hover:not(:disabled):not(:active), .ds-btn--icon:hover:not(:disabled):not(:active) { transform: none; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ══════ CARD ══════
   Prata viva (padrão desde 2026-09-25): a borda de 1px virou camadas — rim de luz no
   topo, hairline e sombra em profundidade — e a aresta de cima PEGA LUZ (::after, a
   receita do elevado com a luz vindo de cima, que morre nas laterais em 72px). O
   padding soma o 1px da borda antiga: a caixa mantém o tamanho. */
.ds-card {
  position: relative;
  background: var(--card);
  border: 0;
  border-radius: 14px;
  padding: 25px 27px;
  box-shadow: inset 0 1px 0 var(--rim-luz), var(--hairline), var(--sh-camada);
  transition: box-shadow .4s ease, transform var(--spring-t) var(--spring);
}
.ds-card::after {
  content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--luz) 64%, transparent), transparent 72px);
  mask: linear-gradient(var(--ink-1) 0 0) content-box, linear-gradient(var(--ink-1) 0 0);
  mask-composite: exclude;
}
.ds-card--elevated {
  position: relative; border: 0;
  background: linear-gradient(145deg, var(--card-hi), var(--card) 42%);
  border-radius: var(--rad-xl);
  box-shadow: inset 0 1px 0 var(--bevel-hi), var(--hairline), var(--sh-sm), var(--sh-lg);
}
.ds-card--elevated::after {
  content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--luz) 60%, transparent), var(--line-micro) 32%, transparent 55%, var(--line) 100%);
  mask: linear-gradient(var(--ink-1) 0 0) content-box, linear-gradient(var(--ink-1) 0 0);
  mask-composite: exclude;
}
[data-t="light"] .ds-card--elevated { background: var(--card); }
.ds-card--feature {
  box-shadow: inset 0 1px 0 var(--rim-luz), var(--hairline), var(--sh-lg);
  border-radius: 18px;
  padding: 33px 35px;
}
.ds-card--interactive { cursor: pointer; }
/* hover = a peça emerge com mola: lift de 2px, hairline mais firme e sombra alta */
.ds-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--rim-luz), inset 0 0 0 1px var(--line-2), var(--sh-camada-alta);
}
@media (prefers-reduced-motion: reduce) { .ds-card--interactive:hover { transform: none; } }

/* glass · surfaces flutuantes (drawer, popover, overlay)
   v2 CANÔNICO 2026-06-09: delega ao material único .ds-glass (tokens.css).
   Receita própria foi removida — SEM BRECHAS: um vidro só no DS. */
.ds-card--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: none;
  box-shadow:
    0 0 0 1px var(--glass-edge),
    inset 0 1px 0 var(--glass-rim),
    inset 1px 1.5px 0 -1px var(--glass-spec),
    inset 0 0 24px var(--glass-in),
    0 16px 48px rgba(0,0,0,0.25),
    0 32px 72px rgba(0,0,0,0.35);
}
[data-t="light"] .ds-card--glass {
  box-shadow:
    0 0 0 1px var(--glass-edge),
    inset 0 1px 0 var(--glass-rim),
    inset 1px 1.5px 0 -1px var(--glass-spec),
    inset 0 0 24px var(--glass-in),
    0 16px 48px rgba(14,17,23,0.10),
    0 32px 72px rgba(14,17,23,0.14);
}


/* ══════ PAGE HEADER ══════ */
.ds-page-header {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 760px);
  gap: 32px;
  align-items: start;
  padding: 72px 0 48px;
  border-bottom: 1px dashed var(--line-dash);
}
.ds-ph-label {
  grid-column: 1;
  justify-self: end;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-5);
  position: sticky;
  top: 24px;
  height: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: 14px;
}
.ds-ph-label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--ink-5);
  opacity: .7;
}
.ds-ph-content {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.ds-ph-title {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 52px);
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: var(--ink-1);
  margin: 0;
}
.ds-ph-title em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-3);
  transition: color .5s ease;
}
.ds-page-header:hover .ds-ph-title em { color: var(--gold); }
.ds-ph-note {
  font-family: var(--ff-sans);
  font-size: var(--fs-lead);
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
}
.ds-ph-actions {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
}
@media (max-width: 920px) {
  .ds-page-header { grid-template-columns: 1fr; gap: var(--sp-5); }
  .ds-ph-label { grid-column: 1; justify-self: start; position: static; }
  .ds-ph-content { grid-column: 1; }
}


/* ══════ FIELD + INPUT ══════ */
.ds-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.ds-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.ds-field-label label { font: 500 var(--fs-body-sm)/1.5 var(--ff-sans); letter-spacing: -.01em; text-transform: none; color: var(--ink-2); }
.ds-field-hint {
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--ink-4);
  text-decoration: none;
  transition: color .4s ease;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ds-field-hint:hover { color: var(--gold); }
.ds-field-helper { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-3); }
.ds-field-error { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--err-text); }

.ds-input,
.ds-textarea,
.ds-select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink-1);
  font-family: var(--ff-sans);
  font-size: var(--fs-read);
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color .3s ease, box-shadow .3s ease;
  box-sizing: border-box;
}
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--ink-3); }
.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.ds-input[aria-invalid="true"],
.ds-textarea[aria-invalid="true"],
.ds-select[aria-invalid="true"] {
  border-color: var(--err);
  box-shadow: 0 0 0 3px var(--err-soft);
}
.ds-input:disabled,
.ds-textarea:disabled,
.ds-select:disabled {
  opacity: .6;
  cursor: not-allowed;
  background: var(--card-hi);
}
.ds-textarea { resize: vertical; min-height: 88px; }


/* Input recessado. A reserva lateral de ícones continua nos consumidores. */
.ds-input {
  border: 0; min-height: 36px; border-radius: var(--rad-lg); font-size: var(--fs-body);
  background: var(--bg-2); padding: var(--sp-2) var(--sp-3);
  box-shadow: inset 0 1px 2px var(--bevel-lo), inset 0 -1px 0 var(--bevel-hi), var(--hairline);
  transition: background var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.ds-input:hover:not(:disabled):not(:focus):not([aria-invalid="true"]) { box-shadow: inset 0 1px 2px var(--bevel-lo), inset 0 -1px 0 var(--bevel-hi), inset 0 0 0 1px var(--line-2); }
.ds-input:focus { outline: 2px solid var(--silver); outline-offset: 3px; background: var(--card); box-shadow: var(--hairline), var(--sh-tray); }
.ds-input[aria-invalid="true"] { outline-color: var(--err); box-shadow: inset 0 0 0 1px var(--err), var(--sh-tray), 0 0 0 3px var(--err-soft); }

/* ══════ SEARCH SELECT ══════ */
.ds-search-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.ds-search-select__input {
  padding-right: calc(26px + var(--sp-4));
}
.ds-search-select.has-value:not(.is-open) .ds-search-select__input {
  color: var(--ink-1);
}
.ds-search-select__clear {
  position: absolute;
  top: 50%;
  right: var(--sp-2);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--rad-sm);
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  transition: color var(--dur-2) ease, background var(--dur-2) ease, border-color var(--dur-2) ease;
  transform: translateY(-50%);
}
.ds-search-select__clear:hover,
.ds-search-select__clear:focus-visible {
  color: var(--ink-1);
  background: var(--gold-soft);
  border-color: var(--line);
  outline: none;
}
.ds-search-select__clear svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
}
.ds-search-select__listbox {
  position: absolute;
  top: calc(100% + var(--sp-1));
  left: 0;
  right: 0;
  z-index: var(--z-popover);
  max-height: min(240px, calc(100vh - 160px));
  overflow-y: auto;
  padding: var(--sp-1);
  border: 1px solid var(--line);
  border-radius: var(--rad-md);
}
.ds-search-select__option,
.ds-search-select__empty,
.ds-search-select__more {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--rad-md);
  font-family: var(--ff-sans);
  font-size: var(--fs-read);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.ds-search-select__option {
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.ds-search-select__option.is-active {
  background: var(--card-hi);
  color: var(--ink-1);
}
.ds-search-select__option.is-selected {
  background: var(--gold-soft);
  color: var(--ink-1);
  font-weight: 600;
}
.ds-search-select__empty,
.ds-search-select__more {
  color: var(--ink-4);
  text-align: center;
}
.ds-search-select.is-disabled {
  opacity: .65;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ds-search-select__clear,
  .ds-search-select__option {
    transition: none;
  }
}


/* ══════ PILL / BADGE ══════ */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: color-mix(in srgb, var(--card-hi) 80%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  white-space: nowrap;
  max-inline-size: min(100%, var(--ds-pill-max, 34ch));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.ds-pill--gold {
  color: var(--gold);
  background: var(--gold-soft);
  border-color: color-mix(in srgb, var(--gold) 20%, transparent);
}
.ds-pill--info {
  color: var(--info-text);
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--info) 20%, transparent);
}
.ds-pill--ok {
  color: var(--ok-text);
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 20%, transparent);
}
.ds-pill--warn {
  color: var(--warn-text);
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 20%, transparent);
}
.ds-pill--err {
  color: var(--err-text);
  background: var(--err-soft);
  border-color: color-mix(in srgb, var(--err) 20%, transparent);
}
.ds-pill .ds-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ds-pill-label {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ══════ TABLE ══════ */
.ds-table-wrap {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--card);
  box-shadow: var(--sh-sm);
}
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
}
.ds-table thead th {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--card-2);
  white-space: nowrap;
}
.ds-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody tr { transition: background .3s ease; }
.ds-table tbody tr:hover { background: var(--gold-soft); }
.ds-table td[align="right"],
.ds-table th[align="right"] { text-align: right; }
.ds-table td[align="center"],
.ds-table th[align="center"] { text-align: center; }


/* ══════ DRAWER ══════
   Aurora v2 (2026-06-10): overlay rico canônico — scrim atmosférico
   ("o vidro precisa de um céu"), host FLUTUANTE (14px de margem,
   radius 14) em glass v2 rico (material via .ds-glass.ds-glass-rich
   no JSX do AuroraDrawer) e conteúdo staggered. */
.ds-drawer-scrim {
  position: fixed;
  inset: 0;
  background-color: var(--scrim);
  background-image: var(--scrim-rich);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-4) ease;
  z-index: var(--z-overlay);
}
.ds-drawer-scrim--open {
  opacity: 1;
  pointer-events: auto;
}
.ds-drawer {
  position: fixed;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: calc(100% - 28px);
  max-width: 520px;
  border-radius: var(--rad-lg);
  overflow: hidden;
  transform: translateX(calc(100% + 42px));
  transition: transform var(--dur-5) var(--ease-expo);
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
}
.ds-drawer--wide { max-width: 720px; }
.ds-drawer--open { transform: translateX(0); }
.ds-drawer:not(.ds-drawer--open) { pointer-events: none; }
.ds-drawer-head {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  /* ZONA, não borda dura (2026-08-31, mesmo tratamento do `.modal-head`): degrau
     TONAL de verdade + rim de luz no topo + groove que fecha embaixo. O `border-bottom:
     1px solid` de antes é exatamente a "borda dura única" que o perfil visual manda
     evitar — e some dessaturado, então nem hierarquia ela entregava. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink-1) 5%, transparent),
    color-mix(in srgb, var(--ink-1) 2%, transparent));
  box-shadow: inset 0 1px 0 var(--glass-rim),
              inset 0 -1px 0 var(--bevel-lo),
              0 1px 0 var(--bevel-hi);
}
/* fio curto de acento no bordo da zona — a mesma assinatura do modal */
.ds-drawer-head::after {
  content: '';
  position: absolute; bottom: -1px; left: 24px;
  width: 32px; height: 1px;
  background: var(--gold-hi);
  box-shadow: 0 0 8px var(--gold-glow);
}
.ds-drawer-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 6px;
}
.ds-drawer-title {
  font-family: var(--ff-sans);
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink-1);
  line-height: 1.2;
  margin: 0;
}
.ds-drawer-title em {
  color: var(--gold-text);
  font-style: normal;
}
.ds-drawer-close {
  all: unset;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: color .3s ease, background .3s ease;
}
.ds-drawer-close:hover {
  color: var(--gold);
  background: var(--gold-soft);
}
.ds-drawer-close:focus-visible {
  outline: none;
  box-shadow: var(--sh-sm), 0 0 0 3px var(--gold-soft);
}
.ds-drawer-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.ds-drawer-body {
  padding: var(--sp-6);
  flex: 1;
  overflow: auto;
}
.ds-drawer-footer {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  /* zona espelhada da cabeça: o corpo fica ELEVADO entre as duas, que é o que dá
     a leitura de peça esculpida em vez de três faixas empilhadas */
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--ink-1) 5%, transparent),
    color-mix(in srgb, var(--ink-1) 2%, transparent));
  box-shadow: inset 0 -1px 0 var(--bevel-lo),
              inset 0 1px 0 var(--glass-rim),
              0 -1px 0 var(--bevel-hi);
}
.ds-drawer-footer .btn { flex: 1; justify-content: center; }
/* Conteúdo staggered (Aurora v2) — filhos diretos do body entram em
   sequência com mola quando o drawer abre (showcase §05). */
.ds-drawer-body > * { opacity: 0; }
.ds-drawer--open .ds-drawer-body > * { animation: dsRise var(--dur-5) var(--spring) forwards; }
.ds-drawer--open .ds-drawer-body > :nth-child(1) { animation-delay: 60ms; }
.ds-drawer--open .ds-drawer-body > :nth-child(2) { animation-delay: 130ms; }
.ds-drawer--open .ds-drawer-body > :nth-child(3) { animation-delay: 200ms; }
.ds-drawer--open .ds-drawer-body > :nth-child(4) { animation-delay: 270ms; }
.ds-drawer--open .ds-drawer-body > :nth-child(n+5) { animation-delay: 340ms; }

/* ── Acabamento de placa (opt-in) · 2026-06-07 ──────────────────────────
   Profundidade engenheirada (Raycast-adaptado à assinatura prata do Aurora).
   Tokens em tokens.css. ADITIVO: nada usa por padrão — aplicar em superfícies
   sob demanda. Sombras monocromáticas (sem tinta), nos 3 temas.
     .ds-plate   → placa que "emerge" do fundo (luz-de-cima + drop suave)
     .ds-press   → elemento pressionável (chip, pill, tecla)
     .ds-tray    → bandeja recessada (segmented / grupo de tabs)
     .ds-raised  → item ativo elevado dentro da bandeja
     .ds-glow-amb→ glow ambiente do modal/drawer flutuante
     .ds-hairline→ hairline interna de 1px
─────────────────────────────────────────────────────────────────────── */
.ds-plate    { box-shadow: var(--sh-plate); }
.ds-tray     { box-shadow: var(--sh-tray); }
.ds-raised   { box-shadow: var(--sh-raised); }
.ds-glow-amb { box-shadow: var(--glow-amb); }

/* ── AURORA v2 · efeitos gratificantes (CANÔNICO 2026-06-09) ─────────────
   Referência: preview-aurora-v2.html §04. Tokens --dur-1..5 / --spring /
   --spring-t em tokens.css. Aplicação tela a tela sob demanda (#21/#22).

     .ds-glass-hero    → painel de vidro hero sobre MÍDIA RICA (vibrancy):
                         tint branco 0.09 + blur 28px sat 180% + rim duplo +
                         grão 2%. Conteúdo interno em --vib-1..4. Uso: momentos
                         de destaque (login, onboarding, empty-state premium,
                         herói de tela). Estreia: SuperAdmin › Documentos.
     .ds-btn--glass         → botão de contorno translúcido p/ glass hero
                              (vibrancy --vib-*; cor só em dot semântico interno)
     .ds-btn--glass-crystal → CTA de produto em cristal nítido; modifier aditivo
                              de .ds-btn--glass (edge dupla + keycap + beam)
     .ds-success-pop   → pop de recompensa em confirmação (re-add da classe)
     .ds-rise          → entrada staggered (delay via --rise-d inline)
─────────────────────────────────────────────────────────────────────── */
.ds-glass-hero {
  position: relative;
  border-radius: var(--rad-xl);
  background: rgba(255,255,255,0.09);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.20),
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 0 36px rgba(255,255,255,0.05),
    0 24px 60px -18px rgba(0,0,0,0.45),
    0 60px 130px -40px rgba(8,10,22,0.70);
  transition: transform var(--spring-t) var(--spring), box-shadow var(--dur-3) ease;
}
.ds-glass-hero::after { /* grão 2% — autentica o vidro (mesma receita do .ds-glass) */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0.02; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Palco claro (dia) — modifier OPT-IN do glass-hero para céu claro.
   Regra theme-aware (founder, 2026-07-27, Portal de Integração): glass-hero em
   página light com palco claro veste `.ds-glass-hero.ds-glass-hero--day` —
   vidro frost com edge de tinta e vibrancy remapeada para tinta (todo conteúdo
   interno em --vib-* resolve sozinho). No dark o modifier é INERTE (vale a
   receita noturna canônica). Superfícies com palco escuro próprio no light
   (SuperAdmin › Documentos) NÃO usam --day. */
[data-t="light"] .ds-glass-hero--day {
  background: rgba(255,255,255,0.42);
  box-shadow:
    0 0 0 1px rgba(16,18,24,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.55),
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 18px 44px -18px rgba(16,18,24,0.18),
    0 44px 90px -40px rgba(16,18,24,0.22);
  --vib-1: rgba(16,18,24,0.95);
  --vib-2: rgba(16,18,24,0.66);
  --vib-3: rgba(16,18,24,0.42);
  --vib-4: rgba(16,18,24,0.22);
}
[data-t="light"] .ds-glass-hero--day .ds-btn--glass {
  background: rgba(255,255,255,0.35);
  border-color: rgba(16,18,24,0.22);
}
[data-t="light"] .ds-glass-hero--day .ds-btn--glass:hover {
  background: rgba(255,255,255,0.60);
  border-color: rgba(16,18,24,0.34);
}

.ds-btn--glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--rad-full);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--vib-1); font-family: var(--ff-sans); font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease,
    transform var(--spring-t) var(--spring);
}
.ds-btn--glass:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.65); transform: translateY(-1px); }
.ds-btn--glass:active { transform: scale(0.97); transition-duration: var(--dur-1); }

/* CTA de produto em glass hero · aprovado no demo-es-credenciais v10 (2026-07-12).
   Compor com .ds-btn--glass. O frame continua neutro; o único gradiente de
   produto fica no .ds-btn-product-dot opcional. */
.ds-btn--glass-crystal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Calibração óptica aprovada na v10: fica deliberadamente entre --sp-3/--sp-6. */
  padding: 13px 26px;
  gap: 10px;
  border-color: var(--glass-rim);
  background: color-mix(in srgb, var(--glass-clear-bg) 56%, transparent);
  color: var(--vib-1);
  font-size: var(--fs-read);
  box-shadow:
    0 0 0 1px var(--glass-edge),
    0 0 0 2.5px var(--glass-ring),
    inset 0 1px 0 var(--glass-spec),
    inset 0 -1px 0 var(--glass-in),
    var(--sh-plate),
    0 16px 30px -22px var(--modal-shadow);
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease,
    box-shadow var(--dur-2) ease, color var(--dur-2) ease,
    transform var(--spring-t) var(--spring);
}
.ds-btn--glass-crystal::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 26%, var(--glass-spec) 48%, transparent 70%);
  opacity: .46;
  transform: translateX(-125%);
  transition: transform calc(var(--dur-5) + var(--dur-3)) var(--ease);
}
.ds-btn--glass-crystal:hover:not(:disabled) {
  background: color-mix(in srgb, var(--glass-clear-bg) 74%, transparent);
  border-color: var(--glass-spec);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px var(--glass-edge),
    0 0 0 2.5px var(--glass-ring),
    inset 0 1px 0 var(--glass-spec),
    inset 0 -1px 0 var(--glass-in),
    var(--sh-raised),
    0 20px 38px -22px var(--modal-shadow);
}
.ds-btn--glass-crystal:hover:not(:disabled)::before { transform: translateX(125%); }
.ds-btn--glass-crystal:active:not(:disabled) {
  transform: scale(.96);
  box-shadow: var(--sh-tray);
  transition-duration: var(--dur-1);
}
.ds-btn--glass-crystal:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px var(--glass-edge),
    0 0 0 2.5px var(--glass-ring),
    0 0 0 5px color-mix(in srgb, var(--pd-1) 36%, transparent),
    inset 0 1px 0 var(--glass-spec),
    var(--sh-raised);
}
.ds-btn--glass-crystal:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  border-color: var(--glass-rim);
  background: color-mix(in srgb, var(--glass-clear-bg) 56%, transparent);
  box-shadow:
    0 0 0 1px var(--glass-edge),
    0 0 0 2.5px var(--glass-ring),
    inset 0 1px 0 var(--glass-spec),
    inset 0 -1px 0 var(--glass-in),
    var(--sh-plate),
    0 16px 30px -22px var(--modal-shadow);
}
.ds-btn--glass-crystal:disabled::before { display: none; }
[data-t="light"] .ds-btn--glass-crystal {
  background: color-mix(in srgb, var(--glass-clear-bg) 62%, transparent);
  color: var(--ink-1);
}
[data-t="light"] .ds-btn--glass-crystal:hover:not(:disabled) {
  background: color-mix(in srgb, var(--glass-clear-bg) 86%, transparent);
}
.ds-btn-product-dot {
  width: var(--sp-2);
  height: var(--sp-2);
  flex: none;
  border-radius: var(--rad-full);
  background: var(--pd-grad);
  box-shadow: 0 0 10px var(--gold-glow);
}

/* Connection Deck · modifier do Button aprovado no Embedded Signup v12
   (2026-07-12). A bandeja integra escolha e consequência; o frame permanece
   neutro e o produto cyan→violeta aparece somente na ponte microscópica. */
.ds-connection-deck {
  width: 100%;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--rad-xl);
  background: color-mix(in srgb, var(--panel-zone-bg) 82%, transparent);
  box-shadow: var(--sh-tray);
}
.ds-connection-route {
  position: relative;
  background: transparent;
  transition: background var(--dur-3) ease, box-shadow var(--dur-3) ease,
    transform var(--spring-t) var(--spring), opacity var(--dur-2) ease;
}
.ds-connection-route:not([data-checked="true"]) { opacity: .74; }
.ds-connection-route:not([data-checked="true"]):hover {
  opacity: 1;
  background: var(--panel-zone-bg);
}
.ds-connection-route[data-checked="true"] {
  z-index: 1;
  background: color-mix(in srgb, var(--card-hi) 74%, transparent);
  box-shadow: var(--hairline), var(--sh-raised), 0 18px 34px -30px var(--modal-shadow);
  transform: translateY(-1px);
}
.ds-connection-route[data-checked="true"]::after {
  content: '';
  position: absolute;
  left: var(--sp-4);
  bottom: 0;
  width: var(--sp-7);
  height: 2px;
  border-radius: var(--rad-full);
  background: var(--pd-1);
}
.ds-connection-route:focus-within {
  opacity: 1;
  outline: none;
  box-shadow: var(--hairline), 0 0 0 4px color-mix(in srgb, var(--pd-1) 30%, transparent), var(--sh-raised);
}
.ds-connection-route.is-disabled {
  opacity: .48;
  cursor: not-allowed;
}
.ds-connection-route.is-disabled:hover {
  opacity: .48;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.ds-btn--connection-dock {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius: var(--rad-lg);
  text-align: left;
}
.ds-btn-connection-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: var(--sp-1);
}
.ds-btn-connection-kicker {
  font: 700 var(--fs-meta)/1 var(--ff-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vib-3);
}
.ds-btn-connection-title {
  font: 650 var(--fs-lead)/1.25 var(--ff-sans);
  letter-spacing: -.015em;
  color: var(--vib-1);
}
.ds-connection-bridge {
  min-height: 46px;
  display: grid;
  align-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--rad-md);
  background: var(--panel-zone-bg);
  box-shadow: var(--hairline), var(--sh-tray);
  transition: background var(--dur-2) ease, box-shadow var(--dur-2) ease,
    transform var(--spring-t) var(--spring);
}
.ds-connection-bridge-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font: 700 var(--fs-micro)/1 var(--ff-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vib-3);
}
.ds-connection-bridge-track {
  display: grid;
  grid-template-columns: 6px minmax(20px, 1fr) 6px;
  align-items: center;
  gap: var(--sp-2);
}
.ds-connection-bridge-node {
  width: 6px;
  height: 6px;
  border-radius: var(--rad-full);
}
.ds-connection-bridge-node[data-side="source"] { background: var(--pd-1); }
.ds-connection-bridge-node[data-side="target"] { background: var(--pd-2); }
.ds-connection-bridge-line {
  height: 1px;
  background: var(--pd-grad);
  opacity: .54;
  transform: scaleX(.38);
  transform-origin: left;
  transition: opacity var(--dur-3) ease, transform var(--dur-5) var(--ease);
}
.ds-btn--connection-dock:hover:not(:disabled) .ds-connection-bridge,
.ds-btn--connection-dock:focus-visible .ds-connection-bridge {
  background: color-mix(in srgb, var(--glass-clear-bg) 42%, transparent);
  box-shadow: var(--hairline), var(--sh-plate);
  transform: translateX(-1px);
}
.ds-btn--connection-dock:hover:not(:disabled) .ds-connection-bridge-line,
.ds-btn--connection-dock:focus-visible .ds-connection-bridge-line,
.ds-btn--connection-dock[aria-busy="true"] .ds-connection-bridge-line,
.ds-connection-bridge[data-state="connected"] .ds-connection-bridge-line {
  opacity: 1;
  transform: scaleX(1);
}
.ds-btn--connection-dock:disabled:not([aria-busy="true"]) .ds-connection-bridge-node {
  background: var(--vib-4);
  box-shadow: none;
}
.ds-btn--connection-dock:disabled:not([aria-busy="true"]) .ds-connection-bridge-line {
  background: var(--vib-4);
  opacity: .32;
}
.ds-btn--connection-dock:disabled[aria-busy="true"] {
  opacity: .82;
  cursor: wait;
}
.ds-btn--connection-dock[aria-busy="true"] .ds-connection-bridge-node {
  animation: dsConnectionCharge 680ms var(--ease) both;
}
.ds-btn--connection-dock[aria-busy="true"] .ds-connection-bridge-node[data-side="target"] {
  animation-delay: 140ms;
}

@keyframes dsConnectionCharge {
  0% { transform: scale(.72); filter: brightness(1); }
  50% { transform: scale(1.45); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 440px) {
  .ds-btn--connection-dock {
    grid-template-columns: 1fr;
    min-height: 88px;
    padding: var(--sp-3);
  }
  .ds-connection-bridge { min-height: 34px; }
}

@keyframes dsSuccessPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.10); filter: brightness(1.25); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); filter: brightness(1); }
}
.ds-success-pop { animation: dsSuccessPop 400ms var(--spring); }

@keyframes dsRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ds-rise { opacity: 0; animation: dsRise var(--dur-5) var(--spring) forwards; animation-delay: var(--rise-d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .ds-success-pop, .ds-rise { animation-duration: 0.01ms; }
  .ds-rise { opacity: 1; transform: none; }
  .ds-drawer-body > * { opacity: 1; animation: none; }
  .ds-drawer { transition-duration: 0.01ms; }
  .ds-btn--glass-crystal, .ds-btn--glass-crystal::before { transition: none; }
  .ds-btn--glass-crystal::before { display: none; }
  .ds-btn--glass-crystal:hover:not(:disabled),
  .ds-btn--glass-crystal:active:not(:disabled) { transform: none; }
  .ds-connection-route, .ds-connection-bridge, .ds-connection-bridge-line,
  .ds-connection-bridge-node { transition: none; animation: none !important; }
  .ds-connection-route[data-checked="true"] { transform: none; }
  .ds-btn--connection-dock:hover:not(:disabled) .ds-connection-bridge,
  .ds-btn--connection-dock:focus-visible .ds-connection-bridge { transform: none; }
}

/* ── AURORA v2 · padrões editoriais (Raycast→Aurora · CANÔNICO 2026-06-09) ──
   Referência: preview-aurora-v2.html §06. Acendem na assinatura por tema
   (prata no Vigília, ouro no Alvorada via --gold-text/hi/glow). Pra heros,
   landing e estados premium — não em tabela/listagem operacional.

     .ds-divider-label → linha que esquenta até o label mono central
     .ds-h-duo         → headline 2 linhas: forte + .dim apagada (mesma escala)
     .ds-feat          → feature lead-in: <b> emendado no texto calm; .on/hover acende
     .ds-dashes/.ds-dash → indicador de carrossel/stepper; .on acende com glow
─────────────────────────────────────────────────────────────────────── */
.ds-divider-label { display: flex; align-items: center; gap: var(--sp-4); }
.ds-divider-label::before, .ds-divider-label::after { content: ''; flex: 1; height: 1px; }
.ds-divider-label::before { background: linear-gradient(90deg, transparent, var(--line-2) 55%, var(--gold-glow)); }
.ds-divider-label::after { background: linear-gradient(90deg, var(--gold-glow), var(--line-2) 45%, transparent); }
.ds-divider-label span {
  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-text); text-shadow: 0 0 14px var(--gold-glow);
}

.ds-h-duo { font-weight: 700; letter-spacing: -0.04em; line-height: 1.18; color: var(--ink-1); }
.ds-h-duo .dim { display: block; color: var(--ink-4); font-weight: 600; transition: color var(--dur-4) var(--ease); }
.ds-h-duo:hover .dim { color: var(--ink-3); }

.ds-feat { line-height: 1.68; color: var(--ink-4); opacity: 0.42; transition: opacity var(--dur-4) var(--ease); }
.ds-feat b { color: var(--ink-1); font-weight: 600; }
.ds-feat.on, .ds-feat:hover { opacity: 1; }

.ds-dashes { display: flex; gap: 10px; }
.ds-dash {
  width: 46px; height: 2px; border-radius: 2px; padding: 0; border: none; cursor: pointer;
  background: var(--line-2);
  transition: background var(--dur-3) ease, box-shadow var(--dur-3) ease, transform var(--spring-t) var(--spring);
}
.ds-dash:hover { transform: scaleY(2); }
.ds-dash.on { background: var(--gold-hi); box-shadow: 0 0 10px var(--gold-glow); }
[data-t="light"] .ds-dash.on { background: var(--gold); }

/* ── AURORA v2 · painel de conteúdo glass (modal de LEITURA · CANÔNICO 2026-06-09) ──
   Ref Raycast Quick AI, traduzido pro Aurora. Modal grande (~720px) em glass v2
   pra conteúdo LONGO: resposta do Oráculo, preview de mensagem renderizada,
   detalhes extensos. Referência: preview-aurora-v2.html §05 ("Painel de conteúdo").
   Host: <div class="ds-panel ds-glass" role="dialog" aria-modal="true">.
   Abertura/fechamento seguem o padrão do Modal (scale+blur+spring, scrim, Esc).

     .ds-panel        → container flex-coluna (largura ~720px, max-height 82vh)
     .ds-panel-head   → faixa do título/pergunta (hairline embaixo) + .ds-kbd esc
     .ds-panel-body   → área scrollável
     .ds-panel-read   → painel interno de leitura: frost + tray, máx 68ch, lh 1.75
     .ds-panel-ref    → chip de fonte/referência numerada (.n em --gold-text)
     .ds-panel-foot   → identidade à esquerda + ações com .ds-kbd à direita
     .ds-kbd          → tecla de atalho (kbd-bg + bevel)
─────────────────────────────────────────────────────────────────────── */
.ds-panel { display: flex; flex-direction: column; width: 720px; max-width: 94vw; max-height: 82vh; border-radius: var(--rad-lg); }
/* cabeçalho = faixa de contexto: gelo no fundo do topo e, no lugar da borda, o fio de luz
   que se dissolve para a direita — o vocabulário do rótulo de seção (2026-09-25). O painel
   é vidro: o gelo aqui é véu TRANSLÚCIDO de luz, não a placa opaca da R12. */
.ds-panel-head {
  display: flex; align-items: center; gap: var(--sp-3); padding: 16px 20px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--luz) 50%, transparent), color-mix(in srgb, var(--luz) 14%, transparent) 62%, transparent) bottom / 100% 1px no-repeat,
    linear-gradient(160deg, color-mix(in srgb, var(--luz) 14%, transparent), color-mix(in srgb, var(--luz) 4%, transparent) 72%);
}
.ds-panel-head .q { flex: 1; font-size: var(--fs-lead); font-weight: 600; color: var(--ink-1); letter-spacing: -0.014em; }
.ds-panel-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: var(--sp-4); }
.ds-panel-read { /* leitura NÍTIDA: fundo quase opaco — blur é do frame, não do texto */
  border-radius: 10px; padding: 18px 22px; max-width: 68ch;
  background: var(--panel-read-bg);
  box-shadow: inset 0 1px 0 var(--frost-edge), inset 0 0 0 1px var(--line), var(--sh-tray);
  font-size: var(--fs-read); line-height: 1.75; color: var(--ink-2);
}
[data-t="light"] .ds-panel-read { color: var(--ink-1); }
.ds-panel-read b { color: var(--ink-1); font-weight: 600; }
.ds-panel-read p + p { margin-top: 10px; }
.ds-panel-read ol, .ds-panel-read ul { margin: 10px 0 4px 18px; display: grid; gap: 7px; }
.ds-panel-ref {
  display: inline-flex; align-items: center; gap: 7px; margin-right: 8px;
  padding: 4px 11px; border-radius: 6px; cursor: pointer;
  background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line);
  font-family: var(--ff-mono); font-size: var(--fs-meta); color: var(--ink-3);
  transition: box-shadow var(--dur-2) ease, color var(--dur-2) ease;
}
.ds-panel-ref:hover { color: var(--ink-1); box-shadow: inset 0 0 0 1px var(--line-2); }
.ds-panel-ref .n { color: var(--gold-text); font-weight: 700; }
.ds-panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--line); background: var(--panel-zone-bg); }
.ds-panel-act {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px 10px; border-radius: 6px; border: none; background: transparent; cursor: pointer;
  font-family: var(--ff-sans); font-size: 12px; font-weight: 500; color: var(--ink-3);
  transition: background var(--dur-2) ease, color var(--dur-2) ease;
}
.ds-panel-act:hover { background: var(--frost); color: var(--ink-1); }
.ds-kbd {
  font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3);
  background: var(--kbd-bg); border-radius: 4px; padding: 2px 6px;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 -1px 0 var(--bevel-lo);
}

/* ── AURORA v2 · acabamento rico de overlay (CANÔNICO 2026-06-09) ────────
   "O vidro precisa de um céu": modal/painel SEMPRE com .ds-scrim atrás
   (luz atmosférica) e .ds-glass-rich no host (wash de luz no topo + sombra
   com lift colorido). Drawer = FLUTUANTE (14px de margem, radius 14) — não
   colado na borda. Conteúdo interno entra staggered via .ds-rise.

     .ds-scrim       → scrim atmosférico (cor atrás do vidro + blur 10px)
     .ds-glass-rich  → compõe com .ds-glass: tint próprio + wash + lift
─────────────────────────────────────────────────────────────────────── */
.ds-scrim {
  position: fixed; inset: 0;
  background-color: var(--scrim);
  background-image: var(--scrim-rich);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}
.ds-glass-rich {
  background: linear-gradient(180deg, var(--glass-wash), transparent 110px), var(--glass-rich-bg);
  box-shadow:
    0 0 0 1px var(--glass-edge),
    inset 0 1px 0 var(--glass-rim),
    inset 1px 1.5px 0 -1px var(--glass-spec),
    inset 0 0 24px var(--glass-in),
    0 16px 48px rgba(0,0,0,0.25),
    0 32px 72px rgba(0,0,0,0.35),
    0 64px 160px -48px var(--glass-lift);
}
[data-t="light"] .ds-glass-rich {
  box-shadow:
    0 0 0 1px var(--glass-edge),
    inset 0 1px 0 var(--glass-rim),
    inset 1px 1.5px 0 -1px var(--glass-spec),
    inset 0 0 24px var(--glass-in),
    0 16px 48px rgba(14,17,23,0.10),
    0 32px 72px rgba(14,17,23,0.14),
    0 64px 160px -48px var(--glass-lift);
}

/* ══════ UTILITÁRIOS ══════ */
/* ── Scrollbar fina canônica · aplicar em qualquer área rolável (Aurora v2) ──
   thumb prata-discreto (--ink-5) com track invisível; o border transparente +
   background-clip cria o "respiro" de 2px ao redor do thumb. Substitui as 3
   cópias de ::-webkit-scrollbar que viviam soltas na Agenda. */
.ds-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
.ds-scroll::-webkit-scrollbar-track { background: transparent; }
.ds-scroll::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: var(--rad-full); border: 2px solid transparent; background-clip: padding-box; }
.ds-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: padding-box; }

/* ══════ PRIMITIVAS · extraídas da Agenda (#55/#56 · Aurora v2) ══════ */

/* ── MixBar · groove de distribuição (de .ag-cdc-bar/.ag-cdc-legend) ── */
.ds-mixbar { border-radius: var(--rad-full); background: var(--bg-2); box-shadow: var(--sh-tray); padding: 1.5px; display: flex; gap: 2px; overflow: hidden; }
.ds-mixbar i { height: 100%; border-radius: var(--rad-full); box-shadow: inset 0 0.5px 0 var(--glass-spec); min-width: 3px; transition: filter var(--dur-2) var(--ease); }
.ds-mixbar:hover i { filter: saturate(1.12) brightness(1.04); }
.ds-mixbar-rest { background: var(--silver-soft); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 0.5px 0 var(--glass-spec); }
.ds-mixbar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-3); }
.ds-mixbar-leg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; }
.ds-mixbar-leg i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.ds-mixbar-leg-nm { display: inline-block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ds-mixbar-leg b { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; color: var(--ink-1); font-weight: 700; }

/* ── StatusDot · ponto de status com halo (de .ag-ev-dot/.ag-ev-lbl/.ag-wk4-dot) ──
   --st é injetado inline pelo componente (var do token de cor). O rótulo
   revela-se por max-width/opacity quando o container .ds-schedrow está em
   hover/seleção e o wrap pede [data-reveal="hover"]. */
.ds-statusdot-wrap { display: inline-flex; align-items: center; font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-text, var(--st)); white-space: nowrap; }
.ds-statusdot { border-radius: var(--rad-full); background: var(--st); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 16%, transparent), 0 0 7px color-mix(in srgb, var(--st) 55%, transparent); }
/* dense (semana): halo mais discreto p/ o ponto 6px — paridade com .ag-wk4-dot */
.ds-statusdot-wrap.is-dense .ds-statusdot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--st) 18%, transparent), 0 0 6px color-mix(in srgb, var(--st) 45%, transparent); }
.ds-statusdot-lbl { margin-left: 7px; }
.ds-statusdot-wrap[data-reveal="hover"] .ds-statusdot-lbl { max-width: 0; overflow: hidden; opacity: 0; margin-left: 0; transition: max-width var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease), margin-left var(--dur-3) var(--ease); }
.ds-schedrow:hover .ds-statusdot-wrap[data-reveal="hover"] .ds-statusdot-lbl,
.ds-schedrow.is-sel .ds-statusdot-wrap[data-reveal="hover"] .ds-statusdot-lbl { max-width: 96px; opacity: 1; margin-left: 7px; }

/* ── ScheduleRow · linha time-led ──
   Base = linha do dia (.ag-ev): [hora · nome+meta · ações+status]; calm/radiant
   (filhos .58 → 1 no hover/seleção), divisor vertical após a hora, rótulo do
   status revelado no hover. Modifier .is-dense = semana (.ag-wk4-item): grid
   dot-led [ponto · hora · nome], compacto, hover plano (sem lift/divisor/rótulo).
   fs em px crus = paridade verbatim com #55/#56 (não trocar por --fs-* sem re-aprovar). */
.ds-schedrow { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-3); border-radius: var(--rad-md); transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.ds-schedrow:not(.is-dense) > * { opacity: .58; transition: opacity var(--dur-3) var(--ease); }
.ds-schedrow:not(.is-dense):hover > *, .ds-schedrow:not(.is-dense).is-sel > * { opacity: 1; }
.ds-schedrow:hover { background: var(--card-hi); box-shadow: var(--sh-raised); transform: translateY(-1px); }
.ds-schedrow.is-sel { background: var(--card-hi); box-shadow: var(--sh-raised); }
.ds-schedrow-time { position: relative; font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-body-sm); color: var(--ink-2); padding-right: var(--sp-3); letter-spacing: -0.01em; }
.ds-schedrow-time::after { content: ''; position: absolute; right: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(180deg, transparent, var(--line-2), transparent); }
.ds-schedrow-main { min-width: 0; }
.ds-schedrow-name { font-size: var(--fs-body); font-weight: 600; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; }
.ds-schedrow-meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: 2px; }
.ds-schedrow-act { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; }
/* dense (semana): dot-led, compacto, hover plano (sem lift, sem divisor) */
.ds-schedrow.is-dense { grid-template-columns: auto auto 1fr; padding: 6px 7px; border-radius: var(--rad-sm); transition: background var(--dur-2) var(--ease); }
.ds-schedrow.is-dense:hover { background: var(--card-hi); box-shadow: none; transform: none; }
.ds-schedrow.is-dense .ds-schedrow-time { padding-right: 0; font-size: 11px; color: var(--ink-3); }
.ds-schedrow.is-dense:hover .ds-schedrow-time { color: var(--ink-2); }
.ds-schedrow.is-dense .ds-schedrow-time::after { display: none; }
.ds-schedrow.is-dense .ds-schedrow-name { font-size: 11.5px; }

/* ── CollapsibleSection · disclosure resumo→detalhe (de .ag-cdc/.ag-cdc-expand/.ag-cdc-toggle) ──
   toggle reusa .ds-btn--ghost.ds-btn--sm (só ajusta tipografia/chevron); filhos
   do detalhe entram com o keyframe dsRise (ds.css §efeitos) escalonado por --i. */
.ds-collapse-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ds-collapse-title { font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
/* toggle = keycap (paridade com .ag-cdc-toggle): reusa a base .ds-btn mas sem
   borda em repouso; hover vira placa (card + sh-plate), press afunda (sh-tray). */
.ds-collapse-toggle { gap: 5px; font-family: var(--ff-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 8.5px; color: var(--ink-4); background: transparent; border: 1px solid transparent; padding: 4px 9px; margin: -4px -6px -4px 0; transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.ds-collapse-toggle:hover { color: var(--ink-1); background: var(--card); border-color: var(--line); box-shadow: var(--sh-plate); }
.ds-collapse-toggle:active { transform: scale(.96); box-shadow: var(--sh-tray); }
.ds-collapse-toggle svg { width: 11px; height: 11px; stroke-width: 2; transition: transform var(--dur-3) var(--spring); }
.ds-collapse.is-open .ds-collapse-toggle svg { transform: rotate(180deg); }
.ds-collapse-summary { margin-top: var(--sp-3); }
.ds-collapse-detail { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur-4) var(--ease), opacity var(--dur-3) var(--ease); }
.ds-collapse.is-open .ds-collapse-detail { max-height: 340px; opacity: 1; margin-top: var(--sp-3); }
.ds-collapse.is-open .ds-collapse-detail.ds-scroll { overflow-y: auto; }
.ds-collapse.is-open .ds-collapse-detail > * { animation: dsRise var(--dur-3) var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms); }
@media (prefers-reduced-motion: reduce) { .ds-collapse-toggle, .ds-collapse-toggle svg, .ds-collapse-detail, .ds-collapse-detail > *, .ds-schedrow, .ds-statusdot-lbl { transition: none; animation: none; } }


/* ══════ SEGMENTED CONTROL ══════
   Bandeja funda com TECLA elevada — o idioma de seleção do Aurora
   ("seleção deve parecer peça elevada dentro de uma bandeja", nunca
   formulário com outline colorido). A tecla ativa recebe as mesmas três
   camadas da âncora .ag-cell: bevel de topo, ring ink e drop curto.
   Escolha binária/ternária curta; para muitas opções use .ds-select. */
.ds-seg {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: max-content; max-width: 100%;
  padding: var(--sp-1); gap: var(--sp-1); border-radius: var(--rad-full); background: var(--bg-2);
  box-shadow: inset 0 1px 2px var(--bevel-lo), inset 0 -1px 0 var(--bevel-hi);
}
.ds-seg-opt {
  display: inline-flex; gap: 6px; border: 0; background: transparent; color: var(--ink-4); cursor: pointer; font-family: var(--ff-sans); transition: color var(--dur-2) var(--ease), background var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), transform var(--dur-1) var(--ease); justify-content: center; align-items: center; text-align: center; white-space: nowrap;
  min-height: 32px; min-width: 0; border-radius: var(--rad-full); padding: 6px var(--sp-3);
  font-size: var(--fs-body-sm); line-height: 1.2; font-weight: 500;
}
.ds-seg-opt:hover:not(:disabled) { color: var(--ink-2); }
/* a tecla ativa ganha o aro de luz fria no lugar da hairline (Prata viva, 2026-09-25) */
.ds-seg-opt[aria-pressed="true"] { background: linear-gradient(180deg, var(--card-hi), var(--card)); color: var(--ink-1); box-shadow: inset 0 1px 0 var(--bevel-hi), 0 0 0 1px var(--luz-aro), var(--sh-raised); transform: none; }
.ds-seg-opt:active:not(:disabled) { transform: scale(.96); box-shadow: var(--sh-tray); }
.ds-seg-opt:focus-visible { outline: 2px solid var(--silver); outline-offset: -2px; }
[data-t="light"] .ds-seg-opt[aria-pressed="true"] { background: var(--card); }
.ds-seg-opt:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ds-seg-opt svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}

/* ══════ COMPOSER ══════
   Superfície de escrita com o trilho de ação DENTRO da mesma peça —
   o que molda o envio (anexo, alcance, template, ação) mora junto do
   texto, em vez de virar botões soltos em volta de um textarea.

   ANATOMIA ≠ HABITAT. `.ds-composer` é só layout; o material vem por
   modifier — `.ds-composer--plate` dentro de página operacional (nunca
   translúcido: formulário é core de leitura) ou `.ds-glass-hero` +
   `.ds-composer--hero` no momento de entrada sobre mídia. Sem essa
   separação o shell sobrescreveria o box-shadow do vidro canônico e
   mataria edge/rim/specular.

   Responde à PRÓPRIA largura (container query): dentro de um drawer de
   380px se comporta como no celular, sem depender do viewport. */
.ds-composer {
  position: relative;
  /* sem min-width:0 o textarea impõe sua largura mínima intrínseca e a
     peça estoura o grid/flex que a hospeda */
  min-width: 0;
  container-type: inline-size;
  border-radius: var(--rad-xl);
  transition: box-shadow var(--dur-3) var(--ease), transform var(--dur-2) var(--ease),
              background var(--dur-3) var(--ease);
}

/* habitat 1 · placa (padrão) — acabamento pareado com --ag-finish */
.ds-composer--plate {
  --cmp-finish:
    inset 0 1px 0 var(--bevel-hi),
    0 0 0 1px color-mix(in srgb, var(--ink-1) 9%, transparent),
    var(--sh-sm),
    0 13px 26px -12px rgba(14,17,23,0.16);
  background: var(--card);
  box-shadow: var(--cmp-finish);
}
.ds-composer--plate:hover {
  background: var(--card-hi);
  box-shadow: var(--cmp-finish), 0 20px 38px -14px rgba(14,17,23,0.20);
}
/* o foco cerca a PEÇA INTEIRA — o usuário focou a superfície, não uma caixinha */
.ds-composer--plate:focus-within {
  background: var(--card-hi);
  box-shadow:
    var(--cmp-finish),
    inset 0 0 0 1px var(--gold),
    0 0 0 3px var(--gold-soft),
    0 20px 38px -14px rgba(14,17,23,0.20);
}
.ds-composer--plate[data-state="err"] {
  box-shadow: var(--cmp-finish), inset 0 0 0 1px var(--err), 0 0 0 3px var(--err-soft);
}
.ds-composer[data-state="off"] { opacity: .55; pointer-events: none; }

/* núcleo de escrita — a translucidez é do frame, nunca do texto */
.ds-composer-core {
  width: 100%; min-width: 0; display: block; resize: none;
  border: 0; outline: none; background: transparent;
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  min-height: 104px;
  font-family: var(--ff-sans); font-size: var(--fs-read); line-height: 1.75;
  letter-spacing: -0.005em; color: var(--ink-1);
}
.ds-composer-core::placeholder { color: var(--ink-3); }

/* trilho — ZONA própria com raio concêntrico (externo − 1px), não divisória */
.ds-composer-rail {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; row-gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--panel-zone-bg);
  border-radius: 0 0 calc(var(--rad-xl) - 1px) calc(var(--rad-xl) - 1px);
}
.ds-composer-rail-sp { flex: 1; }

/* metadados do envio — dado em mono, sem gritar */
.ds-composer-meta {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: 0 var(--sp-5) var(--sp-3);
}
.ds-composer-var {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--rad-full);
  background: var(--panel-zone-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 10%, transparent),
              inset 0 1px 0 var(--bevel-hi);
  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .12em; color: var(--ink-4); text-transform: uppercase;
}
/* o TOKEN é o dado — acende na assinatura; --gold-text é prata no dark e
   tom escuro no light (regra anti-"sujo": base clara nunca vira texto) */
.ds-composer-var b { color: var(--gold-text); font-weight: 700; }
.ds-composer-count {
  margin-left: auto;
  font-family: var(--ff-mono); font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums; color: var(--ink-4);
}
.ds-composer-count b { color: var(--ink-2); font-weight: 600; }
.ds-composer[data-state="err"] .ds-composer-count b { color: var(--err); }

/* seletor de template — acento de PRODUTO num gesto pequeno (só o dot) */
.ds-composer-pick {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 7px 12px 7px 10px; border: 1px solid var(--line-2);
  border-radius: var(--rad-full);
  background: var(--card); color: var(--ink-2); cursor: pointer;
  font-family: var(--ff-mono); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: .04em; box-shadow: var(--sh-plate);
  transition: border-color var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease),
              transform var(--dur-2) var(--ease), background var(--dur-3) var(--ease);
}
.ds-composer-pick:hover:not(:disabled) {
  transform: translateY(-1px); box-shadow: var(--sh-raised);
  border-color: var(--line-3); background: var(--card-hi);
}
.ds-composer-pick:active:not(:disabled) { transform: scale(.97); box-shadow: var(--sh-press); }
.ds-composer-pick:focus-visible { outline: none; box-shadow: var(--sh-plate), 0 0 0 3px var(--gold-soft); }
.ds-composer-pick:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ds-composer-pick-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--pd-grad); box-shadow: 0 0 8px var(--gold-glow);
}
.ds-composer-pick svg {
  width: 11px; height: 11px; fill: none; stroke: currentColor;
  stroke-width: 2; opacity: .6; flex-shrink: 0;
}

/* sugestões — pill na mesma família do DS, fora da peça */

/* habitat 2 · hero — compor com .ds-glass-hero; conteúdo em vibrancy.
   NÃO redeclara background/box-shadow: quem veste é o vidro canônico. */
.ds-composer--hero .ds-composer-core { color: var(--vib-1); min-height: 84px; }
.ds-composer--hero .ds-composer-core::placeholder { color: var(--vib-3); }
.ds-composer--hero .ds-composer-rail {
  border-top-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}
.ds-composer--hero .ds-seg {
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.28);
}
.ds-composer--hero .ds-seg-opt { color: var(--vib-3); }
.ds-composer--hero .ds-seg-opt[aria-pressed="true"] {
  background: rgba(255,255,255,0.16); color: var(--vib-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.ds-composer--hero .ds-composer-pick {
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.28);
  color: var(--vib-1); box-shadow: none;
}
.ds-composer--hero .ds-composer-var {
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
  color: var(--vib-2);
}
.ds-composer--hero .ds-composer-var b { color: var(--vib-1); }
.ds-composer--hero .ds-composer-count { color: var(--vib-3); }
.ds-composer--hero .ds-composer-count b { color: var(--vib-1); }
.ds-composer--hero:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,0.22); }

/* estreito: a ação principal ocupa a linha inteira — CTA de disparo não
   fica espremido ao lado do seletor num toque de polegar */
@container (max-width: 520px) {
  .ds-composer-rail > .ds-btn--solid { flex: 1 0 100%; justify-content: center; }
  .ds-composer-core { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .ds-composer-meta { padding: 0 var(--sp-4) var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-seg-opt, .ds-composer, .ds-composer--plate, .ds-composer-pick {
    transition: none;
  }
  .ds-seg-opt[aria-pressed="true"], .ds-composer-pick:hover {
    transform: none;
  }
}


/* ══════ WIPE ══════
   Micro-gesto de compromisso: uma barra varre da esquerda e o texto
   inverte de tinta na MESMA curva — a cor troca exatamente onde a barra
   passa, sem letra meio-pintada. Assinatura institucional (--ink-1 sobre
   --bg), nunca cor de produto.

   Uso: <span class="ds-wipe" data-wipe="Nova campanha">Nova campanha</span>
   O atributo repete o texto: é ele que o ::after imprime invertido.

   Habitat: lead-in editorial, chip de sugestão, título de card de entrada.
   NUNCA em linha de tabela — lá vale calm 0.58, sem texto acendendo. */
.ds-wipe {
  position: relative;
  display: inline-block;
  padding: 0 var(--sp-1);
  isolation: isolate;
  color: var(--ink-1);
}
/* a marca-texto é a TECLA da Prata viva, com brilho de luz fria (2026-09-25) */
.ds-wipe::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--tecla);
  box-shadow: 0 0 14px -2px var(--luz-brilho);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-3) var(--ease);
  z-index: -1;
}
.ds-wipe::after {
  content: attr(data-wipe);
  position: absolute; inset: 0; padding: inherit;
  color: var(--tecla-contra);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-3) var(--ease);
  pointer-events: none;
}
.ds-wipe:hover::before,
.ds-preflight:hover .ds-wipe::before,
.ds-preflight:focus-within .ds-wipe::before,
.ds-preflight.is-on .ds-wipe::before,
.ds-wipe.is-on::before { transform: scaleX(1); }
.ds-wipe:hover::after,
.ds-preflight:hover .ds-wipe::after,
.ds-preflight:focus-within .ds-wipe::after,
.ds-preflight.is-on .ds-wipe::after,
.ds-wipe.is-on::after { clip-path: inset(0 0 0 0); }

/* ══════ PREFLIGHT ══════
   O hover deixa de decorar e passa a informar: em repouso a peça mostra
   IDENTIDADE; sob o ponteiro mostra CONSEQUÊNCIA — o que o clique vai
   fazer. Num produto que dispara mensagem real a paciente, isso não é
   enfeite: é o pré-voo virando gesto.

   DUAS DENSIDADES, mesma mecânica:
     .ds-preflight--brief → o dado e a proporção (card denso, grade)
     .ds-preflight--full  → o que sai · pra quem · quando (card de entrada)

   Os estratos entram em cascata (--i controla o atraso), no ritmo do bloom
   das pétalas — assinatura de movimento da marca liberada para transição.

   ⚠️ O texto exibido é o TEMPLATE, com {{n}} por substituir. Hover em
   lista NUNCA imprime nome de paciente: não se vaza PHI para quem passa
   os olhos na tela.

   Habitat: card de entrada de fluxo, hero, empty state premium.
   NUNCA em tabela ou listagem densa. */
.ds-preflight { position: relative; overflow: hidden; }

.ds-pf-body {
  display: grid; gap: var(--sp-3);
  margin-top: 0; max-height: 0; opacity: 0;
  transition: max-height var(--dur-5) var(--ease),
              opacity var(--dur-3) var(--ease),
              margin-top var(--dur-4) var(--ease);
}
.ds-preflight:hover .ds-pf-body,
.ds-preflight:focus-within .ds-pf-body,
.ds-preflight.is-on .ds-pf-body {
  max-height: 280px; opacity: 1; margin-top: var(--sp-4);
}
.ds-preflight--brief .ds-pf-body { gap: var(--sp-2); }
.ds-preflight--brief:hover .ds-pf-body,
.ds-preflight--brief:focus-within .ds-pf-body,
.ds-preflight--brief.is-on .ds-pf-body { max-height: 96px; margin-top: var(--sp-3); }

.ds-pf-stratum {
  opacity: 0; transform: translateY(7px);
  transition: opacity var(--dur-3) var(--ease),
              transform var(--spring-t) var(--spring);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.ds-preflight:hover .ds-pf-stratum,
.ds-preflight:focus-within .ds-pf-stratum,
.ds-preflight.is-on .ds-pf-stratum { opacity: 1; transform: translateY(0); }

/* superfície revelada — peça esculpida, não caixa chapada.
   Mesmas camadas da âncora --ag-finish (bevel + ring ink + sh-sm + drop),
   raio concêntrico ao card hospedeiro e leitura em fundo quase opaco. */
.ds-pf-read {
  --pf-finish:
    inset 0 1px 0 var(--bevel-hi),
    0 0 0 1px color-mix(in srgb, var(--ink-1) 9%, transparent),
    var(--sh-sm),
    0 10px 20px -12px rgba(14,17,23,0.16);
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  border-radius: calc(var(--rad-lg) - 4px);
  background: var(--panel-read-bg);
  box-shadow: var(--pf-finish);
  font-size: var(--fs-body-sm); line-height: 1.7; color: var(--ink-2);
}
/* haste — o fio que liga a peça ao que ela vai fazer: causa e efeito */
.ds-pf-read::before {
  content: '';
  position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  border-radius: 2px; background: linear-gradient(180deg, var(--tecla-base), var(--luz));
  box-shadow: 0 0 8px var(--luz-brilho);
  transform: scaleY(0); transform-origin: top center;
  transition: transform var(--dur-4) var(--ease) 90ms;
}
.ds-preflight:hover .ds-pf-read::before,
.ds-preflight:focus-within .ds-pf-read::before,
.ds-preflight.is-on .ds-pf-read::before { transform: scaleY(1); }
/* variável do template — mono, em tinta sobre um halo de luz fria com aro */
.ds-pf-read var {
  font-family: var(--ff-mono); font-style: normal; font-weight: 700;
  font-size: var(--fs-micro); letter-spacing: .06em;
  padding: 1px 5px; border-radius: var(--rad-sm);
  background: var(--luz-halo); color: var(--ink-1);
  box-shadow: inset 0 0 0 1px var(--luz-aro);
}

/* empilhamento interno de um estrato (dado + groove + legenda) */
.ds-pf-stack { display: grid; gap: var(--sp-2); }

/* o DADO — o acento vive aqui, nunca no chrome da peça */
.ds-pf-num {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
}
.ds-pf-num b { font-size: 19px; font-weight: 700; color: var(--ink-1); }
.ds-pf-num span {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
}
.ds-preflight--brief .ds-pf-num b { font-size: 17px; }

/* groove proporcional — idioma do -vol-bar do rail de lotes. Prata viva (2026-09-25):
   o preenchimento é o FIO (tinta → luz) e a ponta é uma cabeça de luz que RESPIRA —
   o dado está vivo. A cabeça sai do trilho, por isso o overflow fica visível. */
.ds-pf-groove {
  width: 100%; height: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--luz) 16%, transparent);
}
.ds-pf-groove > i {
  position: relative; display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--fio); box-shadow: 0 0 10px var(--luz-brilho);
  transition: width var(--dur-5) var(--ease);
}
.ds-pf-groove > i::after {
  content: ''; position: absolute; top: 50%; right: -3px; width: 7px; height: 7px;
  border-radius: 50%; transform: translateY(-50%);
  background: var(--luz-cabeca); animation: ds-respira 6s ease-in-out infinite;
}
/* respira = halo que cresce e volta em 6s; só em dado vivo (groove, onda), nunca em chrome */
@keyframes ds-respira {
  0%, 100% { box-shadow: 0 0 0 2px var(--luz-halo), 0 0 6px var(--luz-halo); }
  50% { box-shadow: 0 0 0 3px var(--luz-halo), 0 0 14px var(--luz-brilho); }
}
.ds-preflight:hover .ds-pf-groove > i,
.ds-preflight:focus-within .ds-pf-groove > i,
.ds-preflight.is-on .ds-pf-groove > i { width: var(--fill, 60%); }

/* QUANDO — as ondas, porque o teto do canal é que decide o horário */
.ds-pf-when {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: var(--fs-meta); color: var(--ink-4);
}
.ds-pf-wave {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--rad-full);
  background: var(--panel-zone-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-1) 9%, transparent);
  color: var(--ink-3);
}
.ds-pf-wave i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--luz); animation: ds-respira 6s ease-in-out infinite;
}
.ds-pf-when em { font-style: normal; color: var(--ink-3); }

/* na grade, a peça sob o ponteiro é a única acesa — os vizinhos ficam
   impressos no fundo, como as células não-selecionadas do calendário */
.ds-pf-group > .ds-preflight { transition: opacity var(--dur-3) var(--ease); }
.ds-pf-group:hover > .ds-preflight:not(:hover) { opacity: .48; }

@media (prefers-reduced-motion: reduce) {
  .ds-wipe::before, .ds-wipe::after, .ds-pf-body,
  .ds-pf-stratum, .ds-pf-read::before, .ds-pf-groove > i { transition: none; }
  .ds-pf-groove > i::after, .ds-pf-wave i { animation: none; }
  /* sem movimento o pré-voo nasce aberto: ninguém perde a informação */
  .ds-pf-body { max-height: 280px; opacity: 1; margin-top: var(--sp-4); }
  .ds-pf-stratum { opacity: 1; transform: none; }
  .ds-pf-read::before { transform: scaleY(1); }
  .ds-pf-groove > i { width: var(--fill, 60%); }
}

/* ═══════════════════════════════════════════════════════════════════
   GOVERNANÇA POR ÂNCORAS (2026-07-30) — GroupedAnchorRail ·
   ExpandableSearchBar · AuroraStrokeIcon.

   Habitat: chrome operacional, NUNCA vidro (vidro é overlay/hero; rail e busca
   são instrumento de trabalho, leitura sólida). Acabamento pareado com as
   âncoras vivas do app: `.ag-cell`/--ag-finish (Agenda) e `.grupo-card`
   (LoteDetalhe) — bandeja L1 → tecla L2 → peça elevada L3, acento cyan→violeta
   só no DADO (indicador do item ativo / barra do grupo aberto), chrome em prata.
   ═══════════════════════════════════════════════════════════════════ */

/* Acabamento único das teclas: bevel de topo + ring hairline de tinta +
   sombra curta + drop macio. Mesma receita do --ag-finish, theme-aware.
   Compartilhado com a bandeja de decisão (fim da folha): tecla é tecla. */
.ds-rail,
.ds-decision {
  --ds-key-finish: inset 0 1px 0 var(--bevel-hi), 0 0 0 1px color-mix(in srgb, var(--ink-1) 9%, transparent), var(--sh-sm), 0 13px 26px -12px rgba(14,17,23,0.16);
}
.ds-rail {
  display: block;
  padding: var(--sp-1);
  border-radius: var(--rad-lg);
  background: var(--bg-2);
  box-shadow: var(--hairline), var(--sh-tray);
}
.ds-rail-groups, .ds-rail-items { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ds-rail-group {
  position: relative;
  overflow: hidden;
  border-radius: var(--rad-md);
  background: color-mix(in srgb, var(--card) 48%, transparent);
  box-shadow: inset 0 1px 0 var(--bevel-hi);
  transition: background var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), transform var(--dur-3) var(--spring);
}
/* Barra de assinatura: prata em repouso, gradiente de produto quando o grupo
   está aberto, --err quando o grupo é destrutivo (semântica antes de estética). */
.ds-rail-group::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0; top: 10px; bottom: 10px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--silver-soft);
  transition: background var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.ds-rail-group[data-open="true"] {
  background: var(--card-hi);
  box-shadow: var(--ds-key-finish);
  transform: translateY(-1px);
}
.ds-rail-group[data-open="true"]::before { background: var(--pd-grad); box-shadow: 0 0 12px var(--pd-soft); }
.ds-rail-group[data-destructive="true"]::before { background: var(--err); box-shadow: 0 0 10px color-mix(in srgb, var(--err) 35%, transparent); }
.ds-rail-group-toggle {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px var(--sp-3) 9px var(--sp-4);
  color: var(--ink-2);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--spring-t) var(--spring);
}
.ds-rail-group-toggle:hover { color: var(--ink-1); background: color-mix(in srgb, var(--card-hi) 70%, transparent); }
.ds-rail-group-toggle:focus-visible { outline: 2px solid var(--pd-text); outline-offset: -2px; }
.ds-rail-group-toggle:active { transform: scale(0.96); transition-duration: var(--dur-1); }
.ds-rail-group-name { min-width: 0; font-size: var(--fs-body-sm); font-weight: 650; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ds-rail-group[data-open="true"] .ds-rail-group-name { color: var(--ink-1); }
.ds-rail-group[data-destructive="true"] .ds-rail-group-name { color: var(--err-text); }
.ds-rail-group-count {
  min-width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: var(--rad-full);
  color: var(--ink-4);
  background: var(--bg-2);
  box-shadow: var(--sh-tray);
  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ds-rail-group[data-open="true"] .ds-rail-group-count { color: var(--pd-text); background: var(--pd-soft); box-shadow: none; }
.ds-rail-group-chevron { display: grid; place-items: center; width: 18px; height: 18px; color: var(--ink-4); transition: transform var(--dur-3) var(--spring); }
.ds-rail-group-chevron svg { width: 14px; height: 14px; }
.ds-rail-group[data-open="true"] .ds-rail-group-chevron { transform: rotate(180deg); }
.ds-rail-panel { padding: 0 6px 6px 10px; }
.ds-rail-item {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--rad-sm);
  color: var(--ink-4);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--spring-t) var(--spring);
}
.ds-rail-item:hover { color: var(--ink-2); background: var(--card); box-shadow: inset 0 1px 0 var(--bevel-hi); }
.ds-rail-item:focus-visible { outline: 2px solid var(--pd-text); outline-offset: -2px; }
.ds-rail-item:active { transform: scale(0.96); box-shadow: var(--sh-tray); transition-duration: var(--dur-1); }
.ds-rail-item[data-active="true"] {
  color: var(--ink-1);
  background: var(--card-hi);
  box-shadow: var(--ds-key-finish);
  transform: translateY(-1px);
}
/* O acento vai no dado (o indicador do item ativo), não no contorno da tecla. */
.ds-rail-item-mark {
  width: 6px; height: 6px;
  border-radius: var(--rad-full);
  background: var(--ink-5);
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.ds-rail-item[data-active="true"] .ds-rail-item-mark { background: var(--pd-grad); box-shadow: 0 0 9px var(--pd-soft); transform: scale(1.18); }
.ds-rail-group[data-destructive="true"] .ds-rail-item[data-active="true"] .ds-rail-item-mark { background: var(--err); box-shadow: 0 0 9px var(--err-soft); }
.ds-rail-item-label { min-width: 0; font-size: var(--fs-body-sm); font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
/* Slots aditivos de DADO (GroupedAnchorRail `meta`/`value`): a posição é do
   DS. `value` abre uma 3ª coluna IMPLÍCITA — sem o slot, a grade segue a de
   sempre e nenhum gap sobra à direita. Meta é mono discreta e nunca disputa
   com o rótulo; o valor do item ativo é o único acento (dado, não contorno). */
.ds-rail-group-meta, .ds-rail-item-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  margin-top: 2px;
  font: 500 var(--fs-meta)/1.4 var(--ff-mono); letter-spacing: 0; text-transform: none;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.ds-rail-item-value {
  grid-column: 3; align-self: start;
  font: 700 var(--fs-body)/1.4 var(--ff-mono); font-variant-numeric: tabular-nums;
  color: var(--ink-2); text-align: right;
}
.ds-rail-item[data-active="true"] .ds-rail-item-value { color: var(--pd-text); }
.ds-rail-item[aria-disabled="true"] .ds-rail-item-value { color: var(--ink-5); }
/* Indisponível continua legível e anunciável: some da ação, nunca do mapa. */
.ds-rail-item[aria-disabled="true"] { cursor: default; color: var(--ink-5); transform: none; background: transparent; box-shadow: none; }
.ds-rail-item[aria-disabled="true"] .ds-rail-item-mark { background: var(--pend); box-shadow: 0 0 8px var(--pend-soft); }

@media (max-width: 640px) {
  .ds-rail { overflow: hidden; }
  .ds-rail-groups {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--sp-1);
    scroll-snap-type: x proximity;
    padding-bottom: var(--sp-2);
  }
  .ds-rail-group {
    flex: 0 0 min(80vw, 280px);
    scroll-snap-align: start;
  }
}

/* ── ExpandableSearchBar ── */
.ds-xsearch { position: relative; display: inline-flex; }
.ds-xsearch-toggle { min-height: 44px; gap: 7px; white-space: nowrap; }
.ds-xsearch-toggle svg { width: 16px; height: 16px; flex: none; }
.ds-xsearch-toggle-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-xsearch-dock { position: absolute; top: calc(100% + 8px); z-index: var(--z-sticky); }
.ds-xsearch[data-expand-direction="right"] .ds-xsearch-dock { left: 0; }
.ds-xsearch[data-expand-direction="left"] .ds-xsearch-dock { right: 0; }
.ds-xsearch-panel {
  width: min(var(--ds-xsearch-width, 280px), calc(100vw - 2 * var(--sp-3)));
  max-width: calc(100vw - var(--sp-6));
  overflow: hidden;
  border-radius: var(--rad-lg);
  background: var(--card);
  box-shadow: inset 0 1px 0 var(--bevel-hi), var(--hairline), var(--sh-raised), var(--sh-lg);
  animation: dsXSearchOpen var(--dur-3) var(--spring) 1 both;
}
.ds-xsearch[data-expand-direction="right"] .ds-xsearch-panel { transform-origin: top left; }
.ds-xsearch[data-expand-direction="left"] .ds-xsearch-panel { transform-origin: top right; }
@keyframes dsXSearchOpen {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ds-xsearch-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line-micro);
}
.ds-xsearch-input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--rad-md);
  outline: none;
  color: var(--ink-1);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-micro), var(--sh-tray);
  font-family: var(--ff-sans);
  font-size: var(--fs-read);
}
.ds-xsearch-input::placeholder { color: var(--ink-3); }
.ds-xsearch-input:focus { box-shadow: inset 0 0 0 1px var(--pd-text), 0 0 0 3px var(--pd-soft), var(--sh-tray); }
.ds-xsearch-close { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
.ds-xsearch-close svg { width: 15px; height: 15px; }
.ds-xsearch-results { max-height: min(340px, 56vh); overflow-y: auto; padding: var(--sp-2); }
.ds-xsearch-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ds-xsearch-opt {
  cursor: pointer;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px var(--sp-3);
  border-radius: var(--rad-md);
  color: var(--ink-3);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--spring-t) var(--spring);
}
.ds-xsearch-opt[data-active="true"], .ds-xsearch-opt:hover {
  color: var(--ink-1);
  background: var(--card-hi);
  box-shadow: inset 0 1px 0 var(--bevel-hi), var(--hairline), var(--sh-raised);
  transform: translateY(-1px);
}
.ds-xsearch-opt[aria-disabled="true"] {
  cursor: default;
  color: var(--ink-4);
  background: var(--bg-2);
  box-shadow: var(--sh-tray);
  transform: none;
}
.ds-xsearch-opt:active { transform: scale(0.98); box-shadow: var(--sh-tray); transition-duration: var(--dur-1); }
.ds-xsearch-opt-label { min-width: 0; font-size: var(--fs-body-sm); font-weight: 600; overflow-wrap: anywhere; }
.ds-xsearch-opt-group { flex: none; color: var(--ink-4); font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: .04em; }
.ds-xsearch-empty { display: grid; justify-items: center; gap: 4px; padding: var(--sp-6) var(--sp-4); text-align: center; }
.ds-xsearch-empty strong { color: var(--ink-2); font-size: var(--fs-body-sm); font-weight: 650; }
.ds-xsearch-empty span { color: var(--ink-4); font-size: var(--fs-body-sm); }

/* ── AuroraStrokeIcon ── traço que se desenha UMA vez (pathLength=1 normaliza
   qualquer geometria); o habitat dispara por hover/foco via .ds-stroke-host. */
.ds-stroke-icon { display: block; flex: none; }
@keyframes dsStrokeDraw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .42; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; }
}
.ds-stroke-icon.is-drawing > *,
.ds-stroke-host:hover .ds-stroke-icon > *,
.ds-stroke-host:focus-visible .ds-stroke-icon > * { animation: dsStrokeDraw var(--dur-5) var(--ease) 1 both; }

@media (prefers-reduced-motion: reduce) {
  .ds-rail-group, .ds-rail-group-toggle, .ds-rail-group-chevron, .ds-rail-item,
  .ds-rail-item-mark, .ds-xsearch-opt, .ds-xsearch-input { transition: none; }
  .ds-rail-group[data-open="true"], .ds-rail-item[data-active="true"], .ds-xsearch-opt[data-active="true"] { transform: none; }
  .ds-xsearch-panel { animation: none; }
  .ds-stroke-icon.is-drawing > *,
  .ds-stroke-host:hover .ds-stroke-icon > *,
  .ds-stroke-host:focus-visible .ds-stroke-icon > * { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECK — a escolha binária canônica (2026-08-31)

   O DS não tinha checkbox: 41 classes locais distintas em 35 arquivos nasceram
   dessa lacuna. Referência de forma para o habitat `card`: cnippet/v-checkbox-4
   (21st.dev), trazida como IDEIA — card com título + descrição e a peça inteira
   clicável — e expressa aqui no vocabulário do Aurian: sem borda dura, seleção
   como PEÇA ELEVADA (o perfil pede "peça elevada dentro de uma bandeja", nunca
   formulário com outline colorido).
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-check {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-2);
  cursor: pointer;
  color: var(--ink-2);
  -webkit-tap-highlight-color: transparent;
}

/* o input segue NATIVO e focável: `display:none` o tiraria do teclado e dos
   leitores de tela, e aí a marca desenhada viraria enfeite inacessível */
.ds-check-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.ds-check-box {
  position: relative;
  width: 18px; height: 18px;
  border-radius: var(--rad-sm);
  display: grid; place-items: center;
  color: transparent;                      /* o risco só aparece marcado */
  background: var(--bg-2);
  /* edge em camadas, não traço: bevel no topo + aro de tinta */
  box-shadow: inset 0 1px 0 var(--bevel-hi),
              0 0 0 1px color-mix(in srgb, var(--ink-1) 16%, transparent);
  transition: background var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease);
}
.ds-check-box svg { width: 12px; height: 12px; }

.ds-check:hover .ds-check-box {
  box-shadow: inset 0 1px 0 var(--bevel-hi),
              0 0 0 1px color-mix(in srgb, var(--ink-1) 28%, transparent);
}
/* press assenta — mesma física dos botões */
.ds-check:active .ds-check-box { transform: scale(.94); }

/* marcado = TECLA da Prata viva, com anel de luz fria (padrão desde 2026-09-25) */
.ds-check.is-checked .ds-check-box {
  background: var(--tecla);
  color: var(--tecla-contra);              /* o risco vira o vazado da tecla */
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tecla-contra) 26%, transparent),
              0 0 0 1px var(--tecla-base),
              0 0 0 3px var(--luz-halo),
              var(--sh-sm);
}

/* foco por outline, nunca box-shadow: o box-shadow perderia a cascata dos
   estados acima (o marcado sobrescreveria o anel de foco) */
.ds-check-input:focus-visible + .ds-check-box {
  outline: 2px solid var(--silver);
  outline-offset: 2px;
}

.ds-check-titulo { font-size: var(--fs-body-sm); line-height: 1.45; color: var(--ink-2); }
.ds-check.is-checked .ds-check-titulo { color: var(--ink-1); }

.ds-check.is-disabled { cursor: not-allowed; opacity: .45; }
.ds-check.is-disabled .ds-check-box { box-shadow: 0 0 0 1px var(--line-micro); background: transparent; }

/* ── habitat CARD: a peça inteira é o alvo ───────────────────────────────── */
.ds-check--card {
  display: grid; grid-template-columns: auto 1fr; transition: background var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), transform var(--dur-2) var(--ease); padding: var(--sp-3); gap: var(--sp-3); border-radius: calc(var(--rad-lg) - var(--sp-1));
  background: transparent; box-shadow: none; align-items: center;
}
.ds-check--card:hover:not(.is-disabled) { background: var(--card-hi); box-shadow: inset 0 1px 0 var(--bevel-hi), var(--hairline), var(--sh-raised); transform: translateY(-1px); }
.ds-check--card:active:not(.is-disabled) { transform: scale(.99); box-shadow: var(--hairline), var(--sh-tray); }
/* marcado = peça ELEVADA na bandeja (perfil visual), não outline colorido */
.ds-check--card.is-checked {
  background: linear-gradient(165deg, var(--card-hi), var(--card));
  box-shadow: inset 0 1px 0 var(--bevel-hi), var(--hairline), var(--sh-raised), var(--sh-md);
}
.ds-check--card .ds-check-box { margin-top: 0; border-radius: 6px; }
.ds-check--card .ds-check-titulo { font-size: var(--fs-body-sm); font-weight: 500; }
.ds-check--card .ds-check-desc { display: block; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-3); margin-top: var(--sp-1); }
.ds-check--card.is-disabled:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ds-check-box, .ds-check--card { transition: none; }
  .ds-check--card:hover:not(.is-disabled) { transform: none; }
}

/* No CLARO, `--card-hi` é mais ESCURO que `--card`: usar o mesmo degrau do escuro
   faria a peça marcada parecer rebaixada, e hierarquia por rebaixamento já foi
   reprovada pelo founder ("só vi regressão", portal 2026-07-27). Aqui a elevação
   vem da SOMBRA, com a superfície ficando branca — que é o que o perfil pede do
   light: "sombra limpa e legível". */
[data-t="light"] .ds-check--card.is-checked { background: var(--card); }
[data-t="light"] .ds-check--card:hover:not(.is-disabled) { background: var(--card); }

.ds-check--card:has(.ds-check-input:focus-visible) { outline: 2px solid var(--silver); outline-offset: 2px; }
.ds-check--card .ds-check-input:focus-visible + .ds-check-box { outline: none; }
/* Curva interna = curva externa menos o inset de 4 px. */
.ds-choice-tray { display: grid; padding: var(--sp-1); gap: var(--sp-1); border-radius: var(--rad-lg); background: var(--bg-2); box-shadow: inset 0 1px 2px var(--bevel-lo), inset 0 -1px 0 var(--bevel-hi); }
@media (pointer: coarse) {
  .ds-input, .ds-seg-opt, .ds-btn--ghost:not(.ds-btn--sm):not(.ds-btn--lg) { min-height: var(--touch-target-min); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-input, .ds-seg-opt { transition: none; }
  .ds-btn--ghost:hover:not(:disabled):not(:active) { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   BANDEJA DE DECISÃO (2026-09-16) — AuroraDecisionTray.

   Uma pergunta, de dois a quatro caminhos de mesmo peso, e clicar É agir: nada
   fica aceso depois (estado persistente é `.ds-seg`). Escada física: poço L1
   rebaixado (o mesmo do `.ds-choice-tray`) → teclas foscas L2 que emergem dele →
   hover L3 (lift + queda maior) → press de volta ao poço. O acento de produto
   aparece só no traço do ícone, no hover e no foco; o chrome segue em tinta.
   Aprovada na porta de arquivo da Central de Envios (prévia "A", founder).

   O invólucro é o CONTAINER da consulta de largura: ele é bloco e ocupa a largura
   do pai. Dentro de um pai flex, dê largura ao invólucro, senão ele encolhe.
   ═══════════════════════════════════════════════════════════════════ */
.ds-decision { container: ds-decision / inline-size; }

/* Fila: todas as colunas com a largura da tecla maior (nenhuma parece a
   principal); a bandeja abraça as teclas em vez de esticar no painel. */
.ds-decision-tray {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: max-content;
  max-width: 100%;
  gap: var(--sp-1);
  padding: var(--sp-1);
  /* Concêntrico: curva da tecla + o inset de 4 px. */
  border-radius: calc(var(--rad-lg) + var(--sp-1));
  background: var(--bg-2);
  box-shadow: inset 0 1px 2px var(--bevel-lo), inset 0 -1px 0 var(--bevel-hi);
}

.ds-decision-key {
  appearance: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--rad-lg);
  font: 500 var(--fs-body)/1 var(--ff-sans);
  letter-spacing: -.01em;
  white-space: nowrap;
  /* Fosco, sem gradiente e sem beam: no escuro, a tinta a 6% separa a tecla do
     poço e o ring a 12% desenha a borda sem linha dura. */
  background: color-mix(in srgb, var(--ink-1) 6%, var(--card-hi));
  color: var(--ink-1);
  box-shadow: inset 0 1px 0 var(--bevel-hi), 0 0 0 1px color-mix(in srgb, var(--ink-1) 12%, transparent), var(--sh-sm), var(--sh-md);
  transition: background var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease),
              color var(--dur-2) var(--ease), transform var(--dur-3) var(--spring);
}
.ds-decision-key .ds-stroke-icon { color: var(--ink-3); transition: color var(--dur-2) var(--ease); }
/* No claro a elevação vem da SOMBRA, com a tecla branca (mesma lógica do
   `.ds-check--card` marcado): `--card-hi` escurece e leria como rebaixada. */
[data-t="light"] .ds-decision-key { background: var(--card); box-shadow: var(--ds-key-finish); }

.ds-decision-key:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--bevel-hi), 0 0 0 1px color-mix(in srgb, var(--ink-1) 14%, transparent), var(--sh-raised), var(--sh-md);
}
.ds-decision-key:hover:not(:disabled) .ds-stroke-icon,
.ds-decision-key:focus-visible .ds-stroke-icon { color: var(--pd-text); }
.ds-decision-key:active:not(:disabled) {
  transform: scale(.96);
  transition-duration: var(--dur-1);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink-1) 9%, transparent), var(--sh-tray);
}
/* Anel de teclado da família das bandejas (`.ds-seg-opt`): para DENTRO, porque o
   vão entre teclas é de 4 px e um anel para fora encostaria na vizinha. */
.ds-decision-key:focus-visible { outline: 2px solid var(--silver); outline-offset: -2px; }
/* Depois da regra do claro, de propósito: mesma especificidade, a ordem decide. */
.ds-decision-key:disabled {
  cursor: not-allowed;
  background: transparent;
  color: var(--ink-4);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink-1) 6%, transparent);
}
.ds-decision-key:disabled .ds-stroke-icon { color: var(--ink-4); }

/* Coluna: abaixo de 720 px de container, três rótulos de ação não cabem em fila. */
@container ds-decision (max-width: 720px) {
  .ds-decision-tray { grid-auto-flow: row; grid-auto-columns: auto; width: 100%; }
  .ds-decision-key { justify-content: flex-start; }
}
@media (pointer: coarse) {
  .ds-decision-key { min-height: var(--touch-target-min); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-decision-key { transition: none; }
  .ds-decision-key:hover:not(:disabled), .ds-decision-key:active:not(:disabled) { transform: none; }
}