/* ============================================================
   THE LEVEL BOARD — price vs mapped coves
   Coffee & Trades · scoped to #ct-levels
   ============================================================ */

#ct-levels {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  margin: 28px 0 0;
}

#ct-levels * { box-sizing: border-box; }

#ct-levels .lv-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

#ct-levels .lv-frame {
  border: 1px solid #d6d0c6;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 0 var(--paper3), 0 10px 26px -18px rgba(40, 30, 16, .5);
}

/* ---------- masthead ---------- */

#ct-levels .lv-top {
  background: linear-gradient(180deg, #241e1a 0%, #171310 100%);
  padding: 13px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

#ct-levels .lv-name {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: -.2px; color: var(--paper);
}

#ct-levels .lv-kicker {
  font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: .16em; color: #8f8a82;
  border-left: 1px solid #3a3733; padding-left: 14px;
}

/* ---------- list switcher ---------- */

#ct-levels .lv-pick {
  display: inline-flex; align-items: center; gap: 8px;
  background: #2e2823; border: 1px solid #3f3a35; border-radius: 5px;
  padding: 5px 11px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--paper);
  transition: border-color .14s, background .14s;
}

#ct-levels .lv-pick:hover { border-color: #55504a; background: #352f29; }
#ct-levels .lv-pick-n { font-family: 'DM Mono', monospace; font-size: 9px; color: #8f8a82; }
#ct-levels .lv-caret { font-size: 8px; color: #8f8a82; }

#ct-levels .lv-menu {
  display: none;
  background: #fdfcfa;
  border-bottom: 1px solid #d6d0c6;
  padding: 6px;
}

#ct-levels .lv-menu.open { display: block; }

#ct-levels .lv-menu-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 11px; border-radius: 4px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: var(--ink);
  transition: background .1s;
}

#ct-levels .lv-menu-item:hover { background: var(--paper2); }
#ct-levels .lv-menu-item[aria-selected="true"] { background: var(--paper2); }
#ct-levels .lv-menu-item[aria-selected="true"] .lv-menu-name::after {
  content: ' \2713'; color: var(--gold);
}
#ct-levels .lv-menu-name { flex: 1; }
#ct-levels .lv-menu-n { font-family: 'DM Mono', monospace; font-size: 9.5px; color: var(--ink3); }

#ct-levels .lv-live {
  margin-left: auto;
  display: flex; align-items: center; gap: 7px;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px; letter-spacing: .1em; color: var(--gold);
}

#ct-levels .lv-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); font-style: normal;
  box-shadow: 0 0 0 3px rgba(200, 160, 0, .18);
  animation: lvPulse 2.4s infinite;
}

#ct-levels .lv-live.stale i { background: var(--rule2); box-shadow: none; animation: none; }
#ct-levels .lv-live.stale { color: #8f8a82; }

@keyframes lvPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(200, 160, 0, .18); }
  50% { box-shadow: 0 0 0 6px rgba(200, 160, 0, 0); }
}

/* ---------- column head ---------- */

#ct-levels .lv-cols {
  display: flex; gap: 8px; padding: 7px 16px;
  background: linear-gradient(180deg, #efeae2 0%, #e7e1d7 100%);
  border-bottom: 1px solid #d6d0c6;
  font-family: 'DM Mono', monospace;
  font-size: 7.5px; letter-spacing: .13em; color: #7d766d;
}

/* ---------- group band ---------- */

#ct-levels .lv-group {
  padding: 6px 16px 5px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-family: 'DM Mono', monospace;
  font-size: 7px; letter-spacing: .18em; color: #b5aea4;
}

/* ---------- rows ---------- */

#ct-levels .lv-row {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 16px;
  font-family: 'DM Mono', monospace; font-size: 11px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer; position: relative;
  transition: background .13s ease;
  background: #fdfcfa;
}

#ct-levels .lv-row.alt { background: #f9f7f3; }
#ct-levels .lv-row:hover { background: #f1ede5; }
#ct-levels .lv-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

#ct-levels .lv-row.here {
  background: linear-gradient(90deg, rgba(200,160,0,.16) 0%, rgba(200,160,0,.04) 46%, transparent 100%);
  box-shadow: inset 3px 0 0 var(--gold);
}

#ct-levels .lv-row.here:hover { background: linear-gradient(90deg, rgba(200,160,0,.22) 0%, rgba(200,160,0,.06) 46%, transparent 100%); }

/* cells */

#ct-levels .c-sym   { width: 52px; font-weight: 500; font-size: 11.5px; color: var(--ink); flex-shrink: 0; }
#ct-levels .c-last  { width: 70px; text-align: right; font-weight: 500; color: var(--ink); flex-shrink: 0; font-variant-numeric: tabular-nums; }
#ct-levels .c-chg   { width: 56px; text-align: right; font-size: 10.5px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
#ct-levels .c-chg.up { color: var(--green); }
#ct-levels .c-chg.dn { color: var(--red); }
#ct-levels .c-chg.flat { color: var(--ink3); }
#ct-levels .c-dir   { width: 14px; text-align: center; font-size: 8px; flex-shrink: 0; }
#ct-levels .c-zone  { width: 104px; font-size: 9.5px; color: #8a837a; flex-shrink: 0; }
#ct-levels .c-zone.far { color: var(--rule2); }
#ct-levels .c-bar   { flex: 1; min-width: 78px; position: relative; height: 12px; }
#ct-levels .c-away  { width: 48px; text-align: right; font-size: 10.5px; color: var(--body, #3a332e); flex-shrink: 0; font-variant-numeric: tabular-nums; }
#ct-levels .c-away.here { font-weight: 500; color: #8a6a00; }
#ct-levels .c-away.far  { color: var(--rule2); }
#ct-levels .c-bell  { width: 26px; text-align: center; font-size: 11px; color: var(--rule2); flex-shrink: 0; }
#ct-levels .c-bell.on { color: var(--gold); }

/* ---------- approach bar ---------- */

#ct-levels .bar-track {
  position: absolute; left: 0; right: 15px; top: 4px;
  height: 4px; background: #e6e0d6; border-radius: 2px;
}

#ct-levels .bar-fill {
  position: absolute; left: 0; top: 4px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #d8d2c7, #b5aea4);
  transition: width .5s ease;
}

#ct-levels .lv-row.here .bar-fill { background: linear-gradient(90deg, #e0bd5e, #c8a000); }

#ct-levels .bar-dot {
  position: absolute; top: 1px; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: #fdfcfa; border: 2px solid #4a4742;
  transition: left .5s ease;
}

#ct-levels .lv-row.here .bar-dot {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,160,0,.22);
}

#ct-levels .bar-cove {
  position: absolute; right: 0; top: 0;
  width: 12px; height: 12px; border-radius: 2px; border: 1px solid;
}

#ct-levels .bar-cove.dz { background: linear-gradient(180deg, #b3dcc2, #8cc7a3); border-color: var(--green); }
#ct-levels .bar-cove.sz { background: linear-gradient(180deg, #f0b8b8, #dd9797); border-color: var(--red); }
#ct-levels .lv-row.here .bar-cove { box-shadow: 0 0 0 3px rgba(200,160,0,.22); }

#ct-levels .bar-far {
  position: absolute; left: 0; right: 0; top: 5px;
  border-top: 1px dashed var(--rule);
}

#ct-levels .bar-none {
  position: absolute; left: 0; right: 0; top: 5px;
  border-top: 1px dotted var(--paper3);
}

#ct-levels .bar-label {
  position: absolute; left: 50%; top: -2px; transform: translateX(-50%);
  background: #fdfcfa; padding: 0 5px;
  font-size: 7px; letter-spacing: .1em; color: var(--rule2);
}

#ct-levels .bar-label.none { color: var(--paper3); }
#ct-levels .lv-row.alt .bar-label { background: #f9f7f3; }
#ct-levels .lv-row.unmapped .c-sym,
#ct-levels .lv-row.unmapped .c-last { color: var(--ink2); }

/* ---------- footer ---------- */

#ct-levels .lv-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 16px;
  background: linear-gradient(180deg, #f4f1eb 0%, #eeeae2 100%);
  border-top: 1px solid #d6d0c6;
  font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: .08em; color: #8a837a;
}

#ct-levels .lv-swatch {
  display: inline-block; width: 12px; height: 8px;
  border: 1px solid; border-radius: 2px;
  vertical-align: -1px; margin-right: 5px;
}

#ct-levels .lv-swatch.dz { background: linear-gradient(180deg,#b3dcc2,#8cc7a3); border-color: var(--green); }
#ct-levels .lv-swatch.sz { background: linear-gradient(180deg,#f0b8b8,#dd9797); border-color: var(--red); }

#ct-levels .lv-what {
  background: none; border: 0; padding: 0 0 1px;
  border-bottom: 1px dotted #b5aea4; cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: .08em; color: var(--gold);
}

#ct-levels .lv-cover { margin-left: auto; }
#ct-levels .lv-cover b { color: var(--ink); font-weight: 400; }
#ct-levels .lv-gap { color: var(--gold); }
#ct-levels .lv-reach { font-style: italic; color: var(--ink3); }

#ct-levels .lv-explain {
  display: none; padding: 13px 16px;
  background: var(--paper); border-top: 1px solid var(--paper3);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; line-height: 1.6; color: var(--body, #3a332e);
}

#ct-levels .lv-explain.open { display: block; }
#ct-levels .lv-explain b.dz { font-weight: 500; color: var(--green); }
#ct-levels .lv-explain b.sz { font-weight: 500; color: var(--red); }

#ct-levels .lv-empty {
  padding: 28px 16px; text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px; font-style: italic; color: var(--ink3);
  background: #fdfcfa;
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  #ct-levels .c-zone, #ct-levels .h-zone { display: none; }
}

@media (max-width: 680px) {
  #ct-levels .c-chg, #ct-levels .h-chg,
  #ct-levels .c-dir, #ct-levels .h-dir { display: none; }
  #ct-levels .lv-row, #ct-levels .lv-cols { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #ct-levels * { transition-duration: .01ms !important; animation: none !important; }
}

/* ---------- Chart of the Day, now in the right rail ---------- */

.lead-sidebar .lead-chart-wrap {
  margin-top: 18px;
  padding-top: 14px;
  grid-column: 1 / -1;
}

.lead-sidebar .lead-chart-eyebrow {
  font-size: 9px;
  letter-spacing: .1em;
  flex-wrap: wrap;
  gap: 6px;
}

.lead-sidebar .lead-chart-cycle-btn { font-size: 9px; padding: 2px 7px; }
.lead-sidebar .tv-chart-meta { padding: 7px 11px; gap: 8px; }
.lead-sidebar .tv-chart-symbol { font-size: 11px; }
.lead-sidebar .tv-chart-source { font-size: 8.5px; }
.lead-sidebar .tv-chart-open { font-size: 9px; }