/*
  Exposure Assessment — 2026 mobile-first “app chrome” layer
  Loaded ONLY on the public assessment page (index.php).

  Goals:
  - make the UI feel like a native app (sticky app bar, drawer, bottom-sheet modals)
  - move non-essential UI (OpenAI key, about, privacy) out of the main flow
  - keep questions as the primary focus
*/

:root {
  /* Slightly more “app” palette while staying compatible with app.css component styles */
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #0b1220;
  --muted: rgba(11,18,32,0.68);
  --border: rgba(11,18,32,0.14);
  --border2: rgba(11,18,32,0.09);
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.08);

  --ea-appbar-blur: saturate(180%) blur(14px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070b16;
    --card: rgba(255,255,255,0.06);
    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.62);
    --border: rgba(255,255,255,0.16);
    --border2: rgba(255,255,255,0.10);
    --shadow: 0 1px 2px rgba(0,0,0,0.25), 0 22px 60px rgba(0,0,0,0.45);
  }
}

/* Dark-mode hard overrides for components that use explicit light backgrounds in app.css */
@media (prefers-color-scheme: dark) {
  body.ea-assessmentpage .ea-btn,
  body.ea-assessmentpage .ea-ai-pill,
  body.ea-assessmentpage .ea-iconbtn {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border-color: rgba(255,255,255,0.14);
  }

  body.ea-assessmentpage .ea-btn:hover,
  body.ea-assessmentpage .ea-ai-pill:hover,
  body.ea-assessmentpage .ea-iconbtn:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.20);
  }

  body.ea-assessmentpage .exp-input,
  body.ea-assessmentpage .exp-textarea,
  body.ea-assessmentpage .exp-select,
  body.ea-assessmentpage .ea-keybox-input {
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border-color: rgba(255,255,255,0.14);
  }

  body.ea-assessmentpage .exp-choice {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
    color: var(--text);
  }

  body.ea-assessmentpage .exp-choice:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.20);
  }

  body.ea-assessmentpage .exp-radio,
  body.ea-assessmentpage .exp-check {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
  }
}

body.ea-assessmentpage {
  /* PWA polish */
  color-scheme: light dark;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(37,99,235,0.16) 0%, rgba(37,99,235,0) 60%),
    radial-gradient(900px 520px at 88% 0%, rgba(34,197,94,0.10) 0%, rgba(34,197,94,0) 60%),
    var(--bg);
}

/* Keep focus on content by tightening the “chrome” spacing */
body.ea-assessmentpage .ea-shell {
  gap: 16px;
}

body.ea-assessmentpage .ea-main {
  min-width: 0;
}

/* App bar (sticky, compact) */
.ea-appbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 6px 10px 6px;
  margin: 0 0 8px 0;
  background: rgba(246,247,251,0.72);
  border-bottom: 1px solid var(--border2);
  backdrop-filter: var(--ea-appbar-blur);
}

@media (prefers-color-scheme: dark) {
  .ea-appbar {
    background: rgba(7,11,22,0.68);
  }
}

.ea-appbar-center {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ea-appbar-title {
  font-weight: 1000;
  font-size: 1.02rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ea-appbar-sub {
  font-size: 0.9rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ea-appbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Make icon buttons more “app-like” */
body.ea-assessmentpage .ea-iconbtn.ea-appbar-btn {
  border-radius: 14px;
  padding: 10px 12px;
  border-color: var(--border2);
  background: rgba(17,24,39,0.02);
}

body.ea-assessmentpage .ea-iconbtn.ea-appbar-btn:hover {
  background: rgba(37,99,235,0.06);
  border-color: rgba(37,99,235,0.22);
}

/* AI status pill */
.ea-ai-pill {
  appearance: none;
  border: 1px solid var(--border2);
  background: rgba(17,24,39,0.02);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  font-size: 0.9rem;
  line-height: 1;
}

.ea-ai-pill:hover {
  background: rgba(37,99,235,0.06);
  border-color: rgba(37,99,235,0.22);
}

.ea-ai-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #9ca3af;
  box-shadow: 0 0 0 3px rgba(156,163,175,0.18);
}

.ea-ai-dot.on {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}

.ea-ai-dot.warn {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.20);
}

.ea-ai-dot.off {
  background: #9ca3af;
  box-shadow: 0 0 0 3px rgba(156,163,175,0.18);
}

/* Install button: small and unobtrusive */
.ea-install-btn {
  padding: 10px 12px;
  border-radius: 999px;
}

/* Stepper: make it feel like a top “tab rail” */
body.ea-assessmentpage .exp-steppercard.exp-steppercard-app {
  padding: 0;
  border: 1px solid var(--border2);
  border-radius: 18px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: var(--ea-appbar-blur);
}

@media (prefers-color-scheme: dark) {
  body.ea-assessmentpage .exp-steppercard.exp-steppercard-app {
    background: rgba(255,255,255,0.04);
  }
}

body.ea-assessmentpage .exp-stepper {
  padding: 10px 10px 12px;
}

/* Sticky bottom nav inside question cards should respect iOS safe-area */
body.ea-assessmentpage .exp-nav.exp-nav-sticky {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* Drawer + scrim (mobile) */
.ea-scrim {
  display: none;
}

@media (max-width: 860px) {
  body.ea-assessmentpage .ea-shell {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
    max-width: none;
  }

  body.ea-assessmentpage .ea-main {
    padding: 0 14px 22px;
  }

  /* Convert the left rail into an off-canvas drawer instead of hiding it */
  body.ea-assessmentpage .ea-left {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(340px, 86vw);
    max-width: 92vw;
    transform: translateX(-112%);
    transition: transform 180ms ease;
    z-index: 90;
    background: rgba(255,255,255,0.92);
    backdrop-filter: var(--ea-appbar-blur);
    border-right: 1px solid var(--border2);
    box-shadow: 0 24px 80px rgba(0,0,0,0.28);
    padding: calc(14px + env(safe-area-inset-top)) 14px 14px;
    overflow-y: auto;
  }

  @media (prefers-color-scheme: dark) {
    body.ea-assessmentpage .ea-left {
      background: rgba(7,11,22,0.92);
    }
  }

  body.ea-drawer-open .ea-left {
    transform: translateX(0);
  }

  body.ea-assessmentpage .ea-right {
    display: none;
  }

  .ea-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.44);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 80;
  }

  body.ea-drawer-open .ea-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  body.ea-drawer-open {
    overflow: hidden;
  }
}

/* Hide the hamburger button on desktop (sidebar already visible) */
@media (min-width: 861px) {
  #eaMenuToggle { display: none; }
}

/* Modal system */
.ea-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.ea-modal.open {
  display: flex;
}

.ea-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.46);
  backdrop-filter: blur(6px);
}

.ea-modal-card {
  position: relative;
  width: min(720px, 100%);
  max-height: min(84vh, 760px);
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border2);
  background: #fff;
  box-shadow: 0 30px 90px rgba(0,0,0,0.30);
}

@media (prefers-color-scheme: dark) {
  .ea-modal-card {
    background: rgba(7,11,22,0.96);
  }
}

.ea-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border2);
  background: rgba(255,255,255,0.75);
  backdrop-filter: var(--ea-appbar-blur);
}

@media (prefers-color-scheme: dark) {
  .ea-modal-head {
    background: rgba(7,11,22,0.70);
  }
}

.ea-modal-title {
  font-weight: 1000;
  font-size: 1.06rem;
  line-height: 1.15;
}

.ea-modal-sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.92rem;
}

.ea-modal-body {
  padding: 14px 16px 18px;
  overflow: auto;
}

.ea-modal-section + .ea-modal-section { margin-top: 16px; }
.ea-modal-h { font-weight: 1000; }

/* Mobile: present modals as bottom sheets */
@media (max-width: 720px) {
  .ea-modal {
    align-items: flex-end;
    padding: 0;
  }

  .ea-modal-card {
    width: 100%;
    max-height: calc(100vh - env(safe-area-inset-top));
    border-radius: 22px 22px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  .ea-modal-head {
    padding-top: calc(14px + env(safe-area-inset-top));
  }
}

body.ea-modal-open {
  overflow: hidden;
}

/* Keybox inside a modal should feel native (no nested shadows) */
.ea-modal .ea-keybox {
  min-width: 0;
  width: 100%;
  box-shadow: none;
  background: transparent;
  border: none;
  padding: 0;
}

body.ea-assessmentpage .ea-keybox-input {
  flex: 1 1 260px;
}

/* Minimal collapse styles (admin has its own, this is for the public page) */
.ea-collapse {
  border: 1px solid var(--border2);
  border-radius: 14px;
  background: rgba(17,24,39,0.01);
  overflow: hidden;
}

.ea-collapse-inline {
  display: inline-block;
}

.ea-collapse-sum {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 950;
  color: var(--text);
}

.ea-collapse-sum::-webkit-details-marker { display: none; }

.ea-collapse-body {
  padding: 12px;
  border-top: 1px solid var(--border2);
}