/* Banking Experience System — documentation site */
:root{
  --paper:#FFFFFF; --paper2:#F7F8FA; --paper3:#EEF0F4; --line:#DDE1E8; --line2:#C2C9D4;
  --ink:#161C2E; --ink2:#55617A; --ink3:#9AA4B4;
  --act:#1F52C4; --act-h:#17408F; --on-act:#FFFFFF;
  --pos:#0B7A45; --warn:#8F5F0E; --info:#0F6974;
  --code-bg:#EEF0F4; --focus:#3168E8;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#10141F; --paper2:#181D2B; --paper3:#212739; --line:#2A324B; --line2:#3D4763;
    --ink:#F2F4F8; --ink2:#A8B1C2; --ink3:#71809A;
    --act:#5A8AF2; --act-h:#8AAEF9; --on-act:#0C2140;
    --pos:#6CCD9C; --warn:#E8B054; --info:#63BFC8;
    --code-bg:#212739; --focus:#8AAEF9;
  }
}
*{box-sizing:border-box;margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Inter","Noto Sans Arabic",-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--act); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}

/* Draft status strip. Sits under the topbar on every page: the automated gates
   are the only gates that have run, and that has to be visible where the system
   is browsed, not only in STATUS.md. Uses chrome tokens so it themes with the
   site rather than reading as a BES component. */
.statusbar{background:var(--paper3); color:var(--ink); border-bottom:1px solid var(--line);
  border-inline-start:3px solid var(--warn); padding:10px 20px; font-size:13.5px; line-height:1.5}
.statusbar strong{font-weight:600}
/* --act-h, not --act: on the --paper3 tint the resting link colour measures
   4.49:1 in dark mode, just under AA. --act-h gives 8.50:1 light / 6.72:1 dark. */
.statusbar a{color:var(--act-h); margin-inline-start:4px; text-decoration:underline}
@media (max-width:900px){ .statusbar{font-size:12.5px; padding:9px 16px} }

/* top bar */
.topbar{position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 20px; height:56px}
.topbar .sq{width:28px;height:28px;border-radius:6px;background:var(--act);color:var(--on-act);display:grid;place-items:center;font-weight:700;font-size:11px;flex:none}
.topbar .name{font-weight:600; font-size:15px; color:var(--ink)}
.topbar .spacer{flex:1}
.topbar .pill{font-size:13.5px; font-weight:500; border:1px solid var(--line2); border-radius:999px; padding:6px 14px; color:var(--ink); background:var(--paper); font-family:inherit; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center}
.topbar .pill:hover{background:var(--paper2); text-decoration:none}
.topbar .pill.on{background:var(--paper3); font-weight:600}
.menu-btn{display:none; border:1px solid var(--line2); background:var(--paper); color:var(--ink); border-radius:8px; padding:6px 10px; font:inherit; font-size:13px; cursor:pointer}

/* layout */
.shell{display:grid; grid-template-columns:280px 1fr; max-width:1400px; margin:0 auto; min-height:calc(100vh - 56px)}
nav.side{background:var(--paper); border-inline-end:1px solid var(--line); padding:24px 16px 48px; position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto}
nav.side .grp{font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin:20px 8px 6px}
nav.side .grp:first-child{margin-top:0}
nav.side a{display:block; font-size:14px; color:var(--ink2); padding:6px 10px; border-radius:7px; margin-bottom:1px}
nav.side a:hover{background:var(--paper2); color:var(--ink); text-decoration:none}
nav.side a.on{background:var(--paper3); color:var(--ink); font-weight:600}
main{padding:44px 56px 96px; min-width:0}
.content{max-width:820px}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  nav.side{display:none; position:fixed; inset:56px 0 0 0; background:var(--paper); z-index:90; height:auto; border:none}
  nav.side.open{display:block}
  .menu-btn{display:block}
  main{padding:28px 20px 80px}
}

/* content typography */
.content h1{font-size:30px; line-height:1.25; font-weight:700; letter-spacing:-.3px; margin-bottom:8px; text-wrap:balance}
.content h2{font-size:21px; font-weight:600; letter-spacing:-.2px; margin:36px 0 12px; padding-top:18px; border-top:1px solid var(--line)}
.content h3{font-size:17px; font-weight:600; margin:26px 0 8px}
.content p{margin:0 0 14px; max-width:72ch}
.content ul,.content ol{margin:0 0 14px; padding-inline-start:24px; max-width:72ch}
.content li{margin-bottom:5px}
.content strong{font-weight:600}
.content blockquote{border-inline-start:3px solid var(--line2); padding:4px 18px; color:var(--ink2); margin:0 0 14px}
.content hr{border:none; border-top:1px solid var(--line); margin:28px 0}
.content code{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:.86em; background:var(--code-bg); border-radius:5px; padding:2px 6px}
.content pre{background:var(--code-bg); border:1px solid var(--line); border-radius:10px; padding:16px 18px; overflow-x:auto; margin:0 0 16px; line-height:1.5}
.content pre code{background:none; padding:0; font-size:13px}
.tbl-wrap{overflow-x:auto; margin:0 0 18px; border:1px solid var(--line); border-radius:10px}
.content table{border-collapse:collapse; width:100%; font-size:14px; min-width:520px}
.content th{text-align:start; font-weight:600; font-size:13px; color:var(--ink2); background:var(--paper2); padding:10px 14px; border-bottom:1px solid var(--line)}
.content td{padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.content tr:last-child td{border-bottom:none}
.content td code{white-space:nowrap}

/* page meta + pagination */
.crumb{font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--act); margin-bottom:10px}
.pgnav{display:flex; justify-content:space-between; gap:16px; margin-top:56px; padding-top:20px; border-top:1px solid var(--line)}
.pgnav a{display:block; font-size:14px; font-weight:600; max-width:46%}
.pgnav .lbl{display:block; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); margin-bottom:3px}
.pgnav .next{margin-inline-start:auto; text-align:end}

/* landing */
.hero-land{padding:72px 0 48px}
.hero-land h1{font-size:40px; line-height:1.15; font-weight:700; letter-spacing:-.5px; max-width:18ch; text-wrap:balance}
.hero-land .lede{font-size:18px; color:var(--ink2); max-width:58ch; margin-top:18px; line-height:1.65}
.hero-land .lede strong{color:var(--ink); font-weight:600}
.hero-cta{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.hero-cta a{border-radius:10px; padding:12px 22px; font-weight:600; font-size:15px}
.hero-cta a.pri{background:var(--act); color:var(--on-act)}
.hero-cta a.pri:hover{background:var(--act-h); text-decoration:none}
.hero-cta a.sec{border:1px solid var(--line2); color:var(--ink)}
.hero-cta a.sec:hover{background:var(--paper2); text-decoration:none}
.stats{display:flex; gap:28px; flex-wrap:wrap; margin-top:36px; font-size:13.5px; color:var(--ink3)}
.stats b{display:block; font-size:22px; color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
.land-grp{margin-top:52px}
.land-grp>h2{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin-bottom:14px; border:none; padding:0}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.cardl{border:1px solid var(--line); border-radius:12px; padding:18px; display:block; color:var(--ink)}
.cardl:hover{background:var(--paper2); text-decoration:none; border-color:var(--line2)}
.cardl b{display:block; font-size:15px; font-weight:600; margin-bottom:4px}
.cardl span{font-size:13.5px; color:var(--ink2); line-height:1.5; display:block}
footer.site{border-top:1px solid var(--line); margin-top:72px; padding:22px 0; font-size:13px; color:var(--ink3); display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between}