/* The account (/account/, /es/cuenta/) and signing in (/account/sign-in/, /es/cuenta/entrar/).
   On top of base.css, sf.css and my-data.css (.md, .md-card, .md-acts, .md-msg…).
   Phone first: one column, nothing wider than 360 px. States carry an icon and
   words, never colour alone. The header link (.nav-acct, every page) has no rules of
   its own: it is a link of the bar like My data (base.css). */
.ac .ac-state{ border:1px solid var(--rule); border-left:4px solid var(--accent); border-radius:10px; background:var(--surface); padding:12px 16px; display:grid; gap:8px; }
.ac .ac-state[hidden]{ display:none; }
.ac .ac-state p{ margin:0; color:var(--ink); line-height:1.55; }
.ac .ac-state.warn{ border-left-color:var(--warn); background:color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.ac .ac-state.ok{ border-left-color:var(--pass); }
.ac .ac-state.info{ border-left-color:var(--accent); }
.ac .ac-wait{ color:var(--ink-2) !important; }
.ac-email{ font-size:1.1rem; font-weight:600; color:var(--ink) !important; overflow-wrap:anywhere; }
.ac-h3{ margin:6px 0 0; font-size:1rem; }
.ac-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ac-item{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 12px; align-items:center; padding:10px 12px; border:1px solid var(--rule); border-radius:10px; background:var(--surface-2); min-width:0; }
.ac-item > .md-meta{ grid-column:1; }
.ac-item > .btn, .ac-item > .md-acts{ grid-column:2; grid-row:1 / span 2; justify-self:end; }
.ac-item-t{ overflow-wrap:anywhere; color:var(--ink); }
.ac-item.current{ border-color:color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.ac-item.new{ border-left:4px solid var(--warn); }
.ac-tag{ display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; font-size:.78rem; font-weight:600; color:var(--ink); background:color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.ac-line{ margin:0; }
.ac-line:empty{ display:none; }
.ac-switch{ margin:0; color:var(--ink) !important; }
.ac-status{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:8px 12px; border-radius:8px; border:1px solid var(--rule); background:var(--surface-2); color:var(--ink) !important; font-weight:560; }
.ac-status:empty{ display:none; }
.ac-icon{ display:inline-flex; width:18px; height:18px; flex:0 0 18px; }
.ac-status.s-synced .ac-icon{ color:var(--pass); }
.ac-status.s-syncing .ac-icon, .ac-status.s-pending .ac-icon, .ac-status.s-offline .ac-icon{ color:var(--warn); }
.ac-status.s-error, .ac-status.s-signed-out, .ac-status.s-disabled, .ac-status.s-wiped{ border-color:color-mix(in srgb, var(--fail) 40%, var(--rule)); }
.ac-status.s-error .ac-icon, .ac-status.s-signed-out .ac-icon, .ac-status.s-disabled .ac-icon, .ac-status.s-wiped .ac-icon{ color:var(--fail); }
.ac-status.s-off .ac-icon{ color:var(--ink-3); }
.ac-badge{ font-weight:500; color:var(--ink-2); }
.ac-what{ margin:8px 0 0; padding-left:1.2em; color:var(--ink-2); display:grid; gap:6px; }
.ac-what b{ color:var(--ink); }
.ac-conflicts{ display:grid; gap:8px; padding-top:10px; border-top:1px solid var(--rule); }
.ac-conflicts[hidden]{ display:none; }
.ac-conflicts .hint{ margin:0; }
.ac-conflict .md-acts{ gap:6px; }
.ac-form{ display:grid; gap:8px; }
.ac-form .field{ margin-bottom:0; }
.ac-form input[aria-invalid="true"]{ border-color:var(--fail); }
.md-msg.ok{ color:var(--pass); font-weight:560; }
.md-msg.bad{ color:var(--fail); font-weight:560; }
.ac-foot{ margin:4px 0 0; }
.ac-link{ margin:0; }
@media (max-width:520px){
  .ac-item{ grid-template-columns:1fr; }
  .ac-item > .btn, .ac-item > .md-acts{ grid-column:1; grid-row:auto; justify-self:start; }
}
@media print{ .ac .md-acts, .ac-form{ display:none !important; } }