/*
 * The Payble UI kit: design tokens, the layer scale, and the components the new look is built from (dialogs, slide-over panels, menus, the "jump to" palette,
 * skeletons, entrances). See kit.js for what each does and how the new look is switched on.
 *
 * Everything here is namespaced `k-` so it can't collide with the 30 pages' own inline CSS, and none of it depends on the new look being switched on: a
 * component only exists when a script asks for it. The page-level restyling lives in kit-team.css and kit-portal.css, scoped to html[data-ui="2"].
 *
 * RULES (tests_admin.mjs reads every stylesheet): nothing here may put a transform, filter or backdrop-filter on html, body, .wrap or main (it would become the
 * containing block for every position:fixed element on the page); an entrance never uses `animation-fill-mode: both|forwards` on something that moves (it uses a
 * transition, or `backwards`); the layer that holds the pop-ups has no transform or filter of its own.
 */
:root {
  --k-navy: #09313f; --k-navy-2: #0d4357; --k-teal: #8acdd1; --k-teal-deep: #5fb0b6; --k-teal-ink: #2b7c85; --k-teal-tint: #eaf6f7;
  --k-ink: #12242b; --k-grey: #5c7079; --k-line: #e1ecee; --k-line-2: #cfe0e3;
  --k-good: #2f7a4d; --k-good-bg: #e7f4ea; --k-warn-ink: #8a4433; --k-warn-bg: #fbede9; --k-danger: #b3261e; --k-danger-bg: #fdeceb; --k-amber: #8a5a00; --k-amber-bg: #fdf3dc;
  --k-ease: cubic-bezier(.22, .8, .24, 1); --k-ease-out: cubic-bezier(.16, 1, .3, 1);
  --k-r-sm: 12px; --k-r: 18px; --k-r-lg: 26px;
  /* three depths: resting, raised (hovered, menus), floating (dialogs and panels) */
  --k-shadow-1: 0 1px 2px rgba(9, 49, 63, .05), 0 12px 26px -18px rgba(9, 49, 63, .3);
  --k-shadow-2: 0 2px 4px rgba(9, 49, 63, .06), 0 24px 44px -24px rgba(9, 49, 63, .38);
  --k-shadow-3: 0 6px 14px rgba(9, 49, 63, .1), 0 44px 90px -32px rgba(9, 49, 63, .55);
  /* the layer scale: page content < header < dock < pop-ups (one layer) < toasts */
  --k-z-header: 30; --k-z-dock: 40; --k-z-layer: 900; --k-z-toast: 1000;
  --k-font: 'Poppins', -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ---------- the layer every pop-up lives in ---------- */
.k-layer { position: fixed; inset: 0; z-index: var(--k-z-layer); pointer-events: none; font-family: var(--k-font); color: var(--k-ink); }
.k-layer > * { pointer-events: auto; }
html.k-locked { overflow: hidden; }
.k-backdrop { position: fixed; inset: 0; z-index: 1; background: rgba(6, 34, 44, .46); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .28s ease; }
.k-backdrop.k-in { opacity: 1; }
.k-kbd { font: 500 11.5px var(--k-font); padding: 2px 8px; border-radius: 7px; border: 1px solid var(--k-line); background: #f3f8f8; color: var(--k-grey); }

/* ---------- buttons inside pop-ups ---------- */
.k-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 22px; border: 0; border-radius: 999px; font: 600 14px var(--k-font); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .2s var(--k-ease), box-shadow .2s, background .2s, opacity .2s; }
.k-btn:active { transform: scale(.97); }
.k-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.k-primary { background: var(--k-navy); color: #fff; box-shadow: 0 10px 20px -12px rgba(9, 49, 63, .8); }
.k-primary:hover:not(:disabled) { background: var(--k-navy-2); transform: translateY(-1px); }
.k-secondary { background: #fff; color: var(--k-navy); box-shadow: inset 0 0 0 1.5px var(--k-line-2); }
.k-secondary:hover:not(:disabled) { background: var(--k-teal-tint); }
.k-danger { background: var(--k-danger); color: #fff; box-shadow: 0 10px 20px -12px rgba(179, 38, 30, .8); }
.k-danger:hover:not(:disabled) { background: #9c1f18; transform: translateY(-1px); }
.k-ghost { background: transparent; color: var(--k-navy); }
.k-ghost:hover:not(:disabled) { background: var(--k-teal-tint); }
.k-busy { color: transparent !important; pointer-events: none; }
.k-busy::after { content: ""; position: absolute; width: 17px; height: 17px; border-radius: 50%; border: 2.4px solid #fff; border-right-color: transparent; animation: k-spin .7s linear infinite; }
.k-secondary.k-busy::after, .k-ghost.k-busy::after { border-color: var(--k-navy); border-right-color: transparent; }
@keyframes k-spin { to { transform: rotate(360deg); } }
.k-btn:focus-visible, .k-x:focus-visible, .k-mi:focus-visible, .k-prow:focus-visible { outline: 3px solid var(--k-teal-deep); outline-offset: 2px; }

/* ---------- dialogs (a card in the middle on a screen; a sheet from the bottom on a phone) ---------- */
.k-dialog { position: fixed; left: 50%; top: 50%; z-index: 2; width: min(460px, calc(100vw - 28px)); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; padding: 30px 28px 24px; border-radius: var(--k-r-lg); background: #fff; border: 1px solid var(--k-line); box-shadow: var(--k-shadow-3); color: var(--k-ink); text-align: left; opacity: 0; transform: translate(-50%, -46%) scale(.95); transition: opacity .22s ease, transform .42s var(--k-ease-out); }
.k-dialog.k-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.k-dialog.k-out { opacity: 0; transform: translate(-50%, -48%) scale(.97); transition-duration: .18s; }
.k-dialog.k-lg { width: min(640px, calc(100vw - 28px)); }
.k-dialog:focus { outline: 0; }
.k-grab { display: none; }
.k-dicon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin: 0 0 16px; background: var(--k-teal-tint); color: var(--k-teal-ink); }
.k-dicon[hidden], .k-dtitle[hidden], .k-dactions[hidden] { display: none; }
.k-dicon svg { width: 26px; height: 26px; }
.k-dialog.k-in .k-dicon { animation: k-pop .5s var(--k-ease-out) .08s backwards; }
@keyframes k-pop { from { transform: scale(.5); opacity: 0; } }
.k-tone-danger .k-dicon { background: var(--k-danger-bg); color: var(--k-danger); }
.k-tone-warning .k-dicon { background: var(--k-amber-bg); color: var(--k-amber); }
.k-tone-success .k-dicon { background: var(--k-good-bg); color: var(--k-good); }
.k-dtitle { margin: 0 0 8px; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--k-navy); }
.k-dbody { font-size: 14px; line-height: 1.65; color: var(--k-grey); }
.k-dbody .k-p { margin: 0 0 12px; white-space: pre-line; overflow-wrap: anywhere; }
.k-dbody .k-p:last-child { margin-bottom: 0; }
.k-dbody a:not(.k-btn) { color: var(--k-teal-ink); font-weight: 600; }
.k-type { color: var(--k-ink); }
.k-type code { font: 600 13px ui-monospace, Menlo, monospace; background: var(--k-teal-tint); color: var(--k-navy); padding: 2px 8px; border-radius: 7px; }
.k-dactions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.k-swap > .k-dtitle, .k-swap > .k-dbody, .k-swap > .k-dactions { animation: k-rise .45s var(--k-ease-out) backwards; }
.k-swap > .k-dicon { animation: k-pop .5s var(--k-ease-out) backwards; }
@keyframes k-rise { from { opacity: 0; transform: translateY(8px); } }
.k-input { display: block; width: 100%; margin-top: 14px; padding: 12px 14px; border: 1.5px solid var(--k-line-2); border-radius: 14px; background: #fff; color: var(--k-ink); font: 500 14.5px var(--k-font); transition: border-color .2s, box-shadow .2s; }
.k-input:focus { outline: 0; border-color: var(--k-teal-deep); box-shadow: 0 0 0 4px rgba(95, 176, 182, .22); }
.k-ta { resize: vertical; min-height: 84px; }
.k-mono { font-family: ui-monospace, Menlo, monospace; letter-spacing: .02em; }
.k-err { min-height: 0; margin: 8px 0 0; font-size: 13px; color: var(--k-danger); font-weight: 500; }
.k-err:empty { display: none; }
@media (max-width: 640px) {
  .k-dialog { left: 0; top: auto; bottom: 0; width: 100%; max-height: 88vh; max-height: 88dvh; padding: 10px 22px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; border-bottom: 0; transform: translateY(100%); transition: opacity .2s ease, transform .42s var(--k-ease-out); }
  .k-dialog.k-in { transform: translateY(0); }
  .k-dialog.k-out { transform: translateY(40%); }
  .k-grab { display: block; width: 42px; height: 5px; border-radius: 99px; background: var(--k-line-2); margin: 0 auto 16px; }
  .k-dactions { flex-direction: column-reverse; }
  .k-dactions .k-btn { width: 100%; }
}

/* ---------- the slide-over panel ---------- */
.k-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2; width: min(480px, 100vw); display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--k-line); box-shadow: -34px 0 70px -36px rgba(6, 34, 44, .6); color: var(--k-ink); transform: translateX(104%); transition: transform .42s var(--k-ease-out); }
.k-panel.k-wide { width: min(640px, 100vw); }
.k-panel.k-in { transform: translateX(0); }
.k-panel.k-out { transform: translateX(104%); transition-duration: .24s; }
.k-panel:focus { outline: 0; }
.k-phead { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 16px; border-bottom: 1px solid var(--k-line); }
.k-pgrow { flex: 1; min-width: 0; }
.k-phead h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--k-navy); overflow-wrap: anywhere; }
.k-psub { margin: 3px 0 0; font-size: 13px; color: var(--k-grey); }
.k-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--k-line); background: #f6fafa; color: var(--k-grey); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, transform .25s var(--k-ease); }
.k-x:hover { background: var(--k-teal-tint); color: var(--k-navy); transform: rotate(90deg); }
.k-pbody { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px 36px; overscroll-behavior: contain; }
.k-pfoot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--k-line); background: #fbfdfd; }
.k-pfoot[hidden] { display: none; }
.k-psec { margin-top: 22px; }
.k-psec:first-child { margin-top: 0; }
.k-psec > h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--k-teal-ink); }
.k-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.k-list a, .k-list .k-li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin: 0 -12px; border-radius: 14px; text-decoration: none; color: inherit; transition: background .18s, transform .22s var(--k-ease); }
.k-list a:hover { background: var(--k-teal-tint); transform: translateX(2px); }
.k-list a:focus-visible { outline: 3px solid var(--k-teal-deep); outline-offset: -2px; }
.k-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--k-teal-tint); color: var(--k-teal-ink); font-weight: 700; font-size: 13px; }
.k-mt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.k-mt b { font-weight: 600; font-size: 14px; color: var(--k-navy); overflow-wrap: anywhere; }
.k-mt small { font-size: 12.3px; color: var(--k-grey); line-height: 1.45; }
.k-chipn { flex: none; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--k-teal-tint); color: var(--k-teal-ink); white-space: nowrap; }
.k-chipn.k-hot { background: var(--k-warn-bg); color: var(--k-warn-ink); }
.k-empty { padding: 26px 12px; text-align: center; color: var(--k-grey); font-size: 13.5px; }
@media (max-width: 640px) { .k-panel, .k-panel.k-wide { width: 100vw; } .k-phead { padding: 18px 18px 14px; } .k-pbody { padding: 16px 18px 32px; } .k-pfoot { padding-left: 18px; padding-right: 18px; } }

/* ---------- menus ---------- */
.k-menu { position: fixed; left: var(--k-x, 0); top: var(--k-y, 0); z-index: 3; width: var(--k-mw, 300px); max-width: calc(100vw - 20px); max-height: var(--k-mh, 70vh); overflow: auto; padding: 8px; border-radius: 20px; background: #fff; border: 1px solid var(--k-line); box-shadow: var(--k-shadow-2); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; transition: opacity .16s ease, transform .26s var(--k-ease-out); }
.k-menu.k-up { transform-origin: bottom left; transform: translateY(6px) scale(.98); }
.k-menu.k-in { opacity: 1; transform: none; }
.k-menu.k-out { opacity: 0; transition-duration: .12s; }
.k-msec { padding: 10px 12px 5px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--k-teal-ink); }
.k-msep { height: 1px; margin: 6px 4px; background: var(--k-line); }
.k-mhead { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px 8px; }
.k-mhead b { font-size: 14px; font-weight: 600; color: var(--k-navy); overflow-wrap: anywhere; }
.k-mhead span { font-size: 12.3px; color: var(--k-grey); }
.k-mi { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 13px; background: transparent; text-align: left; text-decoration: none; color: var(--k-ink); font: 500 14px var(--k-font); cursor: pointer; transition: background .15s; }
.k-mi svg { flex: none; color: var(--k-teal-ink); }
.k-mi:hover, .k-mi:focus-visible { background: var(--k-teal-tint); }
.k-mi:focus-visible { outline-offset: -3px; }
.k-mi.k-cur { background: var(--k-teal-tint); }
.k-mi.k-cur b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--k-teal-deep); vertical-align: 1px; }
.k-mi.k-mdanger, .k-mi.k-mdanger svg { color: var(--k-danger); }
.k-mi.k-mdanger:hover, .k-mi.k-mdanger:focus-visible { background: var(--k-danger-bg); }

/* ---------- the "jump to" palette ---------- */
.k-palette { position: fixed; left: 50%; top: max(52px, 11vh); z-index: 2; width: min(620px, calc(100vw - 24px)); overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--k-line); box-shadow: var(--k-shadow-3); opacity: 0; transform: translate(-50%, -12px) scale(.98); transition: opacity .2s ease, transform .36s var(--k-ease-out); }
.k-palette.k-in { opacity: 1; transform: translate(-50%, 0) scale(1); }
.k-palette.k-out { opacity: 0; transition-duration: .14s; }
.k-palette:focus { outline: 0; }
.k-psearch { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--k-line); color: var(--k-grey); }
.k-pin { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px var(--k-font); color: var(--k-ink); }
.k-pin::placeholder { color: #8aa0a6; }
.k-plist { max-height: min(52vh, 440px); overflow: auto; padding: 8px; }
.k-pgroup { padding: 10px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--k-teal-ink); }
.k-prow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: transparent; text-align: left; font: inherit; color: var(--k-ink); cursor: pointer; }
.k-prow svg { flex: none; color: var(--k-teal-ink); }
.k-pdot { flex: none; width: 8px; height: 8px; margin: 0 5px; border-radius: 50%; background: var(--k-teal); }
.k-prow.k-on { background: var(--k-teal-tint); }
.k-ptag { flex: none; font-size: 11.5px; font-weight: 600; color: var(--k-teal-ink); background: #fff; border: 1px solid var(--k-line); padding: 2px 9px; border-radius: 999px; }
.k-pnone { padding: 28px 12px; text-align: center; color: var(--k-grey); font-size: 13.5px; }
.k-phint { padding: 10px 18px; border-top: 1px solid var(--k-line); font-size: 12px; color: var(--k-grey); background: #fbfdfd; }

/* a recap line inside a dialog (a time, a name, an amount) */
.k-recap { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; padding: 14px 16px; border-radius: 18px; background: var(--k-teal-tint); color: var(--k-navy); }
.k-recap svg { flex: none; color: var(--k-teal-ink); }
.k-recap b { display: block; font-size: 15px; line-height: 1.35; }
.k-recap small { color: var(--k-grey); font-size: 12.5px; }
.k-recap + .k-p { margin-top: 14px; }

/* ---------- skeletons and entrances ---------- */
.k-skel { color: transparent !important; border-radius: 10px; background: linear-gradient(100deg, #edf3f4 25%, #f8fbfb 50%, #edf3f4 75%); background-size: 200% 100%; animation: k-shimmer 1.4s linear infinite; }
@keyframes k-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* an entrance is a TRANSITION that ends back at no transform (never an animation that keeps one): see the rules at the top */
html.k-js .k-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--k-ease-out) var(--k-d, 0ms), transform .7s var(--k-ease-out) var(--k-d, 0ms); }
html.k-js .k-reveal.k-in { opacity: 1; transform: none; }

/* ---------- the preview chip ---------- */
.k-preview { position: fixed; left: 14px; bottom: 14px; z-index: var(--k-z-dock); display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 4px; border: 1px solid rgba(138, 205, 209, .5); border-radius: 999px; background: rgba(9, 49, 63, .92); color: #e8f4f5; font: 500 12px var(--k-font); box-shadow: var(--k-shadow-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.k-preview-go { display: inline-flex; align-items: center; gap: 9px; padding: 5px 8px 5px 10px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
.k-preview-x { width: 26px; height: 26px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #cfe6e9; font: 500 16px/1 var(--k-font); cursor: pointer; }
.k-preview-x:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.k-preview-go:focus-visible, .k-preview-x:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }
.k-preview i { width: 8px; height: 8px; border-radius: 50%; background: var(--k-teal); box-shadow: 0 0 0 4px rgba(138, 205, 209, .25); }
.k-preview u { color: var(--k-teal); text-underline-offset: 3px; }
.k-preview-go:hover u { color: #fff; }

/* ---------- the portal's toast, in the new look ---------- */
html[data-ui="2"] .pb-toast { border-radius: 16px; background: rgba(9, 49, 63, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--k-shadow-2); }
html[data-ui="2"] .pb-toast.error { background: rgba(122, 42, 27, .96); }

.k-secretrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 8px 8px 16px; border: 1.5px dashed var(--k-teal-deep); border-radius: 16px; background: var(--k-teal-tint); }
.k-secret { flex: 1; min-width: 0; font: 600 15px ui-monospace, Menlo, monospace; letter-spacing: .03em; color: var(--k-navy); word-break: break-all; user-select: all; cursor: copy; }
.k-btn.k-sm { min-height: 36px; padding: 6px 16px; font-size: 13px; }

/* ---------- the theme switcher (Light | Dark | System) ---------- */
.k-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--k-line); border-radius: 999px; background: #f3f8f8; }
.k-segb { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--k-grey); font: 600 13.5px var(--k-font); cursor: pointer; transition: background .2s, color .2s, box-shadow .25s; }
.k-segb:hover { background: #fff; color: var(--k-navy); }
.k-segb.k-on { background: var(--k-navy); color: #fff; box-shadow: 0 10px 18px -12px rgba(9, 49, 63, .8); }
.k-segb:focus-visible { outline: 3px solid var(--k-teal-deep); outline-offset: 2px; }
.k-appear-note { margin: 0 0 14px; color: var(--k-grey); font-size: 13.5px; line-height: 1.55; }
/* for a moment after the theme changes, colours glide instead of snapping */
html.k-theming, html.k-theming *, html.k-theming *::before, html.k-theming *::after { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, fill .3s ease, stroke .3s ease !important; }

@media (prefers-reduced-motion: reduce) {
  .k-backdrop, .k-dialog, .k-panel, .k-menu, .k-palette, .k-x, .k-btn, .k-list a { transition-duration: .01ms !important; }
  .k-dicon, .k-swap > *, .k-skel, .k-busy::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  html.k-js .k-reveal { transition: none; opacity: 1; transform: none; }
  html.k-theming, html.k-theming *, html.k-theming *::before, html.k-theming *::after { transition: none !important; }
}
@media print { .k-layer, .k-preview { display: none !important; } }