/* Learning release: component styles on top of the preserved Zain / Doppio identity. */
:root { --learning-line:#292929; --learning-surface:#0e0e0e; }
.ic-svg { width:24px; height:24px; flex-shrink:0; }
.quiet-link { display:inline-flex; align-items:center; gap:9px; }
.quiet-link .ic-svg { width:18px; height:18px; }
.product-shell { max-width:1200px; }
#app { min-width:0; }
#app:focus { outline:none; }
[hidden] { display:none!important; }
.page-message { width:min(100% - 40px,620px); margin:100px auto; text-align:center; }
.page-message h1 { font-size:40px; line-height:1.2; margin:20px 0; }
.page-message p { color:var(--dim); margin:0 0 28px; }
.message-icon .ic-svg { width:40px; height:40px; color:var(--amber); }
.page-loading { padding:80px 24px; text-align:center; color:var(--dim); }
.home-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 36px; }
.home-header h1 { font-size:38px; line-height:1.2; margin:10px 0; font-weight:700; }
.home-header p { color:var(--dim); font-size:18px; }
.home-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; }
.continue-panel { position:relative; display:flex; flex-direction:column; padding:34px 36px; border:1px solid #3e3535; border-radius:20px; background:linear-gradient(130deg,rgba(255,91,95,.055),transparent 70%),#0d0d0d; min-width:0; }
.continue-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.learning-emblem { width:54px; height:54px; border:1px solid #483234; border-radius:15px; color:var(--amber); display:grid; place-items:center; }
.learning-emblem .ic-svg { width:27px; height:27px; }
.continue-path { color:#c5aaa9!important; font-size:15px!important; margin:0 0 10px!important; }
.continue-panel h2 { max-width:700px; font-size:clamp(30px,3vw,43px); line-height:1.2; font-weight:700; margin:0 0 16px; }
.continue-panel>p { color:#bbb8b4; font-size:18px; line-height:1.8; margin-bottom:20px; }
.lesson-facts { display:flex; flex-wrap:wrap; align-items:center; gap:20px; color:#999; margin:6px 0 27px; font-size:14px; }
.lesson-facts>span { display:inline-flex; gap:7px; align-items:center; }
.lesson-facts .ic-svg { width:17px; height:17px; }
.learning-count { margin-top:auto; display:flex; justify-content:space-between; gap:12px; color:#aaa; font-size:15px; }
.learning-count b { color:var(--text); font-weight:400; }
.continue-panel .progress-line { height:7px; margin:12px 0 25px; background:#252020; }
.progress-line i { transition:width .25s ease; background:var(--amber); }
.continue-action { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.continue-action>.btn { min-height:50px; }
.continue-action>span { font-size:13px; color:#8b8b8b; }
.home-side { display:flex; flex-direction:column; gap:20px; }
.weekly-panel { border:1px solid var(--learning-line); padding:25px; border-radius:18px; }
.panel-heading { display:flex; gap:10px; align-items:center; }
.panel-heading .ic-svg { width:21px; height:21px; color:#b9aaa9; }
.panel-heading h2 { font-size:20px; font-weight:700; }
.weekly-number { display:block; font-size:32px; line-height:1.25; margin:24px 0 15px; font-weight:700; }
.weekly-number small { font-size:16px; color:var(--dim); font-weight:400; margin-inline-start:9px; }
.weekly-panel p { color:var(--dim); font-size:15px; margin:14px 0; }
.weekly-panel .quiet-link { font-size:14px; }
.inspiration-panel { flex:1; padding:22px 25px; border-inline-start:2px solid #72464a; background:linear-gradient(90deg,transparent,#141010); border-radius:0 12px 12px 0; }
.inspiration-panel .context-label { display:flex; align-items:center; gap:9px; color:#c89f9f!important; }
.inspiration-panel .ic-svg { width:19px; height:19px; }
.inspiration-panel p { font-size:18px; line-height:1.8; color:#d1c5c1; margin-top:16px; }
.next-session { margin-top:44px; }
.next-session h2 { font-size:27px; }
.session-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:22px; }
.session-steps article { position:relative; border-top:1px solid #393232; padding:22px 4px; }
.session-steps .ic-svg { width:23px; height:23px; color:#ae9d9c; }
.session-number { position:absolute; inset-inline-end:4px; top:22px; font:14px Consolas,monospace; color:#6e6262; }
.session-steps h3 { margin:16px 0 7px; font-size:22px; }
.session-steps p { color:#9b9894; font-size:16px; }
.linked-practice { display:flex; align-items:center; justify-content:space-between; gap:32px; border:1px solid var(--learning-line); border-radius:18px; padding:28px 30px; margin-top:18px; }
.linked-practice h2 { font-size:26px; line-height:1.3; margin:9px 0; }
.linked-practice p { max-width:700px; color:var(--dim); font-size:16px; }
.linked-practice>.btn { flex-shrink:0; }
.home-footer { display:flex; gap:18px; justify-content:space-between; padding:28px 0 0; font-size:14px; color:#888; }
.home-footer a { color:#a99b9b; }
.is-complete .learning-emblem { color:#cfcfcf; border-color:#3a3a3a; }
.is-complete { border-color:#3c3c3c; background:linear-gradient(120deg,#171717,#0d0d0d 75%); }
/* Account pages */
body.is-auth-route .nav { position:absolute; inset-inline:0; top:0; width:100%; }
body.is-auth-route .nav-inner { display:flex; justify-content:space-between; width:min(calc(100% - 48px),1200px); height:84px; }
body.is-auth-route .brand,body.is-auth-route .nav-links { position:static!important; transform:none!important; }
body.is-auth-route .brand { flex-shrink:0; }
body.is-auth-route .nav-links { margin-inline-start:auto!important; }
.auth-utility { direction:inherit; gap:22px; }
.auth-contact-direct { text-decoration:none; font-size:15px; font-weight:400; }
body.is-auth-route .auth-wrap.account-page { min-height:100svh!important; padding:135px 24px 60px!important; }
body.is-auth-route .auth-card { width:min(430px,100%)!important; }
.auth-back { display:inline-block; font-size:14px; text-decoration:none; color:#999; margin-bottom:30px; }
body.is-auth-route .auth-heading { text-align:start; margin-bottom:30px; }
body.is-auth-route .auth-heading h1 { font-size:40px; margin-top:12px; line-height:1.15; }
body.is-auth-route .auth-card .sub { text-align:start; font-size:17px!important; margin-top:16px!important; }
body.is-auth-route #authForm { width:100%; gap:4px; }
body.is-auth-route .auth-card .field label { font-size:16px!important; margin-bottom:9px!important; letter-spacing:0!important; text-transform:none!important; }
body.lang-en.is-auth-route .auth-card .field label { font-family:'Segoe UI',Arial,sans-serif; }
body.is-auth-route .auth-card .field input { width:100%; border-radius:8px; border-color:#414141; background:#0c0c0c; }
.password-control { position:relative; }
.password-control input { padding-inline-end:54px!important; }
.password-toggle { position:absolute; inset-inline-end:4px; top:4px; width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; color:#a9a4a4; cursor:pointer; border-radius:6px; }
.password-toggle .ic-svg { width:21px; height:21px; }
.field small { display:block; color:#999; font-size:13px; line-height:1.5; margin-top:8px; }
.field-error { display:block; color:#ff989a; font-size:14px; line-height:1.6; margin-top:8px; }
[aria-invalid=true] { border-color:#ff777a!important; }
body.is-auth-route .auth-submit { width:100%; border-radius:8px; background:var(--amber); border-color:var(--amber); color:#160708; min-height:52px; font-weight:700; }
button:disabled { opacity:.6; cursor:wait; }
#recoveryMount { text-align:start; margin-top:20px; font-size:15px; }
#recoveryMount a { color:#c8aaa9; }
body.is-auth-route .auth-alt { margin-top:27px; text-align:center; font-size:16px; }
.auth-reassurance { border-top:1px solid #272424; padding-top:24px; margin-top:30px; display:flex; align-items:center; justify-content:center; gap:9px; color:#827c7c; font-size:14px; }
.auth-reassurance .ic-svg { width:18px; height:18px; }
.success-copy,#accountStatus { color:#cfcfcf; margin-top:18px; line-height:1.8; }
.setup-page h1 { font-size:clamp(34px,4vw,52px); line-height:1.2; margin:16px 0; }
.setup-page>p { max-width:820px; color:#bcb8b5; font-size:20px; line-height:1.9; }
.setup-page form { margin-top:38px; }
.setup-page fieldset { border:0; }
.setup-page legend { font-size:23px; margin-bottom:20px; }
.setup-page .choice-grid { grid-template-columns:repeat(4,1fr); }
.setup-page form>.dim { margin:18px 0 28px; font-size:15px; }
.lesson-exercise { border:1px solid #4c3739; border-radius:16px; padding:30px; margin:42px 0; background:#110e0e; }
.lesson-exercise h2 { font-size:29px; line-height:1.3; margin:12px 0 18px; }
.lesson-exercise>p,.lesson-exercise li { color:#c0b9b5; font-size:18px; line-height:1.9; }
.lesson-exercise fieldset { border:0; margin:22px 0; }
.lesson-exercise legend { font-size:20px; margin-bottom:16px; font-weight:700; }
.scenario-option { display:flex; align-items:flex-start; gap:12px; margin:10px 0; padding:15px; border:1px solid #393030; border-radius:9px; cursor:pointer; font-size:17px; }
.scenario-option:has(input:checked) { border-color:var(--amber); background:#211516; }
.scenario-option input { flex-shrink:0; margin-top:8px; accent-color:var(--amber); }
.exercise-resources { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin:22px 0; }
.lesson-exercise ol { padding-inline-start:24px; }
.lesson-exercise .learning-question { padding:20px 0 0; border:0; }
.lesson-exercise .learning-question label { font-size:18px; }
.lesson-exercise .answer-control { display:flex; gap:10px; margin-top:13px; }
.lesson-exercise .answer-control input { min-width:0; flex:1; min-height:48px; padding:10px 14px; border:1px solid #4d4242; background:#090909; color:white; border-radius:8px; }
.lesson-exercise .answer-control .btn { flex-shrink:0; }
.reading-section { scroll-margin-top:160px; }
.saved-page>h1 { font-size:42px; margin-top:10px; }
.saved-page>p { color:var(--dim); margin:12px 0 32px; }
.saved-list { display:grid; gap:16px; }
.saved-list>a { display:flex; gap:22px; align-items:center; border:1px solid #343030; border-radius:14px; padding:24px; text-decoration:none; }
.saved-list>a>.ic-svg { color:var(--amber); }
.saved-list>a>div { flex:1; min-width:0; }
.saved-list h2 { font-size:25px; }
.saved-list p { margin-top:8px; color:var(--dim); white-space:pre-wrap; overflow-wrap:anywhere; }
.saved-list>a>span { color:#999; font-size:14px; }
.mobile-dock { z-index:100; }
.modal-backdrop { z-index:200; }
.modal { max-height:calc(100svh - 40px); overflow-y:auto; }
.just-completed .lesson-intro { animation:completionFlash .45s ease-out; }
@keyframes completionFlash { from { opacity:.65; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media(max-width:1000px) { .home-layout{grid-template-columns:minmax(0,1fr) 260px}.continue-panel{padding:28px}.linked-practice{align-items:flex-start;flex-direction:column}.home-header h1{font-size:34px} }
@media(max-width:760px) {
  .learning-home { padding-top:28px; }
  .home-header { align-items:flex-start; flex-direction:column; gap:16px; margin-bottom:25px; }
  .home-header h1 { font-size:32px; }
  .home-header p { font-size:17px; }
  .home-layout { grid-template-columns:1fr; }
  .continue-panel { padding:24px 22px; border-radius:16px; }
  .continue-panel h2 { font-size:31px; }
  .continue-panel>p { font-size:17px; }
  .continue-top { margin-bottom:17px; }
  .learning-emblem { width:45px; height:45px; border-radius:12px; }
  .continue-action { align-items:stretch; flex-direction:column; gap:12px; }
  .continue-action>span { text-align:center; }
  .home-side { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .weekly-panel,.inspiration-panel { padding:20px; }
  .weekly-number { font-size:27px; }
  .session-steps { gap:14px; }
  .session-steps h3 { font-size:20px; }
  .session-steps p { font-size:15px; }
  .home-footer { flex-direction:column; }
  .setup-page .choice-grid { grid-template-columns:repeat(2,1fr); }
  .lesson-exercise { padding:23px 19px; }
  .saved-list>a { flex-wrap:wrap; padding:19px; }
}
@media(max-width:560px) {
  body.is-auth-route .nav-inner { width:calc(100% - 36px); height:76px; }
  .auth-utility { gap:15px; }
  .auth-contact-direct { font-size:13px; }
  body.is-auth-route .auth-wrap.account-page { padding:112px 22px 40px!important; }
  body.is-auth-route .auth-heading h1 { font-size:35px; }
  .auth-back { margin-bottom:25px; }
  .auth-reassurance { font-size:13px; }
  .home-side { grid-template-columns:1fr; }
  .weekly-panel { padding:23px; }
  .inspiration-panel p { font-size:18px; }
  .session-steps { grid-template-columns:1fr; gap:0; }
  .session-steps article { padding:20px 0; }
  .session-steps h3 { display:inline-block; margin:0 12px 0 0; }
  .session-steps p { margin-top:10px; max-width:85%; }
  .next-session h2 { font-size:25px; }
  .linked-practice { padding:24px 22px; gap:21px; }
  .linked-practice>.btn { width:100%; }
  .lesson-exercise .answer-control { flex-direction:column; }
  .scenario-option { font-size:16px; padding:13px; }
  .lesson-exercise h2 { font-size:26px; }
  .lesson-article>.lesson-intro h1 { font-size:36px; }
  .reading-section { margin-top:44px!important; }
  .modal { width:calc(100% - 24px)!important; padding:25px 20px!important; }
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto!important} *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }
.nav-links>a.btn-primary { color:var(--amber-ink); }
.saved-list>a,.saved-list>a:visited { color:var(--text); }
.saved-list>a>svg { color:var(--amber); }
@media(max-width:600px) { .saved-list>a { display:grid; grid-template-columns:24px 1fr; } .saved-list>a>span { grid-column:2; } }