/* Daily Life Doc: the sheet Versions and Entries (js/versions/versions.js, versions-rows.js, entries-list.js) and
   the page of one entry (js/versions/entry-page.js). Round 6, zone A.
   One sheet with three words at the top (Versions, Entries, Requests); a row is a short piece of a document with a hairline above it, never a card.
   Colours only through tokens and --pc-*; one type scale (--t-*). Nothing changes a box's size on a press. */

/* ---------- The words at the top of the sheet ---------- */
/* Three words (round 7: Requests): on a narrow phone the words are smaller, so all three stand beside Close. */
.vs-tabs { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: clamp(12px, 4vw, 18px); }
.vs-tabs button { position: relative; min-height: 40px; font-size: clamp(17px, 5vw, var(--t-xl)); font-weight: 600; letter-spacing: -0.01em; color: var(--ink3); transition: color var(--m-step) ease; }
.vs-tabs button[aria-selected="true"] { color: var(--ink); }
.vs-tabs button::after { content: ''; position: absolute; inset: -4px -8px; }
.vs-part { animation: dd-rise 200ms var(--ease-out) both; min-height: 180px; }
.vs-sheet .empty { padding: 28px 0 36px; }

/* ---------- One row: a version, or an entry ---------- */
.vs-row { padding: 12px 0; border-top: 1px solid var(--line); }
.vs-row:first-child { border-top: 0; padding-top: 2px; }
/* The time, a quiet word (how the words came), and at the right the version mark or the state. */
.vs-a { display: flex; align-items: baseline; gap: 10px; font-size: var(--t-sm); color: var(--ink2); }
.vs-a b { font-size: var(--t-s); font-weight: 600; color: var(--ink); }
.vs-a > span { flex: 1; min-width: 0; font-weight: 500; }
.vs-a u { flex: none; text-decoration: none; font-weight: 600; color: var(--ink); }
.vs-a .qw { flex: none; }
.vs-again { position: relative; flex: none; margin-left: 2px; font-size: var(--t-sm); font-weight: 600; color: var(--pc-d); transition: opacity var(--m-press) ease; }
.vs-again::after { content: ''; position: absolute; inset: -10px -6px; }
.vs-again:active { opacity: .5; }
/* Who and the source; what the app did, one quiet line each. */
.vs-g { margin-top: 4px; font-size: var(--t-sm); line-height: 1.6; color: var(--ink2); overflow-wrap: anywhere; }
.vs-g b { font-weight: 600; color: var(--ink); }
.vs-g i { font-style: normal; color: var(--ink3); }
.vs-src { display: inline; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity var(--m-press) ease; }
.vs-src:active { opacity: .5; }
/* One changed line: the mark in a fixed column, the words beside the mark, "Before: …" under the words. */
.vs-ch { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; margin-top: 3px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.vs-g + .vs-ch { margin-top: 5px; }
.vs-ch em { font-style: normal; font-size: var(--t-xs); font-weight: 600; color: var(--pc-d); line-height: 21.75px; }
.vs-ch small { display: block; font-size: var(--t-xs); color: var(--ink3); }
.vs-ch.rem em { color: var(--ink3); }
.vs-ch.rem span { color: var(--ink3); text-decoration: line-through; }
/* An entry's words, word for word: a tap opens the entry's page. */
.vs-open { display: block; width: 100%; margin-top: 4px; text-align: left; transition: opacity var(--m-press) ease; }
.vs-open:active { opacity: .6; }
.vs-w { display: block; font-size: var(--t-m); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.vs-w.sm { margin-top: 2px; font-size: var(--t-sm); color: var(--ink2); }
.vs-w.q { color: var(--ink3); }
.vs-older { display: flex; margin: 8px auto 0; }

/* ---------- The page of one entry ---------- */
.ep-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; margin: 0 2px; font-size: var(--t-s); font-weight: 500; color: var(--ink2); }
.ep-sub i { font-style: normal; color: var(--ink3); }
.ep-sub b { font-weight: 600; color: var(--ink); }
.ep-again { margin-left: 8px; min-height: 28px; }
.ep-card { margin-top: 10px; padding: 14px 18px 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
/* The link and each file: an icon, the name, a quiet word at the right. */
.ep-fi { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; line-height: 22px; font-size: 15px; font-weight: 500; color: var(--ink); min-width: 0; }
.ep-fi svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ink2); }
.ep-fi span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ep-fi small { flex: none; font-size: var(--t-xs); font-weight: 400; color: var(--ink3); }
a.ep-fi { text-decoration: none; transition: opacity var(--m-press) ease; }
a.ep-fi:active { opacity: .6; }
.ep-ph { margin: 6px 0 4px; }
.ep-txt { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.ep-txt + .ep-txt { margin-top: 8px; }
.ep-txt.q { color: var(--ink3); }
.ep-card > :first-child { margin-top: 0; }
/* A small heading inside the entry: Answer to, To try, What the app did. */
.ep-card .ep-h { margin: 14px 0 0; font-size: var(--t-sm); font-weight: 600; line-height: 24px; letter-spacing: .02em; color: var(--ink2); }
.ep-line { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 0; font-size: 15px; line-height: 1.4; text-align: left; color: var(--ink); overflow-wrap: anywhere; }
.ep-line > span { flex: 1; min-width: 0; }
.ep-line small { display: block; font-size: var(--t-xs); color: var(--ink2); }
button.ep-line { transition: opacity var(--m-press) ease; }
button.ep-line:active { opacity: .6; }
/* A thing to try: the tick (green when ticked), the words to type in, quiet words under the words. */
.ep-it { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; }
.ep-tick { position: relative; flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; color: transparent; box-shadow: inset 0 0 0 2px var(--ink3);
  transition: background-color var(--m-step) ease, box-shadow var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.ep-tick::after { content: ''; position: absolute; inset: -10px; }
.ep-tick svg { width: 14px; height: 14px; stroke-width: 3; }
.ep-tick:active { transform: scale(0.88); }
.ep-it.on .ep-tick { background: var(--done); box-shadow: none; color: #fff; }
.ep-m { flex: 1; min-width: 0; }
.ep-t { font-size: var(--t-m); line-height: 28px; color: var(--ink); outline: none; overflow-wrap: anywhere; }
.ep-it:not(.on) .ep-t { color: var(--ink3); }
.ep-m small { display: block; font-size: var(--t-xs); color: var(--ink3); line-height: 1.4; }
.ep-add { display: flex; width: 100%; height: 54px; margin-top: 10px; border-radius: 18px; font-size: 17px; }

@media (prefers-reduced-motion: reduce) { .vs-part { animation: none; } }
/* A thing to try that "Add to Today" added in this visit: the soft tint, no word (no receipt). */
.ep-it.tinted { margin: 0 -8px; padding-left: 8px; padding-right: 8px; box-shadow: none; }
/* The small picture of a photo an entry brought, under the entry's words in the list Entries. */
.vs-ph { margin-top: 6px; }
/* A photo of a white page stays a visible tile on the white sheet: one hairline around the small picture. */
.vs-ph .ph-t:not(.doc), .ep-ph .ph-t:not(.doc) { outline: 1px solid var(--line); outline-offset: -1px; }
/* The entry of a recorded call, as the care team reads the entry (round 8): the player, then the turns (css/call.css). */
.ep-call { margin-top: 12px; }
.ep-call .rq-voice { max-width: 300px; }