/* pages/planner/hero-dash.css — the step-3 journey hero and the active dashboard grid.
   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. */
/* ---- step 3: the journey hero ---- */
.plannerpage .hero{position:relative}
.plannerpage .heroglow{
  position:absolute;inset:-4px;border-radius:32px;z-index:0;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--pl-accent) 30%, transparent),
    color-mix(in srgb, var(--pl-accent) 14%, transparent));
  filter:blur(24px);opacity:.2;transition:opacity 1s;
}
.plannerpage .hero:hover .heroglow{opacity:.4}
.plannerpage .heroin{
  position:relative;z-index:1;overflow:hidden;
  background:var(--pl-surface);border:1px solid var(--pl-line);
  border-radius:32px;padding:40px;box-shadow:0 1px 2px var(--pl-shadow);
}
.plannerpage .heroin::before,
.plannerpage .heroin::after{
  content:"";position:absolute;width:256px;height:256px;border-radius:50%;
  background:color-mix(in srgb, var(--pl-accent) 5%, transparent);
  filter:blur(64px);pointer-events:none;
}
.plannerpage .heroin::before{top:-80px;right:-80px}
.plannerpage .heroin::after{bottom:-80px;left:-80px}
.plannerpage .heroin > *{position:relative;z-index:1}
.plannerpage .heroin{display:flex;flex-direction:column;align-items:center;gap:48px}
.plannerpage .herocopy{flex:1;text-align:center;min-width:0}
.plannerpage .readychip{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:4px 12px;border-radius:999px;
  background:color-mix(in srgb, var(--pl-accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--pl-accent) 20%, transparent);
  color:var(--pl-accent);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
}
.plannerpage .pulse{width:6px;height:6px;border-radius:50%;background:var(--pl-accent);animation:pl-pulse 2s ease-in-out infinite}
@keyframes pl-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.plannerpage .herocopy h2{margin:0 0 12px;font-size:30px;font-weight:700;letter-spacing:-.02em}
.plannerpage .heroline{margin:0 auto;max-width:24rem;font-size:14px;color:var(--pl-mute);line-height:1.65}
.plannerpage .note{
  margin:16px auto 0;max-width:26rem;padding:12px 16px;border-radius:12px;text-align:left;
  border:1px solid color-mix(in srgb, var(--pl-danger) 40%, transparent);
  background:color-mix(in srgb, var(--pl-danger) 8%, transparent);
  color:var(--pl-danger);font-size:13px;line-height:1.5;
}

.plannerpage .ring{position:relative;width:288px;height:288px;flex:none}
.plannerpage .ringhalo{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.plannerpage .ringhalo.r1{border:1px solid color-mix(in srgb, var(--pl-accent) 10%, transparent);transform:scale(1.1)}
.plannerpage .ringhalo.r2{border:1px solid color-mix(in srgb, var(--pl-accent) 5%, transparent);transform:scale(1.25)}
.plannerpage .ring svg{position:absolute;inset:0;width:100%;height:100%}
.plannerpage .ringtrack{stroke:var(--pl-faint)}
.plannerpage .ringarc{
  stroke:var(--pl-accent);
  filter:drop-shadow(0 0 12px color-mix(in srgb, var(--pl-accent) 60%, transparent));
}
.plannerpage .ringin{
  position:absolute;inset:24px;border-radius:50%;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--pl-card) 85%, transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid color-mix(in srgb, var(--pl-ink) 10%, transparent);
  box-shadow:0 0 50px var(--pl-shadow);
}
.plannerpage .ringlabel{
  margin:0 0 8px;font-size:11px;font-weight:700;color:var(--pl-mute);
  text-transform:uppercase;letter-spacing:.4em;text-indent:.4em;
}
.plannerpage .ringmon{
  font-size:14px;font-weight:900;color:var(--pl-ink);
  text-transform:uppercase;letter-spacing:.4em;text-indent:.4em;margin-bottom:4px;
}
.plannerpage .ringday{
  font-size:92px;font-weight:900;line-height:1;color:var(--pl-accent);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.plannerpage .ringyear{font-size:20px;font-weight:900;color:var(--pl-ink);letter-spacing:.2em;text-indent:.2em;margin-top:4px}
/* The verdict line has to fit inside the ring's inner circle — at 16px it
   sat on the arc. */
.plannerpage .ringmicro{display:flex;align-items:center;gap:6px;margin-top:8px}
.plannerpage .ringmicro span:not(.mdot){
  font-size:8px;color:var(--pl-mute);text-transform:uppercase;letter-spacing:.12em;
}
.plannerpage .mdot{width:4px;height:4px;border-radius:50%;background:color-mix(in srgb, var(--pl-accent) 40%, transparent)}
.plannerpage .orb{
  position:absolute;top:40px;right:40px;z-index:2;width:16px;height:16px;border-radius:50%;
  background:var(--pl-accent);border:4px solid var(--pl-base);
  box-shadow:0 0 20px var(--pl-accent);
}

.plannerpage .heroact{width:100%;display:flex;flex-direction:column;align-items:center}
.plannerpage .activate{
  display:flex;width:100%;align-items:center;justify-content:center;gap:12px;
  background:var(--pl-ink);color:var(--pl-base);border:0;border-radius:16px;
  padding:20px 48px;font:700 15px inherit;font-family:inherit;cursor:pointer;
  box-shadow:0 20px 25px -5px var(--pl-shadow);
  transition:background .15s,color .15s,transform .15s;
}
.plannerpage .activate:hover:not(:disabled){background:var(--pl-accent);color:var(--pl-onaccent);transform:scale(1.05)}
.plannerpage .activate:active:not(:disabled){transform:scale(.95)}
.plannerpage .activate:disabled{opacity:.4;cursor:default}
.plannerpage .activate .ic{transition:transform .15s}
.plannerpage .activate:hover:not(:disabled) .ic{transform:translateX(4px)}
.plannerpage .hint{
  margin:16px 0 0;max-width:300px;text-align:center;font-size:10px;color:var(--pl-mute);
  text-transform:uppercase;letter-spacing:.12em;line-height:1.7;
}

/* ---- active: the dashboard ---- */
.plannerpage #active{position:relative;overflow:hidden;padding-bottom:8px}
.plannerpage .wm{
  position:absolute;top:50%;right:-10%;transform:translateY(-50%);z-index:0;
  font-family:var(--jp);font-size:500px;line-height:1;font-weight:700;
  color:color-mix(in srgb, var(--pl-ink) 2%, transparent);
  user-select:none;pointer-events:none;
}
.plannerpage .statusrow{
  position:relative;z-index:1;display:flex;align-items:center;flex-wrap:wrap;
  gap:12px;margin-bottom:32px;
}
.plannerpage .statusrow .pill{
  display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  background:color-mix(in srgb, var(--pl-mute) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--pl-mute) 25%, transparent);
  color:var(--pl-mute);
}
.plannerpage .statusrow .pill::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:pl-pulse 2s ease-in-out infinite;
}
.plannerpage .statusrow .pill.good{background:var(--pl-good-soft);border-color:var(--pl-good-line);color:var(--pl-good)}
.plannerpage .statusrow .pill.info{
  background:color-mix(in srgb, var(--accent2) 10%, transparent);
  border-color:color-mix(in srgb, var(--accent2) 25%, transparent);color:var(--accent2);
}
.plannerpage .statusrow .pill.warn{
  background:color-mix(in srgb, var(--warn) 10%, transparent);
  border-color:color-mix(in srgb, var(--warn) 30%, transparent);color:var(--warn);
}
.plannerpage .started,.plannerpage .streakline{font-size:12px;color:var(--pl-mute)}

.plannerpage .dashgrid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:32px}
.plannerpage .dashmain{display:flex;flex-direction:column;gap:32px;min-width:0}
.plannerpage .dashside{display:flex;flex-direction:column;gap:24px;min-width:0}

.plannerpage .roadcard{
  position:relative;overflow:hidden;
  background:var(--pl-surface);border:1px solid var(--pl-line);
  border-radius:24px;padding:40px;box-shadow:0 1px 2px var(--pl-shadow);
}
.plannerpage .roadtarget{position:absolute;top:0;right:0;padding:32px;text-align:right}
.plannerpage .roadlevel{margin:0;font-size:36px;font-weight:900;letter-spacing:-.02em;color:var(--pl-ink)}
.plannerpage .roadcard h2{margin:0 0 40px;font-size:30px;font-weight:700;letter-spacing:-.01em;max-width:calc(100% - 190px)}
.plannerpage .statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.plannerpage .statval{
  margin:4px 0 0;font-size:24px;font-weight:700;color:var(--pl-accent);
  font-variant-numeric:tabular-nums;
}
.plannerpage .pbar2{
  margin-top:48px;height:8px;border-radius:999px;background:var(--pl-track);overflow:hidden;
}
.plannerpage .pbar2 i{
  display:block;height:100%;width:0;border-radius:999px;background:var(--pl-accent);
  transition:width 1s;
}
.plannerpage .pbarline{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;font-size:12px;font-weight:500;color:var(--pl-mute);
}