/* Daily Life Doc, round 10 (zone A): the AI's cards and lines in the care team's one chat (docs/build/r10/PLAN.md
   2.3, 2.4, 2.9; the page's Part 3 and Part 6). Pink (--tint-team, --care-d) is what only the care team sees; blue
   (--note, --note-d) the clinician; red (--bad-d) a failure. Tinted surfaces, no borders; one type scale (--t-*).
     1. the line under a patient message (js/convo/result-line.js), with "Checking with a clinician" (decision 53)
     2. Ask AI's steps, its failure and "Approve all" (js/convo/card-list.js, proposal-card.js)
     3. a card (proposal-card.js, proposal-body*.js), its switch, its mark, its clinician part (card-check.js)
     4. the pink line an approved or dropped card leaves
   The `.pc` rules of round 9 moved here from css/convo.css (zone C removes them there). */

/* ---------- 1. The line under a patient message ---------- */
.ch-under[data-under="result"] { align-self: stretch; max-width: 92%; }
.rl { margin: 3px 4px 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }
.rl .qw { font-size: var(--t-xs); }
.rl-c { margin-left: 2px; font-size: var(--t-2xs); font-variant-numeric: tabular-nums; color: var(--care-d); opacity: .85; white-space: nowrap; }
.rl.is-fail { color: var(--bad-d); font-weight: 500; }
/* Decision 53: a card of this message waits for the clinician / what it sent was checked (blue: the clinician). */
.rl-ck { font-weight: 500; color: var(--note-d); white-space: nowrap; }
.rl-again { margin-left: 6px; height: 26px; padding: 0 10px; border-radius: 9px; background: var(--bad-bg); color: var(--bad-d); font-size: var(--t-xs); font-weight: 600;
  transition: transform var(--m-press) var(--ease-out), opacity var(--m-press) ease; }
.rl-again:active { transform: scale(0.95); }
.rl-again:disabled { opacity: .45; }

/* ---------- 2. Ask AI: the host under the care team's words, the steps, the failure, Approve all ---------- */
/* The Ask AI row (zone C's pink bubble) and, after it, the host of its steps and cards: one element of the list. */
.tm-askw { align-self: stretch; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.tm-askw > .tm-ask { align-self: stretch; }
.ak-host { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.ak-host:empty { display: none; }
.ak-steps { margin: 6px 4px 0; }
.ak-step { margin: 0; padding: 2px 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }
.ak-step.is-wait .qw { font-size: var(--t-xs); }
.ak-failw { margin-top: 8px; }
.ak-fail { padding: 10px 13px; border-radius: 16px; background: var(--bad-bg); color: var(--bad-d); }
.ak-fw { margin: 0; font-size: var(--t-s); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.ak-ft { margin: 3px 0 0; font-size: var(--t-xs); line-height: 1.45; overflow-wrap: anywhere; }
.ak-fail .rl-again { margin: 6px 0 0; background: var(--surface); }
.ak-barw { margin-top: 10px; }
.ak-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 560px; padding: 0 2px 0 4px; font-size: var(--t-xs); font-weight: 600; color: var(--care-d); }

/* ---------- 3. A card ---------- */
.pc { align-self: stretch; max-width: 560px; margin-top: 10px; padding: 12px 14px 12px; border-radius: 20px; background: var(--tint-team); color: var(--ink); }
/* "Care team only" stands at the right of the title's first line; a long title wraps under it (walk 4 n9). */
.pc-h { display: flow-root; margin-bottom: 8px; line-height: 1.35; }
.pc-t { font-size: var(--t-xs); font-weight: 600; line-height: 1.35; color: var(--care-d); overflow-wrap: anywhere; }
.pc-only { float: right; margin: 1px 0 0 12px; font-size: var(--t-2xs); font-weight: 500; line-height: 1.35; color: var(--care-d); opacity: .8; }
.pc-b { position: relative; }
.pc-b > .qw { display: inline-block; padding: 2px 0 4px; }
/* The thing as the patient will see it: a bubble from Care team, a line of Today, an Atlas entry. */
.pc-bub { max-width: 92%; padding: 9px 13px 10px; border-radius: 18px; border-bottom-left-radius: 7px; background: var(--surface); font-size: 15px; line-height: 1.45; }
.pc-who { display: block; margin-bottom: 2px; font-size: var(--t-2xs); font-weight: 600; color: var(--ink2); }
.pc-bub p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-bub .pc-sub { margin-top: 3px; }
/* An item as it stands in the chat, quiet: grey words, no opacity (an opacity layer drew half the bubble white in a picture, WALK-2). */
.pc-old p { color: var(--ink2); }
.pc-ans { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); font-size: var(--t-s); }
.pc-x { color: var(--ink3); }
.pc-ans .cc .x { color: var(--ink3); font-weight: 400; }
.pc-ans .cc.yn > * + * { margin-left: 14px; }
.pc-line { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 16px; background: var(--surface); font-size: var(--t-m); line-height: 1.4; }
.pc-line + .pc-line { margin-top: 4px; }
.pc-o { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.75px var(--line); }
.pc-lt { min-width: 0; overflow-wrap: anywhere; }
.pc-lt .cc { margin-left: 0; }
.pc-lt .cc .x { color: var(--ink3); font-weight: 400; }
.pc-lt .cc.yn > * + * { margin-left: 10px; }
.pc-lt .cc .v { font-weight: 600; }
.pc-days { display: block; margin-top: 1px; font-size: var(--t-xs); color: var(--ink3); }
.pc-tag { font-size: var(--t-xs); color: var(--ink3); }
.pc-before { margin: 6px 4px 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }
/* What a clinician's edit replaced, struck through under the clinician's version (WALK-3 fault 1). */
.pc-was { margin: 6px 4px 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }
.pc-was s { text-decoration-thickness: 1.5px; text-decoration-color: var(--ink3); }
.pc-gone .pc-lt { color: var(--ink2); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--ink3); }
.pc-name { margin: 0 0 2px; font-size: var(--t-m); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.pc-sub { margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }
.pc-url { margin: 3px 0 0; font-size: var(--t-2xs); color: var(--ink3); overflow-wrap: anywhere; }
.pc-why { margin: 0 0 4px; font-size: var(--t-sm); color: var(--ink2); }
.pc-part { margin: 8px 2px 4px; font-size: var(--t-2xs); font-weight: 600; color: var(--ink3); }
.pc-entry { margin: 0; padding: 9px 12px; border-radius: 14px; background: var(--surface); font-size: var(--t-s); line-height: 1.45; overflow-wrap: anywhere; }
.pc-entry + .pc-entry, .pc-line + .pc-entry, .pc-entry + .pc-files, .pc-line + .pc-files { margin-top: 4px; }
.pc-docline { cursor: pointer; }
.pc-q { margin: 0; font-size: var(--t-m); font-weight: 500; line-height: 1.4; }
.pc-doc, .pc-link, .pc-switch { padding: 10px 12px; border-radius: 16px; background: var(--surface); }
.pc-doc { cursor: pointer; transition: transform var(--m-press) var(--ease-out); }
.pc-doc:active { transform: scale(0.985); }
.pc-files:empty { display: none; }
.pc-files { padding: 2px 0; }
/* A voice note: Listen, then the words. */
.pc-listen { margin: 4px 0 6px; }
.pc-listen .pc-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: var(--soft); }
.pc-listen svg { width: 16px; height: 16px; }
.pc-mini { height: 26px; margin-left: 4px; padding: 0 10px; border-radius: 9px; background: var(--soft); font-size: var(--t-xs); font-weight: 600; color: var(--ink); }
/* A rule or a schedule: When, Then, How often (the Rules page's own words). */
.pc-rule { display: grid; gap: 6px; padding: 10px 12px; border-radius: 16px; background: var(--surface); }
.pc-said { margin: 0 0 10px; font-size: var(--t-m); line-height: 1.45; color: var(--ink); }
.pc-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; font-size: var(--t-s); line-height: 1.4; }
.pc-k { font-size: var(--t-xs); font-weight: 600; color: var(--ink3); padding-top: 1px; }
.pc-v { min-width: 0; overflow-wrap: anywhere; }
/* A source under a card's words: the ink of the card, underlined, never the browser's blue (review C18). */
a.pc-v { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ink3); }
@media (max-width: 360px) { .pc-row { grid-template-columns: 1fr; gap: 1px; } }
/* The AI's mark: a quiet chip; a tap changes it. */
.pc-mark { display: inline-block; margin: 0 0 8px; height: 26px; padding: 0 10px; border-radius: 9px; background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: var(--t-xs); font-weight: 600; color: var(--care-d); transition: transform var(--m-press) var(--ease-out); }
.pc-mark:active { transform: scale(0.95); }
.pc-mark:disabled { opacity: .7; }
/* Today only · Every day: two halves of one switch. */
.pc-scope { display: inline-flex; margin: 10px 0 0; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.pc-scope button { height: 30px; padding: 0 12px; border-radius: 9px; font-size: var(--t-sm); font-weight: 500; color: var(--ink2);
  transition: background var(--m-step) var(--ease-out), color var(--m-step) ease; }
.pc-scope button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px var(--shadow); }
.pc-scope button:disabled { opacity: .6; }
/* What Approve does, the rules a change touches, a rule's red reason. */
.pc-what { margin: 9px 2px 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink2); }
.pc-rules { margin: 4px 2px 0; font-size: var(--t-xs); font-weight: 500; line-height: 1.45; color: var(--care-d); }
.pc-what.is-gone { font-weight: 600; color: var(--care-d); }
.pc-bad { margin: 6px 2px 0; font-size: var(--t-xs); font-weight: 500; line-height: 1.45; color: var(--bad-d); }
/* The clinician's part: blue, "only the care team sees this". */
.ck { margin: 10px 0 0; padding: 8px 12px 9px; border-radius: 14px; background: var(--note); color: var(--ink); }
.ck-only { float: right; margin: 1px 0 0 10px; font-size: var(--t-2xs); color: var(--note-d); opacity: .85; }
.ck-h { margin: 0; font-size: var(--t-xs); font-weight: 600; line-height: 1.4; color: var(--note-d); }
.ck-n { margin: 3px 0 0; font-size: var(--t-s); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.ck.is-no .ck-h { color: var(--bad-d); }
/* The clinician's answer on an item the patient already has (fixer H1): a blue line under that item; a tap asks AI. */
.ck-late { align-self: flex-end; max-width: min(100%, 520px); margin: 6px 0 0; padding: 7px 12px 8px; border-radius: 14px; background: var(--note); color: var(--ink);
  cursor: pointer; text-align: left; transition: transform var(--m-press) var(--ease-out); }
.ck-late:active { transform: scale(0.99); }
.ck-late p { margin: 0; font-size: var(--t-s); line-height: 1.45; overflow-wrap: anywhere; }
.ck-late b { font-weight: 600; color: var(--note-d); }
.ck-late.is-no b { color: var(--bad-d); }
.ck-late small { display: block; margin-top: 2px; font-size: var(--t-2xs); color: var(--note-d); opacity: .85; }
/* The buttons. */
.pc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pc-acts:empty { display: none; }
.pc-btn { height: 38px; padding: 0 16px; border-radius: 12px; background: var(--surface); font-size: var(--t-s); font-weight: 600; color: var(--ink);
  transition: transform var(--m-press) var(--ease-out), opacity var(--m-press) ease; }
.pc-btn.ink { background: var(--ink); color: var(--on-ink); }
.pc-btn.clin { background: var(--note); color: var(--note-d); }
.pc-btn:active { transform: scale(0.96); }
.pc-btn:disabled { opacity: .4; }
.pc-note { margin: 8px 2px 0; font-size: var(--t-xs); font-weight: 600; color: var(--care-d); }
.pc-note.is-bad { color: var(--bad-d); }
.pc-note[hidden] { display: none; }
.pc[data-state="approving"] .pc-b { opacity: .8; }
/* The edit view (js/convo/proposal-edit.js). */
.pc.is-editing { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--care-d) 35%, transparent); }
.pc-in { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; outline: 0; resize: none; border-radius: 14px; background: var(--surface);
  font: inherit; font-size: var(--t-m); line-height: 1.45; color: var(--ink); }
.pc-preview { margin-top: 6px; }
.pc-preview .pc-line { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.pc-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.pc-pick .pc-x { margin-right: 6px; font-size: var(--t-2xs); font-weight: 600; }
.pc-pick button { height: 30px; padding: 0 10px; border-radius: 10px; font-size: var(--t-sm); color: var(--ink2); }
.pc-pick button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); font-weight: 600; }
/* Edit on a Rule or a Schedule card: the parts by hand (js/convo/proposal-edit-rule.js). Tinted fields, no borders. */
.pe { gap: 10px; }
.pe-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: start; font-size: var(--t-s); line-height: 1.4; }
.pe-row .pc-k { padding-top: 9px; }
.pe-v { display: grid; gap: 6px; min-width: 0; }
.pe-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pe-sel, .pe-num { max-width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--soft); font-size: var(--t-s); color: var(--ink); }
.pe-sel { min-width: 0; text-overflow: ellipsis; }
.pe-num { width: 92px; }
.pe-time, .pe-date { width: auto; }
.pe .pc-in { background: var(--soft); font-size: var(--t-s); }
.pe .pc-pick { margin-top: 0; }
.pe-days button { min-width: 42px; }
.pe-fixed { display: block; padding-top: 8px; font-size: var(--t-xs); color: var(--ink2); }
.pe-sel:focus-visible, .pe-num:focus-visible { outline: 2px solid color-mix(in srgb, var(--care-d) 45%, transparent); outline-offset: 1px; }
@media (max-width: 360px) { .pe-row { grid-template-columns: 1fr; gap: 3px; } .pe-row .pc-k { padding-top: 0; } }
.pc-vals { display: grid; gap: 4px; }
.pc-val { display: block; width: 100%; text-align: left; padding: 0; border-radius: 16px; }
.pc-val .pc-line { transition: transform var(--m-press) var(--ease-out); }
.pc-val:active .pc-line { transform: scale(0.985); }

/* ---------- 4. The pink line an approved or dropped card leaves ---------- */
.pc-donel { max-width: 560px; }
.pc-done { margin: 6px 4px 0; font-size: var(--t-xs); font-weight: 500; line-height: 1.45; color: var(--care-d); overflow-wrap: anywhere; }
/* Review C11: the last report under "Approved · End: …" ("Report 1 is being written", then the button "Report 1 · Review"). */
.pc-rep { display: block; margin-top: 2px; color: var(--ink2); }
.pc-rep:empty { display: none; }
.pc-rep button { min-height: 32px; padding: 0; font: inherit; color: var(--care-d); text-decoration: underline; text-underline-offset: 3px; }

/* A phone: the four buttons of a card stay on one line at 430 px (Approve, Edit, Ask clinician, Drop). */
@media (max-width: 440px) {
  .pc-acts { gap: 6px; }
  .pc-btn { padding: 0 12px; }
}
@media (max-width: 360px) {
  .pc { padding: 11px 12px; }
  .pc-btn { padding: 0 10px; font-size: var(--t-sm); }
}
/* "Nothing to propose" with the AI's reason: an answer, grey, not a failure. */
.ak-none { margin: 6px 4px 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }
/* "Already waiting: …" is a tap that goes to the waiting card (round 12, zone OF). */
.ak-go { display: block; width: calc(100% - 8px); min-height: 32px; padding: 0; background: none; border: 0; text-align: left; font-family: inherit; cursor: pointer; }
.ak-go::after { content: ' ›'; color: var(--ink3, var(--ink2)); }
/* "Make it an insight" under an answer of Ask AI about the patient's days (round 12, fixer JF4): one quiet pink button. */
.ak-insw { margin: 8px 4px 0; }
.ak-ins { height: 32px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--tint-team, var(--care)); color: var(--care-d); font-family: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer; transition: transform var(--m-press, 120ms) ease; }
.ak-ins:active { transform: scale(0.96); }
.ak-ins:disabled { opacity: .45; }
/* A card offered from Checked: what a clinician approved. */
.pc-checked { margin: 6px 2px 0; font-size: var(--t-xs); font-weight: 600; line-height: 1.45; color: var(--note-d); }

/* The Time row under an action's typed words in Edit (js/convo/proposal-edit-view.js), a quiet row of its own, and
   the Time of an action or a measure on its card: "Time of day  Evening · from “after dinner”" (proposal-body.js).
   Moved from css/theme-card.css when the theme went (round 12, zone X). */
.pe-time { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: center;
  min-height: 44px; font-size: var(--t-s); color: var(--ink2); }
.pe-time select { height: 36px; min-width: 0; padding: 0 10px; border: 0; border-radius: 10px; background: var(--soft);
  font: inherit; font-size: var(--t-s); color: var(--ink); }
.pe-time select:focus-visible { outline: 2px solid color-mix(in srgb, var(--care-d) 45%, transparent); outline-offset: 1px; }
.pc-b > .pe-time { margin-top: 8px; padding: 0 12px; border-radius: 14px; background: var(--surface); }
.pc-time { margin: 6px 4px 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink); }
.pc-time .pc-k { margin-right: 6px; }
.pc-time .pc-from { color: var(--ink2); }