/* Daily Life Doc, revision 3: the call between the patient and the care team (SPEC-R3 section H; round 9; round 10,
   the page "One chat" Part 2 sections 4 to 6). The call bar at the top of every page (js/call/call-bar.js), the marker
   at the right edge that shows where the other side is (js/call/call-live.js), the sheets "Call time"
   (js/call/call-time-sheet.js) and "Call" (js/call/call-about.js), the call time card in the chat
   (js/call/call-card.js), the call rows at the top of Today and the grey line "Calling · …" (js/call/call-row.js),
   and the record of a call with the care team's "Recording and transcript" (js/req/req-chat-call.js).
   The call has its own colour, a deep plum, apart from the four place colours. Sizes and motion: LOOK.md. */

/* ---------- The call's colours ---------- */
:root { --call: #82304A; --call-ink: #FFF5F7; --call-soft: rgba(255, 255, 255, .17); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --call: #6A3044; --call-ink: #FCE6EB; --call-soft: rgba(255, 255, 255, .14); }
}
:root[data-theme="dark"] { --call: #6A3044; --call-ink: #FCE6EB; --call-soft: rgba(255, 255, 255, .14); }
/* The other side's colour: the care team's for the patient, a blue for the patient on the care team's screen. */
.phone { --them: var(--care-d); }
.phone[data-them="person"] { --them: var(--focus); }

/* ---------- The content moves down once when the bar arrives, and back when it goes ----------
   --cb is the bar's height (css/shell.css: 0, or 44px while .phone carries data-call="on"). Registered as a length,
   it can ease, and everything placed by --top eases with it. */
@property --cb { syntax: '<length>'; inherits: true; initial-value: 0px; }
.phone { transition: --cb var(--m-add) var(--ease-out); }

/* ---------- The bar ---------- */
/* Above the dark cover of a sheet (48), under the sheet itself (50): the call stays in reach everywhere. */
.phone > .callbar { z-index: 49; }
.cb { height: 40px; margin: 2px 10px; padding: 0 5px 0 2px; border-radius: 20px; display: flex; align-items: center; gap: 6px; background: var(--call); color: var(--call-ink);
  box-shadow: 0 10px 20px -14px var(--shadow); animation: cb-in 420ms var(--ease-out) both; }
/* The bar slides down from above the screen, over whatever page is open. */
@keyframes cb-in { from { opacity: 0; transform: translateY(-56px); } 40% { opacity: 1; } }
.cb button { position: relative; flex: none; color: inherit; transition: transform var(--m-press) var(--ease-out), background-color var(--m-step) ease, color var(--m-step) ease, opacity var(--m-step) ease; }
.cb button:active { transform: scale(0.94); }
/* A finger's reach around the small controls. */
.cb button::before { content: ''; position: absolute; inset: -7px -3px; }

/* Who, the running time, and under them where the other side is. */
.cb .cb-main { flex: 1; min-width: 0; height: 36px; padding: 0 6px 0 4px; border-radius: 18px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-content: center; text-align: left; }
.cb-dot { grid-row: 1 / 3; place-self: center; position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cb-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: cb-pulse 2200ms ease-out infinite; }
@keyframes cb-pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.7); opacity: 0; } }
.cb-l1 { min-width: 0; display: flex; align-items: baseline; gap: 7px; font-size: var(--t-sm); line-height: 16px; }
.cb-who { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Line 2 of a call that is on: "4:12 · Recorded · On Atlas ›". Every call is recorded and written out, and both
   sides read it (agreed 10); where the other side is gives way first when room is short. */
.cb-l2 { min-width: 0; display: flex; gap: 4px; font-size: var(--t-2xs); line-height: 14px; font-weight: 500; opacity: .86; white-space: nowrap; }
.cb-time { flex: none; }
/* Round 10: "4:12 · In the chat · with the care team · Recorded": where the other side is stays whole (Follow reads
   it); who joins and "Recorded" give way first when room is short. */
.cb-rec { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cb-l2 .cb-where { flex: none; max-width: 62%; opacity: 1; }
.cb-where { min-width: 0; font-size: var(--t-2xs); line-height: 14px; font-weight: 500; opacity: .86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The words lead somewhere while the other side is on another page. */
.cb button.cb-main:not(:disabled) .cb-where::after { content: ' ›'; }
@media (max-width: 360px) { .cb-follow { padding: 0 9px; } .cb .cb-main { padding-right: 2px; } }

.cb-follow { height: 28px; padding: 0 11px; border-radius: 14px; background: var(--call-soft); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.cb-follow[aria-pressed="true"] { background: var(--call-ink); color: var(--call); }
.cb-follow:disabled { opacity: .5; }
.cb-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--call-soft); }
.cb-ic svg { width: 16px; height: 16px; }
.cb-ic[aria-pressed="true"] { background: var(--call-ink); color: var(--call); }
.cb-end { height: 30px; padding: 0 13px; border-radius: 15px; background: var(--call-ink); color: var(--call); font-size: var(--t-sm); font-weight: 600; }
.cb .cb-end { color: var(--call); }
.cb .cb-follow[aria-pressed="true"], .cb .cb-ic[aria-pressed="true"] { color: var(--call); }
.cb-quiet { height: 30px; padding: 0 12px; border-radius: 15px; background: var(--call-soft); font-size: var(--t-sm); font-weight: 500; }

/* Ringing: the same bar, the dot rings wider and a little faster. */
.cb[data-state="ringing"] .cb-dot::after { animation: cb-ring 1500ms ease-out infinite; }
@keyframes cb-ring { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3.4); opacity: 0; } }

/* ---------- Where the other side is ---------- */
/* On the same page: a slim marker at the right edge, where the other side's view is. */
.call-mark { position: absolute; top: 0; right: 3px; z-index: 43; width: 4px; height: 40px; border-radius: 2px; background: var(--them); opacity: 0; pointer-events: none;
  transition: transform 260ms var(--ease-out), opacity var(--m-step) ease; }
.call-mark[data-on] { opacity: .8; }

/* ---------- The sheet "Call time" ----------
   One row of day chips that slides sideways; the chosen chip sits on a dark pill that glides to the chip tapped.
   The row runs to the sheet's edges so a chip half in sight says "there is more". */
.ct-days { position: relative; display: flex; gap: 2px; margin: 2px -18px 18px; padding: 0 18px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 18px; -webkit-overflow-scrolling: touch; }
.ct-days::-webkit-scrollbar { display: none; }
.ct-d { position: relative; z-index: 1; flex: none; height: 44px; padding: 0 14px; border-radius: 22px; scroll-snap-align: start; font-size: var(--t-m); font-weight: 600; color: var(--ink);
  white-space: nowrap; transition: color var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.ct-d span { font-weight: 500; color: var(--ink3); transition: color var(--m-step) ease; }
.ct-d[aria-pressed="true"], .ct-d[aria-pressed="true"] span { color: var(--on-ink); }
.ct-d:active { transform: scale(.95); }
.ct-pill { position: absolute; top: 0; left: 0; height: 44px; width: 0; border-radius: 22px; background: var(--ink); pointer-events: none;
  transition: transform 340ms var(--ease-out), width 340ms var(--ease-out); }
.ct .vs-time { margin-top: 4px; }
.ct-note { min-height: 20px; margin: 10px 0 0; text-align: center; font-size: var(--t-sm); font-weight: 500; color: var(--ink2); transition: color var(--m-step) ease; }
.ct-note.is-past { color: var(--care-d); }

/* ---------- The sheet "Call time", round 10: the two clocks, About, With ----------
   "Patient's time" over its place and the clock there, "Night at the patient's place", "Your time": label left, value
   right, one type size. About is the sheet's own tinted field; With is a row of chips, the last a small field Other. */
.ct-clocks { margin: 14px 0 4px; display: grid; gap: 2px; }
/* "Replaces Thu 15 Oct, 8:00 PM" above the days when the sheet moves an agreed call (fault WALK-3 #16). */
.ct-was { margin: -4px 0 12px; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); }
.ct-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: var(--t-s); line-height: 22px; }
.ct-row span { flex: none; color: var(--ink2); font-weight: 500; }
.ct-row b { min-width: 0; text-align: right; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ct-row + .ct-sub { margin-top: -2px; }
.ct-sub { margin: 0 0 6px; text-align: right; font-size: var(--t-sm); color: var(--ink3); }
.ct-flag { margin: 0 0 8px; text-align: right; font-size: var(--t-sm); font-weight: 600; color: var(--call); animation: dd-fade 240ms ease both; }
.ct-flag.is-past { color: var(--care-d); }
.ct-label { display: block; margin: 16px 0 6px; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); }
.ct-with { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ct-with .ct-w:disabled { opacity: 1; cursor: default; }
.ct-other { flex: 1 1 110px; min-width: 110px; height: 40px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ct-flag:not(.is-past) { color: #E7A3B6; } }
:root[data-theme="dark"] .ct-flag:not(.is-past) { color: #E7A3B6; }

/* ---------- A call time in the chat, both sides (js/call/call-card.js) ----------
   A text card inside the message's bubble: the subject, the time, who joins, then the answers as words that take a
   tap (as Today's rows: Yes in ink, the others quieter). An answer given stands quietly with its tick. */
.ccd { display: grid; gap: 1px; color: inherit; }
.ccd p { margin: 0; }
/* The card stands in the bubble of either side (the care team's own bubble is ink): every colour follows the
   bubble's own ink, the quieter lines by opacity. */
.ccd-t { font-weight: 600; }
.ccd-w, .ccd-j, .ccd-r { font-size: var(--t-s); line-height: 1.45; opacity: .78; }
.ccd-r { opacity: .6; }
.ccd-n { font-size: var(--t-sm); font-weight: 600; color: #C0577A; }
.ccd-b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: 8px; }
.ccd-btn { position: relative; min-height: 28px; font-size: var(--t-s); font-weight: 500; color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: opacity var(--m-press) ease, transform var(--m-press) var(--ease-out); }
.ccd-btn::after { content: ''; position: absolute; inset: -8px -9px; }
.ccd-btn.is-ink { font-weight: 600; }
.ccd-btn.is-quiet { opacity: .72; }
.ccd-btn:active { opacity: .5; }
.ccd-btn:disabled { opacity: .4; }
.ccd-given { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-s); font-weight: 600; opacity: .8; }
.ccd-given svg { width: 14px; height: 14px; }
.ccd.is-still .ccd-t { opacity: .7; }
.ccd.ccd-miss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }

/* ---------- A call row at the top of Today (js/call/call-row.js; zone P places it in its row) ---------- */
.crow p { margin: 0; }
.crow-t { font-size: var(--t-m); line-height: 26px; color: var(--ink); overflow-wrap: anywhere; }
.crow .crow-b .ccd-btn { text-decoration: none; }
.crow-u { font-size: var(--t-sm); line-height: 1.45; color: var(--ink3); }
.crow-b { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }
.crow.k-missed .crow-t { color: var(--ink2); }

/* ---------- "Calling · Call about …" at the end of the one chat, while the ring waits ---------- */
.call-calling { margin: 14px 0 4px; text-align: center; font-size: var(--t-sm); font-weight: 500; color: var(--ink2); animation: call-breathe 1800ms ease-in-out infinite; }
@keyframes call-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- The record "Call about … · 8 min", "Missed call · 5:02 PM", "The call on … is off" (both sides) ---------- */
.rcl { margin: 0; padding: 3px 0 0; font-size: var(--t-s); font-weight: 600; color: var(--ink); }
.rcl-sub { margin: 0; padding-bottom: 2px; font-size: var(--t-sm); color: var(--ink2); }
.rcl-miss { color: var(--ink2); font-weight: 500; padding: 0; }
.rcl-off { margin: 0; text-align: center; font-size: var(--t-sm); color: var(--ink3); }

@media (prefers-reduced-motion: reduce) {
  .cb, .cb-dot::after, .call-calling { animation: none; }
  .phone, .call-mark, .ct-pill { transition: none; }
}

/* ---------- A recorded call: the pink line "Recording and transcript", for the care team only ----------
   Drawn by js/req/req-chat-call.js under "Call · 18 min"; a tap opens the player and the turns in place (a height
   transition), a second tap folds them. The entry's page (js/versions/entry-page.js) shows the same turns. One turn is
   who spoke (small, the care team in the care team's colour) over the words; turns are set apart by space alone. */
.rcc-box { margin: 8px 0 14px; border-radius: 14px; background: var(--tint-team); text-align: left; }
.rcc-open { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; padding: 0 14px; border-radius: 14px;
  color: var(--care-d); font-size: var(--t-sm); font-weight: 600; text-align: left; transition: opacity var(--m-press) ease; }
.rcc-open:active { opacity: .6; }
.rcc-chev { flex: none; width: 7px; height: 7px; margin: -3px 2px 0 0; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg);
  transition: transform 280ms var(--ease-out), margin 280ms var(--ease-out); }
.rcc-open[aria-expanded="true"] .rcc-chev { transform: rotate(-135deg); margin-top: 3px; }
.rc-b:has(.rcc-open) { min-width: min(100%, 300px); max-width: 92%; }
.rcc { padding: 0 14px 14px; }
.rcc > .rq-voice { margin: 2px 0 0; display: flex; justify-content: flex-start; }
.rcc .rcc-w { margin-top: 8px; }
.rcc .rcc-turns { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .rcc-chev { transition: none; } }
.rcc-turns { display: grid; gap: 11px; margin-top: 14px; }
.rcc .rcc-t, .ep-call .rcc-t { margin: 0; font-size: var(--t-s); line-height: 1.45; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.rcc-t b { display: block; margin-bottom: 1px; font-size: var(--t-xs); font-weight: 600; line-height: 1.4; color: var(--ink2); }
.rcc-t.tm b { color: var(--care-d); }
.rcc-more { position: relative; margin-top: 12px; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); transition: opacity var(--m-press) ease; }
.rcc-more::after { content: ''; position: absolute; inset: -10px -12px; }
.rcc-more:active { opacity: .6; }
.rcc-not { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 0; font-size: var(--t-sm); color: var(--ink2); }
.rcc-turns { animation: dd-fade 240ms ease both; }
@media (prefers-reduced-motion: reduce) { .rcc-turns { animation: none; } }
/* "Replaces Fri 16 Oct, 7:00 PM" on the sheet of Call (call-about.js): the agreed call of a later day this call ends;
   its ✕ keeps that call (fixer H2). */
.ca-rep { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ca-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); color: var(--ink2); }
.ca-x svg { width: 13px; height: 13px; }