/* Merchant Portal mini UI, shared by every variant of the portal section.
   The screens redraw the real Merchant Portal pages (Dashboard, Transactions, Dispute case, Balances,
   Withdrawal requests, API keys, Webhooks, Team) with the landing tokens, so both themes work.
   All data is illustrative. Every class starts with "portal-". */

.portal-ui {
  --pu-app: var(--surface-2);
  --pu-card: var(--surface);
  --pu-side: color-mix(in srgb, var(--surface-2) 55%, var(--surface-3));
  --pu-sel: color-mix(in srgb, var(--surface-3) 75%, var(--surface-2));
  --pu-mute: color-mix(in srgb, var(--text-2) 78%, transparent);
  --pu-info-fg: #3f3cca; --pu-info-bg: #e3e9fd;
  --pu-bad-fg: #b42318; --pu-bad-bg: #fdecec;
  --pu-amber: #efa23a; --pu-red: var(--bad);
  /* Sandbox wears the brand colour: a solid hairline and a pale tint of it */
  --pu-glow: var(--accent);
  --pu-glow-soft: linear-gradient(color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 16%, transparent));
  --pu-r: 12px;
  color: var(--text);
  font: 400 13px/1.35 var(--font);
  letter-spacing: -.003em;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.portal-ui {
  --pu-app: #18191b;
  --pu-side: #1c1d20;
  --pu-sel: #2e2f33;
  --pu-info-fg: #a3b2fd; --pu-info-bg: #262850;
  --pu-bad-fg: var(--bad-fg); --pu-bad-bg: var(--bad-bg);
}
.portal-ui svg { display: block; }
.portal-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.portal-mono { font-family: var(--font); font-size: .94em; letter-spacing: .01em; }

/* ---------- page furniture ---------- */
.portal-page { display: grid; gap: 14px; align-content: start; }
.portal-page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portal-page__head > div { min-width: 0; }
.portal-page__acts { display: flex; gap: 8px; flex: none; }
.portal-h { font: 400 23px/1.08 var(--font); letter-spacing: -.035em; }
.portal-sub { margin-top: 5px; font-size: 12.5px; color: var(--text-2); }
.portal-crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11.5px; color: var(--text-2); }
.portal-crumbs b { font-weight: 600; color: var(--text); }
.portal-crumbs .portal-ico { width: 12px; height: 12px; }
.portal-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.portal-cap { font: 500 10px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--pu-mute); }

.portal-card { position: relative; background: var(--pu-card); border: 1px solid var(--line); border-radius: var(--pu-r); padding: 14px 16px; min-width: 0; }
.portal-card__t { font: 600 13px/1.2 var(--font); letter-spacing: -.01em; }
.portal-card__s { margin-top: 3px; font-size: 11.5px; color: var(--text-2); }
.portal-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* status badges (sentence case, one colour system) */
.portal-st { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 3px 8px 3px 7px; border-radius: 99px; font: 600 10.5px/1.2 var(--font); letter-spacing: .01em; }
.portal-st::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.portal-st--ok { color: var(--ok-fg); background: var(--ok-bg); }
.portal-st--warn { color: var(--warn-fg); background: var(--warn-bg); }
.portal-st--info { color: var(--pu-info-fg); background: var(--pu-info-bg); }
.portal-st--bad { color: var(--pu-bad-fg); background: var(--pu-bad-bg); }
.portal-st--mute { color: var(--text-2); background: var(--pu-sel); }
.portal-st--plain::before { display: none; }
.portal-st .portal-ico { width: 11px; height: 11px; stroke-width: 2.2; }

/* buttons (pills, like the portal) */
.portal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 8px; white-space: nowrap;
  font: 600 12px/1 var(--font); border: 1px solid var(--line-2); background: var(--pu-card); color: var(--text); transition: opacity .3s, filter .3s; }
.portal-btn .portal-ico { width: 13px; height: 13px; stroke-width: 2; }
.portal-btn--primary { border-color: transparent; background: var(--brand); color: var(--on-brand); }
.portal-btn--ghost { background: transparent; }
.portal-btn.is-off { opacity: .42; filter: saturate(.4); }

.portal-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--pu-card); font: 600 11.5px/1 var(--font); color: var(--text); }
.portal-chip .portal-ico { width: 13px; height: 13px; }
.portal-chip--add .portal-ico:first-child { color: var(--text-2); }
.portal-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.portal-search { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--pu-card); color: var(--pu-mute); font-size: 12px; min-width: 0; }
.portal-search .portal-ico { width: 13px; height: 13px; }

/* notices */
.portal-note { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.4; }
.portal-note .portal-ico { width: 15px; height: 15px; margin-top: 1px; }
.portal-note b { display: block; font-weight: 600; margin-bottom: 2px; }
.portal-note--warn { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); }
.portal-note--warn p { color: color-mix(in srgb, var(--warn-fg) 80%, var(--text)); }
.portal-note--info { background: var(--pu-info-bg); color: var(--pu-info-fg); border: 1px solid color-mix(in srgb, var(--pu-info-fg) 22%, transparent); }

/* payment method: the brand mark on a white card, then the last four */
.portal-pm { display: inline-flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; font: 500 12px/1 var(--font); color: var(--text); }
.portal-pm__mark { width: 30px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.portal-pm__mark .m--visa { --m: .56; }
.portal-pm__mark .m--mc { --m: .66; }
.portal-pm__mark .m--apple { --m: .5; }
.portal-pm__mark .m--gpay { --m: .5; }

/* tables */
.portal-tbl { border: 1px solid var(--line); border-radius: var(--pu-r); background: var(--pu-card); overflow: hidden; }
.portal-tbl__row { position: relative; display: grid; grid-template-columns: var(--cols); align-items: center; gap: 12px; height: 38px; transition: background-color .35s; padding: 0 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.portal-tbl__row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-tbl__row > .portal-st, .portal-tbl__row > span:has(> .portal-st) { overflow: visible; }
.portal-tbl__head { height: 32px; border-top: 0; background: color-mix(in srgb, var(--pu-app) 55%, var(--pu-card)); font: 500 11px/1 var(--font); color: var(--text-2); }
.portal-tbl__row b { font-weight: 600; }
.portal-tbl__row .r { text-align: right; justify-self: end; }
.portal-tbl__row .dim { color: var(--text-2); }
.portal-tbl__row[data-new="1"] { background: var(--accent-soft); }
.portal-tbl__row[data-sel="1"] { background: color-mix(in srgb, var(--accent) 12%, var(--pu-card)); }
.portal-tbl__row[data-new="1"]::before, .portal-tbl__row[data-sel="1"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.portal-tbl__foot { padding: 9px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); }
.portal-tbl__foot b { color: var(--text); font-weight: 600; }

/* person */
.portal-av { width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; font: 600 9.5px/1 var(--font); letter-spacing: .02em;
  color: var(--av-fg, var(--ok-fg)); background: var(--av-bg, var(--ok-bg)); }
.portal-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.portal-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

/* progress bars and lifecycle steps */
.portal-bar { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; }
.portal-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left center; }
.portal-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.portal-steps li { position: relative; display: grid; gap: 3px; align-content: start; padding-right: 6px; }
.portal-steps li::before { content: ""; position: absolute; left: 20px; right: 4px; top: 8px; border-top: 1.5px dashed var(--line-2); }
.portal-steps li::after { content: ""; position: absolute; left: 20px; right: 4px; top: 7.5px; height: 2px; background: var(--text); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease-out); }
.portal-steps li[data-st="done"]::after { transform: scaleX(1); }
.portal-steps li:last-child::after { display: none; }
.portal-steps li:last-child::before { display: none; }
.portal-steps__dot { position: relative; z-index: 1; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--pu-card); border: 1.5px solid var(--line-2); margin-bottom: 6px;
  transition: background-color .35s, border-color .35s, box-shadow .35s; }
.portal-steps__dot svg { width: 10px; height: 10px; fill: none; stroke: var(--pu-card); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.portal-steps li[data-st="done"] .portal-steps__dot svg { opacity: 1; }
.portal-steps li[data-st="done"] .portal-steps__dot { background: var(--text); border-color: var(--text); }
.portal-steps li[data-st="now"] .portal-steps__dot { border: 2px solid var(--text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.portal-steps li[data-st="now"] .portal-steps__dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text); }
.portal-steps b { font: 600 11px/1.2 var(--font); }
.portal-steps li:not([data-st="done"]):not([data-st="now"]) b { font-weight: 500; color: var(--text-2); }
.portal-steps li > span:not(.portal-steps__dot) { font-size: 10px; line-height: 1.25; color: var(--text-2); }

/* key/value rows */
.portal-kv { display: grid; gap: 8px; }
.portal-kv li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; }
.portal-kv li span { color: var(--text-2); }
.portal-kv li b { font-weight: 600; text-align: right; }

/* drawer, scrim, toast, tooltip (overlays of a screen) */
.portal-scrim { position: absolute; inset: 0; z-index: 4; background: rgb(0 18 40 / .18); pointer-events: none; }
.portal-scrim { background: rgb(0 5 15 / .45); }
.portal-drawer { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(64%, 390px); display: flex; flex-direction: column; gap: 13px; overflow: hidden;
  padding: 18px 18px 16px; background: var(--pu-card); border-left: 1px solid var(--line); box-shadow: -34px 0 60px -34px rgb(0 20 50 / .45); }
.portal-drawer { box-shadow: -34px 0 70px -30px #000; }
.portal-drawer__head { display: grid; gap: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.portal-drawer__title { font: 400 20px/1.1 var(--font); letter-spacing: -.03em; }
.portal-drawer__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.portal-drawer__foot { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.portal-field { display: grid; gap: 5px; }
.portal-field > span { display: flex; justify-content: space-between; font: 600 11.5px/1 var(--font); }
.portal-field > span em { font-style: normal; font-weight: 500; color: var(--text-2); }
.portal-input { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--pu-card); font-size: 13px; }
.portal-input--area { align-items: flex-start; min-height: 52px; padding-top: 8px; }
.portal-input .portal-link { margin-left: auto; }
.portal-hint { font-size: 11px; color: var(--text-2); }
.portal-link { font: 600 11.5px/1 var(--font); color: var(--link); white-space: nowrap; }
.portal-caret { display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; background: var(--text); vertical-align: -2px; }

.portal-toast { position: absolute; z-index: 7; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 12px;
  background: var(--toast-bg); color: var(--toast-fg); font: 500 12px/1.25 var(--font); white-space: nowrap; box-shadow: 0 18px 40px -14px rgb(0 20 50 / .55); }
.portal-toast i { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ok); }
.portal-toast i svg { width: 13px; height: 13px; fill: none; stroke: var(--on-ok); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-toast small { display: block; margin-bottom: 3px; font: 600 9.5px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; opacity: .62; }

.portal-tip { position: absolute; z-index: 6; padding: 8px 11px; border-radius: 9px; background: var(--toast-bg); color: var(--toast-fg); font: 500 11.5px/1.3 var(--font); white-space: nowrap;
  box-shadow: 0 14px 30px -10px rgb(0 20 50 / .5); }
.portal-tip::after { content: ""; position: absolute; top: -5px; right: 26px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.portal-tip .portal-ico { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; }

/* ---------- Dashboard ---------- */
.portal-dash { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.portal-bal { grid-column: span 4; position: relative; overflow: hidden; display: grid; gap: 11px; padding: 16px 18px; border-radius: var(--pu-r); color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--panel-1) 80%, #4e4cf2), var(--panel-1) 45%, var(--panel-2)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
.portal-bal::after { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgb(226 184 101 / .22), transparent 70%); pointer-events: none; }
.portal-bal__label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgb(255 255 255 / .74); }
.portal-bal__amt { font: 400 32px/1 var(--font); letter-spacing: -.04em; }
.portal-bal__amt small { font-size: .56em; letter-spacing: -.01em; opacity: .72; }
.portal-bal__cur { margin-right: 6px; font-size: .5em; letter-spacing: 0; opacity: .75; vertical-align: .38em; }
.portal-bal__bar { display: flex; gap: 3px; height: 5px; }
.portal-bal__bar i { height: 100%; border-radius: 3px; transform-origin: left center; }
.portal-bal__bar i:nth-child(1) { flex: 61; background: #fff; }
.portal-bal__bar i:nth-child(2) { flex: 24; background: rgb(255 255 255 / .5); }
.portal-bal__bar i:nth-child(3) { flex: 15; background: var(--accent-2); }
.portal-bal__rows { display: grid; gap: 5px; font-size: 11.5px; color: rgb(255 255 255 / .8); }
.portal-bal__rows li { display: flex; justify-content: space-between; gap: 10px; }
.portal-bal__rows li span { display: inline-flex; align-items: center; gap: 7px; }
.portal-bal__rows li span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, #fff); }
.portal-bal__rows b { font-weight: 500; color: #fff; }
.portal-bal__acts { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
.portal-bal .portal-btn { height: 28px; }
.portal-btn--gold { border-color: transparent; background: var(--accent-2); color: #1e1f21; }
.portal-btn--glass { border-color: rgb(255 255 255 / .35); background: transparent; color: #fff; }

.portal-kpi { grid-column: span 2; display: grid; gap: 6px; }
.portal-kpi > span { font-size: 11.5px; color: var(--text-2); }
.portal-kpi > b { font: 400 24px/1 var(--font); letter-spacing: -.04em; }
.portal-kpi > em { font: 600 11px/1 var(--font); font-style: normal; color: var(--ok-fg); }
.portal-kpi > em span { font-weight: 400; color: var(--text-2); margin-left: 4px; }
.portal-spark { width: 100%; height: 30px; overflow: visible; }
.portal-spark path:first-child { fill: url(#portal-g-spark); }
.portal-spark path + path { fill: none; stroke: var(--logo); stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.portal-spark--ok path + path { stroke: var(--ok); }
.portal-spark--accent path + path { stroke: var(--accent); }
.portal-spark-a { stop-color: var(--logo); stop-opacity: .22; }
.portal-spark-b { stop-color: var(--logo); stop-opacity: 0; }

/* ---------- Dispute case ---------- */
.portal-case { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.portal-case__main { display: grid; gap: 12px; }
.portal-files { display: grid; gap: 8px; margin-top: 10px; }
.portal-file { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; column-gap: 10px; row-gap: 5px; }
.portal-file__ic { grid-row: span 2; width: 28px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: var(--pu-sel); color: var(--text-2); }
.portal-file__ic .portal-ico { width: 14px; height: 14px; }
.portal-file b { font: 500 12px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-file em { font: 500 10.5px/1 var(--font); font-style: normal; color: var(--text-2); justify-self: end; }
.portal-file .portal-bar { grid-column: 2 / -1; }
.portal-file__ok { color: var(--ok-fg); display: inline-flex; align-items: center; gap: 4px; }
.portal-file__ok .portal-ico { width: 12px; height: 12px; stroke-width: 2.4; }
.portal-case__side .portal-kv { margin-top: 12px; }

/* ---------- Balances ---------- */
.portal-money { display: grid; gap: 12px; }
.portal-cur { display: flex; align-items: center; gap: 8px; }
.portal-flag { width: 20px; height: 14px; flex: none; border-radius: 3px; background: #003399; position: relative; overflow: hidden; }
.portal-flag::after { content: ""; position: absolute; inset: 2px 5px; border-radius: 50%; border: 1.5px dotted #ffcc00; }
.portal-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.portal-fig > span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.portal-fig > span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.portal-fig b { display: block; margin-top: 6px; font: 400 21px/1 var(--font); letter-spacing: -.035em; white-space: nowrap; }
.portal-fig:not(:first-child) b { color: var(--text-2); }
.portal-split { display: flex; gap: 3px; height: 6px; margin-top: 14px; }
.portal-split i { height: 100%; border-radius: 3px; transform-origin: left center; }
.portal-split i:nth-child(1) { flex: 61; background: var(--text); }
.portal-split i:nth-child(2) { flex: 24; background: color-mix(in srgb, var(--text) 38%, transparent); }
.portal-split i:nth-child(3) { flex: 15; background: var(--accent); }

/* ---------- Webhooks ---------- */
.portal-evt { font: 500 11.5px/1 var(--code); color: var(--text); }
.portal-att { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.portal-att b { font-weight: 600; color: var(--text); }
.portal-code-ok { color: var(--ok-fg); font: 600 11px/1 var(--code); }
.portal-code-bad { color: var(--pu-bad-fg); font: 600 11px/1 var(--code); }
.portal-tbl__sub { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 14px 0 34px; border-top: 1px dashed var(--line); font-size: 11px; color: var(--text-2); background: color-mix(in srgb, var(--pu-app) 40%, var(--pu-card)); }
.portal-tbl__sub::before { content: ""; width: 10px; height: 10px; margin-left: -18px; border-left: 1.5px solid var(--line-2); border-bottom: 1.5px solid var(--line-2); border-bottom-left-radius: 4px; transform: translateY(-4px); }

/* the event types an endpoint receives */
.portal-evts__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.portal-evts__list span { padding: 5px 9px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--pu-app); font: 500 11px/1 var(--code); }

/* code (API keys: first request) */
.portal-code { border-radius: 10px; overflow: hidden; background: var(--code-bg); color: var(--code-text); }
.portal-code__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--code-bar); font: 500 11px/1 var(--font); color: rgb(238 242 248 / .7); }
.portal-code__bar span { margin-left: auto; padding: 4px 7px; border-radius: 6px; background: rgb(255 255 255 / .09); color: #fff; }
.portal-code pre { margin: 0; padding: 11px 13px 12px; font: 400 11.5px/1.65 var(--code); white-space: pre; overflow: hidden; }
.portal-code .k { color: #faad7b; }
.portal-code .s { color: var(--ok-fg); }
.portal-code .c { color: rgb(238 242 248 / .45); }
.portal-key { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px; background: var(--pu-app); border: 1px solid var(--line); font: 500 11px/1 var(--font); letter-spacing: .03em; }

/* ---------- Team ---------- */
.portal-role { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px; font: 600 10.5px/1.2 var(--font); white-space: nowrap;
  color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 26%, transparent); }
.portal-role .portal-ico { width: 11px; height: 11px; stroke-width: 2; }
.portal-role--owner { --rc: #a16207; }
.portal-role--admin { --rc: #3f3cca; }
.portal-role--view { --rc: #6d6f71; }
.portal-role--dev { --rc: #6941c6; }
.portal-role--owner { --rc: #a3b2fd; }
.portal-role--admin { --rc: #a3b2fd; }
.portal-role--view { --rc: #d6d7da; }
.portal-role--dev { --rc: #c8b5ff; }
.portal-you { font-weight: 500; color: var(--text-2); }

/* ---------- Sandbox: the environment the sidebar chose frames the page with a brand hairline ---------- */
.portal-sbx { position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit; }
.portal-sbx::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: var(--pu-glow);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.portal-sbx span { position: absolute; top: 0; left: 0; right: 0; width: fit-content; margin: 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 5px; border-radius: 0 0 10px 10px; background: var(--pu-glow-soft), var(--pu-card); color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(var(--violet-2), .45); font: 600 10px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.portal-sbx span::before, .portal-st--sbx::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pu-glow); }
.portal-st--sbx { color: var(--text); background: var(--pu-glow-soft), var(--pu-card); box-shadow: inset 0 0 0 1px rgba(var(--violet-2), .4); }
.portal-note--sbx { color: var(--text); background: var(--pu-glow-soft), var(--pu-card); border: 1px solid rgba(var(--violet-2), .38); }
.portal-note--sbx .portal-ico { color: rgb(var(--violet-2)); }
.portal-note--sbx p { color: var(--text-2); }

/* table columns, per list (narrow screens drop the least useful columns) */
.portal-tbl--tx { --cols: 84px 96px minmax(0, 1fr) 118px minmax(0, 1.05fr); }
.portal-tbl--wr { --cols: minmax(0, 1fr) 112px 104px 104px; }
.portal-tbl--keys { --cols: minmax(0, 1fr) 130px 120px; }
.portal-tbl--dlv { --cols: minmax(0, 1.35fr) 86px minmax(0, 1fr) 70px; }
.portal-tbl--team { --cols: minmax(0, 1.5fr) 100px 76px 112px; }

/* a value that changes: the row's state picks one of its two spans */
.portal-flip { display: inline-grid; }
.portal-flip > * { grid-area: 1 / 1; transition: opacity .3s; }
.portal-flip > [data-v="1"], [data-st="done"] .portal-flip > [data-v="0"] { opacity: 0; }
[data-st="done"] .portal-flip > [data-v="1"] { opacity: 1; }

/* team */
.portal-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--line); font: 500 12px/1 var(--font); color: var(--text-2); }
.portal-tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 0 2px 9px; }
.portal-tabs span[data-on] { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--text); }
.portal-tabs i { display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 99px; background: var(--pu-sel); font: 600 10px/1 var(--font); font-style: normal; }
.portal-tabs span[data-on] i { background: var(--text); color: var(--pu-card); }
.portal-invite { position: relative; flex: none; }
.portal-invite .portal-btn { transition: opacity .35s, filter .35s, background-color .35s; }
.portal-invite .portal-btn[data-st="off"] { opacity: .45; filter: saturate(.3); cursor: not-allowed; }
.portal-invite .portal-tip { top: calc(100% + 10px); right: -4px; }
.portal-tbl--team[data-pu-me="anna"] [data-you="priya"], .portal-tbl--team[data-pu-me="priya"] [data-you="anna"] { display: none; }
.portal-tbl--team .portal-who em { font-style: normal; font-size: 11.5px; }

/* the small address bar of a screen shown on its own (phones, static page, floating panels) */
.portal-scr__bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--pu-side); }
.portal-scr__bar > span { display: flex; gap: 5px; }
.portal-scr__bar > span i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.portal-scr__bar em { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 10.5px/1 var(--font); font-style: normal; color: var(--text-2); text-align: center; }
.portal-scr__env { display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px/1 var(--font); color: var(--text-2); }
.portal-scr__env::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.portal-scr__env--sbx::before, [data-env="sandbox"] .portal-scr__env::before { background: var(--pu-glow); }

@container portalscr (max-width: 560px) {
  .portal-tbl--tx { --cols: 84px 92px minmax(0, 1fr) 112px; }
  .portal-tbl--team { --cols: minmax(0, 1fr) 100px 72px; }
}
@container portalscr (max-width: 420px) {
  .portal-tbl--tx { --cols: 80px 88px minmax(0, 1fr); }
  .portal-tbl--wr { --cols: minmax(0, 1fr) 100px 92px; }
  .portal-tbl--keys { --cols: minmax(0, 1fr) 110px; }
  .portal-tbl--dlv { --cols: minmax(0, 1fr) 80px 96px; }
  .portal-tbl--team { --cols: minmax(0, 1fr) 96px; }
  .portal-tbl__row { font-size: 12px; }
  .portal-tbl__row .portal-code-ok, .portal-tbl__row .portal-code-bad { font-size: 10px; }
}

/* ---------- Dashboard: volume by day and the latest payments ---------- */
.portal-vol, .portal-recent { grid-column: span 3; }
.portal-vol__plot { position: relative; margin-top: 10px; height: 118px; }
.portal-vol__plot svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 82px; overflow: visible; }
.portal-vol__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.portal-vol__base { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.portal-vol__bar { fill: color-mix(in srgb, var(--logo) 55%, transparent); }
.portal-vol__bar:not(.portal-vol__bar--now) { fill: color-mix(in srgb, #646ffb 62%, transparent); }
.portal-vol__bar--now { fill: var(--accent); }
.portal-vol__days { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 7px; font: 500 10px/1 var(--font); color: var(--text-2); text-align: center; }
.portal-vol__days span:last-child { color: var(--text); font-weight: 600; }
.portal-vol__tip { position: absolute; right: -6px; top: 0; padding: 6px 9px; border-radius: 8px; background: var(--toast-bg); color: var(--toast-fg); font: 600 11px/1.15 var(--font);
  white-space: nowrap; box-shadow: 0 10px 22px -10px rgb(0 20 50 / .5); }
.portal-vol__tip small { display: block; font: 500 9.5px/1 var(--font); opacity: .65; margin-bottom: 3px; }
.portal-recent__list { display: grid; margin-top: 8px; }
.portal-recent__list li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 34px; overflow: hidden;
  font-size: 12px; border-top: 1px solid var(--line); margin: 0 -16px; padding: 0 16px; transition: background-color .35s; }
.portal-recent__list li { height: 37px; }
.portal-recent__list li:first-child { border-top: 0; }
.portal-recent__amt { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.portal-recent__amt b { font-weight: 600; }
.portal-recent__amt small { font-size: 11px; color: var(--text-2); }
.portal-recent__list li[data-new="1"] { background: var(--accent-soft); }
.portal-recent__list li[data-new="1"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }

/* ---------- a block with two states (the case before and after a response) ---------- */
.portal-swap { display: grid; }
.portal-swap > * { grid-area: 1 / 1; transition: opacity .35s, visibility .35s; }
.portal-swap > [data-v="1"], [data-st="done"] .portal-swap > [data-v="0"] { opacity: 0; visibility: hidden; }
[data-st="done"] .portal-swap > [data-v="1"] { opacity: 1; visibility: visible; }
.portal-page__acts.portal-swap > * { display: flex; gap: 8px; justify-content: flex-end; }
.portal-case__how { display: flex; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.4; color: var(--text-2); }
.portal-case__how .portal-ico { width: 13px; height: 13px; margin-top: 1px; }

/* the address bar names the environment */
.portal-scr__env [data-v="sbx"], [data-env="sandbox"] .portal-scr__env [data-v="live"] { display: none; }
[data-env="sandbox"] .portal-scr__env [data-v="sbx"] { display: inline; }

/* ---------- narrow screens (container queries on each screen) ---------- */
.portal-scr__body { container: portalscr / inline-size; }
@container portalscr (max-width: 560px) {
  .portal-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-bal { grid-column: span 2; }
  .portal-kpi { grid-column: span 1; }
  .portal-kpi:nth-child(3) { display: none; }
  .portal-vol, .portal-recent { grid-column: span 2; }
  .portal-case { grid-template-columns: 1fr; }
  .portal-figs { grid-template-columns: 1fr 1fr; }
  .portal-fig:first-child { grid-column: 1 / -1; }
  .portal-fig:first-child b { font-size: 26px; }
  .portal-hide-s { display: none !important; }
  .portal-tbl__row { gap: 8px; padding: 0 11px; }
  .portal-page__head { flex-wrap: wrap; }
  .portal-page__head:has(.portal-invite) { flex-direction: column; }
  .portal-invite .portal-tip { right: auto; left: -4px; }
  .portal-invite .portal-tip::after { right: auto; left: 26px; }
  .portal-h { font-size: 21px; }
}
@container portalscr (max-width: 420px) {
  .portal-hide-xs { display: none !important; }
  .portal-steps li > span:not(.portal-steps__dot) { display: none; }
  .portal-steps b { font-size: 10px; }
}

/* The tilted panels and their floating chips must never widen the page (phones, and the static layout on any width). */
#portal { overflow-x: clip; }

/* Portal · variant b "Floating screens".
   Default layout (phones, reduced motion, no script): the intro, then each screen as a panel with its caption.
   On wide screens the script adds .is-gliding: the section holds the page and the panels glide sideways in 3D space,
   turning towards the viewer as they reach the middle, with small fragments of UI floating in front of them. */

.portal-b { position: relative; }
.portal-b__pin { position: relative; padding: clamp(90px, 12vw, 160px) 0; }
.portal-b__track { display: grid; gap: clamp(72px, 10vw, 120px); width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

.portal-b__intro { display: grid; justify-items: start; gap: 4px; max-width: 620px; }
.portal-b__lead { margin-top: 18px; font-size: 19px; color: var(--text-2); max-width: 40ch; }
.portal-b__intro .btn { margin-top: 26px; }
.portal-b__hint { display: none; }

.portal-b__shot { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; min-width: 0; }
.portal-b__track > * { min-width: 0; }
.portal-b__float { position: relative; transform-style: preserve-3d; }
.portal-b__panel { position: relative; border-radius: 18px; overflow: hidden; background: var(--pu-card); border: 1px solid var(--line);
  box-shadow: var(--shadow-card); transform-origin: 50% 50%; }
.portal-b__panel { border-radius: 16px; box-shadow: 0 40px 80px -44px #000; }
.portal-b__floor { display: none; }

/* the screen inside a panel: its address bar, an icon rail and the page */
.portal-b .portal-scr__body { container-type: normal; position: relative; background: var(--pu-app); }
.portal-b__app { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.portal-b__rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; background: var(--pu-side); border-right: 1px solid var(--line); color: var(--text-2); }
.portal-b__rail .brand__mark { margin-bottom: 8px; }
.portal-b__rail i { width: 32px; height: 30px; display: grid; place-items: center; border-radius: 8px; }
.portal-b__rail i[data-on] { background: var(--pu-sel); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.portal-b__rail .portal-ico { width: 15px; height: 15px; }
.portal-b__rail b { margin-top: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
[data-env="sandbox"] .portal-b__rail b { background: var(--pu-glow); }
.portal-b__view { position: relative; min-width: 0; overflow: hidden; container: portalscr / inline-size; }
.portal-b .portal-page { padding: 18px 18px 20px; }
.portal-b .portal-sbx { border-radius: 0; opacity: 0; transition: opacity .5s var(--ease-out); }
.portal-b [data-env="sandbox"] .portal-sbx { opacity: 1; }

/* overlays inside a panel */
.portal-b .portal-drawer { width: min(64%, 360px); }
.portal-b__app--sbx .portal-page { padding-top: 28px; }
.portal-b__app--sbx .portal-drawer { padding-top: 32px; }
.portal-b .portal-toast { left: 14px; right: auto; bottom: 14px; }

/* floating fragments of UI in front of a panel */
.portal-b__chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 12px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--text);
  box-shadow: 0 16px 32px -18px #000; font: 500 12.5px/1.25 var(--font); opacity: calc(var(--in, 1) * var(--far, 1)); }
.portal-b__chip small { display: block; margin-bottom: 3px; font: 600 9.5px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.portal-b__chip b { font-weight: 600; }
.portal-b__chip .portal-ico { width: 15px; height: 15px; }
.portal-b__ok { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: var(--on-ok); }
.portal-b__ok svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-b__ic { width: 18px; flex: none; display: grid; place-items: center; color: var(--text-2); }
.portal-b__chip .portal-bar { width: 150px; margin-top: 7px; }
.portal-b__roles { display: flex; flex-wrap: wrap; gap: 6px; max-width: 250px; white-space: normal; }
/* the period menu of the dashboard */
.portal-b__menu { display: grid; gap: 2px; min-width: 150px; }
.portal-b__menu small { margin: 0 0 4px 8px; }
.portal-b__menu > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 26px; padding: 0 8px; border-radius: 7px; font: 500 12px/1 var(--font); color: var(--text-2); }
.portal-b__menu > span[data-on] { background: var(--pu-sel); color: var(--text); font-weight: 600; }
.portal-b__menu .portal-ico { width: 13px; height: 13px; stroke-width: 2.2; }
/* the environment switch: flipping it frames the panel in Sandbox's violet glow */
.portal-b__envwrap { display: grid; gap: 6px; }
.portal-b__envwrap small { margin: 0 0 0 4px; }
.portal-b__env { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--pu-app); min-width: 196px; }
.portal-b__env-knob { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 8px; background: var(--pu-card);
  box-shadow: 0 1px 3px rgb(0 20 50 / .18), inset 0 0 0 1px var(--line); transition: transform .5s var(--ease-out), background .4s, box-shadow .4s; }
.portal-b__env-knob { background: #323336; }
[data-env="sandbox"] .portal-b__env-knob { transform: translateX(100%); background: var(--pu-glow-soft), var(--pu-card); box-shadow: inset 0 0 0 1px rgba(var(--violet-2), .5); }
.portal-b__env > span:not(.portal-b__env-knob) { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 28px; font: 600 12px/1 var(--font); color: var(--text-2); transition: color .35s; }
.portal-b__env > span:nth-child(2) { color: var(--text); }
[data-env="sandbox"] .portal-b__env > span:nth-child(2) { color: var(--text-2); }
[data-env="sandbox"] .portal-b__env > span:nth-child(3) { color: var(--text); }
.portal-b__env span i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.portal-b__env span + span + span i { background: var(--pu-glow); }
/* the days-left ring of a dispute */
.portal-b__ring { position: relative; width: 36px; height: 36px; flex: none; display: grid; place-items: center; }
.portal-b__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.portal-b__ring circle { fill: none; stroke: var(--line); stroke-width: 3; }
.portal-b__ring .portal-b__ring-v { stroke: var(--warn); stroke-linecap: round; }
.portal-b__ring b { font: 600 13px/1 var(--font); }

/* chip places: they hang over the panel's corners, in front of it */
.portal-b__chip--a { top: -26px; left: -54px; }
.portal-b__chip--b { right: -52px; bottom: -14px; }
.portal-b__chip--tr { left: auto; right: -54px; }
.portal-b__chip--bl { right: auto; left: -52px; }
.portal-b__marks { display: flex; gap: 5px; margin-top: 2px; }
.portal-b__chip--menu { top: 104px; left: auto; right: -36px; } /* the period menu hangs from the dashboard's period picker */

.portal-b__cap { display: grid; grid-template-columns: auto 1fr; gap: 14px; max-width: 520px; }
.portal-b__num { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 9px; border-radius: 99px; font: 600 12px/1 var(--font);
  color: var(--on-accent); background: var(--accent); }
.portal-b__cap h3 { font: 600 var(--t-h3)/1.3 var(--font); letter-spacing: -.01em; }
.portal-b__cap p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--text-2); }

.portal-b__progress { display: none; }

/* ---------- gliding (wide screens with motion) ---------- */
/* The pinned block (the panels with their numbers and captions, then the progress line) is centred between the 76px header
   and the bottom of the screen; where it does not fit it starts below the header and runs to the bottom. */
.portal-b.is-gliding .portal-b__pin { height: min(100svh, 4000px); padding: 76px 0 0; overflow: hidden; display: flex; flex-direction: column; justify-content: safe center; }
.is-gliding .portal-b__track { position: relative; flex: none; display: flex; align-items: center; gap: clamp(90px, 9vw, 170px); width: max-content; margin: 0;
  padding: 0 calc((100vw - var(--pw)) / 2) 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2)); will-change: transform; }
.portal-b { --pw: clamp(600px, 56vw, 880px); --ph: clamp(380px, 54svh, 550px); }
.is-gliding .portal-b__intro { flex: 0 0 min(500px, 36vw); margin-right: clamp(0px, 4vw, 60px); }
.is-gliding .portal-b__hint { display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; font: 600 12px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.is-gliding .portal-b__hint span { position: relative; width: 56px; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.is-gliding .portal-b__hint span::after { content: ""; position: absolute; inset: 0; background: var(--accent); animation: portal-b-hint 2.2s var(--ease-out) infinite; }
@keyframes portal-b-hint { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.is-gliding .portal-b__shot { flex: 0 0 var(--pw); perspective: 1700px; gap: 44px; }
.is-gliding .portal-b__panel { height: var(--ph); }
.is-gliding .portal-b .portal-scr__body, .is-gliding .portal-scr__body { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.is-gliding .portal-b__app { min-height: 0; }
.is-gliding .portal-b__view::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 44px; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--pu-app) 0%, transparent), var(--pu-app)); }
.is-gliding .portal-b__cap { padding-left: 4px; }

.is-gliding .portal-b__progress { position: relative; flex: none; z-index: 5; display: flex; align-items: center; gap: 24px;
  width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: clamp(22px, 3.5vh, 40px) auto 0; }
.portal-b__progress ol { display: flex; gap: 18px; font: 500 12px/1 var(--font); color: var(--text-2); white-space: nowrap; }
.portal-b__progress li { display: inline-flex; align-items: center; gap: 7px; opacity: .55; transition: opacity .4s, color .4s; }
.portal-b__progress li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background-color .4s, box-shadow .4s; }
.portal-b__progress li[data-st="on"] { opacity: 1; color: var(--text); }
.portal-b__progress li[data-st="on"]::before { background: var(--accent); }
.portal-b__progress > span { flex: 1; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.portal-b__progress > span i { display: block; height: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0); }

/* ---------- phones ---------- */
@media (max-width: 899.98px) {
  .portal-b__lead { font-size: 17px; }
  .portal-b__shot { gap: 20px; }
  .portal-b__chip { font-size: 12px; padding: 8px 11px; }
  .portal-b__chip--b { display: none; }
  .portal-b__chip--a { top: -22px; left: auto; right: 10px; }
  .portal-b__chip--a.portal-b__chip--tr { right: 10px; }
  .portal-b__chip--wide { display: none; } /* the period menu would cover the greeting on a phone */
  .portal-b__chip--env { top: -58px; } /* above the panel, clear of the Sandbox tab */
  .portal-b__app { grid-template-columns: minmax(0, 1fr); }
  .portal-b__rail { display: none; }
  .portal-b .portal-page { padding: 16px 14px 18px; }
  .portal-b .portal-drawer { position: relative; inset: auto; width: auto; margin: 0 10px 12px; border: 1px solid var(--line); border-radius: 14px; }
  .portal-b .portal-scrim { display: none; }
  .portal-b .portal-toast { position: relative; inset: auto; width: fit-content; max-width: calc(100% - 20px); margin: 0 10px 12px auto; white-space: normal; }
}
@media (min-width: 900px) {
  .portal-b:not(.is-gliding) .portal-b__shot { grid-template-columns: minmax(0, 1fr) minmax(240px, 330px); align-items: center; gap: clamp(32px, 4vw, 64px); }
  .portal-b:not(.is-gliding) .portal-b__panel { max-height: 620px; }
  .portal-b:not(.is-gliding) .portal-b__shot:nth-of-type(even) { grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); }
  .portal-b:not(.is-gliding) .portal-b__shot:nth-of-type(even) .portal-b__float { order: 2; }
  .portal-b:not(.is-gliding) .portal-b__chip--b { display: none; }
}