/* Plan the build, loaded only by its page so play.css does not grow for every game. */
.pb [hidden]{display:none}
.pb-modes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.pb-mode{min-height:44px;padding:10px 20px;border:1px solid var(--hair);border-radius:999px;background:transparent;color:var(--text);
  font:600 14.5px/1 var(--sans);cursor:pointer}
.pb-mode:hover{border-color:var(--accent)}
.pb-mode[aria-pressed="true"]{border-color:var(--btn);background:var(--btn);color:#fff}
.pb-title{min-height:1.4em;margin:0 0 6px;font-size:18px;font-weight:600}
.pb-brief{min-height:1.6em;margin:0 0 8px;color:var(--muted);line-height:1.55}
.pb-facts{min-height:1.5em;margin:0 0 14px;font-size:13px;color:var(--muted)}
.pb-chart{height:158px;overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);background:var(--paper)}
.pb-svg{display:block;font-family:var(--mono)}
.pb-grid{stroke:var(--line);stroke-width:1}
.pb-grid5{stroke:var(--hair)}
.pb-daynum{fill:var(--faint);font-size:10px;text-anchor:middle}
.pb-daynum-ship{fill:#fff;font-weight:600}
.pb-shipday{fill:var(--btn)}
.pb-lane{fill:var(--text);font:600 14px var(--sans)}
.pb-lane-small{font-size:11px;fill:var(--muted)}
.pb-block rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1}
.pb-crit rect{fill:var(--raise);stroke:var(--accent-ink);stroke-width:3}
.pb-bnum{fill:var(--text);font-size:11px;font-weight:600}
.pb-bname{fill:var(--muted);font:11px var(--sans)}
.pb-arrow{fill:none;stroke:var(--muted);stroke-width:1.5}
.pb-arrowhead{fill:var(--muted)}
.pb-ship{stroke:var(--accent);stroke-width:2}
.pb-chainblock rect{fill:var(--raise);stroke:var(--accent-ink);stroke-width:1}
.pb-new rect{animation:pb-in .25s ease-out}
@keyframes pb-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pb-new rect{animation:none}}
.pb-controls{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.pb-controls .alt-btn{min-height:44px}
.pb-controls .alt-btn:disabled{opacity:.5;cursor:default}
.pb-end{margin:16px 0 0;padding:20px;border:1px solid var(--line);background:var(--paper)}
.pb-end p{margin:0 0 10px;line-height:1.55}
.pb-result{margin:0 0 14px;font-size:20px;outline-offset:4px}
.pb-result:focus-visible{outline:2px solid var(--accent)}
.pb-score{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:0 0 14px}
.pb-score>div{display:flex;flex-direction:column}
.pb-score dt{font-size:13px;color:var(--muted)}
.pb-score dd{margin:auto 0 0;padding-top:4px;font-size:26px;font-weight:600;color:var(--text)}
.pb-lessons{margin:0 0 6px;padding-left:20px;line-height:1.6}
.pb-stats{font-size:14px;color:var(--muted)}
.pb-end .wg-next{margin:0}
.pb-copied{align-self:center;font-size:14px;color:var(--muted)}
.pb-tasks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
.pb-task{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 10px;align-items:center;min-height:56px;
  box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);background:var(--paper)}
.pb-num{font-size:13px;font-weight:600;color:var(--muted)}
.pb-what{display:flex;flex-direction:column;gap:2px;min-width:0}
.pb-name{font-size:15px;font-weight:600;line-height:1.3}
.pb-meta{font-size:13px;color:var(--muted)}
.pb-act{display:flex;gap:6px;justify-content:flex-end;font-size:13px;color:var(--muted);text-align:right}
.pb-ready{border-color:var(--accent)}
.pb-placed{background:var(--surface)}
.pb-placed .pb-name{color:var(--muted)}
/* A placed task only needs its name and slot, which keeps the tasks still to place near the chart. */
.pb-placed{min-height:0;padding-block:6px}
.pb-placed .pb-meta{display:none}
.pb-give{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:62px;min-height:44px;padding:4px 8px;
  border:1px solid var(--hair);border-radius:8px;background:var(--paper);color:var(--text);font:inherit;cursor:pointer}
.pb-give:hover{border-color:var(--accent);background:var(--accent-soft)}
.pb-give strong{font-size:15px}
.pb-give span{font-size:12px;color:var(--muted)}
.pb-note{margin:14px 0 0;font-size:13px;color:var(--muted)}
/* Until the module mounts, the box holds the height of the shortest puzzle's empty board at the widest width
   in each band, so no puzzle leaves blank space under it and the copy below moves down once, by the puzzle's
   extra height. The mode buttons stay disabled until the module runs, so the floor goes when the board is drawn
   and a board that shrinks as tasks are placed never sits over a gap. The tasks list takes two columns from 968px.
   The note waits for the board: shown in the empty box, the board would push it down (CLS 0.025 at 768px). */
@media (scripting:enabled){
  .pb:has(.pb-mode:disabled){min-height:1310px}
  .pb:has(.pb-mode:disabled) .pb-note{display:none}
}
@media (scripting:enabled) and (min-width:521px){
  .pb:has(.pb-mode:disabled){min-height:1077px}
}
@media (scripting:enabled) and (min-width:641px){
  .pb:has(.pb-mode:disabled){min-height:1034px}
}
@media (scripting:enabled) and (min-width:968px){
  .pb:has(.pb-mode:disabled){min-height:766px}
}
/* Two lines for the facts, so the task list does not move when the ship day changes. */
@media (max-width:640px){
  .pb-facts{min-height:3em}
}
@media (max-width:520px){
  .pb-task{grid-template-columns:24px minmax(0,1fr)}
  .pb-act{grid-column:2;justify-content:flex-start;text-align:left}
}