/* Easy Now, 30-Day Puppy Plan. The unified mockup direction.
   A ("Sticker Book") is the base, quietened with B ("Sketchbook"): B's plain paper, B's frameless drawings, B's ruled lists.
   The plan screen carries C's thirty-day board. The bottom navigation is A's, untouched.

   The rules that organise every surface:
     plum outline + hard plum shadow   = a button. There are only a few on a screen (Next, Hard day?, Open day 19, Back to the card).
     a row under a fine pen line       = one of a list (an answer, a day, a card, a ladder). A list is never a stack of boxes.
     butter                            = now, and chosen: today, the goal, the answer that is picked.
     flat tinted band                  = you read this (goal, don't, what to expect).
     dashed plum outline               = yours to tick (Done when, the hard-day minimum, ladder passes).
     solid plum                        = stop, this needs a person. On the plan screen, and only there, it is the thirty-day board.
   The pen: the thin plum line of the drawings also rules the lists, brackets a note in the margin, and draws the ring
   around the puppy's photo.
   Only three things tilt: the day badge (and its small twin in the Today row), a pill on the edge of a butter band
   (Goal, Check this first), and the handwritten note beside a drawing. Small text is always plum. */

:root {
  --butter:#FFE27A; --butter-l:#FFF3C9; --coral:#FF7A6B; --coral-d:#E85F50; --coral-l:#FFE5E1;
  --sky:#8EC9F2; --sky-l:#E2F1FB; --plum:#3A2650; --plum-2:#4E3968; --plum-dim:#C9BEDA; --plum-t:#EFEBF3;
  --cream:#FFF8EA; --paper:#FFFCF5; --ink2:#5D4F70; --white:#FFFFFF;
  --plum-28:rgba(58,38,80,.28);
  --disp:"Shantell Sans","Comic Sans MS",sans-serif; --body:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  --wob:255px 15px 225px 15px / 15px 225px 15px 255px;      /* the hand-cut edge of the buttons and inputs */
  --wob-b:15px 225px 15px 255px / 255px 15px 225px 15px;     /* its mirror */
  --soft:22px 18px 24px 17px / 18px 24px 17px 22px;          /* bands and boxes: rounded, slightly uneven */
  --row:16px 13px 17px 12px / 13px 17px 12px 16px;           /* the highlight on a chosen row */
  /* a line ruled by hand: nearly straight, drifting by a pixel */
  --rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 4' preserveAspectRatio='none'%3E%3Cpath d='M1 2.4C48 1.3 112 3.1 170 2.1 226 1.2 264 2.9 299 1.8' fill='none' stroke='%233A2650' stroke-opacity='.3' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --rule-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 4' preserveAspectRatio='none'%3E%3Cpath d='M1 1.7C44 2.9 98 1.2 152 2.2 208 3.1 252 1.4 299 2.5' fill='none' stroke='%233A2650' stroke-opacity='.3' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bracket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 100' preserveAspectRatio='none'%3E%3Cpath d='M7.6 1.2C3.6 1.6 1.9 3.4 1.7 7.5 1.3 34 2.6 62 1.5 92.5 1.7 96.6 3.4 98.4 7.8 98.8' fill='none' stroke='%233A2650' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --gut:20px; --nav-h:68px;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; position:relative; background:var(--paper); color:var(--plum);
  font:500 1.0625rem/1.5 var(--body); overflow-x:hidden; -webkit-tap-highlight-color:transparent; }
h1, h2, h3, p, ul, ol, figure { margin:0; }
ul, ol { padding:0; list-style:none; }
h1, h2, h3 { font-family:var(--disp); font-weight:800; text-wrap:balance; }
p, li { text-wrap:pretty; }
a { color:inherit; }
button, input { font:inherit; color:inherit; }
button { cursor:pointer; }
svg { display:block; }
[hidden] { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
:focus-visible { outline:3px solid var(--plum); outline-offset:3px; }

/* ---------- page frame ---------- */
#app { position:relative; max-width:480px; margin:0 auto; }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:62px; padding:14px var(--gut) 0; }
.lock { display:inline-flex; align-items:center; gap:8px; min-height:44px; text-decoration:none; font:800 1.2rem/1 var(--disp); }
.lock img { width:38px; height:38px; display:block; }
.page { padding:0 var(--gut) calc(var(--nav-h) + 32px); }

/* ---------- buttons: the only things with a plum outline and a hard shadow ---------- */
.btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:58px; padding:14px 18px 15px;
  font:800 1.3rem/1.1 var(--disp); color:#fff; background:var(--coral-d); border:3px solid var(--plum); border-radius:var(--wob);
  box-shadow:5px 5px 0 var(--plum); text-decoration:none; text-align:center; transition:transform .08s, box-shadow .08s; }
.btn:active { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--plum); }
.btn.quiet { background:var(--white); color:var(--plum); font-size:1.1rem; min-height:52px; box-shadow:4px 4px 0 var(--plum); border-radius:var(--wob-b); }
.btn.small { width:auto; min-height:44px; padding:8px 15px 9px; font-size:1rem; border-width:2.5px; box-shadow:3px 3px 0 var(--plum); background:var(--white); color:var(--plum); }
.btn.small:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--plum); }
.btn.small[aria-expanded="true"] { background:var(--butter); transform:translate(2px,2px); box-shadow:1px 1px 0 var(--plum); }
.btn.quiet[aria-pressed="true"] { background:var(--butter); transform:translate(3px,3px); box-shadow:1px 1px 0 var(--plum); }
.x { width:44px; height:44px; display:grid; place-items:center; padding:0; background:var(--white); border:2.5px solid var(--plum); border-radius:50%;
  box-shadow:2px 2px 0 var(--plum); transition:transform .08s, box-shadow .08s; }
.x:active { transform:translate(2px,2px); box-shadow:0 0 0 var(--plum); }
.x svg { width:20px; height:20px; }

.textlink { display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 6px 0 0; font:700 1rem/1.2 var(--body);
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--coral); background:none; border:0; }
.textlink svg { width:20px; height:20px; }

/* ---------- labels ---------- */
.pill { display:inline-block; padding:5px 13px 7px; border-radius:999px; background:var(--plum); color:var(--butter);
  font:800 1.05rem/1 var(--disp); transform:rotate(-2.5deg); white-space:nowrap; }
.pill.flat { transform:none; font-size:.95rem; padding:5px 12px 6px; }
.pill.stopper { background:var(--coral-d); color:#fff; font-size:1.15rem; padding:5px 14px 7px; transform:none; }
.label { font-weight:800; }
.label::after { content:":"; }
.minor { color:var(--ink2); font-size:.92rem; line-height:1.45; font-weight:600; }

/* ---------- flat bands: reading ---------- */
.band { border-radius:var(--soft); padding:16px 18px 17px; }
.band.butter { background:var(--butter); }
.band.sky { background:var(--sky-l); }
.goal { position:relative; margin-top:30px; padding-top:22px; font-weight:700; font-size:1.12rem; line-height:1.4; }
.goal .pill { position:absolute; left:14px; top:-14px; }

/* ---------- lists: rows under a pen line ---------- */
.ruled > * { position:relative; }
.ruled > * + *::before { content:""; position:absolute; left:10px; right:10px; top:-2px; height:4px; background:var(--rule) center / 100% 100% no-repeat; pointer-events:none; }
.ruled > :nth-child(even)::before { background-image:var(--rule-b); }
.ruled > :nth-child(3n)::before { transform:scaleX(-1); left:13px; right:8px; }
.ruled > :nth-child(3n+1)::before { left:8px; right:14px; }
/* a chosen row is a butter band: the lines next to it step back */
.ruled > .on::before, .ruled > .on + *::before,
.ruled > :has(> .is-today)::before, .ruled > :has(> .is-today) + *::before,
.ruled > :has(> .is-picked)::before, .ruled > :has(> .is-picked) + *::before { opacity:0; }

/* ---------- the day badge ---------- */
.badge { flex:none; width:84px; height:84px; border-radius:50%; background:var(--coral); border:3px solid var(--plum); box-shadow:4px 4px 0 var(--plum);
  display:grid; place-content:center; justify-items:center; gap:1px; color:#fff; font-family:var(--disp); font-weight:800; transform:rotate(-5deg); }
.badge .w { font-size:.86rem; line-height:1; letter-spacing:.02em; text-shadow:1.5px 1.5px 0 var(--plum); }
.badge .n { font-size:2.5rem; line-height:.9; text-shadow:2.5px 2.5px 0 var(--plum); }

/* ---------- tick boxes: the owner's own record ---------- */
.tick { display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:start; min-height:44px; padding:7px 0; cursor:pointer; }
.tick input { position:absolute; opacity:0; width:30px; height:30px; margin:0; }
.box { flex:none; width:30px; height:30px; background:var(--white); border:2.5px solid var(--plum); border-radius:9px 11px 8px 12px / 11px 8px 12px 9px;
  display:grid; place-items:center; transition:background .12s; }
.box svg { width:20px; height:20px; stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .18s ease-out; }
.tick input:checked + .box, .opt input:checked + .box, .is-picked > .box { background:var(--butter); }
.tick input:checked + .box svg, .opt input:checked + .box svg, .is-picked > .box svg { stroke-dashoffset:0; }
.tick input:focus-visible + .box { outline:3px solid var(--plum); outline-offset:3px; }
.tick .t { padding-top:2px; }

/* ---------- stop: this needs a person ---------- */
.stop { background:var(--plum); color:var(--cream); border-radius:var(--soft); padding:18px 18px 12px; }
.stop h2, .stop h3 { display:flex; align-items:center; gap:10px; font-size:1.3rem; line-height:1.15; color:var(--butter); }
.stop h2 svg, .stop h3 svg { flex:none; width:30px; height:30px; }
.stop p { margin-top:10px; font-size:1rem; line-height:1.5; }
.stop ul { margin-top:10px; padding-left:20px; list-style:disc; display:grid; gap:6px; font-size:1rem; line-height:1.45; }
.stop .links { display:flex; flex-wrap:wrap; column-gap:22px; margin-top:6px; }
.stop .links a { display:inline-flex; align-items:center; min-height:44px; font-weight:800; color:var(--butter);
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.stop :focus-visible { outline-color:var(--butter); }

/* ---------- app nav: A's, as it is ---------- */
.nav { position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--white); border-top:3px solid var(--plum); }
.nav ul { max-width:480px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); }
.nav a, .nav button { width:100%; display:grid; justify-items:center; gap:3px; min-height:53px; padding:4px 2px 3px; font:700 .82rem/1 var(--body);
  color:var(--ink2); text-decoration:none; background:none; border:0; border-radius:16px; }
.nav .ic { width:58px; height:30px; display:grid; place-items:center; border-radius:999px; transition:background .12s; }
.nav .ic svg { width:24px; height:24px; }
.nav [aria-current="page"], .nav [aria-expanded="true"] { color:var(--plum); font-weight:800; }
.nav [aria-current="page"] .ic, .nav [aria-expanded="true"] .ic { background:var(--butter); }
.helpsheet, .sheet { position:fixed; left:0; right:0; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index:29; padding:16px var(--gut) 20px;
  background:var(--paper); border-top:3px solid var(--plum); animation:rise .16s ease-out; }
.helpsheet { display:grid; gap:12px; }
.helpsheet > *, .sheet-in { max-width:440px; width:100%; margin:0 auto; }
.helpmore { display:flex; flex-wrap:wrap; gap:0 22px; margin-top:-4px; }
@keyframes rise { from { transform:translateY(14px); opacity:0; } }
@keyframes unfold { from { transform:translateY(-8px); opacity:0; } }

/* ============ the puppy's photo ============ */
.pup { position:relative; display:block; flex:none; isolation:isolate; }
.pup__img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.pup--drawing .pup__img { inset:8%; width:84%; height:84%; object-fit:contain; clip-path:none !important; }
.pup__ring { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.pup__ring path { fill:none; stroke:var(--plum); stroke-linecap:round; stroke-linejoin:round; }
/* a large photo gets what every drawing has: one butter blob behind it */
.pup--big.pup--photo::before { content:""; position:absolute; z-index:-1; left:-9%; top:26%; width:104%; height:80%; background:var(--butter);
  border-radius:62% 38% 44% 56% / 48% 60% 40% 52%; transform:rotate(-16deg); }
.pupbtn { position:relative; display:block; flex:none; padding:0; background:none; border:0; border-radius:50%; }
.pupbtn:active .pup { transform:scale(.96); }
/* while the drawing stands in for a photo, a small plus says a photo can go here */
.pup-add { display:none; position:absolute; right:-5px; bottom:-3px; width:20px; height:20px; place-items:center; border-radius:50%; background:var(--white); border:2px solid var(--plum); }
.pup-add svg { width:12px; height:12px; }
.pupbtn:has(.pup--drawing) .pup-add { display:grid; }
.who { justify-content:flex-start; }
.who-name { min-width:0; overflow-wrap:anywhere; font:800 1.3rem/1.1 var(--disp); }
.who .mark { display:block; width:36px; height:36px; margin-left:auto; }

.photo-ctl { display:grid; grid-template-columns:auto 1fr; gap:14px 16px; align-items:center; }
.photo-acts { display:grid; gap:6px; justify-items:start; min-width:0; }
.photo-private { grid-column:1 / -1; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.sheet-head h2 { font-size:1.45rem; line-height:1.1; }

/* ============ questionnaire ============ */
.q-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:62px; padding:14px var(--gut) 0; }
.q-count { font:700 .95rem/1 var(--body); color:var(--ink2); white-space:nowrap; }
.paws { display:flex; align-items:center; gap:6px; padding:10px var(--gut) 0; }
.paws svg { width:20px; height:20px; color:var(--plum); }
.paws svg:nth-child(odd) { transform:rotate(-14deg) translateY(2px); }
.paws svg:nth-child(even) { transform:rotate(12deg) translateY(-3px); }
.paws .ahead { color:var(--plum-28); }
.paws .now { color:var(--coral-d); width:26px; height:26px; }
.q-page { padding:22px var(--gut) 128px; }
.q-page h1 { font-size:1.8rem; line-height:1.1; }
.q-page h1.long { font-size:1.5rem; line-height:1.14; }
.q-page h1:focus { outline:none; }
.q-page .help { margin-top:10px; color:var(--ink2); font-weight:600; }
.q-page .lead { margin-top:14px; font-size:1.1rem; line-height:1.5; }
.opts { margin:14px -10px 0; }
.opt { position:relative; display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:center; min-height:56px; padding:11px 12px 12px 10px;
  border-radius:var(--row); font:700 1.03rem/1.3 var(--body); cursor:pointer; transition:background .12s; }
.opt input { position:absolute; opacity:0; width:30px; height:30px; margin:0; left:10px; top:50%; translate:0 -50%; }
.opt.round .box { border-radius:50%; }
.opt:has(input:checked) { background:var(--butter); }
.opt:has(input:focus-visible) { outline:3px solid var(--plum); outline-offset:-1px; }
.opts.full .opt:not(:has(input:checked)) { color:var(--ink2); cursor:default; }
.opts.full .opt:not(:has(input:checked)) .box { border-color:var(--plum-28); background:transparent; }
.note { margin:8px 10px 16px 54px; padding:14px 16px; background:var(--sky-l); border-radius:var(--soft); font-size:1rem; line-height:1.5; animation:unfold .16s ease-out; }
.explain { display:flex; align-items:center; gap:14px; width:100%; min-height:56px; padding:11px 12px 12px 10px; background:none; border:0; border-radius:var(--row); text-align:left;
  font:700 1.03rem/1.3 var(--body); }
.explain span { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--coral); }
.explain svg { flex:none; width:30px; height:30px; }
.field { display:block; margin-top:18px; }
.field.inset { margin:6px 10px 16px 54px; }
.field > span { display:block; margin-bottom:6px; font:700 1rem/1.3 var(--body); }
.field input, .q-page input.one { width:100%; min-height:54px; padding:12px 16px; font:700 1.1rem/1.2 var(--body); color:var(--plum); background:var(--white);
  border:2.5px solid var(--plum); border-radius:var(--wob); outline:none; }
.q-page input.one { margin-top:20px; font-size:1.25rem; }
.field input:focus, .q-page input.one:focus { box-shadow:0 0 0 4px var(--butter); }
.field:nth-child(even) input { border-radius:var(--wob-b); }
.follow { position:relative; margin-top:30px; padding-top:28px; }
.follow::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--rule-b) center / 100% 100% no-repeat; }
.follow h2 { font-size:1.3rem; line-height:1.18; }
.dock { position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--white); border-top:3px solid var(--plum); }
.dock div { max-width:480px; margin:0 auto; display:grid; grid-template-columns:auto 1fr; gap:14px; padding:14px var(--gut) calc(18px + env(safe-area-inset-bottom)); }
.dock .btn { min-height:54px; }
.dock .back { width:auto; padding-left:22px; padding-right:22px; }
.dock .only { grid-column:1 / -1; }
.fine { margin-top:28px; color:var(--ink2); font-size:.9rem; line-height:1.45; font-weight:600; }

/* ============ today ============ */
.cardhead { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding-top:14px; }
.cardhead h1 { font-size:1.95rem; line-height:1.04; letter-spacing:-.005em; }
.cardhead .meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; margin-top:8px; }
.cardhead .meta .btn { white-space:nowrap; }
.mins { display:inline-flex; align-items:center; gap:6px; color:var(--ink2); font-weight:700; font-size:.98rem; white-space:nowrap; }
.mins svg { width:19px; height:19px; }

/* day 30, the closing screen: the photo large, the badge tucked against it */
.cardhead.closing { display:block; padding-top:10px; }
.portrait { position:relative; display:flex; align-items:center; min-height:140px; }
.portrait .badge { margin:52px 0 0 -30px; position:relative; z-index:1; }
.portrait .who-name { margin:0 0 56px 16px; font-size:1.75rem; }
.portrait .pup-add { right:auto; left:2px; bottom:auto; top:2px; width:26px; height:26px; }
.portrait .pup-add svg { width:15px; height:15px; }
.closing h1 { margin-top:12px; }

.hard { position:relative; margin-top:22px; padding:20px 18px 16px; background:var(--sky-l); border-radius:var(--soft); animation:unfold .18s ease-out; }
.hard h2 { font-size:1.45rem; line-height:1.12; padding-right:52px; }
.hard h2:focus { outline:none; }
.hard > p { margin-top:10px; }
.hard .x { position:absolute; right:12px; top:12px; }
.hard .min { margin-top:14px; padding:12px 14px; background:var(--white); border:2.5px dashed var(--plum); border-radius:var(--soft); font-weight:700; font-size:1.1rem; line-height:1.4; }
.hard .after { font-weight:700; }

.why { margin-top:18px; }
.steps { margin-top:26px; }
.steps h2, .sect h2 { font-size:1.45rem; line-height:1.15; }
.steps ol { display:grid; gap:18px; margin-top:14px; }
.steps li { display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:start; }
.num { width:42px; height:42px; border-radius:50%; background:var(--white); border:2.5px solid var(--plum); box-shadow:2px 2px 0 var(--plum);
  display:grid; place-items:center; font:800 1.3rem/1 var(--disp); color:var(--coral-d); }
.steps li > div { padding-top:7px; min-width:0; }

/* the drawings: no tile, no frame, straight on the paper. They bring their own air. */
.figs { margin:0 0 -8px; }
.fig { margin:0; }
.fig img { display:block; width:100%; height:auto; }
.figs:not(.pair) .fig { width:74%; }
.figs.pair { display:grid; grid-template-columns:38% 62%; align-items:center; }
.figs.pair .main { display:contents; }
.figs.pair .main img { grid-column:1 / -1; }
.figs.pair .main figcaption { grid-column:1; grid-row:2; }
.figs.pair .detail { grid-column:2; margin-top:-6px; }
.figs.pair .main + .detail { grid-row:2; }                 /* the first detail shares its row with the note; any further ones follow below */
.note-hand { display:block; font:600 1.02rem/1.25 var(--disp); transform:rotate(-3deg); }
.fig .labs { display:grid; gap:2px; margin-top:6px; font:700 .9rem/1.3 var(--body); color:var(--ink2); }

/* a note for this owner's situation: held by a bracket in the pen, in the margin of the steps */
.variant { position:relative; margin:20px 0 0 3px; padding:1px 0 2px 18px; }
.variant::before { content:""; position:absolute; left:0; top:0; bottom:0; width:9px; background:var(--bracket) center / 100% 100% no-repeat; }
.variant h3 { display:inline-block; padding:5px 12px 6px; border-radius:999px; background:var(--sky); font-size:.95rem; line-height:1; }
.variant h3 + p { margin-top:8px; }

.dont { margin-top:26px; border:2px solid var(--coral); border-radius:var(--soft); overflow:hidden; background:var(--white); }
.dont-no { background:var(--coral-l); padding:14px 16px 15px; }
.dont-no p { margin-top:8px; font-weight:600; }
.dont-yes { padding:13px 16px 15px; }
.expect { margin-top:14px; }

.donewhen { margin-top:26px; padding:16px 16px 10px; background:var(--white); border:2.5px dashed var(--plum); border-radius:var(--soft); }
.donewhen h2 { font-size:1.3rem; line-height:1.1; margin-bottom:6px; }
.today .stop { margin-top:26px; }
.notworking { margin-top:22px; }

.sect { position:relative; margin-top:32px; padding-top:28px; }
.sect::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--rule) center / 100% 100% no-repeat; }
.sect > .minor { margin-top:6px; }

/* the ladders: one row each, open on a tap */
.ladders { margin:10px -10px 0; }
.ladder-head { display:grid; grid-template-columns:1fr auto 22px; gap:10px; align-items:center; width:100%; min-height:56px; padding:8px 10px; background:none; border:0; border-radius:var(--row); text-align:left; }
.ladder-head:active { background:var(--butter-l); }
.ladder-head:focus-visible { outline-offset:-3px; }
.ladder-head .lt { font:800 1.15rem/1.15 var(--disp); }
.ladder-head .at { font:700 .92rem/1 var(--body); color:var(--ink2); white-space:nowrap; }
.ladder-head svg { width:22px; height:22px; transition:transform .16s; }
.ladder.open .ladder-head svg { transform:rotate(180deg); }
.ladder-body { padding:0 10px 18px; animation:unfold .16s ease-out; }
.ladder-body .do { font-weight:600; line-height:1.45; }
.ladder .passes { margin-top:12px; padding:12px 14px 6px; background:var(--white); border:2.5px dashed var(--plum); border-radius:var(--soft); }
.ladder .passes p { font-size:1rem; line-height:1.4; }
.ladder .passrow { display:flex; align-items:center; justify-content:flex-end; margin-top:2px; }      /* three boxes, and no count beside them */
.ladder .boxes { display:flex; gap:2px; margin-right:-7px; }
.ladder .boxes .tick { display:grid; grid-template-columns:30px; place-items:center; width:44px; min-height:44px; padding:0; }
.ladder .lv { margin-top:12px; }

.moveon { margin-top:26px; display:grid; gap:20px; }
.repeat { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
.btn.small[aria-pressed="true"] { background:var(--butter); transform:translate(2px,2px); box-shadow:1px 1px 0 var(--plum); }

/* ============ day rows: the plan, more cards, cards that help ============ */
.rows { margin:0 -10px; }
.row { display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:center; min-height:58px; padding:9px 10px 10px; border-radius:var(--row); text-decoration:none; }
.row:active { background:var(--butter-l); }
.row:focus-visible { outline-offset:-3px; }
.dn { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font:800 1.1rem/1 var(--disp); background:var(--white); border:2.5px solid var(--plum); color:var(--plum); }
.dn svg { width:19px; height:19px; }
.dn.none { background:var(--butter); border-color:transparent; }
.row b { display:block; font:700 1.03rem/1.28 var(--body); }
.row small { display:block; margin-top:1px; font:600 .88rem/1.3 var(--body); color:var(--ink2); }
/* every seventh day is a check-in: the soft square it has on the board */
.row.kind-checkin .dn { border-radius:30%; }
/* done days are simply quieter */
.row.is-done .dn { background:var(--plum-t); border-color:transparent; color:var(--ink2); }
.row.is-done b { font-weight:600; color:var(--ink2); }
.row.is-today { background:var(--butter); min-height:68px; }
.row.is-today .dn { background:var(--coral); border-width:2.5px; box-shadow:2px 2px 0 var(--plum); transform:rotate(-5deg); color:#fff; text-shadow:1.5px 1.5px 0 var(--plum); font-size:1.2rem; }
.row.is-today b { font-weight:800; }
.row.is-today small { color:var(--plum); }
.row.is-picked { background:var(--butter-l); }
.row.is-today.is-picked { background:var(--butter); }

/* ============ plan ============ */
.planhead { display:flex; align-items:center; gap:12px; padding-top:10px; }
.plan h1 { font-size:2.05rem; line-height:1; }
.plan .lead { margin-top:10px; max-width:17.4em; font-weight:700; font-size:1.05rem; line-height:1.4; }

/* the thirty days, at a glance: the one bold thing on this screen */
.board { margin:20px -10px 0; padding:12px 12px 12px; background:var(--plum); color:var(--cream); border-radius:26px 22px 28px 21px / 22px 28px 21px 26px; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); }
.cal button { display:grid; place-items:center; width:100%; height:50px; padding:0; background:none; border:0; }
.cal button span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; font:800 1.05rem/1 var(--disp); transition:transform .14s, background-color .14s; }
.cal .is-done span { background:var(--plum-2); color:var(--plum-dim); }
.cal .is-ahead span { background:var(--cream); color:var(--plum); }
.cal .is-today span { background:var(--butter); color:var(--plum); }
.cal .kind-checkin span { border-radius:30%; }
.cal button[aria-pressed="true"] span { transform:scale(1.14); font-size:1.15rem; }
.cal .is-done button[aria-pressed="true"] span { background:var(--plum-dim); color:var(--plum); }
.cal .is-ahead button[aria-pressed="true"] span { background:var(--white); }
.cal button:focus-visible { outline:none; }
.cal button:focus-visible span { outline:3px solid var(--butter); outline-offset:2px; }
.key { display:flex; align-items:center; justify-content:flex-end; gap:8px; height:50px; margin:-50px 8px 0 0; font:700 .88rem/1 var(--body); color:var(--plum-dim); pointer-events:none; }
.key i { width:16px; height:16px; border-radius:30%; background:var(--plum-dim); }
.peek { margin-top:10px; }
.peek .row { min-height:70px; padding:10px 14px 11px 12px; border-radius:var(--soft); background:var(--cream); color:var(--plum); }
.peek .row.is-today { background:var(--butter); }
.peek .row.is-done { background:var(--plum-2); color:var(--cream); }
.peek .row.is-done b { color:var(--cream); font-weight:700; }
.peek .row.is-done small { color:var(--plum-dim); }
.peek .row.is-done .dn { background:var(--plum); color:var(--plum-dim); }
.peek .row:focus-visible { outline-color:var(--butter); outline-offset:2px; }

.whynote { margin-top:22px; padding:18px 18px 8px; background:var(--butter-l); border-radius:var(--soft); }
.whynote h2 { font-size:1.3rem; line-height:1.15; }
.whynote ul { display:grid; gap:11px; margin-top:12px; }
.whynote li { display:grid; grid-template-columns:20px 1fr; gap:10px; font-size:1rem; line-height:1.45; font-weight:600; }
.whynote li svg { width:18px; height:18px; margin-top:4px; color:var(--coral-d); }
.whynote:not(.open) li:nth-child(n+3) { display:none; }
.whynote .more { margin:6px 0 0 30px; }
.whynote .more svg { transition:transform .16s; }
.whynote.open .more svg { transform:rotate(180deg); }
.week { margin-top:30px; }
.week h2 { font-size:1.3rem; line-height:1.1; margin-bottom:6px; }
.week li { scroll-margin-top:90px; }
.more-cards > .minor { margin-bottom:10px; }
.more-cards .row { grid-template-columns:1fr auto; min-height:50px; padding:8px 10px 9px; }
.more-cards .row small { margin:0; white-space:nowrap; }
.more-cards li { scroll-margin-top:90px; }
.more-cards li:target .row { background:var(--butter-l); }
.planfoot { margin-top:38px; display:grid; gap:18px; }
.planfoot .written { color:var(--ink2); font-weight:600; font-size:.98rem; }
.reviewed { display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; font:700 1rem/1.35 var(--body); }
.reviewed img { width:48px; height:48px; display:block; }

/* ============ tree ============ */
.crumb { margin-top:2px; }
.tree h1 { font-size:1.9rem; line-height:1.06; margin-top:4px; }
.first { position:relative; margin-top:34px; padding-top:22px; font-weight:600; }
.first .pill { position:absolute; left:14px; top:-14px; }
.tree .ask { margin-top:30px; font-size:1.45rem; line-height:1.15; }
.choices { margin:8px -10px 0; }
.choice { display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:center; min-height:58px; padding:11px 12px 12px 10px; border-radius:var(--row);
  font:700 1.03rem/1.32 var(--body); text-decoration:none; transition:background .12s; }
.choice .box { border-radius:50%; }
.choice:active, .choice.is-picked { background:var(--butter); }
.choice:focus-visible { outline-offset:-3px; }
.answer h1 { margin-top:2px; }
.answer .because { margin-top:16px; }
.try { margin-top:26px; }
.try h2, .helpcards h2 { font-size:1.45rem; line-height:1.15; }
.try ul { display:grid; gap:14px; margin-top:12px; }
.try li { display:grid; grid-template-columns:24px 1fr; gap:12px; }
.try li svg { width:22px; height:22px; margin-top:3px; color:var(--coral); }
.answer .dont { margin-top:24px; }
.giveit { margin-top:14px; }
.answer .stop { margin-top:26px; }
.answer .stop + .stop { margin-top:14px; }
.helpcards { margin-top:30px; }
.helpcards .rows { margin-top:6px; }
.tree .moveon { margin-top:30px; }

@media (max-width:374px) {
  :root { --gut:16px; }
  .badge { width:76px; height:76px; }
  .cardhead h1 { font-size:1.75rem; }
  .q-page h1 { font-size:1.65rem; }
  .plan h1 { font-size:1.85rem; }
  .cal button span { width:40px; height:40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}