/* =============================================================================
   login-draft.css — the sign-in page as a drawing board (2026-10-20, owner: "login page revamp, something different
   ui + animated svg"). The whole page is blueprint paper; on the left a ball-valve drawing draws itself
   (Views/Shared/_DraftScene.cshtml), on the right the form sits on a card that reads like a title block.
   Loaded after lnx-login.css / drawing-login.css and only overrides them (body.dl).
   ============================================================================= */
html body.lx.dl {
    --bp: #0a2a55; --bp2: #061a38; --line: #cfe6ff; --cyan: #7dd3fc; --amber: #fbbf24;
    background:
        linear-gradient(rgba(125, 211, 252, .07) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, rgba(125, 211, 252, .07) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(rgba(125, 211, 252, .11) 1px, transparent 1px) 0 0 / 110px 110px,
        linear-gradient(90deg, rgba(125, 211, 252, .11) 1px, transparent 1px) 0 0 / 110px 110px,
        radial-gradient(120% 90% at 20% 10%, #0f3d78 0%, var(--bp) 45%, var(--bp2) 100%) !important;
    background-color: #061a38 !important;
    background-attachment: fixed;
}
body.dl .lx-login { grid-template-columns: minmax(0, 1.25fr) minmax(400px, .75fr); }

/* ---- left: the board ---- */
body.dl .lx-art.dr-art { background: none; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: clamp(.6rem, 2vh, 1.4rem); color: #e6f2ff; }
body.dl .lx-aurora, body.dl .lx-floor, body.dl .lx-glow { display: none; }
.dr-brand .dp-logo { color: #fff; }
.dr-board { min-height: 0; display: grid; place-items: center; }
.dr-svg { width: 100%; height: 100%; max-height: 62vh; max-width: 860px; overflow: visible; filter: drop-shadow(0 0 18px rgba(125, 211, 252, .12)); }
.dr-copy h1 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.35rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.dr-copy p { margin: .5rem 0 0; color: #b9d6f5; font-size: 1rem; }
body.dl .dr-trust span { background: rgba(125, 211, 252, .08); border: 1px solid rgba(125, 211, 252, .22); color: #d8ecff; border-radius: 99px; padding: .35rem .8rem; }

/* the drawing: every line draws in on its own beat (--d delay, --t length) */
.dr-l { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1; animation: dr-draw var(--t, .9s) cubic-bezier(.6, .1, .3, 1) var(--d, 0s) forwards; }
.dr-strong { stroke-width: 2.4; stroke: #eaf5ff; }
.dr-frame { stroke: rgba(207, 230, 255, .45); stroke-width: 1.2; }
.dr-amber { stroke: var(--amber); stroke-width: 1.2; }
.dr-c { fill: none; stroke: var(--cyan); stroke-width: 1; stroke-dasharray: .03 .012 .004 .012; stroke-dashoffset: 1; opacity: 0;
    animation: dr-fade .6s ease var(--d, 0s) forwards; }
.dr-h { fill: url(#drHatch); opacity: 0; animation: dr-fade .9s ease var(--d, 0s) forwards; }
.dr-hole { fill: none; stroke: var(--line); stroke-width: 1.4; }
.dr-f { opacity: 0; animation: dr-fade .6s ease var(--d, 0s) forwards; }
.dr-num text { fill: var(--amber); font: 600 13px "Jost", sans-serif; letter-spacing: .04em; }
.dr-tiny { fill: rgba(207, 230, 255, .5); font: 600 10px "Jost", sans-serif; }
.dr-tb-k { fill: rgba(207, 230, 255, .55); font: 700 8px "Jost", sans-serif; letter-spacing: .1em; }
.dr-tb-v { fill: #eaf5ff; font: 600 11px "Jost", sans-serif; letter-spacing: .03em; }
@keyframes dr-draw { to { stroke-dashoffset: 0; } }
@keyframes dr-fade { to { opacity: 1; } }

/* the pencil point: glows while it draws the body, then fades */
.dr-pen { fill: #fff; filter: drop-shadow(0 0 6px #7dd3fc) drop-shadow(0 0 12px #38bdf8); opacity: 0; animation: dr-pen 1.8s ease 1.45s forwards; }
@keyframes dr-pen { 0% { opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* the stamp lands when the drawing is done */
.dr-stamp { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dr-stamp .55s cubic-bezier(.2, 1.4, .4, 1) 5.1s forwards; }
.dr-stamp rect { fill: none; stroke: #f87171; stroke-width: 3; }
.dr-stamp .dr-stamp-in { stroke-width: 1.2; stroke-dasharray: 4 3; }
.dr-stamp text { fill: #f87171; font: 800 20px "Jost", sans-serif; letter-spacing: .16em; }
.dr-stamp-tick { fill: none; stroke: #f87171; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes dr-stamp { 0% { opacity: 0; scale: 2.2; } 60% { opacity: .95; scale: .94; } 100% { opacity: .9; scale: 1; } }

/* then a slow scan keeps the board alive */
.dr-scan { opacity: 0; animation: dr-scan 7s linear 6s infinite; }
@keyframes dr-scan { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(390px); } }

/* ---- right: the card ---- */
body.dl .lx-panel { margin: clamp(.8rem, 2.5vh, 1.6rem); border-radius: 22px; background: rgba(255, 255, 255, .97);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(125, 211, 252, .25); }
body.dl .lx-panel::before { display: none; }
.dr-tblock { display: grid; grid-template-columns: 1.5fr 1fr .6fr; margin-bottom: 1.4rem; border: 1.5px solid #0a2a55; border-radius: 10px; overflow: hidden; }
.dr-tblock > div { padding: .4rem .6rem; border-left: 1.5px solid #0a2a55; display: grid; }
.dr-tblock > div:first-child { border-left: 0; }
.dr-tblock small { font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #64748b; }
.dr-tblock b { font-size: .86rem; color: #0a2a55; }
body.dl .lx-form h2 { color: #0a2a55; }
body.dl .lx-steps li.is-on i { background: #0a2a55; }
body.dl .lx-field input:focus { border-color: #1d6fd8; box-shadow: 0 0 0 4px rgba(29, 111, 216, .14); }
body.dl .lx-field input:focus + label, body.dl .lx-field input:not(:placeholder-shown) + label { color: #1d6fd8; }
body.dl .lx-field input:focus ~ svg { stroke: #1d6fd8; }
body.dl .lx-btn { background-image: linear-gradient(110deg, #0a2a55, #1d6fd8 55%, #0a2a55); }
body.dl .lx-btn:hover:not(:disabled) { box-shadow: 0 18px 32px -14px rgba(29, 111, 216, .9); }
body.dl .lx-greet { color: #1d6fd8; }

@media (max-width: 991.98px) {
    body.dl .lx-login { grid-template-columns: 1fr; }
    body.dl .lx-art.dr-art { grid-template-rows: auto auto; }
    body.dl .dr-board, body.dl .dr-copy, body.dl .dr-trust { display: none; }
    body.dl .lx-panel { margin: 0 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .dr-l { animation: none; stroke-dashoffset: 0; }
    .dr-c, .dr-h, .dr-f { animation: none; opacity: 1; }
    .dr-stamp { animation: none; opacity: .9; }
    .dr-pen, .dr-scan { display: none; }
}

/* the drawing takes only the space its row has (it ran into the headline on shorter screens) */
.dr-board { height: 100%; overflow: hidden; }
.dr-svg { height: 100%; max-height: 100%; }
.dr-copy h1 { font-size: clamp(1.35rem, 2.2vw, 2rem); }
.dr-board { position: relative; }
.dr-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* fit fixes (2026-10-20): stamp text a little smaller so the tick sits beside it; no zone letters on the frame line */
.dr-stamp text { font-size: 18px; letter-spacing: .14em; }
body.dl .lx-art.dr-art::before { content: none; }

/* =============================================================================
   Layout D — the light table (owner 2026-10-20). A dark drafting desk; in the middle one glowing light-table card:
   the valve is traced on its top half, the sign-in form sits below. Brand top-left, the headline and NOTES at the
   desk's lower left. The drawing's lines turn ink-blue on the lit card.
   ============================================================================= */
html body.lx.dl {
    background:
        radial-gradient(60% 55% at 50% 45%, rgba(56, 189, 248, .16), transparent 70%),
        linear-gradient(rgba(125, 211, 252, .05) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(90deg, rgba(125, 211, 252, .05) 1px, transparent 1px) 0 0 / 26px 26px,
        radial-gradient(120% 100% at 50% 0%, #0b2347 0%, #06142b 60%, #030b18 100%) !important;
}
body.dl .lx-login { display: block; position: relative; min-height: 100vh; min-height: 100dvh; height: auto; }

/* the desk around the card */
body.dl .lx-art.dr-art { position: fixed; inset: 0; display: block; padding: 1.4rem 1.8rem; pointer-events: none; z-index: 0; }
body.dl .dr-art > * { pointer-events: auto; }
body.dl .dr-brand { position: absolute; top: 1.4rem; left: 1.8rem; right: 1.8rem; display: flex; justify-content: space-between; align-items: center; }
body.dl .dr-copy { position: absolute; left: 1.8rem; bottom: 6.8rem; max-width: min(26rem, calc(50vw - 300px)); }
body.dl .dr-copy h1 { font-size: clamp(1.15rem, 1.7vw, 1.6rem); }
body.dl .dr-copy p { font-size: .9rem; }
body.dl .dr-trust { position: absolute; left: 1.8rem; bottom: 1.4rem; display: grid; gap: .25rem; counter-reset: note; max-width: min(26rem, calc(50vw - 300px)); }
body.dl .dr-trust::before { content: "NOTES"; font: 800 .68rem "Jost", sans-serif; letter-spacing: .16em; color: #fbbf24; }
body.dl .dr-trust span { counter-increment: note; background: none; border: 0; border-radius: 0; padding: 0; font-size: .8rem; color: #b9d6f5; }
body.dl .dr-trust span::before { content: counter(note) ". "; color: #fbbf24; font-weight: 700; }
body.dl .dr-trust span svg { display: none; }

/* the light table */
body.dl .lx-panel {
    position: relative; z-index: 1; width: min(560px, calc(100vw - 32px)); margin: 0 auto; top: 50%; transform: translateY(-50%);
    max-height: calc(100vh - 2.4rem); max-height: calc(100dvh - 2.4rem); overflow-y: auto; padding: 0;
    border-radius: 20px; border: 2px solid rgba(147, 197, 253, .85);
    background: radial-gradient(90% 70% at 50% 18%, #ffffff 0%, #f2f8ff 55%, #e3efff 100%);
    box-shadow: 0 0 0 6px rgba(56, 189, 248, .08), 0 0 70px 6px rgba(56, 189, 248, .35), 0 40px 80px -30px rgba(0, 0, 0, .8);
    animation: dl-lamp 1.2s ease-out both;
}
body.dl .lx-panel::before { display: block; content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 3px; border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, #7dd3fc, #e0f2fe, #7dd3fc, transparent); box-shadow: 0 0 18px 4px rgba(125, 211, 252, .7); z-index: 2; }
@keyframes dl-lamp { 0% { opacity: 0; filter: brightness(.4); } 40% { opacity: 1; filter: brightness(1.25); } 55% { filter: brightness(.85); } 100% { filter: none; } }
body.dl .lx-panel-top { padding: .7rem 1.4rem 0; margin: 0; }
body.dl .lx-panel .dr-board { position: relative; height: clamp(150px, 26vh, 230px); margin: .3rem 1rem 0; border-bottom: 1px dashed rgba(10, 42, 85, .25); overflow: hidden; }
body.dl .lx-form { max-width: none; margin: 0; padding: .9rem 1.6rem 1rem; animation-delay: .5s; }
body.dl .lx-foot { padding: 0 1.4rem 1rem; margin: 0; }

/* the drawing in ink on the lit card */
body.dl .lx-panel .dr-svg { filter: none; }
body.dl .lx-panel .dr-l, body.dl .lx-panel .dr-hole { stroke: #12386e; }
body.dl .lx-panel .dr-strong { stroke: #0a2a55; }
body.dl .lx-panel .dr-frame { stroke: rgba(10, 42, 85, .3); }
body.dl .lx-panel .dr-amber { stroke: #c2410c; }
body.dl .lx-panel .dr-c { stroke: #0284c7; }
body.dl .lx-panel .dr-num text { fill: #c2410c; }
body.dl .lx-panel .dr-tiny, body.dl .lx-panel .dr-tb-k { fill: rgba(10, 42, 85, .55); }
body.dl .lx-panel .dr-tb-v { fill: #0a2a55; }
body.dl .lx-panel .dr-pen { fill: #0284c7; filter: drop-shadow(0 0 5px #38bdf8); }
body.dl .lx-panel .dr-stamp rect, body.dl .lx-panel .dr-stamp-tick { stroke: #dc2626; }
body.dl .lx-panel .dr-stamp text { fill: #dc2626; }
body.dl .lx-panel #drHatch line { stroke: #0284c7; }
body.dl .lx-panel .dr-scan { display: none; }

/* not enough room beside the card: the desk text goes, the card stays */
@media (max-width: 1180px), (max-height: 640px) { body.dl .dr-copy, body.dl .dr-trust { display: none; } }
@media (max-width: 991.98px) {
    body.dl .lx-art.dr-art { position: static; padding: 1rem; }
    body.dl .dr-brand { position: static; }
    body.dl .lx-panel { top: auto; transform: none; margin: 0 auto 16px; max-height: none; }
    body.dl .lx-panel .dr-board { display: block; height: 150px; }
}
/* centring: the desk is a full-height grid, the card sits in its middle */
@media (min-width: 992px) {
    body.dl .lx-login { display: grid; place-items: center; height: 100vh; height: 100dvh; padding: 1.2rem; }
    body.dl .lx-panel { top: auto; transform: none; margin: 0; }
    body.dl .dr-copy { bottom: 8.6rem; }
}
@media (min-width: 992px) {
    body.dl .lx-login { grid-template-columns: 1fr; }
    body.dl .dr-copy, body.dl .dr-trust { max-width: calc(50vw - 330px); }
}

/* =============================================================================
   Layout D, wide (owner 2026-10-20: "not proper, I want it with the animated svg"): the light table is wide — the
   valve drawing big on its left half with the headline under it, the form on the right half — and the desk around
   it carries drafting tools drawn in faint lines (Views/Shared/_DeskTools.cshtml), the compass swinging slowly.
   ============================================================================= */
.dk-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .55; }
.dk-l { fill: none; stroke: #7dd3fc; stroke-width: 1.5; stroke-opacity: .55; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1; animation: dr-draw var(--t, 1.6s) ease var(--d, 0s) forwards; }
.dk-tool .dk-l { animation-delay: calc(var(--d, 0s) + .2s); }
.dk-ticks { fill: none; stroke: #7dd3fc; stroke-opacity: .4; stroke-width: 1.2; opacity: 0; animation: dr-fade 1s ease 2.2s forwards; }
.dk-float { animation: dk-float 9s ease-in-out 3s infinite; transform-box: fill-box; }
@keyframes dk-float { 50% { transform: translate(6px, -8px) rotate(.6deg); } }
.dk-compass { transform-origin: 1380px 560px; animation: dk-swing 8s ease-in-out 3.6s infinite; }
@keyframes dk-swing { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }

@media (min-width: 992px) {
    body.dl .lx-panel {
        width: min(1180px, calc(100vw - 48px)); display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr);
        grid-template-areas: "top top" "board form" "copy form" "foot foot";
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }
    body.dl .lx-panel-top { grid-area: top; padding: .8rem 1.6rem .4rem; }
    body.dl .lx-panel .dr-board { grid-area: board; height: auto; min-height: 300px; margin: .4rem 0 0 1.2rem; border-bottom: 0;
        border-right: 1px dashed rgba(10, 42, 85, .2); border-radius: 12px;
        background: linear-gradient(rgba(10, 42, 85, .05) 1px, transparent 1px) 0 0 / 18px 18px,
                    linear-gradient(90deg, rgba(10, 42, 85, .05) 1px, transparent 1px) 0 0 / 18px 18px; }
    body.dl .lx-panel .dr-copy { grid-area: copy; position: static; max-width: none; padding: .8rem 1.4rem 1rem 1.6rem; }
    body.dl .lx-panel .dr-copy h1 { color: #0a2a55; font-size: clamp(1.15rem, 1.6vw, 1.5rem); }
    body.dl .lx-panel .dr-copy .lx-grad { background-image: linear-gradient(90deg, #1d6fd8, #0891b2, #1d6fd8); }
    body.dl .lx-panel .dr-copy p { color: #475569; }
    body.dl .lx-panel .dr-copy .lx-rotate { color: #0a2a55; }
    body.dl .lx-form { grid-area: form; align-self: center; padding: 1rem 1.8rem 1rem 1.6rem; }
    body.dl .lx-foot { grid-area: foot; padding: .2rem 1.6rem .9rem; }
    /* the desk text: only NOTES stay, in the corner, when there is room */
    body.dl .dr-trust { left: 1.8rem; bottom: 1.2rem; max-width: 22rem; }
}
@media (max-width: 1380px) { body.dl .dr-trust { display: none; } }
@media (max-width: 991.98px) {
    body.dl .lx-panel .dr-copy { display: none; }
    .dk-svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dk-l { animation: none; stroke-dashoffset: 0; }
    .dk-ticks { animation: none; opacity: 1; }
    .dk-float, .dk-compass { animation: none; }
}
body.dl .dr-art > .dk-svg { pointer-events: none; }
/* the table leaves room for the logo beside it; NOTES only on very wide screens */
@media (min-width: 992px) { body.dl .lx-panel { width: clamp(860px, calc(100vw - 560px), 1120px); } }
@media (max-width: 1460px) { body.dl .dr-brand .dp-logo > span:last-child { display: none; } }
@media (max-width: 1900px) { body.dl .dr-trust { display: none; } }
/* a tall form (e.g. the local Test sign-in list) scrolls inside its own half — it ran over the clock and the footer */
@media (min-width: 992px) {
    body.dl .lx-panel { overflow: hidden; }
    body.dl .lx-form { grid-row: 2 / 4; align-self: stretch; min-height: 0; overflow-y: auto; scrollbar-width: thin;
        display: flex; flex-direction: column; justify-content: safe center; }
    body.dl .lx-form > * { flex: none; }
    body.dl .lx-foot { text-align: center; }
}
/* the form is part of the light table, not a second card on it (the ERP sign-in gave it its own glass card) */
body.dl .lx-form { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
@media (min-width: 992px) { body.dl .lx-form { border-left: 1px dashed rgba(10, 42, 85, .18) !important; } }
/* the moving word under the headline sat low and was cut off: one line box, on the text's own line */
body.dl .dr-copy .lx-rotate { height: 1.45em; line-height: 1.45em; vertical-align: top; }
body.dl .dr-copy .lx-rotate b { line-height: 1.45em; }
body.dl .dr-copy p { line-height: 1.45em; }