/*
 * Copyright (c) 2026 Marknote Limited. All rights reserved.
 *
 * This file is part of Marknote Sync. Marknote is proprietary,
 * closed-source software: no licence is granted, and this file may not be
 * copied, distributed, modified or used in any other product without the
 * written permission of Marknote Limited. It is provided "as is", without
 * warranty of any kind, express or implied. Marknote is a trade mark of
 * Marknote Limited.
 */

/*
    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 */
    /* Interaction DARKENS the button; it used to lighten it.

       With white text that is not a style choice. Hover was accent-500
       (#f42b2b), lighter than rest, which drops white to 4.02:1 — below AA,
       and precisely while the pointer is on the control. Darkening instead
       keeps every state above it: 4.53:1 at rest, 5.44:1 hovered, 6.58:1
       pressed. Measured, not estimated. */
    --accent-hover: #d60000;  /* accent-700 */
    --accent-active: #be0000; /* accent-800 */
    --accent-prose: #a70000;  /* accent text on the page bg — AAA pair */
    --error-bg: #fef2f2;
    --error-text: #a70000;
    /* Carried over from app.css with the Keys/Denied/Enrol/ReAuth pages —
       the same values, so the two stylesheets cannot disagree about what a
       warning looks like. */
    --surface-2: #f0f0f2;
    --ok-bg: #e6f6ec;
    --ok-text: #1c5b33;
    --warn-bg: #fdf4e3;
    --warn-text: #8a5a11;
    --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;
        --surface-2: #24272d;
        --ok-bg: #16301f;
        --ok-text: #8fd6a8;
        --warn-bg: #332711;
        --warn-text: #f0cd8a;
        --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 lighthouse 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;
}

/* The shimmer: a light beam sweeping across the lighthouse — which is, after
   all, what a lighthouse does. The ::after paints a moving diagonal highlight
   and the SVG itself is the mask, so the sweep lights only the drawn glyph and
   never shows as a rectangle over the transparent ground. The wrapper exists
   because an <img> cannot carry a pseudo-element. */
.pane-art-frame {
    position: relative;
    display: block;
    width: 160px;
    margin: 0 auto;
}
.pane-art-frame .pane-art { margin: 0 0 20px; }
.pane-art-frame::after {
    content: "";
    position: absolute;
    inset: 0 0 20px;
    background: linear-gradient(115deg,
        transparent 32%,
        rgba(255, 255, 255, 0.75) 50%,
        transparent 68%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    -webkit-mask: url("img/lighthouse.svg") center / contain no-repeat;
    mask: url("img/lighthouse.svg") center / contain no-repeat;
    animation: lighthouse-shimmer 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes lighthouse-shimmer {
    0%   { background-position: 200% 0; }
    55%  { background-position: -150% 0; }
    100% { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pane-art-frame::after { animation: none; background: none; }
}

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); }
.notice.ok    { background: var(--ok-bg);    color: var(--ok-text); }
.notice.warn  { background: var(--warn-bg);  color: var(--warn-text); }

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

/* ---------------- ported from app.css ----------------
   Keys, Denied, Enrol and ReAuth moved onto this stylesheet so every door
   into the portal wears the same card. These are the pieces those pages
   need that the sign-in page never did; app.css keeps its own copies for
   the portal shell. */

button.secondary, .button.secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
    font-weight: 500;
    margin-top: 10px;
}

button.secondary:hover, .button.secondary:hover { background: var(--surface-2); }
button.secondary:active, .button.secondary:active { background: var(--surface-2); }

/* Recovery codes, and anything else meant to be read character by character. */
.codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 16px 0;
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
    font-size: 14px;
    letter-spacing: .04em;
}

.keys { list-style: none; margin: 0 0 20px; padding: 0; }

.keys li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.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; }
}