/* pages/planner/dash-cards.css — drift, milestones, finish ring, management, panels.
   Split from the pre-#149 monolith — rule ORDER preserved; see docs/architecture.md
   ("CSS layers") for the load-order contract each page's <head> follows. */
/* drift: the plan drifted, remedies as cards */
.plannerpage .driftcard{
  background:var(--pl-surface);border:1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius:16px;padding:24px;margin:0;
}
.plannerpage .driftcard .sub{color:var(--pl-ink);font-size:13.5px}
.plannerpage .optgrid{display:grid;gap:12px;grid-template-columns:1fr;margin-top:12px}
.plannerpage .optbtn{
  display:block;text-align:left;background:var(--pl-card);border:1px solid var(--pl-line);
  border-radius:12px;padding:15px 17px;cursor:pointer;font:inherit;color:var(--pl-ink);
  transition:border-color .12s;
}
.plannerpage .optbtn:hover:not(:disabled){border-color:var(--pl-accent)}
.plannerpage .optbtn:disabled{opacity:.5;cursor:default}
/* The A/B letter badge and its .desc retired with 1m: each way out of drift
   is now two lines — what changes, then what it preserves — and nothing
   referred to the letters. The badge rule outlived them and was still
   painting a mono border around the second line. */
.plannerpage .driftcard .linkbtn{color:var(--pl-mute);font-size:12px}
.plannerpage .driftcard .linkbtn:hover{color:var(--pl-ink)}

/* milestone summary cards */
.plannerpage .mscards{display:grid;grid-template-columns:1fr;gap:24px}
.plannerpage .mscard{
  background:var(--pl-surface);border:1px solid var(--pl-line);border-radius:16px;
  padding:24px;box-shadow:0 1px 2px var(--pl-shadow);
}
.plannerpage .mschead{display:flex;align-items:center;gap:12px;margin-bottom:16px;color:var(--pl-accent)}
.plannerpage .mschead h3{margin:0;font-size:15px;font-weight:700;color:var(--pl-ink)}
.plannerpage .msdesc{margin:0 0 16px;font-size:14px;color:var(--pl-mute);line-height:1.6}
.plannerpage .msbig{font-size:20px;font-weight:700;color:var(--pl-ink);letter-spacing:-.01em}

/* the full milestone list, folded away */
.plannerpage .msall{
  background:var(--pl-surface);border:1px solid var(--pl-line);border-radius:16px;
}
.plannerpage .msall summary{
  cursor:pointer;padding:16px 24px;list-style:none;
  font-size:11px;font-weight:700;color:var(--pl-mute);
  text-transform:uppercase;letter-spacing:.12em;
  display:flex;align-items:center;gap:8px;
}
.plannerpage .msall summary::-webkit-details-marker{display:none}
.plannerpage .msall summary::before{content:"▸";font-size:10px;transition:transform .15s}
.plannerpage .msall[open] summary::before{transform:rotate(90deg)}
.plannerpage .msall summary:hover{color:var(--pl-ink)}
.plannerpage #msList{padding:0 24px 8px}
.plannerpage .msrow2{display:flex;gap:15px;padding:12px 0;border-bottom:1px solid var(--pl-line);align-items:baseline}
.plannerpage .msrow2:last-child{border-bottom:0}
.plannerpage .msnum{font-family:var(--jp);font-size:17px;width:22px;flex:none;color:var(--pl-mute)}
.plannerpage .msrow2.done .msnum{color:var(--pl-good)}
.plannerpage .msrow2.now .msnum{color:var(--pl-accent)}
.plannerpage .msbody{flex-grow:1;min-width:0}
.plannerpage .msttl{font-weight:600;font-size:13.5px;color:var(--pl-mute)}
.plannerpage .msrow2.done .msttl{color:var(--pl-good)}
.plannerpage .msrow2.now .msttl{color:var(--pl-ink);font-weight:700}
.plannerpage .mswhen{color:var(--pl-mute);font-size:11.5px;margin-top:2px;font-variant-numeric:tabular-nums}
.plannerpage .msdot{width:7px;height:7px;border-radius:50%;background:var(--pl-accent);flex:none;align-self:center}

/* the finish ring + CTA */
.plannerpage .finishcard{
  display:flex;flex-direction:column;align-items:center;
  background:var(--pl-surface);border:1px solid var(--pl-line);border-radius:24px;
  padding:32px;box-shadow:0 1px 2px var(--pl-shadow);
}
.plannerpage .cardlabel.wide{letter-spacing:.4em;text-indent:.4em;font-weight:700;font-size:10px;margin-bottom:24px}
.plannerpage .finring{position:relative;width:160px;height:160px;margin-bottom:24px}
.plannerpage .finring svg{position:absolute;inset:0;width:100%;height:100%}
.plannerpage .fintrack{stroke:color-mix(in srgb, var(--pl-accent) 10%, transparent)}
.plannerpage .finarc{stroke:var(--pl-accent);transition:stroke-dashoffset 1s}
.plannerpage .finin{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.plannerpage .finmon{font-size:12px;font-weight:700;color:var(--pl-ink);text-transform:uppercase;letter-spacing:.15em;text-indent:.15em}
.plannerpage .finday{font-size:48px;font-weight:900;line-height:1;color:var(--pl-accent);font-variant-numeric:tabular-nums}
.plannerpage .finyear{margin-top:4px;font-size:12px;font-weight:700;color:var(--pl-mute)}
.plannerpage .startbtn{
  display:flex;width:100%;align-items:center;justify-content:center;gap:12px;
  background:var(--pl-accent);color:var(--pl-accent-ink);border-radius:12px;
  padding:16px 24px;font-size:15px;font-weight:700;text-decoration:none;text-align:center;
  box-shadow:0 0 20px color-mix(in srgb, var(--pl-accent) 30%, transparent);
  transition:opacity .15s;
}
.plannerpage .startbtn:hover{opacity:.9}
.plannerpage .stepsline{margin-top:12px;font-size:12px;color:var(--pl-mute);text-align:center;line-height:1.6}

/* plan management */
.plannerpage .mgmtcard{
  background:var(--pl-card);border:1px solid var(--pl-line);border-radius:24px;
  padding:32px;display:flex;flex-direction:column;gap:16px;
}
.plannerpage .mgmtcard h4{
  margin:0;font-size:12px;font-weight:700;color:var(--pl-mute);
  text-transform:uppercase;letter-spacing:.12em;
}
.plannerpage .mgmtbtn{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
  background:var(--pl-surface);border:1px solid var(--pl-line);border-radius:12px;
  padding:16px;cursor:pointer;font-family:inherit;
  transition:border-color .15s,background .15s;
}
.plannerpage .mgmtbtn .mm{display:flex;align-items:center;gap:12px;min-width:0}
.plannerpage .mgmtbtn .mm .ic{color:var(--pl-mute);transition:color .15s}
.plannerpage .mgmtbtn .mlabel{font-size:14px;font-weight:700;color:var(--pl-ink)}
.plannerpage .mgmtbtn:hover{border-color:color-mix(in srgb, var(--pl-accent) 50%, transparent)}
.plannerpage .mgmtbtn:hover .mm .ic{color:var(--pl-accent)}
.plannerpage .mgmtbtn.danger:hover{
  border-color:color-mix(in srgb, var(--pl-danger) 50%, transparent);
  background:color-mix(in srgb, var(--pl-danger) 5%, transparent);
}
.plannerpage .mgmtbtn.danger:hover .mm .ic{color:var(--pl-danger)}

/* ---- panels -----------------------------------------------------------
   Slightly translucent, so the ground and its glows tint the cards instead
   of being walled off behind them. Grouped here rather than edited into
   each rule so the treatment is one decision in one place. The tinted and
   selected states keep their own rules: they are more specific, so they win
   regardless of order.

   Deliberately NO backdrop-filter, unlike the landing's .icard. Two
   reasons, and the second is the one that decided it:

   1. There is nothing here worth blurring. The backdrop is a smooth
      gradient plus a 120px grid; a blurred gradient is the same gradient.
      It is an expensive filter — one per card, on a page with ten of them
      — buying an imperceptible difference.
   2. It rendered wrong in light mode. `isolation:isolate` on the body
      makes body the backdrop root, so a card with backdrop-filter samples
      an essentially empty backdrop and composites its translucent white
      over transparent black — cards came out muddy grey with washed-out
      text. Invisible in dark mode, glaring in light. The landing gets away
      with the same construction only because its cards sit at 92%, opaque
      enough to mask it.

   Hence 92% here too: enough for the ground to tint the card, not so much
   that the grid lines read through it as printing artefacts. */
.plannerpage .stepcard,
.plannerpage .intcard,
.plannerpage .boostcard,
.plannerpage .heroin,
.plannerpage .roadcard,
.plannerpage .mscard,
.plannerpage .msall,
.plannerpage .finishcard,
.plannerpage .driftcard{
  background:color-mix(in srgb, var(--pl-surface) 92%, transparent);
}
.plannerpage .mgmtcard{
  background:color-mix(in srgb, var(--pl-card) 92%, transparent);
}
/* The selected intensity card: its ember tint layered over the same fill
   rather than replacing it with a flat opaque one. */
.plannerpage .intcard.sel{
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--pl-accent) 8%, transparent),
      color-mix(in srgb, var(--pl-accent) 8%, transparent)),
    color-mix(in srgb, var(--pl-surface) 92%, transparent);
}