/* ============================================================================
   cx.css
   THE CRAVING COACH STUDY: the components the four concepts share.

   THE HUB HALF of this sheet adds nothing to the token layer. Every colour,
   radius, easing and font in the .cx- rules is a token from appts-shell.css,
   so the hub cannot drift from the client app when the app's palette moves.

   THE FOCUS MODE HALF is the one deliberate exception on this whole host, and
   it is worth saying why in the file rather than in a commit message. Entering
   the coach is meant to be an environmental shift: lights down, noise off. The
   blueprint makes it calm-dark ALWAYS, whatever theme the app is in, because a
   person at eight out of ten should not be handed a white screen. So .cf
   carries its own small palette, derived from Forward navy #1F2A44 and never
   pure black, and it does not answer to [data-theme]. That is a decision, not
   a drift, and it is the only block here allowed to name a colour.

   Rules the whole sheet keeps:
   - No content depends on an animation to be seen. Every hidden state lives in
     a `from` keyframe, resting styles are visible, and reduced motion lands on
     the final state rather than on nothing.
   - No underline on a link in any state.
   - No red or green as the only carrier of meaning. Red is 999 and nothing
     else.
   ========================================================================= */

/* =========================================================================
   HUB COMPONENTS
   ====================================================================== */

/* ---- the speaker button ------------------------------------------------ */
.cx-say { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
  border-radius: 999px; border: 1px solid var(--hair); background: var(--raise);
  color: var(--ink-2); font-size: 12.5px; font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease), transform .18s var(--bounce); }
.cx-say:hover { background: var(--raise-2); color: var(--ink); }
.cx-say:active { transform: scale(.96); }
.cx-say .i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--teal); color: #fff; flex: none; }
/* ---- an episode row ---------------------------------------------------- */
.cx-eps { display: flex; flex-direction: column; gap: 9px; }
.cx-ep { display: flex; align-items: center; gap: 15px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--hair);
  background: var(--raise);
  transition: transform .2s var(--spring), border-color .2s var(--ease), background .2s var(--ease); }
.cx-ep:hover { transform: translateY(-2px); border-color: var(--hair-2); background: var(--raise-2); }
.cx-ep:active { transform: scale(.995); }
.cx-ep .n { width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 13px; font-family: var(--display); font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--raise-2); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--hair); }
/* The number is the intensity, and intensity is NOT a severity colour. A 10
   renders in the same neutral as a 2, on purpose: colouring the number turns a
   feeling into a verdict. Only the OUTCOME carries a tint, and it is a tint of
   the hairline, never of the figure. */
.cx-ep.used { border-left: 3px solid var(--gold); }
.cx-ep.passed .n { background: rgba(0, 164, 153, .17); color: var(--teal-soft); box-shadow: none; }
html[data-theme="light"] .cx-ep.passed .n { background: #DFF3F0; color: #0B7A6F; }
.cx-ep .t { flex: 1; min-width: 0; }
.cx-ep .t b { display: block; font-size: 15px; font-weight: 650; line-height: 1.3; }
.cx-ep .t .w { display: block; font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.cx-ep .tags { display: flex; align-items: center; gap: 8px; flex: none; }
.cx-ep .cv { color: var(--ink-3); display: grid; place-items: center; }
.cx-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; }
.cx-tag.sh { background: var(--raise-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair); }
.cx-tag.ans { background: rgba(0, 164, 153, .18); color: var(--teal-soft); }
html[data-theme="light"] .cx-tag.ans { background: #DFF3F0; color: #0B7A6F; }
/* Flagged is magenta rather than red. Red on this host means 999 and only
   999, and a flag is not an emergency, it is a person being asked to look. */
.cx-tag.red { background: rgba(181, 37, 85, .2); color: var(--secondary-soft); }
html[data-theme="light"] .cx-tag.red { background: #F8E4EC; color: var(--secondary); }
@media (max-width: 620px) {
  .cx-ep .tags .cx-tag { display: none; }
}
/* ---- an episode, opened ------------------------------------------------ */
.cx-epv-top { display: flex; align-items: center; gap: 16px; padding-bottom: 18px;
  border-bottom: 1px solid var(--hair); }
.cx-epv-top > b { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px;
  font-family: var(--display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--raise-2); box-shadow: inset 0 0 0 1px var(--hair); }
.cx-epv-top > span b { display: block; font-family: var(--display); font-size: 18px; font-weight: 650; }
.cx-epv-top > span span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.cx-epv-tr { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; }
.cx-epv-tr span { padding: 5px 12px; border-radius: 999px; background: var(--raise-2);
  border: 1px solid var(--hair); font-size: 12.5px; color: var(--ink-2); }
.cx-dl { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 0; }
.cx-dl dt { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px; }
.cx-dl dd { font-size: 15px; line-height: 1.5; color: var(--ink); }
.cx-reply { margin-top: 20px; padding: 18px 20px; border-radius: var(--r-lg);
  background: rgba(0, 164, 153, .1); border: 1px solid rgba(0, 164, 153, .3); }
html[data-theme="light"] .cx-reply { background: #EFF9F7; border-color: #BFE5DF; }
.cx-reply .who { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.cx-reply .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal); color: #fff; font-size: 11.5px; font-weight: 700; flex: none; }
.cx-reply .who b { font-size: 14.5px; font-weight: 650; }
.cx-reply .who span:last-child { font-size: 12.5px; color: var(--ink-3); }
.cx-reply p { font-size: 15px; line-height: 1.6; color: var(--ink); }
.cx-reply .added { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px;
  padding: 7px 13px; border-radius: 999px; background: var(--raise-2); font-size: 12.5px;
  font-weight: 600; color: var(--ink-2); }
.cx-reply .ack { display: block; margin-top: 11px; font-size: 12px; color: var(--ink-3); }
.cx-sharebox { margin-top: 20px; padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--raise); border: 1px solid var(--hair); }
.cx-sharebox b { display: block; font-family: var(--display); font-size: 16px; font-weight: 650;
  margin-bottom: 6px; }
.cx-sharebox p { font-size: 13.8px; line-height: 1.55; color: var(--ink-2); margin-bottom: 14px; }
.cx-oo, .cx-fine { display: block; margin-top: 12px; font-size: 12px; line-height: 1.5;
  color: var(--ink-3); }
/* ---- harm reduction ---------------------------------------------------- */
.cx-harm-h { display: block; font-family: var(--display); font-size: 18px; font-weight: 700;
  letter-spacing: -.02em; margin-bottom: 8px; }
.cx-harm-l { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin-bottom: 18px; }
/* ---- the plan editor --------------------------------------------------- */
.cx-ed-lead { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin-bottom: 18px; }
.cx-ed-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cx-ed-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--r-sm); background: var(--raise-2); border: 1px solid var(--hair); }
.cx-ed-row span { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4; }
.cx-ed-row button { width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink-3);
  transition: background .18s var(--ease), color .18s var(--ease); }
.cx-ed-row button:hover { background: var(--hair); color: var(--ink); }
.cx-ed-empty { padding: 22px; border: 1px dashed var(--hair); border-radius: var(--r-md);
  text-align: center; font-size: 13.5px; color: var(--ink-3); }
.cx-ed-add { display: flex; gap: 9px; align-items: center; }
.cx-ed-add .nx-input { flex: 1; }
.cx-warn { display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px;
  border-radius: var(--r-md); background: rgba(185, 138, 47, .15);
  border: 1px solid rgba(185, 138, 47, .4); font-size: 14px; line-height: 1.5;
  color: var(--ink); margin-bottom: 18px; }
html[data-theme="light"] .cx-warn { background: #FBF1DC; border-color: #E7CE94; }
.cx-warn svg { flex: none; margin-top: 1px; color: #E7C476; }
html[data-theme="light"] .cx-warn svg { color: var(--amber); }
/* =========================================================================
   FOCUS MODE
   Its own palette, on purpose. See the note at the top of this file.
   ====================================================================== */
body.cf-open { overflow: hidden; }
/* THE CRISIS NUMBERS MUST BE ABOVE FOCUS MODE, and they were not.
 *
 * "Get help now" is in the top bar of every Focus Mode screen and opens the
 * house sheet (NX.sheet). .sheet is z-index 90 and .backdrop 80, both in
 * appts-shell.css and both top-level fixed siblings of .cf, which is 200. So
 * a person mid-craving who reached for the phone numbers got them painted
 * BEHIND the overlay: nothing to see, nothing to tap, and no way to dismiss
 * the sheet they had just opened. Hit-tested on the deployed page, not
 * reasoned about: elementFromPoint at the sheet's own close button returned
 * the .cf overlay.
 *
 * RAISED HERE, SCOPED TO FOCUS MODE, RATHER THAN RAISING .sheet GLOBALLY.
 * The house ordering elsewhere is deliberate -- sheet 90 under toast 120, so
 * a confirmation is readable over the panel that caused it -- and a global
 * raise would put every sheet on the site over every toast to fix one page.
 * Inside Focus Mode nothing is lost by going above 200: every toast on this
 * host is below it and is therefore already covered by .cf itself.
 *
 * z-index only. Position, size and everything else stay where the sheet
 * defines them: a rule that reaches in to decide layout for a component that
 * owns its own is how a panel ends up stranded mid-screen. */
body.cf-open .backdrop { z-index: 205; }
body.cf-open .sheet { z-index: 210; }
.cf {
  --cfbg: #0E1626;          /* the ground, derived from Forward navy, never black */
  --cfbg2: #16213A;
  --cfink: #EEF2F8;
  --cfink2: rgba(238, 242, 248, .72);
  --cfink3: rgba(238, 242, 248, .46);
  --cfline: rgba(238, 242, 248, .13);
  --cfline2: rgba(238, 242, 248, .24);
  --cfraise: rgba(238, 242, 248, .06);
  --cfraise2: rgba(238, 242, 248, .1);
  --cfteal: #4FD1C7;        /* regulation: the orb, the wave, progress */
  --cfsand: #E4C89A;        /* human connection: the connect pathway, completion */
  --cfred: #E5564B;         /* 999 and nothing else */
  position: fixed; inset: 0; z-index: 200; overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(120% 80% at 50% -10%, #1B2947 0%, rgba(27, 41, 71, 0) 62%),
    linear-gradient(180deg, var(--cfbg2) 0%, var(--cfbg) 46%, #0A1120 100%);
  color: var(--cfink);
  font-family: var(--body);
  /* The resting state is VISIBLE. The entrance lives in the keyframe, so a
     page that never animates still shows the coach rather than a black hole,
     which is the single defect this project has re-learned three times. */
  animation: cfIn .34s var(--ease) both;
}
@keyframes cfIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cf { animation: none; } }
.cf-in { max-width: 620px; margin: 0 auto; min-height: 100%;
  padding: 18px 22px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.cf-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  margin-bottom: 30px; }
.cf-leave, .cf-back, .cf-help { display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; border-radius: 999px; border: 1px solid var(--cfline);
  color: var(--cfink2); font-size: 13px; font-weight: 600; min-height: 44px;
  transition: background .2s var(--ease), color .2s var(--ease); }
.cf-leave:hover, .cf-back:hover, .cf-help:hover { background: var(--cfraise2); color: var(--cfink); }
.cf-back { justify-self: start; }
.cf-help { border-color: rgba(228, 200, 154, .38); color: var(--cfsand); }
.cf-help:hover { background: rgba(228, 200, 154, .14); color: var(--cfsand); }
.cf-top > span { display: block; }
/* THE QUESTION SITS HIGH AND THE CONTROLS SIT LOW, which is the blueprint's
   rule (inputs in the bottom 40%) and also the only way this looks like
   anything on a tall screen. The first build let everything stack from the
   top and left half a desktop viewport empty under the Continue button.
   margin-top:auto on the actions does it without a media query, and long
   screens simply push the actions off the fold as they should. */
.cf-body { flex: 1; display: flex; flex-direction: column; }
.cf-body > .cf-acts { margin-top: auto; padding-top: 34px; }
.cf-eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cfteal); margin-bottom: 14px; }
.cf-eyebrow-warn { color: var(--cfsand); }
.cf-q { font-family: var(--display); font-size: 30px; font-weight: 650; letter-spacing: -.03em;
  line-height: 1.18; margin-bottom: 12px; outline: none; }
.cf-q-sm { font-size: 25px; }
.cf-sub { font-size: 16px; line-height: 1.6; color: var(--cfink2); margin-bottom: 26px; }
.cf-fine { font-size: 12.5px; line-height: 1.55; color: var(--cfink3); margin-top: 18px; }
@media (max-width: 560px) { .cf-q { font-size: 26px; } .cf-q-sm { font-size: 22px; } }
.cf-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
.cf-go { display: block; width: 100%; min-height: 58px; padding: 17px 22px; border-radius: 16px;
  background: var(--cfteal); color: #08131B; font-family: var(--display); font-size: 17px;
  font-weight: 700; text-align: center;
  transition: transform .18s var(--bounce), filter .2s var(--ease), opacity .2s var(--ease); }
.cf-go:hover { filter: brightness(1.07); }
.cf-go:active { transform: scale(.985); }
.cf-go[disabled] { opacity: .32; pointer-events: none; }
.cf-go-quiet { background: var(--cfraise2); color: var(--cfink); }
.cf-go-line { background: none; box-shadow: inset 0 0 0 1px var(--cfline2); color: var(--cfink2); }
.cf-quiet-link { display: block; width: 100%; margin-top: 18px; padding: 12px; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--cfink3);
  transition: color .2s var(--ease); }
.cf-quiet-link:hover { color: var(--cfink); }
/* ---- the intensity stepper --------------------------------------------- */
.cf-int { padding: 26px 22px; border-radius: 22px; background: var(--cfraise);
  border: 1px solid var(--cfline); }
.cf-int-read { text-align: center; margin-bottom: 24px; }
.cf-int-read b { display: block; font-family: var(--display); font-size: 62px; font-weight: 700;
  letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
/* Nothing is preselected, on purpose, so the resting state has to look like a
   waiting box rather than a stray dash. */
.cf-int-read b.none { color: var(--cfink3); letter-spacing: .04em; }
.cf-int-read span { display: block; font-size: 14.5px; color: var(--cfink2); margin-top: 8px; }
.cf-int-row { display: flex; align-items: center; gap: 12px; }
.cf-pm { width: 56px; height: 56px; flex: none; border-radius: 18px; background: var(--cfraise2);
  color: var(--cfink); font-size: 26px; font-weight: 600; display: grid; place-items: center;
  transition: background .18s var(--ease), transform .18s var(--bounce); }
.cf-pm:hover { background: var(--cfline); }
.cf-pm:active { transform: scale(.94); }
/* minmax(0,1fr), not 1fr: a 1fr track will not shrink below the min-content
   width of what is in it, which is how a row of eleven detents pushes the last
   two off a 360px screen. Measured, not reasoned about. */
.cf-dets { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 4px; }
.cf-det { height: 56px; display: grid; place-items: center; border-radius: 10px;
  transition: background .16s var(--ease); }
.cf-det span { display: block; width: 100%; height: 12px; border-radius: 6px;
  background: var(--cfraise2); transition: background .2s var(--ease), height .2s var(--spring); }
.cf-det:hover span { background: var(--cfline2); }
.cf-det.fill span { background: rgba(79, 209, 199, .42); }
.cf-det.on span { background: var(--cfteal); height: 26px; }
/* ---- chips and tiles ---------------------------------------------------- */
.cf-chips { display: flex; flex-direction: column; gap: 9px; }
.cf-chip { display: block; width: 100%; text-align: left; padding: 17px 20px; border-radius: 15px;
  background: var(--cfraise); border: 1px solid var(--cfline); color: var(--cfink);
  font-size: 16.5px; font-weight: 600; min-height: 56px;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--spring); }
.cf-chip:hover { background: var(--cfraise2); border-color: var(--cfline2); transform: translateY(-1px); }
.cf-chip.on { border-color: var(--cfteal); background: rgba(79, 209, 199, .13); }
.cf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.cf-tile { padding: 15px 16px; border-radius: 14px; background: var(--cfraise);
  border: 1px solid var(--cfline); color: var(--cfink2); font-size: 14.5px; font-weight: 600;
  min-height: 56px; text-align: left;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.cf-tile:hover { background: var(--cfraise2); color: var(--cfink); }
.cf-tile.on { border-color: var(--cfteal); background: rgba(79, 209, 199, .14); color: var(--cfink); }
/* ---- the safety cards ---------------------------------------------------- */
.cf-cards { display: flex; flex-direction: column; gap: 13px; }
/* Identical styling to every other card in here. A safety question that
   arrives on a red panel tells somebody they are in trouble for answering it. */
.cf-card { padding: 19px 20px; border-radius: 17px; background: var(--cfraise);
  border: 1px solid var(--cfline); }
.cf-card p { font-size: 16.5px; line-height: 1.45; margin-bottom: 4px; }
.cf-why { display: block; font-size: 12.5px; color: var(--cfink3); margin-bottom: 12px; }
.cf-ab { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 13px; }
.cf-ab button { padding: 12px 20px; border-radius: 999px; background: var(--cfraise2);
  color: var(--cfink); font-size: 14.5px; font-weight: 600; min-height: 46px;
  transition: background .18s var(--ease), box-shadow .18s var(--ease); }
.cf-ab button:hover { background: var(--cfline); }
.cf-ab button.quiet { color: var(--cfink3); background: none; box-shadow: inset 0 0 0 1px var(--cfline); }
.cf-ab button.on { background: var(--cfteal); color: #08131B; }
/* ---- crisis ------------------------------------------------------------- */
.cf-crisis { display: flex; flex-direction: column; gap: 9px; }
.cf-crisis-lead { font-size: 15.5px; line-height: 1.6; color: var(--cfink2); margin-bottom: 6px; }
.cf-num { display: flex; align-items: center; gap: 16px; padding: 15px 18px; border-radius: 15px;
  background: var(--cfraise); border: 1px solid var(--cfline); color: var(--cfink); min-height: 62px;
  transition: background .18s var(--ease), transform .18s var(--spring); }
.cf-num:hover { background: var(--cfraise2); transform: translateY(-1px); }
.cf-num .n { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; min-width: 62px; }
.cf-num .t { flex: 1; min-width: 0; }
.cf-num .t b { display: block; font-size: 14.5px; font-weight: 650; }
.cf-num .t span { display: block; font-size: 12.5px; color: var(--cfink3); margin-top: 2px; line-height: 1.4; }
.cf-num .go { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid;
  place-items: center; background: var(--cfraise2); color: var(--cfink2); }
/* Red is 999 and only 999. */
.cf-num.is999 { background: rgba(229, 86, 75, .13); border-color: rgba(229, 86, 75, .4); }
.cf-num.is999 .n { color: #FF9C93; }
.cf-num.is999 .go { background: var(--cfred); color: #fff; }
.cf-oo { display: block; margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--cfink3); }
/* the sheet on the hub borrows the same crisis markup, so it needs the same
   rules outside .cf. Scoped to the sheet body so the hub's tokens win. */
.sheet-body .cf-crisis { --cfink: var(--ink); --cfink2: var(--ink-2); --cfink3: var(--ink-3);
  --cfline: var(--hair); --cfline2: var(--hair-2); --cfraise: var(--raise); --cfraise2: var(--raise-2);
  --cfred: var(--system-error); }
.cf-flagged { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 16px 18px;
  border-radius: 15px; background: rgba(228, 200, 154, .1); border: 1px solid rgba(228, 200, 154, .3);
  font-size: 14px; line-height: 1.55; color: var(--cfink2); }
.cf-flagged svg { flex: none; margin-top: 1px; color: var(--cfsand); }
.cf-flagged b { color: var(--cfink); }
.cf-note { padding: 20px; border-radius: 17px; background: var(--cfraise);
  border: 1px solid var(--cfline); margin-bottom: 13px; }
.cf-note b { display: block; font-family: var(--display); font-size: 18px; font-weight: 650;
  letter-spacing: -.02em; margin-bottom: 8px; }
.cf-note p { font-size: 15px; line-height: 1.6; color: var(--cfink2); }
.cf-then { display: block; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--cfline);
  font-size: 14px; color: var(--cfink); }
/* ---- pathway select ------------------------------------------------------ */
.cf-paths { display: flex; flex-direction: column; gap: 10px; }
.cf-path { display: flex; align-items: center; gap: 15px; width: 100%; text-align: left;
  padding: 17px 19px; border-radius: 17px; background: var(--cfraise);
  border: 1px solid var(--cfline); color: var(--cfink); min-height: 74px;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .2s var(--spring); }
.cf-path:hover { background: var(--cfraise2); border-color: var(--cfline2); transform: translateY(-2px); }
.cf-path.first { border-color: rgba(79, 209, 199, .45); background: rgba(79, 209, 199, .1); }
.cf-path .ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 14px; background: var(--cfraise2); color: var(--cfteal); }
.cf-path.first .ic { background: var(--cfteal); color: #08131B; }
.cf-path .t { flex: 1; min-width: 0; }
.cf-path .t b { display: block; font-size: 16.5px; font-weight: 650; }
.cf-path .t span { display: block; font-size: 13.2px; color: var(--cfink3); margin-top: 3px;
  line-height: 1.45; }
.cf-path .m { flex: none; font-size: 12.5px; font-weight: 700; color: var(--cfink3);
  font-variant-numeric: tabular-nums; }
/* Connect is the human one, so it is the one thing that wears the warm accent. */
.cf-path[data-p="connect"] .ic { color: var(--cfsand); }
.cf-path[data-p="connect"].first .ic { background: var(--cfsand); color: #241B0C; }
.cf-path[data-p="connect"].first { border-color: rgba(228, 200, 154, .45); background: rgba(228, 200, 154, .1); }
.cf-why-btn { display: block; width: 100%; margin-top: 18px; padding: 13px; text-align: center;
  font-size: 13.5px; font-weight: 600; color: var(--cfink3); border-radius: 12px;
  transition: background .18s var(--ease), color .18s var(--ease); }
.cf-why-btn:hover { background: var(--cfraise); color: var(--cfink); }
.cf-why-panel { margin-top: 10px; padding: 18px 20px; border-radius: 15px; background: var(--cfraise);
  border: 1px solid var(--cfline); font-size: 14px; line-height: 1.6; color: var(--cfink2); }
.cf-why-panel ol { margin: 12px 0 0 18px; display: flex; flex-direction: column; gap: 7px; }
.cf-why-mine { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--cfline);
  color: var(--cfink); }
/* ---- the breathing orb ---------------------------------------------------- */
/* --orb is the single source of the circle's size: .cf-orb reads it, and so
   does the arithmetic that puts the voice control back on the arc below. Two
   numbers that have to agree and are written in two places do not stay
   agreeing. */
.cf-orb-wrap { --orb: 150px;
  position: relative; height: 300px; display: grid; place-items: center; margin: 10px 0 6px; }
/* THE VOICE CONTROL, ON THE CIRCLE, ANCHORED TO THE WRAP. It cannot live
   inside .cf-orb: that element is animated with transform, so the control
   would breathe in and out with it. The wrap shares the circle's centre and
   never moves, so the offsets walk back from that centre instead. Half the
   orb gets to its edge; 7% of the orb comes back inside, which is the same
   inset the /help-now circle uses and lands the control's centre on the 45
   degree line. Both offsets are explicit so the wrap's place-items:center
   cannot decide this for us. */
.cf-orb-wrap > .vx-orb {
  top: calc(50% - var(--orb) * 0.43);
  right: calc(50% - var(--orb) * 0.43);
}
.cf-orb { width: var(--orb); height: var(--orb); border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, rgba(79, 209, 199, .5), rgba(79, 209, 199, .12) 62%, rgba(79, 209, 199, 0) 74%);
  box-shadow: 0 0 70px rgba(79, 209, 199, .22);
  display: grid; place-items: center; will-change: transform; }
.cf-orb-in { width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, rgba(79, 209, 199, .62), rgba(28, 74, 78, .5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
/* Reduced motion gets a still circle and the countdown, never a blank frame. */
.cf-orb-wrap.still .cf-orb { transform: none !important; }
.cf-orb-read { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none; }
.cf-orb-read b { font-family: var(--display); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.cf-orb-read span { font-family: var(--display); font-size: 40px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--cfink2); }
.cf-cycles { text-align: center; font-size: 13px; color: var(--cfink3); letter-spacing: .05em;
  text-transform: uppercase; font-weight: 700; }
/* ---- the urge wave --------------------------------------------------------- */
.cf-wave { position: relative; height: 210px; margin: 6px 0 4px;
  border-radius: 18px; overflow: hidden; background: var(--cfraise);
  border: 1px solid var(--cfline); }
/* THE VOICE CONTROL, IN THE CHART'S TOP RIGHT. The wave has no circle, so the
   exercise's own box is the anchor. That corner is empty for the whole ten
   minutes by construction rather than by luck: the curve is at y=190 of 200 at
   the right hand edge, it only reaches the top at 35 per cent across, and
   #cfHere rides the curve, so neither the line nor the marker is ever there.
   px, not the percentages the circular hosts use, which mean nothing on a box
   that is 210px tall and several hundred wide. */
.cf-wave > .vx-orb { top: 12px; right: 12px }
.cf-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The label sits ABOVE the dot and the group is anchored by the dot, because
   with the label underneath and the group centred on the point, the label was
   clipped straight off the bottom of the box for the first four minutes of a
   ten minute exercise. The travel is clamped in the JS for the same reason at
   the left edge: at nought per cent, half the marker was outside the
   container's overflow. Both were visible in a screenshot and invisible
   everywhere else. */
.cf-here { position: absolute; transform: translate(-50%, calc(-100% + 7px));
  display: flex; flex-direction: column-reverse; align-items: center; gap: 6px;
  transition: left .3s linear, top .3s linear; pointer-events: none; }
.cf-here .d { width: 14px; height: 14px; border-radius: 50%; background: var(--cfteal);
  box-shadow: 0 0 0 5px rgba(79, 209, 199, .22); }
.cf-here .l { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cfink2); white-space: nowrap; }
.cf-wave-read { display: flex; align-items: baseline; gap: 9px; justify-content: center; margin-top: 14px; }
.cf-wave-read b { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.cf-wave-read span { font-size: 13px; color: var(--cfink3); }
.cf-wave-say { text-align: center; font-size: 15.5px; line-height: 1.55; color: var(--cfink2);
  margin-top: 12px; min-height: 2.4em; }
/* ---- ten minutes ----------------------------------------------------------- */
/* THE COUNTDOWN, and the voice control's host on this tool. The horizontal
   padding is 52px rather than 20px and that is the control's column being
   reserved: 34px of control plus a 12px inset plus a hair. It is reserved on
   BOTH sides on purpose, because the text is centred and taking the room off
   one side only would centre it on what was left rather than on the card.
   Measured at 390px, where "That is the ten minutes" is the longest string
   this ever shows and would otherwise have run under the control. */
.cf-hold { position: relative;
  text-align: center; padding: 34px 52px; border-radius: 20px; background: var(--cfraise);
  border: 1px solid var(--cfline); }
.cf-hold > .vx-orb { top: 12px; right: 12px }
.cf-hold b { font-family: var(--display); font-size: 30px; font-weight: 650; letter-spacing: -.03em; }
.cf-holdcard { margin-top: 16px; padding: 24px 22px; border-radius: 18px;
  background: var(--cfraise); border: 1px solid var(--cfline); font-size: 17px; line-height: 1.6;
  color: var(--cfink2); text-align: center; min-height: 108px; display: grid; place-items: center; }
/* ---- connect ---------------------------------------------------------------- */
.cf-first { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 18px;
  background: rgba(228, 200, 154, .12); border: 1px solid rgba(228, 200, 154, .36);
  color: var(--cfink); min-height: 82px;
  transition: background .2s var(--ease), transform .2s var(--spring); }
.cf-first:hover { background: rgba(228, 200, 154, .2); transform: translateY(-2px); }
.cf-first .ic { width: 50px; height: 50px; flex: none; border-radius: 16px; display: grid;
  place-items: center; background: var(--cfsand); color: #241B0C; }
.cf-first .t b { display: block; font-family: var(--display); font-size: 19px; font-weight: 700;
  letter-spacing: -.02em; }
.cf-first .t span { display: block; font-size: 13.5px; color: var(--cfink2); margin-top: 3px; }
.cf-rest { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cf-rest-r { display: flex; align-items: center; gap: 12px; padding: 14px 17px; border-radius: 14px;
  background: var(--cfraise); border: 1px solid var(--cfline); color: var(--cfink); min-height: 54px;
  transition: background .18s var(--ease); }
.cf-rest-r:hover { background: var(--cfraise2); }
.cf-rest-r b { font-size: 15px; font-weight: 650; }
.cf-rest-r span { flex: 1; font-size: 13px; color: var(--cfink3); }
.cf-noans { margin-top: 14px; padding: 18px 20px; border-radius: 17px; background: var(--cfraise);
  border: 1px solid var(--cfline); }
.cf-noans p { font-size: 15px; line-height: 1.6; color: var(--cfink2); margin-bottom: 14px; }
/* ---- the reframe -------------------------------------------------------------- */
.cf-thoughts { display: flex; flex-direction: column; gap: 9px; }
.cf-th { padding: 15px 19px; border-radius: 14px; background: var(--cfraise);
  border: 1px solid var(--cfline); color: var(--cfink2); font-size: 16px; text-align: left;
  min-height: 54px; transition: background .18s var(--ease), color .18s var(--ease); }
.cf-th:hover { background: var(--cfraise2); color: var(--cfink); }
.cf-th.on { border-color: var(--cfteal); background: rgba(79, 209, 199, .13); color: var(--cfink); }
.cf-answer { margin-top: 16px; padding: 20px; border-radius: 18px; background: var(--cfraise);
  border: 1px solid var(--cfline2); }
.cf-answer .k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cfink3); margin-bottom: 6px; }
.cf-answer .t { font-size: 17px; line-height: 1.5; color: var(--cfink2); margin-bottom: 18px; }
.cf-answer .r { font-family: var(--display); font-size: 20px; font-weight: 650; letter-spacing: -.02em;
  line-height: 1.35; margin-bottom: 18px; }
.cf-answer .q { font-size: 15px; line-height: 1.55; color: var(--cfink2); padding-top: 15px;
  border-top: 1px solid var(--cfline); }
/* ---- harm reduction inside focus mode -------------------------------------------- */
.cf-harm { padding: 20px; border-radius: 18px; background: var(--cfraise); border: 1px solid var(--cfline); }
.cf-harm .cx-harm-h { color: var(--cfink); }
.cf-harm .cx-harm-l { color: var(--cfink2); }
.cf-harm .nx-facts li { color: var(--cfink2); }
.cf-harm .nx-facts .t { background: rgba(79, 209, 199, .18); color: var(--cfteal); }
/* ---- the checkpoint and the outcomes ----------------------------------------------- */
.cf-outs { display: flex; flex-direction: column; gap: 10px; }
/* Every outcome is the same size and the same colour. "I used" is a peer
   option, not a confession, and nothing here is styled as a failure. */
.cf-out { display: block; width: 100%; text-align: left; padding: 18px 20px; border-radius: 16px;
  background: var(--cfraise); border: 1px solid var(--cfline); color: var(--cfink); min-height: 72px;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .2s var(--spring); }
.cf-out:hover { background: var(--cfraise2); border-color: var(--cfline2); transform: translateY(-2px); }
.cf-out b { display: block; font-family: var(--display); font-size: 18px; font-weight: 650; }
.cf-out span { display: block; font-size: 13.5px; color: var(--cfink3); margin-top: 3px; }
.cf-wd { display: flex; flex-direction: column; gap: 12px; }
.cf-wd-add { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 17px 19px; border-radius: 16px; background: var(--cfraise);
  border: 1px solid var(--cfline); color: var(--cfink); min-height: 70px;
  transition: background .18s var(--ease), border-color .18s var(--ease); }
.cf-wd-add:hover { background: var(--cfraise2); }
.cf-wd-add.done { border-color: var(--cfteal); background: rgba(79, 209, 199, .12); }
.cf-wd-add > svg { flex: none; color: var(--cfteal); }
.cf-wd-add b { display: block; font-size: 16px; font-weight: 650; }
.cf-wd-add span span { display: block; font-size: 13px; color: var(--cfink3); margin-top: 2px; }
.cf-check, .cf-share { padding: 19px 20px; border-radius: 17px; background: var(--cfraise);
  border: 1px solid var(--cfline); }
.cf-check b, .cf-share b { display: block; font-family: var(--display); font-size: 17px;
  font-weight: 650; margin-bottom: 6px; }
.cf-check p, .cf-share p { font-size: 14px; line-height: 1.55; color: var(--cfink2); }
.cf-share { margin-top: 20px; }
/* Content must never depend on an animation to be seen. */
@keyframes cxRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cx-rise { animation: cxRise .5s var(--spring) both; }
@media (prefers-reduced-motion: reduce) { .cx-rise { animation: none; } }
/* NOTE FOR THE NEXT PERSON, INCLUDING ME. The plan and window components sit
   ABOVE the conversation block on purpose. They were appended below it once,
   and a later edit that rewrote the conversation by truncating this file at
   that marker took them with it. Concepts B, C and E lost their entire layout
   and a full-page screenshot is what showed it: the page still rendered, in
   the way a page with no stylesheet renders. Anything shared goes above. */

/* =========================================================================
   THE PLAN AND THE WINDOWS
   Lifted out of concepts B and C when the composite needed both. One
   definition, three pages. They were moved rather than copied, because the
   same rule living in two files is the defect this project keeps re-learning:
   it works, and then a targeted edit lands on the copy nobody is looking at.
   B keeps the `b-` prefix and C keeps `c-` so a pasted review link still
   renders what it rendered on the day it was reviewed.
   ====================================================================== */

/* THE PLAN ITSELF. A two column grid on a desktop, because the browser
   format comes first and a single column of eight cards is a scroll. */
/* 22px, not 14. At 14 the cards read as one striped block and the eye has to
   find the borders to know where one subject ends; the plan is a set of
   separate answers and should look like it. Rows get a little more than
   columns because vertical crowding is what was actually being felt. */
.b-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px; row-gap: 26px; }
@media (max-width: 900px) { .b-grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } }
.b-card { padding: 24px; border-radius: var(--r-xl); border: 1px solid var(--hair);
  background: var(--raise); display: flex; flex-direction: column; }
.b-card.wide { grid-column: 1 / -1; }
.b-card-h { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.b-card-h .ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid;
  place-items: center; background: var(--raise-2); color: var(--secondary-soft);
  box-shadow: inset 0 0 0 1px var(--hair); }
html[data-theme="light"] .b-card-h .ic { color: var(--secondary); }
.b-card-h .t { flex: 1; min-width: 0; }
.b-card-h h3 { font-family: var(--display); font-size: 19px; font-weight: 650;
  letter-spacing: -.022em; line-height: 1.2; }
.b-card-h p { font-size: 13.2px; line-height: 1.5; color: var(--ink-3); margin-top: 4px; }
.b-card-b { flex: 1; }
.b-edit { flex: none; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--hair);
  background: var(--raise-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease); }
.b-edit:hover { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.b-list { display: flex; flex-direction: column; gap: 9px; }
.b-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5;
  color: var(--ink); list-style: none; }
.b-list .k { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 8px;
  background: var(--secondary); }
.b-quotes { display: flex; flex-direction: column; gap: 13px; }
.b-quote { padding: 16px 18px; border-radius: var(--r-md); background: var(--raise-2);
  border-left: 3px solid var(--secondary); font-family: var(--display); font-size: 16.5px;
  font-weight: 500; line-height: 1.45; letter-spacing: -.015em; }
/* what has worked. A count with the count spelled out beside it, never a bar,
   never a percentage, and never a ranking badge. */
.b-worked { display: flex; flex-direction: column; gap: 10px; }
.b-worked div { display: flex; align-items: baseline; gap: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--hair); }
.b-worked div:last-child { border-bottom: 0; padding-bottom: 0; }
.b-worked b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.b-worked span { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  text-align: right; }
.b-worked em { font-style: normal; color: var(--teal-soft); font-weight: 700; }
html[data-theme="light"] .b-worked em { color: #0B7A6F; }
/* AN EMPTY CONTAINER SHOULD ASK FOR THE THING, NOT EXPLAIN ITS ABSENCE.
   The old empty state was a paragraph about what happens when you have not
   done it, which is a small telling-off. This fills the container with the
   action instead: one line, one button, and the container looks unfinished on
   purpose so it reads as a slot waiting to be filled. */
.b-fill { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px; padding: 26px 20px; min-height: 148px;
  border-radius: var(--r-lg); border: 1px dashed var(--hair-2);
  background: rgba(181, 37, 85, .05); }
html[data-theme="light"] .b-fill { background: rgba(181, 37, 85, .045); }
.b-fill .ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  color: var(--secondary-soft); background: rgba(181, 37, 85, .13); }
html[data-theme="light"] .b-fill .ic { color: var(--secondary); }
.b-fill b { font-family: var(--display); font-size: 16.5px; font-weight: 650; color: var(--ink); }
.b-fill span { font-size: 13.4px; line-height: 1.55; color: var(--ink-3); max-width: 34ch; }
.b-people { display: flex; flex-direction: column; gap: 9px; }
/* remove, on the card itself. It was only inside the editor sheet, which is
   two taps away from the thing you are looking at when you decide. */
.b-person { position: relative; }
.b-person .rmv { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid transparent; background: transparent; color: var(--ink-3);
  opacity: 0; transition: opacity .2s var(--ease), color .2s var(--ease),
    background .2s var(--ease), border-color .2s var(--ease); }
.b-person:hover .rmv, .b-person .rmv:focus-visible { opacity: 1; }
.b-person .rmv:hover { color: var(--system-error); border-color: var(--hair-2);
  background: var(--raise-2); }
/* NEVER HIDE THE ONLY WAY TO DELETE BEHIND A HOVER on a touch screen, where
   there is no hover to have. */
@media (hover: none) { .b-person .rmv { opacity: 1; } }
.b-person.has-rmv { padding-right: 46px; }
.b-person { display: flex; align-items: center; gap: 14px; padding: 13px 15px;
  border-radius: var(--r-md); background: var(--raise-2); border: 1px solid var(--hair);
  color: var(--ink); transition: background .2s var(--ease), transform .18s var(--spring); }
.b-person:hover { background: var(--hair); transform: translateX(2px); }
.b-person .av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid;
  place-items: center; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7B4B9E, #B52555); }
.b-person .t { flex: 1; min-width: 0; }
.b-person .t b { display: block; font-size: 15px; font-weight: 650; }
.b-person .t span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.b-person .first { padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; background: rgba(181, 37, 85, .2);
  color: var(--secondary-soft); flex: none; }
html[data-theme="light"] .b-person .first { background: #F8E4EC; color: var(--secondary); }
.b-note { padding: 18px 20px; border-radius: var(--r-lg); background: rgba(0, 164, 153, .1);
  border: 1px solid rgba(0, 164, 153, .3); }
html[data-theme="light"] .b-note { background: #EFF9F7; border-color: #BFE5DF; }
.b-note .who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.b-note .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal); color: #fff; font-size: 11.5px; font-weight: 700; }
.b-note .who b { font-size: 14px; font-weight: 650; }
.b-note p { font-size: 15px; line-height: 1.6; color: var(--ink); }
/* THE PINNED DOOR. Above the tab bar, never over it, and it gets out of the
   way of anything that opens on top of the page. */

/* THE WINDOWS. One per card, biggest first, and every one of them names the
   count it is made of on the face of the card rather than behind a tap. */
.c-wins { display: flex; flex-direction: column; gap: 13px; }
.c-win { display: grid; grid-template-columns: 148px minmax(0, 1fr) auto; gap: 24px;
  align-items: center; padding: 22px 24px; border-radius: var(--r-xl);
  border: 1px solid var(--hair); background: var(--raise);
  transition: border-color .2s var(--ease), background .2s var(--ease); }
.c-win:hover { border-color: var(--hair-2); background: var(--raise-2); }
@media (max-width: 860px) { .c-win { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.c-when { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.026em;
  line-height: 1.2; }
.c-when span { display: block; font-family: var(--body); font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--teal-soft); margin-bottom: 7px; }
html[data-theme="light"] .c-when span { color: #0B7A6F; }
.c-says { font-size: 15px; line-height: 1.55; color: var(--ink); }
.c-have { display: block; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin-top: 7px; }
.c-do { flex: none; }
@media (max-width: 860px) { .c-do .btn { width: 100%; } }
.c-win.planned { border-color: rgba(0, 164, 153, .45); background: rgba(0, 164, 153, .08); }
html[data-theme="light"] .c-win.planned { background: #EFF9F7; border-color: #BFE5DF; }
.c-planned { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 999px; background: rgba(0, 164, 153, .2); color: var(--teal-soft);
  font-size: 12.5px; font-weight: 650; white-space: nowrap; }
html[data-theme="light"] .c-planned { background: #DFF3F0; color: #0B7A6F; }
/* THE SHAPE. Single hue, no red and no green, and the caption sits next to
   the figure so a number can never be read on its own as a verdict. */
.c-shape { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 860px) { .c-shape { grid-template-columns: minmax(0, 1fr); } }
.c-panel { padding: 24px; border-radius: var(--r-xl); border: 1px solid var(--hair);
  background: var(--raise); }
.c-panel h3 { font-family: var(--display); font-size: 17.5px; font-weight: 650;
  letter-spacing: -.02em; margin-bottom: 5px; }
.c-panel p { font-size: 13.2px; line-height: 1.5; color: var(--ink-3); margin-bottom: 20px; }
.c-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
  align-items: end; height: 150px; }
.c-day { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 100%; }
.c-day .bar { border-radius: 7px 7px 3px 3px; background: rgba(0, 164, 153, .32);
  min-height: 4px; transition: height .7s var(--spring); }
.c-day .bar.top { background: var(--teal); }
.c-day .l { text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.c-day .v { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
.c-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.c-hour { height: 46px; border-radius: 4px; background: var(--raise-2);
  box-shadow: inset 0 0 0 1px var(--hair); }
.c-hlab { display: flex; justify-content: space-between; margin-top: 9px; font-size: 11px;
  color: var(--ink-3); }
.c-key { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 12px;
  color: var(--ink-3); }
.c-key i { width: 34px; height: 9px; border-radius: 5px;
  background: linear-gradient(90deg, rgba(0, 164, 153, .14), var(--teal)); }
.c-obs { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.c-ob { padding: 17px 0; border-top: 1px solid var(--hair); }
.c-ob b { display: block; font-family: var(--display); font-size: 17px; font-weight: 650;
  letter-spacing: -.02em; line-height: 1.25; margin-bottom: 6px; }
.c-ob span { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
/* THE VIEW SWITCH. It lived only inside cx-c-next.html, so every other page
   that printed the same markup got unstyled buttons floating next to a
   heading. A component used by more than one page belongs in the shared sheet:
   that is the whole argument for having one. */
.c-switch { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border-radius: 999px;
  background: var(--raise); border: 1px solid var(--hair); }
.c-switch[hidden] { display: none; }
.c-switch button { padding: 8px 15px; border-radius: 999px; font-size: 12.8px; font-weight: 600;
  color: var(--ink-3); background: transparent; border: 0; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease); }
.c-switch button[aria-pressed="true"] { background: var(--secondary); color: #fff; }
.c-empty { padding: 40px 34px; border: 1px dashed var(--hair); border-radius: var(--r-xl);
  text-align: center; }
.c-empty.wide { grid-column: 1 / -1; }
/* [hidden] loses to a display rule at equal specificity, and these two are
   both switched off from script, so they get the guard rather than a hope. */
.c-shape[hidden], .c-panel[hidden] { display: none; }
.c-empty b { display: block; font-family: var(--display); font-size: 22px; font-weight: 650;
  letter-spacing: -.026em; margin-bottom: 10px; }
.c-empty p { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 460px;
  margin: 0 auto 22px; }
/* the planning sheet's own bits */
.c-plan-opt { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 15px 17px; border-radius: var(--r-md); background: var(--raise-2);
  border: 1px solid var(--hair); color: var(--ink); margin-bottom: 8px;
  transition: border-color .2s var(--ease), background .2s var(--ease); }
.c-plan-opt:hover { background: var(--hair); }
.c-plan-opt[aria-pressed="true"] { border-color: var(--teal); background: rgba(0, 164, 153, .14); }
.c-plan-opt .tick { width: 24px; height: 24px; flex: none; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--hair-2); display: grid; place-items: center; color: transparent; }
.c-plan-opt[aria-pressed="true"] .tick { background: var(--teal); color: #fff; box-shadow: none; }
.c-plan-opt b { display: block; font-size: 15px; font-weight: 600; }
.c-plan-opt span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
/* =========================================================================
   THE CONVERSATIONAL COACH
   Inherits the .cf palette, because it is the same room. Two modes: a
   transcript with the machinery beside it, and a voice conversation that
   shows no words at all.
   ====================================================================== */
.ct .ct-in { max-width: 1180px; margin: 0 auto; min-height: 100%; display: flex;
  flex-direction: column; padding: 18px 22px calc(22px + env(safe-area-inset-bottom)); }
.ct-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  margin-bottom: 18px; }
.ct-title { text-align: center; }
.ct-title b { display: block; font-family: var(--display); font-size: 16px; font-weight: 650;
  letter-spacing: -.02em; color: var(--cfink); }
.ct-state { display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--cfink3); margin-top: 3px; }
.ct-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cfteal);
  animation: ctPulse 1.6s var(--ease) infinite; }
@keyframes ctPulse { 0%,100% { opacity: .35; transform: scale(.8) } 50% { opacity: 1; transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { .ct-state .dot { animation: none; opacity: .9 } }
.ct[data-state="listening"] .ct-state { color: var(--cfteal); }
.ct[data-state="speaking"] .ct-state .dot { background: var(--cfsand); }
.ct[data-state="speaking"] .ct-state { color: var(--cfsand); }
.ct-cols { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 20px;
  align-items: stretch; min-height: 0; }
@media (max-width: 1000px) { .ct-cols { grid-template-columns: minmax(0, 1fr); } }
.ct-main { display: flex; flex-direction: column; min-height: 0; }
/* ---- the transcript ----------------------------------------------------- */
.ct-feed { flex: 1; overflow-y: auto; padding: 4px 4px 20px; display: flex; flex-direction: column;
  gap: 15px; min-height: 300px; }
.ct-msg { max-width: 80%; animation: ctIn .32s var(--spring) both; }
@keyframes ctIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .ct-msg { animation: none } }
.ct-msg.me { align-self: flex-end; }
.ct-msg.me p { padding: 14px 19px; border-radius: 20px 20px 6px 20px;
  background: linear-gradient(160deg, #63dcd2, var(--cfteal));
  color: #06222a; font-size: 16px; line-height: 1.5; font-weight: 550;
  box-shadow: 0 8px 22px rgba(79, 209, 199, .18); }
.ct-msg.coach { align-self: flex-start; padding: 18px 21px; border-radius: 20px 20px 20px 6px;
  background: linear-gradient(180deg, rgba(238,242,248,.075), rgba(238,242,248,.045));
  border: 1px solid var(--cfline); box-shadow: 0 10px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05); }
.ct-msg.coach p { font-size: 16.5px; line-height: 1.6; color: var(--cfink); }
/* Red only ever means 999. An urgent turn is bordered, not filled, because a
   red screen at the moment somebody discloses something tells them they are in
   trouble for saying it. */
.ct-msg.coach.urgent { border-color: rgba(229, 86, 75, .45); background: rgba(229, 86, 75, .08); }
.ct-msg.coach.safeg { border-color: rgba(228, 200, 154, .45); background: rgba(228, 200, 154, .08); }
.ct-msg.coach.talking { border-color: rgba(228, 200, 154, .5); }
.ct-who { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 11px; }
.ct-who .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(150deg, #63dcd2, #2f9d95); color: #06222a; flex: none;
  box-shadow: 0 3px 10px rgba(79,209,199,.3); }
.ct-who b { font-size: 13.5px; font-weight: 650; color: var(--cfink); }
.ct-src { padding: 3px 10px; border-radius: 999px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; background: var(--cfraise2);
  color: var(--cfink3); }
/* the one place the Forward gradient is allowed: it marks genuine AI, nothing else */
.ct-src.ai { background: linear-gradient(96deg, #B52555, #0077C8, #00A499); color: #fff; }
.ct-emo { padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 650;
  background: rgba(79, 209, 199, .14); color: var(--cfteal); }
/* the little equaliser only runs while this bubble is the one being spoken */
.ct-eq { display: none; gap: 3px; align-items: flex-end; height: 15px; margin-left: auto; }
.ct-msg.talking .ct-eq { display: inline-flex; }
.ct-eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--cfsand);
  transform-origin: bottom; animation: ctEq .9s var(--ease) infinite; }
.ct-eq i:nth-child(2) { animation-delay: .15s } .ct-eq i:nth-child(3) { animation-delay: .3s }
.ct-eq i:nth-child(4) { animation-delay: .45s }
@keyframes ctEq { 0%,100% { transform: scaleY(.25) } 50% { transform: scaleY(1) } }
@media (prefers-reduced-motion: reduce) { .ct-eq i { animation: none; transform: scaleY(.6) } }
.ct-after { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--cfline);
  font-size: 14px; color: var(--cfink2); }
.ct-flag { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; padding: 6px 13px;
  border-radius: 999px; font-size: 11.5px; font-weight: 650; background: var(--cfraise2);
  color: var(--cfink2); }
.ct-flag.red { background: rgba(228, 200, 154, .16); color: var(--cfsand); }
.ct-nums { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; }
.ct-num { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 14px;
  background: var(--cfraise2); color: var(--cfink); min-height: 58px;
  transition: background .18s var(--ease), transform .18s var(--spring); }
.ct-num:hover { background: var(--cfline); transform: translateX(2px); }
.ct-num b { font-family: var(--display); font-size: 17px; font-weight: 700; min-width: 58px;
  font-variant-numeric: tabular-nums; }
.ct-num span { flex: 1; font-size: 12.8px; line-height: 1.45; color: var(--cfink2); }
.ct-num.is999 { background: rgba(229, 86, 75, .16); }
.ct-num.is999 b { color: #FF9C93; }
.ct-acts { margin-top: 13px; }
.ct-play { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--cfline); color: var(--cfink2); font-size: 12.5px; font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease); }
.ct-play:hover { background: var(--cfraise2); color: var(--cfink); }
.ct-play.on { border-color: var(--cfsand); color: var(--cfsand); }
.ct-wait { display: flex; gap: 6px; padding: 20px 22px; }
.ct-wait span { width: 8px; height: 8px; border-radius: 50%; background: var(--cfink3);
  animation: ctBlink 1.3s var(--ease) infinite; }
.ct-wait span:nth-child(2) { animation-delay: .18s } .ct-wait span:nth-child(3) { animation-delay: .36s }
@keyframes ctBlink { 0%,60%,100% { opacity: .35 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ct-wait span { animation: none; opacity: .6 } }
/* ---- the composer ------------------------------------------------------- */
.ct-composer { flex: none; padding-top: 15px; border-top: 1px solid var(--cfline); }
.ct-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }
.ct-chip { padding: 10px 17px; border-radius: 999px; background: var(--cfraise);
  border: 1px solid var(--cfline); color: var(--cfink2); font-size: 13.5px; font-weight: 600;
  min-height: 44px; transition: background .18s var(--ease), color .18s var(--ease),
    transform .18s var(--spring); }
.ct-chip:hover { background: var(--cfraise2); color: var(--cfink); transform: translateY(-2px); }
/* ONE DOCK that changes shape with the state, rather than four controls that
   are mostly disabled. The way out of every state is where the way in was. */
.ct-dock { position: relative; display: flex; gap: 10px; align-items: flex-end; padding: 9px;
  border-radius: 24px; background: rgba(238,242,248,.05); border: 1px solid var(--cfline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(0,0,0,.28);
  transition: border-color .25s var(--ease), background .25s var(--ease); }
.ct-dock:focus-within { border-color: rgba(79,209,199,.5); }
.ct-dock textarea { flex: 1; min-width: 0; resize: none; padding: 14px 10px 14px 14px;
  background: none; border: 0; color: var(--cfink); font: inherit; font-size: 16.5px;
  line-height: 1.45; min-height: 52px; }
.ct-dock textarea::placeholder { color: var(--cfink3); }
.ct-dock textarea:focus { outline: none; }
.ct-mic, .ct-send { width: 52px; height: 52px; flex: none; border-radius: 17px; display: grid;
  place-items: center; position: relative;
  transition: filter .18s var(--ease), transform .18s var(--bounce), background .2s var(--ease); }
.ct-mic { background: var(--cfraise2); color: var(--cfink); }
.ct-mic:hover { background: var(--cfline); }
.ct-mic:active, .ct-send:active { transform: scale(.94); }
.ct-mic.stop { background: var(--cfteal); color: #08131B; }
.ct-mic .halo { position: absolute; inset: -4px; border-radius: 21px; pointer-events: none; }
.ct-mic.stop .halo { box-shadow: 0 0 0 0 rgba(79,209,199,.5); animation: ctHalo 1.8s var(--ease) infinite; }
@keyframes ctHalo { 70% { box-shadow: 0 0 0 14px rgba(79,209,199,0) } 100% { box-shadow: 0 0 0 0 rgba(79,209,199,0) } }
@media (prefers-reduced-motion: reduce) { .ct-mic.stop .halo { animation: none } }
.ct-send { background: var(--cfteal); color: #08131B; }
.ct-send:hover { filter: brightness(1.08); }
.ct-send[disabled] { opacity: .35; pointer-events: none; }
.ct-dock.is-listening { align-items: center; padding: 9px 9px 9px 18px; border-color: rgba(79,209,199,.45); }
.ct-wave { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; height: 40px; }
.ct-wave i { flex: 1; min-width: 0; height: 100%; border-radius: 3px; background: var(--cfteal);
  transform: scaleY(.08); transform-origin: center; opacity: .85;
  transition: transform .07s linear; }
.ct-rt { flex: none; font-family: var(--display); font-size: 15px; font-weight: 650;
  color: var(--cfink2); margin-right: 4px; }
.ct-dock.is-hearing { padding: 20px; justify-content: center; }
.ct-hearing { display: inline-flex; align-items: center; gap: 11px; color: var(--cfink2);
  font-size: 15px; position: relative; }
.ct-hearing b { font-weight: 600; }
.ct-hearing .sh { width: 46px; height: 3px; border-radius: 2px; overflow: hidden;
  background: var(--cfraise2); position: relative; }
.ct-hearing .sh::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: 2px;
  background: var(--cfteal); animation: ctSh 1.1s var(--ease) infinite; }
@keyframes ctSh { from { transform: translateX(-100%) } to { transform: translateX(250%) } }
@media (prefers-reduced-motion: reduce) { .ct-hearing .sh::after { animation: none } }
/* [hidden] is an attribute selector at (0,1,0) and .ct-countdown is a class at
   (0,1,0), so the later rule wins and `hidden` did nothing: an empty pill sat
   above the composer on every screen. A component that sets its own display
   has to say what hidden means for it. Same reason .ct-urgent guards itself. */
.ct-countdown[hidden] { display: none; }
.ct-countdown { position: absolute; right: 70px; bottom: calc(100% + 10px); display: flex;
  align-items: center; gap: 12px; padding: 9px 9px 9px 16px; border-radius: 999px;
  background: var(--cfbg2); border: 1px solid var(--cfline2); font-size: 13px;
  color: var(--cfink2); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.ct-countdown button { padding: 7px 13px; border-radius: 999px; background: var(--cfteal);
  color: #08131B; font-size: 12.5px; font-weight: 650; }
.ct-switches { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.ct-sw { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--cfline); color: var(--cfink3); font-size: 12.5px; font-weight: 600;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.ct-sw .d { width: 9px; height: 9px; border-radius: 50%; background: var(--cfline2);
  transition: background .18s var(--ease); }
.ct-sw[aria-pressed="true"] { color: var(--cfink); border-color: var(--cfteal); }
.ct-sw[aria-pressed="true"] .d { background: var(--cfteal); }
.ct-sw-go { border-color: rgba(79,209,199,.45); color: var(--cfteal); }
.ct-sw-go:hover { background: rgba(79,209,199,.12); }
.ct-sw-quiet { display: none; }
@media (max-width: 1000px) { .ct-sw-quiet { display: inline-flex; } }
.ct-foot { margin-top: 13px; font-size: 12px; line-height: 1.55; color: var(--cfink3); }
.ct-foot-mid { text-align: center; max-width: 620px; margin: 16px auto 0; }
/* ---- the trace ---------------------------------------------------------- */
.ct-trace { border-radius: 22px; background: rgba(8, 13, 24, .5); border: 1px solid var(--cfline);
  overflow-y: auto; max-height: calc(100vh - 130px); }
.ct-trace-in { padding: 24px; }
.ct-trace-h { display: block; font-family: var(--display); font-size: 16px; font-weight: 650;
  letter-spacing: -.02em; color: var(--cfink); margin-bottom: 7px; }
.ct-trace-l { font-size: 12.5px; line-height: 1.55; color: var(--cfink3); margin-bottom: 6px; }
/* a rail down the numbers, so it reads as an order rather than a list */
.ct-steps { position: relative; }
.ct-steps::before { content: ''; position: absolute; left: 13px; top: 26px; bottom: 20px; width: 1px;
  background: var(--cfline); }
.ct-st { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 13px;
  padding: 14px 0; }
.ct-st .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; background: var(--cfbg2); color: var(--cfink3);
  box-shadow: inset 0 0 0 1px var(--cfline); position: relative; z-index: 1; }
.ct-st b { display: block; font-size: 13.5px; font-weight: 650; color: var(--cfink); }
.ct-st .v { display: inline-block; margin: 5px 0 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: rgba(79, 209, 199, .16); color: var(--cfteal); }
.ct-st p { font-size: 12.3px; line-height: 1.5; color: var(--cfink3); }
/* a stage that stopped the flow is the interesting one, so it is marked as a
   stop rather than as an error. Sand, not red: nothing went wrong. */
.ct-st.stop .n { background: var(--cfsand); color: #241B0C; box-shadow: none; }
.ct-st.stop .v { background: rgba(228, 200, 154, .18); color: var(--cfsand); }
@media (max-width: 1000px) {
  .ct-trace { display: none; }
  .ct.trace-open .ct-trace { display: block; max-height: none; margin-top: 16px; }
}
/* =========================================================================
   VOICE MODE
   No transcript, on purpose. Reading a reply while it is read to you is
   neither one thing nor the other, and a wall of text is the thing somebody
   at eight out of ten cannot face. One object, whose movement is driven by
   real audio on both sides.
   ====================================================================== */
.ct-voice { align-items: center; }
.ct-voice .ct-top { width: 100%; }
.ct-stage { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 30px; padding: 20px 0; min-height: 340px; }
.ct-orb { position: relative; width: 190px; height: 190px; display: grid; place-items: center;
  --lvl: 0; transition: transform .09s linear; }
.ct-orb .core { width: 128px; height: 128px; border-radius: 50%; position: relative; overflow: hidden;
  background: radial-gradient(circle at 38% 32%, #7fe6dd, #2f9d95 58%, #1b5f5c);
  box-shadow: 0 0 60px rgba(79, 209, 199, calc(.18 + var(--lvl) * .4)),
    inset 0 2px 0 rgba(255,255,255,.28); }
.ct-orb .sheen { position: absolute; inset: 0;
  background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 46%); }
/* the rings are the level, not a loop: their opacity and scale come from the
   analyser through --lvl */
.ct-orb .r { position: absolute; border-radius: 50%; border: 1px solid rgba(79,209,199,.5);
  opacity: calc(.12 + var(--lvl) * .6); transition: opacity .12s linear, transform .12s linear; }
.ct-orb .r1 { inset: 6px; transform: scale(calc(1 + var(--lvl) * .10)); }
.ct-orb .r2 { inset: -12px; transform: scale(calc(1 + var(--lvl) * .16)); }
.ct-orb .r3 { inset: -32px; transform: scale(calc(1 + var(--lvl) * .22)); border-color: rgba(79,209,199,.28); }
.ct-orb .eq { position: absolute; bottom: -2px; display: flex; align-items: flex-end; gap: 5px;
  height: 26px; }
.ct-orb .eq i { width: 4px; height: 100%; border-radius: 3px; background: rgba(255,255,255,.85);
  transform-origin: bottom; transform: scaleY(.14); transition: transform .07s linear; }
/* speaking is the warm accent, listening is the cool one, so the two states
   are never mistaken for each other even with the sound off */
.ct[data-state="speaking"] .ct-orb .core {
  background: radial-gradient(circle at 38% 32%, #f0d7ae, #c9a468 58%, #7d6335);
  box-shadow: 0 0 64px rgba(228, 200, 154, calc(.2 + var(--lvl) * .4)),
    inset 0 2px 0 rgba(255,255,255,.3); }
.ct[data-state="speaking"] .ct-orb .r { border-color: rgba(228,200,154,.5); }
.ct[data-state="thinking"] .ct-orb .core { animation: ctTurn 3.4s linear infinite; }
@keyframes ctTurn { to { filter: hue-rotate(22deg) } }
@media (prefers-reduced-motion: reduce) {
  .ct-orb, .ct-orb .r, .ct-orb .eq i { transition: none }
  .ct[data-state="thinking"] .ct-orb .core { animation: none }
}
.ct-said { text-align: center; font-family: var(--display); font-size: 19px; font-weight: 600;
  letter-spacing: -.02em; color: var(--cfink2); min-height: 2.4em; max-width: 560px; }
.ct-said .heard { display: block; font-family: var(--body); font-size: 17px; font-weight: 500;
  color: var(--cfink); line-height: 1.45; }
.ct-said .cd { display: block; font-family: var(--body); font-size: 12.5px; font-weight: 600;
  color: var(--cfteal); margin-top: 10px; letter-spacing: 0; }
.ct-urgent { width: 100%; max-width: 620px; }
.ct-urgent[hidden] { display: none; }
.ct-vbar { flex: none; display: flex; align-items: center; justify-content: center; gap: 26px;
  padding-top: 6px; }
.ct-vmic { width: 84px; height: 84px; border-radius: 50%; position: relative; display: grid;
  place-items: center; background: var(--cfteal); color: #06222a;
  box-shadow: 0 10px 24px rgba(79, 209, 199, .22);
  transition: transform .2s var(--bounce), background .25s var(--ease); }
.ct-vmic:active { transform: scale(.95); }
.ct-vmic .halo { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
/* LISTENING IS TEAL, NOT WHITE. The first version turned the microphone white
   and pulsed a white ring off it, which on this near-black ground read as a
   glare rather than as a state: the brightest thing on the screen was a halo
   around a button, not the object you are meant to be watching. The state is
   carried by the same teal the orb uses, so listening looks like listening
   everywhere it appears. */
.ct[data-state="listening"] .ct-vmic { background: #7fe6dd; color: #06222a; }
.ct[data-state="listening"] .ct-vmic .halo { box-shadow: 0 0 0 0 rgba(79,209,199,.4);
  animation: ctHalo2 1.6s var(--ease) infinite; }
@keyframes ctHalo2 { 70% { box-shadow: 0 0 0 20px rgba(79,209,199,0) } 100% { box-shadow: 0 0 0 0 rgba(79,209,199,0) } }
@media (prefers-reduced-motion: reduce) { .ct[data-state="listening"] .ct-vmic .halo { animation: none } }
.ct[data-state="speaking"] .ct-vmic { background: var(--cfsand); color: #241B0C; }
.ct-vb { display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 14px; border-radius: 18px; color: var(--cfink3); font-size: 11.5px;
  font-weight: 600; min-width: 84px; transition: color .18s var(--ease), background .18s var(--ease); }
.ct-vb:hover { color: var(--cfink); background: var(--cfraise); }
@media (max-width: 560px) {
  .ct-orb { width: 150px; height: 150px }
  .ct-orb .core { width: 104px; height: 104px }
  .ct-vbar { gap: 14px }
  .ct-vmic { width: 74px; height: 74px }
}
/* ---- things to say, in voice mode --------------------------------------
   Offered as sentences to SPEAK rather than buttons to press, because in a
   mode with no words "or pick one of these" pointed at nothing. They are
   tappable too: insisting on speech from somebody who cannot face speaking is
   the same mistake in the other direction.
   The resting state is visible and the entrance lives in the `from` keyframe,
   so a browser that never animates still shows them. */
.ct-prompts { display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 640px; }
.ct-prompts:empty { display: none; }
.ct-plabel { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cfink3); }
.ct-prow { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.ct-p { display: inline-flex; align-items: baseline; gap: 6px; padding: 11px 18px; border-radius: 999px;
  background: var(--cfraise); border: 1px solid var(--cfline); color: var(--cfink2);
  font-size: 14.5px; font-weight: 500; min-height: 46px;
  animation: ctPop .42s var(--spring) both;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.ct-p .q { font-family: var(--display); font-size: 17px; color: var(--cfteal); line-height: 1; }
.ct-p:hover { background: var(--cfraise2); color: var(--cfink); border-color: var(--cfline2); }
@keyframes ctPop { from { opacity: 0; transform: translateY(8px) scale(.96) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .ct-p { animation: none } }
/* a real destination inside a reply, for the turns the coach hands off rather
   than answers. Underlined never, per the standing rule. */
.ct-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; padding: 10px 16px;
  border-radius: 999px; background: var(--cfteal); color: #08131B; font-size: 13.5px;
  font-weight: 650; transition: filter .18s var(--ease); }
.ct-link:hover { filter: brightness(1.08); }
/* ---- an honest blank, on a plan that is somebody's own ------------------
   A real person opening this for the first time has an empty plan, and an
   empty plan is a normal state rather than a fault. It says what the line is
   FOR, so the page is a prompt rather than a shrug. */
.e-blank { padding: 16px 18px; border-radius: var(--r-md); border: 1px dashed var(--hair);
  font-size: 13.8px; line-height: 1.6; color: var(--ink-3); }
/* ---- who you ring, edited ----------------------------------------------- */
.cx-con { padding: 14px 16px; border-radius: var(--r-md); background: var(--raise-2);
  border: 1px solid var(--hair); margin-bottom: 9px; }
.cx-con.first { border-color: var(--secondary); }
.cx-con-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-con-h b { font-size: 15.5px; font-weight: 650; flex: 1; min-width: 0; }
.cx-con-1st { padding: 4px 11px; border-radius: 999px; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; background: rgba(181, 37, 85, .2);
  color: var(--secondary-soft); }
html[data-theme="light"] .cx-con-1st { background: #F8E4EC; color: var(--secondary); }
.cx-con-mk { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hair);
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  transition: color .18s var(--ease), border-color .18s var(--ease); }
.cx-con-mk:hover { color: var(--ink); border-color: var(--hair-2); }
.cx-con-rm { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid;
  place-items: center; color: var(--ink-3); }
.cx-con-rm:hover { background: var(--hair); color: var(--ink); }
.cx-con-s { display: block; font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.cx-con-n { display: block; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.cx-con-add { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px;
  margin-top: 14px; }
.cx-con-add .wide { grid-column: 1 / -1; }
.cx-con-add .btn { grid-column: 1 / -1; }
@media (max-width: 620px) { .cx-con-add { grid-template-columns: minmax(0, 1fr); } }
.cx-note-in { width: 100%; resize: vertical; font: inherit; font-size: 15px; line-height: 1.5;
  padding: 14px 16px; }
/* ---- whose plan this is, said before anything else ---------------------- */
.e-whose { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px;
  padding: 14px 18px; border-radius: var(--r-lg); font-size: 13.8px; line-height: 1.55;
  color: var(--ink-2); border: 1px solid var(--hair); background: var(--raise); }
.e-whose b { color: var(--ink); }
.e-whose svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.e-whose.live { border-color: rgba(0, 164, 153, .35); background: rgba(0, 164, 153, .08); }
.e-whose.live svg { color: var(--teal-soft); }
html[data-theme="light"] .e-whose.live { background: #EFF9F7; border-color: #BFE5DF; }
html[data-theme="light"] .e-whose.live svg { color: #0B7A6F; }

/* The .cx-toast rules were removed when the seven toast implementations became
   one. Nothing renders that class any more: NX.notify in nx-core.js builds a
   single .toast .nx-toast for every surface, and its look is in
   appts-shell.css where one definition serves all of them. */