/* =====================================================================
   FEATURE · HOME (Tehtävät, #vD) · daily dose
   Golden mockups 02-home, 09-light, 10-theme, 08-overlays (toast).
   The page is built from the component library (.mast, .statgrid, .sec,
   .row, .postit.dose, .opt, .challenge, .signoff, .helplink).
   This file only adds the glue those components need here: buttons used as
   rows, the answered-dose states of the three option types, the "this
   week" strip and the progress sheet calendar. Role tokens only; no colours
   of its own.
   ===================================================================== */

/* ---------- masthead + data box ---------- */
/* the headline (#hHead, .display.fit) and the level name size themselves to their box: uLv / _hmStatic
   set --ch from the measured text width (progress.js _hmCh). Older WebKit keeps the plain size. */
.home__stats .statcell{min-width:0;container-type:inline-size}
.home__stats #lN{font-size:min(21px,calc(100cqi * 1.25 / var(--ch,10)))}
.home__lvlbar>i{transition:width var(--d3) var(--ease-out)}
/* weekday initials under the 7-day strip, aligned with the segments */
.wkdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;
  font-family:var(--f-type);font-weight:700;font-size:var(--t-label);line-height:1.2;letter-spacing:.04em;text-transform:uppercase;text-align:center;color:var(--fg-3)}
.wkdays .is-today{color:var(--fg)}

/* ---------- 01 · tasks and 04 · progress: checklist rows as real buttons ---------- */
.home__tasks .row,.home__prog .row{width:100%;text-align:left;font:inherit;color:inherit}
.home__tasks .row:active .tick{transform:scale(.92)}
.home__tasks .is-done .row:active .tick{transform:rotate(-5deg) scale(.92)}
.prow__ic{width:28px;height:28px;flex:none;display:grid;place-items:center;color:var(--fg-2)}
.prow__ic .ic{width:22px;height:22px}

/* ---------- 02 · daily dose (a .postit.dose) ---------- */
.dose{scroll-margin-top:calc(var(--hdr-h) + var(--st) + var(--s4))}
.dose:focus{outline:none}
.dose:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.dose__cn{margin-top:var(--s3);font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.dose__cn .ic{color:var(--fg-2)}
/* option body: the line itself + (once answered) its type label underneath */
.dose .opt__b{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.dose .opt__t{flex:none;max-width:100%}
.dose .opt[aria-disabled="true"]{cursor:default}
.dose .opt[aria-disabled="true"]:active{transform:none}
/* the row under an answered line: its type (sentence case, it is a pattern name / a validating note)
   and, on the user's own pick, "Valintasi". Full width, so long lines never get squeezed. */
.opt__tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;max-width:100%}
.opt__lab{display:inline-flex;align-items:flex-start;gap:6px;max-width:100%;font-weight:var(--w-strong);font-size:14px;line-height:1.3}
.opt__lab .ic{flex:none;margin-top:1px}
.opt__lab--harm{color:var(--signal)}
.opt__lab--coping{color:var(--fg-2)}
.opt__ok,.opt__you{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-type);font-weight:700;font-size:var(--t-label);line-height:1.2;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.opt__ok .ic{width:16px;height:16px;stroke-width:2.8}
.opt__you{padding:2px 6px;border:var(--line) solid currentColor;border-radius:var(--r1)}
.dose .opt.is-wrong .opt__you{color:var(--signal)}
/* a dimmed option keeps its label legible: the label is the lesson */
.dose .opt.is-dim .opt__lab--coping{color:var(--fg-2)}
/* coping = the user's own understandable reaction: cream paper on the note, never "wrong" */
.dose .opt.is-coping{background:var(--note-cream);color:var(--ink);border:var(--bold) solid var(--ink)}
.dose .opt.is-coping .opt__k{background:var(--ink);color:var(--note-cream);border-color:var(--ink)}
.dose .opt.is-coping .opt__lab--coping{color:var(--ink-2)}
/* feedback, the "Muista" slip, next */
.dose__res:empty{display:none}
.dose__fb p+p{margin-top:var(--s2)}
.dose__lead strong{font-weight:var(--w-black)}
.dose__lead .badge{margin-left:6px;vertical-align:1px}
.dose__kind{color:var(--fg-2)}
.dose__nopts,.dose__task{margin-top:var(--s3)}
.dose__pe{--tilt:.6deg;margin-top:var(--s6);box-shadow:var(--sh-sticker)}
.dose__pet{margin-top:var(--s2);font-weight:var(--w-strong);font-size:16px;line-height:1.45;text-wrap:pretty}
.dose__next{margin-top:var(--s5)}
.dose__res .link{color:var(--fg)}
.dose__safe:empty{display:none}
.dose__safe .safety{margin-top:var(--s6)}
.dose.is-alldone .dose__q{font-size:26px}

/* ---------- 03 · weekly challenge: the whole row opens the recognition game ---------- */
.home__chal{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.home__chal .challenge__bar{min-width:0}
.home__chal:active{transform:translateY(1px)}

/* ---------- footer ---------- */
.home__foot .helplink{margin-top:var(--s2)}

/* ---------- Edistyminen sheet (openProgress) ---------- */
.psec+.psec{margin-top:var(--s7)}
.progsheet .signoff{margin-top:var(--s6)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:360px}
.cal__h{font-family:var(--f-type);font-weight:700;font-size:var(--t-label);letter-spacing:.04em;text-transform:uppercase;text-align:center;color:var(--fg-3)}
.cal__d{aspect-ratio:1/1;display:grid;place-items:center;border:var(--line) solid var(--rule-2);border-radius:var(--r1);
  font-family:var(--f-type);font-weight:700;font-size:var(--t-label);color:var(--fg-3);font-variant-numeric:tabular-nums}
.cal__d.is-on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.cal__d.is-today{border:var(--bold) solid var(--fg);color:var(--fg)}
.cal__d.is-on.is-today{color:var(--bg);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--fg)}
.cal__d.is-future{border-color:var(--rule);color:var(--fg-3)}