:root{
  /* Brand + palette (light, clean) */
  --brand: #03BAE2;            /* primary brand blue */
  --brand-deep: #0289A6;       /* deeper supporting blue */
  --ink: #0B1220;
  --paper: #F7F7F4;            /* warm paper */
  --paper-2: #FFFFFF;
  --line: rgba(15, 23, 42, .10);
  --divider-strong: rgba(15, 23, 42, .22);
  --muted: rgba(15, 23, 42, .70);
  --muted-2: rgba(15, 23, 42, .55);
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: var(--paper);
}

.brand-serif { font-family: Fraunces, ui-serif, Georgia, serif; }

/* Subtle paper texture overlay */
.paper-bg{
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(3, 186, 226, .12), transparent 65%),
    radial-gradient(900px 500px at 85% 10%, rgba(2, 137, 166, .10), transparent 62%),
    radial-gradient(800px 600px at 45% 90%, rgba(231, 196, 106, .10), transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, #ffffff 55%, var(--paper) 100%);
  /* overflow: hidden; */
}
.paper-bg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

hr{
  border: none;
  height: 1px;
  margin: 20px 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(15, 23, 42, .28),
    transparent
  );
}


/* “Watercolor wash” chip (accent only) */
.wash{
  background:
    radial-gradient(120px 70px at 22% 35%, rgba(3,186,226,.35), transparent 70%),
    radial-gradient(120px 80px at 70% 40%, rgba(2,137,166,.22), transparent 70%),
    radial-gradient(120px 90px at 45% 78%, rgba(231,196,106,.18), transparent 70%);
}

.shadow-soft { box-shadow: 0 14px 40px rgba(2, 6, 23, .10); }

/* Buttons */
.btn-primary{
  background: var(--brand);
  color: #06202A;
}
.btn-primary:hover{ filter: brightness(1.03); }
.btn-ghost:hover{ background: rgba(3,186,226,.08); }

/* Form focus */
.ring-focus:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(3,186,226,.20);
  border-color: rgba(3,186,226,.45);
}

/* Chat */
.chat-fab{ position: fixed; right: 18px; bottom: 18px; z-index: 50; }
.chat-modal{ position: fixed; inset: 0; background: rgba(2,6,23,.35); display:none; z-index: 60; }
.chat-modal.active{ display:grid; place-items:center; }
.chat-card{ width:100%; max-width: 760px; }

.msg{ padding:.75rem 1rem; border-radius: 14px; margin:.25rem 0; line-height: 1.45; }
.msg.user{ background: rgba(3,186,226,.10); border: 1px solid rgba(3,186,226,.22); }
.msg.bot{ background: rgba(15, 23, 42, .04); border: 1px solid rgba(15, 23, 42, .10); }

.scroll-area{ max-height: 380px; overflow:auto; }

/* Smooth hover lift */
.lift-hover{ transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.lift-hover:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(2, 6, 23, .10);
  border-color: rgba(3,186,226,.22);
}


/* ---------------------------------------------
   Modal / Popup Windows (used by intake tool)
----------------------------------------------*/
.modal{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(2,6,23,.35);
  z-index: 9999;
  padding: 16px;
}
.modal.active{ display: grid; }

.modal-card{
  width: 100%;
  max-width: 820px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 60px rgba(2,6,23,.20);
}

.modal-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.modal-close{
  border: 1px solid rgba(15,23,42,.15);
  background: rgba(15,23,42,.06);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
}
.modal-close:hover{ background: rgba(15,23,42,.10); }

.popup-kpi{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}

.popup-box{
  background: rgba(255,255,255,.75);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
}
.popup-box .n{ font-size:18px; font-weight:900; }
.popup-box .t{ font-size:12px; color: var(--muted); }

.popup-list .item{
  background: rgba(255,255,255,.75);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  margin-top: 10px;
}
.popup-list .item h4{ margin:0 0 4px; font-size:14px; }
.popup-list .item p{ margin:0; color: var(--muted); font-size:13px; line-height:1.35; }

.help-mini{
  font-size:12px;
  color: var(--muted);
  line-height: 1.35;
}

.input-inline{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  color: var(--ink);
  border-radius:10px;
  padding:10px;
  outline:none;
}

.input-inline:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(3,186,226,.20);
  border-color: rgba(3,186,226,.45);
}
/* ===== Compliance Intake – Output Section Polish ===== */

.outputs-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.outputs-header h2{
  margin:0;
}

.outputs-sub{
  margin:0;
  font-size:13px;
  color: var(--muted);
  line-height:1.35;
}

.pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 10px 0 14px;
}

/* KPI cards */
.kpi{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}

.kpi .box{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding:12px;
}

.kpi .box .n{
  font-size:20px;
  font-weight:900;
}

.kpi .box .t{
  font-size:12px;
  color: var(--muted);
}

/* Urgency block */
.urgency-card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.75);
  border-radius:14px;
  padding:14px;
}

.urgency-label{
  font-size:12px;
  color: var(--muted);
  margin-bottom:6px;
}

.urgency-value{
  font-size:22px;
  font-weight:900;
  line-height:1.1;
}

.urgency-note{
  margin-top:8px;
  font-size:13px;
  color: var(--muted);
  line-height:1.35;
}

/* Recommendations list */
.rec{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.rec .item{
  border:1px solid var(--line);
  background: rgba(255,255,255,.75);
  border-radius:14px;
  padding:12px;
}

.rec .item h3{
  margin:0 0 6px;
  font-size:14px;
  font-weight:900;
}

.rec .item p{
  margin:0;
  color: var(--muted);
  font-size:13px;
  line-height:1.4;
}

/* Copy summary area */
.copy-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.copybox{
  width:100%;
  min-height:200px;
  border-radius:14px;
  border:1px solid var(--line);
  padding:12px;
  background: rgba(255,255,255,.75);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12px;
}


/* Keep paper texture behind content */
.paper-bg::before{ z-index: 0; }
.paper-bg > *{ position: relative; z-index: 1; }


/* ===== Intake Popups: polished output windows ===== */
.modal{
  background: rgba(2,6,23,.45);
}

.modal-card{
  max-height: 85vh;
  overflow: auto;
  padding: 18px;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(2,6,23,.22);
}

.modal-top{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255,255,255,.96);
  padding: 6px 0 12px;
  margin: -6px 0 12px;
  border-bottom: 1px solid var(--line);
}

#popupTitle{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2px;
}

.popup-kpi{
  gap: 12px;
  margin-top: 12px;
}

.popup-box{
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.86);
}

.popup-box .n{
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}

.popup-box .t{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.popup-list .item{
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  padding: 12px;
}

.popup-list .item h4{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 900;
}

.popup-list .item p{
  line-height: 1.45;
}

#popupCopyText,
.modal-card textarea.copybox{
  min-height: 260px;
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.90);
}
/* ===== Overview popup polish ===== */
.summary-hero{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.90);
  border-radius: 16px;
  padding: 14px;
}

.summary-hero h4{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
}

.summary-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}

.summary-card{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.86);
  border-radius: 14px;
  padding: 12px;
}

.summary-card .label{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.summary-card .value{
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(3,186,226,.08);
  font-size: 12px;
  color: var(--muted);
}

.badge strong{
  color: var(--ink);
}

.urgency-panel{
  margin-top: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.90);
  border-radius: 16px;
  padding: 14px;
}

.urgency-panel .top{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.urgency-panel .title{
  margin: 0;
  font-size: 13px;
  font-weight: 900;
}

.urgency-panel .note{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

html, body{ overflow-y: auto; height: auto; }

/* ===== Button interaction states (site-wide) ===== */
.btn-primary:active,
button.primary:active,
.popup-btn:active{
  filter: brightness(.96);
  transform: translateY(1px);
}

.btn-ghost:active{
  background: rgba(3,186,226,.14);
  transform: translateY(1px);
}

/* ===== Toggle / Popup buttons ===== */
.popup-btn{
  border: 1px solid rgba(3,186,226,.20);
  background: rgba(3,186,226,.08);
  color: #06202A;
}

.popup-btn:hover{
  background: rgba(3,186,226,.12);
}

.popup-btn.active{
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #ffffff;
}

/* ===== Selected button state (force) ===== */

/* Base “toggle” buttons */
.popup-btn{
  border: 1px solid rgba(3,186,226,.20);
  background: rgba(3,186,226,.08);
  color: #06202A;
}

/* Selected = dark blue (forced) */
.popup-btn.active{
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  color: #ffffff !important;
}

/* If a button also has .primary, selected should still go dark */
.popup-btn.primary.active{
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  color: #ffffff !important;
}

/* Quick press feedback everywhere (helps on index.html too) */
button:active,
a.btn-primary:active,
a.btn-ghost:active{
  transform: translateY(1px);
  filter: brightness(.97);
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:600;
  color: var(--brand-deep);
  text-decoration:none;
  margin-bottom:16px;
}

.back-link:hover{
  text-decoration:underline;
}
/* Tooltip (reusable) */
.tip{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid var(--brand);
  color: var(--brand);
  cursor: help;
  flex: 0 0 auto;
}

.tip .tip-box{
  position: absolute;
  top: 22px;
  left: 0;
  width: 260px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(2, 6, 23, .10);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 50;
}

.tip:hover .tip-box{ opacity: 1; }