/* ASRT Mail console — Account views: team, audit, settings + personal security.
   Reuses the ui.css / views.css vocabulary (.card .chip .kv .set-row .set-grid .note
   .tokens .inline .segbar .empty .pager). Only adds prefixed classes the base does not cover.
   Every colour is a token, so both themes stay legible. */

/* ---------- team ---------- */
.team-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.team-name b { font-weight: 600; }
.team-role { font-size: 12.5px; }
.team-req { display: grid; gap: 1px; min-width: 0; }
.team-req span:first-child { font-size: 12.5px; }

.team-legend { margin-top: 4px; border-top: 1px dashed var(--line-strong); padding-top: 10px; }
.team-legend > summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; color: var(--slate); }
.team-legend > summary::-webkit-details-marker { display: none; }
.team-legend > summary::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 7px; vertical-align: 0; border-left: 4px solid var(--cyan-deep); border-top: 3px solid transparent; border-bottom: 3px solid transparent; transition: transform 0.12s ease; }
.team-legend[open] > summary::before { transform: rotate(90deg); }
.team-legend-body { display: grid; gap: 11px; margin-top: 11px; }
.team-legend-role { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); }
.team-legend-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 7px; }
.team-legend-head b { font-size: 13px; }

/* ---------- audit ---------- */
.audit-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: end; }
.audit-filters .field > label { white-space: nowrap; }
.audit-actor { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 240px; }
.audit-target { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.audit-foot { display: grid; gap: 6px; margin-top: 12px; }
.audit-foot .pager { border-top: 0; padding: 0; }

/* ---------- settings ---------- */
.settings-meta { grid-template-columns: minmax(96px, 132px) minmax(0, 1fr); gap: 6px 14px; }
.settings-key { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); letter-spacing: -0.01em; }
.settings-control { display: flex; justify-content: flex-end; min-width: 0; }
.settings-control input,
.settings-control select { text-align: right; font-family: var(--mono); font-size: 12.5px; }
.settings-row-ro .settings-control { color: var(--muted); }
.settings-ro { justify-content: flex-end; padding: 6px 9px; font-size: 12.5px; color: var(--slate); text-align: right; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--wash); overflow-wrap: anywhere; }

.settings-ghead { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin: 24px 0 12px; padding: 0 2px 8px; border-bottom: 1px solid var(--line-strong); }
.settings-ghead .tiny { color: var(--muted); }
.settings-mline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }

.settings-flash { align-items: flex-start; margin-bottom: 14px; }
.settings-flash b { font-size: 13px; }
.settings-flash .tiny { margin-top: 3px; opacity: 0.88; overflow-wrap: anywhere; }
.settings-flash-x { margin-left: auto; border: 0; background: none; color: inherit; opacity: 0.6; font-size: 15px; line-height: 1; cursor: pointer; }
.settings-flash-x:hover { opacity: 1; }
.settings-savebadge { font-size: 11px; }

.settings-secret { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); }
.settings-secret .caps { color: var(--slate); }
.settings-secret .inline span { flex: 1 1 auto; min-width: 0; }
.settings-mfa-code { max-width: 160px; letter-spacing: 0.2em; text-align: center; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .audit-filters { grid-template-columns: minmax(0, 1fr); }
  .audit-actor { max-width: 160px; }
}