/* Original theatre artwork, composed without cropping or changing the mark. */
@media screen {
  .app-header {
    height: 76px;
    padding: 8px 26px;
    gap: 20px;
    border-bottom: 1px solid var(--gold-line);
  }
  .brand { min-width: 0; gap: 18px; text-decoration: none; flex: 0 1 auto; }
  .brand .brand-lockup {
    display: flex;
    flex: 0 0 176px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: 0;
    padding: 0;
    margin: 0;
    width: 176px;
    max-width: none;
    line-height: 1;
  }
  .brand .brand-lockup img {
    display: block;
    object-fit: contain;
    object-position: center;
    max-width: 100%;
    flex: none;
    height: auto;
  }
  .brand img.brand-building { width: 150px; }
  .brand img.brand-wordmark { width: 176px; }
  .brand .brand-caption {
    border-left: 1px solid var(--line);
    padding: 4px 0 4px 18px;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.4;
    max-width: none;
    color: var(--muted);
  }
  .shell { min-height: calc(100dvh - 76px); }
  aside { padding-top: 20px; }
  main { padding-top: 22px; }
  .identity { min-width: 0; gap: 10px; }
  .identity #identity-name { overflow-wrap: anywhere; }
  .identity button, .demo-picker > summary { min-height: 40px; }
  .demo-picker > summary { display: flex; align-items: center; padding: 8px 12px; }
  .ui-icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; vertical-align: -3px; pointer-events: none; }
  button:has(> .ui-icon), a:has(> .ui-icon) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  nav button .ui-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .dialog-head > button, .refresh-button { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
  .settings-tile > span:last-child .ui-icon, .agenda-arrow .ui-icon { width: 16px; height: 16px; }
  .next-call-arrow { display: grid; place-items: center; }
  .next-call-arrow .ui-icon { width: 20px; height: 20px; }
  .row-tools button:has(> .ui-icon), .activity-block-head button:has(> .ui-icon) { min-width: 36px; min-height: 36px; }
  @media (min-width: 761px) {
    body[data-viewer=staff] aside {
      position: sticky;
      top: 0;
      align-self: start;
      box-sizing: border-box;
      height: calc(100dvh - 76px);
      overflow-y: auto;
    }
    body[data-viewer=staff] #navigation { gap: 14px; }
    body[data-viewer=staff] nav button { min-height: 40px; padding-block: 8px; margin-block: 1px; }
  }
  @media (max-width: 760px) {
    body[data-viewer=staff] #navigation { align-items: center; }
    body[data-viewer=staff] .nav-work, body[data-viewer=staff] .nav-catalogue, body[data-viewer=staff] .nav-settings { flex: 0 0 auto; }
    .app-header { height: 64px; min-height: 64px; padding: 6px 14px; gap: 12px; flex-wrap: nowrap; }
    .brand { gap: 0; flex: 0 0 144px; }
    .brand .brand-lockup { width: 144px; flex-basis: 144px; gap: 2px; }
    .brand img.brand-building { width: 126px; }
    .brand img.brand-wordmark { width: 144px; }
    .brand .brand-caption { display: none; }
    .shell { min-height: calc(100dvh - 64px); }
    main { padding: 16px 14px 36px; }
    .identity { margin-left: auto; gap: 6px; width: auto; flex-wrap: nowrap; max-width: calc(100% - 156px); }
    .identity #identity-name { max-width: 132px; font-size: 11px; line-height: 1.25; }
    .identity button, .demo-picker > summary { min-height: 44px; }
    .demo-picker > summary { padding: 8px; font-size: 11px; }
    .identity:has(#identity-name:not([hidden])) { justify-content: flex-end; gap: 6px; }
    .identity #access-logout { padding: 4px 8px; min-height: 44px; font-size: 11px; }
    .dialog-head > button, .row-tools button:has(> .ui-icon), .activity-block-head button:has(> .ui-icon) { min-width: 44px; min-height: 44px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  }
}