/* Daily Life Doc, round 6 (zone E): the experiment on Today in edit mode, a draft and "no experiment" on Today, the
   experiment's page (Documents and Earlier; round 10 removed Notes and Research) and the sheets of a line (Type,
   Unit, Better, Days; Attach). Files: js/exp/edit*.js, js/today/none.js, js/exp/exp-new.js (round 9),
   js/ui/at-list.js (round 9), js/exp/exp-page.js, exp-docs.js, exp-earlier.js, exp-line.js. Progress, a value's own page and the Table: css/progress.css.
   The measures are those of the drawn phones (docs/artifact/next/build/base.css): a line is 16px on a 28px line, the quiet
   words under a line are 13.5px, a part's heading is 13.5px semibold. Every colour is a token of css/base.css, so
   light and dark follow by themselves. Nothing appears on hover; only transform and opacity move. */

/* ---------- The white card every drawing of the experiment stands in ---------- */
.xcard { display: block; margin-top: 10px; padding: 14px 18px 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.xcard[hidden] { display: none; }
/* Today already stands the experiment in its own card (css/today.css, `.doc.tp`): inside it the card is only its content. */
.doc.tp > .xcard { margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.xe-head { display: flex; align-items: baseline; gap: 12px; }
.xe-title, .xe-name { flex: 1; min-width: 0; margin: 0; font-size: var(--t-l); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.xe-why { margin-top: 2px; font-size: var(--t-sm); color: var(--ink2); line-height: 1.4; overflow-wrap: anywhere; }
.xe-meta { font-size: var(--t-xs); color: var(--ink3); line-height: 1.5; }
.xe-meta button { min-height: 24px; font-weight: 600; color: var(--ink2); }
.xe-done { flex: none; min-height: 32px; margin: -6px -6px -6px 0; padding: 0 6px; font-size: var(--t-sm); font-weight: 600; color: var(--pc-d); transition: opacity var(--m-press) ease; }
.xe-done:active { opacity: .6; }
.xe-done:disabled { opacity: .5; }
.xe-wait { flex: none; animation: dd-fade 200ms ease both; }
.xe-wait[hidden] { display: none; }
/* Words that can be typed in look like the words they are: no box, no line. The grey words stand in an empty one. */
.xcard [contenteditable] { outline: none; cursor: text; -webkit-user-select: text; user-select: text; }
.xcard [contenteditable]:empty::before { content: attr(data-ph); color: var(--ink3); }

/* ---------- A part and its lines ---------- */
.xe-ph { margin: 14px 0 0; display: flex; align-items: baseline; gap: 8px; font-size: var(--t-sm); font-weight: 600; line-height: 24px; letter-spacing: .02em; color: var(--ink2); }
.xe-ph.first { margin-top: 0; }
.xe-ph small { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0; color: var(--ink3); }
.xe-r { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; border-radius: 10px; }
.xe-o { flex: none; width: 22px; height: 22px; margin-top: 3px; display: grid; place-items: center; }
.xe-o::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink3); }
.xe-m { flex: 1; min-width: 0; }
.xe-t { display: block; width: 100%; text-align: left; font-size: var(--t-m); line-height: 28px; overflow-wrap: anywhere; }
.xe-n { display: block; text-align: left; font-size: var(--t-sm); line-height: 1.5; color: var(--ink3); }
button.xe-n { min-height: 24px; transition: opacity var(--m-press) ease; }
button.xe-n:active { opacity: .6; }
/* Round 8: under Actions the lines of `sections.tracking` follow the actions the experiment asks for with no gap
   and no heading of their own (as on Today, css/today.css `.tp-more`): a wider gap with no heading read as uneven
   spacing. */
.xe-r.ty { min-height: 40px; }
.xe-r.ty .xe-o::before { opacity: .45; }
/* The help that stays, and Attach: one row of quiet links. */
.xe-h { display: flex; flex-wrap: wrap; gap: 0 16px; }
.xe-hl { display: inline-flex; align-items: flex-start; gap: 5px; min-height: 28px; max-width: 100%; font-size: var(--t-sm); font-weight: 500; line-height: 24px; color: var(--ink2); transition: opacity var(--m-press) ease; }
.xe-hl:active { opacity: .6; }
/* A long name of a guide wraps under itself; no word is cut (round 8). */
.xe-hl span { min-width: 0; overflow-wrap: anywhere; text-align: left; }
.xe-hl svg { flex: none; width: 15px; height: 15px; margin-top: 4.5px; }
.xe-hl.q { color: var(--ink3); }
.xe-hl .chev { align-self: center; margin-left: .3em; }
/* The small remove sign: a 28px sign in a 44px place. */
.xe-rm { flex: none; width: 44px; height: 44px; margin: -8px -14px -8px -8px; display: grid; place-items: center; color: var(--ink3); transition: transform var(--m-press) var(--ease-out), opacity var(--m-press) ease; }
.xe-rm svg { width: 14px; height: 14px; }
.xe-rm:active { transform: scale(.86); opacity: .6; }
/* "Move to Requests": the quiet suggestion under a typed line, plain words with no box. While it shows, the line
   is only its words (and the remove sign); the suggestion leaves when the line is typed in again. */
.xe-mv { display: flex; margin: 0 0 3px; color: var(--pc-d); font-size: var(--t-xs); font-weight: 600; line-height: 1; animation: dd-fade 200ms ease both; }
.xe-mv button { position: relative; height: 24px; transition: opacity var(--m-press) ease; }
.xe-mv button::after { content: ''; position: absolute; inset: -10px -12px; }
.xe-mv button:active { opacity: .55; }
.xe-mv ~ .xe-n, .xe-mv ~ .xe-h { display: none; }
/* A line an update just changed or the other side just added: the soft tint of css/ui.css, out to the card's edge. */
.xe-r.tinted { margin: 0 -8px; padding-left: 8px; padding-right: 8px; box-shadow: none; }

/* ---------- Today with no experiment (js/today/none.js) ----------
   Round 9: for the care team one row, "New experiment" (or "<name> · Draft"), in the care team's colour as the
   rows "To review" and "Rules" (css/today.css `.tp-q.team`); the card "Pick one thing to try" is gone. */

/* ---------- The care team's page "New experiment" (js/exp/exp-new.js) ----------
   Edit mode on a draft (css above), on a white card under the page's title; Start at the top right. Start looks
   quiet until the page has a name and one measure or action, and is still answered (the caret goes where words
   are missing). */
.xnew .xcard.xe { margin-top: 4px; }
.xnew .xe-name:empty::before { color: var(--ink3); }
.xnew-start { transition: opacity var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.xnew-start.is-off { opacity: .45; }
.xnew-start:active { transform: scale(.96); }
/* A narrow phone: the title "New experiment" keeps its whole words beside Start. */
@media (max-width: 370px) { .pg[data-page="new-experiment"] .pg-head h2 { font-size: 19px; } }

/* ---------- The "@" list (js/ui/at-list.js): the answer types under the caret ----------
   A small white sheet of plain words that rises under the caret; the word the arrow keys mark stands on the tint. */
.at-list { position: fixed; z-index: 60; display: flex; flex-wrap: wrap; gap: 2px 4px; width: max-content; max-width: 300px; padding: 6px;
  border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 14px 32px -12px var(--shadow);
  animation: at-rise var(--m-add) var(--ease-out) both; transform-origin: top left; }
.at-list.up { transform-origin: bottom left; animation-name: at-fall; }
.at-list.out { animation: none; opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity 120ms ease, transform 120ms ease; }
.at-g { flex-basis: 100%; margin: 4px 8px 0; font-size: var(--t-xs); font-weight: 600; color: var(--ink3); }
.at-i { min-height: 36px; padding: 0 10px; border-radius: 10px; font-size: var(--t-s); font-weight: 500; color: var(--ink); white-space: nowrap;
  transition: background-color var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.at-i.on { background: var(--tint); }
.at-i:active { transform: scale(.95); }
@keyframes at-rise { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes at-fall { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .at-list, .at-list.up { animation: none; } .at-list.out { transition: none; } }

/* ---------- The experiment's page ---------- */
.pg[data-page="experiment"] .pg-head h2 { font-size: 21px; }
/* The name is never cut: a long name takes a second line (and more), like the title of a chat. */
.pg[data-page="experiment"] .pg-head h2 { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; padding-top: 8px; overflow-wrap: anywhere; }
.pg[data-page="experiment"] .pg-head { align-items: flex-start; }
/* A narrow phone: a smaller name, so most names keep one line beside End. */
@media (max-width: 360px) { .pg[data-page="experiment"] .pg-head h2 { font-size: 18px; } .pg[data-page="experiment"] .pg-head { gap: 6px; } }
.xp-sub { margin: -4px 2px 2px; font-size: var(--t-sm); color: var(--ink2); }
/* "Report ready" in the quiet line: the word opens the newest report (a chevron marks what opens on a tap). */
.xp-rep { position: relative; padding: 0; font: inherit; font-weight: 600; color: var(--pc-d); transition: opacity var(--m-press) ease; }
.xp-rep::after { content: ''; position: absolute; inset: -12px -8px; }
.xp-rep:active { opacity: .55; }
.xp-sub .qw { font-size: inherit; }
.xp .xcard > .xe-part:first-child > .xe-ph:first-child { margin-top: 0; }
.xp .quiet.link, .xcard .quiet.link, .xearlier .quiet.link { text-decoration: none; }
.xr-ver { margin-top: 6px; font-size: var(--t-s); }
/* Earlier: one row per done experiment. */
.xea-row { display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--line); }
.xea-main { flex: 1; min-width: 0; padding: 8px 0; text-align: left; font-size: 15px; line-height: 1.4; transition: opacity var(--m-press) ease; }
.xea-main:active, .xea-rep:active { opacity: .6; }
.xea-main > span { display: block; overflow-wrap: anywhere; }
.xea-main small { display: block; font-size: var(--t-xs); color: var(--ink2); }
.xea-rep { flex: none; min-height: 40px; font-size: var(--t-sm); font-weight: 600; color: var(--pc-d); transition: opacity var(--m-press) ease; }
.sheet .xearlier .xea-row:first-child { border-top: 0; }
.xea-last { white-space: nowrap; }

/* ---------- The sheet Attach: the help a line has, then what can be attached ---------- */
.xa-has { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px; border-bottom: 1px solid var(--line); font-size: var(--t-m); }
.xa-has span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xa-has button { flex: none; width: 44px; height: 44px; margin-right: -12px; display: grid; place-items: center; color: var(--ink3); }
.xa-has button svg { width: 14px; height: 14px; }
.xa .sh-opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- The sheet of one line (js/exp/exp-line.js): Type, Unit, Better and Days ----------
   Round 6, "nothing looks like a form, no boxed pills": every choice is a row of plain words. The chosen word is
   ink, the others are grey; the words wrap on a narrow phone, so no word touches its neighbour at 340 px. Unit is
   the one text box (tinted, never bordered). The two words keep one weight, so nothing moves on a tap. */
.xl-h { display: block; margin: 14px 0 0; font-size: var(--t-sm); font-weight: 600; line-height: 24px; letter-spacing: .02em; color: var(--ink2); }
.xl > .xl-h:first-child { margin-top: 0; }
.xl-unit { display: block; }
.xl-unit[hidden] { display: none; }
.xl-unit-in.tint { height: 46px; margin-top: 4px; padding: 0 14px; border-radius: 14px; }
.xl .seg, .xl-days { display: flex; flex-wrap: wrap; gap: 0 20px; width: 100%; padding: 0; border-radius: 0; background: none; }
.xl .seg .seg-o, .xl-day { flex: none; min-width: 0; height: 40px; padding: 0; border-radius: 0; background: none; font-size: var(--t-m); font-weight: 500; color: var(--ink3);
  transition: color var(--m-step) ease, opacity var(--m-press) ease; }
.xl .seg .seg-o[aria-pressed="true"], .xl-day[aria-pressed="true"] { background: none; color: var(--ink); }
.xl .seg .seg-o:active, .xl-day:active { transform: none; opacity: .55; }
.xl-better[hidden] { display: none; }
/* Time of day (js/exp/exp-line-time.js; F7: "Night" stood alone on a second row at 430 and 340): the five words on
   one row with a narrower gap where they fit.
   The row needs about 386 px of the sheet (a container query on the sheet's body, not the screen: at a computer the
   sheet stands in the 390 px phone frame); in a narrower sheet the words stand in two even rows of three columns
   (Any time · Morning · Afternoon, then Evening · Night under the first two), never one word alone. */
.xl { container-type: inline-size; }
.xl .seg.xl-time { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 20px; }
.xl .seg.xl-time .seg-o { justify-self: start; } /* the words line up at the left of their column, not centred */
@container (min-width: 388px) { .xl .seg.xl-time { display: flex; flex-wrap: nowrap; gap: 0 16px; } }
/* A narrow phone: the five kinds and the seven days each stay on one row. */
@media (max-width: 370px) { .xl .seg, .xl-days { gap: 0 12px; } .xl .seg .seg-o, .xl-day { font-size: 15px; } }