/* Fernando Kylas Brand System. layout.css
   Rules only: the reasoning is in the repository, at publications/brand-system/css/layout.css.
   Nothing else is altered. No value, selector or declaration differs
   from source. See publications/brand-system/build/assemble.py. */
.si-page {
  padding-inline: var(--fk-page-edge);
}

.si-band {
  margin-inline: auto;
  min-width: 0;
}

.si-band--reading { --fk-measure-context: var(--fk-measure); max-width: min(var(--fk-measure-context), 100%); }

.si-band--wide { --fk-measure-context: var(--fk-measure-wide); max-width: min(var(--fk-measure-context), 100%); }

.si-band--content { max-width: min(var(--fk-content-max), 100%); }

.si-rail {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.si-rail__inner { min-width: max-content; --fk-measure-context: none; }

.si-flow > * + *          { margin-block-start: var(--fk-pause-related); }
.si-flow--section > * + * { margin-block-start: var(--fk-pause-section); }

.si-main { display: block; }

.si-main    { margin-block-start: var(--fk-pause-section); }
.si-footer  { margin-block-start: var(--fk-pause-section); }

.si-records > .si-record + .si-record {
  margin-block-start: var(--fk-pause-related-compensated);
  border-block-start: var(--fk-hairline);
  padding-block-start: var(--fk-pause-related);
}

.si-record__title { margin-block-end: var(--fk-pause-bound); }

.si-record__meta {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--fk-space-2) var(--fk-space-5);
  --fk-measure-context: none;
}
.si-record__meta > dt { font-weight: var(--fk-weight-medium); }

.si-record__summary,
.si-record__links {
  margin-block-start: var(--fk-space-5);
  --fk-measure-context: var(--fk-measure);
  max-width: min(var(--fk-measure-context), 100%);
}

@media (max-width: 40rem) {
  .si-record__meta { grid-template-columns: minmax(0, 1fr); gap: var(--fk-space-1); }
  .si-record__meta > dd { margin-block-end: var(--fk-space-4); }
}

.si-state {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--fk-space-3) var(--fk-space-5);
  --fk-measure-context: none;
}
.si-state > dt { font-weight: var(--fk-weight-medium); }

.si-state > dd { overflow-wrap: break-word; }
@media (max-width: 40rem) {
  .si-state { grid-template-columns: minmax(0, 1fr); gap: var(--fk-space-1); }
  .si-state > dd { margin-block-end: var(--fk-space-4); }
}

.si-gap + .si-gap { margin-block-start: var(--fk-pause-related); }

.si-lead { margin-block-start: var(--fk-pause-bound); }

.si-chapter__head    { margin-block-end: var(--fk-pause-section); }

.si-chapter__head > h1 { overflow-wrap: break-word; }
.si-chapter__meta    { margin-block-end: var(--fk-pause-related); }
.si-chapter__demo    { margin-block-end: var(--fk-pause-related); --fk-measure-context: var(--fk-measure); max-width: min(var(--fk-measure-context), 100%); }

.si-contents {
  margin-block-end: var(--fk-pause-section);
  padding-block: var(--fk-pause-related);
  border-block: var(--fk-hairline);
  --fk-measure-context: none;
}
.si-contents > h2 { margin-block-end: var(--fk-pause-bound); }
.si-contents ol {
  list-style: none;
  padding-left: 0;
  max-width: none;
  columns: 2;
  column-gap: var(--fk-space-7);
}
.si-contents li + li { margin-top: var(--fk-flow-tight); }
@media (max-width: 40rem) { .si-contents ol { columns: 1; } }

.si-chapter__body { --fk-measure-context: var(--fk-measure); }
.si-chapter__body > :is(h2, h3, h4, h5, h6) {
  margin-block-start: var(--fk-pause-section);
  margin-block-end: var(--fk-pause-bound);
}
.si-chapter__body > :is(h4, h5, h6) { margin-block-start: var(--fk-pause-related); }
.si-chapter__body > * + * { margin-block-start: var(--fk-flow); }
.si-chapter__body > :is(table, pre, blockquote) + * { margin-block-start: var(--fk-pause-related); }

.si-chapter__body > table {
  display: block;
  overflow-x: auto;
  --fk-measure-context: none;
  border-collapse: collapse;
}
.si-chapter__body > table :is(th, td) { padding-block: var(--fk-space-4); }

.si-chapter__body > pre {
  overflow-x: auto;
  --fk-measure-context: none;
  padding: var(--fk-space-5);
  border: var(--fk-hairline);
  border-radius: var(--fk-radius-md);
}
.si-chapter__body > pre code { background: none; border: 0; padding: 0; font-size: var(--fk-body-s-size); }

.si-chapter__body > hr { margin-block: var(--fk-pause-section); }

.si-seq {
  margin-block-start: var(--fk-pause-section);
  padding-block-start: var(--fk-pause-related);
  border-block-start: var(--fk-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--fk-space-5) var(--fk-space-7);
  --fk-measure-context: none;
}
.si-seq__index { margin-inline-start: auto; }
@media (max-width: 40rem) { .si-seq__index { margin-inline-start: 0; } }

.si-ref { border-block-end: 1px dotted var(--fk-border-strong); cursor: help; }

.si-crumbs { margin-block-end: var(--fk-pause-related); --fk-measure-context: none; }
.si-crumbs ol {
  display: flex; flex-wrap: wrap; gap: var(--fk-space-2);
  list-style: none; padding-left: 0; max-width: none;
  font-size: var(--fk-body-s-size);
}
.si-crumbs li + li { margin-top: 0; }
.si-crumbs li + li::before { content: "/"; margin-inline-end: var(--fk-space-2); color: var(--fk-text-tertiary); }
.si-crumbs [aria-current] { color: var(--fk-text-tertiary); }

.si-orient {
  margin-block-end: var(--fk-pause-section);
  padding-block-end: var(--fk-pause-related);
  border-block-end: var(--fk-hairline);
}
.si-orient > h2:first-child { margin-block-start: 0; }
.si-orient h3 { margin-block-start: var(--fk-pause-related); margin-block-end: var(--fk-pause-bound); }

.si-record__status {
  margin-block-start: var(--fk-pause-bound);
  font-size: var(--fk-body-s-size);
  color: var(--fk-text-secondary);
  --fk-measure-context: none;
}
.si-record__summary { margin-block-start: var(--fk-space-3); }
.si-record__links   { font-size: var(--fk-body-s-size); }

@media (max-width: 40rem) {
  .si-chapter__body > table { font-size: var(--fk-body-s-size); }
  .si-chapter__body > table :is(th, td) {
    padding-block: var(--fk-space-3);
    padding-inline: var(--fk-space-3);
  }
  .si-chapter__body > pre { padding: var(--fk-space-4); }

  .si-chapter__body :is(p, li, td, dd) code { overflow-wrap: anywhere; }
}

.si-chapter__body { max-width: min(var(--fk-content-max), 100%); }

.si-chapter__body { overflow-wrap: break-word; }

.si-map { margin: 0; --fk-measure-context: none; }

.si-map figcaption {
  --fk-measure-context: var(--fk-measure-wide);
  max-width: min(var(--fk-measure-context), 100%);
  margin-block-end: var(--fk-pause-related);
  color: var(--fk-text-secondary);
  font-size: var(--fk-body-s-size);
}

.si-map__flow {
  list-style: none;
  padding-left: 0;
  max-width: none;
  counter-reset: si-map;
  border-block-start: var(--fk-hairline);
}
.si-map__step {
  counter-increment: si-map;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--fk-space-2) var(--fk-space-5);
  align-items: baseline;
  padding-block: var(--fk-space-4);
  border-block-end: var(--fk-hairline);
  margin-top: 0;
}
.si-map__step::before {
  content: counter(si-map);
  font-variant-numeric: tabular-nums;
  color: var(--fk-text-tertiary);
  font-size: var(--fk-body-s-size);
}
.si-map__step > a { font-weight: var(--fk-weight-medium); text-decoration-thickness: 1px; }
.si-map__role  { grid-column: 3; }
.si-map__leans,
.si-map__time  { grid-column: 3; font-size: var(--fk-body-s-size); color: var(--fk-text-tertiary); }

.si-map__step--thin > a { font-weight: var(--fk-weight-book); }

@media (max-width: 52rem) {
  .si-map__step { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--fk-space-1) var(--fk-space-4); }
  .si-map__role, .si-map__leans, .si-map__time { grid-column: 2; }
}
