/* Held back until the region check answers, so the form never flashes in
   front of someone we cannot serve. Released by the head script's timeout
   even if the lookup never returns. */
html.geo-wait .auth-card{visibility:hidden}

/* Seven Broker account screen: centred card over the hero background, site nav on top */
.account-body{
  /* 64 is the scale step; the nav is 69 to 72px tall, so the last few px of it sit over
     .auth2's own top padding, which is empty, and never over the card */
  padding-top:64px;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  background:
    radial-gradient(ellipse 60% 42% at 26% 8%,rgba(212,19,31,.22),transparent 70%),
    radial-gradient(ellipse 52% 40% at 78% 30%,rgba(212,19,31,.12),transparent 70%),
    linear-gradient(168deg,#141414 0%,#101010 38%,#0E0E0E 100%);
}
html[data-theme="light"] .account-body{
  background:
    radial-gradient(ellipse 60% 42% at 26% 8%,rgba(212,19,31,.10),transparent 70%),
    radial-gradient(ellipse 52% 40% at 78% 30%,rgba(212,19,31,.06),transparent 70%),
    linear-gradient(168deg,#FDFBFB 0%,#FBF9F9 38%,#F5F1F1 100%);
}

.auth2{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 16px;
}
.auth-card{
  width:min(432px,100%);
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  /* two scale steps, not a fluid value: 32 on anything wider than a phone, 20 on a phone
     (below, in the 480 block), the same 20 the nav bar keeps at its sides there */
  padding:32px;
  box-shadow:0 24px 70px rgba(0,0,0,.38);
}
html[data-theme="light"] .auth-card{box-shadow:0 24px 70px rgba(23,18,21,.12)}

.auth-greeting{color:var(--text-secondary);font-size:.88rem;margin-bottom:4px}
.auth-form{display:grid;gap:16px}
.auth-form[hidden],.auth-soon[hidden]{display:none}
.auth-form h1{font-size:clamp(1.35rem,2.6vw,1.8rem)}
.auth-sub{color:var(--text-secondary);margin-top:-8px}
.auth-form label{display:grid;gap:8px;font-size:.9rem;font-weight:600}
.auth-form label span{color:var(--text-secondary)}
.auth-form input[type="text"],.auth-form input[type="email"],.auth-form input[type="password"]{
  background:var(--canvas);border:1px solid var(--line);border-radius:10px;
  color:var(--text-primary);font:400 1rem var(--font-b);padding:12px 16px;
  transition:border-color .25s var(--ease-out);
}
.auth-form input:focus{outline:none;border-color:var(--accent)}
.auth-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the whole row is the tap target; a two-line declaration came to 39px, so it never drops under 44 */
.check{grid-template-columns:auto 1fr;align-items:start;font-weight:400!important;min-height:44px}
.check input{margin-top:4px;accent-color:var(--accent);width:16px;height:16px}
.check span{color:var(--text-secondary);font-size:.82rem;line-height:1.5}
.auth-cta{width:100%}
.auth-err{color:var(--accent-hover);font-size:.88rem}

.auth-switch{
  display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
  color:var(--text-secondary);font-size:.88rem;
}
.auth-switch a{color:var(--menu-on);font-weight:600;text-decoration:none;position:relative}
/* the link is a 23px line of text: its hit area grows to 45px tall without moving the line, and
   nothing else sits within 11px of it */
.auth-switch a::after{content:"";position:absolute;inset:-11px -6px}
.auth-switch a:hover{color:var(--accent-hover)}
.auth-switch-right{margin-inline-start:auto}
#pane-criar .auth-switch,#pane-forgot .auth-switch,#forgotSent .auth-switch{justify-content:center}
/* a long label ("Envoyer le lien de réinitialisation") wraps inside the full-width button
   instead of pushing past the card at 320px */
.auth-cta{white-space:normal;text-align:center}
.auth-switch a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
/* forgot password, sent: the address is the one thing to check, so it carries the weight */
#forgotSentH:focus{outline:none}
.forgot-email{color:var(--text-primary);font-weight:600;overflow-wrap:anywhere}

.auth-soon{display:grid;gap:16px}
.auth-soon h2{font-size:clamp(1.3rem,2.6vw,1.7rem)}
.auth-soon p{color:var(--text-secondary)}
/* visitor country: flag + name, above the heading */
/* country on one line, the address on the next, both centred in the card */
.geo-country{
  display:flex;flex-direction:column;align-items:center;gap:8px;margin:8px 0;
  font-weight:600;color:var(--text-primary)!important;
}
.geo-line{display:inline-flex;align-items:center;gap:8px}
/* heading, country, sentence and button sit on one 24px rhythm: the block's 16px gap
   plus 8px, the same 8px the country takes above and below */
.geo-country ~ .btn{margin-top:8px}
.geo-country[hidden]{display:none}
.flag-country{width:28px;height:28px}

/* legal notices: same container width as the card, with their own spacing. .auth2 already
   centres its children (align-items:center), so only the top margin is set: auto side margins
   added nothing on screen and showed up as 488px of "spacing" in every measurement */
.auth-legal{
  width:min(432px,100%);margin-top:32px;padding:0 16px;
}
.auth-risk{
  text-align:center;color:var(--text-secondary);font-size:.75rem;line-height:1.6;
}
.auth-risk + .auth-risk{margin-top:12px}

/* 480, not 440: the folded iPhone Duo is 466 wide and 678 tall. Inside the old band it
   kept the centred card, which on a screen that short pushes the form off the fold. */
@media (max-width:480px){
  .auth2{justify-content:flex-start}
  .auth-card{padding:20px}
  .auth-cta{padding-inline:16px}   /* the 40px of a big button leave a long label two words a line on a 320 phone */
}

/* ---------- sign in with a provider ----------
   The buttons are drawn from whatever the server says is configured, so a
   provider without credentials is never a button that cannot work. Each one
   carries its own mark and nothing else: the marks are the only thing that
   tells them apart at a glance, so the row stays plain and lets them do it. */
.auth-social{display:grid;gap:12px}
.auth-social[hidden]{display:none}
.auth-or{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  color:var(--text-secondary);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
}
.auth-or::before,.auth-or::after{content:"";height:1px;background:var(--line)}
.sso-list{display:grid;gap:8px}
.sso{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px 16px;
  background:var(--canvas);border-radius:10px;
  /* a control has to be visible as a control: --line alone left the edge at
     1.3:1 against the button's own fill, under the 3:1 a non-text element needs */
  border:1px solid color-mix(in srgb, var(--line) 25%, var(--text-secondary));
  color:var(--text-primary);font:600 .95rem var(--font-b);cursor:pointer;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out);
}
.sso:hover{border-color:var(--text-primary);background:var(--wash)}
.sso:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sso:active{background:var(--wash)}
.sso[disabled]{opacity:.5;cursor:not-allowed}
.sso[disabled]:hover{border-color:color-mix(in srgb, var(--line) 25%, var(--text-secondary));background:var(--canvas)}
.sso svg{width:18px;height:18px;flex:none}
/* Apple and Microsoft ship one-colour marks, so they follow the text */
.sso-apple svg,.sso-microsoft-mono svg{fill:currentColor}
.sso-note{color:var(--text-secondary);font-size:.84rem;text-align:center}
.sso-note[hidden]{display:none}
.sso-note.is-bad{color:var(--accent-hover)}
.sso-busy{position:relative;color:transparent}
.sso-busy::after{
  content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
  border:2px solid var(--text-secondary);border-top-color:transparent;border-radius:50%;
  animation:sso-spin .7s linear infinite;
}
@keyframes sso-spin{to{transform:rotate(360deg)}}
.in-via{color:var(--text-secondary);font-size:.82rem;letter-spacing:.04em}

/* ---------- checking a withdrawal ----------
   One question, one answer. The rows say enough to confirm the document and
   nothing that identifies whoever is holding it. */
.vf-card{width:min(520px,100%)}
/* the shared sub-heading is pulled up 8px, which works under a one-line title and
   collides under a two-line one; this heading wraps on a phone */
.vf-card h1{line-height:1.2}
.vf-card .auth-sub{margin-top:10px}
.vf-form{display:grid;gap:16px;margin-top:22px}
.vf-form input{
  background:var(--canvas);border:1px solid var(--line);border-radius:10px;
  color:var(--text-primary);font:400 1.05rem var(--font-m);letter-spacing:.06em;
  padding:13px 14px;text-transform:uppercase;
  transition:border-color .25s var(--ease-out);
}
.vf-form input:focus{outline:none;border-color:var(--accent)}
.vf-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vf-out{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.vf-out[hidden]{display:none}
.vf-state{font-weight:600;display:flex;align-items:center;gap:10px}
.vf-state::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:var(--text-secondary)}
.vf-state.is-ok::before{background:var(--up)}
.vf-state.is-bad::before{background:var(--accent)}
.vf-rows{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:20px 0 0}
.vf-rows:empty{margin:0}
.vf-rows dt{color:var(--text-secondary);font-size:.86rem}
.vf-rows dd{text-align:right;color:var(--text-primary);font-size:.95rem}
.vf-note{color:var(--text-secondary);font-size:.82rem;line-height:1.6;margin-top:22px}