/* =====================================================================
   client.css: the client's own page, on top of stica.css and coach.css
   Prototype layer, 2026-08-16. All classes cl- prefixed.

   The client reads this on a phone, five minutes after a session or on
   the way to a meeting. stica.css stays the law: tokens, type, buttons,
   forms, focus. coach.css is reused where the same object exists on a
   coach screen (collapsible parts, note rows, quiet links). This file
   adds only what no coach screen has: the three-answer control, the
   confidence dots, the two optional questions under an action, and the
   check-in framing.

   THE ONE RULE OF THE ANSWER ROW: the three answers are visually equal.
   No primary among them, no green tick, no grey giving-up button.
   All three carry the same accent tint at rest; whichever is chosen
   fills solid with the same accent (2026-08-28: Ian's read of the
   rendered page was that three hairline boxes did not look like
   anything you could press. Colour arrived on all three at once, which
   is the only way it may arrive). The old
   app made "Did it" a filled pill and the other two ghosts, which built
   the loser button into the CSS before any copy was written. Do not
   reintroduce a hierarchy here, in colour, size, weight or order of
   discovery.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. THE CHECK-IN FRAME
   The coach's message is the headline of the card; the app's own line
   underneath is smaller and muted, because the coach is the voice here
   and the product is the paper.
   --------------------------------------------------------------------- */

.cl-msg{
  margin:0 0 var(--s2);font-size:var(--fs-lede);line-height:1.55;
  color:var(--ink);max-width:52ch;
}
.cl-quiet{
  margin:0;font-size:var(--fs-body-sm);line-height:1.5;color:var(--mut);
  max-width:52ch;
}


/* ---------------------------------------------------------------------
   2. AN ACTION, AS THE CLIENT SEES IT
   Rows on the panel, hairline-divided, never cards inside cards.
   --------------------------------------------------------------------- */

.cl-items{list-style:none;margin:var(--s4) 0 0;padding:0;}
.cl-item{padding:var(--s4) 0;border-top:1px solid var(--line);}
.cl-item__what{
  margin:0;font-size:var(--fs-body);font-weight:600;line-height:1.5;
  color:var(--ink);max-width:56ch;
}
/* The client's own plan, their first step, a date: one quiet line each.
   These lines exist only when the fact exists. Never an empty row. */
.cl-item__meta{
  margin:var(--s1) 0 0;font-size:var(--fs-body-sm);line-height:1.5;
  color:var(--mut);max-width:56ch;
}


/* ---------------------------------------------------------------------
   3. THE THREE-ANSWER CONTROL
   Equal buttons. 44px minimum. On a phone they stack full width,
   because two of the three labels are sentences and German runs 30%
   longer again; a label never truncates and never shrinks to fit.
   --------------------------------------------------------------------- */

.cl-answers{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);}
/* At rest: an accent wash behind an accent hairline, identical on all
   three, so the row reads as three things you can press rather than
   three empty boxes. The tint is mixed with transparent, not with
   --bg, so it composites correctly on the panel and in both themes.
   Label stays --ink: accent text on an accent wash measures 4.46:1,
   under the 4.5 floor. */
.cl-answer{
  flex:1 1 auto;min-height:44px;padding:10px 14px;
  background:color-mix(in srgb,var(--acc) 20%,transparent);
  border:1px solid var(--acc-line);
  border-radius:var(--r-lg);cursor:pointer;
  font:inherit;font-size:var(--fs-body-sm);font-weight:600;
  line-height:1.35;color:var(--ink);text-align:center;
  transition:color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),
             background-color var(--dur-1) var(--ease);
}
.cl-answer:hover{background:color-mix(in srgb,var(--acc) 30%,transparent);}
/* Chosen: the solid accent fill carrying white, the same pairing the
   check-in email's button and .st-segment's checked state already use.
   The same fill whichever answer it is, which is the whole point. */
.cl-answer[aria-pressed="true"]{
  background:var(--acc-fill);border-color:var(--acc-fill);color:#fff;
}
/* Carried in from an email tap: visibly chosen, visibly not saved.
   The doubled ring says "this one", the missing fill says "not yet
   recorded", and the save button below says what to do. The ring is
   inset rather than a wider border so nothing reflows. */
.cl-answer--pending{
  background:color-mix(in srgb,var(--acc) 32%,transparent);
  box-shadow:inset 0 0 0 2px var(--acc-line);
  color:var(--ink);
}
@media (max-width:640px){
  .cl-answer{flex-basis:100%;}
}

/* The line above a pending answer, naming where it came from. */
.cl-pend{
  margin:var(--s3) 0 0;font-size:var(--fs-body-sm);line-height:1.5;
  color:var(--ink2);
}
.cl-pend + .cl-answers{margin-top:var(--s2);}
.cl-savebtn{margin-top:var(--s3);}

/* Saved confirmation: the green dot-and-word from coach.css (.ch-done),
   sized down a step so it confirms without celebrating. */
.cl-item .ch-done{font-size:var(--fs-small);margin-top:var(--s2);}


/* ---------------------------------------------------------------------
   4. NOTES
   A note is optional everywhere and never required by anything.
   --------------------------------------------------------------------- */

.cl-note{margin-top:var(--s3);}
.cl-note .st-textarea{min-height:64px;margin:0;}
.cl-note .st-textarea::placeholder{color:var(--mut);}
/* "Add a note", quiet, before any answer is given. */
.cl-addnote{
  background:none;border:0;padding:0;min-height:44px;cursor:pointer;
  font:inherit;font-size:var(--fs-body-sm);color:var(--mut);
  text-decoration:underline;text-underline-offset:2px;
  display:inline-flex;align-items:center;
}
.cl-addnote:hover{color:var(--ink);}


/* ---------------------------------------------------------------------
   5. CONFIDENCE, 1 TO 5
   Five equal circles, mono digits, word anchors under the ends. Row
   width 5 x 44 + 4 x 8 = 252px, so it fits a 320px viewport with room.
   Never a slider: a slider has a default position, and a default is an
   answer nobody gave.
   --------------------------------------------------------------------- */

.cl-conf{margin-top:var(--s3);}
.cl-conf__q{
  margin:0 0 var(--s2);font-size:var(--fs-body-sm);line-height:1.5;
  color:var(--ink2);max-width:52ch;
}
.cl-conf__row{display:flex;gap:var(--s2);}
.cl-conf__dot{
  width:44px;height:44px;flex:none;
  background:transparent;border:1px solid var(--line-ui);
  border-radius:var(--r-full);cursor:pointer;
  font-family:var(--mono);font-size:14px;color:var(--ink2);
  transition:color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),
             background-color var(--dur-1) var(--ease);
}
.cl-conf__dot:hover{color:var(--ink);border-color:var(--ink2);}
.cl-conf__dot[aria-pressed="true"]{
  background:var(--ink);border-color:var(--ink);color:var(--bg);
}
.cl-conf__anchors{
  display:flex;justify-content:space-between;
  width:252px;max-width:100%;margin-top:var(--s1);
  font-family:var(--mono);font-size:var(--fs-small);color:var(--mut);
}


/* ---------------------------------------------------------------------
   6. THE TWO OPTIONAL QUESTIONS (first open of a write-up)
   The input teaches by example: the placeholder is a real, finished
   answer at the length a good answer runs to, in --mut, which clears
   4.5:1 on both grounds (5.14 light, 5.52 dark).
   --------------------------------------------------------------------- */

.cl-q{margin-top:var(--s3);}
.cl-q label{
  display:block;margin:0 0 var(--s2);
  font-size:var(--fs-body-sm);line-height:1.5;color:var(--ink2);
}
.cl-q .st-input{max-width:56ch;}
.cl-q .st-input::placeholder{color:var(--mut);}


/* ---------------------------------------------------------------------
   7. STOPPING THE CHECK-INS, AND THE PAGE FOOT
   First-class means visible on the thing itself, not filed under
   settings. Quiet means it never competes with the answers above it.
   --------------------------------------------------------------------- */

.cl-stop{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
}
.cl-stop p{margin:0;font-size:var(--fs-body-sm);line-height:1.5;color:var(--mut);}
.cl-stop .cl-addnote{color:var(--mut);}
.cl-stop .cl-addnote:hover{color:var(--ink);}

.cl-foot{
  margin-top:var(--s8);padding:var(--s4) 0 0;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:var(--fs-small);line-height:1.8;
  color:var(--mut);
}
.cl-foot p{margin:0;}
.cl-foot a,.cl-foot .cl-addnote{color:inherit;font-family:inherit;font-size:inherit;}


/* ---------------------------------------------------------------------
   8. PAST SESSIONS
   Date-led rows, mono dates, one chevron. Reuses the thread grammar
   from the coach side without importing its state vocabulary: a past
   write-up has no state a client needs told.
   --------------------------------------------------------------------- */

.cl-sess{list-style:none;margin:0;padding:0;}
.cl-sess a{
  display:flex;align-items:baseline;gap:var(--s4);
  min-height:44px;padding:var(--s3) 0;border-top:1px solid var(--line);
  text-decoration:none;
}
.cl-sess li:first-child a{border-top:0;}
.cl-sess .d{font-family:var(--mono);font-size:12px;color:var(--mut);white-space:nowrap;}
.cl-sess .t{font-size:var(--fs-body-sm);font-weight:600;color:var(--ink2);flex:1;}
.cl-sess a:hover .t{color:var(--ink);}
.cl-sess .arr{color:var(--mut);}


/* ---------------------------------------------------------------------
   9. MESSAGING
   Rows, not chat bubbles: this is correspondence with one person, not
   a group chat, and rows keep it quieter than the check-in above.
   --------------------------------------------------------------------- */

.cl-thread{list-style:none;margin:0 0 var(--s4);padding:0;}
.cl-thread li{padding:var(--s3) 0;border-top:1px solid var(--line);}
.cl-thread li:first-child{border-top:0;}
.cl-thread .who{
  margin:0 0 2px;font-family:var(--mono);font-size:var(--fs-small);
  color:var(--mut);
}
.cl-thread p{margin:0;font-size:var(--fs-body-sm);line-height:1.55;color:var(--ink2);max-width:56ch;}
.cl-msgrow{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap;}
.cl-msgrow .st-textarea{flex:1 1 240px;min-height:64px;margin:0;}
.cl-msgrow .st-textarea::placeholder{color:var(--mut);}


/* ---------------------------------------------------------------------
   10. ONE DEPARTURE FROM "OVERRIDES NOTHING IN coach.css", NAMED HERE
   Found by rendering Anna's page (wave 6, 2026-08-16): the header's
   theme-toggle button (.ch-theme, coach.css) sets its own visible label
   through `content:"Dark mode"` / `content:"Light mode"` in plain
   English, unconditionally — the one piece of English left on an
   otherwise fully German page. Every coach screen uses the same class
   and has never needed a German render, so this was never wrong until a
   bilingual page existed to prove it. Scoped by `:lang(de)` rather than
   edited in coach.css itself, so the coach side's own English rule is
   untouched and this lives entirely in the one file this wave owns.
   coachee/home.html sets the real `<html lang>` attribute from the
   coachee's own language on every render, which is what makes this
   selector correct rather than decorative.
   --------------------------------------------------------------------- */
html:lang(de) .ch-theme::after{content:"Dunkelmodus";}
html:lang(de)[data-theme="dark"] .ch-theme::after{content:"Hellmodus";}
@media (prefers-color-scheme: dark){
  html:lang(de)[data-theme="auto"] .ch-theme::after{content:"Hellmodus";}
}


/* ---------------------------------------------------------------------
   11. "SIGN OUT" IS A <button>, NOT A LINK — coach.css's .ch-me is
   written for the <a> every coach screen uses (a profile link); this
   page's own header has nowhere for that link to go (there is no
   client-facing profile screen), and signing out is a POST
   (api/auth/signout.js), which a plain href cannot make. Found by
   rendering: a bare <button class="ch-me"> keeps the browser's own
   button chrome (background, border) because .ch-me never had to reset
   it for an element that carries one by default. Reset here rather than
   in coach.css, for the same "one file this wave owns" reason as #10.
   --------------------------------------------------------------------- */
button.ch-me{background:none;border:0;font:inherit;cursor:pointer;}


/* ---------------------------------------------------------------------
   12. GAP 1: SIGN OUT MUST SURVIVE A PHONE. Found by rendering this page
   at 500px in both languages (Chrome's headless floor): the control was
   either entirely absent (English) or an empty, chrome-less pill (German)
   — same underlying cause in both, coach.css's own
   `.ch-me__name{display:none}` below 640px (section 2, "TOP BAR").

   That rule is right for a COACH's header: once the name text is hidden,
   the 30px `.ch-avatar` beside it carries the person's initials and still
   reads as "you". This page's `.ch-me` has no avatar at all — section 11
   above says why: "there is no client-facing profile screen" — so hiding
   the only content it has left an empty box: present in the DOM, taking
   up its 44px touch target, painting nothing. That is a fault on any
   width, mobile-first design or not, so it is fixed here rather than
   deferred as a phone-only concern.

   Fixed in the one file this wave owns rather than in coach.css, which
   the coach screens still need unchanged: the label stays visible at
   every width down to 500px, and the header gains somewhere for it to go
   instead of overflowing the viewport — the row wraps onto a second line
   below 640px, sign out and the theme toggle right-aligned beneath brand
   and app name, the same "relax rather than truncate" rule the three
   answer buttons already follow. Proved by rendering both languages again
   after this fix, not assumed from the CSS alone. */
@media (max-width:640px){
  .ch-me .ch-me__name{display:inline;}
  .ch-top{flex-wrap:wrap;row-gap:var(--s2);}
  .ch-top__right{margin-left:0;flex-basis:100%;justify-content:flex-end;}
}

/* A COACH'S OWN PREVIEW OF THIS PAGE (row 12 of the front-end review,
   2026-08-19), reached through coachee/home.html's `?preview=` and the
   is-preview class its boot() sets on <html>. Nothing here is a second
   stylesheet: the page renders exactly as the client would see it, minus
   the two controls that are never the coach's to press from inside their
   own rehearsal of the client's page — signing the client out, and
   pausing the client's own check-ins. */
.is-preview #signout-link,
.is-preview [data-stop],
.is-preview [data-resume]{display:none;}

/* "Preview, not sent" (coach-review-2, F, wave 3): the client's own
   .st-eyebrow type, coloured with the accent already used for the one
   emphasised word inside an eyebrow (.st-eyebrow b, just above), so it
   reads as a marker rather than another line of ordinary copy. */
.cl-previewbadge{color:var(--acc-text);}


/* ---------------------------------------------------------------------
   13. ON THIS PAGE (CLIENT-EXPERIENCE.md, 2026-08-21)
   One quiet row of links under the greeting, so sessions, messages,
   recording and the account are one tap from the top of the page rather
   than a scroll past a form. Not tabs: nothing is "current", nothing is
   hidden, every link only scrolls. Wraps below 360px; never scrolls
   sideways, because a link you cannot see is a link that does not exist.
   ink2 on the ground clears 12.17:1 light, 10.22:1 dark.
   --------------------------------------------------------------------- */

.cl-jump{
  display:flex;flex-wrap:wrap;gap:0 var(--s5);
  margin:0 0 var(--s5);border-bottom:1px solid var(--line);
}
.cl-jump a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-body-sm);font-weight:500;color:var(--ink2);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--line-ui);
  transition:color var(--dur-1) var(--ease),text-decoration-color var(--dur-1) var(--ease);
}
.cl-jump a:hover{color:var(--ink);text-decoration-color:currentColor;}
/* A jump lands with air above the heading, not flush to the top bar. */
.ch-sect[id]{scroll-margin-top:var(--s5);}


/* ---------------------------------------------------------------------
   14. RECORDING YOUR SESSIONS
   The consent block: a state word (dot plus word, colour never alone),
   one sentence saying what is true now and what changing it does, one
   control. The same block in the account section and on the first
   visit. Two visual states carry four stored ones: on (given, or a
   relationship that predates the question) and off (said no, or said
   yes then stopped); the sentence tells the histories apart.
   --------------------------------------------------------------------- */

.cl-consent{max-width:56ch;}
.cl-consent__state{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 var(--s2);
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.8px;text-transform:uppercase;white-space:nowrap;
}
.cl-consent__state::before{content:"";width:6px;height:6px;border-radius:var(--r-dot);background:currentColor;flex:none;}
.cl-consent__state--on{color:var(--green);}   /* 5.18 light, 9.58 dark */
.cl-consent__state--off{color:var(--mut);}    /* 5.14 light, 5.52 dark */
.cl-consent > p{margin:0 0 var(--s3);}
.cl-consent .st-btnrow{margin-top:var(--s3);}
/* After a press: the green dot-and-word, then one plain sentence of
   what is now true. No toast, no celebration. */
.cl-consent .ch-done{display:flex;margin-top:var(--s3);}
.cl-consent__after{margin:var(--s1) 0 0;font-size:var(--fs-body-sm);line-height:1.5;color:var(--ink2);}
/* The one time a tick appears on a signed-in screen: a client whose
   relationship predates the question, on their first visit. Never
   pre-ticked. */
.cl-consent .st-check{margin:var(--s3) 0;}


/* ---------------------------------------------------------------------
   15. THE FIRST VISIT
   One panel, two parts, one button. Hairline between the parts; the
   button is full width on a phone and sized to its label above 640px.
   --------------------------------------------------------------------- */

.cl-first .st-field{margin-bottom:var(--s5);}
.cl-first__part + .cl-first__part{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);}
.cl-first__part > h2{margin-bottom:var(--s3);}
.cl-first__fact{margin:0 0 var(--s1);font-size:var(--fs-body);color:var(--ink);}
.cl-first__go{margin-top:var(--s6);}
@media (max-width:640px){.cl-first__go .st-btn{width:100%;}}


/* ---------------------------------------------------------------------
   16. THE DOOR, WHEN A LINK HAS RUN OUT
   The same sheet as every sign-in. The explanation takes the place of
   the ordinary intro line, in ink2, not in the error colour: a link
   running out is not the person's fault and is not a fault at all.
   Ships now (wave 2b) even though login.html only reads it next wave.
   --------------------------------------------------------------------- */

.cl-door__why{margin:0;font-size:var(--fs-body-sm);line-height:1.55;color:var(--ink2);}
.cl-door__sent{margin:var(--s4) 0 0;font-size:var(--fs-body-sm);line-height:1.55;color:var(--ink2);}
.cl-door__sent .ch-done{display:flex;margin-bottom:var(--s1);}