.shell[data-shell-context="account"] {
  --account-ground: var(--surface-neutral);
  --account-hover: var(--surface-active);
  --account-raise: var(--shadow-sm);
  --account-gutter: var(--space-3);
  --account-stage-radius: var(--radius-2xl);
  --account-row: calc(var(--space-10) + var(--space-1));
  --account-safe-top: max(env(safe-area-inset-top, 0px), var(--injected-safe-inset-top, 0px));
  --account-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--injected-safe-inset-bottom, 0px));

  padding-top: var(--account-safe-top);
  background-color: var(--account-ground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.shell[data-shell-context="account"] :focus-visible:not(input) {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.shell[data-shell-context="account"] .shell__rail {
  position: relative;
  z-index: var(--z-sticky);
  min-height: 0;
  padding: 0;
  overflow: visible;
  border-right: 0;
  background: none;
}

.shell[data-shell-context="account"] .shell__workspace {
  overflow: hidden;
  background: none;
  scrollbar-gutter: auto;
}

.shell[data-shell-context="account"] .shell__crown {
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  height: var(--crown-height);
  padding: 0 var(--account-gutter);
  border-bottom: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.account-crown__lead {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.account-crown__tail {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
}

.account-crown__menu {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: var(--tap-target);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-lg);
  background: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.account-crown__menu:hover { background-color: var(--account-hover); }

.shell[data-shell-context="account"] .shell__stage {
  --chrome-top: 0px;

  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  margin: 0 var(--account-gutter) var(--account-gutter);
  overflow-y: auto;
  background-color: var(--surface-base);
  border-radius: var(--account-stage-radius);
  box-shadow: var(--account-raise);
}

.shell[data-shell-context="account"] .shell__stage:has(> .shell__stage__body.shell__stage--canvas) { overflow: hidden; }

/* The ground is the Window's old grey, so a Window that frames nothing would read as the Stage ending at the Bench. */
.shell[data-shell-context="account"] .studio__window { background: var(--surface-base); }

.shell--home[data-shell-context="account"] { --account-stage-radius: 0; }

.shell--home[data-shell-context="account"] .shell__rail { display: none; }

.shell--home[data-shell-context="account"] .shell__stage {
  margin: 0;
  background: none;
  box-shadow: none;
  scrollbar-gutter: stable both-edges;
}

.account-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.account-brand__mark {
  flex: none;
  width: var(--railnav-mark-size);
  height: var(--railnav-mark-size);
}

.account-brand__wordmark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-none);
  color: var(--text-primary);
}

.account-brand__wordmark strong { font-weight: var(--weight-semibold); }

.account-collapse {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.account-collapse:hover {
  background-color: var(--account-hover);
  color: var(--text-primary);
}

.account-collapse .material-symbols-rounded { font-size: var(--text-xl); }

.account-collapse__expand,
.shell--rail-collapsed .account-collapse__collapse { display: none; }

.shell--rail-collapsed .account-collapse__expand { display: inline; }

.account-crumbs { min-width: 0; }

.account-crumbs__list {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-crumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  min-width: 0;
}

.account-crumbs__item + .account-crumbs__item::before {
  content: "chevron_right";
  flex: none;
  font-family: "Material Symbols Rounded";
  font-size: var(--text-lg);
  line-height: var(--leading-none);
  color: var(--text-disabled);
}

.account-crumbs__link,
.account-switch__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 16rem;
  height: var(--tap-target);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-lg);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.account-crumbs__link:hover,
.account-switch__trigger:hover,
.account-switch.dropdown--open .account-switch__trigger {
  background-color: var(--account-hover);
  color: var(--text-primary);
}

.account-crumbs__link .material-symbols-rounded {
  font-size: var(--text-lg);
  color: var(--text-tertiary);
}

.account-switch__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-switch__caret {
  flex: none;
  margin-inline-start: auto;
  font-size: var(--text-base);
  color: var(--text-tertiary);
}

.account-switch__menu { min-width: 15rem; }

.account-switch__options {
  max-block-size: calc(8 * var(--tap-target));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.account-switch__option[aria-current="true"] {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.account-switch__check {
  margin-inline-start: auto;
  font-size: var(--text-lg);
  color: var(--accent-primary);
  visibility: hidden;
}

.account-switch__option[aria-current="true"] .account-switch__check { visibility: visible; }

.account-user__menu { min-width: 16rem; }

.account-user__who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
}

.account-user__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.account-user__name,
.account-user__email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-user__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.account-user__email {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.account-user__menu .material-symbols-rounded,
.account-switch__menu .material-symbols-rounded { font-size: var(--text-lg); }

.account-rail {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0 var(--space-3) var(--space-3);
}

.account-rail__head {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: var(--crown-height);
}

.account-rail__brand {
  display: flex;
  align-items: center;
  height: var(--tap-target);
  padding-inline: var(--space-3);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.account-rail__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: var(--space-2);
  scrollbar-width: none;
}

.account-rail__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-rail__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--account-row);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-xl);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.account-rail__item > .material-symbols-rounded {
  flex: none;
  font-size: var(--text-2xl);
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-out);
}

.account-rail__item:hover {
  background-color: var(--account-hover);
  color: var(--text-primary);
}

.account-rail__item:hover > .material-symbols-rounded { color: var(--text-secondary); }

.account-rail__item[aria-current="page"] {
  background-color: var(--surface-base);
  color: var(--text-primary);
  box-shadow: var(--account-raise);
}

.account-rail__item[aria-current="page"] > .material-symbols-rounded {
  color: var(--accent-primary);
  font-variation-settings: "FILL" 1;
}

.account-rail__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-rail__foot {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-0-5);
  padding-top: var(--space-3);
}

.account-rail__user { display: flex; }

.account-rail__user .account-rail__item {
  min-height: calc(var(--space-12) + var(--space-2));
  padding-inline: var(--space-2);
}

.account-rail__user-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.account-rail__tools { display: flex; }

.account-rail__user .dropdown__menu,
.account-rail__tools .dropdown__menu {
  top: auto;
  right: 0;
  bottom: 100%;
  margin: 0 0 var(--space-1);
}

.shell[data-shell-context="account"] .shell__rail-overlay {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: none;
}

.shell[data-shell-context="account"] .shell__rail-overlay::backdrop { background: none; }

.account-overlay__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background-color: color-mix(in srgb, var(--text-primary) 28%, transparent);
  cursor: pointer;
}

.account-overlay__panel {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: min(22rem, 88vw);
  padding-top: var(--account-safe-top);
  padding-bottom: var(--account-safe-bottom);
  background-color: var(--account-ground);
  box-shadow: var(--shadow-xl);
}

.shell__rail-overlay[open] .account-overlay__panel {
  animation: account-drawer var(--duration-normal) var(--ease-out);
}

@keyframes account-drawer {
  from { transform: translateX(-100%); }
}

.account-overlay__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: var(--crown-height);
  padding-inline: var(--space-6) var(--space-3);
}

.account-overlay__context {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-2) var(--space-3);
}

.account-overlay__context .account-switch,
.account-overlay__context .account-switch__trigger,
.account-overlay__context .account-crumbs__link {
  width: 100%;
  max-width: none;
}

.account-overlay__context .account-switch__trigger,
.account-overlay__context .account-crumbs__link {
  height: var(--account-row);
  padding-inline: var(--space-3);
  font-size: var(--text-base);
}

.account-overlay__context .account-switch__menu { right: 0; }

.account-overlay__panel .account-rail { flex: 1; height: auto; }

.account-overlay__panel .account-rail__head { display: none; }

.account-overlay__panel .account-rail__item { min-height: var(--space-12); font-size: var(--text-lg); }

@media (min-width: 1024px) {
  .shell[data-shell-context="account"]:not(.shell--home) .shell__crown { padding-inline-start: 0; }
  .shell[data-shell-context="account"]:not(.shell--home) .account-crown__menu { display: none; }
  .shell[data-shell-context="account"]:not(.shell--home) .shell__stage { margin-inline-start: 0; }
  .shell[data-shell-context="account"]:not(.shell--home) .account-collapse { display: inline-flex; }
  .shell--home[data-shell-context="account"] .shell__rail-overlay[open] { display: block; }

  .shell--rail-collapsed[data-shell-context="account"] .account-rail { padding-inline: var(--space-2); }
  .shell--rail-collapsed[data-shell-context="account"] .account-rail__head,
  .shell--rail-collapsed[data-shell-context="account"] .shell__rail .account-rail__item {
    justify-content: center;
    padding-inline: 0;
  }
  .shell--rail-collapsed[data-shell-context="account"] .account-rail__brand { padding-inline: var(--space-2); }
  .shell--rail-collapsed[data-shell-context="account"] .shell__rail .account-brand__wordmark,
  .shell--rail-collapsed[data-shell-context="account"] .shell__rail .account-rail__user-text,
  .shell--rail-collapsed[data-shell-context="account"] .shell__rail .account-rail__user .account-switch__caret,
  .shell--rail-collapsed[data-shell-context="account"] .shell__rail .badge { display: none; }
  .shell--rail-collapsed[data-shell-context="account"] .shell__rail .account-rail__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .shell--rail-collapsed[data-shell-context="account"] .account-rail__user .dropdown__menu,
  .shell--rail-collapsed[data-shell-context="account"] .account-rail__tools .dropdown__menu {
    right: auto;
    min-width: 16rem;
  }
}

@media (min-width: 768px) {
  .account-overlay__context { display: none; }
}

@media (max-width: 767px) {
  .shell[data-shell-context="account"] { --account-gutter: 0; }
  .shell[data-shell-context="account"] .shell__crown { padding-inline: var(--space-2); }
  .shell[data-shell-context="account"] .shell__crown .account-brand__wordmark,
  .account-crumbs { display: none; }
  .shell[data-shell-context="account"]:not(.shell--home) {
    --account-stage-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  }
  .shell[data-shell-context="account"]:not(.shell--home) .shell__stage { padding-bottom: var(--account-safe-bottom); }
  .shell[data-shell-context="account"][data-dock="fixed"] .shell__workspace { padding-bottom: 0; }
  .account-overlay__panel { width: 100%; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shell[data-shell-context="account"] *,
  .shell__rail-overlay[open] .account-overlay__panel { animation: none; transition: none; }
}