/* The page around the OxaBank demo: the site's dark frame, a module rail, and the
   real web build in a phone (customer app) or a browser window (back office). */
:root {
  --bg: #0c0f16;
  --surface: #12161f;
  --surface-2: #181d28;
  --text: #f2f4f8;
  --muted: #8a93a3;
  --faint: #5c6473;
  --accent: #e2231a;
  --border: rgba(232, 236, 242, 0.1);
  --line: rgba(232, 236, 242, 0.08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--bg); }
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.page { padding: 0 0 28px; }

.topline { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 2px 0 18px; }
.topline p { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.topline b { color: var(--text); font-weight: 600; }

.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.seg button {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s;
}
.seg button:hover { color: var(--text); }
.seg button[aria-selected="true"] { background: var(--accent); color: #fff; }
.seg button:focus-visible, .rail button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* rail + phone + what crosses the API. The phone moves left of centre so the API
   panel can sit beside it; the back office's window takes the width and the API
   panel goes under it. */
.split { display: grid; grid-template-columns: 240px 424px minmax(0, 1fr); gap: 16px; align-items: start; }
/* The back office's window takes the middle and the API panel docks on the right at
   about a fifth of the width, as an editor's agent panel does; "dock below" puts it
   under the product at full width instead, in either mode. */
.split.office { grid-template-columns: 220px minmax(0, 1fr) minmax(300px, 21%); }
.split.dock-bottom { grid-template-columns: 240px 424px; justify-content: center; }
.split.office.dock-bottom { grid-template-columns: 240px minmax(0, 1fr); justify-content: stretch; }
.split.dock-bottom .wire { grid-column: 1 / -1; }
.split.office:not(.dock-bottom) .wire { max-height: 818px; overflow: auto; }
.split.office:not(.dock-bottom) .call .io { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1180px) {
  .split { grid-template-columns: 240px 424px; justify-content: center; }
  .split .wire { grid-column: 1 / -1; }
  .split.office, .split.office.dock-bottom { grid-template-columns: 240px minmax(0, 1fr); }
  .split.office .wire { grid-column: 1 / -1; max-height: none; }
}
@media (max-width: 720px) {
  .split, .split.office, .split.office.dock-bottom { grid-template-columns: minmax(0, 1fr); }
  .split > .panel:first-child { order: 3; }
  .split .wire, .split.office .wire { grid-column: 1; }
}

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; min-width: 0; }

.panel-tag {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); margin: 0 0 14px; padding: 0 2px;
}
.panel-tag .num {
  width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-grid; place-items: center; font-size: 11px; flex: none;
}

.rail { display: flex; flex-direction: column; gap: 1px; }
.rail-group { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin: 10px 0 4px; padding: 0 10px; }
.rail-group:first-child { margin-top: 0; }
.rail button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 10px;
  padding: 8px 10px; font-family: inherit; color: var(--muted); cursor: pointer; transition: background .15s, color .15s;
}
.rail button:hover, .rail button.active { background: var(--surface-2); color: var(--text); }
.rail button.active { box-shadow: inset 2px 0 0 var(--accent); }
.rail .n { display: block; font-size: 13px; font-weight: 500; line-height: 1.25; }
.rail .s { display: block; font-size: 10.5px; color: var(--faint); margin-top: 1px; line-height: 1.3; }
.rail-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.55; color: var(--faint); }

/* phone */
.device { display: flex; justify-content: center; width: 100%; }
.frame {
  width: 392px; max-width: 100%; background: #0b0b0d; border-radius: 60px; padding: 11px;
  box-shadow: 0 0 0 2px #2c2f36, 0 0 0 5px #15161a, 0 34px 80px rgba(0, 0, 0, 0.5);
}
/* The app's page is light (#F4F4F7 under a rose-to-lilac wash), so the status bar
   takes the top of the wash rather than the frame's black. */
.screen-inner {
  position: relative; border-radius: 50px; overflow: hidden; aspect-ratio: 390/888;
  display: flex; flex-direction: column; background: #f7eef3;
}
.island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 104px; height: 30px; background: #000; border-radius: 16px; z-index: 6; }
.statusbar {
  display: flex; flex: none; align-items: center; justify-content: space-between; height: 44px;
  padding: 10px 30px 0; font-size: 14px; font-weight: 600; color: #121217;
}
.statusbar .bars { display: inline-flex; gap: 3px; align-items: flex-end; height: 11px; }
.statusbar .bars i { width: 3px; background: currentColor; border-radius: 1px; }
.statusbar .bars i:nth-child(1) { height: 5px } .statusbar .bars i:nth-child(2) { height: 7px }
.statusbar .bars i:nth-child(3) { height: 9px } .statusbar .bars i:nth-child(4) { height: 11px }
.screen-inner iframe { flex: 1 1 auto; width: 100%; border: 0; display: block; background: #f4f4f7; }

/* browser window for the back office */
.window { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.chrome { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #1b1f29; border-bottom: 1px solid var(--line); }
.chrome i { width: 11px; height: 11px; border-radius: 50%; background: #3a3f4b; }
.chrome i:nth-child(1) { background: #ff5f57; } .chrome i:nth-child(2) { background: #febc2e; } .chrome i:nth-child(3) { background: #28c840; }
.chrome span { margin-left: 12px; font-size: 12px; color: var(--muted); }
.window iframe { display: block; width: 100%; height: 780px; border: 0; background: #f4f4f7; }
@media (max-width: 720px) { .window iframe { height: 640px; } }

/* ---------- what crosses the API ---------- */
.wire { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wire .panel-tag { margin-bottom: 0; }
.wire-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wire-tools { display: flex; gap: 2px; }
.tool {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s;
}
.tool:hover { background: var(--surface-2); color: var(--text); }
.tool:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.split.dock-bottom #dock svg { transform: rotate(-90deg); }
.wire.folded > :not(.wire-head) { display: none !important; }
.wire.folded #fold svg { transform: rotate(-90deg); }
.live { width: 7px; height: 7px; border-radius: 50%; background: #2eb373; box-shadow: 0 0 0 0 rgba(46,179,115,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(46,179,115,0); } 100% { box-shadow: 0 0 0 0 rgba(46,179,115,0); } }
@media (prefers-reduced-motion: reduce) { .live { animation: none; } }
.wire-note { margin: 0; padding: 0 2px; list-style: none; display: grid; gap: 3px; font-size: 11.5px; color: var(--faint); }
.wire-note li::before { content: ''; display: inline-block; width: 8px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 8px; }

.calls {
  list-style: none; margin: 0; padding: 4px; max-height: 196px; overflow-y: auto;
  background: #0a0c12; border: 1px solid var(--line); border-radius: 12px;
  font: 12px/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.calls:empty::before { content: 'Tap anything in the app: its calls appear here.'; display: block; padding: 10px; color: var(--faint); font-family: 'Montserrat', sans-serif; }
.calls li button {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; width: 100%;
  border: 0; background: transparent; color: var(--muted); text-align: left; padding: 5px 8px; border-radius: 7px; cursor: pointer; font: inherit;
}
.calls li button:hover, .calls li.on button { background: var(--surface-2); color: var(--text); }
.calls .m { font-weight: 700; }
.calls .m.GET { color: #6aa8ff; } .calls .m.POST { color: #ffb454; } .calls .m.DELETE, .calls .m.PUT, .calls .m.PATCH { color: #ff7a8a; }
.calls .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.calls .s.ok { color: #2eb373; } .calls .s.no { color: #ff7a8a; }
.calls .t { color: var(--faint); font-size: 11px; }
.calls .x { color: var(--faint); font-size: 10.5px; margin-left: 6px; }
.calls li.issuer button { grid-template-columns: 52px minmax(0, 1fr); }
.calls li.issuer .m { color: #c792ea; }

.call { display: grid; gap: 10px; }
.call .io { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; min-width: 0; }
.call .io > div, .call { min-width: 0; }
@media (max-width: 560px) { .call .io { grid-template-columns: 1fr; } }
.lbl { margin: 0 0 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.lbl #st { letter-spacing: 0; text-transform: none; font-weight: 700; margin-left: 4px; }
.lbl #st.ok { color: #2eb373; } .lbl #st.no { color: #ff7a8a; }
.call pre {
  margin: 0; padding: 10px 12px; background: #0a0c12; border: 1px solid var(--line); border-radius: 10px;
  font: 11.5px/1.55 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: #c9d1dc;
  max-height: 180px; overflow: auto; white-space: pre; tab-size: 2;
}
.by { margin: -2px 0 0; font: 12px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--text); word-break: break-all; }
.by b { color: #ffb454; font-weight: 600; }
.mods { display: flex; flex-wrap: wrap; gap: 6px; }
.mods span { font: 11px/1 ui-monospace, Menlo, monospace; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(226,35,26,.4); background: rgba(226,35,26,.1); color: #ffd0cc; }
.call pre.code { max-height: 560px; padding: 10px 0; }
.code .ln { display: block; padding: 0 12px 0 0; }
.code .ln i { display: inline-block; width: 44px; padding-right: 12px; text-align: right; color: #3d4452; font-style: normal; user-select: none; }
.code .ln.fn { background: rgba(255,180,84,.07); }
.code .ln.gap { color: #3d4452; }
.tk-c { color: #5c6e7e; font-style: italic; } .tk-s { color: #a5d6a7; } .tk-k { color: #c792ea; } .tk-t { color: #82aaff; } .tk-m { color: #ffcb6b; } .tk-n { color: #f78c6c; }
.js-k { color: #82aaff; } .js-s { color: #a5d6a7; } .js-n { color: #f78c6c; } .js-b { color: #c792ea; }

/* ---------- the site's newer language (05.10): hairline panels, mono "// labels",
   no red circles or traffic lights, red kept for the one active mark ---------- */
.seg { border-radius: 8px; padding: 2px; background: #0b0d12; }
.seg button { border-radius: 6px; font-weight: 500; }
.seg button[aria-selected="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 0 var(--accent); }
/* "Open ↗": the side shown, on a page of its own (full screen on a tablet, installable from there) */
.open {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 8px; background: #0b0d12;
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.open span { color: var(--muted); transition: color .15s; }
.open:hover { background: var(--surface-2); border-color: rgba(232, 236, 242, 0.22); }
.open:hover span { color: var(--accent); }
.open:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.panel { border-radius: 10px; background: #0b0d12; border-color: var(--line); }

.panel-tag {
  font: 500 11.5px/1 ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.06em;
}
.panel-tag .num { display: none; }
.panel-tag::before { content: '//'; color: var(--faint); }

.rail button { border-radius: 6px; }
.rail-group { font: 500 10.5px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.06em; }

/* the back office window: a title tab like an editor's, no traffic lights */
.window { border-radius: 10px; }
.chrome { padding: 0 14px 0 0; background: #11141b; }
.chrome i { display: none; }
.chrome span {
  display: inline-flex; align-items: center; height: 100%; margin: 0; padding: 0 16px;
  background: #0b0d12; border-right: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--accent);
  font: 500 12px/1 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--text);
}

/* live: a small square that breathes, not a pulsing green dot */
.live { width: 6px; height: 6px; border-radius: 1px; background: #2eb373; box-shadow: none; animation: blink 1.6s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.wire-note li::before { content: '›'; width: auto; height: auto; background: none; color: var(--faint); margin-right: 8px; }
.calls { border-radius: 8px; }
.call pre { border-radius: 8px; }
.mods span { border-radius: 3px; border-color: var(--border); background: transparent; color: var(--muted); }

/* ---------- one window, not three cards (05.10): a title bar with the switch, then the
   rail, the product and the API as columns of one frame split by hairlines, as an
   editor lays out its panes. The 1px gap over a hairline-coloured frame draws every
   divider, whichever way the panes are docked. ---------- */
.topline {
  margin: 0; padding: 8px 12px; gap: 16px;
  background: #11141b; border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0;
}
.topline p { font-size: 13px; }
.split {
  gap: 1px; background: var(--line);
  border: 1px solid var(--border); border-radius: 0 0 10px 10px; overflow: hidden;
}
.split.dock-bottom, .split.office.dock-bottom { grid-template-columns: 240px minmax(0, 1fr); justify-content: stretch; }
.panel { border: 0; border-radius: 0; background: #0b0d12; padding: 18px; }
/* the product sits on a dotted field, the way the page sets its demo */
.panel.stage {
  display: grid; place-items: center; padding: 28px 18px; align-self: stretch;
  background: #0b0d12 radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.2px) 0 0 / 14px 14px;
}
.split.office .panel.stage { place-items: stretch; align-content: start; }
.rail-note { border-top-color: var(--line); }
@media (max-width: 1180px) {
  .split { grid-template-columns: 240px minmax(0, 1fr); justify-content: stretch; }
}
@media (max-width: 720px) {
  .topline { border-radius: 10px 10px 0 0; }
  .split, .split.office, .split.office.dock-bottom, .split.dock-bottom { grid-template-columns: minmax(0, 1fr); }
}
/* every pane runs the full height of the window; beside the back office the API pane
   takes the row's height from the product and scrolls inside it */
.split { align-items: stretch; }
.split.office:not(.dock-bottom) .wire { max-height: none; contain: size; }
@media (max-width: 1180px) { .split.office .wire { contain: none; } }
.panel.stage { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) { .panel.stage { padding: 18px 10px; } }

/* a compact rail: names only, tighter rows, so the list is as tall as the phone and the
   screen picked sits beside it; the product sits at the top of its pane, not mid-column */
.rail .s { display: none; }
.rail button { padding: 6px 10px; }
.rail .n { font-size: 12.5px; }
.rail-group { margin: 12px 0 3px; }
.rail-group:first-child { margin-top: 0; }
.split { grid-template-columns: 196px 424px minmax(0, 1fr); }
.split.office { grid-template-columns: 196px minmax(0, 1fr) minmax(300px, 21%); }
.split.dock-bottom, .split.office.dock-bottom { grid-template-columns: 196px minmax(0, 1fr); }
.panel.stage { place-items: start center; align-content: start; padding-top: 22px; }
@media (max-width: 1180px) {
  .split, .split.office { grid-template-columns: 196px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .split, .split.office, .split.office.dock-bottom, .split.dock-bottom { grid-template-columns: minmax(0, 1fr); }
}