/* =====================================================================
   Time & Event Widget — 18 vizuálních presetů

   KONTRAKT (B-20): preset smí nastavit VÝHRADNĚ tokeny --tew-p-*.
   Nikdy width, height, padding, margin, font-size na slotu, position ani
   display. Rozměry určuje --tew-control-h a --tew-slot-ch, proto je
   přepnutí presetu vždy bezrozměrné a hlavička se nepohne.

   Kontrasty jsou spočítané vůči --tew-p-bg (číslice ≥ 7:1, popisky ≥ 4,5:1).
   Hlavička je vždy tmavá, proto světlé presety (eink, lcd-blue, retro-alarm)
   mají povinný tmavý obrys — jinak by v hlavičce působily jako díra.
   ===================================================================== */

/* --------------------------------------------------------------------
   Základ — jak se tokeny uplatní
   ------------------------------------------------------------------ */

.tew-root {
  --tew-p-font: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --tew-p-weight: 600;
  --tew-p-lh: 1;
  --tew-p-tracking: -.01em;
  --tew-p-scale: 1;
  --tew-p-fg: #fff;
  --tew-p-fg-dim: rgba(255, 255, 255, .10);
  --tew-p-label: rgba(255, 255, 255, .72);
  --tew-p-bg: transparent;
  --tew-p-ring: rgba(255, 255, 255, .10);
  --tew-p-ring-w: 1px;
  --tew-p-radius: 999px;
  --tew-p-shadow: none;
  --tew-p-inset: none;
  --tew-p-glow: none;
  --tew-p-glow-a: 0;
  --tew-p-overlay: none;
  --tew-p-anim: none;
  --tew-p-anim-dur: 0ms;
  --tew-p-anim-ease: linear;
  --tew-p-sep-a: 1;
}

.tew-root[data-preset] .tew-trigger {
  font-family: var(--tew-p-font);
  border-width: var(--tew-p-ring-w);
  border-color: var(--tew-p-ring);
  border-radius: var(--tew-p-radius);
  background-color: var(--tew-p-bg);
  background-image: var(--tew-p-overlay);
  box-shadow: var(--tew-p-shadow), var(--tew-p-inset);
  color: var(--tew-p-fg);
}

.tew-root[data-preset] .tew-time {
  font-family: var(--tew-p-font);
  font-weight: var(--tew-p-weight);
  line-height: var(--tew-p-lh);
  letter-spacing: var(--tew-p-tracking);
  font-size: calc(15px * var(--tew-p-scale));
  color: var(--tew-p-fg);
  text-shadow: var(--tew-p-glow);
  animation: var(--tew-p-anim) var(--tew-p-anim-dur) var(--tew-p-anim-ease) infinite;
}

.tew-root[data-preset] .tew-lead,
.tew-root[data-preset] .tew-meta { color: var(--tew-p-label); }

/* Hero odpočet v panelu přebírá tytéž tokeny, jen ve velkém měřítku. */
.tew-panel[data-preset] .tew-cd-num {
  font-family: var(--tew-p-font);
  font-weight: var(--tew-p-weight);
  letter-spacing: var(--tew-p-tracking);
  color: var(--tew-p-fg);
  text-shadow: var(--tew-p-glow);
}

/* --------------------------------------------------------------------
   1. office-clean — Business
   ------------------------------------------------------------------ */
.tew-root[data-preset="office-clean"] {
  --tew-p-font: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --tew-p-weight: 600;
  --tew-p-fg: #fff;                  /* 19,4:1 */
  --tew-p-bg: transparent;
  --tew-p-ring: rgba(255, 255, 255, .10);
}

/* --------------------------------------------------------------------
   2. led-red — Retro
   ------------------------------------------------------------------ */
.tew-root[data-preset="led-red"] {
  --tew-p-font: 'Space Grotesk', ui-monospace, monospace;
  --tew-p-weight: 700;
  --tew-p-fg: #ff4136;               /* 5,78:1 vůči #140404 */
  --tew-p-fg-dim: rgba(255, 65, 54, .09);
  --tew-p-label: rgba(255, 130, 120, .9);
  --tew-p-bg: #140404;
  --tew-p-ring: rgba(255, 65, 54, .38);
  --tew-p-radius: 14px;
  --tew-p-inset: inset 0 0 18px rgba(255, 65, 54, .14);
  --tew-p-glow: 0 0 10px rgba(255, 65, 54, .55);
  --tew-p-glow-a: .45;
  --tew-p-overlay: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  --tew-p-anim: tew-pulse;
  --tew-p-anim-dur: 2600ms;
  --tew-p-anim-ease: ease-in-out;
}

/* --------------------------------------------------------------------
   3. vfd-green — Retro
   ------------------------------------------------------------------ */
.tew-root[data-preset="vfd-green"] {
  --tew-p-font: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --tew-p-weight: 600;
  --tew-p-fg: #35ff9e;               /* 14,36:1 vůči #04140c */
  --tew-p-fg-dim: rgba(53, 255, 158, .085);
  --tew-p-label: rgba(53, 255, 158, .72);
  --tew-p-bg: #04140c;
  --tew-p-ring: rgba(53, 255, 158, .3);
  --tew-p-radius: 14px;
  --tew-p-inset: inset 0 0 22px rgba(53, 255, 158, .12);
  --tew-p-glow: 0 0 9px rgba(53, 255, 158, .5);
  --tew-p-glow-a: .55;
}

/* --------------------------------------------------------------------
   4. lcd-blue — Retro (světlá plocha → povinný tmavý obrys)
   ------------------------------------------------------------------ */
.tew-root[data-preset="lcd-blue"] {
  --tew-p-font: ui-monospace, Menlo, monospace;
  --tew-p-weight: 700;
  --tew-p-fg: #0a1d3a;               /* 6,64:1 vůči #6ea8dc */
  --tew-p-label: #123a6b;
  --tew-p-bg: #6ea8dc;
  --tew-p-ring: rgba(0, 0, 0, .65);
  --tew-p-radius: 4px;
  --tew-p-inset: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -6px 14px rgba(0, 0, 0, .18);
}

/* --------------------------------------------------------------------
   5. split-flap — Retro
   ------------------------------------------------------------------ */
.tew-root[data-preset="split-flap"] {
  --tew-p-font: 'Space Grotesk', ui-monospace, monospace;
  --tew-p-weight: 700;
  --tew-p-fg: #f2f2f0;
  --tew-p-label: rgba(242, 242, 240, .68);
  --tew-p-bg: #141416;
  --tew-p-ring: rgba(0, 0, 0, .6);
  --tew-p-radius: 4px;
  --tew-p-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  --tew-p-inset: inset 0 1px 0 rgba(255, 255, 255, .06);
  --tew-p-overlay: linear-gradient(180deg, transparent 0 calc(50% - 1px), rgba(0, 0, 0, .7) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%);
}

/* --------------------------------------------------------------------
   6. neon-glow — Neon (bliká jen popisek, nikdy číslice)
   ------------------------------------------------------------------ */
.tew-root[data-preset="neon-glow"] {
  --tew-p-font: 'Space Grotesk', 'Inter', sans-serif;
  --tew-p-weight: 700;
  --tew-p-fg: #ff7ad9;               /* 7,42:1 vůči #0a0410 */
  --tew-p-label: rgba(255, 122, 217, .82);
  --tew-p-bg: #0a0410;
  --tew-p-ring: rgba(255, 122, 217, .5);
  --tew-p-glow: 0 0 6px rgba(255, 122, 217, .85), 0 0 20px rgba(255, 122, 217, .4);
  --tew-p-glow-a: .6;
}
.tew-root[data-preset="neon-glow"] .tew-lead {
  animation: tew-flicker 2400ms steps(1, end) infinite;
}

/* --------------------------------------------------------------------
   7. nixie — Retro (glow se v malé velikosti tlumí, jinak se slije)
   ------------------------------------------------------------------ */
.tew-root[data-preset="nixie"] {
  --tew-p-font: 'Instrument Serif', 'Space Grotesk', serif;
  --tew-p-weight: 400;
  --tew-p-scale: 1.08;
  --tew-p-fg: #ffa14a;               /* 9,12:1 vůči #120a06 */
  --tew-p-fg-dim: rgba(255, 161, 74, .10);
  --tew-p-label: rgba(255, 161, 74, .78);
  --tew-p-bg: #120a06;
  --tew-p-ring: rgba(255, 161, 74, .32);
  --tew-p-radius: 14px;
  --tew-p-glow: 0 0 6px rgba(255, 140, 30, .45);
  --tew-p-glow-a: .25;
  --tew-p-inset: inset 0 -8px 18px rgba(0, 0, 0, .55);
}
.tew-panel[data-preset="nixie"] .tew-cd-num { text-shadow: 0 0 14px rgba(255, 140, 30, .7); }

/* --------------------------------------------------------------------
   8. retro-alarm — Retro (světlá plocha → tmavý obrys)
   ------------------------------------------------------------------ */
.tew-root[data-preset="retro-alarm"] {
  --tew-p-font: 'Space Grotesk', 'Inter', sans-serif;
  --tew-p-weight: 700;
  --tew-p-fg: #1b1b1b;               /* 13,9:1 vůči #e8ded0 */
  --tew-p-label: #4a3c2c;
  --tew-p-bg: #e8ded0;
  --tew-p-ring: rgba(0, 0, 0, .55);
  --tew-p-radius: 14px;
  --tew-p-inset: inset 0 1px 0 rgba(255, 255, 255, .7);
  --tew-p-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

/* --------------------------------------------------------------------
   9. minimal-type — Minimal
   ------------------------------------------------------------------ */
.tew-root[data-preset="minimal-type"] {
  --tew-p-font: 'Inter', system-ui, sans-serif;
  --tew-p-weight: 300;
  --tew-p-tracking: .02em;
  --tew-p-fg: #fff;
  --tew-p-bg: transparent;
  --tew-p-ring: transparent;
  --tew-p-ring-w: 0;
  --tew-p-radius: 0;
}

/* --------------------------------------------------------------------
   10. glass — Minimal
   (backdrop-filter jen v panelu; hlavička už blur má, druhý nic nepřidá)
   ------------------------------------------------------------------ */
.tew-root[data-preset="glass"] {
  --tew-p-font: 'Space Grotesk', 'Inter', sans-serif;
  --tew-p-weight: 600;
  --tew-p-fg: #fff;
  --tew-p-bg: rgba(255, 255, 255, .07);
  --tew-p-ring: rgba(255, 255, 255, .22);
  --tew-p-radius: 999px;
  --tew-p-inset: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.tew-panel[data-preset="glass"] .tew-cd {
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* --------------------------------------------------------------------
   11. industrial — Industrial
   ------------------------------------------------------------------ */
.tew-root[data-preset="industrial"] {
  --tew-p-font: ui-monospace, Menlo, monospace;
  --tew-p-weight: 700;
  --tew-p-fg: #e6e8ea;               /* 12,1:1 vůči #1a1c1f */
  --tew-p-label: rgba(230, 232, 234, .68);
  --tew-p-bg: #1a1c1f;
  --tew-p-ring: #3a3f45;
  --tew-p-ring-w: 2px;
  --tew-p-radius: 4px;
  --tew-p-overlay: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 6px);
}

/* --------------------------------------------------------------------
   12. terminal — Industrial
   ------------------------------------------------------------------ */
.tew-root[data-preset="terminal"] {
  --tew-p-font: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --tew-p-weight: 600;
  --tew-p-fg: #63f58a;               /* 13,0:1 vůči #050805 */
  --tew-p-label: rgba(99, 245, 138, .72);
  --tew-p-bg: #050805;
  --tew-p-ring: rgba(99, 245, 138, .28);
  --tew-p-radius: 4px;
  --tew-p-glow: 0 0 7px rgba(99, 245, 138, .32);
  --tew-p-glow-a: .32;
}
.tew-root[data-preset="terminal"] .tew-time::after {
  content: "_";
  animation: tew-caret 1060ms steps(1, end) infinite;
}

/* --------------------------------------------------------------------
   13. luxury-gold — Luxury (plná barva ve slotu, gradient jen v hero)
   ------------------------------------------------------------------ */
.tew-root[data-preset="luxury-gold"] {
  --tew-p-font: 'Instrument Serif', Georgia, serif;
  --tew-p-weight: 400;
  --tew-p-scale: 1.08;
  --tew-p-fg: #e6c16a;               /* 11,29:1 vůči #0b0906 */
  --tew-p-label: rgba(230, 193, 106, .8);
  --tew-p-bg: #0b0906;
  --tew-p-ring: rgba(230, 193, 106, .42);
  --tew-p-radius: 4px;
  --tew-p-glow: 0 1px 0 rgba(0, 0, 0, .6);
  --tew-p-inset: inset 0 1px 0 rgba(230, 193, 106, .16);
}

/* --------------------------------------------------------------------
   14. sport-timer — Sport
   ------------------------------------------------------------------ */
.tew-root[data-preset="sport-timer"] {
  --tew-p-font: 'Space Grotesk', 'Inter', sans-serif;
  --tew-p-weight: 700;
  --tew-p-fg: #f5f7fa;               /* 17,4:1 vůči #0c0e12 */
  --tew-p-label: var(--tew-accent, #ffc423);
  --tew-p-bg: #0c0e12;
  --tew-p-ring: rgba(255, 196, 35, .6);
  --tew-p-radius: 4px;
  --tew-p-shadow: 0 3px 0 rgba(255, 196, 35, .55);
}
.tew-root[data-preset="sport-timer"][data-tew-urgency="final"] { --tew-p-fg: #ff6b6b; }

/* --------------------------------------------------------------------
   15. analog-digital — Business
   ------------------------------------------------------------------ */
.tew-root[data-preset="analog-digital"] {
  --tew-p-font: 'Inter', system-ui, sans-serif;
  --tew-p-weight: 600;
  --tew-p-scale: .96;
  --tew-p-fg: #fff;
  --tew-p-bg: rgba(255, 255, 255, .05);
  --tew-p-ring: rgba(255, 255, 255, .16);
}
.tew-root[data-preset="analog-digital"] .tew-caret {
  border: 1.5px solid currentColor;
  border-radius: 50%;
  width: 14px; height: 14px;
  opacity: .8;
}

/* --------------------------------------------------------------------
   16. holo — Experimental (v hlavičce jednobarevný, přeliv jen v panelu)
   ------------------------------------------------------------------ */
.tew-root[data-preset="holo"] {
  --tew-p-font: 'Space Grotesk', 'Inter', sans-serif;
  --tew-p-weight: 700;
  --tew-p-fg: #7ce7ff;               /* 13,63:1 vůči #040a0f */
  --tew-p-label: rgba(124, 231, 255, .78);
  --tew-p-bg: #040a0f;
  --tew-p-ring: rgba(124, 231, 255, .34);
  --tew-p-radius: 14px;
  --tew-p-glow: 0 0 8px rgba(124, 231, 255, .4);
  --tew-p-glow-a: .4;
}
.tew-panel[data-preset="holo"] .tew-cd {
  background-image: linear-gradient(120deg, rgba(0, 180, 255, .14), rgba(180, 0, 255, .14));
  background-size: 200% 100%;
  animation: tew-shift 7000ms linear infinite;
}

/* --------------------------------------------------------------------
   17. flip-clock — Retro
   ------------------------------------------------------------------ */
.tew-root[data-preset="flip-clock"] {
  --tew-p-font: 'Space Grotesk', ui-monospace, monospace;
  --tew-p-weight: 700;
  --tew-p-fg: #f5f5f3;
  --tew-p-label: rgba(245, 245, 243, .66);
  --tew-p-bg: #1c1c1e;
  --tew-p-ring: rgba(0, 0, 0, .6);
  --tew-p-radius: 4px;
  --tew-p-shadow: 0 3px 8px rgba(0, 0, 0, .45);
  --tew-p-overlay: linear-gradient(180deg, rgba(255, 255, 255, .05) 0 50%, rgba(0, 0, 0, .18) 50% 100%);
}

/* --------------------------------------------------------------------
   18. eink — Minimal (světlá plocha → povinný tmavý obrys)
   ------------------------------------------------------------------ */
.tew-root[data-preset="eink"] {
  --tew-p-font: 'Inter', system-ui, sans-serif;
  --tew-p-weight: 600;
  --tew-p-fg: #17171a;               /* 14,34:1 vůči #e8e6e1 */
  --tew-p-label: #3c3c40;
  --tew-p-bg: #e8e6e1;
  --tew-p-ring: rgba(0, 0, 0, .55);
  --tew-p-radius: 4px;
  --tew-p-inset: inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* --------------------------------------------------------------------
   Klíčové snímky — všechny ≥ 900 ms, žádné blikání pod tuto hranici
   ------------------------------------------------------------------ */

@keyframes tew-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .88; }
}

/* Nepravidelný, pevný seznam snímků — nikdy alternate, krytí nikdy pod .86 */
@keyframes tew-flicker {
  0%, 85%, 100% { opacity: 1; }
  86%           { opacity: .86; }
  87%           { opacity: 1; }
  92%           { opacity: .9; }
  93%           { opacity: 1; }
}

@keyframes tew-caret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes tew-shift {
  0%   { background-position: 0 50%; }
  100% { background-position: 200% 50%; }
}

/* Statická varianta každého animovaného presetu — ne jen vypnutá animace. */
@media (prefers-reduced-motion: reduce) {
  .tew-root[data-preset] .tew-time,
  .tew-root[data-preset] .tew-lead,
  .tew-root[data-preset="terminal"] .tew-time::after,
  .tew-panel[data-preset="holo"] .tew-cd {
    animation: none !important;
    opacity: 1 !important;
  }
  .tew-panel[data-preset="holo"] .tew-cd { background-position: 0 50%; }
}