/*
  The page frame: top bar, the sheet the work sits on, the footer, and the phone tab bar.

  The bar is quiet on purpose. The old one was a saturated blue band across the top of every
  screen; the work is what should carry the colour, and in this app colour means money.
*/

@layer layout {
  .page {
    width: min(100% - var(--s-4), var(--page));
    margin-inline: auto;
  }

  @media (max-width: 47.99em) {
    .page { width: 100%; }
  }

  /* Top bar ---------------------------------------------------------------- */

  .topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding-inline: max(var(--s-4), env(safe-area-inset-left));
  }

  .topbar__inner {
    width: min(100%, var(--page));
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    min-height: 3.5rem;
  }

  .topbar__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-inline-end: auto;
  }

  /* The wordmark ships as white artwork. Rather than sit it on a chip of its own colour, which
     reads as a patch on the bar, it is inked to match the text beside it. */
  .topbar__brand img {
    height: 1.5rem;
    width: auto;
    filter: brightness(0) saturate(100%);
  }

  :root[data-theme="dark"] .topbar__brand img { filter: none; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .topbar__brand img { filter: none; }
  }

  .topbar__toggle {
    display: none;
    background: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: var(--s-2);
    cursor: pointer;
    color: var(--ink);
  }

  .topbar__panel {
    display: contents;
  }

  .topbar__nav,
  .topbar__account {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    list-style: none;
    margin: 0;
    padding: 0;
    /* A name longer than the space left wraps the sections onto another row rather than off the
       side of the page, which is what a row of nowrap links does without this. */
    flex-wrap: wrap;
  }

  .topbar__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink-2);
    white-space: nowrap;
  }

  .topbar__link:hover {
    color: var(--ink);
    background: var(--surface-sunk);
  }

  /* The current section is marked by a rule under it, the way a ledger marks a column. */
  .nav-item.active > .topbar__link {
    color: var(--accent);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--accent);
    border-radius: var(--radius) var(--radius) 0 0;
  }

  /*
    The bar carries a wordmark, seven sections and an account name, which needs about 990px to sit
    on one line. Below that the sections go behind the toggle. The old boundary was 48em, which put
    an iPad in portrait (768px exactly) and in landscape (1024px to 1194px) on the horizontal bar
    with no room for it: portrait ran the sections off the right edge of the page, and landscape
    dropped the account name onto a second row.
  */
  @media (max-width: 61.99em) {
    .topbar__toggle { display: inline-flex; }

    .topbar__panel {
      display: block;
      flex-basis: 100%;
      border-top: 1px solid var(--rule);
      padding-block: var(--s-2);
    }

    .topbar__panel.collapse:not(.show) { display: none; }
    .topbar__panel.collapsing { display: block; }

    .topbar__nav,
    .topbar__account {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }

    .topbar__link {
      padding-block: var(--s-3);
    }

    .nav-item.active > .topbar__link {
      box-shadow: inset 2px 0 0 var(--ink);
    }
  }

  /* The sections sit against the wordmark, the account against the far edge. */
  @media (min-width: 62em) {
    .topbar__account { margin-inline-start: auto; }
  }

  /*
    An iPad in landscape is 1024px to 1194px, which fits the seven sections only once the account
    name gives up its width, so from here to a roomy bar the account shows its icon alone. The name
    stays in the accessibility tree, because the icon on its own does not say whose account it is.
  */
  @media (min-width: 62em) and (max-width: 75.99em) {
    .topbar__link {
      padding-inline: var(--s-2);
      gap: var(--s-1);
    }

    .topbar__account__name {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* The sheet -------------------------------------------------------------- */

  main {
    display: block;
    background: var(--surface);
    padding:
      var(--s-5)
      max(var(--s-4), env(safe-area-inset-right))
      var(--s-7)
      max(var(--s-4), env(safe-area-inset-left));
  }

  @media (min-width: 48em) {
    main {
      margin-block: var(--s-5);
      padding: var(--s-6);
      border: 1px solid var(--rule);
      border-radius: var(--radius-lg);
    }
  }

  /* Phone tab bar ---------------------------------------------------------- */

  .tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom, 0);
    list-style: none;
    margin: 0;
    padding-inline: 0;
  }

  .tabbar .nav-item { flex: 1 1 0; }

  .tabbar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-block: var(--s-2);
    font-size: var(--text-xs);
    text-decoration: none;
    color: var(--ink-2);
    min-height: var(--tap);
  }

  .tabbar .nav-item.active .tabbar__link {
    color: var(--accent);
    font-weight: 700;
  }

  .tabbar__link svg { width: 20px; height: 20px; }

  @media (min-width: 36em) {
    .tabbar { display: none; }
  }

  /* Leave room for the tab bar so it never covers the last row of a list. */
  @media (max-width: 35.99em) {
    body { padding-bottom: 4.5rem; }
  }

  /* Footer ----------------------------------------------------------------- */

  .pagefoot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    justify-content: space-between;
    padding: var(--s-5) var(--s-4);
    font-size: var(--text-sm);
    color: var(--ink-2);
  }

  @media (max-width: 35.99em) {
    .pagefoot { display: none; }
  }

  /* A row of headings and actions that sits above a list. */
  .pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
  }

  .pagehead__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  @media print {
    .topbar, .tabbar, .pagefoot { display: none; }
    main { border: 0; margin: 0; padding: 0; background: #fff; }
  }
}