/*
 * The issuer's sign-in pages.
 *
 * One static stylesheet, no build step, no CDN and no inline styles, so the
 * login host can be served under a strict Content-Security-Policy. Light and
 * dark follow the operating system; there is no theme switch to remember
 * because there is no session to remember it in before sign-in.
 *
 * The design is the Smetko brand sheet: a parchment desk ruled with the faint
 * drafting grid the rest of the product uses, one square-cornered white sheet
 * on it, and the seal's brass underline carried across the sheet as a ledger
 * rule. That rule is the only loud element; everything else is hairlines,
 * navy ink and IBM Plex.
 *
 * Fonts are self-hosted under /identity/fonts (IBM Plex, SIL OFL 1.1 - see
 * fonts/LICENSE.txt). One file per family, weight and subset with a
 * unicode-range each, so a Macedonian visitor downloads Cyrillic and nobody
 * downloads both.
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-sans-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-sans-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
        U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-sans-400-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-sans-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-sans-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
        U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-sans-500-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ibm-plex-serif-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ibm-plex-serif-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
        U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ibm-plex-serif-600-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- tokens */

/*
 * Flat values rather than colour functions: the palette is fixed and these
 * pages have to render identically on whatever browser a shop has, so nothing
 * is gained by computing it at run time. The mix behind each value is noted,
 * and every text pair clears 4.5:1 (borders and the focus ring clear 3:1).
 */

:root {
    color-scheme: light dark;

    --desk: #f4f0e7; /* parchment */
    --desk-grid: #e7e4dd; /* navy 6% on parchment */
    --sheet: #ffffff;
    --ink: #15263f; /* navy */
    --muted: #5b6779; /* navy 70% on white, 5.7:1 */
    --rule: #c7cbd1; /* navy 24% */
    --field: #858e9b; /* navy 52%, 3.3:1 against the sheet */
    --primary: #2e6a4c; /* ledger green, 6.4:1 on the sheet */
    --primary-strong: #245740;
    --primary-text: #f4efe3; /* cream, 5.6:1 on the green */
    --brass: #c7a35c;
    --error: #9b1f1b;
    --error-bg: #f8efef;
    --error-rule: #d29a98;
    --status: #2e6a4c;
    --status-bg: #eaf0ed;
    --status-rule: #bccfc6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --desk: #1b2230; /* walnut navy */
        --desk-grid: #282e3b; /* cream 6% on the desk */
        --sheet: #232b3a;
        --ink: #f4efe3; /* cream */
        --muted: #abaaa8; /* cream 65%, 6.1:1 */
        --rule: #494e58; /* cream 18% */
        --field: #7b7d81; /* cream 42%, 3.5:1 against the sheet */
        --primary: #4e9a72;
        --primary-strong: #5fad83;
        --primary-text: #0f1a14;
        --brass: #d4b36f;
        --error: #e47c75;
        --error-bg: #32313f;
        --error-rule: #67474f;
        --status: #b2cdb6;
        --status-bg: #2b3f44;
        --status-rule: #355a52;
    }
}

/* ------------------------------------------------------------- the desk */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--desk);
    /* The drafting grid the rest of Smetko rules its documents with. */
    background-image:
        linear-gradient(to right, var(--desk-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--desk-grid) 1px, transparent 1px);
    background-size: 48px 48px;
    color: var(--ink);
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.page {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1.25rem;
    min-height: 100dvh;
    padding: 1.5rem;
}

/* ------------------------------------------------------------ the sheet */

.card {
    width: min(100%, 26rem);
    padding: 2.25rem 2rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
}

/* -------------------------------------------------- seal and ledger rule */

.brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
}

.seal {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
}

.wordmark {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/*
 * The seal's brass underline, continued across the sheet. The one loud mark on
 * the page; nothing else here is allowed to be brass.
 */
.ledger-rule {
    height: 2px;
    margin: 1.25rem 0 1.75rem;
    border: 0;
    background: var(--brass);
}

/* -------------------------------------------------------------- headings */

.title {
    margin: 0;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.subtitle {
    margin: 0.5rem 0 0;
    color: var(--muted);
}

.body {
    margin: 1rem 0 0;
}

/* -------------------------------------------------------- notice blocks */

.status,
.errors {
    margin: 1.25rem 0 0;
    padding: 0.75rem;
    border: 1px solid;
}

.status {
    background: var(--status-bg);
    border-color: var(--status-rule);
    color: var(--status);
}

.errors {
    background: var(--error-bg);
    border-color: var(--error-rule);
    color: var(--error);
}

.errors-title {
    margin: 0;
    font-weight: 500;
}

.errors ul {
    margin: 0.25rem 0 0;
    padding-left: 1.125rem;
}

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

form {
    margin-top: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
}

input + label {
    margin-top: 1.125rem;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--field);
    border-radius: 2px;
    background: var(--sheet);
    color: var(--ink);
    font-family: inherit;
    font-size: 1rem;
}

input::placeholder {
    color: var(--muted);
}

/* Keep the browser's autofill wash off the sheet. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    box-shadow: 0 0 0 100px var(--sheet) inset;
    caret-color: var(--ink);
}

/* The one-time code: digits read better monospaced and spaced apart. */
.code {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.2em;
    text-indent: 0.2em; /* offsets the trailing letter-space, so it stays centred */
}

.check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.125rem 0 0;
    font-size: 0.875rem;
    font-weight: 400;
}

.check input {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--primary);
}

/* --------------------------------------------------------------- buttons */

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    margin-top: 1.5rem;
    padding: 0 1rem;
    border: 0;
    border-bottom: 3px solid var(--brass);
    border-radius: 2px;
    background: var(--primary);
    color: var(--primary-text);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease;
}

button:hover {
    background: var(--primary-strong);
}

button.secondary {
    border: 1px solid var(--rule);
    background: var(--sheet);
    color: var(--ink);
}

button.secondary:hover {
    background: var(--desk);
}

button.link {
    display: inline;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

button.link:hover {
    background: none;
    color: var(--primary-strong);
}

.inline-form {
    margin-top: 1rem;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.actions form {
    flex: 1 1 9rem;
    margin-top: 0;
}

/* ----------------------------------------------------------------- lists */

/* Consent: what the client is asking for, one green check a line. */
.scopes {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.scopes li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

.scopes li svg {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--primary);
    transform: translateY(0.125rem);
}

/* ----------------------------------------------------------------- links */

a {
    color: var(--primary);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--primary-strong);
}

.foot {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--muted);
}

/* -------------------------------------------------------- language row */

.languages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    font-size: 0.8125rem;
}

.languages a {
    color: var(--muted);
    text-decoration: underline;
}

.languages a[aria-current="true"] {
    color: var(--ink);
    text-decoration: none;
}

/* ----------------------------------------------------------------- focus */

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 30rem) {
    .page {
        padding: 1rem;
    }

    .card {
        padding: 1.75rem 1.25rem;
    }

    .title {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}