/*
 * FluxAccounts design system: the single stylesheet for every server-rendered page.
 *
 * It is served by the Worker at /site.css?v=<content hash> under the strict
 * policy `style-src 'self'`, so pages carry no <style> blocks and no style=""
 * attributes. Colours, spacing, radii and type are tokens on :root; the dark
 * theme only redefines colour tokens. Components below use tokens only.
 */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  --leading: 1.55;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-pill: 999px;

  --target: 2.75rem; /* 44 px minimum touch target */
  --width-narrow: 30rem;
  --width-wide: 66rem;

  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-2: #f0f2f5;
  --color-text: #151a21;
  --color-text-muted: #4f5866;
  --color-border: #d6dbe1;
  --color-border-strong: #9aa3ae;
  --color-accent: #0a66c2;
  --color-accent-hover: #084f96;
  --color-accent-text: #ffffff;
  --color-accent-soft: #e6f0fa;
  --color-danger: #b42318;
  --color-danger-hover: #8f1b12;
  --color-danger-soft: #fdecea;
  --color-success: #156535;
  --color-success-soft: #e5f4ea;
  --color-warning: #874400;
  --color-warning-soft: #fdf0de;
  --color-neutral-soft: #eceff3;
  --color-focus: #0a66c2;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0e1218;
    --color-surface: #161b23;
    --color-surface-2: #1d2430;
    --color-text: #e7ebf0;
    --color-text-muted: #a5afbc;
    --color-border: #2d3643;
    --color-border-strong: #5b6676;
    --color-accent: #70b5ff;
    --color-accent-hover: #9ccbff;
    --color-accent-text: #0b1220;
    --color-accent-soft: #172a40;
    --color-danger: #ff8f85;
    --color-danger-hover: #ffb3ac;
    --color-danger-soft: #3b1a1a;
    --color-success: #74d99a;
    --color-success-soft: #13301f;
    --color-warning: #f3b86e;
    --color-warning-soft: #33250f;
    --color-neutral-soft: #232b37;
    --color-focus: #9ccbff;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

/* 2. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading);
}
h1, h2, h3, p, ul, ol, dl, figure { margin-top: 0; }
h1 { font-size: var(--text-3xl); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: var(--space-3); }
h2 { font-size: var(--text-xl); line-height: 1.3; margin-bottom: var(--space-3); }
h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
p { margin-bottom: var(--space-4); }
a { color: var(--color-accent); text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent-hover); }
strong { font-weight: 650; }
code, .mono { font-family: var(--font-mono); font-size: 0.95em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: var(--space-4); top: -4rem; z-index: 10; background: var(--color-surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-2); }

/* 3. Shell -------------------------------------------------------------- */
.site-frame { min-height: 100vh; display: flex; flex-direction: column; }
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5);
  max-width: var(--width-wide); margin: 0 auto; padding: var(--space-2) var(--space-4);
  min-height: 3.75rem;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--target);
  color: var(--color-text); font-weight: 700; font-size: var(--text-lg); text-decoration: none; letter-spacing: -0.01em;
}
.brand:hover { color: var(--color-text); }
.brand-mark {
  width: 1.5rem; height: 1.5rem; border-radius: 0.45rem; flex: none;
  background: linear-gradient(135deg, var(--color-accent), var(--color-success));
}
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); flex: 1 1 auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--space-3);
  border-radius: var(--radius-sm); color: var(--color-text-muted); text-decoration: none; font-weight: 550;
}
.site-nav a:hover { background: var(--color-surface-2); color: var(--color-text); }
.site-nav a[aria-current="page"] { color: var(--color-text); background: var(--color-accent-soft); }
.site-signout { margin: 0 0 0 auto; }
.site-main { flex: 1 0 auto; width: 100%; }
.site-footer {
  color: var(--color-text-muted); font-size: var(--text-xs);
  max-width: var(--width-wide); width: 100%; margin: 0 auto; padding: var(--space-5) var(--space-4);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between;
}
.site-footer p { margin: 0; }

/* 4. Page layouts ------------------------------------------------------- */
.page-main { margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-7); width: 100%; }
.page-narrow { max-width: calc(var(--width-narrow) + 2 * var(--space-4)); }
.page-wide { max-width: var(--width-wide); }
.page-header { margin-bottom: var(--space-5); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.page-header > div { min-width: 0; }
.page-header h1 { margin-bottom: var(--space-1); }
.page-header .lede { margin-bottom: 0; }
.eyebrow { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-1); }
.lede { color: var(--color-text-muted); font-size: var(--text-lg); max-width: 42rem; }
.stack > * + * { margin-top: var(--space-5); }
.account-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-grid .wide { grid-column: 1 / -1; }
.content-column { max-width: 42rem; }
.page-wide > .panel, .page-wide > .account-grid, .page-wide > .notice { margin-bottom: var(--space-5); }

/* 5. Cards -------------------------------------------------------------- */
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  min-width: 0;
}
.page-narrow > .panel { padding: var(--space-6) var(--space-5); }
.panel > :last-child { margin-bottom: 0; }
.panel h2:first-child, .panel h1:first-child { margin-top: 0; }
.panel-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.panel-header h2 { margin: 0; }
.panel-danger { border-color: var(--color-danger); }
.section-intro { color: var(--color-text-muted); font-size: var(--text-sm); }

/* 6. Forms -------------------------------------------------------------- */
.auth-form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); min-width: 0; }
label.field > span, .field label, .field legend { font-weight: 600; font-size: var(--text-sm); }
.field label span { font-weight: 600; }
.field input, .field select, .field textarea, .copy-field {
  width: 100%; min-height: var(--target);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.field input:focus, .field select:focus, .copy-field:focus { border-color: var(--color-focus); }
.field input[aria-invalid="true"] { border-color: var(--color-danger); border-width: 2px; }
.field-hint, .password-requirements { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.field-error-text, .field .form-error {
  color: var(--color-danger); font-size: var(--text-sm); font-weight: 600; margin: 0;
  background: none; border: 0; padding: 0;
}
.field-error-text::before, .field .form-error::before { content: "Error: "; }
.password-control { display: flex; gap: var(--space-2); }
.password-control input { flex: 1; min-width: 0; }
.password-toggle {
  flex: none; min-width: 4.5rem; min-height: var(--target);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface-2); color: var(--color-text); cursor: pointer; font-weight: 600;
}
.password-toggle[hidden] { display: none; }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.inline-form .field { flex: 1 1 14rem; }
.mail-address-choices { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.mail-address-choices legend { padding: 0 var(--space-1); font-weight: 600; font-size: var(--text-sm); }
.mail-address-choice { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target); overflow-wrap: anywhere; cursor: pointer; }
.mail-address-choice input[type="radio"] { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--color-accent); }
.form-footnote { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-4) 0 0; }
.form-footnote + .form-footnote { margin-top: var(--space-2); }
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); margin: var(--space-4) 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.copy-field { font-family: var(--font-mono); }

/* 7. Buttons ------------------------------------------------------------ */
.primary-action, .secondary-action, .danger-action, .text-action {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--target); padding: 0 var(--space-4);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-weight: 600; text-decoration: none; cursor: pointer; text-align: center; line-height: 1.2;
}
.primary-action { background: var(--color-accent); color: var(--color-accent-text); }
.primary-action:hover { background: var(--color-accent-hover); color: var(--color-accent-text); }
.secondary-action { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.secondary-action:hover { background: var(--color-surface-2); color: var(--color-text); }
.danger-action, .primary-action.danger-action { background: var(--color-danger); color: #ffffff; border-color: var(--color-danger); }
.danger-action:hover, .primary-action.danger-action:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); color: #ffffff; }
.text-action { background: none; color: var(--color-accent); padding: 0 var(--space-1); text-decoration: underline; }
.text-action:hover { color: var(--color-accent-hover); }
.quiet-action { color: var(--color-text-muted); }
.quiet-danger, .secondary-action.quiet-danger { color: var(--color-danger); border-color: var(--color-danger); }
.danger-link { color: var(--color-danger); }
.danger-link:hover { color: var(--color-danger-hover); }
button:disabled, .primary-action:disabled, .secondary-action:disabled { opacity: 0.55; cursor: not-allowed; }
.auth-form > .primary-action { width: 100%; }
.button-row, .confirm-actions, .action-list, .session-pagination, .people-pager, .action-pair {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); list-style: none; margin: 0; padding: 0;
}
.session-pagination span { color: var(--color-text-muted); font-size: var(--text-sm); }
.people-pager { justify-content: flex-end; margin-top: var(--space-4); }
@media (prefers-color-scheme: dark) {
  .danger-action, .primary-action.danger-action { color: #1a0b0a; }
  .danger-action:hover, .primary-action.danger-action:hover { color: #1a0b0a; }
}

/* Confirm-before-destroy disclosure: no script, the real form sits inside. */
.confirm-disclosure { position: relative; }
.confirm-disclosure > summary { list-style: none; }
.confirm-disclosure > summary::-webkit-details-marker { display: none; }
.confirm-disclosure[open] > summary { margin-bottom: var(--space-2); }
.confirm-box {
  border: 1px solid var(--color-danger); background: var(--color-danger-soft);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); max-width: 26rem;
}
.confirm-box p { margin-bottom: var(--space-3); font-size: var(--text-sm); }

/* 8. Messages ----------------------------------------------------------- */
.notice, .form-error {
  border: 1px solid; border-left-width: 4px; border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4);
}
.notice > :last-child, .form-error > :last-child { margin-bottom: 0; }
.notice { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-text); }
.notice-success { background: var(--color-success-soft); border-color: var(--color-success); }
.notice-error, .form-error { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-text); }
.notice-warning { background: var(--color-warning-soft); border-color: var(--color-warning); }
.notice-error::before, .form-error::before { content: "Problem: "; font-weight: 700; }
.private-note { border-left: 3px solid var(--color-border-strong); padding: var(--space-1) var(--space-3); color: var(--color-text-muted); }
.private-note strong { color: var(--color-text); }
.management-empty, .empty-state {
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md);
  color: var(--color-text-muted); padding: var(--space-5); text-align: center; margin: 0;
}
.status-line { margin: 0; }

/* 9. Badges (always text, never colour alone) ---------------------------- */
.pill, .status-badge, .role-badge, .management-state {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border-radius: var(--radius-pill); padding: 0.125rem 0.625rem;
  font-size: var(--text-xs); font-weight: 650; white-space: nowrap; line-height: 1.5;
  background: var(--color-neutral-soft); color: var(--color-text); border: 1px solid var(--color-border);
}
.status-badge::before, .role-badge::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none;
}
.status-active { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.status-invited { background: var(--color-accent-soft); color: var(--color-accent); border-color: transparent; }
.status-attention { background: var(--color-warning-soft); color: var(--color-warning); border-color: transparent; }
.status-disabled, .status-revoked { background: var(--color-danger-soft); color: var(--color-danger); border-color: transparent; }
.status-expired, .status-used-up { background: var(--color-neutral-soft); color: var(--color-text-muted); }
.role-owner { background: var(--color-accent-soft); color: var(--color-accent); border-color: transparent; }
.role-manager { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.role-member { background: var(--color-neutral-soft); color: var(--color-text-muted); }
.role-blocked { background: var(--color-warning-soft); color: var(--color-warning); border-color: transparent; }
.role-member::before { background: var(--color-border-strong); }
.status-sentence { display: block; color: var(--color-text-muted); font-size: var(--text-xs); margin-top: var(--space-1); }

/* 10. Lists and definition rows ---------------------------------------- */
.identity-list, .app-list, .detail-list { list-style: none; margin: 0; padding: 0; }
.identity-row, .app-row, .detail-list > li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border);
}
.identity-row:last-child, .app-row:last-child, .detail-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.identity-row:first-child, .app-row:first-child, .detail-list > li:first-child { padding-top: 0; }
.detail-list > li { display: block; }
.identity-meta { display: grid; gap: 0.125rem; min-width: 0; flex: 1 1 14rem; }
.identity-meta strong, .identity-meta span { overflow-wrap: anywhere; }
.identity-meta span, .detail-meta, .provider, .table-subtitle { color: var(--color-text-muted); font-size: var(--text-sm); }
.detail-meta, .table-subtitle { display: block; overflow-wrap: anywhere; }
.identity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.security-details { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.security-details dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.security-details dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.security-details ul { margin: 0; padding-left: var(--space-4); font-weight: 400; }
.profile-line { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.avatar {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--color-accent-soft); color: var(--color-accent); font-weight: 700; font-size: var(--text-lg);
}
.profile-copy { display: grid; min-width: 0; overflow-wrap: anywhere; }
.profile-copy strong { font-size: var(--text-xl); }
.profile-copy span { color: var(--color-text-muted); }

/* 11. Tables: rows become cards on phones ------------------------------- */
.table-scroll { max-width: 100%; overflow-x: auto; }
.managed-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--text-sm); }
.managed-table caption { text-align: left; color: var(--color-text-muted); font-size: var(--text-sm); padding-bottom: var(--space-2); }
.managed-table th { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-strong); }
.managed-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; overflow-wrap: anywhere; }
.managed-table tbody tr:hover { background: var(--color-surface-2); }
.managed-table td > a { display: inline-flex; align-items: center; min-height: var(--target); }
.managed-table td > a strong { color: inherit; }
.row-actions > summary {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); cursor: pointer; list-style: none; font-weight: 600;
}
.row-actions > summary::-webkit-details-marker { display: none; }
.row-actions > summary::after { content: "▾"; margin-left: var(--space-2); }
.row-actions[open] > summary::after { content: "▴"; }
.row-actions ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.row-actions ul a { display: flex; align-items: center; min-height: var(--target); }
.people-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-4); }
.people-search { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; flex: 1 1 22rem; }
.people-search .field { flex: 1 1 12rem; }
.people-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.people-filters a {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target); padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); font-weight: 550;
}
.people-filters a[aria-current="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); }
.people-filters .count { opacity: 0.8; font-variant-numeric: tabular-nums; }
.people-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin: 0 0 var(--space-5); }
.people-nav a {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--space-3);
  color: var(--color-text-muted); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.people-nav a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.management-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.management-heading h1 { margin-bottom: 0; }
.management-scope { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.management-stat { color: var(--color-text-muted); font-size: var(--text-sm); }
.management-actions { display: grid; gap: var(--space-2); min-width: 13rem; }
.management-details > summary, .disclosure > summary {
  display: flex; align-items: center; min-height: var(--target); cursor: pointer; font-weight: 600; color: var(--color-accent);
}
.management-details > summary::before, .disclosure > summary::before { content: "▸"; margin-right: var(--space-2); }
.management-details[open] > summary::before, .disclosure[open] > summary::before { content: "▾"; }
.management-details > summary::-webkit-details-marker, .disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary h2 { margin: 0; font-size: var(--text-lg); color: inherit; }
.management-details[open] > summary, .disclosure[open] > summary { margin-bottom: var(--space-3); }
.new-code { font-family: var(--font-mono); font-size: var(--text-2xl); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.permission-effect { font-weight: 600; font-size: var(--text-sm); }

@media (max-width: 720px) {
  .account-grid { grid-template-columns: minmax(0, 1fr); }
  .page-main { padding-top: var(--space-5); }
  .panel { padding: var(--space-4); }
  .page-narrow > .panel { padding: var(--space-5) var(--space-4); }
  .managed-table.responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .managed-table.responsive, .managed-table.responsive tbody, .managed-table.responsive tr, .managed-table.responsive td { display: block; width: 100%; }
  .managed-table.responsive tr { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); background: var(--color-surface); }
  .managed-table.responsive td { border: 0; padding: var(--space-2) 0; }
  .managed-table.responsive td::before { content: attr(data-label); display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-1); }
  .managed-table.responsive td[data-label=""]::before { display: none; }
  .managed-table.responsive td:first-child { font-size: var(--text-md); }
  .site-nav { order: 3; flex-basis: 100%; }
  .site-signout { margin-left: auto; }
  .security-details { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .security-details dd { margin-bottom: var(--space-3); }
  .button-row > *, .confirm-actions > * { flex: 1 1 100%; }
}

/* 12. Passkey client (rendered by the WebAssembly client) --------------- */
#said-passkey-root:has([data-client-ready]) > .passkey-client-fallback,
#said-management-passkey-root:has([data-management-passkey-ready]) > .passkey-client-fallback { display: none; }
.pk-layout { display: grid; gap: var(--space-5); }
.pk-layout h2.pk-title { font-size: var(--text-2xl); }
.pk-grid, .ma-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.pk-card, .ma-shell { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); min-width: 0; }
.ma-shell { margin-top: var(--space-5); }
.pk-card ol { padding-left: var(--space-5); }
.pk-card label { display: block; margin: var(--space-4) 0 var(--space-1); font-weight: 600; font-size: var(--text-sm); }
.pk-card input, .ma-field input, .ma-field select {
  width: 100%; min-height: var(--target); padding: var(--space-2) var(--space-3);
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}
.ma-field { display: grid; gap: var(--space-1); }
.pk-layout button, .ma-actions button { min-height: var(--target); padding: 0 var(--space-4); width: auto; }
.pk-layout button:disabled { opacity: 0.5; cursor: not-allowed; }
.pk-actions, .ma-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.pk-muted { color: var(--color-text-muted); }
.pk-detail { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-sm); }
.pk-notice, .ma-notice { border-left: 4px solid var(--color-accent); padding: var(--space-3) var(--space-4); background: var(--color-accent-soft); margin: 0; border-radius: var(--radius-sm); }
.pk-warning { border-color: var(--color-warning); background: var(--color-warning-soft); }
.pk-list { list-style: none; padding: 0; }
.pk-list li { border-top: 1px solid var(--color-border); padding: var(--space-4) 0; }
.pk-full { grid-column: 1 / -1; }
.ma-summary { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.ma-summary dt { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.ma-summary dd { margin: 0.125rem 0 0; }
@media (max-width: 720px) {
  .pk-grid, .ma-grid { grid-template-columns: 1fr; }
  .pk-layout button, .ma-actions button { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  a, button, .primary-action, .secondary-action, .danger-action { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
}
@media (forced-colors: active) {
  .status-badge::before, .role-badge::before, .brand-mark { forced-color-adjust: none; background: CanvasText; }
}