/* "Live from the network" box, reworked (owner 2026-10-28, live with the glass LEDs): a live dot with a soft ripple, a calmer
   counter tick, and a meter on a log scale (one deepening green), a peak marker and a scale (live-meter.js) */

/* Live dot: steady green with a ripple; amber blink while reconnecting (index.js sets the inline colour) */
.socket-dot { position: relative; width: 10px !important; height: 10px !important; flex: none; background: #22c55e !important; box-shadow: 0 0 0 2px rgba(34, 197, 94, .18); }
.socket-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; animation: bk-live-ripple 2s ease-out infinite; }
.socket-dot[data-state="wait"] { background: #f59e0b !important; box-shadow: 0 0 0 2px rgba(245, 158, 11, .2); animation: bk-live-blink 1s steps(2, start) infinite; }
.socket-dot[data-state="wait"]::after { display: none; }
@keyframes bk-live-ripple { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes bk-live-blink { to { opacity: .35; } }
.socket-status { gap: 9px !important; font-weight: 500; }

/* Counter: no more jump (scale 1.3 + green); the number lights up briefly, digits keep their width */
.counter-value { font-variant-numeric: tabular-nums; display: inline-block; }
.counter-value.animate { animation: bk-count-tick .7s ease-out !important; }
@keyframes bk-count-tick { 0% { color: #16a34a; transform: translateY(-1px); text-shadow: 0 0 10px rgba(34, 197, 94, .45); } 100% { transform: none; text-shadow: none; } }
.live-counter { transition: box-shadow .4s ease; }
.live-counter:has(.counter-value.animate) { box-shadow: 0 0 0 3px rgba(34, 197, 94, .14), 0 2px 5px rgba(0, 0, 0, .05); }

/* Meter: the old 90 LEDs stay in the page (index.js writes to them) but hidden; ours replaces them */
.vu-meter-container .vu-meter { display: none !important; }
.vu-meter-container { display: block !important; margin: 8px 0 0 !important; }
.bk-meter { position: relative; }
.bk-meter-bar { display: grid; grid-template-columns: repeat(40, 1fr); gap: 2px; height: 12px; }
.bk-meter-bar i { position: relative; border-radius: 2px; transition: background-color .2s, box-shadow .2s, opacity .2s; }

/* studio (default): a dark rack strip; unlit LEDs are their own colour, dimmed; lit ones glow, with a lens highlight */
.bk-led-studio .bk-meter-bar { height: 14px; padding: 3px 4px; border-radius: 5px; background: #111827; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .5); }
.bk-led-studio .bk-meter-bar i { border-radius: 1.5px; background: var(--seg); opacity: .16; }
.bk-led-studio .bk-meter-bar i.on { opacity: 1; box-shadow: 0 0 5px var(--seg), 0 0 1px var(--seg); }
.bk-led-studio .bk-meter-bar i.on::after { content: ''; position: absolute; inset: 0 0 50% 0; border-radius: 1.5px 1.5px 0 0; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }

/* glass: light card, each LED a little glass lens; unlit = pale tint of its colour */
.bk-led-glass .bk-meter-bar { height: 12px; }
.bk-led-glass .bk-meter-bar i { border-radius: 3px; background: color-mix(in srgb, var(--seg) 14%, #eef1f5); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06); }
.bk-led-glass .bk-meter-bar i.on { background: linear-gradient(180deg, color-mix(in srgb, var(--seg) 55%, #fff) 0%, var(--seg) 55%, color-mix(in srgb, var(--seg) 80%, #000) 100%); box-shadow: 0 0 6px -1px var(--seg), inset 0 1px 0 rgba(255, 255, 255, .6); }

/* dots: round console LEDs on a dark strip */
.bk-led-dots .bk-meter-bar { height: 14px; padding: 3px 5px; gap: 3px; border-radius: 999px; background: #111827; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); align-items: center; }
.bk-led-dots .bk-meter-bar i { width: 7px; height: 7px; max-width: 100%; justify-self: center; border-radius: 50%; background: var(--seg); opacity: .18; }
.bk-led-dots .bk-meter-bar i.on { opacity: 1; box-shadow: 0 0 6px var(--seg); background: radial-gradient(circle at 35% 30%, #fff 0, color-mix(in srgb, var(--seg) 70%, #fff) 25%, var(--seg) 60%); }

.bk-meter-scale { position: relative; height: 14px; margin-top: 4px; font-size: 10.5px; color: var(--text-light, #6b7686); font-variant-numeric: tabular-nums; }
.bk-meter-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.bk-meter-scale span:first-child { transform: none; }
.bk-meter-scale span:last-child { transform: translateX(-100%); }
@media (max-width: 576px) {
    .bk-meter-scale span.opt { display: none; }   /* phones: the dot says it, the text stays on one line */
    .bk-meter-bar { gap: 1.5px; }
    .bk-led-studio .bk-meter-bar, .bk-led-dots .bk-meter-bar { height: 11px; padding: 2px 3px; }
    .bk-led-dots .bk-meter-bar i { width: 5px; height: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .socket-dot::after, .counter-value.animate { animation: none !important; }
}

/* The pace flag replaces the bot face (live-meter.js) */
.growth-rate-container .bot-detection { display: none !important; }
.bk-flag { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; cursor: help; white-space: nowrap;
    background: #eef2f7; color: #475569; transition: background-color .3s, color .3s; }
.bk-flag .bk-ic { width: 13px; height: 13px; flex: none; }
.bk-flag-up { background: rgba(34, 197, 94, .14); color: #15803d; }
.bk-flag-fire { background: rgba(249, 115, 22, .15); color: #c2410c; }
.bk-flag-fire .bk-ic { animation: bk-flicker 1.2s ease-in-out infinite; }
@keyframes bk-flicker { 50% { transform: scale(1.15) rotate(-6deg); } }
.bk-flag-down { background: #eef2f7; color: #64748b; }
.bk-flag-bot { background: rgba(225, 29, 72, .12); color: #be123c; box-shadow: 0 0 0 1px rgba(225, 29, 72, .25); }
.bk-flag:empty { display: none; }
@media (max-width: 576px) { .bk-flag { font-size: 11px; padding: 1px 7px 1px 6px; } }
@media (prefers-reduced-motion: reduce) { .bk-flag-fire .bk-ic { animation: none; } }

/* "Bluesky today" as a mechanical counter (slide live since 2026-10-28; flip on live-preview.php?counter=flip) */
.live-counter:has(.bk-odo) { position: relative; }
/* the drawn counter takes the place in the pill; the real one lies over it, invisible, for its hover tooltip */
.counter-value.bk-odo-host { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: transparent !important; text-shadow: none !important; }
.counter-value.bk-odo-host.animate { animation: none !important; }
.bk-odo { position: relative; display: inline-flex; pointer-events: none; margin-left: .3em;
    font-size: 18px; font-weight: 700; color: var(--primary-color, #0a7afc); font-variant-numeric: tabular-nums; line-height: 1.25; }
.bk-odo .d { display: inline-block; height: 1.25em; overflow: hidden; position: relative; }
.bk-odo .s { display: inline-block; }
.bk-odo-slide .w { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.2, .8, .25, 1.15); }
.bk-odo-slide .w b { height: 1.25em; font-weight: inherit; text-align: center; }
/* flip: little tiles, the changed digit flips down */
.bk-odo-flip { gap: 2px; }
.bk-odo-flip .d { width: .82em; margin: 0 .5px; border-radius: 4px; background: linear-gradient(#f1f5fb 50%, #e6ecf5 50%); box-shadow: inset 0 0 0 1px rgba(10, 122, 252, .14); text-align: center; }
.bk-odo-flip .d::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(10, 122, 252, .14); }
.bk-odo-flip .d b { display: block; font-weight: inherit; transform-origin: 50% 50%; }
.bk-odo-flip .d.go b { animation: bk-flip .45s ease-out; }
@keyframes bk-flip { 0% { transform: translateY(-55%) scaleY(.3); opacity: .2; } 65% { transform: translateY(4%) scaleY(1.04); opacity: 1; } 100% { transform: none; } }   /* flat, no 3D: same in every browser */
@media (max-width: 576px) { .bk-odo { font-size: 14px; } .counter-value.bk-odo-host { right: 8px; } }
@media (prefers-reduced-motion: reduce) { .bk-odo-slide .w { transition: none; } }

/* Servers flag next to the pace flag (live since 2026-10-28) */
.bk-flags { margin-left: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.bk-flags .bk-flag { margin-left: 0; }
/* Phones: the flags on their own line from the start. They used to share the growth-rate line until the server
   flag arrived (half a second later) and then wrap, pushing the live list down (speed audit 2026-10-28: 0.07 of
   layout shift at 412 px); at 375 px they already wrapped */
@media (max-width: 576px) { .realtime-container .bk-flags { flex-basis: 100%; min-height: 20px; } }
.bk-flag.bk-srv { text-decoration: none; }
.bk-flag.bk-srv[hidden] { display: none; }
.bk-srv-ok { background: rgba(34, 197, 94, .12); color: #15803d; }
.bk-srv-degraded { background: rgba(245, 158, 11, .16); color: #b45309; }
.bk-srv-down { background: rgba(220, 38, 38, .12); color: #b91c1c; box-shadow: 0 0 0 1px rgba(220, 38, 38, .25); }
.bk-srv:hover { filter: brightness(.95); }