/* Page shells: the office (sidebar and main), sign-in, the crew's phone column, and the
   customer's sheet under the masthead. Plus the two layout helpers every page uses:
   .stack (a column with gaps) and .row (a line spread across). */

.stack { display: flex; flex-direction: column; gap: var(--space-l); }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-l); }

/* The office */
.office { display: grid; grid-template-columns: 184px minmax(0, 1fr); min-height: 100vh; }
.main { padding: 18px 22px 40px; min-width: 0; }
.mh { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-xl); }
.mh .title { font-size: var(--text-xl); }
.mh .eyebrow + .title { margin-top: var(--space-2xs); }
.mh .mh-sub { margin-top: var(--space-xs); max-width: 70ch; }
.two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.staff .two > .stack { min-width: 0; }
.signin { max-width: 380px; margin: 12vh auto; padding: 0 16px; }

@media (max-width: 900px) {
  .office { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .main { padding: 14px 16px 32px; }
  .two > .stack:last-child { order: -1; }
  .two { grid-template-columns: 1fr; }
}

/* The crew view: one column, a phone in the sun */
.crew-main { max-width: 640px; margin: 0 auto; padding: 14px 16px 48px; display: flex; flex-direction: column; gap: 12px; }

/* The customer's pages */
.customer .masthead { background: var(--white); border-bottom: 1px solid var(--line); padding: 18px 16px 14px; text-align: center; }
.customer .wordmark { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--black); }
.customer .wordmark-name { font-size: 26px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.customer .wordmark-name span { font-weight: 400; }
.customer .wordmark-name b { font-weight: 700; }
.customer .wordmark-rule { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--blue); font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; }
.customer .wordmark-rule::before, .customer .wordmark-rule::after { content: ""; width: 34px; height: 1px; background: var(--blue); }

.customer .sheet { max-width: 760px; margin: 0 auto; padding: 22px 16px 40px; background: var(--white); }
@media (min-width: 800px) {
  .customer .sheet { margin: 28px auto; padding: 36px 40px 44px; border-radius: 12px; box-shadow: 0 1px 2px rgba(22,23,23,.06), 0 12px 32px -18px rgba(22,23,23,.25); }
}

.customer .colophon { padding: 22px 16px 32px; text-align: center; font-size: 12.5px; color: var(--muted); }
.customer .colophon a { white-space: nowrap; }

/* A list with nothing in it yet (shared/_empty). */
.staff .empty-state { margin-top: var(--space-xs); }