/*! Tempo · (c) 2026 Antichaos — antichaosdata.com. All rights reserved. Proprietary. */
:root { --fg: #151b26; --accent: #4f7cf0; --tempo-fontsize: 14px; }

html, body {
    margin: 0; padding: 0; height: 100%; width: 100%;
    overflow: hidden;
    background: #ffffff;
    font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    color: var(--fg);
}
.hidden { display: none !important; }

.tempo {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 10px 12px; box-sizing: border-box;
}

/* ---- status card (default display) ------------------------------------- */
.card {
    position: relative;               /* positioning context for the countdown bar */
    overflow: hidden;                 /* clip the bar to the card's rounded corners */
    max-width: 100%;
    display: flex; align-items: center;
    background: color-mix(in srgb, var(--fg) 3.5%, transparent);
    border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
    border-radius: 12px;
    padding: 9px 12px;
    box-sizing: border-box;
}
.card-main { display: flex; align-items: center; gap: 11px; min-width: 0; }

.glyph {
    position: relative; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
.glyph svg { width: 19px; height: 19px; }
/* the icon slowly spins only while a refresh is in flight */
.is-busy .glyph svg { animation: tempo-spin 0.9s linear infinite; transform-origin: 50% 50%; }
@keyframes tempo-spin { to { transform: rotate(360deg); } }

/* a small state dot on the glyph corner */
.status-dot {
    position: absolute; right: -2px; bottom: -2px;
    width: 9px; height: 9px; border-radius: 50%;
    border: 2px solid var(--card-edge, #fff);
    background: #9aa4b2;
}
.status-dot.s-ok { background: #16a34a; }
.status-dot.s-refreshing { background: var(--accent); }
.status-dot.s-error { background: #dc2626; }
.status-dot.s-partial { background: #ea580c; }
.status-dot.s-sleeping { background: #f59e0b; }
.status-dot.s-idle { background: #9aa4b2; }

.lines { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.primary-line {
    font-weight: 750; letter-spacing: -.01em; line-height: 1.15;
    font-size: var(--tempo-fontsize);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.secondary-line {
    font-size: calc(var(--tempo-fontsize) * 0.78);
    color: color-mix(in srgb, var(--fg) 55%, transparent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.controls { display: flex; align-items: center; gap: 6px; margin-left: 6px; flex: 0 0 auto; }
.paused-badge {
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    color: #92400e; background: #fef3c7; border-radius: 999px; padding: 2px 8px;
}
.paused-badge[hidden] { display: none; }

.ctl {
    border: 0; cursor: pointer; padding: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--fg) 6%, transparent);
    color: color-mix(in srgb, var(--fg) 62%, transparent);
    font-size: 14px; line-height: 1;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
.ctl:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); transform: translateY(-1px); }
.ctl:active { transform: translateY(0); }

/* pause/pause toggle sits inside the optional countdown ring */
.toggle-wrap { position: relative; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.toggle { width: 30px; height: 30px; position: relative; z-index: 1; }
.is-paused .toggle { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

/* Filling-ring countdown (display 'ring' — around the toggle). */
.ring { position: absolute; inset: 0; width: 34px; height: 34px; transform: rotate(-90deg); display: none; }
.cd-ring .ring { display: block; }
.ring-track { fill: none; stroke: color-mix(in srgb, var(--fg) 12%, transparent); stroke-width: 2.5; }
.ring-fill {
    fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 100; stroke-dashoffset: 100;   /* JS animates 100 → 0 over the interval */
}
@keyframes tempo-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Line countdown (display 'bar'): a thin bar along the bottom edge that fills over the
   interval, restarting each cycle (driven from JS). Freezes when paused. */
/* Countdown bar: sits along the bottom edge of the CARD (part of the widget), clipped to the
   card's rounded corners by .card{overflow:hidden}. Only in card mode - the minimal pill shows
   its countdown as text instead. */
.countdown {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: color-mix(in srgb, var(--fg) 12%, transparent);
    z-index: 3; overflow: hidden; display: none;
}
.mode-card.cd-bar .countdown { display: block; }
.mode-hidden .countdown { display: none; }
.countdown > i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, #fff), var(--accent));
    border-radius: 0 3px 3px 0;
    transition: width 1s linear;   /* JS sets the width each second; this smooths the steps */
}
/* Reduced motion: keep the bar visible, just don't tween between ticks. */
@media (prefers-reduced-motion: reduce) { .countdown > i { transition: none; } }

/* ---- minimal mode: a compact pill --------------------------------------- */
.mini {
    display: none;
    align-items: center; gap: 6px;
    border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
    background: color-mix(in srgb, var(--fg) 3.5%, transparent);
    color: var(--fg);
    border-radius: 999px; padding: 5px 11px 5px 9px; cursor: pointer;
    font-variant-numeric: tabular-nums; font-weight: 650;
    font-size: calc(var(--tempo-fontsize) * 0.9);
    transition: background .15s ease, border-color .15s ease;
}
.mini:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mini svg { width: 14px; height: 14px; color: var(--accent); }
.is-busy .mini svg { animation: tempo-spin .9s linear infinite; transform-origin: 50% 50%; }
.mini .mini-dot { position: static; border: 0; width: 7px; height: 7px; }

/* ---- hidden mode: a barely-there corner dot ----------------------------- */
.dot-only {
    display: none;
    position: fixed; right: 7px; bottom: 7px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #9aa4b2;
}

/* display-mode switches (body class set by JS) */
.mode-card .mini,   .mode-card .dot-only   { display: none; }
.mode-minimal .card,   .mode-minimal .dot-only { display: none; }
.mode-minimal .mini { display: inline-flex; }
.mode-hidden .card, .mode-hidden .mini { display: none; }
.mode-hidden .tempo { padding: 0; }
.mode-hidden .status-dot.mini-dot { display: none; }

/* ---- density ------------------------------------------------------------ */
/* very small zone: drop the text, keep glyph + controls (card) or just the pill (minimal) */
.compact.mode-card .lines { display: none; }
.compact.mode-card .card { padding: 6px; gap: 6px; }

/* tall/narrow zone: stack the card contents into a column */
.tall .card-main { flex-direction: column; gap: 8px; text-align: center; }
.tall .lines { align-items: center; }
.tall .primary-line, .tall .secondary-line { white-space: normal; overflow: visible; }