/*
    The admin portal's front door, in the marknote.md brand.

    A separate stylesheet from app.css on purpose: the sign-in page is the one
    piece of this portal an attacker can see without a key, and the one piece
    a legitimate operator sees before trusting it — so it wears the same face
    as marknote.md and the consumer sign-in (see the sync API's account.css,
    whose tokens these mirror). The working portal behind the door keeps its
    own utilitarian skin.

    Same posture as app.css: no CDN, no webfont fetch, nothing off-origin —
    design doc 06 §7's strict CSP. The font and icons are static files on this
    host, same trust boundary as this stylesheet.
*/

@font-face {
    font-family: "Red Hat Display";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("fonts/red-hat-display-variable.woff2") format("woff2");
}

:root {
    color-scheme: light dark;

    --bg: #fafafb;            /* ink-base */
    --surface: #ffffff;       /* ink-card */
    --text: #18181b;          /* ink-text */
    --muted: #52525b;         /* ink-dim */
    --line: #e5e7eb;          /* ink-line */
    --accent: #ee0000;        /* accent-600 — backgrounds only, never text */
    --accent-hover: #f42b2b;
    --accent-active: #d60000;
    --accent-text: #0e0f12;   /* text on an accent background, fixed dark */
    --accent-prose: #a70000;  /* accent text on the page bg — AAA pair */
    --error-bg: #fef2f2;
    --error-text: #a70000;
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e0f12;
        --surface: #1c1f24;
        --text: #e7e9ee;
        --muted: #9ea3ae;
        --line: #2a2d33;
        --accent-prose: #fa8f8f;
        --error-bg: #3a1d1d;
        --error-text: #fa8f8f;
        --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle, rgba(238, 0, 0, 0.13) 1px, transparent 1.5px) 0 0 / 24px 24px,
        var(--bg);
    color: var(--text);
    font: 15px/1.5 "Red Hat Display", "Segoe UI", system-ui, -apple-system, sans-serif;
}

::selection { background: rgba(238, 0, 0, 0.3); }

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent-prose);
    outline-offset: 2px;
    border-radius: 6px;
}

a {
    color: var(--accent-prose);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- the split card ---- */

.card.split {
    width: 100%;
    max-width: 880px;
    /* The pane holds one button, which alone would shrink-wrap the card to a
       banner and drive the hero art up into the headline. Held height gives
       the copy air and the shapes the bottom edge they crop against. */
    min-height: min(480px, calc(100vh - 48px));
    display: flex;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
}

.hero {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 40px;
    border-right: 1px solid var(--line);
    background:
        linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--bg);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom left, var(--bg) 35%, transparent 90%);
    pointer-events: none;
}

.hero > * { position: relative; }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.brand img { display: block; }

.brand .tag {
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hero-copy { margin: 48px 0 auto; max-width: 36ch; }

.hero-copy h1 {
    margin: 0 0 12px;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hero-copy p {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}

.hero-art {
    position: absolute;
    inset: auto auto 0 0;
    width: 100%;
    height: 220px;
    pointer-events: none;
}

.art-disc {
    position: absolute;
    bottom: -34px;
    left: 118px;
    width: 110px;
    height: 190px;
    border-radius: 55px 55px 0 0;
    background: rgba(238, 0, 0, 0.13);
}

.art-ring {
    position: absolute;
    bottom: -110px;
    left: 205px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 30px solid rgba(238, 0, 0, 0.09);
}

.art-leaf {
    position: absolute;
    bottom: -26px;
    left: -30px;
    width: 140px;
    height: 140px;
    background: rgba(238, 0, 0, 0.20);
    border-radius: 50% 50% 0 50%;
    transform: rotate(-15deg);
}

.pane {
    width: 400px;
    flex-shrink: 0;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pane h2 {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 600;
}

/* The security-key illustration above the sign-in heading. Decorative
   (empty alt); sized in the markup so the layout doesn't jump on load. */
.pane-art {
    display: block;
    margin: 0 auto 20px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--muted);
}

input[type="email"],
input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
}

input:focus-visible { outline-offset: 1px; }

.lede {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--muted);
}

button, .button {
    display: block;
    width: 100%;
    padding: 11px;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    /* White on the accent here, by the owner's call — the admin doors read
       better with it, and they have no theme toggle to complicate the pair. */
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(238, 0, 0, 0.35), 0 8px 32px rgba(238, 0, 0, 0.15);
    transition: background 150ms ease, transform 100ms ease;
}

button:hover, .button:hover { background: var(--accent-hover); }
button:active, .button:active { background: var(--accent-active); transform: scale(0.98); }

button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    button, .button { transition: none; }
    button:active, .button:active { transform: none; }
}

.notice {
    padding: 10px 12px;
    margin-bottom: 16px;
    border-radius: 6px;
    font-size: 14px;
}

.notice.error { background: var(--error-bg); color: var(--error-text); }

.muted { color: var(--muted); font-size: 13px; }

.note {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

/* Narrow windows: the hero shrinks to a masthead, the button follows. */
@media (max-width: 760px) {
    .card.split { flex-direction: column; }

    .hero {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 24px 28px 22px;
        background: var(--bg);
    }

    .hero-copy { margin: 16px 0 0; }
    .hero-copy h1 { font-size: 24px; }
    .hero-art { display: none; }

    .pane { width: auto; padding: 28px 24px; }
}