/* ================================================================
   document.css — Document page
   Layout variants by type: dispatch (reading), study (reference),
   protocol/dictum (structured).
   ================================================================ */

/* ═══════════════════════════════════════════════════════
   ROW CONTROL — explicit placement utilities
   ═══════════════════════════════════════════════════════ */

/* Force two adjacent items onto the same row.
   Apply .row-pair to a wrapper, or use on two siblings: */
.doc-body > .row-start {
  grid-row-end: span 1;
}
.doc-body > .row-start + * {
  grid-row-start: auto;
  /* This alone won't force same row — CSS Grid needs
     explicit row numbers or dense packing. */
}

/* Dense packing: allows items with non-overlapping columns
   to share a row automatically. */
.doc-body--dense {
  grid-auto-flow: row dense;
}


/* ── Document header ── */

.doc-header {
  grid-column: c5 / c17;
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 0px solid var(--c-rule);
  margin-bottom: var(--sp-6);
}

.doc-id-block {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.doc-rats-id {
  font-family: var(--ff-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--ls-meta);
  font-weight: 400;
  line-height: var(--lh-tight);
}

.doc-type-badge {
  font-family: var(--ff-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.doc-type-badge.type-study    { color: var(--c-stu); }
.doc-type-badge.type-protocol { color: var(--c-pro); }
.doc-type-badge.type-dictum   { color: var(--c-dic); }
.doc-type-badge.type-dispatch { color: var(--c-dsp); }

.doc-title {
  font-size: var(--fs-5);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
  max-width: none;
  margin-bottom: var(--sp-4);
}

/* Metadata definition list */
.doc-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  font-family: var(--ff-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--ls-meta);
  margin-bottom: var(--sp-4);
}

.doc-fields dt {
  color: var(--c-fg);
  text-transform: uppercase;
  font-size: var(--fs-1);
  letter-spacing: var(--ls-wide);
}

.doc-fields dd {
  margin-right: var(--sp-4);
}

.doc-abstract {
  color: var(--c-fg);
  max-width: var(--measure);
  line-height: var(--lh-body);
}

/* ── Format buttons — RFC-editor spirit ── */

.doc-formats {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.doc-formats a {
  font-family: var(--ff-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-rule);
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.doc-formats a:hover {
  border-color: var(--c-fg);
}

.doc-formats a[aria-current="page"] {
  border-color: var(--c-fg);
  color: var(--c-fg);
}


        .row-group {
        grid-column: c1 / c17;
        display: grid;
        grid-template-columns: subgrid;
        align-items: baseline;
        }

        /* Inside a row-group, all children share row 1 */
        .row-group > p {
        grid-column: c3 / c5;
        grid-row: 1;
        }

        .row-group > ul,
        .row-group > ol {
            list-style-type: disc;
        grid-column: c6 / c15;
        grid-row: 1;
        }

@media (min-width: 768px) and (max-width: 1199px) {
  .row-group > p { grid-column: c1 / c5; }
  .row-group > ul,
  .row-group > ol { grid-column: c5 / c9; }
}

@media (max-width: 767px) {
  .row-group > p,
  .row-group > ul,
  .row-group > ol {
    grid-column: c1 / c5;
    grid-row: auto;
  }
}

/* ═══════════════════════════════════════════════════════
   BODY LAYOUT VARIANTS — by document type
   ═══════════════════════════════════════════════════════ */

/* Default: single reading column */
.doc-body {
  grid-column: c1 / c17;
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-flow: row dense;
  row-gap: var(--sp-4);
}

.doc-body > * {
  grid-column: c1 / c17;
}

.doc-body li + li {
  margin-top: var(--sp-1);
}

.doc-body > pre,
.doc-body > .block-code {
  grid-column: c1 / c13;
}


.doc-body > .block-pullquote {
  grid-column: c1 / c17;
}

.doc-body > .block-aside {
  grid-column: c11 / c17;
}

.doc-body > .block-image {
  grid-column: c1 / c13;
}

.doc-body > .block-reference {
  grid-column: c1 / c9;
}



/* Dispatch: wide reading column */
.page-dispatch .doc-body > * {
  grid-column: c5 / c11;
}
.page-dispatch .doc-body > pre,
.page-dispatch .doc-body > .block-code {
  grid-column: c5 / c13;
}
.page-dispatch .doc-body > .block-pullquote {
  grid-column: c1 / c8;
}
.page-dispatch .doc-body > .block-aside {
  grid-column: c8 / c17;
}


/* protocol: wide reading column */
.page-protocol .doc-body > * {
  grid-column: c1 / c17;
}

.page-protocol .doc-body > pre,
.page-protocol .doc-body > .block-code {
  grid-column: c5 / c13;
}

.page-protocol .doc-body > p {
  grid-column: c5 / c10;
}

.page-protocol .doc-body > h1 {
  grid-column: c5 / c10;
}

.page-protocol .doc-body > h2 {
  grid-column: c5 / c10;
}

.page-protocol .doc-body > h3 {
  grid-column: c5 / c10;
}

.page-protocol .doc-body > .block-pullquote {
  grid-column: c1 / c8;
}
.page-protocol .doc-body > .block-aside {
  grid-column: c8 / c17;
}

.page-protocol .doc-body > .block-reference {
  grid-column: c8 / c17;
}


/* Study: narrower body, metadata visible on right */
.page-study .doc-header {
  grid-column: c1 / c17;
  display: grid;
  grid-template-columns: subgrid;
}

.page-study .doc-id-block    { grid-column: c1 / c7; }
.page-study .doc-title        { grid-column: c1 / c10; }
.page-study .doc-fields       { grid-column: c11 / c17; flex-direction: column; }
.page-study .doc-abstract     { grid-column: c1 / c10; }

.page-study .doc-body {
  grid-column: c1 / c10;
}

@media (max-width: 1199px) {
  .page-study .doc-id-block,
  .page-study .doc-title,
  .page-study .doc-fields,
  .page-study .doc-abstract,
  .page-study .doc-body {
    grid-column: c1 / c9;
  }
}


/* Dispatch: lists and blockquotes follow the reading column */
.page-dispatch .doc-body > ul,
.page-dispatch .doc-body > ol {
  grid-column: c8 / c17;
}
.page-dispatch .doc-body > blockquote {
  grid-column: c1 / c5;
}
.page-dispatch .doc-body > table {
  grid-column: c3 / c15;
}

/* Protocol */
.page-protocol .doc-body > ul,
.page-protocol .doc-body > ol {
  grid-column: c7 / c17;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.page-protocol .doc-body > blockquote {
  grid-column: c1 / c5;
}
.page-protocol .doc-body > table {
  grid-column: c5 / c13;
}

/* Study: narrower body context */
.page-study .doc-body > ul,
.page-study .doc-body > ol {
  grid-column: c9 / c17;
}
.page-study .doc-body > blockquote {
  grid-column: c1 / c6;
}
.page-study .doc-body > table {
  grid-column: c1 / c10;
}
/* ═══════════════════════════════════════════════════════
   BLOCK CONTENT STYLING
   ═══════════════════════════════════════════════════════ */

.doc-body > ul,
.doc-body > ol {
  grid-column: c9 / c17;
}

.doc-body > table {
  grid-column: c1 / c17;
}

.doc-body > blockquote {
  grid-column: c1 / c9;
}

.doc-body > figure,
.doc-body > img {
  grid-column: c1 / c13;
}

.doc-body > h2,
.doc-body > h3 {
  grid-column: c1 / c17;
}

.doc-body > hr {
  grid-column: c1 / c17;
}

/* Text blocks — inherits body p styles via marked output */
.doc-body p {
  max-width: var(--measure);
}

.doc-body p + p {
  margin-top: var(--sp-3);
}

.doc-body h2 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
}

.doc-body h3 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}


.doc-body ul {
 font-size: var(--fs-2);
 margin-bottom: var(--sp-2);
}

.doc-body table {
  grid-column: c5 / c13;
  font-family: var(--ff-mono);
  font-size: var(--fs-2);
  margin-bottom: var(--sp-2);
  width: 100%;
}

.doc-body table th,
.doc-body table td {
  padding: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  text-align: left;
  border-bottom: 1px solid var(--c-rule);
}

.doc-body table th {
  font-weight: 700;
}

/* Code blocks — bare pre (markdown fences) */
.doc-body pre {
  grid-column: c5 / c13;
  font-family: var(--ff-mono);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  padding: var(--sp-3);
  background: var(--c-code-bg);
  border: 1px solid var(--c-code-border);
  overflow-x: auto;
  max-width: 100%;
}

/* Code blocks — structured (rats_block_code via CodeBlock.astro) */
.block-code {
  margin: 0;
  border: 1px solid var(--c-code-border);
  overflow: hidden;
}

.block-code-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid var(--c-code-border);
  background: var(--c-code-header);
}

.block-code-title {
  font-family: var(--ff-mono);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
}

.block-code-download {
  font-family: var(--ff-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--ls-meta);
  color: var(--c-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.block-code-download:hover {
  color: var(--c-fg);
  text-decoration: underline;
  text-decoration-color: var(--c-fg);
}

.block-code pre,
.block-code .shiki,
.block-code .shiki pre {
  margin: 0;
  padding: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  overflow-x: auto;
}

.block-code code,
.block-code .shiki code {
  font-family: var(--ff-mono);
  font-size: var(--fs-2);
  background: none;
  padding: 0;
}
/* Shiki dual-theme: single-element mode.
   Light values are inline (color, background-color).
   Dark values are in --shiki-dark-* custom properties.
   Swap them when dark mode is active.
   Covers both .block-code (structured) and bare pre (markdown fences). */
html:not([data-theme="light"]) .block-code .shiki,
html:not([data-theme="light"]) .block-code .shiki span,
html:not([data-theme="light"]) .doc-body > pre.shiki,
html:not([data-theme="light"]) .doc-body > pre.shiki span,
html:not([data-theme="light"]) .doc-body > pre.shiki code {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
}

.block-code-caption {
  padding: var(--sp-1) var(--sp-2);
  border-top: 1px solid var(--c-code-border);
  font-family: var(--ff-sans);
  font-size: var(--fs-2);
  font-style: italic;
  color: var(--c-dim);
  line-height: var(--lh-body);
}

/* Pullquote */
.block-pullquote {
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-accent);
  padding-block: var(--sp-4);
  border-top: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
}

.block-pullquote p {
  max-width: none;
}

/* Blockquote */
.block-quote {
  padding-left: var(--sp-3);
  border-left: 0px solid var(--c-rule);
}

.block-quote cite {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
  font-style: normal;
}

/* Aside */
.block-aside {
  font-family: var(--ff-sans);
  font-size: var(--fs-2);
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
  border: 0px solid var(--c-rule);
  line-height: var(--lh-body);
}

.block-aside p {
  max-width: none;
  font-size: inherit;
}

/* Image */
.block-image {
  max-width: 100%;
}

.block-image img {
  width: 100%;
  height: auto;
}

.block-image figcaption {
  font-family: var(--ff-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--ls-meta);
  color: var(--c-dim);
  margin-top: var(--sp-1);
}


/* Reference block */
.block-reference {
  font-size: var(--fs-2);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--c-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
}

.block-reference .ref-predicate {
  font-family: var(--ff-mono);
  font-size: var(--fs-3);
  color: var(--c-dim);
}

.block-reference .ref-link {
  font-weight: 700;
}

.block-reference .ref-annotation {
  color: var(--c-dim);
  font-size: var(--fs-2);
  flex-basis: 100%;
}

/* Display style variants */
.block-reference.ref-inline {
  display: inline-flex;
  border-top: none;
  padding: 0;
  gap: var(--sp-1);
}

.block-reference.ref-footnote {
  font-size: var(--fs-1);
  font-family: var(--ff-mono);
}

.block-reference.ref-sidebar {
  /* When placed in an aside column position */
  border-top: none;
  border-left: 2px solid var(--c-dim);
  padding: var(--sp-1) var(--sp-3);
  flex-direction: column;
  gap: var(--sp-1);
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE — column fallbacks
   ═══════════════════════════════════════════════════════ */

/* Tablet: 8 active columns (c9+ collapsed) */
@media (min-width: 768px) and (max-width: 1199px) {

  .doc-header { grid-column: c1 / c9; }

  .doc-body { grid-column: c1 / c9; }
  .doc-body > * { grid-column: c1 / c7; }
  .doc-body > .block-pullquote,
  .doc-body > table,
  .doc-body > h2,
  .doc-body > h3,
  .doc-body > hr { grid-column: c1 / c9; }
  .doc-body > ul,
  .doc-body > ol { grid-column: c5 / c9; }
  .doc-body > blockquote { grid-column: c1 / c5; }
  .doc-body > .block-aside { grid-column: c5 / c9; }
  .doc-body > .block-image,
  .doc-body > figure,
  .doc-body > img { grid-column: c1 / c7; }
  .doc-body > pre,
  .doc-body > .block-code { grid-column: c1 / c9; }
  .doc-body > .block-reference { grid-column: c1 / c5; }

  /* Study: collapse side metadata */
  .page-study .doc-id-block,
  .page-study .doc-title,
  .page-study .doc-abstract { grid-column: c1 / c7; }
  .page-study .doc-fields { grid-column: c1 / c9; flex-direction: row; }
  .page-study .doc-body { grid-column: c1 / c9; }
  .page-study .doc-body > * { grid-column: c1 / c7; }

  /* Dispatch/Protocol reading column widens */
  .page-dispatch .doc-body > *,
  .page-protocol .doc-body > * { grid-column: c2 / c8; }
  .page-dispatch .doc-body > .block-pullquote,
  .page-protocol .doc-body > .block-pullquote { grid-column: c1 / c9; }
  .page-dispatch .doc-body > .block-aside,
  .page-protocol .doc-body > .block-aside { grid-column: c5 / c9; }
  .page-dispatch .doc-body > ul,
  .page-dispatch .doc-body > ol,
  .page-protocol .doc-body > ul,
  .page-protocol .doc-body > ol { grid-column: c2 / c8; }
  .page-dispatch .doc-body > blockquote,
  .page-protocol .doc-body > blockquote { grid-column: c1 / c4; }
  .page-dispatch .doc-body > table,
  .page-protocol .doc-body > table { grid-column: c1 / c9; }
}

/* Mobile: 4 active columns (c5+ collapsed) */
@media (max-width: 767px) {

  /* ── Document header ── */
  .doc-header { grid-column: c1 / c5; }

  /* ── Generic doc-body: everything full-width ── */
  .doc-body { grid-column: c1 / c5; }
  .doc-body > *,
  .doc-body > .block-pullquote,
  .doc-body > .block-aside,
  .doc-body > .block-image,
  .doc-body > .block-reference,
  .doc-body > .block-code,
  .doc-body > pre,
  .doc-body > table,
  .doc-body > ul,
  .doc-body > ol,
  .doc-body > blockquote,
  .doc-body > figure,
  .doc-body > img,
  .doc-body > h2,
  .doc-body > h3,
  .doc-body > hr {
    grid-column: c1 / c5;
  }

  /* ── Study: collapse side metadata to full width ── */
  .page-study .doc-id-block,
  .page-study .doc-title,
  .page-study .doc-fields,
  .page-study .doc-abstract,
  .page-study .doc-body {
    grid-column: c1 / c5;
  }
  .page-study .doc-fields { flex-direction: row; }
  .page-study .doc-body > * { grid-column: c1 / c5; }

  /* ── Protocol: collapse all positioned elements to full width ──
     Overrides c5/c10, c8/c17, c7/c17 etc. which resolve to
     zero-width on the 4-column mobile grid. */
  .page-protocol .doc-header { grid-column: c1 / c5; }
  .page-protocol .doc-body { grid-column: c1 / c5; }
  .page-protocol .doc-body > *,
  .page-protocol .doc-body > p,
  .page-protocol .doc-body > h1,
  .page-protocol .doc-body > h2,
  .page-protocol .doc-body > h3,
  .page-protocol .doc-body > ul,
  .page-protocol .doc-body > ol,
  .page-protocol .doc-body > blockquote,
  .page-protocol .doc-body > table,
  .page-protocol .doc-body > pre,
  .page-protocol .doc-body > .block-code,
  .page-protocol .doc-body > .block-pullquote,
  .page-protocol .doc-body > .block-aside,
  .page-protocol .doc-body > .block-reference,
  .page-protocol .doc-body > .block-image,
  .page-protocol .doc-body > figure,
  .page-protocol .doc-body > img,
  .page-protocol .doc-body > hr {
    grid-column: c1 / c5;
  }

  /* ── Dispatch: collapse all positioned elements to full width ── */
  .page-dispatch .doc-header { grid-column: c1 / c5; }
  .page-dispatch .doc-body { grid-column: c1 / c5; }
  .page-dispatch .doc-body > *,
  .page-dispatch .doc-body > ul,
  .page-dispatch .doc-body > ol,
  .page-dispatch .doc-body > blockquote,
  .page-dispatch .doc-body > table,
  .page-dispatch .doc-body > pre,
  .page-dispatch .doc-body > .block-code,
  .page-dispatch .doc-body > .block-pullquote,
  .page-dispatch .doc-body > .block-aside,
  .page-dispatch .doc-body > .block-reference,
  .page-dispatch .doc-body > .block-image,
  .page-dispatch .doc-body > figure,
  .page-dispatch .doc-body > img,
  .page-dispatch .doc-body > h2,
  .page-dispatch .doc-body > h3,
  .page-dispatch .doc-body > hr {
    grid-column: c1 / c5;
  }

  /* ── row-group: stack label and content vertically ── */
  .row-group > p,
  .row-group > ul,
  .row-group > ol {
    grid-column: c1 / c5;
    grid-row: auto;
  }
}