/* Conta: uma coluna de folhas brancas sobre a lona cinza, como as telas de configuração do Elicit.
   Cores, raios, foco e botões vêm dos tokens de style.css (o tema escuro troca os tokens em account_theme.css).
   Os geradores usam .primary / .secondary / .secondary.danger; as folhas injetadas (billing, institutions,
   google_identity, account_support, account_profile_extras) e account_theme.css só acrescentam o layout interno. */
#accounts-view{max-width:880px}

/* Cabeçalho do módulo, fora das folhas: o padrão da casca (.view-head, .view-head-text e .view-title em style.css), o mesmo de todos
   os módulos. Some junto com a folha da conta. */
#accounts-view>.ar-view-header:has(+.ar-accounts[hidden]){display:none}

/* Uma folha por módulo da conta. */
.ar-accounts,.ar-research-guides,.ar-offboarding,.ar-account-google,.ar-billing,.ar-institutions,
[data-ex-account-settings],[data-ex-account-support],[data-ex-profile-extras],[data-ex-account-emails]{
  margin:0 0 16px;padding:22px 24px;border:1px solid var(--line-strong);border-radius:var(--radius-card);
  background:var(--surface);color:var(--ink);font-size:14px;line-height:1.55;overflow-wrap:anywhere}

/* Títulos: "Minha conta" abre a vista (h2 .view-title, no cabeçalho); cada folha abre com um h3; grupos internos são h4/h5 na fonte da interface. */
:where(#accounts-view) h2:where(:not(.view-title)){margin:0 0 4px;font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
:where(#accounts-view) h3{margin:0 0 6px;font-family:var(--font-display);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
:where(#accounts-view) :is(h4,h5){margin:20px 0 8px;font-family:var(--font-ui);font-size:14px;font-weight:600;line-height:1.4;letter-spacing:0;color:var(--ink)}
:where(#accounts-view) :is(form,article,li,section,div,.ar-account-notice)>:is(h3,h4,h5):first-child{margin-top:0}
.ar-account-form>h3{margin-bottom:4px;font-size:16px}

/* Texto: prosa perto de 72 caracteres; regiões de status vazias não deixam buraco. */
:where(#accounts-view) p{margin:8px 0;max-width:72ch}
:where(#accounts-view) small{font-size:12.5px;line-height:1.5;color:var(--muted)}
:where(#accounts-view) :is(p[aria-live],p[role=status],p[role=alert]):empty{margin:0;min-height:0}
.ar-account-status{min-height:1.5em;color:var(--ink-2)}
:where(#accounts-view) details{margin:12px 0}
/* Disclosures: the canonical summary of style.css (chevron, 13.5px, 32px/44px), sized to its text. */
:where(#accounts-view) summary{width:fit-content}

/* Campos: rótulo acima; o controle (folha, tinta, seta do select, anel de foco) é o da casca. */
:where(#accounts-view) label{max-width:600px;display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--ink-2)}
:where(#accounts-view) label :is(input,select,textarea){font-weight:400}
:where(#accounts-view) label:has(>input:is([type=checkbox],[type=radio])),
:where(#accounts-view) :is(.ar-account-check,.ar-offboarding-check,.ar-institution-check){flex-direction:row;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:400;line-height:1.5;color:var(--ink);cursor:pointer}
:where(#accounts-view) label>input:is([type=checkbox],[type=radio]){margin-top:2px}
:where(#accounts-view) input[type=file]{padding:5px 8px}
:where(#accounts-view) input[type=file]::file-selector-button{margin-right:10px;padding:4px 12px;border:1px solid var(--control-line);border-radius:var(--radius);background:var(--surface);color:var(--ink-2);font:inherit;font-weight:500;cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
:where(#accounts-view) input[type=file]:not(:disabled)::file-selector-button:hover{border-color:var(--line-hover);background:var(--surface-2);color:var(--ink)}

/* Ações: fileiras com intervalo regular; rótulos longos quebram dentro do botão em vez de sair da folha. */
.ar-account-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0}
.ar-account-actions:empty{display:none}
.ar-account-areas{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
#accounts-view :is(.primary,.secondary){max-width:100%}
#accounts-view .primary{white-space:normal;text-align:center}
:where(#accounts-view) :not(.ar-account-actions)>:is(.primary,.secondary){margin:8px 8px 0 0}

/* Avisos: borda inteira de 1px e fundo tingido, nunca faixa lateral. */
:where(#accounts-view) .notice{max-width:none}
.ar-account-notice,.ar-guide-notice{max-width:none;margin:12px 0;padding:11px 14px;border:1px solid var(--amber-line);border-radius:var(--radius-card);background:var(--amber-soft);color:var(--amber-ink);font-size:13px;line-height:1.6}
.ar-account-error{max-width:none;margin:12px 0;padding:11px 14px;border:1px solid var(--red-line);border-radius:var(--radius-card);background:var(--red-soft);color:var(--red);font-size:13px;line-height:1.6}
:is(.ar-account-notice,.ar-account-error)>:first-child{margin-top:0}
:is(.ar-account-notice,.ar-account-error)>:last-child{margin-bottom:0}
:is(.ar-account-notice,.ar-account-error) ul{margin:6px 0;padding-left:20px}

/* "Sua conta": a identidade conectada e, abaixo, formulários sem moldura própria. */
.ar-account-session{margin:14px 0 0;padding:0 0 16px;border-bottom:1px solid var(--line)}
.ar-account-session strong{font-size:15px;font-weight:600}
.ar-account-session p{margin:2px 0}
.ar-account-session small{display:block;margin-top:8px}
.ar-account-form{margin:16px 0 0}

/* Guias de pesquisa: uma lista de ações dentro da folha, linhas separadas por divisória fina (sem ladrilho dentro da folha).
   Cada linha leva o nome do guia, o estado em legenda e a ação da linha à direita, um .ghost (research_guides.mjs marca os botões):
   sem borda nem fundo, o texto alinhado à borda direita da linha; passar o cursor ou focar ainda mostra que é um controle. */
.ar-guide-catalog{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.ar-guide-catalog li{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 0;border-bottom:1px solid var(--line)}
.ar-guide-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.ar-guide-title{font-size:14px;font-weight:500;line-height:1.4;color:var(--ink)}
.ar-guide-text small{margin:0}
.ar-guide-catalog li>.ghost{flex:none;margin:0 -10px 0 0}
.ar-guide-overlay{position:fixed;inset:0;z-index:var(--z-dialog);display:flex;align-items:center;justify-content:center;padding:16px;background:var(--scrim);animation:fade-in var(--t) var(--ease-out) backwards}
.ar-guide-dialog{width:min(600px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:var(--radius-frame);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);animation:dialog-in var(--t) var(--ease-out) backwards}
.ar-guide-dialog [data-ex-guide-counter]{margin:0 0 8px;font-size:12.5px;color:var(--muted)}

/* Exclusão da conta: a revisão é um modal de fato; o fundo é uma camada que também recebe o ponteiro. */
.ar-offboarding:has(>.ar-offboarding-dialog)::before{content:"";position:fixed;inset:0;z-index:var(--z-overlay);background:var(--scrim);animation:fade-in var(--t) var(--ease-out) backwards}
.ar-offboarding-dialog{position:fixed;top:6vh;left:0;right:0;z-index:var(--z-dialog);width:min(680px,calc(100% - 32px));max-height:88vh;margin-inline:auto;overflow:auto;padding:24px;border-radius:var(--radius-frame);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg)}
.ar-offboarding-dialog.is-entering{animation:dialog-in var(--t) var(--ease-out) backwards}
.ar-offboarding-dialog>form{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.ar-offboarding ul{padding-left:20px}
.ar-offboarding-dialog>ul{list-style:none;padding:0}
.ar-offboarding-dialog>ul>li{padding:8px 0;border-bottom:1px solid var(--line)}
.ar-offboarding-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px;margin:12px 0}
.ar-offboarding-counts div{padding:10px 12px;border-radius:var(--radius-card);background:var(--surface-2)}
.ar-offboarding-counts dt{font-size:12.5px;line-height:1.4;color:var(--muted)}
.ar-offboarding-counts dd{margin:4px 0 0;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.ar-offboarding blockquote{margin:8px 0;padding:10px 14px;border-radius:var(--radius-card);background:var(--surface-2);white-space:pre-wrap;max-width:72ch}

/* E-mails e acesso (account_emails.mjs não tem folha própria). Cada etapa abre abaixo de uma divisória. */
[data-ex-account-emails] section{margin-top:18px}
[data-ex-account-emails] ul{list-style:none;margin:8px 0;padding:0}
[data-ex-account-emails] li{padding:12px 0;border-bottom:1px solid var(--line)}
[data-ex-account-emails] li:first-child{border-top:1px solid var(--line)}
[data-ex-account-emails] li p{margin:4px 0}
[data-ex-account-emails] small{display:block}
[data-ex-account-emails] form{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}

/* Cópias de segurança (E09): linhas com divisória fina dentro da folha, sem cartão dentro de cartão. */
.ar-backup-list{list-style:none;margin:12px 0;padding:0}
.ar-backup-list>li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
.ar-backup-list>li:first-child{border-top:1px solid var(--line)}
.ar-backup-list .ar-account-actions{margin:0}
.ar-backup-reason{margin-left:6px;padding:1px 8px;border:1px solid var(--line-strong);border-radius:999px;font-size:12px;color:var(--muted)}
.ar-backup-result{margin:6px 0 0;font-size:13px;color:var(--green-strong)}

@media(max-width:600px){
  .ar-accounts,.ar-research-guides,.ar-offboarding,.ar-account-google,.ar-billing,.ar-institutions,
  [data-ex-account-settings],[data-ex-account-support],[data-ex-profile-extras],[data-ex-account-emails]{padding:18px 16px}
  .ar-account-actions>:is(.primary,.secondary){flex:1 1 auto}
  .ar-guide-dialog{padding:18px}
  .ar-offboarding-dialog{top:3vh;max-height:94vh;padding:18px}
  .ar-offboarding-counts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Toque: botões, links soltos e caixas de seleção chegam a 44px, como .check na casca.
   Os resumos já chegam a 44px pela regra canônica de disclosure (style.css). */
@media(pointer:coarse){
  #accounts-view :is(.primary,.secondary){min-height:44px}
  :where(#accounts-view) :is(label:has(>input:is([type=checkbox],[type=radio])),.ar-account-check,.ar-offboarding-check,.ar-institution-check){min-height:44px;align-items:center}
  :where(#accounts-view) label>input:is([type=checkbox],[type=radio]){margin-top:0}
  :is(.ar-offboarding-dialog>a,.ar-guide-dialog [data-ex-guide-explorer]){display:inline-block;padding:12px 0}
}