/* 02-shell.css. The frame every page sits in: the skip link, the sticky sidebar, the
   brand block, the nav, the account foot, and the strip they become under 900px. */

/* ==========================================================================
   The shell: a sidebar and a page, matching the Service System.
   ==========================================================================

   Eric, 2026-08-21, holding ticket.stedward.org next to this one: "this is the
   clean, organized, way I like seeing data." What the two apps share now is
   where things ARE. Somebody moving between the parish's own systems should not
   have to find the navigation twice.

   The navigation left rather than across the top is the whole of it. A top bar
   spends the widest part of the screen on five links and pushes the first
   number below the fold; a column spends the narrowest part on them and gives
   the page the rest.
*/
.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--navy); color: #fff; padding: 0.6rem 0.9rem;
  border-radius: 0 0 4px 0; text-decoration: none; font-weight: 600;
}
.skiplink:focus { left: 0; }

.shell { display: flex; align-items: flex-start; min-height: 100vh; }

/* STICKY and one viewport tall, not as tall as the page. Stretched to the
   shell it grew to the full document height, so "Other apps" and the account
   block sat thousands of pixels below the fold and the navigation scrolled away
   from anybody reading the bottom of a long dashboard. */
.side {
  flex: 0 0 15rem; width: 15rem;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 1.25rem 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.brand { display: block; text-decoration: none; padding: 0 0.5rem; }
.brand-org {
  display: block; font-weight: 700; line-height: 1.2;
  color: var(--navy); font-size: var(--step-0);
}
.brand-app {
  display: block; margin-top: 0.2rem;
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

.side nav { display: flex; flex-direction: column; gap: 0.15rem; }
.side nav a {
  display: block; padding: 0.5rem 0.6rem; border-radius: 5px;
  color: var(--ink); text-decoration: none; font-size: var(--step--1);
}
.side nav a:hover { background: var(--parchment); }
.side nav a[aria-current="page"] {
  background: var(--parchment); font-weight: 600; color: var(--navy);
  box-shadow: inset 3px 0 0 var(--emerald);
}

.side-group { margin-top: auto; }
.side-label {
  margin: 0 0 0.35rem; padding: 0 0.6rem;
  font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.side-apps { list-style: none; margin: 0; padding: 0; }
.side-apps a {
  display: block; padding: 0.3rem 0.6rem;
  font-size: var(--step--2); color: var(--muted); text-decoration: none;
}
.side-apps a:hover { color: var(--emerald); text-decoration: underline; }

.side-foot {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: 0.85rem 0.6rem 0;
}
.side-avatar {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-size: var(--step--2); font-weight: 700;
}
.side-who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.side-who strong { font-size: var(--step--1); color: var(--navy); }
.side-who .muted { font-size: var(--step--2); }
.side-out { font-size: var(--step--2); width: 100%; margin-top: 0.15rem; }

/* Under 900px the column becomes a strip across the top, because a 15rem
   sidebar on a 390px phone is most of the phone. */
@media (max-width: 900px) {
  .shell { display: block; }
  .side {
    width: auto; flex: none;
    position: static; height: auto; overflow: visible;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 0.5rem 1rem;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 0.8rem 1rem;
  }
  .brand { padding: 0; }
  .brand-org { font-size: var(--step--1); }
  /* One line across the top strip instead of two. The space before the <br> in
     base.html is load-bearing: without it the break is the only thing holding
     the words apart and hiding it reads "St. EdwardChurch & School" on every
     phone. It cost nothing on the two-line rendering, where a space at the end
     of a line collapses. */
  .brand-org br { display: none; }
  .side nav { flex-direction: row; flex-wrap: wrap; gap: 0.15rem 0.4rem; }
  .side nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--emerald); }
  .side-group { margin-top: 0; width: 100%; }
  .side-apps { display: flex; flex-wrap: wrap; gap: 0 0.9rem; }
  .side-foot { width: 100%; border-top: 0; padding-top: 0; }
  .side-out { width: auto; margin-top: 0; margin-left: auto; }
  main { padding: 1.25rem 1rem 3rem; }
}