/* Shared navigation geometry. Active states are visual, never structural. */
.shell {
  grid-template-columns: 222px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #15251e;
  padding: 22px 12px;
  color: #eff4ef;
}

/* Lockup: emblem left, ONESHOT over APPLICATION right. Both lines are
   cased by CSS so the accessible name stays "OneShot Application". The text
   column is sized to ONESHOT and the sub is justified to its end, so the two
   lines share a right edge and the sub rags left at ~85% of the width; the
   negative margin drops the trailing letter-space so the ink lands flush. */
.sidebar .brand {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto max-content;
  align-items: center;
  justify-content: start;
  justify-items: start;
  gap: 0 8px;
  padding: 0 9px 24px;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f2f7f1;
}

.sidebar .brand-mark {
  grid-row: span 2;
  width: 32px;
  height: 32px;
}

.sidebar .brand-word {
  font-size: 24px;
  font-weight: 800;
  font-stretch: 90%;
  line-height: 1;
  text-transform: uppercase;
}

.sidebar .brand-sub {
  margin-top: 4px;
  justify-self: end;
  margin-right: -.08em;
  color: #d9f36a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.side-nav {
  display: grid;
  gap: 2px;
  margin-top: 18px;
}

.side-nav p {
  margin: 13px 10px 4px;
  color: rgb(255 255 255 / 40%);
  font: 400 10px/15px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.side-nav p:first-child {
  margin-top: 0;
}

.side-nav a {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 8px 10px;
  color: rgb(255 255 255 / 67%);
  font: 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
}

.side-nav a:hover,
.side-nav a.active {
  background: #22372d;
  color: white;
}

/* Weight, not just colour, marks the current page. Same size and box, so the row
   geometry is unchanged and nothing shifts when the active item moves. */
.side-nav a.active {
  font-weight: 650;
}

.side-nav a.active .nav-icon {
  color: #d9f36a;
}

.side-nav .nav-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* min-width, not width: the opportunity count runs to four digits and a comma,
   and a fixed 24px box let "4,448" spill out of its own pill. Tabular figures so
   the counts sit on a common width as they tick. */
.side-nav b {
  min-width: 24px;
  height: 18px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  margin-left: auto;
  border-radius: 20px;
  background: rgb(255 255 255 / 10%);
  padding: 0 7px;
  font: 400 10px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* Injected by nav-count.js on every shell, so the four hand-copied sidebars stay
   untouched. margin-top:auto is what holds it to the foot of the column. */
.account {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  border-top: 1px solid rgb(255 255 255 / 8%);
  padding: 14px 6px 0;
  color: inherit;
  text-decoration: none;
}

.account-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  overflow: hidden;
  border-radius: 50%;
  background: #e1cdb5;
  place-items: center;
  color: #4b3928;
  font: 800 12px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Sits over the initials rather than replacing them, so a Google photo that
   404s or is blocked degrades to initials with no onerror handler. */
.account-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar.is-empty {
  background: transparent;
  border: 1px dashed rgb(255 255 255 / 28%);
  color: rgb(255 255 255 / 40%);
}

/* Every page stylesheet sets `svg { fill: none; stroke: currentColor }`
   globally. These two rules outrank a bare element selector, so the glyphs render
   the same on all four shells. */
.account-avatar svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.account-more svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
}

.account-text {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.account-name,
.account-email,
.account-action {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-name {
  color: #eff4ef;
  font: 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.account-email {
  color: rgb(255 255 255 / 44%);
  font: 400 11px/15px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The only action colour in the palette, so the signed-out chip reads as the
   button it is without changing the geometry of the signed-in one. */
.account-action {
  color: #d9f36a;
  font: 600 11px/15px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.account.is-guest:hover .account-avatar.is-empty,
.account.is-guest:focus-visible .account-avatar.is-empty {
  border-color: #d9f36a;
  color: #d9f36a;
}

.account.is-guest:focus-visible {
  outline: none;
}

.account-more {
  flex: 0 0 auto;
  display: grid;
  margin-left: auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 3px;
  place-items: center;
  color: rgb(255 255 255 / 40%);
  cursor: pointer;
}

.account-more:hover,
.account-more:focus-visible,
.account.is-open .account-more {
  color: #d9f36a;
  outline: none;
}

.account-menu {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 6px;
  right: 6px;
  z-index: 5;
  display: none;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 10px;
  background: #22372d;
  padding: 6px;
  box-shadow: 0 10px 26px rgb(0 0 0 / 34%);
}

.account.is-open .account-menu {
  display: block;
}

/* The chip truncates the address; this is where it is readable in full. */
.account-menu-email {
  overflow-wrap: anywhere;
  margin: 0;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  padding: 5px 8px 8px;
  color: rgb(255 255 255 / 46%);
  font: 400 10px/14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.account-menu-item {
  width: 100%;
  display: block;
  margin-top: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 7px 8px;
  color: rgb(255 255 255 / 78%);
  font: 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  cursor: pointer;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: rgb(255 255 255 / 8%);
  color: white;
  outline: none;
}

@media (max-width: 850px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    width: auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 11px 15px;
    box-shadow: none;
  }

  .sidebar .brand {
    min-height: 0;
    gap: 0 7px;
    padding: 0;
  }

  .sidebar .brand-mark {
    width: 26px;
    height: 26px;
  }

  .sidebar .brand-word {
    font-size: 19px;
  }

  .sidebar .brand-sub {
    margin-top: 3px;
    margin-right: -.08em;
    font-size: 9px;
    letter-spacing: .08em;
  }

  .side-nav {
    max-width: calc(100vw - 145px);
    display: flex;
    overflow-x: auto;
    margin: 0 0 0 auto;
    scrollbar-width: none;
  }

  .side-nav::-webkit-scrollbar {
    display: none;
  }

  .side-nav p {
    display: none;
  }

  .side-nav a,
  .side-nav a.active {
    flex: 0 0 auto;
    order: initial;
  }

  /* The sidebar is a horizontal bar here, so the chip collapses to the avatar.
     The ⋯ goes with the text, which is why nav-count.js also opens the menu on
     an avatar click — otherwise there would be no way to sign out on a phone.
     The margin resets the column-foot auto margin, which is meaningless in a
     row. */
  .account {
    flex: 0 0 auto;
    margin: 0 0 0 10px;
    border-top: 0;
    padding: 0;
  }

  .account-text,
  .account-more {
    display: none;
  }

  .account-avatar {
    cursor: pointer;
  }

  .account-menu {
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: auto;
    width: 210px;
  }
}