/* Blooming Prep — Learning Outcomes (post 283). Editorial register, 4 Sep 2026.

   Replaces the 4 Sep tinted-masonry-card build. The page is a glossary of 14 outcomes with
   no client intro copy and no conversion of its own — a Read surface, not a Persuade one — so
   it is set as a reference register rather than a card wall: hairline-ruled entries, the
   outcome name at display scale, and each of the client's 27 observable behaviours on its own
   line instead of run together into a paragraph. DESIGN.md components.cards says it outright:
   "Cards only where the item is a discrete unit; otherwise hairline dividers and air."

   The left index rail is generated by bp-learning-outcomes.js from the entry headings — it is
   navigation derived from the content, not a second copy of it, so the client keeps editing
   outcome names in one place. Without JS the page loses the rail and reads unchanged.

   No icons: the previous build's icon-to-concept matches were approximate stand-ins from the
   existing 16-icon library (Reading / Writing / Estimation / Scientific Method / Discovery had
   no dedicated glyph). That flag is closed by removal, not by commissioning art.

   Repo copy: _build/assets/bp-learning-outcomes.css. */

/* ---- Section frame ------------------------------------------------------ */

html body [data-id="lo-main"]{padding-block-start:72px !important;}

@media (min-width:1025px){
  html body [data-id="lo-main-inner"]{
    display:grid !important;
    grid-template-columns:250px minmax(0,1fr); /* 14 Sep 2026 audit #24: the rules run to the container edge; the prose keeps its 66ch */
    column-gap:110px;
    align-items:start;
    gap:0 110px;
  }
}

html body [data-id="lo-list"]{display:block !important;padding:0 !important;}

/* 10 Oct 2026 framework update: the goals heading spans both columns, the closing note sits under the list. */
html body [data-id="lo-goals-h2"]{margin:0 0 8px !important;}
html body [data-id="lo-note"]{margin:8px 0 0 !important;}
@media (min-width:1025px){
  html body [data-id="lo-goals-h2"]{grid-column:1 / -1;}
  html body [data-id="lo-note"]{grid-column:2;}
}

/* ---- Entries ------------------------------------------------------------ */

html body [data-id="lo-list"] > [data-id]{
  display:block !important;
  margin:0;padding:28px 0 32px !important; /* 14 Sep 2026 audit #24: was 44/48 - 4500px for 392 words */
  border-top:1px solid var(--border,#DFD9D4);
  scroll-margin-top:120px;
}
html body [data-id="lo-list"] > [data-id]:last-child{
  border-bottom:1px solid var(--border,#DFD9D4);
}

html body [data-id="lo-list"] [data-id$="-h3"]{
  margin:0 0 22px !important;
  max-width:22ch;
}

/* Each behaviour is its own line, marked by a sage dot on the entry's hanging indent.
   0.6em puts the dot on the optical centre of the first line at 17px/1.6. */
html body [data-id="lo-list"] p{
  position:relative;
  max-width:66ch;
  margin:0 !important;
  padding:0 0 0 26px !important;
}
html body [data-id="lo-list"] p + p{margin-top:14px !important;}
html body [data-id="lo-list"] p::before{
  content:"";position:absolute;
  inset-inline-start:0;inset-block-start:.6em;
  width:7px;height:7px;border-radius:var(--radius-full,100%);
  background:var(--accent,#52815F);
}
html body [data-id="lo-list"] ::selection{background:var(--card-sage,#DCE6DF);color:var(--ink,#52815F);}

/* ---- Index rail (injected by bp-learning-outcomes.js) ------------------- */

.lo-rail{
  position:sticky;inset-block-start:120px;
  display:flex;flex-direction:column;gap:13px;
  margin:44px 0 0;padding:4px 0 4px 22px;
  border-inline-start:1px solid var(--border,#DFD9D4);
}
.lo-rail a{
  font-family:"Nunito",sans-serif;font-weight:400;font-size:15px;line-height:1.35;
  color:var(--body,#604327);text-decoration:none;
  padding-block:2px; /* 14 Sep 2026 audit #10: 20px links -> 24px hit area */
  transition:color .25s ease, font-weight .25s ease;
}
.lo-rail a:hover{color:var(--label-green,#4B5F4F);}
.lo-rail a[aria-current]{color:var(--label-green,#4B5F4F);font-weight:600;}
.lo-rail a:focus-visible{outline:2px solid var(--accent,#52815F);outline-offset:4px;}
.lo-rail-ind{
  position:absolute;inset-inline-start:-1px;inset-block-start:0;
  width:2px;height:0;background:var(--accent,#52815F);
  transition:transform .38s cubic-bezier(.22,.61,.36,1); /* 14 Sep 2026 audit #9: height snaps, only transform animates */
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width:1024px){
  html body [data-id="lo-main"]{padding-block-start:56px !important;}
  .lo-rail{
    position:static;
    flex-direction:row;flex-wrap:wrap;gap:10px 20px;
    margin:0;padding:0 0 26px;
    border-inline-start:0;border-block-end:1px solid var(--border,#DFD9D4);
  }
  .lo-rail-ind{display:none;}
  html body [data-id="lo-list"] > [data-id]:first-child{border-top:0;}
}

@media (max-width:767px){
  html body [data-id="lo-main"]{padding-block-start:40px !important;}
  html body [data-id="lo-list"] > [data-id]{padding:24px 0 28px !important;}
  html body [data-id="lo-list"] [data-id$="-h3"]{margin-bottom:18px !important;max-width:none;}
  html body [data-id="lo-list"] p{font-size:16px !important;padding-left:22px !important;}
}

@media (prefers-reduced-motion:reduce){
  .lo-rail a,.lo-rail-ind{transition:none;}
}