/* login.css — staff sign-in (design "1a · Horizon grid").

   The brand statement over a ledger grid that recedes to the horizon; the
   form on a lit panel to the right.  On a phone the statement gives way and
   the panel is the page.

   Tokens and the sv- buttons come from sieve_shell.css, which the page links
   first.  Markup: templates/account/login.html.  Bump the ?v= there after
   editing. */

html, body.lg { height: 100%; }
body.lg {
    margin: 0; min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: hidden;
    font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(900px 620px at 12% -5%, var(--color-accent-900), transparent 70%),
        var(--color-bg);
}
.lg a { color: var(--color-accent-300); text-decoration: none; }
.lg a:hover { color: var(--color-accent-200); }

/* The ledger grid, tipped back until it reads as a floor.

   It is drawn wider than the window and a little below it, so that tipped
   back it still reaches both sides. It hung off the page itself, which made
   the page 6% taller than the window (an empty scroll below the panel) and
   much wider (a phone could be dragged sideways). Now the frame is pinned to
   the window and clips it, so nothing of it counts towards the page's size. */
.lg__grid { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.lg__grid::before {
    content: ""; position: absolute; left: -30%; right: -30%; bottom: -6%; height: 58%;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-accent) 26%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 26%, transparent) 1px, transparent 1px);
    background-size: 72px 72px;
    transform: perspective(520px) rotateX(66deg); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 75%);
    mask-image: linear-gradient(to bottom, transparent, #000 75%);
}

/* Clipped: the brand and the panel rise into place as the page opens, and
   while they were still on their way up the page was taller than the window,
   so a scrollbar came and went. The frame grows with what is in it, so
   nothing that stays is ever cut off. */
.lg__wrap { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) 520px; overflow: clip; }

/* ── Brand ───────────────────────────────────────────────────────────── */
.lg__brand { padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-width: 0; animation: sv-rise .9s var(--sv-ease) both; }
.lg__mark { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-neutral-300); }
.lg__mark > span {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 18px;
    color: var(--color-accent-300);
    box-shadow: inset 0 0 0 1px var(--color-accent), 0 0 24px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.lg__pitch { display: flex; flex-direction: column; gap: 20px; margin-bottom: clamp(48px, 14vh, 180px); }

/* ── The building ────────────────────────────────────────────────────────
   Five translucent floor plates stacked in 3D, each a row of units lit by
   status, in the manner of the Building View.  Decoration: the statuses are
   made up.  Everything that moves does so by transform or opacity, so the
   compositor carries it; nothing here is laid out twice. */
.lg-twin {
    flex: 1 1 0; min-height: 0; max-height: 460px; display: grid; place-items: center;
    perspective: 1400px; pointer-events: none;
    /* Every length below is a multiple of --u, one hundredth of the
       building's width, which follows the height there is to draw in: the
       stack always fits between the mark above it and the statement below. */
    container-type: size; --u: min(3px, .74cqh);
    background: radial-gradient(46% 52% at 50% 60%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 72%);
}
.lg-twin__b {
    position: relative; width: calc(100 * var(--u)); height: calc(31 * var(--u)); flex: none;
    /* The stack rises from its ground floor, so the whole is set lower. */
    margin-top: calc(66 * var(--u));
    transform-style: preserve-3d; transform: rotateX(60deg) rotateZ(-40deg);
    animation: lg-sway 22s ease-in-out infinite alternate; will-change: transform;
}
@keyframes lg-sway { to { transform: rotateX(58deg) rotateZ(-30deg); } }
.lg-twin__f {
    position: absolute; inset: 0; padding: calc(2.3 * var(--u)); border-radius: 4px; transform-style: preserve-3d;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(1.7 * var(--u));
    transform: translateZ(calc(var(--i) * 20 * var(--u)));
    background: color-mix(in srgb, var(--color-accent-900) 82%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 60%, transparent);
    animation: lg-floor 1.1s var(--sv-ease) both; animation-delay: calc(var(--i) * 110ms + .25s);
}
@keyframes lg-floor { from { opacity: 0; transform: translateZ(calc(var(--i) * 20 * var(--u) + 170px)); } }
.lg-twin__f:nth-child(1) { --i: 0; }
.lg-twin__f:nth-child(2) { --i: 1; }
.lg-twin__f:nth-child(3) { --i: 2; }
.lg-twin__f:nth-child(4) { --i: 3; }
.lg-twin__f:nth-child(5) { --i: 4; }
/* The two faces of each plate that the eye can see. */
.lg-twin__f::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(3.7 * var(--u)); transform-origin: bottom; transform: rotateX(90deg); background: var(--color-accent-800); }
.lg-twin__f::after  { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(3.7 * var(--u)); transform-origin: left; transform: rotateY(90deg); background: var(--color-accent-900); }
.lg-twin__f > i {
    --st: var(--st-paid); border-radius: 3px;
    background: oklch(var(--st) / .26);
    box-shadow: inset 0 0 0 1px oklch(var(--st) / .9), 0 0 14px oklch(var(--st) / .42);
}
.lg-twin__f > i[data-st="partial"] { --st: var(--st-partial); }
.lg-twin__f > i[data-st="overdue"] { --st: var(--st-overdue); }
.lg-twin__f > i[data-st="due"]     { --st: var(--st-due); }
.lg-twin__f > i[data-st="vacant"] {
    background: color-mix(in srgb, var(--color-neutral-700) 14%, transparent);
    box-shadow: inset 0 0 0 1px var(--color-neutral-800);
}
/* A unit or two settling up, now and then. */
.lg-twin__f > i[data-st="partial"], .lg-twin__f > i[data-st="overdue"] { animation: lg-pulse 5.5s ease-in-out infinite; }
.lg-twin__f:nth-child(odd) > i[data-st="partial"] { animation-delay: 2.2s; }
@keyframes lg-pulse { 0%, 62%, 100% { opacity: 1; } 78% { opacity: .35; } }
/* No room for it above the statement in a short window. */
@media (max-height: 780px) { .lg-twin { display: none; } }
.lg__pitch h1 { margin: 0; font-size: clamp(44px, 5.3vw, 76px); line-height: 1.02; letter-spacing: -0.035em; }
.lg__pitch em { font-style: normal; color: var(--color-accent-400); text-shadow: 0 0 40px color-mix(in srgb, var(--color-accent) 50%, transparent); }
.lg__pitch p { margin: 0; max-width: 440px; font-size: 16px; color: var(--color-neutral-400); text-wrap: pretty; }

/* ── Panel ───────────────────────────────────────────────────────────── */
.lg__side { position: relative; padding: 28px 28px 28px 0; display: flex; }
.lg__panel {
    position: relative; flex: 1; overflow: hidden; border-radius: 16px; padding: 40px 56px;
    display: flex; flex-direction: column; justify-content: center; gap: 18px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-surface) 92%, transparent),
        color-mix(in srgb, var(--color-bg) 90%, transparent));
    box-shadow: var(--shadow-md);
    animation: sv-rise .9s .1s var(--sv-ease) both;
}
/* A line of light along the top edge. */
.lg__panel::before {
    content: ""; position: absolute; top: 0; left: 48px; right: 48px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    box-shadow: 0 0 24px var(--color-accent);
}
.lg__eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-300); }
.lg__eyebrow > span { width: 16px; height: 2px; background: var(--color-accent); }
.lg__panel h2 { margin: 0; font-size: 36px; }
.lg__sub { margin: -10px 0 4px; font-size: 14px; color: var(--color-neutral-400); }
.lg__tall { height: 44px; }
.lg .sv-btn-secondary { color: var(--color-text) !important; }

.lg__or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--color-neutral-500); }
.lg__or > span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--color-divider)); }
.lg__or > span:last-child { background: linear-gradient(90deg, var(--color-divider), transparent); }

.lg__error {
    display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
    background: oklch(var(--st-overdue) / .1); box-shadow: inset 0 0 0 1px oklch(var(--st-overdue) / .35);
    color: oklch(0.86 0.09 22);
}
.lg__error > i { flex: none; margin-top: 2px; font-size: 16px; }

.lg__form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.lg-field { display: flex; flex-direction: column; gap: 6px; }
.lg-field > label { margin: 0; font-size: 12px; color: var(--color-neutral-400); }
.lg-field__box {
    display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 8px;
    background: color-mix(in srgb, var(--color-bg) 70%, transparent);
    box-shadow: inset 0 0 0 1px var(--color-neutral-800);
    transition: box-shadow .2s;
}
.lg-field__box > i { flex: none; font-size: 16px; color: var(--color-neutral-500); transition: color .2s; }
.lg-field__box:hover { box-shadow: inset 0 0 0 1px var(--color-neutral-700); }
.lg-field__box:focus-within { box-shadow: inset 0 0 0 1px var(--color-accent), 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent); }
.lg-field__box:focus-within > i { color: var(--color-accent-300); }
.lg-field__box input {
    flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none;
    font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
}
.lg .lg-field__box input:focus, .lg .lg-field__box input:focus-visible { outline: 0; box-shadow: none; }
.lg-field__box input::placeholder { color: var(--color-neutral-600); }
/* Keep a browser's autofill from painting the field white. */
.lg-field__box input:-webkit-autofill {
    -webkit-text-fill-color: var(--color-text);
    transition: background-color 99999s ease-out;
}
.lg-field__eye { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; display: grid; place-items: center; cursor: pointer; font-size: 16px; background: transparent; color: var(--color-neutral-500); transition: color .2s, background .2s; }
.lg-field__eye:hover { color: var(--color-neutral-200); background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.lg__row { display: flex; justify-content: flex-end; font-size: 12px; }
.lg__submit { height: 46px; box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.lg__submit:disabled { box-shadow: none; }
.lg__note { margin: 6px 0 0; font-size: 12px; color: var(--color-neutral-500); }

/* The lock page (templates/admin/locked.html): the panel alone, centred. */
/* One panel and nothing beside it (the lock page, the pages around Google
   sign-in): a card in the middle of the window, as tall as what is on it.
   Left to the two-column rules it stretched the full height of the window
   with a few lines of text in the middle. */
.lg__wrap--solo { grid-template-columns: minmax(0, 520px); justify-content: center; align-items: center; }
.lg__wrap--solo .lg__side { padding: 28px 0; }
.lg__link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; color: var(--color-accent-300); }
.lg__link:hover { color: var(--color-accent-200); }
.lg__error[hidden] { display: none; }

/* ── Narrow: the panel becomes the page ──────────────────────────────── */
@media (max-width: 980px) {
    .lg__wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .lg__brand { padding: 28px 24px 0; }
    .lg__pitch, .lg-twin { display: none; }
    .lg__side { padding: 20px 16px 24px; align-items: flex-start; }
    .lg__panel { padding: 32px 24px; justify-content: flex-start; }
    .lg__panel::before { left: 24px; right: 24px; }
    .lg__panel h2 { font-size: 30px; }
    .lg__wrap--solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
    .lg__wrap--solo .lg__side { padding: 20px 16px 24px; }
}