/* Shared visual system; functional component layouts live in their existing sheets. */
/* Control geometry: buttons and single-line fields share one height. Button rules live in base.css. */
:root { --button-height: 2.5rem; --button-height-sm: 2rem; }
@media (pointer: coarse) { :root { --button-height: var(--control-height); --button-height-sm: 2.5rem; } }
:root { accent-color: var(--accent); scrollbar-color: var(--text-muted) var(--bg-secondary); }
html { scrollbar-gutter: stable; }
body { caret-color: var(--text-primary); }
a { color: var(--secondary-ink, var(--text-primary)); text-underline-offset: 0.2em; }
a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-decoration-thickness: 1px; transition: color 140ms ease-out, text-decoration-color 140ms ease-out; }
a:where(:not(.btn, .button)):hover { color: var(--text-primary); text-decoration-color: currentColor; }
summary { display: flex; align-items: center; gap: 0.4rem; list-style: none; cursor: pointer; transition: color 140ms ease-out; }
summary::-webkit-details-marker { display: none; }
/* Phosphor CaretDown instead of the UA disclosure triangle. */
summary::after { content: ""; flex-shrink: 0; width: 0.9em; height: 0.9em; background: currentColor; opacity: 0.7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 160ms ease-out; }
details[open] > summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }
summary:hover { color: var(--text-primary); }
.create-password-panel > summary { justify-content: space-between; }
h1, h2 { text-wrap: balance; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-radius: var(--radius-sm); }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]), select { min-height: var(--button-height); padding-block: calc((var(--button-height) - 1.5em - 2px) / 2); }
input[type="checkbox"], input[type="radio"] { flex-shrink: 0; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.ui-icon { flex-shrink: 0; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; z-index: 1100; padding: 0.75rem 1rem; background: var(--bg-card); color: var(--text-primary); transform: translateY(-200%); border-radius: var(--radius-sm); }
.skip-link:focus { transform: none; }
.server-brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--text-primary); text-decoration: none; font-weight: 650; font-size: 1rem; overflow-wrap: anywhere; }
.server-brand:hover { text-decoration: none; }
.server-brand img { object-fit: contain; border-radius: 0.35rem; flex-shrink: 0; }
.server-mark { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; color: var(--accent-ink, var(--text-primary)); }
.card, section, .info-panel, .inline-form, .message, .error, .warning-box, .info-box, .migrate-callout, .app-password-display, .provider-badge, .permissions-notice { border-radius: var(--radius-md); }
.modal { border-radius: var(--radius-lg); }
section { background: var(--bg-card); border: 1px solid var(--border-color); padding: 1.5rem; }
section + section { margin-block-start: 1.5rem; }
section h3 { font-size: 1rem; font-weight: 650; margin-block-end: 0.75rem; }
section .section-description, section .section-hint { max-width: 65ch; line-height: 1.65; }
.badge { border-radius: 0.3rem; padding: 0.2rem 0.45rem; line-height: 1.35; }
.badge.admin { background: var(--bg-secondary); color: var(--text-secondary); }
.tabs, .account-type-switcher { border-radius: var(--radius-sm); padding: 0.25rem; }
.tab, .switcher-option { border-radius: 0.35rem; }
.item { border-radius: var(--radius-sm); gap: 1rem; }
.error, .message.error { border: 1px solid var(--error-border); }
.message.warning, .warning-box { border: 1px solid var(--warning-border); }
.message.success { border: 1px solid var(--success-border); }
.toggle-button { border-radius: 1rem; min-height: 28px; }
.toggle-slider { border-radius: 50%; }

/* A server-branded frame for every sign-in, recovery, consent and migration route. */
.auth-shell { min-height: 100vh; min-height: 100dvh; padding: 2rem 1.25rem; }
.auth-brand { display: flex; justify-content: center; margin-block: 0.5rem 2.25rem; }
.auth-main { min-height: 0; }
.auth-main > div { width: 100%; max-width: 42rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.auth-main > .consent-container, .auth-main > .migration-page { max-width: 60rem; }
.auth-main .split-layout { grid-template-columns: minmax(0, 1fr); }
.auth-main .register-form { max-width: none; }
.auth-main :is(.passkey-method, .password-method) { padding: 0; background: transparent; }
.auth-main :is(.passkey-method, .password-method) h3 { text-transform: none; letter-spacing: normal; color: var(--text-primary); }
.auth-main .page-header { text-align: start; margin-block-end: 1.75rem; }
.auth-main h1 { font-size: 1.75rem; letter-spacing: -0.025em; margin-block-end: 0.6rem; }
.auth-main .subtitle { line-height: 1.65; }
.auth-main .login-content { max-width: none; }
.auth-main .saved-accounts.grid { grid-template-columns: minmax(0, 1fr); }
.auth-main .account-item { border-radius: var(--radius-sm); }
.auth-main .auth-methods { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.auth-main .method-divider { flex-direction: row; gap: 1rem; padding: 0; }
.auth-main .method-divider::before, .auth-main .method-divider::after { height: 1px; width: auto; flex: 1; }
.auth-main .method-divider span { writing-mode: horizontal-tb; transform: none; }
.auth-main .passkey-btn { padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.auth-main .auth-methods form { width: 100%; }
.auth-main .auth-methods form > button { align-self: stretch; }
.auth-footer { display: flex; justify-content: center; align-items: center; gap: 1.5rem; max-width: 42rem; margin: 1.25rem auto 0; color: var(--text-secondary); font-size: var(--text-xs); }
.locale-picker select { width: auto; min-height: 2.5rem; background: transparent; border-color: transparent; color: var(--text-secondary); font-size: var(--text-xs); }
.consent-container .client-info { background: transparent; padding: 0; text-align: start; }
.consent-container .client-info h1 { font-size: 1.5rem; }
.consent-container .client-info .subtitle { margin-top: var(--space-4); }
.oauth-client { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.oauth-client-label { font-size: var(--text-sm); color: var(--text-secondary); }
.consent-container .client-panel { gap: 1.5rem; }
.consent-container .account-info { border-radius: var(--radius-sm); padding: 1rem; margin: 0; }
.consent-container .consent-account-label { text-transform: none; letter-spacing: normal; color: var(--text-secondary); }
.consent-container .split-layout { grid-template-columns: minmax(0, 1fr); }
.consent-container .scope-item { border-radius: var(--radius-sm); padding: 1rem; }
.consent-container .scope-description { color: var(--text-secondary); }
.consent-container .actions { padding-block-start: 0.5rem; max-width: none; margin-inline: 0; }
/* Auth cards: one decision per row, actions share the width equally and wrap on narrow screens. */
.auth-main :is(.actions, .form-actions, .button-row) > :is(button, a.btn) { flex: 1 1 8rem; }
@media (min-width: 900px) {
  .consent-container .split-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2.5rem; }
}

/* An overview built from the current account, without invented activity or metrics. */
.identity-summary { margin-block-end: 2.5rem; }
.identity-heading { display: flex; align-items: center; gap: 1.25rem; }
.identity-heading > div { min-width: 0; }
.identity-heading .profile-handle { overflow-wrap: anywhere; }
.identity-avatar { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; flex-shrink: 0; border-radius: var(--radius-lg); background: var(--accent-muted); color: var(--accent-ink, var(--text-primary)); font-size: 1.5rem; font-weight: 600; }
.identity-heading h2 { font-size: clamp(1.35rem, 1rem + 1vw, 2rem); letter-spacing: -0.03em; overflow-wrap: anywhere; margin-block-end: 0.3rem; }
.identity-heading p { color: var(--text-secondary); font-size: var(--text-sm); }
.identity-facts { margin: 2rem 0 0; display: grid; grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1.3fr); gap: 1.5rem;  }
.identity-facts dt { color: var(--text-secondary); font-size: var(--text-xs); margin-block-end: 0.35rem; }
.identity-facts dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.identity-facts code { font-family: var(--font-mono); font-size: var(--text-xs); }
.overview-columns { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(13rem, 1fr); gap: 3rem; align-items: start; }
.overview-tasks h3 { font-size: 1rem; margin-block-end: 0.75rem; }
.task-row { display: flex; align-items: center; gap: 1rem; padding-block: 1.25rem; color: var(--text-primary); text-decoration: none; }
.task-row > span { flex: 1; }
.task-row strong { display: block; font-size: var(--text-sm); font-weight: 600; margin-block-end: 0.25rem; }
.task-row > span > span { display: block; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; }
.task-row > .ui-icon:last-child { color: var(--text-secondary); transition: transform 160ms ease-out; }
.task-row:hover { text-decoration: none; }
.task-row:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
.task-row:hover > .ui-icon:last-child { transform: translateX(3px); }
.hosting-note { padding: 1.5rem; background: var(--bg-secondary); border-radius: var(--radius-md); }
.hosting-note > .ui-icon { margin-block-end: 1.25rem; }
.hosting-note h3 { font-size: 1rem; margin-block-end: 0.75rem; }
.hosting-note p { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.75; }
.hosting-note a { display: inline-flex; align-items: center; gap: 0.75rem; margin-block-start: 1.25rem; font-size: var(--text-sm); font-weight: 550; }
.overview-notice { display: flex; align-items: start; gap: 1rem; padding: 1.25rem; margin-block-end: 2rem; background: var(--warning-bg); color: var(--warning-text); border-radius: var(--radius-md); font-size: var(--text-sm); }
.overview-notice > div { flex: 1; }
.overview-notice p { margin-block-start: 0.3rem; }
.overview-notice a { color: inherit; display: inline-flex; align-items: center; gap: 0.4rem; }

/* Repeated operational data stays compact and adapts to narrow screens. */
.session-card, .device-card, .app-choice-card { border: 0; border-radius: 0; background: transparent; padding: 1.25rem 0; }
.session-card.current { background: transparent; }
.session-search { margin-block-end: 1.5rem; max-width: 28rem; }
.session-search label { margin-block-end: 0.5rem; }
.session-details, .device-details { font-variant-numeric: tabular-nums; }
.repo-content pre, .did-doc-code { border-radius: var(--radius-sm); }
@media (max-width: 1100px) { .overview-columns { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
@media (max-width: 600px) {
  .auth-shell { padding: 1.25rem 1rem; }
  .auth-brand { margin-block: 0.5rem 1.5rem; }
  .auth-main > div { padding: 1.5rem 1.25rem; }
  .auth-main h1 { font-size: 1.5rem; }
  .identity-heading { gap: 0.85rem; }
  .identity-avatar { width: 2.75rem; height: 2.75rem; }
  .identity-facts { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .overview-notice { flex-wrap: wrap; }
  .overview-notice > div { flex-basis: calc(100% - 3rem); }
  .overview-notice a { margin-inline-start: 2.25rem; }
  .session-card, .device-card { flex-wrap: wrap; gap: 1rem; }
  .item { flex-wrap: wrap; }
  .item-info { flex-basis: 100%; }
  section { padding: 1.25rem; }
  .header-row, .section-header-row { flex-wrap: wrap; }
  .actions, .form-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .task-row > .ui-icon:last-child { transition: none; } }
@media (forced-colors: active) {
  .nav-item.active { outline: 1px solid Highlight; }
  .server-mark, .identity-avatar { color: CanvasText; }
  .badge { border: 1px solid CanvasText; }
}

.step-dot { border-radius: 50%; }
.brand-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.brand-preview { margin: 0; min-width: 0; }
.brand-preview figcaption { font-size: var(--text-xs); color: var(--text-secondary); margin-block-end: 0.5rem; }
.brand-preview-surface { padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid #d7dce5; background: #ffffff; color: #252c37; display: flex; flex-direction: column; gap: 0.4rem; }
.brand-preview-surface > span { font-size: var(--text-xs); }
.brand-preview.dark .brand-preview-surface { background: #1d222c; color: #edf0f6; border-color: #353d4c; color-scheme: dark; }
.brand-preview-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--text-xs); margin-block: 0.75rem; }
.brand-preview-nav span { padding: 0.4rem 0.5rem; }
.brand-preview-nav span:first-child { background: color-mix(in srgb, var(--preview-primary) 10%, transparent); border-radius: 0.35rem; }
.brand-preview-surface .brand-preview-action { align-self: flex-start; padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); background: var(--preview-primary); color: var(--preview-contrast); font-weight: 600; }
@media (max-width: 500px) { .brand-previews { grid-template-columns: minmax(0, 1fr); } }

/* Dedicated workspaces replace the previous stacked settings and editor pages. */
[hidden] { display: none !important; }
.page-intro { max-width: 68ch; color: var(--text-secondary); line-height: 1.75; margin: 0 0 2rem; }
.page-intro-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-block-end: 2rem; }
.page-intro-row .page-intro { margin: 0; }
.text-action:hover { text-decoration: underline; text-decoration-color: currentColor; }
.text-action { display: inline-flex; align-items: center; gap: 0.65rem; font-size: var(--text-sm); font-weight: 550; padding-block: 0.65rem; }
.page-intro-row .text-action { flex-shrink: 0; }
.data-export-heading { display: flex; align-items: start; gap: 1.25rem; margin-block-end: 1.5rem; }
.data-export-heading p, .data-portability p { color: var(--text-secondary); line-height: 1.75; max-width: 65ch; }
.data-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; margin: 0 0 1.5rem; }
.data-facts dt { font-size: var(--text-xs); color: var(--text-secondary); margin-block-end: 0.4rem; }
.data-facts dd { margin: 0; overflow-wrap: anywhere; font-size: var(--text-sm); }
.data-facts code { font-family: var(--font-mono); font-size: var(--text-xs); }
.account-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.settings-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem; align-items: start; }
.settings-description, .settings-controls { min-width: 0; }
.settings-description .current, .settings-description .warning-text { margin: 0; }
.account-settings > .page-intro, .account-settings > .danger-zone { grid-column: 1 / -1; }
.account-settings > .page-intro { margin-block-end: 0.5rem; }
.account-settings > section { margin: 0; }
.account-settings .danger-zone { margin-block-start: 1.5rem; border-color: var(--error-border); }
.security-methods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-block-end: 1.5rem; align-items: start; }
.security-methods > section { margin: 0; }
.security-methods > section:last-child { grid-column: 1 / -1; }
.connected-apps > section { margin-block-end: 2rem; }
.connected-apps .sessions-list { gap: 0; }
.connected-apps .session-card { border: 0; border-radius: 0; padding: 1.25rem 0; background: transparent; }
.connected-apps .app-choice-card { border: 0; border-radius: 0; padding: 1.25rem 0; background: transparent; }
.connected-apps .app-choice-header { padding: 0; }

/* One panel treatment; embedded lists use rows instead of nested cards. */
.content-body section { min-width: 0; }
.content-body .empty { text-align: start; padding: 1rem 0; font-size: var(--text-sm); }
.content-body section :is(.device-card, .item-card, .code-item) { background: transparent; border: 0; border-radius: 0; padding: 1rem 0; }
.content-body section :is(.device-list, .items-list) { gap: 0; }
.content-body section .inline-form { padding: 0; margin-block-start: 1.5rem; border-radius: 0; }
.content-body .tabs { background: var(--bg-secondary); }
.content-body .tab.active { background: var(--bg-card); color: var(--text-primary); }
.content-body .tab.active:hover:not(:disabled) { background: var(--bg-card); color: var(--text-primary); }
.comms .channel-option { border: 1px solid transparent; border-radius: var(--radius-sm); }
.comms .channel-option:has(input:checked) { background: var(--accent-muted); border-color: var(--border-color); }
.comms .channel-option:has(input:focus-visible) { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.comms .channel-option .channel-info { min-width: 0; }
@media (max-width: 600px) {
  .controllers .section { padding: 1.25rem; }
  .comms .channel-option { flex-wrap: wrap; }
  .comms .channel-hint { flex-basis: 100%; margin-inline-start: 1.85rem; }
}
.section-switcher { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 1.5rem; padding-block-end: 1rem; }
.section-switcher button { background: transparent; color: var(--text-secondary); font-size: var(--text-sm); padding: 0.6rem 0.85rem; }
.section-switcher button.active, .section-switcher button:hover { background: var(--bg-secondary); color: var(--text-primary); }
.section-switcher button.active { font-weight: 650; }
.admin > section { margin-block-start: 0; }
.admin .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.admin .stat-item { display: flex; flex-direction: column-reverse; align-items: start; padding: 0; background: transparent; border: 0; }
.admin .stat-value { font-size: 1.65rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.admin .stat-label { font-size: var(--text-sm); margin-block-end: 0.5rem; }
.create-password-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-block-end: 2rem; }
.create-password-panel > summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; }
.create-password-panel .create-form { border: 0; padding-inline: 0; margin: 0; padding: 1.5rem; }
.search-field { min-width: 0; max-width: 32rem; }
.search-field label { display: block; margin-block-end: 0.5rem; font-size: var(--text-sm); }
.app-passwords > .search-field { margin-block-end: 1.5rem; }
.password-list .password-item { border-radius: 0; background: transparent; padding: 1.25rem 0; }

.repo-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-block: 1.5rem; }
.repo-toolbar .search-field { flex: 1; }
.repo-toolbar > button { flex-shrink: 0; }
.repo-explorer .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; font-size: var(--text-sm); }
.repo-explorer .breadcrumb-link { padding: 0.4rem; min-width: 0; overflow-wrap: anywhere; }
.collection-directory { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0 1.5rem; }
.collection-family { display: grid; grid-template-columns: minmax(10rem, 0.65fr) minmax(0, 1.5fr); gap: 2rem; padding-block: 1.5rem; }
.collection-family + .collection-family { border-block-start: 1px solid var(--border-color); }
.collection-family h2 { font-size: var(--text-sm); color: var(--text-secondary); padding-block-start: 0.6rem; overflow-wrap: anywhere; }
.collection-family ul, .record-rows { list-style: none; padding: 0; margin: 0; }
.collection-family button { display: flex; gap: 0.85rem; text-align: start; padding: 0.75rem; width: 100%; background: transparent; color: var(--text-primary); }
.collection-family button:hover { background: var(--bg-secondary); }
.collection-family button > span { flex: 1; min-width: 0; }
.collection-family strong, .collection-family code { display: block; }
.collection-family strong { font-size: var(--text-sm); font-weight: 600; }
.collection-family code { font: var(--text-xs)/1.65 var(--font-mono); color: var(--text-secondary); margin-block-start: 0.3rem; overflow-wrap: anywhere; }
.record-workspace { display: grid; grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.3fr); min-height: 28rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.record-browser { min-width: 0; border-inline-end: 1px solid var(--border-color); max-height: 70dvh; overflow-y: auto; }
.record-rows button { display: flex; flex-direction: column; align-items: stretch; text-align: start; gap: 0.5rem; padding: 1.25rem; width: 100%; border-radius: 0; color: var(--text-primary); background: transparent; }
.record-rows button:hover, .record-rows button.active { background: var(--bg-secondary); }
.record-rows strong { font-size: var(--text-sm); font-weight: 600; }
.record-excerpt { font-size: var(--text-xs); line-height: 1.6; color: var(--text-secondary); overflow: hidden; max-height: 3.2em; }
.record-cid { font-size: var(--text-xs); color: var(--text-secondary); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.record-inspector { padding: 1.5rem; min-width: 0; }
.inspector-heading, .did-preview header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1.5rem; }
.inspector-heading h2 { font-size: var(--text-lg); overflow-wrap: anywhere; }
.record-identifiers { margin: 0 0 1.5rem; }
.record-identifiers > div + div { margin-block-start: 1rem; }
.record-identifiers dt { font-size: var(--text-xs); color: var(--text-secondary); }
.record-identifiers dd { display: flex; align-items: start; gap: 0.65rem; margin: 0.3rem 0 0; }
.record-identifiers code { flex: 1; font: var(--text-xs)/1.65 var(--font-mono); overflow-wrap: anywhere; }
.copy-value { flex-shrink: 0; }
.record-json { margin: 0; padding: 1.25rem; border-radius: var(--radius-sm); background: var(--bg-secondary); font: var(--text-xs)/1.7 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60dvh; overflow-y: auto; }
.record-inspector textarea, .repo-create textarea { min-height: 20rem; resize: vertical; font: var(--text-sm)/1.65 var(--font-mono); }
.inspector-empty { min-height: 25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; padding: 2rem; }
.inspector-empty h2 { font-size: var(--text-lg); }
.inspector-empty p { max-width: 35ch; color: var(--text-secondary); font-size: var(--text-sm); }
.editor-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-block-start: 1.25rem; }
.record-back { display: none; }
.load-records { margin: 1rem; }
.repo-create { max-width: 48rem; background: var(--bg-card); padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.did-workspace { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.5rem; align-items: start; }
.did-fields, .did-preview { min-width: 0; }
.did-controls { padding: 0; margin: 0; border: 0; min-width: 0; }
.did-preview { position: sticky; top: 1.5rem; padding: 1.25rem; border-radius: var(--radius-md); background: var(--bg-secondary); }
.did-preview h2 { font-size: var(--text-base); }
.did-preview .preview-json { margin: 0; padding: 0; background: transparent; max-height: 65dvh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-xs)/1.7 var(--font-mono); }
.technical-help { padding: 0 0 1.5rem; }
.technical-help summary { cursor: pointer; font-size: var(--text-sm); }
.technical-help p { padding-block-start: 0.75rem; color: var(--text-secondary); line-height: 1.7; font-size: var(--text-sm); }
.did-editor .add-form { display: flex; flex-direction: column; align-items: stretch; }
.did-editor .add-form > button { align-self: flex-start; }

/* Migration is a sequence of decisions, with transfer state kept separate from step count. */
.migration-paths { margin-block: 2rem; }
.migration-paths article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding-block: 2rem; }
.migration-paths article + article { border-block-start: 1px solid var(--border-color); }
.migration-paths h2 { font-size: 1.15rem; margin-block-end: 0.6rem; }
.migration-paths p { color: var(--text-secondary); max-width: 50ch; font-size: var(--text-sm); line-height: 1.7; }
.migration-paths ul { padding-inline-start: 1.2rem; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.8; margin-block-end: 0; }
.migration-outline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 0; list-style-position: inside; margin: 2rem 0; }
.migration-outline li { font-size: var(--text-sm); }
.migration-outline p { color: var(--text-secondary); margin-block-start: 0.5rem; line-height: 1.7; }
.migration-page .info-section { padding: 1.5rem; border-radius: var(--radius-md); background: var(--bg-secondary); }
.migration-page .info-section > h3 { margin-block: 1.5rem 0.6rem; }
.migration-page .info-section > h3:first-child { margin-block-start: 0; }
.flow-progress { margin-block-end: 2rem; padding-block-end: 1.25rem; }
.flow-progress-heading { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--text-sm); margin-block-end: 0.75rem; }
.flow-progress-heading > span { color: var(--text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
progress { display: block; width: 100%; height: 0.35rem; appearance: none; border: 0; border-radius: 1rem; overflow: hidden; background: var(--bg-tertiary); color: var(--accent); }
progress::-webkit-progress-bar { background: var(--bg-tertiary); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }
.flow-step-list { margin-block-start: 0.8rem; }
.flow-step-list summary { font-size: var(--text-xs); color: var(--text-secondary); cursor: pointer; }
.flow-step-list ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; list-style: none; padding: 1rem 0 0; margin: 0; }
.flow-step-list li { display: flex; gap: 0.6rem; align-items: start; font-size: var(--text-xs); color: var(--text-secondary); }
.flow-step-list li > span { display: grid; place-items: center; min-width: 1.5rem; height: 1.5rem; background: var(--bg-secondary); border-radius: 0.4rem; }
.flow-step-list li.active { font-weight: 650; color: var(--text-primary); }
.flow-step-list li.active > span { background: var(--accent); color: var(--accent-contrast); }
.flow-step-list li.completed > span { background: var(--success-bg); color: var(--success-text); }
.migration-wizard .step-content { padding: 0; background: transparent; }
.migration-wizard .step-content > h2 { margin-block-end: 0.75rem; font-size: 1.4rem; }
.migration-wizard .step-content > p { color: var(--text-secondary); line-height: 1.7; margin-block-end: 1.5rem; }
.migration-review { margin-block: 2rem; }
.migration-review .review-row { display: grid; grid-template-columns: minmax(8rem, 0.65fr) minmax(0, 1fr); gap: 1rem; padding-block: 1rem; }
.migration-review .review-row + .review-row { border-block-start: 1px solid var(--border-color); }
.migration-review dt { color: var(--text-secondary); font-size: var(--text-sm); }
.migration-review dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.review-note, .recovery-note { padding: 1rem; background: var(--bg-secondary); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.7; }
.transfer-steps { list-style: none; margin: 1.75rem 0; padding: 0; }
.transfer-steps li { display: flex; align-items: center; gap: 1rem; padding-block: 0.85rem; color: var(--text-secondary); }
.transfer-steps li.active { color: var(--text-primary); font-weight: 600; }
.transfer-marker { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; flex-shrink: 0; background: var(--bg-secondary); border-radius: 50%; font-size: var(--text-xs); }
.transfer-steps li.completed .transfer-marker { background: var(--success-bg); color: var(--success-text); }
.transfer-count { text-align: end; margin-block-start: 0.5rem; font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.resume-panel h1 { margin-block-end: 1rem; }
.resume-panel .resume-details { margin-block: 1.5rem; }
@media (max-width: 1200px) {
  .account-settings, .security-methods, .did-workspace { grid-template-columns: minmax(0, 1fr); }
  .did-preview { position: static; }
  .record-workspace { grid-template-columns: minmax(12rem, 0.6fr) minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .settings-row { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}
@media (max-width: 650px) {
  .page-intro-row, .repo-toolbar { flex-direction: column; align-items: stretch; }
  .data-facts, .collection-family, .migration-paths article, .migration-outline { grid-template-columns: minmax(0, 1fr); }
  .collection-family { gap: 0.5rem; }
  .collection-directory { padding-inline: 1rem; }
  .record-workspace { display: block; }
  .record-browser { max-height: none; border-inline-end: 0; }
  .record-workspace:not(.detail-open) .record-inspector, .record-workspace.detail-open .record-browser { display: none; }
  .record-inspector { padding: 1.25rem; }
  .record-back { display: inline-flex; margin-block-end: 1rem; }
  .record-identifiers dd { flex-wrap: wrap; }
  .record-identifiers code { flex-basis: 100%; }
  .migration-paths article { gap: 1rem; }
  .migration-paths article button { justify-self: start; }
  .migration-review .review-row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .admin .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Polish layer: one row rhythm, flush insets, quiet states, themed native parts. */
::selection { background: var(--accent-muted-strong, var(--bg-tertiary)); color: var(--text-primary); }
select {
  background-color: var(--bg-input);
  background-image: var(--select-caret);
  background-size: 1rem;
  background-position: right 0.85rem center;
  padding-inline-end: 2.5rem;
}
select option { background: var(--bg-elevated); color: var(--text-primary); }
input, select, textarea { background-color: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); }
input:hover:not(:disabled, :focus), select:hover:not(:disabled, :focus), textarea:hover:not(:disabled, :focus) { border-color: var(--border-dark); }

/* Statuses read as labelled state, not floating chips. */
.status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; margin-block-end: 1rem; background: transparent !important; font-size: var(--text-sm); font-weight: 550; }
.status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status.info { color: var(--text-secondary); }

/* Explainers inside a panel are a divided note, never a second card. */
section :is(.info-box, .warning-box) { background: transparent; border: 0; border-radius: 0; padding: 0; margin-block-start: 1.25rem; }
section .warning-box { color: var(--warning-text); }
section .info-box strong { font-size: var(--text-sm); margin-block-end: 0.4rem; color: var(--text-primary); }
section .info-box p { font-size: var(--text-sm); line-height: 1.7; max-width: 65ch; }
.toggle-row { gap: 1.5rem; padding-block: 0.75rem; margin-block: 0.75rem 0; }
.toggle-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.toggle-label { font-weight: 600; font-size: var(--text-sm); }
.toggle-description { color: var(--text-secondary); font-size: var(--text-sm); }

/* Rows sit flush with their heading; actions align to the row's first line. */
section .passkey-list, section .sso-list { list-style: none; margin: 0; padding: 0; }
section :is(.passkey-item, .sso-item) { background: transparent; padding: 0.9rem 0; gap: 1rem; }
.passkey-name, .sso-provider, .device-name { font-size: var(--text-sm); font-weight: 600; }
.passkey-meta, .sso-meta, .sso-id { font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sso-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.passkey-actions { gap: 0.25rem; }
.add-passkey { border-top: 0; padding-top: 0; margin-top: 1.25rem; }
.content-body section .device-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head action" "meta action"; align-items: center; gap: 0.3rem 1rem; padding: 0.9rem 0; }
.content-body section .device-card .device-header { grid-area: head; }
.content-body section .device-card .device-details { grid-area: meta; flex-wrap: wrap; gap: 0.25rem 1rem; flex-shrink: 1; }
.content-body section .device-card > button.danger-outline { grid-area: action; }
.device-details .detail { white-space: normal; }
.sso-providers { margin-block-start: 1.5rem; }
.sso-providers h4 { font-size: var(--text-sm); font-weight: 600; margin-block-end: 0.75rem; }
.provider-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.provider-btn { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); gap: 0.6rem; font-size: var(--text-sm); }
.provider-btn:hover:not(:disabled) { background: var(--bg-secondary); }
.provider-btn:disabled { opacity: 1; background: var(--bg-card); color: var(--text-secondary); }
.linked-badge { font-size: var(--text-xs); color: var(--success-text); }
.security > .text-action { margin-block-start: 1rem; }

/* Panels share one elevation: border only, flat in both themes. */
section, .collection-directory, .record-workspace, .repo-create, .create-password-panel { box-shadow: none; }
section h3 { margin-block-end: 0.5rem; }
section h3 + :is(.section-description, .current, p) { margin-block-start: 0; }
section .section-description { color: var(--text-secondary); font-size: var(--text-sm); margin-block-end: 1.25rem; }
.dropdown-menu { background: var(--bg-elevated); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: 0.35rem; }
.dropdown-item { border-radius: var(--radius-sm); gap: 0.65rem; justify-content: flex-start; }
.modal { background: var(--bg-elevated); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); }
@media (max-width: 600px) {
  .content-body section .device-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "meta" "action"; }
  .content-body section .device-card > button.danger-outline { justify-self: start; }
}
section .toggle-row { padding-inline: 0; background: transparent; }
/* One outlined list per permission group: the label sits above, rows share the box and are
   split by a single hairline, instead of a titled rule stacked over a box per row. */
.consent-container .scope-group { margin-block-end: 1.25rem; }
.consent-container .category-title { border: 0; padding: 0; margin: 0 0 0.5rem; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-transform: capitalize; }
.consent-container .scope-group > .scope-item { margin: 0; border: 1px solid var(--border-color); border-radius: 0; background: transparent; }
.consent-container .scope-group > .category-title + .scope-item,
.consent-container .scope-group > .unavailable-subhead + .scope-item { border-start-start-radius: var(--radius-sm); border-start-end-radius: var(--radius-sm); }
.consent-container .scope-group > .scope-item:last-child,
.consent-container .scope-group > .scope-item:has(+ :not(.scope-item)) { border-end-start-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.consent-container .scope-group > .scope-item:has(+ .scope-item) { border-block-end: 0; }
.consent-container .scope-group > .scope-item + .scope-item { border-block-start: 1px solid var(--border-light); }
.consent-container .scope-item:hover { background: var(--bg-hover); }
.consent-container .scope-item.required:hover, .consent-container .scope-item.restricted:hover { background: transparent; }
.consent-container .required-badge, .consent-container .scope-required { text-transform: none; letter-spacing: normal; background: transparent; color: var(--text-secondary); padding: 0; font-weight: 550; }
@media (max-width: 600px) {
  section :is(.actions, .passkey-actions, .edit-actions, .button-row, .form-actions) > button { flex: 0 1 auto; white-space: nowrap; }
  section .passkey-item { flex-wrap: wrap; }
}
section :is(.totp-actions, .password-actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
section :is(.totp-actions, .password-actions) > button { flex: 0 0 auto; white-space: nowrap; }

/* One divider between neighbouring rows, never around a list or under a heading. */
:is(.task-row, .session-card, .app-choice-card, .device-card, .item-card, .code-item, .password-item, .passkey-item, .sso-item, .record-rows > li) + :is(.task-row, .session-card, .app-choice-card, .device-card, .item-card, .code-item, .password-item, .passkey-item, .sso-item, .record-rows > li) { border-block-start: 1px solid var(--border-light); }
.record-rows > li + li > button { border-block-start: 0; }
.toggle-row + .toggle-row { border-block-start: 1px solid var(--border-light); }

/* Corners nest: controls 8px inside 12px panels; small labels are pills. */
:not(pre) > code { border-radius: 0.375rem; padding: 0.1em 0.4em; background: var(--bg-secondary); }
.badge { border-radius: 999px; padding: 0.15rem 0.6rem; }
.account-warning { margin: 0.5rem 0 0; }
.admin .stats-section .section-header-row { justify-content: flex-end; margin: -0.5rem -0.5rem 0.5rem 0; }
@media (max-width: 900px) and (min-width: 601px) { .admin .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sessions-list { gap: 0; }
@media (max-width: 500px) {
  .session-card { align-items: flex-start; }
  .session-card > button, .session-card .session-actions > button { align-self: flex-start; width: auto; }
}

/* Sign-in providers fill the row like every other control in the card. */
.sso-buttons { justify-content: stretch; }
.sso-buttons > .sso-btn { flex: 1 1 8rem; justify-content: center; min-height: var(--button-height); border-radius: var(--radius-sm); }