/* Components, first part (L2): the rules that cascade BEFORE reset.css and before the body of components.css.
 * The stylesheet list in Layout.kt (STYLESHEETS) is the cascade: tokens, this file, reset, components, app-components, app,
 * conditional-fields. Tailwind used to flatten the same pieces into that order (unlayered rules of the imported files, then
 * Preflight, then every `@layer components` block, then utilities, then the unlayered rest), and the hand-written files keep it
 * so nothing re-sorts: these two groups are ahead of the reset and of every component rule below them at equal specificity.
 * Moving a rule out of here changes which of two same-specificity rules wins; do it only with a render diff.
 * No `@layer`: a native layer would let unlayered rules beat layered ones whatever their specificity. */
/* The stack/cluster gap modifiers: they only set --gap (the .stack/.cluster/.grid primitives read it). */
.gap-1 { --gap: var(--s1); } .gap-2 { --gap: var(--s2); } .gap-3 { --gap: var(--s3); } .gap-5 { --gap: var(--s5); }

/* ===== manutencao-flow K1–K4 (SPEC §9; mockup/KIT-GAPS.md G1 G3 G5 G6 G7 G8 G13) ===== */
/* G1 · two columns of sections from lg (FormPage.kt formColumns); below lg the two .form-col blocks stack in DOM order */
.form-columns { display: grid; gap: var(--s4); min-width: 0; }

.form-col { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }

@media (min-width: 1024px) {
  .form-solo.is-wide { max-width: var(--w-detail); }
  .form-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* G3/G5 · a choice chip with an information line under its title; a disabled chip wears a dashed face and dimmed ink
   (g-500: still 4.5:1 on the chip fill) — the reason stays readable, nothing hides (SPEC D4) */
.choices label:has(.choice-body) { padding-block: var(--s2); }

.choice-body { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }


.choices label:has(input:disabled) { cursor: not-allowed; color: var(--g-500); border-style: dashed; background: var(--c-bg); }

.choices label:has(input:disabled) .choice-info { color: var(--g-500); }

/* G7 · the bar's summary sentence beside Cancelar · <verb>; the verb can be long, so the button grows to its text */
.sticky-action-bar.has-summary .btn { height: auto; min-height: var(--ctl); white-space: normal; line-height: var(--lh-tight); padding-block: var(--s2); }

.form-bar-summary { margin: 0 0 var(--s2); font-size: var(--t-label); color: var(--ink-2); line-height: var(--lh-body); }

.form-bar-summary > * + * { margin-left: var(--s1); }

.form-bar-warn { color: var(--c-warning); }

@media (min-width: 1024px) {
  .sticky-action-bar.has-summary { display: flex; align-items: center; gap: var(--s4); }
  .sticky-action-bar.has-summary > .form-bar-summary { flex: 1 1 0; margin: 0; }
}

/* P1 · the page's #cm-bar wrapper (RegioesTransferView.kt) only carries the id the preview swaps the bar by: the bar inside
   stays the form's own sticky child */
.cm-bar { display: contents; }

/* G13 · photo strip (Media.kt photoStrip): --thumb tiles, the one sideways scroll on the phone; the gallery's big image */
.photo-strip { display: flex; gap: var(--s2); padding: var(--s1) 0 var(--s2); overflow-x: auto; scroll-snap-type: x proximity; }

.photo-tile { flex: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: zoom-in; border-radius: var(--radius); line-height: 0; scroll-snap-align: start; }

.photo-tile:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.photo-thumb { display: block; width: var(--thumb); height: var(--thumb); object-fit: cover; border-radius: var(--radius); border: 1px solid var(--c-line); background: var(--g-100); }

.photo-more { width: var(--thumb); height: var(--thumb); display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-line); background: var(--g-100); color: var(--ink-2); font-size: var(--t-title); font-weight: 600; line-height: 1; }

.photo-gallery-img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius); background: var(--g-100); }

.photo-gallery-img:not([src]) { display: none; }

/* G6/G8 · região rows (Lists.kt regiaoRows): one card at both widths — head, strip, control band (segments left, ↑/↓ right,
   wrapping when the width asks). Arriving rows on the info fill; a row not going is dimmed (g-500 keeps 4.5:1) and dashed. */
.regiao-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }

.regiao-row { min-width: 0; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); }

.regiao-row.is-incoming { background: var(--c-info-soft); border-color: color-mix(in srgb, var(--c-info) 30%, var(--c-line)); }

.regiao-row.is-off { background: var(--g-50); border-style: dashed; }

.regiao-row.is-off .regiao-title, .regiao-row.is-off .regiao-meta { color: var(--g-500); }

.regiao-row.is-off .photo-tile { opacity: .6; }

.regiao-head { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2) var(--s3) var(--s1); min-width: 0; }

.regiao-title { font-weight: 600; line-height: var(--lh-tight); overflow-wrap: anywhere; }

.regiao-num { color: var(--ink-3); }

.regiao-row > .photo-strip { padding-inline: var(--s3); }

.regiao-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); min-height: var(--ctl); border-top: 1px solid var(--c-line); }

.regiao-ctl > .regiao-ordem { margin-left: auto; }

.regiao-ordem-hint { flex-basis: 100%; color: var(--ink-3); }

.regiao-ordem > .btn { min-width: var(--ctl); } 
/* ↑/↓ are squares: width = height, as the kebab (DECIDED #95) */