/* =====================================================================
   DownloadWebApp - design.
   Loaded last in _Layout, after bootstrap.css and style.css, so it wins
   on equal specificity without any !important.
   Every class here starts with dw-, so nothing collides with Bootstrap 
   or with the helper classes already in style.css.
   The palette, the header and the theme switch are the ones from the
   LoginIdentityServer portal, so the two applications look related.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Allianz Neo, served locally - no external request.
   Copy the AllianzNeo folder into wwwroot/fonts/. If the files are not
   there the pages still look right, they just fall back to Segoe UI.
   --------------------------------------------------------------------- */
@font-face {
    font-family: "Allianz Neo";
    src: url("../fonts/AllianzNeo/AllianzNeoW04-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Allianz Neo";
    src: url("../fonts/AllianzNeo/AllianzNeoW04-Regular.woff2") format("woff2");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Allianz Neo";
    src: url("../fonts/AllianzNeo/AllianzNeoW04-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Allianz Neo";
    src: url("../fonts/AllianzNeo/AllianzNeoW04-Bold.woff2") format("woff2");
    font-weight: 700 800;
    font-style: normal;
    font-display: swap
}

/* ---------------------------------------------------------------------
   Design tokens. Light first, then the dark theme as a deliberate set of
   colours - not an automatic inversion of the light one.
   --------------------------------------------------------------------- */
:root {
    --dw-ink: #1f3347;
    --dw-muted: #5b6b7c;
    --dw-brand: #003781;
    --dw-bg: #f3f5f8;
    --dw-line: #dfe4ea;
    --dw-surface: #fff;
    --dw-surface2: #f6f8fa;
    --dw-hdr: rgba(255,255,255,.88);
    --dw-title: #152535;
    --dw-blob1: #e3ecf8;
    --dw-blob2: #e8f3ec;
    --dw-sh: rgba(20,40,60,.18);
    /* buttons stay blue with white text on both themes, so they have their own tokens */
    --dw-btn1: #003781;
    --dw-btn2: #0072ed;
    --dw-bar: #0a5cb8;
    --dw-bar-null: #9aa9b8;
    --dw-track: rgba(10,92,184,.16);
    --dw-font: "Allianz Neo","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color-scheme: light;
}

    :root[data-theme="dark"] {
        --dw-ink: #e6eef8;
        --dw-muted: #a3b9d8;
        --dw-brand: #7fd0f2;
        --dw-bg: #001b42;
        --dw-line: #173f78;
        --dw-surface: #00295f;
        --dw-surface2: #03306b;
        --dw-hdr: rgba(0,31,74,.94);
        --dw-title: #fff;
        --dw-blob1: #003781;
        --dw-blob2: #00285e;
        --dw-sh: rgba(0,6,20,.6);
        --dw-btn1: #0059c7;
        --dw-btn2: #0e8bff;
        --dw-bar: #4f9dfb;
        --dw-bar-null: #5d7288;
        --dw-track: rgba(79,157,251,.2);
        color-scheme: dark;
    }

/* ---------------------------------------------------------------------
   Page frame. The footer is pushed down by margin-top:auto instead of
   being fixed to the bottom, so it never covers the content on a short
   window but still sits at the bottom on a short page.
   --------------------------------------------------------------------- */
/* An element that gets an explicit display (our buttons, for instance) would
   otherwise ignore the hidden attribute, because our rule beats the browser
   default. This puts hidden back in charge, wherever it is used. */
[hidden] {
    display: none !important
}

/* Sizes here are in px on purpose, never rem: Bootstrap sets html{font-size:10px},
   so a rem is 10px there and 16px everywhere else, and the header would shrink
   depending on which Bootstrap happens to be loaded. */

html, body {
    height: 100%
}

body {
    margin: 0;
    font-family: var(--dw-font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--dw-ink);
    background: radial-gradient(900px 400px at 88% -12%,var(--dw-blob1) 0,transparent 62%), radial-gradient(700px 400px at -12% 112%,var(--dw-blob2) 0,transparent 62%), var(--dw-bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.dw-main {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 52px 20px 44px
}

    .dw-main > * {
        box-sizing: border-box
    }

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.dw-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 72px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--dw-hdr);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--dw-line);
    box-shadow: 0 4px 20px rgba(0,0,0,.03);
    transition: background .3s,box-shadow .2s;
}

    .dw-header.dw-scrolled {
        box-shadow: 0 8px 24px -10px rgba(20,40,60,.28)
    }

.dw-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex: 0 0 auto
}

    .dw-logo img {
        height: 38px;
        width: auto;
        display: block
    }
        .dw-logo img.dw-logo-dark {
            display: none
        }

:root[data-theme="dark"] .dw-logo img.dw-logo-light {
    display: none
}

:root[data-theme="dark"] .dw-logo img.dw-logo-dark {
    display: block
}

.dw-nav {
    display: flex;
    align-items: center;
    gap: 32px
}

    .dw-nav a {
        color: var(--dw-muted);
        font-weight: 600;
        font-size: 15.5px;
        white-space: nowrap;
        text-decoration: none;
        transition: color .2s
    }

        .dw-nav a:hover, .dw-nav a:focus {
            color: #0072ed;
            text-decoration: none
        }

/* theme switch: a pill with a knob that slides across */
.dw-theme {
    position: relative;
    width: 52px;
    height: 28px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 999px;
    background: var(--dw-surface2);
    border: 1px solid var(--dw-line);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
    cursor: pointer;
    transition: background .3s,border-color .3s;
}

    .dw-theme::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #f5b301;
        box-shadow: 0 2px 6px rgba(245,179,1,.5);
        transition: transform .35s cubic-bezier(.3,1.4,.5,1),background .3s,box-shadow .3s;
    }

    .dw-theme svg {
        position: absolute;
        top: 6px;
        width: 14px;
        height: 14px;
        fill: none;
        stroke-width: 2px;
        stroke-linecap: round;
        z-index: 1;
        transition: opacity .3s,transform .5s
    }

    .dw-theme .dw-sun {
        left: 6px;
        stroke: #fff
    }

    .dw-theme .dw-moon {
        right: 6px;
        stroke: var(--dw-muted);
        fill: none
    }

    .dw-theme:hover {
        border-color: var(--dw-brand)
    }

:root[data-theme="dark"] .dw-theme::after {
    transform: translateX(24px);
    background: #13a0d3;
    box-shadow: 0 2px 8px rgba(19,160,211,.6)
}

:root[data-theme="dark"] .dw-theme .dw-sun {
    stroke: var(--dw-muted);
    transform: rotate(90deg)
}

:root[data-theme="dark"] .dw-theme .dw-moon {
    stroke: #fff;
    fill: #fff
}

/* ---------------------------------------------------------------------
   Page background. Sits behind everything, fixed and not clickable.
   --------------------------------------------------------------------- */
.dw-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0
}

.dw-main, .dw-footer {
    position: relative;
    z-index: 1
}

/* The canvas the pointer sprays onto. It sits above the background layers and
   below the page, and never receives clicks. While the button is held down the
   page must not select text under the drag, which is what .dw-spraying does. */
.dw-spray-mouse {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    display: block
}

:root.dw-spraying, :root.dw-spraying body {
    user-select: none;
    -webkit-user-select: none
}

/* ---- the circuit board ----
   wwwroot/images/circuit-bg.svg: traces running in from beyond the edges
   towards the middle, where the card sits. Fetched and inlined by
   app-design.js so these rules can colour it per theme. Nothing is drawn in
   the view. */
.dw-bg-circuit {
    position: absolute;
    inset: 0
}

    .dw-bg-circuit svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block
    }

/* The traces draw themselves in once, from the edges towards the middle, and then stay. */
.dw-ct path {
    fill: none;
    stroke: var(--dw-trace);
    stroke-width: 1.3px;
    opacity: .3;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dw-draw 1.9s cubic-bezier(.25,.8,.25,1) forwards
}

@keyframes dw-draw {
    to {
        stroke-dashoffset: 0
    }
}

.dw-cn circle {
    fill: var(--dw-trace);
    opacity: .36
}

/* The pulses. Each one is drawn twice: a wide faint line for the glow and the
   bright thin one on top. drop-shadow was the obvious way to get the glow and
   it is re-rendered every frame - with these many pulses on screen it took the
   page down to 14 frames a second, against 80 for the two lines. */
/* Hidden until it starts moving. Before its delay elapses a pulse keeps its
   resting dash offset, and whatever that value is the dash lands somewhere on
   the trace - the pattern is 1050 long and the trace is 1000, so there is no
   offset that parks all fifty units of it past the end. The first second of
   the page was a scatter of still marks sitting on the pins. visibility is
   turned on inside the animation instead, so nothing shows until then. */
.dw-cp path {
    fill: none;
    stroke: var(--dw-spark);
    stroke-width: 2.4px;
    stroke-linecap: round;
    stroke-dasharray: 50 1000;
    stroke-dashoffset: 1050;
    visibility: hidden;
    animation-name: dw-pulse;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

    .dw-cp path.glow {
        stroke-width: 7px;
        opacity: .18
    }

:root[data-theme="dark"] .dw-cp path.glow {
    opacity: .22
}
/* 1050 is exactly one period of the dash pattern (50 on + 1000 off), so the
   loop joins up with itself. Ending at -50 instead - which is what this was -
   overshoots the period by the length of the dash: the light came out of the
   pin, advanced five percent of the trace, then snapped back to the pin and
   started again. Visible on the outgoing pulses because their path starts at
   the chip, right where you are looking. */
@keyframes dw-pulse {
    from {
        stroke-dashoffset: 1050;
        visibility: visible
    }

    to {
        stroke-dashoffset: 0;
        visibility: visible
    }
}

/* light theme: blue on a pale page. dark theme: gold, which is what moves */
:root {
    --dw-trace: #003781;
    --dw-spark: #0072ed
}

    :root[data-theme="dark"] {
        --dw-trace: #2f6fb5;
        --dw-spark: #ffc24d
    }

        :root[data-theme="dark"] .dw-ct path {
            opacity: .4
        }

        :root[data-theme="dark"] .dw-cn circle {
            opacity: .5
        }

/* a soft glow behind the core, so the board does not read as flat */
.dw-bg-circuit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 42%;
    width: 860px;
    height: 640px;
    transform: translate(-50%,-50%);
    background: radial-gradient(ellipse,rgba(0,114,237,.16),transparent 65%)
}

:root[data-theme="dark"] .dw-bg-circuit::after {
    background: radial-gradient(ellipse,rgba(255,180,60,.13),rgba(40,150,255,.12) 45%,transparent 68%)
}

/* ---- the board reacts to the pointer ----
   app-design.js clones the traces and the nodes once into <g class="dw-hot">
   and hides that copy behind an SVG mask whose only content is a single
   circle; moving the circle is the whole interaction. These rules are what
   the copy looks like where the mask lets it through. */
/* The soft edge of the lit spot. The gradient is declared once here; app-design.js
   only moves it, with mask-position, and resizes it on a click. Nothing is rebuilt
   per frame, which is what keeps this cheap. */
.dw-hot {
    pointer-events: none
}

    .dw-hot .hot-in {
        -webkit-mask-image: radial-gradient(circle closest-side, #000 0%,rgba(0,0,0,.55) 55%,transparent 100%);
        mask-image: radial-gradient(circle closest-side, #000 0%,rgba(0,0,0,.55) 55%,transparent 100%);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .dw-hot .hot-t path {
        fill: none;
        stroke: var(--dw-spark);
        stroke-width: 1.9px;
        opacity: .95;
        stroke-linejoin: round;
        stroke-linecap: round;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        animation: none
    }

    .dw-hot .hot-n circle {
        fill: var(--dw-spark);
        opacity: 1;
        animation: none
    }

/* a travelling light that was just clicked runs thicker while it speeds up.
   The class goes on the pair, not on one line of it: the two halves have to be
   driven together or they drift apart and the light reads as smeared. */
.dw-pulse.dw-cp-hit path {
    stroke-width: 3.4px
}

    .dw-pulse.dw-cp-hit path.glow {
        stroke-width: 13px;
        opacity: .3
    }

/* ---- the chip in the middle ----
   Drawn in wwwroot/images/circuit-bg.svg; every trace on the board ends on one
   of its pins. The geometry is in the drawing, the colours and weights here. */
.dw-chip .body {
    fill: none;
    stroke: var(--dw-trace);
    stroke-width: 1.8px;
    opacity: .5
}

.dw-chip .mark {
    fill: none;
    stroke: var(--dw-trace);
    stroke-width: 1.4px;
    opacity: .45
}

.dw-chip .feet line {
    stroke: var(--dw-trace);
    stroke-width: 4.5px;
    stroke-linecap: round;
    opacity: .45
}

.dw-chip .pads circle {
    fill: var(--dw-trace);
    opacity: .5
}

:root[data-theme="dark"] .dw-chip .body {
    opacity: .6
}

:root[data-theme="dark"] .dw-chip .feet line {
    opacity: .55
}

:root[data-theme="dark"] .dw-chip .pads circle {
    opacity: .6
}

/* ---- the company mark on the chip ----
   The image is not drawn: it is an svg mask over two rectangles, one in the
   resting colour and one carrying a band of light that slides across, so the
   light runs through the lettering and the edges of the symbol. The band is
   moved with transform rather than by animating the rectangle's x, because
   transform is the one property that animates on svg elements everywhere.
   app-design.js fills in the image path from data-logo on the container. */
.dw-chip-logo .base {
    fill: var(--dw-trace);
    opacity: .5
}
/* the band is the same colour as the lights running on the traces: gold on the
   dark theme, blue on the light one. The drawing writes white on the stops; this
   overrides it, because a presentation attribute loses to a stylesheet rule. */
#dw-logo-band stop {
    stop-color: var(--dw-spark)
}

.dw-chip-logo .sweep {
    animation: dw-logo-sweep 7s linear infinite
}

    .dw-chip-logo .sweep rect {
        opacity: .9
    }

:root[data-theme="dark"] .dw-chip-logo .sweep rect {
    opacity: 1
}
/* the band starts at the left of the mark and is as wide as the box, so
   crossing it end to end is three box widths */
@keyframes dw-logo-sweep {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(300%)
    }
}

/* the lights leaving the chip sit a touch under the ones arriving, so the two
   directions are told apart at a glance */
.dw-cp-out path {
    opacity: .85
}

/* ---------------------------------------------------------------------
   Card
   --------------------------------------------------------------------- */
.dw-card {
    width: 100%;
    max-width: 460px;
    background: var(--dw-surface);
    border: 1px solid var(--dw-line);
    border-radius: 20px;
    padding: 30px 30px 26px;
    box-shadow: 0 1px 2px rgba(20,40,60,.05),0 16px 34px -20px var(--dw-sh);
    animation: dw-in .6s cubic-bezier(.2,.8,.2,1) both;
}

    .dw-card.dw-wide {
        max-width: 700px
    }

@keyframes dw-in {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}
/* direct children come in one after the other */
.dw-stagger > * {
    animation: dw-in .55s cubic-bezier(.2,.8,.2,1) both
}

    .dw-stagger > *:nth-child(1) {
        animation-delay: .14s
    }

    .dw-stagger > *:nth-child(2) {
        animation-delay: .23s
    }

    .dw-stagger > *:nth-child(3) {
        animation-delay: .32s
    }

    .dw-stagger > *:nth-child(4) {
        animation-delay: .41s
    }

    .dw-stagger > *:nth-child(5) {
        animation-delay: .50s
    }

.dw-ico {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg,var(--dw-btn1),var(--dw-btn2));
    box-shadow: 0 10px 22px -12px rgba(0,80,180,.9)
}

    .dw-ico.dw-ico-bad {
        background: linear-gradient(135deg,#8c1018,#cb202d);
        box-shadow: 0 10px 22px -12px rgba(200,30,45,.9)
    }

    .dw-ico svg {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.1px;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.dw-h {
    margin: 0 0 6px;
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--dw-title)
}

.dw-sub {
    margin: 0 0 22px;
    text-align: center;
    font-size: 15.5px;
    color: var(--dw-muted)
}

/* ---------------------------------------------------------------------
   Fields
   --------------------------------------------------------------------- */
.dw-field {
    margin-bottom: 18px
}

.dw-label {
    display: block;
    margin-bottom: 7px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--dw-muted);
    transition: color .18s
}

.dw-field:focus-within .dw-label {
    color: #0072ed
}
/* background-COLOR, not the background shorthand: the shorthand would reset
   background-repeat/position/size and the select arrow would tile across */
.dw-input, .dw-select {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;
    color: var(--dw-ink);
    background-color: var(--dw-surface2);
    border: 1px solid var(--dw-line);
    border-radius: 12px;
    outline: none;
    box-shadow: none;
    height: auto;
    transition: border-color .18s,box-shadow .18s,background-color .18s;
}

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

    .dw-input:focus, .dw-select:focus {
        border-color: #0072ed;
        background-color: var(--dw-surface);
        box-shadow: 0 0 0 4px rgba(0,114,237,.16)
    }

.dw-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 17px
}

:root[data-theme="dark"] .dw-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b9d8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
}

/* message under a field that did not pass validation */
.dw-fmsg {
    margin: 7px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #c0121f
}
/* the error wins over the blue focus colour on the label */
.dw-field:has(.dw-bad) .dw-label {
    color: #c0121f
}

:root[data-theme="dark"] .dw-field:has(.dw-bad) .dw-label {
    color: #ff9aa2
}

:root[data-theme="dark"] .dw-fmsg {
    color: #ff9aa2
}

.dw-input.dw-bad, .dw-select.dw-bad {
    border-color: #c0121f
}

    .dw-input.dw-bad:focus, .dw-select.dw-bad:focus {
        border-color: #c0121f;
        box-shadow: 0 0 0 4px rgba(192,18,31,.15)
    }

:root[data-theme="dark"] .dw-input.dw-bad,
:root[data-theme="dark"] .dw-select.dw-bad {
    border-color: #ff7b85
}

    :root[data-theme="dark"] .dw-input.dw-bad:focus,
    :root[data-theme="dark"] .dw-select.dw-bad:focus {
        border-color: #ff7b85;
        box-shadow: 0 0 0 4px rgba(255,123,133,.2)
    }

/* show / hide password */
.dw-inp {
    position: relative
}

    .dw-inp .dw-input.dw-has-eye {
        padding-right: 46px
    }

.dw-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--dw-muted);
    cursor: pointer;
    transition: color .18s,background .18s
}

    .dw-eye:hover {
        color: #0072ed;
        background: var(--dw-surface2)
    }

    .dw-eye svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round
    }

/* ---------------------------------------------------------------------
   Buttons. The sweeping highlight is the one from the portal login card.
   --------------------------------------------------------------------- */
.dw-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 20px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    background: linear-gradient(135deg,var(--dw-btn1),var(--dw-btn2));
    box-shadow: 0 10px 22px -14px rgba(0,80,180,.95);
    transition: transform .15s,box-shadow .2s,filter .2s;
}

    .dw-btn:hover, .dw-btn:focus {
        color: #fff;
        text-decoration: none;
        transform: translateY(-1px);
        filter: brightness(1.08);
        box-shadow: 0 14px 26px -14px rgba(0,80,180,1)
    }

    .dw-btn:active {
        transform: translateY(1px)
    }

    .dw-btn svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2px;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .dw-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
        transform: skewX(-20deg);
        animation: dw-sweep 3.5s ease-in-out infinite;
        pointer-events: none
    }

@keyframes dw-sweep {
    0%,60% {
        left: -60%
    }

    100% {
        left: 130%
    }
}

.dw-btn[disabled] {
    opacity: .65;
    cursor: default;
    filter: none;
    transform: none
}

    .dw-btn[disabled]::after {
        display: none
    }

.dw-btn-ghost {
    background: none;
    box-shadow: none;
    color: var(--dw-muted);
    border: 1px solid var(--dw-line)
}

    .dw-btn-ghost::after {
        display: none
    }

    .dw-btn-ghost:hover, .dw-btn-ghost:focus {
        filter: none;
        color: #0072ed;
        border-color: #0072ed;
        box-shadow: none;
        background: none
    }

/* a row of field + button, side by side */
/* An input with its button on the same line. The button sits beside the input
   inside the field, so the label above and the validation message below belong
   to the field and never move it. Stretching matches the two heights without
   either one having a height written down. */
.dw-inline {
    display: flex;
    gap: 10px;
    align-items: stretch
}

    .dw-inline .dw-input, .dw-inline .dw-select {
        flex: 1 1 auto;
        width: auto
    }

    .dw-inline .dw-btn {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap
    }

/* ripple, from the point that was clicked */
.dw-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    background: rgba(255,255,255,.45);
    transform: scale(0);
    opacity: .75;
    animation: dw-rip .55s ease-out forwards
}

@keyframes dw-rip {
    to {
        transform: scale(18);
        opacity: 0
    }
}

.dw-spin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    animation: dw-sp .7s linear infinite
}

@keyframes dw-sp {
    to {
        transform: rotate(360deg)
    }
}

/* ---------------------------------------------------------------------
   Messages
   --------------------------------------------------------------------- */
.dw-alert, .dw-done {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 13px;
    font-size: 15.5px
}

.dw-alert {
    background: rgba(203,32,45,.08);
    border: 1px solid rgba(203,32,45,.3);
    color: #a3131f
}

.dw-done {
    background: rgba(16,140,80,.09);
    border: 1px solid rgba(16,140,80,.32);
    color: #0b6c41
}

:root[data-theme="dark"] .dw-alert {
    background: rgba(255,90,100,.14);
    border-color: rgba(255,120,130,.4);
    color: #ff9aa2
}

:root[data-theme="dark"] .dw-done {
    background: rgba(52,211,153,.14);
    border-color: rgba(52,211,153,.35);
    color: #6ee7b7
}

.dw-alert svg, .dw-done svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin-top: 1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1px;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* the check that draws itself after a vote */
.dw-ok {
    text-align: center;
    padding: 6px 0 2px
}

    .dw-ok svg {
        width: 84px;
        height: 84px;
        fill: none;
        stroke-width: 2.4px;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.dw-ok-c {
    stroke: #16a34a;
    stroke-dasharray: 170;
    stroke-dashoffset: 170;
    animation: dw-draw .85s cubic-bezier(.4,0,.2,1) forwards
}

.dw-ok-k {
    stroke: #16a34a;
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: dw-draw .45s .7s cubic-bezier(.4,0,.2,1) forwards
}

:root[data-theme="dark"] .dw-ok-c, :root[data-theme="dark"] .dw-ok-k {
    stroke: #4ade80
}

@keyframes dw-draw {
    to {
        stroke-dashoffset: 0
    }
}

.dw-ok-h {
    margin: 14px 0 4px;
    font-size: 20px;
    font-weight: 800;
    color: var(--dw-title)
}

.dw-ok-p {
    margin: 0;
    font-size: 15.5px;
    color: var(--dw-muted)
}

/* empty states */
.dw-empty {
    padding: 34px 20px;
    text-align: center
}

.dw-empty-ico {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--dw-surface2);
    border: 1px solid var(--dw-line);
    color: var(--dw-muted)
}

    .dw-empty-ico svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.dw-empty p {
    margin: 0;
    font-size: 15.5px;
    color: var(--dw-muted)
}

    .dw-empty p b {
        display: block;
        margin-bottom: 4px;
        font-size: 17px;
        color: var(--dw-title);
        font-weight: 700
    }

/* ---------------------------------------------------------------------
   Results
   --------------------------------------------------------------------- */
.dw-rule {
    margin: 26px 0 24px;
    border: 0;
    border-top: 1px solid var(--dw-line)
}

.dw-lead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 22px;
    border-radius: 16px;
    background: var(--dw-surface2);
    border: 1px solid var(--dw-line)
}

.dw-lead-k {
    margin: 0 0 3px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dw-muted)
}

.dw-lead-name {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--dw-title);
    line-height: 1.2
}

.dw-lead-sub {
    margin: 4px 0 0;
    font-size: 14.5px;
    color: var(--dw-muted)
}
/* the one big figure on the page: proportional digits, not tabular */
.dw-lead-num {
    margin: 0;
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--dw-bar)
}

    .dw-lead-num span {
        font-size: 26px;
        font-weight: 700;
        margin-left: 2px
    }

.dw-lead.dw-tie .dw-lead-num {
    font-size: 34px
}

.dw-part {
    margin-top: 18px
}

.dw-part-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 14.5px;
    color: var(--dw-muted)
}

    .dw-part-h b {
        color: var(--dw-ink);
        font-variant-numeric: tabular-nums
    }

.dw-meter {
    height: 10px;
    border-radius: 999px;
    background: var(--dw-track);
    overflow: hidden
}

    .dw-meter span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--dw-bar)
    }

.dw-res-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 26px 0 0
}

    .dw-res-h h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--dw-title)
    }

.dw-res-total {
    font-size: 14.5px;
    color: var(--dw-muted)
}

.dw-chart {
    margin: 20px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.dw-row {
    display: grid;
    grid-template-columns: minmax(96px,160px) 1fr;
    gap: 6px 14px;
    align-items: center;
    border-radius: 8px;
    transition: background .18s
}

    .dw-row:hover {
        background: var(--dw-surface2)
    }

.dw-row-name {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--dw-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.dw-row.dw-null .dw-row-name {
    color: var(--dw-muted);
    font-weight: 500;
    font-style: italic
}
/* the baseline sits on the edge of the cell, so it lines up with the bars exactly */
.dw-track {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 1px
}

    .dw-track::before {
        content: "";
        position: absolute;
        left: 0;
        top: -7px;
        bottom: -7px;
        width: 1px;
        background: var(--dw-line)
    }
/* thin bar, square at the baseline and rounded at the data end */
.dw-bar {
    height: 14px;
    min-width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--dw-bar);
    transition: filter .18s
}

.dw-row.dw-null .dw-bar {
    background: var(--dw-bar-null)
}

.dw-row:hover .dw-bar {
    filter: brightness(1.14)
}

.dw-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--dw-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums
}

.dw-pct {
    font-size: 14px;
    font-weight: 500;
    color: var(--dw-muted);
    margin-left: 5px
}

/* Growth. Without javascript no class is added, so the bars are drawn at
   their final width straight away and the numbers are the real ones. */
@keyframes dw-grow {
    from {
        width: 0
    }

    to {
        width: var(--w)
    }
}

.dw-bar, .dw-meter span {
    width: var(--w)
}

.dw-armed .dw-bar, .dw-armed .dw-meter span {
    width: 0
}

.dw-armed .dw-val {
    opacity: 0
}

.dw-run .dw-bar {
    animation: dw-grow 1.2s cubic-bezier(.45,.05,.25,1) both;
    animation-delay: var(--d,0ms)
}

.dw-run .dw-meter span {
    animation: dw-grow 1.3s cubic-bezier(.45,.05,.25,1) both
}
/* the value appears only once its own bar has nearly finished growing */
.dw-run .dw-val {
    animation: dw-fade .5s ease both;
    animation-delay: calc(var(--d,0ms) + 850ms)
}

@keyframes dw-fade {
    from {
        opacity: 0;
        transform: translateX(-8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* table: the exact figures, and the accessible twin of the chart */
.dw-table-wrap {
    margin-top: 26px;
    border: 1px solid var(--dw-line);
    border-radius: 14px;
    overflow: hidden
}

.dw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
    margin: 0
}

    .dw-table th, .dw-table td {
        padding: 11px 16px;
        text-align: left;
        border: 0
    }

    .dw-table th {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--dw-muted);
        background: var(--dw-surface2);
        border-bottom: 1px solid var(--dw-line)
    }

    .dw-table td {
        border-bottom: 1px solid var(--dw-line);
        color: var(--dw-ink)
    }

    .dw-table tbody tr {
        transition: background .18s
    }

        .dw-table tbody tr:hover {
            background: var(--dw-surface2)
        }

        .dw-table tbody tr:last-child td {
            border-bottom: 0
        }

    .dw-table td:last-child, .dw-table th:last-child {
        text-align: right;
        font-variant-numeric: tabular-nums
    }

    .dw-table tr.dw-null td:first-child {
        color: var(--dw-muted);
        font-style: italic
    }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.dw-footer {
    margin-top: auto;
    padding: 18px 26px;
    text-align: center;
    font-size: 14.5px;
    color: var(--dw-muted);
    border-top: 1px solid var(--dw-line);
    background: var(--dw-surface)
}

/* ---------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------- */
@media (max-width:680px) {
    .dw-header {
        padding: 0 18px;
        gap: 12px
    }

    .dw-nav {
        gap: 14px
    }

        .dw-nav a {
            display: none
        }

    .dw-main {
        padding: 34px 14px
    }

    .dw-card {
        padding: 24px 20px 22px
    }

    .dw-row {
        grid-template-columns: 1fr
    }

    .dw-track::before {
        display: none
    }

    .dw-inline {
        flex-direction: column
    }

        .dw-inline .dw-btn {
            width: 100%
        }

    .dw-lead-num {
        font-size: 42px
    }
}

/* ---------------------------------------------------------------------
   Printing the results: only the figures, on a white page.
   --------------------------------------------------------------------- */
@media print {
    .dw-header, .dw-footer, .dw-no-print {
        display: none !important
    }

    body {
        background: #fff;
        color: #000;
        display: block
    }

    .dw-main {
        padding: 0
    }

    .dw-card {
        max-width: none;
        border: 0;
        box-shadow: none;
        padding: 0;
        animation: none
    }

    .dw-bar {
        background: #333 !important;
        width: var(--w) !important;
        animation: none !important
    }

    .dw-row.dw-null .dw-bar {
        background: #aaa !important
    }

    .dw-val {
        opacity: 1 !important;
        animation: none !important
    }

    .dw-lead-num {
        color: #000
    }
}

/* ---------------------------------------------------------------------
   Reduced motion: everything lands on its final state at once.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
    .dw-cp path {
        animation: none
    }

    .dw-chip-logo .sweep {
        animation: none;
        opacity: 0
    }

    .dw-btn::after, .dw-ripple {
        display: none
    }

    .dw-card, .dw-stagger > * {
        animation: none
    }

    .dw-ok-c, .dw-ok-k {
        animation: none;
        stroke-dashoffset: 0
    }

    .dw-btn:hover {
        transform: none
    }

    .dw-armed .dw-bar, .dw-armed .dw-meter span {
        width: var(--w)
    }

    .dw-armed .dw-val {
        opacity: 1
    }

    .dw-run .dw-bar, .dw-run .dw-meter span, .dw-run .dw-val {
        animation: none
    }
}