/* ============================================================================
   Sign-in page  --  loginesenz.aspx
   ----------------------------------------------------------------------------
   The eSenZ login design (feature carousel beside the sign-in form), as the
   design files shipped it, plus the few rules the ASP.NET page needs: the
   whole page sits inside <form runat="server">, the submit is an <input>, and
   the error panel is the server's. Standalone: this page loads no other
   stylesheet. Dark by default; data-theme="light" on <html> switches it.
   ========================================================================== */
:root {
    color-scheme: dark;
    --bg: #080a0d;
    --card: #111418;
    --left: #0e1217;
    --text: #f1f6fd;
    --muted: #94a0ae;
    --border: #282f37;
    --input: #0c0f13;
    --blue: #00afef;
    --orange: #fd8a32;
    --grid: #242c36
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter,"Segoe UI",Arial,sans-serif;
    font-size: 14px;
    min-height: 100svh;
    display: flex;
    flex-direction: column
}

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

button, input {
    font: inherit
}

button, a, input {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer
}

a:hover {
    color: var(--blue)
}

button:focus-visible, a:focus-visible, input:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px
}

.site-header {
    height: 100px;
    padding: 0 6%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.logo {
    width: 130px;
    height: auto;
    display: block
}

.light-logo {
    display: none
}

.header-links {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 12px;
    color: var(--muted)
}

    .header-links a span {
        margin-left: 9px
    }

.theme {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
    border-radius: 50%;
    font-size: 19px
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 28px 24px 35px
}

.login-card {
    width: 100%;
    max-width: 940px;
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 100px #0003;
    background: var(--card)
}

.features {
    padding: 39px 42px 25px;
    background: radial-gradient(ellipse at 0 0,#00afef0b,transparent 65%),var(--left);
    border-right: 1px solid var(--border);
    min-width: 0
}

.portal-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.7px;
    display: flex;
    align-items: center;
    gap: 9px
}

.blue-dot {
    width: 6px;
    height: 6px;
    background: var(--blue);
    border-radius: 50%;
    display: inline-block
}

h1 {
    font-weight: 550;
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: -1.4px;
    margin: 0 0 11px
}

    h1 span {
        color: var(--orange)
    }

.lead {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 25px
}

.feature-window {
    overflow: hidden
}

.feature-track {
    display: flex;
    transition: transform .65s cubic-bezier(.2,.7,.2,1)
}

.feature-slide {
    flex: 0 0 100%;
    min-width: 0
}

.visual {
    height: 164px;
    border: 1px solid var(--border);
    background: var(--input);
    border-radius: 9px;
    padding: 14px 17px
}

.visual-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 8px;
    letter-spacing: 1.4px;
    color: var(--muted)
}

.visual svg {
    display: block;
    width: 100%;
    height: 107px
}

.grid {
    stroke: var(--grid);
    stroke-width: 1;
    stroke-dasharray: 3 5;
    fill: none
}

.feature-slide h2 {
    font-size: 18px;
    letter-spacing: -.4px;
    font-weight: 550;
    margin: 23px 0 9px
}

.feature-slide p {
    font-size: 12px;
    line-height: 1.8;
    color: var(--muted);
    margin: 0;
    max-width: 350px;
    min-height: 44px
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px
}

.dots {
    display: flex;
    gap: 5px
}

    .dots button {
        width: 22px;
        height: 24px;
        background: transparent;
        border: 0;
        padding: 0;
        position: relative
    }

        .dots button:after {
            content: "";
            position: absolute;
            left: 4px;
            right: 4px;
            top: 10px;
            height: 4px;
            border-radius: 4px;
            background: var(--border)
        }

        .dots button.active:after {
            background: var(--blue)
        }

.play-controls {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 1px
}

#pause {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    width: 25px;
    height: 25px;
    font-size: 10px
}

.signin {
    padding: 49px 43px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.portal-label {
    color: var(--muted);
    font-size: 9px
}

    .portal-label span {
        font-size: 16px;
        color: var(--orange)
    }
/* CUSTOMER PORTAL on the left, the eSenZ logo at the opposite end. */
.portal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.portal-logo {
    flex: none;
    line-height: 0
}

    .portal-logo .logo {
        width: 110px
    }
/* The logo moved out of the header: its links stay on the right. */
.header-links {
    margin-left: auto
}

.signin h2 {
    font-size: 29px;
    font-weight: 550;
    letter-spacing: -.9px;
    margin: 20px 0 8px
}

.signin-intro {
    color: var(--muted);
    font-size: 12px;
    margin: 0 0 29px
}

form > label, .password-label label {
    display: block;
    font-size: 11px;
    font-weight: 550;
    margin-bottom: 9px
}

input:not([type=checkbox]) {
    background: var(--input);
    color: var(--text);
    width: 100%;
    height: 45px;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0 13px;
    font-size: 12px;
    transition: border-color .2s
}

input::placeholder {
    color: var(--muted);
    opacity: .65
}

.password-label {
    margin-top: 21px
}

.password-wrap {
    position: relative
}

    .password-wrap input {
        padding-right: 46px
    }

    .password-wrap button {
        position: absolute;
        right: 3px;
        top: 3px;
        width: 39px;
        height: 39px;
        border: 0;
        background: transparent;
        color: var(--muted);
        display: grid;
        place-items: center
    }

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    margin: 17px 0 24px;
    color: var(--muted)
}

.remember {
    display: flex;
    gap: 7px;
    align-items: center;
    cursor: pointer
}

    .remember input {
        accent-color: var(--blue);
        margin: 0;
        width: 13px;
        height: 13px
    }

.form-options > a {
    color: var(--blue)
}

.submit {
    height: 45px;
    width: 100%;
    background: var(--orange);
    color: #211006;
    border: 0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 650;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px
}

    .submit:hover {
        background: #ffa258
    }

    .submit span {
        font-size: 19px
    }

.form-status {
    font-size: 11px;
    line-height: 1.5;
    color: var(--orange);
    margin: 10px 0 0
}

    .form-status:empty {
        display: none
    }

.support {
    border-top: 1px solid var(--border);
    margin-top: 29px;
    padding-top: 23px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 10px
}

    .support > span {
        color: var(--muted)
    }

    .support a {
        font-size: 11px
    }

.existing-login {
    text-align: center;
    font-size: 10px;
    color: var(--muted);
    margin-top: 17px
}

.under-card {
    font-size: 10px;
    letter-spacing: .3px;
    color: var(--muted);
    margin: 23px 0 0
}

    .under-card span {
        opacity: .65;
        margin-left: 4px
    }

.site-footer {
    padding: 18px 6% 24px;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 10px
}

.nodes {
    height: 107px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

    .nodes > span {
        width: 66px;
        height: 63px;
        border: 1px solid var(--border);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: var(--blue)
    }

    .nodes small {
        font-size: 9px;
        color: var(--muted);
        margin-top: 6px
    }

    .nodes .central {
        font-size: 20px;
        border-color: #fd8a3260;
        color: var(--orange)
    }

    .nodes i {
        font-style: normal;
        color: var(--muted)
    }

.accent {
    color: var(--orange)
}

[data-theme=light] {
    color-scheme: light;
    --bg: #f5f9ff;
    --card: #fff;
    --left: #edf4fc;
    --text: #102c4d;
    --muted: #506981;
    --border: #ceddeb;
    --input: #f8fbff;
    --blue: #007ba8;
    --grid: #d8e4ef
}

    [data-theme=light] .dark-logo {
        display: none
    }

    [data-theme=light] .light-logo {
        display: block
    }

    [data-theme=light] h1 span {
        color: #a84400
    }
    /* Light mode: the diagram card and its Solar / DG / Load boxes get a slightly
   darker border than the page's pale --border, so they read as boxes. */
    [data-theme=light] .visual,
    [data-theme=light] .nodes > span {
        border-color: #a9bfd4
    }

    [data-theme=light] .nodes .central {
        border-color: #fd8a3299
    }

@media(min-width:1500px) {
    .login-card {
        max-width: 990px
    }

    .features {
        padding: 43px 48px 30px
    }

    .signin {
        padding: 50px
    }
}
/* No phone layout: the page keeps its PC layout on every screen, scaled
   to fit (the viewport in loginesenz.aspx is a fixed 1000px). */
/* The carousel slides on every machine -- it scrolls until paused. */


/* --- the ASP.NET page -------------------------------------------------------- */
/* The server form wraps header, main and footer, so it takes the body's
   column layout over. */
#form1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100svh
}
/* The design's fields sit in a <form>; here that is a plain wrapper. */
.signin-form > label {
    display: block;
    font-size: 11px;
    font-weight: 550;
    margin-bottom: 9px
}
/* The submit is an <input type=submit>: it cannot hold the arrow span, so the
   arrow is in its value. */
/* Restated for the <input>: the design's input:not([type=checkbox]) rule
   is more specific than .submit and would paint it as a text field. */
input.submit {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    letter-spacing: .2px;
    height: 45px;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: var(--orange);
    color: #211006;
    font-size: 12.5px;
    font-weight: 650
}

    input.submit:hover {
        background: #ffa258
    }

    input.submit:disabled {
        opacity: .7;
        cursor: progress
    }
/* Integrator Login: a secondary, outlined button under Sign in. */
.integrator-login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none
}

    .integrator-login:hover {
        border-color: var(--blue);
        color: var(--blue)
    }
/* The server's error message (idErrorPanel), shown after a failed sign-in. */
.form-status {
    margin: 12px 0 0;
    padding: 9px 12px;
    border: 1px solid #fd8a3255;
    border-radius: 7px;
    background: #fd8a3212;
    font-size: 11.5px
}

/* --- larger type ---------------------------------------------------------------
   The design's text ran at 9-12px, too small to read comfortably; every size
   is raised here, the layout left as it was. */
body {
    font-size: 15px
}

.header-links {
    font-size: 14px
}

h1 {
    font-size: 42px
}

.lead {
    font-size: 15px
}

.visual-label {
    font-size: 10px
}

.nodes small {
    font-size: 11px
}

.feature-slide h2 {
    font-size: 21px
}

.feature-slide p {
    font-size: 14px;
    line-height: 1.7
}

.play-controls {
    font-size: 11px
}

#pause {
    font-size: 11px;
    width: 28px;
    height: 28px
}

.portal-label {
    font-size: 11px
}

.signin h2 {
    font-size: 33px
}

.signin-intro {
    font-size: 14.5px
}

.signin-form > label, .password-label label {
    font-size: 13px
}

input:not([type=checkbox]) {
    height: 48px;
    font-size: 14.5px
}

.form-options {
    font-size: 13px
}

.remember input {
    width: 15px;
    height: 15px
}

input.submit {
    height: 48px;
    font-size: 15px
}

.form-status {
    font-size: 13px
}

.support {
    font-size: 12.5px
}

    .support a {
        font-size: 13.5px
    }

.under-card {
    font-size: 12.5px
}

.site-footer {
    font-size: 12px
}

/* --- animated flow diagrams (feature carousel) ---------------------------------
   Each slide's visual is an inline SVG (viewBox 340x107): boxes, faint wires,
   and "packets" -- zero-length round-capped dashes whose dashoffset runs, so
   dots travel along the wire. Pure CSS; the page loads no extra script. */
.fx {
    overflow: visible
}

.fx-node {
    fill: var(--card);
    stroke: var(--border);
    stroke-width: 1
}

.fx-hub {
    fill: var(--card);
    stroke: #fd8a3270;
    stroke-width: 1.2
}

.fx-ico {
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

    .fx-ico.hot {
        stroke: var(--orange)
    }

.fx-fill {
    fill: var(--blue);
    stroke: none
}

    .fx-fill.hot {
        fill: var(--orange)
    }

.fx-lbl {
    fill: var(--muted);
    font-size: 10.5px;
    text-anchor: middle;
    font-family: inherit
}

    .fx-lbl.start {
        text-anchor: start
    }

.fx-hub-lbl {
    fill: var(--orange);
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: .6px;
    text-anchor: middle
}

.fx-tag {
    fill: var(--orange);
    font-size: 9px;
    font-weight: 650;
    text-anchor: middle
}

.fx-wire {
    fill: none;
    stroke: var(--grid);
    stroke-width: 1.6
}

.fx-pkt {
    fill: none;
    stroke: var(--blue);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: .01 22;
    animation: fx-run 1.1s linear infinite
}

    .fx-pkt.hot {
        stroke: var(--orange);
        stroke-width: 3;
        stroke-dasharray: .01 34;
        animation: fx-run-slow 1.7s linear infinite reverse
    }

    .fx-pkt.light {
        stroke-width: 2.6;
        stroke-dasharray: 6 16;
        animation-duration: .7s
    }

.fx-block {
    stroke: var(--orange);
    stroke-width: 2;
    stroke-linecap: round
}

.fx-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: fx-pulse 1.6s ease-out infinite
}

    .fx-pulse.d2 {
        animation-delay: .53s
    }

    .fx-pulse.d3 {
        animation-delay: 1.06s
    }

.fx-blink {
    animation: fx-blink 1.6s ease-in-out infinite
}

.fx-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: fx-spin 2.4s linear infinite
}

.fx-swing {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: fx-swing 2.2s ease-in-out infinite alternate
}

.fx-charge {
    transform-box: fill-box;
    transform-origin: left center;
    animation: fx-charge 2.4s ease-in-out infinite
}

.fx-bar {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: fx-bar 1.4s ease-in-out infinite alternate
}

    .fx-bar.d2 {
        animation-delay: -.45s
    }

    .fx-bar.d3 {
        animation-delay: -.9s
    }

.fx-wave {
    animation: fx-wave 1.2s linear infinite
}

.fx-draw {
    stroke-dasharray: 120;
    animation: fx-draw 2.8s ease-in-out infinite
}

@keyframes fx-run {
    to {
        stroke-dashoffset: -22.01
    }
}

@keyframes fx-run-slow {
    to {
        stroke-dashoffset: -34.01
    }
}

@keyframes fx-pulse {
    0% {
        opacity: .9;
        transform: scale(.6)
    }

    100% {
        opacity: 0;
        transform: scale(1.6)
    }
}

@keyframes fx-blink {
    0%,100% {
        opacity: .35
    }

    50% {
        opacity: 1
    }
}

@keyframes fx-spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes fx-charge {
    0% {
        transform: scaleX(.2)
    }

    60%,100% {
        transform: scaleX(1)
    }
}

@keyframes fx-swing {
    from {
        transform: rotate(-55deg)
    }

    to {
        transform: rotate(40deg)
    }
}

@keyframes fx-bar {
    from {
        transform: scaleY(.35)
    }

    to {
        transform: scaleY(1)
    }
}

@keyframes fx-wave {
    to {
        transform: translateX(-16px)
    }
}

@keyframes fx-draw {
    0% {
        stroke-dashoffset: 120
    }

    55%,85% {
        stroke-dashoffset: 0
    }

    100% {
        stroke-dashoffset: -120
    }
}

[data-theme=light] .fx-node {
    stroke: #a9bfd4
}

[data-theme=light] .fx-hub {
    stroke: #fd8a3299
}

.fx-pkt.hot.fwd {
    animation-direction: normal
}
/* Taller diagram box so the flow diagrams read larger. */
.visual {
    height: 192px
}

    .visual svg {
        height: 146px;
        margin: 3px 0
    }
/* Stronger diagram text: box labels in the main text colour (not muted grey),
   orange labels bolder, and a deeper orange on the light theme where the
   bright orange washes out on white. */
.fx-lbl {
    fill: var(--text);
    font-weight: 550
}

.fx-tag {
    font-size: 10px;
    font-weight: 700
}

.fx-hub-lbl {
    font-weight: 700
}

[data-theme=light] .fx-hub-lbl,
[data-theme=light] .fx-tag {
    fill: #c25200
}

.fx-tag.fx-blink {
    animation-name: fx-blink-soft
}

@keyframes fx-blink-soft {
    0%,100% {
        opacity: .7
    }

    50% {
        opacity: 1
    }
}

.visual-label {
    color: var(--text);
    font-weight: 550
}

[data-theme=light] .fx-ico.hot,
[data-theme=light] .fx-pkt.hot {
    stroke: #c25200
}

[data-theme=light] .fx-fill.hot {
    fill: #c25200
}

[data-theme=light] .fx-block {
    stroke: #c25200
}
/* Phone held upright: the 1000px PC layout is scaled down to the phone's
   width, which leaves the page far taller than its content. Keep header,
   card and footer together and centre that block on the screen, instead of
   stretching it so the card floats between a far-off header and footer. */
@media (orientation:portrait) and (hover:none) {
    body {
        justify-content: center
    }

    #form1 {
        flex: none;
        min-height: 0
    }

    main {
        flex: none;
        padding-top: 10px
    }

    .site-footer {
        margin-top: 10px
    }
}
/* The page never lays out narrower than 1000px: in a narrow desktop window
   the head script zooms it to fit (--fit = that zoom) rather than letting
   the two panels squeeze. Full height is divided by the zoom so the page
   still fills the window. */
body {
    min-width: 1000px;
    min-height: calc(100svh / var(--fit,1))
}

#form1 {
    min-height: calc(100svh / var(--fit,1))
}

/* --- festival / event panel ------------------------------------------------------
   Replaces the feature carousel while an event in Content/events/events.json
   is live (loginesenz.aspx, ActiveEvent). A night scene in both themes: the
   art (the event's art.html, or its picture) fills the panel, the wording sits
   over its dark top. An event's own animation styles are in its event.css. */
.event-art {
    position: relative;
    overflow: hidden;
    min-height: 600px;
    background: #080b10;
    color: #f5f6f7;
    border-right: 1px solid var(--border);
    min-width: 0
}

.event-scene, .event-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block
}

.event-photo {
    object-fit: cover;
    object-position: center bottom
}
/* Keeps the wording readable over any picture: dark at the top, clear in the middle. */
.event-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,#080b10 0%,#080b10cc 22%,#080b1000 50%,#080b1000 78%,#080b10d9 100%)
}

.event-copy {
    position: absolute;
    z-index: 4;
    left: 42px;
    right: 42px;
    top: 39px
}

.event-kicker {
    color: #00b8ed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    display: flex;
    align-items: center;
    gap: 10px
}

    .event-kicker:before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--orange);
        box-shadow: 0 0 12px var(--orange)
    }

.event-copy h1 {
    margin: 20px 0 12px;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 650;
    color: #f5f6f7
}

    .event-copy h1 em {
        color: #ff8732;
        font-style: normal
    }

.event-copy p {
    max-width: 380px;
    margin: 0;
    color: #c3c9d1;
    font-size: 14.5px;
    line-height: 1.65
}
/* The festival greeting above "Welcome back." */
.event-greeting {
    margin-top: 22px;
    color: #d89a4e;
    font: 600 12px/1.2 ui-monospace,Consolas,monospace;
    letter-spacing: .18em
}

    .event-greeting + h2 {
        margin-top: 10px
    }

[data-theme=light] .event-greeting {
    color: #a65a00
}