/* Page shells: the organiser app and an event's guest pages. */

@layer layout {
  /* ---- Organiser app ---------------------------------------------- */

  .ui-app {
    min-height: 100dvh;
  }

  /* The bar: the menu button on the left, the side the drawer comes from, with
     the logo beside it rather than adrift at the other edge. */
  .ui-app__bar {
    justify-content: flex-start;
    padding-inline: var(--p-space-2) var(--space-gutter);
  }

  .ui-app__bar > .ui-app__menu { order: -1; }

  .ui-app__bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--p-space-3);
    height: 3.5rem;
    padding: 0 var(--p-space-2) 0 var(--space-gutter);
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    border-bottom: 1px solid var(--color-line);
    backdrop-filter: blur(8px);
  }

  .ui-app__logo img {
    height: 1.5rem;
    width: auto;
  }

  .ui-app__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--p-radius-sm);
    background: transparent;
    color: var(--color-heading);
    cursor: pointer;
  }

  .ui-app__menu:hover { background: var(--color-sunken); }

  /* On a phone the navigation is a drawer (a popover); from 60rem it is a
     permanent sidebar. */
  .ui-app__nav {
    inset: 0 auto 0 0;
    width: min(18rem, 86vw);
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: var(--p-space-5) var(--p-space-3);
    border: 0;
    border-right: 1px solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-text);
    flex-direction: column;
    gap: var(--p-space-5);
    overflow-y: auto;
  }

  .ui-app__nav:popover-open {
    display: flex;
    animation: ui-drawer var(--duration) var(--ease) both;
  }

  .ui-app__nav::backdrop {
    background: rgba(29, 25, 51, 0.32);
  }

  @keyframes ui-drawer {
    from { transform: translateX(-100%); }
    to { transform: none; }
  }

  .ui-app__main {
    min-width: 0;
    padding: var(--p-space-6) var(--space-gutter) var(--p-space-8);
  }

  /* The page column is a column: content, then the footer pushed to the bottom. */
  .ui-app__column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100dvh;
  }

  .ui-app__column > .ui-app__main { flex: 1 0 auto; }

  @media (min-width: 60rem) {
    .ui-app {
      display: grid;
      grid-template-columns: 15.5rem minmax(0, 1fr);
    }

    .ui-app__bar { display: none; }

    .ui-app__nav[popover] {
      display: flex;
      width: auto;
      /* `inset` first: it clears the drawer's edges, and would otherwise wipe
         the `top` that sticky needs to hold on to. */
      inset: auto;
      position: sticky;
      top: 0;
      /* Its own height and its own scroll: a long menu must not drag the page. */
      align-self: start;
      height: 100dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .ui-app__main {
      padding: var(--p-space-7) var(--p-space-8) var(--p-space-9);
    }
  }

  .ui-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ui-nav-link {
    display: flex;
    align-items: center;
    gap: var(--p-space-3);
    min-height: 2.75rem;
    padding: 0 var(--p-space-3);
    border-radius: var(--p-radius-sm);
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: 500;
  }

  .ui-nav-link:hover {
    background: var(--color-sunken);
    color: var(--color-heading);
    text-decoration: none;
  }

  .ui-nav-link--account { min-height: 3.25rem; font-size: var(--text-sm); }
  .ui-nav-link--account .ui-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .ui-nav-link[aria-current="page"] {
    background: var(--color-brand-soft);
    color: var(--color-brand);
    font-weight: 600;
  }

  .ui-workspace {
    display: flex;
    align-items: center;
    gap: var(--p-space-3);
    padding: var(--p-space-2);
    border: 1px solid var(--color-line);
    border-radius: var(--p-radius-sm);
    color: var(--color-heading);
    font-weight: 600;
    font-size: var(--text-sm);
  }

  .ui-workspace summary {
    display: flex;
    align-items: center;
    gap: var(--p-space-3);
    width: 100%;
    list-style: none;
    cursor: pointer;
  }

  .ui-workspace summary::-webkit-details-marker { display: none; }

  .ui-workspace__name {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-workspace[open] { flex-direction: column; align-items: stretch; }

  /* ---- Guest pages ------------------------------------------------- */

  .ui-guest {
    --guest-width: 44rem;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  .ui-guest--wide { --guest-width: 80rem; }

  .ui-guest__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--guest-width);
    height: 3.5rem;
    margin-inline: auto;
    padding: 0 var(--p-space-2) 0 var(--space-gutter);
  }

  .ui-guest__bar img {
    height: 1.375rem;
    width: auto;
  }

  /* A guest page starts where an organiser page starts. It used to open 8px
     under the bar while the app opened 24px under its own, so moving between
     the two read as a jump that neither page meant. */
  .ui-guest__main {
    flex-grow: 1;
    width: 100%;
    max-width: var(--guest-width);
    margin-inline: auto;
    padding: var(--p-space-6) var(--space-gutter) var(--p-space-8);
  }

  .ui-guest__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--p-space-3);
    width: 100%;
    max-width: var(--guest-width);
    margin-inline: auto;
    border-top: 1px solid var(--color-line);
    padding: var(--p-space-6) var(--space-gutter) calc(var(--p-space-6) + env(safe-area-inset-bottom));
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .ui-guest__footer a { color: var(--color-muted); }

  /* ---- Signed-out pages: sign in, sign up, codes ------------------- */

  .ui-entrance {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  .ui-entrance__bar {
    display: flex;
    align-items: center;
    height: 3.5rem;
    padding-inline: var(--space-gutter);
  }

  .ui-entrance__bar img { height: 1.375rem; width: auto; }

  .ui-entrance__main {
    flex-grow: 1;
    width: 100%;
    max-width: 27rem;
    margin-inline: auto;
    padding: var(--p-space-4) var(--space-gutter) var(--p-space-8);
  }

  .ui-entrance__logo { height: 5.25rem; width: auto; margin-inline: auto; }
  .ui-entrance__title, .ui-entrance__lede, .ui-entrance__switch, .ui-entrance__note { text-align: center; }

  .ui-entrance__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--p-space-3);
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding: var(--p-space-6) var(--space-gutter) calc(var(--p-space-6) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .ui-messages { margin-bottom: var(--p-space-2); }

  /* allauth adds forms holding only hidden inputs (resend, cancel) that a
     button elsewhere submits; they take no room in the card's rhythm. */
  .ui-entrance__card form:not(:has(:not(input[type="hidden"]))) { display: contents; }
}