/*
 * The 2027 look for signing in and up at id (look.css is the shared part).
 * Signing in and up (4.11.2026): access/login, sign-up, sign-up-finish, forgot-password, reset-password, two-factor-challenge, the guest layout (components/guest), and access/security whole (two-factor set-up, remembered devices, session length).
 * One session owns this sheet; other areas have their own (components/look-sheets).
 *
 * The owner disliked these pages beyond their colours (4.11.2026), so they were redone as flows: a split page - the
 * page's one dark panel on the left, saying what this is and three facts true of every sign-in; the form on the room
 * beside it, a readable column with one wide main button -, the signing-up steps as four blue bars over the heading,
 * the two-factor set-up on its own page (QR beside the key, the codes to copy or download), and Security once it is on
 * opening with the same dark panel. Blue is progress and links; no orange here (nothing on these pages waits on
 * anyone but the reader); red only for what was refused.
 */

/* The split (components/guest with `split`). */
.gs { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; background: light-dark(#ffffff, var(--canvas)); }
.gs-panel {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6);
    padding: 40px 48px; overflow: hidden; color-scheme: dark;
    background:
        radial-gradient(120% 70% at 0% 100%, rgb(36 83 232 / 0.22), transparent 60%),
        radial-gradient(60% 40% at 100% 0%, rgb(127 160 255 / 0.08), transparent 70%),
        var(--lk-panel);
    border-right: 1px solid var(--lk-panel-edge); color: #c7cbd3;
}
.gs-brand { display: flex; align-items: center; gap: var(--s-2); color: #ffffff; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.gs-brand .brand-mark { width: 12px; height: 12px; margin: 0 4px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 3px var(--lk-panel), 0 0 0 4px #4a505c; }
.gs-brand .env { margin-left: var(--s-1); color: #ffd7bd; background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.14); }
.gs-pitch { display: grid; gap: var(--s-6); max-width: 30rem; }
.gs-claim { margin: 0; color: #ffffff; font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.gs-facts { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.gs-facts li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-3); align-items: start; color: #9aa0ab; font-size: var(--fs-body); line-height: 1.5; }
.gs-facts b { display: block; color: #f2f3f5; font-weight: 600; }
.gs-facts .nav-icon { width: 36px; height: 36px; padding: 9px; border: 1px solid #2a2f3a; border-radius: 10px; background: rgb(255 255 255 / 0.03); color: var(--blue-on-black); }

.gs-room { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; padding: var(--s-5) 48px; }
.gs-who { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: var(--s-1) var(--s-3); color: var(--ink-3); font-size: var(--fs-caption); }
.gs-who b { color: var(--ink-2); font-weight: 500; }
.gs-who .btn-link { font-size: inherit; }
.gs-form { align-self: center; justify-self: center; width: 100%; max-width: 400px; padding: var(--s-7) 0; }
.gs-form.is-wide { max-width: 540px; }
.gs-head { margin-bottom: 28px; }
.gs-head h1 { font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.03em; }
.gs-lead { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.gs-foot { justify-self: center; padding-top: var(--s-4); }
.gs-foot a { color: var(--ink-3); }
.gs-foot a:hover { color: var(--ink); }

/* The form: roomy fields, one wide main button, the way elsewhere under a hairline. */
.gs-fields { display: grid; gap: 18px; }
.gs :is(input[type='text'], input[type='email'], input[type='password']) { height: 44px; font-size: 15px; }
.gs .field label { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.gs-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.gs-label-row a { color: var(--accent-ink); text-decoration: none; }
.gs-label-row a:hover { text-decoration: underline; }
.gs-go { width: 100%; height: 44px; font-size: 15px; font-weight: 600; }
.gs-alt { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-3); }
.gs-alt a, .gs-small-list a, .gs-fine a { color: var(--accent-ink); font-weight: 500; }
.gs-text { margin: 0 0 var(--s-5); color: var(--ink-2); font-size: 15px; }
.gs-fine { margin: 0; color: var(--ink-3); font-size: var(--fs-caption); line-height: 1.5; }
.gs-proven { background: var(--surface-2) !important; color: var(--ink-2) !important; }
/* A note (signed out by the clock, a link that no longer works, what just happened): neutral, its glyph blue. */
.gs .callout.gs-note { margin-bottom: var(--s-5); color: var(--ink-2); background: var(--surface-2); border-color: var(--line); }
.gs .callout.gs-note svg { color: var(--accent-ink); }
.gs .callout.callout-neg { margin-bottom: var(--s-5); }

/* A password's Show (js/sign-in.js). */
.pw { position: relative; }
.pw input { padding-right: 68px; }
.pw-reveal { position: absolute; top: 50%; right: 6px; height: 32px; padding: 0 10px; transform: translateY(-50%); border: 0; border-radius: 8px; background: transparent; color: var(--accent-ink); font: 600 var(--fs-caption)/1 var(--font); cursor: pointer; }
.pw-reveal:hover { background: var(--surface-2); }
.pw-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* The code: one big field, digits spaced, that takes a paste and sends itself at six. */
.gs input.code-input { height: 60px; padding: 0 12px; font: 600 1.625rem/1 var(--mono); letter-spacing: 0.42em; text-align: center; text-indent: 0.42em; }
.gs input.code-input::placeholder { color: var(--line-2); }
.gs-remember { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-control); cursor: pointer; }
.gs-remember:hover { border-color: var(--line-2); }
.gs-remember:has(input:checked) { border-color: var(--accent-ink); background: var(--accent-wash); }
.gs-remember:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.gs-remember input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--blue); }
.gs-remember b { display: block; font-weight: 600; }
.gs-remember b + span { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--fs-caption); line-height: 1.45; }
.gs-more { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.gs-more > summary { width: fit-content; color: var(--accent-ink); font-weight: 500; list-style: none; cursor: pointer; }
.gs-more > summary::-webkit-details-marker { display: none; }
.gs-more > summary:hover { text-decoration: underline; }
.gs-more[open] > summary { margin-bottom: var(--s-4); color: var(--ink); text-decoration: none; }

/* "Check your e-mail". */
.gs-mail { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-4); border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.gs-mail p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.gs-mail b { color: var(--ink); }
.gs-mail-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lk-panel); color: var(--blue-on-black); }
.gs-mail-icon .nav-icon { width: 20px; height: 20px; }
.gs-small-list { display: grid; gap: var(--s-1); margin: var(--s-4) 0 0; padding: 0; list-style: none; color: var(--ink-3); font-size: var(--fs-caption); }

/* Signing up's four steps: a bar each, blue as far as they have come. */
.su-steps { display: grid; grid-template-columns: repeat(4, auto); gap: 6px; margin: 0 0 28px; padding: 0; list-style: none; }
.su-steps li { display: flex; align-items: center; gap: 6px; min-width: 0; padding-top: 10px; border-top: 3px solid var(--line); color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.su-steps li.is-done, .su-steps li.is-now { border-top-color: var(--blue); }
.su-steps li.is-now { color: var(--ink); font-weight: 600; }
.su-num { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 10.5px; font-weight: 600; }
.su-steps li.is-now .su-num { border-color: var(--ink); }
.su-steps li.is-done .su-num { border: 0; color: var(--blue); }
.su-steps li.is-done .su-num svg { width: 18px; height: 18px; }
.su-label { overflow: hidden; text-overflow: ellipsis; }

/* Two-factor set-up (access/two-factor-setup). */
.tf-how { display: grid; gap: var(--s-3); margin: 0 0 var(--s-6); padding: 0; list-style: none; counter-reset: tf; }
.tf-how li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); color: var(--ink-2); line-height: 1.5; counter-increment: tf; }
.tf-how li::before { content: counter(tf); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lk-panel); color: #ffffff; font-size: 12px; font-weight: 600; }
.tf-how b { color: var(--ink); }
.tf-pair { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; margin-bottom: var(--s-5); padding: var(--s-5); border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.tf-qr { padding: 10px; border-radius: 12px; background: #ffffff; line-height: 0; box-shadow: 0 0 0 1px var(--line), 0 8px 24px -16px rgb(11 13 18 / 0.35); }
.tf-qr svg { width: 168px; height: 168px; }
.tf-key { display: grid; gap: var(--s-2); min-width: 0; }
.tf-apps { margin: 0 0 var(--s-2); color: var(--ink-3); font-size: var(--fs-caption); line-height: 1.5; }
.tf-key-label { margin: 0; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.tf-key-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.tf-key-value { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: 600 14px/1.3 var(--mono); letter-spacing: 0.08em; word-spacing: 0.2em; overflow-wrap: anywhere; user-select: all; }
.tf-open { color: var(--accent-ink); font-weight: 500; }
@media (hover: hover) and (min-width: 900px) { .tf-open { display: none; } }

/* Recovery codes - on the set-up's last step and on Security when asked for. */
.tf-codes { margin-bottom: var(--s-4); padding: var(--s-5); border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.card .tf-codes { max-width: 36rem; margin-bottom: 0; }
.tf-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--s-5); margin: 0; padding: 0; list-style: none; counter-reset: code; font: 500 14px/1.4 var(--mono); color: var(--ink); }
.tf-code-list li { display: flex; gap: 10px; min-width: 0; counter-increment: code; overflow-wrap: anywhere; }
.tf-code-list li::before { content: counter(code); flex: none; width: 1.2em; color: var(--ink-3); text-align: right; font-weight: 400; }
.tf-code-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--line-2); }
.gs .tf-codes + .gs-fine { margin-bottom: var(--s-5); }

/* Security once two-factor is on: the page's one dark panel says how they sign in. */
.sec-panel {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-4) var(--s-4); margin-bottom: var(--s-5); padding: var(--s-5) 28px;
    border: 1px solid var(--lk-panel-edge); border-radius: 16px; color: #c7cbd3; color-scheme: dark;
    background: radial-gradient(80% 120% at 100% 0%, rgb(36 83 232 / 0.18), transparent 60%), var(--lk-panel);
    box-shadow: 0 12px 32px -20px rgb(11 13 18 / 0.5);
}
.sec-shield { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #2a2f3a; border-radius: 12px; background: rgb(255 255 255 / 0.04); color: var(--blue-on-black); }
.sec-shield .nav-icon { width: 22px; height: 22px; }
.sec-what h2 { color: #ffffff; font-size: 1.25rem; letter-spacing: -0.015em; }
.sec-what p { max-width: 46rem; margin: var(--s-1) 0 0; color: #9aa0ab; line-height: 1.55; }
.sec-facts { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: var(--s-3) var(--s-7); margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--lk-panel-line); }
.sec-facts dt { color: #8f96a3; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.sec-facts dd { margin: 2px 0 0; color: #f2f3f5; font-weight: 500; overflow-wrap: anywhere; }
@container page (max-width: 640px) {
    .sec-panel { grid-template-columns: 1fr; padding: var(--s-5); }
    .sec-facts { grid-column: 1; grid-template-columns: 1fr; }
}

/* What they are buying, on every step of signing up from the price list: a small sheet above the form, beside it
   once the room is wide enough for both (the room is a container: the brand's panel takes the rest). */
.gs-room { container: room / inline-size; }
.gs-form.has-order { display: grid; gap: var(--s-5); align-content: start; }
.gs-order { padding: var(--s-4); border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); font-size: var(--fs-body); }
.gs-order-title { margin: 0 0 var(--s-3); color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.gs-order-lines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gs-order-lines li, .gs-order-total { display: flex; justify-content: space-between; gap: var(--s-3); }
.gs-order-lines li > :first-child { color: var(--ink-2); }
.gs-order-lines b { color: var(--ink); font-weight: 600; }
/* An add-on chosen with a product (../ADDONS.md): a smaller line under it. */
.gs-order-lines .gs-order-addon { font-size: var(--fs-caption); }
.gs-order-lines .gs-order-addon > :first-child { padding-left: var(--s-3); color: var(--ink-3); }
.gs-order-total { margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.gs-order-total b { font-size: 1.0625rem; letter-spacing: -0.01em; }
.gs-order-note { display: flex; gap: 6px; align-items: flex-start; margin: var(--s-3) 0 0; color: var(--ink-3); font-size: var(--fs-caption); line-height: 1.45; }
.gs-order-note svg { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--accent-ink); }
@container room (min-width: 640px) {
    .gs-form.has-order { max-width: 664px; grid-template-columns: minmax(0, 1fr) 224px; column-gap: 40px; }
    .gs-form.has-order > .gs-order { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: var(--s-5); margin-top: 32px; }
    .gs-form.has-order > .gs-main { grid-column: 1; grid-row: 1; }
}
@container room (min-width: 780px) {
    .gs-form.is-wide.has-order { max-width: 804px; grid-template-columns: minmax(0, 1fr) 224px; }
}
@container room (min-width: 640px) and (max-width: 779.98px) {
    .gs-form.is-wide.has-order { max-width: 540px; grid-template-columns: minmax(0, 1fr); }
    .gs-form.is-wide.has-order > .gs-order { grid-column: 1; grid-row: auto; position: static; margin-top: 0; }
    .gs-form.is-wide.has-order > .gs-main { grid-row: auto; }
}

/* Signing up's time, over its steps; why two-factor is asked, on its step. */
.su-time { margin: 0 0 var(--s-2); color: var(--ink-3); font-size: var(--fs-caption); }
.tf-why { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); align-items: start; margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-control); color: var(--ink-2); line-height: 1.5; }
.tf-why .nav-icon { width: 20px; height: 20px; margin-top: 1px; color: var(--accent-ink); }
.tf-why b { color: var(--ink); }

/* A phone, or a narrow window: the panel is a short band on top, the claim only. */
@media (max-width: 900px) {
    .gs { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .gs-panel { position: static; height: auto; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-5); border-right: 0; border-bottom: 1px solid var(--lk-panel-edge); }
    .gs-claim { font-size: 1.25rem; max-width: none; }
    .gs-facts { display: none; }
    .gs-room { padding: var(--s-4); }
    .gs-form { align-self: start; padding: var(--s-5) 0 var(--s-6); }
    .gs-head h1 { font-size: 1.5rem; }
}
@media (max-width: 520px) {
    .su-steps { display: flex; }
    .su-steps li { flex: 0 0 34px; }
    .su-steps li.is-now { flex: 1 1 auto; }
    .su-steps li:not(.is-now) .su-label { display: none; }
    .tf-pair { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .tf-key { justify-items: center; }
    .tf-code-list { grid-template-columns: 1fr; }
}