/* pages/planner/plan-sheet.css — page two of the planner (wireframe 29a/29c).
   Layout only; the board's primitives (.bx .tag .pill .btn3 .p-bar .p-fill
   .p-tanu .p-bub) reach #plan through skin-playful.css's :is(#active, #plan)
   scope or, for the p-* kit classes, globally — and every colour is a
   --play-* token (decision 0008). Geometry follows the 860px board's
   proportions (spine · gutter · dock, num · name · slot · bar), but the
   TYPE does not: the board sets page two in 9–13px for a fixed artboard,
   and read at real size that was "extremely small" — so every size here
   is the app's own scale (tags .8rem, body 1rem, the kit's .p-gbtn at
   .95rem), and the spine, bar and dots grew with it. */

.plannerpage #plan{display:flex;flex-direction:column;gap:11px;font-family:var(--play-display);color:var(--play-ink)}

/* ---- head: back · title · level/exam pill · N of 17 weeks + bar -------- */
.plannerpage #plan .ps-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:11px;border-bottom:2px solid var(--play-ink)}
.plannerpage #plan .ps-title{font-size:1.5rem;white-space:nowrap}
.plannerpage #plan .gbtn{display:inline-block;border:2px solid var(--play-ink);border-radius:14px;
  background:var(--play-card);color:var(--play-ink);text-decoration:none;white-space:nowrap;
  font-size:.95rem;padding:4px 16px;box-shadow:0 3px 0 var(--play-edge);cursor:pointer;
  transition:transform .06s ease,box-shadow .06s ease}
.plannerpage #plan .gbtn:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--play-edge)}
.plannerpage #plan .gbtn:active{transform:translateY(3px);box-shadow:0 0 0 var(--play-edge)}
.plannerpage #plan .gbtn:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.plannerpage #plan .ps-spacer{flex:1}
.plannerpage #plan .ps-examline{font-size:.85rem;white-space:nowrap}
.plannerpage #plan .ps-weekstag{font-size:.8rem;white-space:nowrap}
.plannerpage #plan .ps-progress{flex:none}
.plannerpage #plan .ps-progress .p-fill{transition:width .15s ease}

/* ---- the two-column body ------------------------------------------------ */
.plannerpage #plan .ps-body{display:flex;gap:14px;align-items:flex-start}

/* ---- the spine: 17 rows, always all on screen --------------------------- */
.plannerpage #plan .ps-spine{width:300px;flex:none;display:flex;flex-direction:column;min-width:0}
.plannerpage #plan .ps-srow{display:flex;align-items:center;gap:8px;padding:5px 0;
  border-top:1px dashed var(--play-track)}
.plannerpage #plan .ps-shead{border-top:0;padding-bottom:4px}
.plannerpage #plan .ps-shead .tag{font-size:.8rem;white-space:nowrap}
.plannerpage #plan .ps-sortlabel{font-size:.8rem;text-transform:none}
.plannerpage #plan .ps-snum{width:18px;flex:none;text-align:right;font-size:.8rem}
.plannerpage #plan .ps-sname{flex:1;min-width:0;font-size:1rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-align:left;background:none;border:0;padding:0;color:inherit;font-family:inherit;cursor:pointer}
.plannerpage #plan button.ps-sname:hover{text-decoration:underline;text-underline-offset:2px}
.plannerpage #plan .ps-sname:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:4px}
.plannerpage #plan .ps-sslot{width:16px;flex:none;text-align:center;font-size:.8rem}
/* The bar IS the week: a soft track with an ember fill sized to keptN/7 —
   an ahead week has no data yet, so it draws as a dashed outline instead of
   a 0%-filled bar (DESIGN.md: states read without colour alone). */
.plannerpage #plan .ps-sbar{width:56px;height:8px;flex:none;display:block;box-sizing:border-box;
  background:var(--play-track)}
.plannerpage #plan .ps-sbar>i{display:block;height:100%;background:var(--play-accent)}
.plannerpage #plan .ps-sbar.is-ahead{background:none;border:1px dashed var(--play-soft)}
.plannerpage #plan .ps-srow.is-ahead{color:var(--play-mute)}
.plannerpage #plan .ps-srow.is-milestone .ps-sname{font-weight:700}
.plannerpage #plan .ps-srow.is-last{border-bottom:2px solid var(--play-ink)}
.plannerpage #plan .ps-spinenote{display:block;padding-top:6px;font-size:.8rem;
  text-transform:none;letter-spacing:.02em}

/* The open row trades its bar for seven day-dots — no card radius, a plain
   tinted row with an ink edge, same grammar as a pressed .bx. */
.plannerpage #plan .ps-srow.is-open{margin:4px 0;padding:6px 8px;
  background:var(--play-accent-soft);border:2px solid var(--play-ink);
  box-shadow:4px 4px 0 var(--play-edge)}
.plannerpage #plan .ps-srow.is-open .ps-sname{font-size:1.05rem;font-weight:700;color:var(--play-ink)}
.plannerpage #plan .ps-sdots{display:flex;gap:3px;flex:none}
.plannerpage #plan .ps-sdot{width:9px;height:9px;display:block;box-sizing:border-box;
  background:var(--play-card);border:1px solid var(--play-soft)}
.plannerpage #plan .ps-sdot.is-kept{background:var(--play-ink);border-color:var(--play-ink)}
.plannerpage #plan .ps-sdot.is-today{width:12px;height:12px;background:var(--play-card);border:2px solid var(--play-ink)}
.plannerpage #plan .ps-sdot.is-ahead{border-style:dashed}

/* ---- the docked pane: the open week, in full ---------------------------- */
.plannerpage #plan .ps-dock{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.plannerpage #plan .ps-dockhead{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap}
.plannerpage #plan .ps-wk{font-size:2.4rem;line-height:.85;white-space:nowrap}
.plannerpage #plan .ps-dockname{display:flex;flex-direction:column;gap:0;flex:1;min-width:0}
.plannerpage #plan .ps-dockname b{font-size:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plannerpage #plan .ps-dockname .tag{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The board writes color:#fff on this fill; #158 settled that as
   --play-accent-ink (white measures 2.80:1 on the ember). */
.plannerpage #plan .pill.is-accent{background:var(--play-accent);color:var(--play-accent-ink);border-color:var(--play-ink)}
.plannerpage #plan .ps-here{font-size:.8rem;white-space:nowrap}
.plannerpage #plan .ps-docksays{display:flex;align-items:center;gap:8px}
.plannerpage #plan .p-tanu.ps-tanu{background:var(--play-lock)}
.plannerpage #plan .ps-bub{font-size:1rem;flex:1;min-width:0}

.plannerpage #plan .ps-dockmid{display:flex;gap:12px;align-items:flex-start}
.plannerpage #plan .ps-goals{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:2px}
.plannerpage #plan .ps-goalhead{display:flex;align-items:center;gap:6px}
.plannerpage #plan .ps-goalhead .tag{font-size:.8rem;white-space:nowrap}
.plannerpage #plan .ps-rule{flex:1;border-top:1px dashed var(--play-track)}
.plannerpage #plan .ps-goal{display:flex;align-items:flex-start;gap:8px;font-size:1rem;line-height:1.3;cursor:pointer}
.plannerpage #plan .ps-goal input{appearance:none;width:14px;height:14px;margin:3px 0 0;flex:none;
  border:2px solid var(--play-ink);background:var(--play-card);cursor:pointer}
.plannerpage #plan .ps-goal input:checked{background:var(--play-accent)}
.plannerpage #plan .ps-goal input:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.plannerpage #plan .ps-goal.is-done span{text-decoration:line-through;color:var(--play-mute)}
.plannerpage #plan .ps-new{width:170px;flex:none;display:flex;flex-direction:column;gap:3px}
.plannerpage #plan .ps-new .tag{font-size:.8rem;white-space:nowrap}
.plannerpage #plan .ps-chips{display:flex;flex-wrap:wrap;gap:4px}
.plannerpage #plan .ps-chip{font-size:.8rem;padding:1px 9px}

/* Day cards, one per column. Same four states as the spine dots, at card
   size; today runs slightly wider, the way the board draws it. */
.plannerpage #plan .ps-daycards{display:flex;gap:5px;align-items:stretch;align-self:stretch}
.plannerpage #plan .ps-day{flex:1;min-width:0;padding:4px 3px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:2px;cursor:pointer;font-family:inherit;color:inherit;min-height:60px}
.plannerpage #plan .ps-day.is-today{flex:1.15}
.plannerpage #plan .ps-day .tag{font-size:.8rem;white-space:nowrap}
.plannerpage #plan .ps-glyph{font-size:1.05rem;line-height:1.15}
.plannerpage #plan .ps-sub{font-size:.8rem;line-height:1.15}
.plannerpage #plan .ps-day.is-kept{background:var(--play-accent);color:var(--play-accent-ink);border-color:var(--play-ink)}
.plannerpage #plan .ps-day.is-kept .tag{color:var(--play-accent-ink)}
.plannerpage #plan .ps-day.is-today{border-width:3px;box-shadow:0 4px 0 var(--play-accent)}
.plannerpage #plan .ps-day.is-today .ps-sub{font-weight:700}
.plannerpage #plan .ps-day.is-missed{border-style:dashed;border-color:var(--play-soft);color:var(--play-mute)}
.plannerpage #plan .ps-day.is-ahead{border-color:var(--play-soft);color:var(--play-mute)}
.plannerpage #plan .ps-day.is-restcol{background:var(--play-paper)}
.plannerpage #plan .ps-day.is-open{outline:3px solid var(--play-link);outline-offset:2px}
.plannerpage #plan .ps-day:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* ---- the day box, under the day cards ----------------------------------- */
.plannerpage #plan .ps-daybox{margin-top:2px;padding:12px 14px}
.plannerpage #plan .ps-dayhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plannerpage #plan .ps-dayhead b{font-size:1.1rem;white-space:nowrap}
.plannerpage #plan .ps-dayhead .tag{font-size:.8rem;white-space:nowrap}
/* Block widths ARE the minutes (flex = minutes), so the shape answers
   "where does the time go" before the labels are read. */
.plannerpage #plan .ps-blocks{display:flex;gap:4px;margin-top:9px;align-items:stretch}
.plannerpage #plan .ps-block{min-width:0;padding:6px 9px;border-color:var(--play-soft);color:var(--play-mute)}
.plannerpage #plan .ps-block b{font-size:.95rem;white-space:nowrap;display:block}
.plannerpage #plan .ps-blocksub{font-size:.8rem;line-height:1.2;display:block}
.plannerpage #plan .ps-block.is-done{background:var(--play-accent);border-color:var(--play-ink);color:var(--play-accent-ink)}
.plannerpage #plan .ps-block.is-now{border-color:var(--play-ink);color:var(--play-ink);box-shadow:0 3px 0 var(--play-edge)}
.plannerpage #plan .ps-block.is-flat{flex:1}
.plannerpage #plan .ps-dayfoot{display:flex;align-items:center;gap:9px;margin-top:10px}
.plannerpage #plan .ps-start{font-size:1rem;padding:5px 18px;white-space:nowrap}

.plannerpage #plan .ps-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Devanagari is never uppercased (#60); the .tag cancel arrives through
   skin-playful.css's scope, this covers the two labels set non-uppercase. */
:root[lang="hi"] .plannerpage #plan .ps-sortlabel,
:root[lang="hi"] .plannerpage #plan .ps-spinenote{letter-spacing:0}

/* ---- narrow: the dock drops under the spine, the spine keeps its shape -- */
@media (max-width:720px){
  .plannerpage #plan .ps-body{flex-direction:column}
  .plannerpage #plan .ps-spine{width:100%}
}
@media (max-width:480px){
  .plannerpage #plan .ps-sname{font-size:.9rem}
  .plannerpage #plan .ps-dockmid{flex-wrap:wrap}
  .plannerpage #plan .ps-new{width:100%}
  .plannerpage #plan .ps-daycards{flex-wrap:wrap}
  .plannerpage #plan .ps-day,.plannerpage #plan .ps-day.is-today{flex-basis:calc(100%/4 - 3px)}
  /* Seven cards in ~280px would crush the weekday word — the day number
     alone still says which card is which. */
  .plannerpage #plan .ps-day .ps-dow{display:none}
  .plannerpage #plan .ps-blocks{flex-wrap:wrap}
  .plannerpage #plan .ps-block{flex-basis:calc(50% - 2px)}
}
@media (prefers-reduced-motion:reduce){
  .plannerpage #plan .gbtn{transition:none}
  .plannerpage #plan .ps-progress .p-fill{transition:none}
}