/* Account setup and settings share Flowbording's existing chalk/petrol palette. */
#accountBoot.account-boot {
  position:fixed;
  inset:0;
  z-index:1300;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:32px;
  overflow:auto;
  background:#142e32;
  color:#c1d2d0;
  text-align:center;
}
#accountBoot.account-boot img {
  display:block;
  width:min(185px,100%);
  height:62px;
  object-fit:contain;
}
#accountBoot.account-boot p {
  margin:0;
  font-size:14px;
  line-height:1.7;
}
#accountBoot.account-boot noscript {
  display:block;
  max-width:420px;
  color:#edf5f1;
  font-size:14px;
  line-height:1.7;
}

.cloud-dialog--auth {
  --account-control-border:#7c928a;
}
[data-theme=dark] .cloud-dialog--auth {
  --account-control-border:#78988e;
}

/* The same three steps remain visible through authentication and vault setup. */
.cloud-dialog--auth .account-steps {
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  margin:0 0 30px;
  padding:0;
  list-style:none;
  counter-reset:account-step;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.5;
}
.cloud-dialog--auth .account-steps li {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  counter-increment:account-step;
}
.cloud-dialog--auth .account-steps li::before {
  content:counter(account-step);
  display:grid;
  place-items:center;
  flex:0 0 27px;
  width:27px;
  height:27px;
  border:1px solid var(--account-control-border);
  border-radius:50%;
  background:var(--bg-card);
  color:var(--text-secondary);
  font-size:11px;
  font-weight:700;
}
.cloud-dialog--auth .account-steps li[aria-current=step] {
  color:var(--text-primary);
  font-weight:700;
}
.cloud-dialog--auth .account-steps li[aria-current=step]::before {
  background:var(--text-accent);
  border-color:var(--text-accent);
  color:var(--bg-base);
}
.cloud-dialog--auth .account-steps li[aria-current=step] span {
  text-decoration:underline;
  text-decoration-color:var(--text-accent);
  text-underline-offset:5px;
  text-decoration-thickness:2px;
}
.cloud-dialog--auth .account-story .account-steps { color:#c1d2d0; }
.cloud-dialog--auth .account-story .account-steps li::before {
  border-color:#9bbfb2;
  background:#142e32;
  color:#c1d2d0;
}
.cloud-dialog--auth .account-story .account-steps li[aria-current=step] { color:#edf5f1; }
.cloud-dialog--auth .account-story .account-steps li[aria-current=step]::before {
  border-color:#dceee6;
  background:#dceee6;
  color:#142e32;
}
.cloud-dialog--auth .account-story .account-steps li[aria-current=step] span { text-decoration-color:#9bd3b9; }
.cloud-dialog--auth #accountEntryTitle:focus { outline-offset:6px; }
.cloud-dialog--auth .account-form-content > .account-steps + .eyebrow { margin-top:0; }

.cloud-dialog--auth #cloudEnrollment:empty { display:none; }
.cloud-dialog--auth #cloudEnrollment:not(:empty) {
  margin:22px 0;
  padding:20px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg-card);
}
.cloud-dialog--auth #cloudEnrollment .mfa-qr {
  display:block;
  box-sizing:content-box;
  width:min(180px,100%);
  max-width:calc(100% - 24px);
  height:auto;
  margin:0 auto;
  padding:12px;
  border-radius:4px;
  background:#fff;
}
.cloud-dialog--auth .mfa-manual {
  margin:18px 0 0;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.75;
}
.cloud-dialog--auth .mfa-manual details { margin:0; }
.cloud-dialog--auth .mfa-manual summary {
  padding:8px 0;
  color:var(--text-accent);
  font-size:12px;
  font-weight:650;
}
.cloud-dialog--auth .mfa-manual :is(p,code) {
  overflow-wrap:anywhere;
  user-select:text;
}
.cloud-dialog--auth .mfa-manual code {
  display:block;
  margin-top:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg-elevated);
  color:var(--text-primary);
  font:13px/1.75 var(--mono);
}
.cloud-dialog--auth #cloudMfaCode,
.cloud-dialog--auth #cloudEmailCode {
  font-variant-numeric:tabular-nums;
  letter-spacing:.16em;
}
.cloud-dialog--auth #accountVaultSlot { min-width:0; }
.cloud-dialog--auth .account-method-choice { margin:16px 0; }
.cloud-dialog--auth .account-method-choice > summary { color:var(--text-accent);font-weight:600;cursor:pointer; }
.cloud-dialog--auth .account-method-choice[open] > summary { margin-bottom:12px; }
.cloud-dialog--auth .account-passkey-unlock { display:grid;gap:16px;min-width:0;margin-bottom:20px; }
.cloud-dialog--auth .account-passkey-unlock > p { color:var(--text-secondary);line-height:1.65; }
.cloud-dialog--auth .account-passkey-unlock .account-method-choice { margin:0; }
.cloud-dialog--auth .account-passkey-unlock > .btn { width:100%;min-height:44px;max-width:100%;white-space:normal; }
.cloud-dialog--auth #cloudVaultPasskeys { min-width:0; }
.cloud-dialog--auth #cloudVaultPasskeys > .form-hint { margin:0 0 12px; }
.cloud-dialog--auth #accountVaultPhraseHint { margin:0 0 12px;color:var(--text-secondary); }
.cloud-dialog--auth #accountVaultSlot .vault-card { max-width:none; }
.cloud-dialog--auth #accountVaultSlot #vaultForm > .eyebrow,
.cloud-dialog--auth #accountVaultSlot #vaultTitle,
.cloud-dialog--auth #accountVaultSlot #vaultIntro {
  display:none;
}
.cloud-dialog--auth #accountVaultSlot .vault-card p { margin:12px 0 20px; }
.cloud-dialog--auth #accountVaultSlot .vault-card .form-hint { margin:8px 0 0; }
.cloud-dialog--auth #accountVaultSlot #vaultError:empty { display:none; }
.cloud-dialog--auth #accountVaultSlot #vaultSubmit { margin:24px 0 0; }
.cloud-dialog--auth #accountVaultSlot #vaultSubmit.btn-ghost {
  background:var(--bg-card);
  border:1px solid var(--account-control-border,var(--input-border));
  color:var(--text-primary);
}
.cloud-dialog--auth #accountVaultSlot #vaultSubmit.btn-ghost:hover {
  background:var(--bg-hover);
  border-color:var(--text-accent);
  color:var(--text-primary);
}
.cloud-dialog--auth #accountVaultSlot .vault-card .error-text { margin:16px 0 0; }
.cloud-dialog--auth :is(input,select):not([type=checkbox]):not([type=radio]) {
  border-color:var(--account-control-border);
}
.cloud-dialog--auth .permission-option {
  align-items:flex-start;
  gap:10px;
  color:var(--text-primary);
  line-height:1.7;
}
.cloud-dialog--auth .permission-option input { flex:none;margin-top:4px; }
.cloud-dialog--auth .recovery-key {
  padding:18px;
  border-color:var(--account-control-border);
  background:var(--bg-card);
  line-height:1.85;
}
.cloud-dialog--auth :is(button,input,select,textarea,summary,a,[tabindex]):focus-visible {
  outline:3px solid var(--text-accent);
  outline-offset:3px;
}
@media(max-width:800px) {
  .cloud-dialog--auth .account-steps { gap:10px 14px;margin-bottom:24px; }
}
@media(max-width:520px) {
  .cloud-dialog--auth .account-steps { gap:10px;font-size:11px; }
  .cloud-dialog--auth .account-steps li { gap:6px; }
  .cloud-dialog--auth .account-steps li::before { flex-basis:23px;width:23px;height:23px; }
  .cloud-dialog--auth #cloudEnrollment:not(:empty) { padding:16px; }
}

/* Account page layout. Shared controls, cards and tabs are owned by experience.css. */
#page-account .cloud-dialog--page,
#page-account .account-surface,
#page-account .account-surface-body {
  display:block;
  position:static;
  width:100%;
  min-width:0;
  height:auto;
  max-height:none;
  overflow:visible;
}
#page-account .account-center,
#page-account #cloudBody { min-width:0; }
#page-account .account-center-header { align-items:flex-start;flex-wrap:wrap;gap:20px; }
#page-account .account-center-header > div:first-child { flex:1;min-width:0; }
#page-account .account-center-header > .page-actions { flex:none;max-width:100%; }
#page-account .account-center-header .page-title { overflow-wrap:anywhere; }
#page-account .account-center-header .page-actions > .btn { min-width:0;max-width:100%; }
#page-account .account-center-header .page-subtitle { margin-top:8px; }
#page-account .account-tabs { margin-bottom:24px; }
#page-account .account-panel { display:grid;gap:24px;min-width:0; }
#page-account #cloudOrganisationOverview { display:grid;gap:24px;min-width:0; }
#page-account .form-actions { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px; }
#page-account .org-create form { max-width:660px;margin-top:20px; }
#page-account .org-create .form-group + .form-group { margin-top:16px; }
#page-account .org-toolbar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px; }
#page-account .org-toolbar h2 { margin:0; }
#page-account .org-toolbar p,
#page-account .org-create > p { margin-top:8px; }
#page-account .org-help,
#page-account .org-toolbar p,
#page-account .org-create > p,
#page-account .org-identity p,
#page-account .org-detail-header p,
#page-account .org-members > p,
#page-account .org-sharing > p,
#page-account .org-drafts > p { color:var(--text-secondary);line-height:1.65; }
#page-account .org-search { display:flex;flex-direction:column;gap:6px;width:300px;max-width:100%; }
#page-account .org-group + .org-group { margin-top:28px; }
#page-account .org-group-heading { display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px; }
#page-account .org-group-heading h3 { margin:0; }
#page-account .org-group-heading > span { color:var(--text-secondary); }
#page-account .org-list { display:grid;gap:12px;min-width:0;container-type:inline-size; }
#page-account .org-row {
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(180px,.65fr) auto;
  align-items:center;
  gap:20px;
  min-width:0;
}
#page-account .org-identity { display:flex;align-items:center;gap:14px;min-width:0; }
#page-account .org-identity > div { min-width:0; }
#page-account .org-identity h3,
#page-account .org-identity p { overflow-wrap:anywhere; }
#page-account .org-identity p { margin-top:5px; }
#page-account .org-avatar {
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:8px;
  background:var(--accent-glow);
  color:var(--text-accent);
}
#page-account .org-avatar .lucide-icon { width:20px;height:20px;margin:0; }
#page-account .org-meta { display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0; }
/* Shared widths keep both actions aligned across owned, shared and active rows. */
#page-account .org-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:8px;
  width:296px;
  max-width:100%;
  grid-column:-2 / -1;
}
#page-account .org-actions > .btn {
  justify-content:center;
  min-width:0;
  min-height:40px;
  line-height:1.4;
  text-align:center;
  overflow-wrap:anywhere;
}
#page-account .org-actions > .btn:only-child { grid-column:2; }
#page-account .org-detail-header { display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:24px; }
#page-account .org-detail-header > div { flex:1;min-width:0; }
#page-account .org-detail-header h2 { margin:12px 0 6px;overflow-wrap:anywhere; }
#page-account .org-detail-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:32px; }
#page-account .org-members,
#page-account .org-sharing { min-width:0; }
#page-account .org-members > h3,
#page-account .org-sharing > h3 { margin-bottom:16px; }
#page-account .org-member { display:grid;gap:12px;min-width:0;padding:18px 0;border-bottom:1px solid var(--border); }
#page-account .org-member:last-child { border-bottom:0; }
#page-account .org-member :is(p,strong,code) { overflow-wrap:anywhere; }
#page-account .org-member > .btn { justify-self:start; }
#page-account .cloudRoleForm { display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px; }
#page-account .cloudRoleForm > .form-label { display:flex;flex-direction:column;gap:6px;flex:1;min-width:min(180px,100%); }
#page-account .org-sharing form { display:grid;gap:14px; }
#page-account .org-sharing > form,
#page-account .org-sharing > details { margin-top:20px; }
#page-account .org-sharing form > .btn { justify-self:start; }
#page-account .org-sharing .form-actions { margin-top:0; }
#page-account #cloudCustomRoleForm fieldset { display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0; }
#page-account #cloudCustomRoleForm legend { margin-bottom:8px;padding:0;color:var(--text-secondary);font-size:13px;font-weight:600; }
#page-account #cloudCustomRoleForm .permission-option { display:flex;align-items:flex-start;gap:10px;padding:4px 0;line-height:1.65; }
#page-account #cloudCustomRoleForm .permission-option input { flex:none;width:auto;margin-top:3px;accent-color:var(--accent); }
#page-account .org-details > details { margin-top:24px; }
#page-account summary {
  padding:8px 0;
  color:var(--text-accent);
  font-weight:600;
  line-height:1.6;
  cursor:pointer;
  overflow-wrap:anywhere;
}
#page-account summary::marker { color:var(--text-accent); }
#page-account details[open] > summary { margin-bottom:12px; }
#page-account :is(.account-section,.org-sharing) > details,
#page-account .org-advanced {
  width:100%;
  min-width:0;
  padding:0 16px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg-elevated);
}
#page-account :is(.account-section,.org-sharing) > details > summary,
#page-account .org-advanced > summary {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:46px;
  list-style:none;
}
#page-account :is(.account-section,.org-sharing) > details > summary::-webkit-details-marker,
#page-account .org-advanced > summary::-webkit-details-marker { display:none; }
#page-account :is(.account-section,.org-sharing) > details > summary::after,
#page-account .org-advanced > summary::after {
  content:'';
  flex:none;
  width:7px;
  height:7px;
  margin-left:auto;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
#page-account :is(.account-section,.org-sharing) > details[open],
#page-account .org-advanced[open] { padding-bottom:16px; }
#page-account :is(.account-section,.org-sharing) > details[open] > summary,
#page-account .org-advanced[open] > summary {
  border-bottom:1px solid var(--border);
  margin-bottom:16px;
}
#page-account :is(.account-section,.org-sharing) > details[open] > summary::after,
#page-account .org-advanced[open] > summary::after { transform:rotate(225deg); }
#page-account .org-details :is(code,pre) { overflow-wrap:anywhere;white-space:pre-wrap; }
#page-account .org-drafts > :is(p,h2) { margin-bottom:16px; }
#page-account .account-security-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start;gap:24px; }
#page-account .account-security-grid > .account-section { display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0; }
#page-account .account-security-grid .account-section > details { width:100%; }
#page-account .account-security-grid form { display:grid;gap:14px; }
#page-account .account-security-grid form > .btn { justify-self:start; }
#page-account .account-security-grid .form-actions { margin-top:0; }
#page-account #cloudPasskeyList { display:grid;gap:12px;width:100%;min-width:0; }
#page-account .account-passkey-row { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;padding:14px 0;border-bottom:1px solid var(--border); }
#page-account .account-passkey-row:last-child { border-bottom:0; }
#page-account .account-passkey-row :is(strong,p) { overflow-wrap:anywhere; }
#page-account .account-passkey-row .form-hint { margin-top:4px; }
#page-account .account-passkey-confirm { grid-column:1 / -1;padding:14px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px; }
#page-account .account-passkey-confirm .form-actions { margin-top:12px; }
#page-account .account-passkeys > p { color:var(--text-secondary);line-height:1.65; }
#page-account .account-passkeys .account-notice { margin:0; }
#page-account .sharing-code { display:block;max-width:100%;margin:12px 0;overflow-wrap:anywhere;user-select:text; }
#page-account :is(#cloudVersions,#cloudBackups,#cloudLocalCopies) { display:flex;flex-wrap:wrap;gap:8px;margin-top:16px; }
#page-account :is(#cloudVersions,#cloudBackups,#cloudLocalCopies,#cloudAudit):empty { display:none; }
#page-account #cloudAudit { max-width:100%;margin-top:16px;white-space:pre-wrap;overflow-wrap:anywhere; }
#page-account #cloudMessage { margin:20px 0 0;overflow-wrap:anywhere; }
#page-account #cloudMessage:empty { display:none; }
#page-account [aria-busy=true] #cloudBody { pointer-events:none; }
#page-account [aria-busy=true] .account-panel { opacity:.65; }

@media(max-width:1200px) {
  #page-account .org-row { grid-template-columns:minmax(0,1fr) auto;gap:12px 20px; }
  #page-account .org-meta { grid-column:1; }
  #page-account .org-actions { grid-column:2;grid-row:1 / span 2; }
  #page-account .org-detail-grid { grid-template-columns:1fr;gap:24px; }
}
@media(max-width:900px) {
  #page-account .org-row { grid-template-columns:1fr;gap:16px; }
  #page-account .org-actions { grid-column:auto;grid-row:auto; }
  #page-account .org-search { width:100%; }
}
@media(max-width:520px) {
  #page-account .account-panel,
  #page-account .account-security-grid { gap:18px; }
  #page-account .org-identity { align-items:flex-start;gap:10px; }
  #page-account .org-avatar { flex-basis:34px;width:34px;height:34px; }
  #page-account .org-actions { width:100%; }
  #page-account .org-actions > .btn { min-height:44px; }
  #page-account .form-actions > .btn { flex:1 1 auto;justify-content:center; }
  #page-account .cloudRoleForm { align-items:stretch;flex-direction:column; }
  #page-account .org-detail-header { align-items:flex-start;flex-direction:column; }
}

/* The sidebar can leave a narrow workspace even on a wide viewport. */
@container(max-width:300px) {
  #page-account .org-row { padding:16px; }
  #page-account .org-identity { flex-direction:column;align-items:flex-start; }
  #page-account .org-actions { grid-template-columns:minmax(0,1fr);width:100%; }
  #page-account .org-actions > .btn { min-height:52px;padding-inline:10px;overflow-wrap:normal; }
  #page-account .org-actions > .btn:only-child { grid-column:1; }
}