/* Layout: grid, inspection gutter, bleeds. Zones `pg-` and `gut-`. */

/* 1. Grid. Lives on the page, not the section, so the rail spans full height. */
/* Exactly two children. grid-row: 1/-1 targets the last EXPLICIT line, so
 * auto-placed sections left the rail one row tall and sticky died with it. */
.pg {
  --pg-gutter: var(--gutter-inspect);
  display: grid;
  grid-template-columns: var(--pg-gutter) minmax(0, 1fr);
  gap: var(--grid-gap);
  max-width: var(--page-max);

  /* Shift the grid left by half the gutter so the body centres as if it were
     not there. max() caps the shift at the page inset. D-109. */
  --pg-decentrage: calc((var(--pg-gutter) + var(--grid-gap)) / 2);
  margin-inline: max(0px, calc(50% - var(--page-max) / 2 - var(--pg-decentrage))) auto;
  padding-inline: var(--space-5);
}

.pg-rail { grid-column: 1; }

.pg-main {
  grid-column: 2;
  min-width: 0;
}

/* No sections, no gutter: it would show a frozen label and a dead rule. */
.pg--solo {
  grid-template-columns: minmax(0, 1fr);
}

.pg--solo .pg-main { grid-column: 1; }

.pg-section {
  border-top: 1px solid var(--border-default);
  /* espace entre le filet et le contenu : interne, pas du rythme */
  padding-block-start: var(--rhythm-intra);
}

/* Transition bridge removed: .section no longer centres itself. */

/* Vertical rhythm: a gap is ONE token, never a sum of two paddings. */
/* The gap belongs to the relation between two sections, so only a section
   that follows another carries one. :first-child misses as soon as anything
   precedes it. */
.pg-section + .pg-section          { margin-block-start: var(--rhythm-section); }
.pg-section + .pg-section--tight   { margin-block-start: var(--rhythm-inter); }
.pg-section + .pg-section--close   { margin-block-start: var(--rhythm-intra); }

.pg-body {
  display: grid;
  gap: var(--rhythm-inter);
  min-width: 0;
}

/* Text is bound, the rest is not. */
.pg-text { max-width: var(--measure); }

/* Bleeds: blocks leave the reading column. */

/* Sort de la colonne de texte, garde la grille. */
.pg-wide { max-width: none; }

/* Crosses the gutter and pulls left. */
.pg-bleed-left {
  margin-left: calc((var(--pg-gutter) + var(--grid-gap)) * -1);
}

/* Full viewport width, outside --page-max. */
.pg-full {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: none;
}

/* Inverted band. data-surface="inverted" is required by the cursor. */
.pg-band {
  background: var(--surface-inverted);
  color: var(--text-on-inverted);
  border-radius: var(--radius-none);
  padding-block: var(--rhythm-section);
}

.pg-band .pg-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--space-5);
}

/* 2. Inspection gutter. Metadata only: label, number, progress. */
/* The rail is drawn: three 12px marks in a 4072px column read as nothing. */
.pg-rail {
  position: relative;
  padding-left: var(--space-5);
}

/* le filet */
.pg-rail::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 1px;
  background: var(--border-default);
}

/* sa portion parcourue */
.pg-rail::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--gutter-progress);
  transform: scaleY(var(--page-progress, 0));
  transform-origin: top;
}

/* Offset composed from --header-h so a header resize carries it. */
.gut {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
}

/* Sequence number: accent orange, mono, not display. */
.gut-num {
  font-family: var(--type-family-mono);
  font-size: var(--type-card);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--meta-tracking);
  color: var(--state-active);
}

.gut-label {
  font-family: var(--type-family-mono);
  font-size: var(--type-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--meta-tracking);
  color: var(--gutter-label);
  line-height: 1.5;
}

/* Anchor mark: ties the panel to its rule. */
.gut-track {
  position: absolute;
  top: 0;
  left: calc(var(--space-5) * -1);
  width: var(--space-3);
  height: 2px;
  background: var(--gutter-progress);
}

/* Fields cross-fade on section change; the panel itself never moves. */
.gut-num,
.gut-label {
  transition: opacity var(--motion-state);
}

.gut.is-swapping .gut-num,
.gut.is-swapping .gut-label {
  opacity: 0;
  transition-duration: var(--dur-press);
}

/* 3. Below 1024: the gutter becomes a horizontal band above the section. */
@media (max-width: 1023px) {
  /* Single column: nothing left to compensate. D-109. */
  .pg {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: auto;

    /* Page clears the fixed header. Project pages set their own inset. D-154. */
    padding-block-start: var(--header-h);
  }

  .pg-rail,
  .pg-main { grid-column: 1; }

  /* Rule goes horizontal under the band, still carrying progress. */
  .pg-rail {
    padding-left: 0;
    margin-block-end: var(--rhythm-intra);
  }

  .pg-rail::before,
  .pg-rail::after {
    inset-block: auto 0;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
  }

  .pg-rail::after { transform: scaleX(var(--page-progress, 0)); transform-origin: left; }

  .gut {
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: var(--space-4);
    top: var(--header-h);
    padding-block: var(--space-3);
    background: var(--surface-page);
  }

  .gut-track { display: none; }

  .pg-bleed-left { margin-left: 0; }
}

/* 4. Below 767 the gutter panel is hidden everywhere: with every chapter
   collapsed its ten titles are already on screen. Page inset rises to
   --header-h + --rhythm-intra. D-240, D-245. */
@media (max-width: 767px) {
  .pg-rail { display: none; }

  .pg { padding-block-start: calc(var(--header-h) + var(--rhythm-intra)); }
}