/* ============================================================
   OpenSpeedTest — Westminster ("Big Ben muse") theme overlay
   Loaded after assets/css/app.css; replaces the upstream
   auto-toggled darkmode.css. Palette + type imported verbatim
   from homebase/src/assets/styles/custom.css so this page sits
   inside the same visual world as langesville.net.
   ============================================================ */

:root {
    --bg:        #0f1722;
    --bg-blue:   #1a2540;
    --bg-card:   #1a2230;
    --bg-elev:   #242b3a;
    --border:    #3a4754;
    --text:      #f5ecd6;
    --text-dim:  #b8b4ab;
    --accent:    #d4a437;
    --accent-hi: #e2b94d;
    --accent-lo: #a8853c;
    --ivory:     #f4e8c8;
}

/* ---- Page chrome --------------------------------------------------- */

html, body {
    background-color: var(--bg) !important;
    background-image: radial-gradient(ellipse at top,
                      rgba(26, 37, 64, 0.55), transparent 65%) !important;
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Inter', 'Roboto', system-ui, sans-serif;
}

.openSpeedtestApp {
    background-color: transparent !important;
}

/* Small wordmark above the gauge (rendered by our index.html) */
.lang-mark {
    position: absolute;
    top: 1.5rem;
    left: 0; right: 0;
    text-align: center;
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.22em;
    color: var(--ivory);
    text-shadow: 0 0 18px rgba(244, 232, 200, 0.18);
    z-index: 5;
    pointer-events: none;
}
.lang-mark .ornament {
    color: var(--accent);
    margin: 0 0.7em;
    font-size: 0.85em;
    vertical-align: 0.05em;
}
.lang-mark a {
    color: var(--ivory);
    text-decoration: none;
    pointer-events: auto;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.lang-mark a:hover {
    border-bottom-color: var(--accent);
}

/* ---- SVG widget: gauges, cards, text ------------------------------- */

/* Outer gauge ring (the empty arc) → lead-roof slate */
.main-Gaugebg {
    stroke: var(--border) !important;
}

/* The animated gauge fill — upstream uses url(#gradient).
   Force solid gilded gold so the look matches Big Ben at dusk. */
.main-GaugeBlue {
    stroke: var(--accent) !important;
}
.main-GaugeWhite {
    stroke: var(--ivory) !important;
}

/* Tick labels around the gauge (1, 10, 100, 500, 1000+) */
.oDo-Meter {
    fill: var(--text-dim) !important;
}

/* "OpenSpeedTest™" wordmark inside the gauge + status line beneath */
.oDoTop-Speed, .oDoLive-Speed, .oDoLive-Status {
    fill: var(--ivory) !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
}

/* Download / Upload / Ping / Jitter card surfaces */
.Cards, .uiBg {
    fill: var(--bg-card) !important;
}

/* Progress bar (rendered as a stroked path inside the SVG) */
.progressbg {
    stroke: var(--border) !important;
}

/* In-card big number + units (DOWNLOAD 432.7 / Mbps) */
.rtext, .rtextnum, .rtextmbms, .jitter-Mob {
    fill: var(--ivory) !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
}

/* "Your IP" labels — desktop + mobile variants */
#ipDesk, #ipMob {
    fill: var(--text-dim) !important;
}

.ConnectError {
    fill: var(--accent-hi) !important;
}

/* ---- Loading spinner (top of page, pre-SVG-init) -------------------- */

#loading_app.spinner .bounce1,
#loading_app.spinner .bounce2,
#loading_app.spinner .bounce3 {
    background-color: var(--accent) !important;
}

/* ---- Credits footer ------------------------------------------------- */

.Credits {
    color: var(--text-dim) !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
    background: transparent;
}
.Credits a {
    color: var(--accent) !important;
    border-bottom: 1px dotted transparent;
    transition: border-color 0.2s ease;
}
.Credits a:hover {
    color: var(--accent-hi) !important;
    border-bottom-color: var(--accent-hi);
}