/* Daily Life Doc, round 12 (zone DE; the page "Habits, Rules and Texts", Part 9): the care team's document page.
   The bar ("The patient has v2" | "Draft v3 · 1 waits", Edit, Send v3) and the line over the body
   (js/docs/doc-page-bar.js), the document in the patient's colours (`.dcp-view[data-look]`, css/themes.css), Ask AI's
   changes pink in place with Accept · Edit · Drop and the shimmer "Changing" (js/docs/doc-pink.js), the working sign,
   the video picks and the check in Ask AI (js/docs/doc-ask-ai.js, doc-ask-picks.js), and the hand edit's new places
   (Sources, an Exercise's steps and Speed, Rows, Try's days). Tokens and the shared type scale only. */

/* ---------- 1. The bar and the line over the body ---------- */
.dcp-bar { position: sticky; top: -6px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 -4px 4px; padding: 8px 4px 6px; background: var(--bg); }
.dcp-bar[hidden], .dcp-vl[hidden], .dcp-link[hidden] { display: none; }
.dcp-link { margin: -4px 4px 12px; }
.dcp-sp { flex: 1; }
.dcp-seg { display: inline-flex; padding: 3px; border-radius: 22px; background: var(--soft); max-width: 100%; }
.dcp-tg { min-height: 38px; padding: 0 11px; border-radius: 19px; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); white-space: nowrap; transition: background var(--m-step) ease, color var(--m-step) ease; }
.dcp-tg[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.dcp-tg[disabled] { opacity: .5; }
.dcp-eb { min-height: 42px; padding: 0 11px; border-radius: 21px; font-size: var(--t-s); font-weight: 600; color: var(--ink); transition: background var(--m-step) ease, opacity var(--m-press) ease; }
.dcp-eb[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.dcp-eb:active { opacity: .6; }
.dcp-vl { display: flex; align-items: center; gap: 8px; min-height: 28px; margin: 0 4px 10px; font-size: var(--t-sm); color: var(--ink2); }
.dcp-vl b { font-weight: 600; color: var(--ink); }
.dcp-vl::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good-d, var(--ink3)); }
.dcp-vl.is-draft::before { background: var(--care-d); }
.dcp-work { font-size: var(--t-s); color: var(--ink2); }
.dcp-asked { align-self: center; font-size: var(--t-s); font-weight: 500; color: var(--ink2); }

/* The document as the patient sees it: the patient's colours on a soft panel (the edit keeps them too). */
.dcp.is-team .dcp-view[data-look] { margin: 0 -6px; padding: 6px; border-radius: 26px; background: var(--bg); color: var(--ink); transition: background-color var(--m-step) ease; }
.dcp.is-team .dcp-view[data-look] .doc.dk-doc { background: var(--surface); }

/* ---------- 2. Pink in place ---------- */
.dk.dp-pink, .dcp-body [data-k].dp-pink { position: relative; padding: 10px 12px 12px; margin: -4px -6px; border-radius: 16px; background: color-mix(in srgb, var(--care) 45%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--care-d) 40%, transparent); }
.dp-pink.dp-gone > :not(.dp-bar) { opacity: .45; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--care-d) 60%, transparent); }
.dp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--care-d) 22%, transparent); }
.dp-what { flex: 1 1 140px; min-width: 0; display: grid; gap: 2px; }
.dp-what b { font-size: var(--t-sm); font-weight: 600; color: var(--care-d); }
.dp-what small { font-size: var(--t-xs); line-height: 1.4; color: var(--ink2); }
.dp-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-acc, .dp-btn { min-height: 36px; padding: 0 14px; border-radius: 18px; font-size: var(--t-sm); font-weight: 600; transition: opacity var(--m-press) ease; }
.dp-acc { background: var(--ink); color: var(--on-ink); }
.dp-btn { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.dp-acc:active, .dp-btn:active { opacity: .6; }
/* The block the AI is changing now: a slow shimmer and "Changing" (like "Reading…" in the chat). */
.dcp-body [data-k].dp-busy { position: relative; animation: dp-shim 1.6s ease-in-out infinite; }
.dp-chg { position: absolute; top: 6px; right: 8px; padding: 2px 9px; border-radius: 10px; background: var(--care); color: var(--care-d); font-size: var(--t-xs); font-weight: 600; }
@keyframes dp-shim { 50% { opacity: .55; } }

/* ---------- 3. Ask AI's answer ---------- */
.da-step { margin: 0; font-size: var(--t-m); line-height: 1.45; color: var(--ink); }
.da-chk { margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink2); }
.da-chk.is-open { color: var(--ink); }
.da-picks { display: grid; gap: 8px; }
.da-ph { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.da-ph b { font-size: var(--t-sm); font-weight: 600; }
.da-ph small { font-size: var(--t-xs); color: var(--ink2); }
.da-pick { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px; border-radius: 14px; background: var(--soft); transition: opacity var(--m-step) ease; }
.da-pick img { width: 72px; height: 44px; border-radius: 9px; object-fit: cover; background: var(--line); }
.da-pm { display: grid; gap: 2px; min-width: 0; }
.da-pm b { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.da-pm small { font-size: var(--t-xs); color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-add { min-height: 36px; padding: 0 14px; border-radius: 18px; background: var(--ink); color: var(--on-ink); font-size: var(--t-sm); font-weight: 600; }
.da-add[disabled] { background: none; color: var(--ink2); }
.da-up { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.da-up svg { width: 18px; height: 18px; color: var(--ink2); }
.da-up span { display: grid; }
.da-up b { font-size: var(--t-sm); font-weight: 600; }
.da-up small { font-size: var(--t-xs); color: var(--ink2); }

/* ---------- 4. The hand edit's new places ---------- */
/* The page's bar stands at the top; the editor's own "N changes · Accept all" bar would cover it (Send asks instead). */
.dcp .de-all { display: none !important; }
.de-src { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 12px; border-radius: 18px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.de-srch { margin: 0 0 2px; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); }
.de-srcr { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.de-srcr > span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: var(--t-s); }
.de-srcr > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-srcr svg { flex: none; width: 15px; height: 15px; color: var(--ink3); }
.de-srca { justify-self: start; }
.de-x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink3); }
.de-x svg { width: 12px; height: 12px; }
.de-x:active { background: var(--soft); }
.de-exl { display: flex; align-items: center; gap: 10px; }
.de-exl .de-lab { margin: 0; min-width: 52px; }
.de-exs { display: grid; gap: 6px; }
.de-exr { display: flex; align-items: center; gap: 6px; }
.de-fs .de-exr > .de-f:first-child { flex: 1; width: auto; min-width: 0; }
.de-fs .de-f.de-exn { flex: none; width: 72px; text-align: center; }
.de-exu { font-size: var(--t-sm); color: var(--ink2); }
.de-exa { justify-self: start; }
.de-seg { display: inline-flex; justify-self: start; padding: 3px; border-radius: 21px; background: var(--soft); }
.de-sg { min-height: 36px; padding: 0 14px; border-radius: 18px; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); transition: background var(--m-step) ease, color var(--m-step) ease; }
.de-sg.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.de-rows { display: grid; gap: 8px; }
.de-rowh { display: flex; align-items: center; gap: 6px; }
.de-fs .de-rowh > .de-f { flex: 1; width: auto; min-width: 0; }
.de-cs { width: 100%; text-align: left; }

/* On a phone the two versions fill the first row; Edit and Send stand on the second, at the right. */
@media (max-width: 600px) {
  .dcp-seg { flex: 1 1 100%; }
  .dcp-tg { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* A change's row in the hand edit: its mark and buttons first, its reason on the line under them. */
  .dcp .de-cb { flex-wrap: wrap; }
  .dcp .de-cb .de-why { order: 3; flex: 1 1 100%; }
  .dcp .de-cb .de-tag + .de-why + .de-acc { margin-left: auto; }
}
@media (max-width: 380px) {
  .dcp-tg { padding: 0 8px; font-size: var(--t-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .dcp-body [data-k].dp-busy { animation: none; }
  .dcp-tg, .dcp-eb, .de-sg, .da-pick { transition: none; }
}

/* Send's question "2 changes wait" (js/docs/doc-send-ask.js): on a phone the three buttons stand one under the other,
   Accept all and send on top (WALK-2 fault 16: in one row the words broke over three lines and overflowed). */
@media (max-width: 560px) {
  .sh-actions.dsa-acts { flex-direction: column-reverse; gap: 8px; }
  .sh-actions.dsa-acts .btn { flex: none; width: 100%; }
}