/* Planner — the page shell.

   It hosts one app, `planner-new-app.html`: the Compass Planner bundle with two
   changes to its board (no arrows until a course is selected, and a tidier grid
   inside each semester block), built from the untouched root bundle by
   `tools/build-planner-new.py`. It lives in a same-origin iframe so its CSS/JS
   cannot reach the site's.

   That app already carries both of build B's presentations of the plan — the
   dependency board and the term-by-term semester plan — behind its own nav rail,
   which this page hides. The pill pair in the bar drives them directly; the
   choice is stored under `stellic-pathfinders` and is scoped to this page only —
   it is not in the site sidebar and no other screen knows about it.

   Only the iframe scrolls. The outer page never does, so there is only ever one
   scrollbar on screen. */

.page-planner { height: 100vh; overflow: hidden; }
.page-planner .app { height: 100vh; overflow: hidden; }

.page-planner .main {
  padding: 0;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* --- the view bar ---------------------------------------------------------- */

.planner-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 52px;
  padding: 0 20px 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.planner-bar__title {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 27px;
  line-height: 1;
  color: var(--ink);
}

/* Build B's Board view / Semester view pill pair — `tools/buildB-spec.md` §4,
   `plannerToggle` at buildB-source.js 3456. B draws it `position:fixed` at
   top:14px/right:26px, floating over the board; here the page already has a bar
   for it, so it sits at the end of that instead. Every value below is B's:

     rail    #F6F2E9 fill, 1px #E5E0D7 border, 999px radius, 4px pad, 6px gap
     pill    JetBrains Mono 9px / .1em, 6px 12px, 999px radius
     on      1px #A2593A border, #F0D9C8 fill, #7E3F22 text
     off     transparent border, transparent fill, #8F8779 text

   The two states differ in those three colours and nothing else — same padding,
   same radius, no weight change — so the label never shifts as it is picked. */
.planner-toggle {
  margin-left: auto;
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.planner-toggle button {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-b3);
  border-radius: 999px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.planner-toggle button:hover { color: var(--accent-deep); }
.planner-toggle button.is-on {
  border-color: var(--accent-b);
  background: var(--accent-tint);
  color: var(--accent-deep);
}

/* --- the stage ------------------------------------------------------------- */

/* The app lays its board out from a measured width and is corrected after load
   by reading computed styles inside it, so the frame is never collapsed to
   display:none — switching views is the app's own job, not this box's. */
.planner-stage {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  background: var(--bg);      /* the bundle's own page colour — no white flash */
}

.planner-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* planner.html hides the app for the few frames it takes to suppress the
   bundle's own nav rail and clear its seeded course selection. The class is only
   ever added by script, so with scripting off the planner still shows. */
.planner-frame.is-booting { visibility: hidden; }

/* --- phones: clear the fixed top bar (css/base.css) --------------------------- */
@media (max-width: 900px) {
  .page-planner .main { padding-top: 56px; }
  .planner-bar { height: 48px; padding: 0 12px 0 16px; gap: 10px; }
  .planner-bar__title { font-size: 22px; }
  .planner-toggle button { padding: 6px 9px; }
}