.profile-link {
  display:inline-flex;
  border-radius:50%;
  transition:box-shadow var(--t-fast) var(--ease-out)
}

.profile-link:hover {
  box-shadow:0 0 0 2px var(--control-edge-hover)
}

.profile-avatar {
  width:62px;
  height:62px;
  border-radius:50%;
  border:1px solid #dce5f3;
  background:#edf2fa;
  color:#8192ad;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  flex-shrink:0
}

.profile-avatar svg {
  width:52%;
  height:52%
}

.profile-avatar img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.account-settings {
  max-width:560px;
  margin:0 auto 48px
}

.settings-profile {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin:0 0 32px;
  text-align:center
}

.settings-profile .profile-avatar {
  width:96px;
  height:96px
}

/* Profile photo: hovering or focusing the avatar offers to change it, and an
   image can be dropped on it. Touch screens, without hover, show a small
   camera badge instead. */
.avatar-editor {
  position:relative;
  border-radius:50%
}

.avatar-change {
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:4px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgb(6 12 26 / .58);
  color:#fff;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:-.005em;
  cursor:pointer;
  opacity:0;
  transition:opacity var(--t-fast) var(--ease-out)
}

.avatar-change svg {
  width:22px;
  height:22px
}

.avatar-editor:hover .avatar-change,.avatar-change:focus-visible,.avatar-editor.is-dropping .avatar-change {
  opacity:1
}

.avatar-editor.is-dropping {
  box-shadow:0 0 0 3px var(--focus-ring)
}

.avatar-editor.is-uploading .profile-avatar img {
  opacity:.55
}

@media(hover:none) {
  .avatar-change {
    opacity:1;
    background:transparent;
    place-content:end end
  }
  .avatar-change span {
    display:none
  }
  .avatar-change svg {
    width:32px;
    height:32px;
    padding:7px;
    margin:0 -2px -2px 0;
    border-radius:50%;
    background:var(--surface);
    color:var(--ink);
    box-shadow:0 2px 8px #0003
  }
}

/* Takes no space while empty: the margin cancels the column's gap, and the
   status stays rendered (zero height) so its first message is announced. */
.avatar-actions {
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:-18px
}

.avatar-actions .feedback,.avatar-actions .feedback:empty {
  display:block;
  margin:0
}

.avatar-actions .feedback:not(:empty) {
  margin-top:12px
}

.avatar-actions .text-link {
  margin-top:8px
}

.settings-profile h1 {
  font-size:32px;
  line-height:1.2;
  overflow-wrap:anywhere
}

.settings-panel {
  padding:30px
}

.settings-panel .text-field {
  width:100%;
  min-width:0
}

.settings-panel .input-row {
  gap:12px
}

.settings-panel .feedback:empty {
  display:none
}

.settings-email {
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:28px 0;
  color:#8292ac;
  font-size:13px
}

.settings-email strong {
  font-weight:500;
  font-size:16px;
  color:#27304b;
  overflow-wrap:anywhere
}

.settings-password {
  border-top:1px solid #dce5f3
}

.settings-password[open] {
  padding-bottom:24px
}

.settings-password[open] summary {
  padding-bottom:0
}

/* The whole row is the target, not only its line of text. */
.settings-password summary {
  padding:24px 0;
  cursor:pointer;
  font-weight:650;
  font-size:16px;
  list-style:none
}

.settings-password summary::-webkit-details-marker {
  display:none
}

.settings-password summary:after {
  content:'+';
  float:right;
  color:#8292ac
}

.settings-password[open] summary:after {
  content:'−'
}

.settings-password .help-text {
  margin:18px 0;
  line-height:1.7
}

.settings-password .field-label {
  margin-top:20px
}

.settings-resend,.settings-save-password {
  margin-top:18px
}

.settings-logout {
  width:100%;
  margin-top:12px
}

.settings-panel .feedback {
  margin-top:14px
}

[data-theme=dark] .profile-avatar {
  background:#1b2a40;
  border-color:#293b54;
  color:#a9bbd4
}

[data-theme=dark] .settings-email strong {
  color:#eff4ff
}

[data-theme=dark] .settings-password {
  border-color:#293b54
}

@media(max-width:600px) {
  .settings-panel {
    padding:23px
  }
  .settings-profile {
    margin-bottom:24px
  }
  .profile-link .profile-avatar {
    width:52px;
    height:52px
  }
  .settings-panel .input-row {
    flex-wrap:nowrap
  }
}

.settings-admin {
  display:flex;
  width:100%;
  margin-top:24px;
  justify-content:space-between
}

.admin-stats {
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.admin-table {
  min-width:700px;
  width:100%
}

.admin-table th {
  text-align:left
}

.admin-table td {
  padding:18px 10px
}

.admin-table td small {
  display:block;
  color:var(--muted);
  margin-top:5px
}

.admin-accounts h2 {
  margin:0
}

.admin-pages {
  margin-top:24px;
  color:var(--muted)
}

.admin-pages summary {
  cursor:pointer
}

.admin-pages p {
  display:flex;
  justify-content:space-between;
  gap:20px
}

.admin-pages p a {
  overflow-wrap:anywhere
}

.admin-pages .help-text {
  display:block
}

@media(max-width:760px) {
  .admin-stats {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .admin-accounts {
    padding:18px
  }
  .admin-accounts .search-input {
    width:100%
  }
}

.admin-table {
  min-width:800px
}

.admin-table th:nth-child(1) {
  width:38%
}

.admin-table th:nth-child(2) {
  width:22%
}

.admin-table th:nth-child(3) {
  width:18%
}

.admin-table th:nth-child(4) {
  width:22%
}

.admin-table :is(th,td) {
  padding-inline:18px;
  text-align:left
}

.admin-table th {
  padding-block:18px 12px
}

.admin-table td {
  padding-block:22px;
  line-height:1.5;
  overflow-wrap:anywhere
}

.admin-table td:nth-child(4) {
  display:table-cell
}

.admin-table td strong {
  display:block
}

.admin-table td small {
  font-size:13px;
  line-height:1.5
}

.admin-accounts .rankings-toolbar {
  margin-bottom:12px;
  flex-wrap:wrap
}

.admin-accounts #admin-status:empty,.admin-stats+#admin-live-status:empty {
  display:none
}

.admin-signups {
  margin:0 0 28px
}

.admin-signup-period {
  color:var(--muted,#71819c);
  font-size:14px
}

.admin-signup-plot {
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:0 12px
}

.admin-signup-axis {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:right;
  padding:5px 0 7px;
  font-size:14px;
  color:var(--muted,#71819c);
  height:216px
}

.admin-signup-inspector {
  min-width:0;
  touch-action:pan-y;
  border-radius:6px
}

.admin-signup-inspector:focus-visible {
  outline:2px solid var(--red);
  outline-offset:6px
}

.admin-signup-inspector svg {
  width:100%;
  height:216px;
  overflow:visible
}

.admin-signup-grid {
  stroke:var(--line,#e3eaf6);
  stroke-dasharray:4 5;
  vector-effect:non-scaling-stroke
}

.admin-signup-line {
  fill:none;
  stroke:var(--red);
  stroke-width:3;
  stroke-linejoin:round;
  stroke-linecap:round
}

.admin-signup-inspector [data-signup-cursor] {
  stroke:var(--muted,#71819c);
  stroke-dasharray:3 5;
  opacity:.5;
  vector-effect:non-scaling-stroke
}

.admin-signup-dates {
  grid-column:2;
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding-top:10px;
  color:var(--muted,#71819c);
  font-size:14px
}

.admin-signup-retry {
  margin-top:14px
}

.admin-signups #admin-signup-chart[aria-busy=true] {
  min-height:285px
}

@media(max-width:760px) {
  .admin-signups {
    padding:22px 18px
  }
  .admin-signups .history-heading {
    gap:8px
  }
  .admin-signup-plot {
    grid-template-columns:30px minmax(0,1fr);
    gap:0 8px
  }
  .admin-table :is(th,td) {
    padding-inline:16px
  }
  .admin-table th:nth-child(1) {
    width:38%
  }
  .admin-table th:nth-child(2) {
    width:22%
  }
  .admin-table th:nth-child(3) {
    width:18%
  }
  .admin-table th:nth-child(4) {
    width:22%
  }
  .admin-table td:nth-child(4) {
    display:table-cell
  }
}