/* ============================================================
   Check-In — Stylesheet
   Self-contained, no external CSS dependencies besides Google Fonts
   ============================================================ */
:root{
  --bg: #EEF0E8;
  --bg-soft: #E5E9DD;
  --card: #FBFAF6;
  --ink: #233d3a;
  --ink-soft: #51605A;
  --sage: #376242;
  --sage-light: #8FA890;
  --sand: #C99A5B;
  --brick: #A8503F;
  --mist: #D7DCD2;
  --radius: 22px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', 'IBM Plex Sans Arabic', sans-serif;
  min-height:100vh;
  line-height:1.7;
  padding-bottom: 70px;
}
html[lang="ar"] body{ font-family: 'IBM Plex Sans Arabic', sans-serif; }
.display{ font-family:'Aref Ruqaa', 'Inter', serif; }
html[lang="ar"] .display{ font-family:'Aref Ruqaa', serif; }

/* accessibility: skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:8px; z-index:100;
}
.skip-link:focus{ left:16px; top:16px; }

.noscript-banner{
  position:fixed; inset:0; background:var(--bg); color:var(--ink);
  padding:24px; font-family:sans-serif; z-index:999; display:flex;
  align-items:center; justify-content:center; text-align:center;
}

/* layout */
.wrap{ max-width:640px; margin:0 auto; padding: 18px 20px 40px; }
.screen{ display:none; animation: fade .5s ease; }
.screen.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* top bar: home button + language switcher */
.top-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.home-btn{
  display:flex; align-items:center; gap:6px; background:none; border:1px solid transparent;
  color: var(--ink-soft); font-family:inherit; font-size:13px; padding:6px 10px; border-radius:20px;
  cursor:pointer; transition: all .2s ease;
}
.home-btn:hover{ background: var(--card); border-color: var(--mist); color: var(--ink); }
.home-btn svg{ width:16px; height:16px; flex-shrink:0; }

/* language switcher */
.lang-row{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.lang-btn{
  background: var(--card); border:1px solid var(--mist); color: var(--ink-soft);
  font-family:inherit; font-size:12.5px; padding:6px 12px; border-radius:20px;
  cursor:pointer; transition: all .2s ease;
}
.lang-btn:hover{ border-color: var(--sage-light); }
.lang-btn.active{ background: var(--sage); color:#fff; border-color: var(--sage); font-weight:600; }

/* focus visibility for keyboard users (a11y) */
.lang-btn:focus-visible, .home-btn:focus-visible, .opt-btn:focus-visible,
.btn:focus-visible, .back-link:focus-visible, .card:focus-visible{
  outline: 2.5px solid var(--sage); outline-offset:2px;
}

/* breathing wave */
.wave-wrap{ width:100%; display:flex; justify-content:center; margin: 8px 0 18px; }
.wave-wrap svg{ width:100%; max-width:420px; height:auto; }
.breathe{ transform-origin:center; animation: breathe 4.5s ease-in-out infinite; }
.breathe.delay{ animation-delay: .8s; opacity:.5; }
@keyframes breathe{
  0%,100%{ transform:scaleY(1); opacity:.55; }
  50%{ transform:scaleY(1.35); opacity:1; }
}

/* hero */
.eyebrow{
  display:inline-block; font-size:13px; color:var(--sage);
  background: rgba(95,122,102,0.1); padding:5px 14px; border-radius:30px;
  margin-bottom:18px; letter-spacing:.3px;
}
h1.hero-title{ font-size: 42px; font-weight:700; line-height:1.3; margin-bottom:14px; }
.hero-sub{ color:var(--ink-soft); font-size:16px; max-width: 480px; }
.privacy-note{
  margin-top:18px; font-size:13px; color:var(--sage); display:flex; gap:8px; align-items:center;
}
.privacy-note::before{ content:"🔒"; font-size:13px; }

/* cards */
.cards{ display:flex; flex-direction:column; gap:14px; margin-top:30px; }
.card{
  background: var(--card); border:1px solid var(--mist); border-radius: var(--radius);
  padding:22px; cursor:pointer; transition: all .25s ease; text-align:start;
  display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden;
}
.card:hover{ border-color:var(--sage-light); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(30,46,44,0.08); }
.card .tag{ font-size:12px; color:var(--sand); font-weight:600; letter-spacing:.3px; }
.card h2{ font-size:21px; font-weight:700; }
.card p{ font-size:14px; color:var(--ink-soft); }
.card .meta{ font-size:12.5px; color:var(--sage); margin-top:4px; }

/* ad slots — reserved, collapsed to zero footprint until an ad network
   fills them. Replace the placeholder <!-- AD UNIT --> comment inside each
   .ad-slot div (see index.html) with your <ins class="adsbygoogle"> tag. */
.ad-slot{
  margin-top:18px; min-height:0; overflow:hidden;
  border-radius:16px; text-align:center;
}
.ad-slot:not(:empty){
  border:1px solid var(--mist); background: rgba(255,255,255,0.4); padding:14px;
}

/* progress */
.progress-row{ display:flex; gap:6px; margin-bottom:30px; justify-content:center; }
.dot{ height:6px; flex:1; max-width:36px; border-radius:4px; background: var(--mist); transition: background .3s ease; }
.dot.done{ background: var(--sage); }
.dot.current{ background: var(--sand); }

.back-link{
  background:none; border:none; color:var(--ink-soft); font-family:inherit; font-size:14px;
  cursor:pointer; margin-bottom: 18px; display:flex; align-items:center; gap:4px;
}
.back-link:hover{ color:var(--ink); }

.q-card{
  background: var(--card); border:1px solid var(--mist); border-radius: var(--radius);
  padding: 30px 24px;
}
.q-eyebrow{ font-size:13px; color:var(--sage); margin-bottom:10px; font-weight:600; }
.q-text{ font-size:22px; font-weight:600; line-height:1.5; margin-bottom: 26px; }

.options{ display:flex; flex-direction:column; gap:10px; }
.opt-btn{
  background: var(--bg); border:1.5px solid var(--mist); border-radius:14px;
  padding:16px 18px; font-family:inherit; font-size:15.5px; color:var(--ink);
  text-align:start; cursor:pointer; transition: all .2s ease;
}
.opt-btn:hover{ border-color: var(--sage); background: #fff; }
.opt-btn.selected{ border-color: var(--sage); background: rgba(95,122,102,0.12); font-weight:600; }

/* crisis interstitial */
.crisis-box{
  background: #FBF1EE; border:1.5px solid var(--brick); border-radius: var(--radius);
  padding:26px 22px; margin-bottom:20px;
}
.crisis-box h3{ color:var(--brick); font-size:19px; margin-bottom:10px; }
.crisis-box p{ font-size:14.5px; color:var(--ink); margin-bottom:10px; }
.crisis-box a{ color:var(--brick); font-weight:600; }
.btn{
  display:inline-block; background: var(--sage); color:#fff; border:none; border-radius:14px;
  padding:14px 24px; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer;
  transition: all .2s ease; text-align:center;
}
.btn:hover{ background:#4d6754; transform: translateY(-1px); }
.btn.ghost{ background:none; border:1.5px solid var(--mist); color:var(--ink); }
.btn.ghost:hover{ border-color: var(--sage); background:#fff; }
.btn-row{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }

/* results */
.result-card{
  background: var(--card); border:1px solid var(--mist); border-radius: var(--radius);
  padding: 32px 26px; text-align:center;
}
.score-ring{
  width:130px; height:130px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  border: 6px solid var(--sage-light); position:relative;
}
.score-ring .num{ font-size:38px; font-weight:700; }
.score-ring .max{ font-size:12px; color:var(--ink-soft); }
.band-label{ font-size:20px; font-weight:700; margin-bottom:8px; }
.band-desc{ color:var(--ink-soft); font-size:14.5px; max-width:420px; margin:0 auto 18px; }
.next-step{
  background: var(--bg-soft); border-radius:14px; padding:16px 18px; text-align:start;
  font-size:14px; color:var(--ink); margin-bottom: 18px;
}
.next-step b{ display:block; margin-bottom:4px; color:var(--sage); font-size:13px; }

footer.disclaimer{
  position:fixed; bottom:0; right:0; left:0; background: var(--ink); color: #fff;
  font-size:12px; text-align:center; padding:10px 14px; opacity:.92; z-index:5;
}
footer.disclaimer span{ color: var(--sage-light); }

@media (max-width:480px){
  h1.hero-title{ font-size:32px; }
  .q-text{ font-size:19px; }
}

@media (prefers-reduced-motion: reduce){
  .breathe{ animation:none; }
  .screen{ animation:none; }
}