.topbar { border-bottom:1px solid var(--border); background:var(--background); }
.topbar-inner { max-width:760px; margin:auto; padding:8px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.topbar .brand { display:inline-flex; align-items:center; gap:8px; margin:0; color:var(--text); text-decoration:none; }
.topbar .brand .tolf-wordmark { font-size:20px; font-weight:650; letter-spacing:.16em; line-height:1.47; }
.brand-emblem { display:block; flex:0 0 22px; }
.back-chevron { font-size:24px; color:var(--secondary); }
.account-settings { padding-top:24px; }
.account-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.account-heading h1 { flex:1 1 100%; margin:0; font-size:28px; font-weight:650; text-align:center; }
.account-heading .account-service-links > a,
.account-heading > #accountSignOut {
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 1 160px;
  width:160px;
  max-width:calc((100% - 12px)/2);
  min-height:44px;
  padding:10px 14px;
  border:1px solid var(--tolf-outline, var(--border));
  border-radius:10px;
  background:var(--tolf-card, var(--card));
  color:var(--tolf-action-text, var(--text));
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  text-decoration:none;
  white-space:nowrap;
}
#accountContent > .card + .card { margin-top:16px; }
.account-settings .card-content { padding:22px; }
.account-delete-section { margin-top:14px; padding-top:0; border:0; }
.account-delete-note { margin-bottom:0; }
.passkey-note { margin-bottom:0; }
.account-settings .settings-input { width:100%; min-width:0; }
@media(max-width:520px){.topbar-inner{padding-inline:16px}.account-settings{padding:20px 12px 32px}.account-settings .card-content{padding:20px}.account-heading h1{font-size:26px}}

.account-heading .account-service-links > a,
.account-heading > #accountSignOut {
  box-sizing:border-box;
  flex:0 0 160px;
  width:160px;
  max-width:calc((100% - 12px)/2);
  height:42px;
  min-height:42px;
  max-height:42px;
  padding:0 12px;
}

/* On wider screens the account title sits in the sticky header. */
.topbar .account-top-title { display:none; }
@media (min-width:700px) {
  .topbar { position:sticky; top:0; z-index:50; }
  .topbar-inner { position:relative; }
  .topbar .account-top-title {
    display:block;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    max-width:calc(100% - 370px);
    margin:0;
    overflow:hidden;
    color:var(--text);
    font-size:24px;
    font-weight:650;
    line-height:1.2;
    letter-spacing:-0.015em;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .account-heading h1 { display:none; }
  .account-settings { padding-top:12px; }
}

.account-service-links { display:flex; flex:1 1 332px; min-width:0; gap:12px; }
.account-heading > #accountSignOut { margin-left:auto; }
@media(max-width:520px){
  .account-service-links { flex-basis:100%; }
  .account-heading .account-service-links > a { flex:1 1 0; min-width:0; }
}

/* Compact account navigation on phones. */
.service-label-narrow { display:none; }
@media (max-width:699px) {
  .account-settings { padding-top:12px; }
  .account-heading {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
  }
  .account-heading > h1 {
    grid-column:1;
    grid-row:1;
    min-width:0;
    margin:0;
    font-size:24px;
    font-weight:650;
    line-height:1.2;
    letter-spacing:-0.015em;
    text-align:left;
  }
  .account-heading > #accountSignOut {
    grid-column:2;
    grid-row:1;
    width:auto;
    max-width:none;
    margin:0;
    padding-inline:12px;
  }
  .account-heading > .account-service-links {
    grid-column:1 / -1;
    grid-row:2;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    width:100%;
  }
  .account-heading .account-service-links > a {
    width:100%;
    max-width:none;
    min-width:0;
  }
  .account-heading .service-label-wide { display:none; }
  .account-heading .service-label-narrow { display:inline; }
}

.account-admin-link{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;color:var(--text);font-size:16px;font-weight:600;text-decoration:none}
.account-admin-link:hover{color:var(--tolf-action-text,var(--text))}

.account-identity{margin:0;display:grid;gap:14px}
.account-identity > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;align-items:baseline}
.account-identity dt{font-weight:400;color:var(--secondary)}
.account-identity dd{margin:0;white-space:nowrap;overflow-x:auto;text-align:right;font-size:16px}
.account-identity > .hidden{display:none}