/* ============================================================
   Aapan Foundation — assessment tool styling
   Builds on style.css tokens. Mobile-first.
   ============================================================ */

.test-shell{
  min-height:100dvh; display:flex; flex-direction:column;
  background:var(--paper);
  background-image:url("../img/graphics/pattern-dots.svg");
  background-size:60px 60px;
}

/* slim header for the test flow */
.test-header{
  position:sticky; top:0; z-index:40;
  background:rgba(243,238,225,.96); backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(51,41,31,.04);
}
.test-header .wrap{ display:flex; align-items:center; gap:12px; min-height:56px; }
.test-header .brand img{ height:28px; }
.test-header .spacer{ margin-left:auto; }
.test-header .lang a{
  padding:0 .55rem; min-height:34px; display:inline-flex; align-items:center;
  color:var(--ink-soft); font-weight:700; font-size:.82rem; text-decoration:none;
}
.test-header .lang a.on{ background:var(--heading); color:var(--paper); }
.test-exit{
  font-size:.88rem; font-weight:700; text-decoration:none; color:var(--ink-soft);
  padding:.4rem .75rem; border-radius:999px; border:1.5px solid var(--line);
  background:var(--paper-card); transition:border-color .15s ease, color .15s ease;
}
.test-exit:hover{ color:var(--heading); border-color:var(--gold); }

.test-main{ flex:1; }
.test-wrap{ max-width:620px; margin:0 auto; padding:0 18px; }
.test-step{ padding:32px 0 52px; animation:test-step-in .35s ease; }
.test-step[hidden]{ display:none; }
@keyframes test-step-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.test-step h1{ margin-bottom:.6rem; }
.test-step h1::after,
.test-step h2::after{
  content:""; display:block; width:36px; height:3px; margin-top:10px;
  background:linear-gradient(90deg, var(--terracotta), var(--gold)); border-radius:2px;
}

/* progress */
.test-progress{
  position:sticky; top:56px; z-index:30;
  background:rgba(243,238,225,.97); backdrop-filter:blur(4px);
  border-bottom:1px solid var(--line); padding:10px 0;
}
.test-progress .wrap{ max-width:620px; margin:0 auto; padding:0 18px; }
.test-progress .bar{
  height:8px; border-radius:999px; background:var(--line); overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(51,41,31,.06);
}
.test-progress .bar i{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--terracotta), var(--gold-soft));
  width:0; transition:width .35s ease; border-radius:999px;
}
.test-progress .meta{
  display:flex; justify-content:space-between; font-size:.8rem;
  color:var(--ink-soft); margin-top:6px; font-weight:600;
}
.test-progress .meta span:last-child{ color:var(--terracotta-d); font-family:var(--font-head); }

/* intro / details cards */
.test-card{
  background:var(--paper-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 22px 20px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.test-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--terracotta), var(--gold));
}
.test-card + .test-card{ margin-top:16px; }
.test-card ul.clean{ margin:0; padding-left:1.1rem; }
.test-card li{ margin:.45rem 0; color:var(--ink-soft); }
.test-card li::marker{ color:var(--terracotta); }

.profile-pick{ display:grid; gap:14px; margin-top:20px; }
.profile-pick button{
  width:100%; text-align:left; background:var(--paper-card);
  border:1.5px solid var(--line); border-radius:16px; padding:18px 20px;
  cursor:pointer; font-family:var(--font-body);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:var(--tap); box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .profile-pick button:hover{
    transform:translateY(-2px); border-color:var(--gold); box-shadow:var(--shadow-lg);
  }
}
.profile-pick button[aria-pressed="true"]{
  border-color:var(--terracotta);
  background:linear-gradient(135deg, #fff 0%, rgba(230,196,99,.08) 100%);
  box-shadow:0 0 0 2px rgba(188,75,43,.12), var(--shadow);
}
.profile-pick b{ font-family:var(--font-head); color:var(--heading); font-size:1.08rem; }
.profile-pick .q{
  font-size:.82rem; font-weight:700; color:var(--terracotta-d);
  background:linear-gradient(135deg, rgba(188,75,43,.12), rgba(230,196,99,.18));
  border:1px solid rgba(188,75,43,.15);
  border-radius:999px; padding:.35rem .75rem; flex:none;
}

/* answer-mode + CSV controls */
.t-controls{
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  margin:8px 0 4px; font-size:.82rem;
}
.t-mode{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.t-mode-lbl{ color:var(--ink-soft); font-weight:700; }
.t-mode button{
  border:1.5px solid var(--line); background:var(--paper-card); cursor:pointer;
  border-radius:999px; padding:.34rem .7rem; font-family:var(--font-body);
  font-weight:700; color:var(--ink-soft); font-size:.8rem; min-height:34px;
}
.t-mode button[aria-pressed="true"]{
  border-color:var(--terracotta); background:var(--terracotta); color:#fff;
}
.t-csv{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; }
.t-csv button{
  border:1.5px dashed var(--line); background:transparent; cursor:pointer;
  border-radius:10px; padding:.34rem .7rem; font-family:var(--font-body);
  font-weight:700; color:var(--ink-soft); font-size:.8rem; min-height:34px;
}
.t-csv button:hover{ border-color:var(--gold); color:var(--heading); }
.t-csv button.link{ border:0; text-decoration:underline; padding:.34rem .2rem; }
.t-csv-note{ width:100%; margin:2px 0 0; color:var(--terracotta-d); font-weight:700; font-size:.78rem; }

/* type-to-answer */
.q-item.is-type{ display:grid; grid-template-columns:1fr auto; align-items:start; gap:14px; }
.q-item.is-type .q-num{ grid-column:1 / -1; }
.q-item.is-type .q-text{ margin:.4rem 0 0; }
.q-type{ display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:.3rem; }
.q-typ{
  width:56px; height:56px; text-align:center; border:1.5px solid var(--line);
  border-radius:14px; background:var(--paper-card); color:var(--heading);
  font-family:var(--font-head); font-size:1.5rem; font-weight:700;
  box-shadow:0 1px 2px rgba(51,41,31,.05);
}
.q-typ:focus{ outline:2px solid var(--gold); border-color:var(--gold); }
.q-typ:not(:placeholder-shown){
  border-color:var(--terracotta);
  background:linear-gradient(135deg, var(--terracotta), var(--terracotta-d)); color:#fff;
}
.q-typ-hint{ font-size:.62rem; color:var(--ink-soft); text-align:center; max-width:76px; line-height:1.25; }

/* scale legend (sticky) */
.scale-legend{
  position:sticky; top:108px; z-index:20;
  background:var(--paper-card); border:1px solid var(--line); border-radius:14px;
  padding:10px 12px; margin:8px 0 18px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  font-size:.66rem; text-align:center; color:var(--ink-soft);
  box-shadow:var(--shadow);
}
.scale-legend b{
  display:block; color:var(--heading); font-family:var(--font-head); font-size:.92rem;
}

/* question */
.q-item{
  border-top:1px solid var(--line); padding:20px 0;
  transition:background .2s ease;
}
.q-item:first-of-type{ border-top:0; }
.q-item .q-num{
  font-size:.72rem; font-weight:700; letter-spacing:.08em;
  color:var(--terracotta-d); text-transform:uppercase;
}
.q-item .q-text{
  font-size:1.04rem; margin:.4rem 0 .9rem; color:var(--ink);
  font-weight:600; line-height:1.48; font-family:var(--font-head);
}
.q-scale{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.q-scale button{
  min-height:var(--tap); border:1.5px solid var(--line); border-radius:14px;
  background:var(--paper-card); cursor:pointer; font-family:var(--font-body); font-weight:700;
  color:var(--ink-soft); font-size:.78rem; padding:.55rem .25rem; line-height:1.2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  transition:transform .12s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.q-scale button .n{ font-family:var(--font-head); font-size:1.05rem; color:var(--heading); }
@media (hover:hover){
  .q-scale button:hover{ border-color:var(--gold); transform:translateY(-1px); }
}
.q-scale button[aria-pressed="true"]{
  border-color:var(--terracotta);
  background:linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-d) 100%);
  color:#fff; box-shadow:0 4px 14px rgba(188,75,43,.3);
}
.q-scale button[aria-pressed="true"] .n{ color:#fff; }
.q-item.unanswered.flag{
  background:rgba(188,75,43,.06); border-radius:14px;
  padding-left:12px; padding-right:12px; margin:0 -12px;
  border:1px dashed rgba(188,75,43,.35);
}
.q-item.unanswered.flag .q-text{ color:var(--terracotta-d); }

/* details form */
.test-form label{ display:block; font-weight:700; font-size:.9rem; margin:14px 0 5px; color:var(--heading); }
.test-form input[type=text],.test-form input[type=tel]{
  width:100%; padding:.75rem .85rem; border:1.5px solid var(--line); border-radius:12px;
  font-family:var(--font-body); font-size:16px; background:#fff; color:var(--ink); min-height:var(--tap);
  box-shadow:0 1px 2px rgba(51,41,31,.04);
}
.test-form input:focus{ outline:2px solid var(--gold); border-color:var(--gold); }
.consent-row{
  display:flex; gap:12px; align-items:flex-start; margin-top:16px;
  font-size:.92rem; color:var(--ink-soft);
  background:var(--paper-card); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
}
.consent-row input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--terracotta); }
.field-err{ color:var(--terracotta-d); font-size:.85rem; font-weight:700; margin-top:6px; }
.field-err[hidden]{ display:none; }

/* sticky action bar */
.test-actions{
  position:sticky; bottom:0; z-index:35;
  background:rgba(243,238,225,.97); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); padding:14px 0;
  margin-top:20px; box-shadow:0 -4px 20px rgba(51,41,31,.06);
}
.test-actions .wrap{ max-width:620px; margin:0 auto; padding:0 18px; display:flex; gap:10px; align-items:center; }
.test-actions .btn{ flex:1; }
.test-actions .btn--primary{ box-shadow:0 4px 16px rgba(188,75,43,.3); }
.test-actions .note{ font-size:.8rem; color:var(--ink-soft); }

.test-spinner{
  width:18px; height:18px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;
  display:inline-block; vertical-align:middle; margin-right:6px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- report page ---------- */
.report{ max-width:760px; margin:0 auto; padding:0 18px 40px; }
.report-head{ padding:28px 0 8px; }
.report-head .who{ color:var(--ink-soft); font-size:.95rem; }
.report-band{
  background:linear-gradient(145deg, var(--navy) 0%, #223345 100%);
  color:#F1ECE0; border-radius:var(--radius);
  padding:26px 24px; margin:16px 0 28px;
  box-shadow:0 12px 40px rgba(28,42,58,.25);
  border:1px solid rgba(230,196,99,.2);
  position:relative; overflow:hidden;
}
.report-band::before{
  content:""; position:absolute; right:-20px; top:-20px;
  width:120px; height:120px;
  background:url("../img/graphics/circle-motif.svg") no-repeat center / contain;
  opacity:.25; pointer-events:none;
}
.report-band h2{ color:#FCF7EA; margin:0 0 .35rem; position:relative; }
.report-band p{ color:#D9D2C2; margin:0; position:relative; }

.bars{ display:grid; gap:14px; margin:22px 0; }
.bar-row{ display:grid; grid-template-columns:1fr; gap:6px; }
.bar-row .lbl{
  display:flex; justify-content:space-between; font-weight:700;
  font-size:.95rem; color:var(--heading); font-family:var(--font-head);
}
.bar-row .track{
  height:14px; border-radius:999px; background:var(--line); overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(51,41,31,.06);
}
.bar-row .track i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--terracotta), var(--gold-soft));
  transition:width .6s ease;
}

.strength{
  background:var(--paper-card); border:1px solid var(--line);
  border-left:4px solid var(--gold); border-radius:14px;
  padding:18px 20px; margin:14px 0; box-shadow:var(--shadow);
  transition:transform .15s ease;
}
@media (hover:hover){
  .strength:hover{ transform:translateX(3px); }
}
.strength h3{ margin:0 0 .35rem; color:var(--heading); }
.strength .fields{ font-size:.9rem; color:var(--ink-soft); margin-top:.4rem; }

/* cognitive signature / archetype */
.report-archetype{
  background:linear-gradient(150deg,#FFFBF3 0%, rgba(230,196,99,.14) 100%);
  border:1.5px solid var(--gold); border-radius:var(--radius);
  padding:20px 22px; margin:0 0 24px; box-shadow:var(--shadow);
}
.report-archetype .kick{
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--terracotta-d);
  background:var(--paper-card); border:1px solid rgba(188,75,43,.18);
  border-radius:999px; padding:.3rem .7rem; margin-bottom:.7rem;
}
.report-archetype h3{
  margin:0 0 .4rem; color:var(--heading); font-size:1.28rem; line-height:1.25;
}
.report-archetype p{ margin:0; color:var(--ink); }

/* why-this-matters */
.report-why{
  background:var(--paper-card); border:1px solid var(--line); border-radius:14px;
  padding:16px 20px; margin:0 0 26px; box-shadow:var(--shadow);
}
.report-why h2{ margin:0 0 .5rem; font-size:1.05rem; }
.report-why h2::after{ display:none; }
.report-why p{ margin:0; font-size:.92rem; color:var(--ink-soft); }

/* per-dimension breakdown */
.dim-grid{ display:grid; gap:14px; margin:16px 0 24px; }
.dim-card{
  background:var(--paper-card); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; box-shadow:var(--shadow); page-break-inside:avoid;
}
.dim-top{ display:flex; align-items:center; gap:12px; }
.dim-badge{
  flex:none; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-head); font-weight:700; font-size:.9rem;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.dim-h{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dim-h strong{ font-family:var(--font-head); color:var(--heading); font-size:1.02rem; line-height:1.2; }
.dim-h .dim-sub{ font-size:.76rem; color:var(--ink-soft); font-weight:600; }
.dim-card .track{
  display:block; height:8px; border-radius:999px; background:var(--line);
  overflow:hidden; margin:12px 0 10px;
  box-shadow:inset 0 1px 2px rgba(51,41,31,.06);
}
.dim-card .track i{
  display:block; height:100%; border-radius:999px;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.dim-desc{ margin:0 0 .6rem; font-size:.9rem; color:var(--ink); line-height:1.45; }
.dim-fields{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.dim-fields .dim-fl{
  font-size:.72rem; font-weight:700; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.06em; margin-right:2px;
}
.dim-fields .tag{
  font-size:.74rem; font-weight:600; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line);
  border-radius:8px; padding:.22rem .5rem;
}
@media (min-width:640px){
  .dim-grid{ grid-template-columns:1fr 1fr; }
}

.wa-confirm{
  background:rgba(31,168,85,.12); border:1px solid var(--wa); color:#137a3d;
  border-radius:12px; padding:.7rem 1rem; font-weight:700; margin:22px 0 8px;
}
.report-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 24px; }
.report-note{
  font-size:.86rem; color:var(--ink-soft);
  border-top:1px solid var(--line); padding-top:18px; margin-top:24px;
}

/* print / PDF */
@media print{
  .test-header,.test-actions,.report-actions,.wa-fab,.meanits-launch,.no-print{ display:none !important; }
  body,.test-shell{ background:#fff; }
  .report-band{
    background:#1C2A3A !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .bar-row .track i,.strength,.dim-card,.dim-badge,.report-archetype{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .report{ max-width:none; padding:0; }
  .dim-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .dim-card,.report-archetype,.report-why,.report-band{ page-break-inside:avoid; }
  .report-note{ page-break-inside:avoid; }
}

@media (prefers-reduced-motion:reduce){
  .test-step,.meanits-panel,.meanits-log .m{ animation:none !important; }
  .bar-row .track i{ transition:none; }
}