/* Daily Life Doc, round 32 (zone C1): the Progress and Your plan blocks of an app on the client's link page
   (js/blocks/qblocks-progress.js, .prg-*). Drawn in HTML to scale at a phone's width (430 and 340 px): 14 columns
   that share the width, values in ink above the bars, a recessive dashed target line, the day's letter and date
   under each column; tokens only (css/base.css), so dark mode follows. Words are ink, never the bar's colour; a
   mark's meaning is its shape (a check, a cross, an empty dot) with its words under the row. */

.prg { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border-radius: 16px; background: var(--field); min-width: 0; }
.prg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.prg-head h3 { margin: 0; font-size: var(--t-m); font-weight: 600; line-height: 1.3; color: var(--ink); }
.prg-head span { font-size: var(--t-xs); font-weight: 500; color: var(--ink2); font-variant-numeric: tabular-nums; }
.prg .prg-empty { margin: 0; line-height: 1.4; font-size: var(--t-s); color: var(--ink3); }
.prg .prg-sub { display: block; margin: -4px 0 0; line-height: 1.3; font-size: var(--t-xs); color: var(--ink2); }
.prg .dots { align-self: center; }

/* Numbers: 14 columns over a plot 128 px high; the bar grows from the baseline, rounded at its top only. */
.prg-plot { position: relative; height: 128px; margin-top: 14px; border-bottom: 1px solid color-mix(in srgb, var(--ink3) 35%, transparent); }
.prg-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.prg-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; height: 100%; }
.prg-bar { flex: none; display: block; width: 100%; max-width: 22px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--sage) 70%, var(--card));
  transform-origin: bottom; animation: prg-grow 420ms var(--ease-out) both; }
.prg-bar.met { background: var(--sage); }
.prg-v { flex: none; position: relative; margin-bottom: 3px; font-size: 10.5px; font-weight: 600; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: nowrap; letter-spacing: -0.02em; }
.prg-none { display: block; width: 5px; height: 5px; margin-bottom: 4px; border-radius: 50%; background: color-mix(in srgb, var(--ink3) 55%, transparent); }
.prg-target { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--ink3); z-index: 1; pointer-events: none; }
.prg-dash { display: inline-block; width: 16px; height: 0; border-top: 1.5px dashed var(--ink3); }
/* Several named values (Mood and Energy): one chart per value under its name, a line between them. */
.prg-one { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.prg-one + .prg-one { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--ink3) 22%, transparent); }
.prg-name { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.prg-name b { font-size: var(--t-s); font-weight: 600; color: var(--ink); }
.prg-name span { font-size: var(--t-xs); color: var(--ink2); font-variant-numeric: tabular-nums; }
.prg-one .prg-plot { margin-top: 4px; height: 96px; }
@keyframes prg-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* The day row under 14 columns: the weekday's letter over the date. */
.prg-days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; margin-top: -4px; }
.prg-days span { display: flex; flex-direction: column; align-items: center; font-size: 10.5px; line-height: 1.25; color: var(--ink2); font-variant-numeric: tabular-nums; }
.prg-days i { font-style: normal; color: var(--ink3); }

/* Yes/No and Target: one mark a day. Done is a filled circle with a check, not done an outlined circle with a cross,
   no answer an empty dot. */
.prg-row { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.prg-row > span { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.prg-row small { min-height: 13px; font-size: 10.5px; font-weight: 600; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prg-dot { display: grid; place-items: center; box-sizing: border-box; width: min(20px, 100%); aspect-ratio: 1; border-radius: 50%; }
.prg-dot svg { width: 72%; height: 72%; stroke-width: 2.6; }
.prg-dot.yes { background: var(--sage); color: var(--on-ink); }
.prg-dot.no { box-shadow: inset 0 0 0 1.5px var(--ink3); color: var(--ink3); }
.prg-dot.nil { width: 6px; height: 6px; margin: 7px 0; background: color-mix(in srgb, var(--ink3) 55%, transparent); }
.prg-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--t-xs); color: var(--ink2); }
.prg-key span { display: inline-flex; align-items: center; gap: 6px; }
.prg-key .prg-dot { width: 14px; }
.prg-key .prg-dot.nil { width: 6px; margin: 0 4px; }

/* Weekly: a row per week, the goal's marks filled by the days done. */
.prg-weeks { display: flex; flex-direction: column; gap: 8px; }
.prg-week { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; font-size: var(--t-s); }
.prg-wn { color: var(--ink2); font-size: var(--t-xs); }
.prg-week b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.prg-segs { display: flex; gap: 3px; min-width: 0; }
.prg-seg { flex: 1; height: 12px; max-width: 46px; border-radius: 4px; background: color-mix(in srgb, var(--ink3) 22%, transparent); }
.prg-seg.on { background: color-mix(in srgb, var(--sage) 70%, var(--card)); }
.prg-week.met .prg-seg.on { background: var(--sage); }

/* Words: the newest answers under their days. */
.prg .prg-words { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prg .prg-words li { font-size: var(--t-s); display: flex; flex-direction: column; gap: 2px; }
.prg-words small { font-size: var(--t-xs); color: var(--ink3); }
.prg-words span { font-size: var(--t-s); line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }

/* Photos: three to a row, the day under the first picture of the day. */
.prg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.prg-ph { margin: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prg-ph img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--soft); display: block; }
.prg-ph figcaption { font-size: var(--t-2xs); color: var(--ink2); }

/* Your plan: the thing in bold, when under it. */
.prg .prg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.prg .prg-list li { font-size: var(--t-s); display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--ink3) 22%, transparent); }
.prg .prg-list li:first-child { border-top: 0; padding-top: 2px; }
.prg-list b { font-size: var(--t-s); font-weight: 600; color: var(--ink); }
.prg-list span { font-size: var(--t-s); color: var(--ink2); }

/* Together (round 33, zone T; js/blocks/qblocks-together.js): one box per shared activity, a row per person with the
   name, seven day marks Monday to Sunday (filled = done) and "n/7". The marks share the width up to 28 px each. */
.tg-grid { display: flex; flex-direction: column; gap: 8px; }
.tg-row { display: grid; grid-template-columns: minmax(40px, 76px) repeat(7, minmax(0, 28px)) minmax(30px, 1fr);
  align-items: center; gap: 6px; font-size: var(--t-s); }
.tg-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.tg-day { display: block; width: 100%; aspect-ratio: 1; border-radius: 7px;
  background: color-mix(in srgb, var(--ink3) 18%, transparent); }
.tg-day.on { background: var(--sage); }
.tg-n { text-align: right; font-size: var(--t-xs); color: var(--ink2); font-variant-numeric: tabular-nums; }
.tg-letters { margin-bottom: -2px; font-size: var(--t-2xs); color: var(--ink3); }
.tg-letters span { text-align: center; }

@media (prefers-reduced-motion: reduce) { .prg-bar { animation: none; } }