/* The transparent cloth is independent of the live account controls, so its
   shadow follows the silhouette and each raised control casts its own shadow. */
.app-nav {
  grid-template-columns: minmax(0, 1fr) minmax(140px, 328px) 224px;
  min-height: 56px;
  gap: 16px;
  padding: 6px 10px 6px 18px;
  z-index: 9;
}
.app-nav .project-picker { padding-block: 6px; }
.app-nav .project-progress { display: flex; align-items: center; gap: 10px; }
.app-nav .meter { flex: 1; min-width: 64px; }
.app-nav .party { flex: 0 1 auto; max-width: 88px; padding: 4px; }
.app-nav .party .portrait { width: 28px; height: 28px; font-size: 16px; }
.app-nav .account-controls {
  position: relative;
  isolation: isolate;
  justify-self: end;
  justify-content: center;
  width: 224px;
  height: 44px;
  padding: 0 16px 4px;
  gap: 7px;
}
.account-banner-art {
  position: absolute;
  z-index: -1;
  top: -18px;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 1px #000b) drop-shadow(3px 8px 5px #0009);
}
.app-nav .account-avatar {
  width: 42px;
  height: 42px;
  border: 2px solid #d1ae4b;
  outline: 1px solid #38260c;
  outline-offset: -4px;
  box-shadow: 0 0 0 1px #2e230e, 0 0 0 3px #a7893e,
    0 0 0 4px #211a0d, 2px 5px 3px #000c, 5px 9px 8px #0008,
    inset 0 1px 2px #fff0a5b3, inset 0 -3px 4px #0009;
  background-color: #263d50;
  color: #f8e4a7;
  font-size: 21px;
  text-shadow: 0 2px 2px #000;
}
.app-nav .account-avatar:disabled { cursor: default; }
.app-nav .account-avatar:focus-visible { outline: 2px solid #ffe389; outline-offset: 5px; }
/* Transparent initials must not cast letter-shaped shadows over the image. */
.app-nav .account-avatar:is(.human, .orc) { text-shadow: none; }
.app-nav .account-controls .account-name {
  display: block;
  order: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 86px;
  margin: 0;
  padding: 2px 5px 3px;
  border: 1px solid #a18c5e;
  border-radius: 1px;
  background: linear-gradient(135deg, #242a2de8, #10161cf5);
  box-shadow: inset 0 1px 0 #eddda833, inset 0 -1px 1px #000,
    0 0 0 1px #0c1115, 2px 4px 3px #000a, 4px 7px 6px #0005;
  color: #f5e2ac;
  font-size: 15px;
  line-height: 1.15;
  text-shadow: 0 2px 2px #000;
}
.app-shell #application .account-controls .logout {
  order: 0;
  min-height: 32px;
  padding: 1px 5px;
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
  box-shadow: 1px 3px 2px #000b, 4px 7px 6px #0008;
}
@media (max-width: 900px) {
  .app-nav {
    grid-template-columns: minmax(0, 1fr) 224px;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 4px;
    padding: 6px 8px 6px 16px;
  }
  .app-nav .project-controls { grid-column: 1; grid-row: 1; }
  .app-nav .project-controls .project-picker { max-width: none; }
  .app-nav .project-progress { grid-column: 1; grid-row: 2; justify-self: stretch; max-width: 328px; }
  .app-nav .account-controls {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}
@media (max-width: 700px) {
  .app-nav {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 8px;
    padding: 0 12px 10px;
  }
  .app-nav .account-controls {
    grid-column: 1;
    grid-row: 1;
    width: min(224px, 100%);
    height: auto;
    aspect-ratio: 960 / 432;
    margin-top: -10px;
    padding: 0 16px 26px;
  }
  .account-banner-art { top: 0; }
  .app-nav .project-controls { grid-column: 1; grid-row: 2; }
  .app-nav .project-progress { grid-column: 1; grid-row: 3; max-width: none; }
}
@media (pointer: coarse) {
  .app-shell #application .account-controls .logout { min-height: 44px; }
}