/* ═══════════════════════════════════════════════════════════════════════════
   legal.css — the chrome shared by /rules/ and /authentication/.

   WHY ONE FILE FOR TWO ROUTES
   ---------------------------
   The two pages shipped together on 2026-08-05 and are the same object seen
   twice: a document with a page hero, a breadcrumb, callout notes and the
   landing's closing CTA. Giving each its own copy of that would be two files
   that look identical on day one and quietly diverge the first time only one is
   touched — the exact failure the repo already hit when a component's CSS was
   duplicated into two route stylesheets (see the note in biiq.lib.theme.php on
   why `pagecss` became a comma list).

   So: `.lg-` here is the shared layer, loaded by BOTH routes. The step timeline
   that only /authentication/ has lives in authentication.css and is `.au-`.
   Nothing here is `.rl-`: /rules/ has no chrome of its own that is worth a
   prefix, and inventing one would suggest a split that does not exist.

   Everything is ADDITIVE on top of the generated bundle. Tokens (--blue2,
   --surface, --border, --radius-lg, …), .glass, .section*/.divider/.reveal/
   .stagger-child, the .btn-* family, .hero-badge and the whole .footer-cta
   block come from the bundle and are reused as-is.

   RTL: the document is dir="rtl" and every directional value below is a LOGICAL
   property (inset-inline-*, padding-inline-*, border-inline-*, text-align:start)
   so neither page has to be re-mirrored if it is ever served LTR.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── PAGE HERO ───
   Shorter than /about/'s: these are documents, not a pitch. One bloom behind
   the copy so the sticky nav does not sit on flat black, and nothing else. */
.lg-hero {
  padding: 60px 0 44px;
  position: relative;
}
.lg-hero::before {
  content: '';
  position: absolute;
  inset-block-start: -140px;
  inset-inline-end: -100px;
  width: 620px;
  height: 420px;
  background: radial-gradient(circle, rgba(61,123,255,0.15), transparent 66%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}
.lg-hero > .container { position: relative; z-index: 1; }

.lg-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 26px;
}
.lg-crumb a { color: var(--text-sub); text-decoration: none; transition: color 180ms; }
.lg-crumb a:hover { color: var(--blue2); }
.lg-crumb-sep { opacity: 0.4; }
.lg-crumb [aria-current] { color: var(--text); font-weight: 600; }

.lg-hero-copy { max-width: 760px; }
.lg-h1 {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 16px;
}
/* Same padding/negative-margin pair as .hero-h1 .gradient-text in index.css and
   for the same reason: background-clip paints only inside the element's box, so
   any glyph ascender or descender outside it receives no paint and vanishes. */
.lg-h1 .gradient-text {
  background: linear-gradient(90deg, #5C86FF 0%, #9945ff 50%, #00e5c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-block: 0.16em;
  margin-block: -0.16em;
}
.lg-lead {
  font-size: 16.5px;
  font-weight: 400;
  line-height: 2;
  color: var(--text-sub);
  max-width: 680px;
  margin: 0 0 26px;
}

/* Document metadata strip — updated-on, article count, reading time. */
.lg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lg-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-sub);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
}
.lg-meta-item svg { width: 15px; height: 15px; opacity: 0.75; flex: 0 0 auto; }

.lg-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ─── KEY CARDS ───
   The four clauses lifted out of the body of /rules/. Each is a link to its own
   article, so the whole card is the hit target rather than a "read more". */
.lg-keys { padding: 8px 0 72px; }
.lg-keys-head { margin-bottom: 40px; }
.lg-keys-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.lg-key {
  display: block;
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 220ms ease, border-color 220ms ease;
}
/* Variants: `.k-user` is the DEFAULT (blue) and deliberately has no rules of
   its own — it is in the markup so all four cards name their variant and the
   set is greppable. `.k-danger` and `.k-cash` re-tint the bloom, the icon and
   the link below. Do not "clean up" k-user by deleting it from the markup: the
   next person adding a fifth card copies whichever card they see first, and a
   card with no variant class teaches the wrong pattern. */
.lg-key::before {
  content: '';
  position: absolute;
  inset-block-start: -80px;
  inset-inline-start: -80px;
  width: 220px; height: 220px;
  border-radius: 50%;
  opacity: 0.10;
  pointer-events: none;
  background: radial-gradient(circle, var(--blue2), transparent);
}
.lg-key.k-danger::before { background: radial-gradient(circle, var(--red), transparent); }
.lg-key.k-cash::before   { background: radial-gradient(circle, var(--violet), transparent); }
.lg-key > * { position: relative; }
.lg-key:hover { transform: translateY(-3px); border-color: var(--border-h); }

.lg-key-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  background: rgba(61,123,255,0.12);
  box-shadow: 0 0 0 1px rgba(61,123,255,0.2);
  color: var(--blue2);
}
.lg-key-icon svg { width: 21px; height: 21px; }
.lg-key.k-danger .lg-key-icon { background: rgba(239,68,68,0.12);  box-shadow: 0 0 0 1px rgba(239,68,68,0.22);  color: var(--red); }
.lg-key.k-cash   .lg-key-icon { background: rgba(153,69,255,0.12); box-shadow: 0 0 0 1px rgba(153,69,255,0.22); color: var(--violet); }

.lg-key-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text);
  margin: 0 0 10px;
}
.lg-key-desc {
  font-size: 14px;
  line-height: 1.95;
  color: var(--text-sub);
  margin: 0 0 16px;
}
.lg-key-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue2);
}
.lg-key.k-danger .lg-key-link { color: #ff8a8a; }
.lg-key.k-cash   .lg-key-link { color: #c49bff; }

.lg-keys-note {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-muted);
  text-align: center;
}

/* ─── BODY: TOC + ARTICLES ─── */
.lg-body { padding-block: 72px; }
.lg-body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

/* The TOC sticks on wide screens only. `position: sticky` inside a grid item
   needs the item not to stretch, which `align-items: start` above provides —
   without it the aside is as tall as the article column and sticky has no room
   to move in, so it silently does nothing. */
.lg-toc {
  border-radius: var(--radius-lg);
  padding: 22px;
}
.lg-toc-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--blue2);
  margin-bottom: 14px;
}
.lg-toc-list {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.lg-toc-list li { counter-increment: toc; }
.lg-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-sub);
  text-decoration: none;
  border-radius: 10px;
  padding: 7px 10px;
  transition: background 160ms, color 160ms;
}
.lg-toc-list a::before {
  /* `persian`, not the default `decimal`. Measured in the browser: decimal
     rendered a Latin "1, 2, 3 …" column three centimetres from a document whose
     every heading says «ماده ۱» — the one place on the page where the same
     number appears in two alphabets. `persian` is a predefined CSS counter
     style, so this needs no @counter-style block of our own.
     ⚠️ It also makes the LTR wrapper below load-bearing rather than defensive:
     Persian-Indic digits are strong-RTL characters, so a two-digit counter like
     ۱۰ would otherwise be laid out right-to-left and read as ۰۱. */
  content: counter(toc, persian);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 18px;
  direction: ltr;
  text-align: end;
  flex: 0 0 auto;
}
.lg-toc-list a:hover { background: var(--surface-h); color: var(--text); }
.lg-toc-list a:hover::before { color: var(--blue2); }

.lg-arts { min-width: 0; }

/* scroll-margin, not a spacer: every article is a fragment target from the TOC
   and from the key cards, and the nav is sticky — without it the heading lands
   underneath the bar. */
.lg-art {
  scroll-margin-top: 96px;
  padding-block: 30px;
  border-block-end: 1px solid var(--border);
}
.lg-art:first-child { padding-block-start: 0; }
.lg-art:last-child  { border-block-end: 0; padding-block-end: 0; }

.lg-art-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.lg-art-n {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--blue2);
  background: rgba(61,123,255,0.10);
  border: 1px solid rgba(61,123,255,0.22);
  border-radius: 999px;
  padding: 5px 12px;
}
.lg-art-title {
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
}

/* The four Reza-specified articles get a tinted rail rather than a louder
   heading: they must be findable when scanning, without turning the document
   into a page of warnings where nothing stands out because everything does. */
.lg-art-key {
  border-inline-start: 2px solid rgba(92,134,255,0.35);
  padding-inline-start: 20px;
  /* Logical corners. The physical `border-radius: 0 r r 0` this replaced rounded
     the corners on the SAME side as the rail, so the tint block was clipped
     away from the very edge it was meant to hang off. Caught on screen, not in
     review — a wrong-side radius reads as "slightly odd spacing", never as a
     bug, which is exactly why it survives a code read. */
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  /* ⚠️ THE ONE PHYSICAL DIRECTION IN THIS FILE, and it is not an oversight:
     CSS has no logical axis for a gradient — `to inline-start` does not exist.
     `to left` is correct for THIS document, which is hardcoded dir="rtl" in
     biiq.views.main.v2html, so the tint starts at the inline-start (right) edge
     where the rail is and fades inward. It was `90deg` (i.e. to the RIGHT) and
     that put a faint band down the far side of the block, pointing away from
     the rail — visible on screen as a stray vertical edge.
     If this page is ever served LTR, this single declaration must flip to
     `to right`; nothing else in the file has to move. */
  background: linear-gradient(to left, rgba(92,134,255,0.05), transparent 55%);
}
.lg-art-key .lg-art-n {
  color: var(--text);
  background: rgba(92,134,255,0.2);
  border-color: rgba(92,134,255,0.4);
}

.lg-art p {
  font-size: 15px;
  line-height: 2.15;
  color: var(--text-sub);
  margin: 0 0 14px;
}
.lg-art p:last-child { margin-bottom: 0; }
.lg-art b { color: var(--text); font-weight: 700; }
.lg-art a { color: var(--blue2); text-decoration: none; }
.lg-art a:hover { text-decoration: underline; }

.lg-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 11px;
}
.lg-list li {
  position: relative;
  font-size: 15px;
  line-height: 2.1;
  color: var(--text-sub);
  padding-inline-start: 22px;
}
.lg-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: 0.95em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue2);
  opacity: 0.8;
}
/* Prohibitions. A dot says "item in a list"; these are things that must not
   happen, and a reader scanning the page should be able to tell the two apart
   without reading the sentence. */
.lg-list-x li::before {
  content: '×';
  inset-block-start: 0.35em;
  inset-inline-start: 2px;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: var(--red);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  opacity: 0.9;
}

/* ─── CALLOUT NOTES ───
   Two flavours only: neutral (info) and danger (legal consequence). A third
   would dilute both. */
.lg-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 16px 0;
  background: rgba(61,123,255,0.06);
  border: 1px solid rgba(61,123,255,0.18);
}
.lg-note svg {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--blue2);
}
.lg-note > div {
  font-size: 14.5px;
  line-height: 2;
  color: var(--text-sub);
}
.lg-note b { color: var(--text); }
.lg-note a { color: var(--blue2); text-decoration: none; }
.lg-note a:hover { text-decoration: underline; }

.lg-note-danger {
  background: rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.22);
}
.lg-note-danger svg { color: #ff8a8a; }
.lg-note-danger a   { color: #ff8a8a; }

/* ─── CONTACT ROWS (inside ماده ۱۸) ─── */
.lg-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 4px;
}
.lg-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text) !important;
  text-decoration: none !important;
  font-size: 14.5px;
  font-weight: 600;
  transition: background 180ms, border-color 180ms;
}
.lg-contact-row:hover { background: var(--surface-h); border-color: var(--border-h); }
.lg-contact-row svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--blue2); }
/* dir="ltr" on the value span already keeps "@handle" and the dashed phone
   number together; the span is inline so it needs no extra alignment rule. */

/* ─── RESPONSIVE ─── */
@media (min-width: 640px) {
  .lg-keys-grid { grid-template-columns: repeat(2, 1fr); }
  .lg-contact   { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .lg-hero { padding: 76px 0 52px; }
  .lg-keys-grid { grid-template-columns: repeat(4, 1fr); }
  /* The TOC is FIRST in the source, and stays first here — no grid-row/order
     reshuffle. On a phone that means a 20-item jump list above the document,
     which is what a jump list is for; reordering it visually would leave the
     tab sequence walking the index after the articles it indexes. `260px` is
     the inline-start column, i.e. the RIGHT-hand one in this dir="rtl"
     document — logical, not mirrored by hand. */
  .lg-body-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; }
  .lg-toc {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    /* The 20-item list overflows a 1000px viewport, so this pane really does
       scroll — and the platform default drew a full-width light track hard
       against the card's inner edge, brighter than anything else on a page
       whose entire palette is 4%-white on near-black. Both properties are
       needed: `scrollbar-width`/`scrollbar-color` is the standard pair Firefox
       honours, ::-webkit-scrollbar is what actually paints it in Chrome. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.14) transparent;
  }
  .lg-toc::-webkit-scrollbar { width: 6px; }
  .lg-toc::-webkit-scrollbar-track { background: transparent; }
  .lg-toc::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
  }
  .lg-toc:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); }
  .lg-art { padding-block: 36px; }
}