/* ==========================================================================
   STANDARD DETAIL PAGES — contained sheet + sticky standards rail
   Kalp Alloys

   Loaded only by the per-standard pages (component/render-standard.php and
   asme-b16-5-flanges.php) through $PG['css'], never by the /standards hub,
   which shares the .theme-standards body class. Kept in its own file rather
   than appended to style.css so the two sheets can be edited independently.

   The page reads as one document: a tinted page behind a white sheet, every
   block inside a single container, the numbered gutter down the left and the
   standards rail tracking the reader on the right. The alternating full-bleed
   bands are dropped, so nothing spans the viewport except the hero.
   ========================================================================== */

.std-doc {
  /* 76px matches the -76px offset the theme gives .sec-block__num, so every
     section number lands inside the gutter instead of the sheet padding. */
  --std-gutter: 76px;
  --std-pad: 34px;
  background: var(--bg-alt)
}

.std-doc main {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: -34px auto 62px;
  padding: 0 var(--std-pad);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg)
}

/* One width and one left edge for every block in the sheet. Direct children
   only, so the sections inside the split column keep their own flush edges. */
.std-doc main>.section>.container {
  max-width: none;
  width: 100%;
  padding-left: var(--std-gutter);
  padding-right: 0;
  padding-top: 44px;
  padding-bottom: 44px
}

/* Colour no longer marks a section boundary — a rule does. */
.std-doc main .section {
  padding: 0;
  background: none
}

.std-doc main>.section+.section>.container {
  border-top: 1px solid var(--line)
}

.std-doc main>.section:first-of-type>.container {
  padding-top: 34px
}

/* Blocks that carried their own reading measure now inherit the column. */
.std-doc .aeo-answer,
.std-doc .aeo-takeaways,
.std-doc .faq,
.std-doc .materials {
  max-width: none;
  margin-left: 0;
  margin-right: 0
}

/* Copy aligns with the heading above it, and tables stay inside the column. */
.std-doc .prose.wide {
  padding-inline: 0
}

.std-doc .prose.wide>.tbl-wrap {
  max-width: 100%;
  margin-inline: 0
}

/* Sections inside the split column sit flush; the gutter belongs to the wrap. */
.std-doc main .split__main>.section+.section {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line)
}

/* FAQ and Related headings take the same rule-and-caps treatment as the
   numbered section headings, so the ladder keeps its character to the end. */
.std-doc main>.section>.container>.cat-block__head {
  border-bottom: 2px solid var(--navy);
  padding-bottom: 10px;
  margin-bottom: 18px
}

.std-doc main>.section>.container>.cat-block__head h2 {
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 1.28rem
}

/* ==========================================================================
   THE RAIL — every standard, one click away, tracking the reader
   ========================================================================== */

.std-side {
  display: flex;
  flex-direction: column;
  gap: 18px
}

.std-side__card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden
}

.std-side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--navy);
  color: #fff
}

.std-side__label {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase
}

.std-side__count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16)
}

.std-side__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 58vh;
  overflow-y: auto;
  scrollbar-width: thin
}

.std-side__link {
  display: block;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease)
}

.std-side__list li:first-child .std-side__link {
  border-top: 0
}

.std-side__link:hover {
  background: var(--bg-steel);
  border-left-color: var(--steel)
}

.std-side__link.is-on {
  background: var(--bg-steel);
  border-left-color: var(--accent)
}

.std-side__code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--navy)
}

.std-side__link.is-on .std-side__code {
  color: var(--accent-600)
}

.std-side__name {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted)
}

.std-side__hub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  font-size: .82rem;
  font-weight: 600;
  color: var(--steel);
  transition: color .2s var(--ease)
}

.std-side__hub:hover {
  color: var(--accent-600)
}

.std-side__cta {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-steel)
}

.std-side__cta-title {
  font-size: 1rem;
  line-height: 1.35;
  margin: 0 0 8px
}

.std-side__cta-text {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 14px
}

.std-side__cta-btn {
  width: 100%;
  justify-content: center
}

.std-side__cta-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--steel)
}

.std-side__cta-alt:hover {
  color: var(--accent-600)
}

/* ==========================================================================
   Below the split breakpoint the sheet flattens and the rail stacks under the
   content, matching the calculator pages' behaviour.
   ========================================================================== */

@media (max-width: 991.98px) {
  .std-doc main {
    max-width: 100%;
    margin: 0 0 34px;
    padding: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none
  }

  .std-doc main>.section>.container {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 32px;
    padding-bottom: 32px
  }

  .std-doc main>.section:first-of-type>.container {
    padding-top: 26px
  }

  .std-doc .split__side {
    position: static
  }

  .std-doc .std-side__list {
    max-height: none
  }
}