/* News Bean — channel page (科技 / 市场).
 *
 * Visual identity ported from the Miao reference
 * (/Users/cocobean/Projects/Codex Project/Miao). Tokens are SCOPED to
 * .channel-shell so the Miao palette + Inter font only apply on /,
 * /tech, /market — leaving /student, /admin, etc. on News Bean's
 * existing variables.
 *
 * Tokens are deliberately re-defined under .channel-shell (rather
 * than overriding :root) so existing News Bean components rendered
 * inside the shell still have their own variables to fall back on,
 * and so removing the channel page never affects the rest of the app.
 */

.channel-shell {
  /* ── Miao tokens (scoped) ────────────────────────────────────── */
  --paper:        #faf8f3;
  --paper-deep:   #efe8db;
  --ink:          #1d211e;
  --muted:        #706a61;
  --line:         rgba(29, 33, 30, 0.1);
  --line-2:       rgba(29, 33, 30, 0.18);
  --panel:        rgba(255, 255, 255, 0.78);
  --panel-solid:  #fffdf8;
  --chip:         #f1eadf;
  --teal:         #1b8a8f;
  --teal-soft:    rgba(27, 138, 143, 0.12);
  --mint:         #dcefdc;
  --mint-soft:    rgba(220, 239, 220, 0.62);
  --amber:        #e8bb5c;
  --blue:         #9cc7df;
  --blue-soft:    rgba(156, 199, 223, 0.45);
  --rose:         #f2a69b;
  --shadow:       0 28px 80px rgba(68, 55, 39, 0.18);
  --shadow-sm:    0 10px 24px rgba(68, 55, 39, 0.06);
  --font-channel:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* ── shell layout ────────────────────────────────────────────── */
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 96px;
  min-height: 100vh;
  font-family: var(--font-channel);
  color: var(--ink);
  /* Miao's signature multi-stop wash. Two angled mint + blue glows
     fade out, then a vertical paper-to-deep-paper gradient under
     them. Scoped to the shell so it doesn't bleed to other pages. */
  background:
    linear-gradient(135deg, var(--mint-soft), transparent 32%),
    linear-gradient(225deg, var(--blue-soft), transparent 34%),
    linear-gradient(180deg, #fffdf8 0%, var(--paper) 48%, var(--paper-deep) 100%);
}

/* Body inside the channel shell uses the same font for consistency. */
.channel-shell, .channel-shell * { font-family: inherit; }

.channel-main {
  padding-top: 16px;
  /* Positioning context for the topic dropdown (which overlays the
     content below the topic-tabs strip without pushing it down). */
  position: relative;
}

/* ── header ───────────────────────────────────────────────────────── */

.channel-header {
  padding: 22px 4px 12px;
  /* Two columns: left text block (.brand: eyebrow + h1 + description),
     right wordmark + login chip stack (.brand-right). flex-start so
     the logo top-aligns with the eyebrow; the login chip auto-tracks
     the bottom of the description via justify-content: space-between
     on .brand-right. */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.channel-header .brand {
  flex: 1;
  min-width: 0;
}
.channel-header .brand-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  min-width: 0;
}
.channel-header .brand-h1 {
  margin: 0;
  line-height: 1;
}
.channel-header .brand-logo {
  display: block;
  height: 22px;
  width: auto;
  /* Opt out of the global img max-width so the cropped wordmark
     keeps its true 3.84:1 ratio when the right column is narrow. */
  max-width: none;
  flex-shrink: 0;
}
.channel-header .brand-mark {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 8px;
}
.channel-header h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 10px;
}
.channel-header h1 .bean {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  vertical-align: -0.05em;
  margin: 0 0.08em;
  color: #3a2820;
}
.channel-header h1 .brand-tagline-accent {
  color: var(--teal);
}
.channel-header .brand-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  max-width: 38ch;
}

/* ── spotlight ────────────────────────────────────────────────────── */

.spotlight {
  position: relative;
  margin: 18px 0 22px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--panel-solid);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.spotlight-link {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  text-decoration: none;
  color: #fff;
}
.spotlight img,
.spotlight-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spotlight-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "SF Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(135deg, var(--teal) 0%, #103638 100%);
}
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 30, 28, 0.82) 0%,
    rgba(20, 30, 28, 0.32) 45%,
    rgba(20, 30, 28, 0.10) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
.spotlight-copy {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
}
.topic-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 5px 11px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 10px;
}
.spotlight h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0 0 8px;
  color: #fff;
}
.spotlight-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* Spotlight lock sits in the top-right corner of the cover image,
   above the gradient. Subtle — just signals "this one needs a key"
   without overpowering the spotlight imagery. */
.spotlight-lock {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin: 0;
  vertical-align: baseline;
}

/* ── topic tabs ───────────────────────────────────────────────────── */

.topic-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 8px -4px 16px;
  padding: 2px 4px;
}
.topic-tabs::-webkit-scrollbar { display: none; }
.topic-tabs .tab {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.topic-tabs .tab:hover { border-color: var(--line-2); }
.topic-tabs .tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* 全部 doubles as the dropdown trigger — it carries a small chevron
   after the label that rotates when the dropdown is open. */
.topic-tabs .tab-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topic-tabs .tab-all-chevron {
  display: block;
  transition: transform 0.18s ease;
  opacity: 0.7;
}
.topic-tabs .tab-all[aria-expanded="true"] .tab-all-chevron { transform: rotate(180deg); }

/* Dropdown panel — drops DOWN from the topic-tabs strip, visually
   attached. No backdrop dim (same pattern as the chapter dropdown). */
/* Dropdown is JS-positioned (top/left set in channel.js when the
   trigger opens) relative to .channel-main, so the panel hangs from
   the 全部 button's bottom-left corner like a real dropdown menu. */
.topic-dropdown {
  position: absolute;
  z-index: 25;
  min-width: 160px;
  max-width: calc(100vw - 32px);
}
.topic-dropdown.hidden { display: none; }
.topic-dropdown-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  max-height: 60vh;
  animation: topicDropdownIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.topic-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  max-height: calc(60vh - 12px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.topic-dropdown-row {
  display: block;
  width: 100%;
  padding: 11px 18px;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.topic-dropdown-row:hover { background: rgba(0, 0, 0, 0.04); }
.topic-dropdown-row:active { background: rgba(0, 0, 0, 0.07); }
@keyframes topicDropdownIn {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── level filter ─────────────────────────────────────────────────── */

.level-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0 4px;
}
.level-filter-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.level-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.level-pills::-webkit-scrollbar { display: none; }
.level-pills .pill {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.level-pills .pill.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

/* ── lesson list ──────────────────────────────────────────────────── */

.lesson-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
}
.lesson-row {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-solid);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s, box-shadow 0.2s, transform 0.15s;
}
.lesson-row:hover {
  border-color: var(--line-2);
  box-shadow: 0 14px 28px rgba(68, 55, 39, 0.10);
  transform: translateY(-1px);
}
.lesson-row[hidden] { display: none; }
.lesson-link {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  min-height: 96px;
  text-decoration: none;
  color: var(--ink);
}
.lesson-link .cover {
  /* Wrapper column stretches to the row's full height so the frame's
     faint shaded background fills the entire vertical edge. The <img>
     inside stays a fixed 96×96 centered. For 2-line title rows the
     extra ~21px of column height shows as shaded "frame" above and
     below the image, reading as intentional. */
  width: 96px;
  align-self: stretch;
  background: var(--chip);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lesson-link .cover img {
  display: block;
  width: 96px;
  height: auto;
  object-fit: cover;
}
.lesson-link .cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "SF Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.lesson-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  /* Tightened right padding (was 14) so 1 extra CJK char fits before
     wrap — most "almost-fits-but-orphans" titles now stay on line 1. */
  padding: 12px 10px 12px 14px;
}
.lesson-meta h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Default greedy wrap — pack line 1 to capacity before wrapping
     to line 2. text-wrap: pretty/balance would *re-balance* the
     lines, deliberately moving chars from line 1 down to even out
     length; we don't want that. If a title's last char still ends
     up orphaned, it's because greedy actually couldn't fit it on
     line 1. */
  text-wrap: wrap;
}
.badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.badges .badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--mint);
  color: #2c5d2c;
}
.badges .badge.muted {
  background: var(--chip);
  color: var(--muted);
}
.lesson-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* ── empty states ─────────────────────────────────────────────────── */

.empty-fallback {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 28px 0;
  margin: 0;
}
.empty-channel {
  text-align: center;
  padding: 56px 16px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.empty-channel .empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.empty-channel .empty-sub {
  font-size: 12px;
  margin: 0;
}

/* ── responsive ───────────────────────────────────────────────────── */

@media (max-width: 420px) {
  .channel-header h1 { font-size: 26px; }
  .spotlight h2 { font-size: 20px; }
  .lesson-meta h3 { font-size: 15px; }
}

/* ── Night mode — Miao tokens flipped to a dark variant ──────────────
   Triggered by `<html data-theme="night">` (set by the Advanced menu).
   Channel pages have their own scoped palette (Miao identity), so we
   re-define the same variables under .channel-shell when in night
   mode. The mint/blue accent glows shift to muted dark teals/blues;
   panels go to a warm-dark surface; teal accent lifts for contrast. */
[data-theme="night"] .channel-shell {
  --paper:        #1a1d1f;
  --paper-deep:   #14171a;
  --ink:          #e8ebe7;
  --muted:        #97928c;
  --line:         rgba(232, 234, 230, 0.10);
  --line-2:       rgba(232, 234, 230, 0.18);
  --panel:        rgba(40, 44, 47, 0.78);
  --panel-solid:  #22272a;
  --chip:         #2a2f33;
  --teal:         #5dbcc1;       /* lifted — readable on dark */
  --teal-soft:    rgba(93, 188, 193, 0.18);
  --mint:         #2c4d2c;       /* deep mint — used for badges */
  --mint-soft:    rgba(60, 110, 60, 0.18);
  --amber:        #e8bb5c;
  --blue:         #6c9ec0;
  --blue-soft:    rgba(108, 158, 192, 0.18);
  --rose:         #d97a6f;
  --shadow:       0 28px 80px rgba(0, 0, 0, 0.45);
  --shadow-sm:    0 10px 24px rgba(0, 0, 0, 0.20);

  background:
    linear-gradient(135deg, var(--mint-soft), transparent 32%),
    linear-gradient(225deg, var(--blue-soft), transparent 34%),
    linear-gradient(180deg, #1f2326 0%, var(--paper) 48%, var(--paper-deep) 100%);
}

/* Badge text in night mode — mint/chip backgrounds are deeper so
   text needs to lift. */
[data-theme="night"] .channel-shell .badges .badge {
  color: #b6dab6;
}
[data-theme="night"] .channel-shell .badges .badge.muted {
  color: var(--muted);
}

/* ── /market theme — amber accent ────────────────────────────────────
   /tech uses the default teal palette. /market overrides --teal +
   --teal-soft to amber so accents (active pill, tab underline,
   tagline-post word, spotlight gradient) all shift together — no
   need to rewrite individual rules. */
.channel-shell.market {
  --teal:         #c4892a;
  --teal-soft:    rgba(196, 137, 42, 0.12);
}
[data-theme="night"] .channel-shell.market {
  --teal:         #e8bb5c;       /* lifted amber for dark surfaces */
  --teal-soft:    rgba(232, 187, 92, 0.18);
}

/* ── /overseas theme — blue accent ──────────────────────────────────
   Third channel — "going global" framing. Blue keeps it distinct
   from tech's teal and market's amber. */
.channel-shell.overseas {
  --teal:         #2b6ea8;
  --teal-soft:    rgba(43, 110, 168, 0.12);
}
[data-theme="night"] .channel-shell.overseas {
  --teal:         #6c9ec0;       /* Miao palette --blue, lifted for dark */
  --teal-soft:    rgba(108, 158, 192, 0.18);
}

/* ── /recap theme — plum accent ─────────────────────────────────────
   Fourth channel — business case recaps (复盘). Plum keeps it
   distinct from tech-teal, market-amber, overseas-blue. */
.channel-shell.recap {
  --teal:         #8a4a6f;
  --teal-soft:    rgba(138, 74, 111, 0.12);
}
[data-theme="night"] .channel-shell.recap {
  --teal:         #c08aa6;       /* lifted plum for dark surfaces */
  --teal-soft:    rgba(192, 138, 166, 0.18);
}

/* ── /world theme — sage green accent ───────────────────────────────
   Fifth channel — country-by-country lifestyle guides (世界). Sage
   green fills the only color family the palette doesn't use (teal,
   amber, blue, plum, orange are taken). */
.channel-shell.world {
  --teal:         #4a7a3a;
  --teal-soft:    rgba(74, 122, 58, 0.12);
}
[data-theme="night"] .channel-shell.world {
  --teal:         #8db870;       /* lifted sage for dark surfaces */
  --teal-soft:    rgba(141, 184, 112, 0.18);
}

/* ── /growth theme — dusty purple accent ──────────────────────────
   Sixth channel — personal/career growth (成长). Muted mid-purple in
   the Notion / Substack vein: educated-modern, not saturated. Distinct
   from /world's sage, /student's orange, and any of the existing
   accents (teal / amber / blue / plum / sage / orange). */
.channel-shell.growth {
  --teal:         #7c6cad;
  --teal-soft:    rgba(124, 108, 173, 0.12);
}
[data-theme="night"] .channel-shell.growth {
  --teal:         #a89cd1;       /* lifted dusty purple for dark */
  --teal-soft:    rgba(168, 156, 209, 0.18);
}

/* ── /music theme — coral pink accent ────────────────────────────
   Seventh channel — songs with lyrics-as-SRT (音乐). Coral pink fills
   a vocal/musical color register that none of the other channels
   occupy (teal/amber/blue/plum/sage/purple/orange). */
.channel-shell.music {
  --teal:         #e07a8c;
  --teal-soft:    rgba(224, 122, 140, 0.12);
}
[data-theme="night"] .channel-shell.music {
  --teal:         #f0a1b0;       /* lifted coral for dark surfaces */
  --teal-soft:    rgba(240, 161, 176, 0.18);
}