/* ============================================================================
   docs.visena.com — the one token set and the shared chrome.
   Loaded by every page in both language trees. Page-specific layout lives in
   landing.css (front pages, overviews) and guide.css (sidebar documents).

   Before PD-2189 every page inlined its own stylesheet — eight copies of the
   same brand tokens, drifted into two vocabularies (--red/--ink-deep on the
   landing pages, --brand/--brand-ink on the partner pages). This file is the
   merge: the partner naming won, because --brand survives a rebrand and --red
   does not. A visual fix is now one edit rather than sixteen.
   ========================================================================= */

:root{
	/* surfaces */
	--paper:#ffffff; --panel:#ffffff; --tint:#f2f7fc;
	/* ink */
	--ink:#142338; --ink-deep:#101d31; --muted:#5b6b7c;
	--line:#dfe6ec; --line-soft:#edf1f5;
	/* Visena red */
	--brand:#de2030; --brand-ink:#b81a28; --brand-soft:#fdeeef; --brand-line:#f6cdd1;
	/* semantic accents, carried over from the partner guide vocabulary */
	--cred:#0c7a58;  --cred-soft:#e7f4ee;  --cred-line:#bfe2d2;
	--token:#9a5b0f; --token-soft:#faf1e2; --token-line:#e8d3ac;
	--data:#2757ad;  --data-soft:#e9f0fb;  --data-line:#c4d6f1;
	--danger:#b03a30; --danger-soft:#faecea; --danger-line:#ecc8c4;
	/* code */
	--code-bg:#f3f4f4; --code-ink:#2b3945; --kbd-bg:#eceeef;
	--code-dark-bg:#101d31; --code-dark-ink:#d7e2ee; --code-cmt:#7d90a6;
	--code-key:#8fc1ff; --code-str:#ffb3a6;
	/* effects */
	--shadow:0 1px 2px rgba(16,29,49,.05), 0 14px 38px -24px rgba(16,29,49,.25);
	--hero-grad:radial-gradient(1150px 500px at 50% -120px, rgba(222,32,48,.07), transparent 70%);
	--mast-h:54px;
	/* type */
	--font-display:"Sora","Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	--font-body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	--font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* The dark palette redefines tokens only — never a rule. Any page that paints
   with the tokens above is dark-correct for free. */
:root[data-theme="dark"]{
	--paper:#0d1722; --panel:#152231; --tint:#111d2a;
	--ink:#e8eef5; --ink-deep:#f4f8fc; --muted:#9bb0c4;
	--line:#26374b; --line-soft:#1c2938;
	--brand:#ff5c68; --brand-ink:#ff8a92; --brand-soft:#2a1620; --brand-line:#4a2530;
	--cred:#4cc79b;  --cred-soft:#12291f;  --cred-line:#24503c;
	--token:#e0aa5a; --token-soft:#2a2113; --token-line:#4d3d1e;
	--data:#7ea9ef;  --data-soft:#151f31;  --data-line:#2c3f5f;
	--danger:#f18b80; --danger-soft:#2b1714; --danger-line:#502a25;
	--code-bg:#0a121b; --code-ink:#d3dde8; --kbd-bg:#1b2937;
	--code-dark-bg:#08101a;
	--shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 38px -24px rgba(0,0,0,.7);
	--hero-grad:radial-gradient(1150px 500px at 50% -120px, rgba(255,92,104,.10), transparent 70%);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 var(--font-body)}
a{color:var(--brand-ink); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-.02em; text-wrap:balance; color:var(--ink-deep)}
code,kbd,pre,.mono{font-family:var(--font-mono)}
code{background:var(--code-bg); color:var(--code-ink); padding:.12em .4em; border-radius:5px; font-size:.84em}
kbd{background:var(--kbd-bg); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:.8em}
img{max-width:100%}
.wrap{max-width:1060px; margin:0 auto; padding:0 26px}
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
	clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------------------------------------------------------------- masthead
   One masthead for the whole site, at one height. Before PD-2189 the landing
   pages had a ~49px padded bar and the guide pages a fixed 54px one, which is
   why the logo jumped when you followed a link from the front page into a
   guide. --mast-h is the contract guide.css sticks its sidebar to. */
.masthead{position:sticky; top:0; z-index:50; height:var(--mast-h); box-sizing:border-box;
	background:var(--panel); border-bottom:1px solid var(--line)}
.mast-wrap{display:flex; align-items:center; gap:14px; height:100%; padding:0 20px;
	max-width:1600px; margin:0 auto}
.mast-brand{display:flex; align-items:center; gap:12px; margin-right:auto; min-width:0;
	color:var(--ink)}
.mast-brand:hover{text-decoration:none; color:var(--ink)}
.mast-brand img{height:22px; width:auto; display:block}
:root[data-theme="dark"] .mast-brand img{filter:brightness(0) invert(1)}
.mast-divider{width:1px; height:20px; background:var(--line); flex:none}
.mast-product{font-family:var(--font-display); font-weight:700; font-size:13.5px;
	color:var(--ink); white-space:nowrap}
.mast-nav{display:flex; align-items:center; gap:2px}
.mast-nav a{font-size:13.5px; font-weight:600; color:var(--ink); padding:6px 11px;
	border-radius:8px; white-space:nowrap}
.mast-nav a:hover{color:var(--brand-ink); background:var(--brand-soft); text-decoration:none}
.mast-nav a[aria-current="page"]{color:var(--brand-ink)}
/* The tools cluster is the right corner: theme first, language outermost. */
.mast-tools{display:flex; align-items:center; gap:10px; flex:none}
.mast-cta{background:var(--brand); color:#ffffff; font-size:13px; font-weight:600;
	padding:8px 16px; border-radius:9px; white-space:nowrap}
.mast-cta:hover{background:var(--brand-ink); color:#ffffff; text-decoration:none}
:root[data-theme="dark"] .mast-cta{color:var(--ink-deep)}
@media (max-width:900px){
	.masthead{position:static; height:auto}
	.mast-wrap{padding:9px 16px}
	.mast-nav,.mast-cta{display:none}
	.mast-product{display:none}
}

/* --------------------------------------------------- switches (pill pairs)
   The theme switch and the language switch are one component with different
   contents, so they cannot drift apart visually. Both sit at the right end of
   the masthead and the language switch is the outermost control, which is the
   corner PD-2189 asks for.

   The theme options are <button> (they change this page). The language options
   are <a href> to the counterpart page, so the switcher still works with
   JavaScript disabled — assets/docs.js only adds the remembering. Hence both
   selectors below: aria-pressed for the buttons, aria-current for the links. */
.switch{display:flex; gap:2px; border:1px solid var(--line); background:var(--line-soft);
	border-radius:999px; padding:2px; flex:none}
.switch button,.switch a{cursor:pointer; border:none; border-radius:999px; background:none;
	color:var(--muted); font:600 12px/1 var(--font-body); padding:7px 12px;
	display:flex; align-items:center; gap:6px; text-decoration:none}
.switch button[aria-pressed="true"],.switch a[aria-current="true"]{
	background:var(--panel); color:var(--brand-ink); box-shadow:var(--shadow)}
.switch button:hover,.switch a:hover{color:var(--ink); text-decoration:none}
.theme-switch button{flex:1; justify-content:center; min-width:64px}
.lang-switch a{padding:6px 10px}
.lang-switch .code{font-family:var(--font-mono); font-size:11px; letter-spacing:.04em}
@media (max-width:640px){ .lang-switch .code{display:none} }

/* Flags as background images, not emoji: the emoji flags render as the bare
   letters "GB" and "NO" on Windows, which is exactly the platform most partner
   developers are on. Not <use href> either, so there is no second request and
   no external-reference quirks. The Union Jack is the centred simplification
   (the real counterchanged diagonals are indistinguishable at 20x14). */
.lang-switch .flag{width:20px; height:14px; border-radius:2px; display:block; flex:none;
	background-size:cover; background-position:center;
	box-shadow:0 0 0 1px rgba(16,29,49,.14)}
:root[data-theme="dark"] .lang-switch .flag{box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.lang-switch a[aria-current="false"] .flag,
.lang-switch a:not([aria-current]) .flag{filter:saturate(.35) opacity(.6)}
.lang-switch a:hover .flag{filter:none}
.flag-nb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Crect width='22' height='16' fill='%23ba0c2f'/%3E%3Cpath d='M6 0h4v16H6zM0 6h22v4H0z' fill='%23ffffff'/%3E%3Cpath d='M7 0h2v16H7zM0 7h22v2H0z' fill='%23002868'/%3E%3C/svg%3E")}
.flag-en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Crect width='22' height='16' fill='%23012169'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='4'%3E%3Cpath d='M0 0L22 16M22 0L0 16'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c8102e' stroke-width='2'%3E%3Cpath d='M0 0L22 16M22 0L0 16'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='6'%3E%3Cpath d='M11 0V16M0 8H22'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c8102e' stroke-width='3.4'%3E%3Cpath d='M11 0V16M0 8H22'/%3E%3C/g%3E%3C/svg%3E")}

/* ------------------------------------------------------------------ buttons */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:10px; padding:12px 22px;
	font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; border:1px solid transparent}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand); color:#ffffff}
.btn-primary:hover{background:var(--brand-ink); color:#ffffff}
:root[data-theme="dark"] .btn-primary,:root[data-theme="dark"] .btn-primary:hover{color:var(--ink-deep)}
.btn-ghost{background:var(--panel); color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand-line); color:var(--brand-ink)}

/* --------------------------------------------------------------- code cards */
.codecard{background:var(--code-dark-bg); border-radius:12px; overflow:hidden; min-width:0;
	margin:0 0 20px; box-shadow:var(--shadow)}
.codecard .bar{display:flex; align-items:center; gap:7px; padding:10px 14px;
	border-bottom:1px solid rgba(255,255,255,.08)}
.codecard .bar .dot{width:9px; height:9px; border-radius:50%; background:var(--code-cmt); opacity:.5}
.codecard .bar .name{margin-left:6px; font-family:var(--font-mono); font-size:11px; color:var(--code-cmt)}
.codecard pre{margin:0; padding:16px 18px; overflow-x:auto; font-size:12px; line-height:1.6;
	color:var(--code-dark-ink)}
.codecard .c{color:var(--code-cmt)} .codecard .k{color:var(--code-key); font-weight:600}
.codecard .s{color:var(--code-str)}

/* ------------------------------------------------------------------ figures
   Diagrams are TOKEN-DRIVEN. An inline SVG carries these classes and no fill or
   stroke attributes of its own, so one drawing is correct in both themes.

   This exists because the first wave of PD-2189 pages lost three informative
   figures — the AML surface map, the risk-model lifecycle, the partner request
   flow — for want of it: the only way to draw one was a hardcoded hex, which the
   asset rules forbid, so the figures became prose. Draw them with these instead. */
.diagram{margin:20px 0 8px; border:1px solid var(--line); border-radius:12px;
	background:var(--panel); padding:14px; overflow-x:auto}
.diagram svg{display:block; margin:0 auto; max-width:100%; height:auto}
.diagram figcaption{margin:10px 4px 0; font-size:12.8px; line-height:1.5; color:var(--muted)}
.node-box{fill:var(--panel); stroke:var(--line); stroke-width:1.5}
.node-box.accent{fill:var(--brand-soft); stroke:var(--brand-line)}
.node-box.muted{fill:var(--line-soft); stroke:var(--line)}
.node-label{fill:var(--ink); font-family:var(--font-display); font-size:13px; font-weight:600}
.node-sub{fill:var(--muted); font-family:var(--font-body); font-size:11px; font-weight:500}
.node-mono{fill:var(--muted); font-family:var(--font-mono); font-size:11px}
.flowline{stroke:var(--line); stroke-width:2; fill:none}
.flowline.accent{stroke:var(--brand)}
.flowline.dashed{stroke-dasharray:5 4}
.flowhead{fill:var(--line)}
.flowhead.accent{fill:var(--brand)}

/* ------------------------------------------------------------------- footer */
.site-foot{padding:30px 0 46px; color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap;
	gap:14px 22px; align-items:center; justify-content:space-between;
	border-top:1px solid var(--line-soft); margin-top:10px}
.site-foot .foot-brand{display:flex; align-items:center; gap:10px}
.site-foot img{height:18px; width:auto; display:block; opacity:.85}
:root[data-theme="dark"] .site-foot img{filter:brightness(0) invert(1)}

/* ------------------------------------------------------------------ motion */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
	html{scroll-behavior:auto}
	.reveal{opacity:1; transform:none; transition:none}
}