/* playbook page: Amber redesign overrides. Loaded after styles.css. */

/* Locked view: the Playbook band, the same full-width ink section the landing
   page uses (.hj-land-band / .hj-land-band__grid in styles.css) — two columns
   on desktop, one column under 900px. The unlocked reader is untouched. */

/* .hj-main pads and caps any child that is not a .hj-page; the band has to
   run edge to edge, so take that frame back off the locked wrapper. */
.hj-main > .pb-view--locked{max-width:none;margin:0;padding:0;height:auto;min-height:100%}

/* Unlocked reader: untouched apart from its headings, which now carry the
   Amber display face. (The chapters themselves render inside the gated
   iframe and keep their own document styles.) */
.pb-view h1,.pb-view h2,.pb-view h3{font-family:var(--hj-font-display);font-weight:700}

/* Band padding comes from .hj-land-band in styles.css (96px, 72px under
   900px) — only the bits that differ from the landing live here. */
.pb-band__intro{min-width:0}
.pb-band__title{font-size:clamp(30px,4vw,40px);line-height:1.12;max-width:18ch}
.pb-band__terms{font-size:15px;opacity:.9}
.pb-band .pb-unlock-btn{width:auto;margin-top:4px}
.pb-band .pb-banner{max-width:44ch;margin:0 0 16px;text-align:left}

@media (max-width: 900px) {
  .pb-band__title{max-width:none}
  .pb-band .pb-unlock-btn{width:100%;justify-content:center}
}

/* Ink flips light in dark mode, so the band stays a deep teal there and the
   title falls back to the page foreground — exactly what the landing band
   does in styles.css. */
@media (prefers-color-scheme: dark) {
  .pb-band{background:var(--hj-stage-teal);color:var(--hj-fg)}
  .pb-band .hj-land-h2{color:var(--hj-hi)}
  .pb-band .hj-land-band__list li{border-bottom-color:color-mix(in srgb, var(--hj-fg) 18%, transparent)}
}

/* Let the band fill the screen height instead of stopping above an empty grey area. */
.pb-view--locked{display:flex;flex-direction:column}
.pb-view--locked > .pb-band{flex:1 0 auto;display:flex;align-items:center}
.pb-view--locked > .pb-band > .hj-land-wrap{width:100%}

/* Direction 3 frame: fill the whole area beside the rail (app-d3.css pads other pages). */
.hj-app .hj-main > .pb-view--locked{max-width:none;margin:0;padding:0}