/* Reader (the case page) in the "Omloop" layout: proposal A in docs/case-page-mockups. The details card floats
   top right and the text wraps around it, then takes the full column below, like a Word document. Scoped under
   rs-reader; every class here is recorded in docs to_packages (item P12). Decimal-free like the other product
   stylesheets (px, percent): the components-only test reads every dot-token in this file as a class name.

   The passage rows keep heftdesk-ui's numbered-row classes; only their geometry changes here. heftdesk-ui makes
   a row a grid, and a grid is its own block formatting context: it never flows around a float, so a long row
   beside the card stayed a narrow column for its whole height and left an empty strip under the card (one huge
   unnumbered head passage makes that most of the page). Here a row is a plain block, the number sits absolutely
   in a left gutter, and the row's lines wrap around the card and widen below it. */

.rs-reader { max-width: 1000px; margin-inline: auto; }

.rs-reader__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
.rs-reader__head-main { flex: 1 1 520px; min-width: 0; }
.rs-reader__title { text-wrap: balance; max-width: 44ch; }

/* The full inhoudsindicatie under the short title: two lines, "more" opens the rest. */
.rs-reader__summary { margin-top: 12px; font-size: 15px; line-height: 160%; color: color-mix(in oklch, var(--color-base-content) 85%, transparent); }
.rs-reader__summary-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-reader__summary--open .rs-reader__summary-text { display: block; -webkit-line-clamp: unset; }
.rs-reader__more { border: 0; background: none; padding: 0; margin-top: 2px; cursor: pointer; font-size: 14px; color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

.rs-reader__doc { margin-top: 22px; font-size: 17px; line-height: 170%; }
.rs-reader__card { float: right; width: min(300px, 100%); margin: 0 0 18px 28px; }
.rs-reader__card .dl-grid { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }

.rs-reader .numbered-row { display: block; position: relative; padding: 4px 8px 4px 60px; }
.rs-reader .numbered-row p { margin: 0 0 8px; }
.rs-reader .numbered-row p:last-child { margin-bottom: 0; }
.rs-reader .numbered-row__num { position: absolute; left: 8px; top: 4px; width: 42px; text-align: right; padding-top: 4px; font-size: 12px; }
/* Copy and link float above the paragraph on hover instead of taking a grid row of their own (the third child
   of a two-column grid used to wrap onto a new row and leave a gap under every paragraph). Left, not right: a
   row's box runs under the floated card, so a right-hand bar would sit on top of the card. */
.rs-reader .numbered-row__actions { position: absolute; top: -14px; left: 4px; z-index: 1; display: inline-flex; gap: 2px; background: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: var(--radius-field); }
@media (hover: none) { .rs-reader .numbered-row__actions { position: static; display: flex; width: fit-content; margin: 4px 0 0 auto; visibility: visible; } }

.rs-reader__rel { clear: both; margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--color-base-300); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; font-size: 14px; line-height: 150%; }

@media (max-width: 700px) {
  .rs-reader__card { float: none; width: 100%; margin: 0 0 18px; }
  .rs-reader .numbered-row { padding-left: 46px; }
  .rs-reader .numbered-row__num { width: 30px; }
}

@media print {
  .rs-reader__card { float: none; width: 100%; margin: 0 0 18px; }
  .rs-reader__summary-text { display: block; -webkit-line-clamp: unset; }
}