/* ─────────────────────────────────────────────────────────
   levels — a maturity ladder: N stages across, each with
   what it is and what it costs you.

   From a maturity model: four columns, dashed rules between
   them, an icon and a title above, a spanning axis with a
   hollow ring at one end and a filled dot at the other, then
   the consequences underneath. Light already; what changed
   is the icons, which in the reference are full-colour
   pictograms and here are hairline glyphs, because on a page
   of hairline diagrams the pictograms would be the loudest
   thing on it.

   Geometry lives here rather than in a GEO block, because
   this style is HTML and the geometry is a grid. Two things
   that grid has to do and a floated or flexed version would
   not:

     The axis spans it. `grid-column: 1 / -1` means the line
     through the rungs is measured by the same tracks as the
     columns, so it cannot drift out of alignment with them —
     which is the failure mode of drawing it as a separate
     rule and eyeballing the ends.

     The bodies align on their first line. The claims are one
     or two lines depending on the level and the paragraphs
     under them still start together, because each body is
     its own grid item with its own row, not a block flowing
     after a header of unpredictable height.

   The dashed dividers are borders on the columns rather than
   elements between them, so changing the number of levels
   cannot leave a stray rule behind.
   ───────────────────────────────────────────────────────── */

/* ── The parts ─────────────────────────────────────────────
   Copied into public/style.css when a case study takes one.
   Class names only, no style attributes — the site's CSP
   blocks those. */

.lv-heading {
  margin: 0 0 32px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Three explicit rows — headers, axis, bodies — rather than letting them be
     implicit. The dividers span all three, and a span into an implicit grid
     resolves to nothing: `grid-row: 1 / -1` counts lines in the *explicit*
     grid, so with no rows declared it collapses to a single line, the spans
     stop reserving space, and auto-placement pushes the columns onto rows of
     their own. Declaring the rows is what makes the span mean what it says. */
  grid-template-rows: auto auto auto;
  column-gap: 0;
  align-items: start;
}
/* Attribute selectors rather than a custom property, because setting one
   would need a style attribute on the element and the CSP blocks those. */
.lv-grid[data-cols="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.lv-grid[data-cols="5"] {
  grid-template-columns: repeat(5, 1fr);
}

/* Every item is placed by hand rather than flowed. Auto-placement works right
   up until the dividers are added, and then it has to route around three
   full-height spans — which it does by inventing rows. */
.lv-col {
  min-width: 0;
  padding: 0 24px;
}
.lv-col--head {
  grid-row: 1;
}
.lv-col--body {
  grid-row: 3;
}
.lv-col.lv-ord-1 {
  grid-column: 1;
}
.lv-col.lv-ord-2 {
  grid-column: 2;
}
.lv-col.lv-ord-3 {
  grid-column: 3;
}
.lv-col.lv-ord-4 {
  grid-column: 4;
}
.lv-col.lv-ord-5 {
  grid-column: 5;
}
/* The left edge of each of the two rows takes no left padding, so the ladder
   starts flush with the heading above it. Marked by the renderer rather than
   found with :first-of-type, which cannot see the body row's first column —
   every column here is a div, so :first-of-type matches the first header. */
.lv-col--first {
  padding-left: 0;
}
/* The dividers. Their own elements spanning every row, rather than borders on
   the columns — a border stops at the bottom of the header row, jumps the
   axis and starts again, which reads as two tables stacked rather than as one
   ladder. Dashed, because the boundary between two rungs is a judgement and a
   solid rule would claim an organisation is cleanly on one side of it. */
.lv-divider {
  grid-row: 1 / 4;
  border-left: 1px dashed var(--rule);
  pointer-events: none;
}
.lv-divider.lv-ord-2 {
  grid-column: 2;
}
.lv-divider.lv-ord-3 {
  grid-column: 3;
}
.lv-divider.lv-ord-4 {
  grid-column: 4;
}
.lv-divider.lv-ord-5 {
  grid-column: 5;
}
.lv-eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-accent-ink);
}

.lv-icon {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 0 26px;
  fill: none;
  stroke: var(--lv-accent-ink);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The title and the summary under it are a label pair, and 6px was not enough
   air between a 15px line and a 13px one — they read as one paragraph with a
   bold first clause.

   The min-height is the other half of the fix and it is about the row rather
   than the title. Titles here wrap to one line or two depending on the words,
   so without it the four summaries start at four different heights and the
   ladder looks ragged across. Two lines' worth holds every column's summary on
   one baseline; a title that needs three still pushes its own column down,
   which is rarer and more honest than truncating. */
.lv-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  min-height: 2.6em;
}
/* Bottom-aligned to the axis rather than sitting wherever its own length
   leaves it. The head row's height is set by its tallest column, and without
   this a short summary floats with a void beneath it before the axis — which
   reads as a missing element rather than as air. */
.lv-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-50);
  min-height: 2.9em;
}

/* ── The axis ──────────────────────────────────────────────
   The only geometry, and the thing that makes this a ladder rather than a
   comparison table: it has a direction. Spans every track, so it is measured
   by the same grid as the columns it runs under. */
.lv-axis {
  grid-column: 1 / -1;
  grid-row: 2;
  /* Above the dividers, which run through this row on their way down. The
     dashed rules are meant to cross the axis — that is the reference — but
     the ring and the dot have to sit on top of them rather than under. */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  /* No border-top. The axis line *is* the division between the two rows, and a
     rule 24px above it drew a second horizontal line doing the same job — two
     lines through the middle where the figure needs one. The margins now carry
     the separation instead, and they are close to even so the axis reads as
     sitting between the rows rather than attached to either. */
  margin: 30px 0 34px;
}
.lv-axis-line {
  flex: 1;
  height: 1.5px;
  background: var(--lv-accent);
}
/* Hollow where you start, filled where you end. A ring reads as a station you
   are at; a dot reads as an arrival. */
.lv-axis-start {
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--lv-accent);
  border-radius: 50%;
}
.lv-axis-end {
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--lv-accent);
  border-radius: 50%;
}

/* What the organisation believes at that rung. Every level needs one — a
   level with only a title and a body is a bucket. */
/* Same pair, same air. The claim is a heading for the body under it, and 16px
   against a 1.45 line-height was reading as a run-on. */
.lv-claim {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  min-height: 2.9em;
}
.lv-p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-50);
}
.lv-p:last-child {
  margin-bottom: 0;
}

/* ── The host ──────────────────────────────────────────────
   Workshop pages only. On the site this would inherit from
   .diagram, which supplies the scroll and the palette. */

.lv {
  /* 0.55 not 0.5, matching public/style.css: #737373 on white at 4.74:1,
     which clears AA. 0.5 is 3.95:1 and fails. */
  --ink-50: rgba(0, 0, 0, 0.55);
  --rule: rgba(0, 0, 0, 0.13);
  /* The reference's green, for the marks. */
  --lv-accent: #60a000;
  /* The eyebrow and the icons are text-sized, so they need a green that
     clears AA on white. --lv-accent is 2.2:1 and does not. */
  --lv-accent-ink: #4a7c00;

  color: #000;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif;
  min-width: 0;
}

/* Four columns of 13px prose need roughly 44rem before the measure collapses.
   Under that the ladder stacks — and stacking is the honest failure here,
   because a horizontally scrolling maturity model is one nobody reads the end
   of, and the end is where the argument is. The axis turns with it. */
@media (max-width: 60rem) {
  .lv-grid,
  .lv-grid[data-cols="3"],
  .lv-grid[data-cols="5"] {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  /* Every hand-placed row and column goes back to the flow, or eight items
     pile into three rows on top of each other.

     Scoped through .lv-grid for specificity, not for reach. The placement
     rules above are `.lv-col.lv-ord-2` and friends, which are (0,2,0); a bare
     `.lv-col` here is (0,1,0) and loses to them, so the columns survived the
     collapse and stacked four-deep inside a one-column grid. Matching their
     specificity and coming later in the file is what makes the reset hold. */
  .lv-grid .lv-col,
  .lv-grid .lv-col--head,
  .lv-grid .lv-col--body {
    grid-row: auto;
    grid-column: 1;
  }
  .lv-col {
    padding: 0;
  }
  .lv-divider {
    display: none;
  }
  /* Each header keeps its own body under it. Without this the source order
     stacks as four headers and then four bodies, which reads as two lists
     rather than as one ladder — so the rungs are rewoven by their index. */
  .lv-col--head.lv-ord-1 {
    order: 1;
  }
  .lv-col--body.lv-ord-1 {
    order: 2;
  }
  .lv-col--head.lv-ord-2 {
    order: 3;
  }
  .lv-col--body.lv-ord-2 {
    order: 4;
  }
  .lv-col--head.lv-ord-3 {
    order: 5;
  }
  .lv-col--body.lv-ord-3 {
    order: 6;
  }
  .lv-col--head.lv-ord-4 {
    order: 7;
  }
  .lv-col--body.lv-ord-4 {
    order: 8;
  }
  .lv-col--head.lv-ord-5 {
    order: 9;
  }
  .lv-col--body.lv-ord-5 {
    order: 10;
  }

  /* A rule over each rung, standing in for the vertical dividers that just
     went away — the separation still has to happen, it just turns with the
     layout. */
  .lv-col--head {
    padding-top: 28px;
    border-top: 1px dashed var(--rule);
  }
  .lv-col--head.lv-ord-1 {
    padding-top: 0;
    border-top: 0;
  }
  .lv-col--body {
    padding-bottom: 4px;
  }
  .lv-axis {
    display: none;
  }
}

.lv-figure {
  margin: 0;
  min-width: 0;
}
.lv-figure figcaption {
  margin-top: 16px;
  color: rgba(0, 0, 0, 0.55);
  max-width: 34rem;
}