/* jolaws.com: the one stylesheet, in the design language of the approved home prototype
   (docs/design/2026-10-24-home-prototype.html, its <style> block is the spec). An Apple-style page
   in RTL: paper bands carry the evidence, the explorer is an instrument (one year axis, ticks, a
   scale), Liquid Glass only on the floating bars, Alyamama for our words and Amiri for the law's.

   This file is the class contract. Templates use these names; later tasks add rules for markup they
   introduce and never rename these. Grep this file before naming a class.

   Values. The prototype's components keep the prototype's exact values. Rules for the site's own
   pages use the tokens and the scales: type 12 (numbers in badges and on the axis), 13, 15, 17, 21,
   stat, h2, h1, and the law in Amiri at 19 (text) and 20 (headings); space 4 8 12 16 24 32 40 64 96;
   radii 10 16 24 (capsules use half their height); our own controls at least 44px tall. --ink-3 is
   for rules, icons and marks, never for text (it fails contrast as text). Text on a --fill capsule is
   --on-fill; every chip and badge pair is at least 4.6:1 in both themes on page, band, card and side.

   Status, one language everywhere (colour AND shape): .chip plus app/present.py status_class():
   .chip.ok ساري (green, filled dot) · .chip.amend معدّل (amber, half-filled) · .chip.gone غير ساري
   (grey, hollow) · .chip.pend لم يُجمع بعد (dashed) · .chip.temp مؤقت (amber outline, hollow).
   The prototype's .st is not a class here.

   One name, two meanings, settled by context:
     .btn     a primary capsule; inside .acts (the prototype's folio) the quiet secondary button.
     .pill    the quiet secondary button; inside .bar the prototype's CTA (a 44px link, a 34px capsule).
     .ask     the «اسأل مساعدك» card of the doc pages; inside .answer the question bubble.
     .art     .rows > .art is a row of a law's articles index; .arts .art is an article chip.
     .years   nav.years is the year index of /k/…; .cb .years is the chart's year labels.
     .more    details.more folds the rest of a list.
     .facts   dl.facts is the label over value strip of a page head; .facts with icons is the prototype's.
     .folio   p.folio (app/official.py folio()) is the Gazette running head (the prototype's mast);
              div.folio is the prototype's folio sheet, the same surface as .sheet.
     .line    .cb .line is the chart's axis; .citebox .line is a citation.
     .kind    .kinds .kind is a tile of the footer; .rr .kind names how a related law is linked.
     .rows    one row language: the explorer's lists and the doc pages' lists are the same.
   Two names, one component (one rule; the task that writes the markup keeps one name and deletes the
   other from the rule): .ctas/.cta, .finder/.find, .count/.layer .n. (The footer's .find, .ft, .legal and .wm are the prototype's.) */

/* ===== Tokens ===== */
:root{
  --page:#FFFFFF;--band:#F5F5F7;--card:#FFFFFF;--side:#FAFAFB;
  --ink:#1D1D1F;--ink-2:#6E6E73;--ink-3:#86868B;
  --rule:rgba(29,29,31,.12);--rule-2:rgba(29,29,31,.07);--fill:rgba(118,118,128,.12);--fill-2:rgba(118,118,128,.2);
  --blue:#0071E3;--blue-ink:#0066CC;--on-blue:#FFFFFF;--blue-soft:rgba(0,113,227,.08);--blue-line:rgba(0,113,227,.55);
  --green:#1A7F37;--green-soft:#EEF8F1;--amber:#C93400;--amber-soft:#FFF0E6;--bar:#8E8E93;
  /* text on a --fill capsule (chips, counts): --ink-2 there fell under 4.5:1 */
  --on-fill:#424245;
  --ring:0 0 0 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.04),0 24px 56px -32px rgba(0,0,0,.30);
  --glass:rgba(255,255,255,.8);--glass-rim:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 .5px rgba(0,0,0,.06);
  --fig-plate:#FFFFFF;--fig-hi:#0071E3;--fig-edge:#8E8E93;--fig-mid:#C7C7CC;--fig-lo:#E5E5EA;
  --ui:"Alyamama",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --law:"Amiri","Geeza Pro","Times New Roman",serif;
  /* type: these sizes and nothing else (12 only for figures inside badges and on the axis) */
  --t-12:12px;--t-cap:13px;--t-sm:15px;--t-body:17px;--t-h3:21px;--t-stat:clamp(26px,2.6vw,34px);--t-h2:clamp(28px,4vw,44px);--t-h1:clamp(40px,6.4vw,76px);
  /* space: 4 8 12 16 24 32 40 64 96 */
  --gut:16px;--sec:64px;--head:32px;--r-sm:10px;--r-md:16px;--r-lg:24px;
  --ease:cubic-bezier(.32,.72,0,1);
  /* The reading column. The .doc-read class is max-width:calc(var(--read) + 32px); --read gives back the
     gutters that 32px does not count, so the column is 720px of text at every width. */
  --read:calc(688px + 2 * var(--gut));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --page:#000000;--band:#0D0D0F;--card:#1C1C1E;--side:#202023;--ink:#F5F5F7;--ink-2:#98989D;--ink-3:#8E8E93;
  --rule:rgba(255,255,255,.12);--rule-2:rgba(255,255,255,.07);--fill:rgba(118,118,128,.24);--fill-2:rgba(118,118,128,.34);
  --blue:#2997FF;--blue-ink:#2997FF;--on-blue:#000000;--blue-soft:rgba(41,151,255,.10);--blue-line:rgba(41,151,255,.7);
  --green:#30D158;--green-soft:rgba(48,209,88,.16);--amber:#FF9F0A;--amber-soft:rgba(255,159,10,.18);--bar:#7C7C82;--on-fill:#A1A1A6;
  --ring:0 0 0 1px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.5),0 24px 56px -32px rgba(0,0,0,.9);
  --glass:rgba(28,28,30,.66);--glass-rim:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 .5px rgba(255,255,255,.08);
  --fig-plate:#1C1C1E;--fig-hi:#2997FF;--fig-edge:#8E8E93;--fig-mid:#48484A;--fig-lo:#2C2C2E;color-scheme:dark}}
:root[data-theme="dark"]{
  --page:#000000;--band:#0D0D0F;--card:#1C1C1E;--side:#202023;--ink:#F5F5F7;--ink-2:#98989D;--ink-3:#8E8E93;
  --rule:rgba(255,255,255,.12);--rule-2:rgba(255,255,255,.07);--fill:rgba(118,118,128,.24);--fill-2:rgba(118,118,128,.34);
  --blue:#2997FF;--blue-ink:#2997FF;--on-blue:#000000;--blue-soft:rgba(41,151,255,.10);--blue-line:rgba(41,151,255,.7);
  --green:#30D158;--green-soft:rgba(48,209,88,.16);--amber:#FF9F0A;--amber-soft:rgba(255,159,10,.18);--bar:#7C7C82;--on-fill:#A1A1A6;
  --ring:0 0 0 1px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.5),0 24px 56px -32px rgba(0,0,0,.9);
  --glass:rgba(28,28,30,.66);--glass-rim:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 .5px rgba(255,255,255,.08);
  --fig-plate:#1C1C1E;--fig-hi:#2997FF;--fig-edge:#8E8E93;--fig-mid:#48484A;--fig-lo:#2C2C2E;color-scheme:dark}
@media (min-width:700px){:root{--gut:32px;--sec:96px;--head:40px}}
@media (min-width:1100px){:root{--gut:40px;--sec:120px;--head:48px}}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:72px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--page);color:var(--ink);font:400 var(--t-body)/1.75 var(--ui);letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
p,h1,h2,h3,h4,h5,ol,ul,figure,blockquote,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
a{color:var(--blue-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:start}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[hidden]{display:none!important}
::selection{background:color-mix(in srgb,var(--blue) 22%,transparent)}
::placeholder{color:var(--ink-2);opacity:1}
mark{background:var(--blue-soft);color:inherit;border-radius:3px;padding-inline:1px}
bdi{unicode-bidi:isolate}
.num,.mono{font-variant-numeric:tabular-nums}
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.nw{white-space:nowrap}
.nw.tight{margin-inline-start:.3em}
.cap{font-size:var(--t-cap);line-height:1.6;color:var(--ink-2)}
.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.chev{color:var(--ink-3);transition:transform .25s var(--ease)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-64px;z-index:40;padding:10px 16px;border-radius:22px;background:var(--ink);color:var(--page)}
.skip:focus{top:12px}
/* A surface: white (dark: #1C1C1E) with the ring shadow, as .ex, .answer and .form are */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--ring)}

/* ===== The top bar: clear at rest, Liquid Glass once content scrolls under it (site.js toggles .scrolled) ===== */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--page)}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;border-bottom:1px solid transparent;transition:background-color .25s,border-color .25s,box-shadow .25s}
.bar.scrolled{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom-color:var(--rule);box-shadow:var(--glass-rim)}
.bar .wrap{height:56px;display:flex;align-items:center;gap:4px}
.brand{font-weight:800;font-size:var(--t-body);color:var(--ink);white-space:nowrap;margin-inline-end:auto;min-height:44px;display:inline-flex;align-items:center;gap:10px}
.brand:hover{text-decoration:none}
.brand i{width:22px;height:22px;border-radius:6px;background:var(--ink);position:relative;flex:none}
.brand i::after{content:"";position:absolute;inset:6px 5px auto;height:1.5px;background:var(--page);box-shadow:0 4px 0 var(--page),0 8px 0 var(--blue)}
.nav{display:none;gap:24px;margin-inline-end:16px;font-size:var(--t-sm)}
.nav a{color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.icon{width:44px;height:44px;display:grid;place-items:center;border-radius:22px;color:var(--ink-2)}
.icon:hover{background:var(--fill);color:var(--ink)}
.bar .pill,.bar .pill:hover,.bar .pill:active{height:44px;min-height:0;display:inline-flex;align-items:center;padding:0;border-radius:0;background:none;box-shadow:none}
.bar .pill span{height:34px;display:inline-flex;align-items:center;padding-inline:16px;border-radius:17px;background:var(--blue);color:var(--on-blue);font-size:var(--t-sm);font-weight:600;white-space:nowrap;transition:filter .15s}
.bar .pill:hover{text-decoration:none}.bar .pill:hover span{filter:brightness(1.08)}.bar .pill:active span{filter:brightness(.92)}
@media (min-width:800px){.nav{display:flex}}
/* On a law or an article page the site bar scrolls away and the page bar (.lnav) stays */
body:has(.lnav) .bar{position:relative}

/* ===== Buttons and links ===== */
.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding-inline:28px;border-radius:25px;background:var(--blue);color:var(--on-blue);font-weight:700;transition:filter .15s}
.btn:hover{text-decoration:none;filter:brightness(1.08)}.btn:active{filter:brightness(.92)}
.link-more{min-height:44px;display:inline-flex;align-items:center;font-weight:600}
/* the quiet button: copy, the source, neighbours, the invitations under an article's title */
.pill,.acts .btn,.invite a{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding-inline:18px;border-radius:22px;background:var(--card);color:var(--ink);font-size:var(--t-sm);font-weight:400;box-shadow:inset 0 0 0 1px var(--rule);transition:background-color .15s,box-shadow .15s}
.pill:hover,.acts .btn:hover,.invite a:hover{text-decoration:none;filter:none;box-shadow:inset 0 0 0 1px var(--ink-3)}
.pill:active,.acts .btn:active,.invite a:active{background:var(--fill)}
.pill.src,.acts .btn.b{color:var(--blue-ink)}
.acts .btn.done{color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.acts,.invite{display:flex;flex-wrap:wrap;gap:8px}
.invite a .ico{color:var(--blue-ink)}
.src{font-size:var(--t-sm);justify-self:start;min-height:44px;display:inline-flex;align-items:center}

/* ===== Status: one language everywhere, colour AND shape ===== */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding-inline:10px;border-radius:12px;font-size:var(--t-cap);font-weight:500;line-height:1;white-space:nowrap;background:var(--fill);color:var(--on-fill)}
.chip.ok::before,.chip.amend::before,.chip.gone::before,.chip.pend::before,.chip.temp::before{content:"";flex:none;width:7px;height:7px;border-radius:4px;background:currentColor}
.chip.ok{background:var(--green-soft);color:var(--green)}
.chip.amend{background:var(--amber-soft);color:var(--amber)}
.chip.amend::before{background:linear-gradient(90deg,transparent 50%,currentColor 50%);box-shadow:inset 0 0 0 1.5px currentColor}
.chip.gone{background:var(--fill);color:var(--on-fill)}
.chip.gone::before{background:none;box-shadow:inset 0 0 0 1.5px currentColor}
.chip.temp{background:none;color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.chip.temp::before{background:none;box-shadow:inset 0 0 0 1.5px currentColor}
.chip.pend{background:none;color:var(--ink-2);border:1px dashed var(--ink-3)}
.chip.pend::before{width:8px;height:8px;border-radius:2px;background:none;border:1.5px dashed currentColor}
/* a count beside a heading, and a layer's count in the explorer: one badge */
.count,.layer .n{min-width:28px;height:22px;padding-inline:8px;border-radius:11px;background:var(--fill);color:var(--on-fill);font-size:var(--t-cap);font-weight:500;line-height:1;display:inline-grid;place-items:center;vertical-align:middle;font-variant-numeric:tabular-nums;transition:background-color .2s,color .2s}

/* ===== Symbols: one 16px grid ===== */
.sym{flex:none;width:16px;height:16px;display:inline-grid;place-items:center}
.sym::before{content:"";display:block}
.sym.a::before{width:10px;height:10px;border-radius:2.5px;background:var(--amber)}
.sym.ah::before{width:10px;height:10px;border-radius:2.5px;box-shadow:inset 0 0 0 1.5px var(--amber)}
.sym.p::before{width:4px;height:12px;border-radius:2px;background:var(--bar)}
.sym.r::before{width:12px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--ink-2),inset 0 -4px 0 -2.5px var(--ink-2)}
.sym.u::before{width:10px;height:10px;border-radius:2.5px;border:1.5px dashed var(--ink-2)}
.sym.o::before{width:14px;height:6px;background:radial-gradient(circle 3px at calc(100% - 3px) 50%,var(--ink) 98%,transparent) ,linear-gradient(var(--ink) 0 0) 0 50%/100% 1.5px no-repeat}
.sym.t::before{width:10px;height:10px;border-radius:5px;background:var(--blue)}

/* ===== Sections: a heading and at most one line under it ===== */
.sec{padding-block:var(--sec)}
.band{background:var(--band)}
.head{margin-bottom:var(--head);max-width:40em}
.h2{font-size:var(--t-h2);line-height:1.2;font-weight:800;text-wrap:balance}
.sub{color:var(--ink-2);margin-top:12px;text-wrap:pretty}
.lede{font-size:var(--t-body);color:var(--ink-2);max-width:32em;margin-top:20px;text-wrap:pretty}
.lede strong{color:var(--ink);font-weight:600}
@media (min-width:700px){.lede{font-size:var(--t-h3);line-height:1.65}}

/* ===== Hero ===== */
.hero{padding-block:clamp(40px,7vw,96px) var(--sec);display:grid;gap:40px;align-items:center}
@media (min-width:960px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:56px}}
.h1{font-size:var(--t-h1);line-height:1.12;font-weight:800;text-wrap:balance}
.cta,.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.cta{margin-top:32px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:540px;margin-top:40px;border-top:1px solid var(--rule)}
.stats div{padding-top:14px;display:grid;gap:2px}
.stats div+div{border-inline-start:1px solid var(--rule);padding-inline-start:16px}
.stats b{font-size:var(--t-stat);font-weight:800;line-height:1.15}
.stats span{font-size:var(--t-cap);color:var(--ink-2)}
.fresh{margin-top:16px;display:flex;align-items:center;gap:8px;font-size:var(--t-cap);color:var(--ink-2)}
.fresh i{flex:none;width:7px;height:7px;border-radius:4px;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}

/* ===== Hairline figures sit on opaque plates, never on glass ===== */
.fig-card{border-radius:var(--r-lg);overflow:hidden;background:var(--fig-plate);box-shadow:var(--ring)}
.fig{width:100%;aspect-ratio:5/4;--hairline-plate:var(--fig-plate);--hairline-hi:var(--fig-hi);--hairline-edge:var(--fig-edge);--hairline-mid:var(--fig-mid);--hairline-lo:var(--fig-lo);--hairline-stroke:.9}
@media (max-width:959px){.answer{max-width:560px}}

/* ===== The hero's picture: the answer itself ===== */
.answer{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--ring);padding:16px;display:grid;gap:12px;margin:0}
@media (min-width:700px){.answer{padding:20px}}
.answer .ans{font-size:var(--t-sm);font-weight:500}
.answer div.folio{padding:16px}
@media (min-width:700px){.answer div.folio{padding:20px}}
.answer .cap-ex{padding-inline:4px}
/* The card's title leads to the whole article (the text below is clamped) */
.qh h3 a,.qh .qt a{color:inherit}
/* The card holds the whole stored text (official(), byte for byte) and shows its opening, as the
   prototype does; the first clause is the one the answer points to (Article 28's «أ-»). Only a clause
   paragraph (official()'s .p.clause) lights: a text split another way shows no highlight, never a wrong one. */
.answer .sheet-text>.p.clause:nth-child(2) .ln{background:linear-gradient(var(--blue-soft),var(--blue-soft)) no-repeat right/100% 100%;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone;animation:hl 1.4s var(--ease) .6s both}
@keyframes hl{from{background-size:0% 100%}to{background-size:100% 100%}}
.answer .law{max-height:13em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
@media (max-width:699px){.answer .law{max-height:8.4em;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}}

/* ===== How it answers: three pictures ===== */
.vig{display:grid;gap:16px}
@media (min-width:900px){.vig{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.vig li{display:grid;gap:14px;align-content:start}
.vig .pic{height:176px;border-radius:var(--r-lg);background:var(--band);box-shadow:inset 0 0 0 1px var(--rule-2);padding:20px;display:grid;align-content:center;gap:10px;overflow:hidden}
.vig h3{font-size:var(--t-h3);font-weight:700;line-height:1.35;display:flex;align-items:center;gap:10px}
.vig h3+p{margin-top:-6px;font-size:var(--t-sm);color:var(--ink-2);text-wrap:pretty}
.vig .no{width:26px;height:26px;border-radius:13px;font-size:var(--t-12);background:var(--page);flex:none}
.bub{justify-self:start;background:var(--card);border-radius:18px 18px 6px 18px;padding:10px 16px;font-size:var(--t-sm);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.typing{justify-self:end;display:flex;gap:4px;padding:10px 14px;border-radius:18px 18px 18px 6px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.typing i{width:6px;height:6px;border-radius:3px;background:var(--ink-3);animation:dot 1.2s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.node{justify-self:start;display:inline-flex;align-items:center;gap:8px;background:var(--card);border-radius:12px;padding:8px 12px;font-weight:700;font-size:var(--t-sm);box-shadow:inset 0 0 0 1.5px var(--blue)}
.tree{display:grid;gap:8px;margin-inline-start:18px;padding-inline-start:16px;position:relative}
.tree::before{content:"";position:absolute;right:0;top:-10px;bottom:16px;border-inline-start:1px solid var(--ink-3)}
.tree li{position:relative;display:inline-flex;align-items:center;gap:8px;justify-self:start;background:var(--card);border-radius:10px;padding:6px 10px;font-size:var(--t-cap);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tree li::before{content:"";position:absolute;right:-16px;top:50%;width:14px;border-top:1px solid var(--ink-3)}
.q-line{font-family:var(--law);font-size:19px;line-height:1.9;background:var(--card);border-radius:12px;padding:10px 14px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.stamp{justify-self:start;display:inline-grid;gap:0;padding:8px 14px;border-radius:10px;border:1.5px solid var(--blue);color:var(--blue-ink);transform:rotate(-2deg);background:var(--card)}
.stamp span{font-family:var(--law);font-size:15px;font-weight:700;line-height:1.4}
.stamp b{font-size:var(--t-cap);font-weight:600}

/* ===== Why: two answers to one question ===== */
.vs{display:grid;gap:16px;margin-bottom:24px}
.vs+.sub{margin:0 0 24px}
@media (min-width:760px){.vs{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.vs-card{margin:0;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--ring);padding:20px;display:grid;gap:12px;align-content:start}
.vs-card figcaption{display:flex;align-items:center;gap:10px;font-weight:800;font-size:var(--t-body)}
.vs-card figcaption em{font-style:normal;font-weight:400;font-size:var(--t-cap);color:var(--ink-2);margin-inline-start:auto}
.vs-k{width:26px;height:26px;border-radius:13px;display:grid;place-items:center;flex:none}
.us .vs-k{background:var(--blue-soft);color:var(--blue-ink)}
.them .vs-k{background:var(--fill);color:var(--ink-2)}
/* the outline is the card's only (the compare table's header cell is .us too) */
.vs-card.us{box-shadow:var(--ring),inset 0 0 0 1.5px var(--blue)}
.mini-ask{justify-self:start;background:var(--fill);border-radius:16px 16px 6px 16px;padding:8px 14px;font-size:var(--t-sm);font-weight:600}
.mini-q{font-family:var(--law);font-size:19px;line-height:1.9}
.sk{display:grid;gap:10px;padding-block:8px}
.sk i{display:block;height:10px;border-radius:5px;background:var(--fill)}
.sk i:nth-child(2){width:86%}.sk i:nth-child(3){width:58%}
.pill-c{justify-self:start;display:inline-flex;align-items:center;gap:8px;height:30px;padding-inline:12px;border-radius:15px;background:var(--blue-soft);color:var(--blue-ink);font-size:var(--t-cap);font-weight:600}
.pill-c.q{background:none;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule);font-weight:400}
.more-d summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue-ink);margin-bottom:8px;border-radius:var(--r-sm)}
.more-d summary::-webkit-details-marker{display:none}
.more-d summary svg{transition:transform .25s var(--ease)}
.more-d[open] summary svg{transform:rotate(180deg)}

/* ===== The explorer: a phone pushes into a layer; iPad and desktop show a sidebar and a pane.
   Without JavaScript every view shows, in order (each is a section with its own heading); site.js
   adds .js to .ex and then data-view picks the one view. ===== */
.ex{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--ring);overflow:hidden}
.ex-grid{display:flex;flex-direction:column}
.side,.pane{display:contents}
.lawh{order:1;padding:20px 20px 0}
.lawh h3{font-size:var(--t-h3);font-weight:800;line-height:1.35;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lawh p{font-size:var(--t-sm);color:var(--ink-2)}
.lawh .gz{font-size:var(--t-cap);color:var(--ink-2);margin-top:6px;display:flex;align-items:flex-start;gap:8px;line-height:1.6}
.lawh .gz svg{margin-top:3px;color:var(--ink-3);flex:none}
.back{order:0;display:none;min-height:44px;align-items:center;gap:2px;color:var(--blue-ink);font-size:var(--t-body);margin:8px 10px 0;padding-inline:6px;border-radius:var(--r-sm)}
.back:hover{background:var(--blue-soft)}
.pane-h{order:2;display:none;padding:4px 20px 0}
.pane-h h4{font-size:var(--t-h3);font-weight:800;line-height:1.35;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pane-h p{font-size:var(--t-sm);color:var(--ink-2);margin-top:2px}
.view{order:3;display:block;padding:0 16px}
.ex.js .view{display:none}
.ex.js[data-view="ov"] .view.ov,.ex.js[data-view="a"] .view.a,.ex.js[data-view="p"] .view.p,.ex.js[data-view="r"] .view.r,.ex.js[data-view="u"] .view.u{display:block}
.tracker{order:4;margin:16px 16px 0;padding:12px;border-radius:var(--r-md);background:var(--band);display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.tracker label{font-size:var(--t-cap);color:var(--ink-2);display:flex;align-items:center;gap:6px}
.tracker .row2{display:flex;gap:8px;align-items:center;min-width:0}
.tracker select{flex:1;min-width:0;height:44px;border-radius:22px;border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);padding-inline:16px 36px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(-45deg,transparent 50%,var(--ink-2) 50%);background-position:18px 20px,23px 20px;background-size:5px 5px;background-repeat:no-repeat;font-size:var(--t-sm);cursor:pointer}
.tracker select:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.tracker.on select{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue-ink);font-weight:600}
.clear{width:44px;height:44px;border-radius:22px;display:none;place-items:center;color:var(--ink-2);background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.clear:hover{color:var(--ink)}
.tracker.on .clear{display:grid}
.layers{order:5;margin:8px 16px 12px}
.layer{position:relative;width:100%;min-height:52px;display:flex;align-items:center;gap:12px;padding-inline:8px;border-bottom:1px solid var(--rule);border-radius:0;font-size:var(--t-body);transition:background-color .15s}
.layers .layer:last-child{border-bottom:0}
.layer:hover{background:color-mix(in srgb,var(--fill) 55%,transparent)}
.layer .lbl{flex:1}
.layer .n.t{background:var(--blue-soft);color:var(--blue-ink)}
.layer .chev{color:var(--ink-3);flex:none}
.layer.ov{display:none}
.ex.js[data-view]:not([data-view="ov"]) .back{display:inline-flex}
.ex.js[data-view]:not([data-view="ov"]) .pane-h{display:block}
.ex.js[data-view]:not([data-view="ov"]) .lawh,.ex.js[data-view]:not([data-view="ov"]) .tracker,.ex.js[data-view]:not([data-view="ov"]) .layers{display:none}
@media (min-width:820px){
  .ex-grid{display:grid;grid-template-columns:304px minmax(0,1fr)}
  .side{display:flex;flex-direction:column;background:var(--side);border-inline-end:1px solid var(--rule);padding:24px 16px}
  .pane{display:block;padding:24px 32px 32px}
  .lawh{padding:0 8px}
  .tracker{margin:20px 0 0}
  .layers{margin:16px 0 0}
  .layer{min-height:44px;border-bottom:0;border-radius:var(--r-sm);margin-top:2px}
  .layer.ov{display:flex}
  .layer .chev{display:none}
  .layer[aria-current="true"]{background:var(--blue-soft);color:var(--blue-ink)}
  .layer[aria-current="true"] .lbl{font-weight:700}
  .layer[aria-current="true"] .n{background:var(--card)}
  .back{display:none!important}
  .pane-h{display:block!important;padding:0}
  .view{padding:0}
  .ex.js[data-view]:not([data-view="ov"]) .lawh,.ex.js[data-view]:not([data-view="ov"]) .tracker,.ex.js[data-view]:not([data-view="ov"]) .layers{display:revert}
  .ex.js[data-view]:not([data-view="ov"]) .layers{display:block}
  .ex.js[data-view]:not([data-view="ov"]) .tracker{display:grid}
}
/* The server-rendered explorer (partials/explorer.html). Each view carries its own heading (a .pane-h
   inside the view). Without JavaScript (.ex without .js) every view shows under its heading; what only
   works with JavaScript is not shown: the tracker, the layer rows, and the drawer figure's plate
   (figures.js draws it). A row is a native <details class="row"> whose <summary> is the .rh: closed,
   it opens with or without JavaScript. */
.view>.pane-h{padding:4px 4px 0}
.ex:not(.js) .pane-h{display:block}
.ex:not(.js) .view>.pane-h{padding-top:24px}
.ex:not(.js) .tracker,.ex:not(.js) .layers,.ex:not(.js) .pend-top .fig-card{display:none}
details.row>summary.rh{list-style:none;cursor:pointer}
details.row>summary.rh::-webkit-details-marker{display:none}
details.row[open] .rx{grid-template-rows:1fr}
details.row[open]>.rh svg{transform:rotate(180deg)}
@media (min-width:820px){.view>.pane-h,.ex:not(.js) .view>.pane-h{padding:0}.ex:not(.js) .view+.view{margin-top:40px}}
/* Bars as the view model sizes them (6 + n/max × 78; 60 on a phone) until site.js draws them, and without it */
.br{height:calc(6px + var(--h,0) * 78px)}
.zone.p .maxl{top:88px}
@media (max-width:699px){.br{height:calc(6px + var(--h,0) * 60px)}.zone.p .maxl{top:70px}}
/* An article chip is a link: the article's page without JavaScript, the tracker with it */
.arts .art{color:var(--ink)}
.arts .art:hover{text-decoration:none}
/* A related law's row: how LOB links it (when the layer's name does not say it), then its title, one
   link stretched over the row (to LOB, ↗, when the law has no page here) */
.rr{position:relative}
.rr .t .kind{margin:0 0 4px;font-weight:600;color:var(--blue-ink)}
.rr .t a{color:var(--ink)}
.rr .t a::after{content:"";position:absolute;inset:0}
.rr:hover .t a{color:var(--blue-ink)}
@media print{.ex .pane-h{display:block!important}.ex .rh>svg,.ex .pend-top .fig-card{display:none!important}}

/* ===== The chart: an instrument. Everything inside .cb shares one box, so marks, ticks and the needle agree ===== */
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--t-cap);color:var(--ink-2);margin:16px 0 0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.chart{position:relative;padding:44px 16px 0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline-offset:4px;border-radius:var(--r-md)}
.chart.drag{cursor:grabbing}
.cb{position:relative}
.zone{position:relative}
.zone.a{height:88px}
.zone.p{height:96px}
.cb .grid{position:absolute;inset:0 0 28px;pointer-events:none}
.cb .grid span{position:absolute;top:0;bottom:0;width:0;border-inline-start:1px solid var(--rule-2);transform:translateX(50%)}
.cb .line{position:relative;height:2px;background:var(--ink);border-radius:1px}
.cb .line .tk{position:absolute;top:2px;width:1px;height:4px;background:var(--ink);opacity:.22;transform:translateX(50%)}
.cb .line .tk.mj{height:7px;opacity:.5}
.cb .line .born{position:absolute;right:0;top:-5px;width:12px;height:12px;border-radius:6px;background:var(--ink);transform:translateX(50%);box-shadow:0 0 0 3px var(--card)}
.cb .line .now{position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:5px;background:var(--card);box-shadow:inset 0 0 0 2px var(--ink);transform:translateX(-50%)}
.cb .years{position:relative;height:28px}
.yr{position:absolute;top:8px;transform:translateX(50%);font-size:var(--t-12);color:var(--ink-2);white-space:nowrap;line-height:1}
.yr.mj{font-weight:600}
.yr.now{transform:translateX(-50%);left:0;right:auto;color:var(--ink);font-weight:600}
.yr.born{color:var(--ink);font-weight:600}
.yr.minor{display:none}
@media (min-width:700px){.yr.minor{display:block}}
.mk{position:absolute;bottom:0;transform:translateX(50%);display:flex;flex-direction:column;align-items:center;transition:opacity .2s}
.mk .sq{display:block;border-radius:3px;background:var(--amber);transition:box-shadow .2s,background-color .2s}
.mk.h .sq{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--amber)}
.mk.u .sq{background:var(--card);box-shadow:none;border:1.5px dashed var(--amber)}
.mk .stem{display:block;width:1px;background:var(--amber);opacity:.45}
.mk .badge{position:absolute;bottom:100%;margin-bottom:3px;font-size:var(--t-12);line-height:1;font-weight:700;color:var(--amber)}
.mk.sel .sq{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--blue)}
.mk.h.sel .sq{box-shadow:inset 0 0 0 1.5px var(--amber),0 0 0 2px var(--card),0 0 0 3.5px var(--blue)}
.br{position:absolute;top:4px;transform:translateX(50%);width:8px;border-radius:0 0 4px 4px;background:var(--bar);transition:height .3s var(--ease),opacity .2s,background-color .2s}
.br.sel{background:var(--blue)}
.dim{opacity:.16}
.maxl{position:absolute;inset-inline:0;height:0;border-top:1px dashed var(--rule);transition:top .3s var(--ease)}
.maxl b{position:absolute;top:-20px;transform:translateX(50%);white-space:nowrap;font-size:var(--t-12);font-weight:500;color:var(--ink-2);background:var(--card);padding-inline:4px 0}
.thread{position:absolute;inset:0 0 auto;height:88px;width:100%;overflow:visible;pointer-events:none}
.thread path{fill:none;stroke:var(--blue);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--ease)}
.thread.off path{stroke-dashoffset:1}
.knot{position:absolute;top:-4px;width:10px;height:10px;border-radius:5px;background:var(--blue);box-shadow:0 0 0 2.5px var(--card);transform:translateX(50%);z-index:2}
.needle,.ghost{position:absolute;top:-30px;bottom:28px;width:0;transform:translateX(50%);pointer-events:none;z-index:3}
.needle{border-inline-start:1.5px solid var(--blue);transition:right .14s var(--ease)}
.chart.drag .needle,.chart.drag .br,.chart.drag .mk{transition:none}
.needle b{position:absolute;top:-4px;right:50%;transform:translate(50%,-50%);display:inline-flex;align-items:center;gap:4px;background:var(--blue);color:var(--on-blue);font-size:var(--t-12);font-weight:700;line-height:24px;padding-inline:7px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.18);font-variant-numeric:tabular-nums}
.needle b svg{opacity:.8}
.ghost{border-inline-start:1px dashed var(--ink-3);display:none}
.ghost b{position:absolute;top:-4px;right:50%;transform:translate(50%,-50%);background:var(--card);color:var(--ink-2);font-size:var(--t-12);line-height:20px;padding-inline:6px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--rule);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.chart:hover .ghost.show{display:block}}
@media (max-width:699px){.zone.a{height:64px}.zone.p{height:76px}.thread{height:64px}.br{width:5px}}
/* the record of the chosen year, right under the needle */
.ro{margin-top:16px;border-radius:var(--r-md);background:var(--band);padding:16px 18px;display:grid;gap:4px 24px;min-height:120px;align-content:start}
.ro-y{display:grid;align-content:start}
.ro-y b{font-size:var(--t-stat);font-weight:800;line-height:1.1}
.ro-y span{font-size:var(--t-cap);color:var(--ink-2)}
.ro-b{display:grid;gap:6px;align-content:start}
.ro-sum{font-size:var(--t-sm);font-weight:600}
.ro li{display:flex;align-items:flex-start;gap:8px;font-size:var(--t-sm);line-height:1.6}
.ro li .sym{margin-top:3px}
.ro .eg{font-size:var(--t-cap);color:var(--ink-2)}
@media (min-width:700px){.ro{grid-template-columns:150px minmax(0,1fr);padding:20px 24px}}

/* ===== Lists: one row language everywhere (the explorer's layers and the doc pages); details open in place ===== */
.rows{margin-top:12px;border-top:1px solid var(--rule)}
.row{border-bottom:1px solid var(--rule)}
.rh{width:100%;min-height:64px;display:grid;grid-template-columns:56px minmax(0,1fr) 16px;column-gap:12px;align-items:center;padding:10px 8px;margin-inline:-8px;width:calc(100% + 16px);border-radius:var(--r-sm);transition:background-color .15s}
.rh:hover{background:color-mix(in srgb,var(--fill) 55%,transparent)}
.rh .y,.rw .y{font-weight:800;font-size:var(--t-body);font-variant-numeric:tabular-nums}
.rh .t{font-size:var(--t-sm);line-height:1.45;display:grid;gap:4px}
.rh .t small{display:flex;align-items:center;gap:8px;font-size:var(--t-cap);color:var(--ink-2)}
.track{width:80px;height:4px;border-radius:2px;background:var(--fill);flex:none;position:relative;overflow:hidden}
.track i{position:absolute;inset-block:0;right:0;border-radius:2px;background:var(--amber)}
.track.u{background:none;border:1px dashed var(--amber);height:6px;width:24px}
.rh svg{color:var(--ink-3);transition:transform .25s var(--ease)}
.rx{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.rx>div{overflow:hidden}
.rx-in{padding:0 0 16px;padding-inline-start:68px;display:grid;gap:10px}
.arts{display:flex;flex-wrap:wrap;gap:0 6px}
.arts .art{height:44px;display:inline-flex;align-items:center;cursor:pointer}
.arts .art span{height:30px;display:inline-flex;align-items:center;padding-inline:12px;border-radius:15px;background:var(--fill);font-size:var(--t-cap);font-variant-numeric:tabular-nums;transition:background-color .15s,color .15s}
.arts .art:hover span{background:var(--fill-2)}
.arts .art.hit span{background:var(--blue);color:var(--on-blue)}
.lob{font-size:var(--t-cap);color:var(--ink-2)}
.hint2{font-size:var(--t-cap);color:var(--ink-2)}
.grp{margin-top:20px;font-size:var(--t-cap);font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.grp:first-child{margin-top:12px}
.grp em{font-style:normal;font-weight:400}
.rr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding-block:14px;border-bottom:1px solid var(--rule)}
.rr .t{font-size:var(--t-sm);line-height:1.5}
.rr .t small{display:block;font-size:var(--t-cap);color:var(--ink-2);margin-top:2px}
.rr .t mark{background:var(--blue-soft);color:var(--blue-ink);border-radius:4px;padding-inline:3px}
.ur{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:12px;align-items:start;padding-block:12px;border-bottom:1px solid var(--rule);font-size:var(--t-sm);line-height:1.5}
.ur .sym{margin-top:3px}
.ur .y{font-size:var(--t-cap);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pend-top{display:grid;gap:16px;margin-top:12px}
@media (min-width:700px){.pend-top{grid-template-columns:200px minmax(0,1fr);align-items:center}}
.pend-top .fig-card{box-shadow:0 0 0 1px var(--rule)}
.pend-top .fig{aspect-ratio:4/3}
.pend-top p{font-size:var(--t-sm);color:var(--ink-2)}
.pend-top b{color:var(--ink)}
.note{margin-top:12px;font-size:var(--t-cap);color:var(--ink-2)}
.ex-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;padding:4px 20px;border-top:1px solid var(--rule);font-size:var(--t-cap);color:var(--ink-2)}
.ex-foot a{min-height:44px;display:inline-flex;align-items:center;font-size:var(--t-sm)}
@media (min-width:820px){.ex-foot{padding-inline:32px}}

/* ===== Steps (access), the answer's parts, the quote ===== */
.steps{display:grid}
.step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;position:relative;padding-bottom:28px}
.step:last-child{padding-bottom:0}
.step:not(:last-child)::after{content:"";position:absolute;right:15px;top:34px;bottom:4px;width:1px;background:var(--rule)}
.no{width:30px;height:30px;border-radius:15px;box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue-ink);display:grid;place-items:center;font-size:var(--t-cap);font-weight:800;background:var(--page)}
.band .no{background:var(--band)}
.step h3{font-size:var(--t-h3);font-weight:700;line-height:1.35;margin-top:1px}
.step p{font-size:var(--t-sm);color:var(--ink-2);margin-top:4px}
.tag{font-size:var(--t-cap);color:var(--ink-2);display:flex;align-items:center;gap:8px}
.tag i{width:6px;height:6px;border-radius:3px;background:var(--ink-3)}
.answer .ask{display:block;justify-self:start;background:var(--fill);border-radius:20px 20px 6px 20px;padding:12px 18px;max-width:90%;font-weight:600;box-shadow:none}
.ans{text-wrap:pretty}
.ref{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue-ink);font-size:var(--t-12);font-weight:700;line-height:1;vertical-align:2px;margin-inline:4px}
/* The quote, dressed as a folio of the Official Gazette: div.folio (the prototype) and .sheet (an
   article's text, a preamble, the privacy page) are one surface: paper, a running head, the text. */
div.folio,.sheet{border-radius:var(--r-md);background:var(--band);box-shadow:none;padding:20px;display:grid;gap:12px}
@media (min-width:700px){div.folio,.sheet{padding:24px 28px}}
/* p.folio is folio()'s «الجريدة الرسمية · العدد … · ص … · date», drawn as the prototype's mast: the title
   (Amiri), then issue, page and date as one span at the far end, or under the title when the sheet is narrow */
p.folio{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding-bottom:10px;border-bottom:3px double var(--rule);font-size:var(--t-cap);line-height:1.6;color:var(--ink-2);font-variant-numeric:tabular-nums}
p.folio>span:first-child{font-family:var(--law);font-size:20px;font-weight:700;line-height:1.3;color:var(--ink)}
p.folio>span:first-child+span{display:none}
.qh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.qh h3,.qh .qt{margin:0;font-family:var(--law);font-size:20px;font-weight:700;line-height:1.4}
.qh h3 small,.qh .qt small{display:block;font-family:var(--ui);font-size:var(--t-cap);color:var(--ink-2);font-weight:400}
.qh .chips{display:flex;gap:6px}
.cite{font-size:var(--t-cap);color:var(--ink-2);border-inline-start:2px solid var(--blue);padding-inline-start:12px}
.facts{display:grid;margin-top:var(--head);border-top:1px solid var(--rule)}
.facts div{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 12px;padding-block:16px;border-bottom:1px solid var(--rule);font-size:var(--t-sm);color:var(--ink-2)}
.facts svg{color:var(--ink-2);grid-row:span 2;margin-top:4px}
.facts b{color:var(--ink);font-weight:700;font-size:var(--t-body)}
@media (min-width:700px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
@media (min-width:1100px){.facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;border-top:0}.facts div{border-bottom:0;border-top:1px solid var(--rule)}}

/* ===== The law's words: Amiri, 19 for text and 20 for headings (app/official.py wraps, never edits) ===== */
.law{font-family:var(--law);font-size:19px;line-height:2}
/* A paragraph per finished sentence (a line cut mid-sentence flows on); a clause hangs its letter in the margin */
.sheet-text{--hang:2.2em}
.sheet-text .p{display:block}
.sheet-text .p.clause{padding-inline-start:var(--hang);margin-top:.4em}
.sheet-text .p.cont{padding-inline-start:var(--hang)}
.sheet-text .cl{display:inline-block;width:var(--hang);margin-inline-start:calc(-1 * var(--hang));color:var(--ink-2);font-weight:700}
/* the stored spacing is shown as stored; long words wrap on narrow screens */
.sheet-text .ln{white-space:pre-wrap;overflow-wrap:anywhere}
/* «…» at the end of an excerpt is read, not decoration */
.ell{color:var(--ink-2)}

/* ===== The difference, and the limits ===== */
.cmp{background:var(--card);border-radius:20px;box-shadow:var(--ring);overflow:hidden}
.cr{display:grid;gap:6px;padding:16px 18px;border-top:1px solid var(--rule)}
.cr:first-child{border-top:0}
.cr .k{font-weight:800}
.cr .a,.cr .b{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm)}
.cr .a{color:var(--ink-2)}
.cr .a svg{color:var(--ink-3);flex:none;margin-top:5px}
.cr .b svg{color:var(--blue);flex:none;margin-top:5px}
.cr em{font-style:normal;color:var(--ink-2);font-size:var(--t-cap);margin-inline-end:6px}
.cr.hd{display:none}
@media (min-width:760px){
  .cr{grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);gap:24px;padding:0 28px;align-items:stretch}
  .cr>span{padding-block:18px}
  .cr .b{background:var(--blue-soft);margin-block:0;padding-inline:16px;margin-inline:-12px;font-size:var(--t-body)}
  .cr .a{font-size:var(--t-body)}
  .cr em{display:none}
  .cr.hd{display:grid;font-size:var(--t-cap);color:var(--ink-2)}
  .cr.hd>span{padding-block:14px}
  .cr.hd .us{color:var(--blue-ink);font-weight:700;background:var(--blue-soft)}
}
/* «وما لا يفعله» is a details.more-d like «قارن في 5 نقاط», open from the start; its summary reads as the
   prototype's heading */
.lim{margin-top:var(--head)}
.lim>summary{font-size:var(--t-h3);color:var(--ink)}
.lim ul{display:grid}
@media (min-width:760px){.lim ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
.lim li{display:flex;gap:12px;align-items:flex-start;padding-block:14px;border-top:1px solid var(--rule);font-size:var(--t-sm);color:var(--ink-2)}
.lim li svg{color:var(--ink-3);flex:none;margin-top:5px}

/* ===== Get access: the form keeps its fields (name optional, email, phone with +962) ===== */
.acc{display:grid;gap:40px}
@media (min-width:900px){.acc{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:80px;align-items:start}}
.acc .fig-card{max-width:400px;margin-bottom:32px}
.acc .fig{aspect-ratio:16/10}
/* The same form as a section above the footer on every other page: heading + promise beside the form from 1024px */
.acx{display:grid;gap:32px}
@media (min-width:1024px){.acx{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:80px;align-items:start}}
.acs{scroll-margin-top:72px}
.acp{padding-block:var(--sec)}
.acp .form{margin-top:32px}
.compat{display:flex;align-items:center;gap:12px;margin-top:32px;padding-top:20px;border-top:1px solid var(--rule);font-size:var(--t-sm);color:var(--ink-2)}
.compat b{color:var(--ink);font-weight:700}
.form{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--ring);padding:24px;display:grid;gap:18px}
@media (min-width:700px){.form{padding:32px}}
.form h3{font-size:var(--t-h3);font-weight:800}
.form>p.cap0{font-size:var(--t-sm);color:var(--ink-2);margin-top:-12px}
/* After a sign-up: the form's card holds the confirmation */
.sent{gap:8px;place-items:start}
.sent .okb{width:44px;height:44px;border-radius:22px;background:var(--green-soft);color:var(--green);display:grid;place-items:center}
.field{display:grid;gap:6px}
.field label{font-size:var(--t-sm);font-weight:600}
.field label i{font-style:normal;color:var(--ink-2);font-weight:400}
.field input,.field select{height:48px;width:100%;border-radius:12px;border:0;box-shadow:inset 0 0 0 1px var(--rule);background:var(--page);padding-inline:14px;transition:box-shadow .15s}
.field input:hover,.field select:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.field input:focus,.field select:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 4px var(--blue-soft)}
.field input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--amber)}
.phone{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:8px}
.phone select{direction:ltr}
.phone input{direction:ltr;text-align:right}
.field .cap{font-size:var(--t-cap);color:var(--ink-2)}
.err{font-size:var(--t-cap);color:var(--amber)}
.form .btn{height:50px;width:100%;border-radius:25px;background:var(--blue);color:var(--on-blue);font-weight:700;text-align:center;transition:filter .15s}
.form-note{font-size:var(--t-cap);color:var(--ink-2)}

/* ===== The finder: one rounded field with its button inside (the footer's .find, the site's .finder form) ===== */
.finder,.find{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:26px;box-shadow:var(--ring);padding:4px;padding-inline-start:16px;max-width:560px}
.find{margin-top:24px}
.finder:focus-within,.find:focus-within{box-shadow:var(--ring),inset 0 0 0 1.5px var(--blue),0 0 0 4px var(--blue-soft)}
.finder svg,.find svg{color:var(--ink-2);flex:none}
.finder input,.find input{flex:1;min-width:0;border:0;background:transparent;height:44px;outline:none;-webkit-appearance:none;appearance:none}
.finder input::-webkit-search-cancel-button{display:none}
.finder .btn,.find button{height:44px;min-height:44px;border-radius:22px;background:var(--blue);color:var(--on-blue);padding-inline:20px;font-weight:600;transition:filter .15s}
.find button:hover{filter:brightness(1.08)}.find button:active{filter:brightness(.92)}

/* ===== Footer: browsing by kind is the one place the counts appear in full ===== */
.ft{background:var(--band);padding-block:var(--sec) 0;overflow:hidden}
.ft>.wrap{padding-bottom:28px}
.kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px;max-width:560px}
/* a kind tile (footer) and a year tile (/k/…): one tile */
.kinds .kind,nav.years a{background:var(--card);border-radius:var(--r-md);padding:14px;display:grid;gap:2px;color:var(--ink);box-shadow:0 0 0 1px var(--rule-2);transition:box-shadow .2s}
.kinds .kind:hover,nav.years a:hover{text-decoration:none;box-shadow:var(--ring)}
.kinds .kind b,nav.years b{font-size:var(--t-h3);font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}
.kinds .kind span,nav.years span{font-size:var(--t-cap);color:var(--ink-2)}
.kinds .kind em{font-style:normal;font-size:var(--t-cap);color:var(--blue-ink);margin-top:6px}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;margin-top:56px}
@media (min-width:900px){.cols{grid-template-columns:2fr 1fr 1fr}}
.cols h3{font-size:var(--t-sm);font-weight:800;margin-bottom:4px}
.cols a{display:block;min-height:44px;font-size:var(--t-sm);color:var(--ink-2);padding-block:11.5px;line-height:1.4;transition:color .15s}
.cols a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* the ring is the site's (:focus-visible above), shaped to the link */
.cols a:focus-visible{border-radius:6px}
/* On phones site.js folds each link column under its title (a button it makes there, with a chevron that turns); on
   wider screens and without JavaScript a column is a heading over an open list. */
@media (max-width:639.98px){
  .cols.folds{grid-template-columns:minmax(0,1fr);gap:0;margin-top:40px;border-top:1px solid var(--rule)}
  .cols.folds h3{margin:0}
  .cols.folds>div{border-bottom:1px solid var(--rule)}
  .cols.folds ul{padding-bottom:12px}
  .fold{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .fold::after{content:"";flex:none;width:8px;height:8px;margin-inline-end:4px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
  .fold[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
}
.cols .pop{grid-column:1/-1}
.cols .pop ul{columns:2;column-gap:24px}
@media (min-width:900px){.cols .pop{grid-column:auto}}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--rule);font-size:var(--t-cap);color:var(--ink-2);display:grid;gap:4px}
@media (min-width:900px){.legal{display:flex;justify-content:space-between;gap:4px 24px}}
.wm{margin-top:24px;font-size:clamp(48px,12vw,168px);font-weight:900;line-height:1;color:var(--fill);white-space:nowrap;overflow:hidden}

/* ===== The page's last part: the Gazette pages (base.html .gaz, site.js). A stack of Official Gazette folios, where
   every text on this site comes from: each sheet is the hero card's (div.folio, p.folio, .qh, .law, .cite) on paper.
   Without JavaScript it stands still, Article 28 on top (the last page). site.js puts the cover on top, lifts and
   spreads the pages under a pointer (--fan, on the deck), and turns one page per tap toward the spine on the right,
   as an Arabic book turns; Article 28 comes last, with its citation and the call to action. The height is fixed:
   nothing around it ever moves. Reduced motion: nothing fans or glides; a tap turns a page at once. ===== */
@property --fan{syntax:"<number>";inherits:true;initial-value:0}
.gaz{--pw:min(460px,calc(100vw - 2 * var(--gut) - 28px));--ph:372px;padding-block:8px 48px;overflow:hidden}
@media (min-width:700px){.gaz{--ph:336px}}
.gaz-stage{position:relative;height:calc(var(--ph) + 56px);perspective:1200px;perspective-origin:50% 40%}
.gaz-deck{position:absolute;top:16px;left:50%;width:var(--pw);height:var(--ph);margin-left:calc(var(--pw) / -2);transform-style:preserve-3d;
  transition:translate .9s var(--ease);touch-action:pan-y;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none}
.gaz.js .gaz-deck{cursor:pointer}
/* once a page has turned, a wide screen centres the spread (the turned pages lie beyond the spine); a phone keeps the
   page being read in the middle, and the turned ones go off its edge */
@media (min-width:1000px){.gaz.open .gaz-deck{translate:calc(var(--pw) / -2) 0}}
/* a page: its depth in the stack (--d, 0 on top) sets it a little down and to the left of the one above; the pointer's
   --fan lifts its free edge about the spine, the top page most */
.gaz-page{--d:0;position:absolute;inset:0;transform-style:preserve-3d;transform-origin:100% 50%;
  transform:translate3d(calc(var(--d) * (-5px - var(--fan) * .6px)),calc(var(--d) * 5px),calc(var(--d) * -3px)) rotateY(calc(var(--fan) * max(0, 1 - var(--d) * .3) * 1deg));
  transition:transform .55s var(--ease)}
.gaz-page:nth-last-child(2){--d:1}.gaz-page:nth-last-child(3){--d:2}.gaz-page:nth-last-child(4){--d:3}.gaz-page:nth-last-child(5){--d:4}
.gaz-page.turned{transform:translate3d(0,calc(var(--d) * 3px),calc(var(--d) * -3px)) rotateY(180deg);transition-duration:1s}
.gaz.still .gaz-page,.gaz.hint .gaz-page{transition:none}
.gaz-page>.folio,.gaz-back{position:absolute;inset:0;margin:0;border-radius:var(--r-md);background:var(--card);overflow:hidden;
  box-shadow:0 0 0 .5px var(--rule),0 1px 2px rgba(0,0,0,.05),0 24px 48px -30px rgba(0,0,0,.42);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.gaz-page>.folio{align-content:start;padding:22px 24px}
/* a turned page's back: paper, with the faint lines of the text on its other side */
.gaz-back{transform:rotateY(180deg);background:repeating-linear-gradient(var(--side) 0 30px,var(--rule-2) 30px 31px) content-box,var(--side);padding:76px 28px 40px}
.gaz p.folio>span:last-child{color:var(--blue-ink)}
.gaz-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;line-height:1.9}
.gaz-mast{font-family:var(--law);font-size:38px;font-weight:700;line-height:1.3;text-align:center;padding-block:20px 16px;border-bottom:3px double var(--rule)}
.gaz-cover .sk{padding-block:12px 0}
.gaz-cover .sk i:nth-child(5){width:92%}.gaz-cover .sk i:nth-child(6){width:70%}.gaz-cover .sk i:nth-child(7){width:84%}
/* the hint, before any hand: the top page lifts its edge and settles (only while the band shows: site.js) */
.gaz.hint .gaz-deck{animation:gaz-hint 5s var(--ease) infinite}
@keyframes gaz-hint{0%,40%,100%{--fan:0}58%{--fan:16}72%{--fan:16}}
.gaz-text{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:112px;text-align:center}
@media (min-width:640px){.gaz-text{flex-direction:row;flex-wrap:wrap;gap:12px 24px;min-height:56px}}
.gaz-say{font-size:var(--t-body);font-weight:700;line-height:1.5;text-wrap:balance}
@media (min-width:700px){.gaz-say{font-size:var(--t-h3);line-height:1.4}}
.gaz-cta:not([hidden]){animation:gaz-in .6s var(--ease) both}
@keyframes gaz-in{from{opacity:0;translate:0 8px}}

/* ===== Content pages: a law, an article, a kind, the finder, 404, privacy ===== */
/* One line on every content page says what the site is */
.promise{margin-top:12px;padding:8px 16px;border-radius:var(--r-sm);background:var(--band);font-size:var(--t-cap);line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.promise a{font-weight:600;white-space:nowrap}
.page-top{padding-top:16px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:var(--t-sm);color:var(--ink-2)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{color:var(--ink-2)}
.doc{display:grid;gap:40px;padding-block:24px 64px}
/* An article's page: the reading column, then its connections wider (as a law's page): one seam, not two paddings */
.doc+.doc{padding-top:0}
@media (min-width:700px){.doc{gap:64px}}
.doc>*{min-width:0}
.doc-read{max-width:calc(var(--read) + 32px)}
.doc-law{max-width:calc(880px + 2 * var(--gut))}
.doc section>h2{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:var(--t-h3);font-weight:800;line-height:1.35;margin-bottom:12px}
.doc .lede{margin-top:0}
.doc-head{display:grid;gap:16px}
.kicker{font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.doc-h1{font-size:var(--t-h2);line-height:1.2;font-weight:800;text-wrap:balance}
.h1-sub{display:block;margin-top:8px;font-size:var(--t-h3);line-height:1.5;font-weight:500;color:var(--ink-2)}
/* The facts under a title: label over value, a hairline over each, one row from 700px */
dl.facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:0;border-top:0;background:none;box-shadow:none;border-radius:0}
dl.facts>div{grid-template-columns:minmax(0,1fr);align-content:start;gap:2px;padding-block:12px;border-top:1px solid var(--rule);border-bottom:0;min-width:0}
dl.facts>div:last-child:nth-child(odd){grid-column:1/-1}
dl.facts dt{font-size:var(--t-cap);color:var(--ink-2)}
dl.facts dd{font-size:var(--t-body);font-weight:600;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-wrap:balance}
@media (min-width:700px){dl.facts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 24px}dl.facts>div:last-child:nth-child(odd){grid-column:auto}}
/* The citation, to copy */
.citebox{padding:20px;display:grid;gap:12px}
@media (min-width:700px){.citebox{padding:24px}}
.citebox .lbl{font-size:var(--t-cap);font-weight:600;color:var(--ink-2)}
.citebox .line{font-size:var(--t-sm);line-height:1.7;border-inline-start:2px solid var(--blue);padding-inline-start:12px;-webkit-user-select:all;user-select:all}
/* An article's head: its number drawn as one hairline (decorative: the heading carries the number) */
.art-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 32px;align-items:end}
.art-h{display:grid;gap:16px;padding-bottom:8px}
.art-head>.facts{grid-column:1/-1}
.numeral{display:block;font-family:var(--ui);font-weight:300;font-size:var(--t-h1);line-height:1;color:var(--ink-2);font-variant-numeric:lining-nums;-webkit-user-select:none;user-select:none}
@supports (-webkit-text-stroke:1px black){.numeral{color:transparent;-webkit-text-stroke:.9px var(--ink)}}
@media (max-width:599px){.art-head{grid-template-columns:minmax(0,1fr)}}
.neigh{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
/* The page bar (Apple's local nav) on a law or an article: where you are, the sections, the jump box.
   Liquid Glass, as the control layer; a blue hairline under it fills as you read. */
.lnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:29;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--rule);box-shadow:var(--glass-rim)}
.lnav-in{display:flex;align-items:center;gap:4px 24px;min-height:56px}
.lnav-t{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:0;max-width:40%;font-size:var(--t-body);font-weight:800;color:var(--ink);white-space:nowrap}
/* a long regulation title shrinks to an ellipsis (the h1 holds the whole name); its number never shrinks */
.lnav-t .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lnav-t .mono{flex:none;font-size:var(--t-cap);font-weight:500;color:var(--ink-2)}
.lnav-t .ico{color:var(--blue-ink)}
.lnav-t:hover{text-decoration:none;color:var(--blue-ink)}
.lnav-links{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to left,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(to left,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)}
.lnav-links::-webkit-scrollbar{display:none}
.lnav-links a,.lnav-here{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-inline:12px;border-radius:22px;font-size:var(--t-sm);color:var(--ink-2);white-space:nowrap}
.lnav-links a:hover{color:var(--ink);background:var(--fill);text-decoration:none}
.lnav-links .mono{font-size:var(--t-12);color:var(--ink-2)}
.lnav-here{color:var(--ink);font-weight:600}
@media (max-width:759px){
  .lnav-in{display:grid;grid-template-columns:minmax(0,1fr) auto;padding-block:4px 0}
  .lnav-t{max-width:100%}
  .lnav-links{grid-column:1/-1;margin-inline:-12px}
  .lnav .jump{grid-row:1;grid-column:2}
}
@supports (animation-timeline:scroll()){
  .lnav::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--blue);transform-origin:100% 50%;scale:0 1;animation:jl-progress linear both;animation-timeline:scroll(root block)}
  @keyframes jl-progress{to{scale:1 1}}
}
html:has(.lnav){scroll-padding-top:72px}
@media (max-width:759px){html:has(.lnav){scroll-padding-top:116px}}
/* The jump box: an article number or a word (a plain GET form) */
.jump{display:flex;align-items:center;height:44px;border-radius:22px;background:var(--fill);padding-inline:16px 0;flex:none;transition:box-shadow .15s}
.jump:focus-within{box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 4px var(--blue-soft)}
.jump input{width:6.5em;height:44px;border:0;background:none;font-size:var(--t-sm);outline:none}
.jump input::placeholder{color:var(--on-fill)}
.jump button{width:44px;height:44px;display:grid;place-items:center;border-radius:22px;color:var(--blue-ink)}
.jump button:hover{background:var(--fill-2)}
.doc section>.finder{margin-bottom:12px}
.hits-h{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:12px}
.sec-note{margin:-4px 0 12px;max-width:70ch}
/* A law's table of contents: a printed contents page (heading, title · dotted leader · its articles) */
.toc{padding:8px;margin-block:16px 24px}
.toc-h{font-size:var(--t-cap);font-weight:700;color:var(--ink-2);padding:8px 12px 4px}
.toc ol{columns:2;column-gap:8px}
.toc li{break-inside:avoid}
.toc a{display:grid;grid-template-columns:auto minmax(20px,1fr) auto;grid-template-areas:"head head head" "title lead range";align-items:baseline;gap:0 8px;min-height:56px;padding:8px 12px;border-radius:var(--r-sm);color:var(--ink)}
.toc a:hover{background:color-mix(in srgb,var(--fill) 55%,transparent);text-decoration:none}
.toc-head{grid-area:head;font-size:var(--t-cap);color:var(--ink-2);min-height:1.6em}
.toc-title{grid-area:title;font-size:var(--t-sm);font-weight:600;line-height:1.5}
.toc-lead{grid-area:lead;align-self:center;border-bottom:1.5px dotted var(--ink-3);translate:0 4px}
.toc-range{grid-area:range;font-size:var(--t-cap);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:759px){.toc ol{columns:1}}
/* Rows of the doc pages, in the explorer's row language: a hairline under each, the year at the start */
.rw,.rows>.art,.ch{border-bottom:1px solid var(--rule)}
.rw{display:grid;grid-template-columns:56px minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:64px;padding:10px 8px}
.rw .t{font-size:var(--t-sm);line-height:1.5}
.rw a.t{display:inline-block;padding-block:11px;color:var(--ink)}
.rw a.t:hover{color:var(--blue-ink)}
.rw .s{font-size:var(--t-cap);line-height:1.6;color:var(--ink-2)}
.rw>.chip{justify-self:start}
@media (max-width:599px){
  .rw{grid-template-columns:48px minmax(0,1fr)}
  .rw>:last-child:not(:nth-child(2)){grid-column:2}
}
/* A law's articles index: the number, the opening of its text in two lines, the whole row a link */
.rows>.art{position:relative;display:grid;grid-template-columns:6.2em minmax(0,1fr) 16px;gap:4px 16px;align-items:start;padding:12px 8px;transition:background-color .15s}
.rows>.art:has(a):hover{background:color-mix(in srgb,var(--fill) 55%,transparent)}
.art-n{font-size:var(--t-sm);font-weight:700;line-height:2.5;white-space:nowrap}
.art-n a{color:var(--ink)}
.art-n a::after{content:"";position:absolute;inset:0}
.rows>.art:has(a):hover .art-n a{color:var(--blue-ink);text-decoration:none}
.rows>.art:has(a:focus-visible){box-shadow:inset 0 0 0 2px var(--blue)}
.art-n a:focus-visible{outline:none}
.art-x{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.art-x.hit{-webkit-line-clamp:3;line-clamp:3}
.rows>.art>.chev{margin-top:12px}
.rows>.art:has(a):hover>.chev{transform:translateX(-4px);color:var(--blue-ink)}
.rows>.art>.sheet-text{grid-column:2/-1}
.rows>.art:target{animation:landed 2.4s var(--ease)}
@keyframes landed{from{background:var(--blue-soft)}to{background:transparent}}
@media (max-width:599px){
  .rows>.art{grid-template-columns:minmax(0,1fr) 16px}
  .art-n{grid-column:1;line-height:1.75}
  .art-x,.rows>.art>.sheet-text{grid-column:1/-1}
  .rows>.art>.chev{grid-row:1;grid-column:2;margin-top:6px}
}
/* A chapter opens inside the index: its heading in the law's own type */
.ch{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:32px 8px 12px}
.rows>.ch:first-child{padding-top:16px}
.ch-head{font-size:var(--t-cap);font-weight:600;color:var(--blue-ink)}
.ch-title{font-family:var(--law);font-size:20px;font-weight:700;line-height:1.4}
/* Long lists: the first rows, then «عرض الباقي» (a <details>: every row stays in the page) */
details.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:52px;padding-inline:8px;border-bottom:1px solid var(--rule);color:var(--blue-ink);font-size:var(--t-sm);font-weight:600;transition:background-color .15s}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary:hover{background:color-mix(in srgb,var(--fill) 55%,transparent)}
details.more>summary .mono{font-size:var(--t-cap);font-weight:500;color:var(--ink-2)}
details.more>summary .chev{margin-inline-start:auto;transform:rotate(-90deg)}
details.more[open]>summary .chev{transform:rotate(90deg)}
/* «اسأل مساعدك»: the card that closes a law or an article page */
.ask{padding:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px}
@media (min-width:700px){.ask{padding:32px}}
.ask h2{font-size:var(--t-h3);font-weight:800;line-height:1.35}
.ask p{font-size:var(--t-sm);color:var(--ink-2)}
/* The year index of a kind (/k/law): one tile per year (the tile is the footer's .kind) */
nav.years{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
/* The 404: a Hairline figure in the doc-head, then the heading and the way on */
.state .fig-card{max-width:420px;width:100%;margin:0 0 8px}
.prose{font-size:var(--t-body);line-height:1.9}
/* Admin: requests and traffic */
.table-wrap{overflow-x:auto;padding:8px}
table.admin{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
table.admin th,table.admin td{text-align:start;padding:12px;border-bottom:1px solid var(--rule);white-space:nowrap}
table.admin th{color:var(--ink-2);font-weight:600}
.traffic .seg{display:inline-flex;flex-wrap:wrap;gap:2px;margin-top:8px;padding:2px;border-radius:24px;background:var(--fill)}
.traffic .seg a{display:inline-flex;align-items:center;min-height:44px;padding-inline:16px;border-radius:22px;color:var(--on-fill);font-size:var(--t-sm)}
.traffic .seg a:hover{text-decoration:none;color:var(--ink)}
.traffic .seg a[aria-current="page"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.bars{display:flex;align-items:flex-end;gap:4px;height:160px;padding:16px;margin-bottom:12px}
.bars span{flex:1;min-width:3px;height:var(--h);min-height:2px;border-radius:3px 3px 0 0;background:var(--blue);opacity:.85}
.traffic section .table-wrap+.table-wrap{margin-top:12px}

/* ===== Motion: nothing waits on an animation, and reduced motion stills everything ===== */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  /* where a jump lands keeps a still tint instead of the fading one */
  .rows>.art:target{animation:none;background:var(--blue-soft)}}

/* ===== Print: the law and its citation on white paper ===== */
@media print{
  @page{margin:18mm 16mm}
  :root:root:root{--page:#fff;--card:#fff;--band:#fff;--side:#fff;--ink:#000;--ink-2:#333;--ink-3:#555;--rule:#bbb;--rule-2:#ddd;
    --blue:#000;--blue-ink:#000;--green:#000;--amber:#000;--green-soft:#fff;--amber-soft:#fff;--blue-soft:#fff;--fill:#fff;color-scheme:light}
  .bar,.lnav,.ft,.ask,.neigh,.acts,.invite,.promise,.skip,.crumbs,.finder,.find,.jump,.chev,
  details.more>summary,.numeral,.ex .chart,.ex .tracker,.ex .layers,.ex .back,.ex .legend{display:none!important}
  .ex .view{display:block!important}
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{max-width:none;padding:0}
  .doc{gap:14pt;padding:0}
  .card,.sheet,.toc{box-shadow:none;border:.5pt solid #bbb;border-radius:6pt}
  dl.facts{border:0}
  .sheet{padding:10pt 12pt}
  .law{font-size:13pt;line-height:1.9}
  a{color:inherit;text-decoration:none}
  .chip{border:.5pt solid #888}
  h1,h2,h3,.ch{break-after:avoid}
  .rw,.rows>.art,.sheet-text .p,.toc li{break-inside:avoid}
}