/* SIMUL8OR LEGAL PAGE LAYER — Option B "Reference" layout.
   Sits on s8-content.css + the shared S8 token/UI layers. */
.s8l {
  --s8l-measure: 720px;
  background: var(--s8-bg);
  color: var(--s8-fg);
  font-family: var(--s8-sans);
  font-size: var(--s8-fs-base);
  line-height: var(--s8-lh);
  -webkit-font-smoothing: antialiased;
}
.s8l * { box-sizing: border-box; }
.s8l a {
  color: var(--s8-accent-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--s8-accent-line);
  transition: color var(--s8-t) var(--s8-ease), border-color var(--s8-t) var(--s8-ease);
}
.s8l a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
.s8l strong { color: var(--s8-fg); font-weight: 600; }

.s8l-meta {
  margin: var(--s8-4) 0 0;
  font-family: var(--s8-mono);
  font-size: var(--s8-fs-xs);
  font-weight: 500;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  color: var(--s8-fg-4);
}
.s8l-lead {
  margin: 0;
  max-width: var(--s8l-measure);
  font-size: var(--s8-fs-lg);
  color: var(--s8-fg-2);
  text-wrap: pretty;
}
.s8l-p {
  margin: var(--s8-4) 0 0;
  max-width: var(--s8l-measure);
  color: var(--s8-fg-2);
  text-wrap: pretty;
}
.s8l-p:first-child { margin-top: 0; }
.s8l-grp { margin: var(--s8-5) 0 0; max-width: var(--s8l-measure); }
.s8l-grp:first-child { margin-top: 0; }
.s8l-grp__h { margin: 0; font-size: var(--s8-fs-sm); font-weight: 600; color: var(--s8-fg); }
.s8l-list {
  list-style: none;
  margin: var(--s8-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: var(--s8l-measure);
}
.s8l-list:first-child { margin-top: 0; }
.s8l-list li { position: relative; padding-left: 19px; font-size: var(--s8-fs-md); color: var(--s8-fg-2); text-wrap: pretty; }
.s8l-list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 9px; height: 1px; background: var(--s8-line-3); }
.s8l-list--nested { margin-top: var(--s8-3); }
.s8l-list--nested li { font-size: var(--s8-fs-sm); }

/* The shared About-style hero remains authoritative; this adds only the
   Reference layout's dividing rule and legal metadata rhythm. */
.s8l-b__head { padding-bottom: var(--s8-7); border-bottom: 1px solid var(--s8-line); }
.s8l-b__cols {
  display: grid;
  grid-template-columns: 244px minmax(0,1fr);
  gap: clamp(32px,5vw,76px);
  padding-bottom: clamp(64px,8vw,110px);
}
.s8l-rail {
  position: sticky;
  top: var(--s8-5);
  align-self: start;
  padding-top: var(--s8-8);
  max-height: calc(100vh - 32px);
  overflow: auto;
  scrollbar-width: thin;
}
.s8l-rail__lbl {
  padding-left: 13px;
  margin-bottom: var(--s8-3);
  font-family: var(--s8-mono);
  font-size: var(--s8-fs-micro);
  font-weight: 600;
  letter-spacing: var(--s8-ls-caps);
  text-transform: uppercase;
  color: var(--s8-fg-4);
}
.s8l-rail a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 0 7px 12px;
  border-left: 1px solid var(--s8-line);
  border-bottom: 0;
  font-size: var(--s8-fs-sm);
  color: var(--s8-fg-3);
  text-wrap: pretty;
}
.s8l-rail a i {
  flex: none;
  width: 14px;
  font-style: normal;
  font-family: var(--s8-mono);
  font-size: var(--s8-fs-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--s8-fg-4);
}
.s8l-rail a:hover { color: var(--s8-fg); border-left-color: var(--s8-line-3); }
.s8l-rail a.on { color: var(--s8-accent-fg); border-left-color: var(--s8-accent); background: linear-gradient(90deg,var(--s8-accent-tint),transparent 72%); }
.s8l-rail a.on i { color: var(--s8-accent-fg); }
.s8l-b__body { min-width: 0; padding-top: var(--s8-8); }
.s8l-b-sec { padding-top: var(--s8-8); scroll-margin-top: 24px; }
.s8l-b-sec:first-of-type { padding-top: var(--s8-7); }
.s8l-b-sec__h { display: flex; align-items: baseline; gap: var(--s8-3); padding-bottom: var(--s8-3); border-bottom: 1px solid var(--s8-line); }
.s8l-b-sec__h h2 { margin: 0; font-size: var(--s8-fs-xl); line-height: 1.25; letter-spacing: var(--s8-ls-tight); font-weight: 600; color: #fff; }
.s8l-b-num {
  flex: none;
  margin-left: auto;
  font-family: var(--s8-mono);
  font-size: var(--s8-fs-xs);
  font-weight: 600;
  letter-spacing: var(--s8-ls-caps);
  font-variant-numeric: tabular-nums;
  color: var(--s8-fg-4);
  transform: translateY(-1px);
}
.s8l-b-body { padding-top: var(--s8-5); }

@media (max-width:940px) {
  .s8l-b__cols { grid-template-columns: 1fr; gap: 0; }
  .s8l-rail { display: none; }
}
@media (max-width:520px) {
  .s8l-b-sec__h { align-items: flex-start; }
  .s8l-b-num { margin-top: 3px; }
}
@media (prefers-reduced-motion:reduce) {
  .s8l a { transition: none; }
}