:root {
    --zg:#064941;
    --zgd:#022b27;
    --zgl:#0a6d62;
    --cream:#eee9d3;
    --orange:#e26625;
    --red:#d44032;
    --black:#080a0b;
    --panel:#131719;
    --metal:#8f9698;
}

* {
    box-sizing:border-box;
}

body.zephyr-admin {
    margin:0;
    min-height:100vh;
    color:#eae7dd;
    background:
        radial-gradient(circle at 50% -300px,#25302f 0,#111616 520px,#070909 100%);
    font-family:Arial,Helvetica,sans-serif;
}

.zephyr-top {
    border-bottom:1px solid #32393a;
    background:linear-gradient(#151a1b,#090c0c);
    box-shadow:0 8px 28px #0008;
}

.zephyr-top-inner,
.zephyr-shell {
    width:min(1480px,calc(100% - 40px));
    margin:auto;
}

.zephyr-top-inner {
    min-height:100px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.superuser-label {
    color:var(--orange);
    font-size:10px;
    font-weight:900;
    letter-spacing:.22em;
}

.zephyr-top h1 {
    margin:4px 0 2px;
    color:var(--cream);
    font:700 28px Georgia,serif;
}

.zephyr-top p {
    margin:0;
    color:#879290;
    font-size:11px;
}

.zephyr-admin-actions {
    display:flex;
    align-items:center;
    gap:12px;
}

.zephyr-admin-actions a {
    padding:10px 17px;
    border:1px solid #41494a;
    border-radius:999px;
    color:#eee;
    text-decoration:none;
}

.zephyr-admin-actions .refresh-control {
    background:var(--orange);
    border-color:var(--orange);
    color:white;
}

.live-status {
    display:flex;
    align-items:center;
    gap:7px;
    margin-right:8px;
    color:#89928f;
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
}

.live-status i {
    width:9px;
    height:9px;
    border-radius:50%;
    background:#43e078;
    box-shadow:0 0 12px #43e078;
}

.zephyr-shell {
    padding:30px 0 60px;
}


/* =========================================================
   BINNACLE
   ========================================================= */

.zephyr-binnacle {
    position:relative;
    display:grid;
    grid-template-columns:220px minmax(590px,1fr) 220px;
    align-items:center;
    gap:24px;
    padding:34px 38px 28px;
    margin-bottom:18px;
    border:1px solid #3d4444;
    border-radius:18px;
    background:
        linear-gradient(180deg,#202525,#101414 46%,#171b1b);
    box-shadow:
        inset 0 2px #ffffff09,
        inset 0 -12px 25px #0009,
        0 20px 45px #0007;
}

.zephyr-binnacle::before {
    content:"";
    position:absolute;
    left:28px;
    right:28px;
    top:14px;
    height:5px;
    border-radius:4px;
    background:
        linear-gradient(90deg,
        transparent,
        #46281a,
        #a7663a,
        #4b2a19,
        transparent);
    opacity:.65;
}

.main-instruments {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px;
}

.side-instruments {
    display:grid;
    gap:22px;
}

.main-instruments article,
.side-instruments article {
    text-align:center;
}

.main-instruments h2,
.side-instruments h3 {
    margin:12px 0 3px;
    color:#ddd8c3;
    font-size:12px;
    letter-spacing:.14em;
}

.main-instruments p,
.side-instruments p {
    margin:0;
    color:#818d8a;
    font-size:10px;
}


/* =========================================================
   CLOCKS
   ========================================================= */

.zephyr-clock {
    position:relative;
    margin:auto;
    overflow:hidden;
    border-radius:50%;
    background:
        radial-gradient(circle at 45% 38%,#0d6b60aa 0,transparent 38%),
        repeating-conic-gradient(
            from 235deg,
            var(--cream) 0deg 1.1deg,
            transparent 1.1deg 7deg
        ),
        radial-gradient(
            circle,
            #0b6056 0,
            var(--zg) 46%,
            var(--zgd) 75%,
            #041716 100%
        );
    border:7px solid #6f7779;
    box-shadow:
        inset 0 0 35px #000,
        inset 0 0 4px #fff4,
        0 0 0 2px #111,
        0 0 0 4px #959b9b,
        0 10px 24px #000c;
}

.main-clock {
    width:300px;
    height:300px;
}

.small-clock {
    width:150px;
    height:150px;
    border-width:5px;
}

.zephyr-clock::after {
    content:"";
    position:absolute;
    inset:11%;
    border:1px solid #f6edc520;
    border-radius:50%;
}

.needle {
    position:absolute;
    z-index:10;
    left:50%;
    top:50%;
    width:4px;
    height:40%;
    margin-left:-2px;
    border-radius:3px;
    background:
        linear-gradient(to top,#f0ead5 0 72%,#ff6631 73%);
    box-shadow:0 0 4px #000;
    transform:translateY(-100%) rotate(-125deg);
    transform-origin:50% 100%;
    transition:transform .7s cubic-bezier(.2,.8,.2,1);
}

.hub {
    position:absolute;
    z-index:12;
    left:50%;
    top:50%;
    width:22px;
    height:22px;
    transform:translate(-50%,-50%);
    border:4px solid #92999b;
    border-radius:50%;
    background:#121515;
    box-shadow:0 3px 6px #000;
}

.small-clock .hub {
    width:13px;
    height:13px;
    border-width:3px;
}

.zephyr-maker {
    position:absolute;
    z-index:5;
    left:50%;
    bottom:24%;
    transform:translateX(-50%);
    color:#dad3b8;
    font:700 10px Georgia,serif;
    letter-spacing:.16em;
}

.small-clock .zephyr-maker {
    bottom:23%;
    font-size:6px;
}

.reading {
    position:absolute;
    z-index:7;
    left:50%;
    bottom:11%;
    transform:translateX(-50%);
    min-width:46px;
    padding:3px 5px;
    border:1px solid #68624f;
    border-radius:2px;
    background:#030706;
    color:#e5ddb9;
    font:700 11px "Courier New",monospace;
    box-shadow:inset 0 0 8px #000;
}

.large-reading {
    min-width:60px;
    padding:5px 8px;
    font-size:16px;
}

.dial-unit {
    position:absolute;
    left:50%;
    bottom:4%;
    transform:translateX(-50%);
    color:#aaa58a;
    font-size:8px;
    letter-spacing:.1em;
}

.dial-number,
.tick-label {
    position:absolute;
    z-index:5;
    color:var(--cream);
    text-shadow:0 1px 2px #000;
}

.dial-number {
    font-size:15px;
}

.n0 { left:12%; bottom:24%; }
.n20 { left:14%; top:32%; }
.n40 { left:32%; top:14%; }
.n60 { right:30%; top:14%; }
.n80 { right:13%; top:32%; }
.n100 { right:8%; bottom:24%; }

.tick-label {
    font-size:8px;
}

.t0 { left:12%; bottom:27%; }
.t50 { left:45%; top:12%; }
.t100 { right:7%; bottom:27%; }


/* =========================================================
   WARNING BANK
   ========================================================= */

.warning-bank {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
    margin-bottom:18px;
}

.warning-bank > div {
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid #363d3d;
    border-radius:5px;
    background:linear-gradient(#1b2020,#101313);
}

.warning-bank span {
    color:#808c89;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

.warning-bank strong {
    color:#eee9d5;
    font-size:11px;
}

.ok-running {
    color:#45dc78 !important;
}

.ok-stopped {
    color:#f05d52 !important;
}


/* =========================================================
   COUNTERS
   ========================================================= */

.zephyr-counters {
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:10px;
    margin-bottom:20px;
}

.zephyr-counters article {
    min-width:0;
    padding:15px;
    border:1px solid #333b3b;
    border-radius:8px;
    background:linear-gradient(145deg,#1b2020,#101414);
}

.zephyr-counters span {
    display:block;
    color:#7f8b88;
    font-size:9px;
    text-transform:uppercase;
}

.zephyr-counters strong {
    display:block;
    margin:6px 0 4px;
    color:var(--cream);
    font:700 23px Georgia,serif;
}

.zephyr-counters small {
    color:#697572;
    font-size:9px;
}


/* =========================================================
   PANELS
   ========================================================= */

.detail-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    margin-bottom:20px;
}

.zephyr-panel {
    overflow:hidden;
    border:1px solid #353d3d;
    border-radius:10px;
    background:#121717;
    box-shadow:0 10px 26px #0005;
}

.zephyr-panel > header {
    padding:17px 19px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #303737;
    background:linear-gradient(#1e2424,#151a1a);
}

.zephyr-panel header small {
    display:block;
    color:var(--orange);
    font-size:8px;
    font-weight:900;
    letter-spacing:.16em;
}

.zephyr-panel header h2 {
    margin:3px 0 0;
    color:#ece6d1;
    font-size:15px;
}

.zephyr-panel header i {
    width:9px;
    height:9px;
    border-radius:50%;
    background:#49df7a;
    box-shadow:0 0 10px #49df7a;
}

.zephyr-panel dl {
    margin:0;
    padding:10px 19px 16px;
}

.zephyr-panel dl > div {
    padding:10px 0;
    display:grid;
    grid-template-columns:150px 1fr;
    gap:15px;
    border-bottom:1px solid #283030;
}

.zephyr-panel dt {
    color:#84908d;
}

.zephyr-panel dd {
    margin:0;
    color:#ebe6d5;
    font-weight:700;
    text-align:right;
    overflow-wrap:anywhere;
}


/* =========================================================
   TABLES
   ========================================================= */

.table-scroll {
    overflow-x:auto;
}

.zephyr-panel table {
    width:100%;
    border-collapse:collapse;
}

.zephyr-panel th,
.zephyr-panel td {
    padding:11px 13px;
    border-bottom:1px solid #283030;
    text-align:left;
    white-space:nowrap;
}

.zephyr-panel th {
    color:#788582;
    font-size:8px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.zephyr-panel td {
    color:#d7d3c5;
    font-size:10px;
}

.zephyr-panel td b {
    color:#f0ead2;
}


/* =========================================================
   FOOTER
   ========================================================= */

.zephyr-footer {
    padding:26px;
    color:#5d6966;
    text-align:center;
    font-size:9px;
    letter-spacing:.08em;
}

.zephyr-footer span {
    margin-right:10px;
    color:#a49e87;
    font:700 11px Georgia,serif;
    letter-spacing:.18em;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1280px) {

    .zephyr-binnacle {
        grid-template-columns:175px 1fr 175px;
    }

    .main-clock {
        width:250px;
        height:250px;
    }

    .small-clock {
        width:125px;
        height:125px;
    }

    .zephyr-counters {
        grid-template-columns:repeat(4,1fr);
    }
}

@media(max-width:920px) {

    .zephyr-binnacle {
        grid-template-columns:1fr;
    }

    .side-instruments {
        grid-template-columns:repeat(2,1fr);
    }

    .warning-bank {
        grid-template-columns:repeat(3,1fr);
    }

    .detail-grid {
        grid-template-columns:1fr;
    }
}

@media(max-width:650px) {

    .zephyr-top-inner,
    .zephyr-shell {
        width:calc(100% - 20px);
    }

    .zephyr-top-inner {
        padding:14px 0;
        align-items:flex-start;
        flex-direction:column;
    }

    .main-instruments {
        grid-template-columns:1fr;
    }

    .warning-bank,
    .zephyr-counters {
        grid-template-columns:repeat(2,1fr);
    }

    .zephyr-panel dl > div {
        grid-template-columns:1fr;
        gap:3px;
    }

    .zephyr-panel dd {
        text-align:left;
    }
}


/* =========================================================
   ZEPHYR ESPRIT / VEGLIA DIAL REFINEMENT
   18 AUGUST 2026

   Overrides previous clock-face artwork only.
   ========================================================= */


/* ---------------------------------------------------------
   FACE

   No radial spokes.

   The face is deliberately greener/turquoise, based on the
   classic Lotus/VEGLIA instruments.
   --------------------------------------------------------- */

.zephyr-clock {

    overflow: hidden !important;

    border:
        6px solid #777d7e !important;

    background:
        radial-gradient(
            circle at 38% 30%,
            rgba(255,255,255,.11) 0,
            rgba(255,255,255,.035) 23%,
            transparent 44%
        ),

        radial-gradient(
            circle at 50% 48%,
            #08776c 0%,
            #076d63 30%,
            #055c54 62%,
            #034b45 82%,
            #023c38 100%
        ) !important;

    box-shadow:
        inset 0 0 22px rgba(0,0,0,.48),
        inset 0 0 3px rgba(255,255,255,.45),
        0 0 0 2px #16191a,
        0 0 0 4px #989d9e,
        0 7px 20px rgba(0,0,0,.7) !important;
}


/* ---------------------------------------------------------
   SHORT PERIMETER TICKS

   The radial mask is the important part:
   ticks exist ONLY near the rim and do not run to the centre.
   --------------------------------------------------------- */

.zephyr-clock::before {

    content: "";

    position: absolute;

    z-index: 3;

    inset: 7%;

    border-radius: 50%;

    background:
        repeating-conic-gradient(
            from 230deg,
            rgba(239,236,214,.95) 0deg 1.15deg,
            transparent 1.15deg 6.25deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 78%,
            #000 79% 100%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 78%,
            #000 79% 100%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   INNER WHITE INSTRUMENT RING + HIGH RANGE RED SECTOR
   --------------------------------------------------------- */

.zephyr-clock::after {

    content: "";

    position: absolute;

    z-index: 4;

    inset: 11%;

    border-radius: 50%;

    border:
        2px solid rgba(238,235,213,.82);

    background:
        conic-gradient(
            from 230deg,
            transparent 0deg 221deg,
            rgba(209,52,39,.92) 221deg 244deg,
            transparent 244deg 360deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 87%,
            #000 88% 100%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 87%,
            #000 88% 100%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   NEEDLE - PERIOD WHITE/CREAM RATHER THAN ORANGE
   --------------------------------------------------------- */

.zephyr-clock .needle {

    z-index: 10 !important;

    width: 4px !important;

    background:
        linear-gradient(
            to top,
            #e8e5d8 0%,
            #faf7e9 76%,
            #e5e1d4 100%
        ) !important;

    box-shadow:
        1px 2px 3px rgba(0,0,0,.8) !important;
}


/* Longer main needles, like the original instruments */

.main-clock .needle {

    height: 42% !important;
}


/* ---------------------------------------------------------
   CENTRE BOSS
   --------------------------------------------------------- */

.zephyr-clock .hub {

    z-index: 12 !important;

    border-color:
        #868d8e !important;

    background:
        radial-gradient(
            circle at 40% 35%,
            #353a3b,
            #111516 68%
        ) !important;

    box-shadow:
        0 2px 5px #000,
        inset 0 1px 2px rgba(255,255,255,.22) !important;
}


/* ---------------------------------------------------------
   MAIN NUMBERS
   --------------------------------------------------------- */

.main-clock .dial-number {

    z-index: 7;

    color:
        #f0eddb !important;

    font-size:
        17px !important;

    font-weight:
        700;

    text-shadow:
        0 1px 2px rgba(0,0,0,.8);
}


/*
 * Position the scale like an old speedo/tacho rather than
 * evenly around a modern digital gauge.
 */

.main-clock .n0 {

    left: 12% !important;
    bottom: 24% !important;
}

.main-clock .n20 {

    left: 13% !important;
    top: 34% !important;
}

.main-clock .n40 {

    left: 30% !important;
    top: 15% !important;
}

.main-clock .n60 {

    right: 29% !important;
    top: 15% !important;
}

.main-clock .n80 {

    right: 12% !important;
    top: 34% !important;
}

.main-clock .n100 {

    right: 8% !important;
    bottom: 24% !important;
}


/* ---------------------------------------------------------
   SMALL CLOCK NUMBERS
   --------------------------------------------------------- */

.small-clock .tick-label {

    z-index: 7;

    color:
        #f0eddb !important;

    font-size:
        8px !important;

    font-weight:
        700;

    text-shadow:
        0 1px 2px #000;
}


.small-clock .t0 {

    left: 10%;
    bottom: 24%;
}

.small-clock .t20 {

    left: 10%;
    top: 36%;
}

.small-clock .t40 {

    left: 29%;
    top: 16%;
}

.small-clock .t60 {

    right: 28%;
    top: 16%;
}

.small-clock .t80 {

    right: 9%;
    top: 36%;
}

.small-clock .t100 {

    right: 5%;
    bottom: 24%;
}


/* ---------------------------------------------------------
   ZEPHYR MAKER MARK

   Smaller and more like the original manufacturer's mark.
   --------------------------------------------------------- */

.zephyr-clock .zephyr-maker {

    z-index: 7;

    bottom:
        23% !important;

    color:
        rgba(238,235,215,.80) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        7px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .16em !important;
}


.small-clock .zephyr-maker {

    bottom:
        21% !important;

    font-size:
        5px !important;
}


/* ---------------------------------------------------------
   DIGITAL WINDOW

   Retained because these are computer instruments, but made
   less visually dominant.
   --------------------------------------------------------- */

.zephyr-clock .reading {

    z-index: 8;

    bottom:
        10% !important;

    min-width:
        48px;

    padding:
        3px 6px !important;

    border:
        1px solid #676453 !important;

    background:
        #07100e !important;

    color:
        #efe4b7 !important;

    font-family:
        "Courier New",
        monospace !important;

    font-size:
        10px !important;

    box-shadow:
        inset 0 0 5px #000 !important;
}


.main-clock .large-reading {

    min-width:
        60px;

    padding:
        4px 7px !important;

    font-size:
        14px !important;
}


/* Unit lettering low on the dial */

.main-clock .dial-unit {

    z-index: 7;

    bottom:
        3.5% !important;

    color:
        rgba(238,235,215,.72) !important;

    font-size:
        7px !important;

    letter-spacing:
        .08em !important;
}


/* ---------------------------------------------------------
   SUBTLE GLASS REFLECTION

   Gives a little of the photographed instrument appearance
   without obscuring the readings.
   --------------------------------------------------------- */

.main-clock {

    position: relative;
}


.main-clock > * {

    position: absolute;
}


.zephyr-clock {

    isolation: isolate;
}


/* =========================================================
   END ZEPHYR ESPRIT DIAL REFINEMENT
   ========================================================= */



/* ==========================================================
   ZEPHYR VEGLIA FACE V2
   Reference: classic Lotus green instrument
   ========================================================== */


/*
 * Flat period green face.
 * No radial web/spokes.
 */

.zephyr-clock {

    background:
        radial-gradient(
            circle at 40% 31%,
            rgba(255,255,255,.13) 0,
            rgba(255,255,255,.045) 23%,
            transparent 46%
        ),
        radial-gradient(
            circle,
            #087b70 0%,
            #087268 35%,
            #06675e 60%,
            #05564f 82%,
            #03463f 100%
        ) !important;

    border:
        5px solid #747b7e !important;

    box-shadow:
        inset 0 0 24px rgba(0,0,0,.46),
        inset 0 0 2px rgba(255,255,255,.55),
        0 0 0 2px #171a1b,
        0 0 0 4px #969d9f,
        0 9px 22px rgba(0,0,0,.72) !important;
}


/*
 * White circular scale ring.
 */

.zephyr-clock::before {

    content: "";

    position: absolute;

    z-index: 3;

    inset: 8.5%;

    border:
        2px solid rgba(244,241,221,.92);

    border-radius: 50%;

    background:
        repeating-conic-gradient(
            from 225deg,

            rgba(244,241,221,.95)
                0deg 1.1deg,

            transparent
                1.1deg 5deg
        );

    -webkit-mask:
        radial-gradient(
            circle,

            transparent 0 84%,

            #000 84.5% 100%
        );

    mask:
        radial-gradient(
            circle,

            transparent 0 84%,

            #000 84.5% 100%
        );

    pointer-events: none;
}


/*
 * Separate inner ring and red maximum section.
 *
 * The red section now lives INSIDE the scale ring instead of
 * floating somewhere on the clock face.
 */

.zephyr-clock::after {

    content: "";

    position: absolute;

    z-index: 4;

    inset: 10%;

    border-radius: 50%;

    background:
        conic-gradient(
            from 225deg,

            transparent
                0deg 250deg,

            #d84639
                250deg 272deg,

            transparent
                272deg 360deg
        );

    -webkit-mask:
        radial-gradient(
            circle,

            transparent 0 86%,

            #000 87% 100%
        );

    mask:
        radial-gradient(
            circle,

            transparent 0 86%,

            #000 87% 100%
        );

    pointer-events: none;
}


/* ==========================================================
   MAIN SCALE NUMBERS
   ========================================================== */

.main-clock .dial-number {

    z-index: 6 !important;

    color:
        #f6f2dd !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        18px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.75);
}


/*
 * Exact circumference layout:
 *
 *                  40        60
 *
 *            20                  80
 *
 *       0                              100
 */

.main-clock .n0 {
    left: 10.5% !important;
    top: 68% !important;
    bottom: auto !important;
}

.main-clock .n20 {
    left: 13.5% !important;
    top: 38% !important;
}

.main-clock .n40 {
    left: 33% !important;
    top: 16% !important;
}

.main-clock .n60 {
    right: 32% !important;
    top: 16% !important;
}

.main-clock .n80 {
    right: 13% !important;
    top: 38% !important;
}

.main-clock .n100 {
    right: 6.5% !important;
    top: 68% !important;
    bottom: auto !important;
}


/* ==========================================================
   SMALL SCALE NUMBERS
   Same geometry, scaled down.
   ========================================================== */

.small-clock .tick-label {

    z-index: 6 !important;

    color:
        #f6f2dd !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        8px !important;

    line-height:
        1 !important;
}


.small-clock .t0 {
    left: 9% !important;
    top: 68% !important;
    bottom: auto !important;
}

.small-clock .t20 {
    left: 12% !important;
    top: 38% !important;
}

.small-clock .t40 {
    left: 32% !important;
    top: 16% !important;
}

.small-clock .t60 {
    right: 31% !important;
    top: 16% !important;
}

.small-clock .t80 {
    right: 11% !important;
    top: 38% !important;
}

.small-clock .t100 {
    right: 4% !important;
    top: 68% !important;
    bottom: auto !important;
}


/* ==========================================================
   PERIOD NEEDLE
   Wider at the base, tapered-looking cream/ivory blade.
   ========================================================== */

.zephyr-clock .needle {

    z-index: 10 !important;

    width:
        7px !important;

    height:
        43% !important;

    margin-left:
        -3.5px !important;

    border-radius:
        80% 80% 18% 18% !important;

    background:
        linear-gradient(
            90deg,

            #bdb9ab 0%,
            #f7f3e5 30%,
            #fffdf1 53%,
            #d4d0c3 100%
        ) !important;

    clip-path:
        polygon(
            42% 0%,
            58% 0%,
            78% 100%,
            22% 100%
        );

    box-shadow:
        2px 3px 4px rgba(0,0,0,.72) !important;

    transform-origin:
        50% 100% !important;
}


.small-clock .needle {

    width:
        5px !important;

    margin-left:
        -2.5px !important;
}


/*
 * Bigger old-fashioned central boss.
 */

.main-clock .hub {

    width:
        24px !important;

    height:
        24px !important;

    border:
        4px solid #82898b !important;

    background:
        radial-gradient(
            circle at 38% 32%,
            #363b3c,
            #111516 67%
        ) !important;

    box-shadow:
        0 2px 5px #000,
        inset 0 1px 2px rgba(255,255,255,.24) !important;
}


/*
 * Subtle manufacturer lettering.
 */

.main-clock .zephyr-maker {

    bottom:
        24% !important;

    color:
        rgba(242,238,216,.82) !important;

    font-size:
        7px !important;

    letter-spacing:
        .13em !important;
}


/*
 * Digital window is deliberately lower and smaller so that
 * it does not interfere with the circular scale.
 */

.main-clock .reading {

    bottom:
        10.5% !important;

    min-width:
        58px !important;

    padding:
        4px 7px !important;

    font-size:
        13px !important;
}


.main-clock .dial-unit {

    bottom:
        3.5% !important;
}


/* ==========================================================
   END ZEPHYR VEGLIA FACE V2
   ========================================================== */



/* ==========================================================
   ZEPHYR REAL SVG INSTRUMENT FACE
   ========================================================== */


/*
 * The old CSS pseudo artwork is explicitly disabled.
 */

.zephyr-clock::before,
.zephyr-clock::after {
    content: none !important;
    display: none !important;
}


/*
 * Closer to the photographed Esprit/Veglia green.
 */

.zephyr-clock {

    overflow:
        hidden !important;

    background:
        radial-gradient(
            circle at 36% 27%,
            rgba(255,255,255,.13),
            rgba(255,255,255,.045) 23%,
            transparent 46%
        ),
        radial-gradient(
            circle at 50% 54%,
            #087a70 0%,
            #077168 35%,
            #05655e 65%,
            #044f49 88%,
            #033d39 100%
        ) !important;

    border:
        5px solid #62696b !important;

    box-shadow:
        inset 0 0 23px rgba(0,0,0,.5),
        inset 0 0 3px rgba(255,255,255,.5),
        0 0 0 2px #111516,
        0 0 0 4px #919899,
        0 8px 20px rgba(0,0,0,.72)
        !important;
}


/* ----------------------------------------------------------
   ACTUAL SVG SCALE
   ---------------------------------------------------------- */

.zephyr-svg-scale {

    position:
        absolute !important;

    z-index:
        3 !important;

    inset:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    display:
        block !important;

    overflow:
        visible !important;

    pointer-events:
        none !important;
}


.zephyr-svg-ring {

    fill:
        none;

    stroke:
        #f1eedb;

    stroke-width:
        1.7;

    opacity:
        .95;
}


.zephyr-svg-inner-ring {

    fill:
        none;

    stroke:
        #eee9d0;

    stroke-width:
        .7;

    opacity:
        .55;
}


.zephyr-svg-tick {

    stroke:
        #f2eed9;

    stroke-width:
        .8;

    stroke-linecap:
        square;

    opacity:
        .92;
}


.zephyr-svg-tick.medium {

    stroke-width:
        1.2;
}


.zephyr-svg-tick.major {

    stroke-width:
        1.8;
}


.zephyr-svg-redline {

    fill:
        none;

    stroke:
        #df4638;

    stroke-width:
        7;

    stroke-linecap:
        butt;

    opacity:
        .98;
}


/* ----------------------------------------------------------
   NUMBERS

   Move them into one clean circular sweep.
   ---------------------------------------------------------- */

.main-clock .dial-number {

    z-index:
        6 !important;

    color:
        #f5f1dd !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        17px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;
}


.main-clock .n0 {
    left: 13% !important;
    top: 67% !important;
}

.main-clock .n20 {
    left: 16% !important;
    top: 39% !important;
}

.main-clock .n40 {
    left: 34% !important;
    top: 20% !important;
}

.main-clock .n60 {
    right: 33% !important;
    top: 20% !important;
}

.main-clock .n80 {
    right: 15% !important;
    top: 39% !important;
}

.main-clock .n100 {
    right: 9% !important;
    top: 67% !important;
}


/*
 * Same geometry on auxiliary instruments.
 */

.small-clock .tick-label {

    z-index:
        6 !important;

    color:
        #f5f1dd !important;

    font-size:
        7px !important;

    font-weight:
        700 !important;
}


.small-clock .t0 {
    left: 12% !important;
    top: 67% !important;
}

.small-clock .t20 {
    left: 15% !important;
    top: 39% !important;
}

.small-clock .t40 {
    left: 33% !important;
    top: 20% !important;
}

.small-clock .t60 {
    right: 32% !important;
    top: 20% !important;
}

.small-clock .t80 {
    right: 14% !important;
    top: 39% !important;
}

.small-clock .t100 {
    right: 6% !important;
    top: 67% !important;
}


/* ----------------------------------------------------------
   PERIOD NEEDLE

   Broad body and much closer to the photograph.
   ---------------------------------------------------------- */

.zephyr-clock .needle {

    z-index:
        10 !important;

    width:
        10px !important;

    height:
        42% !important;

    margin-left:
        -5px !important;

    border-radius:
        0 !important;

    background:
        linear-gradient(
            90deg,

            #b9b5a8 0%,
            #e2dfd1 22%,
            #fffcef 48%,
            #eeeadd 67%,
            #a9a69b 100%
        ) !important;

    clip-path:
        polygon(
            45% 0%,
            55% 0%,
            78% 100%,
            22% 100%
        ) !important;

    filter:
        drop-shadow(
            2px 2px 1px rgba(0,0,0,.65)
        );

    transform-origin:
        50% 100% !important;
}


.small-clock .needle {

    width:
        7px !important;

    margin-left:
        -3.5px !important;
}


/*
 * More substantial metal centre pivot.
 */

.main-clock .hub {

    z-index:
        12 !important;

    width:
        25px !important;

    height:
        25px !important;

    border:
        4px solid #83898b !important;

    background:
        radial-gradient(
            circle at 36% 30%,
            #3b4041,
            #151919 62%,
            #080a0a 100%
        ) !important;

    box-shadow:
        0 2px 6px rgba(0,0,0,.9),
        inset 0 1px 2px rgba(255,255,255,.3)
        !important;
}


.small-clock .hub {

    z-index:
        12 !important;

    border-color:
        #83898b !important;
}


/*
 * ZEPHYR should resemble a tiny maker's mark rather than
 * being one of the main readings.
 */

.zephyr-clock .zephyr-maker {

    z-index:
        7 !important;

    color:
        rgba(243,239,217,.78) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        6px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .15em !important;
}


.main-clock .zephyr-maker {

    bottom:
        24% !important;
}


/*
 * Keep the computer readout but make it look like a small
 * mechanical/digital counter aperture.
 */

.main-clock .reading {

    z-index:
        8 !important;

    bottom:
        10% !important;

    min-width:
        60px !important;

    border:
        1px solid #8d8466 !important;

    background:
        #050908 !important;

    color:
        #f0e6b8 !important;

    font-size:
        13px !important;
}


/* ==========================================================
   END REAL SVG ZEPHYR INSTRUMENT FACE
   ========================================================== */



/* ==========================================================
   ZEPHYR DIAL FINAL NEEDLE / NUMBER REFINEMENT
   ========================================================== */


/*
 * NUMBER ARC
 * Bring all figures slightly inward and make the lower
 * figures follow the Veglia reference more naturally.
 */

.main-clock .n0 {
    left: 12.5% !important;
    top: 69.5% !important;
}

.main-clock .n20 {
    left: 15.5% !important;
    top: 39.5% !important;
}

.main-clock .n40 {
    left: 34.5% !important;
    top: 20.5% !important;
}

.main-clock .n60 {
    right: 33.5% !important;
    top: 20.5% !important;
}

.main-clock .n80 {
    right: 15% !important;
    top: 39.5% !important;
}

.main-clock .n100 {
    right: 8.5% !important;
    top: 69.5% !important;
}


/*
 * Auxiliary clock numbers follow the same geometry.
 */

.small-clock .t0 {
    left: 11.5% !important;
    top: 69% !important;
}

.small-clock .t20 {
    left: 14.5% !important;
    top: 39.5% !important;
}

.small-clock .t40 {
    left: 33.5% !important;
    top: 20% !important;
}

.small-clock .t60 {
    right: 32.5% !important;
    top: 20% !important;
}

.small-clock .t80 {
    right: 13.5% !important;
    top: 39.5% !important;
}

.small-clock .t100 {
    right: 5.5% !important;
    top: 69% !important;
}


/* ==========================================================
   VEGLIA-STYLE NEEDLE
   Longer, cream, broad at the hub, fine at the tip.
   ========================================================== */

.zephyr-clock .needle {

    width:
        12px !important;

    height:
        46% !important;

    margin-left:
        -6px !important;

    background:
        linear-gradient(
            90deg,
            #aaa69a 0%,
            #d7d3c5 15%,
            #f7f3e5 42%,
            #fffdf2 54%,
            #e7e3d5 74%,
            #aaa69a 100%
        ) !important;

    clip-path:
        polygon(
            47% 0%,
            53% 0%,
            71% 87%,
            83% 100%,
            17% 100%,
            29% 87%
        ) !important;

    filter:
        drop-shadow(
            2px 2px 1px rgba(0,0,0,.72)
        );

    transform-origin:
        50% 100% !important;
}


/*
 * Short counterweight behind the pivot, like the
 * physical Veglia needle.
 */

.zephyr-clock .needle::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -17%;

    width: 7px;

    height: 22%;

    transform:
        translateX(-50%);

    border-radius:
        0 0 5px 5px;

    background:
        linear-gradient(
            90deg,
            #9d998f,
            #e8e4d7 45%,
            #b4b0a5
        );
}


/*
 * Slightly heavier centre pivot.
 */

.main-clock .hub {

    width:
        27px !important;

    height:
        27px !important;

    border:
        4px solid #7d8587 !important;

    background:
        radial-gradient(
            circle at 37% 31%,
            #454a4b 0%,
            #1b1f20 50%,
            #080a0a 100%
        ) !important;
}


.small-clock .hub {

    width:
        15px !important;

    height:
        15px !important;
}


/*
 * Keep scale figures above the SVG artwork but below needle.
 */

.main-clock .dial-number,
.small-clock .tick-label {
    z-index: 7 !important;
}


/* ==========================================================
   END NEEDLE / NUMBER REFINEMENT
   ========================================================== */



/* ==========================================================
   FINAL VEGLIA BROAD INSTRUMENT NEEDLE
   ========================================================== */

/*
   The real Veglia pointer is not a pin.
   It is broad at the centre and progressively narrows
   towards the scale.
*/

.zephyr-clock .needle {

    /*
     * Position/rotation remain controlled by existing JS.
     */
    width: 18px !important;
    height: 44% !important;

    margin-left: -9px !important;

    /*
     * Warm ivory face with slightly darker edges.
     */
    background:
        linear-gradient(
            90deg,
            #9f9b90 0%,
            #cbc7ba 10%,
            #eeeadd 25%,
            #fffbed 48%,
            #f8f4e7 58%,
            #d4d0c3 82%,
            #98958c 100%
        ) !important;

    /*
     * Very narrow at the tip,
     * substantially broader towards the pivot.
     */
    clip-path:
        polygon(
            47% 0%,
            53% 0%,

            60% 30%,
            67% 62%,

            82% 94%,
            78% 100%,

            22% 100%,
            18% 94%,

            33% 62%,
            40% 30%
        ) !important;

    transform-origin:
        50% 100% !important;

    border-radius:
        0 !important;

    filter:
        drop-shadow(2px 2px 1px rgba(0,0,0,.72))
        drop-shadow(0 0 1px rgba(255,255,255,.25))
        !important;
}


/*
 * Small rear tail/counterweight.
 * This continues behind the centre boss like the
 * mechanical Veglia pointer.
 */

.zephyr-clock .needle::after {

    content: "" !important;

    display: block !important;

    position: absolute !important;

    left: 50% !important;
    top: 96% !important;

    width: 12px !important;
    height: 25% !important;

    transform:
        translateX(-50%) !important;

    background:
        linear-gradient(
            90deg,
            #99968d,
            #d9d5c8 25%,
            #f5f1e4 50%,
            #ccc8bc 75%,
            #8f8c84
        ) !important;

    clip-path:
        polygon(
            20% 0,
            80% 0,
            65% 100%,
            35% 100%
        ) !important;
}


/*
 * Main instruments get the full chunky pointer.
 */

.main-clock .needle {

    width: 20px !important;
    margin-left: -10px !important;

    height: 43% !important;
}


/*
 * Small instruments use the same shape,
 * just proportionally reduced.
 */

.small-clock .needle {

    width: 10px !important;
    margin-left: -5px !important;

    height: 42% !important;
}


/*
 * Centre boss sits physically over the needle.
 */

.zephyr-clock .hub {

    z-index: 20 !important;
}


/* ==========================================================
   END VEGLIA BROAD NEEDLE
   ========================================================== */