A downstream fork of Tranquil PDS for use in margin.cafe margin.cafe
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465/* 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); }