/* ============================================================
   NET 1 PAYROLL — Operations Portal · shared styles
   Same design tokens as the public site. Money color is earned.
   ============================================================ */
:root{
  /* Pure white ground throughout. Depth comes from hairlines and generous
     space, not from grey panels stacked on grey. */
  --ink:#FFFFFF;
  --ink-2:#FFFFFF;
  --ink-3:#FFFFFF;
  --surface:#FFFFFF;
  /* On white the saturated hues carry fills and dots; the deep variants carry
     text. Semantic colour has to survive the ground it sits on. */
  --money:#00C27A;
  --money-text:#07704E;
  --money-press:#0A8F63;
  --money-dim:rgba(0,194,122,.12);
  --pending:#FFB020;
  --pending-text:#8A5B00;
  --pending-dim:rgba(255,176,32,.16);
  --alert:#E5484D;
  --alert-text:#C0272C;
  --alert-dim:rgba(229,72,77,.10);
  --rp-text:#5B45C7;
  --rp-dim:rgba(91,69,199,.10);
  --hair:#D2D2D7;
  --hair-soft:#E8E8ED;
  --txt:#1D1D1F;
  --txt-2:#424245;
  --txt-3:#6E6E73;
  /* Primary actions carry the brand green, not Apple blue: the layout is
     Apple-calm, the identity stays Net 1. #008A00 is the wordmark green
     darkened until white text clears WCAG AA on it — the bright #40C842
     would fail badly under white. */
  --blue:#008A00;
  --blue-press:#006F00;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;
  /* Rounded rectangles, not lozenges. Apple shapes a text field and a small
     card as a rounded rect (~12-16px) and reserves the full capsule for
     controls that are genuinely pill-shaped — a segmented control, a floating
     chip. --r-s had been 980px, which put a stadium outline around every
     input, tile and disclosure row on the portal. */
  --r-s:12px;--r-m:14px;--r-l:18px;--r-pill:980px;
  --spring:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
/* The topstrip is sticky, so anything scrolled to by a fragment link or by
   scrollIntoView lands underneath it — the "Edit profile" item in the account
   menu opened Settings with the profile card already hidden behind the strip.
   Setting the offset on the scroll container fixes both routes on every page,
   rather than one card at a time. 78px = the strip's 62px min-height plus a
   line of air. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:78px}
body{
  margin:0;background:var(--ink);color:var(--txt);
  /* On Apple devices this resolves to San Francisco natively — the real
     system face, used the way Apple licenses it. Elsewhere it falls back to
     each platform's own UI font rather than shipping a lookalike webfont. */
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
    system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;
}
/* Display sizing: large, tight, and confident — the type does the work that
   borders and shadows would otherwise have to. */
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:6px
}
/* Skip link: bypass the nav on every page. Off-screen until focused, then it
   drops into view as the first tab stop and jumps focus to main content. */
/* Password rules, shown before typing and ticked off live. Stating the rule
   up front is the point: discovering it one failure at a time is what makes
   people pick a weaker password they can remember guessing at. */
.pwrules{margin:8px 0 4px;padding:0;list-style:none;display:grid;gap:4px}
.pwrules li{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;line-height:1.4;color:var(--txt-2)
}
.pwrules li::before{
  content:"○";font-size:12px;width:13px;text-align:center;color:var(--txt-3);flex:0 0 auto
}
.pwrules li.met{color:var(--blue)}
.pwrules li.met::before{content:"✓";font-weight:700;color:var(--blue)}
.navbadge{
  display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;
  border-radius:9px;background:var(--alert-text,#E5484D);color:#fff;
  font-size:11px;font-weight:700;line-height:18px;text-align:center;vertical-align:middle
}
.skip{
  position:fixed;left:var(--s2);top:-56px;z-index:60;
  background:#fff;color:var(--txt);border:1px solid var(--hair);
  padding:9px 14px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;
  text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.14);transition:top .15s var(--spring)
}
.skip:focus{top:var(--s2);outline:2px solid var(--blue);outline-offset:2px}
main:focus{outline:none}
h1,h2,h3{margin:0;letter-spacing:-.024em;line-height:1.15;font-weight:640}
h1{font-size:30px;letter-spacing:-.021em}
h2{font-size:21px;letter-spacing:-.018em}
h3{font-size:17px;letter-spacing:-.015em}
p{margin:0}

/* ---------- chrome ---------- */
/* The banking masthead: solid brand green (#008A00, white measures 4.53:1),
   white wordmark and links. Current page = white pill with green text. */
.topbar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,#079410 0%,#008A00 55%,#007E06 100%);
  border-bottom:0;
  box-shadow:0 1px 0 rgba(0,0,0,.10),0 6px 18px rgba(1,38,7,.14)
}
.topbar .brand{color:#fff}
/* Full white, not 92%. Over #008A00 the 8% of green bleeding through dropped
   these to 4.05:1 — under AA — and both are small text (13px name, 10.5px
   role). Opaque white is the 4.53:1 the rest of the masthead measures. */
.topbar .who-name,.topbar .who-role{color:#FFFFFF}
.topbar .nav a{color:#FFFFFF}
.topbar .nav a:hover{color:#fff;background:rgba(255,255,255,.14)}
.topbar .nav a[aria-current=page]{color:#008A00;background:#fff;font-weight:600;box-shadow:none}
.topbar .navmore-btn{color:#FFFFFF}
.topbar .navmore-btn:hover{color:#fff;background:rgba(255,255,255,.14)}
.topbar .navmore-btn[aria-expanded=true],.topbar .navmore-btn[aria-current=page]{color:#008A00;background:#fff;font-weight:600}
.topbar .signout{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.topbar .signout:hover{border-color:#fff;color:#fff}
/* min-height, not height: a wrapped nav must be able to grow rather than
   clip its second row. */
.topbar-in{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:8px var(--s3);max-width:1400px;margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-weight:640;letter-spacing:-.02em;text-decoration:none;flex:none}
/* "More" holds the pages opened occasionally, so the bar shows only the
   four used daily. */
.navmore{position:relative;display:inline-block}
.navmore-btn{
  font:inherit;font-size:14px;padding:7px 12px;border:0;border-radius:980px;
  background:transparent;color:var(--txt-3);cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;transition:background .15s ease,color .15s ease
}
.navmore-btn:hover{color:var(--txt);background:rgba(0,0,0,.05)}
.navmore-btn[aria-expanded=true],.navmore-btn[aria-current=page]{
  color:var(--blue);background:rgba(0,138,0,.10);font-weight:600
}
.navmore-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:190px;
  background:#fff;border:1px solid var(--hair);border-radius:14px;padding:6px;
  box-shadow:0 8px 28px rgba(0,0,0,.13);display:grid;gap:1px
}
/* display:grid above overrides the UA's [hidden]{display:none}, which left the
   menu permanently open. The attribute must win. */
.navmore-menu[hidden]{display:none}
.navmore-menu a{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-radius:9px;font-size:14.5px;color:var(--txt-2);text-decoration:none
}
.navmore-menu a:hover{background:rgba(0,0,0,.05);color:var(--txt)}
.navmore-menu a[aria-current=page]{color:var(--blue);background:rgba(0,138,0,.10);font-weight:600}
/* The menu sits inside .nav, so the topbar's white-link rule reached it and
   painted white text on the white menu — "More" looked empty. These outrank
   `.topbar .nav a` and restore the menu's own colours. */
.topbar .nav .navmore-menu a{color:var(--txt-2)}
.topbar .nav .navmore-menu a:hover{color:var(--txt);background:rgba(0,0,0,.05)}
.topbar .nav .navmore-menu a[aria-current=page]{color:var(--blue);background:rgba(0,138,0,.10);font-weight:600;box-shadow:none}
@media(max-width:640px){.navmore-menu{left:auto;right:0}}
.signout{flex:none}

/* ---------- app shell: dark sidebar + light content ----------
   The dashboard layout: a fixed near-black-green rail on the left holding
   every allowed page, a white greeting strip up top, content on a soft
   gray field. Pages render into <main> untouched. */
body.has-sidebar{background:#F5F7F6}
.sidebar{
  position:fixed;left:0;top:0;bottom:0;z-index:50;width:228px;
  background:linear-gradient(180deg,#0D1A12 0%,#0A1510 100%);
  display:flex;flex-direction:column;gap:6px;
  padding:18px 12px;overflow-y:auto
}
.sidebar .brand{color:#fff;padding:2px 10px 14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.sidenav{display:flex;flex-direction:column;gap:2px}
.sidenav a{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:10px;text-decoration:none;
  font-size:14px;color:rgba(255,255,255,.70);
  transition:background .14s ease,color .14s ease
}
.sidenav a .ni{width:19px;height:19px;flex:none;opacity:.85}
.sidenav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidenav a[aria-current=page]{
  background:rgba(123,238,92,.13);color:#fff;font-weight:600
}
.sidenav a[aria-current=page] .ni{color:#7BEE5C;opacity:1}
.sidenav .navbadge{margin-left:auto}
/* grouped rail */
.navgrp{display:flex;flex-direction:column}
.navgrp-btn{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 12px;border-radius:10px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:14px;text-align:left;color:rgba(255,255,255,.70);
  transition:background .14s ease,color .14s ease
}
.navgrp-btn .ni{width:19px;height:19px;flex:none;opacity:.85}
.navgrp-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.navgrp-btn[data-current="1"]{color:#fff}
.navgrp-btn[data-current="1"] .ni{color:#7BEE5C;opacity:1}
.navgrp-btn .chev{width:14px;height:14px;margin-left:auto;flex:none;opacity:.55;transition:transform .18s ease}
.navgrp-btn .grp-badge + .chev{margin-left:8px}
.navgrp.open .navgrp-btn .chev{transform:rotate(90deg)}
.navgrp.open .grp-badge{display:none}
.navgrp-items{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 21px;padding-left:10px;border-left:1px solid rgba(255,255,255,.10)}
.navgrp-items[hidden]{display:none}
.navgrp-items a{padding:8px 10px;font-size:13.5px}
.navgrp-items a .ni{display:none}
.scrim{display:none}
.topstrip{
  position:sticky;top:0;z-index:40;margin-left:228px;
  display:flex;align-items:center;gap:14px;min-height:62px;
  padding:10px 26px;background:#fff;border-bottom:1px solid var(--hair)
}
.greet{font-size:19px;font-weight:640;letter-spacing:-.02em;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:6px;
  border-radius:9px;color:var(--txt)}
.menu-btn svg{width:22px;height:22px;display:block}
.menu-btn:hover{background:rgba(0,0,0,.05)}
body.has-sidebar main{margin:0 0 0 228px;max-width:none;padding:26px 28px 60px}
@media(min-width:1500px){body.has-sidebar main{padding-right:calc(100vw - 1500px + 28px)}}

/* Account chip, restyled for the white strip. */
.topstrip .usermenu-btn{
  background:#fff;border:1px solid var(--hair);color:var(--txt)
}
.topstrip .usermenu-btn:hover{background:rgba(0,0,0,.035);border-color:rgba(0,0,0,.18)}
.topstrip .usermenu-btn[aria-expanded=true]{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.24)}
.topstrip .who-av{background:#E6F0E6;color:#1B7A28}
.topstrip .who-stack .who-name{color:var(--txt)}
.topstrip .who-stack .who-role{color:var(--txt-3);opacity:1}
.topstrip .who-chev{color:var(--txt-3)}

@media(max-width:900px){
  /* Off-canvas has to mean off, not merely out of sight. A translated element
     keeps every link in the tab order, so at 360 and 768 the first tab stops
     after "Skip to content" were up to sixteen invisible nav links — the page
     itself started somewhere around the seventeenth press. visibility:hidden
     removes them and, unlike display:none, still animates: the change is
     delayed to the end of the slide-out so the panel is visible while it
     leaves, and applied immediately on the way in. */
  .sidebar{
    transform:translateX(-102%);visibility:hidden;
    transition:transform .22s ease,visibility 0s linear .22s;box-shadow:none
  }
  body.sidebar-open .sidebar{
    transform:none;visibility:visible;
    transition:transform .22s ease,visibility 0s;box-shadow:0 0 40px rgba(0,0,0,.35)
  }
  body.sidebar-open .scrim{display:block;position:fixed;inset:0;z-index:45;background:rgba(6,16,9,.44)}
  .topstrip{margin-left:0}
  body.has-sidebar main{margin-left:0;padding:18px 14px 50px}
  .menu-btn{display:flex}
  .greet{font-size:17px}
}

/* ---------- account menu (the name chip) ---------- */
.usermenu{position:relative;flex:none;margin-left:auto}
.usermenu-btn{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:5px 11px 5px 6px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30);
  font:inherit;text-align:left;
  transition:background .15s ease,border-color .15s ease
}
.usermenu-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}
.usermenu-btn[aria-expanded=true]{background:rgba(255,255,255,.22);border-color:#fff}
.who-av{
  width:30px;height:30px;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.24);color:#fff;
  font-size:12.5px;font-weight:650;letter-spacing:.02em
}
.who-av img{width:100%;height:100%;object-fit:cover;display:block}
.who-stack{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.who-stack .who-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.who-stack .who-role{font-size:10.5px;opacity:.85;text-transform:capitalize}
.who-chev{color:#fff;font-size:10px;opacity:.8;margin-left:1px}
.usermenu-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:200px;
  background:#fff;border:1px solid var(--hair);border-radius:14px;padding:6px;
  box-shadow:0 10px 32px rgba(0,0,0,.16);display:grid;gap:1px
}
.usermenu-menu[hidden]{display:none}
.usermenu-menu a,.usermenu-out{
  display:block;padding:9px 12px;border-radius:10px;font-size:13.5px;
  color:var(--txt-2);text-decoration:none;background:none;border:0;
  font:inherit;text-align:left;cursor:pointer;width:100%
}
.usermenu-menu a:hover,.usermenu-out:hover{background:rgba(0,0,0,.05);color:var(--txt)}
.usermenu-sep{height:1px;background:var(--hair);margin:5px 8px}
.usermenu-out{color:var(--alert-text)}
.usermenu-out:hover{background:rgba(176,32,32,.07);color:var(--alert-text)}
@media(max-width:640px){
  .who-stack{display:none}
  .usermenu-btn{padding:4px}
}
/* Twelve destinations at owner level. Wrapping beats a horizontal scroll with
   a hidden scrollbar: the last items (Customers, Staff) were reachable only
   by scrolling a strip that gave no sign it could scroll. */
.nav{display:flex;flex-wrap:wrap;gap:2px 4px;flex:1;min-width:0}
.nav a{
  padding:7px 12px;border-radius:9px;text-decoration:none;font-size:14px;color:var(--txt-3);
  white-space:nowrap;transition:background .15s ease,color .15s ease
}
.nav a:hover{color:var(--txt);background:rgba(0,0,0,.05)}
/* On a white page a white "current" chip is invisible. Tint it in the brand
   green and darken the label so the active page is unmistakable. */
.nav a[aria-current=page]{
  color:var(--blue);background:rgba(0,138,0,.10);font-weight:600;box-shadow:none
}
.signout{
  flex:none;background:#fff;border:1px solid #D2D2D7;color:var(--txt-2);
  font:inherit;font-size:13px;padding:7px 13px;border-radius:8px;cursor:pointer;min-height:36px
}
.signout:hover{border-color:#AEAEB2;color:var(--txt)}

main{max-width:1400px;margin:0 auto;padding:var(--s4) var(--s3) 80px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.page-head p{color:var(--txt-2);margin-top:6px;font-size:14px}
.eyebrow{font-size:11px;font-weight:620;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}

/* ---------- compliance banner ---------- */
.banner{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-m);
  background:var(--pending-dim);border:1px solid rgba(255,176,32,.3);margin-bottom:var(--s3);font-size:13.5px;line-height:1.5
}
.banner b{color:var(--pending-text)}
.banner.danger{background:var(--alert-dim);border-color:rgba(229,72,77,.34)}
.banner.danger b{color:var(--alert-text)}
/* .hint's --txt-3 clears AA on white (4.9:1) but not on the danger tint
   (~4.47:1), and the waiver banners on the client page put a hint inside one.
   Inside any banner, secondary text steps up to --txt-2. */
.banner .hint{color:var(--txt-2)}

/* ---------- cards / grid ---------- */
.card{background:var(--ink-2);border:1px solid var(--hair-soft);border-radius:var(--r-l);padding:var(--s4);box-shadow:none}

/* Form controls: rounded rectangles, not pills — a pill-shaped text field
   fights the caret. Focus is Apple's blue ring, never a removed outline. */
.f{margin-bottom:var(--s2)}
/* A file picker is a <label> wrapping a hidden input, so it can be both a
   field label and a button. Exclude .btn or this rule's dark grey wins on
   specificity and paints the text of a solid-green button nearly black. */
.f label:not(.btn){display:block;font-size:14px;color:var(--txt-2);margin-bottom:6px;letter-spacing:-.016em}
.f input,.f select,.f textarea,input[type=text],input[type=email],input[type=password],
input[type=number],input[type=date],select,textarea{
  width:100%;min-height:44px;padding:11px 14px;
  background:#fff;border:1px solid var(--hair);border-radius:12px;
  color:var(--txt);font:inherit;font-size:17px;letter-spacing:-.022em;
  transition:border-color .15s ease,box-shadow .15s ease
}
textarea{min-height:96px;line-height:1.45;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus,
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,138,0,.18)
}
/* #AEAEB2 on white is 2.1:1 — placeholder text is text, and it failed AA.
   --txt-3 is the muted ink already used for .pin::placeholder (4.7:1).
   Set on every input, not just .f: the UA default varies by browser and
   Safari's is below AA, so leaving it unset leaves the result to chance. */
input::placeholder,textarea::placeholder{color:var(--txt-3)}
/* City · State · ZIP on one line. A grid item's automatic minimum size is its
   min-content width, and a text input's min-content is the ~20-character box
   the `size` attribute gives it — width:100% does not shrink that, because a
   percentage against a track that is still being sized is indefinite. So three
   fields floored this row near 570px and, wherever the column was narrower,
   the overflow ran out to the viewport and scrolled the whole page sideways.
   min-width:0 lets the tracks shrink. Below 560px the row wraps instead, so a
   ZIP field never ends up four characters wide. */
.addr-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.addr-row>*{min-width:0}
@media(max-width:560px){
  .addr-row{grid-template-columns:1fr 1fr}
  .addr-row>:first-child{grid-column:1/-1}
}
.grid{display:grid;gap:var(--s2)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.grid>*{min-width:0}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- stat ---------- */
.stat .k{font-size:11px;font-weight:620;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3)}
.stat .v{font-size:30px;font-weight:640;letter-spacing:-.03em;margin-top:8px;line-height:1}
.stat .v.money{color:var(--money-text)}
.stat .v.warn{color:var(--txt)}
.stat .v.bad{color:var(--alert-text)}
.stat .sub{font-size:12.5px;color:var(--txt-3);margin-top:7px}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;border-radius:var(--r-m);border:1px solid var(--hair);background:#fff}
table{width:100%;border-collapse:collapse;font-size:13.5px}
/* 640px is the floor for a wide data grid, and it belongs to the wrapper that
   can scroll it. Unscoped, it also caught the small in-card tables that have no
   .tablewrap to absorb the overflow — My work's pay breakdown and Work's
   pricing lines — and at 360px those pushed the page sideways instead. */
.tablewrap table{min-width:640px}
th{
  text-align:left;font-size:10.5px;font-weight:620;letter-spacing:.11em;text-transform:uppercase;
  color:var(--txt-3);padding:12px 14px;background:var(--ink-3);white-space:nowrap;position:sticky;top:0
}
td{padding:13px 14px;border-top:1px solid var(--hair);vertical-align:middle}
tbody tr:hover{background:#FAFAFC}
td.r,th.r{text-align:right}
.mono{font-size:12.5px;color:var(--txt-2)}

/* ---------- pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap
}
.pill.ok{background:var(--money-dim);color:var(--money-text)}
/* An ordinary in-flight state is not a warning. Grey carries "waiting" and
   "in progress"; colour is kept for the two states a person must act on —
   green for settled, red for broken. */
.pill.wait{background:#EDEDF0;color:var(--txt-2)}
.pill.bad{background:var(--alert-dim);color:var(--alert-text)}
.pill.mute{background:#EDEDF0;color:var(--txt-2)}
.pill.rp{background:#EDEDF0;color:var(--txt-2)}

/* ---------- funding timeline (same component, every view) ---------- */
.tl{min-width:150px}
.tl-track{position:relative;height:3px;background:#D2D2D7;border-radius:2px}
.tl-fill{position:absolute;inset:0 auto 0 0;background:var(--money);border-radius:2px;transition:width .9s var(--spring)}
.tl-fill.stall{background:var(--pending)}
.tl-fill.dead{background:var(--alert)}
.tl-nodes{display:flex;justify-content:space-between;margin-top:-6px}
.tl-nodes i{width:8px;height:8px;border-radius:50%;background:#D2D2D7;display:block}
.tl-nodes i.on{background:var(--money)}
.tl-nodes i.stall{background:var(--pending)}
.tl-nodes i.dead{background:var(--alert)}
.tl-cap{font-size:11px;color:var(--txt-3);margin-top:8px;white-space:nowrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding-inline:22px;
  border-radius:10px;border:0;font:inherit;font-size:17px;font-weight:400;
  line-height:1.18;letter-spacing:-.022em;cursor:pointer;
  text-decoration:none;transition:background .2s ease,opacity .2s ease,transform .16s var(--spring)
}
.btn:active{transform:scale(.985)}
/* Primary action: solid blue pill, white label. */
.btn-money{background:var(--blue);color:#fff}
.btn-money:hover{background:var(--blue-press)}
/* Secondary: a quiet hairline, deliberately NOT green. Two green buttons
   side by side both read as "the thing to press"; only one of them is. */
.btn-ghost{background:transparent;color:var(--txt);box-shadow:inset 0 0 0 1px var(--hair)}
.btn-ghost:hover{background:#F5F5F7}
.btn[disabled]{opacity:.42;cursor:default;transform:none}
/* Compact variant keeps the pill, just smaller. */
.btn-sm{min-height:32px;padding-inline:16px;font-size:14px}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:var(--s3)}
.login-card{width:100%;max-width:360px;text-align:center}
.login-card h1{margin:var(--s3) 0 6px}
.login-card .sub{color:var(--txt-3);font-size:13.5px;margin-bottom:var(--s4)}
.pin{
  width:100%;min-height:52px;padding:0 16px;border-radius:var(--r-s);
  background:#fff;border:1px solid #D2D2D7;color:var(--txt);
  font:inherit;font-size:17px;text-align:center;letter-spacing:.3em
}
.pin::placeholder{letter-spacing:normal;color:var(--txt-3)}
.login-card .btn{width:100%;margin-top:12px;min-height:52px}
.err{color:var(--alert-text);font-size:13.5px;margin-top:14px;min-height:20px}

/* ---------- misc ---------- */
.empty{padding:var(--s5) var(--s3);text-align:center;color:var(--txt-3);font-size:14px}
.loading{padding:var(--s5);text-align:center;color:var(--txt-3)}
.rowsplit{display:flex;justify-content:space-between;gap:var(--s2);padding:11px 0;border-top:1px solid var(--hair);font-size:14px}
.rowsplit:first-child{border-top:0}
.rowsplit .k{color:var(--txt-2)}
.rowsplit .v{font-weight:600}
.section-title{margin:var(--s5) 0 var(--s2)}
.section-title:first-child{margin-top:0}
.hint{font-size:12.5px;color:var(--txt-3);margin-top:10px;line-height:1.5}
.demo-tag{
  display:inline-block;font-size:11px;padding:3px 9px;border-radius:999px;
  background:var(--rp-dim);color:var(--rp-text);font-weight:600;margin-left:8px
}
@media(prefers-reduced-motion:reduce){
  /* Delays are reset alongside durations: the off-canvas sidebar defers its
     visibility flip until the slide finishes, and with the slide gone the
     delay is just a pause on nothing. */
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-delay:0s!important;
    transition-duration:.001ms!important;transition-delay:0s!important
  }
}

/* ---------- signed-in identity ---------- */
.who{display:flex;flex-direction:column;line-height:1.25;text-align:right;flex:none;min-width:0}
.who-name{font-size:13px;font-weight:640;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.who-role{font-size:10.5px;font-weight:620;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3)}
@media(max-width:700px){ .who{display:none} }

/* ---------- sign-in / create-account tabs ---------- */
.authtabs{display:flex;gap:4px;background:#EDEDF0;border-radius:var(--r-pill);padding:4px;margin-top:var(--s3)}
.authtab{
  flex:1;background:none;border:0;font:inherit;font-size:14px;font-weight:600;color:var(--txt-2);
  padding:9px 0;min-height:40px;border-radius:var(--r-pill);cursor:pointer;
  transition:background .15s ease,color .15s ease
}
.authtab[aria-selected="true"]{background:#fff;color:var(--txt);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.authtab:hover:not([aria-selected="true"]){color:var(--txt)}

/* ---------- sign-in form ---------- */
#loginForm,#resetForm,#regForm{display:flex;flex-direction:column;gap:6px;text-align:left;margin-top:var(--s3)}
#loginForm[hidden],#resetForm[hidden],#regForm[hidden]{display:none}
#loginForm label,#resetForm label,#regForm label{font-size:12.5px;font-weight:640;color:var(--txt-2);margin-top:10px}
#loginForm input,#resetForm input,#regForm input{
  width:100%;min-height:48px;padding:0 14px;border-radius:var(--r-s);
  background:#fff;border:1px solid #D2D2D7;color:var(--txt);font:inherit;font-size:16px
}
#loginForm input:focus-visible,#resetForm input:focus-visible,#regForm input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
#loginForm .btn,#resetForm .btn,#regForm .btn{width:100%;min-height:50px;margin-top:18px}
.foot-note{margin-top:var(--s3);font-size:12.5px;color:var(--txt-3);line-height:1.5}

/* ---------- show/hide password ---------- */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:68px!important}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--money-text);font:inherit;font-size:12.5px;font-weight:640;
  cursor:pointer;padding:8px 10px;min-height:32px;border-radius:6px
}
.pw-toggle:hover{background:var(--money-dim)}

/* ---------- two-factor step ---------- */
#codeForm{display:flex;flex-direction:column;gap:6px;text-align:left;margin-top:var(--s3)}
#codeForm[hidden]{display:none}
/* .btn sets display:inline-flex, which beats the hidden attribute — so the
   staff enrolment screen showed "Skip for now" to people who cannot skip. */
.btn[hidden]{display:none}
#codeForm label{font-size:12.5px;font-weight:640;color:var(--txt-2);margin-top:10px}
#codeForm input{
  width:100%;min-height:48px;padding:0 14px;border-radius:var(--r-s);background:#fff;
  border:1px solid #D2D2D7;color:var(--txt);font:inherit;font-size:22px;
  letter-spacing:.28em;text-align:center;font-variant-numeric:tabular-nums
}
#codeForm input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
#codeForm .btn{width:100%;min-height:50px;margin-top:16px}
.mfa-lead{font-size:14px;color:var(--txt-2);margin:0 0 4px;line-height:1.5}
.linkish{
  background:none;border:0;color:var(--money-text);font:inherit;font-size:13.5px;
  font-weight:600;cursor:pointer;padding:10px 0;min-height:40px
}
.linkish:hover{text-decoration:underline}

/* ---------- net1 wordmark ---------- */
.wm{display:block;height:26px;width:auto}
.brand{color:var(--txt)}
.login-wm{height:44px;margin:0 auto var(--s2)}

@supports(padding:max(0px)){
  .topbar-in{padding-left:max(var(--s3),env(safe-area-inset-left));padding-right:max(var(--s3),env(safe-area-inset-right));padding-top:env(safe-area-inset-top)}
  main{padding-left:max(var(--s3),env(safe-area-inset-left));padding-right:max(var(--s3),env(safe-area-inset-right));padding-bottom:max(80px,calc(env(safe-area-inset-bottom) + 64px))}
}