/* =============================================================================
   UORA Rules page
   web/assets/css/rules.css — loaded after base.css, before print.css.

     <link rel="stylesheet" href="/assets/css/tokens.css">
     <link rel="stylesheet" href="/assets/css/base.css">
     <link rel="stylesheet" href="/assets/css/rules.css">
     <link rel="stylesheet" href="/assets/css/print.css" media="print">

   A separate file rather than a <style> block: the site is served under
   `style-src 'self'` with no 'unsafe-inline' (netlify.toml), so an inline block
   would simply not apply.

   Everything the page can take from base.css it takes: .card, .kv, .table,
   .chip, .notice, .tabs/.tab/.tabpanel, .prose, .btn. What is left here is only
   what a long, bilingual, deep-linkable legal instrument needs and base.css has
   no equivalent for: the contents rail, the anchor offset under the sticky
   header, the digest block, and the Arabic reading measure.
   ============================================================================= */

/* ======================================================= two-column shell ===
   .split--rail-start from base.css supplies the grid and collapses it to one
   column at 960px. Only the vertical placement is page business. */

.rules-layout {
  margin-block-start: var(--s-6);
}

/* ========================================================= contents rail ====
   A <details>, not a plain nav. On a phone the rail stacks above the text, and
   twenty section titles ahead of the instrument is a wall to scroll past; the
   page module opens the element on wide viewports and leaves it closed on
   narrow ones. It carries data-print="hide" because a printed instrument has no
   links to follow — print.css drops it. */

.rules-toc__summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-strong);
  letter-spacing: var(--tr-card);
  color: var(--text);
}

.rules-toc[open] .rules-toc__summary {
  margin-block-end: var(--s-3);
  padding-block-end: var(--s-3);
  border-block-end: var(--hairline) solid var(--border);
}

.rules-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.rules-toc__list a {
  display: block;
  padding-block: var(--s-1);
  font-size: var(--fs-small);
  line-height: var(--lh-ui);
  color: var(--text2);
  text-decoration: none;
}

.rules-toc__list a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Deeper markdown headings, should a later version of the Rules use them. */
.rules-toc__item--l3 a { padding-inline-start: var(--s-3); color: var(--text3); }
.rules-toc__item--l4 a { padding-inline-start: var(--s-5); color: var(--text3); }

/* Above the .split breakpoint the rail travels with the reader. Capped and
   scrollable in its own right, so a long contents list never pushes the page
   into a second scrollbar. */
@media (min-width: 961px) {
  .rules-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    max-height: calc(100vh - var(--header-h) - var(--s-8));
    overflow-y: auto;
  }
}

/* ============================================================= the text ====
   The body is built from the markdown the API returns. .prose carries the
   measure, the leading and the list styling; these rules add the things a
   deep-linked legal text needs. */

/* The Rules quote URLs inline. At 360px an unbroken address would push the page
   sideways, so it breaks instead. */
.rules-body {
  overflow-wrap: break-word;
}

.rules-body__heading {
  color: var(--text);
  /* The site header is sticky, so an anchored heading would otherwise land
     underneath it. */
  scroll-margin-block-start: calc(var(--header-h) + var(--s-5));
}

/* The first heading of the instrument is its title line; it needs no gap above
   the tab strip it sits under. */
.rules-body > :first-child {
  margin-block-start: 0;
}

/* Arabic at the Latin body size reads small: the script has no capitals to give
   it height and its diacritics need vertical room. One step up the scale and a
   looser leading, with no change to the words. */
.rules-body[lang="ar"] {
  font-size: var(--fs-lead);
  line-height: 1.9;
}

/* ========================================================= the digests =====
   Quoted in full, never truncated: a truncated digest cannot be checked against
   anything. user-select:all makes one click take the whole 64 characters for a
   reader whose browser has no clipboard permission. */

.rules-digest {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.rules-digest + .rules-digest {
  margin-block-start: var(--s-4);
}

.rules-digest__row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}

.rules-digest__value {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-3);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0;
  line-height: var(--lh-ui);
  word-break: break-all;
  user-select: all;
}

.rules-digest__copy {
  flex: 0 0 auto;
}

/* ======================================================== version table ====
   Version numbers are compared down the column like any other figure. */

.rules-versions__version {
  font-family: var(--font-mono);
  letter-spacing: 0;
  white-space: nowrap;
}

/* Two links in one cell. Without a gap they read as a single phrase — "Read
   PDF" — rather than as the two separate actions they are. */
.rules-versions__actions {
  display: inline-flex;
  gap: var(--s-4);
  justify-content: flex-end;
}

/* ============================================================== language ===
   The toggle is a real tablist, so it is keyboard-operable and, because
   print.css unhides every .tabpanel, a printed page carries both languages
   rather than whichever one happened to be showing. */

.rules-lang {
  margin-block-end: var(--s-2);
}

.rules-lang .tab[lang="ar"] {
  font-size: var(--fs-body-sm);
}

/* ================================================================= print === */

@media print {
  /* On paper the two languages are separate documents, not two states of one
     control. Matches the lang-break rule print.css applies to a bilingual award. */
  #panel-ar {
    break-before: page;
    page-break-before: always;
  }

  .rules-digest__value {
    user-select: auto;
  }
}