/* AllowID company portal — the layer on top of the brand.
   ==========================================================================
   Loaded after /static/brand/brand.css, which carries the palette, Inter, and
   every primitive shared with the other surfaces. This file is only what is
   true about THIS portal.

   Light, and Standard density (--type-base 15px, the brand default) — the same
   pair the customer console uses. That is on purpose: this portal and the
   console are two halves of one experience, and a person crosses between them
   within about a minute of arriving. Two different-looking pages either side of
   a redirect read as a redirect that went somewhere unintended, which on a
   sign-up flow is the moment somebody stops.

   The one difference from the console is width. There is no navigation and no
   table here — one column, one form — so the page is centred and narrow rather
   than filling a 1240px working surface.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header

   Not sticky. The console's is, because it is a tool you scroll inside all day.
   This is one screen that does not scroll far, and a sticky bar on a short page
   only eats the top of it.
   -------------------------------------------------------------------------- */

header.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
header.top .bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .9rem 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
header.top .brandmark img { width: 2.2em; height: 2.2em; }
header.top .who {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: .84em;
  text-align: right;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .6rem;
}
header.top .who form { display: inline; }
header.top .who button { padding: .15rem .45rem; font-size: 12px; }

main { padding: 1.5rem; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1 { font-size: 1.47em; margin: 0 0 .3rem; font-weight: 650; letter-spacing: -.012em; }
h3 {
  font-size: .8em; margin: 0 0 .4rem; font-weight: 650;
  color: var(--ink-muted); text-transform: uppercase; letter-spacing: .07em;
}
p.lede { color: var(--ink-muted); margin: 0 0 1.4rem; max-width: 66ch; }
.note { font-size: .87em; color: var(--ink-muted); max-width: 66ch; }

/* --------------------------------------------------------------------------
   The column
   -------------------------------------------------------------------------- */

.auth { max-width: 560px; margin: 4vh auto; }
.auth.wide { max-width: 680px; }

.panel { padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; }

/* --------------------------------------------------------------------------
   Why there is not a single style="" attribute in the templates

   The CSP this portal sets is `style-src 'self'`, and that governs the style
   ATTRIBUTE as well as a <style> block — style-src-attr falls back to style-src,
   and neither a hash nor a nonce covers an attribute without 'unsafe-hashes'.
   So an inline style here is not a shortcut, it is a rule the browser silently
   drops: the page still renders, nothing is obviously broken, and the layout is
   simply the one you did not write. It shows up as a console error nobody reads
   and a QR code that has moved below its own caption.

   Every rule below exists because it started life as an attribute.
   -------------------------------------------------------------------------- */

/* A QR beside its explanation. Wraps to stacked on a narrow screen, which is
   most of them — .auth is 560px and the code alone is 220 of it. */
.qr-row { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-start; }
.qr-side { flex: 1 1 240px; min-width: 0; }

/* The margin collapses that a paragraph at the top or bottom of a panel needs. */
.first { margin-top: 0; }
.flush { margin: 0; }
.flush-bottom { margin: 0 0 .6rem; }

/* A refusal is read once, carefully, so it is set a little larger than body. */
.big { font-size: 16px; }

details summary.note { cursor: pointer; }

/* --------------------------------------------------------------------------
   The form

   Full-width fields in one column. A sign-up form is filled once, by somebody
   who has never seen it, often on a phone — so nothing is placed side by side
   except the two fields that genuinely belong together.
   -------------------------------------------------------------------------- */

form.panel label { display: block; margin-top: 1rem; }
form.panel label:first-of-type { margin-top: 0; }
form.panel input[type=text],
form.panel input[type=email],
form.panel select { width: 100%; }

.two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
.two label { margin-top: 1rem; }
.two input, .two select { width: 100%; }

.actions { margin-top: 1.4rem; align-items: flex-start; flex-direction: column; gap: .6rem; }

/* --------------------------------------------------------------------------
   The four steps (guide 8 §2)

   The same component as the console's onboarding checklist, and deliberately
   the same drawing: a customer sees it here first and again on the console's
   overview, and it should be recognisably the one list rather than two.

   The current step is marked with a word as well as a colour and a ring, so it
   survives a monochrome screen and a screen reader.
   -------------------------------------------------------------------------- */

ol.checklist { list-style: none; padding: 0; margin: 0 0 1.4rem; counter-reset: step; }
ol.checklist li {
  position: relative;
  padding: .6rem .8rem .6rem 3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: .4rem;
  background: var(--surface);
}
ol.checklist li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: .8rem; top: .6rem;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font: 600 .8em var(--font-mono);
}
ol.checklist li.done { background: var(--ok-bg); border-color: var(--ok-line); }
ol.checklist li.done::before {
  content: "✓"; background: var(--ok); color: var(--brand-white); border-color: var(--ok);
}
ol.checklist li.now { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
ol.checklist .what { font-weight: 600; display: block; }
ol.checklist .why { color: var(--ink-muted); font-size: .87em; }

/* --------------------------------------------------------------------------
   Small screens

   More likely here than on any other AllowID surface: the wallet is on a phone,
   and somebody who scans a QR with it often finishes the form on the same
   phone rather than walking back to a desk.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  header.top .bar { padding: .7rem 1rem; }
  main { padding: 1rem; }
  .auth { margin: 2vh auto; }
  .two { grid-template-columns: minmax(0, 1fr); gap: 0; }
}