/* Every colour is a variable, so the staff dark theme below can change them all (run-tests.php
   checks that no colour is written anywhere else). */
:root{
  --bg:#f5f9fc; --surface:#ffffff; --line:#e2ebf3;
  --text:#0b1b34; --muted:#566880;
  --blue:#0f76f5; --blue-deep:#0b57c9; --blue-hover:#0b57c9; --teal:#10c9a1; --teal-deep:#07816a;
  --ok:#0a7d4b; --okbg:#e6f6ee; --ok-line:#bfe6d2; --err:#b4231c; --errbg:#fdecec; --err-line:#f3c6c3;
  --info-bg:#eef5ff; --info-line:#cfe0fb; --warn:#8a5a00; --warn-bg:#fff6e5; --warn-line:#f2d9a4;
  --field:#ffffff; --field-soft:#fbfdff; --on-blue:#ffffff; --shadow:rgba(11,27,52,.14); --scrim:rgba(11,27,52,.45);
  --radius:10px;
}
/* Staff pages: dark unless the browser chose day mode (layout.php, app.js). Merchant pages carry
   no data-theme, so they always use the light colours above. */
html[data-theme=dark]{
  color-scheme:dark;
  --bg:#0a1220; --surface:#111b2e; --line:#24334d;
  --text:#e7edf6; --muted:#9aabc3;
  --blue:#2563eb; --blue-deep:#7cb4ff; --blue-hover:#1d4ed8; --teal:#2dd4b0; --teal-deep:#5eead4;
  --ok:#5ee0a0; --okbg:#0e2a1f; --ok-line:#1f5a40; --err:#ff8f87; --errbg:#33151a; --err-line:#6e2b31;
  --info-bg:#10264a; --info-line:#24477e; --warn:#f3c46b; --warn-bg:#33270c; --warn-line:#6a5217;
  --field:#0d1729; --field-soft:#0c1526; --on-blue:#ffffff; --shadow:rgba(0,0,0,.55); --scrim:rgba(2,6,14,.6);
  --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
.wrap{max-width:860px;margin:0 auto;padding:0 18px}
header.site{background:var(--surface);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
header.site .brand img{display:block}
main.wrap{padding-top:22px;padding-bottom:40px}
footer.site{border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13px;margin-top:40px}
footer.site .wrap{padding-top:16px;padding-bottom:24px}
a{color:var(--blue-deep);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:24px;margin:0 0 10px}
h2{font-size:18px;margin:22px 0 10px}
h3{font-size:15px;margin:16px 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card.narrow{max-width:460px;margin:0 auto}
.help{color:var(--muted);font-size:14px;margin:4px 0 10px}
.req{color:var(--err)}
.field{margin:0 0 14px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:4px}
.field input[type=text],.field input[type=email],.field input[type=date],.field input[type=password],.field textarea,.field select,
.inline input[type=text],.inline select{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--field);color:var(--text)}
.field textarea{resize:vertical}
.field.checkbox label{font-weight:400}
.yesno label,.checkset label{display:inline-flex;align-items:center;gap:5px;margin-right:16px;font-weight:400}
.example{display:block;margin-top:6px;background:var(--bg);border:1px dashed var(--line);border-radius:8px;padding:7px 10px;font-size:13px;color:var(--muted);cursor:pointer;text-align:left;width:100%}
.example:hover{border-color:var(--blue)}
button,.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--field);color:var(--text);padding:9px 16px;border-radius:8px}
button:hover,.btn:hover{border-color:var(--blue);text-decoration:none}
button.primary,.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--on-blue);font-weight:600}
button.primary:hover{background:var(--blue-hover)}
button[disabled]{opacity:.5;cursor:not-allowed}
button.primary[disabled]{background:var(--muted);border-color:var(--muted)}
.form-section{border-top:1px solid var(--line);margin-top:18px;padding-top:6px}
.form-section:first-of-type{border-top:0;margin-top:0}
.group-label{display:block;font-weight:600;margin:10px 0 6px}
.repeat-row{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0 0 12px}
.repeat-row legend{font-weight:600;padding:0 6px}
.add-row{margin-bottom:10px}
.del-row{font-size:13px;color:var(--err);border-color:var(--line)}
.steps{display:flex;list-style:none;padding:0;margin:0 0 18px;gap:8px;font-size:13px;flex-wrap:wrap}
.steps li{flex:1;min-width:90px;text-align:center;padding:7px 4px;border-radius:8px;background:var(--field);border:1px solid var(--line);color:var(--muted)}
.steps li.now{border-color:var(--blue);color:var(--blue-deep);font-weight:600}
.steps li.done{background:var(--okbg);border-color:var(--ok-line);color:var(--ok)}
.flash-ok{background:var(--okbg);border:1px solid var(--ok-line);color:var(--ok);padding:10px 14px;border-radius:8px;margin:0 0 14px}
.flash-err{background:var(--errbg);border:1px solid var(--err-line);color:var(--err);padding:10px 14px;border-radius:8px;margin:0 0 14px}
.flash-err ul{margin:6px 0 0;padding-left:18px}
.upload-slot{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.upload-slot.done{background:var(--okbg);border-color:var(--ok-line)}
.slot-label{font-weight:600}
.tick{color:var(--ok);font-weight:400;font-size:13px}
.actions{margin-top:16px;display:flex;gap:10px;align-items:center}
.decl{font-size:14px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 16px 12px 30px}
.decl li{margin:4px 0}
/* admin */
body.admin main.wrap{max-width:1000px}
body.admin header.site .wrap{max-width:1000px}
html[data-theme=dark] ::placeholder{color:var(--muted);opacity:1}
/* The logo: the dark theme shows the copy with light lettering (layout.php prints both). The
   selectors must outrank "header.site .brand img" above, or both logos show. */
header.site .brand img.logo-dark{display:none}
html[data-theme=dark] header.site .brand img.logo-day{display:none}
html[data-theme=dark] header.site .brand img.logo-dark{display:block}
/* Staff menu. On a PC: a top bar. On a phone: a drawer behind the menu button (app.js). Never
   give header.site a transform, filter or backdrop-filter: the drawer is position:fixed, and any
   of those would shrink it to the header's height. */
.menu-btn,.menu-head{display:none}
.adminnav{flex:1;display:flex;align-items:center;gap:4px;margin-left:28px;font-size:15px}
.adminnav .navlink{padding:7px 12px;border-radius:8px;color:var(--text);font-weight:500}
.adminnav .navlink:hover{background:var(--bg);text-decoration:none}
.adminnav .navlink[aria-current=page]{background:var(--info-bg);color:var(--blue-deep);font-weight:600}
.nav-gap{flex:1}
.nav-user{color:var(--muted);font-size:14px;margin:0 2px 0 8px}
.theme-switch{display:inline-flex;align-items:center;padding:7px 12px;font-size:14px;background:transparent;border-color:transparent;color:var(--text)}
.theme-switch:hover{border-color:var(--line)}
.theme-switch span{display:inline-flex;align-items:center;gap:7px}
html[data-theme=dark] .theme-switch .when-light,html:not([data-theme=dark]) .theme-switch .when-dark{display:none}
/* Sign out is a form (a POST with the form token); its button looks like the menu links */
.signout-form{display:contents}
.adminnav button.navlink{font:inherit;border:0;background:transparent;cursor:pointer;text-align:left}
.menu-backdrop{position:fixed;inset:0;z-index:55;background:var(--scrim);touch-action:none}
@media (max-width:760px){
  /* without scripts the links wrap under the logo */
  html:not(.js) body.admin header.site .wrap{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:8px}
  html:not(.js) .adminnav{flex:1 1 100%;flex-wrap:wrap;margin:6px 0 0}
  html.js .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;padding:0;border-color:transparent;border-radius:10px;background:transparent;color:var(--text)}
  html.js .adminnav{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(86vw,320px);margin:0;flex-direction:column;align-items:stretch;gap:4px;
    padding:10px 12px calc(16px + env(safe-area-inset-bottom));background:var(--surface);border-left:1px solid var(--line);box-shadow:-16px 0 40px var(--shadow);
    overflow-y:auto;overscroll-behavior:contain;transform:translateX(105%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  html.menu-open .adminnav{transform:none;visibility:visible;transition:transform .22s ease}
  html.menu-open,html.menu-open body{overflow:hidden}
  html.js .menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
  html.js .menu-head strong{color:var(--text)}
  .menu-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-color:transparent;background:transparent;color:var(--text)}
  html.js .adminnav .navlink{padding:13px 14px;font-size:17px;border-radius:10px}
  html.js .nav-gap{flex:1;min-height:16px}
  html.js .nav-user{display:none}
  html.js .theme-switch{padding:13px 14px;font-size:17px;border:1px solid var(--line);border-radius:10px;margin:0 0 6px}
  html.js .adminnav .signout{color:var(--err)}
}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0 0 16px}
/* The Wallet page forms put labels and fields straight in the form, with no .field wrapper. Label
   above field, and the field in the theme's colours (the browser's own dark field is pure black).
   16 px text so iPhone Safari does not zoom in on a tap. */
body.admin .panel form:not(.inline) > label:not(.check){display:block;font-weight:600;font-size:14px;margin:14px 0 4px}
body.admin .panel form:not(.inline) > input[type=text],body.admin .panel form:not(.inline) > input[type=password],
body.admin .panel form:not(.inline) > select,body.admin .panel form:not(.inline) > textarea,body.admin .flash-ok input.wallet-addr{
  width:100%;max-width:560px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:16px;background:var(--field);color:var(--text)}
.panel h2{margin-top:0}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Spacing that pages once wrote as style="..." attributes, which the Content-Security-Policy refuses */
.inline.spaced{margin-top:12px}
form.inline-form{display:inline}
.ref{color:var(--muted);font-weight:400;font-size:16px;white-space:nowrap}
table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list th,table.list td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}
table.list th{color:var(--muted);font-weight:600}
/* A wide table (stack_table in helpers.php, and the due diligence answers) is one box per row on a
   phone, each value after its column's name, so a long word can never push the page sideways
   (owner, 2026-10-15: the Sumsub results ran off the screen). */
@media (max-width:760px){
  table.list.stack,table.list.stack tbody,table.list.stack tr,table.list.stack th,table.list.stack td{display:block}
  table.list.stack thead{display:none}
  table.list.stack tbody{border-top:1px solid var(--line)}
  table.list.stack tr{padding:8px 0;border-bottom:1px solid var(--line)}
  table.list.stack th,table.list.stack td{padding:2px 0;border:0;overflow-wrap:anywhere}
  table.list.stack td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--muted)}
  table.list.stack td ul{margin:4px 0 2px;padding-left:20px}
}
/* A page title with its button beside it (the merchant list's Add merchant) */
.page-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 10px}
.page-head h1{margin:0}
/* merchant list: search as you type, sort, and a List or Cards view (List by default) */
.list-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 4px}
.list-tools .field{margin:0}
.list-tools .search{flex:1 1 260px}
.list-tools .sort{flex:1 1 170px;max-width:230px}
.view-label{display:block;font-weight:600;font-size:14px;margin-bottom:4px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--field)}
.seg button{border:0;border-radius:0;padding:9px 16px;background:var(--field);color:var(--muted)}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed=true]{background:var(--blue);color:var(--on-blue);font-weight:600}
.field input[type=search]{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:16px;background:var(--field);color:var(--text)}
/* one height for the three controls: they sit level at the bottom, so equal heights put their labels level too */
.list-tools input[type=search],.list-tools select,.seg{height:44px}
/* long addresses may break anywhere; a reference never wraps; the rest wraps between words */
table.merchants .col-website,table.merchants .col-email{overflow-wrap:anywhere}
table.merchants .col-ref{white-space:nowrap}
table.merchants td.col-summary{display:none}
/* both views set display on rows, which would beat the hidden attribute without !important */
table.merchants tr[hidden]{display:none !important}
/* Cards: every field, labelled, one box per merchant */
table.merchants.view-cards thead{display:none}
table.merchants.view-cards{display:block}
table.merchants.view-cards tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
table.merchants.view-cards tr{display:block;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:4px 12px}
table.merchants.view-cards td{display:flex;justify-content:space-between;gap:14px;padding:6px 0;text-align:right;overflow-wrap:anywhere}
table.merchants.view-cards td.col-updated{border-bottom:0}
table.merchants.view-cards td::before{content:attr(data-label);flex:none;color:var(--muted);font-weight:600;text-align:left}
table.merchants.view-cards td.col-summary{display:none}
/* The Details box on a merchant's page: one card, inside its panel */
table.merchants.view-cards.one-card tbody{display:block}
table.merchants.view-cards.one-card tr{max-width:640px;padding:0;border:0;background:transparent}
/* Cards: a tap on an editable field (or its pencil) opens the editor (app.js, merchant_edit.php) */
.edit-btn{display:none}
table.merchants.view-cards td[data-edit]{cursor:pointer;align-items:center}
table.merchants.view-cards td[data-edit] .cell-value{margin-left:auto}
table.merchants.view-cards .edit-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;margin:-6px -8px -6px -6px;
  padding:0;border-color:transparent;border-radius:8px;background:transparent;color:var(--muted)}
table.merchants.view-cards td[data-edit]:hover .edit-btn,table.merchants.view-cards .edit-btn:focus-visible{color:var(--blue-deep)}
/* the editor: the field, then "Save this change?" */
.edit-dialog{width:min(92vw,440px);max-height:88vh;overflow:auto;padding:18px 18px 16px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);color:var(--text);box-shadow:0 20px 50px var(--shadow)}
.edit-dialog::backdrop{background:var(--scrim)}
.edit-dialog h2{margin:0 0 2px}
.edit-dialog label{display:block;font-weight:600;font-size:14px;margin:14px 0 4px}
.edit-dialog input[type=text],.edit-dialog select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:16px;
  background:var(--field);color:var(--text)}
.edit-dialog .flash-err{margin:10px 0 0}
.edit-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.edit-change{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:14px 0 0;overflow-wrap:anywhere}
.edit-change dt{color:var(--muted);font-weight:600}
.edit-change dd{margin:0}
/* "Saved": at the top, clear of a phone browser's bar at the bottom */
/* taps go through it: while selecting, it can sit over the pinned Copy and Done buttons */
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);z-index:80;margin:0;padding:10px 18px;pointer-events:none;
  border-radius:10px;background:var(--okbg);color:var(--ok);border:1px solid var(--ok-line);box-shadow:0 8px 24px var(--shadow);font-weight:600}
/* Approved merchants (approved.php): the green tick, Copy and the tick on each row, the approval box
   on a merchant's page. The tick's circle is the page's green, its mark the page colour. */
.tick-icon{flex:none;vertical-align:middle}
.tick-icon circle{fill:currentColor}
.tick-icon path{fill:none;stroke:var(--surface);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tick-icon.off circle{fill:none;stroke:currentColor;stroke-width:1.8}
.tick-icon.off path{stroke:currentColor;stroke-width:2}
.ok-tick{display:inline-flex;align-items:center;gap:5px;color:var(--ok);font-weight:600}
h1 .ok-tick{vertical-align:-2px}
.adminnav .navlink .tick-icon{color:var(--ok);margin-right:7px;vertical-align:-4px}
.copy-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;font-size:14px;color:var(--blue-deep);background:transparent}
.tick-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;color:var(--muted);background:transparent}
.tick-btn[aria-pressed=true]{color:var(--ok);border-color:var(--ok-line);background:var(--okbg)}
table.merchants td.col-actions{white-space:nowrap}
table.merchants td.col-actions button+button{margin-left:6px}
table.merchants.view-cards td.col-actions{justify-content:flex-end;gap:6px}
table.merchants.view-cards td.col-actions::before{content:none}
table.merchants.view-cards td.col-actions button+button{margin-left:0}
/* Copy all and Select (owner, 2026-10-31): the buttons beside the count, and while selecting a box
   on each row in place of Copy and the tick. A ticked row is shaded. */
.list-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 10px}
/* while selecting, the count and its buttons stay at the top of the screen, so Copy is always in reach */
.list-head.picking{position:sticky;top:0;z-index:30;background:var(--bg);padding-top:8px;border-bottom:1px solid var(--line)}
.pick-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px auto}
.pick-bar[hidden],.pick-bar [hidden]{display:none}
.pick-btn{height:34px;padding:0 12px;font-size:14px}
input.pick{display:none;flex:none;width:22px;height:22px;margin:6px;accent-color:var(--blue);cursor:pointer}
table.merchants.picking input.pick{display:inline-block}
table.merchants.picking .copy-btn,table.merchants.picking .tick-btn{display:none}
table.merchants.picking tbody tr{cursor:pointer}
table.merchants.picking tr.picked{background:var(--info-bg)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.panel-head h2{margin:0}
.approval{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.approval-state{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:600;color:var(--muted)}
.approval.ok{background:var(--okbg);border-color:var(--ok-line)}
.approval.ok .approval-state{color:var(--ok)}
.approval form{margin:0}
.approval .help{flex-basis:100%;margin:0}
/* Archive or delete (archive.php): Delete is folded away and asks for the reference to be typed */
#remove form{margin:0 0 6px}
details.danger{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
details.danger summary{cursor:pointer;color:var(--err);font-weight:600}
details.danger form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:10px}
details.danger label{flex-basis:100%;font-size:14px}
details.danger input[type=text]{flex:1 1 180px;max-width:240px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:16px;
  background:var(--field);color:var(--text);text-transform:uppercase}
button.danger{background:var(--errbg);border-color:var(--err-line);color:var(--err);font-weight:600}
button.danger[disabled]{opacity:.55;cursor:not-allowed}
/* List on a phone: four lines per merchant. Website and stage, then the business name with Copy and
   the tick, then the platform and the date, then the MetaMask account. A tap anywhere else on a row
   opens the merchant (app.js). */
@media (max-width:760px){
  table.merchants.view-list thead{display:none}
  table.merchants.view-list,table.merchants.view-list tbody{display:block}
  table.merchants.view-list tbody{border-top:1px solid var(--line)}
  table.merchants.view-list tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"website stage" "summary actions" "platform updated" "metamask metamask";column-gap:12px;row-gap:2px;padding:10px 4px;border-bottom:1px solid var(--line);background:var(--surface);cursor:pointer}
  table.merchants.view-list td{display:none;padding:0;border:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  table.merchants.view-list td.col-website{display:block;grid-area:website;font-weight:600}
  table.merchants.view-list td.col-website a{color:var(--text);pointer-events:none}
  table.merchants.view-list td.col-stage{display:block;grid-area:stage;text-align:right;font-size:13px;color:var(--blue-deep)}
  table.merchants.view-list td.col-summary{display:block;grid-area:summary;font-size:14px;color:var(--muted);align-self:center}
  /* Copy and the tick sit beside the business name */
  table.merchants.view-list td.col-actions{display:flex;grid-area:actions;gap:6px;justify-content:flex-end;align-items:center;overflow:visible}
  table.merchants.view-list td.col-platform{display:block;grid-area:platform;font-size:14px}
  table.merchants.view-list td.col-platform::before{content:attr(data-label) ": ";color:var(--muted)}
  table.merchants.view-list td.col-updated{display:block;grid-area:updated;text-align:right;font-size:13px;color:var(--muted)}
  table.merchants.view-list td.col-metamask{display:block;grid-area:metamask;font-size:14px}
  table.merchants.view-list td.col-metamask::before{content:attr(data-label) ": ";color:var(--muted)}
}
.docs{margin:0;padding-left:18px}
.copyrows{display:flex;flex-direction:column;gap:8px}
.copyrow{display:grid;grid-template-columns:200px 1fr;gap:10px;align-items:start}
.cr-label{font-weight:600;font-size:14px;padding-top:7px}
.cr-value{display:flex;gap:6px;align-items:start}
.cr-value textarea{flex:1;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--field-soft);color:var(--text);resize:vertical}
.copy{white-space:nowrap}
code.big{font-size:18px;letter-spacing:.08em;background:var(--bg);padding:2px 8px;border-radius:6px}
details summary{cursor:pointer;color:var(--blue-deep);margin:6px 0}
/* country picker (app.js builds it over the plain select) */
/* Flag font for browsers without flag emoji. Twemoji art, CC BY 4.0, see TwemojiCountryFlags-LICENSE.txt */
@font-face{font-family:"Twemoji Country Flags";unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E0063,U+E0065,U+E0067,U+E006C,U+E006E,U+E0073-E0074,U+E0077,U+E007F;src:url(/assets/TwemojiCountryFlags.woff2) format("woff2");font-display:swap}
.cpick{position:relative}
.cpick input.cpick-input{width:100%;padding:9px 42px 9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:16px;background:var(--field);color:var(--text)}
.cpick.has-flag input.cpick-input{padding-left:46px}
.cpick input.cpick-input:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.cpick-flag{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:22px;line-height:1;pointer-events:none}
.cpick-toggle{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;border:0;background:transparent}
.cpick-toggle::after{content:"";position:absolute;left:12px;top:15px;border:6px solid transparent;border-top-color:var(--muted)}
.cpick.open .cpick-toggle::after{top:9px;border-top-color:transparent;border-bottom-color:var(--muted)}
.cpick-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);max-height:min(320px,50vh);overflow-y:auto;margin:0;padding:4px;list-style:none;background:var(--field);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px var(--shadow);-webkit-overflow-scrolling:touch}
.cpick-list li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;cursor:pointer;font-size:15px}
.cpick-list li.active,.cpick-list li:hover{background:var(--bg)}
.cpick-list li[aria-selected=true]{font-weight:600}
.cpick-oflag{font-size:20px;line-height:1;width:26px;text-align:center;flex:none}
.cpick-empty{color:var(--muted);cursor:default}
html.flag-font .cpick-flag,html.flag-font .cpick-oflag{font-family:"Twemoji Country Flags","Segoe UI Emoji",sans-serif}
/* phone: calling code picker next to the number box. The code list hangs from the
   whole phone row, not the narrow code box, so it is wide enough and never runs off
   the screen. The flag and the arrow are placed inside the code box. */
.phone-field{position:relative;display:flex;gap:8px;align-items:stretch}
.phone-field select{flex:0 0 9rem}
.phone-field .cpick.dial{position:static;flex:0 0 8.5rem;min-width:0}
.phone-field .cpick.dial .cpick-toggle{right:auto;left:calc(8.5rem - 39px)}
.phone-field .cpick.dial .cpick-list{left:0;right:0;max-width:26rem}
.phone-field input[type=tel]{flex:1 1 0;width:100%;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:16px;background:var(--field);color:var(--text)}
/* A fieldset will not shrink below its contents by default, which pushed the owner
   box past the edge of a phone screen. */
fieldset.repeat-row{min-width:0}
.cpick-dial{font-weight:600;min-width:3.4em;flex:none}
/* "Same as the beneficiary" */
.same-as-row{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.same-as{font-size:14px;padding:7px 12px;background:var(--info-bg);border-color:var(--info-line);color:var(--blue-deep)}
/* staff Sumsub panel */
.state{padding:9px 12px;border-radius:8px;background:var(--bg);border:1px solid var(--line);margin:0 0 12px}
.state.ok{background:var(--okbg);border-color:var(--ok-line);color:var(--ok)}
.state.err{background:var(--errbg);border-color:var(--err-line);color:var(--err)}
.state.run{background:var(--info-bg);border-color:var(--info-line);color:var(--blue-deep)}
.runlog{white-space:pre-wrap;font-size:13px;background:var(--field-soft);border:1px solid var(--line);border-radius:8px;padding:10px;max-height:260px;overflow:auto;margin:6px 0 12px}
label.check{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;font-weight:400}
.sumsub-start{margin:6px 0 4px}
details.copysheet{margin-top:16px;border-top:1px solid var(--line);padding-top:8px}
.cr-value input[type=text]{flex:1;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--field);color:var(--text);min-width:0}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:1px 8px;border-radius:20px;margin-left:6px;vertical-align:middle}
.tag.ok{background:var(--okbg);color:var(--ok);border:1px solid var(--ok-line)}
.tag.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.tag.hand{background:var(--info-bg);color:var(--blue-deep);border:1px solid var(--info-line);white-space:nowrap}
@media (max-width:620px){
  .copyrow{grid-template-columns:1fr}.cr-label{padding-top:0}
  .steps{gap:5px}
  .steps li{min-width:0;font-size:12px;padding:6px 2px}
}