/** App shell: header, sidebar, main region, and the auth/onboarding layouts. */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "brand  header"
    "side   main";
  height: 100vh;
  height: 100dvh;
}

/* ---------------- header ---------------- */

.brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  border-right: var(--border-width) var(--border-style) var(--border);
  border-bottom: var(--border-width) var(--border-style) var(--border);
  background: var(--surface);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: var(--letter-display);
}
.brand-mark { font-size: 1.3em; line-height: 1; }

.header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--surface);
  border-bottom: var(--border-width) var(--border-style) var(--border);
  min-width: 0;
}

.header-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-display);
  min-width: 0;
}

.header-spacer { flex: 1; }

/* ---------------- sidebar ---------------- */

.sidebar {
  grid-area: side;
  background: var(--surface);
  border-right: var(--border-width) var(--border-style) var(--border);
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.sidebar-section { display: flex; flex-direction: column; gap: var(--sp-2); }
.sidebar-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---------------- main ---------------- */

.main {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.page-narrow { max-width: 760px; }

.page-header { display: flex; flex-direction: column; gap: var(--sp-1); }

/* ---------------- mobile ---------------- */

/*
 * The menu button exists only where the menu does not.
 *
 * Written as `.header .sidebar-toggle` for specificity rather than tidiness:
 * `.btn` sets `display: inline-flex`, components.css loads after this file, and
 * at equal weight the later rule wins. A bare `.sidebar-toggle { display: none }`
 * therefore did nothing at all, and the button was drawn at every width — a
 * button that opens a sidebar, sitting next to the open sidebar.
 */
.header .sidebar-toggle { display: none; }
.sidebar-scrim { display: none; }

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas:
      "header"
      "main";
  }

  .brand { display: none; }
  .header .sidebar-toggle { display: inline-flex; }

  /*
   * And not while the drawer is open, which is the same rule again: the drawer
   * is fixed to the left edge and covers the button anyway, so this is mostly
   * about taking a control nobody can see back out of the tab order. Escape and
   * the scrim are what close it — see closeSidebar() in shell.js.
   */
  .app.sidebar-open .header .sidebar-toggle { display: none; }

  /* Sidebar becomes an off-canvas drawer. */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 85vw);
    z-index: 90;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .app.sidebar-open .sidebar { transform: none; }
  .app.sidebar-open .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 89;
  }

  .main { padding: var(--sp-3); }
  .header { padding: 0 var(--sp-3); }
}

/* ---------------- auth & onboarding shell ---------------- */

.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  /* A soft accent wash so the sign-in page is not a bare white sheet. */
  background:
    radial-gradient(1000px 500px at 15% -10%, var(--accent-soft), transparent 65%),
    radial-gradient(800px 450px at 100% 110%, var(--accent-soft), transparent 60%),
    var(--bg);
}

.auth-card {
  width: min(460px, 100%);
  background: var(--surface);
  border: var(--border-width) var(--border-style) var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.auth-card-wide { width: min(620px, 100%); }

.auth-head { display: flex; flex-direction: column; gap: var(--sp-2); text-align: center; }
.auth-logo { font-size: 2.4rem; line-height: 1; }

.auth-alt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-subtle);
  font-size: var(--fs-sm);
}
.auth-alt::before, .auth-alt::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-footer { text-align: center; font-size: var(--fs-sm); color: var(--text-muted); }

/* Survey step: fixed min height so the progress bar does not jump between
   steps with different numbers of fields. */
.survey-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 260px;
}
.survey-progress { display: flex; flex-direction: column; gap: var(--sp-2); }
.survey-nav { display: flex; gap: var(--sp-2); align-items: center; }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-2);
}
.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border: var(--border-width) var(--border-style) var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.choice:hover { border-color: var(--border-strong); background: var(--surface-2); }
.choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.choice-emoji { font-size: 1.5rem; line-height: 1; }
.choice-label { font-weight: var(--fw-medium); font-size: var(--fs-sm); }

/* ---------------- guide / tour ---------------- */

.guide-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.guide-item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: var(--border-width) var(--border-style) var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.guide-item-icon { font-size: 1.5rem; line-height: 1.2; flex: none; }
.guide-item-body { display: flex; flex-direction: column; gap: var(--sp-1); }
.guide-item-title { font-weight: var(--fw-semibold); }

.tour-spotlight {
  position: fixed;
  border-radius: var(--radius-lg);
  /* A single huge shadow dims everything except the cut-out. */
  box-shadow: 0 0 0 9999px var(--overlay);
  pointer-events: none;
  z-index: 150;
  transition: all var(--dur) var(--ease);
}
.tour-popover {
  position: fixed;
  z-index: 151;
  width: min(330px, calc(100vw - 2rem));
  background: var(--surface);
  border: var(--border-width) var(--border-style) var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.tour-dots { display: flex; gap: 5px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.tour-dot.is-active { background: var(--accent); width: 16px; border-radius: var(--radius-pill); }

/* ---------------- public (outsider) view ---------------- */

.public-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  align-items: center;
}
.public-notice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--info-soft);
  color: var(--info);
  font-size: var(--fs-sm);
  max-width: 680px;
}