/* ==========================================================================
   Lebanese Legislation — what the shared Lebanese family styles.css does not have:
   Arabic text set right to left, a law's chapters and articles, citations,
   search results. Tokens and components come from styles.css.
   ========================================================================== */

:root {
  --font-ar: "IBM Plex Sans Arabic", var(--font);
  --font-law: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif;
  --ok: #1f7a4d;
  --off: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root { --ok: #6fd3a0; --off: #ff8a80; }
}

[lang="ar"] { font-family: var(--font-ar); letter-spacing: 0; }

/* --- Status and small labels ------------------------------------------- */

.status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding-inline: 10px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 500; background: var(--panel);
  color: var(--ink); white-space: nowrap;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.status--repealed::before { background: var(--off); }
.status--repealed { color: var(--off); }

.kicker { font-size: 0.8125rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.kicker b { color: var(--ink); font-weight: 500; }

/* --- A document's head ------------------------------------------------- */

.dochead { padding-top: 84px; }
.dochead h1 {
  margin-top: 14px; font-family: var(--font-ar); font-weight: 600;
  font-size: clamp(1.625rem, 3.4vw, 2.375rem); line-height: 1.45; letter-spacing: 0;
  max-width: 34ch; color: var(--ink);
}
.dochead .btn-row { margin-top: 22px; }
.dochead .facts { margin-top: 24px; }
.facts dd [lang="ar"] { font-size: 1rem; }

/* --- The law: table of contents beside the text ------------------------ */

.lawbody {
  display: grid; gap: 40px; padding-block: 48px var(--section-y);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  .lawbody { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; }
}

/* The side column: "go to article", then the contents. On wide screens it
   stays in view while the text scrolls, so a lawyer can jump at any point. */
.lawside { align-self: start; display: grid; gap: 22px; }
@media (min-width: 980px) {
  .lawside { position: sticky; top: 88px; max-height: calc(100vh - 110px); grid-template-rows: auto minmax(0, 1fr); }
  .lawtoc { overflow: auto; padding-inline-end: 6px; min-height: 0; }
}
.goto { display: grid; gap: 8px; }
.goto label { font-size: 0.8125rem; font-weight: 600; color: var(--muted); direction: ltr; text-align: right; }
.goto__row { display: flex; gap: 8px; }
.goto input {
  flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--canvas); color: var(--ink); font: inherit; font-size: 1rem; font-family: var(--font-ar);
}
.goto input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.goto__msg { font-size: 0.875rem; color: var(--off); font-family: var(--font-ar); }
.art[data-flash] { animation: flash 1.6s var(--ease); }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } to { background: transparent; } }
.lawtoc h2 { font-family: var(--font); font-size: 0.8125rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-bottom: 10px; }
.lawtoc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lawtoc a {
  display: block; padding: 6px 10px; border-radius: 8px; color: var(--muted);
  font-size: 0.9375rem; line-height: 1.55;
}
.lawtoc a:hover, .lawtoc a[aria-current="true"] { background: var(--panel); color: var(--ink); }
.lawtoc [data-depth="1"] a { padding-inline-start: 22px; }
.lawtoc [data-depth="2"] a { padding-inline-start: 34px; font-size: 0.875rem; }
.lawtoc [data-depth="3"] a, .lawtoc [data-depth="4"] a { padding-inline-start: 46px; font-size: 0.875rem; }
.lawtoc .range { color: var(--muted-2); font-size: 0.8125rem; }

.lawtext { max-width: 76ch; }
.lawtext .chapter {
  font-family: var(--font-ar); font-weight: 600; color: var(--ink);
  margin: 44px 0 6px; line-height: 1.6; scroll-margin-top: 8px;
}
.lawtext .chapter[data-depth="0"] { font-size: 1.375rem; }
.lawtext .chapter[data-depth="1"] { font-size: 1.1875rem; }
.lawtext .chapter[data-depth="2"],
.lawtext .chapter[data-depth="3"],
.lawtext .chapter[data-depth="4"] { font-size: 1.0625rem; color: var(--ink-soft); }
.lawtext > .chapter:first-child { margin-top: 0; }

.art { padding-block: 22px; border-bottom: 1px solid var(--line); scroll-margin-top: 8px; }
.art:target { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 12px; padding-inline: 16px; margin-inline: -16px; }
.art__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.art__no { font-family: var(--font-ar); font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
.art__no a { color: inherit; }
/* direction follows the dir="" the article template sets on .art__tools
   (English UI: ltr even though the law text around it is Arabic/rtl;
   Arabic UI: rtl, matching the now-translated "Cite"/"Amended" wording). */
.art__meta { font-size: 0.8125rem; color: var(--muted-2); }
.art__tools { display: flex; gap: 6px; flex: none; }
.art__tools button, .art__tools a {
  font: inherit; font-size: 0.8125rem; color: var(--muted); background: none; border: 0;
  padding: 4px 8px; border-radius: 8px; cursor: pointer;
}
.art__tools button:hover, .art__tools a:hover { background: var(--panel); color: var(--ink); }
.art__ar { margin-top: 10px; font-family: var(--font-law); font-size: 1.1875rem; line-height: 2.05; color: var(--ink); }
.art__ar p + p { margin-top: 10px; }
.art__fr {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 0.96875rem; line-height: 1.7; color: var(--muted);
}
.art__fr p + p { margin-top: 8px; }
[data-hide-fr] .art__fr { display: none; }

.lawend { margin-top: 36px; font-family: var(--font-law); color: var(--muted); line-height: 2; }
.lawend p + p { margin-top: 6px; }

.nottext {
  padding: 22px; border-radius: var(--radius); background: var(--panel); color: var(--muted);
  max-width: 62ch; line-height: 1.65;
}
.nottext b { color: var(--ink); }

/* Plain long text: rulings, opinions, doctrine */
.longtext { max-width: 76ch; padding-block: 40px var(--section-y); font-family: var(--font-law); font-size: 1.125rem; line-height: 2.05; color: var(--ink); }
.longtext p + p { margin-top: 14px; }

/* --- Lists of documents ------------------------------------------------ */

.doclist { list-style: none; margin: 0; padding: 8px 0 0; display: grid; gap: 8px; }
.docrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center;
  padding: 16px 18px; border-radius: var(--radius); background: var(--panel);
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.docrow:hover { background: var(--panel-hi); box-shadow: var(--lift); }
.docrow__title { grid-column: 1 / -1; font-family: var(--font-ar); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.docrow .kicker { grid-column: 1; }
.docrow__snip { grid-column: 1 / -1; font-family: var(--font-law); color: var(--muted); line-height: 1.9; font-size: 0.98rem; }
.docrow__snip mark, .docrow__title mark { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); border-radius: 3px; padding-inline: 2px; }

.listhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 28px; }
.listhead .finder__count { margin: 0; }
.filters + .filters { margin-top: 8px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding-block: 28px 8px; }

/* --- Home ---------------------------------------------------------------- */

.ls-hero .search { max-width: 640px; }
.search .btn { flex: none; }
.codes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.code {
  display: grid; gap: 6px; padding: 18px; border-radius: var(--radius); background: var(--panel);
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.code:hover { background: var(--panel-hi); box-shadow: var(--lift); }
.code b { font-family: var(--font-ar); font-weight: 600; font-size: 1.0625rem; color: var(--ink); line-height: 1.5; }
.code span { font-size: 0.8125rem; color: var(--muted); }

.ai-steps { counter-reset: s; display: grid; gap: 14px; max-width: 70ch; }
.ai-steps li { counter-increment: s; list-style: none; padding-inline-start: 36px; position: relative; color: var(--muted); line-height: 1.7; }
.ai-steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--panel); color: var(--ink); font-size: 0.8125rem; display: grid; place-items: center; font-weight: 600; }
pre.snippet {
  margin-top: 12px; padding: 16px 18px; border-radius: 12px; background: var(--surface-2); color: var(--on-dark);
  font: 0.8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: auto; direction: ltr; text-align: left;
}

.toast {
  /* left, not inset-inline-start: paired with translateX(-50%) for centering,
     which is a physical-axis transform and would go off-center in rtl. */
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--canvas);
  font-size: 0.875rem; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); pointer-events: none; z-index: 60;
}
.toast[data-show] { opacity: 1; transform: translate(-50%, 0); }

/* Amendments: a notice naming the amending text, changes in part as notes,
   and the article's history folded underneath. */
.art__amend, .art__change > p:first-child {
  margin-top: 12px; padding: 12px 16px; border-radius: 12px; font-family: var(--font); font-size: 0.875rem; line-height: 1.65;
  text-align: start; color: var(--ink); background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.art__change { margin-top: 12px; }
.art__change .art__ar { font-size: 1.0625rem; color: var(--muted); }
.art__change--unsure > p:first-child { background: transparent; border-style: dashed; }
.art__links { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line, rgba(127,127,127,.25)); }
.art__links-head { font-size: .875rem; color: var(--muted); margin: 0 0 4px; }
.art__links .art__change .art__ar { color: inherit; }
.art__amend--check { border-style: dashed; }
.art--repealed > .art__head .art__no { text-decoration: line-through; text-decoration-thickness: 1px; }
.art__history { margin-top: 14px; }
.art__history summary { cursor: pointer; width: fit-content; font-family: var(--font); font-size: 0.8125rem; color: var(--muted); }
.art__history summary:hover { color: var(--ink); }
.hist { list-style: none; margin: 10px 0 0; padding: 0; border-inline-start: 2px solid var(--line); }
.hist__v { padding: 4px 16px 12px; }
.hist__v + .hist__v { border-top: 1px dashed var(--line); padding-top: 12px; }
.hist__meta { font-family: var(--font); font-size: 0.8125rem; color: var(--muted); text-align: start; }
.hist__v .art__ar { font-size: 1.0625rem; color: var(--muted); }
.hist__none { margin-top: 6px; font-family: var(--font); font-size: 0.8125rem; color: var(--muted-2); text-align: start; }
.art__note { margin-top: 8px; font-size: 0.875rem; line-height: 1.7; color: var(--muted); font-family: var(--font-ar); }
.art__img { margin-top: 12px; }
.art__img img { display: block; max-width: 100%; height: auto; border-radius: 8px; background: #fff; }

/* Right-to-left blocks inside the English chrome: Arabic titles, rows and
   tiles read from the right; English bits sit in <bdi> and keep their order. */
.dochead[dir="rtl"] .facts { margin-inline-start: 0; }
.dochead[dir="rtl"] .back { display: inline-flex; }
.docrow[dir="rtl"] .kicker, .code[dir="rtl"] span { text-align: right; }

/* A line of facts: the separator belongs to the item after it, drawn on the
   item's starting side, so it never dangles at the end of a wrapped line and
   sits on the right in Arabic rows, on the left in English ones. */
.seps { gap: 4px 0; }
.seps > * + *::before { content: "·"; margin-inline: 8px; color: var(--muted-2); font-weight: 400; }

/* On phones the status gets its own line, so the facts line has the width. */
@media (max-width: 600px) {
  .docrow { grid-template-columns: minmax(0, 1fr); }
  .docrow .status { justify-self: start; }
}

/* Legal text is set justified, as in the Official Gazette and printed codes.
   The last line of each paragraph stays at its starting side. French also
   hyphenates, so justified lines don't open wide gaps. */
.art__ar, .art__fr, .longtext, .lawend { text-align: justify; text-justify: inter-word; }
.art__fr { hyphens: auto; }
/* The promulgation and signatures keep their own line breaks. */
.lawend--closing { white-space: pre-line; text-align: start; }

.ls-hero .sub { max-width: 46ch; text-wrap: balance; }

/* Year indexes */
.decade { margin-top: 30px; }
.decade__label { font-size: 0.875rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; letter-spacing: 0; }
.years { display: flex; flex-wrap: wrap; gap: 8px; }

/* The citation under a single article: what a lawyer or an AI should quote. */
.citeas { max-width: 76ch; margin: 4px 0 28px; padding: 14px 16px; border-radius: 12px; background: var(--panel); color: var(--ink); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.citeas bdi { color: var(--muted); overflow-wrap: anywhere; }

/* The changes page: one entry per amending text, newest first. */
.changes { list-style: none; margin: 0; padding: 0; }
.chg { display: grid; gap: 6px 28px; padding: 22px 0; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .chg { grid-template-columns: 120px minmax(0, 1fr); } }
.chg__date { font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chg__by { display: block; color: var(--ink); text-decoration: none; font-family: var(--font-ar); line-height: 1.7; }
.chg__by b { font-weight: 600; }
.chg__by span { color: var(--muted); }
.chg__by:hover b { text-decoration: underline; text-underline-offset: 3px; }
.chg__targets { list-style: none; margin: 6px 0 0; padding: 0; font-family: var(--font-ar); line-height: 1.9; }
.chg__targets li::before { content: "← "; color: var(--muted-2); }
.rv__key { display: inline-block; margin-top: 6px; font-size: 0.6875rem; color: var(--muted-2); white-space: pre; direction: ltr; }
.rv__why { margin-top: 6px; font-size: 0.8125rem; color: var(--muted); text-align: start; }

/* The not-legal-advice notice, in the three languages, above the copyright. */
.footer__notice { gap: 6px; }
.footer__notice + .footer__legal { border-top: 0; padding-top: 4px; }
.footer__notice p[dir="rtl"] { font-family: "IBM Plex Sans Arabic", sans-serif; }

/* "Tell me if AI answers come": an email box with its consent line. */
.notify { max-width: 70ch; margin: 28px 0; padding: 24px; border: 1px solid var(--line); border-radius: 14px; }
.notify h2 { margin-top: 0; }
.notify__row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 10px; }
.notify__row input[type="email"] { flex: 1 1 240px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--canvas); color: var(--ink); }
.notify__consent { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9em; color: var(--muted); }
.notify__consent input { margin-top: 0.3em; }
.notify__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notify__done { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.art__rulings { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line, rgba(127,127,127,.25)); }
.art__rulings-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; font-size: .9375rem; }
.art__meta-line { margin: 8px 0 0; font-size: .8125rem; color: var(--muted); }