:root {
  --ink:#1b1d1f; --ink-soft:#4a4f54; --ink-faint:#82888e;
  --paper:#eeefec; --surface:#f7f8f6; --line:#d5d7d2; --line-firm:#b6b9b3;
  --action:#2f5d55; --action-ink:#f7f8f6; --sel:#1b1d1f; --sel-ink:#f7f8f6;
  /* Admin chrome only. Nothing in the patient-facing form is coloured, so that
     no affect word ever looks like the right or wrong answer. */
  --danger:#8f2f26;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark) { :root {
  --ink:#e8e9e6; --ink-soft:#a8adb1; --ink-faint:#6e747a;
  --paper:#15181a; --surface:#1d2124; --line:#2e3337; --line-firm:#454b50;
  --action:#6fa79b; --action-ink:#101315; --sel:#e8e9e6; --sel-ink:#15181a;
  --danger:#e0918a;
}}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.45; }
main { max-width:26rem; margin:0 auto; padding:.7rem 1rem 2rem; }
a { color:var(--ink); }

.eyebrow { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 .9rem; }
.q { font-family:var(--serif); font-size:1.2rem; font-weight:400; line-height:1.25;
  margin:0 0 .6rem; color:var(--ink); text-wrap:balance; }
.q .sub { display:block; font-family:var(--sans); font-size:.74rem; color:var(--ink-faint);
  margin-top:.24rem; }
.block { margin-bottom:1.1rem; }

/* mood scale */
.scale { display:flex; gap:.3rem; position:relative; }
.scale input { position:absolute; width:1px; height:1px; opacity:0; }
.scale label { flex:1; text-align:center; padding:.7rem 0; font-size:1rem;
  font-variant-numeric:tabular-nums; border:1px solid var(--line-firm); border-radius:4px;
  background:var(--surface); color:var(--ink-soft); cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease; }
.scale input:checked + label { background:var(--sel); color:var(--sel-ink); border-color:var(--sel); }
.scale input:focus-visible + label { outline:2px solid var(--action); outline-offset:2px; }
.ends { display:flex; justify-content:space-between; margin-top:.32rem;
  font-size:.7rem; color:var(--ink-faint); }

/* affect grid — dense enough that all four zones sit on one screen */
.grid { display:grid; grid-template-columns:1fr 1fr; gap:.42rem; }
.cell { border:1px solid var(--line); border-radius:4px; padding:.38rem .34rem .42rem; }
.zl { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 .28rem; }
.cl { display:flex; flex-wrap:wrap; gap:.22rem; position:relative; }
.cl input { position:absolute; width:1px; height:1px; opacity:0; }
.cl label { display:inline-block; padding:.28rem .46rem; font-size:.78rem; line-height:1.1;
  border:1px solid var(--line); border-radius:100px; color:var(--ink-soft); cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease; }
.cl input:checked + label { background:var(--sel); color:var(--sel-ink); border-color:var(--sel); }
.cl input:focus-visible + label { outline:2px solid var(--action); outline-offset:2px; }
.cl label.added { border-style:dashed; }
.axis { display:flex; justify-content:space-between; font-size:.6rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint); margin:.3rem 0 0; }

/* activity chips */
.chips { display:flex; flex-wrap:wrap; gap:.32rem; position:relative; }
.chips input { position:absolute; width:1px; height:1px; opacity:0; }
.chips label { display:inline-block; padding:.44rem .62rem; font-size:.86rem;
  border:1px solid var(--line-firm); background:var(--surface); color:var(--ink);
  border-radius:4px; cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease; }
.chips input:checked + label { background:var(--sel); color:var(--sel-ink); border-color:var(--sel); }
.chips input:focus-visible + label { outline:2px solid var(--action); outline-offset:2px; }

input[type=text], input[type=password], textarea {
  width:100%; font-family:var(--sans); font-size:.95rem; padding:.6rem .65rem;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:4px; }
textarea { font-family:var(--serif); font-size:1rem; line-height:1.5; min-height:4.6rem;
  resize:vertical; }
.bare { background:transparent; border:0; border-bottom:1px solid var(--line-firm);
  border-radius:0; padding:.45rem .1rem; font-size:.85rem; margin-top:.45rem; }
::placeholder { color:var(--ink-faint); }

button.go { width:100%; font:inherit; font-size:1rem; font-weight:500; padding:.9rem;
  border:0; border-radius:4px; background:var(--action); color:var(--action-ink);
  cursor:pointer; transition:filter .12s ease; }
button.go:active { filter:brightness(.92); }
.ghost { display:block; width:100%; text-align:center; font-size:.88rem; padding:.7rem;
  margin-top:.5rem; background:transparent; color:var(--ink-soft); text-decoration:none;
  border:1px solid var(--line-firm); border-radius:4px; cursor:pointer; font-family:inherit; }

.big { display:block; width:100%; text-align:left; font:inherit; font-size:1.02rem;
  padding:1rem .9rem; margin-bottom:.5rem; background:var(--surface); color:var(--ink);
  border:1px solid var(--line-firm); border-radius:4px; cursor:pointer; text-decoration:none;
  transition:background .12s ease; }
.big span { display:block; font-size:.76rem; color:var(--ink-faint); margin-top:.18rem; }
.open { border:1px solid var(--line-firm); border-radius:4px; padding:.75rem .8rem;
  margin-bottom:1rem; background:var(--surface); }
.open .lbl { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.open .val { font-family:var(--serif); font-size:1.08rem; margin-top:.16rem; }
.open .met { font-size:.76rem; color:var(--ink-faint); margin-top:.12rem;
  font-variant-numeric:tabular-nums; }

.done { font-family:var(--serif); font-size:1.5rem; margin:2.5rem 0 .3rem; }
.muted { font-size:.82rem; color:var(--ink-faint); line-height:1.5; }
.err { font-size:.86rem; color:var(--ink); border-left:2px solid var(--action);
  padding-left:.7rem; margin:0 0 1rem; }
.howto { border-left:2px solid var(--line-firm); padding-left:.75rem; margin:0 0 .7rem;
  font-size:.82rem; line-height:1.55; color:var(--ink-soft); }
.howto em { color:var(--ink); }

table { width:100%; border-collapse:collapse; font-size:.84rem; }
th, td { text-align:left; padding:.35rem .3rem; border-bottom:1px solid var(--line); }
th { font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint);
  font-weight:400; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82em;
  background:var(--surface); padding:.12em .35em; border-radius:3px;
  overflow-wrap:anywhere; }
h2.sec { font-family:var(--serif); font-weight:400; font-size:1.05rem;
  margin:1.6rem 0 .5rem; color:var(--ink); }

/* admin row actions */
.acts { display:flex; gap:.28rem; flex-wrap:wrap; justify-content:flex-end; }
form.inline { display:inline; margin:0; }
button.act { font-family:inherit; font-size:.74rem; padding:.26rem .5rem; cursor:pointer;
  background:transparent; color:var(--ink-soft); border:1px solid var(--line-firm);
  border-radius:100px; white-space:nowrap;
  transition:color .12s ease,border-color .12s ease; }
button.act:hover { color:var(--ink); border-color:var(--ink); }
button.act.danger:hover { color:var(--danger); border-color:var(--danger); }
td.right { text-align:right; }
.warn { border-left:2px solid var(--danger); padding-left:.75rem; margin:0 0 1.1rem;
  font-size:.9rem; line-height:1.55; }
.warn strong { color:var(--ink); }