/* Account security page additions. Shared tokens, borders and type sizes come from /billing/styles.css; nothing animates. */
.header-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.app-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.app-nav a { padding: 6px 10px; border-radius: calc(var(--radius) / 2); color: hsl(var(--muted-foreground)); }
.app-nav a:hover { color: hsl(var(--foreground)); }
.app-nav a[aria-current="page"] { color: hsl(var(--foreground)); background: hsl(var(--accent)); font-weight: 550; }
.button.secondary { background: transparent; border-color: hsl(var(--input)); color: hsl(var(--foreground)); }
.button.secondary:hover { background: hsl(var(--accent)); filter: none; }
.message > :last-child { margin-bottom: 0; }
.message strong { font-weight: 600; }
.message .member-actions { justify-content: flex-start; margin-top: 12px; }
.security-page .confirm { margin: 16px 0 0; }
.security-page .op-list { margin: 0 0 4px; }
.security-page .op-list .message { margin-bottom: 12px; }
.security-page .field-error { color: hsl(var(--foreground)); font-weight: 550; }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
.session-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.session-state { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); }
tr.confirm-row td { text-align: left; padding: 0 0 12px; }
.method-list { list-style: none; padding: 0; margin: 8px 0 0; }
.method-list li { padding: 12px 0; border-top: 1px solid hsl(var(--border)); }
.method-list li:last-child { border-bottom: 1px solid hsl(var(--border)); }
.method-list small { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
@media(max-width:640px) {
  table.stack tr.confirm-row td { padding: 8px 0 0; }
  table.stack tr.confirm-row td::before { content: none; }
  /* A wrapped column name must grow its row: the label floats into the cell's left padding with a zero-width margin box, and flow-root contains it.
     Percentages here resolve against the content box (66% - 12px of the cell), so 51.5152% + 6.1818px equals the shared 34% of the full cell. */
  .security-page table.stack td { display: flow-root; }
  .security-page table.stack td::before { position: static; float: left; width: calc(51.5152% + 6.1818px); margin: 1px 12px 0 calc(-51.5152% - 18.1818px); }
  .order-actions button,.order-actions .button,.message .member-actions button,.message .member-actions .button { min-height: 44px; }
  .header-start { width: 100%; }
}