/* Campo e FileUpload — o que os cards não trazem (components/forms/{input,file-upload}.card.html,
 * bundle 8cd72241). Os estilos vêm dos arquivos gerados (design/static/css/widgets/input*.css e
 * fileupload.css) e do eixo data-field do ds; aqui não há valor de design novo: o rótulo, a
 * ajuda e a mensagem do FormField.jsx, a lista de arquivos do FileUpload.jsx — os dois copiados
 * do CSS desses componentes —, e o que liga as peças. Carregado depois dos gerados. */

/* ── Campo ────────────────────────────────────────────────────────────────────────
   Um <input class="sg-field"> solto (formulários Django) tem o próprio foco desenhado pela animação do eixo
   data-field-fx; o `outline:none` do controle nativo vive nas gêmeas de foco de fields-local.css. */
/* Traço, Sublinhado e Suave não têm anel no card. Os designs Contorno, Realçado e Pílula do ds
   desenham o anel no foco (`.is-focus`) por conta própria; nessas três animações eles voltam
   à sombra de repouso. Elevado mantém o seu: no card o d9 traz o anel em qualquer animação. */
@scope (:is([data-field-fx="trace"], [data-field-fx="under"], [data-field-fx="soft"])) to ([data-field-fx]) {
  :scope:is([data-field="outline"], [data-field="pill"]) .sg-field.is-focus,
  :scope :is([data-field="outline"], [data-field="pill"]) .sg-field.is-focus{ box-shadow:var(--shadow-inset); }
  :scope:is([data-field="highlight"], [data-field="underline"]) .sg-field.is-focus,
  :scope :is([data-field="highlight"], [data-field="underline"]) .sg-field.is-focus{ box-shadow:none; }
}
/* Hover de cada design, do Input.card (`.d2`…`.d9 .shell:hover`): o ds não traz esses hovers, e o
   hover genérico gerado (`.sg-field:hover`, cinza), carregado depois do ds, empataria com os
   designs que fixam a borda e a trocaria — no card eles vêm depois e a mantêm. Campo em foco fica
   com o desenho do foco (no card a animação de foco pesa mais que o hover). */
[data-field="highlight"] .sg-field:hover:not(:focus-within){ border-color:color-mix(in srgb, var(--primary) 50%, var(--border-strong));
  background:linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--primary) 17%, transparent) 52%); }
[data-field="underline"] .sg-field:hover:not(:focus-within){ border-bottom-color:var(--gray-400); }
[data-field="bracket"] .sg-field:hover:not(:focus-within)::before, [data-field="bracket"] .sg-field:hover:not(:focus-within)::after{ border-color:var(--gray-500); }
[data-field="ruler"] .sg-field:hover:not(:focus-within)::after{ border-top-color:var(--gray-500); }
[data-field="accent"] .sg-field:hover:not(:focus-within){ border-color:transparent; }
[data-field="accent"] .sg-field:hover:not(:focus-within)::before{ background:var(--gray-400); }
[data-field="raised"] .sg-field:hover:not(:focus-within){ border-color:transparent; box-shadow:var(--shadow-md); }
[data-field="instrument"] .sg-field:hover:not(:focus-within){ border-color:var(--border-strong); }
@media (prefers-reduced-motion: reduce){
  /* o do card mira `.shell` e as peças; o mesmo, com a casca do app */
  .sg-field, .sg-field *, .sg-field__fx, .sg-field__fx::after, .sg-field__icon{ animation:none !important; transition-duration:.001ms !important; }
}

/* ── FormField.jsx: rótulo, ajuda e mensagem de erro em volta do campo ────────── */
.sg-formfield{ display:flex; flex-direction:column; gap:var(--label-gap); }
.sg-formfield__label{ display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text); }
.sg-formfield__req{ color:var(--negative); font-weight:var(--weight-bold); }
.sg-formfield__opt{ color:var(--text-subtle); font-weight:var(--weight-regular); font-size:var(--text-xs); }
.sg-formfield__help{ font-size:var(--text-xs); color:var(--text-muted); line-height:var(--leading-snug); }
.sg-formfield__msg{ display:flex; align-items:flex-start; gap:5px; font-size:var(--text-xs); color:var(--negative-text); line-height:var(--leading-snug);
  animation: sg-field-in var(--duration-fast) var(--ease-out); }
.sg-formfield__msg svg{ margin-top:1px; color:var(--negative); }
@keyframes sg-field-in{ from{ opacity:0; transform:translateY(-2px); } to{ opacity:1; transform:none; } }

/* ── FileUpload: um design por vez ─────────────────────────────────────────────
   Os 10 designs têm estruturas próprias; o template desenha os 10 e o eixo mostra um. */
.sg-upload__design{ display:none; }
@scope ([data-upload="default"]) to ([data-upload]) { :scope .sg-upload__design--default{ display:block; } }
@scope ([data-upload="scan"]) to ([data-upload]) { :scope .sg-upload__design--scan{ display:block; } }
@scope ([data-upload="stack"]) to ([data-upload]) { :scope .sg-upload__design--stack{ display:block; } }
@scope ([data-upload="geo"]) to ([data-upload]) { :scope .sg-upload__design--geo{ display:block; } }
@scope ([data-upload="ribbon"]) to ([data-upload]) { :scope .sg-upload__design--ribbon{ display:block; } }
@scope ([data-upload="folder"]) to ([data-upload]) { :scope .sg-upload__design--folder{ display:block; } }
@scope ([data-upload="seal"]) to ([data-upload]) { :scope .sg-upload__design--seal{ display:block; } }
@scope ([data-upload="ticket"]) to ([data-upload]) { :scope .sg-upload__design--ticket{ display:block; } }
@scope ([data-upload="ruled"]) to ([data-upload]) { :scope .sg-upload__design--ruled{ display:block; } }
@scope ([data-upload="gallery"]) to ([data-upload]) { :scope .sg-upload__design--gallery{ display:block; } }
/* a variante inline (formulários densos) é a do Padrão, em qualquer design */
.sg-upload--inline .sg-upload__design{ display:none; }
.sg-upload--inline .sg-upload__design--inline{ display:block; }
.sg-upload svg{ display:block; } /* o card põe `svg{ display:block }` na página toda */
.sg-upload__input{ display:none; }
.sg-drop-tile[hidden]{ display:none; } /* o quadro do último arquivo, na Galeria, até haver arquivo */
/* foco e desabilitado: os da zona do FileUpload.jsx, para a área clicável de cada design */
.sg-upload [role="button"]:focus-visible{ outline:none; box-shadow:0 0 0 var(--ring-width) var(--ring); border-color:var(--border-focus); }
.sg-upload.is-disabled :is([role="button"], .sg-drop-split){ cursor:not-allowed; opacity:.6; }

/* ── FileUpload.jsx: a lista de arquivos ─────────────────────────────────────── */
.sg-drop__list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sg-drop__list:empty{ display:none; }
.sg-file{ display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md); }
.sg-file__ic{ display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:var(--radius-sm);
  background:var(--surface-sunken); color:var(--text-muted); }
.sg-file--done .sg-file__ic{ background:var(--positive-bg); color:var(--positive-text); }
.sg-file--error .sg-file__ic{ background:var(--negative-bg); color:var(--negative-text); }
.sg-file__body{ flex:1; min-width:0; }
.sg-file__name{ font-size:var(--text-sm); color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sg-file__meta{ font-size:var(--text-xs); color:var(--text-subtle); font-variant-numeric:tabular-nums; margin-top:1px; display:flex; gap:6px; align-items:center; }
.sg-file--error .sg-file__meta{ color:var(--negative-text); }
.sg-file__bar{ height:4px; margin-top:6px; background:var(--surface-sunken); border-radius:var(--radius-full); overflow:hidden; }
.sg-file__barfill{ height:100%; background:var(--primary); border-radius:var(--radius-full); transition:width var(--duration-base) var(--ease-out); }
.sg-file__rm{ flex:none; display:grid; place-items:center; width:28px; height:28px; border:none; background:transparent;
  color:var(--text-subtle); border-radius:var(--radius-sm); cursor:pointer; transition:background var(--duration-fast), color var(--duration-fast); }
.sg-file__rm:hover{ background:var(--negative-bg); color:var(--negative-text); }
.sg-file__rm:focus-visible{ outline:none; box-shadow:0 0 0 var(--ring-width) var(--ring); }
/* o ícone do estado: o JSX troca o <Icon>; aqui o item traz os dois e o estado mostra um */
.sg-file__ic > svg{ display:none; }
.sg-file:not(.sg-file--error) .sg-file__glyph--file, .sg-file--error .sg-file__glyph--error{ display:block; }