/* Daily Life Doc, revision 3: the shared pieces every page reuses. Cards, rows, chips, small marks, the tinted box,
   the sheet, the toast and the "Reading" cover. Tokens, durations and recipes (tile, page header, section heading,
   filters, empty state) are in css/base.css and LOOK.md; the document look is in css/lines.css. */

/* Card: a white rounded box with real padding. .card.tap is a card that is one button. */
.card { display: block; width: 100%; background: var(--surface); border-radius: 22px; padding: 16px; text-align: left; }
.card + .card { margin-top: 12px; }
.card.tap { transition: transform var(--m-press) var(--ease-out); } .card.tap:active { transform: scale(0.98); }
.card.exp { background: var(--exp); color: var(--ink); }
.card h3 { font-size: var(--t-l); font-weight: 600; }
/* Section heading: a title with an optional small word or button at the right. */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 22px 2px 10px; }
.sec-h:first-child { margin-top: 4px; }
.sec-h h2, .sec-h h3 { font-size: var(--t-l); font-weight: 600; }
.sec-h span, .sec-h small { font-size: var(--t-s); color: var(--ink2); font-weight: 500; }
/* Row: one line in a card or panel, a title, a small second line, something at the right. */
.panel { background: var(--surface); border-radius: 22px; padding: 4px 0; }
.row { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; text-align: left; border-radius: 16px;
  transition: background-color 160ms ease; }
.row + .row::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: var(--line); }
.row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-t b { font-size: var(--t-m); font-weight: 600; }
.row-t small { font-size: var(--t-sm); color: var(--ink2); }
.row > svg { flex: none; width: 18px; height: 18px; color: var(--ink3); }
/* Plain running text and the quiet line for an empty page. */
.text { font-size: var(--t-m); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.quiet { font-size: var(--t-s); color: var(--ink2); }
.empty { padding: 28px 12px; text-align: center; font-size: var(--t-m); color: var(--ink2); }

/* Chips: .chip is a small label; .chip-o is a chip that is a button (aria-pressed="true" = picked). */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); font-weight: 600; padding: 4px 10px; border-radius: 9px; background: var(--soft); color: var(--ink2); }
.chip svg { width: 13px; height: 13px; }
.chip-o { height: 40px; padding: 0 14px; border-radius: 12px; background: var(--soft); font-size: var(--t-s); font-weight: 500; display: inline-flex; align-items: center; gap: 6px;
  transition: background-color var(--m-step) ease, color var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.chip-o:active { transform: scale(0.96); }
.chip-o svg { width: 16px; height: 16px; }
.chip-o[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
/* The tag colours, on a .chip or a .chip-o: Library tags and the two Journal tags. */
.chip[data-tag="helped"], .chip-o[data-tag="helped"]:not([aria-pressed="true"]) { background: var(--good-bg); color: var(--good-d); }
.chip[data-tag="nothelped"], .chip[data-tag="worse"], .chip-o[data-tag="nothelped"]:not([aria-pressed="true"]), .chip-o[data-tag="worse"]:not([aria-pressed="true"]) { background: var(--bad-bg); color: var(--bad-d); }
.chip[data-tag="totry"], .chip-o[data-tag="totry"]:not([aria-pressed="true"]) { background: var(--try-bg); color: var(--try-d); }
.chip[data-tag="checkin"] { background: var(--note); color: var(--note-d); }
.chip[data-tag="library"] { background: var(--exp); color: var(--exp-d); }
/* Small marks beside a value or a bullet: who or what wrote it. */
.src { display: inline-block; flex: none; font-size: var(--t-2xs); font-weight: 600; padding: 2px 7px 3px; border-radius: 6px; background: var(--soft); color: var(--ink2); white-space: nowrap; }
.src.journal { background: var(--note); color: var(--note-d); }
.src.care { background: var(--care); color: var(--care-d); }
/* Segmented choice: two or three buttons in one grey box. */
.seg { display: inline-flex; gap: 4px; background: var(--soft); border-radius: 14px; padding: 4px; }
.seg-o { height: 40px; min-width: 62px; padding: 0 14px; border-radius: 11px; font-size: var(--t-s); font-weight: 500; color: var(--ink2);
  transition: background-color var(--m-step) ease, color var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.seg-o:active { transform: scale(0.96); }
.seg-o[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

/* The Place sheet (js/ui/place-sheet.js): a drawn location card, the search box, four rows of cities, the switch. */
.pls-view { position: relative; height: 132px; border-radius: 20px; overflow: hidden; background: var(--pc-bg); }
.pls-card { position: absolute; inset: 0; }
.pls-card svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pls-water { fill: color-mix(in srgb, var(--surface) 70%, var(--pc-bg)); }
.pls-land { fill: none; stroke: var(--pc); stroke-width: 1.2; opacity: .34; }
.pls-road { fill: none; stroke: var(--surface); stroke-width: 3.5; stroke-linecap: round; opacity: .9; }
.pls-pin { position: absolute; left: 50%; top: 22px; width: 38px; height: 38px; margin-left: -19px; color: var(--pc-d); filter: drop-shadow(0 6px 6px color-mix(in srgb, var(--pc-d) 30%, transparent)); }
.pls-pin svg { position: static; width: 38px; height: 38px; fill: var(--surface); stroke-width: 1.6; }
.pls-name { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 7px 12px 8px; border-radius: 13px; background: var(--surface); display: flex; align-items: baseline; gap: 8px; }
.pls-name b { flex: none; max-width: 100%; font-size: var(--t-m); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pls-name small { flex: 0 1 auto; min-width: 0; font-size: var(--t-sm); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pls-find { position: relative; display: block; margin-top: 12px; }
.pls-find svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ink2); pointer-events: none; }
.pls-find input.tint { height: 50px; padding-left: 40px; border-radius: 16px; }
.pls-list { height: 176px; margin-top: 6px; }
.pls-row { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; display: flex; align-items: baseline; gap: 8px; text-align: left; line-height: 44px; transition: background-color var(--m-step) ease, transform var(--m-press) var(--ease-out); animation: dd-fade 180ms ease both; }
.pls-row:active { background: var(--soft); transform: scale(0.985); }
.pls-row b { flex: none; max-width: 70%; font-size: var(--t-m); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pls-row small { flex: 0 1 auto; min-width: 0; font-size: var(--t-sm); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pls-sw { width: 100%; margin-top: 4px; }

/* The tinted box: a text area or text box, tinted, never bordered. .tint alone is a tinted block of words. */
.tint:not(.btn) { display: block; width: 100%; border: 0; border-radius: 16px; background: var(--soft); padding: 12px 14px; font-size: var(--t-m); line-height: 1.45; color: var(--ink); }
textarea.tint { resize: none; min-height: 52px; overflow: hidden; }
textarea.tint.big { min-height: 180px; overflow: auto; }
input.tint { height: 56px; padding: 0 16px; border-radius: 18px; }
.tint::placeholder { color: var(--ink3); }
.card .tint { background: var(--bg); }

/* Sheet: rises from the bottom over a dark cover. */
.scrim { position: absolute; inset: 0; z-index: 48; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 260ms ease; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 88%; overflow-y: auto; scrollbar-width: none;
  background: var(--surface); border-radius: 30px 30px 0 0; padding: 8px 18px 30px; transform: translateY(105%); transition: transform var(--m-sheet) var(--ease-drawer); }
.sheet::-webkit-scrollbar { display: none; }
.sheet.on { transform: none; }
.sheet.tall { height: 90%; max-height: 90%; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.sh-head { position: sticky; top: -8px; z-index: 3; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; background: var(--surface); box-shadow: 0 -8px 0 0 var(--surface); }
.sh-head h2 { flex: 1; min-width: 0; font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.01em; }
.sh-text { margin: -4px 0 14px; font-size: var(--t-m); color: var(--ink2); }
.sh-actions { display: flex; gap: 10px; margin-top: 18px; }
.sh-actions .btn { flex: 1; }
.sheet .tint { background: var(--soft); }
.sh-opt { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 4px; text-align: left; font-size: var(--t-m); font-weight: 500; border-bottom: 1px solid var(--line); }
.sh-opt:last-child { border-bottom: 0; }
.sh-opt .sh-ic { width: 22px; height: 22px; flex: none; color: var(--ink2); }
.sh-opt span { flex: 1; }
.sh-opt .sh-tick { width: 20px; height: 20px; flex: none; opacity: 0; }
.sh-opt[aria-pressed="true"] .sh-tick { opacity: 1; }
.sh-img { display: block; width: 100%; border-radius: 18px; }

/* Toast: one short line at the bottom, with Undo when there is something to undo. Only Undo takes a tap. */
.toast { position: absolute; left: 16px; right: 96px; bottom: 38px; z-index: 80; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 5px 5px 14px;
  border-radius: 14px; background: var(--ink); color: var(--on-ink); font-size: var(--t-s); font-weight: 500; line-height: 1.3; box-shadow: 0 10px 24px -12px var(--shadow);
  transform: translateY(160%); opacity: 0; transition: transform var(--m-toast) var(--ease-out), opacity 200ms ease; pointer-events: none; }
.toast.on { transform: none; opacity: 1; }
.toast.on button { pointer-events: auto; }
.toast span { flex: 1; min-width: 0; padding: 6px 0; }
.toast button { flex: none; height: 34px; padding: 0 13px; border-radius: 10px; background: rgba(125, 135, 150, .28); font-size: var(--t-s); font-weight: 600; }

/* The cover shown while something is read or loaded ("Reading"). */
.busy { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; align-content: center; gap: 14px; background: var(--bg); animation: dd-fade 200ms ease both; }
.busy b { font-size: var(--t-xl); font-weight: 600; }
.busy .dots { color: var(--ink2); }
/* The one button a cover may carry (onboarding: Continue while the words are read). */
.busy .btn { margin-top: 26px; min-width: 200px; animation: dd-fade 300ms ease 900ms both; }

/* The time sheet opened on a guessed time (no saved value, no time in the line, no default): the digits are faint
   and Save waits until the patient touches the hours or the minutes (js/ui/value-sheet.js). */
.vs-time.is-guess input.vs-tn { color: var(--ink3); }
/* While the bar of a line being edited is up, the toast sits above the bar and never over it. */
.phone.phone:has(.lbar.on) > .toast { bottom: calc(var(--foot-h) + 74px); }
.phone.phone:has(.lbar.on.has-from) > .toast { bottom: calc(var(--foot-h) + 112px); }

/* ---------- Round 6: the small shared marks every page uses (docs/build/r6/PLAN.md, "The order of the first hour") ----------
   .chev      "A small chevron marks everything that opens on a tap": put <i class="chev"></i> after the words.
              .chev.dn points down (a closed part that opens in place).
   .quiet     a quiet line or link (already above); .quiet.link is a quiet line that is a button, in the place's ink.
   .tinted    the soft tint behind a line an update just changed or added, behind a finished request shown once.
   .team-only what only the care team sees inside a patient's app: a small heading in the care team's colour.
   .word      one small quiet word beside a line: New, Reading…, Draft, Alone, Ask me. */
.chev { display: inline-block; flex: none; width: .4em; height: .4em; margin: 0 .25em .12em .45em; border: solid var(--ink3); border-width: 1.7px 1.7px 0 0; transform: rotate(45deg); vertical-align: middle; }
.chev.dn { transform: rotate(135deg); margin-bottom: .22em; }
.quiet.link { display: inline-flex; align-items: center; min-height: 36px; font-weight: 600; color: var(--pc-d); transition: opacity var(--m-press) ease; }
.quiet.link:active { opacity: .6; }
.tinted { background: var(--tint); border-radius: 10px; box-shadow: -8px 0 0 var(--tint), 8px 0 0 var(--tint); }
.team-only { font-size: var(--t-xs); font-weight: 600; color: var(--care-d); }
.team-only.block { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--tint-team); font-size: var(--t-s); font-weight: 400; color: var(--ink); }
.word { font-size: var(--t-xs); font-weight: 600; color: var(--pc-d); white-space: nowrap; }
.word.grey { color: var(--ink3); font-weight: 500; }

/* ---------- Round 6: the message box of a chat and of a document (js/ui/box.js) ----------
   One row: the round attach button, the box that grows with the words, Speak inside the empty box, the send arrow
   once words stand in the box. A page puts the box at its foot; .box-label is "Draft by App" for the care team. */
.box { position: relative; }
.box-row { display: flex; align-items: flex-end; gap: 8px; }
.box-att { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); transition: transform var(--m-press) var(--ease-out); }
.box-att:active { transform: scale(0.93); }
.box-att svg { width: 20px; height: 20px; }
.box-in { flex: 1; min-width: 0; min-height: 48px; padding: 6px 6px 6px 16px; border-radius: 24px; background: var(--soft); display: flex; align-items: flex-end; gap: 6px; }
.box-in textarea { flex: 1; min-width: 0; height: 36px; max-height: 132px; padding: 7px 0; border: 0; background: none; resize: none; font-size: 15.500px; line-height: 22px; color: var(--ink); scrollbar-width: none; }
.box-in textarea::placeholder { color: var(--ink3); }
.box-spk { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px 0 10px; border-radius: 18px; background: var(--surface); font-size: var(--t-sm); font-weight: 600;
  transition: transform var(--m-press) var(--ease-out), background-color var(--m-step) ease, color var(--m-step) ease; }
.box-spk:active { transform: scale(0.95); }
.box-spk svg { width: 16px; height: 16px; flex: none; }
.box-spk[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.box-spk.live svg { animation: box-live 1400ms ease-in-out infinite; }
@keyframes box-live { 50% { opacity: .35; } }
.box-send { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); animation: dd-pop 260ms var(--ease-spring);
  transition: transform var(--m-press) var(--ease-out); }
.box-send:active { transform: scale(0.92); }
.box-send svg { width: 16px; height: 16px; stroke-width: 2.4; }
.box-label { margin: 0 0 5px 72px; font-size: var(--t-xs); font-weight: 600; color: var(--care-d); }
.box-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px 56px; }
.box-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 34px; padding: 0 4px 0 6px; border-radius: 12px; background: var(--soft); font-size: var(--t-xs); font-weight: 500; color: var(--ink2); animation: dd-fade 200ms ease both; }
.box-chip img { width: 24px; height: 24px; border-radius: 7px; object-fit: cover; }
.box-chip i { width: 16px; height: 16px; flex: none; }
.box-chip span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box-chip b { font-weight: 600; color: var(--ink); }
.box-chip button { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--ink3); }
.box-chip button svg { width: 12px; height: 12px; }

/* ---------- Round 6: the player of a voice note (js/ui/voice.js): a round button, the sound as bars, the length ---------- */
.vn { display: flex; align-items: center; gap: 10px; max-width: 250px; }
.vn-b { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); transition: transform var(--m-press) var(--ease-out), background-color var(--m-step) ease, color var(--m-step) ease; }
.vn-b::after { content: ''; position: absolute; inset: -5px; } /* a 44 px target */
.vn-b:active { transform: scale(0.92); }
.vn-b svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.vn.on .vn-b { background: var(--pc-d); color: var(--bg); }
.vn.on .vn-b svg { fill: none; stroke: currentColor; stroke-width: 2.6; }
/* The bars: grey for the whole note, in the place's ink for the part already played. */
.vn-w { position: relative; flex: 1; min-width: 80px; height: 22px; border-radius: 2px; opacity: .55; background: repeating-linear-gradient(90deg, var(--ink3) 0 2px, transparent 2px 6px); }
.vn-w i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(90deg, var(--pc-d) 0 2px, var(--bg) 2px 6px); transition: width 240ms linear; }
.vn.on .vn-w { opacity: 1; }
.vn small { flex: none; font-size: var(--t-xs); color: var(--ink2); white-space: nowrap; }