/* ============================================================
   مُشفّر السعودية — Design System
   Saudi Medical Coding Academy — Shared Styles
   ============================================================ */

:root {
  --bg: #030810;
  --bg-alt: #070f1e;
  --bg-card: #0c1629;
  --bg-card-hover: #111f3a;
  --surface: #162642;
  --accent: #c9a84c;
  --accent-light: #e4c96a;
  --accent-dim: rgba(201,168,76,0.12);
  --teal: #00c9b7;
  --teal-dim: rgba(0,201,183,0.1);
  --blue: #3b82f6;
  --blue-dim: rgba(59,130,246,0.1);
  --red: #ef4444;
  --red-dim: rgba(239,68,68,0.1);
  --green: #22c55e;
  --green-dim: rgba(34,197,94,0.1);
  --purple: #a78bfa;
  --purple-dim: rgba(167,139,250,0.1);
  --orange: #f59e0b;
  --orange-dim: rgba(245,158,11,0.1);
  --pink: #ec4899;
  --pink-dim: rgba(236,72,153,0.1);
  --text: #e8edf5;
  --text-2: #94a8c4;
  --text-3: #4d6480;
  --border: rgba(201,168,76,0.12);
  --border-light: rgba(255,255,255,0.05);
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.6);
  --radius: 16px;
  --radius-sm: 10px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Tajawal','Cairo',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.85;
  overflow-x:hidden;
  direction:rtl;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity:0.025;pointer-events:none;z-index:9999;
}
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }

.container{max-width:1280px;margin:0 auto;padding:0 2rem}
.section{padding:5rem 0;position:relative}
.section-alt{background:var(--bg-alt)}
.section-tight{padding:3rem 0}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:200;background:rgba(3,8,16,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-top{display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:0 auto;padding:0.9rem 2rem}
.nav-logo{display:flex;align-items:center;gap:0.6rem;font-family:'Cairo',sans-serif;font-weight:900;font-size:1.05rem;color:var(--accent-light);text-decoration:none}
.nav-logo .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--teal));display:flex;align-items:center;justify-content:center;font-size:0.9rem;color:var(--bg);font-weight:900}
.nav-logo span{color:var(--teal)}
.nav-links{display:flex;gap:1.5rem;list-style:none}
.nav-links a{color:var(--text-2);text-decoration:none;font-size:0.82rem;font-weight:500;transition:color 0.2s}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.nav-cta{background:var(--accent);color:var(--bg);padding:0.5rem 1.25rem;border-radius:8px;font-weight:700;font-size:0.82rem;text-decoration:none;transition:all 0.3s;white-space:nowrap}
.nav-cta:hover{box-shadow:0 0 20px rgba(201,168,76,0.3)}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.4rem;cursor:pointer}

/* Claim-lifecycle progress rail — signature element, appears on module pages */
.rail{background:var(--bg-alt);border-bottom:1px solid var(--border-light);overflow-x:auto}
.rail-inner{display:flex;align-items:center;max-width:1280px;margin:0 auto;padding:0.6rem 2rem;gap:0;min-width:max-content}
.rail-step{display:flex;align-items:center;gap:0.4rem;font-size:0.7rem;color:var(--text-3);white-space:nowrap;padding:0.3rem 0.7rem;border-radius:100px;transition:all 0.25s}
.rail-step.done{color:var(--teal)}
.rail-step.current{color:var(--bg);background:var(--accent);font-weight:700}
.rail-arrow{color:var(--text-3);font-size:0.7rem;margin:0 0.15rem}

/* ============ HERO / HEADER ============ */
.page-header{padding:5rem 2rem 3.5rem;text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,0.06) 0%,transparent 60%),var(--bg)}
.page-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 1.2rem;background:var(--accent-dim);border:1px solid rgba(201,168,76,0.2);border-radius:100px;font-size:0.78rem;color:var(--accent-light);margin-bottom:1.5rem}
.page-title{font-family:'Cairo',sans-serif;font-size:clamp(1.9rem,4.2vw,3rem);font-weight:900;line-height:1.3;margin-bottom:1rem}
.page-title .g{color:var(--accent)}
.page-title .t{color:var(--teal)}
.page-desc{font-size:1.02rem;color:var(--text-2);max-width:700px;margin:0 auto}

.sec-head{text-align:center;margin-bottom:3.5rem}
.sec-tag{display:inline-block;font-size:0.72rem;font-weight:800;color:var(--teal);text-transform:uppercase;letter-spacing:0.2em;margin-bottom:0.75rem}
.sec-title{font-family:'Cairo',sans-serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:900;line-height:1.35;margin-bottom:0.75rem}
.sec-desc{color:var(--text-2);max-width:600px;margin:0 auto;font-size:0.95rem}

/* ============ MODULE CARDS (hub grid) ============ */
.mod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.mod-card{display:flex;gap:1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem;text-decoration:none;color:inherit;transition:all 0.3s;position:relative;overflow:hidden}
.mod-card:hover{border-color:rgba(201,168,76,0.35);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.mod-card-num{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Cairo',sans-serif;font-size:1.3rem;font-weight:900;flex-shrink:0}
.mod-card-body h3{font-family:'Cairo',sans-serif;font-size:1.05rem;font-weight:800;margin-bottom:0.35rem;line-height:1.4}
.mod-card-body .sub{color:var(--text-3);font-size:0.78rem;margin-bottom:0.6rem;font-family:'DM Mono',monospace}
.mod-card-body p{color:var(--text-2);font-size:0.85rem;line-height:1.75}
.mod-card-meta{display:flex;gap:0.75rem;margin-top:0.75rem;flex-wrap:wrap}
.mod-card-meta span{font-size:0.72rem;color:var(--text-3);background:rgba(255,255,255,0.03);padding:0.2rem 0.6rem;border-radius:6px}

.num-g{background:var(--accent-dim);color:var(--accent)}
.num-t{background:var(--teal-dim);color:var(--teal)}
.num-b{background:var(--blue-dim);color:var(--blue)}
.num-p{background:var(--purple-dim);color:var(--purple)}
.num-r{background:var(--red-dim);color:var(--red)}
.num-gr{background:var(--green-dim);color:var(--green)}
.num-o{background:var(--orange-dim);color:var(--orange)}
.num-pk{background:var(--pink-dim);color:var(--pink)}

/* ============ MODULE PAGE CONTENT ============ */
.mod-hero{padding:3.5rem 0 2.5rem;border-bottom:1px solid var(--border-light)}
.mod-hero-top{display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:1.5rem}
.mod-num-lg{width:76px;height:76px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-family:'Cairo',sans-serif;font-size:1.9rem;font-weight:900;flex-shrink:0}
.mod-hero-text h1{font-family:'Cairo',sans-serif;font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:900;line-height:1.35;margin-bottom:0.4rem}
.mod-hero-text .mod-sub{color:var(--text-2);font-size:0.95rem;font-family:'DM Mono',monospace}
.mod-meta-bar{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.mod-meta-item{display:flex;align-items:center;gap:0.4rem;font-size:0.8rem;color:var(--text-3);background:rgba(255,255,255,0.03);padding:0.4rem 0.9rem;border-radius:8px;border:1px solid var(--border-light)}
.mod-meta-item strong{color:var(--text-2)}

.mod-body{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:2.5rem}
.mod-section{padding:2.25rem 2.5rem;border-bottom:1px solid var(--border-light)}
.mod-section:last-child{border-bottom:none}
.mod-section-title{font-family:'Cairo',sans-serif;font-size:1.1rem;font-weight:700;color:var(--accent);margin-bottom:1.1rem;display:flex;align-items:center;gap:0.5rem}
.mod-section-title::before{content:'';width:4px;height:20px;background:var(--accent);border-radius:2px}
.mod-subsection-title{font-family:'Cairo',sans-serif;color:var(--teal);margin:1.75rem 0 0.85rem;font-weight:700;font-size:1rem;display:flex;align-items:center;gap:0.5rem}
.mod-subsection-title::before{content:'';width:3px;height:16px;background:var(--teal);border-radius:2px}

.sub-topics{list-style:none;display:flex;flex-direction:column;gap:0.65rem}
.sub-topics li{display:flex;align-items:flex-start;gap:0.75rem;font-size:0.9rem;color:var(--text-2);padding:0.4rem 0;line-height:1.8}
.sub-topics li .icon{color:var(--accent);font-size:0.65rem;margin-top:0.5rem;flex-shrink:0}
.sub-topics li strong{color:var(--text);font-weight:600}
.sub-topics li code{font-family:'DM Mono',monospace;font-size:0.8rem;background:rgba(201,168,76,0.08);color:var(--accent-light);padding:0.1rem 0.4rem;border-radius:4px}
.sub-topics li .en{color:var(--text-3);font-size:0.8rem;font-style:italic}
.sub-topics.compact li{padding:0.15rem 0}

.case-study{background:rgba(0,201,183,0.04);border:1px solid rgba(0,201,183,0.1);border-radius:var(--radius-sm);padding:1.5rem 2rem;margin:1.25rem 0}
.case-study.gold{background:var(--accent-dim);border-color:rgba(201,168,76,0.15)}
.case-study-title{font-weight:700;color:var(--teal);font-size:0.9rem;margin-bottom:0.5rem}
.case-study.gold .case-study-title{color:var(--accent)}
.case-study p{color:var(--text-2);font-size:0.88rem;line-height:1.9}

.callout{border-radius:var(--radius-sm);padding:1.25rem 1.75rem;margin:1.25rem 0}
.callout.gold{background:var(--accent-dim);border-right:3px solid var(--accent)}
.callout.teal{background:var(--teal-dim);border-right:3px solid var(--teal)}
.callout.red{background:var(--red-dim);border-right:3px solid var(--red)}
.callout.blue{background:var(--blue-dim);border-right:3px solid var(--blue)}
.callout.green{background:var(--green-dim);border-right:3px solid var(--green)}
.callout-title{font-weight:700;font-size:0.88rem;margin-bottom:0.4rem}
.callout.gold .callout-title{color:var(--accent)}
.callout.teal .callout-title{color:var(--teal)}
.callout.red .callout-title{color:var(--red)}
.callout.blue .callout-title{color:var(--blue)}
.callout.green .callout-title{color:var(--green)}
.callout p{color:var(--text-2);font-size:0.88rem;line-height:1.9}

/* Tables */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);margin:1.25rem 0}
table{width:100%;border-collapse:collapse;font-size:0.85rem}
thead{background:rgba(201,168,76,0.06)}
th{padding:1rem 1.25rem;text-align:right;font-family:'Cairo',sans-serif;font-weight:700;font-size:0.78rem;color:var(--accent-light);border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:0.85rem 1.25rem;border-bottom:1px solid var(--border-light);color:var(--text-2);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,0.015)}
td strong{color:var(--text);font-weight:600}

.tag{display:inline-block;padding:0.15rem 0.55rem;border-radius:5px;font-size:0.72rem;font-weight:700;white-space:nowrap}
.tag-req{background:var(--red-dim);color:var(--red)}
.tag-opt{background:var(--green-dim);color:var(--green)}
.tag-new{background:var(--blue-dim);color:var(--blue)}
.tag-upd{background:var(--orange-dim);color:var(--orange)}
.tag-wip{background:var(--purple-dim);color:var(--purple)}

/* Code */
.code-block{background:rgba(0,0,0,0.35);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.5rem;margin:1.25rem 0;font-family:'DM Mono',monospace;font-size:0.82rem;direction:ltr;text-align:left;color:var(--text-2);overflow-x:auto;line-height:1.85}
.cm{color:var(--text-3)}
.k{color:var(--teal)}
.v{color:var(--accent)}
.b{color:var(--purple)}

/* Grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.card-sm{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.5rem}
.card-sm h4{font-family:'Cairo',sans-serif;font-weight:700;font-size:0.95rem;margin-bottom:0.5rem}
.card-sm p{color:var(--text-2);font-size:0.85rem;line-height:1.8}

/* Accordion */
.acc-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:0.75rem;overflow:hidden;transition:border-color 0.3s}
.acc-item:hover{border-color:rgba(201,168,76,0.25)}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.5rem;background:var(--bg-card);border:none;color:var(--text);font-family:'Cairo',sans-serif;font-size:0.92rem;font-weight:700;cursor:pointer;text-align:right;gap:1rem}
.acc-btn::after{content:'+';font-size:1.3rem;color:var(--accent);transition:transform 0.3s;flex-shrink:0}
.acc-item.open .acc-btn::after{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height 0.4s ease}
.acc-item.open .acc-body{max-height:4000px}
.acc-inner{padding:0 1.5rem 1.5rem}

/* Module footer nav (prev/next) */
.mod-pager{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem}
.pager-link{flex:1;display:flex;flex-direction:column;gap:0.3rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.1rem 1.4rem;text-decoration:none;color:inherit;transition:all 0.25s}
.pager-link:hover{border-color:rgba(201,168,76,0.35);background:var(--bg-card-hover)}
.pager-link .lbl{font-size:0.72rem;color:var(--text-3)}
.pager-link .ttl{font-family:'Cairo',sans-serif;font-weight:700;font-size:0.92rem;color:var(--text)}
.pager-link.next{text-align:left}

/* Breadcrumb */
.crumb{font-size:0.8rem;color:var(--text-3);margin-bottom:1rem}
.crumb a{color:var(--text-3);text-decoration:none}
.crumb a:hover{color:var(--accent)}

/* Footer */
.footer{background:var(--bg-alt);border-top:1px solid var(--border);padding:3.5rem 2rem 2rem;text-align:center}
.footer-title{font-family:'Cairo',sans-serif;font-size:1.4rem;font-weight:900;margin-bottom:0.75rem}
.footer p{color:var(--text-3);font-size:0.85rem}
.footer-links{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin:1.5rem 0}
.footer-links a{color:var(--text-3);text-decoration:none;font-size:0.82rem;transition:color 0.2s}
.footer-links a:hover{color:var(--accent)}

/* Progress checklist widget (localStorage-free — session only) */
.check-item{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0;cursor:pointer;font-size:0.88rem;color:var(--text-2)}
.check-item input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.check-item.checked span{color:var(--text-3);text-decoration:line-through}

/* Fade-up animation */
.fade-up{animation:fadeUp 0.6s ease forwards;opacity:0}
@keyframes fadeUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media(max-width:900px){
  .grid-2,.grid-3,.grid-4,.mod-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-toggle{display:block}
  .mod-hero-top{flex-direction:column;gap:1rem}
  .mod-num-lg{width:58px;height:58px;font-size:1.4rem}
  .mod-section{padding:1.5rem}
  .mod-pager{flex-direction:column}
}