/* Body + code: iA Writer Duo S / Mono S, SIL OFL. Display: Instrument Serif, SIL OFL.
   Five physical faces under two family names, separated by weight and style — so
   font-weight: 800 swaps the body face for the display serif with no extra rules
   anywhere else in this file. Subsetted at build time by tools/fonts.sh. */
@font-face {
   font-family: 'DOC'; font-style: normal; font-weight: 400; font-display: swap;
   src: url(/fonts/iAWriterDuoS-Regular.woff2) format('woff2');
}
@font-face {
   font-family: 'DOC'; font-style: italic; font-weight: 400; font-display: swap;
   src: url(/fonts/iAWriterDuoS-Italic.woff2) format('woff2');
}
@font-face {
   font-family: 'DOC'; font-style: normal; font-weight: 600; font-display: swap;
   src: url(/fonts/iAWriterDuoS-Bold.woff2) format('woff2');
}
@font-face {
   font-family: 'DOC'; font-style: normal; font-weight: 800; font-display: swap;
   src: url(/fonts/InstrumentSerif-Regular.woff2) format('woff2');
}
@font-face {
   font-family: 'DOC-PRE'; font-style: normal; font-weight: 400; font-display: swap;
   src: url(/fonts/iAWriterMonoS-Regular.woff2) format('woff2');
}

* {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   letter-spacing: inherit;
   vertical-align: baseline;

   margin: 0;
   padding: 0;

   color: inherit;
   text-decoration: none;
   text-underline-offset: 0.3em;
   text-decoration-thickness: 1px;
}

html {
   font-family: 'DOC';
   font-weight: 800;
   font-size: 100%;
   -webkit-font-smoothing: antialiased;
   text-align: left;
}

body {
   /* One clamped size instead of clig.dev's seven-breakpoint ladder. Their root
      was 1vw, which overrides a reader's own browser text-size setting; this
      scales with the viewport but starts from the reader's rem. */
   font-size: clamp(1rem, 0.85rem + 0.55vw, 1.35rem);
   line-height: 1.4;
}

@media (min-width: 901px) {
   body {
      display: grid;
      grid-template-columns: 25% 75%;
      grid-gap: 0;
   }
   #TableOfContents {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      box-sizing: border-box;
      margin-top: 100vh;
   }
   #TableOfContents > ul {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding: calc(1.7em *0.5) 0;
      height: 100vh;
      box-sizing: border-box;
      overflow: auto;
   }
   main {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
      box-sizing: border-box;
   }
}

@media (min-width: 901px) and (min-height: 800px) {
   #TableOfContents > ul {
      padding-top: calc(1.7em * 1.5);
   }
}

#TableOfContents {
   text-align: left;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: 100;
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
}

/* Don't show authors in table of contents */
#TableOfContents a[href='#authors'] {
   display: none !important;
}

/* Fix ToC vertical alignment from authors link being hidden */
#TableOfContents > ul > li:nth-child(2) {
   padding-top: 0;
}

#menu-button {
   display: none;
}

@media (max-width: 900px) {
   .menu-open {
      overflow: hidden;
   }
   #menu-button {
      display: inline-block;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      text-align: right;
      padding: calc(1.7em *0.5) 1.7em;
      z-index: 200;
      border: none;
      background: none;
      cursor: pointer;
   }
   .menu-open #menu-button {
      display: none;
   }
   #TableOfContents {
      display: none;
      position: fixed;
      overflow: scroll;
      padding: calc(1.7em *0.5) 0 1.7em;
   }
   .menu-open #TableOfContents {
      display: block;
   }
}

#TableOfContents ul {
   list-style: none;
}

@media (min-width: 901px) {
   #TableOfContents > ul {
      max-width: 18em;
      margin: 0 auto;
   }
   #TableOfContents ul ul {
      letter-spacing: 0.025em;
   }
}

#TableOfContents > ul > li {
   padding: 0 1.7em;
}

#TableOfContents ul li + li {
   padding-top: calc(1.7em *0.25);
}

#TableOfContents ul ul {
   padding-top: 0.5em;
   padding-left: 1.7em;
   font-size: 75%;
}

#TableOfContents ul ul li {
   margin-top: 0;
   border-top: none;
   padding-top: 0;
}

#TableOfContents a {
   display: inline-block;
   opacity: 0.5;
   transition: opacity 0.3s ease;
}

#TableOfContents a:hover,
#TableOfContents a:focus {
   opacity: 1;
   text-decoration: underline;
}

#TableOfContents .active > a {
   opacity: 1;
}

@media (max-width: 900px) {
   #TableOfContents a {
      font-size: 200%;
      opacity: 1;
   }
}

main {
   padding: 0 1.7em;
}

@media (min-width: 901px) {
   .doc-root > section {
      padding-left: 25%;
   }
}

/* clig.dev's own pre-heading content is only the title and a one-line
   subtitle, both deliberately full-bleed, so `.doc-root > section` above
   (which indents CHILD sections) was the only indent rule needed. This
   document has a citation table, an <hr> and several abstract paragraphs
   before the first `##` heading — they live directly in .doc-root, not in
   a section, so they got no indent and slid under the sidebar. Measured on
   the live site at 1200px: citation table text started at x=48, abstract
   paragraphs at x=34, against section content correctly at x=448. h1 and
   its subtitle are excluded: they are the full-bleed title screen, and the
   sidebar has margin-top: 100vh so it isn't on screen there anyway. */
@media (min-width: 901px) {
   .doc-root > p, .doc-root > table, .doc-root > hr,
   .doc-root > ul, .doc-root > ol, .doc-root > pre,
   .doc-root > figure, .doc-root > div, .doc-root > blockquote {
      padding-left: 25%;
   }
   .doc-root > h1, .doc-root > h1 + p { padding-left: 0; }
}
@media (min-width: 900px) {
   .doc-root > p, .doc-root > ul, .doc-root > ol, .doc-root > pre, .doc-root > table {
      max-width: 58vw; margin-left: auto; margin-right: auto; box-sizing: content-box;
   }
   .doc-root > h1 + p { max-width: 30.5em; }
}

.doc-root > h1 {
   position: relative;
   height: 75vh;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   box-sizing: border-box;
   padding: 0.5em 0 0;
   text-align: center;
   font-size: 15.5vw;
   left: -0.025em;
   line-height: 1;
   letter-spacing: -0.02em;
   max-width: 6em;
}
@media (max-width: 744px) and (orientation: landscape) {
   .doc-root > h1 {
      font-size: 10vw;
   }
}
@media (min-width: 744px) {
   .doc-root > h1 {
      font-size: 16.5vw;
   }
}
@media (min-width: 120vh) {
   .doc-root > h1 {
      font-size: 19vh;
   }
}
@media (min-width: 120vh) {
   .doc-root > h1 {
      font-size: 20vh;
      max-width: 6em;
      margin: 0 auto;
   }
}

.doc-root > h1 + p {
   position: relative;
   height: 25vh;
   display: table-cell;
   vertical-align: middle;
   margin: 0 auto;
   box-sizing: border-box;
   padding: 0 0 1.7em;
   text-align: center;
   max-width: 30.5em;
   left: 50vw;
   transform: translate(-57%, 0);
}

.doc-root > h1 + p a {
   display: inline;
}

.github-button {
   margin: 1.7em auto;
}

/* HACK: this makes the table of contents highlighting work when you click on a link in the table of contents */
section {
   margin-bottom: 1px;
}

section section:after {
   content: " ";
   display: block;
   width: 100%;
   height: calc(33vh - (1.7em * 2));
}

h2, h3 {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   margin: 0 0;
   padding: calc(1.7em *0.5) 7em calc(1.7em *0.5) 0;
   z-index: 50;
}

/* clig.dev's sticky breadcrumb is `AKER 2012:` + a heading, and on their own
   site that heading is a single word ("Help", "Output") — nowrap never had
   anything to break. This document's h3 pairs the same prefix with real
   section titles, and the worst one clips mid-word at 1200px: measured
   scrollWidth 927 against clientWidth 849, a full word cut off with no way
   for the reader to know what was there.
   Three alternatives were measured against the live page before this one:
     ellipsis            5 of 13 h3 overflow (worse than nowrap's 2)
     padding-right: 2em  2 of 13 still overflow, no improvement
     white-space: normal 0 of 13 overflow; costs 29px of extra height on
                          those same 2 headings (98px -> 127px)
   Ellipsis was rejected on purpose, not just because it measured worse:
   truncating the breadcrumb removes exactly the part that tells the reader
   which subsection they're in, which is the one thing it exists to do. 29px
   of height on 2 of 13 headings is the cheaper cost. Verified separately
   that `position: sticky` still computes and the heading still pins at top
   0 after scrolling with this change in place — wrapping text inside a
   sticky element does not itself break the sticky behaviour. */
h3 {
   white-space: normal;
}

@media (min-width: 901px) and (min-height: 800px) {
   h2, h3 {
      padding-top: calc(1.7em * 1.5);
   }
}

h2:before, h3:before {
   content: "AKER 2012: ";
}

@media (min-width: 744px) {
   h3:before {
      content: "AKER 2012:"attr(data-parent-heading)" ";
   }
}


h2:before, h3:before {
   display: inline-block;
   font-weight: 400;
   padding-right: 0.5em;
   position: relative;
   opacity: 0.5;
}

h2:after, h3:after {
   content: " ";
   position: absolute;
   top: calc(1.7em *-0.5);
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
}

h4, h5, h6 {
   padding: calc(1.7em *0.5) 0;
}

h1 a.permalink {
   display: none;
}

a.permalink::before {
   content: "#";
}

a.permalink {
   font-weight: 400;
   text-decoration: none;
   margin-left: 1em;
   opacity: 0.5;
}

@media (max-width: 900px) {
   a.permalink {
      display: none;
   }
}

a.permalink:hover,
a.permalink:focus {
   opacity: 1;
   text-decoration: none;
}

a.permalink:hover::after,
a.permalink:focus::after {
   content: " permalink ";
   font-size: 60%;
   text-transform: uppercase;
   vertical-align: middle;
}

main p,
main ol,
main ul {
   margin: 1.7em 0;
   font-weight: 400;
}

main ol li,
main ul li {
   padding-left: 2.2em;
}

main ul li {
   list-style: none;
}

main ul li:before {
   content: " ";
   position: relative;
   float: left;
   margin-left: -1.7em;
   top: 0.4em;
   width: 0.6em;
   height: 0.6em;
   border-radius: 50%;
}

main ol {
   counter-reset: ordered-list;
}

main ol > li {
   list-style: none;
   counter-increment: ordered-list;
}

main ol > li:before {
   content: counter(ordered-list)". ";
   float: left;
   min-width: 2.2em;
   margin-left: -2.2em;
}

main a {
   text-decoration: underline;
}

main strong {
   font-weight: 600;
}

h2+p, h3+p {
   margin-top: calc(1.7em *0.5);
}

code {
   font-family: 'DOC-PRE';
   padding: 0 0.25em;
}

pre {
   display: block;
   position: relative;
   width: 100%;
   box-sizing: border-box;
   margin: 7vw auto;
   padding: 2.5em 2px 2px;
   font-size: 14px;
   line-height: 1.8;
   color: white;
   border-radius: 7px;
   border: 1px solid;
}

pre code {
   display: block;
   overflow-x: auto;
   padding: 3em 3vw;
   border-radius: 1px 1px 5px 5px;
   font-weight: 400;
}

pre code strong {
   font-weight: 600;
}

@media (min-width: 744px) {
   .doc-root section p,
   .doc-root section ol,
   .doc-root section ul,
   .doc-root section pre,
   .doc-root section iframe {
      margin-left: auto;
      margin-right: auto;
      max-width: 78vw;
      position: relative;
      left: 3%;
   }
}

@media (min-width: 900px) {
   .doc-root section p,
   .doc-root section ol,
   .doc-root section ul,
   .doc-root section pre,
   .doc-root section iframe {
      max-width: 58vw;
      left: 0;
   }
}


.doc-root section iframe {
   display: block;
   margin: 0 auto!important;
   width: 100%!important;
}


body {
   color: rgba(0,0,0,1);
   background: rgba(255,255,255,1);
}
#TableOfContents {
   background: rgba(255,255,255,0.6);
}
h2:after, h3:after {
   background: rgba(255,255,255,1);
   box-shadow: 0 0 25px rgba(255,255,255,1);
}
main ul li:before {
   background: rgba(0,0,0,1);
}
code {
   background: rgba(126,126,126, 0.25);
}
pre {
   border-color: rgb(0,0,0);
}
pre code {
   color: rgb(255,255,255);
   background: rgb(0,0,0);
}
/* Table hairlines (header rule + Panel-row rule, see the .table-wrap block
   above). Opacity carries the "survives both modes" property everywhere
   else in this file, but the base colour it is applied to still has to
   flip -- a black hairline at 0.15 alpha is invisible against the pure-black
   dark background, same as `pre`'s border a few lines up. */
.doc-root .table-wrap table tr:first-child > *,
.doc-root .table-wrap table tr:has(> th[colspan]:only-child) > *,
.doc-root .table-wrap table tr:has(> th:first-child:nth-last-child(2) + td:empty[colspan]) > * {
   border-color: rgba(0,0,0,0.15);
}
@media (prefers-color-scheme: dark) {
   body {
      color: rgba(230,230,230,1);
      background: rgba(0,0,0,1);
   }
   #TableOfContents {
      background: rgba(0,0,0,0.6);
   }
   h2:after, h3:after {
      background: rgba(0,0,0,1);
      box-shadow: 0 0 25px rgba(0,0,0,1);
   }
   main ul li:before {
      background: rgba(230,230,230,1);
   }
   code {
      background: rgba(126,126,126, 0.4);
   }
   pre {
      border-color: rgba(126,126,126, 0.4);
   }
   pre code {
      background: rgba(126,126,126, 0.4);
   }
   .doc-root .table-wrap table tr:first-child > *,
   .doc-root .table-wrap table tr:has(> th[colspan]:only-child) > *,
   .doc-root .table-wrap table tr:has(> th:first-child:nth-last-child(2) + td:empty[colspan]) > * {
      border-color: rgba(255,255,255,0.2);
   }
}

a:focus, button:focus {
   color: rgb(255,255,255);
   background: rgb(31, 76, 255);
   outline: none;
   text-decoration: underline;
}

/* clig.dev has no images at all, so no rule for them exists upstream. Without
   this, a 1400px-wide figure blows straight through the reading column. */
.doc-root figure { margin: 7vw auto; }
.doc-root img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.doc-root figcaption { font-size: 85%; opacity: 0.7; padding-top: 0.8em; }

/* Table styling proper is deferred. This is containment only: without it a
   7-column regression table makes the page body itself scroll sideways, which
   is not "rough", it is broken. */
.doc-root table {
   display: block;
   overflow-x: auto;
   max-width: 100%;
   margin: 7vw auto;
   font-size: 85%;
   border-collapse: collapse;
}
.doc-root th, .doc-root td { padding: 0.35em 0.8em; text-align: left; white-space: nowrap; }

/* `html` sets font-weight: 800 — the Instrument Serif display face, sized
   for a 177px title. `main p, main ol, main ul` pull body text back to the
   400-weight iA Writer Duo face; clig.dev has no tables, so tables were
   never in that list. Measured on the live site: table cells and docling's
   caption divs (docling wraps every caption in <div class="caption">) were
   rendering DOC weight 800, i.e. the display face, at 17px — exactly the
   size a display face is worst at. Bring them to the same weight as
   paragraphs. Font only: no borders, striping, alignment or spacing here —
   that is a separate, still-open decision on deeper table work. */
.doc-root table, .doc-root th, .doc-root td, .doc-root .caption {
   font-weight: 400;
}

/* The table containment above does its job, but the page body still scrolled
   sideways (measured: scrollWidth 1391 vs innerWidth 1200 at commit babec02).
   MathML is one contributor; the rest comes from section-level overflow that
   individual element fixes (captions, permalinks, nowrap headings, the
   table-wrap divs) do not touch — measured, not guessed: none of those moved
   the number. `overflow-x: hidden` on main/section also fixes it but creates
   a scroll container, which breaks `position: sticky` on the h2/h3 heading
   prefixes — the signature of this design. `clip` contains without creating
   a scroll container, so sticky still pins. */
.doc-root section { overflow-x: clip; }
.doc-root math { max-width: 100%; }

/* Regression-table styling proper (deferred until now). Scoped to
   `.table-wrap table`, not the bare `.doc-root table` the containment rules
   above use, because this document has 10 tables and only 9 are regression
   tables: docling wraps every regression table's <caption> in a
   `.table-wrap` div, but the citation-metadata table at the top of the page
   (Citation / Original file / SHA-256 / Converter / ...) has neither a
   caption nor a wrapper -- it is two columns of prose (a DOI, a converter
   description, a SHA-256), not columns of figures. Scoping to `.table-wrap`
   keeps the numeric right-align and nowrap rules below off that table,
   where they would right-align and un-wrap long citation text instead of
   helping it.

   1+2: numeric columns right-aligned with digits on tabular widths; the
   label column (always the first cell in a row -- a real label, or a bare
   empty cell where docling split a row mid-value) is the one exception and
   is allowed to wrap. This is the single biggest readability win available:
   the label column under the containment rule's `white-space: nowrap`
   above is what makes these tables so much wider than the reading column --
   see the task report for the measured before/after. Numbers stay
   unbroken: nowrap is inherited from the `.doc-root th, .doc-root td` rule
   above, not restated here. */
.doc-root .table-wrap table tr > :first-child {
   white-space: normal;
}
.doc-root .table-wrap table tr > :not(:first-child) {
   text-align: right;
   font-variant-numeric: tabular-nums;
}

/* 4: header cells muted, not shouted. Docling never emits <thead> -- every
   row of every table lives in <tbody> -- so "the header row" is always a
   table's first <tr>, structurally, with no tag of its own to key off. */
.doc-root .table-wrap table tr:first-child > * {
   opacity: 0.6;
   font-size: 92%;
}

/* 3: rules, not zebra. A hairline under the header row, and one above any
   Panel A/B/C row, both low-opacity, no fills.
   Panel rows can't be matched on their text ("Panel A. ...") -- CSS has no
   :contains() -- so this is matched on shape instead. Measured against the
   built page (10 tables, 11 rows whose first cell reads "Panel..."): two
   shapes account for 9 of the 11 -- (a) a lone <th colspan> spanning the
   whole row (table 6's Panel A/B), and (b) a label <th> followed by exactly
   one empty <td colspan> (tables 1/2/3/9's Panel A/B). (a) has zero false
   positives anywhere in the document. (b) has 4, all inside table 1's
   worst-converted stretch, rows structurally identical to a real Panel row
   (bare label + one empty spanning cell) with no signal left for CSS to
   tell them apart -- e.g. a lone "Number of observations" row picks up a
   hairline it shouldn't. The 2 remaining real Panel rows are missed
   entirely: docling fused the Panel label into the same cell as the next
   row's data text (table 6 Panel C, table 9 Panel B). Not chased further --
   the source is what's broken here, not this selector; full counts in the
   task report. */
.doc-root .table-wrap table tr:first-child > * {
   border-bottom: 1px solid;
}
.doc-root .table-wrap table tr:has(> th[colspan]:only-child) > *,
.doc-root .table-wrap table tr:has(> th:first-child:nth-last-child(2) + td:empty[colspan]) > * {
   border-top: 1px solid;
}

/* 5: captions set apart from the data. Docling wraps every caption in
   `<div class="caption">` inside `<caption>`; before this they ran straight
   into the header row with no more space than an ordinary cell gets. */
.doc-root .table-wrap table caption {
   text-align: left;
   padding-bottom: 0.9em;
}
.doc-root .table-wrap table .caption {
   font-size: 90%;
   opacity: 0.65;
}

/* 6: empty cells (32% of table 1's, measured -- matches the task brief's
   own count) are conversion artifacts, not blanks the paper's authors
   chose. Deliberately NO rule targets them: no border, no fill, no glyph.
   Any of those would flag "something is missing here" on a cell whose row
   neighbours are just as often real data -- and inserting a placeholder
   character would be fabricating content over a cell nobody verified. The
   only safe lever left is restraint: the rules above already don't zebra
   or box individual cells, so an empty one reads as neutral whitespace,
   not as a flagged gap. */

/* Section-level clip above closes almost all of it, but at a true 375px
   viewport (measured via a same-origin iframe, since resizing a browser
   window does not move window.innerWidth) 7px of sideways scroll remained:
   documentElement.scrollWidth 382 against a 375px viewport. Isolated to
   main itself, not .doc-root section, not MathML, not the menu button.
   `main` is an ancestor of every sticky heading on the page, so `hidden`
   here would be more destructive than at the section level — a scroll
   container above every h2/h3 would silently kill sticky site-wide. `clip`
   contains without creating one; verified sticky still pins at this level. */
main { overflow-x: clip; }
