/*
 * Agent Hub stylesheet (#385): the approved prototypes of spec #383, carbon theme, are the source of truth.
 * Provenance tags in the comments name the prototype each rule came from (git show <branch>:<path>):
 *   [R] wayfinder/agent-hub-rascunho-prototipo             agent-hub/prototipo-rascunho/index.html             ?variant=A&tema=carbon
 *   [E] wayfinder/agent-hub-campos-json-prototipo          agent-hub/prototipo-campos-json/index.html          ?variant=C
 *   [L] wayfinder/agent-hub-lista-historico-diff-prototipo agent-hub/prototipo-lista-historico-diff/index.html ?variant=A
 *   [G] wayfinder/agent-hub-login-prototipo                agent-hub/prototipo-login/index.html                ?variant=A
 * "CHOICE:" marks where prototypes disagree, "RENAMED:" a class unified across them, "NEW:" a rule with no prototype.
 * The CSP has no style-src (falls back to default-src 'self'): no inline style="" or <style>, every look lives here.
 * Error messages and notices have no hidden state: the server renders them only when they exist.
 * Fonts: @font-face lives in fonts.css (vendored IBM Plex, linked before this file).
 */

/* ---------- Tokens [R carbon ∪ E ∪ L ∪ G] (identical values across prototypes unless noted) ---------- */
:root {
  --font: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --bg: #f4f4f4; --surface: #fff; --surface-2: #f4f4f4; --field: #f4f4f4; --layer-hover: #e8e8e8;
  --border: #e0e0e0; --border-strong: #8d8d8d;
  --text: #161616; --text-2: #525252; --text-3: #6f6f6f;
  --accent: #0f62fe; --accent-hover: #0353e9; --accent-soft: #edf5ff;
  --danger: #da1e28; --danger-soft: #fff1f1;
  --ok: #198038; --ok-soft: #defbe6;
  --warn: #8e6a00; --warn-soft: #fcf4d6; --warn-line: #f1c21b;          /* [E] --warn; [L] hardcodes #8e6a00/#f1c21b */
  --add-bg: #defbe6; --add-strong: #a7f0ba; --del-bg: #fff1f1; --del-strong: #ffd7d9;  /* [L] diff */
  --header: #161616; --header-text: #f4f4f4;                             /* [R] */
  --secondary: #393939;                                                  /* [R]/[E]/[L] .btn-secondary */
}

/* ---------- Base [L ∪ R] ---------- */
* { box-sizing: border-box }
html { font: 14px var(--font); color: var(--text); background: var(--bg) }
[hidden] { display: none !important }  /* NEW: rascunho.js toggles editors with `hidden`; .btn's inline-flex would win otherwise */
body { margin: 0 }  /* prototypes add padding-bottom 96–120px only to clear their floating control bar */
a { color: var(--accent) }
h1, h2, h3 { margin: 0; font-weight: 500 }
code, .mono { font-family: var(--mono); font-size: .9em }   /* CHOICE: [L]/[G] .9em ([R]/[E] .92em) */
.meta { color: var(--text-3); font-size: 12px }

/* ---------- Shell: 48px dark header [R ∪ L] ---------- */
.top { height: 48px; background: var(--header); color: var(--header-text); display: flex; align-items: center; gap: 32px; padding: 0 24px }
.top b { font-weight: 600 }
.top nav { display: flex; height: 100%; flex: 1 }
.top nav a { color: inherit; text-decoration: none; padding: 0 16px; display: flex; align-items: center; opacity: .75 }
.top nav a.on { opacity: 1; box-shadow: inset 0 -2px 0 var(--accent) }
.top .user { opacity: .75 }
/* [R] renders Sair as <a style="color:inherit;opacity:.75">; real Sair is a POST <form> (LogoutView): style its button like a .top link. */
.top form { margin: 0 }
.top form button { font: inherit; color: inherit; background: none; border: 0; padding: 0; opacity: .75; cursor: pointer }

/* ---------- Buttons [L ∪ E ∪ G] ---------- */
.btn { font: inherit; border: 1px solid transparent; padding: 11px 16px; cursor: pointer; border-radius: 0; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; line-height: 1.2 }
.btn:active { transform: translateY(1px) }                                    /* [R] */
.btn-sm { padding: 6px 10px; font-size: 13px }   /* RENAMED: [E] .btn-sm (6px 10px) / [L] .btn.sm (6px 12px) */
.btn-primary { background: var(--accent); color: #fff }
.btn-primary:hover { background: var(--accent-hover) }
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: inset 0 0 0 1px #fff }  /* [G] */
.btn-primary[disabled] { background: #c6c6c6; color: #8d8d8d; cursor: not-allowed }  /* [L] "Nada a publicar" */
.btn-secondary { background: var(--secondary); color: #fff; border-color: var(--secondary) }
.btn-ghost { background: transparent; color: var(--accent) }
.btn-ghost:hover { background: var(--layer-hover) }
.btn-ghost:disabled { color: #a8a8a8; cursor: not-allowed; background: transparent }  /* [E] .btn:disabled */
.btn-danger { background: var(--danger); color: #fff }
.btn-danger-ghost { background: transparent; color: var(--danger) }           /* [L] Restaurar… */
.btn-danger-ghost:hover { background: var(--danger); color: #fff }
.btn.block { width: 100%; justify-content: space-between; gap: 32px }         /* [G] "Entrar →" (Carbon: label left, arrow right) */
/* Icon button for row controls ↑ ↓ ✕ [E] */
.icon { font: 15px/1 var(--font); width: 32px; height: 32px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; display: inline-grid; place-items: center }
.icon:hover:not(:disabled) { background: var(--layer-hover); color: var(--text) }
.icon:disabled { color: #c6c6c6; cursor: not-allowed }

/* ---------- Tags (state) [L] ---------- */
/* CHOICE: [L]/[E] tag (filled #e0e0e0, pill 24px, no border) over [R] (surface-2 + 1px border). */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 24px; font-size: 12px; background: #e0e0e0; color: #393939; white-space: nowrap }
.tag.warn { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line) }  /* "Mudanças não publicadas", "não publicada" */
.tag.ok { background: var(--ok-soft); color: #0e6027 }                        /* "Rascunho = Versão ativa" */
.tag.blue { background: #d0e2ff; color: #0043ce }                             /* [L] "Versão ativa"; [E] uses #edf5ff bg for Slot usage/"Usa LLM" */
.tag.gray { background: #e0e0e0; color: var(--text-2) }                       /* "Sem Versão publicada", fase in diff */
.tag.err { background: var(--danger-soft); color: var(--danger) }             /* [R]/[E] */

/* ---------- Page layout ---------- */
.page { padding: 24px 32px; max-width: 1440px }                               /* [L] Lista/Histórico (Comparar uses max-width:1280px inline) */
.list-head { display: flex; align-items: end; gap: 16px; margin-bottom: 16px } /* [L] Lista: h1 + Criar Agente */
.list-head h1 { font-size: 28px; font-weight: 400 }
.list-head .btn { margin-left: auto }

/* Agent header (breadcrumb, title, state tag, actions, tabs), sticky.
   RENAMED: [L] .phead == [R] .va-head == [E] .head (same rules). */
.phead { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--border); padding: 16px 32px 0 }
.phead .line { display: flex; align-items: center; gap: 16px }
.phead .line:last-child { padding-bottom: 16px }   /* no tabs (Criar Agente, Publicar, Restaurar): [L] used an inline style */
.phead h1 { font-size: 24px }
.phead .actions { margin-left: auto; display: flex; gap: 8px; align-items: center }
.crumb { font-size: 12px; color: var(--text-2); margin-bottom: 6px }
.crumb a { color: var(--text-2); text-decoration: none }
.crumb a:hover { text-decoration: underline }
.agent-tabs { display: flex; margin-top: 16px }  /* CHOICE: no own border-bottom ([L]); [R]/[E] add one, but .phead already draws it */
.agent-tabs a { padding: 10px 16px; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px }
.agent-tabs a.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 500 }
.agent-tabs a:hover { color: var(--text) }

/* Rascunho body: 200px anchor index + column up to 880px.
   RENAMED: [R] .va-body/.va-toc == [E] .body/.toc. */
.draft-body { display: grid; grid-template-columns: 200px minmax(0, 880px); gap: 40px; padding: 24px 32px }
.toc { position: sticky; top: 140px; align-self: start; display: grid; gap: 2px; font-size: 13px }
.toc a { color: var(--text-2); text-decoration: none; padding: 6px 10px; border-left: 2px solid var(--border); display: flex; justify-content: space-between }
.toc a:hover { color: var(--text); border-left-color: var(--text-3) }
.toc .e { color: var(--danger) }                 /* "●" rendered only on sections with errors */
.draft-body section { scroll-margin-top: 150px }

/* ---------- Panels (sections) [R ∪ E ∪ L] ---------- */
.panel { background: var(--surface); padding: 24px }   /* carbon: no border */
.panel + .panel { margin-top: 16px }
.panel h2 { font-size: 16px; margin-bottom: 4px }      /* [R]; [L] uses margin-bottom:12px for panels without .sub */
.panel-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px }   /* [E] title + "Editar como JSON" on the right */
.panel-h h2 { font-size: 16px; margin: 0 }
.panel-h .right { margin-left: auto }
.sub { color: var(--text-3); font-size: 12px; margin: 0 0 20px }   /* [R] .panel .sub / [E] .sub */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }  /* [R] Nome | Credencial */

/* ---------- Empty state [L] ---------- */
.empty { background: var(--surface); padding: 48px 32px; display: grid; gap: 12px; justify-items: start }
.empty h2 { font-size: 20px; font-weight: 400 }
.empty p { margin: 0; color: var(--text-2); max-width: 60ch }

/* ---------- Form fields [R ∪ E ∪ G] ---------- */
.field { margin-bottom: 20px }
.field:last-child { margin-bottom: 0 }                                         /* [E] */
.field > label, .field > .label, .lbl { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px }  /* RENAMED: [R] .field>label/.label == [E] .lbl */
.help { font-size: 12px; color: var(--text-3); margin-top: 6px }
.err-msg { font-size: 12px; color: var(--danger); margin-top: 6px }            /* always visible when rendered ([R] hid it behind body.erro) */
.warn-msg { font-size: 12px; color: var(--warn); margin-top: 6px }             /* [E] "{slot} aparece em …, mas não existe Slot" */
.ok-msg { font-size: 12px; color: var(--ok) }                                  /* [E] "JSON válido" */
input, textarea, select { font: inherit; color: var(--text); background: var(--field); border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0; padding: 9px 12px; width: 100% }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -2px }
/* Error outline. RENAMED: [R] .field.has-err input == [E] .bad (on the input or on a .row-hook). */
.field.has-err input, .field.has-err textarea, .field.has-err select, .bad { outline: 2px solid var(--danger) !important; outline-offset: -2px }
textarea { resize: vertical; line-height: 1.5 }
textarea.code, input.code { font-family: var(--mono); font-size: 12.5px; tab-size: 2 }
textarea.code { white-space: pre }
textarea.prose { min-height: 360px; font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap }  /* Instrução: largest field. CHOICE: [R] 360px ([E] 300px) */
input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent) }
/* NEW: spec wants the Slug as read-only TEXT, not an input ([R] used input[readonly] styled flat). */
.readonly-value { font-family: var(--mono); color: var(--text-2); padding: 9px 0 }

/* ---------- Tool checkbox rows [R ∪ E] ---------- */
.checks { display: grid; gap: 2px }
.check { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; cursor: pointer }  /* [E] compact parts use 8px 12px */
.check:hover { background: var(--layer-hover) }
.check input { margin-top: 2px }
.check .nm { font-weight: 500 }
.check .ds { color: var(--text-3); font-size: 12px; margin-top: 2px }
.check .id { color: var(--text-3); font-size: 11.5px; font-family: var(--mono) }
.check .new { margin-left: 6px }                                               /* "não publicada" tag */

/* ---------- Inline notification (success / error summary / info / warn) ----------
   RENAMED: [R] .notice (err|ok) == [G] .notif (error|ok|info) == [L] .note (info|warn). */
.notice { padding: 12px 16px; border-left: 3px solid; margin-bottom: 16px; line-height: 1.45 }
.notice b { display: block; margin-bottom: 4px; font-weight: 600 }
.notice ul { margin: 4px 0 0; padding-left: 18px }
.notice.err { background: var(--danger-soft); border-color: var(--danger) }
.notice.ok { background: var(--ok-soft); border-color: var(--ok) }
.notice.info { background: var(--accent-soft); border-color: var(--accent) }
.notice.warn { background: var(--warn-soft); border-color: var(--warn-line) }
/* [G] login notif is slightly tighter: 13px text, 2px gap, 24px bottom margin. */
.a-card .notice { display: grid; gap: 2px; font-size: 13px; margin-bottom: 24px }
.a-card .notice b { margin-bottom: 0 }

/* ---------- Editor rows: Slots, Modelos, Hooks [E variant C] ---------- */
.rows { display: grid; gap: 8px }
.row { background: var(--field); padding: 12px 8px 12px 12px; display: grid; gap: 8px 12px; align-items: start }
.row input, .row textarea, .row select { background: var(--surface) }
.row .ctl { display: flex; gap: 0; align-self: start }
.row-slot { grid-template-columns: 200px minmax(0, 1fr) auto }
.row-slot .usage { grid-column: 1 / 3; display: flex; gap: 6px; flex-wrap: wrap }
.row .tag.blue { background: var(--accent-soft) }                            /* [E] Slot usage / "Usa LLM": near-invisible fill on the row */
.row-slot .usage:empty { display: none }                                       /* NEW: filled by rascunho.js */
.row-slot textarea { field-sizing: content; resize: none }                     /* NEW: grows with the text ([E] computed rows in JS) */
.model-id { display: grid; gap: 6px }                                          /* [E] inline style on the id + role block */
.model-id .err-msg, .params .err-msg { margin: 0 }                             /* [E] inline style */
.row-model { grid-template-columns: 28px minmax(0, 1fr) auto }
.row-model .ord { font-family: var(--mono); color: var(--text-3); padding-top: 9px; text-align: center }
.row-model .role { font-size: 12px; color: var(--text-3) }                     /* Primário / Fallback N */
.params { grid-column: 2 / 3; display: grid; gap: 6px }                        /* variant C: one short JSON input */
.row-hook { grid-template-columns: minmax(0, 1fr) auto }
.hook-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 6px }
.hook-top .nm { font-weight: 500 }
.hook-top select { width: auto }                                               /* fase select when >1 fase */
.hook-body { grid-column: 1 / 2; display: grid; gap: 12px; padding-top: 4px }
.add { display: flex; gap: 8px; align-items: center; margin-top: 8px }
.add select { width: auto; min-width: 280px; background: var(--field) }        /* "Adicionar Hook do Catálogo…" */
/* Parte editor (Follow-up, Classificador) */
.toggle { display: flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 500 }
.toggle:has(input:disabled) { color: var(--text-3); cursor: not-allowed }      /* [E] used an inline style for this */
.part { border-left: 2px solid var(--border); padding: 4px 0 4px 20px; margin-top: 20px; display: grid; gap: 20px }
.part .field { margin: 0 }
.inherit, .field > .inherit { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text); margin: 0; cursor: pointer }  /* "Usar os Modelos do chat"; beats `.field > label` in a Parte */
.inherit input, .toggle input { width: auto }                                 /* NEW: the global input width:100% stretched these checkboxes */
.modelos-proprios { margin-top: 8px }                                          /* [E] inline style on the Hook/Parte own Modelos */
.check.compact { padding: 8px 12px }                                           /* [E] Tools inside a Parte */
/* "Editar como JSON" box */
.jbox { position: relative }
.jbar { display: flex; gap: 4px; align-items: center; margin-top: 6px }
.jbar .meta { margin-right: auto }
.ref { margin-top: 10px; background: var(--field); padding: 10px 12px; font-size: 12px }   /* [E] <details> reference (reserved params / Hooks) */
.ref summary { cursor: pointer; color: var(--text-2) }
.ref table { border-collapse: collapse; margin-top: 8px; width: 100% }
.ref td, .ref th { text-align: left; padding: 4px 8px 4px 0; vertical-align: top }
.ref th { color: var(--text-3); font-weight: 400 }

/* ---------- Data table [L] (Lista; reuse for Credenciais, Vínculos) ---------- */
table.dt { width: 100%; border-collapse: collapse; background: var(--surface) }
.dt th { text-align: left; font-weight: 600; font-size: 13px; background: #e0e0e0; padding: 12px 16px; white-space: nowrap }
.dt td { padding: 12px 16px; border-top: 1px solid var(--border); vertical-align: top }
.dt tr:hover td { background: #f4f4f4 }
.dt .nm a { color: var(--text); font-weight: 500; text-decoration: none }
.dt .nm a:hover { text-decoration: underline }
.dt .act { text-align: right; white-space: nowrap }
.dt .act .btn { padding: 6px 10px; font-size: 13px }

/* ---------- NEW: Histórico timeline (prototype/historico-o-que-mudou ?variant=D) ---------- */
/* A table let one long summary (6 removed Tools on one line) widen the page; blocks wrap instead. */
.tl { list-style: none; margin: 0; padding: 0; background: var(--surface) }
.tl > li { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 24px; padding: 20px 24px; border-top: 1px solid var(--border) }
.tl > li:first-child { border-top: 0 }
.tl > li.draft { background: #fcfcfc; box-shadow: inset 3px 0 0 var(--border-strong) }  /* Rascunho: not a Versão yet */
.tl-quando { display: flex; flex-direction: column; gap: 4px }
.tl-quando b { font-size: 15px; font-weight: 600 }
.tl-quando > span:not(.meta) { color: var(--text-2); font-size: 13px }
.tl-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 4px }
.tl-acoes .btn { padding: 6px 10px; font-size: 13px }
.tl-grupos { display: flex; flex-direction: column; gap: 12px; max-width: 960px }
.tl-grupos section { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px }
.tl-grupos section + section { padding-top: 12px; border-top: 1px dashed var(--border) }
.tl-grupos h3 { font-size: 13px; font-weight: 600; line-height: 1.45 }
.tl-grupos dl { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 13px; line-height: 1.45 }  /* fixed label column: values line up across areas */
.tl-grupos dt { color: var(--text-2) }
.tl-grupos dd { margin: 0; display: flex; flex-direction: column }  /* one summary part per line */
.tl-grupos .p { color: var(--ok) }
.tl-grupos .m { color: var(--danger) }
.tl-ref { margin-top: 8px }   /* "em relação à Versão ativa" under the Rascunho changes */

/* ---------- Diff panels [L variant A] (Comparar, Publicar, Restaurar) ---------- */
.dfield { background: var(--surface); margin-bottom: 16px }
.dfield > header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border) }
.dfield > header h3 { font-size: 14px; font-weight: 600 }
.dfield > header .meta { margin-left: auto }                                   /* panel summary (same text as the Histórico entry) */
.dfield .p { color: var(--ok) }
.dfield .m { color: var(--danger) }
/* Multiline text: side by side */
.sbs { display: grid; grid-template-columns: 1fr 1fr; font: 12.5px/1.6 var(--mono) }
.sbs .col { min-width: 0; overflow-x: auto }
.sbs .col + .col { border-left: 1px solid var(--border) }
.sbs .colh { font: 600 12px var(--font); color: var(--text-2); padding: 6px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border) }
.ln { display: grid; grid-template-columns: 40px 1fr; white-space: pre-wrap; word-break: break-word }
.ln .n { color: #a8a8a8; text-align: right; padding-right: 10px; user-select: none }
.ln .t { padding-right: 12px }
.ln.del { background: var(--del-bg) }
.ln.add { background: var(--add-bg); display: grid; gap: 0; align-items: normal; margin-top: 0 }  /* undo the editor .add row */
.ln.pad { background: repeating-linear-gradient(-45deg, #f4f4f4 0 4px, #fff 4px 8px) }   /* unpaired line hatch */
.ln.fold { color: var(--text-3); font-family: var(--font); background: var(--surface-2); grid-template-columns: 1fr; padding: 2px 12px }  /* "⋯ N linhas iguais" */
del.w { background: var(--del-strong); text-decoration: none }
ins.w { background: var(--add-strong); text-decoration: none }
/* Lists: item by item */
.ilist { list-style: none; margin: 0; padding: 4px 0 }
.ilist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 6px 16px; align-items: baseline }
.ilist li .s { font: 600 13px var(--mono); text-align: center }               /* + − ~ marker */
.ilist li.add { background: var(--add-bg); margin-top: 0 }
.ilist li.add .s { color: var(--ok) }
.ilist li.del { background: var(--del-bg) }
.ilist li.del .s { color: var(--danger) }
.ilist li.mod { background: var(--warn-soft) }
.ilist li.mod .s { color: var(--warn) }
.ilist li.same { color: var(--text-3) }
.ilist .id { font: 12px var(--mono); color: var(--text-3) }
.ilist .sub { grid-column: 2 / 4; font-size: 12.5px; color: var(--text-2); margin: 0 }   /* "posição 2 → 1 · temperature: 0.6 → 0.4" */
/* Short text (Slots) and values (Credencial, Desabilitado): De | Para cells */
.scalar { display: grid; grid-template-columns: 1fr 1fr }
.scalar > div { padding: 10px 16px }
.scalar > div + div { border-left: 1px solid var(--border) }
.scalar .a { background: var(--del-bg) }
.scalar .b { background: var(--add-bg) }
/* De / Para selector */
.sel { display: flex; align-items: end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap }
.sel label { font-size: 12px; color: var(--text-2); display: grid; gap: 4px }
.sel-arrow { padding-bottom: 10px }                                             /* [L] inline padding on the De → Para arrow */
.sel select { font: inherit; padding: 9px 12px; background: #fff; border: 0; border-bottom: 1px solid var(--border-strong); min-width: 200px; width: auto }

/* ---------- Publicar / Restaurar confirmation [L] ---------- */
.pub { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start }
.pub aside { position: sticky; top: 140px; background: var(--surface); padding: 20px }
.pub aside h3 { font-size: 14px; margin-bottom: 8px }
.pub aside ul { margin: 0 0 16px; padding-left: 18px }
.pub aside .btns { display: grid; gap: 8px }   /* [L] used an inline style="display:grid;gap:8px" */

/* ---------- Login [G variant A] ---------- */
.a-wrap { min-height: calc(100dvh - 48px); display: grid; justify-items: center; align-content: start; padding: 18vh 16px 48px }
.a-card { width: 100%; max-width: 400px; background: var(--surface); padding: 32px 32px 40px }
.a-card h1 { font-size: 24px; font-weight: 400; margin-bottom: 4px }
.a-card .sub { color: var(--text-2); font-size: 14px; margin: 0 0 24px }
.a-card .field { display: grid; gap: 6px }
.a-card .field label { margin: 0 }
.a-card .field input { padding: 11px 16px; font-size: 14px }                   /* [G] taller Carbon field */

/* ---------- Dialog (NEW: Desvincular, #374/#394; no prototype — built from the tokens above) ---------- */
dialog { border: 0; border-radius: 0; padding: 24px; max-width: 480px; background: var(--surface); color: var(--text); text-align: left; white-space: normal; box-shadow: 0 8px 28px rgba(0, 0, 0, .25) }  /* lives in a .dt .act cell: undo its right/nowrap */
dialog::backdrop { background: rgba(22, 22, 22, .5) }
dialog h2 { font-size: 20px; font-weight: 400; margin-bottom: 8px }
dialog p { margin: 0 0 24px; color: var(--text-2) }
dialog .btns { display: flex; justify-content: flex-end; gap: 8px }

/* ---------- NEW: Django form output (Credenciais, Vínculos) ---------- */
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 24px }
.dt .act > form { display: inline; margin: 0 }
.dt pre { margin: 0; font: 12.5px/1.5 var(--mono); white-space: pre-wrap }
.page > * + .dt, .page > .dt + *, .page > * + .tl, .page > * + .empty { margin-top: 16px }
.page-diff { max-width: 1280px }                                                /* [L] Comparar used an inline max-width */

/* ---------- NEW: keyboard focus on links and buttons (Carbon focus ring) ---------- */
a:focus-visible, .btn:focus-visible, .icon:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
.top a:focus-visible, .top form button:focus-visible { outline: 2px solid var(--header-text); outline-offset: -2px }

/* ---------- NEW: reduced motion (the only motion is the button press) ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none }
}

/* ---------- NEW: narrow screens collapse every two-column layout to one ---------- */
@media (max-width: 767px) {
  .top { gap: 8px; padding: 0 16px }
  .top nav a { padding: 0 8px }
  .page, .draft-body { padding: 16px }
  .phead { padding: 12px 16px 0 }
  .phead .line { flex-wrap: wrap }
  .phead .actions { margin-left: 0 }
  .agent-tabs { overflow-x: auto }
  .draft-body, .pub, .row2, .sbs, .scalar { grid-template-columns: minmax(0, 1fr) }
  .toc, .pub aside { position: static }
  .sbs .col + .col, .scalar > div + div { border-left: 0; border-top: 1px solid var(--border) }
  .page { overflow-x: auto }
  .tl > li, .tl-grupos section, .tl-grupos dl { grid-template-columns: minmax(0, 1fr) }
  .tl > li { gap: 12px; padding: 16px }
  .tl-grupos section, .tl-grupos dl { gap: 4px }
  .tl-acoes { flex-direction: row; justify-content: flex-start }
}