/* ==================================================================
   SAGERESET · THE DAILY CHECK-IN
   Loaded after components.css, and only by the check-in.

   ONE SYSTEM. The whole form is built from a handful of parts, and
   nothing is allowed to invent its own.

   TYPE — four sizes, taken straight from the site
     .q     the question          Fraunces 30 / 26 mobile
     .qs    the supporting line   Outfit 16
     .lbl   a section label       Outfit 11, uppercase
     everything you can press     Outfit 15

   COLOUR — one accent per section, never per item
     1 Mood tracking   coral
     2 Wellbeing check green
     3 Journal entry   teal
     The five mood faces keep their own five colours, because they
     are the scale. Nothing else is individually coloured.

   INTERACTION — three, chosen by the kind of question
     .faces   pick one of five      overall day, sleep
     .pills   pick as many as fit   feelings, activities, symptoms,
                                    yes/no, done/not today, add-ons
     .slider  drag a value          energy, stress, clarity, flow

   SURFACE — one writing surface, .paper, everywhere someone writes

   BUTTONS — two. A filled pill, and a quiet text link.
   ================================================================== */

.dwrap{
  /* the section accent, set by the engine */
  --ac:var(--coral-deep);
  --am:var(--coral);
  --as:var(--coral-soft);
  --al:var(--coral-line);
  /* the one paper tone the whole form sits on */
  --paper:#fff;
  --ink1:var(--ink);
  --ink2:var(--ink-2);
  --ink3:var(--ink-3);
  --gap:8px;
  --r:16px;
  /* the one colour the palette does not carry, used only by the Bad face */
  --orange:#E8944E;--orange-deep:#CE7126;--orange-soft:#FDF3E9;--orange-line:#F6DCBF;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--as) 0,var(--as) 180px,var(--bg) 560px),var(--bg);
  transition:background .45s ease;
}

/* ==================================================================
   HEADER
   ================================================================== */
.dwrap .dhead{display:block;position:sticky;top:0;z-index:30;padding:0;box-shadow:none;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line)}
.dheadin{display:flex;align-items:center;gap:12px;max-width:1040px;margin:0 auto;
  padding:7px 20px;min-height:52px}
.dhslot{flex:0 0 64px;height:36px}
.dback,.dexit{display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:none;border:0;
  min-height:36px;padding:7px 6px;border-radius:0;
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink3)}
.dback{margin-left:-6px;font-weight:600;color:var(--ink2)}
.dexit{margin-right:-6px}
.dback:hover,.dexit:hover{color:var(--ac)}
.dback .i{width:16px;height:16px}
.dmark{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ac);transition:color .45s ease}
.dmark .i{width:22px;height:22px;stroke-width:1.4}
.dsectname{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ac);white-space:nowrap}
.dexit .dshort{display:none}
.dbar{height:3px;background:var(--line);position:relative}
.dbar i{position:absolute;inset:0 auto 0 0;display:block;height:3px;border-radius:0;
  background:linear-gradient(90deg,var(--am),var(--ac));transition:width .4s ease}

/* ==================================================================
   PAGE
   ================================================================== */
.dbody{flex:1;display:flex;justify-content:center;
  padding:44px 24px calc(44px + env(safe-area-inset-bottom,0px))}
.dbody:focus{outline:none}
.dcol{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:stretch;
  text-align:center}
.dcol-wide{max-width:860px}
.dcol-left{text-align:left}

/* ---- type ---- */
.q{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.22;letter-spacing:-.01em;
  color:var(--ink1);margin:0}
.qs{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink2);margin:12px 0 0}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 72%,var(--ink3));margin:0}
.rule{display:flex;align-items:center;gap:14px;margin:30px 0 14px;text-align:left}
.rule::after{content:'';flex:1;height:1px;background:var(--al)}
.date{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 12px}

/* ---- the block that holds a question's answer ---- */
.field{margin-top:30px}
.field:first-of-type{margin-top:34px}

/* ==================================================================
   BUTTONS — two, and only two
   ================================================================== */
.dfoot{margin-top:40px}
.dfootin{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.dcta{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  width:100%;max-width:400px;min-height:46px;padding:12px 36px;margin:0 auto;
  border:0;border-radius:0;background:var(--ac);color:#fff;
  font-family:var(--sans);font-size:16px;font-weight:600;
  transition:filter .16s ease,transform .16s ease}
.dcta:hover{filter:brightness(1.07);transform:translateY(-1px)}
.dcta:active{transform:none}
.dcta[disabled]{opacity:.4;cursor:not-allowed;transform:none;filter:none}
.dcta .i{width:16px;height:16px}
.dskip{cursor:pointer;background:none;border:0;min-height:44px;padding:10px 16px;border-radius:0;
  font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink3)}
.dskip:hover{color:var(--ink2)}
.dskip-alt{font-weight:600;color:var(--ac)}
@media(max-width:820px){
  .dbody{padding:30px 20px calc(126px + env(safe-area-inset-bottom,0px))}
  .dfoot{position:fixed;left:0;right:0;bottom:0;z-index:29;margin-top:0;border-top:1px solid var(--line);
    background:linear-gradient(180deg,rgba(255,255,255,0),var(--surface) 32%,var(--surface));
    padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px))}
  .dcta{max-width:none}
}

/* ==================================================================
   INTERACTION 1 · FACES — pick one of five
   ================================================================== */
.faces{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}
.face{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:11px;cursor:pointer;
  background:none;border:0;padding:6px;font-family:var(--sans);transition:transform .18s ease}
.face:hover{transform:translateY(-3px)}
.facec{display:flex;align-items:center;justify-content:center;width:78px;height:78px;border-radius:50%;
  background:var(--fs);border:2px solid var(--fl);color:var(--fc);
  transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
.facec .i{width:36px;height:36px;stroke-width:1.5}
.facel{font-size:14px;font-weight:600;color:var(--ink2)}
.face.on .facec{background:var(--fm);border-color:var(--fc);color:#fff;box-shadow:0 0 0 4px var(--fs)}
.face.on .facel{color:var(--fc)}
@media(max-width:720px){
  .faces{gap:8px}
  .facec{width:60px;height:60px}
  .facec .i{width:28px;height:28px}
  .facel{font-size:12.5px}
}
@media(max-width:380px){
  .facec{width:52px;height:52px}
  .facec .i{width:25px;height:25px}
  .facel{font-size:11.5px}
}

/* ==================================================================
   INTERACTION 2 · PILLS — pick as many as fit
   One component. An icon is optional. Size never changes.
   ================================================================== */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.dcol:not(.dcol-left) .pills{justify-content:center}
.pill{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  min-height:36px;padding:7px 14px;border-radius:0;
  border:1px solid color-mix(in srgb,var(--ac) 26%,transparent);
  background:transparent;
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink1);
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.pill:hover{border-color:var(--ac);color:var(--ac)}
.pill .i{width:16px;height:16px;color:var(--ac);flex:0 0 16px;transition:color .16s ease}
.pill.on{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}
.pill.on .i{color:#fff}
/* a pair of pills that fills the width: yes / no, done / not today */
.pills-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:380px;margin:0 auto}
.dcol-left .pills-pair{margin:0}
.pills-pair .pill{justify-content:center;min-height:44px;font-size:15px}
/* the one pill that leads a screen */
  .pill-lead{align-self:flex-start;min-height:40px;padding:9px 18px;font-weight:600;color:var(--ac);
  border-color:var(--ac)}
.pill-lead.on{background:var(--ac);border-color:var(--ac);color:#fff}
@media(max-width:520px){
  .pills{gap:6px}
  .pill{min-height:34px;padding:6px 12px;font-size:13.5px;gap:6px}
  .pill .i{width:15px;height:15px;flex:0 0 15px}
}

/* ==================================================================
   INTERACTION 3 · SLIDER — drag a value
   ================================================================== */
.sliders{display:flex;flex-direction:column;gap:26px;margin-top:34px}
.slider{text-align:left}
.sliderh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.sliderh b{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink1)}
.sliderh span{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--sc)}
.sliderin{-webkit-appearance:none;appearance:none;display:block;width:100%;height:12px;margin:0;
  border-radius:0;cursor:grab;outline:none;
  background:linear-gradient(90deg,var(--sc) 0 var(--fill),var(--ss) var(--fill) 100%)}
.sliderin::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;
  background:#fff;border:3px solid var(--sc);cursor:grab;
  box-shadow:0 2px 10px rgba(31,38,35,.18)}
.sliderin::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:#fff;
  border:3px solid var(--sc);cursor:grab;box-shadow:0 2px 10px rgba(31,38,35,.18)}
.sliderin:active{cursor:grabbing}
.sliderin:focus-visible{box-shadow:0 0 0 4px var(--ss)}
.sliderends{display:flex;justify-content:space-between;gap:12px;margin-top:10px}
.sliderends span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3)}

/* ==================================================================
   SURFACE · PAPER — every place someone writes
   ================================================================== */
.paper{display:flex;flex-direction:column;text-align:left;margin-top:26px;
  background:var(--paper);border:1px solid var(--al);border-radius:var(--r);
  padding:22px 24px;box-shadow:0 1px 3px rgba(31,38,35,.03)}
.paper textarea,.paper input{width:100%;border:0;outline:none;background:none;resize:none;
  font-family:var(--sans);font-size:16.5px;line-height:1.85;color:var(--ink1)}
.paper textarea{min-height:220px}
.paper textarea::placeholder,.paper input::placeholder{color:var(--ink-4);line-height:1.85}
.paperfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.papertools{display:flex;gap:8px}
.tool{display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:40px;
  padding:9px 16px;border-radius:0;border:1px solid var(--line);background:var(--surface-2);
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ac)}
.tool:hover{border-color:var(--ac);background:var(--as)}
.tool .i{width:17px;height:17px}
.papernote{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4)}
/* a single-line paper, for a short answer */
.paper-line{padding:16px 20px;margin-top:16px}
.paper-line input{font-size:16px}

/* ==================================================================
   CARDS — one card, used by the welcome, the squares and the endings
   ================================================================== */
.cards{display:flex;flex-direction:column;gap:var(--gap);margin-top:30px;text-align:left}
.cardrow{display:flex;align-items:center;gap:16px;overflow:hidden;min-height:82px;
  background:var(--paper);border:1px solid var(--al);border-radius:var(--r)}
.cardart{flex:0 0 104px;align-self:stretch;background:var(--as)}
.cardart img{width:100%;height:100%;object-fit:cover;display:block}
.cardi{flex:0 0 38px;width:38px;height:38px;border-radius:0;background:var(--as);color:var(--ac);
  display:flex;align-items:center;justify-content:center}
.cardi .i{width:19px;height:19px}
.cardt{flex:1;min-width:0;padding-right:20px;font-family:var(--sans);font-size:16px;font-weight:600;
  color:var(--ink1)}
/* the measured squares */
.squares{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:30px}
.square{display:flex;flex-direction:column;align-items:flex-start;gap:10px;cursor:pointer;
  text-align:left;padding:20px;border-radius:var(--r);
  border:1px solid var(--al);background:color-mix(in srgb,var(--as) 55%,#fff);
  transition:border-color .16s ease}
.square:hover{border-color:var(--ac)}
.squarev{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;color:var(--ink1)}
@media(max-width:900px){ .squares{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .cardart{flex:0 0 82px} }

/* ---- the two closing recommendations ---- */
.nexts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,420px));gap:var(--gap);
  justify-content:center;margin-top:30px;text-align:left}
.next{display:flex;flex-direction:column;overflow:hidden;border-radius:0;
  border:1px solid var(--nl);background:var(--paper)}
.nextart{height:150px;background:var(--ns)}
.nextart img{width:100%;height:100%;object-fit:cover;display:block}
.nextb{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.nextb .qs{margin:0;font-size:15px;color:var(--ink3)}
.nextb .q{margin-top:8px;font-size:22px}
.nextb .dcta{margin:20px 0 0;width:auto;min-height:42px;padding:11px 26px;font-size:15px;
  background:var(--nc)}

/* ==================================================================
   A FEW ONE-OFFS, all built from the parts above
   ================================================================== */
.stage{width:100%;max-width:400px;height:190px;border-radius:0;overflow:hidden;
  margin:0 auto 26px;background:var(--as)}
.stage img{width:100%;height:100%;object-fit:cover;display:block}
.tick{width:56px;height:56px;border-radius:50%;background:var(--as);color:var(--ac);
  border:1px solid var(--al);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.tick .i{width:24px;height:24px;stroke-width:2.4}
.count{font-family:var(--sans);font-size:14px;color:var(--ink3);margin:18px 0 0}
.urgent{display:flex;gap:14px;text-align:left;margin-top:20px;padding:18px 20px;border-radius:var(--r);
  border:2px solid var(--coral-deep);background:var(--coral-soft)}
.urgent .cardi{background:var(--coral-deep);color:#fff}
.urgent b{display:block;font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink1)}
.urgent p{font-family:var(--sans);font-size:14.5px;line-height:1.65;color:var(--ink2);margin:6px 0 0}
.habits{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px;text-align:left}
.habit{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;
  height:62px;padding:0 14px;border-radius:var(--r);
  border:1px solid var(--al);background:var(--paper)}
.habit .cardi{flex:0 0 34px;width:34px;height:34px;border-radius:0}
.habit .cardi .i{width:17px;height:17px}
.habitn{flex:1;min-width:0;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.habitn em{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink3);margin-top:2px;white-space:nowrap}
.habitp,.ticks{display:flex;gap:5px;flex:0 0 auto}
.habitp .pill{min-height:30px;padding:5px 11px;font-size:12.5px}
.tickb{width:30px;height:30px;border-radius:0;cursor:pointer;display:flex;align-items:center;
  justify-content:center;border:1px solid color-mix(in srgb,var(--ac) 26%,transparent);
  background:transparent;color:var(--line-2);
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.tickb .i{width:14px;height:14px;stroke-width:2.4}
.tickb:hover{border-color:var(--ac)}
.tickb.on{background:var(--ac);border-color:var(--ac);color:#fff}
@media(max-width:900px){ .habits{grid-template-columns:1fr;gap:22px} }
@media(max-width:420px){
  .habit{padding:0 10px;gap:9px}
  .habitn{font-size:13.5px}
  .habitp .pill{padding:5px 9px;font-size:12px}
}

/* ---- the voice and photo composers, on paper ---- */
.rec{width:70px;height:70px;border-radius:50%;cursor:pointer;margin:0 auto;
  border:3px solid var(--al);background:var(--as);display:flex;align-items:center;justify-content:center}
.rec span{display:block;width:28px;height:28px;border-radius:50%;background:var(--ac)}
.rec:hover{border-color:var(--ac)}
.wave{display:flex;align-items:center;gap:3px;height:52px;justify-content:center}
.wave i{display:block;width:3px;border-radius:0;background:var(--al);min-height:4px}
.wave.live i{background:var(--ac);animation:dwv 1.1s ease-in-out infinite alternate}
@keyframes dwv{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.vtime{font-family:var(--mono);font-size:20px;color:var(--ink1);text-align:center;margin-top:12px}
.vrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;min-height:190px;border:2px dashed var(--al);border-radius:var(--r);
  background:var(--paper);padding:26px;font-family:var(--sans)}
.drop:hover{border-color:var(--ac);background:var(--as)}
.drop .i{width:26px;height:26px;color:var(--ac)}
.drop b{font-size:16px;font-weight:600;color:var(--ink1)}
.drop span{font-size:14px;line-height:1.55;color:var(--ink3);text-align:center;max-width:36ch}
.shot{position:relative;border-radius:var(--r);overflow:hidden}
.shot img{width:100%;height:290px;object-fit:cover;display:block}
.shotx{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:0;background:rgba(255,255,255,.94);color:var(--ink2);
  display:flex;align-items:center;justify-content:center}

/* ---- what a voice note was heard to say ---- */
.est{text-align:left;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.estrow{display:flex;flex-wrap:wrap;gap:22px;margin-top:12px}
.estrow span{display:flex;flex-direction:column;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.estrow b{font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--ink1);margin-bottom:3px}
.estn{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink3);margin:12px 0 0}

/* ==================================================================
   ACCESSIBILITY
   ================================================================== */
.dwrap :focus-visible{outline:3px solid var(--ac);outline-offset:3px;border-radius:0}
@media (prefers-reduced-motion: reduce){
  .dwrap *,.dwrap *::before,.dwrap *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .face:hover,.dcta:hover{transform:none}
}

/* ==================================================================
   RESPONSIVE TYPE
   ================================================================== */
@media(max-width:820px){
  .q{font-size:26px}
  .qs{font-size:15.5px}
  .paper{padding:18px 20px}
  .paper textarea{min-height:190px}
  .stage{height:160px}
}
@media(max-width:400px){
  .dbody{padding:26px 16px calc(122px + env(safe-area-inset-bottom,0px))}
  .q{font-size:23px}
}

/* ==================================================================
   THE THREE SECTIONS, MADE VISIBLE
   The rail is not one bar but three named ones, so a person always
   knows which of the three parts they are in and how far through.
   ================================================================== */
.dbar{display:flex;gap:2px;height:auto;background:none;padding:0}
.seg{position:relative;flex:1;display:block;height:3px;border-radius:0;background:var(--line)}
.seg i{position:absolute;inset:0 auto 0 0;display:block;height:3px;border-radius:0;
  background:var(--sc);transition:width .4s ease}
@media(max-width:520px){ .dsectname{font-size:8.5px;letter-spacing:.1em} }

/* the welcome cards each wear the colour of the section they open */
.cardrow{--ac:var(--coral-deep)}

/* ---- a supporting line that introduces a set of pills ---------- */
.field > .qs{margin:0 0 12px}
.field > .qs + .pills{margin-top:0}

/* ---- the habits screen needs a little more width so no name is cut --- */
.dcol-habits{max-width:980px}
.dcol-habits .habitn{font-size:14px}

/* ---- a grid track must never grow past its column ---------------- */
.habits > *{min-width:0}
.habits .cards{min-width:0}
.habit{min-width:0}

/* ---- on a phone one line will not hold the longer names, so they
        wrap to two and every card grows to the same taller height --- */
@media(max-width:640px){
  .habit{height:74px}
  .habitn{white-space:normal;line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .habitn em{margin-top:3px}
}

/* ==================================================================
   MOOD & EMOTIONS · additions
   ================================================================== */

/* the mood screen sits on plain paper, not a tint */
.dwrap[data-step="1"]{background:var(--paper)}

/* a small label above a question, naming the part of the check-in */
.dcol > .lbl{margin-bottom:12px}
.dcol-left > .lbl{text-align:left}

/* ---- feeling pills: orange text, bright border ------------------ */
.pill-feel{border-color:var(--orange);color:var(--orange-deep);font-weight:600}
.pill-feel:hover{background:var(--orange-soft);border-color:var(--orange-deep);
  color:var(--orange-deep)}
.pill-feel.on{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff}
/* thoughts carry their charge in the border, filled the same way */
.pill-neg{border-color:var(--coral);color:var(--coral-deep)}
.pill-neg:hover{background:var(--coral-soft);border-color:var(--coral-deep)}
.pill-neg.on{background:var(--coral-deep);border-color:var(--coral-deep);color:#fff}
.pill-pos{border-color:var(--green);color:var(--green-deep)}
.pill-pos:hover{background:var(--green-soft);border-color:var(--green-deep)}
.pill-pos.on{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.thoughts{display:flex;flex-direction:column;gap:10px}

/* ---- events: the category name sits beside its pills ------------ */
.rows{display:flex;flex-direction:column;gap:4px;margin-top:26px}
.row2{display:flex;align-items:flex-start;gap:16px;padding:12px 0;
  border-top:1px solid var(--al)}
.row2:first-child{border-top:0;padding-top:0}
.row2l{flex:0 0 78px;padding-top:8px;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:color-mix(in srgb,var(--ac) 80%,var(--ink2))}
.row2 .pills{flex:1;justify-content:flex-start}
.row2 .pill{min-height:32px;padding:6px 12px;font-size:13.5px;gap:6px}
.row2 .pill .i{width:15px;height:15px;flex:0 0 15px}
@media(max-width:560px){
  .row2{flex-direction:column;gap:8px}
  .row2l{flex:none;padding-top:0}
}

/* ---- a labelled short field, the way the mocks do it ------------ */
.field > .lbl{display:block;margin-bottom:8px;text-align:left}

/* ---- the reflection prompt, inside the paper -------------------- */
.prompt2{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.prompt2 b{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink1)}
.prompt2 span{font-family:var(--sans);font-size:13.5px;color:var(--ink3)}

/* ---- the day, read back ----------------------------------------- */
.sumcard{text-align:left;margin-top:28px;background:var(--paper);border:1px solid var(--al);
  border-radius:var(--r);padding:6px 22px}
.sumrow{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:15px 0;border-top:1px solid var(--line)}
.sumrow:first-child{border-top:0}
.sumk{flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink3)}
.sumv{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:9px;
  font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--ink1);text-align:right}
.sumface{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--fs,var(--as));color:var(--fc,var(--ac));flex:0 0 26px}
.sumface .i{width:16px;height:16px}
@media(max-width:520px){
  .sumcard{padding:4px 16px}
  .sumrow{flex-direction:column;gap:5px;align-items:flex-start;padding:13px 0}
  .sumv{justify-content:flex-start;text-align:left}
}

/* ==================================================================
   REVISION · tighter rhythm, warmer subtext, medium buttons
   ================================================================== */

/* ---- spacing: everything closer together ------------------------ */
.dwrap .qs{margin-top:8px}
.dwrap .field{margin-top:22px}
.dwrap .field:first-of-type{margin-top:24px}
.dwrap .rule{margin:22px 0 10px}
.dwrap .rows{margin-top:22px}
.dwrap .row2{padding:10px 0}
.dwrap .faces{margin-top:26px}
.dwrap .sliders{margin-top:26px;gap:22px}
.dwrap .paper{margin-top:20px}
.dwrap .cards{margin-top:22px}
.dwrap .squares{margin-top:22px}
.dwrap .nexts{margin-top:22px}
.dwrap .dfoot{margin-top:30px}
.dwrap .count{margin-top:14px}
.dwrap .habits{margin-top:20px}
.dwrap .sumcard{margin-top:22px}
.dwrap .stage{margin-bottom:20px}
.dwrap .tick{margin-bottom:16px}

/* ---- the subtext, no longer flat grey --------------------------- */
.dwrap .qs{font-size:16.5px;line-height:1.55;font-weight:400;
  color:color-mix(in srgb,var(--ac) 34%,var(--ink-2))}
/* inside a next-step card the lede follows that card's colour, not the section's */
.dwrap .nextb .qs{font-size:15.5px;color:color-mix(in srgb,var(--nc) 34%,var(--ink-2))}
.dwrap .lbl{font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ac) 78%,var(--ink-2))}
.dwrap .date{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  color:color-mix(in srgb,var(--ac) 62%,var(--ink-3))}
.dwrap .row2l{font-size:14px;font-weight:700;letter-spacing:.01em;
  color:color-mix(in srgb,var(--ac) 88%,var(--ink))}

/* ---- buttons: medium, not full width ---------------------------- */
.dwrap .dcta{max-width:280px;min-height:44px;padding:11px 30px;font-size:15.5px}
@media(max-width:820px){ .dwrap .dcta{max-width:340px} }
.dcta-quiet{background:var(--as);color:var(--ac);border:1px solid var(--al)}
.dcta-quiet:hover{background:var(--al);filter:none}
.btnpair{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;width:100%}
.btnpair .dcta{max-width:200px;margin:0}
.dskip-l{align-self:flex-start;padding-left:0}

/* ---- welcome: what the check-in gives you, as cards -------------- */
.wcards{display:flex;flex-direction:column;gap:10px;margin-top:28px;text-align:left;
  width:100%;max-width:440px;margin-left:auto;margin-right:auto}
.wcard{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:0;
  background:var(--as);border:1px solid var(--al)}
.wcardi{flex:0 0 40px;width:40px;height:40px;border-radius:50%;color:var(--ac);
  background:color-mix(in srgb,var(--ac) 13%,#fff);
  display:flex;align-items:center;justify-content:center}
.wcardi .i{width:20px;height:20px;stroke-width:1.5}
.wcardt{flex:1;font-family:var(--sans);font-size:15.5px;font-weight:500;color:var(--ink1);
  line-height:1.35}
.wcardc{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ac);
  color:var(--ac);display:flex;align-items:center;justify-content:center;opacity:.75}
.wcardc .i{width:12px;height:12px;stroke-width:2.4}
@media(max-width:420px){
  .wcard{padding:12px 14px;gap:12px}
  .wcardi{flex-basis:36px;width:36px;height:36px}
  .wcardt{font-size:15px}
}

/* ---- flow pills carry a drop count ------------------------------ */
.pills-flow{max-width:420px}
.pills-flow .pill{flex-direction:column;gap:6px;min-height:72px;padding:12px 8px}
.pills-flow .pill .i{width:22px;height:22px}

/* ---- measured squares: label beside the icon, smaller ----------- */
.dwrap .squares{gap:8px}
.dwrap .square{padding:14px 16px;gap:8px;border-radius:0}
.squareh{display:flex;align-items:center;gap:10px}
.dwrap .square .cardi{flex:0 0 30px;width:30px;height:30px;border-radius:0}
.dwrap .square .cardi .i{width:16px;height:16px}
.dwrap .squarev{font-size:22px}
.addmore{margin-top:18px}
.addmore .lbl{display:block;margin-bottom:10px}

/* ---- a daily habit is a single tap ------------------------------ */
.habit-b{cursor:pointer;width:100%;text-align:left;font-family:var(--sans);
  transition:background .16s ease,border-color .16s ease}
.habit-b:hover{border-color:var(--ac)}
.habit-b.set{background:var(--as);border-color:var(--ac)}
.habit-b .tickb{pointer-events:none}

/* ---- the day, read back: closer and easier to read -------------- */
.dwrap .sumrow{padding:12px 0;align-items:center}
.dwrap .sumk{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink-3)}
.dwrap .sumv{font-size:15.5px;font-weight:600;gap:8px}
.dwrap .sumface{width:24px;height:24px;flex:0 0 24px}
.dwrap .sumface .i{width:15px;height:15px}

/* ==================================================================
   REVISION · grouped pills read as one line of type
   The category name and the pills beside it are the same size, sit on
   the same line, and the name takes the colour of the pills it leads.
   ================================================================== */
.dwrap .row2 .pill{min-height:34px;padding:7px 13px;font-size:14px}
.dwrap .row2 .pill .i{width:15px;height:15px;flex:0 0 15px}
.dwrap .row2l{padding-top:8px}
.dwrap .row2l-pos{color:var(--green-deep)}
.dwrap .row2l-neg{color:var(--coral-deep)}
@media(max-width:560px){ .dwrap .row2l{padding-top:0} }
@media(max-width:520px){ .dwrap .pill{font-size:14px} }

/* the kinder thoughts start their own line, under the harder ones */
.pillstack{flex:1;display:flex;flex-direction:column;gap:7px}
.pillstack .pills{width:100%}

/* a block that stays centred with the question above it */
.field-c{text-align:center}
.field-c .pills{justify-content:center}

/* a one-line answer is one line wide, not the whole page */
.dwrap .paper-line{max-width:440px}

/* the footer sits just under the last answer */
.dwrap .dfoot{margin-top:28px}

/* ==================================================================
   REVISION · THE CHECK-IN, ALIGNED TO ONBOARDING
   Pastel header and rail, one white card that never changes size,
   a heading that never moves, and a footer that is always the same
   shape: back on the left, continue on the right.
   ================================================================== */

/* ---- header: shorter, and the same colour as the page behind it -- */
.dwrap .dhead{background:var(--as);backdrop-filter:none;
  border-bottom:1px solid var(--al);transition:background .45s ease,border-color .45s ease}
.dwrap .dheadin{padding:6px 20px;min-height:42px;gap:10px}
.dwrap .dhslot{flex:0 0 56px;height:28px}
.dwrap .dmark .i{width:18px;height:18px}
.dwrap .dsectname{font-size:9px;letter-spacing:.14em}
.dwrap .dexit{font-size:13px;padding:5px 6px;min-height:30px}

/* ---- the rail, pastel rather than saturated -------------------- */
.dwrap .dbar{height:4px;background:var(--al)}
.dwrap .dbar .seg{background:color-mix(in srgb,var(--sl) 70%,#fff)}
.dwrap .dbar .seg i{background:color-mix(in srgb,var(--sc) 58%,#fff)}
.dwrap .dbar .seg.done i{background:color-mix(in srgb,var(--sc) 68%,#fff)}

/* ---- one card, one size ---------------------------------------- */
.dwrap .dbody{padding:26px 22px 48px}
.qcard{width:100%;max-width:720px;margin:0 auto;background:var(--surface);
  border:1px solid var(--line);border-radius:0;padding:30px 34px 26px;
  min-height:468px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(31,38,34,.03)}
.qcard > .dcol{flex:1;display:flex;flex-direction:column;max-width:none}
.qcard > .dcol-wide{max-width:none}
.qcard .dfoot{margin-top:auto;padding-top:22px}

/* the question block is a fixed height, so nothing under it moves */
/* the question sits on the bottom of its box, so one line and two
   lines both finish at the same baseline */
.qcard .q{min-height:76px;margin:0;display:flex;align-items:flex-end}
.qcard .dcol:not(.dcol-left) .q{justify-content:center}
.qcard .qs{min-height:42px;margin-top:9px}
.qs-ghost{visibility:hidden}
.qcard .date{margin:0 0 10px}

/* ---- labels and inputs, in the onboarding voice ----------------- */
.dwrap .lbl{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink)}
.dwrap .paper,.dwrap .paper-line{border-radius:0;border:1px solid var(--line);background:#fff}
.dwrap .paper-line input,.dwrap .paper textarea{font-size:15px}
.dwrap .rule .lbl{font-size:13px}

/* ---- pills, the size of the onboarding chips -------------------- */
.dwrap .pill{min-height:auto;padding:8px 15px;font-size:13.5px;font-weight:500;
  border-radius:0;border-color:var(--line);background:#fff;color:var(--ink-2)}
.dwrap .pill .i{width:15px;height:15px;flex:0 0 15px}
.dwrap .pill.on{font-weight:600;background:var(--as);border-color:var(--ac);color:var(--ac)}
.dwrap .pill.on .i{color:var(--ac)}
.dwrap .row2 .pill{min-height:auto;padding:8px 15px;font-size:13.5px}
.dwrap .pills-pair .pill{justify-content:center;padding:12px 15px}

/* ---- the faces are the face, on a coloured disc ----------------- */
.dwrap .facec{border-radius:50%;border:0;background:var(--fs);color:var(--fc)}
.dwrap .facec .i{width:46px;height:46px;stroke-width:1.6}
.dwrap .face.on .facec{background:var(--fm);color:#fff;box-shadow:0 0 0 4px var(--fs)}
@media(max-width:720px){ .dwrap .facec .i{width:36px;height:36px} }
@media(max-width:380px){ .dwrap .facec .i{width:31px;height:31px} }

/* ---- the footer: same row, same places, every screen ------------ */
.qcard .dfootin{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.dfspace{flex:0 0 1px}
.dfootr{display:flex;align-items:center;gap:10px;margin-left:auto}
.dback2{display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:none;border:0;
  padding:10px 4px;border-radius:0;font-family:var(--sans);font-size:14.5px;font-weight:500;
  color:var(--ink-3)}
.dback2 .i{width:15px;height:15px}
.dback2:hover{color:var(--ink-2)}
.dwrap .dcta{width:auto;max-width:none;border-radius:0;padding:13px 28px;font-size:16px;
  font-weight:600;min-height:auto}
.dwrap .dcta .i{width:15px;height:15px}
.dwrap .dskip{font-size:14px;padding:10px 12px;color:var(--ink-3)}
.dwrap .dskip-l{align-self:auto;padding-left:12px}
.dwrap .btnpair{gap:10px}
.dwrap .btnpair .dcta{max-width:none}

/* on a phone the footer stays inside the card rather than sticking */
@media(max-width:820px){
  .dwrap .dbody{padding:18px 14px calc(30px + env(safe-area-inset-bottom,0px))}
  .dwrap .dfoot{position:static;border-top:0;background:none;padding:0;margin-top:auto}
  .qcard{padding:22px 18px 20px;min-height:calc(100dvh - 150px);border-radius:0}
  .qcard .q{min-height:70px}
  .dwrap .dcta{padding:12px 22px;font-size:15px}
}

/* ---- welcome cards: no ticks, quieter type --------------------- */
.wcardt{font-size:14.5px;font-weight:500}
.wcard{padding:12px 15px;border-radius:0}
.wcardi{flex-basis:34px;width:34px;height:34px}
.wcardi .i{width:18px;height:18px}
.wcards{gap:8px;margin-top:22px}

/* habits read as one column inside the card, so no name is ever cut */
.qcard .habits{grid-template-columns:1fr;gap:16px}
.qcard .habits > *{min-width:0}

/* a write-in row that lines up with the pills beside it */
.row2f{flex:1;min-width:0;max-width:440px}
@media(max-width:560px){ .row2f{max-width:none} }

/* ==================================================================
   REVISION · the assessment's header, bar and ground
   ================================================================== */
/* a fuller wash behind the whole thing, like the onboarding screens */
.dwrap{background:var(--as)}
.dwrap .dhead{background:var(--as);border-bottom:1px solid var(--al)}

/* one continuous progress bar */
.dwrap .dbar{height:4px;background:var(--al);border-radius:0;position:relative;display:block}
.dwrap .dbar > i{position:absolute;inset:0 auto 0 0;display:block;height:4px;border-radius:0;
  background:var(--ac);transition:width .5s ease}
.dwrap .dbar .seg{display:none}

/* the cards are white, not grey */
.qcard{background:#fff}

/* the journal box is a box, not a page */
.dwrap .paper textarea{min-height:132px}
@media(max-width:820px){ .dwrap .paper textarea{min-height:120px} }
.qcard .dwrite .dta,.qcard .paper #dta{min-height:150px}

/* a quiet label above the journal question */
.jrnlbl{display:block;margin-bottom:8px;color:var(--ac)}

/* the summary reads as a list, not a table stretched to the edges */
.sumcard{max-width:420px;margin-left:auto;margin-right:auto;background:#fff}
.dcol-left .sumcard{margin-left:0}
.sumrow{justify-content:flex-start;gap:14px}
.sumk{flex:0 0 84px}
.sumv{flex:1;justify-content:flex-start;text-align:left}

/* ==================================================================
   REVISION · a wider, lighter card and a tighter head
   ================================================================== */
.qcard{max-width:940px;padding:22px 34px 24px;border:0;
  background:rgba(255,255,255,.72);box-shadow:none}
.qcard .q{min-height:70px;font-size:33px}
.qcard .qs{min-height:34px;margin-top:7px}
.qcard .field:first-of-type,.qcard .rows,.qcard .faces,.qcard .sliders,
.qcard .wcards,.qcard .habits,.qcard .squares{margin-top:16px}
.qcard .field{margin-top:18px}

/* the picture becomes the card's own header */
.dcol-hero{align-items:stretch}
.qcard{overflow:hidden}
.hero{margin:-22px -34px 20px;height:210px;overflow:hidden}
.hero img{width:100%;height:210px;object-fit:cover;display:block}

/* the first screen puts its one button in the middle */
.dwrap[data-step="0"] .qcard .dfootin{justify-content:center}
.dwrap[data-step="0"] .dfootr{margin-left:0}

/* Save and exit takes the section colour, darkened */
.dwrap .dexit{color:color-mix(in srgb,var(--ac) 70%,var(--ink))}
.dwrap .dexit:hover{color:var(--ac)}

/* write-in boxes are slimmer */
.dwrap .paper-line{padding:2px 4px}
.dwrap .paper-line input{padding:9px 12px;font-size:14.5px}
.row2f{max-width:320px}

/* charge stays on the pill, whatever the section accent is */
.dwrap .pill.pill-pos{border-color:var(--green-line);color:var(--green-deep)}
.dwrap .pill.pill-pos.on{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.dwrap .pill.pill-neg{border-color:var(--coral-line);color:var(--coral-deep)}
.dwrap .pill.pill-neg.on{background:var(--coral-deep);border-color:var(--coral-deep);color:#fff}
.dwrap .row2l-pos{color:var(--green-deep)}
.dwrap .row2l-neg{color:var(--coral-deep)}

/* habits sit side by side, two columns, always */
.qcard .habits{grid-template-columns:1fr 1fr;gap:20px}
.qcard .habits .habit{padding:11px 12px}
.qcard .habits .habitn{font-size:13.5px}
@media(max-width:700px){ .qcard .habits{grid-template-columns:1fr;gap:14px} }

@media(max-width:820px){
  .qcard{padding:18px 16px 18px}
  .hero{margin:-18px -16px 16px;height:170px}
  .hero img{height:170px}
  .qcard .q{font-size:27px;min-height:64px}
}

/* ==================================================================
   REVISION · lighter ground, centred pages, leaner inputs
   ================================================================== */
.qcard{background:rgba(255,255,255,.58)}

/* the header: name hard left, save and exit hard right */
.dwrap .dheadin{justify-content:space-between}
.dwrap .dmark{flex:0 0 auto;flex-direction:row;gap:8px;align-items:center}
.dwrap .dhslot{display:none}
.dwrap .dsectname{font-size:10px}

/* nothing floats away from its question any more */
.rows-tight{margin-top:14px;margin-bottom:2px}
.rows-tight .row2{border-top:0;padding:6px 0}
.qcard .rows{margin-top:14px}

/* a label that carries the health accent */
.dwrap .lbl-green{color:var(--green-deep)}

/* the write-in is an input, not a page */
.dwrap .paper-line{border-radius:0}
.dwrap .paper-line.slim{max-width:300px}
.dcol:not(.dcol-left) .paper-line.slim{margin:0 auto}
.dwrap .paper-line input{padding:10px 13px;font-size:14.5px;line-height:1.4}
.dwrap .field-c .paper-line{margin-left:auto;margin-right:auto}

/* pills held to a number of rows */
.pills-3 .pills{max-width:660px;margin:0 auto}
.dcol-wide .field .pills{justify-content:center}
.dcol-left .field .pills{justify-content:flex-start}
.pills-4 .pills{max-width:720px;margin:0 auto}

/* group names read as plain headings */
.dwrap .row2l,.dwrap .row2l-pos,.dwrap .row2l-neg{color:var(--ink)}

/* the sliders are narrower, and wear their own name */
.qcard .sliders{max-width:520px;margin-left:auto;margin-right:auto}
.qcard .slider .sliderh{justify-content:center;text-align:center}
.qcard .slider .sliderh b,.qcard .slider .sliderh strong{color:var(--sc)}
.qcard .sliderh .sname{color:var(--sc);font-weight:700}

/* a mark on the completion cards */
.heromark{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--ac);
  border:1px solid var(--al);display:flex;align-items:center;justify-content:center;
  margin:-48px auto 14px;position:relative;z-index:2;box-shadow:0 4px 14px rgba(31,38,34,.10)}
.heromark .i{width:26px;height:26px}

/* the welcome tiles carry artwork */
.wcardi{overflow:hidden;border-radius:0;background:var(--as)}
.wcardi img{width:100%;height:100%;object-fit:cover;display:block}

/* add your own habit */
.habadd{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;cursor:pointer;
  background:none;border:1px dashed var(--line-2);border-radius:0;padding:11px 14px;
  margin-top:8px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-3)}
.habadd .i{width:14px;height:14px}
.habadd:hover{color:var(--ac);border-color:var(--ac)}

/* the habits page reads down the middle */
.dcol-habits .rule{justify-content:center;text-align:center}
.dcol-habits .rule::after{display:none}
.dcol-habits .rule::before{content:'';flex:1;height:1px;background:var(--al)}
.dcol-habits .rule .lbl{padding:0 12px}
.dcol-habits .rule{gap:0}

/* a section that appears when its question is answered */
.fadein{animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fadein{animation:none}}
.dwrap .field-c .lbl{display:block;text-align:center}
.dwrap .paper-line.slim{max-width:280px;width:100%}

/* the sliders are long enough to actually drag. They sit in a centred
   flex column, so without an explicit width they shrink to their label. */
.qcard .sliders{width:100%;max-width:660px}
/* the difficult pills sit on four rows rather than three */
.qcard .pills-4 .pills{max-width:600px;margin-left:auto;margin-right:auto}
/* the opening screen's one button is wider, because it is the only one */
.qcard .dcol > .dfoot .dcta{min-width:190px;justify-content:center}

/* ==================================================================
   SAGERESET CANVAS LOOK · cream page, hairline header, square faces,
   green-soft chosen pills, ink button. Overrides only; every question,
   option and line of copy stays as written.
   ================================================================== */
.dwrap{background:var(--bg)!important}
.dwrap .dhead{background:var(--bg);backdrop-filter:none;border-bottom:1px solid var(--line)}
.dsectname{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.07em}
.dbar{height:4px;background:var(--line)}
.dbar i{height:4px;background:var(--green)!important}
.dback,.dexit{color:var(--ink)}
.dback:hover,.dexit:hover{color:var(--coral-deep)}
.lbl,.date{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.07em}
.q{color:var(--ink)}

/* faces: square tinted tiles, like the canvas */
.faces{gap:8px;flex-wrap:nowrap;max-width:560px;margin-left:auto;margin-right:auto}
.face{flex:1 1 0;min-width:0;padding:14px 2px 10px;gap:8px;background:#fff;
  border:1px solid var(--fl);border-radius:0;transition:background .16s ease,border-color .16s ease}
.face:hover{transform:none;background:var(--fs)}
.facec{width:auto;height:auto;border:0;border-radius:0;background:none}
.facec .i{width:34px;height:34px}
.facel{font-size:12.5px;font-weight:500;color:var(--ink)}
.face.on{background:var(--fs);border-color:var(--fc)}
.face.on .facec{background:none;color:var(--fc);box-shadow:none;border:0}
.face.on .facel{color:var(--ink);font-weight:600}

/* pills: white, hairline; chosen = green-soft with an ink edge */
.pill,.pill-neg,.pill-pos,.pill-feel{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:500}
.pill:hover,.pill-neg:hover,.pill-pos:hover,.pill-feel:hover{background:var(--bg);border-color:var(--ink);color:var(--ink)}
.pill .i{color:var(--ink-3)}
.pill.on,.pill-neg.on,.pill-pos.on,.pill-feel.on,.pill-lead.on{background:var(--green-soft);border-color:var(--ink);color:var(--ink);font-weight:600}
.pill.on .i{color:var(--ink)}

/* the one button */
.dcta{background:var(--ink);color:#fff;min-height:54px}
.dcta:hover{filter:none;background:#183428}
.dskip-alt{color:var(--ink)}
.paper{border-radius:0}
.dbar{background:var(--line)!important}
.dbar i{background:var(--green-deep)!important}
.faces{width:100%}
.face{min-height:92px;justify-content:center}
.dwrap .pill,.dwrap .pill-neg,.dwrap .pill-pos,.dwrap .pill-feel{border-color:var(--line)!important;color:var(--ink)!important;background:#fff}
.dwrap .pill:hover{border-color:var(--ink)!important;background:var(--bg)}
.dwrap .pill.on,.dwrap .pill-neg.on,.dwrap .pill-pos.on,.dwrap .pill-feel.on{background:var(--green-soft)!important;border-color:var(--ink)!important;color:var(--ink)!important}

/* canvas: step counter and a tick on chosen pills */
.dwrap .dcount{margin-left:auto;margin-right:14px;font-family:var(--sans,Outfit,sans-serif);font-size:12.5px;color:var(--ink-3)}
.dwrap .pill.on::before{content:"\2713";margin-right:6px;font-size:12px}

/* canvas intro: banner, numbered parts card, full-width start */
.dwrap .dintro{text-align:center}
.dwrap .dibanner{height:190px;margin:-8px -24px 22px;overflow:hidden;background:var(--green-soft)}
.dwrap .dibanner img{width:100%;height:100%;object-fit:cover;display:block}
.dwrap .dintro .date{color:var(--purple-deep);font-weight:600}
.dwrap .diparts{background:#fff;border:1px solid var(--line);margin:24px auto 0;max-width:460px;text-align:left}
.dwrap .dipart{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--line)}
.dwrap .dipart:first-child{border-top:0}
.dwrap .dipn{width:30px;height:30px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--as);border:1px solid var(--al);color:var(--ac);font:600 12.5px Outfit,sans-serif}
.dwrap .dipt{font-size:15px;font-weight:600;color:var(--ink)}
.dwrap .dintro .dcta{width:100%;max-width:460px;margin-left:auto;margin-right:auto}

/* ---- saving and support (daily check-in) ---- */
.dsaveerr{max-width:640px;margin:0 auto 14px;padding:12px 16px;border:1px solid var(--coral-line);
  background:var(--coral-soft);color:var(--coral-deep);font-size:14px;line-height:1.55;text-align:left}
.dsaveerr .dlink{color:var(--coral-deep);text-decoration:underline;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.dsupport{width:100%;text-align:left;border:1px solid var(--purple-line);background:var(--purple-soft);padding:24px 26px;margin-top:6px}
.dsupport .q{font-size:26px;margin:0 0 10px}
.dsupport .qs{font-size:15.5px;line-height:1.7;margin:0}
.dsupportbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.dsupportbtns .dcta{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.dsupport .q{text-align:left}