/* ═══════════════════════════════════════════════════════════════
   SYNCHUB BADGE SYSTEM  –  sh-badge.css
   Centrální zdroj. Načítej POUZE odtud.
   Umístění: https://www.syncpoint.cz/fonts/sh-badge.css
   Font:      LINE Seed JP  –  fonts.google.com/specimen/LINE+Seed+JP
   ═══════════════════════════════════════════════════════════════ */

/* ── FONT – LINE Seed JP (lokální, offline) ─────────────────── */
@font-face {
  font-family: 'LINE Seed JP';
  src: url('https://www.syncpoint.cz/fonts/LINE_Seed_JP/line-seed-jp-100.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LINE Seed JP';
  src: url('https://www.syncpoint.cz/fonts/LINE_Seed_JP/line-seed-jp-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LINE Seed JP';
  src: url('https://www.syncpoint.cz/fonts/LINE_Seed_JP/line-seed-jp-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── KEYFRAMES ───────────────────────────────────────────────── */
@keyframes pulse      { 0%,100% { opacity:1;  transform:scale(1);    } 50% { opacity:.25; transform:scale(.55);  } }
@keyframes pulse-fast { 0%,100% { opacity:1;  transform:scale(1.1);  } 50% { opacity:.15; transform:scale(.4);   } }
@keyframes pulse-slow { 0%,100% { opacity:.9; transform:scale(1);    } 50% { opacity:.2;  transform:scale(.65);  } }
@keyframes pulse-hard { 0%,100% { opacity:1;  transform:scale(1.25); } 50% { opacity:.6;  transform:scale(.8);   } }
@keyframes spin       { to { transform:rotate(360deg); } }
@keyframes blink      { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }

/* ── BADGE – základní kontejner ─────────────────────────────── */
.sh-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'LINE Seed JP', sans-serif;
  font-size: 36px;
  color: #e6edf3;
  white-space: nowrap;
  line-height: 1;
}

/* ── ZÁVORKY ─────────────────────────────────────────────────── */
.sh-b-open,
.sh-b-close {
  font-size: 49px;   /* 36 × 1.35 */
  font-weight: 100;
  opacity: 0.5;
  display: flex;
  align-items: center;
  align-self: center;
  line-height: 1;
}
.sh-b-open  { margin-right: 14px; }
.sh-b-close { margin-left:   6px; }

/* ── TEXT ────────────────────────────────────────────────────── */
.sh-b-name {
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  align-self: center;
}

/* ── PUNTÍK – výchozí (active) ───────────────────────────────── */
.sh-b-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4a9eff;
  margin-left: 10px;
  align-self: center;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

/* ── STAVY  –  data-state="..." ──────────────────────────────── */
/*  Použití JS:  el.dataset.state = 'error';                       */

.sh-badge[data-state="active"]  .sh-b-dot { background: #4a9eff; animation: pulse      2s   ease-in-out infinite; }
.sh-badge[data-state="error"]   .sh-b-dot { background: #ff4444; animation: pulse-fast  .7s  ease-in-out infinite; }
.sh-badge[data-state="ready"]   .sh-b-dot { background: #44ff88; animation: pulse-slow 3.5s  ease-in-out infinite; }
.sh-badge[data-state="loading"] .sh-b-dot { background: #ffaa00; animation: spin       1.2s  linear      infinite; border-radius: 2px; }
.sh-badge[data-state="running"] .sh-b-dot {                       animation: pulse-hard  1s   ease-in-out infinite; }
.sh-badge[data-state="idle"]    .sh-b-dot { background: #555;    animation: none; opacity: .5; }
.sh-badge[data-state="info"]    .sh-b-dot { background: #cc44ff; animation: blink        1s   step-end   infinite; }

/* ── VELIKOSTNÍ VARIANTY ─────────────────────────────────────── */

/* NAV – drobná navigační ikona */
.sh-badge-nav               { font-size: 14px; }
.sh-badge-nav .sh-b-open,
.sh-badge-nav .sh-b-close   { font-size: 17px; }
.sh-badge-nav .sh-b-open    { margin-right: 8px; }
.sh-badge-nav .sh-b-close   { margin-left:  3px; }
.sh-badge-nav .sh-b-dot     { width: 5px; height: 5px; margin-left: 7px; }

/* LOGO – default (36px) – viz výše */

/* HERO – velké nadpisové použití */
.sh-badge-hero              { font-size: 64px; }
.sh-badge-hero .sh-b-open,
.sh-badge-hero .sh-b-close  { font-size: 90px; }
.sh-badge-hero .sh-b-open   { margin-right: 22px; }
.sh-badge-hero .sh-b-close  { margin-left:   9px; }
.sh-badge-hero .sh-b-dot    { width: 13px; height: 13px; margin-left: 16px; }

/* BADGE – inline/tag mikro varianta */
.sh-badge-badge             { font-size: 11px; }
.sh-badge-badge .sh-b-open,
.sh-badge-badge .sh-b-close { font-size: 12px; }
.sh-badge-badge .sh-b-open  { margin-right: 6px; }
.sh-badge-badge .sh-b-close { margin-left:  2px; }
.sh-badge-badge .sh-b-dot   { width: 4px; height: 4px; margin-left: 5px; }