/* TacoNet Status — front-end styles. Colours default to the Neve accents on dev.lightspeedta.co
   and fall back to the theme's CSS variables when present. */
.tn-storage, .tn-playback {
	--tn-fg: #fff;
	--tn-muted: #9aa39c;
	--tn-edge: #1f2420;
	--tn-green: var(--nv-primary-accent, #57ad68);
	--tn-orange: var(--nv-secondary-accent, #ff9900);
	--tn-red: #e5484d;
	--tn-yellow: #f5c518;
	--tn-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
	color: var(--tn-fg);
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.tn-waiting { opacity: .7; font-style: italic; }

/* ---------- classic (pre-2.3 look) ---------- */
.tn-storage--classic { margin: 10px auto; padding: 10px; font-family: Arial, sans-serif; font-size: 16px; }
.tn-storage--classic .tn-storage__updated { margin-top: 1.5em; }
.tn-storage--classic .tn-lights { display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.tn-storage--classic .tn-light { width: 40px; height: 40px; margin-bottom: 5px; border-radius: 50%; background-color: #444; box-shadow: 0 0 8px rgba(0,0,0,.5); }
.tn-storage--classic .tn-light--green.is-on { background-color: green; }
.tn-storage--classic .tn-light--yellow.is-on { background-color: yellow; }
.tn-storage--classic .tn-light--red.is-on { background-color: red; }
.tn-playback--classic .tn-playback__heading { font-size: larger; font-weight: bold; text-decoration: underline; }
.tn-playback--classic .tn-playback__time { font-weight: bold; }
.tn-playback--classic .tn-playback__network { font-size: larger; font-style: italic; }
.tn-playback--classic .tn-playback__servers, .tn-playback--classic .tn-playback__updated { font-size: smaller; }
.is-stale .tn-storage__updated, .is-stale .tn-playback__updated { opacity: .6; }
.is-stale .tn-storage__updated::after, .is-stale .tn-playback__updated::after { content: " (stale)"; }

/* ---------- shared (2.3 styles) ---------- */
.tn-head { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 10px; }
.tn-head .tn-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tn-muted); font-weight: 700; }
.tn-head .tn-pct { font-family: var(--tn-mono); font-size: 16px; font-weight: 700; }
.tn-foot { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: var(--tn-muted); margin-top: 10px; }
.tn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tn-green); box-shadow: 0 0 6px var(--tn-green); animation: tn-beat 2.4s ease-in-out infinite; flex: none; }
.tn-dot--users { background: var(--tn-orange); box-shadow: 0 0 6px var(--tn-orange); animation-duration: 1.2s; }
.is-stale .tn-dot { background: var(--tn-orange); box-shadow: 0 0 6px var(--tn-orange); animation: none; }
@keyframes tn-beat { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.tn-title { font-weight: 700; font-size: 19px; margin-bottom: 8px; }
.tn-tag { font-style: italic; color: var(--tn-muted); font-size: 14.5px; margin-top: 10px; }
.tn-live { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 8px; font-size: 13.5px; color: var(--tn-muted); }
.tn-live b { color: var(--tn-orange); font-weight: 700; }
.tn-live .tn-stale:not(:empty)::before { content: "·"; margin: 0 4px 0 0; }
.tn-foot:has(> [data-ago]:empty) .tn-dot { margin: 0; }
.tn-servers { font-size: 12.5px; color: var(--tn-muted); margin-top: 6px; }
.tn-servers .tn-server { white-space: nowrap; }

/* ---------- lamp base ---------- */
.tn-lamp { display: flex; justify-content: center; }
.tn-lamp__housing { position: relative; display: grid; gap: 9px; padding: 12px 10px; border-radius: 30px; }
.tn-lens { width: 46px; height: 46px; border-radius: 50%; position: relative; transition: box-shadow .5s, background .5s; }
.tn-lens[data-c="green"]  { --c: var(--tn-green); }
.tn-lens[data-c="yellow"] { --c: var(--tn-yellow); }
.tn-lens[data-c="red"]    { --c: var(--tn-red); }
.tn-lens.is-on { animation: tn-breathe 3.2s ease-in-out infinite; }
.tn-lens.is-on[data-c="red"] { animation: tn-blink 1.1s steps(1, end) infinite; }
.tn-lens.test { transition: none; }
@keyframes tn-breathe { 0%, 100% { filter: brightness(.88); } 50% { filter: brightness(1.12); } }
@keyframes tn-blink { 0%, 55% { filter: brightness(1.1); } 56%, 100% { filter: brightness(.45); } }

/* orientation / visors — !important so a theme/strip stylesheet that restyles the housing
   (display:flex, flex-direction) cannot override the orientation setting */
.tn-lamp--vertical .tn-lamp__housing { display: grid !important; grid-auto-flow: row !important; flex-direction: column !important; }
.tn-lamp--horizontal .tn-lamp__housing { display: grid !important; grid-auto-flow: column !important; flex-direction: row !important; padding: 10px 12px; }
.tn-lamp--horizontal .tn-lamp--municipal { padding: 12px 14px; }
.tn-lamp--horizontal .tn-lamp--neon { padding: 6px; }
.tn-lamp--municipal.tn-lamp--novisor .tn-lens::before { display: none; }
.tn-lamp--municipal.tn-lamp--novisor .tn-lens { box-shadow: inset 0 3px 6px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.25); }

/* noir */
.tn-lamp--noir { background: linear-gradient(180deg, #171a17, #090b09); border: 1px solid var(--tn-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.6); }
.tn-lamp--noir .tn-lens { background: radial-gradient(circle at 38% 32%, #2a2e2a 0%, #141614 55%, #0a0b0a 100%); box-shadow: inset 0 2px 6px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.04); }
.tn-lamp--noir .tn-lens::after { content: ""; position: absolute; inset: 7px 9px auto 9px; height: 10px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)); }
.tn-lamp--noir .tn-lens.is-on { background: radial-gradient(circle at 42% 38%, #fff 0%, var(--c) 28%, #000 140%); box-shadow: 0 0 10px var(--c), 0 0 28px var(--c), inset 0 -3px 8px rgba(0,0,0,.35); }
.tn-lamp--noir .tn-lens.is-on { background: radial-gradient(circle at 42% 38%, #fff 0%, var(--c) 28%, color-mix(in srgb, var(--c) 70%, #000) 100%); box-shadow: 0 0 10px var(--c), 0 0 28px color-mix(in srgb, var(--c) 70%, transparent), 0 0 60px color-mix(in srgb, var(--c) 35%, transparent), inset 0 -3px 8px rgba(0,0,0,.35); }

/* municipal */
.tn-lamp--municipal { border-radius: 14px; padding: 14px 12px; gap: 12px; background: linear-gradient(180deg, #f0bd2a, #c9931a 60%, #a97a12); border: 2px solid #6b4d0a; box-shadow: 0 0 0 7px #111, 0 0 0 8px #2a2a2a, 0 10px 26px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.35); margin: 8px; }
.tn-lamp--municipal .tn-lens { background: radial-gradient(circle at 40% 35%, #3a3a3a, #161616 60%, #0a0a0a); border: 3px solid #1a1a1a; box-shadow: inset 0 3px 6px rgba(0,0,0,.9); width: 48px; height: 48px; }
.tn-lamp--municipal .tn-lens::before { content: ""; position: absolute; left: -7px; right: -7px; top: -8px; height: 22px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, #2b2b2b, #0f0f0f); box-shadow: 0 3px 4px rgba(0,0,0,.6); z-index: 1; }
.tn-lamp--municipal .tn-lens.is-on { background: radial-gradient(circle at 45% 45%, #fff 0%, var(--c) 30%, #000 150%); box-shadow: 0 0 12px var(--c), 0 0 30px var(--c), inset 0 -4px 8px rgba(0,0,0,.35); }
.tn-lamp--municipal .tn-lens.is-on { background: radial-gradient(circle at 45% 45%, #fff 0%, var(--c) 30%, color-mix(in srgb, var(--c) 65%, #000) 100%); box-shadow: 0 0 12px var(--c), 0 0 30px color-mix(in srgb, var(--c) 60%, transparent), inset 0 -4px 8px rgba(0,0,0,.35); }

/* rusty */
.tn-lamp--rusty { border-radius: 26px; background:
	radial-gradient(circle at 22% 18%, rgba(120,60,20,.9) 0 5px, transparent 7px),
	radial-gradient(circle at 78% 42%, rgba(140,70,25,.8) 0 8px, transparent 10px),
	radial-gradient(circle at 30% 78%, rgba(90,45,15,.9) 0 6px, transparent 8px),
	radial-gradient(circle at 70% 88%, rgba(160,90,40,.7) 0 4px, transparent 6px),
	radial-gradient(circle at 55% 60%, rgba(210,130,60,.35) 0 14px, transparent 18px),
	repeating-linear-gradient(97deg, rgba(0,0,0,.14) 0 2px, transparent 2px 5px),
	linear-gradient(180deg, #7a4a2a, #4d2d18 55%, #35200f);
	border: 2px solid #2b1a0d; box-shadow: inset 0 1px 0 rgba(255,210,150,.15), inset 0 -2px 6px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.7); }
.tn-lamp--rusty .tn-lens { background: radial-gradient(circle at 38% 32%, #3b3630 0%, #1b1815 55%, #0c0b0a 100%); border: 2px solid #2a1c10; box-shadow: inset 0 2px 6px rgba(0,0,0,.9); }
.tn-lamp--rusty .tn-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 70% 70%, rgba(120,90,60,.35), transparent 50%), linear-gradient(160deg, rgba(255,255,255,.08), transparent 45%); pointer-events: none; }
.tn-lamp--rusty .tn-lens.is-on { background: radial-gradient(circle at 42% 38%, #fff3d6 0%, var(--c) 32%, #000 160%); box-shadow: 0 0 8px var(--c), 0 0 22px var(--c), inset 0 -3px 8px rgba(0,0,0,.4); filter: saturate(.8); animation-duration: 2.1s; }
.tn-lamp--rusty .tn-lens.is-on { background: radial-gradient(circle at 42% 38%, #fff3d6 0%, var(--c) 32%, color-mix(in srgb, var(--c) 60%, #000) 100%); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 80%, #000), 0 0 22px color-mix(in srgb, var(--c) 45%, transparent), inset 0 -3px 8px rgba(0,0,0,.4); }

/* chrome */
.tn-lamp--chrome { border-radius: 24px; background: linear-gradient(90deg, #b9bec1 0%, #6f7578 18%, #e4e7e9 46%, #8a9093 72%, #c8ccce 100%); border: 1px solid #3a3d3f; box-shadow: 0 10px 26px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.4); }
.tn-lamp--chrome::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(180deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px); pointer-events: none; }
.tn-lamp--chrome .tn-lens { background: radial-gradient(circle at 38% 32%, #2a2d2e 0%, #111314 55%, #060707 100%); box-shadow: 0 0 0 3px #9ea4a7, 0 0 0 4px #2b2e30, inset 0 2px 6px rgba(0,0,0,.9); z-index: 1; }
.tn-lamp--chrome .tn-lens.is-on { background: radial-gradient(circle at 42% 38%, #fff 0%, var(--c) 28%, #000 140%); box-shadow: 0 0 0 3px #9ea4a7, 0 0 0 4px #2b2e30, 0 0 14px var(--c), 0 0 30px var(--c); }
.tn-lamp--chrome .tn-lens.is-on { background: radial-gradient(circle at 42% 38%, #fff 0%, var(--c) 28%, color-mix(in srgb, var(--c) 70%, #000) 100%); box-shadow: 0 0 0 3px #9ea4a7, 0 0 0 4px #2b2e30, 0 0 14px var(--c), 0 0 30px color-mix(in srgb, var(--c) 55%, transparent); }

/* neon */
.tn-lamp--neon { gap: 14px; padding: 6px; }
.tn-lamp--neon .tn-lens { background: transparent; border: 3px solid #262b27; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); width: 44px; height: 44px; }
.tn-lamp--neon .tn-lens.is-on { border-color: var(--c); box-shadow: 0 0 6px var(--c), 0 0 18px var(--c), inset 0 0 10px var(--c); }
.tn-lamp--neon .tn-lens.is-on { box-shadow: 0 0 6px var(--c), 0 0 18px color-mix(in srgb, var(--c) 70%, transparent), 0 0 40px color-mix(in srgb, var(--c) 30%, transparent), inset 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }

/* ---------- playback: tiles ---------- */
.tn-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.tn-tiles--row2 { grid-template-columns: repeat(3, 1fr); margin-top: 5px; }
.tn-tile { background: linear-gradient(180deg, #151815 0%, #0d0f0d 49%, #090b09 51%, #0c0e0c 100%); border: 1px solid var(--tn-edge); border-radius: 5px; padding: 6px 2px 4px; text-align: center; position: relative; overflow: hidden; }
.tn-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.85); }
.tn-tile .tn-v { font-family: var(--tn-mono); font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--tn-fg); display: block; height: 1.1em; overflow: hidden; }
.tn-tile .tn-v > span { display: block; }
.tn-tile .tn-k { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tn-muted); margin-top: 3px; }
.tn-tile--sec .tn-v { color: var(--tn-green); }
.tn-roll { animation: tn-roll .36s cubic-bezier(.3,.9,.3,1); }
@keyframes tn-roll { 0% { transform: translateY(-100%); opacity: .2; } 100% { transform: translateY(0); opacity: 1; } }

/* ---------- playback: line ---------- */
.tn-playback--line .tn-line { font-family: var(--tn-mono); font-size: 15px; line-height: 1.6; margin: 6px 0; }
.tn-playback--line .tn-line b { color: var(--tn-green); font-weight: 700; }

/* ---------- playback: odometer ---------- */
.tn-odo { display: flex; justify-content: center; gap: 2px; margin: 6px 0 4px; }
.tn-drum { width: 24px; height: 36px; border-radius: 3px; background: linear-gradient(180deg, #2a2d2a 0%, #0e100e 30%, #0a0b0a 70%, #222522 100%); border: 1px solid #000; box-shadow: inset 0 0 6px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06); font-family: var(--tn-mono); font-size: 24px; font-weight: 700; line-height: 36px; text-align: center; color: #f4f4f4; overflow: hidden; }
.tn-drum--sep { width: 8px; background: none; border: 0; box-shadow: none; color: var(--tn-muted); font-size: 18px; }
.tn-drum--last { color: var(--tn-green); }
.tn-drum > span { display: block; }
.tn-odo-unit { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tn-muted); }
.tn-odo-small { font-family: var(--tn-mono); font-size: 12.5px; color: var(--tn-muted); margin-top: 8px; }
.tn-odo-small b { color: var(--tn-fg); font-weight: 600; }

/* ---------- playback: led ---------- */
.tn-led { background: #050705; border: 1px solid #142016; border-radius: 6px; padding: 10px 8px 8px; position: relative; overflow: hidden; }
.tn-led::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); pointer-events: none; }
.tn-led__big { font-family: "Share Tech Mono", var(--tn-mono); font-size: 30px; line-height: 1; color: #7cf59a; text-shadow: 0 0 6px #57ad68, 0 0 16px rgba(87,173,104,.6); letter-spacing: .03em; }
.tn-led__big small { font-size: 14px; color: #3f8a52; text-shadow: none; letter-spacing: 0; }
.tn-led__small { font-family: "Share Tech Mono", var(--tn-mono); font-size: 20px; color: #7cf59a; text-shadow: 0 0 6px #57ad68; margin-top: 4px; letter-spacing: .05em; }
.tn-led__cap { font-family: "Share Tech Mono", var(--tn-mono); font-size: 10.5px; color: #3f8a52; letter-spacing: .2em; text-transform: uppercase; margin-top: 6px; }

/* ---------- playback: big number ---------- */
.tn-big__n { font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif; font-size: 92px; line-height: .9; letter-spacing: .02em; color: var(--tn-fg); }
.tn-big__n small { font-size: 26px; color: var(--tn-green); letter-spacing: .08em; margin-left: 4px; }
.tn-big__rest { font-family: var(--tn-mono); font-size: 13px; color: var(--tn-muted); margin-top: 6px; }
.tn-big__rest b { color: var(--tn-fg); font-weight: 600; }
.tn-big__rest .tn-s { color: var(--tn-green); }

/* ---------- services (UptimeRobot) ---------- */
.tn-services { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: var(--tn-fg, #fff); font-variant-numeric: tabular-nums; }
.tn-svc { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; white-space: nowrap; }
.tn-svc__pip { width: 9px; height: 9px; border-radius: 50%; background: #555; flex: none; }
.tn-svc--up .tn-svc__pip { background: var(--tn-green, #57ad68); box-shadow: 0 0 7px var(--tn-green, #57ad68); animation: tn-beat 2.4s ease-in-out infinite; }
.tn-svc--down .tn-svc__pip { background: var(--tn-red, #e5484d); box-shadow: 0 0 7px var(--tn-red, #e5484d); animation: tn-blink 1.1s steps(1, end) infinite; }
.tn-svc--paused .tn-svc__pip { background: var(--tn-yellow, #f5c518); }
.tn-svc__name { font-weight: 600; }
.tn-svc__up { font-family: var(--tn-mono, monospace); font-size: 12px; color: var(--tn-muted, #9aa39c); }
.tn-svc__up:empty { display: none; }
.tn-services.is-stale { opacity: .6; }

/* ---------- peak ---------- */
.tn-peak { font-size: 13.5px; color: var(--tn-muted, #9aa39c); font-variant-numeric: tabular-nums; }
.tn-peak b { color: var(--tn-fg, #fff); font-weight: 700; }
.tn-peak__when { font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
	.tn-lens.is-on, .tn-dot, .tn-roll { animation: none !important; }
}

/* [taconet_status] stacks both blocks */
.tn-status > * + * { margin-top: 28px; }