/* ============================================================
   ConsentProof design system — "السجل / The Registry"
   Single stylesheet for dashboard, auth, and public pages.
   Logical properties only: the same sheet serves LTR and RTL.
   Tokens documented in docs/design/DESIGN.md.
   ============================================================ */

:root {
  /* color */
  --paper: #F7F5EF;
  --surface: #FFFFFF;
  --surface-2: #F1EEE5;
  --ink: #1C2420;
  --ink-2: #4E5A54;
  --ink-3: #667069;
  --line: #E3E0D4;
  --line-2: #CBC6B5;
  --brand: #0E5F4C;
  --brand-strong: #0A4739;
  --brand-tint: #E9F1ED;
  --on-brand: #FFFFFF;
  --ok: #156A40;   --ok-bg: #E4F1E7;
  --warn: #7A5200; --warn-bg: #F7EED8;
  --bad: #A3271F;  --bad-bg: #F9E7E4;
  --focus: #0E5F4C;
  /* type */
  --font-ui: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
  /* space */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 64px;
  /* radius */
  --r-1: 4px; --r-2: 8px;
  /* elevation */
  --shadow-1: 0 1px 2px rgba(28, 36, 32, .05);
  --shadow-2: 0 12px 32px rgba(28, 36, 32, .18);
}

/* ---------------------------------------------------------- base */

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Arabic runs breathe more */
:lang(ar) { line-height: 1.7; }
[dir="rtl"] body, body[dir="rtl"] { font-size: 15px; }

h1, h2, h3 { font-weight: 600; margin: 0; }
h1 { font-size: 22px; line-height: 1.3; margin-block-end: var(--sp-4); letter-spacing: -0.01em; }
h2 { font-size: 16px; margin-block: var(--sp-7) var(--sp-3); }
h3 { font-size: 14px; margin-block: var(--sp-4) var(--sp-2); }
h1 .sub, .page-sub { display: block; color: var(--ink-2); font-size: 13px; font-weight: 400; margin-block-start: 2px; }

p { margin-block: 0 var(--sp-3); }

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

hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--sp-6); }

::selection { background: var(--brand-tint); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* meta / secondary text */
.meta { color: var(--ink-3); font-size: 12px; }
.meta-2 { color: var(--ink-2); font-size: 13px; }

/* micro-label: uppercase letterspacing applies to Latin only —
   Arabic has no case and must not be letterspaced. */
.microlabel {
  font-size: 11px; font-weight: 600; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .07em;
}
.microlabel:lang(ar) { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* mono + bidi isolation: every identifier is an LTR island */
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: .92em;
  direction: ltr;
  unicode-bidi: isolate;
}

/* skip link */
.skip-link {
  position: absolute; inset-inline-start: var(--sp-3); inset-block-start: -48px;
  background: var(--brand); color: var(--on-brand);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-1);
  z-index: 100; transition: inset-block-start .12s ease;
}
.skip-link:focus { inset-block-start: var(--sp-3); }

/* ---------------------------------------------------------- app shell */

.shell { display: flex; min-height: 100vh; }

.side {
  flex: 0 0 232px;
  border-inline-end: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column;
  position: sticky; inset-block-start: 0; align-self: flex-start;
  min-height: 100vh;
  padding-block: var(--sp-4);
}

.brand {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-inline: var(--sp-5); padding-block: var(--sp-2) var(--sp-5);
  font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  inline-size: 22px; block-size: 22px; border-radius: 50%;
  border: 2px solid var(--brand); position: relative; flex: none;
}
.brand .mark::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: 50%; border: 1px solid var(--brand);
}
.brand em { font-style: normal; color: var(--brand); }

.side-group { padding-block-start: var(--sp-4); }
.side-group .microlabel { display: block; padding-inline: var(--sp-5); padding-block-end: var(--sp-1); }

.side nav a {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-5);
  color: var(--ink-2); font-size: 13.5px;
  border-inline-start: 2px solid transparent;
}
.side nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.side nav a[aria-current="page"] {
  color: var(--brand); background: var(--brand-tint);
  border-inline-start-color: var(--brand); font-weight: 600;
}

.side-foot {
  margin-block-start: auto;
  border-block-start: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-5) 0;
  font-size: 12.5px; color: var(--ink-2);
}
.side-foot .org { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.side-foot .row { display: flex; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-2); flex-wrap: wrap; }

.lang-switch {
  display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden;
}
.lang-switch button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: 600 12px/1 var(--font-ui); color: var(--ink-2); padding: 5px 10px;
}
.lang-switch button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }

main.content {
  flex: 1 1 auto; min-inline-size: 0;
  padding: var(--sp-7) var(--sp-7) var(--sp-9);
  max-inline-size: 1080px;
}

/* top bar (mobile) */
.topbar { display: none; }

@media (max-width: 900px) {
  .shell { display: block; }
  .side { display: none; }
  .topbar {
    display: flex; align-items: center; gap: var(--sp-3);
    background: var(--surface); border-block-end: 1px solid var(--line);
    padding: var(--sp-3) var(--sp-4);
    position: sticky; inset-block-start: 0; z-index: 20;
  }
  .topbar details { position: relative; }
  .topbar summary {
    list-style: none; cursor: pointer; border: 1px solid var(--line-2);
    border-radius: var(--r-1); padding: 6px 12px; font-weight: 600; font-size: 13px;
  }
  .topbar summary::-webkit-details-marker { display: none; }
  .topbar details[open] > div {
    position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 6px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
    box-shadow: var(--shadow-2); min-inline-size: 220px; padding-block: var(--sp-2); z-index: 30;
  }
  .topbar details a { display: block; padding: 8px var(--sp-4); color: var(--ink-2); }
  .topbar details a[aria-current="page"] { color: var(--brand); font-weight: 600; }
  main.content { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
}

/* ---------------------------------------------------------- buttons */

.btn, button {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--brand); color: var(--on-brand);
  border: 1px solid var(--brand);
  padding: 8px 16px; border-radius: var(--r-1);
  font: 600 13.5px/1.4 var(--font-ui);
  cursor: pointer; text-decoration: none;
  min-block-size: 34px;
  transition: background .1s ease, border-color .1s ease;
}
.btn:hover, button:hover { background: var(--brand-strong); border-color: var(--brand-strong); text-decoration: none; }

.btn-secondary, button.secondary {
  background: var(--surface); color: var(--ink); border-color: var(--line-2);
}
.btn-secondary:hover, button.secondary:hover { background: var(--surface-2); border-color: var(--line-2); }

.btn-ghost, button.ghost {
  background: transparent; color: var(--brand); border-color: transparent;
}
.btn-ghost:hover, button.ghost:hover { background: var(--brand-tint); border-color: transparent; }

.btn-danger, button.danger {
  background: var(--surface); color: var(--bad); border-color: var(--line-2);
}
.btn-danger:hover, button.danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

.btn-sm, button.sm { padding: 4px 10px; min-block-size: 26px; font-size: 12.5px; }
.btn-block { inline-size: 100%; }

button:disabled, .btn[aria-disabled="true"] {
  background: var(--surface-2); color: var(--ink-3); border-color: var(--line);
  cursor: not-allowed;
}

/* ---------------------------------------------------------- forms */

label { display: block; font-weight: 600; font-size: 13px; margin-block: var(--sp-3) var(--sp-1); }
label.plain { font-weight: 400; margin-block: var(--sp-1); display: flex; align-items: baseline; gap: var(--sp-2); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=search], textarea, select {
  inline-size: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  font: inherit; color: var(--ink);
  background: var(--surface);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--brand);
}
textarea { min-block-size: 150px; resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); inline-size: 15px; block-size: 15px; }

.hint { color: var(--ink-3); font-size: 12px; margin-block-start: 4px; }
.field-error { color: var(--bad); font-size: 12.5px; margin-block-start: 4px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }

/* radio card (legal basis, verticals) */
.choice {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4); margin-block: var(--sp-2);
  cursor: pointer; font-weight: 400; background: var(--surface);
}
.choice:hover { border-color: var(--line-2); }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.choice input { margin-block-start: 4px; flex: none; }
.choice .t { font-weight: 600; }
.choice .d { color: var(--ink-2); font-size: 12.5px; }

/* ---------------------------------------------------------- panels, cards, stats */

.panel, form.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: var(--sp-5);
  box-shadow: var(--shadow-1);
}
.panel + .panel { margin-block-start: var(--sp-4); }

.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3); margin-block-end: var(--sp-4);
}
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: var(--sp-4); box-shadow: var(--shadow-1);
}
.stat .num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .microlabel { display: block; margin-block-start: 2px; }
.stat a { font-size: 12px; }

/* ---------------------------------------------------------- ledger tables */

.ledger { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface);
          box-shadow: var(--shadow-1); overflow-x: auto; }
.ledger table { inline-size: 100%; border-collapse: collapse; }
.ledger th {
  text-align: start; padding: 9px var(--sp-3);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  border-block-end: 1px solid var(--line);
  white-space: nowrap;
}
.ledger th:lang(ar) { text-transform: none; letter-spacing: 0; font-size: 12px; }
.ledger td {
  text-align: start; padding: 10px var(--sp-3);
  border-block-end: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}
.ledger tr:last-child td { border-block-end: 0; }
.ledger tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }

/* ---------------------------------------------------------- badges & chips */

.badge {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge.ok    { background: var(--ok-bg);   color: var(--ok); }
.badge.warn  { background: var(--warn-bg); color: var(--warn); }
.badge.bad   { background: var(--bad-bg);  color: var(--bad); }
.badge.muted { background: var(--surface-2); color: var(--ink-2); }

/* receipt chip — always a link to /verify/, always LTR */
.rcp {
  font-family: var(--font-mono); font-size: 12px;
  direction: ltr; unicode-bidi: isolate; display: inline-block;
  background: var(--brand-tint); color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--surface));
  padding: 1px 8px; border-radius: 999px;
}
a.rcp:hover { background: var(--brand); color: var(--on-brand); text-decoration: none; }

/* ---------------------------------------------------------- messages */

.msg {
  padding: 10px var(--sp-4); border-radius: var(--r-2);
  margin-block-end: var(--sp-3);
  background: var(--ok-bg); color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 20%, var(--ok-bg));
  font-size: 13.5px;
}
.msg.error { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 20%, var(--bad-bg)); }
.msg.warn  { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 20%, var(--warn-bg)); }

/* ---------------------------------------------------------- empty states */

.empty {
  padding: var(--sp-8) var(--sp-6); text-align: center; color: var(--ink-2);
}
.empty .t { font-weight: 600; color: var(--ink); margin-block-end: var(--sp-1); }
.empty p { max-inline-size: 46ch; margin-inline: auto; font-size: 13px; }
.empty .ar { display: block; color: var(--ink-3); }

/* ---------------------------------------------------------- code blocks */

.codeblock {
  position: relative;
  background: #20281F; color: #EDEFE7;
  border-radius: var(--r-2);
  padding: var(--sp-4); padding-inline-end: var(--sp-9);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55;
  direction: ltr; text-align: left; /* LTR island — real left, by design */
  unicode-bidi: isolate;
  overflow-x: auto; white-space: pre;
  margin-block: var(--sp-2) var(--sp-4);
}
.codeblock .copybtn {
  position: absolute; inset-block-start: 8px; inset-inline-end: 8px;
  background: rgba(255,255,255,.1); color: #EDEFE7;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-1);
  font: 600 11px/1 var(--font-ui); padding: 5px 9px; min-block-size: 24px; cursor: pointer;
}
.codeblock .copybtn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.3); }
/* Marketing panels are narrow — wrap instead of hiding the tail behind a scrollbar. */
.panel .codeblock { white-space: pre-wrap; overflow-wrap: anywhere; }

/* show-once secret panel */
.secret-panel {
  border: 1px solid var(--line-2); border-inline-start: 3px solid var(--brand);
  background: var(--surface); border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-5); margin-block: var(--sp-3);
}
.secret-panel .k { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-block: var(--sp-2); }
.secret-panel .mono { background: var(--surface-2); padding: 4px 8px; border-radius: var(--r-1); overflow-wrap: anywhere; }

/* ---------------------------------------------------------- dialogs */

dialog.dialog {
  border: 1px solid var(--line); border-radius: var(--r-2);
  box-shadow: var(--shadow-2); background: var(--surface); color: var(--ink);
  padding: var(--sp-6); max-inline-size: 460px; inline-size: calc(100vw - 32px);
}
dialog.dialog::backdrop { background: rgba(28, 36, 32, .45); }
dialog.dialog h3 { margin-block-start: 0; font-size: 16px; }
dialog.dialog .actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-block-start: var(--sp-5); }
dialog.dialog .consequence {
  background: var(--surface-2); border-radius: var(--r-1);
  padding: var(--sp-3); font-size: 13px; color: var(--ink-2); margin-block: var(--sp-3);
}

/* ---------------------------------------------------------- onboarding steps */

.steps { display: flex; gap: var(--sp-2); margin-block: var(--sp-4) var(--sp-6); flex-wrap: wrap; }
.steps .step {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 12.5px; color: var(--ink-3); font-weight: 600;
}
.steps .n {
  inline-size: 22px; block-size: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-2); color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; flex: none;
}
.steps .step.done { color: var(--ok); }
.steps .step.done .n { background: var(--ok); border-color: var(--ok); color: #fff; }
.steps .step.now { color: var(--brand); }
.steps .step.now .n { border-color: var(--brand); color: var(--brand); }
.steps .sep { color: var(--line-2); align-self: center; }

/* ---------------------------------------------------------- score */

.score-block { display: flex; gap: var(--sp-5); align-items: center; }
.score-num { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.score-num .of { font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }

.dim-fix { font-size: 12.5px; }

/* ============================================================
   PUBLIC PAGES (landing, verify)
   ============================================================ */

.public-body { background: var(--paper); }

.public-head {
  border-block-end: 1px solid var(--line); background: var(--surface);
}
.public-head .inner, .public-main, .public-foot .inner {
  max-inline-size: 860px; margin-inline: auto; padding-inline: var(--sp-5);
}
.public-head .inner {
  display: flex; align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-3);
}
.public-head .spacer { margin-inline-start: auto; }
.public-main { padding-block: var(--sp-7) var(--sp-9); }
.public-foot { border-block-start: 1px solid var(--line); background: var(--surface); }
.public-foot .inner { padding-block: var(--sp-5); color: var(--ink-3); font-size: 12.5px;
  display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ledger-rule motif for the landing hero */
.hero {
  padding-block: var(--sp-8) var(--sp-7);
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent 31px, var(--line) 31px, var(--line) 32px);
}
.hero h1 { font-size: 34px; line-height: 1.25; letter-spacing: -0.015em; max-inline-size: 22ch; }
.hero .ar-line { display: block; font-size: 26px; margin-block-start: var(--sp-2); }
.hero p { font-size: 16px; color: var(--ink-2); max-inline-size: 58ch; }
@media (max-width: 700px) { .hero h1 { font-size: 26px; } .hero .ar-line { font-size: 21px; } }

.proofs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); margin-block: var(--sp-6); }

/* ---------------------------------------------------------- verdict seal */

.seal-wrap { text-align: center; padding-block: var(--sp-6) var(--sp-4); }

.seal {
  inline-size: 168px; block-size: 168px; border-radius: 50%;
  margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border: 3px double currentColor;
  position: relative;
}
.seal::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid currentColor; border-radius: 50%; opacity: .55;
}
.seal .ar { font-size: 26px; font-weight: 700; line-height: 1.2; }
.seal .en { font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
            margin-inline-start: .22em; /* optically recenter tracked text */ }
.seal.valid    { color: var(--ok); background: var(--ok-bg); }
.seal.invalid  { color: var(--bad); background: var(--bad-bg); }
.seal.notfound { color: var(--ink-2); background: var(--surface-2); }

.verdict-id {
  text-align: center; margin-block: var(--sp-3) var(--sp-6);
  font-size: 13px; color: var(--ink-2);
}

/* claims table */
.claims { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); box-shadow: var(--shadow-1); }
.claims > div {
  display: grid; grid-template-columns: minmax(150px, 220px) 1fr;
  border-block-end: 1px solid var(--line);
}
.claims > div:last-child { border-block-end: 0; }
.claims dt {
  padding: var(--sp-3) var(--sp-4); background: var(--surface-2);
  font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 0;
}
.claims dt .ar { display: block; }
.claims dd { padding: var(--sp-3) var(--sp-4); margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .claims > div { grid-template-columns: 1fr; }
  .claims dt { padding-block-end: 0; background: transparent; }
}

details.disclosure {
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface);
  margin-block: var(--sp-4);
}
details.disclosure summary {
  cursor: pointer; padding: var(--sp-3) var(--sp-4); font-weight: 600; font-size: 13.5px;
  list-style: none; display: flex; align-items: center; gap: var(--sp-2);
}
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure summary::before { content: "+"; color: var(--brand); font-weight: 700; inline-size: 14px; }
details.disclosure[open] summary::before { content: "−"; }
details.disclosure > div { padding: 0 var(--sp-4) var(--sp-4); }

/* ---------------------------------------------------------- auth pages */

.auth-wrap { max-inline-size: 420px; margin-inline: auto; padding: var(--sp-8) var(--sp-4) var(--sp-9); }
.auth-brand { text-align: center; margin-block-end: var(--sp-5); }
.auth-brand .brand { justify-content: center; padding: 0 0 var(--sp-2); font-size: 22px; }
.auth-brand .tag { color: var(--ink-2); font-size: 13.5px; }
.auth-brand .tag .ar { display: block; margin-block-start: 2px; }

/* ---------------------------------------------------------- print */

@media print {
  .side, .topbar, .public-head, .public-foot, .no-print, .skip-link, .msg { display: none !important; }
  body { background: #fff; font-size: 12px; }
  main.content, .public-main { max-inline-size: none; padding: 0; }
  .seal { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .panel, .ledger, .claims, .stat { box-shadow: none; }
  a { color: inherit; text-decoration: none; }
  details.disclosure { display: none; }
  details.disclosure[open] { display: block; }
}