/*
 * Profile Control room — GENERATED port of the owner-selected Profile 05
 * package stylesheet (profile-five-directions-2026-08-01/styles.css, build
 * 20260801-profile-identity-delete-3), Fable 2026-08-01. Declarations are
 * byte-identical to the package; selectors are mechanically scoped under
 * #profile-workspace. Review chrome and the four rejected directions
 * (Passport/Workbench/Chronicle/Circles) are omitted. Do NOT hand-edit the
 * generated section — regenerate from the package. Host adaptations live at
 * the bottom.
 */

#profile-workspace *,
#profile-workspace *::before,
#profile-workspace *::after { box-sizing: border-box; }
#profile-workspace {
  --ui-bg: var(--bg);
  --ui-paper: var(--paper);
  --ui-card: var(--card, var(--paper));
  --ui-ink: var(--ink);
  --ui-soft: var(--ink-soft);
  --ui-faint: var(--ink-faint);
  --ui-accent: var(--accent);
  --ui-accent-fill: var(--accent-soft);
  --ui-accent-ink: var(--accent-ink);
  --ui-line: var(--line);
  --ui-line-soft: var(--line-soft);
  --ui-wash: color-mix(in srgb, var(--accent) 7%, var(--paper));
  --ui-wash-strong: color-mix(in srgb, var(--accent) 13%, var(--paper));
  --ui-dark: color-mix(in srgb, var(--ink) 92%, var(--accent));
  --ui-dark-soft: color-mix(in srgb, var(--ink) 82%, var(--accent));
  --ui-radius-xl: calc(var(--radius) + 12px);
  --ui-radius-lg: var(--radius);
  --ui-radius-md: var(--radius-sm);
  --ui-radius-sm: max(8px, calc(var(--radius-sm) - 4px));
  --ui-sans: var(--sans, "Archivo", system-ui, sans-serif);
  --ui-display: "Bricolage Grotesque", var(--sans, system-ui, sans-serif);
  --status-online: var(--green, #177E52);
  --status-away: var(--accent-soft);
  --status-offline: color-mix(in srgb, var(--ink-faint) 70%, var(--paper));
  color-scheme: light;
}
#profile-workspace button,
#profile-workspace input,
#profile-workspace textarea,
#profile-workspace select { min-height: 44px; font: inherit; }
#profile-workspace button { border: 0; color: inherit; }
#profile-workspace button:not(:disabled),
#profile-workspace a { cursor: pointer; }
#profile-workspace input,
#profile-workspace textarea,
#profile-workspace select { accent-color: var(--ui-accent); }
#profile-workspace input::placeholder,
#profile-workspace textarea::placeholder { color: var(--ui-faint); opacity: 1; }
#profile-workspace h1,
#profile-workspace h2,
#profile-workspace h3,
#profile-workspace p,
#profile-workspace blockquote,
#profile-workspace dl,
#profile-workspace dd { margin: 0; }
#profile-workspace h1,
#profile-workspace h2,
#profile-workspace h3 { text-wrap: balance; }
#profile-workspace p { text-wrap: pretty; }
#profile-workspace svg { width: 1.08rem; height: 1.08rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
#profile-workspace :focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
#profile-workspace .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#profile-workspace .direction-shell { display: grid; gap: 1rem; }
#profile-workspace .eyebrow { color: var(--ui-accent); font-size: 0.6875rem; font-weight: 850; letter-spacing: .12em; }
#profile-workspace .primary-button,
#profile-workspace .quiet-button,
#profile-workspace .danger-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .8rem; border-radius: var(--ui-radius-md); font-size: .7rem; font-weight: 800; }
#profile-workspace .primary-button { background: var(--ui-dark); color: var(--ui-paper); }
#profile-workspace .primary-button:hover { background: var(--ui-dark-soft); }
#profile-workspace .quiet-button { border: 1px solid var(--ui-line); background: var(--ui-paper); color: var(--ui-ink); }
#profile-workspace .quiet-button:hover { background: var(--ui-wash); }
#profile-workspace .danger-button { background: var(--red); color: var(--ui-paper); }
#profile-workspace .danger-text { color: var(--red); }
#profile-workspace .icon-button { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-md); background: var(--ui-paper); }
#profile-workspace .icon-button:hover { background: var(--ui-wash); }
#profile-workspace .icon-button.inverse { border-color: color-mix(in srgb, var(--ui-paper) 18%, transparent); background: color-mix(in srgb, var(--ui-paper) 8%, transparent); color: var(--ui-paper); }
#profile-workspace .profile-actions { display: flex; justify-content: flex-end; gap: .4rem; }
#profile-workspace .avatar { position: relative; width: 48px; height: 48px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 3px solid color-mix(in srgb, var(--ui-paper) 88%, transparent); border-radius: 50%; background: var(--avatar, var(--ui-accent)); color: var(--ui-paper); font: 800 .72rem/1 var(--ui-display); box-shadow: 0 0 0 1px var(--ui-line); }
#profile-workspace .avatar > img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
#profile-workspace .avatar-lg { width: 70px; height: 70px; font-size: 1.05rem; }
#profile-workspace .avatar-xl { width: 104px; height: 104px; font-size: 1.55rem; }
#profile-workspace .tone-umber { --avatar: color-mix(in srgb, var(--ui-dark) 88%, var(--ui-accent)); }
#profile-workspace .tone-sage { --avatar: color-mix(in srgb, var(--green) 70%, var(--ui-dark)); }
#profile-workspace .tone-plum { --avatar: color-mix(in srgb, var(--violet) 58%, var(--ui-dark)); }
#profile-workspace .tone-slate { --avatar: color-mix(in srgb, var(--ui-faint) 72%, var(--ui-dark)); }
#profile-workspace .person-avatar { --avatar: color-mix(in srgb, var(--ui-accent) 35%, var(--ui-dark)); }
#profile-workspace .presence { width: 9px; height: 9px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--status-offline); }
#profile-workspace .avatar > .presence { position: absolute; right: 0; bottom: 1px; border: 2px solid var(--ui-paper); }
#profile-workspace .presence.online { background: var(--status-online); }
#profile-workspace .presence.away { background: var(--status-away); }
#profile-workspace .presence.offline { background: var(--status-offline); }
#profile-workspace .availability { display: inline-flex; align-items: center; gap: .35rem; color: var(--ui-soft); font-size: 0.6875rem; font-weight: 750; }
#profile-workspace .identity-copy { min-width: 0; display: grid; align-content: center; gap: .18rem; }
#profile-workspace .identity-copy h2 { font: 750 clamp(1.35rem, 2vw, 1.9rem)/1 var(--ui-display); letter-spacing: -.04em; }
#profile-workspace .identity-copy p { color: var(--ui-faint); font-size: .7rem; }
#profile-workspace .identity-copy > strong { color: var(--ui-soft); font-size: .72rem; }
#profile-workspace .topic-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
#profile-workspace .topic-chips span { padding: .32rem .5rem; border-radius: 999px; background: var(--ui-wash); color: var(--ui-accent); font-size: 0.6875rem; font-weight: 800; }
#profile-workspace .metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-paper); overflow: hidden; }
#profile-workspace .metric-strip article { min-width: 0; display: grid; gap: .12rem; padding: .75rem; border-right: 1px solid var(--ui-line); }
#profile-workspace .metric-strip article:last-child { border-right: 0; }
#profile-workspace .metric-strip strong { font: 800 1.2rem/1 var(--ui-display); }
#profile-workspace .metric-strip span { color: var(--ui-faint); font-size: 0.6875rem; }
#profile-workspace .avatar-button { position: relative; min-height: 104px; padding: 0; border-radius: 50%; background: transparent; }
#profile-workspace .avatar-button > svg { position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--ui-accent); color: var(--ui-accent-ink); }
#profile-workspace .contribution-list { display: grid; gap: .4rem; }
#profile-workspace .contribution-row { width: 100%; min-height: 66px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 24px; align-items: center; gap: .65rem; padding: .55rem .65rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-md); background: var(--ui-paper); text-align: left; }
#profile-workspace .contribution-row:hover { background: var(--ui-wash); }
#profile-workspace .contribution-row > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--ui-radius-sm); background: var(--ui-wash); color: var(--ui-accent); }
#profile-workspace .contribution-row > div { min-width: 0; display: grid; gap: .14rem; }
#profile-workspace .contribution-row strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
#profile-workspace .contribution-row small,
#profile-workspace .contribution-row time { color: var(--ui-faint); font-size: 0.6875rem; }
#profile-workspace .control-identity { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-xl); background: var(--ui-paper); }
#profile-workspace .avatar-stack { display: flex; padding-left: .3rem; }
#profile-workspace .avatar-stack .avatar { margin-left: -.35rem; }
#profile-workspace .avatar-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
#profile-workspace .avatar-options > button { min-height: 130px; display: grid; place-content: center; justify-items: center; gap: .55rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-paper); text-transform: capitalize; }
#profile-workspace .avatar-options > button[aria-pressed="true"] { border-color: var(--ui-dark); box-shadow: inset 0 0 0 2px var(--ui-dark); }
#profile-workspace .avatar-options strong { font-size: 0.6875rem; }
#profile-workspace .empty-state { min-height: 220px; display: grid; place-content: center; justify-items: center; gap: .4rem; color: var(--ui-faint); text-align: center; }
#profile-workspace .empty-state svg { width: 1.7rem; height: 1.7rem; color: var(--ui-accent); }
#profile-workspace .empty-state strong { color: var(--ui-ink); font-size: .75rem; }
#profile-workspace .empty-state span { font-size: 0.6875rem; }
#profile-workspace .request-list { display: grid; gap: .4rem; }
#profile-workspace .request-list article { min-height: 68px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; padding: .55rem .65rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-md); }
#profile-workspace .request-list article > div { min-width: 0; display: grid; gap: .1rem; }
#profile-workspace .request-list strong { font-size: .69rem; }
#profile-workspace .request-list span { overflow: hidden; color: var(--ui-faint); font-size: 0.6875rem; text-overflow: ellipsis; white-space: nowrap; }
#profile-workspace .control-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1rem; align-items: start; }
#profile-workspace .control-nav { position: sticky; top: 88px; overflow: hidden; border-radius: var(--ui-radius-xl); background: var(--ui-dark); color: var(--ui-paper); }
#profile-workspace .control-nav > div { display: grid; gap: .25rem; padding: 1rem; border-bottom: 1px solid color-mix(in srgb, var(--ui-paper) 12%, transparent); }
#profile-workspace .control-nav > div > span { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: .35rem; border-radius: var(--ui-radius-md); background: var(--ui-accent); color: var(--ui-accent-ink); }
#profile-workspace .control-nav > div strong { font: 750 1.05rem/1 var(--ui-display); }
#profile-workspace .control-nav > div small { color: color-mix(in srgb, var(--ui-paper) 58%, transparent); font-size: 0.6875rem; line-height: 1.5; }
#profile-workspace .control-nav nav { display: grid; gap: .18rem; padding: .55rem; }
#profile-workspace .control-nav nav button { min-height: 50px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; align-items: center; gap: .45rem; padding: .45rem .55rem; border-radius: var(--ui-radius-md); background: transparent; color: color-mix(in srgb, var(--ui-paper) 66%, transparent); font-size: 0.6875rem; font-weight: 750; text-align: left; }
#profile-workspace .control-nav nav button[aria-current="page"] { background: var(--ui-paper); color: var(--ui-ink); }
#profile-workspace .control-card { min-height: 440px; display: grid; align-content: start; padding: 1rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-xl); background: var(--ui-paper); }
#profile-workspace .identity-bio { max-width: 52rem; color: var(--ui-soft); font-size: 0.6875rem; line-height: 1.6; }
#profile-workspace .inline-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
#profile-workspace .settings-count { color: var(--ui-accent); font-size: 0.6875rem; }
#profile-workspace .control-card > header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .8rem; border-bottom: 1px solid var(--ui-line); }
#profile-workspace .control-card > header > div { display: grid; gap: .18rem; }
#profile-workspace .control-card h2 { font: 750 1.4rem/1 var(--ui-display); }
#profile-workspace .setting-row,
#profile-workspace .action-row { min-height: 78px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .65rem .2rem; border-bottom: 1px solid var(--ui-line-soft); }
#profile-workspace .setting-row > div,
#profile-workspace .action-row > div { display: grid; gap: .14rem; }
#profile-workspace .setting-row strong,
#profile-workspace .action-row strong { font-size: .7rem; }
#profile-workspace .setting-row span,
#profile-workspace .action-row small { max-width: 44rem; color: var(--ui-faint); font-size: 0.6875rem; line-height: 1.45; }
#profile-workspace .switch { width: 50px; height: 44px; min-height: 44px; position: relative; border-radius: 999px; background: transparent; }
#profile-workspace .switch::before { position: absolute; top: 7px; left: 0; width: 50px; height: 30px; border-radius: 999px; background: var(--ui-wash-strong); content: ""; }
#profile-workspace .switch i { position: absolute; top: 11px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--ui-paper); box-shadow: var(--shadow-sm); transition: transform .16s ease; }
#profile-workspace .switch[aria-checked="true"]::before { background: var(--ui-dark); }
#profile-workspace .switch[aria-checked="true"] i { transform: translateX(20px); }
#profile-workspace .privacy-note { display: flex; align-items: flex-start; gap: .5rem; margin-top: .8rem; padding: .75rem; border-radius: var(--ui-radius-md); background: var(--ui-wash); color: var(--ui-soft); font-size: 0.6875rem; line-height: 1.55; }
#profile-workspace .privacy-note svg { color: var(--ui-accent); }
#profile-workspace .identity-photo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid var(--ui-line-soft); }
#profile-workspace .identity-photo > div { display: grid; justify-items: start; gap: .2rem; }
#profile-workspace .identity-photo strong { font-size: .72rem; }
#profile-workspace .identity-photo span { color: var(--ui-faint); font-size: 0.6875rem; line-height: 1.45; }
#profile-workspace .identity-photo .quiet-button { margin-top: .3rem; }
#profile-workspace .identity-form { padding: 1rem 0 0; }
#profile-workspace .identity-form .form-actions { justify-content: flex-end; }
#profile-workspace .action-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
#profile-workspace .action-row > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--ui-radius-md); background: var(--ui-wash); color: var(--ui-accent); }
#profile-workspace .device-list { display: grid; }
#profile-workspace .device-list article { min-height: 76px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .65rem; border-bottom: 1px solid var(--ui-line-soft); }
#profile-workspace .device-list article > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ui-wash); color: var(--ui-accent); }
#profile-workspace .device-list article > div { display: grid; gap: .14rem; }
#profile-workspace .device-list strong { font-size: .69rem; }
#profile-workspace .device-list small { color: var(--ui-faint); font-size: 0.6875rem; }
#profile-workspace .device-list b { color: var(--status-online); font-size: 0.6875rem; }
#profile-workspace .danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--red) 28%, var(--ui-line)); border-radius: var(--ui-radius-lg); }
#profile-workspace .danger-zone > div { display: grid; gap: .15rem; }
#profile-workspace .danger-zone strong { color: var(--red); font-size: .7rem; }
#profile-workspace .danger-zone span { color: var(--ui-faint); font-size: 0.6875rem; }
#profile-workspace .danger-zone button { padding: .5rem .75rem; border-radius: var(--ui-radius-md); background: color-mix(in srgb, var(--red) 10%, var(--ui-paper)); color: var(--red); font-size: 0.6875rem; font-weight: 800; }
#profile-workspace .danger-zone.permanent { background: color-mix(in srgb, var(--red) 5%, var(--ui-paper)); }
#profile-workspace .danger-zone.permanent button { background: var(--red); color: var(--ui-paper); }
#profile-workspace .delete-warning { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: .65rem; padding: .75rem; border-radius: var(--ui-radius-lg); background: color-mix(in srgb, var(--red) 7%, var(--ui-wash)); }
#profile-workspace .delete-warning > svg { width: 44px; height: 44px; padding: .7rem; border-radius: var(--ui-radius-md); background: var(--red); color: var(--ui-paper); }
#profile-workspace .delete-warning > div { display: grid; gap: .2rem; }
#profile-workspace .delete-warning strong { color: var(--red); font-size: .72rem; }
#profile-workspace .delete-warning p { color: var(--ui-soft); font-size: 0.6875rem; line-height: 1.5; }
#profile-workspace .account-deleted > div { display: grid; justify-items: start; gap: .45rem; padding: 1.25rem 0; }
#profile-workspace .account-deleted > div > svg { width: 52px; height: 52px; padding: .8rem; border-radius: var(--ui-radius-lg); background: var(--ui-dark); color: var(--ui-accent); }
#profile-workspace .account-deleted > div strong { font: 750 1rem/1 var(--ui-display); }
#profile-workspace .account-deleted > div p { max-width: 44rem; color: var(--ui-soft); font-size: 0.6875rem; line-height: 1.6; }
#profile-workspace .modal-backdrop { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb, var(--ui-dark) 58%, transparent); backdrop-filter: blur(8px); }
#profile-workspace .modal { width: min(30rem, 100%); max-height: min(46rem, calc(100dvh - 2rem)); overflow-y: auto; scrollbar-width: none; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-xl); background: var(--ui-paper); box-shadow: var(--shadow-hero); }
#profile-workspace .modal::-webkit-scrollbar { display: none; }
#profile-workspace .modal.wide { width: min(48rem, 100%); }
#profile-workspace .modal > header { position: sticky; z-index: 2; top: 0; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--ui-line); border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0; background: color-mix(in srgb, var(--ui-paper) 96%, transparent); backdrop-filter: blur(12px); }
#profile-workspace .modal > header > div { display: grid; gap: .12rem; }
#profile-workspace .modal > header span { color: var(--ui-accent); font-size: 0.6875rem; font-weight: 850; letter-spacing: .1em; }
#profile-workspace .modal > header h2 { font: 750 1.25rem/1 var(--ui-display); }
#profile-workspace .profile-form,
#profile-workspace .avatar-dialog,
#profile-workspace .public-preview,
#profile-workspace .share-dialog,
#profile-workspace .detail-dialog,
#profile-workspace .confirm-dialog { display: grid; gap: .8rem; padding: 1rem; }
#profile-workspace .profile-form label,
#profile-workspace .share-dialog label { display: grid; gap: .3rem; color: var(--ui-soft); font-size: 0.6875rem; font-weight: 800; }
#profile-workspace .profile-form input,
#profile-workspace .profile-form textarea,
#profile-workspace .profile-form select,
#profile-workspace .share-dialog input { width: 100%; padding: .55rem .65rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-md); outline: 0; appearance: none; background: var(--ui-wash); color: var(--ui-ink); font-size: .7rem; }
#profile-workspace .profile-form textarea { min-height: 110px; resize: none; }
#profile-workspace .profile-form input:focus,
#profile-workspace .profile-form textarea:focus,
#profile-workspace .profile-form select:focus,
#profile-workspace .share-dialog input:focus { border-color: var(--ui-accent); background: var(--ui-paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 16%, transparent); }
#profile-workspace .profile-form label > small { color: var(--ui-faint); font-size: 0.6875rem; text-align: right; }
#profile-workspace .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
#profile-workspace .username-input { min-height: 44px; display: flex; align-items: center; gap: .2rem; padding-left: .65rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-md); background: var(--ui-wash); }
/* Owner order 2026-08-07: text boxes focus with a border tint only — no halo ring. */
#profile-workspace .username-input:focus-within { border-color: var(--ui-accent); background: var(--ui-paper); }
#profile-workspace .username-input b { color: var(--ui-faint); }
#profile-workspace .username-input input { min-height: 42px; padding-left: 0; border: 0; background: transparent; box-shadow: none; }
#profile-workspace .username-input.is-locked { border-style: dashed; background: color-mix(in srgb, var(--ui-faint) 7%, var(--ui-paper)); }

/* R3 iPad density: account controls scroll inside the route, above the dock. */
@media (min-width: 760px) and (max-height: 820px) {
  .profile-app-frame {
    height: 100dvh;
    padding-bottom: 4.75rem;
    overflow: hidden;
  }
  .profile-app-frame #profile-workspace {
    height: calc(100dvh - 9.75rem);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
#profile-workspace .username-input.is-locked input { color: var(--ui-soft); cursor: not-allowed; }
#profile-workspace .form-note { padding: .65rem; border-radius: var(--ui-radius-md); background: var(--ui-wash); color: var(--ui-soft); font-size: 0.6875rem; }
#profile-workspace .form-actions { display: flex; justify-content: flex-end; gap: .45rem; }
#profile-workspace .upload-placeholder { min-height: 74px; display: flex; align-items: center; justify-content: center; gap: .55rem; border: 1px dashed var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-wash); color: var(--ui-accent); cursor: pointer; }
#profile-workspace .upload-placeholder > span { display: grid; gap: .1rem; color: var(--ui-ink); text-align: left; }
#profile-workspace .upload-placeholder strong { font-size: 0.6875rem; }
#profile-workspace .upload-placeholder small { color: var(--ui-faint); font-size: 0.6875rem; }
#profile-workspace .upload-placeholder input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; pointer-events: none; }
#profile-workspace .preview-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .8rem; border-radius: var(--ui-radius-lg); background: var(--ui-dark); color: var(--ui-paper); }
#profile-workspace .preview-hero .identity-copy h2 { color: var(--ui-paper); }
#profile-workspace .preview-hero .identity-copy p,
#profile-workspace .preview-hero .identity-copy strong,
#profile-workspace .preview-hero .availability { color: color-mix(in srgb, var(--ui-paper) 64%, transparent); }
#profile-workspace .preview-hero .primary-button { background: var(--ui-paper); color: var(--ui-ink); }
#profile-workspace .preview-mode { justify-self: end; padding: .35rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--ui-paper) 8%, transparent); color: var(--ui-accent); font-size: 0.6875rem; font-weight: 850; }
#profile-workspace .public-preview > p { color: var(--ui-soft); font-size: .72rem; line-height: 1.6; }
#profile-workspace .preview-hidden { display: flex; align-items: center; gap: .45rem; padding: .7rem; border-radius: var(--ui-radius-md); background: var(--ui-wash); color: var(--ui-faint); font-size: 0.6875rem; }
#profile-workspace .preview-people { display: flex; align-items: center; gap: .65rem; padding: .65rem; border-radius: var(--ui-radius-md); background: var(--ui-wash); color: var(--ui-soft); font-size: 0.6875rem; }
#profile-workspace .share-dialog label > div { display: flex; gap: .4rem; }
#profile-workspace .share-dialog p { color: var(--ui-faint); font-size: 0.6875rem; }
#profile-workspace .detail-dialog { justify-items: start; }
#profile-workspace .detail-dialog > span { width: 60px; height: 60px; display: grid; place-items: center; border-radius: var(--ui-radius-lg); background: var(--ui-dark); color: var(--ui-accent); }
#profile-workspace .detail-dialog > span svg { width: 1.5rem; height: 1.5rem; }
#profile-workspace .detail-dialog p,
#profile-workspace .confirm-dialog p { color: var(--ui-soft); font-size: .7rem; line-height: 1.6; }
#profile-workspace .two-step-dialog { display: grid; gap: .65rem; padding: 1rem; }
#profile-workspace .security-status { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: .65rem; padding: .75rem; border-radius: var(--ui-radius-lg); background: var(--ui-wash); }
#profile-workspace .security-status > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--ui-radius-md); background: var(--ui-dark); color: var(--ui-accent); }
#profile-workspace .security-status > div { display: grid; gap: .15rem; }
#profile-workspace .security-status strong { font-size: .7rem; }
#profile-workspace .security-status small,
#profile-workspace .backup-codes small { color: var(--ui-faint); font-size: 0.6875rem; }
#profile-workspace .backup-codes { display: grid; gap: .45rem; padding: .75rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); }
#profile-workspace .backup-codes > strong { font-size: 0.6875rem; }
#profile-workspace .backup-codes p { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
#profile-workspace .backup-codes code { padding: .4rem .5rem; border-radius: var(--ui-radius-sm); background: var(--ui-wash); color: var(--ui-ink); font-size: 0.6875rem; text-align: center; }
#profile-workspace .form-error { padding: .6rem; border-radius: var(--ui-radius-md); background: color-mix(in srgb, var(--red) 9%, var(--ui-paper)); color: var(--red); font-size: 0.6875rem; font-weight: 750; }
#profile-workspace .form-error[hidden] { display: none; }
#profile-workspace .toast { position: fixed; z-index: 160; right: 1rem; bottom: 1rem; max-width: min(25rem, calc(100% - 2rem)); min-height: 48px; display: flex; align-items: center; gap: .5rem; padding: .65rem .85rem; border-radius: var(--ui-radius-md); background: var(--ui-dark); color: var(--ui-paper); box-shadow: var(--shadow-lg); font-size: 0.6875rem; font-weight: 750; }
#profile-workspace .toast svg { color: var(--ui-accent); }
#profile-workspace .metric-strip span,
#profile-workspace .control-nav > div small { font-size: 0.6875rem; }
@media (max-width: 850px) {
#profile-workspace .control-layout { grid-template-columns: 1fr; }
#profile-workspace .control-nav { position: static; }
#profile-workspace .control-nav > div { display: none; }
#profile-workspace .control-nav nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#profile-workspace .control-nav nav button { grid-template-columns: 1fr; justify-items: center; }
#profile-workspace .control-nav nav button span,
#profile-workspace .control-nav nav button svg:last-child { display: none; }
}

@media (max-width: 620px) {
#profile-workspace .direction-shell { gap: .65rem; }
#profile-workspace .profile-actions { width: 100%; }
#profile-workspace .profile-actions button { flex: 1; }
#profile-workspace .profile-actions button span { display: none; }
#profile-workspace .form-grid { grid-template-columns: 1fr; }
#profile-workspace .metric-strip { grid-template-columns: repeat(2, 1fr); }
#profile-workspace .metric-strip article:nth-child(2) { border-right: 0; }
#profile-workspace .metric-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--ui-line); }
#profile-workspace .contribution-row { grid-template-columns: 40px minmax(0, 1fr) 20px; }
#profile-workspace .contribution-row time { display: none; }
#profile-workspace .control-identity { grid-template-columns: auto minmax(0, 1fr); padding: .65rem; border-radius: var(--ui-radius-lg); }
#profile-workspace .avatar-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#profile-workspace .request-list article { grid-template-columns: auto minmax(0, 1fr) auto; }
#profile-workspace .request-list article .quiet-button { grid-column: 2; }
#profile-workspace .control-nav { border-radius: var(--ui-radius-lg); overflow-x: auto; scrollbar-width: none; }
#profile-workspace .control-nav::-webkit-scrollbar { display: none; }
#profile-workspace .control-nav nav { min-width: 360px; }
#profile-workspace .control-card { min-height: 0; padding: .7rem; border-radius: var(--ui-radius-lg); }
#profile-workspace .control-card > header { align-items: stretch; flex-direction: column; }
#profile-workspace .setting-row { grid-template-columns: minmax(0, 1fr) auto; }
#profile-workspace .action-row { grid-template-columns: 40px minmax(0, 1fr); }
#profile-workspace .action-row > button { grid-column: 2; width: 100%; }
#profile-workspace .device-list article { grid-template-columns: 40px minmax(0, 1fr); padding: .5rem 0; }
#profile-workspace .device-list article > button,
#profile-workspace .device-list article > b { grid-column: 2; justify-self: start; }
#profile-workspace .danger-zone { align-items: stretch; flex-direction: column; }
#profile-workspace .identity-photo { grid-template-columns: 1fr; justify-items: start; }
#profile-workspace .preview-hero { grid-template-columns: auto minmax(0, 1fr); }
#profile-workspace .preview-hero .primary-button { grid-column: 1 / -1; }
#profile-workspace .share-dialog label > div { flex-direction: column; }
#profile-workspace .form-actions > button { flex: 1; }
#profile-workspace .modal-backdrop { padding: .5rem; }
#profile-workspace .modal { max-height: calc(100dvh - 1rem); border-radius: var(--ui-radius-lg); }
#profile-workspace .modal > header { border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; }
}

@media (prefers-reduced-motion: reduce) {
#profile-workspace *,
#profile-workspace *::before,
#profile-workspace *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* ---------- HOST ADAPTATIONS (the only non-package rules) ---------- */
#profile-workspace { display: block; padding-bottom: 7.5rem; }
#profile-workspace .toast { top: 5.6rem; }
/* Honest capability notes for server-backed sections the local candidate
   cannot provide (accounts/sessions arrive with the live auth model). */
#profile-workspace .capability-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem; padding: .75rem .8rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-md); background: var(--ui-wash); color: var(--ui-soft); font-size: 0.6875rem; line-height: 1.5; }
#profile-workspace .capability-note svg { color: var(--ui-accent); }
/* The typed confirmation for local-data deletion. */
#profile-workspace .delete-confirm-input input { width: 100%; padding: .55rem .65rem; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-md); outline: 0; background: var(--ui-paper); color: var(--ui-ink); font-size: 1rem; }
#profile-workspace .delete-confirm-input input:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 16%, transparent); }
/* Verification floor: the package's label spans compute to 9.92px (.62rem)
   and the locked username's inner input to 42px; the visible floor is 10px /
   44px, so these nudge up by a fraction of a pixel. */
#profile-workspace .profile-form label > span,
#profile-workspace .username-input b,
#profile-workspace .identity-photo span,
#profile-workspace .form-note { font-size: 0.6875rem; }
#profile-workspace .username-input input { min-height: 44px; }
@media (max-width: 880px) {
  #profile-workspace { padding-bottom: 6.5rem; }
}