/* Paylucent v2 — prose.css   (THE-83, montaje)
 *
 * The pages that are allowed to carry text: the three directive guides, /privacy and /404.
 * The home is not allowed to (Design Bar v2: ~120 visible words); these are, and that is the
 * only difference. Same tokens, same two typefaces, same warm paper ground, same header and
 * footer as the home — so a guide page and the home cannot drift into two brand worlds.
 *
 * Loaded third, after tokens.css and blocks.css. Everything the shell needs — `body`, the
 * skip link, `.pl-head`, `.pl-btn`, the focus ring, the font faces — is blocks.css's and is
 * NOT repeated here. This file only adds what a long text page needs that the home does not:
 * a title band, an on-this-page index, a measure for body copy, hairline tables, the source
 * notes, the FAQ and the end CTA.
 *
 * Why it also styles the footer: `build-seo/head.mjs:foot()` emits one footer
 * (`.site-footer` / `.foot-nav` / `.foot-line` / `.foot-fine`) for all six pages, including
 * the home, so the legal line from the `legal-pages` skill exists in exactly one place.
 * `.pl-foot` in blocks.css is the home's old footer and is no longer emitted.
 *
 * Not a hex in the file. Checked: `grep -cE '#[0-9A-Fa-f]{3,8}' prose.css` → 0.
 * The class names (`.wrap`, `.page-head`, `.lead`, `.article-grid`, `.toc`, `.prose`,
 * `.source`, `.faq`, `.closing`, `.hl`, `.t`) are the ones already in the published guide
 * bodies. Keeping them is deliberate: the <main> of each guide is carried over byte for byte
 * by pages.mjs, because rewriting a quotation of Directive (EU) 2023/970 to fit a new layout
 * is not a redesign. The brand world changes around the text, not the text.
 */

/* ------------------------------------------------------------------ the page shell */

/* On the home the wordmark points at #main (you are already there). On a text page it is
 * the way back, so it gets the usual link affordance on hover and nothing else. */
.pl-head--doc .pl-wordmark:hover { text-decoration: underline; }
.pl-head--doc .pl-nav a[aria-current='page'] {
  color: var(--ink-900);
  box-shadow: inset 0 -1px 0 0 var(--signal-700);
}

.wrap {
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------------- the title band
 *
 * Its own band above the grid, not the first thing inside the text column. The index is a
 * bordered box on a phone, and a box between the breadcrumb and the <h1> pushes the title
 * of the page below the fold. Title first, then the index, then the text.
 */
.page-head {
  padding-block: clamp(40px, 6vw, 76px) 0;
  border-bottom: 1px solid var(--rule-100);
  padding-bottom: clamp(28px, 4vw, 44px);
}
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  /* Not the home's display size. That headline is four words with room to be huge; these are
   * sentences that have to name a directive, and at the hero size they ran to five lines. */
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0;
  max-width: 26ch;
}
.page-head .lead {
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  color: var(--ink-600);
  max-width: 54ch;
}
.page-head .crumbs {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--ink-400);
}
.page-head .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-head .crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--rule-200); }
.page-head .crumbs a { color: var(--ink-600); text-decoration: none; }
.page-head .crumbs a:hover { color: var(--ink-900); text-decoration: underline; }

/* ----------------------------------------------------------------------- the grid */

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 44px);
  padding-block: clamp(32px, 4vw, 52px) clamp(64px, 8vw, 104px);
}
@media (min-width: 1000px) {
  .article-grid {
    grid-template-columns: 208px minmax(0, 1fr);
    gap: clamp(44px, 5vw, 80px);
    align-items: start;
  }
}

/* ------------------------------------------------------------- on this page (the rail)
 *
 * Hairline per entry, small caps heading, sticky on a desktop. Below 1000px it stops being
 * a rail and becomes a bordered box above the text — not a <details>, because a disclosure
 * only JS can open would hide the whole index on a no-JS phone, and seven links are cheaper
 * than that risk.
 */
.toc { font-size: 14.5px; }
@media (min-width: 1000px) {
  .toc {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}
.toc > p {
  margin: 0 0 12px;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  /* ink-600, not ink-400: tokens.css only asserts ink-400 against paper-000 and
   * never under 14px. This label sits at 11.5px on the tinted panel, where the
   * approved pair is ink-600 on paper-050. */
  color: var(--ink-600);
}
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { border-top: 1px solid var(--rule-100); }
.toc li:last-child { border-bottom: 1px solid var(--rule-100); }
.toc a {
  display: block;
  padding: 10px 0 10px 12px;
  color: var(--ink-600);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.toc a:hover { color: var(--ink-900); border-left-color: var(--signal-700); }
@media (max-width: 999px) {
  .toc {
    border: 1px solid var(--rule-100);
    background: var(--paper-050);
    padding: 16px 18px;
  }
  .toc li:first-child { border-top: 0; }
  .toc li:last-child { border-bottom: 0; }
  .toc a { padding-block: 7px; }
}

/* ------------------------------------------------------------------------ the text */

.prose, .privacy-page { min-width: 0; }

.prose h2, .privacy-page h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(25px, 2.4vw, 33px);
  line-height: 1.12;
  letter-spacing: -0.008em;
  margin: clamp(44px, 5vw, 64px) 0 16px;
  scroll-margin-top: 24px;
}
/* The one editorial tic the text pages share with the home: a short accent rule above a
 * heading. On the home it is the figcaption's left rule; here it is a 28px rule above. */
.prose h2::before, .privacy-page h2::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 18px;
  background: var(--signal-700);
}
.prose > section:first-of-type h2 { margin-top: 0; }
.prose h3, .privacy-page h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  margin: 32px 0 10px;
}

.prose p, .privacy-page p, .prose li, .privacy-page li {
  max-width: 68ch;
  line-height: 1.62;
}
.prose p, .privacy-page p { margin: 0 0 16px; }
.prose ul, .prose ol, .privacy-page ul, .privacy-page ol { padding-left: 22px; margin: 0 0 18px; }
.prose li, .privacy-page li { margin-bottom: 7px; }
.prose li::marker, .privacy-page li::marker { color: var(--rule-200); }

.prose a, .privacy-page a {
  color: var(--signal-700);
  text-decoration-color: var(--signal-100);
}
.prose a:hover, .privacy-page a:hover { text-decoration-color: var(--signal-700); }
/* `.prose a` is two selectors deep and would otherwise beat `.pl-btn`, repainting the blue
 * fill's label in blue-on-blue. The home never hits this because it has no `.prose`. */
.prose a.pl-btn, .privacy-page a.pl-btn { color: var(--paper-000); text-decoration: none; }

.small, .muted { font-size: 14.5px; color: var(--ink-600); }
.prose .small, .prose .muted { max-width: 68ch; }

/* --------------------------------------------------------------- the source notes
 *
 * These pages exist to repeat Directive (EU) 2023/970 and link to EUR-Lex, so the citation
 * is a visible object rather than a parenthesis: an accent hairline on the left, the text
 * one step quieter than the body. Same device as the home's figcaption, at text scale.
 */
.source {
  margin: 0 0 24px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--signal-700);
  max-width: 68ch;
}
.source p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-600); }

/* A pull quote of the directive's own words, where a page has one. */
.prose blockquote {
  margin: 24px 0 26px;
  padding: 20px 22px;
  background: var(--paper-050);
  border-left: 2px solid var(--rule-200);
  max-width: 68ch;
}
.prose blockquote p { margin: 0; font-size: 18px; line-height: 1.5; }
.prose blockquote p + p { margin-top: 12px; }

/* ------------------------------------------------------------------- the tables
 *
 * Hairlines only. No zebra, no card, no shadow: in this world depth is the paper / panel
 * step, and the figures on the home are drawn the same way. The money columns are tabular
 * because the money and headcount columns ask for it explicitly below: DESIGN.md measured that
 * Instrument Sans' digits are PROPORTIONAL by default, so a column of euro figures does not line
 * up unless something says so. The home's figures are SVG and handle their own.
 */
.prose table, .privacy-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 8px;
  font-size: 15.5px;
}
.prose caption, .privacy-page caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 12px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.prose th, .prose td, .privacy-page th, .privacy-page td {
  padding: 11px 18px 11px 0;
  border-bottom: 1px solid var(--rule-100);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.prose thead th, .privacy-page thead th {
  border-bottom: 1px solid var(--rule-200);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.prose tbody td { color: var(--ink-900); }
/* The dates, the headcounts and the euro figures are columns of numbers that have to line up. */
.prose td, .prose th, .privacy-page td { font-variant-numeric: var(--numeric-tabular); }
/* `.hl` marks the rows a reader of this page came for: the headcount bands that report on
 * 7 Jun 2027. A tint, and the first cell also carries an accent edge, so the emphasis is
 * not colour alone. */
.prose tbody tr.hl { background: var(--paper-050); }
.prose tbody tr.hl td:first-child { box-shadow: inset 2px 0 0 0 var(--signal-700); padding-left: 12px; }
.prose table + p { margin-top: 16px; }

/* A directive table is wider than a phone: each row becomes a block and the column header
 * travels with its cell. The `data-label` attributes are already in the published markup. */
@media (max-width: 719px) {
  .prose table, .prose tbody, .prose tr, .prose th, .prose td { display: block; width: 100%; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prose tbody tr { padding: 14px 0; border-bottom: 1px solid var(--rule-100); }
  .prose tbody tr.hl { padding-inline: 12px; }
  .prose tbody th, .prose tbody td { padding: 0 0 8px; border: 0; }
  .prose tbody tr.hl td:first-child { box-shadow: none; padding-left: 0; }
  .prose tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
}

/* ------------------------------------------------------------------------ the FAQ
 *
 * Visible on the page, which is the only reason the pay-gap-reporting page may carry
 * FAQPage markup at all (`schema` skill, principle 1: mark up what is actually there).
 */
.faq { max-width: 68ch; }
.faq h2 { margin-bottom: 8px; }
.faq details { border-bottom: 1px solid var(--rule-100); }
.faq details:first-of-type { border-top: 1px solid var(--rule-100); }
.faq summary {
  padding: 15px 0;
  cursor: pointer;
  font-weight: 560;
  color: var(--ink-900);
}
.faq summary::marker { color: var(--signal-700); }
.faq details > *:not(summary) { padding-bottom: 6px; }
.faq details p { color: var(--ink-600); }

/* -------------------------------------------------------------------- the end CTA
 *
 * The one place a text page asks for anything, and the one place the honesty label appears
 * on a text page — next to the button, never as a bar at the top of the document.
 */
.closing {
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(26px, 3.5vw, 40px);
  background: var(--paper-050);
  border: 1px solid var(--rule-100);
  max-width: 68ch;
}
.closing h2 { margin: 0 0 12px; }
.closing h2::before { display: none; }
.closing p { margin: 0 0 16px; color: var(--ink-600); }
.closing p:last-child { margin-bottom: 0; }
.closing .pl-disclose { margin-top: 18px; }

/* ----------------------------------------------------------------- /privacy, /404 */

.privacy-page { padding-block: clamp(32px, 4vw, 52px) clamp(64px, 8vw, 104px); max-width: 74ch; }
.privacy-page .owner, .privacy-page .rules, .privacy-page .disclosure { max-width: 68ch; }
.privacy-page dl { margin: 0 0 18px; max-width: 68ch; }
.privacy-page dt { font-weight: 600; margin-top: 14px; }
.privacy-page dd { margin: 4px 0 0; color: var(--ink-600); }

.lost { padding-block: clamp(64px, 9vw, 120px) clamp(64px, 8vw, 104px); }
.lost h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0;
  max-width: 22ch;
}
.lost > p { margin: 18px 0 0; color: var(--ink-600); max-width: 54ch; font-size: 18px; }
.lost ul { list-style: none; padding: 0; margin: clamp(28px, 4vw, 44px) 0 0; max-width: 56ch; }
.lost li { border-top: 1px solid var(--rule-100); }
.lost li:last-child { border-bottom: 1px solid var(--rule-100); }
.lost a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  color: var(--ink-900);
  text-decoration: none;
}
.lost a:hover { color: var(--signal-700); }
.lost a span { color: var(--ink-400); font-size: 14.5px; }

/* -------------------------------------------------------------------- the footer
 *
 * `legal-pages`: the one line every page carries, plus the primary source for every date on
 * the site. Emitted by build-seo/head.mjs:foot() so there is a single copy of the legal
 * wording across the six pages.
 */
.site-footer {
  border-top: 1px solid var(--rule-100);
  background: var(--paper-050);
  padding-block: 34px 38px;
}
.foot-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.foot-nav a { color: var(--ink-600); text-decoration: none; }
.foot-nav a:hover { color: var(--ink-900); text-decoration: underline; }
.foot-nav a[aria-current='page'] { color: var(--ink-900); }
.foot-line { margin: 0; font-size: 14px; color: var(--ink-600); }
.foot-line a { color: var(--ink-600); }
/* ink-600: the footer ground is paper-050 and this line is 13px, below the 14px
 * floor tokens.css sets for ink-400. ink-600 on paper-050 is the asserted pair. */
.foot-fine { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-600); max-width: 78ch; }
.foot-fine a { color: var(--ink-600); }