/* =====================================================================
   paysplit.org
   Nothing here changes how bulbea.org looks. It adds the three objects
   this page needs and nothing else: the switch, the browser frame around
   the payout, and the marker on the words "white label".
   ===================================================================== */

@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/archivo-variable.woff2') format('woff2')}

/* the one value a partner cannot derive: what reads on top of their colour */
:root{--accent-on:#0E1416}
.callout .b1{color:var(--accent-on)}
.callout .b1:hover{filter:brightness(1.08);background:var(--accent)}

/* the site is published by Bulbea, so Bulbea's policies are the ones that
   apply. Two links beat two near empty pages kept in step by hand. */
.ftr-leg{display:flex;flex-wrap:wrap;gap:8px 22px}
.ftr-leg a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* the brand line, as the other Bulbea satellites carry it */
.brand{gap:11px}
.brand .bt{display:block;line-height:1.1;color:var(--ink)}
.brand .bmk{line-height:0}
/* the menu belongs beside the action, not adrift in the middle of the bar */
.nav .menu{margin-left:auto;margin-right:0}
.nav > .only{gap:18px}
@media (max-width:1080px){.nav .menu{margin-left:0;margin-right:0}}
/* the byline sits beside the name, divided by a rule, as the other Bulbea
   satellites set it. A short name earns the room. */
.brand .byr{display:flex;align-items:center;gap:5px;align-self:center;position:relative;
  padding-left:14px;font-size:15px;font-weight:500;letter-spacing:0;color:var(--faint)}
.brand .byr::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:20px;background:var(--line)}
.brand .byr a{color:var(--ink);font-weight:500;text-decoration:underline;
  text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:4px}
.brand .byr a:hover{text-decoration-color:var(--ink)}
/* on a phone the bar carries the mark, the burger and the action already, so
   the byline drops under the name and gives its width back */
@media (max-width:560px){
  .brand{display:grid;grid-template-columns:auto auto;column-gap:11px;row-gap:1px;align-items:center}
  .brand .bmk{grid-row:1 / span 2}
  .brand .bt{grid-column:2;grid-row:1}
  .brand .byr{grid-column:2;grid-row:2;justify-self:start;padding-left:0;font-size:12.5px}
  .brand .byr::before{display:none}
}

/* the same gesture as the kicker: a bar in the brand colour, set behind the
   lower part of the words like a highlighter, the letters running over it and
   the descenders dipping through it. It is a thick underline, which browsers
   paint beneath the text and measure from the baseline, so it sits right at
   any size and in any wrapped line. It still follows whatever colour is picked. */
.hl{text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:.26em;text-underline-offset:-.1em;
  text-decoration-skip-ink:none;-webkit-text-decoration-skip:none}

/* anything that leaves paysplit.org says so, by rule rather than by hand:
   every absolute link gets the mark, except the big actions and the cards
   that already carry an arrow of their own. */
a[href^="https://"]:not(.b1):not(.b2):not(.nbtn):not(.col):not(.brand):not(.ftr-far):not(.byr a)::after{
  content:"\2197";display:inline-block;margin-left:.26em;font-size:.82em;line-height:1;
  opacity:.5;transform:translateY(-.06em);transition:opacity .14s,transform .14s}
a[href^="https://"]:not(.b1):not(.b2):not(.nbtn):not(.col):not(.brand):not(.ftr-far):not(.byr a):hover::after{
  opacity:1;transform:translate(.09em,-.15em)}

/* the payout, shown inside the address bar it actually lives in */
.win{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);
  box-shadow:0 30px 64px -34px rgba(14,20,22,.3)}
.win-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--alt);
  border-bottom:1px solid var(--line)}
.win-dots{display:flex;gap:6px;flex:none}
.win-dots i{width:9px;height:9px;border-radius:50%;background:#D7DCDA;display:block}
.win-url{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:5px;
  padding:5px 11px;font:400 11.5px var(--mono);color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-url b{font-weight:400;color:var(--faint)}
.win .flow{border:0;border-radius:0;box-shadow:none}
/* framed inside a window, an ink slab reads as a cut across the middle. The
   band takes the partner tint instead, which also makes it follow the colour. */
.win .flow-in{background:var(--accent-soft);color:var(--ink);border-bottom:1px solid var(--line)}
.win .flow-k{color:var(--accent-deep);font-weight:600}
.win-app{display:flex;align-items:center;gap:9px;padding:13px 22px;border-bottom:1px solid var(--line)}
.win-app .mk{width:26px;height:26px;border-radius:22%;flex:none}
.win-app b{font-size:16px;font-weight:800;letter-spacing:-.03em}
.win-cap{margin-top:13px;font-size:13.5px;color:var(--faint);text-align:center}

/* the swatches: the same card language as everything else, nothing new */
.sw{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.sw button,.sw .any{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:var(--r);padding:9px 15px 9px 10px;background:var(--paper);
  font-size:14.5px;font-weight:600;cursor:pointer;
  transition:border-color .15s,transform .15s}
.sw button:hover,.sw .any:hover{border-color:var(--ink);transform:translateY(-2px)}
.sw button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sw i{width:19px;height:19px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(14,20,22,.16)}
.sw .any{position:relative;overflow:hidden}
.sw .any i{background:conic-gradient(#C8102E,#E35205,#B4975A,#00843D,#00707E,#003DA5,#5B2D8E,#B5007C,#C8102E)}
.sw .any input{position:absolute;inset:0;opacity:0;cursor:pointer;border:0;padding:0;width:100%;height:100%}

/* the switch, parked on the left edge */
.dock{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:120}
.dock-t{display:grid;gap:8px;justify-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:11px 9px 10px;
  box-shadow:0 26px 60px -26px rgba(14,20,22,.3),0 1px 2px rgba(14,20,22,.06)}
.dock-t:hover{border-color:var(--ink)}
.dock-sw{width:28px;height:28px;border-radius:50%;background:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(14,20,22,.16)}
.dock-t .cap{writing-mode:vertical-rl;font-size:11px;font-weight:600;color:var(--faint);
  max-height:92px;overflow:hidden;white-space:nowrap}
.dock-p{position:absolute;left:calc(100% + 10px);top:50%;width:226px;max-height:min(84vh,580px);
  overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px;
  box-shadow:0 26px 60px -26px rgba(14,20,22,.3),0 1px 2px rgba(14,20,22,.06);
  opacity:0;visibility:hidden;transform:translateY(-50%) translateX(-5px);
  transition:opacity .14s,transform .14s,visibility .14s}
.dock.is-open .dock-p{opacity:1;visibility:visible;transform:translateY(-50%)}
.dock-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:4px 4px 11px;border-bottom:1px solid var(--line);margin-bottom:7px}
.dock-h b{font-size:13.5px;font-weight:700;color:var(--ink)}
.dock-h code{font:400 11.5px var(--mono);color:var(--faint)}
.dock-p button,.dock-p .any{display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:var(--r);text-align:left;position:relative}
.dock-p button:hover,.dock-p .any:hover{background:var(--alt)}
.dock-p button[aria-pressed="true"]{background:var(--alt)}
.dock-p span{font-size:14.5px;font-weight:600;color:var(--ink)}
.dock-p span small{display:block;font-size:12px;font-weight:400;color:var(--faint);
  line-height:1.4;margin-top:2px}
.dock-p i{width:20px;height:20px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(14,20,22,.16)}
.dock-p .first{border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:7px}
.dock-p .any{margin-top:7px;padding-top:14px;border-top:1px solid var(--line);cursor:pointer}
.dock-p .any i{background:conic-gradient(#C8102E,#E35205,#B4975A,#00843D,#00707E,#003DA5,#5B2D8E,#B5007C,#C8102E)}
.dock-p .any input{position:absolute;left:10px;top:14px;width:20px;height:20px;opacity:0;cursor:pointer;border:0;padding:0}
@media (max-width:1180px){
  .dock{left:14px;top:auto;bottom:16px;transform:none}
  .dock-t{grid-auto-flow:column;align-items:center;padding:8px 14px 8px 9px;border-radius:999px}
  .dock-t .cap{writing-mode:horizontal-tb;max-height:none}
  .dock-p{left:0;top:auto;bottom:calc(100% + 10px);transform:translateY(5px);
    width:min(226px,calc(100vw - 28px))}
  .dock.is-open .dock-p{transform:none}
}