/* ══════════════════════════════════════════════
   CCA PORTAL — MAIN STYLES
   Matches cca-assessment-results-v1-2 exactly
   ══════════════════════════════════════════════ */

:root {
  --coral: #F4845F;
  --teal: #2BBFB0;
  --text: #1A1A1A;
  --text-mid: #222;
  --text-light: #555;
  --border: rgba(0,0,0,0.1);
  --bg: #ffffff;
  --bg-warm: #FAFAF8;
  --radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── SCREENS ── */
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; }

/* ── LOADING ── */
#loading-screen { align-items: center; justify-content: center; }
.loading-content { text-align: center; }
.loading-spinner {
  width: 28px; height: 28px;
  border: 2px solid var(--border);
  border-top-color: var(--coral);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-light);
}

/* ── LOGIN ── */
#login-screen { align-items: center; justify-content: center; padding: 40px 20px; }

.login-box { width: 100%; max-width: 380px; text-align: center; }

.login-logo { height: 56px; width: auto; margin-bottom: 24px; }

.login-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 600; color: var(--text);
  letter-spacing: 0.04em; margin-bottom: 6px; line-height: 1.2;
}

.login-sub {
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-light); margin-bottom: 32px;
}

.login-field { margin-bottom: 12px; text-align: left; }

.login-field label {
  display: block; font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-light); margin-bottom: 6px;
}

.login-field input {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif; font-size: 14px;
  color: var(--text); background: var(--bg-warm);
  transition: border-color 0.2s; -webkit-appearance: none;
}

.login-field input:focus { outline: none; border-color: var(--teal); }

.login-btn {
  width: 100%; padding: 13px;
  background: var(--coral); color: #fff; border: none;
  border-radius: var(--radius); font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer; margin-top: 8px;
  transition: background 0.2s;
}
.login-btn:hover { background: #e06b45; }
.login-btn:disabled { background: #ccc; cursor: not-allowed; }

.login-error {
  font-size: 12px; color: #c0392b;
  margin-top: 10px; min-height: 18px; text-align: center;
}

.login-footer {
  margin-top: 32px; font-size: 10px;
  color: var(--text-light); letter-spacing: 0.1em;
}

/* ── APP HEADER ── */
.app-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 0 28px; display: flex; align-items: center;
  height: 80px; gap: 16px;
}

.header-brand {
  display: flex; align-items: center; flex-shrink: 0;
}

.header-logo-img { height: 56px; width: auto; flex-shrink: 0; }

.header-stars { height: 40px; width: auto; flex-shrink: 0; }

.header-wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 600;
  color: var(--text); letter-spacing: 0.04em;
  line-height: 1.1; white-space: nowrap;
}

.header-center { flex: 1; text-align: right; padding-right: 16px; }

.header-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(15px, 2.5vw, 22px);
  font-weight: 500; color: var(--text); letter-spacing: 0.05em;
}

.header-name {
  font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-light);
  margin-top: 3px;
}

.header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.header-btn {
  padding: 6px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); font-family: 'DM Sans', sans-serif;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; background: transparent; color: var(--text-light);
  transition: all 0.2s; white-space: nowrap;
}
.header-btn:hover { border-color: var(--coral); color: var(--coral); }

.header-btn-outline {
  border-color: var(--coral);
  color: var(--coral);
}
.header-btn-outline:hover { background: var(--coral); color: #fff; }

.header-btn-signout {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}
.header-btn-signout:hover { background: #e06b45; border-color: #e06b45; }

/* ── TAB NAV ── */
.tab-nav {
  display: flex; border-bottom: 1px solid var(--border);
  background: var(--bg); overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-shrink: 0;
  justify-content: center;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  flex-shrink: 0; padding: 10px 18px 11px;
  font-family: 'DM Sans', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mid); border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--coral); border-bottom-color: var(--coral); }

/* ── TAB PANELS ── */
.tab-panel { display: none; flex: 1; overflow-y: auto; }
.tab-panel.active { display: block; }

.page { max-width: 880px; margin: 0 auto; padding: 32px 28px 80px; }

/* ── TYPOGRAPHY ── */
.section-eyebrow {
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-light); margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
}
.section-eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 600; color: var(--text); line-height: 1.2; margin-bottom: 20px;
}

.section-intro {
  font-size: 15px; line-height: 1.75;
  color: var(--text-mid); margin-bottom: 28px;
}

.report-footer {
  text-align: center; padding: 24px 0 0;
  border-top: 1px solid var(--border); margin-top: 32px;
}
.report-footer p { font-size: 10px; color: var(--text-light); letter-spacing: 0.1em; }

/* ── PHONE HEADER ──
   On narrow screens the logo, buttons and module switcher no longer fit on one
   line. The logo shrinks, the buttons stay at the right, and the switcher
   drops to its own full-width row. (Selectors are specific enough to win over
   codes.css, which loads after this file.) */
/* Tablets (and the report page, which has extra buttons): logo and buttons on
   the first row, the switcher centered on a second row. */
@media (max-width: 1260px) {
  .app-header { height: auto; min-height: 64px; flex-wrap: wrap; padding: 8px 20px; gap: 6px 12px; }
  .app-header .header-brand { order: 1; flex: 1 1 0; min-width: 0; }
  .app-header .header-logo-img { height: auto; max-height: 48px; max-width: 100%; object-fit: contain; object-position: left center; }
  .app-header .header-actions { order: 2; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .app-header .header-center { order: 3; flex: 1 1 100%; padding-right: 0; text-align: center; }
}
@media (max-width: 700px) {
  .app-header { padding: 8px 12px; gap: 8px 10px; }
  .app-header .header-logo-img { max-height: 38px; }
  .app-header .header-btn { padding: 6px 8px; font-size: 9px; letter-spacing: .08em; }
  .app-header .module-switcher { display: flex; width: 100%; padding: 3px; gap: 2px; }
  .app-header .module-pill { flex: 1 1 0; min-width: 0; padding: 7px 2px; font-size: 9.5px; letter-spacing: .05em; }
  #welcome-screen .welcome-header { padding: 10px 12px; gap: 10px; }
  #welcome-screen .welcome-logo { flex: 1 1 0; min-width: 0; height: auto; max-height: 38px; max-width: 100%; object-fit: contain; object-position: left center; }
  #welcome-screen .welcome-header-actions { gap: 6px; }
  #welcome-screen .header-btn { padding: 6px 8px; font-size: 9px !important; letter-spacing: .08em; }
}

/* ── PRINT ── */
@media print {
  /* Hide every full-screen view, then re-show only the report shell.
     This prevents the login, password-reset, assessment questionnaire,
     and loading screens from leaking onto the printed PDF. */
  .screen { display: none !important; min-height: 0 !important; }
  #app-screen { display: block !important; min-height: 0 !important; }

  /* Hide app chrome */
  .app-header,
  .tab-nav,
  .header-actions,
  #admin-banner,
  #take-assessment-btn,
  #print-btn,
  .report-footer,
  .nav-btn,
  .assessment-nav,
  #back-btn,
  #next-btn,
  .progress-cancel { display: none !important; }

  /* Show every report section in order. ID selectors are required to
     beat the on-screen rule `.tab-panel:not(.active) { display: none }`. */
  #tab-map,
  #tab-center,
  #tab-truth,
  #tab-gateway,
  #tab-spiral {
    display: block !important;
    page-break-after: always;
    break-after: page;
  }
  #tab-spiral {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Never print the admin panel or the no-results placeholder */
  #tab-admin,
  #tab-no-results { display: none !important; }

  .page { max-width: 100% !important; padding: 0 !important; }
  body { background: #fff !important; }

  /* Preserve filled bars and badge colors in the printed PDF */
  .loc-bar-bg,
  .loc-bar-fill,
  .loc-color-bar,
  .badge-low,
  .badge-mid,
  .badge-high,
  .badge-primary {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* Orientation color strip on the left edge (set --ori with oriColor() from data.js) */
.ori-edge { box-shadow: inset 5px 0 0 var(--ori, transparent); }