/* Daily Life Doc, round 6 (zone F), round 9 (zone G), round 10 (zone R): the sheet Update (js/today/update.js, also
   the plus button in edit mode), the page To review (js/flow/review-page.js, review-calls.js), the page AI use
   (js/flow/ai-use.js) and the page Checked (js/flow/checked.js).
   Measures follow the drawn phones (docs/artifact/next/build/base.css: .ta, .five, .send, .acts, .x.nb). One type scale: the
   tokens --t-* of css/base.css. */

/* ---- The sheet Update: a large box with grey example lines, the five quiet ways, the button ---- */
.us-ta { position: relative; border-radius: 22px; background: var(--soft); }
textarea.us-box { display: block; width: 100%; min-height: 190px; max-height: 38vh; padding: 16px 18px; border: 0; border-radius: 22px; background: none; resize: none; outline: 0;
  font: inherit; font-size: var(--t-m); line-height: 1.5; color: var(--ink); overflow-y: auto; scrollbar-width: none; }
textarea.us-box::-webkit-scrollbar { display: none; }
/* The field is a soft tint with no border, also while the caret stands in the field (the owner's rule: tinted, not
   bordered; round 8 took the ring of 1.5 px away). */
.us-hints { position: absolute; inset: 0; padding: 16px 18px; display: flex; flex-direction: column; pointer-events: none; color: var(--ink3); font-size: var(--t-m); line-height: 1.9; overflow: hidden; }
.us-hints[hidden] { display: none; }
.us-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.us-thumbs[hidden] { display: none; }
/* A picked photo: the WHOLE picture, small, on the soft ground (a photo of a white page stays a visible tile), and
   the remove sign beside the picture, never on top of the picture. */
.us-t { display: inline-flex; align-items: flex-start; gap: 2px; animation: dd-fade 200ms ease both; }
.us-t img { display: block; width: 72px; height: 72px; padding: 4px; border-radius: 14px; object-fit: contain; background: var(--soft); }
.us-t button, .us-f button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
/* The remove sign beside a photo: a 32 px round sign in a 44 px place, comfortable for a thumb. */
.us-t button { position: relative; width: 32px; height: 32px; background: var(--soft); color: var(--ink2); transition: transform var(--m-press) var(--ease-out); }
.us-t button::after { content: ''; position: absolute; inset: -6px; }
.us-t button:active { transform: scale(.88); }
.us-t button svg { width: 14px; height: 14px; }
.us-f button svg { width: 12px; height: 12px; }
.us-f { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 40px; padding: 0 6px 0 12px; border-radius: 13px; background: var(--soft); font-size: var(--t-s); animation: dd-fade 200ms ease both; }
.us-f > svg { width: 16px; height: 16px; flex: none; color: var(--ink2); }
.us-f b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-five { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 12px; }
.us-five button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 56px; padding: 8px 0; border-radius: 14px; font-size: var(--t-xs); font-weight: 500; color: var(--ink2);
  transition: transform var(--m-press) var(--ease-out), background var(--m-step) ease; }
.us-five button:active { transform: scale(0.94); }
.us-five button svg { width: 22px; height: 22px; color: var(--ink); }
.us-five button.on { background: var(--soft); color: var(--ink); }
.us-five button.on svg { color: var(--nav); }
.us-five button[disabled] { opacity: .45; }
.us-five button span { white-space: nowrap; }
.us-send { display: grid; place-items: center; width: 100%; height: 54px; margin-top: 10px; border-radius: 18px; background: var(--ink); color: var(--on-ink); font-size: var(--t-l); font-weight: 600;
  transition: transform var(--m-press) var(--ease-out), background var(--m-step) ease, color var(--m-step) ease; }
.us-send:active { transform: scale(0.98); }
.us-send[disabled] { background: var(--soft); color: var(--ink2); }
.us-main[hidden], .us-preview[hidden] { display: none; }
.us-preview { animation: dd-fade 200ms ease both; }

/* ---- Rules and To review: a page with one quiet line under the title and one white area of lines ---- */
.fl-sub { padding: 0 2px; font-size: var(--t-s); font-weight: 500; line-height: 1.4; color: var(--ink2); }
.fl-why { margin-top: 6px; padding: 0 2px; font-size: var(--t-sm); line-height: 1.4; color: var(--ink2); }
.fl-card { margin-top: 12px; padding: 14px 18px 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line); animation: dd-fade 220ms ease both; }
.fl-h { margin: 14px 0 0; font-size: var(--t-sm); font-weight: 600; line-height: 24px; letter-spacing: .02em; color: var(--ink2); }
.fl-h:first-child { margin-top: 0; }

/* ---- To review (round 10, js/flow/review-page.js, review-calls.js): the spend at the top, Calls, the patients,
   then the foot. Each list is one white area of rows; a row is the round initial, the name and one or two quiet
   lines; a patient's count stands at the right. The patient whose chat is open beside the list (1280 px) is tinted. */
.rv-spend { margin-top: 4px; }
.rv-spend:empty { display: none; }
.rv-ai { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px; font-size: var(--t-s); font-weight: 600; color: var(--ink); transition: opacity var(--m-press) ease; }
.rv-ai b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rv-ai:active { opacity: .55; }
.rv-cap { padding: 0 2px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink2); }
.rv-cap.red { margin-top: 4px; padding: 11px 15px 12px; border-radius: 16px; background: var(--bad-bg); color: var(--bad-d); font-weight: 500; }
.rv-g { margin-top: 20px; }
.rv-g[hidden] { display: none; }
.rv-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; padding: 0 2px; font-size: var(--t-sm); font-weight: 600; line-height: 24px; letter-spacing: .02em; color: var(--ink2); }
.rv-rows { padding: 2px 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.rv-rows:empty { display: none; }
.rv-wait { padding: 22px 0; display: flex; justify-content: center; }
.rv-wait[hidden] { display: none; }
.rv-row { position: relative; display: flex; align-items: center; gap: 10px; }
.rv-row + .rv-row { border-top: 1px solid var(--line); }
.rv-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 11px 0; text-align: left; transition: opacity var(--m-press) ease; }
.rv-open:active, .rv-row.going .rv-open { opacity: .55; }
.rv-open .pp-av { width: 40px; height: 40px; font-size: var(--t-m); }
.rv-m { flex: 1; min-width: 0; display: block; }
.rv-what { display: block; font-size: var(--t-m); font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-who { display: block; margin-top: 2px; font-size: var(--t-sm); line-height: 1.4; color: var(--ink2); overflow-wrap: anywhere; }
.rv-who.red { color: var(--bad); font-weight: 500; }
/* A part of the words moves to the next line whole; a part longer than the line ("Cancelled by the patient" in the narrow
   left column at 1280 px) wraps inside itself instead of running under the count. */
.rv-who .nw { display: inline-block; max-width: 100%; vertical-align: top; }
.rv-n { flex: none; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; display: grid; place-items: center; background: var(--ink); color: var(--on-ink);
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.rv-n.none { display: none; }
.rv-row.is-quiet .rv-what { font-weight: 500; }
.rv-row.is-quiet .pp-av { color: var(--ink2); }
/* The open patient beside the chat (1280 px): a soft tint across the row's whole width. */
.rv-row.is-current::before { content: ''; position: absolute; inset: 2px -10px; border-radius: 14px; background: var(--tint); z-index: 0; }
.rv-row.is-current > * { position: relative; z-index: 1; }
.rv-act { flex: none; position: relative; min-height: 36px; padding: 0 16px; border-radius: 18px; background: var(--ink); color: var(--on-ink); font-size: var(--t-s); font-weight: 600;
  transition: transform var(--m-press) var(--ease-out), opacity var(--m-press) ease; }
.rv-act::after { content: ''; position: absolute; inset: -6px -4px; }
.rv-act:active { transform: scale(.95); }
.rv-act[disabled], .rc-quiet[disabled] { opacity: .5; }
/* A call: the text first, then Call and Cancel call (or Close) under it at the right, so 340 px keeps the words whole. */
.rc-row { flex-wrap: wrap; padding-bottom: 10px; }
.rc-row .rv-open { flex-basis: 100%; padding-bottom: 2px; align-items: flex-start; }
.rc-row .rv-what { white-space: normal; }
.rc-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.rc-quiet { position: relative; min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: var(--t-s); font-weight: 600; color: var(--ink2); transition: opacity var(--m-press) ease; }
.rc-quiet:active { opacity: .55; }
/* The foot: Checked, Add profile, Notifications as quiet rows, then Sign out. */
.rv-foot { margin-top: 26px; }
.rv-line { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 0; text-align: left;
  font-size: var(--t-m); font-weight: 500; color: var(--ink); transition: opacity var(--m-press) ease; }
.rv-line + .rv-line, .rv-line + .rv-push, .rv-push + .rv-line { border-top: 1px solid var(--line); }
.rv-line:active { opacity: .55; }
.rv-line > svg { width: 18px; height: 18px; color: var(--ink2); }
.rv-line small { display: block; margin-top: 2px; font-size: var(--t-sm); font-weight: 400; color: var(--ink2); }
.rv .pp-out { padding-top: 22px; }
.rv-list .fl-empty { margin-top: 6px; }

/* ---- AI use (js/flow/ai-use.js): the spend, three tabs, rows with the amount at the right ---- */
.au-spend { margin-top: 8px; }
.au-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 16px; padding: 4px; border-radius: 16px; background: var(--soft); }
.au-tabs button { min-height: 38px; border-radius: 12px; font-size: var(--t-s); font-weight: 600; color: var(--ink2); transition: background var(--m-step) ease, color var(--m-step) ease; }
.au-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px var(--scrim); }
.au-list { position: relative; margin-top: 12px; padding: 2px 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.au-list > .dots { display: flex; justify-content: center; padding: 20px 0; }
.au-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 9px 0; }
.au-row + .au-row { border-top: 1px solid var(--line); }
.au-t { flex: 1; min-width: 0; }
.au-t b { display: block; font-size: var(--t-m); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.au-t small { display: block; margin-top: 2px; font-size: var(--t-sm); line-height: 1.4; color: var(--ink2); overflow-wrap: anywhere; }
.au-usd { flex: none; font-size: var(--t-m); font-weight: 600; font-variant-numeric: tabular-nums; }
.au-list .fl-empty { margin: 14px 0; }

/* ---- Checked (js/flow/checked.js): Search, then one white area of rows; a tap opens a sheet ---- */
.ck-q { display: block; width: 100%; height: 46px; margin-top: 12px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--soft); font: inherit; font-size: var(--t-m); color: var(--ink); outline: 0; }
.ck-list { margin-top: 12px; }
.ck-list[hidden] { display: none; }
.ck-row .rv-m { padding-right: 4px; }
.ck-row .rv-what { white-space: normal; }
.ck .dots { display: flex; justify-content: center; padding: 22px 0; }
.ck .dots[hidden] { display: none; }
.ck-sub { font-size: var(--t-sm); line-height: 1.45; color: var(--ink2); }
.ck-text { margin-top: 10px; font-size: var(--t-m); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ck-note { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--note); color: var(--note-d); font-size: var(--t-s); line-height: 1.45; }
.ck-note b { display: block; font-size: var(--t-xs); font-weight: 600; }
.ck-one .rv-h { margin-top: 16px; }
.ck-one .rv-rows { padding: 0 14px; background: var(--soft); box-shadow: none; }

@media (max-width: 360px) {
  .rv-rows, .au-list { padding: 2px 13px; }
  .rv-open { gap: 10px; }
  .rv-open .pp-av { width: 36px; height: 36px; }
  .rv-act { padding: 0 14px; }
}

.fl-empty { margin-top: 18px; padding: 0 2px; font-size: var(--t-m); color: var(--ink2); }
.fl-empty[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .us-t, .us-f, .us-preview, .fl-card { animation: none; }
}

/* ---- At a computer (1100 px and wider; fixer G2, walk 2 fault 14): To review, Rules, AI use and Checked leave the
   phone frame (js/convo/chat-cols.js sets .phone.is-wide and data-wide). To review puts Calls beside the patients;
   the other pages keep one column of a comfortable reading width in the middle. ---- */
@media (min-width: 1100px) {
  .phone[data-wide="review"] #bare, .phone[data-wide="profiles"] #bare { padding-left: 40px; padding-right: 40px; }
  .phone[data-wide="review"] #bare .rv, .phone[data-wide="profiles"] #bare .rv { max-width: 1080px; margin: 0 auto; }
  .phone[data-wide="review"] .rv .rv-list, .phone[data-wide="profiles"] .rv .rv-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 36px; align-items: start; }
  .phone[data-wide] .rv .rv-list > .rv-spend { grid-column: 1 / -1; }
  /* The Texts line under the spend spans the row too, so Calls and the patients start side by side at the top (fixer
     FA, WALK-5 fault 30: the Texts line took the left cell and pushed the patients under Calls). */
  .phone[data-wide] .rv .rv-list > .tx-rv { grid-column: 1 / -1; }
  .phone[data-wide] .rv .rv-list:has(> [data-g="calls"][hidden]) > .tx-rv { max-width: 640px; }
  /* No call: the patients stand alone in a column of reading width. */
  .phone[data-wide] .rv .rv-list:has(> [data-g="calls"][hidden]) { grid-template-columns: minmax(0, 640px); justify-content: center; }
  .phone[data-wide] .rv .rv-list:has(> [data-g="calls"][hidden]) > .rv-spend { max-width: 640px; }
  .phone[data-wide] .rv .rv-foot { width: calc(50% - 18px); margin-left: auto; }
  .phone[data-wide] .rv:has(.rv-list > [data-g="calls"][hidden]) .rv-foot { width: 100%; max-width: 640px; margin-right: auto; }
  .phone[data-wide] .rv:has(.rv-list > [data-g="calls"][hidden]) > .pp-top { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
  .phone[data-wide="rules"] .pg-body > *, .phone[data-wide="rule"] .pg-body > *, .phone[data-wide="aiuse"] .pg-body > *, .phone[data-wide="checked"] .pg-body > * { max-width: 720px; margin-left: auto; margin-right: auto; }
  /* Round 12, zone OF: Atlas and New experiment at a computer are one centred column, with no phone frame and no
     status bar (round 10 fault 226). */
  .phone[data-wide="atlas"] #top, .phone[data-wide="atlas"] #page { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
  .phone[data-wide="new-experiment"] .pg-body > * { max-width: 720px; margin-left: auto; margin-right: auto; }
  .phone[data-wide="new-experiment"] .pg-head { padding-left: max(16px, calc(50% - 400px)); padding-right: max(16px, calc(50% - 360px)); }
  .phone[data-wide="rules"] .pg-head, .phone[data-wide="rule"] .pg-head, .phone[data-wide="aiuse"] .pg-head, .phone[data-wide="checked"] .pg-head { padding-left: max(16px, calc(50% - 400px)); padding-right: max(16px, calc(50% - 360px)); }
  /* The back arrow stands just left of the 720 px column; what the head holds at its right (a rule's Edit and Delete)
     ends at the column's right edge, like the cards under it (fault 229: 40 px past the card's edge). */
}
/* Round 12 (zone RV): "Quiet 3 days" on a row of To review (Part 12), in the amber of To try, never a pill. */
.rv-who .rv-quiet { color: var(--try-d); font-weight: 600; }