/* ============================================================
   second-step.css: the second step of signing in (ST-2692)

   Geometry and the few things the shared login card does not have. Colours
   come from the portal's own variables and the canonical tokens, never a new
   hex. No borders: separation is whitespace and tone (design/05). The picture
   has the image radius, 5px (design/05).
   ============================================================ */

.ss-card { max-width: 440px; }

.ss-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
.ss-head .login-title { margin-bottom: 0; font-size: 22px; }

/* The (i): a 44 by 44 target (design/10), read as a button by a screen reader. The icon sits
   where it did in a 28px box; the negative margin gives the finger the rest without moving
   anything. */
.ss-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -8px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--fg-dim);
    font-size: 16px;
    cursor: pointer;
}
.ss-info:hover { color: var(--link); }
.ss-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Dark modules on a light square, in both themes: a phone must read it. */
.ss-qr {
    display: flex;
    justify-content: center;
    margin: 8px 0 16px;
}
.ss-qr svg {
    width: 208px;
    height: 208px;
    border-radius: 5px;
}
.ss-qr .ss-qr-bg { fill: var(--thx-color-white); }
.ss-qr .ss-qr-ink { fill: var(--thx-color-threshold-blue); }

.ss-center { text-align: center; }

.ss-key {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.ss-key code {
    font-family: var(--thx-font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--fg-bright);
    word-break: break-all;
}

.ss-codes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.ss-codes code {
    display: block;
    padding: 12px;
    background: var(--bg-card-elevated);
    border-radius: 5px;
    text-align: center;
    font-family: var(--thx-font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--fg-bright);
}

.ss-row {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

/* The tick row is a 44px target; the negative margin keeps the row where it was. */
.ss-check label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: -10px 0;
    font-size: 15px;
    color: var(--fg);
    cursor: pointer;
}
.ss-check input[type="checkbox"] { width: 18px; height: 18px; }

/* A link under the card is a 44px target: the text stays where it was, the box reaches
   into the space around it. Two in a row need 24px between them so the boxes do not meet. */
.ss-links {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
}
.ss-links + .ss-links { margin-top: 24px; }
.ss-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -12px 0;
    padding: 0 12px;
    color: var(--link);
}

/* Buttons and fields on these pages are 44px tall (design/10), not the house 40px. The hint in
   the code field is read at the same strength as the label above it. */
.ss-card .btn,
.ss-card .form-input { min-height: 44px; }
.ss-card .form-input::placeholder { opacity: 1; }

/* The remembered computers: rows separated by tone and space, no lines. */
.ss-comps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ss-comp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card-elevated);
    border-radius: var(--radius);
}
.ss-comp__name { font-size: 16px; color: var(--fg-bright); font-weight: 600; }
.ss-comp__meta { font-size: 14px; color: var(--fg-dim); }
.ss-comp__here { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--fg-bright); }
.ss-empty { text-align: center; color: var(--fg-dim); margin-bottom: 8px; }

#pe-twostep[hidden] { display: none; }