/*
 * THE FIRST SCREEN A CUSTOMER SEES — `INT-157`, the flyer fix. Shared by /login
 * (what the printed flyer's QR code opens) and /portal's signed-out screens, so
 * the two cannot drift apart. Phillip approved the design.
 *
 *   Phone (≤ 640px): the photo across the top, ~44% of the screen's height
 *   (260–360px), a white panel overlapping its bottom edge by 56px, the logo
 *   centred below. No brand bar.
 *   Wider: the photo fills the first screen behind everything; the panel on the
 *   left (max 420px) with the logo on a white card the same width below it.
 *
 * ⚠️ THE PHOTO IS DECORATION. It carries no words and `alt=""`, and the ground
 * under it is the ink — so with the photo missing (blocked, slow, offline) the
 * page reads exactly the same: the panel is white on its own, and the white
 * staff link sits on the dark ground the photo would have covered.
 *
 * Colours are theme tokens; nothing here is a brand hex.
 */

.wl-first {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--brand-ink);
}
/* The theme centres every page in 900px with side padding; the photo screen is
   edge to edge. /login wears this always, /portal only while signed out — its
   account pages keep the theme's body exactly as before. */
body.wl-out { max-width: none; padding: 0 0 40px; }

/* `hidden` must win over the display these set — /portal switches between this
   screen and its brand bar with the attribute. */
.wl-first[hidden], .brandbar[hidden] { display: none; }
.wl-photo { display: block; }
.wl-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wl-col {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.wl-panel {
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  padding: 18px 18px 8px;
  box-shadow: 0 10px 30px rgb(16 24 32 / .22), 0 2px 6px rgb(16 24 32 / .12);
}
.wl-panel h1 { font-size: 22px; margin: 0 0 14px; color: var(--text); }
.wl-panel h2 { font-size: 20px; margin: 0 0 14px; color: var(--text); }

/* The two customer doors, as links (they go somewhere) drawn like the theme's
   buttons. ⚠️ Each states its colour with its background — a link takes the
   link colour otherwise, and on the brand that is blue on blue. */
.wl-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: 12px 20px;
  border-radius: 8px; font-size: 16px; font-weight: 700; text-decoration: none;
  background: var(--brand); color: var(--panel); border: 1px solid var(--brand);
}
.wl-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.wl-btn.wl-ghost { background: var(--panel); color: var(--brand-ink); border-color: var(--line); margin-top: 10px; }
.wl-btn.wl-ghost:hover { background: var(--panel2); }
.wl-btn[hidden] { display: none; }

/* Under the buttons, under a thin line: who to ask. The two lines are the same
   size as the question, not bold, in the link colour, each a 44px target. */
.wl-help { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; }
.wl-help p { margin: 0 0 4px; color: var(--text); font-size: 15px; font-weight: 400; }
.wl-help a {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--brand); font-size: 15px; font-weight: 400; text-decoration: none;
  overflow-wrap: anywhere;
}
.wl-help a:hover { text-decoration: underline; }
.wl-help svg { width: 18px; height: 18px; flex: none; }

.wl-logo { display: flex; justify-content: center; }
.wl-logo .wordmark { width: 100%; display: flex; justify-content: center; }
.wl-logo .wordmark img { display: block; height: auto; }

/* "Staff and drivers sign in below ↓" — small and muted: a door for the people
   who know it is there, not an offer to the customer holding the flyer. */
.wl-staff {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; color: var(--muted); text-decoration: none;
}
.wl-staff:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- phone */
@media (max-width: 640px) {
  .wl-first { background: var(--bg); }
  .wl-photo { height: clamp(260px, 44vh, 360px); background: var(--brand-ink); }
  .wl-photo img { object-position: 88% 40%; }
  .wl-col { padding: 0 16px; }
  .wl-panel { margin-top: -56px; }
  .wl-logo { margin: 14px 0 0; }
  .wl-logo .wordmark img { width: 58vw; max-width: 230px; }
  .wl-staff { align-self: center; margin-top: auto; }
}

/* ---------------------------------------------------------------- wider */
@media (min-width: 641px) {
  .wl-photo { position: absolute; inset: 0; }
  .wl-photo img { object-position: 72% 45%; }
  .wl-col { width: 420px; max-width: calc(100% - 32px); margin: 8vh 0 0 6vw; }
  .wl-logo {
    margin-top: 14px; padding: 18px 20px; background: var(--panel);
    border-radius: var(--radius); box-shadow: 0 10px 30px rgb(16 24 32 / .22);
  }
  .wl-logo .wordmark img { width: 230px; max-width: 100%; }
  .wl-staff {
    align-self: flex-start; margin: auto 0 18px; color: var(--panel);
    text-shadow: 0 1px 3px rgb(16 24 32 / .8);
  }
}