/* ── The cycle dial ────────────────────────────────────────────────────── */

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

.fi-dial {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
}
.fi-dial__svg { width: 100%; height: 100%; overflow: visible; }

/* Rings & ticks — hairlines, but present enough to read as an instrument */
.fi-dial__ring {
    fill: none;
    stroke: rgba(15, 95, 94, .4);
    stroke-width: 1;
}
.fi-dial__ring--inner { stroke: rgba(15, 95, 94, .16); stroke-dasharray: 1.5 7; }

.fi-dial__ticks line { stroke: rgba(15, 95, 94, .34); stroke-width: 1; }
.fi-dial__ticks line.is-major { stroke: rgba(15, 95, 94, .6); stroke-width: 1.25; }

/* Progress arc — how far through the cycle we are */
.fi-dial__arc {
    fill: none;
    stroke: var(--green);
    stroke-width: 2.5;
    stroke-linecap: round;
    /* JS sets stroke-dasharray to concrete lengths so this transition can run */
    transition: stroke-dasharray .9s cubic-bezier(.2, .9, .2, 1);
}
.fi-dial__arc.is-snapping { transition: none; }

/* Hand — steps between stations */
.fi-dial__hand {
    transform: rotate(var(--deg, 0deg));
    transform-origin: 220px 220px;
    transition: transform .9s cubic-bezier(.2, .9, .2, 1);
}
.fi-dial__hand line { stroke: var(--teal); stroke-width: 1.25; }
.fi-dial__hand-tip { fill: var(--green); }

/* Centre counter — the dial's focal point */
.fi-dial__count {
    font-family: var(--display);
    font-size: 44px;
    font-weight: 300;
    fill: var(--teal);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.fi-dial__count-of {
    font-family: var(--body);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    fill: var(--ink-3);
}

/* Stations */
.fi-dial__dot {
    fill: var(--paper);
    stroke: rgba(15, 95, 94, .45);
    stroke-width: 1.25;
    transition: fill .3s var(--ease), stroke .3s var(--ease), r .3s var(--ease);
}
.fi-dial__halo {
    fill: var(--green);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(.6);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.fi-dial__label {
    font-family: var(--body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    fill: var(--ink-3);
    transition: fill .3s var(--ease);
}

.fi-dial__station.is-active .fi-dial__dot { fill: var(--green); stroke: var(--green); }
.fi-dial__station.is-active .fi-dial__halo { opacity: .16; transform: scale(1); }
.fi-dial__station.is-active .fi-dial__label { fill: var(--teal); }

/* Invisible focusable hit-targets layered over each station dot */
.fi-dial__tabs { position: absolute; inset: 0; }
.fi-dial__tab {
    position: absolute;
    left: var(--x); top: var(--y);
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
    padding: 0; margin: 0;
    background: none; border: 0;
    border-radius: 50%;
    cursor: pointer;
}

/* Readout below the dial */
.fi-dial__readout {
    width: 100%;
    max-width: 400px;
    min-height: 6.5rem;
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}
.fi-dial__panel[hidden] { display: none; }
.fi-dial__panel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem .85rem;
    animation: fi-fade .45s var(--ease) both;
}
@keyframes fi-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .fi-dial__panel { animation: none; }
    .fi-dial__hand,
    .fi-dial__arc { transition: none; }
}

.fi-dial__panel-n {
    font-size: .75rem; font-weight: 600; letter-spacing: .1em;
    color: var(--green); font-variant-numeric: tabular-nums;
    padding-top: .3rem;
}
.fi-dial__panel-label {
    font-family: var(--display);
    font-size: 1.25rem; font-weight: 400;
    letter-spacing: -.01em;
}
.fi-dial__panel-text {
    grid-column: 2;
    font-size: .9375rem;
    color: var(--ink-2);
    text-wrap: pretty;
}

/* ── Responsive (kept in this file: it must out-cascade responsive.css) ──── */
@media (max-width: 30em) {
    .fi-dial,
    .fi-dial__readout { max-width: 320px; }
    .fi-dial__label { font-size: 11px; letter-spacing: .04em; }
    .fi-dial__count { font-size: 38px; }
    /* Keep the invisible hit-targets tappable without overlapping each other */
    .fi-dial__tab { width: 38px; height: 38px; }
}