/* ============================================================
   Companion Instrument — design system
   Cormorant Garamond + DM Sans · navy / ivory / amber
   Zero border-radius · unhurried · restrained
   Tokens live in :root — adjust there to match the main site.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500&display=swap');

:root{
  --navy:#1c2942;
  --navy-soft:#33405c;
  --ivory:#f4efe3;
  --paper:#fbf9f2;
  --panel:#efe9d9;
  --amber:#a8782e;
  --ink:#2b2a26;
  --muted:#726e62;
  --line:#d8cfb9;
  --line-soft:#e6ddc9;
  --resist:#3f6b4f;
  --partial:#9a7d2f;
  --engage:#9a5638;

  --display:'Cormorant Garamond',Georgia,serif;
  --body:'DM Sans',-apple-system,Segoe UI,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}

html,body{height:100%}

body{
  font-family:var(--body);
  background:var(--ivory);
  color:var(--ink);
  line-height:1.72;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  display:flex;
  justify-content:center;
  padding:0;
}

/* ---- containers --------------------------------------------- */
.card{
  background:var(--paper);
  width:100%;
  max-width:620px;
  margin:0 16px;
  padding:54px 50px 44px;
  border-top:3px solid var(--navy);
  min-height:100%;
}
.card.narrow{max-width:430px}
body.plain{align-items:flex-start;padding-top:7vh}
body.wide{background:var(--ivory)}

.dash{
  background:var(--paper);
  width:100%;
  max-width:1000px;
  margin:0 16px;
  padding:46px 48px 60px;
  border-top:3px solid var(--navy);
}

/* ---- type --------------------------------------------------- */
h1{
  font-family:var(--display);
  font-weight:500;
  font-size:2.4rem;
  line-height:1.18;
  color:var(--navy);
  letter-spacing:.005em;
  margin-bottom:.5em;
}
h2{
  font-family:var(--display);
  font-weight:500;
  font-size:1.5rem;
  color:var(--navy);
  margin:1.9em 0 .55em;
}
p{margin-bottom:1.05em}
.lede{font-size:1.06rem;color:var(--muted);margin-bottom:1.7em}
.kicker{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0;
}
.hint{
  display:inline;
  font-size:.78rem;
  font-weight:400;
  color:var(--muted);
  letter-spacing:0;
  text-transform:none;
}
.muted{color:var(--muted);font-size:.95rem}
code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;
  background:var(--panel);padding:1px 6px}

/* ---- header ------------------------------------------------- */
.topline{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:2.4em;
}
.quiet-link{
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:1px;
}
.quiet-link:hover{color:var(--navy)}

/* ---- buttons ------------------------------------------------ */
.btn{
  display:block;
  width:100%;
  background:var(--navy);
  color:var(--ivory);
  font-family:var(--body);
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.04em;
  text-align:center;
  text-decoration:none;
  border:1px solid var(--navy);
  padding:16px 22px;
  cursor:pointer;
  transition:background .35s ease,color .35s ease;
}
.btn:hover{background:var(--navy-soft)}
.btn-quiet{
  background:transparent;
  color:var(--navy);
}
.btn-quiet:hover{background:var(--panel)}
.actions{display:flex;flex-direction:column;gap:14px;margin:2em 0 1.4em}

/* ---- protocol card ------------------------------------------ */
.protocol{list-style:none;counter-reset:p;margin:.4em 0 .6em}
.protocol li{
  counter-increment:p;
  position:relative;
  padding:14px 0 14px 44px;
  border-bottom:1px solid var(--line-soft);
}
.protocol li:last-child{border-bottom:none}
.protocol li::before{
  content:counter(p);
  position:absolute;left:0;top:13px;
  font-family:var(--display);
  font-size:1.3rem;
  color:var(--amber);
}
.notdo{list-style:none;margin:.3em 0 .6em}
.notdo li{
  padding:7px 0 7px 22px;
  position:relative;
  color:var(--muted);
}
.notdo li::before{
  content:"—";
  position:absolute;left:0;
  color:var(--amber);
}
.reasons{
  background:var(--panel);
  border-left:3px solid var(--amber);
  padding:20px 24px;
  margin:1.8em 0;
}
.reasons h2{margin-top:0;font-size:1.25rem}
.reasons p{margin-bottom:0;font-style:italic}

/* ---- forms -------------------------------------------------- */
label{
  display:block;
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--navy);
  margin:1.3em 0 0;
}
input[type=text],input[type=password],textarea,select{
  display:block;
  width:100%;
  font-family:var(--body);
  font-size:1rem;
  color:var(--ink);
  background:var(--ivory);
  border:1px solid var(--line);
  padding:12px 13px;
  margin-top:8px;
}
input[type=text]:focus,input[type=password]:focus,
textarea:focus,select:focus{
  outline:none;
  border-color:var(--amber);
}
textarea{resize:vertical;line-height:1.6}
fieldset{border:none;margin:1.5em 0 0}
legend{
  font-size:.82rem;font-weight:500;letter-spacing:.04em;
  color:var(--navy);margin-bottom:.4em;
}
.opt{
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-weight:400;
  font-size:.96rem;
  letter-spacing:0;
  color:var(--ink);
  margin:9px 0 0;
  cursor:pointer;
}
.opt input{margin-top:5px;flex:none;accent-color:var(--navy)}
.opt em{font-style:italic;color:var(--muted)}
.btn[type=submit],form .btn{margin-top:2em}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:2px;background:var(--line);
  margin-top:18px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;background:var(--navy);
  cursor:pointer;border:none;
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;background:var(--navy);
  cursor:pointer;border:none;border-radius:0;
}

/* ---- notices ------------------------------------------------ */
.notice{
  background:var(--panel);
  border-left:3px solid var(--engage);
  padding:13px 17px;
  font-size:.92rem;
  margin-bottom:1.5em;
}
.notice.soft{border-left-color:var(--resist)}
.footnote{
  font-size:.8rem;
  color:var(--muted);
  line-height:1.6;
  margin-top:2.6em;
  padding-top:1.3em;
  border-top:1px solid var(--line-soft);
}
.steps{margin:.5em 0 1.4em 1.2em}
.steps li{margin:.4em 0}

/* ---- in-the-moment ------------------------------------------ */
body.moment{align-items:flex-start;padding-top:4vh}
.screen{display:none;animation:rise .6s ease both}
.screen.is-active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.curve-wrap{
  margin:.5em 0 2em;
  padding:24px 10px;
  background:var(--ivory);
  border:1px solid var(--line-soft);
}
.curve{width:100%;height:auto;display:block}
#marker{transition:none}
.curve-state{
  font-family:var(--display);
  font-size:1.4rem;
  color:var(--amber);
  text-align:center;
  margin:.2em 0 1.4em;
}
.rating{
  display:flex;align-items:center;gap:20px;
  margin:1.6em 0 2.2em;
}
.rating input[type=range]{margin-top:0}
.rating-val{
  font-family:var(--display);
  font-size:2.6rem;
  color:var(--navy);
  flex:none;width:1.6em;text-align:center;
}

/* ---- clinician dashboard ------------------------------------ */
.clientpick{margin-bottom:1.6em}
.clientpick select{max-width:280px}
.panel{
  border-top:1px solid var(--line);
  padding:1.6em 0;
}
.panel:first-of-type{border-top:none}
.stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:.6em}
.stat{
  flex:1;min-width:130px;
  background:var(--panel);
  padding:18px 20px;
  font-size:.82rem;
  color:var(--muted);
  letter-spacing:.03em;
}
.stat .num{
  display:block;
  font-family:var(--display);
  font-size:2.3rem;
  color:var(--navy);
  line-height:1;
  margin-bottom:6px;
}
.bars{
  display:flex;gap:16px;align-items:flex-end;
  margin-top:1em;padding:14px 6px 0;
}
.bar{flex:1;text-align:center}
.bar-fill{
  background:var(--navy);
  width:100%;
  margin-bottom:7px;
  transition:height .5s ease;
}
.bar-num{display:block;font-family:var(--display);
  font-size:1.2rem;color:var(--navy)}
.bar-lab{display:block;font-size:.7rem;color:var(--muted);
  letter-spacing:.04em;margin-top:2px}

.tbl{width:100%;border-collapse:collapse;margin-top:.7em;font-size:.9rem}
.tbl th{
  text-align:left;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
  padding:7px 10px;border-bottom:1px solid var(--line);
}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line-soft)}
.urge-cell{
  font-family:var(--display);font-size:1.25rem;color:var(--navy);
}
.r-resisted{color:var(--resist);font-weight:500}
.r-partial{color:var(--partial);font-weight:500}
.r-engaged{color:var(--engage);font-weight:500}

.episode{
  border-left:2px solid var(--line);
  padding:11px 0 11px 16px;
  margin:14px 0;
}
.episode p{margin:.25em 0;font-size:.93rem}
.ep-head{
  display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;
  font-size:.78rem;color:var(--muted);letter-spacing:.03em;
  margin-bottom:.4em;
}
.ep-when{color:var(--navy);font-weight:500}
.ep-type,.ep-theme,.ep-urge{}

/* ---- responsive --------------------------------------------- */
@media(max-width:560px){
  .card{padding:40px 26px 36px}
  .dash{padding:34px 22px 44px}
  h1{font-size:2rem}
  body.plain{padding-top:3vh}
}