/* ===========================================================================
   Brim — guest onboarding surface
   ---------------------------------------------------------------------------
   Loaded alongside brim-app.css, which supplies tokens, buttons, fields,
   cards and the season mosaic. This file owns only what is specific to the
   pre-account flow.

   Protected contract (do not remove without changing the tests that assert it):
     - tests/Http/GuestFirstAcceptanceTest.php requires @media(min-width:820px)
       and that src/views/guest/season.php links this file.
     - tests/Integration/GuestFirstHonestProgressTest.php requires the reading
       state to animate `guest-progress-scan` and forbids simulated
       percentages or staged sub-steps.

   Visual authority: docs/mockups/BRIM-GUEST-FIRST-ONBOARDING-v1.html
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1 · Shell
   Mobile geometry matches the golden reference. Desktop is a real two-column
   layout rather than a phone column centred in empty space.
   --------------------------------------------------------------------------- */

.guest {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "main" "mosaic" "aside";
  background:
    radial-gradient(circle at 86% 8%, rgba(240, 180, 41, .13), transparent 27rem),
    var(--paper);
}

.guest__col   { grid-area: main; }
.guest__wide  { grid-area: mosaic; padding: 0 18px; }
.guest__aside { grid-area: aside; display: none; }

.guest__col {
  width: min(100%, 460px);
  min-height: 100dvh;
  margin: auto;
  padding:
    max(18px, env(safe-area-inset-top))
    18px
    max(22px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.guest__top {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.guest__logo { width: 118px; }
.guest__logo svg { width: 100%; height: auto; }

.gstep { display: none; flex-direction: column; flex: 1; }
.gstep.is-active { display: flex; }

/* ---------------------------------------------------------------------------
   2 · Steps
   --------------------------------------------------------------------------- */

.hero { padding: 58px 0 var(--s6); }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(42px, 12vw, 58px);
  line-height: .96;
  letter-spacing: var(--track-display);
  margin: 0;
  max-width: 10ch;
  color: var(--ink);
}
.hero .eyebrow { color: var(--field); margin-bottom: 11px; }
.hero .lede { margin-top: var(--s4); }

.stephead { padding: 30px 0 22px; }
.stephead h2 {
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  letter-spacing: var(--track-display);
  margin: 0;
  color: var(--ink);
}
.stephead p { color: var(--slate); line-height: 1.55; margin: var(--s3) 0 0; }

/* ---------------------------------------------------------------------------
   3 · Attach
   Attaching and pasting are the same job, so they share one box and one
   position in the layout. Only one panel is mounted at a time, which keeps
   the screen inside a single viewport.
   --------------------------------------------------------------------------- */

.bringin { margin-top: var(--s2); }
.bringin__switch {
  display: flex; gap: var(--s1);
  background: #E8ECE7;
  border-radius: var(--r-pill);
  padding: var(--s1);
  width: 100%;
  margin-bottom: var(--s3);
}
.bringin__switch button {
  flex: 1;
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s3);
  font-size: 12px; font-weight: 700;
  color: var(--slate);
}
.bringin__switch button[aria-selected="true"] {
  background: var(--white);
  color: var(--field);
  box-shadow: var(--lift-1);
}
.bringin__panel[hidden] { display: none; }
.bringin__panel textarea {
  min-height:270px;
  width: 100%;
  border-radius: var(--r-xl);
  border: 1.5px dashed #B8C2BC;
  background: rgba(255, 255, 255, .72);
  padding: var(--s4);
  line-height: 1.55;
  resize: vertical;
}

.drop {
  min-height:270px;
  border: 1.5px dashed #B8C2BC;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .72);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--s6);
  transition: border-color var(--base) var(--ease), background var(--base) var(--ease);
}
.drop.is-dragging { border-color: var(--field); background: var(--white); }
.drop__icon {
  width: 58px; height: 58px;
  border-radius: var(--r-lg);
  background: var(--field-tint);
  display: grid; place-items: center;
  color: var(--field);
  font-size: 28px;
  margin-bottom: var(--s4);
}
.drop strong { font-size: 16px; }
.drop p { margin: var(--s2) 0 0; color: var(--slate); }
.pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 15px; }
.file-input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

/* ---------------------------------------------------------------------------
   4 · Reading state
   The server request is the source of truth. This state is deliberately
   indeterminate: no percentages, no invented sub-steps, no fake stages.
   --------------------------------------------------------------------------- */

.processing { align-items: center; justify-content: center; text-align: center; }

.orbit {
  width: 88px; height: 88px;
  border-radius: 28px;
  background: var(--white);
  display: grid; place-items: center;
  position: relative;
  margin-bottom: var(--s6);
  box-shadow: var(--lift-3);
  color: var(--field);
  font-size: 30px;
}
.orbit::before {
  content: "";
  position: absolute; inset: -7px;
  border: 2px solid var(--line);
  border-top-color: var(--sodium);
  border-radius: 34px;
  animation: brim-spin 1.05s linear infinite;
}
@keyframes brim-spin { to { transform: rotate(360deg); } }

.status { min-height: 44px; margin-top: var(--s3); color: var(--slate); line-height: 1.4; }

.progress {
  position: relative;
  width: min(260px, 82%);
  height: 7px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: var(--s5);
}
.progress i {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 42%;
  display: block;
  background: var(--field);
  border-radius: var(--r-pill);
  animation:guest-progress-scan 1.25s var(--ease) infinite;
}
@keyframes guest-progress-scan {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(275%); }
}

/* Without motion, show a settled indeterminate bar rather than a frozen
   sliver that reads as stalled. */
@media(prefers-reduced-motion:reduce) {
  .progress i { animation: none; width: 100%; opacity: .35; }
}

/* ---------------------------------------------------------------------------
   5 · Preview
   --------------------------------------------------------------------------- */

.team {
  display: flex; gap: var(--s3); align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.team h3 { margin: 0; font: 700 18px var(--display); letter-spacing: var(--track-tight); }
.team p  { margin: 3px 0 0; color: var(--slate); font-size: 12px; }

.preview-card { padding: var(--s5); }
.preview-card .facts { margin-top: 14px; }
.preview-card .note  { margin-top: 14px; }

.coverage {
  display: flex; justify-content: space-between; gap: var(--s3);
  align-items: center;
  font-size: 11px; color: var(--slate);
  margin-top: 10px;
}

.savebox {
  background: var(--field-tint);
  color: var(--on-field-tint);
  border-radius: var(--r-md);
  padding: 13px;
  margin-bottom: 17px;
  font-size: 13px;
  line-height: 1.5;
}
.savebox strong { color: var(--field); }

/* ---------------------------------------------------------------------------
   6 · Supporting points
   --------------------------------------------------------------------------- */

.guest-points { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.guest-points li {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--s3);
  align-items: start; font-size: 12.5px; color: var(--slate); line-height: 1.5;
}
.guest-points strong { display: block; color: var(--ink); font-size: 12.5px; margin-bottom: 2px; }
.guest-points .glyph { width: 26px; height: 26px; border-radius: var(--s2); font-size: 12px; }
.guest__aside--mobile { display: block; padding: var(--s6) 0 0; }

/* ---------------------------------------------------------------------------
   7 · Decision bar
   The primary action never depends on being discovered by scrolling.
   --------------------------------------------------------------------------- */

.actions--dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid; gap: var(--s2);
  padding: var(--s5) 18px max(var(--s4), env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--paper) 26%, var(--paper));
}
.actions--dock .micro { margin: 0; }
.has-dock { padding-bottom: calc(var(--dock-h, 180px) + var(--s6)); }

/* A fixed bar on a landscape phone eats the screen it is trying to help. */
@media (max-height: 560px) {
  .actions--dock { position: static; padding: var(--s4) 0; background: none; }
  .has-dock { padding-bottom: var(--s6); }
}

/* ---------------------------------------------------------------------------
   8 · Desktop
   --------------------------------------------------------------------------- */

@media(min-width:820px) {
  .guest {
    grid-template-columns: minmax(420px, 500px) minmax(0, 1fr);
    grid-template-areas: "main mosaic" "main aside";
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: clamp(32px, 5vw, 80px);
    padding: 0 clamp(32px, 5vw, 72px);
  }

  .guest__col {
    width: 100%;
    max-width: 500px;
    margin: 0;
    padding: 32px 0 48px;
    justify-content: flex-start;
  }
  .guest__top { height: 72px; }

  .guest__wide { padding: 96px 0 0; }
  .guest__wide:empty { display: none; }

  .guest__aside {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
    padding: var(--s6) 0 48px;
    max-width: 620px;
  }
  .guest__aside h2 {
    font: 700 clamp(28px, 2.6vw, 38px)/1.05 var(--display);
    letter-spacing: -.04em;
    color: var(--field);
    margin: 0;
  }
  .guest__aside .lede { font-size: 15px; max-width: 46ch; }
  .guest__aside--mobile { display: none; }

  .guest-points li, .guest-points strong { font-size: 13px; }

  .hero { padding: 40px 0 var(--s6); }
  .hero h1 { font-size: clamp(48px, 3.6vw, 58px); }

  .actions { padding-top: var(--s7); }
  .actions--dock { position: static; padding: 0; background: none; margin-top: var(--s7); }
  .has-dock { padding-bottom: 0; }
}