/* =============================================================================
   Opsy website — a quarterly report: the page in the window, and its paper.

   A report is the live arrangement in the new skin: a cover one window tall
   with the quarter, the title and three figures, then the report's sections
   -- plain, `fancy` (a large headline over text in columns) and `small`
   (the notes) -- its tables across the page, the calendar and the contact.
   The same page is what the team prints the PDF from, so the last section
   here, Paper, sets it on A4: today's sheets, in the same skin.

   Flat plain CSS on the kit's tokens, `op-` prefix, as css/site.css. The
   cover stands in the home hero's column (css/home.css) and a figure card is
   the Säkerhet page's card (css/security.css), both used as they stand.

   A report's body is the team's Markdown. Its sections, tables, chart and
   page breaks come from the site's shortcodes and macros, and it carries
   some HTML of its own, so that markup arrives with the names it has always
   had (.report-section, .rs-title, .table__cell, .timeline, a handful of
   utility names). Those are dressed here from under the report's wrapper,
   as the article's text reaches the quote shortcode (css/news.css, .quote):
   the team writes the next report exactly as it wrote the last.
   Spec: docs/specs/2026-10-07-website-report-pages.md
   ========================================================================== */

.op-report {
  /* The column of running text: the one width of every description on the
     site (css/home.css, .op-intro__lead). */
  --op-report-col: 800px;
  /* A card's padding and the gap between two cards: the card reads them
     (css/security.css, .op-topic). Bli kund's values, where the cards also
     hold a number (css/customer.css, .op-gains). */
  --op-card-pad: var(--space-6);
  --op-card-gap: var(--space-6);
}
/* A jump inside the page -- Läs rapporten, to the summary -- stops clear of
   the header, which stays at the window's top (css/site.css, Header). */
.op-report [id] {
  scroll-margin-top: calc(var(--op-header-h) + var(--space-6));
}

/* --- The cover ---------------------------------------------------------------- */
/* One window tall under the header: the title block in the middle of the
   room that is left, the three figures along the bottom, the way down under
   them. 64px above, as an opening has (css/home.css, Opening); the section
   step under it, to the first section.
   Its ground is the cover sheet's, from the header down and edge to edge,
   so the first screen and the first sheet are one cover -- the user's
   ruling, on seeing the two side by side. A flat mint: a primitive, the
   tone of the site's panels (css/home.css, .op-flow), and the user's pick
   by eye of three printed covers (the others: the footer's deep teal with
   white type, the old cover's gradient). */
.op-report__cover {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--op-header-h));
  margin-bottom: var(--op-space-section);
  padding-block: calc(var(--space-8) * 2) var(--space-8);
  background: var(--genoa-100);
}
/* The hero's centred column (css/home.css, .op-hero__inner), grown to the
   room above the figures. */
.op-report__head {
  flex: 1;
  justify-content: center;
}
/* The quarter: the hero pill's metrics (css/home.css, .op-hero__listing),
   without its dot -- there the dot says the share is listed and live. On
   the mint ground it is one step deeper than the hero's, or it would not
   show; a primitive, the kit having no alias for that step. Its border
   stays, in the fill's tone: forced-colors mode drops a fill and paints a
   border. */
.op-report__quarter {
  padding: var(--space-1-5) var(--space-3-5);
  border: 1px solid var(--genoa-200);
  border-radius: var(--radius-full);
  background: var(--genoa-200);
  color: var(--brand-action);
}
/* The three figures: the home page's number row (css/home.css, .op-stat) --
   its columns and its highlight under a number -- in the order the report
   gives them: what it is, the figure, one line about it. The first of the
   three is a quote and has no figure. No line between them, where the
   number row has one: the cover sheet has none, and this is that cover. */
.op-report__figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.op-report__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-5);
  text-align: center;
}
/* The highlight: one step deeper than the ground it stands on, as the
   pill. */
.op-report__figure-value {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--genoa-200);
  color: var(--brand-primary);
  white-space: nowrap;
}
/* Läs rapporten: the text link, padded to a 32px row as a footer link is.
   The arrow before it is the live page's own, and stays bare: only the
   label is underlined. It stands still -- the site's one motion outside the
   flow is the closing panel's dot. */
.op-report__more {
  margin-top: var(--space-8);
  text-align: center;
}
.op-report__more .op-link {
  display: inline-block;
  padding-block: var(--space-1-5);
}
.op-report__more .op-link::before {
  content: "↓";
  margin-right: var(--space-2);
}

/* --- A section ------------------------------------------------------------------ */
/* The section step under each, so the next one starts a section away. Its
   two parts -- the heading block and the content -- take the page's own
   measure (css/site.css, .op-wrap), said again: the shortcode writes them
   and cannot be given the class. */
.op-report .report-section {
  padding-bottom: var(--op-space-section);
}
.op-report .rs-title-wrapper,
.op-report .rs-content {
  width: min(100% - var(--space-6) * 2, 1180px);
  margin-inline: auto;
}
/* A plain section: its heading and lead centred over its content, as the
   live page has them and as the paper does -- the one place on the site
   where a section is not left-aligned, kept with the arrangement. The intro
   step under the block, 16px inside it (css/home.css, .op-intro). */
.op-report .rs-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--op-space-intro);
  text-align: center;
}
/* heading-h2 and, for the lead, body-lg in the secondary ink: the kit's
   values, said again. */
.op-report .rs-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: var(--lh-snug);
}
.op-report .rs-description {
  max-width: var(--op-report-col);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
/* A section with more than one block of content -- the summary's lists, its
   cards, its table: the intro step between them. */
.op-report .report-section > .rs-content ~ .rs-content {
  margin-top: var(--op-space-intro);
}

/* `fancy`: a headline at heading-h1's size on the left edge, its text in
   three columns under it. The kit sets its h1 solid, for a title of one
   line; these run to three, and take the snug line height (as an article's
   headline, css/news.css). 64px between columns. */
.op-report .-fancy .rs-title-wrapper,
.op-report .-small .rs-title-wrapper {
  align-items: flex-start;
  text-align: left;
}
.op-report .-fancy .rs-title {
  max-width: 20em;
  font-size: 48px;
}
.op-report .-fancy .rs-content {
  columns: 3;
  column-gap: calc(var(--space-8) * 2);
}
/* `small`: the notes, in body-sm, three columns. */
.op-report .-small .rs-content {
  columns: 3;
  column-gap: var(--space-10);
  font-size: 14px;
}

/* --- A section's text ------------------------------------------------------------ */
/* Markdown: bare elements, styled from the content block. The values are the
   article text's (css/news.css, .op-prose) at body-md: 20px between two
   blocks, 32px over a sub-heading and 12px under it. The element rules
   weigh nothing (:where), so a kit class on a heading inside a card wins
   without a fight. */
.op-report .rs-content {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}
.op-report .rs-content > * + * {
  margin-top: var(--space-5);
}
/* heading-h4's values for a sub-heading, subhead's for the level under it.
   The deep teal is the page's heading ink (css/site.css), which stops at
   h3. A heading stays with the text it heads when a column breaks. */
:where(.op-report .rs-content) h3,
:where(.op-report .rs-content) h4 {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  break-after: avoid;
}
:where(.op-report .rs-content) h3 {
  font-weight: 600;
  font-size: 20px;
}
:where(.op-report .rs-content) h4 {
  margin: 0;
  font-weight: 500;
  font-size: 18px;
  color: var(--genoa-950);
}
.op-report .rs-content > * + h3 {
  margin-top: var(--space-8);
}
.op-report .rs-content > h3 + * {
  margin-top: var(--space-3);
}
.op-report .rs-content > * + h4 {
  margin-top: var(--space-6);
}
.op-report .rs-content > h4 + * {
  margin-top: var(--space-2);
}
/* The notes: one step down each. */
:where(.op-report .-small .rs-content) h3 {
  font-size: 16px;
}
:where(.op-report .-small .rs-content) h4 {
  font-size: 14px;
}
/* In a plain section the text stands in a column in the middle of the page;
   a table, a chart or a row of cards keeps the page's width. A list the
   layout draws carries a class and sets its own width. */
.op-report .report-section:not(.-fancy):not(.-small) > .rs-content > :where(p, h3, h4, ul:not([class]), ol:not([class])) {
  max-width: var(--op-report-col);
  margin-inline: auto;
}
/* The kit's bold is semibold. */
:where(.op-report .rs-content) strong {
  font-weight: 600;
}
/* A link in running text is underlined whole (css/news.css, .op-prose a). */
:where(.op-report .rs-content) a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  transition: color var(--motion-fast) var(--ease-standard);
}
:where(.op-report .rs-content) a:hover {
  color: var(--brand-action-hover);
  text-decoration-thickness: 2px;
}
:where(.op-report .rs-content) a:active {
  color: var(--brand-action-pressed);
}
/* The page takes bullets and numbers off every list (css/site.css, Page); a
   list in running text gets them back. */
:where(.op-report .rs-content) ul:not([class]),
:where(.op-report .rs-content) ol:not([class]) {
  padding-left: var(--space-6);
}
:where(.op-report .rs-content) ul:not([class]) {
  list-style: disc;
}
:where(.op-report .rs-content) ol:not([class]) {
  list-style: decimal;
}
:where(.op-report .rs-content) :where(ul, ol):not([class]) > li + li {
  margin-top: var(--space-2);
}
:where(.op-report .rs-content) :where(ul, ol):not([class]) > li::marker {
  color: var(--brand-action);
}
/* A picture fills its column, on the card's corner; the signature keeps its
   own size and has none. */
:where(.op-report .rs-content) img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.op-report .arne-sign {
  width: auto;
  border-radius: 0;
}
/* The marks the team sets for the paper's page and column breaks: nothing
   in the window. */
.op-report .report-pagebreak,
.op-report .report-columnbreak {
  display: none;
}

/* --- The body's own class names ---------------------------------------------------- */
/* The reports' HTML -- the signatures, the headings over the statements, the
   two columns of events -- is laid out with these utility names from the old
   stylesheet. Only the ones the six reports use are here, each with the
   value it had. The three that set a gap name the content block too: a
   gap the team asked for by name outweighs the text's own rhythm, in the
   window and on paper alike. */
.op-report .text-center {
  text-align: center;
}
.op-report .font-bold {
  font-weight: 600;
}
.op-report .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* Where the content block is itself the grid -- the two columns of events --
   its gap is the space between them, and the text's own 20px between two
   blocks would set the second column lower than the first. */
.op-report .rs-content.grid > * + * {
  margin-top: 0;
}
.op-report .gap-8 {
  gap: var(--space-8);
}
.op-report .gap-12 {
  gap: calc(var(--space-6) * 2);
}
.op-report .rs-content .mt-2 {
  margin-top: var(--space-2);
}
.op-report .rs-content .mt-8 {
  margin-top: var(--space-8);
}
.op-report .rs-content .mb-8 {
  margin-bottom: var(--space-8);
}
/* Their own widths, not the page's: a name says from where it holds. */
@media (min-width: 640px) {
  .op-report .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .op-report .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Cards ------------------------------------------------------------------------ */
/* Three across: the summary's figures, and in the two oldest reports the
   I korthet cards. The card is the Säkerhet page's, as it stands; there its
   ground comes from its place in a checkerboard, here every card holds a
   figure and is mint, as Bli kund's number card (css/customer.css). This
   rule weighs the same as the checkerboard's and comes after it, this
   stylesheet being loaded last. */
.op-report__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--op-card-gap);
}
.op-report .op-topic {
  background: var(--genoa-100);
}
/* A figure: the largest type on the card, in the brand's deep teal, its
   sign and unit kept on its line. */
.op-report__card-value {
  color: var(--brand-primary);
  white-space: nowrap;
}
/* I korthet: the arrow stands at the far end of the card's label. Up and
   down take the status inks; the line under the figure says the same in
   words, so the colour is never alone. */
.op-report__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.op-report__dir {
  font-size: 20px;
  line-height: 1;
}
.op-report__dir--up {
  color: var(--status-success-text);
}
.op-report__dir--down {
  color: var(--status-danger-text);
}
/* The summary's two lists side by side, a sub-heading over each; a report
   with one list has it in the text's column. */
.op-report__lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}
.op-report__lists--one {
  grid-template-columns: minmax(0, var(--op-report-col));
  justify-content: center;
}
.op-report__lists h3 + ul {
  margin-top: var(--space-3);
}
/* The three cards of an old report's body, written there as HTML: the card
   again -- its padding, its corner -- on the Säkerhet page's grey, since
   they hold text and no figure. 12px from title to text, as in the card. */
.op-report .ghost-card__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--op-card-gap);
}
.op-report .ghost-card {
  padding: var(--op-card-pad);
  border-radius: var(--radius-lg);
  background: var(--submarine-100);
}
.op-report .ghost-card > * + * {
  margin-top: var(--space-3);
}

/* --- A table ---------------------------------------------------------------------- */
/* Across the page, from the site's table macro. Fine lines under its rows
   and figures in digits of one width, as an article's table (css/news.css);
   the head row is plain, in label-md, over a firmer line. The columns of the
   period the report is about stand on a mint ground from head to foot. A
   sum is semibold over a firmer line; a title row is semibold. A row is not
   a control, so nothing answers the pointer. When the window is narrower
   than the table, the table scrolls sideways in its own box and the page
   stays put. */
.op-report .table__container {
  overflow-x: auto;
}
.op-report .rs-content > .table__container + * {
  margin-top: var(--op-space-intro);
}
.op-report .table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.op-report .table__cell {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: bottom;
}
/* A figure keeps to one line and to the right edge of its column. */
.op-report .table__cell:not(:first-child) {
  text-align: right;
}
.op-report .table__cell:not(:first-child):not(.-header) {
  white-space: pre;
}
.op-report .table__cell.-header {
  border-bottom-color: var(--border-default);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: var(--lh-snug);
}
/* The brand's own mint, the kit's faintest (--genoa-50): one step lighter
   than the cards and the cover. The user's ruling, having seen the columns
   on the cards' mint too (docs/specs/2026-10-07-website-report-pages.md,
   Rev 4 and Rev 5). In the window and on paper alike. */
.op-report .table__cell.-highlight {
  background: var(--brand-bg);
}
.op-report .table__row.-title,
.op-report .table__row.-sum {
  font-weight: 600;
}
.op-report .table__row.-sum > .table__cell {
  border-top: 1px solid var(--border-default);
}

/* --- The chart -------------------------------------------------------------------- */
/* The team's script draws it on this canvas and reads its size from here:
   the column's width, 240px tall, as it was. It keeps the script's own
   green. It never straddles two columns. */
.op-report .graph__container {
  break-inside: avoid;
}
.op-report .graph__canvas {
  width: 100%;
  height: 240px;
}

/* --- The timeline and the ticked list ------------------------------------------------ */
/* In the two oldest reports. A timeline: a fine line down the left with a
   dot at each event, the date in label-sm over its text. The line and the
   dots are primitives: a soft mint and the action teal, as a list's
   markers. */
.op-report .timeline {
  position: relative;
  margin-top: var(--space-4);
  margin-left: var(--space-1-5);
  padding-left: var(--space-6);
  border-left: 2px solid var(--genoa-200);
}
.op-report .timeline__item + .timeline__item {
  margin-top: var(--space-6);
}
.op-report .timeline__marker {
  position: absolute;
  left: -7px;
  width: 12px;
  height: 12px;
  margin-top: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--brand-action);
}
.op-report .timeline__date {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  line-height: var(--lh-snug);
}
.op-report .timeline__date + .timeline__body {
  margin-top: var(--space-1);
}
/* A ticked list: the live page's tick, in the action teal. */
.op-report .checklist li {
  position: relative;
  padding-left: var(--space-6);
}
.op-report .checklist li + li {
  margin-top: var(--space-2);
}
.op-report .checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 600;
  color: var(--brand-action);
}

/* --- The calendar and the contact --------------------------------------------------- */
/* Finansiell kalender: a row per date, what is published on the left and
   its date on the right, a fine line between rows and none above the first
   (css/news.css, The list). In the text's column. */
.op-report__dates,
.op-report__about {
  max-width: var(--op-report-col);
  margin-inline: auto;
}
.op-report__date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
}
.op-report__date + .op-report__date {
  border-top: 1px solid var(--border-subtle);
}
.op-report__date-text {
  font-weight: 500;
}
.op-report__date-day {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Kontakt: the company's standing lines under the contact, in body-sm.
   Upright: the kit ships no italic. */
.op-report__about {
  font-size: 14px;
}
.op-report__about > * + * {
  margin-top: var(--space-3);
}
.op-report__about-title {
  font-weight: 600;
}

/* --- Narrow ----------------------------------------------------------------------- */
/* As on the other pages: no phone design pass, the page only stacks
   sensibly. These are for a window and say so (`screen`): a sheet of A4 is
   694px wide between its margins, and a bare width query would hand the
   paper a phone's layout. */
@media screen and (max-width: 960px) {
  .op-report .-fancy .rs-content,
  .op-report .-small .rs-content {
    columns: 2;
  }
  /* The headline at heading-h2's size. */
  .op-report .-fancy .rs-title {
    font-size: 32px;
  }
}
@media screen and (max-width: 720px) {
  /* The cover is as tall as what it holds, and needs no way down. */
  .op-report__cover {
    min-height: 0;
  }
  .op-report__more {
    display: none;
  }
  /* The three figures one under the other, with room between. */
  .op-report__figures {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-8);
    margin-top: var(--space-8);
  }
  .op-report__cards,
  .op-report__lists,
  .op-report .ghost-card__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .op-report .-fancy .rs-content,
  .op-report .-small .rs-content {
    columns: 1;
  }
  /* A table at body-sm with closer cells; its first column keeps room for
     its words while the figures scroll. */
  .op-report .table {
    font-size: 14px;
  }
  .op-report .table__cell {
    padding: var(--space-2) var(--space-3);
  }
  .op-report .table__cell:first-child {
    min-width: 160px;
  }
}

/* --- Paper ------------------------------------------------------------------------ */
/* What the team prints the PDF from: Chrome's Print on this page. Today's
   sheets in the new skin -- the cover as sheet one, edge to edge; from sheet
   two a foot with the wordmark, the report's name and the page count; text
   in two columns. The measures are the old paper's, said again in points:
   the team places a report's page breaks by hand against them, so a size
   changed here moves every break after it. They were read off the old page
   as the browser computed it, not off its stylesheets (the site's
   src/css/print.css, src/css/reports.css): there a later rule often
   overrides the one that looks in charge -- the text is 10pt where the file
   says 12pt, a section's gap 72pt where it says 40pt. Print the newest
   report after any change to this section.

   A sheet is 694px wide between its margins. The new stylesheets' narrow
   rules for 960px and 720px therefore hold on paper too; what they stack
   and the paper needs side by side is set again here. */
@media print {
  @page {
    size: A4;
    margin: 1.9cm 1.32cm 3.67cm;
  }
  /* The cover has no margin and so no foot. */
  @page :first {
    margin: 0;

    @bottom-left {
      content: "";
    }
    @bottom-right {
      content: "";
    }
  }
  /* The foot. Its middle, the report's name, is the layout's own line
     (layouts/report.njk in the site repo): it differs per report. The
     wordmark is the kit's file as drawn -- a page's margin cannot recolour a
     picture -- behind a word nobody sees, which is what a reader of the
     PDF's text gets for it. The greys are primitives: this is the sheet's
     furniture, not text that is read, and the secondary ink has its two
     jobs (css/site.css). */
  @page {
    @bottom-left {
      content: "Opsy";
      font-family: var(--font-body);
      color: transparent;
      background: url("../kit/opsy-wordmark.svg") left 0 bottom 1.5cm / 1.9cm auto no-repeat;
    }
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font-family: var(--font-body);
      font-size: 12pt;
      color: var(--submarine-800);
    }
  }

  /* Grounds and tints print without the dialog's Background graphics tick. */
  .op-page {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* The site's frame and the page's two controls stay in the window. */
  .op-header,
  .op-footer,
  .op-report__more,
  .op-report__head .op-hero__actions {
    display: none;
  }

  /* The cover: one sheet. Its ground, its pill and its figures' highlight
     are the window's (The cover, above). The wordmark at its top, which the
     window has in its header, is the kit's file as drawn: laid on as a
     mask, to take its ink from a token, it printed with a hairline at the
     mask's edge. The title at the old cover's 45pt, the figures at 27pt. */
  .op-report__cover {
    height: 100vh;
    min-height: 0;
    margin-bottom: 0;
    padding-block: 40px 0;
  }
  .op-report__cover::before {
    content: "";
    flex: none;
    height: 25px;
    margin-top: 10px;
    background: url("../kit/opsy-wordmark.svg") center / contain no-repeat;
  }
  .op-report__head .op-display {
    font-size: 45pt;
  }
  /* 32px from the sheet's edge to the figures, the old cover's: 8px here on
     top of the page's own 24px (css/site.css, .op-wrap). */
  .op-report__figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
    padding: 0 var(--space-2) calc(var(--space-6) * 2);
  }
  /* 8px at a figure's sides, the old cover's: at the window's 20px its line
     broke after two words. */
  .op-report__figure {
    padding-inline: var(--space-2);
  }
  .op-report__figure-value {
    font-size: 27pt;
  }

  /* A section: 72pt under it, and kept on one sheet where it fits. */
  .op-report .report-section {
    margin-bottom: 72pt;
    padding-bottom: 0;
    break-inside: avoid;
  }
  .op-report .rs-title-wrapper {
    gap: 6pt;
    margin-bottom: 36pt;
  }
  .op-report .rs-title {
    font-size: 22.5pt;
  }
  .op-report .rs-description {
    font-size: 10pt;
    line-height: 16.25pt;
  }
  .op-report .report-section > .rs-content ~ .rs-content {
    margin-top: 18pt;
  }
  /* `fancy`: 48pt of air over the headline, the headline at 36pt, its text
     in two columns. */
  .op-report .-fancy .rs-title-wrapper {
    gap: 12pt;
    margin-bottom: 24pt;
    padding-top: 48pt;
  }
  .op-report .-fancy .rs-title {
    font-size: 36pt;
    letter-spacing: -0.025em;
  }
  .op-report .-fancy .rs-description {
    font-size: 15pt;
    line-height: 21pt;
  }
  .op-report .-fancy .rs-content {
    columns: 2;
    column-gap: 24pt;
  }
  /* `small`: one column of 9pt. */
  .op-report .-small .rs-title-wrapper {
    margin-bottom: 18pt;
  }
  .op-report .-small .rs-title {
    font-size: 18pt;
  }
  .op-report .-small .rs-content {
    columns: 1;
    font-size: 9pt;
    line-height: 12pt;
  }

  /* The text: 10pt on 18pt. 12pt between two blocks, 24pt over a
     sub-heading and 6pt under it, 18pt under a list. */
  .op-report .rs-content {
    font-size: 10pt;
    line-height: 18pt;
  }
  .op-report .rs-content > * + * {
    margin-top: 12pt;
  }
  .op-report .rs-content > * + h3 {
    margin-top: 24pt;
  }
  .op-report .rs-content > h3 + * {
    margin-top: 6pt;
  }
  .op-report .rs-content > * + h4 {
    margin-top: 12pt;
  }
  .op-report .rs-content > h4 + * {
    margin-top: 0;
  }
  .op-report .rs-content > :where(ul, ol):not([class]) + * {
    margin-top: 18pt;
  }
  /* The notes: 18pt between two paragraphs and over a heading of the second
     level, 3pt under one. After the rules above, which they override at
     equal weight. */
  .op-report .-small .rs-content > * + *,
  .op-report .-small .rs-content > * + h4 {
    margin-top: 18pt;
  }
  .op-report .-small .rs-content > * + h3 {
    margin-top: 24pt;
  }
  .op-report .-small .rs-content > h3 + * {
    margin-top: 6pt;
  }
  .op-report .-small .rs-content > h4 + * {
    margin-top: 3pt;
  }
  :where(.op-report .rs-content) h3,
  :where(.op-report .rs-content) h4 {
    font-size: 13.5pt;
  }
  /* The notes' two levels, after the text's, which they override at equal
     weight. */
  :where(.op-report .-small .rs-content) h3 {
    font-size: 12pt;
  }
  :where(.op-report .-small .rs-content) h4 {
    font-size: 10.5pt;
  }
  :where(.op-report .rs-content) ul:not([class]),
  :where(.op-report .rs-content) ol:not([class]) {
    padding-left: 15pt;
  }
  :where(.op-report .rs-content) :where(ul, ol):not([class]) > li + li {
    margin-top: 3pt;
  }

  /* The team's breaks. What follows one starts at the top of its sheet or
     column: the gap that stood between two blocks has nothing to stand
     between. After a page break a sub-heading keeps its own, as it always
     has, unless the team took it off by name; after a column break it does
     not, so two columns start level. */
  .op-report .report-pagebreak,
  .op-report .report-columnbreak {
    display: block;
  }
  .op-report .report-pagebreak {
    break-after: page;
  }
  .op-report .report-columnbreak {
    break-after: column;
  }
  .op-report .rs-content > .report-pagebreak + :not(h3):not(h4),
  .op-report .rs-content > .report-columnbreak + * {
    margin-top: 0;
  }
  .op-report .rs-content > .mt-0,
  .op-report .rs-content > .\!mt-0 {
    margin-top: 0;
  }
  /* A chart with a column break set right after it starts a column of its
     own: it then stands beside the paragraph that introduces it, and what
     follows the break starts the next sheet. On the old sheets the browser
     arrived at that by evening out the two columns before the break; here
     it is said. A chart with no break after it stays in the run of the
     text. */
  .op-report .rs-content > div:has(> .graph__container):has(+ .report-columnbreak) {
    break-before: column;
  }
  /* The chart's script writes the canvas's window size onto it, and nothing
     tells it the page is being printed: a canvas 1180px wide then stands on
     a sheet 646px wide, and the browser shrinks every sheet of the report to
     fit it. So on paper the canvas is held to its column over the script's
     own figures, which is what `!important` is for here. */
  .op-report .graph__canvas {
    width: 100% !important;
    height: 240px !important;
  }
  /* A heading over a statement: 12pt, by the name the team gave it. */
  .op-report .print\:\!text-base {
    font-size: 12pt;
  }

  /* The summary: its lists at 9pt on 12pt, its cards closer and smaller. */
  .op-report__lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    font-size: 9pt;
    line-height: 12pt;
  }
  .op-report__lists .heading-h4 {
    font-size: 10.5pt;
  }
  .op-report__lists h3 + ul {
    margin-top: 3pt;
  }
  .op-report__cards,
  .op-report .ghost-card__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .op-report {
    --op-card-pad: 9pt;
  }
  .op-report .op-topic__body {
    gap: 3pt;
  }
  .op-report .op-topic .label-md,
  .op-report .op-topic .body-md,
  .op-report .op-topic .body-sm {
    font-size: 9pt;
  }
  .op-report__card-value {
    font-size: 13.5pt;
  }

  /* A table: 9pt on 12pt with 3pt in a cell, its outer columns flush with
     the sheet's text. No line under a row -- the old sheets had none, and
     the kit's faintest line does not hold on paper -- so the head row's and
     a sum's are the two that remain. */
  .op-report .table {
    font-size: 9pt;
    line-height: 12pt;
  }
  .op-report .table__cell {
    padding: 3pt;
    border-bottom-color: transparent;
  }
  .op-report .table__cell:first-child {
    min-width: 0;
    padding-left: 0;
  }
  .op-report .table__cell.-header {
    border-bottom-color: var(--border-default);
    font-size: 9pt;
  }
  .op-report .rs-content > .table__container + * {
    margin-top: 36pt;
  }

  /* The calendar's rows a little closer. */
  .op-report__date {
    padding-block: 9pt;
  }
  .op-report__about {
    font-size: 10.5pt;
    line-height: 15pt;
  }
}