/* nav-rail.css — the Playbook sidebar, refined.
 *
 * Three problems this fixes, all visible with nine modules in the rail:
 *
 *  1. The active lesson's module was expanded on arrival. A module holds up to
 *     fourteen lessons, so that pushed the other eight modules and the footer
 *     off the bottom and the learner lost the shape of the Playbook they were
 *     inside. Everything starts collapsed now (app/workspace.py), which makes
 *     "where am I" a styling job — hence .is-current below.
 *
 *  2. playbook-ui.css tints the module icon with `#group-p1 … #group-p9`, ids
 *     from the legacy Amazon build. Groups are keyed `group-m<module id>` here,
 *     so not one of those rules has been matching. The tint now comes from
 *     --pc, the module's own colour, which workspace.py sets per group — so it
 *     is right in every Playbook instead of the first nine pillars of one.
 *
 *  3. Uppercase 11.5px titles wrapping to two lines read as a cramped block.
 *     Tighter leading and a little more room per row.
 *
 * The mirrored prefers-color-scheme block at the end is GENERATED by
 * tools/fix_dark_media.py — do not hand-edit it, re-run the tool.
 */

/* ---------------------------------------------------- the module row ----- */

.pbx .nav-group {
  position: relative;
  border-radius: var(--r-sm, 8px);
}

.pbx .nav-group-header {
  padding: 10px 12px;
  gap: 10px;
  align-items: center;
}

/* Hard guarantee that a title fits, whatever it says. short_title covers the
 * AI Playbook; the other eight still carry their full pillar names, some of
 * which are long, and a nav row must never be the thing that decides the rail's
 * height. Two lines, then ellipsis — the full text stays in the title
 * attribute and in the flyout header. */
.pbx .nav-group-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.28;
  max-height: 2.56em;
  letter-spacing: .07em;
  text-align: left;
}

/* the count and chevron keep their width; only the title gives way */
.pbx .nav-group-left { min-width: 0; flex: 1 1 auto; }
.pbx .nav-group-right { flex: 0 0 auto; }

/* the module's own colour, from --pc on .nav-group */
.pbx .nav-group-icon {
  background: color-mix(in srgb, var(--pc, #ff6b35) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, #ff6b35) 26%, transparent);
}

/* ---- "you are here" ------------------------------------------------------
 * With nothing expanded, this marker is the only thing telling the learner
 * which module the lesson they are reading belongs to. It has to survive the
 * group being collapsed, which the old `.open` styling did not.
 */

.pbx .nav-group.is-current > .nav-group-header {
  background: color-mix(in srgb, var(--pc, #ff6b35) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, #ff6b35) 24%, transparent);
}

.pbx .nav-group.is-current > .nav-group-header .nav-group-title {
  color: #fff;
}

.pbx .nav-group.is-current > .nav-group-header .nav-group-icon {
  background: color-mix(in srgb, var(--pc, #ff6b35) 34%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, #ff6b35) 44%, transparent);
}

/* the bar down the left edge — reads as a position marker rather than a
   selected state, which is what it is: the lesson is inside this module */
.pbx .nav-group.is-current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pc, #ff6b35);
}

/* the lesson being read, named under its collapsed module */
.pbx .nav-current {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: -2px 12px 6px 46px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .58);
}

.pbx .nav-current b {
  flex: 0 0 auto;
  /* Lifted toward white: at 11px on this navy rail the raw accent is
     3.35:1 for the darker Playbook accents. */
  color: color-mix(in srgb, var(--pc, #ff6b35) 62%, #fff);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pbx .nav-current span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* an expanded group is still distinguishable from the current one */
.pbx .nav-group.open > .nav-group-header .nav-chevron { transform: rotate(90deg); }
.pbx .nav-group.is-current.open .nav-current { display: none; }

/* ---------------------------------------------------- section labels ----- */

.pbx .nav-section-label {
  margin: 16px 12px 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}

/* ------------------------------------------- the module film in a lesson --- */

/* The film column keeps its own width in .mod-hero; the note sits under the
 * poster rather than over it, so it never covers the thumbnail's own title. */
.pbx .mod-film-col { min-width: 0; }

.pbx .mod-film-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  /* This note sits on the page ground, not on the dark rail, so a fixed
     white was invisible in light theme. --ink-3 is the muted ink that
     flips with the theme. */
  color: var(--ink-3, rgba(255, 255, 255, .6));
}