/* Ruqaqa MagicInfo Guide — Tagdeed structure, Ruqaqa skin */

:root {
  /* Brand */
  --brand: #2f6bff;
  --brand-strong: #1d4ed8;
  --brand-soft: #6f9bff;
  --accent: #18d98a;
  --accent-strong: #0fb673;
  --brand-rgb: 47, 107, 255;
  --accent-rgb: 24, 217, 138;

  /* Shape + motion */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.4s var(--ease);

  /* Type scale */
  --fs-h1: clamp(2rem, 4.6vw, 3.2rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.4rem);
  --fs-body: clamp(0.98rem, 1.1vw, 1.05rem);
  --fs-kicker: 0.78rem;
}

:root, [data-theme='light'] {
  --bg: #f4f7fc;
  --bg-2: #eaf0fa;
  --surface: #ffffff;
  --surface-2: #f7faff;
  --text: #0a1424;
  --text-2: #41506a;
  --muted: #6b7a93;
  --border: rgba(10, 20, 36, 0.09);
  --border-strong: rgba(10, 20, 36, 0.16);
  --shadow: 0 1px 2px rgba(10, 20, 36, 0.04), 0 18px 48px -28px rgba(10, 20, 36, 0.4);
  --grid-line: rgba(10, 20, 36, 0.045);
  --danger: #d83a2f;
  --danger-rgb: 216, 58, 47;
  --warn: #8a5e14;
  --warn-rgb: 138, 94, 20;
  --logo-ink: #1c7947;
  color-scheme: light;
}

[data-theme='dark'] {
  --bg: #060a14;
  --bg-2: #0a1020;
  --surface: #0d1424;
  --surface-2: #111a2e;
  --text: #eaf0fb;
  --text-2: #aebbd2;
  --muted: #7e8da8;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px -30px rgba(0, 0, 0, 0.8);
  --grid-line: rgba(255, 255, 255, 0.05);
  --danger: #ff7a70;
  --danger-rgb: 255, 122, 112;
  --warn: #f5b544;
  --warn-rgb: 245, 181, 68;
  --logo-ink: #2fbf74;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Readex Pro', system-ui, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t), color var(--t);
}

::selection { background: rgba(var(--brand-rgb), 0.85); color: #fff; }

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

body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background-image: radial-gradient(var(--grid-line) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

.wrap { max-width: 1060px; margin-inline: auto; padding-inline: 24px; }

/* ---------- Header ---------- */
.site-head { padding-block: 26px 8px; }
.site-head .bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-head .logo { color: var(--logo-ink); display: block; transition: color var(--t-fast); }
.site-head .logo svg { height: 54px; width: auto; display: block; }
.site-head .titles { flex: 1; min-width: 200px; }
.kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-kicker);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 500;
}
[dir='rtl'] .kicker { letter-spacing: 0.06em; }
.site-head h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin-block-start: 4px; }
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3 { letter-spacing: 0; }
.lede { color: var(--text-2); max-width: 62ch; margin-block-start: 12px; }

.theme-btn {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  border-radius: 100px; padding: 7px 16px; font: inherit; font-size: 0.85rem; cursor: pointer;
  transition: border-color var(--t-fast);
}
.theme-btn:hover { border-color: var(--brand); }

.backlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
  color: var(--text-2); text-decoration: none;
  border: 1px solid var(--border); border-radius: 100px; padding: 6px 16px;
  margin-block-end: 18px; transition: border-color var(--t-fast), color var(--t-fast);
}
.backlink:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- Sections ---------- */
section { padding-block: 44px; border-block-end: 1px solid var(--border); }
section:last-of-type { border-block-end: none; }
.sec-head { margin-block-end: 26px; max-width: 720px; }
.sec-head h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em; margin-block-start: 4px; }
.sec-head p { color: var(--text-2); margin-block-start: 8px; }
h3 { font-size: var(--fs-h3); font-weight: 600; margin-block: 26px 10px; }

p + p { margin-block-start: 10px; }
a { color: var(--brand); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 14px; }
.step {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 20px 22px; padding-inline-start: 72px; position: relative; box-shadow: var(--shadow);
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; inset-inline-start: 20px; top: 22px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 600;
  color: var(--brand);
  border: 1px solid rgba(var(--brand-rgb), 0.4); border-radius: 8px; padding: 3px 7px;
}
.step > b { font-weight: 600; font-size: 1.02rem; display: block; }
.step p { color: var(--text-2); font-size: 0.94rem; margin-block-start: 5px; }
.step ul, .step ol { color: var(--text-2); font-size: 0.94rem; margin-block-start: 6px; padding-inline-start: 20px; }
.step li { margin-block-start: 3px; }

/* ---------- Callouts ---------- */
.callout {
  margin-block: 18px; border-inline-start: 3px solid var(--brand);
  background: rgba(var(--brand-rgb), 0.07);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 14px 18px;
  font-size: 0.94rem; color: var(--text-2);
}
[dir='rtl'] .callout { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.callout b { color: var(--brand); font-weight: 600; }
.callout.green { border-color: var(--accent-strong); background: rgba(var(--accent-rgb), 0.08); }
.callout.green b { color: var(--accent-strong); }
.callout.warn { border-color: var(--warn); background: rgba(var(--warn-rgb), 0.1); }
.callout.warn b { color: var(--warn); }
.callout.danger { border-color: var(--danger); background: rgba(var(--danger-rgb), 0.07); }
.callout.danger b { color: var(--danger); }

/* ---------- Figures ---------- */
figure {
  margin-block: 14px 4px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden;
}
figure img { width: 100%; max-width: 640px; display: block; margin-inline: auto; background: #fff; }
figure figcaption {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--muted);
  padding: 8px 14px; border-block-start: 1px solid var(--border); letter-spacing: 0.03em;
}
.fig-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.fig-row figure { margin-block: 14px 4px; }

.placeholder {
  margin-block: 14px 4px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  padding: 22px; text-align: center; color: var(--muted); font-size: 0.88rem; background: var(--surface-2);
}

/* ---------- Tables ---------- */
.tbl-scroll { overflow-x: auto; margin-block: 14px; border: 1px solid var(--border); border-radius: var(--r-sm); }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; background: var(--surface); }
th {
  font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); text-align: start;
  padding: 10px 14px; border-block-end: 1px solid var(--border-strong); background: var(--surface-2);
}
td { padding: 10px 14px; border-block-end: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
tr:last-child td { border-block-end: none; }
td b, td code { color: var(--text); }

code, kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 0.86em;
  background: rgba(var(--brand-rgb), 0.08); color: var(--brand-strong);
  border-radius: 6px; padding: 1px 7px;
}
[data-theme='dark'] code, [data-theme='dark'] kbd { color: var(--brand-soft); }
pre {
  font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.6;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 16px 18px; overflow-x: auto; margin-block: 12px; color: var(--text-2);
}
pre code { background: none; padding: 0; color: inherit; }

/* ---------- Cards (hub) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 24px; position: relative; overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--t), border-color var(--t); box-shadow: var(--shadow); display: block;
}
.card::after { content: ''; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 3px; background: var(--card-accent, var(--brand)); }
.card:hover { transform: translateY(-4px); border-color: var(--card-accent, var(--brand)); }
.card .num { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--card-accent, var(--brand)); font-weight: 600; }
.card h3 { margin-block: 8px 6px; font-size: 1.1rem; }
.card p { color: var(--text-2); font-size: 0.9rem; }

.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-block-start: 18px; }
.path {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 24px; box-shadow: var(--shadow);
}
.path h3 { margin-block-start: 0; }
.path ul { padding-inline-start: 20px; color: var(--text-2); font-size: 0.92rem; margin-block-start: 8px; }
.path .tag {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  border-radius: 100px; padding: 3px 12px; margin-block-end: 10px; letter-spacing: 0.05em;
}
.tag.blue { background: rgba(var(--brand-rgb), 0.12); color: var(--brand); }
.tag.green { background: rgba(var(--accent-rgb), 0.14); color: var(--accent-strong); }

/* ---------- Checklist ---------- */
.check { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 16px; margin-block-end: 8px; }
.check label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 0.94rem; }
.check input { margin-block-start: 6px; width: 16px; height: 16px; accent-color: var(--accent-strong); flex-shrink: 0; }
.check:has(input:checked) label { opacity: 0.55; text-decoration: line-through; }
.check .why { display: block; color: var(--muted); font-size: 0.84rem; margin-block-start: 2px; text-decoration: none; }

/* ---------- Footer ---------- */
.site-foot { padding-block: 34px 50px; color: var(--muted); font-size: 0.84rem; }
.site-foot .wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.site-foot svg { height: 34px; width: auto; color: var(--logo-ink); opacity: 0.9; flex: none; }

/* ---------- Reveal ----------
   Hidden state is gated on html.js: if JS never runs (or app.js fails to load),
   the class is absent and every section stays visible. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  html.js .reveal.in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (max-width: 640px) {
  .step { padding-inline-start: 22px; padding-block-start: 52px; }
  .step::before { top: 16px; }
}

@media print {
  body::before { display: none; }
  .theme-btn, .backlink { display: none; }
  section { break-inside: avoid-page; }
  .step, figure { break-inside: avoid; }
}