/* Eradah PMO Analytics — survey theme tokens.
 *
 * Refactored to match the design brief (10 sections, welcome + review +
 * submitted). Refinements over the previous version:
 *   - OKLCH tokens for perceptual uniformity + brand-hue neutrals.
 *   - No `border-left/right` accent stripes (a strong AI tell).
 *   - Calmer masthead (no diagonal gradient).
 *   - Sticky top bar (progress + autosave) and sticky bottom bar (nav).
 *   - Welcome / trust-card / section-index / review / submitted screens.
 *   - IBM Plex Serif weight added for institutional welcome h1.
 *
 * Brand identity (kept): teal #0E8A8F and navy #143A5C, IBM Plex Sans Arabic.
 */

/* The `hidden` attribute must always win over component display rules
 * (.survey-bottombar, .btn-bottom, .lock-banner … all set display, which
 * otherwise overrides the UA [hidden] rule and leaks sticky bars on load). */
[hidden]{display:none !important;}

/* ----- Tokens ----- */
:root{
  /* Brand — converted to OKLCH for perceptual tuning; hue stays the same. */
  --teal:        oklch(52% 0.083 195);   /* ≈ #0E8A8F */
  --teal-deep:   oklch(42% 0.080 195);   /* ≈ #0a6c70 */
  --teal-soft:   oklch(95% 0.025 195);   /* ≈ #e6f4f4 */
  --teal-mist:   oklch(88% 0.040 195);
  --navy:        oklch(35% 0.060 250);   /* ≈ #143A5C */
  --navy-deep:   oklch(28% 0.060 250);
  --navy-soft:   oklch(95% 0.020 250);   /* ≈ #e8eef4 */

  /* Neutrals — tinted toward the navy hue so brand reads through the page. */
  --ink:         oklch(24% 0.020 250);   /* ≈ #1F2D3A */
  --muted:       oklch(48% 0.015 250);   /* ≈ #5A6B78 */
  --line:        oklch(90% 0.010 250);   /* ≈ #E2E8EC */
  --bg:          oklch(97% 0.008 220);   /* ≈ #F4F7F8 */
  --muted-soft:  oklch(95.5% 0.008 220);
  --card:        oklch(100% 0 0);        /* pure white surface for cards */

  /* Status — muted, not neon */
  --warn-bg:     oklch(96% 0.045 80);
  --warn-line:   oklch(78% 0.110 80);
  --warn-ink:    oklch(42% 0.090 60);

  /* Spacing (4pt semantic scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Type scale — fixed rem for app UI */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-17: 1.0625rem;
  --fs-19: 1.1875rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-34: 2.125rem;

  /* Shadows — soft, tinted toward navy */
  --shadow-sm: 0 1px 2px oklch(28% 0.060 250 / 0.06);
  --shadow-md: 0 4px 14px oklch(28% 0.060 250 / 0.08);
  --shadow-lg: 0 12px 32px oklch(28% 0.060 250 / 0.10);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"IBM Plex Sans Arabic",-apple-system,"Segoe UI",Tahoma,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* Reserved room for sticky bottom bar (set on body when survey is active) */
body.survey-active{padding-bottom:96px;}

/* =====================================================================
 * Top progress bar — full width, slim, sits above masthead
 * ===================================================================== */
.survey-progress{
  position:sticky;top:0;z-index:40;
  height:3px;background:transparent;
  background:oklch(95% 0.010 220);
}
.survey-progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--teal),var(--teal-deep));
  transition:width .35s cubic-bezier(.2,.7,.1,1);
}

/* =====================================================================
 * Masthead — calm, no gradient. Two-column brand row only.
 * ===================================================================== */
.wrap{
  max-width:780px;
  margin:0 auto;
  padding:var(--space-7) var(--space-5) var(--space-8);
}
.masthead{margin-bottom:var(--space-5);}
.masthead-inner{padding:0;}
.brandrow{
  display:flex;align-items:center;gap:var(--space-4);
}
.mark{
  width:46px;height:46px;flex:none;color:var(--teal-deep);
}
.health-mark{
  width:58px;height:58px;flex:none;
  object-fit:contain;object-position:center;
}
.mark-sep{
  display:block;flex:none;width:1px;height:34px;
  background:var(--line);border-radius:1px;
}
.brandtxt{font-size:var(--fs-13);line-height:1.55;color:var(--muted);font-weight:400;}
.brandtxt b{
  display:block;color:var(--navy);font-weight:600;font-size:var(--fs-15);
  letter-spacing:-.2px;margin-bottom:1px;
}

/* =====================================================================
 * Department banner — quietly says "you are answering for: …"
 * ===================================================================== */
.dept-banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px var(--space-4);
  font-size:var(--fs-13);color:var(--muted);
  margin-bottom:var(--space-5);
}
.dept-banner-label{font-weight:400;color:var(--muted);}
.dept-banner-path{
  color:var(--navy);font-weight:600;letter-spacing:-.1px;
  font-feature-settings:"tnum" 1;
}

/* =====================================================================
 * Sticky top bar — section counter + autosave indicator
 * Hidden on welcome + submitted; visible from section-1 through review.
 * ===================================================================== */
.survey-topbar{
  position:sticky;top:3px;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  background:oklch(100% 0 0 / 0.92);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px var(--space-4);
  margin-bottom:var(--space-5);
  box-shadow:var(--shadow-sm);
}
.topbar-meta{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-13);min-width:0;
}
.topbar-counter{
  color:var(--teal-deep);font-weight:600;
  font-feature-settings:"tnum" 1;
}
.topbar-sep{color:var(--line);}
.topbar-title{
  color:var(--navy);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* =====================================================================
 * Section card — single white surface, no side stripe, soft shadow
 * ===================================================================== */
.sec-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--space-6) var(--space-6) var(--space-5);
  box-shadow:var(--shadow-sm);
}
.sec-card-head{
  display:flex;align-items:flex-start;gap:var(--space-4);
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--space-5);
}
.sec-card-chip{
  width:38px;height:38px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-soft);color:var(--teal-deep);
  border-radius:var(--r-sm);font-weight:700;font-size:var(--fs-17);
}
.sec-card-title{
  margin:0;color:var(--navy);font-weight:600;
  font-size:var(--fs-19);line-height:1.4;
}
.sec-card-sub{
  margin:4px 0 0;color:var(--muted);font-size:var(--fs-13);
  font-weight:400;line-height:1.55;
}

/* =====================================================================
 * Questions — same shapes as before, slightly refined.
 * ===================================================================== */
.q{margin-bottom:var(--space-5);}
.q:last-child{margin-bottom:var(--space-3);}
.q-row{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);
}
.q > label.qtext{
  display:block;font-size:var(--fs-14);font-weight:500;
  color:var(--ink);margin-bottom:8px;line-height:1.5;
}
.q .hint{
  font-size:var(--fs-12);color:var(--muted);font-weight:400;
  margin-right:6px;
}

input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{
  width:100%;font-family:inherit;font-size:var(--fs-14);color:var(--ink);
  background:oklch(99% 0.004 220);border:1px solid var(--line);
  border-radius:var(--r-md);padding:11px 14px;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
textarea{resize:vertical;min-height:64px;line-height:1.7;}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--teal);background:#fff;
  box-shadow:0 0 0 3px oklch(52% 0.083 195 / 0.16);
}
input::placeholder,textarea::placeholder{color:oklch(65% 0.012 220);}
input:disabled,textarea:disabled,select:disabled{opacity:.7;cursor:not-allowed;}
select{appearance:auto;}

.triple{display:grid;grid-template-columns:1fr;gap:10px;}
@media(min-width:640px){
  .triple{grid-template-columns:1fr 1fr 1fr;}
}
.duo{display:grid;grid-template-columns:1fr;gap:10px;}
@media(min-width:640px){
  .duo{grid-template-columns:1fr 1fr;}
}

/* repeater (single field + add button -> bullet list) */
.repeater-row{display:flex;gap:8px;align-items:stretch;}
.repeater-row .repeater-field{flex:1;}
.btn-repeat-add{
  flex:none;width:44px;border:1.5px dashed var(--teal);
  border-radius:var(--r-md);background:transparent;color:var(--teal-deep);
  font-size:22px;line-height:1;cursor:pointer;font-family:inherit;
  transition:background .15s;
}
.btn-repeat-add:hover{background:var(--teal-soft);}
.repeater-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.repeater-item{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:oklch(99% 0.004 220);padding:9px 12px;
}
.repeater-item .ix-num{
  flex:none;font-size:var(--fs-12);font-weight:600;color:var(--teal-deep);
  background:var(--teal-soft);width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.repeater-item .repeater-text{flex:1;color:var(--ink);font-size:var(--fs-13);}
.repeat-remove{
  flex:none;background:transparent;border:none;color:var(--muted);
  font-size:18px;line-height:1;cursor:pointer;width:26px;height:26px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .15s,color .15s;
}
.repeat-remove:hover{background:oklch(95% 0.030 25);color:oklch(40% 0.140 25);}

/* step repeater (ordered stages, each with a duration) */
.steprep-row{display:flex;gap:8px;align-items:stretch;}
.steprep-row .steprep-stage{flex:2;}
.steprep-row .steprep-dur{flex:1;}
@media(max-width:560px){.steprep-row{flex-wrap:wrap;}.steprep-row .steprep-stage,.steprep-row .steprep-dur{flex:1 1 100%;}}
.steprep-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.steprep-item{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:oklch(99% 0.004 220);padding:9px 12px;
}
.steprep-item .ix-num{
  flex:none;font-size:var(--fs-12);font-weight:600;color:var(--teal-deep);
  background:var(--teal-soft);width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.steprep-item .steprep-text{flex:1;color:var(--ink);font-size:var(--fs-13);}
.steprep-item .steprep-time{
  flex:none;font-size:var(--fs-12);color:var(--teal-deep);
  background:var(--teal-soft);padding:3px 10px;border-radius:20px;
}

/* choices (radio / checkbox) */
.choices{display:flex;flex-wrap:wrap;gap:9px;}
.choices.col{flex-direction:column;}
.opt{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--line);background:oklch(99% 0.004 220);
  border-radius:var(--r-md);padding:9px 14px;
  font-size:var(--fs-13);color:var(--ink);
  transition:border-color .15s,background .15s,color .15s;
}
.opt:hover{border-color:var(--teal);background:#fff;}
.opt input{accent-color:var(--teal);width:16px;height:16px;flex:none;cursor:pointer;}
.opt:has(input:checked){
  background:var(--teal-soft);border-color:var(--teal);
  color:var(--teal-deep);font-weight:500;
}

/* Chipset — single-choice buttons that write into a hidden [data-q] input.
 * Reuses .opt visuals; selection is class-driven (.is-on) not :checked. */
.chipset{display:flex;flex-wrap:wrap;gap:9px;}
.chipset .chip{font:inherit;line-height:1.2;}
.chipset .chip.is-on{
  background:var(--teal-soft);border-color:var(--teal);
  color:var(--teal-deep);font-weight:500;
}
body.locked .chipset .chip{cursor:not-allowed;}

/* =====================================================================
 * KPI picker (section 6) — pick tracked indicators + mark the top 3
 * ===================================================================== */
.kpi-picker .qhint{font-size:var(--fs-13);color:var(--muted);line-height:1.6;margin:2px 0 10px;}
.kpi-note{display:block;color:var(--teal-deep);font-size:12px;margin-top:3px;}
.kpi-counter{
  font-size:var(--fs-13);color:var(--navy);font-weight:600;
  background:var(--navy-soft);border-radius:var(--r-md);
  padding:7px 12px;margin-bottom:12px;display:inline-block;
}
.kpi-domain{
  border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:9px;background:oklch(99% 0.004 220);overflow:hidden;
}
.kpi-domain > summary{
  cursor:pointer;list-style:none;padding:11px 14px;
  font-weight:600;color:var(--navy);font-size:var(--fs-15);
  display:flex;align-items:center;gap:8px;
}
.kpi-domain > summary::-webkit-details-marker{display:none;}
.kpi-domain > summary::before{content:"▾";color:var(--teal);font-size:12px;transition:transform .15s;}
.kpi-domain[open] > summary::before{transform:rotate(180deg);}
.kpi-domain > summary:hover{background:var(--teal-soft);}
.kpi-domain-count{color:var(--muted);font-weight:400;font-size:var(--fs-13);}
.kpi-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.kpi-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--muted-soft);
}
.kpi-item:last-child{border-bottom:none;}
.kpi-pick{display:flex;align-items:flex-start;gap:9px;cursor:pointer;flex:1;}
.kpi-pick input{accent-color:var(--teal);width:16px;height:16px;flex:none;margin-top:2px;cursor:pointer;}
.kpi-names{display:flex;flex-direction:column;gap:1px;}
.kpi-ar{color:var(--ink);font-size:var(--fs-13);font-weight:500;line-height:1.5;}
.kpi-en{color:var(--muted);font-size:12px;line-height:1.4;}
.kpi-item:has(.kpi-select:checked){background:var(--teal-soft);}
.kpi-star{
  display:inline-flex;align-items:center;gap:6px;flex:none;cursor:pointer;
  border:1px solid var(--teal-mist);border-radius:var(--r-md);
  padding:4px 10px;font-size:12px;color:var(--teal-deep);background:#fff;
}
.kpi-star[hidden]{display:none;}
.kpi-star input{accent-color:var(--teal);width:14px;height:14px;cursor:pointer;}
.kpi-star:has(input:checked){background:var(--teal);border-color:var(--teal);color:#fff;}
.kpi-star:has(input:disabled){opacity:.45;cursor:not-allowed;}
body.locked .kpi-pick,body.locked .kpi-star{cursor:not-allowed;}

/* =====================================================================
 * Decision rows (Q5/Q6 in section 3)
 * ===================================================================== */
.decisions-list{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-3);}
.decision-row{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:oklch(99% 0.004 220);padding:var(--space-4);
  transition:border-color .15s,background .15s;
}
.decision-row.is-delayed{border-color:var(--warn-line);background:var(--warn-bg);}
.decision-row-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.decision-index{
  font-size:var(--fs-12);font-weight:600;color:var(--teal-deep);
  background:var(--teal-soft);padding:3px 10px;border-radius:20px;
}
.decision-row.is-delayed .decision-index{background:oklch(86% 0.090 80);color:var(--warn-ink);}
.decision-remove{
  background:transparent;border:none;color:var(--muted);
  font-size:18px;line-height:1;cursor:pointer;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding:0;transition:background .15s,color .15s;
}
.decision-remove:hover{background:oklch(95% 0.030 25);color:oklch(40% 0.140 25);}
.decision-remove[hidden]{display:none;}
.decision-row .decision-text{margin-bottom:8px;}
.decision-delay-toggle{margin-bottom:0;flex:none;display:inline-flex;width:auto;}
.decision-impact{display:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(--warn-line);}
.decision-row.is-delayed .decision-impact{display:block;}
.decision-impact .impact-field{margin-bottom:8px;}
.decision-impact .impact-field:last-child{margin-bottom:0;}
.decision-impact .impact-field label{
  display:block;font-size:var(--fs-12);color:var(--warn-ink);
  font-weight:500;margin-bottom:4px;
}
/* Goal cards reuse decision-row chrome; the barrier field sits outside the
 * conditional indicator block, so it shows for every goal regardless. */
.goal-barrier{margin-top:10px;}
.goal-barrier > label{
  display:block;font-size:var(--fs-12);color:var(--muted);
  font-weight:500;margin-bottom:4px;
}
/* card-facets — always-visible sub-fields inside a card (tasks, goals,
 * challenges, proposed projects). Unlike .decision-impact it is not gated on
 * the delay toggle, so every facet shows for every entry. */
.card-facets{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);}
.card-facets .impact-field{margin-bottom:10px;}
.card-facets .impact-field:last-child{margin-bottom:0;}
.card-facets .impact-field > label{
  display:block;font-size:var(--fs-12);color:var(--muted);
  font-weight:500;margin-bottom:4px;
}
/* rating chipset — compact single-choice scale (low/med/high/...). */
.chipset.rating .chip{padding:6px 14px;}
.btn-add-decision{
  background:transparent;color:var(--teal-deep);
  border:1.5px dashed var(--teal);border-radius:var(--r-md);
  padding:9px 18px;font-weight:500;font-size:var(--fs-13);
  width:100%;margin-top:4px;font-family:inherit;
}
.btn-add-decision:hover{background:var(--teal-soft);}

/* =====================================================================
 * Saved indicator — subtle pill
 * ===================================================================== */
.saved-indicator{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-12);color:var(--muted);font-weight:400;
}
.saved-indicator .dot{
  width:7px;height:7px;border-radius:50%;background:var(--muted);
  transition:background .15s;
}
.saved-indicator.saving .dot{background:var(--warn-line);}
.saved-indicator.saved .dot{background:var(--teal);}
.saved-indicator.error .dot{background:oklch(55% 0.180 25);}

/* =====================================================================
 * Sticky bottom bar — Prev / pill / Next.
 * Floats above content on every section + review screen.
 * ===================================================================== */
.survey-bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  background:oklch(100% 0 0 / 0.95);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--line);
  padding:12px max(var(--space-4),calc((100% - 780px) / 2 + var(--space-4)));
  box-shadow:0 -4px 20px oklch(28% 0.060 250 / 0.06);
}
.bottombar-pill{
  font-size:var(--fs-12);font-weight:600;color:var(--muted);
  background:var(--muted-soft);border-radius:20px;
  padding:6px 14px;font-feature-settings:"tnum" 1;
  letter-spacing:-.1px;
}
.btn-bottom{
  display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:var(--fs-14);font-weight:600;
  cursor:pointer;border-radius:var(--r-md);
  padding:11px 22px;border:1px solid transparent;
  transition:background .15s,border-color .15s,transform .1s,color .15s;
}
.btn-bottom:active{transform:translateY(1px);}
.btn-bottom:disabled{opacity:.45;cursor:not-allowed;transform:none;}

.btn-prev{
  background:#fff;color:var(--navy);border-color:var(--line);
}
.btn-prev:hover:not(:disabled){border-color:var(--teal);color:var(--teal-deep);}
.btn-prev svg{transform:scaleX(-1);} /* mirror arrow for RTL */

.btn-next{background:var(--teal);color:#fff;border-color:var(--teal);}
.btn-next:hover:not(:disabled){background:var(--teal-deep);border-color:var(--teal-deep);}
.btn-next svg{transform:scaleX(-1);}

@media(max-width:560px){
  .survey-bottombar{padding:10px var(--space-4);}
  .bottombar-pill{font-size:11px;padding:5px 10px;}
  .btn-bottom{padding:10px 14px;font-size:var(--fs-13);}
  body.survey-active{padding-bottom:80px;}
}

/* =====================================================================
 * Buttons — primary / ghost / submit-final
 * ===================================================================== */
button{font-family:inherit;}
.btn-primary{
  background:var(--teal);color:#fff;border:1px solid var(--teal);
  font-size:var(--fs-15);font-weight:600;
  border-radius:var(--r-md);padding:13px 24px;
  cursor:pointer;box-shadow:var(--shadow-sm);
  transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;
}
.btn-primary:hover{background:var(--teal-deep);border-color:var(--teal-deep);}
.btn-primary:active{transform:translateY(1px);}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;background:var(--muted);border-color:transparent;box-shadow:none;}
.btn-ghost{
  background:#fff;color:var(--navy);border:1px solid var(--line);
  font-size:var(--fs-14);font-weight:600;
  border-radius:var(--r-md);padding:11px 20px;cursor:pointer;
}
.btn-ghost:hover{border-color:var(--navy);}

/* =====================================================================
 * Welcome screen
 * ===================================================================== */
.welcome-hero{
  margin-bottom:var(--space-6);
}
.welcome-eyebrow{
  display:inline-block;font-size:var(--fs-12);font-weight:600;
  color:var(--teal-deep);background:var(--teal-soft);
  border-radius:20px;padding:5px 14px;
  margin-bottom:var(--space-4);
}
.welcome-title{
  margin:0 0 var(--space-3);
  font-family:"IBM Plex Serif","IBM Plex Sans Arabic",Georgia,serif;
  font-weight:700;
  font-size:clamp(1.7rem, 2.4vw + 1rem, 2.4rem);
  line-height:1.25;color:var(--navy);
  letter-spacing:-.5px;
}
.welcome-sub{
  margin:0 0 var(--space-5);
  color:var(--muted);font-size:var(--fs-15);line-height:1.7;
}
.welcome-meta{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);
  color:var(--muted);font-size:var(--fs-13);
}
.welcome-meta li{
  display:inline-flex;align-items:center;gap:8px;
}
.welcome-meta bdi{
  color:var(--navy);font-weight:700;
  font-feature-settings:"tnum" 1;
}
.welcome-meta-dot{
  width:6px;height:6px;border-radius:50%;background:var(--teal);
  display:inline-block;
}

/* Trust card — the single place the "no individual eval" notice appears */
.trust-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--space-5) var(--space-5);
  margin-bottom:var(--space-6);
  box-shadow:var(--shadow-sm);
}
.trust-card-head{
  display:flex;align-items:center;gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.trust-card-mark{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--teal-soft);color:var(--teal-deep);
}
.trust-card-head h2{
  margin:0;font-size:var(--fs-17);font-weight:600;color:var(--navy);
  letter-spacing:-.1px;
}
.trust-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--space-4);
}
.trust-list li{
  display:flex;gap:var(--space-3);align-items:flex-start;
  font-size:var(--fs-14);line-height:1.7;color:var(--ink);
}
.trust-list li > div{flex:1;min-width:0;}
.trust-num{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--muted-soft);color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:var(--fs-13);
  font-feature-settings:"tnum" 1;
}
.trust-list b{font-weight:600;color:var(--navy);}
.trust-list bdi{font-feature-settings:"tnum" 1;}
.trust-note-card{
  margin-top:var(--space-4);
  padding:var(--space-4);
  background:var(--warn-bg);
  border:1px solid var(--warn-line);
  border-radius:var(--r-md);
  color:var(--warn-ink);
  font-size:var(--fs-14);
  line-height:1.8;
}
.trust-note-card b{
  color:var(--warn-ink);
  font-weight:700;
}
.trust-org{
  display:inline-block;
  background:var(--navy-soft);color:var(--navy);
  font-weight:700;font-size:11.5px;letter-spacing:.3px;
  padding:1px 7px;border-radius:6px;
  margin:0 2px;
}
.trust-support{
  margin:var(--space-4) 0 0;padding-top:var(--space-3);
  border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.trust-support a{color:var(--teal);font-weight:600;}

/* Section index (welcome screen) */
.section-index{margin-bottom:var(--space-6);}
.section-index-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);
  flex-wrap:wrap;margin-bottom:var(--space-4);
}
.section-index-head h2{
  margin:0;font-size:var(--fs-17);font-weight:600;color:var(--navy);
  letter-spacing:-.1px;
}
.section-index-hint{
  color:var(--muted);font-size:var(--fs-13);
}
.section-index-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:8px;
}
@media(min-width:640px){
  .section-index-list{grid-template-columns:1fr 1fr;}
}
.section-index-list button{
  width:100%;text-align:start;
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:11px var(--space-4);
  cursor:pointer;font-family:inherit;color:var(--ink);
  transition:border-color .15s,background .15s,transform .1s;
}
.section-index-list button:hover{
  border-color:var(--teal);background:var(--teal-soft);
}
.section-index-list button:active{transform:translateY(1px);}
.section-index-list .ix-num{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--muted-soft);color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:var(--fs-13);
  font-feature-settings:"tnum" 1;
}
.section-index-list .ix-title{
  flex:1;font-size:var(--fs-14);font-weight:500;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.section-index-list .ix-meta{
  flex:none;color:var(--muted);font-size:var(--fs-12);
  font-feature-settings:"tnum" 1;
}

/* Welcome CTA */
.welcome-cta{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  padding-top:var(--space-3);
}
.btn-start{
  display:inline-flex;align-items:center;gap:var(--space-3);
  font-size:var(--fs-15);font-weight:600;
  padding:14px 36px;border-radius:14px;
  box-shadow:var(--shadow-md);
}
.btn-start:hover{box-shadow:var(--shadow-lg);}

/* =====================================================================
 * Review screen
 * ===================================================================== */
.review-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--space-6);box-shadow:var(--shadow-sm);
}
.review-head{margin-bottom:var(--space-5);}
.review-head h2{
  margin:0 0 6px;font-size:var(--fs-19);font-weight:600;color:var(--navy);
}
.review-head p{
  margin:0;color:var(--muted);font-size:var(--fs-13);
}
.review-list{
  display:flex;flex-direction:column;gap:8px;margin-bottom:var(--space-5);
}
.review-group{
  border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:#fff;
}
.review-group-head{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  padding:10px 14px;background:var(--muted-soft);
  font-size:var(--fs-13);font-weight:600;color:var(--navy);
}
.review-group-head .ix-num{
  width:24px;height:24px;font-size:var(--fs-12);
}
.review-row{
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--space-3);padding:10px 14px;
  font-size:var(--fs-13);
}
.review-row:first-child{border-top:none;}
.review-q{color:var(--navy);font-weight:500;flex:1;min-width:0;}
.review-a{
  color:var(--ink);flex:1;min-width:0;text-align:start;
  white-space:pre-wrap;word-wrap:break-word;
}
.review-a.is-empty{color:var(--muted);font-style:italic;}
.review-edit{
  background:transparent;border:1px solid var(--teal);color:var(--teal-deep);
  border-radius:var(--r-sm);padding:4px 10px;font-size:var(--fs-12);cursor:pointer;
  font-family:inherit;font-weight:500;flex:none;
}
.review-edit:hover{background:var(--teal);color:#fff;}
.review-final{
  background:var(--teal-soft);
  border:1px solid var(--teal-mist);
  border-radius:var(--r-md);
  padding:var(--space-4);
  color:var(--teal-deep);
  font-size:var(--fs-13);line-height:1.65;
}
.review-final p{margin:0;}
.submit-status{margin-top:var(--space-3)!important;font-weight:600;}
.submit-status.is-error{color:oklch(48% 0.180 25);}

/* =====================================================================
 * Submitted screen
 * ===================================================================== */
.submitted-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--space-7) var(--space-5);box-shadow:var(--shadow-sm);
  text-align:center;
}
.submitted-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--teal-soft);color:var(--teal-deep);
  margin-bottom:var(--space-4);
}
.submitted-card h2{
  margin:0 0 var(--space-3);
  font-family:"IBM Plex Serif","IBM Plex Sans Arabic",Georgia,serif;
  font-size:var(--fs-22);font-weight:700;color:var(--navy);
}
.submitted-card p{
  margin:0 auto var(--space-5);
  color:var(--ink);font-size:var(--fs-14);line-height:1.7;
  max-width:54ch;
}
.submitted-org{
  display:inline-block;background:var(--navy);color:#fff;
  font-weight:700;font-size:11.5px;letter-spacing:.3px;
  padding:2px 8px;border-radius:6px;
  margin:0 2px;
}
.submitted-meta{
  display:flex;justify-content:center;gap:var(--space-5);flex-wrap:wrap;
  margin:0 auto var(--space-5);padding:var(--space-4) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:46ch;
}
.submitted-meta div{margin:0;}
.submitted-meta dt{
  font-size:var(--fs-12);color:var(--muted);
  margin-bottom:2px;
}
.submitted-meta dd{
  margin:0;color:var(--navy);font-weight:600;font-size:var(--fs-14);
  font-feature-settings:"tnum" 1;
}
.submitted-note{
  font-size:var(--fs-12)!important;color:var(--muted)!important;
}

/* =====================================================================
 * Screens — only one visible at a time.
 * ===================================================================== */
.screen{display:none;}
.screen.is-active{display:block;animation:screenIn .25s ease-out;}
@keyframes screenIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

/* =====================================================================
 * Lock banner + locked state
 * ===================================================================== */
.lock-banner{
  background:var(--teal-soft);border:1px solid var(--teal);
  border-radius:var(--r-md);padding:12px var(--space-4);
  margin-bottom:var(--space-4);
  color:var(--teal-deep);font-size:var(--fs-13);font-weight:500;
  display:none;
}
.lock-banner.show{display:block;}

body.locked input,body.locked textarea,body.locked select,
body.locked .opt{cursor:not-allowed;}
body.locked input,body.locked textarea,body.locked select{
  background:var(--muted-soft);color:var(--muted);
}
body.locked .opt:has(input:checked){
  background:var(--muted-soft);border-color:var(--line);color:var(--muted);font-weight:400;
}
body.locked .survey-bottombar{display:none;}

/* =====================================================================
 * Footer
 * ===================================================================== */
footer{
  text-align:center;font-size:var(--fs-12);color:var(--muted);
  margin-top:var(--space-7);font-weight:400;line-height:1.7;
}

/* =====================================================================
 * Print
 * ===================================================================== */
@media print{
  body{background:#fff;}
  .survey-progress,.survey-topbar,.survey-bottombar{display:none !important;}
  .sec-card{box-shadow:none;border:1px solid #ccc;break-inside:avoid;}
  .welcome-hero,.trust-card,.section-index,.welcome-cta{display:none;}
  textarea{min-height:48px;}
}

/* =====================================================================
 * Reduced motion
 * ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* =====================================================================
 * Login (kept for templates that reuse theme.css)
 * ===================================================================== */
.login-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--space-6) var(--space-5) var(--space-5);margin-top:var(--space-5);
  box-shadow:var(--shadow-md);max-width:520px;margin-left:auto;margin-right:auto;
}
.login-card .field{margin-bottom:var(--space-4);}
.login-card label{
  display:block;font-size:var(--fs-14);font-weight:600;color:var(--ink);
  margin-bottom:4px;letter-spacing:-.1px;
}
.login-card .field-domain{
  display:block;font-size:var(--fs-12);color:var(--muted);font-weight:400;
  margin-bottom:8px;letter-spacing:.1px;
}
.login-card .field-domain bdi{
  background:var(--teal-soft);color:var(--teal-deep);
  padding:2px 8px;border-radius:6px;font-weight:500;
  font-family:"SF Mono","Menlo","Consolas",monospace;
  unicode-bidi:isolate;
}
.login-card .input-wrap{position:relative;}
.login-card .input-wrap input,
.login-card .input-wrap select{
  width:100%;font-family:inherit;font-size:var(--fs-15);color:var(--ink);
  background:oklch(99% 0.004 220);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:11px 14px 11px 42px;
  transition:border-color .15s,box-shadow .15s,background .15s;
  appearance:none;-webkit-appearance:none;
}
.login-card .input-wrap select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23143A5C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m1 1.5 5 5 5-5'/></svg>");
  background-repeat:no-repeat;background-position:left 14px center;background-size:11px;
  padding-left:42px;
}
.login-card .input-wrap input:focus,
.login-card .input-wrap select:focus{
  outline:none;border-color:var(--teal);background:#fff;
  box-shadow:0 0 0 3px oklch(52% 0.083 195 / 0.12);
}
.login-card .input-wrap input:invalid:not(:placeholder-shown){
  border-color:oklch(60% 0.130 25);background:oklch(98% 0.020 25);
}
.login-card .input-icon{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;display:flex;
}
.login-card .input-wrap input:focus ~ .input-icon{color:var(--teal);}
.login-card .hint{
  display:block;font-size:var(--fs-12);color:var(--muted);font-weight:400;
  margin-top:6px;line-height:1.5;
}
.login-card .returning-banner{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--teal-soft);border:1px solid var(--teal-mist);border-radius:var(--r-md);
  padding:var(--space-3) var(--space-4);font-size:var(--fs-13);color:var(--teal-deep);font-weight:500;
}
.login-card .returning-banner b{color:var(--navy);font-weight:700;}
.login-card .welcome-banner{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--teal-soft);border:1px solid var(--teal-mist);border-radius:var(--r-md);
  padding:var(--space-3) var(--space-4);font-size:var(--fs-13);color:var(--teal-deep);font-weight:500;
  margin-bottom:var(--space-4);
}
.login-card .returning-badge{
  background:var(--teal);color:#fff;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:20px;letter-spacing:.2px;
}
.login-card .err{
  font-size:var(--fs-13);color:oklch(40% 0.140 25);background:oklch(96% 0.030 25);border:1px solid oklch(85% 0.060 25);
  border-radius:var(--r-md);padding:11px 14px;margin-bottom:var(--space-4);display:none;
  line-height:1.55;
}
.login-card .err.show{display:block;}
.login-card .submit-row{margin-top:var(--space-5);display:flex;justify-content:center;}
.login-card .submit-row button{
  width:100%;max-width:320px;padding:13px 24px;font-size:var(--fs-15);
  font-weight:600;border-radius:var(--r-md);letter-spacing:.2px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s,box-shadow .15s;
}
.login-card .submit-row button:not(:disabled):hover{transform:translateY(-1px);}
.login-card .submit-row button:not(:disabled):active{transform:translateY(0);}

/* =====================================================================
 * Responsive
 * ===================================================================== */
@media(max-width:640px){
  .wrap{padding:var(--space-5) var(--space-4) var(--space-8);}
  .welcome-title{font-size:1.6rem;}
  .sec-card{padding:var(--space-5) var(--space-4) var(--space-4);}
  .sec-card-head{gap:var(--space-3);padding-bottom:var(--space-3);margin-bottom:var(--space-4);}
  .sec-card-title{font-size:var(--fs-17);}
  .q-row{grid-template-columns:1fr;}
  .topbar-title{display:none;} /* tight: just counter on mobile */
}

/* ----- Unit-type segmented toggle (survey identity step 2) -----
 * Two equal-width pill segments backed by a hidden radio group.
 * Reuses the .opt visual language (teal-soft tint, teal border/text on
 * selection) but lays out as a single horizontal segmented control.
 * RTL-friendly: flex row mirrors automatically under [dir=rtl]. */
.unit-type-toggle{
  display:flex;gap:var(--space-2);
  /* focus-within ring matches the input/.opt focus treatment */
  border-radius:var(--r-md);transition:box-shadow .15s;
}
.unit-type-toggle:focus-within{
  box-shadow:0 0 0 3px oklch(52% 0.083 195 / 0.16);
}
.unit-type-opt{
  flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;text-align:center;
  border:1px solid var(--line);background:oklch(99% 0.004 220);
  border-radius:var(--r-md);padding:11px 14px;
  font-size:var(--fs-14);color:var(--ink);
  transition:border-color .15s,background .15s,color .15s;
}
.unit-type-opt:hover{border-color:var(--teal);background:#fff;}
/* Hide the native radio dot — selection is conveyed by the segment styling. */
.unit-type-opt input[type=radio]{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;
}
.unit-type-opt span{font-weight:500;line-height:1.2;}
/* Selected segment: teal tint + border + text (matches .opt:has(:checked)). */
.unit-type-opt:has(input:checked){
  background:var(--teal-soft);border-color:var(--teal);
  color:var(--teal-deep);font-weight:600;
}
/* Fallback for engines without :has() — class-driven, set by JS if needed. */
.unit-type-opt.is-on{
  background:var(--teal-soft);border-color:var(--teal);
  color:var(--teal-deep);font-weight:600;
}

/* =====================================================================
 * Submit success toast — fixed top-center, auto-dismisses after ~4 s.
 * ===================================================================== */
.submit-toast{
  position:fixed;
  top:var(--space-5);
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  z-index:9999;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  background:var(--teal);
  color:#fff;
  font-size:var(--fs-15);
  font-weight:600;
  line-height:1.4;
  padding:14px var(--space-5);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  white-space:nowrap;
  pointer-events:none;
  /* start hidden */
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
}
.submit-toast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.submit-toast.is-hiding{
  opacity:0;
  transform:translateX(-50%) translateY(-8px);
}
.submit-toast-icon{
  flex:none;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
}

/* =====================================================================
 * Final-submit confirmation modal — replaces window.confirm
 * ===================================================================== */
.confirm-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  /* padding keeps the card from touching screen edges on mobile */
  padding:var(--space-5);
}
.confirm-modal-backdrop{
  position:absolute;
  inset:0;
  background:oklch(24% 0.020 250 / 0.50);
}
.confirm-modal-card{
  position:relative;
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:var(--space-6) var(--space-6) var(--space-5);
  max-width:420px;
  width:100%;
  text-align:center;
  direction:rtl;
}
.confirm-modal-title{
  margin:0 0 var(--space-4);
  font-size:var(--fs-19);
  font-weight:700;
  color:var(--navy);
  line-height:1.4;
}
.confirm-modal-msg{
  margin:0 0 var(--space-6);
  font-size:var(--fs-15);
  color:var(--muted);
  line-height:1.65;
}
.confirm-modal-actions{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
/* Primary confirm button — teal fill */
.confirm-btn-yes{
  display:block;width:100%;
  padding:13px var(--space-5);
  background:var(--teal);
  color:#fff;
  font-family:inherit;
  font-size:var(--fs-15);
  font-weight:600;
  border:none;
  border-radius:var(--r-md);
  cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease;
}
.confirm-btn-yes:hover{
  background:var(--teal-deep);
  box-shadow:var(--shadow-md);
}
.confirm-btn-yes:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}
/* Cancel/ghost button — navy outline */
.confirm-btn-no{
  display:block;width:100%;
  padding:11px var(--space-5);
  background:transparent;
  color:var(--navy);
  font-family:inherit;
  font-size:var(--fs-15);
  font-weight:500;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.confirm-btn-no:hover{
  background:var(--navy-soft);
  border-color:var(--navy);
}
.confirm-btn-no:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
}
/* Destructive confirm — red fill, used for delete confirmations */
.confirm-btn-danger{
  background:oklch(55% 0.180 25);
}
.confirm-btn-danger:hover{
  background:oklch(48% 0.190 25);
}
.confirm-btn-danger:focus-visible{
  outline-color:oklch(55% 0.180 25);
}