/* ==================================================================
   LEGEND TOWN  —  LIVE ACTIVITY RAIL
   ------------------------------------------------------------------
   The bar down the left of every page. Same visual language as the
   department cards on the apply page: sharp 6px corners, the two
   bold brackets, logo blue, right-aligned Arabic.

   Everything it shows comes from the applications bot over
   /api/recent. If that call fails the whole rail stays hidden — the
   site would rather show nothing than show made-up names.
   ================================================================== */

:root {
  --lt-feed-w: 288px;
}

/* ------------------------------------------------------------------
   1. THE HANDLE  —  the little tab stuck to the left edge
------------------------------------------------------------------ */
.lt-feed-tab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9001;

  display: none;              /* shown by JS once real data arrives */
  align-items: center;
  gap: .45rem;
  padding: .9rem .55rem;

  border: 1px solid rgba(32,144,208,.35);
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(135deg, rgba(32,144,208,.22), rgba(8,13,22,.95));
  color: var(--lt-blue-bright, #6FCBF5);
  cursor: pointer;

  writing-mode: vertical-rl;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;

  box-shadow: 0 6px 24px rgba(0,0,0,.5);
  transition: background .3s, color .3s, padding .3s;
}
.lt-feed-tab.is-on { display: flex; }
.lt-feed-tab:hover {
  padding-inline: .8rem .55rem;
  background: linear-gradient(135deg, rgba(32,144,208,.4), rgba(8,13,22,.95));
  color: #fff;
}
.lt-feed-tab i {
  writing-mode: horizontal-tb;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  animation: lt-feed-pulse 2s infinite;
}

@keyframes lt-feed-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}


/* ------------------------------------------------------------------
   1B. STAFF / MANAGEMENT HANDLE — permanently separated on the RIGHT
   from the live activity handle on the LEFT.  No layout movement on
   hover; only a subtle glow changes.
------------------------------------------------------------------ */
.lt-staff-edge-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9002;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: 48px;
  padding: .78rem .58rem;
  border: 1px solid rgba(32,144,208,.38);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(225deg, rgba(32,144,208,.24), rgba(8,13,22,.97));
  color: #8ddcff;
  text-decoration: none;
  writing-mode: vertical-rl;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 22px rgba(32,144,208,.08);
  transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}
.lt-staff-edge-tab:hover {
  color: #fff;
  background: linear-gradient(225deg, rgba(32,144,208,.38), rgba(8,13,22,.98));
  box-shadow: 0 8px 30px rgba(0,0,0,.55), 0 0 24px rgba(32,144,208,.18);
}
.lt-staff-edge-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  writing-mode: horizontal-tb;
}
.lt-staff-edge-icon svg { width: 18px; height: 18px; display: block; }

@media (max-width: 720px) {
  .lt-staff-edge-tab { min-width: 43px; padding: .7rem .5rem; font-size: .62rem; }
  .lt-staff-edge-icon, .lt-staff-edge-icon svg { width: 16px; height: 16px; }
}

/* ------------------------------------------------------------------
   2. THE BACKDROP  —  only used when the rail opens over the page
------------------------------------------------------------------ */
.lt-feed-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8999;
  background: rgba(2, 5, 10, .65);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.lt-feed-backdrop.is-open { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------------
   3. THE PANEL
------------------------------------------------------------------ */
.lt-feed {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(calc(-1 * var(--lt-feed-w) - 20px));
  z-index: 9000;

  width: var(--lt-feed-w);
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  direction: rtl;
  text-align: right;

  border: 1px solid rgba(255,255,255,.09);
  border-left: 1px solid rgba(32,144,208,.28);
  border-radius: 0 6px 6px 0;
  background:
    linear-gradient(200deg, rgba(32,144,208,.10) 0%, rgba(11,18,32,.72) 45%),
    rgba(6, 10, 18, .96);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);

  transition: transform .4s cubic-bezier(.2,.8,.3,1);
}
.lt-feed.is-open { transform: translateY(-50%) translateX(0); }

/* the same two brackets the cards have */
.lt-feed::before,
.lt-feed::after {
  content: '';
  position: absolute;
  width: 26px; height: 26px;
  border-color: var(--lt-blue, #2090D0);
  border-style: solid;
  opacity: .7;
  pointer-events: none;
}
.lt-feed::before { top: -1px;    right: -1px; border-width: 3px 3px 0 0; }
.lt-feed::after  { bottom: -1px; right: -1px; border-width: 0 3px 3px 0; }

/* ---- head ---- */
.lt-feed-head {
  position: relative;
  flex: 0 0 auto;
  padding: 1.05rem 1.1rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.lt-feed-head h4 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.01em;
}
.lt-feed-live {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .4rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,.3);
  background: rgba(34,197,94,.1);
  color: #4ade80;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.lt-feed-live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: lt-feed-pulse 2s infinite;
}
.lt-feed-x {
  position: absolute;
  top: .8rem; left: .8rem;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  color: #94a3b8;
  font-size: .8rem;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.lt-feed-x:hover { background: rgba(239,68,68,.15); color: #fca5a5; }

/* ---- counters ---- */
.lt-feed-stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.lt-feed-stat {
  padding: .7rem .3rem;
  text-align: center;
  background: rgba(6,10,18,.9);
}
.lt-feed-stat b {
  display: block;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--lt-blue-bright, #6FCBF5);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.lt-feed-stat small {
  display: block;
  margin-top: .15rem;
  font-size: .6rem;
  color: #64748b;
  font-weight: 700;
}

/* ---- tabs ---- */
.lt-feed-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: .3rem;
  padding: .6rem .6rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.lt-feed-tabs button {
  flex: 1;
  padding: .42rem .2rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: rgba(255,255,255,.03);
  color: #94a3b8;
  font-size: .66rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.lt-feed-tabs button:hover { color: #cbd5e1; background: rgba(255,255,255,.06); }
.lt-feed-tabs button.is-active {
  border-color: rgba(32,144,208,.45);
  background: rgba(32,144,208,.16);
  color: #fff;
}

/* ---- the list ---- */
.lt-feed-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem .55rem .8rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(32,144,208,.4) transparent;
}
.lt-feed-list::-webkit-scrollbar { width: 5px; }
.lt-feed-list::-webkit-scrollbar-thumb {
  background: rgba(32,144,208,.4);
  border-radius: 3px;
}

.lt-feed-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .55rem;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: background .25s, border-color .25s;
  animation: lt-feed-in .35s ease both;
}
.lt-feed-row:hover {
  background: rgba(32,144,208,.08);
  border-color: rgba(32,144,208,.2);
}

@keyframes lt-feed-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

.lt-feed-av {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(32,144,208,.3);
  background: rgba(32,144,208,.12) center/cover no-repeat;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lt-blue-bright, #6FCBF5);
  font-size: .78rem;
  font-weight: 900;
  overflow: hidden;
}

.lt-feed-body { min-width: 0; flex: 1 1 auto; }
.lt-feed-name {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lt-feed-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .15rem;
  font-size: .62rem;
  color: #64748b;
}
.lt-feed-dept {
  padding: .1rem .4rem;
  border-radius: 3px;
  border: 1px solid rgba(32,144,208,.28);
  background: rgba(32,144,208,.1);
  color: var(--lt-blue-bright, #6FCBF5);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 108px;
}
.lt-feed-ok {
  flex: 0 0 auto;
  color: #4ade80;
  font-size: .8rem;
}

.lt-feed-empty {
  padding: 1.8rem .8rem;
  text-align: center;
  color: #475569;
  font-size: .72rem;
  line-height: 1.9;
}

.lt-feed-foot {
  flex: 0 0 auto;
  padding: .5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
  font-size: .58rem;
  color: #475569;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------------
   4. DOCKED vs OVERLAY
   ------------------------------------------------------------------
   On a wide screen the rail sits in the empty gutter beside the
   content and needs no backdrop. Narrower than that it opens over
   the page instead, so it never covers anything you were reading.
------------------------------------------------------------------ */
@media (max-width: 1439px) {
  .lt-feed.is-open ~ .lt-feed-backdrop,
  .lt-feed-backdrop.is-open { opacity: 1; visibility: visible; }
}

@media (min-width: 1440px) {
  .lt-feed-backdrop { display: none; }
}

@media (max-width: 640px) {
  :root { --lt-feed-w: min(86vw, 300px); }
  .lt-feed { max-height: 82vh; }
  .lt-feed-tab { font-size: .66rem; padding: .75rem .45rem; }
}

/* someone who prefers less movement gets less movement */
@media (prefers-reduced-motion: reduce) {
  .lt-feed, .lt-feed-row, .lt-feed-tab i, .lt-feed-live i {
    transition: none;
    animation: none;
  }
}


/* ============================================================
   LEGEND TOWN GLOBAL HEADER FIX
   Prevent fixed/sticky navigation from covering page content.
   ============================================================ */
:root {
  --lt-header-height: 84px;
  --lt-header-gap: 24px;
}

html {
  scroll-padding-top: calc(var(--lt-header-height) + var(--lt-header-gap));
}

body {
  padding-top: 0 !important;
}

/* Common fixed/sticky header selectors used by the site */
header,
.site-header,
.main-header,
.navbar,
nav.site-nav,
.topbar,
.top-nav {
  z-index: 1000;
}

/* Main page containers must begin below the fixed header */
main,
main.page,
.page-content,
.page-container,
.content,
.site-content,
.page-section,
section:first-of-type {
  scroll-margin-top: calc(var(--lt-header-height) + var(--lt-header-gap));
}

/* Explicit hero/page-title spacing. This intentionally uses margin/padding
   rather than transforms so headings cannot slide underneath the header. */
.hero,
.page-hero,
.page-title,
.leaderboard-page,
.leaderboard,
.faq-page,
.team-page,
.streams-page,
.apply-page,
.applications-page {
  position: relative;
  z-index: 1;
}

.page-hero,
.page-title,
.leaderboard-page > .page-title,
.leaderboard > .page-title {
  padding-top: calc(var(--lt-header-height) + var(--lt-header-gap)) !important;
}

@media (max-width: 900px) {
  :root {
    --lt-header-height: 72px;
    --lt-header-gap: 18px;
  }

  .page-hero,
  .page-title,
  .leaderboard-page > .page-title,
  .leaderboard > .page-title {
    padding-top: calc(var(--lt-header-height) + var(--lt-header-gap)) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --lt-header-height: 64px;
    --lt-header-gap: 14px;
  }
}