@font-face {
    font-family: Inter;
    src: url('../fonts/Inter-Variable.woff2') format('woff2');
    font-style: oblique 0deg 10deg;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light dark;
    --primary: #315eff;
    --primary-dark: #2d56e7;
    --foreground: #0b111e;
    --muted: #5f6879;
    --background: #f7f8fc;
    --surface: #fff;
    --surface-2: #f0f2f7;
    --border: #e1e4ec;
    --shadow: 0 18px 50px rgb(28 39 74 / .09);
    --radius: 1.25rem;
    --content: 76rem;
    font-family: Inter, system-ui, sans-serif;
    font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
    min-width: 20rem;
    min-height: 100vh;
    margin: 0;
    color: var(--foreground);
    background: var(--background);
    font-size: 1rem;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
button, input, select { font: inherit; }
button, select, input { color: var(--foreground); }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: .2rem solid var(--primary); outline-offset: .2rem; }

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: .75rem;
    left: .75rem;
    padding: .7rem 1rem;
    border-radius: .6rem;
    color: #fff;
    background: var(--primary);
    transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.site-header,
.site-footer {
    width: 100%;
    padding-inline: max(1rem, calc((100% - var(--content)) / 2));
}
.site-header {
    min-height: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(14px);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .62rem;
    font-size: 1.1rem;
    font-weight: 750;
    text-decoration: none;
    letter-spacing: -.025em;
}
.brand__mark {
    width: 1.6rem;
    aspect-ratio: 1;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url('../images/icons/app-icon.svg') center / contain no-repeat;
    mask: url('../images/icons/app-icon.svg') center / contain no-repeat;
}
.data-date { margin: 0; color: var(--muted); font-size: .82rem; }

.app-shell,
.admin-shell {
    width: min(calc(100% - 2rem), var(--content));
    margin-inline: auto;
}
.app-shell { padding-top: 2.5rem; }
.signal-panel {
    min-height: clamp(32rem, 68vh, 48rem);
    display: grid;
    align-content: center;
    gap: clamp(2rem, 3vw, 3.5rem);
}

.eyebrow {
    margin: 0;
    color: var(--primary-dark);
    font-size: .77rem;
    font-weight: 760;
    letter-spacing: .11em;
}

.virus-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
}
.virus-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(.65rem, 1.5vw, 1rem);
    padding: clamp(.5rem, 2vw, 1.25rem);
    border-radius: .75rem;
    text-decoration: none;
    transition: color .18s ease;
}
.virus-card:hover { color: var(--primary-dark); }
.virus-card__visual { width: 100%; display: grid; place-items: center; }
.virus-icon { width: min(100%, 15rem); max-height: 17rem; overflow: visible; transition: scale .18s ease; }
.virus-card:hover .virus-icon { scale: 1.025; }
.virus-icon__shell {
    transform-box: fill-box;
    transform-origin: center;
    animation: virus-breathe 6.5s ease-in-out var(--motion-delay) infinite alternate;
}
.virus-icon__border { fill: var(--signal-dark); }
.virus-icon__body { fill: var(--signal); }
.virus-icon__trend {
    --trend-angle: 0deg;
    stroke: var(--signal-dark);
    stroke-linejoin: round;
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: trend-wiggle 2.8s ease-in-out var(--motion-delay) infinite alternate;
}
.virus-icon.trend-up .virus-icon__trend { --trend-angle: -48deg; }
.virus-icon.trend-down .virus-icon__trend { --trend-angle: 48deg; }
.virus-icon.trend-unknown .virus-icon__trend { opacity: 0; }
@keyframes virus-breathe { from { rotate: -2.4deg; } to { rotate: 2.8deg; } }
@keyframes trend-wiggle { from { transform: rotate(calc(var(--trend-angle) - 1.5deg)); } to { transform: rotate(calc(var(--trend-angle) + 1.5deg)); } }
.virus-card__label { text-align: center; font-size: clamp(1.05rem, 2.2vw, 1.35rem); letter-spacing: -.025em; }

.empty-state,
.notice {
    display: grid;
    gap: .2rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: .8rem;
    background: var(--surface);
}
.empty-state span { color: var(--muted); }
.signal-scale { width: min(22rem, 80%); margin: 0 auto; color: var(--muted); font-size: .72rem; }
.signal-scale__bar {
    height: clamp(.7rem, 4vh, 2rem);
    border-radius: 999px;
    background: linear-gradient(90deg, #44ac34 0%, #98ce2f 20%, #eeeb18 40%, #ffe00f 50%, #ffc510 60%, #f97417 80%, #e41817 100%);
}
.signal-scale figcaption { display: flex; justify-content: space-between; margin-top: .35rem; }

.chart-dialog,
.info-dialog {
    position: relative;
    max-height: calc(100dvh - 2rem);
    padding: clamp(1rem, 2.5vw, 1.75rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--foreground);
    background: var(--surface);
    box-shadow: 0 40px 110px rgb(0 0 0 / .3);
}
.chart-dialog { width: min(58rem, calc(100% - 2rem)); overflow: hidden; }
.info-dialog { width: min(48rem, calc(100% - 2rem)); overflow: auto; }
.chart-dialog::backdrop,
.info-dialog::backdrop { background: rgb(14 18 30 / .68); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; z-index: 2; top: .9rem; right: .9rem; width: 2.4rem; aspect-ratio: 1; display: block; padding: 0; border: 0; border-radius: .55rem; color: var(--muted); background: transparent; cursor: pointer; }
.dialog-close::before,
.dialog-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1.25rem; height: .14rem; border-radius: 999px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.dialog-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.dialog-close:hover { color: var(--foreground); background: var(--surface-2); }
.dialog-heading { padding-right: 3.5rem; }
.dialog-heading h2 { margin: .2rem 0; font-size: clamp(1.65rem, 4vw, 2.5rem); letter-spacing: -.04em; }
.dialog-heading > p:last-child { margin: .2rem 0 .65rem; color: var(--muted); }
.chart-status { min-height: min(16rem, 45vh); display: grid; place-items: center; color: var(--muted); }
.line-chart { min-height: 0; }
.line-chart svg { width: 100%; height: auto; max-height: min(55vh, 27rem); display: block; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis-label { fill: var(--muted); font: 12px Inter, sans-serif; }
.chart-line { fill: none; stroke: url(#chart-line-gradient); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-area { fill: url(#chart-area-shadow); }
.chart-point { fill: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.dialog-source { margin: .55rem 0 0; color: var(--muted); font-size: .7rem; }

@media (max-width: 40rem) {
    .chart-dialog { overflow-x: hidden; overflow-y: auto; }
    .line-chart { position: relative; }
    .chart-scroller {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .line-chart .chart-scroller svg {
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
    }
    .line-chart .chart-fixed-axis {
        position: absolute;
        top: 0;
        left: 0;
        width: 70px;
        height: 270px;
        max-height: none;
        background: var(--surface);
        pointer-events: none;
    }
    .chart-scroll-hint { margin: .25rem 0 0; color: var(--muted); font-size: .7rem; }
}

.site-footer { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border); color: var(--muted); background: var(--surface); font-size: .78rem; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1rem; }

.info-dialog:target:not([open]) { display: block; }
.info-dialog h2 { margin: .2rem 3.5rem 1.5rem 0; font-size: clamp(1.65rem, 4vw, 2.5rem); line-height: 1.08; letter-spacing: -.04em; }
.info-dialog h3 { margin: 2rem 0 .65rem; font-size: 1.15rem; }
.info-dialog p { max-width: 68ch; }
.info-dialog address { line-height: 1.7; font-style: normal; }

.admin-page { background: var(--background); }
.admin-shell { padding: 3rem 0; }
.admin-heading { margin-bottom: 2rem; }
.admin-heading h1 { margin: .15rem 0 0; font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -.055em; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.admin-card { padding: 1.4rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.admin-card h2 { margin-top: 0; }
.form-grid { display: grid; gap: 1rem; }
.form-grid label { display: grid; gap: .3rem; color: var(--muted); font-size: .8rem; font-weight: 650; }
.form-grid input { min-width: 0; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface-2); }
button { padding: .7rem 1rem; border: 1px solid var(--primary); border-radius: .6rem; color: #fff; background: var(--primary); font-weight: 680; cursor: pointer; }
.button-secondary { color: var(--foreground); border-color: var(--border); background: var(--surface-2); }
.button-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.help { color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.notice { margin-bottom: 1rem; }
.notice--success { border-color: #62a95a; background: #eef9ec; }
.notice--error { border-color: #d85b50; background: #fff0ef; }
.log { max-height: 18rem; padding-left: 1.4rem; overflow: auto; color: var(--muted); font-size: .72rem; }
.logout-form { margin-top: 1rem; }

@media (orientation: portrait) {
    .app-shell {
        height: calc(100vh - 4.4rem);
        height: calc(100dvh - 4.4rem);
        padding-bottom: clamp(.75rem, 2vh, 1.5rem);
    }
    .signal-panel {
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: clamp(.65rem, 1.5vh, 1rem);
    }
    .virus-grid {
        height: 100%;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: clamp(.25rem, 1vh, .75rem);
    }
    .virus-card {
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        justify-items: stretch;
        align-items: stretch;
        gap: clamp(.25rem, .8vh, .55rem);
        padding-block: clamp(.2rem, .7vh, .45rem);
    }
    .virus-card__visual {
        min-width: 0;
        min-height: 0;
        display: flex;
        align-items: stretch;
        justify-content: center;
    }
    .virus-icon {
        display: block;
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
    .virus-card__label { line-height: 1.15; }
}

@media (max-width: 50rem) {
    .admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 35rem) {
    .site-header { min-height: 4rem; }
    .data-date { display: none; }
    .app-shell { width: min(calc(100% - 1.2rem), var(--content)); padding-top: 1.3rem; }
    .site-footer { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 1rem; }
    .site-footer nav { justify-content: flex-start; }
}

@media (orientation: portrait) and (max-width: 35rem) {
    .app-shell {
        height: calc(100vh - 4rem);
        height: calc(100dvh - 4rem);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #5474e8;
        --primary-dark: #3048b2;
        --foreground: #e5e4ea;
        --muted: #a7adbb;
        --background: #1b1f28;
        --surface: #2b2f3c;
        --surface-2: #2f3543;
        --border: #3b4252;
        --shadow: 0 18px 50px rgb(0 0 0 / .22);
    }
    .notice--success { background: #203621; }
    .notice--error { background: #422321; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}