/*
 * The signed-in shell. Nothing here renders on a marketing page.
 */

/* Account menu (signed-in app chrome). Inline dropdown on desktop; hamburger sheet on mobile. */
.account { position: relative; display: inline-flex; }
.account__trigger {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px;
  background: transparent; border: 1px solid var(--rule); border-radius: var(--r-btn);
  color: var(--ink-2); font-family: var(--font-mono); font-size: 13px; cursor: pointer;
  transition: border-color var(--motion), color var(--motion);
}
.account__trigger:hover { color: var(--ink); border-color: var(--rule); }
.account__label { display: none; }
.account__caret { width: 14px; height: 14px; display: none; }
.account__trigger[aria-expanded="true"] .account__caret { transform: rotate(180deg); }
.account__burger { width: 22px; height: 22px; }
@media (min-width: 860px) {
  .account__label, .account__caret { display: inline-flex; }
  .account__burger { display: none; }
}

.account__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 232px; z-index: 60;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--r-card);
}
.account__menu[hidden] { display: none; }
.account__email {
  padding: 8px 10px 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--rule); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis;
}
.account__menu form { margin: 0; }
.account__item {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: var(--r-chip);
  background: transparent; color: var(--ink-2); font-family: inherit; font-size: 14px; cursor: pointer;
}
.account__item:hover { background: var(--bg); color: var(--ink); }

body.nav-locked { overflow: hidden; }
/* Mobile: the menu drops to a full-width sheet under the bar. */
@media (max-width: 859px) {
  .account { position: static; }
  .account__menu {
    left: 0; right: 0; top: 100%; min-width: 0; border-radius: 0;
    border-left: 0; border-right: 0; border-top: 1px solid var(--rule);
  }
}

/* ------------------------------------------------------------- App shell --- */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }

.app-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border-right: 1px solid var(--rule);
  position: sticky;
  top: 0;
  height: 100vh;
}

.app-sidebar__mark { padding: 20px; border-bottom: 1px solid var(--rule); }
/* The hamburger only exists in the mobile top bar. */
.app-sidebar__burger { display: none; }

/* The `hidden` attribute in the markup is for the mobile sheet, which starts closed. At this
   width there is no sheet -- the column is the navigation -- so the attribute is overridden
   rather than the markup being made width-aware. */
.app-sidebar__body,
.app-sidebar__body[hidden] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.app-nav { display: flex; flex-direction: column; padding: 16px 0; }

.app-nav__item {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  /* 20px less the 2px bar, so the label does not shift when the bar appears. */
  padding: 13px 20px 13px 18px;
  border-left: 2px solid transparent;
  transition: color var(--motion), border-color var(--motion);
}
.app-nav__item:hover { color: var(--ink); }
.app-nav__item.is-active { color: var(--ink); border-left-color: var(--gold); }

/* Pinned to the bottom of the column by the body's space-between. */
.app-switcher { padding: 20px; border-top: 1px solid var(--rule); }
.app-switcher__account { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.app-switcher__email {
  margin: 2px 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-switcher__links { display: flex; flex-direction: column; }
.app-switcher form { margin: 0; }
.app-switcher__item {
  /* Flex rather than block, so min-height can hold the 44px target without the label
     drifting to the top of it. */
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 100%;
  text-align: left;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  transition: color var(--motion);
}
.app-switcher__item:hover { color: var(--ink); }

.app-main { min-width: 0; padding-block: 40px; }
/* Inside the native shells there is no sidebar, so the column supplies its own gutters. */
.app-main--bare { padding-inline: var(--gutter); }

/* Under 900px the sidebar becomes a top bar and the nav collapses into a sheet. */
@media (max-width: 899px) {
  .app { display: block; }

  .app-sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .app-sidebar__mark {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0;
    padding: 14px var(--gutter);
  }

  .app-sidebar__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px minimum hit target. */
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .app-sidebar__burger svg { width: 22px; height: 22px; }

  .app-sidebar__body { display: block; border-top: 1px solid var(--rule); }
  .app-sidebar__body[hidden] { display: none; }

  .app-nav__item { padding-inline: var(--gutter); }
  .app-switcher { padding-inline: var(--gutter); }

  .app-main { padding-block: 28px; }
}

/* ----------------------------------------------------------- Auth shell --- */
.auth-shell {
  max-width: 400px;
  /* Not centred in the viewport: an optically centred card sits slightly high, and this keeps the
     card from moving when an inline error appears under a field. */
  margin: clamp(40px, 12vh, 96px) auto;
  padding-inline: var(--gutter);
}
.auth-shell__mark { text-align: center; margin-bottom: 28px; }