/* Daily Life Doc, round 12 (zone NB; the page "Habits, Rules and Texts", Parts 4, 5, 6, 16): the blocks the AI builds
   (the sealed frame on Today and the card New block with its live Patient view), the Drawing (pieces of one picture
   that open per day done; the care team's Make and Use) and the Jar (a clip per day done). One type scale (the
   tokens of css/base.css), no frames around single lines, every change faded or dropped in, reduce motion respected. */

/* A block the AI built: its own drawing in a sealed frame, the height it asks for (js/home/block-frame.js). */
.bf { display: block; width: 100%; height: 96px; border: 0; background: transparent; color-scheme: normal; transition: height 220ms var(--ease-out, ease); }
.hb-bf { margin-top: 2px; }
.hb-stand { animation: dd-fade 260ms ease both; }

/* The card New block: the steps at normal size, the label, the block working as the patient sees it, the checks. */
.pl-card { display: grid; gap: 8px; }
.pl-ask { margin: 0; font-size: var(--t-s); color: var(--ink2); line-height: 1.45; }
.pl-steps { display: grid; gap: 4px; }
.pl-now { margin: 0; font-size: var(--t-m); color: var(--ink); }
.pl-why { margin: 0; font-size: var(--t-xs); color: var(--ink3); line-height: 1.4; }
.pl-name { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; font-size: var(--t-m); color: var(--ink); }
.pl-new { padding: 2px 8px; border-radius: 10px; font-size: var(--t-2xs); font-weight: 600; color: var(--pc-d, var(--care-d)); background: var(--pc-bg, var(--care)); }
.pl-label { margin: 0; font-size: var(--t-xs); color: var(--ink3); line-height: 1.45; }
.pl-view { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--bg); }
.pl-k { font-size: var(--t-2xs); font-weight: 600; letter-spacing: .02em; color: var(--ink3); }
.pl-live { min-height: 40px; animation: dd-fade 260ms ease both; }
.pl-checks { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--ink2); }
.pl-checks li::before { content: '✓'; display: inline-block; width: 18px; color: var(--good); font-weight: 700; }
.pl-checks li.is-no::before { content: '·'; color: var(--ink3); }

/* The Drawing: a 4 × 4 picture; a closed piece is a quiet tint; an opened piece fades in. */
.hd-pic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; width: 100%; max-width: 320px; margin: 4px auto 0; aspect-ratio: 1; border-radius: 16px; overflow: hidden; }
.hd-c { position: relative; display: block; background: var(--soft); }
.hd-c::after { content: ''; position: absolute; inset: 0; background-image: var(--hd-src); background-size: 400% 400%; background-position: inherit;
  background-repeat: no-repeat; opacity: 0; transition: opacity 700ms ease; }
.hd-c.is-on::after { opacity: 1; }
.hd-c.is-new::after { animation: hd-in 900ms var(--ease-out, ease) both; }
@keyframes hd-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.hd-make:empty { display: none; }
.hd-make { margin-top: 10px; }
.hd-ask { display: grid; gap: 8px; }
.hd-in { width: 100%; min-height: 64px; padding: 10px 12px; border: 0; border-radius: 12px; font: inherit; font-size: var(--t-s); color: var(--ink); background: var(--bg); resize: vertical; }
.hd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hd-b { justify-self: start; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; font: inherit; font-size: var(--t-s); font-weight: 600; color: var(--ink); background: var(--soft);
  transition: transform var(--m-press, 120ms) var(--ease-out, ease); }
.hd-b:active { transform: scale(.96); }
.hd-b:disabled { opacity: .45; }
.hd-b.is-ink { color: var(--on-ink); background: var(--ink); }
.hd-b.is-quiet { color: var(--ink2); background: none; padding: 0 6px; }
.hd-pend .im-box { max-width: 320px; margin: 0 auto; }
.hd-pend .im-pic { display: block; width: 100%; border-radius: 16px; }
.xp-drawing .hd-kept { margin: 8px 0 0; }
.xp-drawing figcaption { margin-top: 6px; font-size: var(--t-xs); color: var(--ink3); text-align: center; }

/* The Jar: a glass jar, a paper clip per day done; the new clip falls in. */
.hj-body { display: flex; justify-content: center; }
.hj-svg { width: 132px; height: auto; overflow: visible; }
.hj-glass { fill: color-mix(in srgb, var(--surface) 70%, transparent); stroke: var(--ink3); stroke-width: 1.6; }
.hj-lid { fill: var(--soft); stroke: var(--ink3); stroke-width: 1.4; }
.hj-shine { fill: none; stroke: var(--surface); stroke-width: 4; opacity: .7; }
.hj-clip path { stroke: var(--exp-a, var(--ink2)); }
.hj-clip:nth-child(3n) path { stroke: var(--ink2); }
.hj-clip.is-new { animation: hj-drop 700ms cubic-bezier(.3, .7, .4, 1.1) both; }
@keyframes hj-drop { from { translate: 0 -96px; opacity: 0; } 30% { opacity: 1; } to { translate: 0 0; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .bf, .hd-c::after, .hd-b { transition: none; }
  .hd-c.is-new::after, .hj-clip.is-new, .pl-live, .hb-stand { animation: none; }
}

/* + Block: a block the AI built, with New and Remove from the library (asked once in place). */
.bl-row { display: grid; }
.bl-new { margin-left: 8px; padding: 1px 7px; border-radius: 10px; font-size: var(--t-2xs); font-weight: 600; color: var(--pc-d, var(--care-d)); background: var(--pc-bg, var(--care)); vertical-align: 2px; }
.bl-rm { justify-self: start; min-height: 36px; margin: -6px 0 6px; padding: 0 2px; border: 0; background: none; font: inherit; font-size: var(--t-xs); color: var(--ink3); }
.bl-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.bl-ask p { flex: 1 1 100%; margin: 0; font-size: var(--t-s); color: var(--ink2); }

/* The card in the Today editor's Ask AI panel. */
.pl-in { display: grid; gap: 8px; margin: 8px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--care, #F7DDE3); }
.pl-in > .pl-k { margin: 0; color: var(--care-d, #82304A); }
.pl-acts { display: flex; gap: 8px; }
.pl-card > .cn-again, .pl-card > .cn { justify-self: stretch; }
.pl-card > .cn-again { justify-self: start; }