/* ==========================================================================
   The legal document page — issue #1366 (PRD #1333)

   The seven documents under content/legal/ used to render through
   article.css, the marketing and help-centre stylesheet: 17px type, 1.9 line
   height, tinted lead boxes, callout panels and 28px headings. That is the
   right shape for an article somebody skims. It is the wrong shape for an
   instrument somebody is bound by, and it made the documents read like a
   product guide long after the words stopped being one.

   This file is the legal register in CSS. It is modelled on how a Saudi
   instrument is actually set — a narrow measure of continuous justified prose,
   numbered articles separated by a hairline rather than by size, and numbered
   sub-clauses hanging off the right margin. Nothing is tinted, nothing is
   boxed, nothing is bold. If a clause matters it is its own article; that is
   the only emphasis this page has.

   Rules to know before you edit it:

   1. EVERY selector is scoped under `.legal-body`. A bare `table {}` here would
      repaint every table in the panel and the storefront.
      tests/Unit/LegalStylesTest.php fails if a rule escapes the scope.
   2. Logical properties only — `margin-inline-start`, never `margin-left`. The
      documents are Arabic RTL and the same view also serves English pages.
   3. Mobile first. Dense is the goal; unreadable is not, so the phone rules
      come first and the wide screen only widens the measure.
   4. No colour beyond ink, muted ink and a single hairline. The moment a panel
      or an accent appears here the page stops reading as a legal document.

   Type: Tajawal, English digits, tabular figures, light only.
   ========================================================================== */

.legal-body {
	color-scheme: light;

	--lg-ink: #303030;
	--lg-muted: #6B6560;
	--lg-rule: #DCD6D0;
	--lg-rule-faint: #EDE8E3;
	--lg-paper: #FFFFFF;

	--lg-face: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, Arial, sans-serif;

	/* One measure, not two. An instrument is a single column of continuous
	   prose from the first article to the last, and a block that floats wider
	   than the text around it is exactly the magazine look this replaces. */
	--lg-measure: 74ch;

	color: var(--lg-ink);
	font-family: var(--lg-face);
	/* Denser than the article page on purpose: 15px against 17px. */
	font-size: 15px;
	/* Arabic still needs room for its diacritics — 1.72 against the article
	   page's 1.9 is tight, not cramped. */
	line-height: 1.72;
	font-variant-numeric: tabular-nums;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	max-width: var(--lg-measure);
}

.legal-body *,
.legal-body *::before,
.legal-body *::after { box-sizing: border-box }

/* ==========================================================================
   Continuous prose
   ========================================================================== */

.legal-body p {
	margin: 0 0 12px;
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
}

.legal-body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.legal-body a:hover { text-decoration-thickness: 2px }

.legal-body a:focus-visible {
	outline: 2px solid var(--lg-ink);
	outline-offset: 2px;
}

/* An address or a Latin token inside Arabic prose keeps its own direction. */
.legal-body bdi {
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Articles — separated by a rule, never by size

   A legal instrument does not shout its headings. The article title is barely
   larger than the text it governs; what tells the reader a new article has
   started is the hairline above it and the air around it.
   ========================================================================== */

.legal-body h2 {
	font-size: 1em;
	font-weight: 500;
	line-height: 1.5;
	color: var(--lg-ink);
	margin: 32px 0 12px;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--lg-rule);
	scroll-margin-block-start: 24px;
	text-align: start;
}

/* The table of contents opens the page, so it needs no rule above it. */
.legal-body .toc h2 {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.legal-body h3 {
	font-size: .95em;
	font-weight: 500;
	color: var(--lg-muted);
	margin: 20px 0 8px;
	text-align: start;
}

/* ==========================================================================
   Numbered sub-clauses

   The number hangs outside the text block, so every clause in an article lines
   up on one edge and the prose keeps its own straight margin.
   ========================================================================== */

/* The numbering is the browser's own `<ol>` numbering, not a CSS counter.
   An article that is interrupted by a schedule continues on the other side of
   it with `<ol class="clauses" start="6">`, and `start` is what makes that
   work — a CSS counter would restart at one and the article would have two
   clause 1s. `::marker` styles the number without taking it over. */
.legal-body ol.clauses {
	list-style: decimal;
	margin: 0 0 12px;
	padding-inline-start: 2.4em;
}

.legal-body ol.clauses > li {
	padding-inline-start: .4em;
	margin-block-end: 8px;
	text-align: justify;
	text-justify: inter-word;
}

.legal-body ol.clauses > li::marker {
	/* The number is a reference, not a shout. */
	color: var(--lg-muted);
	font-size: .9em;
	font-variant-numeric: tabular-nums;
}

.legal-body ol.clauses > li:last-child { margin-block-end: 0 }

/* ==========================================================================
   The table of contents

   A plain list of articles. Not a card, not a box, not a sidebar.
   ========================================================================== */

.legal-body .toc {
	margin-block-end: 28px;
	padding-block-end: 20px;
	border-block-end: 1px solid var(--lg-rule);
}

.legal-body .toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .93em;
}

.legal-body .toc li { margin-block-end: 4px }

.legal-body .toc a {
	color: var(--lg-muted);
	text-decoration: none;
}

.legal-body .toc a:hover {
	color: var(--lg-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Tables — a schedule to an instrument, set as hairlines

   No zebra, no rounded corners, no fill. On a phone the table scrolls inside
   its own box rather than widening the page.
   ========================================================================== */

.legal-body table {
	width: 100%;
	margin: 4px 0 16px;
	border-collapse: collapse;
	font-size: .93em;
	background: var(--lg-paper);
	/* An Arabic table reads right to left like the prose around it. */
	text-align: start;
}

.legal-body th,
.legal-body td {
	padding: 8px 10px;
	border: 1px solid var(--lg-rule-faint);
	text-align: start;
	vertical-align: top;
	line-height: 1.6;
}

.legal-body th {
	font-weight: 500;
	color: var(--lg-muted);
	border-block-end-color: var(--lg-rule);
}

/* A wide table on a narrow screen scrolls, and says so to a screen reader. */
.legal-body .table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Wider screens — the measure grows, the density does not
   ========================================================================== */

@media (min-width: 768px) {

	.legal-body {
		font-size: 15.5px;
		line-height: 1.75;
	}
}

/* ==========================================================================
   Print — the page has a print button, and a printed contract is what a
   merchant files
   ========================================================================== */

@media print {

	.legal-body {
		font-size: 10.5pt;
		line-height: 1.55;
		max-width: none;
	}

	.legal-body .toc { display: none }

	.legal-body h2 {
		margin-block-start: 18pt;
		padding-block-start: 10pt;
		break-after: avoid;
	}

	.legal-body ol.clauses > li,
	.legal-body table { break-inside: avoid }

	.legal-body a { text-decoration: none }
}

/* ==========================================================================
   Reduced motion and forced colours — nothing here animates, and the hairlines
   must survive a high-contrast mode
   ========================================================================== */

@media (forced-colors: active) {

	.legal-body h2,
	.legal-body .toc,
	.legal-body th,
	.legal-body td { border-color: CanvasText }
}