/* Daily Life Doc, round 2 (the look, variant 2D "Grid, then rows"; docs/look/looks.css is the source of these
   rules): Progress on an experiment's page, one value's own page, the Table, and the day marks and the thin line
   that the report and the Experiments list share. Files: js/exp/day-marks.js, exp-progress-entry.js, exp-value.js.
   No card, no tinted box, no pill, no arrow, nothing that folds inside Progress: rows parted by hairlines on the
   document's own sheet. Every colour is a token of css/base.css and the place's colour comes through --pc and
   --pc-d, so light and dark follow by themselves. Nothing appears on hover. */

/* ---------- Day marks: one mark per day, a small gap before each Monday ---------- */
.dm { flex: none; display: flex; align-items: center; height: 22px; }
.dm i { flex: none; width: 9px; display: grid; place-items: center; font-style: normal; }
.dm i.mon { margin-left: 5px; }
.dm .yes::before, .dm .no::before, .dm-key i, .dm-one { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; }
.dm-key i, .dm-one { flex: none; width: 7px; height: 7px; }
.dm .yes::before, .dm-key .yes, .dm-one.yes { background: var(--pc-d); }
.dm .no::before, .dm-key .no, .dm-one.no { box-shadow: inset 0 0 0 1.5px var(--ink3); }
/* Wide: the days spread over the full width (a Yes/No under its name, a value's own page). */
.dm.wide { justify-content: space-between; height: 34px; margin-top: 2px; padding: 0 38px; }
.dm.wide i { width: 8px; }
.dm.wide i.mon { margin-left: 0; }
.dm.wide .yes::before, .dm.wide .no::before { width: 8px; height: 8px; }
/* A number: a small bar per day, darker when the target was met. */
.dm.bars { align-items: flex-end; padding-bottom: 2px; }
.dm.bars i { align-self: flex-end; }
.dm.bars i.bar::before { content: ''; display: block; width: 5px; height: var(--h); border-radius: 1.5px; background: var(--pc); }
.dm.bars i.met::before { background: var(--pc-d); }
/* The row above a grid: "Mon 28" starts over its Monday. */
.dm.hd { height: 18px; }
.dm.hd i { overflow: visible; white-space: nowrap; justify-items: start; font-size: var(--t-2xs); line-height: 18px; color: var(--ink3); }
.dm.hd b { display: block; font-weight: 400; }
.dm-key { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: var(--t-xs); color: var(--ink2); }
.dm-key .no { margin-left: 12px; }
.dm-one { display: inline-block; margin-right: 7px; vertical-align: 1px; }

/* ---------- The thin line of a value ---------- */
.spark { display: block; max-width: 100%; height: auto; margin-top: 2px; overflow: visible; }
.spark .ax { font-size: 11.5px; fill: var(--ink2); font-family: var(--font); font-variant-numeric: tabular-nums; }
.sp-l { fill: none; stroke: var(--pc-d); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sp-e { fill: var(--pc-d); }
.sp-t { stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 2 4; }

/* ---------- Progress: a sheet of the document ---------- */
.prg-h { width: 100%; margin-bottom: 0; text-align: left; border-radius: 9px; }
.doc-h.sect.prg-h { margin-bottom: 0; }
.prg-h > small { margin-left: auto; }
.prg > .doc-fold-body { grid-template-columns: minmax(0, 1fr); }
.prg .prg-in > :first-child { margin-top: 16px; }
.prg-grp { margin: 20px 0 0; padding-bottom: 4px; font-size: var(--t-sm); font-weight: 600; line-height: 1.4; letter-spacing: .02em; color: var(--pc-d); }
.ag + .prg-grp, .prg-rows + .prg-grp, .dm-key + .prg-grp, .pv-chart + .prg-grp, .pv-top + .prg-grp { margin-top: 26px; }
.prg-rows > * + * { border-top: 1px solid var(--line); }

/* Actions: the names stay; the days are one grid beside them. Up to 14 days fit; with more the grid scrolls
   sideways inside itself (every row together) and starts at the newest day: the row is laid out from the right. */
.ag { display: flex; }
/* On a narrow phone the names keep a little over half the width; the grid then shows the newest days and scrolls. */
.ag-names { flex: 1 1 0; min-width: 55%; }
.ag-scroll { flex: 0 1 auto; min-width: 0; max-width: 136px; display: flex; flex-direction: row-reverse; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ag-scroll::-webkit-scrollbar { display: none; }
.ag-days { flex: none; }
.ag-r { box-sizing: border-box; width: 100%; height: 54px; display: flex; align-items: center; }
.ag-days .ag-r { justify-content: flex-end; }
.ag-r + .ag-r:not(:nth-child(2)) { border-top: 1px solid var(--line); }
.ag-r:nth-child(2) { height: 53px; }
.ag-r.hd { height: 18px; }
button.ag-r { padding-right: 8px; text-align: left; }
/* A long Action name takes two lines (round 3, open fault 32): a name's row grows, and its row of day marks is
   given the same height by js/exp/exp-progress-entry.js (level), because the two columns are separate boxes. */
.ag-names button.ag-r { height: auto; min-height: 54px; padding-top: 5px; padding-bottom: 5px; }
.ag-names button.ag-r:nth-child(2) { min-height: 53px; }
.ag-n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-n b { font-size: var(--t-m); font-weight: 400; line-height: 22px; overflow-wrap: anywhere; }
.ag-n small { font-size: var(--t-xs); line-height: 17px; color: var(--ink2); overflow-wrap: anywhere; }

/* Measures: the name with the average and the trend word, then the line. The whole row takes the tap. */
.pr-row { display: block; width: 100%; padding: 9px 0 8px; text-align: left; }
.pr-top { display: flex; align-items: baseline; gap: 12px; }
.pr-n { flex: 1; min-width: 0; font-size: var(--t-m); line-height: 24px; overflow-wrap: anywhere; }
.pr-r { flex: none; font-size: var(--t-m); line-height: 24px; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-r b { font-weight: 600; color: var(--ink); }
.mood.sm { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.ag-r:active, .pr-row:active, .pv-day:active { opacity: .6; }

/* ---------- One value's own page: the summary, the chart, the days ---------- */
.pv-doc { margin-top: 16px; }
.pv-top { margin-top: 14px; }
.pv-top .pr-n small { margin-left: 10px; font-size: var(--t-xs); color: var(--ink2); }
.pv-chart { margin-top: 8px; }
.pv-chart .ag-r { height: 34px; }
.pv-chart .ag-r.hd { height: 18px; }
.pv-chart.wide .dm { flex: 1; padding: 0 2px; margin-top: 0; }
.pv-chart .ag-scroll { max-width: none; }
.pv-day { width: 100%; min-height: 46px; padding: 10px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: left; font-size: var(--t-m); line-height: 24px; }
.pv-day > span { min-width: 0; }
.pv-day > b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-none { flex: none; color: var(--ink3); }

/* ---------- The Experiments list: the day marks of the last days on a card ---------- */
.xc-strip { margin-top: 2px; }

/* ---------- The Yes/No sheet of one day ---------- */
.xp-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xp-yn-o { height: 92px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--soft); font-size: var(--t-l); font-weight: 600;
  transition: background-color var(--m-step) ease, color var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.xp-yn-o i { width: 24px; height: 24px; }
.xp-yn-o[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.xp-yn-clear { margin-top: 10px; }

/* ---------- Table: days down, controls across, on one sheet. It scrolls sideways inside the sheet; the day column
   stays. Hairlines only: no tinted foot, and a Yes or a No is the same day mark as everywhere. ---------- */
.rep-name { margin: 2px 4px 12px; font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.rep-wrap { background: var(--surface); border-radius: 22px; overflow-x: auto; scrollbar-width: thin; }
.rep-empty { padding: 28px 16px; text-align: center; font-size: var(--t-m); color: var(--ink2); }
.rep { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: var(--t-s); }
.rep th, .rep td { border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; vertical-align: middle; }
.rep th, .rep tfoot td { padding: 12px; }
.rep thead th { font-weight: 600; color: var(--ink2); font-size: var(--t-xs); white-space: normal; min-width: 92px; max-width: 150px; vertical-align: bottom; line-height: 1.3; }
.rep th small { display: block; font-size: var(--t-2xs); font-weight: 500; color: var(--ink3); }
.rep th:first-child { position: sticky; left: 0; z-index: 1; min-width: 0; padding-left: 18px; text-align: left; font-weight: 500; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.rep tbody th { color: var(--ink); font-size: var(--t-s); }
/* A cell is a button: a tap enters that day's value. */
.rep tbody td { padding: 0; }
.rep-c { display: block; width: 100%; min-height: 46px; padding: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.rep-c:active { opacity: .6; }
.rep-c .dm-one { margin-right: 0; vertical-align: 0; }
.rep-none { font-style: normal; color: var(--ink3); }
.rep tfoot th, .rep tfoot td { border-bottom: 0; font-weight: 600; color: var(--ink); }
.rep tbody tr:last-child :is(th, td) { border-bottom-color: var(--ink3); }
/* A day a line is not due: an empty cell that takes no tap. */
.rep-off { background: transparent; }

/* ---------- Round 6: Progress on the experiment's page (js/exp/progress-draw.js; the drawing "The experiment's
   page, Progress" of docs/artifact/next/). A Measure is a small chart to scale with every value written at its point; an
   Action is its name, a count and the marks of the last seven days; a Tracking line is its name and the range of its
   values; Reasons lists why an Action was not done. Nothing here judges a value. ---------- */
.xg { display: block; width: 100%; margin-top: 6px; text-align: left; transition: opacity var(--m-press) ease; }
.xg:active, button.xm:active { opacity: .6; }
.xg-lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--t-m); line-height: 1.35; }
.xg-lbl span { min-width: 0; overflow-wrap: anywhere; }
.xg-lbl small { flex: none; font-size: var(--t-xs); color: var(--ink3); }
/* A measure with no answer yet: the quiet words under the name, as under an action. */
.xg-none { display: block; font-size: var(--t-xs); line-height: 1.35; color: var(--ink2); }
.xg svg { display: block; width: 100%; height: auto; margin-top: 2px; overflow: visible; }
.xg svg text { font-family: var(--font); font-size: 10.5px; fill: var(--ink3); stroke: none; }
.xg svg .xg-val { fill: var(--ink); font-weight: 600; font-size: 11.5px; }
.xg svg .xg-mk { fill: var(--pc-d); font-weight: 600; }
.xg-ax { fill: none; stroke: var(--line); stroke-width: 1; }
.xg-tk { fill: none; stroke: var(--ink3); stroke-width: 1; opacity: .6; }
.xg-ch { fill: none; stroke: var(--pc-d); stroke-width: 1; stroke-dasharray: 2 3; }
.xg-ln { fill: none; stroke: var(--exp-ink, #3C4D14); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.xg-pt { fill: var(--exp-ink, #3C4D14); stroke: none; }
/* The day letters belong to the rows under them: more air above the letters than under them. */
.xm-days { display: flex; gap: 5px; justify-content: flex-end; margin-top: 16px; font-size: var(--t-2xs); color: var(--ink3); }
.xm-days i { width: 11px; text-align: center; font-style: normal; }
.xm { display: flex; width: 100%; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); text-align: left; transition: opacity var(--m-press) ease; }
.xm-days + .xm, .xm.plain { border-top: 0; }
.xm.plain { padding: 7px 0; }
.xm-t { flex: 1; min-width: 0; font-size: var(--t-m); line-height: 1.35; overflow-wrap: anywhere; }
.xm-t small { display: block; font-size: var(--t-xs); color: var(--ink2); }
.xm-dots { flex: none; display: flex; gap: 5px; align-items: center; }
.xm-dots i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--exp-ink, #3C4D14); }
.xm-dots i.y { background: var(--exp-ink, #3C4D14); }
.xm-dots i.nd { height: 2px; border-radius: 1px; background: var(--line); box-shadow: none; }
:root:not([data-theme="light"]) .xprog { --exp-ink: #3C4D14; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xprog { --exp-ink: #B9CF7C; } }
:root[data-theme="dark"] .xprog { --exp-ink: #B9CF7C; }

/* ---------- Round 8: a Photo or Recording action on Progress and on the value's page (js/exp/progress-photos.js).
   Round 9: one group per day, the newest day first, the day's photos side by side in tiles of Today's size (72 px)
   and the day once under its group; the days stand side by side with a wider gap between days than between photos,
   and the row scrolls sideways, stopping at the start of a day. A Recording has one player per day with the heard
   words under the player. ---------- */
.xph { display: flex; gap: 18px; margin: 2px 0 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
.xph::-webkit-scrollbar { display: none; }
.xph-i { flex: none; min-width: 0; margin: 0; scroll-snap-align: start; }
.xph-d { display: flex; gap: 6px; }
.ph-t.xph-b { flex: none; width: 72px; height: 72px; border-radius: 14px; cursor: pointer; }
.xph-i figcaption { margin-top: 6px; font-size: var(--t-2xs); line-height: 16px; color: var(--ink2); white-space: nowrap; }
.xrec { margin: 0 0 8px; }
.xrec-i { display: flex; align-items: flex-start; gap: 12px; padding: 5px 0; }
.xrec-i > small { flex: none; width: 76px; padding-top: 9px; font-size: var(--t-xs); line-height: 16px; color: var(--ink2); }
.xrec-p { flex: 1; min-width: 0; display: block; }
.xrec-p .vn { display: flex; max-width: 264px; }
.xrec-p .vn-b { cursor: pointer; }
.xrec-p .mm-w { -webkit-line-clamp: 2; }
/* The value's page: a day's photo is a small picture at the right; a day's recording stands under the day. */
.pv-day.pv-photo { align-items: center; cursor: pointer; }
.ph-t.xph-s { width: 56px; height: 56px; border-radius: 12px; }
.pv-day.pv-recording { flex-direction: column; align-items: stretch; gap: 6px; cursor: pointer; }
.pv-day.pv-recording .mm-w { display: block; -webkit-line-clamp: unset; overflow: visible; font-weight: 400; }
div.pv-day { cursor: pointer; }