/* Dreamwork app styles — shares the landing's design language
   (midnight indigo, restrained alchemical gold, Fraunces over Spectral). */
:root{
  --bg:#0F1320; --bg-deep:#0A0D17; --surface:#161B2A; --surface-2:#1E2436;
  --gold:#C9A24B; --gold-2:#E6CA82; --text:#E9E3D5; --muted:#9499AE;
  --accent-2:#9A5550; --care:#7FB0A6;
  --line:rgba(233,227,213,0.12); --line-strong:rgba(233,227,213,0.22);
  --maxw:880px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Spectral",Georgia,"Times New Roman",serif;
  font-size:1.0625rem; line-height:1.7; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; min-height:100vh;
}
::selection{ background:rgba(201,162,75,0.28); color:#fff; }
a{ color:var(--gold-2); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ font-family:"Fraunces",Georgia,serif; font-weight:500; margin:0; line-height:1.12; letter-spacing:-0.01em; }
.bg-veil{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% -10%, rgba(201,162,75,0.10), transparent 60%),
    radial-gradient(900px 700px at 4% 108%, rgba(60,72,120,0.18), transparent 60%),
    linear-gradient(180deg,var(--bg-deep),var(--bg) 40%); }

/* ---------- shell ---------- */
.topbar{ position:sticky; top:0; z-index:20; backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%); background:rgba(10,13,23,0.72);
  border-bottom:1px solid var(--line); }
.topbar-inner{ max-width:var(--maxw); margin:0 auto; padding:.7rem clamp(1rem,4vw,2rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.wordmark{ display:flex; align-items:baseline; gap:.5rem; font-family:"Fraunces",serif; font-weight:600; font-size:1rem; }
.wordmark .glyph{ color:var(--gold); font-size:1.15rem; }
.wordmark .sub{ font-family:"Spectral",serif; font-weight:400; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.topnav{ display:flex; gap:.4rem; align-items:center; }
.topnav button{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  background:none; border:none; cursor:pointer; padding:.45rem .6rem; border-radius:6px; font-family:inherit; }
.topnav button:hover{ color:var(--text); background:rgba(255,255,255,0.04); }
.topnav button.active{ color:var(--gold-2); }
main{ max-width:var(--maxw); margin:0 auto; padding:clamp(1.6rem,4vw,3rem) clamp(1rem,4vw,2rem) 5rem; }

/* ---------- generic ---------- */
.screen{ display:none; }
.screen.active{ display:block; animation:fade .5s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .screen.active{ animation:none; } }
.eyebrow{ font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1rem; display:flex; align-items:center; gap:.8rem; }
.eyebrow .rule{ height:1px; width:30px; background:var(--gold); opacity:.6; }
h1.title{ font-size:clamp(1.8rem,4.6vw,2.7rem); }
h2.title{ font-size:clamp(1.5rem,3.6vw,2.1rem); }
.lede{ margin-top:1rem; color:#cbc6b9; font-weight:300; font-size:clamp(1.02rem,1.7vw,1.16rem); line-height:1.6; max-width:62ch; }
.muted{ color:var(--muted); }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:clamp(1.2rem,3vw,1.8rem); margin-top:1.4rem; }
.card-2{ background:var(--surface-2); }
label.field{ display:block; margin-top:1.3rem; }
label.field .lab{ font-family:"Fraunces",serif; font-size:1rem; color:var(--gold-2); display:block; margin-bottom:.5rem; }
label.field .hint{ color:var(--muted); font-size:.86rem; font-weight:300; }
textarea, input.text{ width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line-strong);
  border-radius:8px; padding:.8rem .9rem; font-family:inherit; font-size:1rem; line-height:1.6; resize:vertical; }
textarea:focus, input.text:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,0.14); }
textarea{ min-height:4.6rem; }
textarea.big{ min-height:10rem; }

/* ---------- buttons ---------- */
.btn-row{ margin-top:1.8rem; display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }
button.btn{ font-family:"Fraunces",serif; font-size:.98rem; padding:.7rem 1.3rem; border-radius:8px; cursor:pointer;
  border:1px solid var(--gold); background:var(--gold); color:var(--bg-deep); font-weight:600; transition:filter .2s ease; }
button.btn:hover{ filter:brightness(1.08); }
button.btn:disabled{ opacity:.5; cursor:default; filter:none; }
button.btn.ghost{ background:transparent; color:var(--text); border-color:var(--line-strong); }
button.btn.ghost:hover{ border-color:var(--gold); color:var(--gold-2); }
button.btn.danger{ background:transparent; color:#E0A09A; border-color:rgba(224,160,154,.4); }
button.btn.danger:hover{ background:rgba(154,85,80,.12); }
button.btn.small{ font-size:.84rem; padding:.5rem .9rem; }
/* Visible, high-contrast focus ring on every interactive control — the gold
   button fill can swallow the UA default ring, so make it explicit. */
button:focus-visible, a:focus-visible, .topnav button:focus-visible,
.consent-check input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold-2); outline-offset:2px; border-radius:6px;
}
.spinner{ display:inline-block; width:1rem; height:1rem; border:2px solid rgba(233,227,213,.25);
  border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- four-act structure ---------- */
.acts{ margin-top:1.4rem; display:grid; gap:.8rem; }
.act{ display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:1rem 1.1rem; border:1px solid var(--line);
  border-radius:10px; background:var(--bg); align-items:start; }
.act.lysis{ border-color:var(--gold); background:linear-gradient(120deg, rgba(201,162,75,0.08), transparent 70%); }
.act .marker{ display:flex; flex-direction:column; align-items:center; gap:.4rem; min-width:3.4rem; }
.act .dot{ width:12px; height:12px; border-radius:50%; background:var(--surface-2); border:1.5px solid var(--line-strong); }
.act.lysis .dot{ width:16px; height:16px; background:var(--gold); border-color:var(--gold-2);
  box-shadow:0 0 0 4px rgba(201,162,75,0.12), 0 0 22px 2px rgba(201,162,75,0.45); }
.act .step{ font-family:"Fraunces",serif; font-style:italic; font-size:.7rem; color:var(--gold); letter-spacing:.08em; }
.act .body .name{ font-family:"Fraunces",serif; font-size:1.02rem; color:var(--text); margin-bottom:.15rem; }
.act.lysis .body .name{ color:var(--gold-2); }
.act .body .desc{ color:#bdb9ad; font-size:.96rem; }
.act textarea{ margin-top:.5rem; min-height:3rem; font-size:.95rem; }

/* ---------- salient images / associations ---------- */
.assoc{ margin-top:1rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.assoc .img{ font-family:"Fraunces",serif; font-size:1.06rem; color:var(--gold-2); }
.assoc .why{ color:var(--muted); font-size:.9rem; font-style:italic; margin:.25rem 0 .2rem; }
.assoc .prompt{ color:#cbc6b9; font-size:.96rem; margin:.5rem 0 .55rem; }

/* ---------- amplification ---------- */
.figure{ margin-top:1rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.figure .img{ font-family:"Fraunces",serif; font-size:1.08rem; color:var(--gold-2); margin-bottom:.5rem; }
.reading{ display:grid; grid-template-columns:130px 1fr; gap:.8rem; padding:.5rem 0; border-top:1px solid var(--line); }
.reading:first-of-type{ border-top:none; }
.reading .k{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); padding-top:.2rem; }
.reading .v{ color:#cbc6b9; font-size:.97rem; }
.chips{ margin-top:.6rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.chip{ font-size:.74rem; letter-spacing:.04em; color:#d6d1c4; padding:.28rem .7rem; border:1px solid var(--line-strong);
  border-radius:999px; background:rgba(255,255,255,0.02); }
.chip.arch{ color:var(--gold-2); border-color:rgba(201,162,75,.4); }
.framing{ margin-top:.6rem; color:var(--muted); font-style:italic; font-size:.92rem; }
.parallel{ margin-top:.7rem; padding:.7rem .9rem; border-left:2px solid var(--line-strong); }
.parallel .p{ color:#cbc6b9; font-size:.95rem; }
.parallel .q{ color:var(--gold-2); font-style:italic; font-size:.92rem; margin-top:.3rem; }
.echo{ color:var(--muted); font-size:.92rem; font-style:italic; margin-bottom:.4rem; }
.subhead{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:.9rem 0 .3rem; }
.hypothesis{ margin-top:1.6rem; padding:1.6rem 1.4rem; border-left:2px solid var(--gold);
  background:linear-gradient(120deg, rgba(201,162,75,0.06), transparent 70%); border-radius:0 6px 6px 0; }
.hypothesis .hh{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:.6rem; }
.hypothesis p{ font-family:"Fraunces",serif; font-style:italic; font-size:1.16rem; line-height:1.4; margin:0; color:var(--text); }
.rquestions{ margin-top:1.4rem; display:grid; gap:.7rem; }
.rquestion{ padding:.85rem 1rem; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:#d6d1c4; }
.rquestion::before{ content:"❯ "; color:var(--gold); }
.epistemic{ margin-top:1.6rem; font-size:.9rem; color:var(--muted); font-style:italic; padding:.9rem 1.1rem;
  border:1px dashed var(--line-strong); border-radius:8px; }

/* ---------- crisis / care ---------- */
.care{ margin-top:1.4rem; padding:clamp(1.4rem,3.5vw,2rem); border:1px solid var(--care); border-radius:12px;
  background:rgba(127,176,166,0.06); }
.care h1, .care h2{ color:var(--care); }
.care p{ color:#d6d1c4; }
.care .resources{ margin-top:1.2rem; display:grid; gap:.6rem; }
.care .res{ padding:.8rem 1rem; border:1px solid var(--line); border-radius:9px; background:var(--bg); }
.care .res .rt{ font-family:"Fraunces",serif; color:var(--gold-2); }
.care .res .rd{ color:var(--muted); font-size:.9rem; }

/* ---------- consent ---------- */
.consent-points{ margin-top:1.4rem; display:grid; gap:.7rem; }
.cpoint{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; padding:.9rem 1rem; border:1px solid var(--line);
  border-radius:9px; background:var(--bg); align-items:start; }
.cpoint .gl{ color:var(--gold); font-size:1.1rem; line-height:1.4; }
.cpoint .ct{ color:#cbc6b9; font-size:.96rem; }
.cpoint .ct b{ color:var(--text); font-weight:600; }
.consent-check{ margin-top:1.5rem; display:flex; gap:.7rem; align-items:flex-start; cursor:pointer; color:#cbc6b9; }
.consent-check input{ margin-top:.35rem; width:1.05rem; height:1.05rem; accent-color:var(--gold); flex:0 0 auto; }

/* ---------- journal ---------- */
.journal-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:1rem; }
.jlist{ margin-top:1.4rem; display:grid; gap:.8rem; }
.jitem{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.2rem;
  border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.jitem .jt{ font-family:"Fraunces",serif; font-size:1.04rem; color:var(--text); }
.jitem .jd{ color:var(--muted); font-size:.84rem; margin-top:.2rem; }
.jitem .jbtns{ display:flex; gap:.5rem; flex:0 0 auto; }
.empty{ margin-top:1.4rem; color:var(--muted); font-style:italic; }
.privacy{ margin-top:1.4rem; padding:1.1rem 1.3rem; border:1px solid var(--line); border-radius:10px;
  background:var(--surface-2); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.privacy .pstatus{ display:flex; align-items:center; gap:.6rem; }
.privacy .lock{ font-size:1.1rem; }
.privacy .ptext .pt{ font-family:"Fraunces",serif; color:var(--text); font-size:1rem; }
.privacy .ptext .pd{ color:var(--muted); font-size:.84rem; }
.privacy .pbtns{ display:flex; gap:.5rem; flex-wrap:wrap; }
.privacy.locked{ border-color:var(--gold); }
.jitem.locked .jt{ color:var(--muted); font-style:italic; }

/* ---------- insights / longitudinal ---------- */
.lex{ margin-top:.9rem; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.lex-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.lex-img{ font-family:"Fraunces",serif; font-size:1.1rem; color:var(--gold-2); }
.lex-badge{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); flex:0 0 auto; }
.lex-assoc{ display:grid; grid-template-columns:120px 1fr; gap:.8rem; padding:.5rem 0; border-top:1px solid var(--line); }
.lex-assoc:first-of-type{ margin-top:.6rem; }
.lex-date{ color:var(--muted); font-size:.8rem; padding-top:.1rem; }
.lex-text{ color:#cbc6b9; font-size:.96rem; }
.shifts{ margin-top:1rem; display:grid; gap:.5rem; }
.shift{ display:grid; grid-template-columns:140px 1fr; gap:1rem; align-items:center;
  padding:.7rem 1rem; border:1px solid var(--line); border-radius:9px; background:var(--bg); }
.shift-date{ color:var(--muted); font-size:.82rem; }
.shift-flow{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.shift-flow .feel{ font-size:.96rem; }
.shift-flow .feel.open{ color:var(--muted); }
.shift-flow .feel.close{ color:var(--gold-2); }
.shift-flow .arrow{ color:var(--gold); }
.lex-where{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.7rem; padding-top:.6rem; border-top:1px solid var(--line); }
.lex-where-label{ color:var(--muted); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.dlink{ background:transparent; border:1px solid var(--line); color:var(--gold-2); cursor:pointer;
  font:inherit; font-size:.82rem; padding:.18rem .6rem; border-radius:999px; transition:border-color .15s, color .15s; }
.dlink:hover{ border-color:var(--gold); color:var(--gold); }
.dlink:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.consts{ margin-top:1rem; display:grid; gap:.6rem; }
.const{ padding:.8rem 1.1rem; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.const-pair{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.const-img{ font-family:"Fraunces",serif; font-size:1.02rem; color:var(--gold-2); }
.const-join{ color:var(--gold); font-size:1.1rem; }
.const-meta{ color:var(--muted); font-size:.8rem; margin-top:.2rem; }
.const .lex-where{ margin-top:.55rem; }
@media (max-width:560px){
  .lex-assoc{ grid-template-columns:1fr; gap:.15rem; }
  .shift{ grid-template-columns:1fr; gap:.3rem; }
}
.toast{ position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%); background:var(--surface-2);
  border:1px solid var(--gold); color:var(--text); padding:.7rem 1.2rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 8px 30px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:60; }
.toast.show{ opacity:1; }
.disclaimer{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line); color:var(--muted);
  font-size:.82rem; line-height:1.5; }

@media (max-width:560px){
  .reading{ grid-template-columns:1fr; gap:.2rem; }
  .act{ grid-template-columns:1fr; }
  .act .marker{ flex-direction:row; }
}