/* ============================================================
   A little closer — "Calm" design (v4.0)
   A redesign replacing the earlier bold indigo/coral theme with a
   gentler, lower-arousal palette (muted sage + dusty blue, warm
   neutral paper) and softer type, aimed at people who may be
   anxious. Same markup, same classes/IDs — this file only changes
   how things look, not how they work.
   ============================================================ */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/fonts/Inter-Variable.woff2') format('woff2-variations'),url('/fonts/Inter-Variable.woff2') format('woff2');
}

:root{
  color-scheme:light dark;
  --ink:#243e37;
  --ink-soft:#3f554c;
  --muted:#738079;
  --line:#e3e6dd;
  --paper:#fbfaf6;
  --surface:#fffefa;
  --surface-soft:#f0f2e9;
  --accent:#285b4d;
  --accent-strong:#1c4238;
  --accent-soft:#eaf0e7;
  --accent-ink:#ffffff;
  --secondary:#7e9d76;
  --secondary-soft:#dce6d5;
  --danger:#9c4c38;
  --danger-soft:#f3e3df;
  --shadow-sm:0 1px 2px rgba(36,62,55,.08);
  --shadow-md:0 18px 40px -24px rgba(36,62,55,.32);
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --radius-pill:999px;
  --sans:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:Georgia,'Iowan Old Style','Palatino Linotype',serif;
}
@media(prefers-color-scheme:dark){
  :root{
    --ink:#e7ede9;
    --ink-soft:#bccabf;
    --muted:#8ea091;
    --line:#2d3630;
    --paper:#121714;
    --surface:#1b211c;
    --surface-soft:#222a23;
    --accent:#7fae91;
    --accent-strong:#a3cbb0;
    --accent-soft:#263129;
    --accent-ink:#11160f;
    --secondary:#a0ba93;
    --secondary-soft:#2b3627;
    --danger:#d98b78;
    --danger-soft:#362421;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow-md:0 22px 48px -24px rgba(0,0,0,.6);
  }
}

/* ---------- base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
button,a,summary{touch-action:manipulation}
button{cursor:pointer;min-height:40px}
button:disabled{opacity:.5;cursor:wait}
a{color:var(--accent);text-underline-offset:3px}
button,a,input,textarea,select,summary{transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .1s ease}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent-strong);outline-offset:3px}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.2;letter-spacing:0;color:var(--ink)}
h1{font-size:44px;margin-bottom:18px}
h2{font-size:27px;margin-bottom:16px}
h3{font-size:16px;font-weight:600;color:var(--ink);font-family:var(--sans)}
p{margin-bottom:16px}
.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:700;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.muted{color:var(--muted)}
.small,small{font-size:13px}
.mark{font-size:36px;line-height:1;color:var(--accent);font-weight:400;font-family:var(--display)}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}

/* ---------- layout shell ---------- */
aside{position:fixed;inset:0 auto 0 0;width:258px;background:var(--surface);border-right:1px solid var(--line);padding:32px 24px;display:flex;flex-direction:column;overflow:auto}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font:500 23px var(--display);margin-bottom:40px;letter-spacing:0}
.brand small{display:block;font:9px/1.4 var(--sans);letter-spacing:1.8px;color:var(--muted);margin-top:6px;font-weight:600}
nav{display:grid;gap:4px}
nav button{display:flex;gap:13px;align-items:center;text-align:left;border:1px solid transparent;border-radius:var(--radius-sm);background:none;color:var(--muted);padding:12px 12px;font-size:11px}
nav button span{font-size:13px;color:var(--ink-soft)}
nav button:hover{background:var(--surface-soft)}
nav button.active{background:var(--accent-soft);color:var(--accent-strong);border-color:transparent;border-left:3px solid var(--accent);padding-left:9px}
nav button.active span{color:var(--accent-strong);font-weight:600}
.sidebar-note{margin-top:auto;padding-top:22px;border-top:1px solid var(--line)}
.sidebar-note>span{display:none}
.sidebar-note p{font:600 14px/1.6 var(--sans);color:var(--muted)}
.quiet{display:block;padding:8px 0;background:none;border:0;text-align:left;text-decoration:none;font-size:12px;min-height:auto;color:var(--muted)}
.quiet:hover{color:var(--ink)}
main{margin-left:258px;padding:32px 48px;max-width:1550px}
header{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:20px;font-size:12px;color:var(--muted)}
header .eyebrow{font-size:9px;margin-bottom:4px}
.badge{border:1px solid var(--line);background:var(--surface-soft);border-radius:var(--radius-pill);padding:6px 14px;font-size:11px;white-space:nowrap;color:var(--muted)}
.status{font-size:13px;color:var(--accent);margin:10px 0;min-height:18px}
.status.error{color:var(--danger)}

/* ---------- hero / home ---------- */
.hero{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:270px;gap:25px;margin:18px 0 32px;padding:42px 44px;background:linear-gradient(135deg,var(--accent-soft),var(--secondary-soft));border-radius:var(--radius-lg);overflow:hidden}
.hero h1{max-width:600px}
.hero .muted{font-size:16px;line-height:1.8;max-width:540px;color:var(--ink-soft)}
.hero-tags{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:var(--ink-soft);font-size:12px;font-weight:600}
.hero-tags>span+span{border-left:1px solid var(--line);padding-left:18px}
.art{width:170px;height:170px;flex-shrink:0;position:relative}
.art b{position:absolute;left:83px;top:30px;width:3px;height:110px;background:var(--accent-strong);opacity:.5;transform:rotate(-6deg)}
.art i{position:absolute;border-radius:80% 8% 80% 8%;font-style:normal}
.art i:nth-child(2){left:40px;top:36px;width:56px;height:84px;transform:rotate(-40deg);background:var(--secondary);opacity:.9}
.art i:nth-child(3){left:80px;top:18px;width:50px;height:76px;transform:rotate(25deg);background:var(--accent);opacity:.95}
.art i:nth-child(4){left:52px;top:84px;width:44px;height:66px;transform:rotate(-70deg);background:var(--accent-strong);opacity:.8}
.art span{position:absolute;bottom:10px;left:52px;width:68px;height:40px;background:var(--accent-strong);opacity:.25;border-radius:4px 4px 28px 28px}
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}
.card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);padding:28px;margin-bottom:22px}
.card.soft{background:var(--surface-soft);box-shadow:none}
.feature{border-top:3px solid var(--accent)}
.feature p:not(.eyebrow){color:var(--muted)}
.primary{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink);padding:13px 18px;font-size:14px;font-weight:700;margin-top:18px;box-shadow:var(--shadow-md)}
.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.primary[aria-pressed=true]{background:var(--secondary);border-color:var(--secondary)}
.text{border:0;background:none;color:var(--accent);padding:10px 0;text-align:left;font-size:13px;font-weight:700}
.text:hover{text-decoration:underline}
.quote{background:var(--surface-soft);border-left:3px solid var(--secondary);padding:14px 18px;font:600 16px/1.6 var(--sans);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink-soft)}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:30px 0 4px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.stat{padding:22px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.stat strong{display:block;font:600 32px var(--display);color:var(--accent)}
.stat span{font-size:12px;color:var(--muted)}
.reminder{background:var(--surface-soft)}
.reminder .eyebrow{color:var(--secondary)}

/* ---------- situations ---------- */
.intro{max-width:800px;padding:26px 0 16px}
.intro h1{font-size:38px}
.intro .muted{font-size:16px;line-height:1.8}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 28px}
.tiles button{display:flex;align-items:center;gap:15px;text-align:left;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);padding:18px;color:var(--ink);font-size:14px;line-height:1.5;min-height:78px}
.tiles button:hover,.tiles button.active{background:var(--accent-soft);border-color:var(--accent)}
.num{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius-sm);width:30px;height:30px;line-height:28px;text-align:center;flex-shrink:0;font-size:12px;font-weight:700;color:var(--accent)}
.detail{scroll-margin-top:25px;max-width:900px}
.detail li{margin:12px 0}
.detail h2{font-size:29px}
.note{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px;font-size:13px;line-height:1.8;color:var(--ink-soft)}

/* ---------- guide ---------- */
.filters{display:flex;align-items:end;gap:15px;flex-wrap:wrap;margin-bottom:20px;padding:18px;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius-md)}
.filters label{margin:0;flex:1}
.filters label.check{flex:none;display:flex;align-items:center;gap:8px;padding-bottom:12px}
.filters input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.filters .search{flex:2;min-width:220px}
.guide-chapter{margin-bottom:25px}
.guide-chapter h2{font-size:26px;margin-top:30px}
.guide-item{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);margin:10px 0;overflow:hidden}
.guide-item[open]{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.guide-item summary{padding:17px 20px;cursor:pointer;font-size:15px;font-weight:700}
.guide-item summary::marker{color:var(--accent)}
.guide-body{padding:0 22px 22px;font-size:14px}
.guide-body .label{font-size:10px;letter-spacing:1.5px;font-weight:700;text-transform:uppercase;color:var(--accent);margin:17px 0 6px}
.technique-points{padding-left:20px}
.save-topic{border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 14px;background:var(--secondary-soft);color:var(--secondary);font-size:12px;font-weight:700}
.save-topic[aria-pressed=true]{background:var(--secondary);border-color:var(--secondary);color:#fff}
.sources{font-size:13px}
.sources li{margin-bottom:9px}

/* ---------- forms (planner, journal, auth, account) ---------- */
label{display:block;font-size:13px;font-weight:700;margin:18px 0 7px;color:var(--ink-soft)}
label small{color:var(--muted);font-weight:400}
input,textarea,select{display:block;width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);margin-top:7px;min-width:0;min-height:44px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:hover,textarea:hover,select:hover{border-color:var(--accent)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea{min-height:100px;resize:vertical;font-size:14px;line-height:1.7}
#entry-note{min-height:220px}
.sticky{position:sticky;top:25px}
#plan-preview{font-size:15px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-soft)}
.advice-card{margin-top:24px;border-top:3px solid var(--secondary)}
.advice-card h3{margin:24px 0 12px;font-size:17px}
.advice-card li{margin-bottom:12px}
.advice-card ul,.advice-card ol{padding-left:22px}
.advice-links{display:flex;gap:10px 16px;flex-wrap:wrap}
.advice-links button{text-align:left;white-space:normal}
.advice-card select{width:100%}
.more-detail{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft);margin-top:20px;padding:4px 16px}
.more-detail summary{cursor:pointer;padding:14px 0;font-size:13px;font-weight:700;color:var(--ink-soft);list-style:none}
.more-detail summary::-webkit-details-marker{display:none}
.more-detail summary:before{content:'+ ';color:var(--accent)}
.more-detail[open] summary:before{content:'− '}
.more-detail[open] summary{border-bottom:1px solid var(--line)}
.more-detail label:first-of-type{margin-top:16px}
.more-detail{padding-bottom:12px}

/* ---------- practice ---------- */
.practice-progress{padding:16px 20px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--muted);font-size:14px}
.practice-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:start}
.practice-days{display:grid;gap:9px;position:sticky;top:24px;max-height:78vh;overflow-y:auto;padding:2px 5px 3px 2px}
.day-choice{display:flex;flex-direction:column;text-align:left;gap:5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px;color:var(--ink-soft);min-height:100px}
.day-choice .eyebrow{margin:0;font-size:9px;letter-spacing:1px;color:var(--muted)}
.day-choice strong{font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
.day-choice:hover{background:var(--surface-soft)}
.day-choice[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 3px 0 var(--accent)}
.practice-lesson{padding:34px 38px;overflow-wrap:anywhere}
.practice-lesson h2{font-size:29px;line-height:1.25}
.practice-lesson h3{margin:30px 0 12px;font-size:18px;color:var(--accent)}
.practice-lesson p,.practice-lesson li{font-size:16px;line-height:1.85;color:var(--ink-soft)}
.practice-lesson .eyebrow{font-size:10px}
.practice-lesson .lesson-aim{font-size:18px;line-height:1.6;color:var(--ink);background:var(--accent-soft);padding:20px;border-radius:var(--radius-md)}
.practice-lesson ol,.practice-lesson ul{padding-left:22px}
.practice-lesson li{padding-left:6px;margin-bottom:13px}
.practice-lesson li::marker{color:var(--accent);font-weight:700}
.practice-lesson .note{font-size:14px}
.lesson-actions{margin-top:28px}
.lesson-paging{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;margin-top:18px;gap:16px}
.lesson-paging button:disabled{cursor:default}
.practice-lesson h2:focus{outline:2px solid var(--accent);outline-offset:7px}

/* ---------- journal ---------- */
.entry{padding:22px;border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:14px;background:var(--surface)}
.entry p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;color:var(--ink-soft)}
.entry .eyebrow{font-size:11px}
.entry .actions{display:flex;gap:20px}
.danger{color:var(--danger)}
.empty{padding:25px;background:var(--surface-soft);border:1px dashed var(--line);border-radius:var(--radius-md);color:var(--muted);font-size:14px}

/* ---------- source library ---------- */
.source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.source-card{margin:0;display:flex;flex-direction:column;background:var(--surface);border-top:3px solid var(--accent)}
.source-card:nth-child(3n+2){border-top-color:var(--secondary)}
.source-card h2{font-size:25px}
.source-card ul{padding-left:20px;flex:1;font-size:15px;color:var(--ink-soft)}
.source-card li{margin-bottom:11px}
.source-card .primary{margin-top:16px}
.source-card .primary[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:3px}
.source-tools{display:flex;align-items:end;gap:18px;flex-wrap:wrap}
.source-tools label{flex:1;min-width:180px}
.source-tools button{margin-bottom:5px}
#source-reader{margin-top:30px;scroll-margin-top:20px}
#source-transcript{max-height:65vh;overflow:auto;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px}
.transcript-text{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.8 var(--sans);margin:0;color:var(--ink-soft)}
.transcript-match{padding:16px 0;border-bottom:1px solid var(--line)}

/* ---------- auth & account dialog ---------- */
.auth-wrap{background:linear-gradient(160deg,var(--accent-soft),var(--paper) 55%);min-height:100vh;display:grid;place-items:center;padding:30px}
.auth-card{width:100%;max-width:450px;padding:42px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.auth-card .mark{font-size:42px}
.auth-card .eyebrow{margin-top:22px}
.auth-card h1{font-size:36px}
.auth-card .muted{font-size:15px}
.tabs{display:flex;gap:8px;margin:22px 0}
.tabs button{flex:1;border:1px solid var(--line);padding:10px;border-radius:var(--radius-sm);background:transparent;color:var(--muted);font-size:13px;min-height:auto;font-weight:600}
.tabs button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong);font-weight:700}
#auth-status{color:var(--danger);font-size:12px;margin-top:12px}
dialog{border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;background:var(--surface);color:var(--ink);width:min(440px,92vw);box-shadow:var(--shadow-md)}
dialog::backdrop{background:rgba(39,43,36,.5)}

/* ---------- footer ---------- */
footer{padding:24px 0;color:var(--muted);font-size:12px;max-width:850px}
footer summary{cursor:pointer}
footer p{margin-top:12px}
.release-label{margin-top:18px;font-size:11px;letter-spacing:1px;color:var(--muted)}

/* ---------- responsive ---------- */
@media(min-width:1600px){main{padding:36px 64px}.hero{padding:48px 52px}}
@media(max-width:1150px) and (min-width:801px){aside{width:228px;padding:28px 17px}main{margin-left:228px;padding:26px}.brand{font-size:20px}.hero{padding:32px}.hero h1{font-size:38px}.art{width:130px;height:130px;transform:scale(.85);transform-origin:right}.card{padding:24px}.two{gap:18px}.source-grid{gap:18px}}
@media(max-height:850px) and (min-width:801px){.sidebar-note{display:none}.brand{margin-bottom:28px}}
@media(max-width:900px){.source-grid{grid-template-columns:1fr}}
@media(max-width:800px){
  aside{position:static;width:100%;padding:20px;display:block;border-right:0;border-bottom:1px solid var(--line)}
  .brand{margin-bottom:18px}
  .brand small{font-size:8px}
  aside>.eyebrow,.sidebar-note{display:none}
  nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  nav button{padding:10px 8px;min-height:48px;align-items:center}
  nav button span{font-size:12px}
  nav button.active{padding-left:6px}
  aside>.quiet{display:inline-block;margin:12px 16px 0 0;font-size:11px}
  main{margin:0;padding:20px}
  header{padding-bottom:15px}
  .hero{padding:26px 22px;margin-top:16px;min-height:0;border-radius:var(--radius-md);flex-direction:column;align-items:flex-start}
  .hero h1{font-size:32px}
  .hero .muted{font-size:15px}
  .art{display:none}
  .hero-tags{gap:10px;font-size:11px}
  .hero-tags>span+span{padding-left:10px}
  .two{grid-template-columns:1fr;gap:0}
  .card{padding:22px}
  .intro h1{font-size:29px}
  .intro .muted{font-size:15px}
  .stats{grid-template-columns:1fr;gap:8px}
  .stat{padding:16px}
  .tiles{grid-template-columns:1fr;gap:14px}
  .tiles button{padding:22px;min-height:96px;font-size:16px;gap:18px}
  .tiles .num{width:36px;height:36px;line-height:34px;font-size:13px}
  .filters{display:block}
  .filters .search{min-width:0}
  .filters label.check{padding:0}
  .guide-item summary{font-size:14px;padding:15px 16px}
  .guide-body{padding:0 16px 18px}
  .source-card h2{font-size:23px}
  .source-tools{gap:10px}
  .practice-layout{grid-template-columns:1fr;gap:18px}
  .practice-days{position:static;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:360px;border:1px solid var(--line);border-radius:var(--radius-md);padding:10px;background:var(--surface-soft)}
  .day-choice{padding:14px;min-height:100px}
  .practice-lesson{padding:22px}
  .practice-lesson h2{font-size:25px}
  .practice-lesson p,.practice-lesson li{font-size:15px}
  .practice-lesson .lesson-aim{font-size:16px}
  .auth-card{padding:28px}
  .auth-wrap{padding:18px}
  .badge{font-size:10px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}