/* ============================================================
   AskHrAI — State Compliance Checker Styles
   Aesthetic: Editorial / data-journalism — crisp, authoritative
   ============================================================ */

/* ── Base ──────────────────────────────────────────────────── */
.compliance-page {
  font-family: var(--f-ui);
  background: var(--c-bg);
  min-height: 100vh;
  color: var(--c-ink);
}

/* ── Nav ───────────────────────────────────────────────────── */
.comp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 2rem;
  /* Was a hardcoded #fff that didn't invert — with .comp-logo's text color
     (var(--c-ink)) correctly going near-white in dark mode, that left
     near-white text on a still-white bar. This file's rule loads after
     main.css's own (already-fixed) .comp-nav rule and was winning the
     cascade on equal specificity. */
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.comp-logo {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1.05rem; color: var(--c-ink);
}
.comp-logo strong { color: #C2410C; }
.comp-nav-right { display: flex; align-items: center; gap: .625rem; }

/* ── Hero ──────────────────────────────────────────────────── */
.comp-hero {
  background: var(--c-dark);
  padding: 4rem 1.5rem 3.5rem;
  position: relative;
  overflow: hidden;
}
.comp-hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,.3) 0%, transparent 65%);
  pointer-events: none;
}
.comp-hero::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(14,165,233,.15) 0%, transparent 65%);
  pointer-events: none;
}
.comp-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.comp-hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem 1rem;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 700; color: #e5e5e5;
  margin-bottom: 1.5rem;
  letter-spacing: .04em;
}
.chb-dot {
  width: 7px; height: 7px;
  background: #34d399; border-radius: 50%;
  animation: pulseGreen 2s infinite;
}
@keyframes pulseGreen {
  0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); }
  50%      { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
}

.comp-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -.03em;
}
.comp-hero h1 em { font-style: italic; color: #e5e5e5; }
.comp-hero > .comp-hero-inner > p {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.6);
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* ── Form card ─────────────────────────────────────────────── */
.comp-form-card {
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  margin-bottom: 1.5rem;
}

.comp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
/* Each grid cell — never had its own rule, so a cell's label+control just
   ran together with no vertical spacing between them. */
.comp-field { display: flex; flex-direction: column; }

.comp-label {
  display: flex; align-items: center; gap: .375rem;
  font-size: .8rem; font-weight: 700; color: var(--c-ink);
  margin-bottom: .5rem;
}
.comp-label i { color: var(--c-indigo); }
.comp-optional { font-weight: 400; color: var(--c-ink-4); }

.comp-select-wrap { position: relative; }
.comp-select {
  width: 100%;
  padding: .75rem 1rem;
  background: var(--c-bg-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  font-size: .9rem; color: var(--c-ink);
  font-family: var(--f-ui);
  cursor: pointer; outline: none;
  transition: var(--transition);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  padding-right: 2.25rem;
}
.comp-select:focus { border-color: var(--c-indigo); background-color: var(--c-surface); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }

/* Size buttons */
.comp-size-btns {
  display: flex; flex-wrap: wrap; gap: .375rem;
}
.comp-size-btn {
  padding: .5rem .875rem;
  background: var(--c-bg-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: .78rem; font-weight: 600; color: var(--c-ink-3);
  cursor: pointer; transition: var(--transition);
  white-space: nowrap;
}
.comp-size-btn:hover { border-color: var(--c-indigo); color: var(--c-indigo); }
.comp-size-btn.active {
  background: var(--c-indigo); border-color: var(--c-indigo);
  color: #fff;
}

/* Submit */
.comp-submit {
  width: 100%;
  padding: calc(1.125rem - 2px);
  background: var(--c-dark);
  color: #fff;
  border-radius: var(--r-xl);
  border: 2px solid var(--orange);
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  transition: var(--transition);
  cursor: pointer;
}
.comp-submit:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); }
.comp-submit:active:not(:disabled) { background: var(--orange-dark); border-color: var(--orange-dark); }
.comp-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Loading state */
.comp-loading { text-align: center; padding: 2rem 1rem; }
.cl-spinner {
  position: relative;
  width: 72px; height: 72px;
  margin: 0 auto 1.5rem;
}
.cls-ring {
  position: absolute; inset: 0;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-indigo);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cls-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--c-indigo);
}
.comp-loading p { font-size: 1rem; font-weight: 600; color: var(--c-ink); margin-bottom: 1rem; }
.cl-progress {
  height: 4px; background: var(--c-border);
  border-radius: var(--r-pill); overflow: hidden; margin-bottom: 1rem;
}
.clp-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--c-indigo), #525252);
  border-radius: var(--r-pill);
  transition: width .5s ease;
}
.cl-steps { display: flex; justify-content: center; gap: .625rem; flex-wrap: wrap; }
.cls-step {
  font-size: .72rem; font-weight: 600; padding: .2rem .625rem;
  border-radius: var(--r-pill); background: var(--c-bg-2);
  color: var(--c-ink-4); transition: all .3s ease;
}
.cls-step.active { background: var(--c-indigo-xl); color: var(--c-indigo); }

/* Trust bar */
.comp-trust {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  font-size: .78rem; color: rgba(255,255,255,.4);
}
.comp-trust i { color: rgba(255,255,255,.7); }

/* ── Results section ───────────────────────────────────────── */
.comp-results { background: var(--c-bg-2); min-height: 100vh; padding: 2.5rem 1.5rem; }
.comp-results-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }

/* Header */
.cr-header {
  background: var(--c-dark);
  border-radius: var(--r-2xl);
  padding: 2rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  flex-wrap: wrap;
}
/* .cr-header-left groups breadcrumb+heading as one flex item so the score
   ring on the right doesn't get squeezed between individual children. */
.cr-header-left { flex: 1 1 320px; min-width: 0; }
.cr-breadcrumb { margin-bottom: .75rem; }
.cr-back-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .8rem; color: rgba(255,255,255,.45);
  transition: var(--transition); cursor: pointer; background: none; border: none;
}
.cr-back-btn:hover { color: #fff; }
/* Public shared-report page (compliance-results.ejs) — the "this report
   was shared with you" banner and its meta line had zero rules, so the
   icon and text ran together with no background/spacing on a page a
   first-time visitor (not a logged-in user) lands on directly. */
.shared-report-banner {
  display: flex; align-items: center; gap: .625rem;
  background: var(--c-indigo-xl); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: .875rem 1.25rem;
  font-size: .875rem; color: var(--c-ink-2); margin-bottom: 1.5rem;
}
.shared-report-banner i { color: var(--c-indigo); flex-shrink: 0; }
.shared-report-banner a { color: var(--c-indigo); font-weight: 600; }
.cr-shared-meta { font-size: .875rem; color: rgba(255,255,255,.6); margin-top: .375rem; }
.cr-header h2 { font-size: 2rem; color: #fff; margin-bottom: .5rem; }
.cr-summary { font-size: .9375rem; color: rgba(255,255,255,.6); line-height: 1.65; max-width: 480px; }

/* Score ring */
.cr-score-wrap { text-align: center; flex-shrink: 0; }
.cr-score {
  position: relative;
  width: 120px; height: 120px;
  margin: 0 auto .75rem;
}
.score-svg { width: 100%; height: 100%; }
.score-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.score-num { font-family: var(--f-display); font-size: 2rem; font-weight: 700; color: #fff; line-height: 1; }
.score-label { font-size: .7rem; color: rgba(255,255,255,.5); }
#scoreCircle { transition: stroke-dashoffset .05s ease, stroke .3s ease; }
.cr-score-label { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.7); }

/* Stats row */
.cr-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;
}
.crs-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 1.25rem;
  text-align: center;
  border-top: 4px solid transparent;
}
.crs-high   { border-top-color: #ef4444; }
.crs-medium { border-top-color: #f59e0b; }
.crs-low    { border-top-color: #22c55e; }
.crs-total  { border-top-color: var(--c-indigo); }
.crs-num   { display: block; font-family: var(--f-display); font-size: 2rem; font-weight: 700; color: var(--c-ink); }
.crs-label { display: block; font-size: .75rem; color: var(--c-ink-4); margin-top: .25rem; }

/* Actions bar */
.cr-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* Quick wins */
.cr-quick-wins {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 1.5rem 1.75rem;
}
.cr-quick-wins h3 {
  font-size: 1rem; color: var(--c-ink);
  margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
}
.cr-quick-wins h3 i { color: #f59e0b; }
.qw-list { display: flex; flex-direction: column; gap: .625rem; }
.qw-item {
  display: flex; align-items: flex-start; gap: .875rem;
  padding: .75rem 1rem;
  background: var(--c-bg-2);
  border-radius: var(--r-lg);
  font-size: .875rem; color: var(--c-ink-2);
}
.qw-num {
  width: 24px; height: 24px; flex-shrink: 0;
  background: var(--c-indigo); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
}

/* Categories */
.cr-section-title {
  font-size: 1rem; color: var(--c-ink);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.cr-section-title i { color: var(--c-indigo); }

.cr-category {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 1rem;
}
.crc-header {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--c-border-2);
  background: var(--c-bg-2);
  cursor: pointer;
}
.crc-title-wrap { display: flex; align-items: center; gap: .625rem; flex: 1; }
.crc-icon { font-size: 1.125rem; color: var(--c-indigo); }
.crc-header h3 { font-size: .9375rem; color: var(--c-ink); }
.crc-score-bar-wrap { display: flex; align-items: center; gap: .625rem; }
.crc-score-bar { width: 100px; height: 6px; background: var(--c-border); border-radius: var(--r-pill); overflow: hidden; }
.crc-score-fill { height: 100%; border-radius: var(--r-pill); transition: width .6s ease; }
.crc-score-num { font-size: .75rem; font-weight: 700; color: var(--c-ink-3); white-space: nowrap; }
.crc-toggle {
  width: 30px; height: 30px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: var(--c-ink-4);
  transition: var(--transition); flex-shrink: 0;
}
.crc-toggle:hover { background: var(--c-bg-3); }

.crc-items { padding: .75rem 1.5rem 1.25rem; }

/* Checklist item */
.cri-item {
  display: flex; gap: .875rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-border-2);
}
.cri-item:last-child { border-bottom: none; }
.cri-left { padding-top: .35rem; flex-shrink: 0; }
.sev-dot {
  width: 10px; height: 10px;
  border-radius: 50%; display: block;
}
.cri-body { flex: 1; }
.cri-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; margin-bottom: .375rem; flex-wrap: wrap;
}
.cri-top h4 { font-size: .875rem; font-weight: 700; color: var(--c-ink); }
.item-status {
  padding: .2rem .625rem;
  border-radius: var(--r-pill);
  font-size: .65rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
}
.status-action { background: #fee2e2; color: #991b1b; }
.status-review { background: #fef3c7; color: #92400e; }
.status-ok     { background: #dcfce7; color: #166534; }
.status-na     { background: var(--c-bg-3); color: var(--c-ink-4); }

.cri-desc { font-size: .8375rem; color: var(--c-ink-3); line-height: 1.6; margin-bottom: .5rem; }
.cri-action {
  display: flex; align-items: flex-start; gap: .375rem;
  background: #f5f5f5; border: 1px solid #e5e5e5;
  border-radius: var(--r-md); padding: .5rem .75rem;
  font-size: .8rem; color: #111111; font-weight: 500; margin-bottom: .5rem;
}
.cri-action i { color: #111111; flex-shrink: 0; margin-top: .1rem; }
.cri-meta { display: flex; gap: 1rem; flex-wrap: wrap; }
.cri-law, .cri-deadline {
  display: flex; align-items: center; gap: .3rem;
  font-size: .72rem; color: var(--c-ink-4);
}

/* Severity badges */
.severity-badge {
  padding: .2rem .625rem;
  border-radius: var(--r-pill);
  font-size: .65rem; font-weight: 700;
}
.sev-high   { background: #fee2e2; color: #991b1b; }
.sev-medium { background: #fef3c7; color: #92400e; }
.sev-low    { background: #dcfce7; color: #166534; }

/* Deadlines */
.cr-deadlines-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.crd-item {
  padding: 1.25rem;
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-border);
  background: var(--c-surface);
}
.crd-high   { border-left-color: #ef4444; }
.crd-medium { border-left-color: #f59e0b; }
.crd-low    { border-left-color: #22c55e; }
.crd-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.crd-date { font-size: .75rem; font-weight: 700; color: var(--c-indigo); }
.crd-item h4 { font-size: .875rem; font-weight: 700; color: var(--c-ink); margin-bottom: .375rem; }
.crd-item p  { font-size: .8rem; color: var(--c-ink-3); line-height: 1.55; }

/* Email capture */
.cr-email-capture {
  background: var(--c-dark);
  border-radius: var(--r-2xl);
  padding: 2.5rem;
  text-align: center;
}
.cec-inner { max-width: 480px; margin: 0 auto; }
.cec-icon  { font-size: 2.5rem; margin-bottom: 1rem; }
.cr-email-capture h3 { font-size: 1.375rem; color: #fff; margin-bottom: .625rem; }
.cr-email-capture p  { color: rgba(255,255,255,.6); font-size: .9375rem; margin-bottom: 1.5rem; }
.cec-form { display: flex; flex-direction: column; gap: .625rem; }
.cec-row { display: flex; gap: .625rem; }
.cec-row input {
  flex: 1; padding: .875rem 1rem;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg);
  font-size: .9375rem; color: #fff;
  font-family: var(--f-ui); outline: none;
}
.cec-row input::placeholder { color: rgba(255,255,255,.35); }
.cec-row input:focus { border-color: #C2410C; }
.cec-fine { font-size: .72rem; color: rgba(255,255,255,.3); }
.cec-success { display: flex; align-items: center; justify-content: center; gap: .5rem; color: #34d399; font-weight: 600; }

/* Upgrade CTA */
.cr-upgrade {
  background: linear-gradient(135deg, #111111 0%, #1f1f1f 100%);
  border-radius: var(--r-2xl);
  padding: 2.5rem;
  border: 1px solid rgba(255,255,255,.2);
}
.cru-inner { max-width: 580px; margin: 0 auto; }
.cr-upgrade h3 { font-size: 1.5rem; color: #fff; margin-bottom: .625rem; }
.cr-upgrade p  { color: rgba(255,255,255,.6); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.5rem; }
.cru-features { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-bottom: 1.75rem; }
.cru-feature {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8375rem; color: rgba(255,255,255,.75);
}
.cru-feature i { color: #34d399; flex-shrink: 0; }
.cru-btns { display: flex; gap: .875rem; flex-wrap: wrap; margin-bottom: .875rem; }
.cru-fine { font-size: .75rem; color: rgba(255,255,255,.3); }

/* Share modal */
.share-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,17,23,.6); backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  animation: fadeIn .2s ease;
}
.share-modal-overlay[hidden] { display: none; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.share-modal {
  background: var(--c-surface); border-radius: var(--r-2xl);
  padding: 2rem; max-width: 420px; width: 100%;
  position: relative;
  animation: slideUp .25s ease;
}
@keyframes slideUp { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
.share-close {
  position: absolute; top: 1rem; right: 1rem;
  font-size: 1.375rem; color: var(--c-ink-4);
  background: none; border: none; cursor: pointer; line-height: 1;
}
.share-close:hover { color: var(--c-ink); }
.share-modal h3 { font-size: 1.125rem; margin-bottom: .375rem; }
.share-modal > p { font-size: .875rem; color: var(--c-ink-3); margin-bottom: 1.25rem; }
.share-url-row { display: flex; gap: .5rem; margin-bottom: 1rem; }
.share-url-row input {
  flex: 1; padding: .625rem .875rem;
  background: var(--c-bg-2); border: 1.5px solid var(--c-border);
  border-radius: var(--r-md); font-size: .8rem; color: var(--c-ink);
  outline: none; overflow: hidden; text-overflow: ellipsis;
}
.share-socials { display: flex; gap: .75rem; }
.share-social {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .75rem;
  border: 1.5px solid var(--c-border); border-radius: var(--r-lg);
  font-size: .8375rem; font-weight: 600; color: var(--c-ink);
  transition: var(--transition);
}
.share-social:hover { background: var(--c-bg-2); }

/* Footer */
.comp-footer {
  padding: 2rem;
  text-align: center;
  font-size: .75rem;
  border-top: 1px solid var(--c-border);
}
/* --c-ink-4/--c-indigo are tuned for light backgrounds and read too dark
   against this footer's near-black background (main.css's .comp-footer);
   match main.css's own light-on-dark override instead. */
.comp-footer p { color: rgba(255,255,255,.68); }
.comp-footer a { color: #FED7AA; }

/* Print styles */
@media print {
  .comp-nav, .comp-hero, .cr-actions, .cr-email-capture,
  .cr-upgrade, .share-modal-overlay, .comp-footer,
  .cr-back-btn, .crc-toggle { display: none !important; }
  .comp-results { background: var(--c-surface); padding: 0; }
  .cr-header { background: #111111 !important; -webkit-print-color-adjust: exact; }
  .cri-item { break-inside: avoid; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .comp-form-row   { grid-template-columns: 1fr; }
  .cr-stats        { grid-template-columns: repeat(2, 1fr); }
  .cr-deadlines-grid { grid-template-columns: 1fr; }
  .cru-features    { grid-template-columns: 1fr; }
  .cr-header       { flex-direction: column; align-items: flex-start; }
  .crc-score-bar-wrap { display: none; }
}
@media (max-width: 600px) {
  .comp-hero { padding: 2.5rem 1rem; }
  .comp-form-card { padding: 1.25rem; }
  .cr-stats { grid-template-columns: repeat(2,1fr); }
  .cr-results { padding: 1.5rem 1rem; }
  .cru-btns { flex-direction: column; }
  .cec-row  { flex-direction: column; }
  .crc-header { flex-wrap: wrap; }
}