/*
 * Hand-written, and not built. A sign-in page for the estate does not need a bundler in its way:
 * nothing to npm install before the application runs, and nothing for `composer ci` to depend on.
 */
:root {
    --ground: #f2f5f5;
    --surface: #fff;
    --ink: #142023;
    --muted: #5d7176;
    --line: #d7e0e1;
    --teal: #0c8a6f;
    --clay: #a9532e;
}

* { box-sizing: border-box; }

body {
    margin: 0; min-height: 100vh; display: grid; place-items: center;
    background: var(--ground); color: var(--ink);
    font: 15px/1.5 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

.card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    padding: 32px; width: min(400px, calc(100vw - 32px));
}

h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em; }
.sub { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }
.note { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }

.error {
    color: var(--clay); font-size: 13.5px; background: #fbf3ef;
    border: 1px solid #eddcd3; border-radius: 6px; padding: 10px 12px; margin: 0 0 16px;
}

label { display: block; font-size: 13px; font-weight: 500; margin: 0 0 5px; }

input {
    font: inherit; width: 100%; padding: 9px 11px; margin: 0 0 16px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit;
}

button {
    font: inherit; font-weight: 500; width: 100%; padding: 9px 14px; cursor: pointer;
    border: 1px solid var(--teal); border-radius: 6px; background: var(--teal); color: #fff;
}

input:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* The chooser, shown only when somebody genuinely has more than one platform. */
.landings { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.landings a {
    display: block; text-decoration: none; color: inherit; font-weight: 500;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.landings a:hover { border-color: var(--teal); }
button.quiet { background: none; border-color: var(--line); color: var(--muted); font-weight: 400; }

/* Provider buttons on the sign-in screen, and the attach list once signed in. */
.provider {
    display: block; text-align: center; text-decoration: none; color: inherit; font-weight: 500;
    padding: 9px 14px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}
.provider:hover { border-color: var(--muted); }
h2.minor { font-size: 13px; font-weight: 600; margin: 24px 0 8px; }
.providers { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.providers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.providers .linked { color: var(--muted); }

/* Inline "Remove" affordances in the passkey list. */
button.link { font: inherit; font-size: 13.5px; background: none; border: 0; padding: 0; color: var(--clay); cursor: pointer; width: auto; }
.providers form { margin: 0; }

/* Recovery codes, printed and read off paper - so wide spacing and a monospace face. */
.codes { list-style: none; margin: 0 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.codes code { font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
input[readonly] { background: var(--ground); font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.row { display: flex; gap: 16px; margin: 0 0 20px; }

/*
 * The six-box code entry, on every screen that asks for a code.
 *
 * minmax(0, ...) rather than a bare 1fr, and it is load-bearing rather than defensive. A text
 * input's min-content width comes from its `size` attribute, which defaults to around twenty
 * characters, so a plain 1fr track cannot shrink below roughly 180px and six of them overflow
 * every phone ever made. The zero minimum is the whole of what lets the six divide the card.
 *
 * Monospace because a digit that changes width as it is typed makes a filled row look crooked.
 */
.digits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }

/* Without this, `display: grid` on the class beats the browser's own [hidden] rule and the boxes
   show before script has run - next to the plain field they exist to replace. */
.digits[hidden] { display: none; }

.digits input {
    margin: 0; padding: 12px 0; text-align: center; min-width: 0;
    font: 500 20px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Both a six-digit code and a recovery code are transcribed rather than composed. */
#code { font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; }

/* Something went right. Distinguished from .error by colour alone deliberately - the two never
   appear together, so the shape carries no meaning that the words do not already carry. */
.status {
    margin: 0 0 20px; padding: 9px 11px; font-size: 13.5px;
    border: 1px solid var(--teal); border-radius: 6px; color: var(--teal); background: var(--surface);
}

/*
 * The mark and the name, above every card. See layout.blade.php for why a sign-in page carrying
 * its own branding is not decoration.
 */
.brand {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin: 0 0 20px; font-weight: 600; font-size: 15px; color: var(--ink);
}
.brand img { display: block; }

/* A way out to somewhere established, which the page had none of. */
footer.site {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    margin: 22px auto 0; font-size: 12.5px; color: var(--muted);
}
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--ink); }