/* ------------------------------------------------------------------
   KycSolved Verify — the subject-facing journey.

   Its own sheet, and no Bootstrap. The console sheet is built around a
   sidebar and a data-dense desktop; this is one column on a phone that
   may be on two bars of signal, held by someone who did not ask to be
   here. Every byte is one they wait for.

   System fonts for the same reason: nothing to download, and the page
   looks native on the device it is being read on.
   ------------------------------------------------------------------ */

:root {
    --navy: #011e3c;
    --gold: #cf9202;
    --red: #c90000;
    --bg: #f5f5f9;
    --surface: #ffffff;
    --border: #e6e6ea;
    --text: #40404d;
    --muted: #767284;
    --radius: 0.75rem;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    font-size: 17px;               /* Phone-first: 17px is where iOS stops zooming inputs. */
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

 /* Light rather than navy. A logo arrives drawn for a white ground far more often than for
    a dark one, and a mark that has to be knocked out or boxed in white to sit on navy looks
    like a mistake on the one screen where the subject is deciding whether to trust us. */
.v-header {
    display: flex;
    align-items: center;
    background: var(--surface);
    color: var(--navy);
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 1.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Capped by height rather than width: logos arrive at every aspect ratio, and a header that
   grows to fit one of them pushes the step out of the first screenful on a phone. */
.v-header-logo {
    max-height: 2rem;
    max-width: 70%;
    width: auto;
    object-fit: contain;
    display: block;
}

.v-main {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 3rem;
}

.v-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

h1 {
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--navy);
    margin: 0 0 0.5rem;
}

h2 {
    font-size: 1rem;
    color: var(--navy);
    margin: 0 0 0.75rem;
}

p { margin: 0 0 0.85rem; }
p:last-child { margin-bottom: 0; }

.v-muted { color: var(--muted); }
.v-small { font-size: 0.9rem; }

label {
    display: block;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.35rem;
}

select {
    width: 100%;
    padding: 0.75rem 0.85rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23767284' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

select:disabled { background-color: var(--bg); color: var(--muted); }

select:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(1, 30, 60, 0.12);
}

.v-field { margin-bottom: 1.1rem; }

/* Gold ground, navy label — never the other way round. Gold on white is 2.70:1 and
   cannot carry text; navy on gold is 6.20:1 and can. */
button {
    width: 100%;
    padding: 0.9rem 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--navy);
    background: var(--gold);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}

button:disabled { opacity: 0.55; cursor: default; }

/* The second action on a capture page — "take it again" — must not compete with the one
   that moves the subject forward. */
button.v-secondary {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line, #d9dce1);
    font-weight: 500;
    margin-top: 0.6rem;
}

/* "Photo 2 of 3": the only progress indicator worth the space on a phone. */
.v-step {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

/* The camera target. Large on purpose: it is the one thing to press, it is being pressed
   one-handed, and a small tap target is how a subject ends up photographing the ceiling. */
.v-capture {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 9.5rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
    border: 2px dashed var(--line, #d9dce1);
    border-radius: 0.75rem;
    cursor: pointer;
}

.v-capture:active { background: var(--bg); }

.v-capture-icon { font-size: 2rem; line-height: 1; color: var(--navy); }

.v-capture-label { font-weight: 600; color: var(--navy); }

.v-preview { margin-bottom: 1rem; }

.v-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 0.5rem;
    background: #000;
}

.v-alert {
    background: #fdeaea;
    color: var(--red);
    border-radius: 0.5rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.v-qr {
    display: block;

    /* Big enough that each module is several device pixels on a monitor a phone is being
       held up to. 220px was not: a long handoff url is a dense symbol, and a camera at
       arm's length could not resolve the modules. */
    width: 300px;
    max-width: 82vw;
    height: auto;
    margin: 0.5rem auto 1rem;

    /* The quiet zone is drawn into the SVG, but a white card behind it guarantees the
       contrast a scanner looks for even if the page background ever changes. */
    background: #fff;
    padding: 0.75rem;
    border-radius: 0.75rem;
}

.v-qr svg {
    width: 100%;
    height: auto;
    display: block;

    /* No anti-aliasing on the module edges. A blurred boundary between black and white is
       exactly what a camera cannot threshold. */
    shape-rendering: crispEdges;
    image-rendering: pixelated;
}

.v-link {
    display: block;
    word-break: break-all;
    font-size: 0.82rem;
    color: var(--muted);
    background: var(--bg);
    border-radius: 0.5rem;
    padding: 0.6rem 0.7rem;
}

.v-notice {
    font-size: 0.85rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
    margin-top: 1.1rem;
    padding-top: 0.9rem;
}

.v-foot {
    text-align: center;
    font-size: 0.8rem;
    color: var(--muted);
    padding: 0 1.25rem 2rem;
}