/* ============================================================
   EIA B1 Platform — Shared Design System
   eia-b1-prep.netlify.app / css/eia.css
   Version: 1.0 | April 2026
   Embracing Imperfection Academy · B1 SELT Prep
   ============================================================ */

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BRAND TOKENS ───────────────────────────────────────────── */
:root {
  /* Purple palette */
  --p:   #6B5B95;   /* primary violet */
  --pa:  #9B59B6;   /* accent purple */
  --pd:  #BB8FCE;   /* divider lavender */
  --tb:  #E8DAEF;   /* table bg / pale lilac */
  --lb:  #F5EEF8;   /* light bg */
  --db:  #3B2F6B;   /* dark bg / header */

  /* Neutrals */
  --tx:  #2C2C2C;   /* body text */
  --wh:  #FFFFFF;
  --bg:  #F2EDF9;   /* page background */
  --mid: #5D6D7E;   /* muted text */

  /* Accent */
  --am:  #F0A500;   /* amber */
  --gn:  #1E8C5A;   /* green success */
  --rd:  #C0392B;   /* red error */

  /* Typography */
  --font: 'Open Sans', Arial, sans-serif;

  /* Spacing scale */
  --s1: 0.4em;
  --s2: 0.8em;
  --s3: 1.2em;
  --s4: 1.6em;
  --s5: 2.0em;

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
}

/* ── BASE ───────────────────────────────────────────────────── */
html { font-size: 18px; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--tx);
  font-size: 1em;
  line-height: 1.7;
  width: 100%;
  min-height: 100vh;
  padding-bottom: 2.5em;
}

.wrap { width: 100%; max-width: 100%; }

/* ── APP HEADER ─────────────────────────────────────────────── */
.app-header {
  background: var(--db);
  padding: 1.5em 1.8em 1.3em;
  position: relative;
}
.app-header::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(187,143,206,0.08);
  pointer-events: none;
}
.badge {
  display: inline-block;
  background: rgba(240,165,0,0.18);
  border: 1px solid rgba(240,165,0,0.4);
  color: var(--am);
  font-size: 0.7em;
  font-weight: 700;
  padding: 0.2em 0.8em;
  border-radius: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.6em;
}
.app-title {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--wh);
  line-height: 1.2;
  margin-bottom: 0.25em;
}
.app-title-sub {
  font-size: 0.75em;
  font-weight: 400;
  color: var(--pd);
  display: block;
  margin-top: 0.15em;
}
.app-sub {
  font-size: 0.88em;
  color: var(--pd);
  font-style: italic;
  margin-bottom: 0.5em;
}
.app-desc {
  font-size: 0.86em;
  color: rgba(187,143,206,0.85);
  line-height: 1.6;
  max-width: 640px;
}

/* ── PROGRESS BAR ───────────────────────────────────────────── */
.prog-wrap {
  background: var(--wh);
  padding: 0.9em 1.4em;
  border-bottom: 2px solid var(--tb);
  display: flex;
  gap: 0.4em;
  align-items: center;
}
.pip {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--tb);
  transition: background 0.3s;
}
.pip.done   { background: var(--gn); }
.pip.active { background: var(--p); }
.prog-lbl {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--p);
  white-space: nowrap;
  margin-left: 0.6em;
}

/* ── CACHE BAR ──────────────────────────────────────────────── */
.cache-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--wh);
  margin: 0.9em 0.9em 0;
  border-radius: var(--r-md);
  padding: 0.65em 1.1em;
  box-shadow: 0 2px 8px rgba(107,91,149,0.07);
  gap: 0.6em;
  flex-wrap: wrap;
}
.cache-status {
  font-size: 0.82em;
  color: var(--mid);
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.cdot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #CCC;
  flex-shrink: 0;
  transition: background 0.3s;
}
.cdot.saved { background: var(--gn); }

/* ── PANELS ─────────────────────────────────────────────────── */
.panel {
  display: none;
  background: var(--wh);
  margin: 0.9em 0.9em 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(107,91,149,0.09);
}
.panel.active { display: block; }

.panel-head {
  background: linear-gradient(135deg, var(--lb), #EDE6F6);
  border-bottom: 2px solid var(--tb);
  padding: 0.85em 1.4em;
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
}
.step-badge {
  background: var(--p);
  color: var(--wh);
  font-size: 0.7em;
  font-weight: 700;
  padding: 0.2em 0.65em;
  border-radius: 8px;
  white-space: nowrap;
  margin-top: 0.15em;
  flex-shrink: 0;
}
.panel-title {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--p);
  line-height: 1.3;
}
.panel-sub {
  font-size: 0.85em;
  color: var(--pa);
  font-style: italic;
  margin-top: 0.15em;
}
.panel-body { padding: 1.3em 1.5em; }

/* ── CARDS ──────────────────────────────────────────────────── */
.card {
  background: var(--wh);
  margin: 1.1em 0.9em 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(107,91,149,0.10);
}
.card-head {
  background: var(--lb);
  border-bottom: 2px solid var(--tb);
  padding: 0.7em 1.4em;
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.card-num {
  background: var(--p);
  color: var(--wh);
  font-size: 0.72em;
  font-weight: 700;
  padding: 0.2em 0.65em;
  border-radius: 10px;
  white-space: nowrap;
}
.card-title { font-size: 1.0em; font-weight: 700; color: var(--p); }
.card-sub   { font-size: 0.85em; color: var(--pa); font-style: italic; margin-top: 0.15em; }
.card-body  { padding: 1.4em 1.5em; }

/* ── FORM ELEMENTS ──────────────────────────────────────────── */
.field-group { margin-bottom: 1.1em; }
.field-label {
  display: block;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--p);
  margin-bottom: 0.35em;
}
.field-hint {
  font-size: 0.88em;
  font-weight: 400;
  color: var(--pa);
  font-style: italic;
  margin-left: 0.4em;
}

input[type=text],
textarea,
select {
  width: 100%;
  border: 2px solid var(--pd);
  border-radius: var(--r-md);
  padding: 0.6em 0.8em;
  font-size: 0.93em;
  color: var(--tx);
  font-family: var(--font);
  background: var(--wh);
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}
input[type=text]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--p);
  box-shadow: 0 0 0 3px rgba(107,91,149,0.08);
}
textarea { min-height: 72px; }
input::placeholder,
textarea::placeholder { color: #BBB; font-style: italic; }

/* Nested input inside point cards */
.point-card input[type=text],
.point-card textarea {
  border: 1.5px solid var(--tb);
  font-size: 0.88em;
}
.point-card input[type=text] { padding: 0.5em 0.65em; margin-bottom: 0.4em; }
.point-card textarea          { min-height: 52px; padding: 0.45em 0.65em; }
.point-card input[type=text]:focus,
.point-card textarea:focus    { border-color: var(--p); box-shadow: none; }

/* Radio options */
.rc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; margin-bottom: 1.1em; }
.rc-group-label {
  display: block;
  font-size: 0.88em;
  font-weight: 700;
  color: var(--p);
  margin-bottom: 0.5em;
}
.radio-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  padding: 0.55em 0.75em;
  border: 2px solid var(--tb);
  border-radius: 7px;
  cursor: pointer;
  margin-bottom: 0.4em;
  font-size: 0.88em;
  line-height: 1.4;
  color: var(--tx);
  transition: all 0.15s;
}
.radio-opt:hover { border-color: var(--pd); background: var(--lb); }
.radio-opt.selected { border-color: var(--p); background: var(--lb); }
.radio-opt input[type=radio] { margin-top: 1px; accent-color: var(--p); flex-shrink: 0; }

/* ── GRIDS ──────────────────────────────────────────────────── */
.points-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75em; }
.point-card {
  border: 2px solid var(--tb);
  border-radius: 9px;
  padding: 0.85em;
  transition: border-color 0.2s;
}
.point-card:focus-within { border-color: var(--p); }
.point-num {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--pa);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}
.kw-hint { font-size: 0.74em; color: #888; margin-bottom: 0.25em; font-style: italic; }

.pg-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75em; }
.pf       { display: flex; flex-direction: column; gap: 0.3em; }
.pg-label { font-size: 0.78em; font-weight: 700; color: var(--p); letter-spacing: 0.04em; }
.pf input {
  width: 100%;
  border: 2px solid var(--tb);
  border-radius: var(--r-md);
  padding: 0.55em 0.7em;
  font-size: 0.9em;
  color: var(--tx);
  font-family: var(--font);
  transition: border-color 0.2s;
}
.pf input:focus { outline: none; border-color: var(--p); }

/* ── LANGUAGE FUNCTION ROWS ─────────────────────────────────── */
.lf-row {
  display: flex;
  gap: 0.65em;
  align-items: flex-start;
  padding: 0.85em;
  border: 2px solid var(--tb);
  border-radius: 9px;
  margin-bottom: 0.75em;
  transition: border-color 0.2s;
}
.lf-row:focus-within { border-color: var(--p); }
.lf-num {
  background: var(--p);
  color: var(--wh);
  font-size: 0.7em;
  font-weight: 700;
  padding: 0.2em 0.6em;
  border-radius: 7px;
  white-space: nowrap;
  margin-top: 0.15em;
  flex-shrink: 0;
}
.lf-content { flex: 1; }
.lf-heading { font-size: 0.88em; font-weight: 700; color: var(--tx); margin-bottom: 0.4em; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.75em 1.5em;
  background: var(--p);
  color: var(--wh);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 700;
  font-family: var(--font);
  transition: all 0.18s;
  letter-spacing: 0.01em;
}
.btn-primary:hover    { background: var(--pa); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(107,91,149,0.22); }
.btn-primary:active   { transform: translateY(0); box-shadow: none; }
.btn-primary:disabled { background: #C0B4D9; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary.full     { width: 100%; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1.2em;
  background: transparent;
  color: var(--p);
  border: 2px solid var(--p);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 0.88em;
  font-weight: 700;
  font-family: var(--font);
  transition: all 0.18s;
}
.btn-secondary:hover { background: var(--lb); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5em 0.9em;
  background: transparent;
  color: var(--mid);
  border: 1.5px solid #DDD;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.8em;
  font-family: var(--font);
  transition: all 0.15s;
}
.btn-ghost:hover { border-color: var(--rd); color: var(--rd); }

.btn-generate {
  display: block;
  width: 100%;
  padding: 0.85em;
  background: var(--p);
  color: var(--wh);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 1.0em;
  font-weight: 700;
  font-family: var(--font);
  transition: background 0.2s;
  margin-top: 0.5em;
}
.btn-generate:hover    { background: var(--pa); }
.btn-generate:disabled { background: #C0B4D9; cursor: not-allowed; }

.btn-reset {
  display: inline-block;
  padding: 0.55em 1.4em;
  background: transparent;
  color: var(--p);
  border: 2px solid var(--p);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 700;
  font-family: var(--font);
  transition: all 0.18s;
  margin-top: 1em;
}
.btn-reset:hover { background: var(--lb); }

.btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.2em;
  gap: 0.75em;
}

/* ── CALLOUT BOXES ──────────────────────────────────────────── */
.callout {
  border-radius: 7px;
  padding: 0.75em 1em;
  margin: 0.8em 0;
  font-size: 0.9em;
  line-height: 1.6;
}
.callout-tip  { background: #FFF9E6; border-left: 4px solid var(--am); }
.callout-tip  strong { color: #B7860B; }
.callout-info { background: var(--lb); border-left: 4px solid var(--pa); }
.callout-info strong { color: var(--p); }
.callout-example { background: #F0F9F4; border-left: 4px solid var(--gn); }
.callout-example strong { color: var(--gn); font-size: 0.78em; letter-spacing: 0.05em; text-transform: uppercase; }

/* ── SAVED BANNER ───────────────────────────────────────────── */
.saved-banner {
  display: none;
  align-items: center;
  gap: 0.5em;
  background: #F0F9F4;
  border: 1px solid #7EC8A0;
  border-radius: 7px;
  padding: 0.55em 0.9em;
  font-size: 0.84em;
  color: var(--gn);
  margin-bottom: 0.9em;
}
.saved-banner.show { display: flex; }

/* ── FEEDBACK PANELS ────────────────────────────────────────── */
.feedback-wrap { margin-top: 1em; }
.feedback-btn {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  padding: 0.75em 1em;
  background: var(--lb);
  border: 2px solid var(--pd);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 0.92em;
  font-weight: 600;
  color: var(--p);
  font-family: var(--font);
  transition: all 0.2s;
}
.feedback-btn:hover { background: var(--tb); border-color: var(--p); }
.feedback-result { margin-top: 0.75em; display: none; }
.feedback-result.visible { display: block; }
.feedback-inner { border-radius: 9px; padding: 1.1em 1.2em; }
.feedback-inner.ok   { background: #F0F9F4; border-left: 4px solid var(--gn); }
.feedback-inner.warn { background: #FFF9E6; border-left: 4px solid var(--am); }
.feedback-inner.err  { background: #FDEDEC; border-left: 4px solid var(--rd); }
.feedback-head {
  font-size: 0.82em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6em;
}
.feedback-inner.ok   .feedback-head { color: var(--gn); }
.feedback-inner.warn .feedback-head { color: #B7860B; }
.feedback-inner.err  .feedback-head { color: var(--rd); }
.feedback-msg { font-size: 0.92em; line-height: 1.7; }
.feedback-list {
  padding-left: 1.1em;
  font-size: 0.9em;
  line-height: 1.9;
  margin-top: 0.4em;
}

/* ── RESULTS (ASK Builder) ──────────────────────────────────── */
.result-intro {
  background: var(--tb);
  border-radius: var(--r-md);
  padding: 0.8em 1.1em;
  margin-bottom: 1em;
  font-size: 0.95em;
  color: var(--p);
  line-height: 1.65;
}
.q-card {
  background: var(--lb);
  border-left: 5px solid var(--p);
  border-radius: 6px;
  padding: 0.9em 1.1em;
  margin-bottom: 0.8em;
}
.q-num  { font-size: 0.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pa); margin-bottom: 0.3em; }
.q-text { font-size: 1.05em; font-weight: 700; color: var(--p); font-style: italic; margin-bottom: 0.45em; line-height: 1.55; }
.q-when { font-size: 0.9em; color: var(--tx); line-height: 1.6; }
.q-when strong { color: var(--p); }

/* ── TIPS BOX ───────────────────────────────────────────────── */
.tips-box { background: var(--db); border-radius: var(--r-md); padding: 1em 1.2em; margin-top: 0.5em; }
.tips-title { font-size: 0.9em; font-weight: 700; color: var(--am); margin-bottom: 0.6em; }
.tips-box ul { padding-left: 1.2em; font-size: 0.9em; color: var(--wh); line-height: 2.0; }

/* ── SPIDER DIAGRAM ─────────────────────────────────────────── */
.spider-wrap { background: var(--db); border-radius: var(--r-lg); padding: 1.4em 1.5em; margin-top: 0.25em; }
.spider-title { font-size: 1.05em; font-weight: 700; color: var(--am); margin-bottom: 1em; }
.spider-centre {
  background: var(--p);
  border-radius: var(--r-md);
  padding: 0.85em 1.2em;
  text-align: center;
  margin-bottom: 1em;
}
.spider-centre-label { font-size: 0.72em; color: var(--pd); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.25em; }
.spider-centre-text  { font-size: 1.2em; font-weight: 700; color: var(--wh); }
.spider-point {
  display: flex;
  gap: 0.75em;
  align-items: flex-start;
  padding: 0.7em 0.85em;
  background: rgba(255,255,255,0.07);
  border-radius: 7px;
  margin-bottom: 0.6em;
  border-left: 3px solid var(--pd);
}
.spider-point:nth-child(2) { border-color: var(--am); }
.spider-point:nth-child(3) { border-color: #7EC8A0; }
.spider-point:nth-child(4) { border-color: var(--pd); }
.spider-point:nth-child(5) { border-color: #F0A0C0; }
.spider-point:nth-child(6) { border-color: var(--am); }
.spider-n  { font-size: 0.72em; font-weight: 700; color: var(--am); white-space: nowrap; padding-top: 0.15em; min-width: 40px; }
.spider-h  { font-size: 0.9em; font-weight: 700; color: var(--wh); margin-bottom: 0.2em; }
.spider-k  { font-size: 0.82em; color: var(--pd); font-style: italic; }
.spider-fn { font-size: 0.7em; background: rgba(187,143,206,0.2); color: var(--pd); padding: 0.1em 0.5em; border-radius: 9px; margin-left: 0.4em; font-style: normal; }

/* ── ERROR ──────────────────────────────────────────────────── */
.error-box {
  background: #FDEDEC;
  border-left: 4px solid var(--rd);
  border-radius: 6px;
  padding: 0.7em 1em;
  margin-top: 0.8em;
  font-size: 0.9em;
  color: var(--rd);
  display: none;
}
.error-box.show { display: block; }

/* ── NEXT STEP BOX ──────────────────────────────────────────── */
.next-step-box {
  margin-top: 1em;
  padding: 0.85em 1em;
  background: var(--lb);
  border-radius: 7px;
  font-size: 0.9em;
  color: var(--p);
  line-height: 1.65;
}
.next-step-box span {
  font-style: italic;
  color: var(--pa);
}

/* ── INDEX PAGE ─────────────────────────────────────────────── */
.index-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  padding: 1.2em 0.9em 0;
}
.app-card {
  background: var(--wh);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(107,91,149,0.09);
  text-decoration: none;
  color: var(--tx);
  transition: all 0.2s;
  display: block;
}
.app-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(107,91,149,0.15); }
.app-card-head {
  background: var(--p);
  padding: 0.9em 1.2em;
}
.app-card-day   { font-size: 0.7em; color: var(--pd); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3em; }
.app-card-title { font-size: 1.0em; font-weight: 700; color: var(--wh); line-height: 1.3; }
.app-card-body  { padding: 0.9em 1.2em; font-size: 0.88em; color: var(--mid); line-height: 1.6; }
.app-card-link  { font-size: 0.82em; font-weight: 700; color: var(--p); margin-top: 0.5em; display: block; }
.coming-soon .app-card-head { background: #AAA; }
.coming-soon { opacity: 0.6; pointer-events: none; }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.35s ease forwards; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .points-grid,
  .pg-grid,
  .rc-row,
  .index-grid { grid-template-columns: 1fr; }
  .panel-body,
  .app-header,
  .card-body  { padding-left: 1em; padding-right: 1em; }
  .panel,
  .card,
  .cache-bar  { margin-left: 0.5em; margin-right: 0.5em; }
}