/* SML Channel Layout Engine 1.1.0 — everything scoped under .lce-root (never body-level selectors). */
.lce-root {
  --lce-brand: #00ff88;
  --lce-sem: var(--lce-brand);
  --lce-ctx: transparent;
  --lce-glow: .2;
  --lce-radius: 12px;
  --lce-label-h: 28px;
  --lce-text: #eef7fb;
  --lce-muted: #b6c4ce;
  --lce-heat-n3: #b3261e; --lce-heat-n2: #d9534f; --lce-heat-n1: #f0a09c; --lce-heat-0: #8b949e;
  --lce-heat-p1: #9fe0c0; --lce-heat-p2: #2ebd85; --lce-heat-p3: #0e8a5f;
  position: relative;
  color: var(--lce-text);
  font: 500 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.lce-root *, .lce-root *::before, .lce-root *::after { box-sizing: border-box; }

/* palettes: semantic accent colors decorations only; the channel brand stays the brand */
.lce-root .lce-pal-brand { --lce-sem: var(--lce-brand); }
.lce-root .lce-pal-neon { --lce-sem: #00e5ff; --lce-sem2: #ff2bd6; }
.lce-root .lce-pal-crypto { --lce-sem: #f7931a; --lce-sem2: #8c8cff; }
.lce-root .lce-pal-market { --lce-sem: #16c784; --lce-sem2: #ea3943; }
.lce-root .lce-pal-slate { --lce-sem: #7fa7d9; --lce-sem2: #5fb3b3; }
.lce-root .lce-pal-chalk { --lce-sem: #f2c94c; --lce-sem2: #e0d6c3; }
.lce-root .lce-pal-pop { --lce-sem: #ff5c8a; --lce-sem2: #ffd23f; }
.lce-root.lce-accent-up { --lce-ctx: #16c784; }
.lce-root.lce-accent-down { --lce-ctx: #ea3943; }
.lce-root.lce-accent-alert { --lce-ctx: #f2c94c; }

.lce-canvas { position: relative; width: 100%; }
.lce-cluster { position: absolute; margin: 0; }
.lce-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: var(--lce-label-h); padding: 0 2px;
}
.lce-label {
  margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--lce-text); font-size: clamp(12px, 1.4vw, 17px); font-weight: 750; letter-spacing: .01em;
}
.lce-label::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%;
  background: var(--lce-sem); box-shadow: 0 0 calc(10px * var(--lce-glow)) var(--lce-sem);
  vertical-align: .08em;
}
.lce-label-mono .lce-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(11px, 1.25vw, 15px); }
.lce-label-chip .lce-label { padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--lce-sem) 18%, transparent); }
.lce-label-handwritten .lce-label { font-style: italic; }

.lce-content {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--lce-sem) 26%, transparent);
  border-top-color: color-mix(in srgb, var(--lce-ctx) 60%, color-mix(in srgb, var(--lce-sem) 26%, transparent));
  border-radius: var(--lce-radius);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--lce-sem) 9%, rgba(10, 22, 32, .55)), rgba(3, 10, 15, .92));
  box-shadow: 0 0 calc(28px * var(--lce-glow)) color-mix(in srgb, var(--lce-sem) 22%, transparent);
}
.lce-content[data-scroll="1"], .lce-more-track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.lce-content[data-scroll="1"] .lce-card { scroll-snap-align: start; }
.lce-content-inner { position: relative; height: 100%; }

.lce-card {
  position: absolute; display: block; overflow: hidden;
  color: #fff; text-decoration: none;
  border-radius: calc(var(--lce-radius) * .8);
  border: 1px solid rgba(255, 255, 255, .14);
  background: #0a1620;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .36);
  transform: rotate(var(--lce-rot, 0deg));
  transform-origin: center;
  transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}
.lce-card:hover, .lce-card:focus-visible {
  z-index: 1000 !important;
  transform: rotate(var(--lce-rot, 0deg)) scale(var(--lce-hover, 1));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 1px color-mix(in srgb, var(--lce-brand) 60%, transparent);
}
.lce-card:focus-visible { outline: 2px solid var(--lce-brand); outline-offset: 3px; }
.lce-card.is-anchor { border-color: color-mix(in srgb, var(--lce-brand) 55%, transparent); }
.lce-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lce-scrim { position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .94)); pointer-events: none; }
.lce-copy { position: absolute; left: 8px; right: 8px; bottom: 7px; text-shadow: 0 1px 3px #000; pointer-events: none; }
.lce-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 750; font-size: 13px; }
.lce-tier-xl .lce-title { font-size: 15px; }
.lce-tier-s .lce-title, .lce-root[data-vp="narrow"] .lce-tier-s .lce-title { font-size: 12px; -webkit-line-clamp: 1; }
.lce-meta { display: block; margin-top: 3px; color: var(--lce-muted); font-size: 11px; }
.lce-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.lce-badge { padding: 2px 6px; border-radius: 99px; background: var(--lce-brand); color: #021008; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.lce-badge-ticker { background: rgba(255, 255, 255, .16); color: #fff; }
.lce-badge-step { background: var(--lce-sem); color: #1a1405; }
.lce-badge-top { background: var(--lce-heat-p2); color: #021008; }
.lce-card.is-watched { opacity: .72; }
.lce-card.is-watched .lce-meta::after { content: " · Watched"; }

/* data grid heat (never color alone: cells also carry a text label for assistive tech) */
.lce-card[data-heat] { border-width: 2px; }
.lce-card[data-heat="-3"] { border-color: var(--lce-heat-n3); }
.lce-card[data-heat="-2"] { border-color: var(--lce-heat-n2); }
.lce-card[data-heat="-1"] { border-color: var(--lce-heat-n1); }
.lce-card[data-heat="0"] { border-color: var(--lce-heat-0); }
.lce-card[data-heat="1"] { border-color: var(--lce-heat-p1); }
.lce-card[data-heat="2"] { border-color: var(--lce-heat-p2); }
.lce-card[data-heat="3"] { border-color: var(--lce-heat-p3); }

/* overflow: "+N more" opens a lane under the canvas */
.lce-more {
  flex: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--lce-brand) 70%, transparent);
  background: rgba(6, 16, 24, .9); color: #fff;
}
.lce-more:hover, .lce-more:focus-visible { background: color-mix(in srgb, var(--lce-brand) 22%, #061018); outline: none; }
.lce-overflow { margin-top: 12px; }
.lce-more-lane { margin: 0 0 14px; }
.lce-more-title { margin: 0 0 8px; font-size: 14px; font-weight: 750; color: var(--lce-text); }
.lce-more-track { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.lce-card.lce-mini { position: relative; flex: 0 0 200px; height: 112px; transform: none; scroll-snap-align: start; }
.lce-card.lce-mini:hover, .lce-card.lce-mini:focus-visible { transform: translateY(-2px); }

/* motion hints */
@keyframes lce-pulse { 0%, 100% { box-shadow: 0 0 calc(18px * var(--lce-glow)) color-mix(in srgb, var(--lce-sem) 20%, transparent); } 50% { box-shadow: 0 0 calc(40px * var(--lce-glow)) color-mix(in srgb, var(--lce-sem) 38%, transparent); } }
@keyframes lce-slide-in { from { opacity: 0; translate: -14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes lce-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lce-wobble { 0%, 100% { rotate: 0deg; } 30% { rotate: -1.6deg; } 70% { rotate: 1.6deg; } }
.lce-motion-pulse .lce-content { animation: lce-pulse 4.5s ease-in-out infinite; }
.lce-motion-slide .lce-card { animation: lce-slide-in 420ms ease-out both; }
.lce-motion-subtle .lce-card { animation: lce-fade-in 360ms ease-out both; }
.lce-motion-wobble .lce-card:hover { animation: lce-wobble 520ms ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .lce-root *, .lce-root *::before, .lce-root *::after { animation: none !important; transition: none !important; }
  .lce-card:hover, .lce-card:focus-visible { transform: rotate(var(--lce-rot, 0deg)); }
}