/* Semicolon Landing Page Audit — guide styles
   Vanilla CSS, no build step, no CDN. Logical properties throughout so an
   Arabic (dir="rtl") build needs no CSS changes. */

/* ── tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Tokens taken from the audit report's own stylesheet, not invented, so the
     guide and the report read as one document:
       --mag #8E0A8C · --red #C2183B · --amb #8A5A00 · --grn #0A6C4A · --ink #0B0C0E
     Note this is the report's magenta, NOT Semicolon's brand magenta (#A309C1) —
     the audit is about that colour and must not be printed in it. */
  --brand:        #8e0a8c;
  --brand-soft:   #fbecfb;
  --brand-ink:    #6e0a6c;
  --danger:       #c2183b;
  --warn:         #8a5a00;
  --ok:           #0a6c4a;
  --test:         #1d4ed8;

  --bg:           #ffffff;
  --bg-alt:       #f7f8fb;
  --surface:      #ffffff;
  --border:       #e4e6ef;
  --border-soft:  #eef0f6;
  --ink:          #191a26;
  --ink-soft:     #4c5069;
  --ink-faint:    #767a92;

  --sidebar-w:  17rem;
  --toc-w:      15rem;
  --topbar-h:   3.75rem;
  --measure:    46rem;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgb(16 18 40 / .06), 0 1px 3px rgb(16 18 40 / .04);
  --shadow-lg: 0 12px 40px rgb(16 18 40 / .16), 0 2px 8px rgb(16 18 40 / .08);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Tajawal is the dashboard's Arabic face. Like Public Sans it is served from
     Google Fonts there, so we ask for it and fall back to the platform's own
     Arabic faces — no network call, correct shaping either way. */
  --sans-ar: "Tajawal", "SF Arabic", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", "Dubai", Tahoma, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t: 180ms cubic-bezier(.2, .6, .3, 1);
}

:root[data-theme="dark"] {
  --brand:        #e78ce4;
  --brand-soft:   #2a0b2e;      /* the report masthead's deep plum */
  --brand-ink:    #efa9ec;
  --danger:       #ff7a90;
  --warn:         #e3a34a;
  --ok:           #4ec293;
  --test:         #8ea9ff;

  --bg:           #0e1016;
  --bg-alt:       #141721;
  --surface:      #171b26;
  --border:       #272c3b;
  --border-soft:  #1f2431;
  --ink:          #e7e9f2;
  --ink-soft:     #a8adc2;
  --ink-faint:    #7c8299;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-lg: 0 16px 48px rgb(0 0 0 / .6);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }

.skip-link {
  position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem;
  z-index: 200; padding: .5rem .9rem; border-radius: var(--r-sm);
  background: var(--brand); color: #fff; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ── topbar ─────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; inset-block-start: 0; z-index: 60;
  display: flex; align-items: center; gap: .75rem;
  height: var(--topbar-h);
  padding-inline: 1rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-block-end: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: .6rem; color: inherit; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; flex: none;
  border-radius: 8px;
  background: var(--brand); color: #fff;
  font-weight: 700; font-size: .95rem;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-size: .95rem; letter-spacing: -.01em; }
.brand-text em { font-style: normal; font-size: .74rem; color: var(--ink-faint); }

.icon-btn {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--ink-soft); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.icon-btn:hover { background: var(--bg-alt); color: var(--ink); }

#themeToggle .i-moon { display: none; }
:root[data-theme="dark"] #themeToggle .i-sun  { display: none; }
:root[data-theme="dark"] #themeToggle .i-moon { display: block; }

.search-trigger {
  display: flex; align-items: center; gap: .55rem;
  margin-inline-start: auto;
  min-width: 0; max-width: 22rem; flex: 1 1 12rem;
  height: 2.25rem; padding-inline: .65rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-alt); color: var(--ink-faint);
  font: inherit; font-size: .875rem; text-align: start; cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.search-trigger:hover { border-color: var(--brand); color: var(--ink-soft); }
.search-trigger span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-trigger svg { flex: none; width: 1rem; height: 1rem; }

/* link out to the live landing page the audit is about */
.site-link {
  display: flex; align-items: center; gap: .4rem; flex: none;
  height: 2.25rem; padding-inline: .7rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--ink-soft);
  font: 500 .82rem/1 var(--sans); white-space: nowrap;
  transition: border-color var(--t), color var(--t);
}
.site-link:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.site-link svg { flex: none; width: 1rem; height: 1rem; }

.lang-btn {
  flex: none;
  padding: .3rem .7rem;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: none; color: var(--ink-soft);
  font: 500 .82rem/1.6 var(--sans); cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.lang-btn:hover { border-color: var(--brand); color: var(--brand); }
html[dir="rtl"] .lang-btn { font-family: var(--sans); }
html[dir="ltr"] .lang-btn { font-family: var(--sans-ar); }

kbd {
  padding: .1rem .35rem;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface); color: var(--ink-faint);
  font: 500 .72rem/1.5 var(--mono);
  white-space: nowrap;
}

/* ── shell ──────────────────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  gap: 0 2.5rem;
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* ── sidebar ────────────────────────────────────────────────────────── */
.sidebar {
  position: sticky; inset-block-start: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding-block: 1.5rem 3rem;
  scrollbar-width: thin;
}
.sidebar-group + .sidebar-group {
  margin-block-start: 1.15rem;
  padding-block-start: 1.15rem;
  border-block-start: 1px solid var(--border-soft);
}
.sidebar-group > h2 { margin: 0 0 .35rem; font: inherit; }

/* Group heading doubles as the collapse control, so it has to read as a
   heading AND look pressable. Tinted plate + brand ink separates it from the
   page links below it — the previous version relied on uppercase tracking,
   which Arabic correctly drops, leaving nothing to tell them apart. */
.group-toggle {
  display: flex; align-items: center; gap: .45rem;
  width: 100%;
  padding: .4rem .7rem;
  border: 0; border-radius: var(--r-sm);
  background: var(--bg-alt);
  color: var(--brand-ink);
  font: 700 .74rem/1.5 var(--sans);
  letter-spacing: .07em; text-transform: uppercase;
  text-align: start; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.group-toggle:hover { background: var(--brand-soft); }
.group-toggle > span { flex: 1; min-width: 0; }
.group-toggle > svg {
  flex: none; width: .95rem; height: .95rem;
  opacity: .55;
  transition: transform var(--t), opacity var(--t);
}
.group-toggle:hover > svg { opacity: 1; }

.sidebar-group[data-collapsed] > ul { display: none; }
.sidebar-group[data-collapsed] .group-toggle > svg { transform: rotate(-90deg); }
html[dir="rtl"] .sidebar-group[data-collapsed] .group-toggle > svg { transform: rotate(90deg); }
/* Arabic: no uppercase or tracking (it severs letter joins), so carry the
   distinction on size and weight instead. */
html[dir="rtl"] .group-toggle { font-family: var(--sans-ar); font-size: .875rem; letter-spacing: 0; text-transform: none; }
.sidebar-group ul { margin: 0; padding: 0; list-style: none; }
.sidebar-group a {
  display: block;
  padding: .38rem .7rem;
  border-inline-start: 2px solid transparent;
  /* Logical corners: the square edge belongs against the indicator, whichever
     side that is. The 4-value shorthand would keep it on the left in Arabic. */
  border-start-start-radius: 0;
  border-start-end-radius: var(--r-sm);
  border-end-end-radius: var(--r-sm);
  border-end-start-radius: 0;
  color: var(--ink-soft);
  font-size: .875rem;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.sidebar-group a:hover { background: var(--bg-alt); color: var(--ink); text-decoration: none; }
/* Not translated into the current language yet — the page still opens, in
   English, and says so. Marked so the gap is visible rather than surprising. */
.sidebar-group a[data-pending] { opacity: .72; }
.sidebar-group a[data-pending]::after {
  content: "EN";
  margin-inline-start: .4rem;
  padding: 0 .25rem;
  border: 1px solid var(--border); border-radius: 3px;
  font: 600 .62rem/1.5 var(--mono);
  color: var(--ink-faint);
  vertical-align: .05em;
}
html[dir="ltr"] .sidebar-group a[data-pending]::after { content: none; }

.sidebar-group a[aria-current="page"] {
  border-inline-start-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 600;
}

/* ── content ────────────────────────────────────────────────────────── */
.content { min-width: 0; padding-block: 2rem 5rem; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-block-end: .9rem;
  font-size: .8rem; color: var(--ink-faint);
}
.breadcrumb span[aria-hidden] { opacity: .5; }

.prose { max-width: var(--measure); }
.prose > :first-child { margin-block-start: 0; }
.loading { color: var(--ink-faint); }

.prose h1 {
  margin: 0 0 .5rem;
  font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.4rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -.02em;
}
.prose .lede {
  margin-block: 0 2rem;
  font-size: 1.075rem; color: var(--ink-soft);
}
.prose h2 {
  margin-block: 3rem 1rem;
  padding-block-end: .45rem;
  border-block-end: 1px solid var(--border-soft);
  font-size: 1.35rem; font-weight: 650; letter-spacing: -.015em;
  scroll-margin-block-start: calc(var(--topbar-h) + 1rem);
}
.prose h3 {
  margin-block: 2rem .6rem;
  font-size: 1.075rem; font-weight: 650;
  scroll-margin-block-start: calc(var(--topbar-h) + 1rem);
}
.prose h4 { margin-block: 1.5rem .4rem; font-size: .95rem; font-weight: 650; }
.prose p, .prose ul, .prose ol { margin-block: 0 1rem; }
.prose ul, .prose ol { padding-inline-start: 1.35rem; }
.prose li + li { margin-block-start: .35rem; }
.prose strong { font-weight: 650; }
.prose hr { margin-block: 2.5rem; border: 0; border-block-start: 1px solid var(--border); }

.anchor {
  margin-inline-start: .4rem;
  color: var(--ink-faint); opacity: 0;
  font-weight: 400; text-decoration: none;
  transition: opacity var(--t);
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }

/* inline code + blocks */
.prose code {
  padding: .12em .38em;
  border: 1px solid var(--border-soft); border-radius: 5px;
  background: var(--bg-alt);
  font: 400 .86em/1.5 var(--mono);
  overflow-wrap: break-word;
}
.prose pre {
  position: relative;
  margin-block: 0 1.25rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-alt);
  overflow-x: auto;
  font-size: .84rem; line-height: 1.65;
}
.prose pre code { padding: 0; border: 0; background: none; font-size: 1em; }
/* tables */
.table-wrap {
  margin-block: 0 1.5rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow-x: auto;
}
.prose table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.prose th, .prose td {
  padding: .6rem .85rem;
  border-block-end: 1px solid var(--border-soft);
  text-align: start; vertical-align: top;
}
.prose thead th {
  position: sticky; inset-block-start: 0;
  background: var(--bg-alt); color: var(--ink-soft);
  font-size: .78rem; font-weight: 650;
  letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap;
}
.prose tbody tr:last-child td { border-block-end: 0; }
.prose td code { white-space: nowrap; }

/* callouts */
.callout {
  display: flex; gap: .75rem;
  margin-block: 0 1.5rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  font-size: .9rem;
}
.callout > svg { flex: none; margin-block-start: .18rem; color: var(--brand); }
.callout > div > :last-child { margin-block-end: 0; }
.callout-title { display: block; margin-block-end: .15rem; font-weight: 650; }
.callout.tip     { border-inline-start-color: var(--ok); }
.callout.tip > svg { color: var(--ok); }
.callout.warn    { border-inline-start-color: var(--warn); }
.callout.warn > svg { color: var(--warn); }
.callout.danger  { border-inline-start-color: var(--danger); }
.callout.danger > svg { color: var(--danger); }

/* numbered walkthroughs */
.steps { margin-block: 0 1.5rem; padding: 0; list-style: none; counter-reset: step; }
.steps > li {
  position: relative;
  padding-inline-start: 2.6rem;
  padding-block-end: 1.35rem;
  counter-increment: step;
}
.steps > li::before {
  content: counter(step);
  position: absolute; inset-inline-start: 0; inset-block-start: -.05rem;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--brand-ink);
  font: 650 .8rem/1 var(--sans);
}
.steps > li::after {
  content: ""; position: absolute;
  inset-inline-start: .87rem; inset-block: 1.9rem .1rem;
  border-inline-start: 1px solid var(--border);
}
.steps > li:last-child { padding-block-end: 0; }
.steps > li:last-child::after { display: none; }
.steps > li > :last-child { margin-block-end: 0; }
.steps li strong:first-child { display: block; }

/* pills for roles / permissions / statuses */
.pill {
  display: inline-block;
  padding: .06rem .45rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-alt); color: var(--ink-soft);
  font: 500 .76rem/1.6 var(--sans); white-space: nowrap;
  vertical-align: baseline;
}
.pill.perm { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-family: var(--mono); }
.pill.ok     { border-color: var(--ok);     color: var(--ok); }
.pill.warn   { border-color: var(--warn);   color: var(--warn); }
.pill.danger { border-color: var(--danger); color: var(--danger); }

/* card grid for landing / index pages */
.cards {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-block: 0 1.75rem; padding: 0; list-style: none;
}
.cards li { margin: 0; }
.cards a {
  display: block; height: 100%;
  padding: .95rem 1.05rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t), transform var(--t);
}
.cards a:hover { border-color: var(--brand); transform: translateY(-2px); text-decoration: none; }
.cards strong { display: block; margin-block-end: .2rem; font-size: .95rem; color: var(--brand-ink); }
.cards span { font-size: .85rem; color: var(--ink-soft); }

.prose figure { margin: 0 0 1.5rem; }

/* Label above every mock-up. Deliberately quiet — it must be readable without
   competing with the illustration it introduces, and it repeats on every
   figure in the guide. */
.demo-note {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  margin: 0 0 .5rem;
  padding-inline-start: .1rem;
  color: var(--ink-faint);
  font-size: .8rem; line-height: 1.5;
}
.demo-note > .ti { align-self: center; font-size: .95rem; }
.demo-note a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.prose figcaption { margin-block-start: .6rem; font-size: .82rem; color: var(--ink-faint); }

/* ── screen mock-ups ────────────────────────────────────────────────────
   A working miniature of the real dashboard. Every value below is lifted
   from the product's own stylesheet (assest/vendor/css/core.css) rather than
   eyeballed, so the guide looks like the thing it documents:

     page #f8f7fa / #25293c      card #fff / #2f3349
     text #6d6b77 / #acabc1      heading #444050 / #cfcde4
     border #e6e6e8 / #44485e    primary #37388b
     radius .375rem              base font .9375rem (15px)
     card shadow  0 0 0 1px border   ← flat ring, not a drop shadow
     badge  .4235em/.77em, .8667em, 500, radius .25rem
     button .4812rem/1.25rem, .9375rem, 500, line-height 1.375
     label  color-mix(in sRGB, paper 84%, colour)

   Icons come from theme-icons.css — the theme's own Tabler set.
   These mock-ups are interactive: see wireMockups() in docs.js. */
.ui {
  --ui-page:    #f8f7fa;
  --ui-paper:   #fff;
  --ui-body:    #6d6b77;
  --ui-head:    #444050;
  --ui-muted:   #acaab1;
  --ui-line:    #e6e6e8;
  --ui-primary: #574bd4;
  --ui-success: #28c76f;
  --ui-danger:  #ff4c51;
  --ui-warning: #ff9f43;
  --ui-r:       .375rem;
  --ui-tint:    84%;

  margin-block: 0 .6rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--ui-page);
  color: var(--ui-body);
  /* Public Sans is the dashboard's face; it is served from Google Fonts there,
     so the guide asks for it but never loads it — matching for anyone who uses
     the product, falling back cleanly for everyone else. */
  font: 400 .9375rem/1.375 "Public Sans", var(--sans);
  overflow: hidden;
}
:root[data-theme="dark"] .ui {
  --ui-page: #25293c; --ui-paper: #2f3349;
  --ui-body: #acabc1; --ui-head: #cfcde4;
  --ui-muted: #76778e; --ui-line: #44485e;
}

.ui b, .ui strong { color: var(--ui-head); font-weight: 600; }
.ui .ui-muted { color: var(--ui-muted); }
.ui .num { font-variant-numeric: tabular-nums; }

/* toolbar / card header */
.ui-head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .8rem 1rem;
  background: var(--ui-paper);
  border-block-end: 1px solid var(--ui-line);
}
.ui-head > strong { font-size: 1.0625rem; }
.ui-spacer { flex: 1 1 auto; }

.ui-body { padding: 1rem; display: grid; gap: .85rem; }

.ui-card {
  padding: .85rem 1rem;
  border-radius: var(--ui-r);
  background: var(--ui-paper);
  box-shadow: 0 0 0 1px var(--ui-line);   /* the theme's real card elevation */
}

.ui-stats { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.ui-stats .ui-card { display: grid; gap: .1rem; }
.ui-stats .ui-card > span:first-child { color: var(--ui-muted); font-size: .8125rem; }
.ui-stats .ui-card > b { font-size: 1.375rem; letter-spacing: -.02em; }

/* buttons — real .btn metrics, scaled down one notch for btn-sm parity */
.ui-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3125rem .75rem;
  border: 1px solid var(--ui-line); border-radius: var(--ui-r);
  background: var(--ui-paper); color: var(--ui-body);
  font: 500 .8125rem/1.375 inherit; white-space: nowrap;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.ui-btn:hover { border-color: var(--ui-primary); color: var(--ui-primary); }
.ui-btn.primary { border-color: var(--ui-primary); background: var(--ui-primary); color: #fff; }
.ui-btn.primary:hover { filter: brightness(1.12); color: #fff; }
.ui-btn[data-on] { border-color: var(--ui-primary); background: color-mix(in sRGB, var(--ui-paper) var(--ui-tint), var(--ui-primary)); color: var(--ui-primary); }
.ui-btn .ti { font-size: 1.0625em; }

/* text inputs — real .form-control padding */
.ui-field {
  display: flex; align-items: center; gap: .4rem;
  flex: 1 1 12rem; min-width: 0;
  padding: calc(.426rem - 1px) calc(.9375rem - 1px);
  border: 1px solid var(--ui-line); border-radius: var(--ui-r);
  background: var(--ui-paper);
}
.ui-field .ti { color: var(--ui-muted); }
.ui-field input {
  flex: 1; min-width: 0;
  border: 0; background: none; color: var(--ui-head);
  font: inherit; font-size: .875rem;
}
.ui-field input::placeholder { color: var(--ui-muted); }
.ui-field input:focus { outline: none; }
.ui-field:focus-within { border-color: var(--ui-primary); }

/* tabs */
.ui-tabs {
  display: flex; gap: 0; flex-wrap: wrap;
  padding-inline: 1rem;
  background: var(--ui-paper);
  border-block-end: 1px solid var(--ui-line);
}
.ui-tabs button {
  padding: .6rem .85rem;
  border: 0; border-block-end: 2px solid transparent;
  background: none; color: var(--ui-body);
  font: 500 .875rem/1.375 inherit; cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.ui-tabs button:hover { color: var(--ui-primary); }
.ui-tabs button[data-on] { border-block-end-color: var(--ui-primary); color: var(--ui-primary); }

/* tables */
.ui-scroll { overflow-x: auto; background: var(--ui-paper); border-radius: var(--ui-r); box-shadow: 0 0 0 1px var(--ui-line); }
.ui table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ui th, .ui td {
  padding: .65rem 1rem;
  border-block-end: 1px solid var(--ui-line);
  text-align: start; white-space: nowrap;
}
.ui th {
  color: var(--ui-head);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.ui th[data-sort] { cursor: pointer; user-select: none; }
.ui th[data-sort]:hover { color: var(--ui-primary); }
.ui th[data-sort]::after { content: " ↕"; opacity: .35; }
.ui th[data-sort][data-dir="asc"]::after  { content: " ↑"; opacity: 1; }
.ui th[data-sort][data-dir="desc"]::after { content: " ↓"; opacity: 1; }
.ui tbody tr:last-child td { border-block-end: 0; }
.ui tbody tr:hover { background: color-mix(in sRGB, var(--ui-paper) 96%, var(--ui-primary)); }
.ui .link { color: var(--ui-primary); font-weight: 500; }
.ui .empty { padding: 1.5rem 1rem; color: var(--ui-muted); text-align: center; font-size: .875rem; }

/* badges — real .badge metrics + the theme's bg-label-* tint formula */
.ui-badge {
  display: inline-block;
  padding: .4235em .77em;
  border-radius: .25rem;
  background: color-mix(in sRGB, var(--ui-paper) var(--ui-tint), var(--ui-primary));
  color: var(--ui-primary);
  font-size: .8125rem; font-weight: 500; line-height: 1;
}
.ui-badge.ok      { background: color-mix(in sRGB, var(--ui-paper) var(--ui-tint), var(--ui-success)); color: var(--ui-success); }
.ui-badge.danger  { background: color-mix(in sRGB, var(--ui-paper) var(--ui-tint), var(--ui-danger));  color: var(--ui-danger); }
.ui-badge.warning { background: color-mix(in sRGB, var(--ui-paper) var(--ui-tint), var(--ui-warning)); color: var(--ui-warning); }
.ui-badge.muted   { background: color-mix(in sRGB, var(--ui-paper) var(--ui-tint), var(--ui-muted));   color: var(--ui-muted); }
/* The theme keeps one primary in both themes, which leaves label text too dark
   on the dark card. Lift it just enough to clear 4.5:1 — readability wins. */
:root[data-theme="dark"] .ui-badge,
:root[data-theme="dark"] .ui-btn[data-on] { color: color-mix(in sRGB, var(--ui-primary) 45%, #fff); }
:root[data-theme="dark"] .ui-badge.ok      { color: var(--ui-success); }
:root[data-theme="dark"] .ui-badge.danger  { color: var(--ui-danger); }
:root[data-theme="dark"] .ui-badge.warning { color: var(--ui-warning); }
:root[data-theme="dark"] .ui-badge.muted   { color: var(--ui-body); }

/* avatar initials, as used in the real user/partner cells */
.ui-avatar {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; margin-inline-end: .5rem;
  border-radius: 50%;
  background: color-mix(in sRGB, var(--ui-paper) var(--ui-tint), var(--ui-primary));
  color: var(--ui-primary);
  font-size: .75rem; font-weight: 600;
  vertical-align: middle;
}
:root[data-theme="dark"] .ui-avatar { color: color-mix(in sRGB, var(--ui-primary) 45%, #fff); }

.ui-panes > [data-pane] { display: none; }
.ui-panes > [data-pane][data-on] { display: grid; gap: .85rem; }

/* Numbered markers tying a spot in the mock-up to the legend below it. */
.ui-mark {
  display: inline-grid; place-items: center;
  width: 1.4rem; height: 1.4rem;
  margin-inline-start: .35rem;
  border-radius: 50%;
  background: var(--danger); color: #fff;
  font: 700 .75rem/1 var(--sans);
  font-style: normal;
  /* Parents set tracking and uppercase (table headers, group labels); both
     shift the digit off-centre inside the circle. Reset them here. */
  letter-spacing: 0; text-transform: none; text-indent: 0;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  /* Ring in the surface colour so the marker reads on cards, table headers
     and prose alike, in both themes. */
  box-shadow: 0 0 0 2px var(--bg);
  transition: transform var(--t);
}
.ui .ui-mark { box-shadow: 0 0 0 2px var(--ui-paper); }
.ui-mark[data-lit] { transform: scale(1.3); }
.ui-key { margin-block: 0 1.5rem; padding: 0; list-style: none; counter-reset: key; font-size: .875rem; }
.ui-key > li { position: relative; padding-inline-start: 2rem; counter-increment: key; border-radius: var(--r-sm); }
.ui-key > li + li { margin-block-start: .35rem; }
.ui-key > li[data-lit] { background: var(--brand-soft); }
.ui-key > li::before {
  content: counter(key);
  position: absolute; inset-inline-start: 0; inset-block-start: .18rem;
  display: grid; place-items: center;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--danger); color: #fff;
  font: 700 .75rem/1 var(--sans);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.ui-hint {
  margin-block: -.35rem 0;
  color: var(--ink-faint); font-size: .8rem;
}
/* ── pager ──────────────────────────────────────────────────────────── */
.pager {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  max-width: var(--measure);
  margin-block-start: 4rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--border);
}
.pager a {
  padding: .7rem .95rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  color: inherit;
  transition: border-color var(--t);
}
.pager a:hover { border-color: var(--brand); text-decoration: none; }
.pager small { display: block; font-size: .75rem; color: var(--ink-faint); }
.pager strong { font-size: .9rem; color: var(--brand-ink); font-weight: 600; }
.pager .next { text-align: end; }

/* ── toc ────────────────────────────────────────────────────────────── */
.toc {
  position: sticky; inset-block-start: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
  overflow-y: auto;
  padding-block: 2rem;
  font-size: .82rem;
}
.toc h2 {
  margin: 0 0 .5rem;
  padding-inline-start: calc(.7rem + 2px);
  font-size: .715rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint);
}
.toc ul { margin: 0; padding: 0; list-style: none; }
.toc a {
  display: block;
  /* Logical, not `padding: a 0 a .7rem` — that puts the gap on the left in
     both directions, so in Arabic the text jams against the indicator. */
  padding-block: .25rem;
  padding-inline: .7rem 0;
  border-inline-start: 2px solid var(--border-soft);
  color: var(--ink-faint);
  transition: color var(--t), border-color var(--t);
}
.toc a:hover { color: var(--ink); text-decoration: none; }
.toc a.active { border-inline-start-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.toc .lvl-3 a { padding-inline-start: 1.5rem; }

/* ── search palette ─────────────────────────────────────────────────── */
.palette {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: start center;
  padding: 6vh 1rem 1rem;
  background: rgb(10 12 20 / .55);
}
/* Must out-rank our own display:grid, or the hidden attribute does nothing. */
.palette[hidden] { display: none; }
.palette-box {
  display: flex; flex-direction: column;
  width: min(38rem, 100%); max-height: 70vh;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.palette-field {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1rem;
  border-block-end: 1px solid var(--border);
}
.palette-field svg { flex: none; color: var(--ink-faint); }
.palette-field input {
  flex: 1; min-width: 0;
  border: 0; background: none; color: var(--ink);
  font: 400 1rem/1.5 var(--sans);
}
.palette-field input:focus { outline: none; }
.palette-results { flex: 1; margin: 0; padding: .4rem; list-style: none; overflow-y: auto; }
.palette-results li { margin: 0; }
.palette-results a {
  display: block; padding: .5rem .65rem;
  border-radius: var(--r-sm); color: inherit;
}
.palette-results a:hover, .palette-results [aria-selected="true"] a {
  background: var(--brand-soft); text-decoration: none;
}
.palette-results strong { display: block; font-size: .9rem; font-weight: 600; }
.palette-results small { display: block; font-size: .78rem; color: var(--ink-faint); }
.palette-results mark { background: color-mix(in srgb, var(--brand) 25%, transparent); color: inherit; border-radius: 3px; }
.palette-empty { padding: 1.5rem; color: var(--ink-faint); font-size: .9rem; text-align: center; }
.palette-foot {
  display: flex; gap: .35rem; align-items: center;
  margin: 0; padding: .5rem 1rem;
  border-block-start: 1px solid var(--border);
  color: var(--ink-faint); font-size: .75rem;
}

/* ── responsive ─────────────────────────────────────────────────────── */
.nav-toggle { display: none; }
.scrim { position: fixed; inset: 0; z-index: 55; background: rgb(10 12 20 / .5); }

@media (max-width: 1180px) {
  .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding-inline: 1.15rem; }
  .nav-toggle { display: grid; }
  .brand-text em { display: none; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .search-trigger { flex: none; width: 2.25rem; justify-content: center; padding-inline: 0; }
  .site-link span { display: none; }
  .site-link { width: 2.25rem; justify-content: center; padding-inline: 0; }

  .sidebar {
    position: fixed; z-index: 56;
    inset-block: var(--topbar-h) 0; inset-inline-start: 0;
    width: min(19rem, 84vw);
    padding-inline: .5rem;
    background: var(--surface);
    border-inline-end: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateX(-102%);
    transition: transform var(--t);
  }
  .sidebar[data-open="true"] { transform: none; }
  html:dir(rtl) .sidebar { transform: translateX(102%); }
  html:dir(rtl) .sidebar[data-open="true"] { transform: none; }
  .content { padding-block-start: 1.5rem; }
}

/* ── Arabic / RTL ───────────────────────────────────────────────────────
   Layout needs nothing here — the whole sheet uses logical properties, so
   dir="rtl" flips it. What does change is type: Arabic needs a taller line,
   no uppercase transform (it does nothing but break the eye), and no
   letter-spacing (it severs the joins between letters). */
html[dir="rtl"] body { font-family: var(--sans-ar); line-height: 1.85; }
html[dir="rtl"] .prose h1,
html[dir="rtl"] .prose h2,
html[dir="rtl"] .prose h3,
html[dir="rtl"] .prose h4 { letter-spacing: 0; line-height: 1.45; }
html[dir="rtl"] .prose p,
html[dir="rtl"] .prose li { line-height: 1.9; }
html[dir="rtl"] .sidebar-group > h2,
html[dir="rtl"] .toc h2,
html[dir="rtl"] .prose thead th,
html[dir="rtl"] .ui th {
  text-transform: none;
  letter-spacing: 0;
  font-size: .8rem;
}
html[dir="rtl"] .prose code,
html[dir="rtl"] kbd { direction: ltr; unicode-bidi: isolate; }
/* Latin identifiers inside Arabic prose — permission names, references —
   must not be reordered by the bidi algorithm. */
html[dir="rtl"] .pill.perm { direction: ltr; unicode-bidi: isolate; }
/* Figures and mock-ups keep the dashboard's Arabic face too. */
html[dir="rtl"] .ui { font-family: var(--sans-ar); line-height: 1.6; }
html[dir="rtl"] .ui .num { direction: ltr; unicode-bidi: isolate; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

@media print {
  .topbar, .sidebar, .toc, .pager, .palette, .breadcrumb { display: none !important; }
  .shell { display: block; }
  .prose { max-width: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   AUDIT REPORT COMPONENTS
   Added for this guide: the score board, the palette swatch grid, the
   inline colour sample and the evidence galleries. Logical properties
   only, tokens only — they follow the theme and would survive dir="rtl".
   ══════════════════════════════════════════════════════════════════════ */

/* two more verdict pills, matching the report's chip vocabulary */
.pill.test { border-color: var(--test); color: var(--test); }
.pill.na   { border-color: var(--border); color: var(--ink-faint); }

/* ── score board (section 01) ─────────────────────────────────────── */
.scores { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin-block: 1.25rem 1.5rem; padding: 0; list-style: none; }
.score { margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.score b { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.score b small { font-size: .95rem; font-weight: 600; color: var(--ink-faint); }
.score span { display: block; margin-block-start: .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.score i { display: block; margin-block-start: .65rem; height: 5px; border-radius: 3px; background: var(--bg-alt); overflow: hidden; }
.score i em { display: block; height: 100%; border-radius: 3px; background: currentColor; }
.score.bad  { color: var(--danger); }
.score.mid  { color: var(--warn); }
.score.okay { color: var(--ok); }

/* ── palette swatches (section 05) ────────────────────────────────── */
.pal { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); margin-block: 1rem 1.5rem; padding: 0; list-style: none; }
.pal li { margin: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.pal .fill { display: block; height: 3.5rem; }
.pal .mt { display: block; padding: .5rem .6rem; font-size: .75rem; line-height: 1.45; }
.pal .mt b { display: block; font-family: var(--mono); font-size: .75rem; direction: ltr; unicode-bidi: isolate; }
.pal .mt span { color: var(--ink-faint); }

/* ── inline colour sample, used in the measured tables ───────────── */
.sw { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .78rem; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.sw i { inline-size: .9rem; block-size: .9rem; border-radius: 3px; border: 1px solid rgb(0 0 0 / .18); flex: none; }
:root[data-theme="dark"] .sw i { border-color: rgb(255 255 255 / .22); }

/* ── evidence galleries: real crops and frames, never mock-ups ───── */
.ev-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin-block: 1rem 1.75rem; padding: 0; list-style: none; }
.ev-grid.tight { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.ev-grid > li { margin: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--bg-alt); }
.ev-grid img { display: block; inline-size: 100%; height: auto; border: 0; border-radius: 0; }
.ev-grid .cap { display: block; padding: .5rem .65rem .6rem; font-size: .78rem; line-height: 1.5; color: var(--ink-soft); background: var(--surface); border-block-start: 1px solid var(--border-soft); }
.ev-grid .cap b { display: block; color: var(--ink); font-weight: 600; }
.ev-grid .cap .num { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }

/* Frames are wide screenshots; let them breathe without a caption box. */
.frames { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }

/* ── data tables ──────────────────────────────────────────────────────
   The .ui table defaults to white-space: nowrap, which is right for a
   dashboard replica of short values and wrong here: these tables carry
   real audit prose, and nowrap made a 700px container hold a 2585px
   table. Cells wrap; only the figures, swatches and badges stay intact. */
.ui.data th, .ui.data td { white-space: normal; vertical-align: top; }
.ui.data td.num, .ui.data .sw, .ui.data .ui-badge, .ui.data .pill { white-space: nowrap; }
.ui.data td .ui-muted { display: block; margin-block-start: .15rem; font-size: .8125rem; line-height: 1.5; }
.ui.data td.num .ui-muted { font-weight: 400; }
.ui.data .sw { display: inline-flex; font-size: .75rem; }
.ui.data .sw + br + .sw { margin-block-start: .2rem; }
/* One SC quotes a long rotating-list string inside <code>; nowrap there alone
   was still forcing an 889px table into a 702px container. */
.ui.data code { white-space: normal; overflow-wrap: break-word; }