/* pages/planner/setup.css — the interview (wireframes 1l + 12a).

   The planner is one sentence with four blanks; tapping a blank opens one
   tray under it. This sheet is the board's own primitives, named as the
   board names them, so a frame and this page describe the same objects:

     .tag    small label — display font, uppercase, letter-spaced, muted
     .pill   999px, 2px ink border, card ground, NO shadow
     .gbtn   14px radius, 2px ink border, 4px hard shadow  (.on fills accent)
     .node   circle, 3px ink border  (.on fills accent, grows, gains shadow)
     .bar    the ink-outlined track a range input wears

   Colours are --play-* tokens only (decision 0008). */

.plannerpage .pagehead{margin:16px 0 24px}
.plannerpage .pagehead p{margin:0;color:var(--pl-mute)}

/* ---- the board's primitives ------------------------------------------- */

.plannerpage #setup .tag{
  font-family:var(--play-display);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--play-mute);
}
:root[lang="hi"] .plannerpage #setup .tag{text-transform:none;letter-spacing:0}
.plannerpage #setup .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 #setup button.pill{cursor:pointer}
.plannerpage #setup .gbtn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;
  border:2px solid var(--play-ink);border-radius:14px;padding:3px 14px;
  background:var(--play-card);color:var(--play-ink);
  font-family:var(--play-display);font-size:.82rem;
  box-shadow:0 4px 0 var(--play-edge);
}
.plannerpage #setup .gbtn.on{background:var(--play-accent);color:var(--play-accent-ink);font-weight:700}
.plannerpage #setup .gbtn:hover:not(:disabled){transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.plannerpage #setup .gbtn:disabled{opacity:.4;cursor:default;box-shadow:none}
.plannerpage #setup .node{
  width:46px;height:46px;border-radius:50%;border:3px solid var(--play-ink);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  background:var(--play-card);color:var(--play-ink);flex:none;cursor:pointer;
}
.plannerpage #setup .node.on{
  width:56px;height:56px;font-size:1.45rem;
  background:var(--play-accent);color:var(--play-accent-ink);
  box-shadow:0 4px 0 var(--play-edge);
}

/* ---- layout ----------------------------------------------------------- */
/* The sentence spans the width; only below it does the screen split into
   the open tray and the ring's 190px column. */
.plannerpage #setup .ivgrid{
  display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:26px;align-items:start;
  margin-top:22px;
}
.plannerpage #setup .iv-left{min-width:0;display:flex;flex-direction:column;gap:10px}
.plannerpage #setup .iv-right{display:flex;flex-direction:column;align-items:center;gap:10px}

/* ---- the sentence ---- */
/* Big enough to read as a sentence rather than a form, and baseline-aligned
   so the blanks sit ON the line instead of floating above it. */
.plannerpage #setup .sentence{
  margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  font-family:var(--play-display);font-size:clamp(1.35rem,3.2vw,1.7rem);line-height:1.6;
  color:var(--play-ink);
}
/* A blank is the board's pill at sentence size — a 3px outline and no
   shadow. The caret rides inside the label, so it needs no rule of its own. */
.plannerpage #setup .blank{
  font:inherit;font-size:.925em;cursor:pointer;white-space:nowrap;
  padding:2px 18px;border:3px solid var(--play-ink);border-radius:999px;
  background:var(--play-card);color:var(--play-ink);box-shadow:none;
}
.plannerpage #setup .blank:hover{border-color:var(--play-accent)}
/* The open blank is filled, so the sentence itself says which tray you are
   looking at — the tray needs no title. */
.plannerpage #setup .blank.open{background:var(--play-accent);color:var(--play-accent-ink)}
.plannerpage #setup .lastbit{display:inline-flex;align-items:baseline}
.plannerpage #setup .sentence .stop{margin-left:1px}

/* ---- the tray ---- */
/* It fills the column beside the ring, as the frame's does. */
.plannerpage #setup .tray{display:flex;flex-direction:column;gap:10px}
.plannerpage #setup .traybox{
  padding:12px;border:2px solid var(--play-ink);border-radius:12px;
  background:var(--play-paper);display:flex;flex-direction:column;gap:10px;
}
/* Only in the default state, where two boxes share one sentence. */
.plannerpage #setup .traylabel{margin-bottom:-4px}
.plannerpage #setup .trayrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plannerpage #setup .trayrow.slider{gap:12px}
.plannerpage #setup .trayrow.slider input[type=range]{flex:1;min-width:120px}
.plannerpage #setup .trayends{display:flex;justify-content:space-between}
.plannerpage #setup .trayfoot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:2px dashed var(--play-track);padding-top:10px;
}
.plannerpage #setup .trayfoot>.tag{flex:1;min-width:0}
/* The frame sets the boosted minutes in bold, in the display voice, at
   reading size — it is the number the line exists to deliver. */
.plannerpage #setup .trayfoot b{
  font-size:1.05rem;text-transform:none;letter-spacing:0;color:var(--play-ink);
}
.plannerpage #setup .trayaside{margin:0}
/* #139: the closed levels have to fail a glance, not just a click. */
.plannerpage #setup .lvsoon{color:var(--play-mute)}

/* The native date field is the picker; the button around it is the control. */
.plannerpage #setup .gbtn.pickday{position:relative;overflow:hidden}
.plannerpage #setup .gbtn.pickday input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* The four intensities: a circle you press with its answer beneath. */
.plannerpage #setup .trayrow.tiles{gap:14px;align-items:flex-end}
.plannerpage #setup .mtile{display:flex;flex-direction:column;align-items:center;gap:4px}

/* 12a: seven days, any of which can carry the boost. */
.plannerpage #setup .trayrow.days{gap:6px}
.plannerpage #setup .day{
  width:40px;height:40px;border-radius:50%;border:3px solid var(--play-ink);cursor:pointer;
  background:var(--play-card);color:var(--play-ink);font-family:var(--play-display);
  font-size:.9rem;flex:none;
}
.plannerpage #setup .day.on{
  width:44px;height:44px;font-size:.95rem;
  background:var(--play-accent);color:var(--play-accent-ink);
  box-shadow:0 4px 0 var(--play-edge);
}

/* The sliders are the board's bar: an ink-outlined track that fills with the
   accent up to the thumb. A native range renders as a system slider — blue,
   and from another design language entirely. */
.plannerpage #setup .trayrow.slider input[type=range]{
  -webkit-appearance:none;appearance:none;background:transparent;height:20px;
}
.plannerpage #setup .trayrow.slider.is-thin input[type=range]::-webkit-slider-runnable-track,
.plannerpage #setup .trayrow.slider.is-thin input[type=range]::-moz-range-track{height:10px}
.plannerpage #setup .trayrow.slider input[type=range]::-webkit-slider-runnable-track{
  height:12px;border-radius:999px;border:2px solid var(--play-ink);
  background:linear-gradient(to right,
    var(--play-accent) var(--v,50%), var(--play-card) var(--v,50%));
}
.plannerpage #setup .trayrow.slider input[type=range]::-moz-range-track{
  height:12px;border-radius:999px;border:2px solid var(--play-ink);background:var(--play-card);
}
.plannerpage #setup .trayrow.slider input[type=range]::-moz-range-progress{
  height:12px;border-radius:999px;background:var(--play-accent);
}
.plannerpage #setup .trayrow.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;margin-top:-4px;
  width:20px;height:20px;border-radius:50%;cursor:pointer;
  border:2px solid var(--play-edge);background:var(--play-accent);
}
.plannerpage #setup .trayrow.slider input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;cursor:pointer;
  border:2px solid var(--play-edge);background:var(--play-accent);
}
.plannerpage #setup .trayrow.slider input[type=range]:focus-visible{outline:3px solid var(--play-link);outline-offset:3px}

/* ---- the ring, exactly as 1l and 12a draw it -------------------------- */
.plannerpage #setup .goalring{
  width:164px;height:164px;border-radius:50%;
  border:6px solid var(--play-track);
  border-top-color:var(--play-accent);border-right-color:var(--play-accent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;text-align:center;padding:14px;flex:none;
}
.plannerpage #setup .gr-date{
  font-family:var(--play-display);font-size:1.55rem;font-weight:700;line-height:1.1;
  white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;
}
:root[lang="hi"] .plannerpage #setup .gr-date{text-transform:none;letter-spacing:0}
.plannerpage #setup .gr-badge{font-size:.72rem;padding:1px 10px}

/* ---- LET'S GO ---- */
/* The board's .btn3: accent fill, ink outline, hard shadow, sized to its
   label. Its ink is --play-accent-ink, not the frame's white — white on this
   orange measures 2.80:1 and #158 settled that once already. */
.plannerpage #setup .activate{
  width:auto;cursor:pointer;
  font-family:var(--play-display);font-size:1rem;font-weight:700;
  padding:6px 22px;border:2px solid var(--play-edge);border-radius:14px;
  background:var(--play-accent);color:var(--play-accent-ink);
  box-shadow:0 4px 0 var(--play-edge);
  text-transform:uppercase;letter-spacing:.03em;
}
:root[lang="hi"] .plannerpage #setup .activate{text-transform:none;letter-spacing:0}
.plannerpage #setup .activate:hover:not(:disabled){transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)}
.plannerpage #setup .activate:disabled{opacity:.5;box-shadow:none;cursor:default}

@media (max-width:760px){
  .plannerpage #setup .ivgrid{grid-template-columns:1fr}
  .plannerpage #setup .iv-right{align-items:flex-start}
}
@media (max-width:480px){
  /* Seven days must stay one row — wrapping six and one reads as a break in
     the week rather than a tighter fit. */
  .plannerpage #setup .trayrow.days{gap:4px}
  .plannerpage #setup .day{width:32px;height:32px;font-size:.8rem}
  .plannerpage #setup .day.on{width:36px;height:36px;font-size:.85rem}
  .plannerpage #setup .trayrow.days .tag{flex-basis:100%}
}