/* pages/planner/skin-playful.css — the planner page in the playful voice
   (wireframes 1l/1m visual layer, decision 0015). Token remap plus light
   structural touches, scoped to body.plannerpage; the interview-flow
   restructure of 1l is tracked separately. Values are var() references
   only (decision 0008). */

body.plannerpage{
  --pl-base:var(--play-bg); --pl-surface:var(--play-bg); --pl-card:var(--play-card);
  --pl-line:var(--play-track); --pl-mute:var(--play-mute); --pl-ink:var(--play-ink);
  --pl-track:var(--play-track); --pl-faint:var(--play-paper);
  --pl-accent-deep:var(--play-link); --pl-shadow:transparent;
  --bg:var(--play-bg); --panel:var(--play-card); --panel2:var(--play-paper);
  --card:var(--play-card); --line:var(--play-track); --line2:var(--play-soft);
  --ink:var(--play-ink); --dim:var(--play-mute); --mute:var(--play-mute);
  --accent:var(--play-accent); --accent2:var(--play-link);
  --accent-soft:var(--play-accent-soft); --hover:var(--play-paper);
  --shadow1:transparent; --shadow2:transparent;
}
body.plannerpage{background:var(--play-bg)}

.plannerpage h1,.plannerpage h2,.plannerpage h3{font-family:var(--play-display)}
.plannerpage .viewtabs a,.plannerpage .viewtabs button{font-family:var(--play-display)}

.plannerpage .btn:not(.ghost):not(.sm){border:2px solid var(--play-ink);border-radius:14px;background:var(--play-accent);color:var(--play-accent-ink);box-shadow:0 4px 0 var(--play-edge);font-family:var(--play-display)}
.plannerpage .btn:not(.ghost):not(.sm):hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.plannerpage .btn:not(.ghost):not(.sm):active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)}
.plannerpage .btn:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

.plannerpage .card,.plannerpage .stepcard,.plannerpage .intcard,.plannerpage .datecard{border:2px solid var(--play-ink);border-radius:12px}
.plannerpage .intcard:hover{box-shadow:0 4px 0 var(--play-edge);transform:translateY(-2px)}

@media (prefers-reduced-motion: reduce){
  .plannerpage .btn{transition:none}
}

/* 1l voice: the tanuki asks; the ring answers. */
.pl-says{margin-top:10px}
.pl-says .p-tanu{color:var(--play-ink)}
.pl-says .p-bub{font-size:1.05rem;margin:0}
.plannerpage .activate{border:2px solid var(--play-ink);border-radius:14px;background:var(--play-accent);color:var(--play-accent-ink);box-shadow:0 4px 0 var(--play-edge);font-family:var(--play-display)}
.plannerpage .activate:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}

/* 1l interview layout: questions left, the answering ring right. */
.ivgrid{display:flex;gap:26px;align-items:flex-start}
.iv-left{flex:1;min-width:0}
.iv-right{width:290px;flex:none;display:flex;flex-direction:column;align-items:center;gap:16px;position:sticky;top:76px}
.iv-right .ring{width:230px;height:230px;position:relative}
.iv-ask{display:inline-flex;align-items:center;gap:10px;font-size:1.05rem;margin:18px 0 12px;border-style:dashed}
.iv-emoji{font-size:1.6rem;line-height:1}
.iv-right .heroline{text-align:center;color:var(--play-mute);font-size:.9rem;margin:0}
.mgmtsum{cursor:pointer;font-family:var(--play-display);font-size:1rem;padding:4px 0}
.mgmtcard[open] .mgmtsum{margin-bottom:8px}
@media (max-width:900px){
  .ivgrid{display:block}
  .iv-right{width:auto;position:static;margin-top:18px}
}

/* 1l quick picks + the fine-tune fold. */
.xpicks{display:flex;gap:10px;flex-wrap:wrap}
.xpick{border:2px solid var(--play-ink);border-radius:14px;padding:8px 20px;background:var(--play-card);color:var(--play-ink);font-family:var(--play-display);font-size:1rem;cursor:pointer;box-shadow:0 4px 0 var(--play-edge)}
.xpick:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.xpick.sel{background:var(--play-accent);color:var(--play-accent-ink)}
.xpick:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.xfine{margin-top:14px}
.xfine>summary{cursor:pointer;color:var(--play-mute);font-family:var(--play-display)}
.xfine[open]>summary{margin-bottom:10px}
.plannerpage .topbar .headctl{margin-left:auto}
/* The planner is .shellui too, and that skin's topbar is translucent with a
   backdrop blur. The blur composites against the viewport base rather than
   the page ground, so the bar renders as a grey slab — visible in dark at
   320px, where the shell's narrow layout changes what sits behind it. The
   planner's own bar is opaque; this is the same fix, one sheet later, where
   it can actually win against .shellui .topbar. */
.plannerpage .topbar{
  background:var(--pl-base);backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* 1m: the tanuki fronts the drift card; the roadmap strip closes the card. */
.driftsays{display:flex;align-items:center;gap:10px}
.driftsays .p-tanu{width:48px;height:48px;color:var(--play-ink);flex:none}
.roadstrip{display:flex;align-items:center;gap:6px;margin-top:12px}
.rs-n{width:36px;height:36px;border-radius:50%;border:3px solid var(--play-ink);display:inline-flex;align-items:center;justify-content:center;font-size:13px;background:var(--play-card);color:var(--play-ink);flex:none}
.rs-n.done{background:var(--play-accent);color:var(--play-accent-ink)}
.rs-n.now{box-shadow:0 3px 0 var(--play-edge)}
.rs-n.lock{border-color:var(--play-soft);color:var(--play-mute);background:var(--play-lock)}
.rs-t{flex:1;border-top:3px solid var(--play-ink)}
.rs-t.lock{border-top-style:dashed;border-top-color:var(--play-soft)}

/* ---- 1m: the plan, running -------------------------------------------- *
 * The frame's own primitives, scoped to the two plan pages (#active, and
 * page two's #plan since 29b) so the board's generic names
 * (.pill .tag .node .bx .ic .btn3) cannot reach the trainer sheets this page
 * also loads, nor the interview in #setup. Values are measured off the board:
 * .bx 2px/12px/10px, .pill 2px/999px/1px 12px, .node 54px/3px, .tag 12px at
 * .06em in the display voice — which is NOT the kit's .p-tag (sans, .1em,
 * 11.52px), so it is declared here rather than by retuning the kit.
 */
.plannerpage :is(#active, #plan) .bx{
  border:2px solid var(--play-ink);border-radius:12px;padding:10px;
  background:var(--play-card);color:var(--play-ink);
}
.plannerpage :is(#active, #plan) .bx.is-paper{background:var(--play-paper)}
.plannerpage :is(#active, #plan) .tag{
  font-family:var(--play-display);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--play-mute);
}
:root[lang="hi"] .plannerpage :is(#active, #plan) .tag{text-transform:none;letter-spacing:0}
.plannerpage :is(#active, #plan) .pill{
  display:inline-block;border:2px solid var(--play-ink);border-radius:999px;
  padding:1px 12px;background:var(--play-card);color:var(--play-ink);
  font-family:var(--play-display);font-size:.85rem;white-space:nowrap;
}
.plannerpage :is(#active, #plan) .ic{
  width:34px;height:34px;border:2px solid var(--play-ink);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:var(--play-card);color:var(--play-ink);font-size:.95rem;cursor:pointer;
}
.plannerpage :is(#active, #plan) .node{
  width:54px;height:54px;border-radius:50%;border:3px solid var(--play-ink);
  display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;
  background:var(--play-card);color:var(--play-ink);flex:none;
}
.plannerpage :is(#active, #plan) .node.is-done{background:var(--play-accent);color:var(--play-accent-ink)}
.plannerpage :is(#active, #plan) .node.is-lock{border-color:var(--play-soft);color:var(--play-mute);background:var(--play-lock)}
/* The board writes color:#fff on the ember fill; #158 settled that as
   --play-accent-ink (white measures 2.80:1 on this orange). */
.plannerpage :is(#active, #plan) .btn3{
  background:var(--play-accent);color:var(--play-accent-ink);
  border:2px solid var(--play-ink);border-radius:14px;padding:6px 20px;
  font-family:var(--play-display);font-weight:700;font-size:1rem;
  box-shadow:0 4px 0 var(--play-edge);cursor:pointer;text-decoration:none;
  display:inline-block;text-align:center;
  transition:transform .06s ease,box-shadow .06s ease;
}
.plannerpage :is(#active, #plan) .btn3:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.plannerpage :is(#active, #plan) .btn3:active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)}
.plannerpage :is(#active, #plan) .btn3:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.plannerpage #active .p-tanu{width:44px;height:44px;background:var(--play-lock)}
.plannerpage #active .bub{
  border:2px solid var(--play-ink);border-radius:12px;background:var(--play-card);
  color:var(--play-ink);padding:6px 12px;
}

/* header: name, how it is going, what it is for, and ⚙ */
.pl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pl-head h2{margin:0;font-family:var(--play-display);font-size:1.4rem}
.pl-gap{flex:1}
/* Closed by default, so the destructive actions are not sitting on the page. */
.plannerpage #active .mgmt{position:relative}
.plannerpage #active .mgmtsum{list-style:none;width:30px;height:30px;font-size:.9rem}
.plannerpage #active .mgmtsum::-webkit-details-marker{display:none}
.plannerpage #active .mgmtmenu{
  position:absolute;right:0;top:36px;z-index:5;width:230px;
  box-shadow:5px 5px 0 var(--play-edge);padding:8px 12px;
  display:flex;flex-direction:column;gap:2px;
}
.mgmthead{font-family:var(--play-display);font-size:.95rem}
.plannerpage #active .mgmtbtn{
  display:flex;align-items:center;gap:8px;width:100%;padding:6px 0;
  background:none;border:0;border-top:2px dashed var(--play-track);
  color:var(--play-ink);font-family:var(--play-display);font-size:.9rem;
  cursor:pointer;text-align:left;
}
.plannerpage #active .mgmtbtn .mlabel{flex:1}
.plannerpage #active .mgmtbtn:hover{color:var(--play-accent)}
.plannerpage #active .mgmtbtn.danger{color:var(--play-mute)}

/* how am I doing (left) · what do I do now (right) */
.pl-main{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;align-items:stretch}
.pl-left{display:flex;flex-direction:column;gap:12px;min-width:0}
.pl-side{display:flex;flex-direction:column;gap:8px;min-width:0}

.driftcard{padding:12px}
.driftsays{display:flex;align-items:center;gap:8px}
.driftsays .bub{font-size:.9rem}
.driftsnooze{margin-top:8px}
.plannerpage #active .optgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
/* The frame stacks a second line under each choice: what it costs you. */
.plannerpage #active .optbtn{
  border:2px solid var(--play-ink);border-radius:14px;padding:6px 16px;
  background:var(--play-card);color:var(--play-ink);cursor:pointer;
  font-family:var(--play-display);font-size:.95rem;text-align:center;
  box-shadow:0 4px 0 var(--play-edge);
}
.plannerpage #active .optbtn:first-child:not(:disabled){background:var(--play-accent);color:var(--play-accent-ink);font-weight:700}
.plannerpage #active .optbtn b{display:block;font-size:1rem}
/* The cost of the choice, under the choice. On the ember fill it takes the
   accent's own ink — --play-mute would not clear 4.5:1 there. */
.plannerpage #active .optbtn .tag{display:block}
.plannerpage #active .optbtn:first-child:not(:disabled) .tag{color:var(--play-accent-ink)}
.plannerpage #active .optbtn:disabled{opacity:.5;box-shadow:none;cursor:default}

.pl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pl-stat{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:8px}
.pl-ic{font-size:1.1rem;line-height:1}
.pl-stat b{font-family:var(--play-display);font-size:1.1rem;white-space:nowrap}

/* The CTA card carries the week and today's split, so there is no dead band
   between the roadmap and the button. */
.pl-cta{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;text-align:center;box-shadow:6px 6px 0 var(--play-edge)}
.pl-split{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.pl-split .pill{font-size:.72rem}
.pl-start{display:block;width:100%}
.pl-ms{display:flex;align-items:center;gap:6px;padding:8px 10px}
.pl-ms .tag{flex:1}

/* where does it end */
.pl-road{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.pl-roadhead{display:flex;align-items:center;gap:8px}
/* 29c's door to page two: a real button (the kit's .p-gbtn), not a tag —
   the head's rule runs up to it, so it sits flush right at CTA size. */
.pl-every{padding:4px 14px;font-size:.9rem;white-space:nowrap;flex:none}
.pl-rule{flex:1;border-top:2px dashed var(--play-track)}
.roadstrip{display:flex;align-items:flex-start;gap:0}
.rs-stop{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
/* Scoped to match the #active .node rule these override — an unscoped
   .rs-n loses to it on specificity and the stops all render at 54px. */
.plannerpage #active .rs-n{width:42px;height:42px;font-size:.95rem}
.plannerpage #active .rs-n.is-here{
  width:50px;height:50px;font-size:1.05rem;box-shadow:0 4px 0 var(--play-edge);
}
.plannerpage #active .rs-n.is-exam{width:46px;height:46px;font-size:1.05rem}
.rs-v{font-family:var(--play-display);font-size:.82rem;white-space:nowrap}
.plannerpage #active .pill.rs-v{font-size:.68rem;padding:1px 8px}
.rs-d{font-size:.65rem;white-space:nowrap}
.rs-t{flex:1;border-top:3px solid var(--play-ink);margin-top:20px}
.rs-t.lock{border-top-style:dashed;border-top-color:var(--play-soft)}

@media (max-width:760px){
  .pl-main{grid-template-columns:1fr}
  .pl-stats{grid-template-columns:1fr}
  .plannerpage #active .optgrid{grid-template-columns:1fr}
  /* Five stops will not fit a phone abreast; the road stands up. */
  .roadstrip{flex-direction:column;align-items:flex-start;gap:0}
  .rs-stop{flex:none;flex-direction:row;gap:8px;align-items:center;width:100%}
  .rs-t{flex:none;width:0;height:18px;margin:0 0 0 20px;border-top:0;border-left:3px solid var(--play-ink)}
  .rs-t.lock{border-left-style:dashed;border-left-color:var(--play-soft);border-top:0}
}