/* PULSE-FUN-V1 — the parts that make Pulse feel alive.
   Loaded for every theme; the richer glass look is scoped to html.t27.
   1 empty states  2 badges  3 the race  4 living heartbeat  5 Wrapped chip
   6 profile extras  7 sidebar light that follows the time of day */

/* ── 1. empty states: an icon, a line with personality, and a real next step ── */
.es { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 18px 22px; }
.es.es-compact { padding: 14px 12px 12px; gap: 4px; }
.es-ic { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; margin-bottom: 6px; color: var(--primary-2, #6366F1);
  background: radial-gradient(circle at 50% 30%, var(--primary-soft, rgba(129, 140, 248, .22)), transparent); box-shadow: inset 0 0 0 1px var(--primary-ring, rgba(99, 102, 241, .18)); }
.es-compact .es-ic { width: 40px; height: 40px; margin-bottom: 2px; }
.es-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.es-compact .es-ic svg { width: 19px; height: 19px; }
.es-title { font-size: 15px; font-weight: 600; color: var(--text, #17171C); }
.es-body { margin: 0; max-width: 34ch; font-size: 13px; line-height: 1.45; color: var(--ink-3, #666876); }
.es-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.es-act { border-radius: 999px !important; }
html.t27 .es-ic { animation: es-float 5s ease-in-out infinite; }
@keyframes es-float { 50% { transform: translateY(-3px); } }
html.t27 .es-act:not(.ghost) { background: var(--t27-grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--sh-accent); }
html.t27[data-theme="dark"] .es-ic { color: #A5B4FC; background: radial-gradient(circle at 50% 30%, rgba(129, 140, 248, .26), rgba(99, 102, 241, .08)); }
.notif-empty .es { padding: 18px 12px; }
table .es { padding: 20px 12px; }

/* ── 2. badges ── */
.bd-row { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle; }
.bd { width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; color: #fff; flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 8px -4px rgba(23, 23, 28, .45); }
.bd svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bd-first_deal { background: linear-gradient(145deg, #FCD34D, #D97706); }
.bd-fastest { background: linear-gradient(145deg, #FDE047, #F97316); }
.bd-calls50 { background: linear-gradient(145deg, #818CF8, #4F46E5); }
.bd-zero_untouched { background: linear-gradient(145deg, #6EE7B7, #059669); }
.bd-labels { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.bd-labels .bd { width: auto; height: 30px; padding: 0 12px 0 5px; gap: 7px; display: inline-flex; font-size: 12.5px; font-weight: 600; }
.bd-labels .bd svg { width: 20px; height: 20px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.t27-pod .bd-row { margin: 6px 0 0; justify-content: center; display: flex; }
.t27-lb-name { display: inline-flex; align-items: center; }

/* ── 3. the race ── */
html.t27 .t27-race { padding: 22px 22px 18px; }
html.t27 .t27-race .t27-board-head { align-items: center; }
.t27-race-set { position: relative; }
.t27-race-set summary { list-style: none; cursor: pointer; border-radius: 999px !important; }
.t27-race-set summary::-webkit-details-marker { display: none; }
.t27-race-form { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: 320px; padding: 16px; border-radius: 18px; background: var(--surface, #fff); box-shadow: var(--sh-overlay, 0 20px 60px rgba(0,0,0,.2)); display: grid; gap: 10px; }
.t27-race-form label span { display: block; font-size: 12px; color: var(--ink-3, #666876); margin-bottom: 6px; }
.t27-race-form input { width: 100%; box-sizing: border-box; }
.t27-race-form-actions { display: flex; gap: 8px; }
.t27-race-hint { margin: 0; font-size: 12px; color: var(--ink-3, #666876); }
.t27-track { position: relative; display: grid; gap: 10px; padding: 6px 4px 4px; }
.t27-lane { display: grid; grid-template-columns: 22px minmax(90px, 150px) minmax(0, 1fr) minmax(150px, max-content); align-items: center; column-gap: 14px; min-height: 44px; }
.t27-lane-rank { font-size: 13px; font-weight: 600; color: var(--ink-3, #666876); text-align: center; font-variant-numeric: tabular-nums; }
.t27-lane.lead .t27-lane-rank { color: #D97706; }
.t27-lane-name { font-size: 14px; font-weight: 600; color: var(--text, #17171C); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t27-lane-road { position: relative; height: 12px; border-radius: 999px; margin: 0 18px 0 0;
  background: repeating-linear-gradient(90deg, rgba(23, 23, 28, .07) 0 14px, rgba(23, 23, 28, .03) 14px 22px); }
html.t27[data-theme="dark"] .t27-lane-road { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0 14px, rgba(255, 255, 255, .04) 14px 22px); }
.t27-lane-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--t27-grad, linear-gradient(90deg, #4338CA, #8B5CF6)); opacity: .55; }
.t27-lane.lead .t27-lane-fill { background: var(--t27-grad, linear-gradient(90deg, #4338CA, #8B5CF6)); box-shadow: 0 0 16px rgba(139, 92, 246, .45); }
.t27-runner { position: absolute; top: 50%; left: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; padding: 2px; box-sizing: border-box;
  background: #fff; box-shadow: 0 6px 16px -6px rgba(23, 23, 28, .45), 0 0 0 1px rgba(23, 23, 28, .06); }
.t27-lane.lead .t27-runner { background: linear-gradient(145deg, #FCD34D, #D97706); }
.t27-runner-img { width: 100% !important; height: 100% !important; border-radius: 50% !important; display: grid; place-items: center; object-fit: cover; font-size: 13px; font-weight: 600; color: #fff; background: #8A8B95; }
.t27-lane-amt { justify-self: end; font-size: 14px; font-weight: 600; color: var(--text, #17171C); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t27-lane-amt em { font-style: normal; margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--primary, #4F46E5); }
.t27-finish { display: none; }
.t27-lane-road::after { content: ""; position: absolute; right: -9px; top: -9px; bottom: -9px; width: 6px; border-radius: 2px; opacity: .75; pointer-events: none;
  background: repeating-conic-gradient(#17171C 0 25%, #fff 0 50%) 0 0 / 6px 6px; }
html.t27[data-theme="dark"] .t27-lane-road::after { background: repeating-conic-gradient(#ECECF1 0 25%, #131313 0 50%) 0 0 / 6px 6px; }
.t27-lane:first-child .t27-lane-road[data-finish]::before { content: attr(data-finish); position: absolute; right: -24px; top: -26px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #666876); white-space: nowrap; }
/* go: fills stretch and runners move when the track comes into view */
.t27-track .t27-lane-fill { width: calc(var(--p) * 100%); transform-origin: left center; transform: scaleX(0); }
.t27-track .t27-runner { left: calc(var(--p) * 100%); transform: translateX(calc(var(--p) * -100cqw)); }
.t27-lane-road { container-type: inline-size; }
.t27-track.lb-in .t27-lane-fill { animation: race-fill 1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--i) * 110ms + 100ms); }
.t27-track.lb-in .t27-runner { animation: race-run 1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--i) * 110ms + 100ms); }
@keyframes race-fill { to { transform: scaleX(1); } }
@keyframes race-run { to { transform: translateX(0); } }

/* ── 4. living heartbeat ── */
html.t27 .t27-pulse-note { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-variant-numeric: tabular-nums; }
html.t27[data-theme="dark"] .t27-pulse-note { background: rgba(255, 255, 255, .06); }
html.t27 .t27-pulse-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #94A3B8; }
html.t27 .t27-h1-pulse[data-level="1"] .t27-pulse-note::before { background: #22C55E; animation: pulse-dot var(--beat, 2.2s) ease-out infinite; }
html.t27 .t27-h1-pulse[data-level="2"] .t27-pulse-note::before, html.t27 .t27-h1-pulse[data-level="3"] .t27-pulse-note::before { background: #22C55E; animation: pulse-dot var(--beat, 1s) ease-out infinite; }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }
html.t27 .t27-h1-pulse { --beat: 3.4s; }
html.t27 .t27-h1-pulse[data-level="1"] { --beat: 2.2s; }
html.t27 .t27-h1-pulse[data-level="2"] { --beat: 1.3s; }
html.t27 .t27-h1-pulse[data-level="3"] { --beat: .8s; }
html.t27 .t27-ekg .t27-ekg-spark {
  fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0;
  stroke-dasharray: .07 .93; stroke-dashoffset: 1.07;
  filter: drop-shadow(0 0 4px rgba(165, 180, 252, .95)) drop-shadow(0 0 10px rgba(139, 92, 246, .8));
  animation: ekg-spark var(--beat) linear 1.8s infinite;
}
html.t27[data-theme="dark"] .t27-ekg .t27-ekg-spark { stroke: #E0E7FF; }
@keyframes ekg-spark { 0% { stroke-dashoffset: 1.07; opacity: 1; } 70% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ── 5. Wrapped chip ── */
html.t27 .t27-wrapped-chip { display: inline-flex; align-items: center; gap: 7px; margin-left: 12px; padding: 4px 12px 4px 8px; border-radius: 999px; vertical-align: 1px;
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #fff; background: var(--t27-grad); box-shadow: var(--sh-accent);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); }
html.t27 .t27-wrapped-chip:hover { transform: translateY(-1px); color: #fff; }
.t27-wc-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse-white 2s ease-out infinite; }
@keyframes pulse-white { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } }

/* ── 6. profile extras ── */
.profile-fun { display: grid; justify-items: center; gap: 8px; margin-top: 14px; }
.profile-fun-k { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3, #666876); }
.profile-wrapped { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 6px; border-radius: 999px !important; }
.profile-wrapped svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* ── 7. the sidebar's light follows the time of day (html[data-daypart] set in pulse-theme27.js) ── */
html.t27 { --sg1: 99, 102, 241; --sg1a: .55; --sg2: 139, 92, 246; --sg2a: .34; --sg3: 34, 211, 238; --sg3a: .28; }
html.t27[data-daypart="morning"] { --sg1: 56, 189, 248; --sg1a: .50; --sg2: 45, 212, 191; --sg2a: .30; --sg3: 129, 140, 248; --sg3a: .34; }
html.t27[data-daypart="evening"] { --sg1: 244, 114, 182; --sg1a: .40; --sg2: 139, 92, 246; --sg2a: .42; --sg3: 251, 146, 60; --sg3a: .28; }
html.t27[data-daypart="night"] { --sg1: 79, 70, 229; --sg1a: .42; --sg2: 126, 34, 206; --sg2a: .26; --sg3: 30, 64, 175; --sg3a: .30; }

@media (prefers-reduced-motion: reduce) {
  html.t27 .es-ic, .t27-wc-dot, html.t27 .t27-pulse-note::before, html.t27 .t27-ekg .t27-ekg-spark { animation: none !important; }
  .t27-track .t27-lane-fill, .t27-track.lb-in .t27-lane-fill { animation: none; transform: none; }
  .t27-track .t27-runner, .t27-track.lb-in .t27-runner { animation: none; transform: none; }
}
@media (max-width: 900px) {
  .t27-lane { grid-template-columns: 20px minmax(70px, 110px) minmax(0, 1fr) auto; }
  .t27-finish { display: none; }
}