/* =====================================================================
   SkyRock Logbooks — the styled front door (/logbooks/login + /register).

   SELF-CONTAINED, like the landing (logbooks-landing/styles.css) and for
   the same reason: this surface's ground is the Logbooks system — one
   white sheet floating on the cosmos — and borrowing the /welcome auth
   stylesheet (a dark-metal system) would mean overriding a theme into
   its opposite, selector by selector.

   The FORMS here are the /welcome forms: same field names, same client
   bundles (/components/login|register/index.js), same POST targets.
   Only the room they stand in is Logbooks'. Tokens mirror
   components/logbooks/logbooks.css — the measured ink ladder included
   (do not re-pick these by eye). `lba-` namespace throughout.
   ===================================================================== */

:root {
    --lba-cosmos: #0b0e1a;
    --lba-sheet: #ffffff;
    --lba-tray: #f7f7f7;
    --lba-line: #e4e4e4;
    --lba-line-strong: #d2d2d2;

    /* Ink (the app's ladder, measured on its hardest ground) */
    --lba-text: #232731;
    --lba-muted: #3f454f;
    --lba-subtle: #545a63;
    --lba-gold-ink: #7a5e17;

    --lba-on-dark: #FFF6F6;
    --lba-on-dark-muted: rgba(255, 255, 255, 0.76);

    --lba-accent: #3C486B;
    --lba-accent-hover: #2e3a56;
    --lba-gold: #c2a35a;
    --lba-gold-soft: rgba(194, 163, 90, 0.40);
    --lba-silver-grad: linear-gradient(-145deg, #f4f4f4, #e0e0e0, #fcfcfc, #d8d8d8, #eeeeee);
    --lba-plate: linear-gradient(145deg, #5a6068 0%, #34383f 38%, #23272d 55%, #444a52 78%, #2b2f35 100%);

    --lba-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lba-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --lba-r-md: 10px;
    --lba-r-lg: 14px;
    --lba-sh-sheet: 0 2px 6px rgba(5, 8, 18, 0.20), 0 22px 60px rgba(5, 8, 18, 0.40);
    --lba-ring: 0 0 0 3px var(--lba-gold-soft);
    --lba-dur: 0.16s;
}

html, body { margin: 0; padding: 0; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centered on tall screens; `safe` keeps the top reachable when the sheet
       is taller than the viewport (a plain `center` clips both ends), and a
       browser without `safe` ignores the line and stays top-flowed. */
    justify-content: safe center;
    color: var(--lba-text);
    font-family: var(--lba-font);
    font-size: 0.95rem;
    line-height: 1.55;
    background-color: var(--lba-cosmos);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 24px 16px 48px;
    box-sizing: border-box;
}
/* Each door gets its own Webb cosmos (2026-08-21, owner) — fixed per page,
   never user-selectable here; only the workspace has a picker. The visible
   credit sits in .lba-foot of each page. The gradient keeps the doorway
   readable over each image's bright core. */
body.lba-login {
    /* M82, the Cigar Galaxy (Webb + Hubble) — NASA, ESA, CSA, STScI */
    background-image:
        linear-gradient(180deg, rgba(11, 14, 26, 0.30), rgba(11, 14, 26, 0.72)),
        url('/components/files/images/m82-webb-hubble.webp');
}
body.lba-register {
    /* Terzan 5, bulge fossil fragment (Webb + Hubble) — NASA, ESA, CSA, STScI */
    background-image:
        linear-gradient(180deg, rgba(11, 14, 26, 0.30), rgba(11, 14, 26, 0.72)),
        url('/components/files/images/terzan-5-webb-hubble.webp');
}
*, *::before, *::after { box-sizing: inherit; }

a { color: inherit; text-decoration: none; }

/* ---- top row: the brand back to the landing, and the language switcher ---- */
.lba-top {
    width: 100%;
    max-width: 30rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 2px 22px;
}
.lba-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--lba-on-dark); }
.lba-brand-plate {
    width: 3.6rem; height: 1.8rem; flex: 0 0 auto; display: inline-block; border-radius: 8px;
    background-image: url('/components/files/icons/OfficialSkyRockWhiteLogo.svg'), var(--lba-plate);
    background-size: auto 1.46rem, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 1px 3px rgba(10, 12, 16, 0.40), inset 0 -1px 0 rgba(255, 255, 255, 0.30), inset 0 1px 0 rgba(0, 0, 0, 0.35);
}
.lba-brand-text { display: flex; flex-direction: column; line-height: 1.05; font-weight: 700; letter-spacing: 0.04em; }
.lba-brand-sub { color: rgba(255, 255, 255, 0.52); font-size: 0.6rem; letter-spacing: 0.18em; font-weight: 400; text-transform: uppercase; margin-top: 2px; }
.lba-lang { display: inline-flex; }

/* ---- the sheet ---- */
.lba-sheet {
    width: 100%;
    max-width: 30rem;
    background: var(--lba-sheet);
    border-radius: var(--lba-r-lg);
    box-shadow: var(--lba-sh-sheet);
    padding: 26px 28px 24px;
    position: relative;
    overflow: hidden;
}
/* The Logbooks signature: the boundary module's gold rule, worn as the
   sheet's top edge. */
.lba-sheet::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--lba-gold), var(--lba-gold-soft), transparent);
}

.lba-eyebrow {
    margin: 0 0 2px;
    font-family: var(--lba-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lba-gold-ink);
}
.lba-title { margin: 0 0 4px; font-size: 1.45rem; line-height: 1.2; font-weight: 700; }
.lba-lead { margin: 0 0 18px; color: var(--lba-subtle); font-size: 0.86rem; }

/* ---- form ---- */
.lba-form { display: flex; flex-direction: column; gap: 12px; }
.lba-form input[type="text"],
.lba-form input[type="email"],
.lba-form input[type="password"],
.lba-form input[type="date"],
.lba-form select {
    width: 100%;
    font: inherit;
    color: var(--lba-text);
    background: var(--lba-sheet);
    border: 1px solid var(--lba-line-strong);
    border-radius: var(--lba-r-md);
    padding: 0.62rem 0.75rem;
    transition: border-color var(--lba-dur) ease, box-shadow var(--lba-dur) ease;
}
.lba-form input::placeholder { color: var(--lba-subtle); }
.lba-form input:focus, .lba-form select:focus {
    outline: none;
    border-color: var(--lba-gold);
    box-shadow: var(--lba-ring);
}

.lba-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lba-row > p { margin: 0; color: var(--lba-muted); font-size: 0.86rem; }
.lba-row input, .lba-row select { width: auto; flex: 1 1 55%; }

.lba-submit {
    margin-top: 6px;
    font: inherit; font-weight: 700;
    color: var(--lba-text);
    background: var(--lba-silver-grad);
    border: 1px solid var(--lba-line-strong);
    border-radius: var(--lba-r-md);
    padding: 0.68rem 1rem;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(8, 12, 24, 0.10);
    transition: filter var(--lba-dur) ease, box-shadow var(--lba-dur) ease;
}
.lba-submit:hover { filter: brightness(1.03); box-shadow: 0 2px 6px rgba(8, 12, 24, 0.16); }
.lba-submit:focus-visible { outline: none; box-shadow: var(--lba-ring); }

/* ---- the quiet lines under the form ---- */
.lba-links { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lba-line); display: flex; flex-direction: column; gap: 6px; }
.lba-links p { margin: 0; color: var(--lba-subtle); font-size: 0.85rem; }
.lba-links a { color: var(--lba-accent); font-weight: 600; }
.lba-links a:hover { color: var(--lba-accent-hover); text-decoration: underline; }
.lba-links .lba-inline { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }

/* password guidance (the register bundle drives #pwHint / .is-valid) */
.pw-hint { display: flex; align-items: center; gap: 8px; margin: -4px 0 0; color: var(--lba-subtle); font-size: 0.8rem; }
.pw-hint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lba-line-strong); flex: 0 0 auto; transition: background var(--lba-dur) ease; }
.pw-hint.is-valid { color: var(--lba-gold-ink); }
.pw-hint.is-valid .pw-hint-dot { background: var(--lba-gold); }

.lba-check { display: flex; align-items: flex-start; gap: 10px; color: var(--lba-muted); font-size: 0.85rem; }
.lba-check input { margin-top: 3px; accent-color: var(--lba-accent); }
.lba-check a { color: var(--lba-accent); font-weight: 600; }
.lba-check a:hover { text-decoration: underline; }

.lba-privacy { margin: 0; color: var(--lba-subtle); font-size: 0.78rem; }
.lba-privacy a { color: var(--lba-accent); }
.lba-privacy a:hover { text-decoration: underline; }

.register-captcha { display: flex; justify-content: center; margin-top: 4px; }

/* ---- alert (the shared login/register bundles drive these ids) ---- */
.alertContainer {
    display: none;
    position: fixed; inset: 0; z-index: 60;
    align-items: center; justify-content: center;
    background: rgba(8, 10, 20, 0.55);
    padding: 16px;
}
.alert {
    width: 100%; max-width: 24rem;
    background: var(--lba-sheet);
    border-radius: var(--lba-r-lg);
    box-shadow: var(--lba-sh-sheet);
    overflow: hidden;
}
.alert-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: var(--lba-tray);
    border-bottom: 1px solid var(--lba-line);
}
.alert-header p { margin: 0; font-family: var(--lba-mono); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--lba-gold-ink); }
.alert-header button {
    font: inherit; line-height: 1; color: var(--lba-subtle);
    background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.alert-header button:hover { color: var(--lba-text); background: var(--lba-line); }
.separator { display: none; }
.alert-message { padding: 14px 16px 16px; }
.alert-message-title { margin: 0 0 4px; font-weight: 700; }
.alert-message-content { margin: 0; color: var(--lba-muted); font-size: 0.88rem; }

/* ---- terms modal (the register bundle drives these ids) ---- */
.terms-modal {
    position: fixed; inset: 0; z-index: 70;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 10, 20, 0.55);
    padding: 16px;
}
.terms-modal[hidden] { display: none; }
.terms-modal-card {
    width: 100%; max-width: 38rem; max-height: 82vh;
    display: flex; flex-direction: column;
    background: var(--lba-sheet);
    border-radius: var(--lba-r-lg);
    box-shadow: var(--lba-sh-sheet);
    padding: 18px 20px;
}
.terms-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.terms-modal-title { margin: 0; font-weight: 700; }
.terms-modal-close { font: inherit; font-size: 1.2rem; line-height: 1; background: none; border: none; color: var(--lba-subtle); cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.terms-modal-close:hover { color: var(--lba-text); background: var(--lba-line); }
.terms-modal-date { margin: 2px 0 0; color: var(--lba-subtle); font-size: 0.8rem; }
.terms-modal-body {
    margin: 12px 0; padding: 12px;
    flex: 1 1 auto; overflow: auto;
    white-space: pre-wrap; word-break: break-word;
    font-family: inherit; font-size: 0.85rem; color: var(--lba-muted);
    background: var(--lba-tray); border: 1px solid var(--lba-line); border-radius: var(--lba-r-md);
}
.terms-modal-actions { display: flex; justify-content: flex-end; }
.terms-modal-actions button {
    font: inherit; font-weight: 700; color: var(--lba-text);
    background: var(--lba-silver-grad);
    border: 1px solid var(--lba-line-strong); border-radius: var(--lba-r-md);
    padding: 0.5rem 1rem; cursor: pointer;
}

/* ---- footing ---- */
.lba-foot { margin-top: 20px; color: var(--lba-on-dark-muted); font-size: 0.78rem; text-align: center; }
.lba-foot a { color: var(--lba-on-dark); font-weight: 600; }
.lba-foot a:hover { text-decoration: underline; }
/* The image credit: quieter than the foot links, present on purpose. */
.lba-credit { margin-top: 6px; font-size: 0.68rem; color: rgba(255, 255, 255, 0.45); }
.lba-credit a { color: rgba(255, 255, 255, 0.60); font-weight: 400; }
.icons8Ref { display: none; }

@media (max-width: 30rem) {
    .lba-sheet { padding: 20px 18px 18px; }
    .lba-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .lba-row input, .lba-row select { width: 100%; flex: 1 1 auto; }
}