/* Daily Life Doc, round 12 (zone H): the new Today (js/home/home*.js; PLAN 2.1). One column of blocks under the fixed
   top. A block is a section `.hb` with its Size (`hb-size-normal|large`) and Style (`hb-style-plain|card|highlight`);
   the Look is on `.home` (data-look = the colour set of css/themes.css; `hb-text-large`, `hb-space-roomy`). One type
   scale (the tokens --t-2xs … --t-xxl of css/base.css), real padding, rows at least 44 px, the screen's own 16 px
   gutter. The rows inside Actions, Measures and a plain row are Today's rows as built (css/today.css, lines.css):
   here they only lose the old sheet's box. Zone E's marks in Edit are css/home-edit.css. */

.home { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }
.home.hb-space-roomy { gap: 18px; }
.home-top:empty { display: none; }
.home-body { min-height: 40px; }

/* The column of blocks. */
.hb-col { display: flex; flex-direction: column; gap: 12px; }
.hb-space-roomy .hb-col, .hb-col.hb-space-roomy { gap: 18px; }
.hb { position: relative; min-width: 0; border-radius: 22px; }
.hb[hidden] { display: none; }
.hb-style-card { background: var(--surface); padding: 14px 16px 16px; box-shadow: 0 1px 0 var(--line); }
.hb-style-plain { padding: 2px 4px; }
.hb-style-highlight { background: color-mix(in srgb, var(--today, var(--pc)) 14%, var(--surface)); padding: 14px 16px 16px; }
.hb-space-roomy .hb-style-card, .hb-space-roomy .hb-style-highlight { padding: 18px 18px 20px; }

/* A block's head: its name at the left, a quiet word at the right ("3 of 5", "Last 7 days"). */
.hb-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.hb-ht { flex: 1; min-width: 0; margin: 0; font-size: var(--t-m); font-weight: 600; line-height: 1.3; color: var(--ink); }
.hb-hc { flex: none; font-size: var(--t-sm); color: var(--ink3); }
.hb-hc.is-all { color: var(--done, var(--good)); font-weight: 600; }
.hb-quiet { margin: 4px 0; font-size: var(--t-s); color: var(--ink3); }
.hb-new .hb-h::after, .hb-new.hb-plainhead::before { content: 'New'; flex: none; padding: 2px 8px; border-radius: 10px; font-size: var(--t-2xs); font-weight: 600; color: var(--pc-d); background: var(--pc-bg); }
.hb-new:not(:has(.hb-h))::before { content: 'New'; position: absolute; top: 10px; right: 12px; padding: 2px 8px; border-radius: 10px; font-size: var(--t-2xs); font-weight: 600; color: var(--pc-d); background: var(--pc-bg); z-index: 1; }

/* Large: the whole block one step up, in css/home-large.css (fixer JF6). */
.hb-text-large .hb-ht { font-size: var(--t-l); }
.hb-text-large .ln-t, .hb-text-large .hb-quiet, .hb-text-large .hb-msg-w, .hb-text-large .hb-ins .ins-w { font-size: var(--t-l); }

/* The rows of Today (parts-view.js) inside a block: no sheet of their own. */
.hb .doc.tp { display: block; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.hb .tp-parts .tp-part > .tp-h { display: none; }
.hb .tp-parts .tp-part + .tp-part { margin-top: 0; }
.hb .tp-row { min-height: 44px; }
/* DF1: the action the Next block shows is folded out of Actions (js/home/home-rows.js). */
.hb .tp-row.is-innext { display: none; }
/* Review RF2 (P9): with a Next block on Today the open actions fold behind one line "8 more for today ›". */
.hb .tp-row[data-fold] { display: none; }
.hb-more { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: var(--t-sm); color: var(--ink2); text-align: left; cursor: pointer; }
.hb-more i { font-style: normal; color: var(--ink3); }
.hb-more:active { opacity: .6; }
/* DF1 (DESIGN-1 finding 11): Yes and No are 44 px tall targets with 12 px between them: padding around the word,
   taken back by a negative margin, so the words and the line stay where they were. */
.hb .cc.yn > button { padding: 9px 4px; margin: -9px -4px; }
.hb .cc.yn > button + button { margin-left: 16px; } /* 16 px from the end of the Yes button, which reaches 4 px past its word: 12 px between the two targets */
.hb .tp-tail:empty { display: none; }
.hb-kept { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.hb-kept[hidden] { display: none; }
.hb-kept.is-alone { margin-top: 0; padding-top: 0; border-top: 0; }
.hb-from { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--ink3); }

/* Next: one action, large. */
/* WALK-0 fault 4: no padding under the row, so the space under Yes / No equals the card's own top padding. */
.hbt-next .tp-row { padding: 8px 0 0; }
.hbt-next .tp-row .ln-t { font-size: var(--t-l); line-height: 1.4; }
.hb-nx { position: relative; min-height: 48px; }
.hb-nx:has(> .hb-quiet) { min-height: 0; } /* DF1: "Nothing left for today" takes its own height, no empty band */

/* Done: one large button. */
.hb-big { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; border-radius: 16px;
  font-size: var(--t-l); font-weight: 600; color: var(--on-nav); background: var(--nav); transition: background-color 260ms ease, color 260ms ease, transform var(--m-press) var(--ease-out); }
.hb-big:active { transform: scale(.98); }
.hb-big.is-done { color: var(--on-done, #fff); background: var(--done, var(--good)); }
.hb-big i { display: inline-flex; width: 22px; height: 22px; }
.hb-big i svg { width: 100%; height: 100%; }

/* Counter: the number large, "of 8", and +1. */
.hb-count { display: flex; align-items: center; gap: 14px; }
.hb-num { flex: 1; display: flex; align-items: baseline; gap: 8px; min-height: 56px; text-align: left; color: var(--ink); }
.hb-num b { font-size: var(--t-xxl); font-weight: 600; min-width: 1.4em; }
.hb-num small { font-size: var(--t-s); color: var(--ink3); }
.hb-count.is-done .hb-num b { color: var(--done, var(--good)); }
/* WALK-0 fault 5: +1 and Done take the Look's colour, as the + button does (css/shell.css .plus); the number is a soft
   tinted button like every other value a tap corrects (a tap opens the − / + sheet). */
.hb-num { padding: 0 14px; border-radius: 16px; background: var(--soft); transition: background-color 200ms ease; }
.hb-num:active { background: color-mix(in srgb, var(--ink) 8%, var(--soft)); }
.hb-plus { flex: none; width: 64px; height: 56px; border-radius: 16px; font-size: var(--t-l); font-weight: 600; color: var(--on-nav); background: var(--nav); transition: transform var(--m-press) var(--ease-out); }
.hb-plus:active { transform: scale(.94); }

/* Rating: 1 to 10 as two rows of five; a Mood as its five faces (css/mood.css). */
.hb-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hb-scale button { min-height: 44px; border-radius: 12px; font-size: var(--t-m); font-weight: 600; color: var(--ink2); background: var(--soft); transition: background-color 200ms ease, color 200ms ease; }
.hb-scale button[aria-pressed="true"] { color: var(--on-ink); background: var(--ink); }
.hbt-rating .mood-row { justify-content: space-between; }

/* Note: the patient's own words, or "Type here". */
.hb-note { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px; text-align: left; white-space: pre-wrap; font-size: var(--t-m); line-height: 1.45; color: var(--ink); background: var(--soft); }
.hb-note.is-open { color: var(--ink3); }

/* Progress: the days as a path. */
.hb-pg { display: flex; gap: 4px; margin: 6px 0 8px; }
.hb-pg-s { flex: 1; height: 8px; border-radius: 4px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.hb-pg-s.is-past { background: color-mix(in srgb, var(--ink3) 18%, var(--soft)); box-shadow: none; }
.hb-pg-s.is-rec { background: var(--done, var(--good)); box-shadow: none; }
.hb-pg-s.is-now { box-shadow: 0 0 0 2px var(--ink); }
.hb-pg-s.is-before:not(.is-rec) { background: repeating-linear-gradient(135deg, var(--soft) 0 3px, var(--line) 3px 5px); }
.hb-pg-w { display: flex; justify-content: space-between; margin: 0; font-size: var(--t-xs); color: var(--ink3); }
/* WALK-0 fault 6: the next agreed call, a dot over its day and its words between Start and Report. */
.hb-pg-s.is-call { position: relative; }
.hb-pg-s.is-call::after { content: ''; position: absolute; left: 50%; top: -7px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ink2); }
.hb-pg-w .hb-pg-call { color: var(--ink2); font-weight: 500; }

/* Chart and Results. */
.hb-chart { min-height: 72px; }

/* Days done: 14 squares. */
.hb-dds + .hb-pg-w { margin-top: 8px; }
.hb-dds { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.hb-dd { aspect-ratio: 1; border-radius: 5px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.hb-dd.is-yes { background: var(--done, var(--good)); box-shadow: none; }
.hb-dd.is-no { background: color-mix(in srgb, var(--ink3) 22%, var(--soft)); box-shadow: none; }
.hb-dd.is-now { box-shadow: 0 0 0 2px var(--ink); }

/* Character: in the flow, centred. */
.hb-char { display: flex; justify-content: center; padding: 8px 0 4px; }
.hb-char .char[data-where="middle"] { position: relative; }

/* Insight, Message, Audio, Document. */
.hb-msg-w { margin: 6px 0 0; font-size: var(--t-m); line-height: 1.5; color: var(--ink); }
.hb-msg { cursor: pointer; }
.hb-ins .ins { padding: 2px 0 0; }
.hb-ins .ins-pic { margin: 0 0 10px; }
.hb-ins .ins-pic img { width: 100%; border-radius: 14px; }
.hb-ins .ins-chart { margin: 8px 0 0; }
.hb-msg .rq-voice { margin: 4px 0; }
.hb-in .dk { margin: 0; }
.hb-in .dk-pic img { width: 100%; border-radius: 14px; }
.hb-docl { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; text-align: left; color: var(--ink); }
.hb-docl > i:first-child { flex: none; display: inline-flex; width: 22px; height: 22px; color: var(--ink2); }
.hb-docl span { flex: 1; min-width: 0; font-size: var(--t-m); }
.hb-audio .hb-ht { margin-bottom: 6px; }

/* The page arrives softly once; reduce motion: at once. */
.home .home-body { opacity: 0; }
.home.is-in .home-body { opacity: 1; transition: opacity 240ms ease; }
@media (prefers-reduced-motion: reduce) { .home.is-in .home-body { transition: none; } }

/* The header's title as a button (DD.shell.setHead). */
.top .top-go { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.top .top-go .chev { flex: none; }

/* The place sheet for today: the home place as one row. */
.pls .pls-home { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 4px; padding: 0 4px; border-top: 1px solid var(--line); font-size: var(--t-m); color: var(--ink); text-align: left; }
.pls .pls-home > svg, .pls .pls-home > i { flex: none; width: 18px; height: 18px; color: var(--ink3); }

/* A document block on Today stands in the block's own card: its own soft box goes, its head is the block's head. */
.hb > .dk-run, .hb > .dk-cmp, .hb .hb-in > .dk-cmp, .hb > .dk-chart { padding: 0; background: none; border-radius: 0; }
/* Every document block's own small heading reads as a block head (one type scale). */
.hb .dk-h { margin: 0 0 6px; font-size: var(--t-m); font-weight: 600; line-height: 1.3; color: var(--ink); }
.hb .hb-doc-in > .dk > .dk-h, .hb .hb-doc-in > .dk-text > h3 { font-size: var(--t-m); font-weight: 600; color: var(--ink); margin: 0 0 6px; }
/* Review RF2 (P1): the experiment's reason under the Progress block's head. */
.hb-pg-why { margin: -2px 0 10px; font-size: var(--t-sm); line-height: 1.4; color: var(--ink2); }