:root { --forest:#244638; --forest-2:#173128; --sage:#c2efe9; --mint:#e3f8f3; --cream:#f8f4e9;--paper:#fcf8ee;--surface-muted:#e3f8f3;--surface-input:#fffaf0;--surface-header:rgba(248,244,233,.96); --ink:#1b2923; --muted:#637069; --line:#d9ded8; --coral:#d97858; --gold:#fad85c; --lavender:#aaa3c7; --shadow:0 20px 55px rgba(31,55,44,.09); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; }
a { color:inherit; }
button,textarea { font:inherit; }
.skip-link { position:fixed; left:1rem; top:-4rem; z-index:10; padding:.7rem 1rem; background:var(--forest); color:white; border-radius:.5rem; }
.skip-link:focus { top:1rem; }
.site-header { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 clamp(1rem,4vw,4rem); border-bottom:1px solid rgba(36,70,56,.13); background:var(--surface-header); position:sticky; top:0; z-index:5; backdrop-filter:blur(12px); }
.brand { display:flex; gap:.55rem; align-items:center; font-family:"Playfair Display",serif; font-size:1.35rem; text-decoration:none; font-weight:600; }
.brand img { width:34px; height:34px; flex:0 0 34px; object-fit:cover; border-radius:50%; border:1px solid rgba(36,70,56,.14); box-shadow:0 2px 10px rgba(24,53,42,.08); }
.brand span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--forest); color:white; font-style:italic; }
nav { display:flex; gap:.25rem; align-items:center; }
nav a { padding:.62rem .78rem; border-radius:999px; color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:600; }
nav a[aria-current="page"] { color:var(--forest); background:var(--sage); }
main { width:min(1160px,calc(100% - 2rem)); margin:0 auto; padding:clamp(2.8rem,7vw,6rem) 0 4rem; }
.eyebrow { margin:0 0 .7rem; color:#527261; font:500 .72rem/1.2 "DM Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
.intro { text-align:center; max-width:850px; margin:0 auto; }
h1 { margin-bottom:1.2rem; color:var(--forest-2); font:600 clamp(2.8rem,8.5vw,5.8rem)/.98 "Playfair Display",serif; letter-spacing:-.04em; }
h1 em { color:var(--forest); font-weight:500; }
.intro>p:not(.eyebrow) { max-width:650px; margin-left:auto; margin-right:auto; color:var(--muted); font-size:1.08rem; line-height:1.65; }
.privacy-note { display:inline-flex; gap:.65rem; align-items:center; margin-top:1rem; padding:.7rem 1rem; border-radius:999px; color:var(--forest); background:var(--sage); text-align:left; }
.privacy-note>span { font-size:1.4rem; }
.privacy-note p { margin:0; font-size:.76rem; line-height:1.35; }
.program-picker { margin-top:clamp(3.5rem,8vw,6.5rem); }
.section-heading { margin-bottom:1.4rem; }
.section-heading h2,.workspace-top h2 { margin:0; color:var(--forest-2); font:600 clamp(1.9rem,4vw,2.8rem)/1.08 "Playfair Display",serif; }
.program-grid { display:grid; gap:1rem; }
.program-card { min-height:370px; display:flex; flex-direction:column; align-items:flex-start; padding:1.5rem; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:0 8px 24px rgba(31,55,44,.04); }
.program-card.gratitude { --accent:var(--gold); }
.program-card.anxiety { --accent:#7aa69b; }
.program-card.compassion { --accent:var(--lavender); }
.program-icon { display:grid; place-items:center; width:52px; height:52px; margin-bottom:2.1rem; border-radius:50%; background:color-mix(in srgb,var(--accent) 22%,white); color:var(--forest); font-size:1.45rem; }
.program-card>p:first-of-type { margin-bottom:.55rem; color:#597064; font:500 .7rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.program-card h3 { margin-bottom:.7rem; color:var(--forest-2); font:600 2rem "Playfair Display",serif; }
.program-card>p:last-of-type { color:var(--muted); line-height:1.6; }
.program-card button { margin-top:auto; padding:.8rem .95rem; border:0; border-radius:10px; color:var(--forest-2); background:color-mix(in srgb,var(--accent) 34%,white); font-weight:700; cursor:pointer; }
button:focus-visible,textarea:focus-visible,a:focus-visible { outline:3px solid rgba(217,120,88,.4); outline-offset:3px; }
.journal-workspace { margin-top:1rem; }
.workspace-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:1.5rem; }
.back-button { margin-bottom:1.5rem; padding:0; border:0; color:var(--muted); background:transparent; font-weight:600; cursor:pointer; }
.stats { display:flex; gap:.75rem; }
.stats div { min-width:105px; padding:.8rem 1rem; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.stats strong,.stats span { display:block; }
.stats strong { color:var(--forest); font:600 1.45rem "Playfair Display",serif; }
.stats span { color:var(--muted); font-size:.72rem; }
.progress-track { height:8px; margin:1.4rem 0 2rem; overflow:hidden; border-radius:999px; background:#dfe5df; }
.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:var(--coral); transition:width .45s ease; }
.workspace-grid { display:grid; gap:1rem; align-items:start; }
.prompt-card,.mood-card { border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:var(--shadow); }
.prompt-card { padding:clamp(1.25rem,4vw,2.4rem); }
blockquote { margin:.3rem 0 2rem; max-width:750px; color:var(--forest-2); font:500 clamp(1.7rem,4.5vw,2.8rem)/1.2 "Playfair Display",serif; }
.prompt-card label { display:block; margin-bottom:.55rem; color:var(--muted); font-size:.78rem; font-weight:700; }
textarea { display:block; width:100%; resize:vertical; padding:1rem; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fdfcf8; line-height:1.65; }

/* A saved reflection reads like a dated page in a private paper journal. */
.prompt-card{position:relative;overflow:hidden;background:repeating-linear-gradient(to bottom,#fffdf8 0,#fffdf8 35px,#e8dfd2 36px,#fffdf8 37px)!important}.prompt-card:before{content:"";position:absolute;top:0;bottom:0;left:38px;width:1px;background:rgba(181,94,88,.28)}.prompt-card>*{position:relative}.prompt-card #entry-date{display:block;margin:-2px 0 14px;color:#5b7569;font:500 10px var(--mono);letter-spacing:.65px;text-transform:uppercase}.prompt-card textarea{border:0;background:transparent;padding:.4rem 0;font-family:var(--serif);font-size:1.03rem;outline:0}
textarea::placeholder { color:#9ba39e; }
.entry-actions { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.85rem; }
#word-count { color:var(--muted); font:500 .7rem "DM Mono",monospace; }
#save-entry { padding:.8rem 1rem; border:0; border-radius:10px; color:white; background:var(--forest); font-weight:700; cursor:pointer; }
#save-entry:disabled { opacity:.55; cursor:wait; }
.save-status,.mood-status { min-height:1.25rem; margin:.6rem 0 0; color:#527261; font-size:.78rem; }
.prompt-card.is-history-page textarea { color:#355849; cursor:default; }
.journal-page-turner { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:.75rem; overflow:visible; margin:1.35rem 0 0; padding-top:1rem; border-top:1px solid rgba(36,70,56,.14); }
.page-turn { position:relative; min-height:46px; border:0; color:var(--forest); background:transparent; font-weight:700; cursor:pointer; }
.page-turn-previous { justify-self:start; padding-left:2.35rem; text-align:left; }
.page-turn-next { justify-self:end; padding-right:2.35rem; text-align:right; }
.page-turn:before { content:""; position:absolute; bottom:0; width:30px; height:30px; border:1px solid rgba(36,70,56,.2); background:linear-gradient(135deg,#efe7d8 0 49%,#fffdf8 51% 100%); box-shadow:0 4px 10px rgba(36,70,56,.08); transition:transform .18s ease; }
.page-turn-previous:before { left:0; border-radius:0 8px 0 8px; transform:rotate(-5deg); }
.page-turn-next:before { right:0; border-radius:8px 0 8px 0; transform:rotate(5deg) scaleX(-1); }
.page-turn:not(:disabled):hover:before { transform:translateY(-2px); }
.page-turn-next:not(:disabled):hover:before { transform:translateY(-2px) scaleX(-1); }
.page-turn:disabled { opacity:.38; cursor:default; }
.page-position { color:var(--muted); font:500 .68rem "DM Mono",monospace; text-align:center; white-space:nowrap; }
.mood-card { padding:1.4rem; }
.mood-card h3 { margin-bottom:.4rem; color:var(--forest-2); font:600 1.55rem "Playfair Display",serif; }
.mood-card>p:not(.eyebrow):not(.mood-status) { color:var(--muted); font-size:.86rem; }
.mood-options { display:grid; grid-template-columns:repeat(5,1fr); gap:.35rem; margin-top:1.2rem; }
.mood-options button { display:grid; place-items:center; gap:.35rem; padding:.65rem .2rem; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface-input); font-size:.65rem; cursor:pointer; }
.mood-options button span { color:var(--coral); font-size:1rem; }
.mood-options button[aria-checked="true"] { border-color:var(--forest); color:var(--forest); background:var(--mint); font-weight:700; }
.gentle-tip { display:flex; gap:.7rem; margin-top:1rem; padding:1rem; border-radius:14px; background:var(--mint); color:var(--forest); }
.gentle-tip p { margin:0; color:var(--muted); font-size:.76rem; line-height:1.5; }
.gentle-tip strong { color:var(--forest); }
.care-note { max-width:780px; margin:2rem auto 0; color:var(--muted); text-align:center; font-size:.76rem; line-height:1.55; }
footer { display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; padding:2rem clamp(1rem,4vw,4rem); border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
footer span { color:var(--forest); font-family:"Playfair Display",serif; font-weight:600; }
footer p { margin:0; }
@media (min-width:720px) { .program-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:900px) { .workspace-grid { grid-template-columns:minmax(0,1.65fr) minmax(280px,.7fr); } .mood-options { grid-template-columns:1fr; } .mood-options button { grid-template-columns:24px 1fr; justify-items:start; padding:.65rem .75rem; font-size:.74rem; } }
@media (max-width:560px) { .site-header { align-items:flex-start; padding-top:.8rem; padding-bottom:.8rem; } nav { overflow:auto; } nav a { padding:.5rem .6rem; font-size:.78rem; white-space:nowrap; } .brand { font-size:0; } .brand span { font-size:1.1rem; } .privacy-note { border-radius:14px; } .stats { width:100%; } .stats div { flex:1; } .entry-actions { align-items:flex-start; flex-direction:column; } #save-entry { width:100%; } .journal-page-turner { grid-template-columns:1fr 1fr; } .page-position { grid-column:1 / -1; grid-row:1; } .page-turn { grid-row:2; font-size:.76rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .progress-track span,.page-turn:before { transition:none; } }

/* Public journal: a read-only counterpart to the signed-in student journal. */
.public-journal-preview{margin:clamp(2.5rem,7vw,5rem) auto 0;max-width:1080px}.preview-tabs{display:flex;gap:.55rem;overflow-x:auto;margin:0 0 1rem}.preview-tabs span{flex:0 0 auto;padding:.65rem 1rem;border:1px solid rgba(36,70,56,.17);border-radius:999px;background:#fffaf0;color:#315f4d;font:700 .72rem "DM Sans",sans-serif}.preview-tabs .is-active{background:#f6edcb;color:#244638;border-color:#dcc789}.preview-book{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);overflow:hidden;border:1px solid rgba(36,70,56,.15);border-radius:20px;background:linear-gradient(135deg,#e4f4f2,#eee9f6);box-shadow:var(--shadow)}.preview-paper{position:relative;min-height:450px;padding:clamp(1.6rem,4vw,2.8rem);background:repeating-linear-gradient(to bottom,#fffdf7 0,#fffdf7 34px,#e5ddd0 35px,#fffdf7 36px)}.preview-paper:before{content:"";position:absolute;inset:0 auto 0 38px;width:1px;background:rgba(185,101,94,.28)}.preview-paper>*{position:relative}.preview-paper time{display:block;margin:0 0 1.1rem;color:#5e786d;font:500 .65rem "DM Mono",monospace;letter-spacing:.7px}.preview-paper h2,.preview-library h2{margin:0 0 1.1rem;color:#173f30;font:500 clamp(2rem,4vw,2.7rem)/1.08 "Playfair Display",serif;letter-spacing:-1px}.preview-lines{max-width:560px;margin:0;color:#47695b;font:500 1rem/1.7 "Playfair Display",serif}.preview-action,.preview-library a{display:inline-flex;align-items:center;gap:.7rem;margin-top:2rem;padding:.8rem 1rem;border:1px solid #d5bd72;border-radius:999px;background:#f4df8a;color:#244638;font-size:.8rem;font-weight:700;text-decoration:none}.preview-library{padding:clamp(1.5rem,3vw,2.3rem);background:linear-gradient(145deg,#eee9f6,#f7e1e8)}.preview-library p:not(.eyebrow){color:#557267;font-size:.9rem;line-height:1.6}.preview-library a{background:#fffaf0;border-color:rgba(36,70,56,.2);color:#244638}@media(max-width:760px){.preview-book{grid-template-columns:1fr}.preview-paper{min-height:390px}.preview-library{padding:1.5rem}.public-journal-preview{margin-top:2.5rem}}