/* Laney's English Hub: warm paper, indigo accents, and rounded vocabulary cards. */
:root,
html[data-theme="rose"],html[data-theme="teal"],html[data-theme="indigo"],html[data-theme="violet"] {
  color-scheme: light;
  --paper:#faf8f5;
  --paper-deep:#f6f2ef;
  --card:#ffffff;
  --ink:#2c2028;
  --muted:#7e7079;
  --line:#ebe3e5;
  --accent:#4338ca;
  --accent-dark:#312e81;
  --accent-soft:#eef2ff;
  --accent-ink:#312e81;
  --warm:#a5b4fc;
  --shadow:0 4px 18px rgba(44,32,40,.08);
  --serif:"Noto Serif TC",Georgia,serif;
  --sans:"Noto Sans TC",system-ui,-apple-system,sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--paper) !important;
  background-image:none !important;
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.7;
}
button,a { font:inherit; }
button:focus-visible,a:focus-visible { outline:3px solid #a5b4fc; outline-offset:3px; }

/* Overview pages */
.site-header,.landing-main,.course-main,.site-footer,.reader-footer {
  width:min(680px,calc(100% - 32px));
}
.site-header {
  height:auto;
  min-height:62px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.wordmark { color:var(--ink); font-family:"Newsreader",Georgia,serif; font-size:.9rem; letter-spacing:.01em; }
.wordmark span { color:var(--muted); font:400 .72rem/1.2 var(--sans); }
.header-course-link { color:var(--accent-dark); font-size:.82rem; }
.landing-main,.course-main { margin:0 auto; }
.landing-hero,.course-hero,.intro-card {
  min-height:0;
  margin:14px 0 24px;
  padding:24px 20px;
  color:var(--ink) !important;
  background:var(--card) !important;
  background-image:none !important;
  background-size:auto !important;
  border:1px solid var(--line);
  border-radius:20px !important;
  box-shadow:none;
  text-align:center;
}
.landing-hero,.course-hero { align-items:center; justify-content:center; }
.course-hero { grid-template-columns:minmax(0,1fr); gap:0; }
.landing-hero::before,.landing-hero::after,.hero-stamp,.intro-art { display:none !important; }
.landing-hero .eyebrow,.course-hero .eyebrow {
  display:inline-block;
  margin:0 auto 10px;
  padding:4px 14px;
  color:var(--accent) !important;
  background:var(--accent-soft);
  border-radius:999px;
  letter-spacing:.03em;
}
.landing-hero h1,.course-hero h1,.intro-copy h1 {
  max-width:100%;
  margin:4px 0 7px;
  color:var(--ink) !important;
  font:700 clamp(1.45rem,4vw,1.75rem)/1.4 var(--serif);
  letter-spacing:0;
}
.landing-hero h1 em,.course-hero h1 em { color:var(--accent-dark) !important; font-style:normal; }
.hero-copy,.course-hero p:not(.eyebrow),.intro-subtitle,.intro-description {
  max-width:570px;
  margin:7px auto 14px;
  color:var(--muted) !important;
  font-size:.9rem;
}
.primary-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
  padding:9px 22px;
  border:1px solid var(--accent);
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:.88rem;
  font-weight:700;
}
.story-grid-section { padding:16px 0 30px; }
.section-heading { align-items:center; margin-bottom:12px; }
.section-heading h2,.how-section h2,.focus-heading h2,.start-section h2,.ending-heading h2 {
  color:var(--ink);
  font:700 1.25rem/1.5 var(--serif);
}
.story-grid,.route-grid {
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  padding:0 !important;
  background:none !important;
}
.story-card,.route-card {
  min-height:0;
  display:block;
  padding:0;
  overflow:hidden;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  background:var(--card) !important;
  box-shadow:none;
}
.story-card:hover,.route-card:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.card-art { display:none !important; }
.story-card-content { padding:17px 19px 18px; }
.genre-label {
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:4px 11px;
  border:0 !important;
  border-radius:999px !important;
  background:var(--accent-soft);
  color:var(--accent-dark) !important;
  font-size:.73rem;
}
.story-card h2,.route-card b { color:var(--ink); font:700 1.15rem/1.45 var(--serif); }
.story-card h2 { margin:10px 0 2px; }
.english-title,.route-card small { color:var(--muted); font:500 .9rem/1.5 "Newsreader",Georgia,serif; }
.card-description { margin:8px 0 12px; color:var(--muted); font-size:.86rem; }
.card-meta { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.card-meta span,.course-stats span {
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--muted);
  font-size:.72rem;
}
.card-link,.route-arrow { color:var(--accent-dark); font-weight:700; }
.how-section {
  margin:0 0 28px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
}
.how-section h2 { margin:4px 0 14px; }
.how-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.how-grid > div { padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.how-grid b { color:var(--accent); font:600 .75rem "Newsreader",Georgia,serif; }
.how-grid h3 { margin:5px 0; font:700 .95rem var(--serif); }
.how-grid p { margin:0; color:var(--muted); font-size:.76rem; }
.course-main { min-height:0; padding:8px 0 30px; }
.course-hero { margin:10px 0 16px; }
.course-stats { justify-content:center; gap:7px; margin-top:14px; color:var(--muted); }
.course-stats span { display:inline-flex; align-items:center; gap:5px; }
.course-stats b { display:inline; color:var(--accent-dark); font:700 .9rem "Newsreader",Georgia,serif; }
.route-card { position:relative; padding:17px 48px 17px 18px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.route-card b { margin-top:4px; }
.route-card .route-number { top:15px; right:17px; color:var(--accent-dark); }
.route-arrow { right:17px; bottom:15px; }
.site-footer,.reader-footer {
  margin:12px auto 0;
  padding:18px 0 24px;
  justify-content:center;
  border-top:1px solid var(--line);
  color:var(--muted);
  text-align:center;
  font-size:.72rem;
}
.site-footer span:first-child,.reader-footer span:first-child { color:var(--accent-dark); font-weight:700; }

/* Story introduction */
.reader-header {
  width:100%;
  height:auto;
  min-height:54px;
  padding:7px max(16px,calc((100% - 680px)/2));
  background:rgba(250,248,245,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.reader-back,.back-to-intro { color:var(--accent-dark); font-size:.8rem; }
.reader-brand { color:var(--ink); font:600 .86rem "Newsreader",Georgia,serif; }
.reader-brand small { padding:3px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent-dark); font:600 .65rem var(--sans); }
.theme-toggle,.round-control { border:1px solid var(--line); background:var(--card); color:var(--accent-dark); }
.reader-main { width:min(680px,calc(100% - 32px)); margin:14px auto 28px; }
.intro-card {
  display:block;
  padding:24px 20px;
  margin:0 0 24px;
  color:var(--ink) !important;
}
.intro-copy { position:static; text-align:center; }
.intro-badge {
  display:inline-block;
  padding:4px 14px;
  border:0;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent) !important;
  font-size:11px;
}
.compat-pill {
  display:inline-block;
  margin:0 0 12px;
  padding:3px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--muted) !important;
  font-size:12px;
}
.intro-copy .genre-label { margin:0 auto 7px; background:#f6f2ef; color:var(--muted) !important; }
.intro-copy h1 { margin:3px 0 4px; }
.intro-subtitle { margin:0 auto 10px; color:var(--muted) !important; font:500 15px/1.5 "Newsreader",Georgia,serif; }
.intro-description { margin:8px auto 12px; }
.intro-meta {
  display:flex;
  flex-wrap:wrap;
  grid-template-columns:none;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--muted) !important;
  font-size:.72rem;
}
.intro-meta span {
  width:auto;
  flex:0 0 auto;
  white-space:nowrap;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--muted);
}
.focus-section { padding:0 0 22px; }
.focus-heading { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; }
.focus-heading h2 { margin:2px 0; }
.focus-heading p { margin:5px 0 0; color:var(--muted); font-size:.8rem; }
.focus-total { color:var(--accent); font:600 1.3rem "Newsreader",Georgia,serif; }
.focus-total small { font:500 .58rem var(--sans); }
.intro-vocab-grid {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:0 !important;
  background:none !important;
}
.vocab-pill {
  min-height:0;
  max-width:100%;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  padding:8px 13px;
  border:1px solid var(--line) !important;
  border-radius:999px !important;
  background:var(--card) !important;
}
.vocab-pill:hover { border-color:#c7d2fe !important; background:var(--accent-soft) !important; }
.vocab-pill span { color:var(--accent-dark); font:600 .94rem/1.15 "Newsreader",Georgia,serif; }
.vocab-pill small { margin:0; color:var(--muted); font-size:.78rem; }
.start-section { padding:12px 0 6px; border-top:1px solid var(--line); }
.start-section h2 { margin:3px 0; }
.start-buttons { grid-template-columns:1fr; gap:9px; margin-top:12px; padding:0 !important; background:none !important; }
.mode-launch {
  min-height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:9px 16px;
  border:1px solid var(--line) !important;
  border-radius:999px !important;
  background:var(--card) !important;
  text-align:center;
}
.mode-launch span,.mode-launch i { display:none; }
.mode-launch b { margin:0; color:var(--accent-dark); font:700 .9rem var(--sans); }
.mode-launch small { margin:1px 0 0; color:var(--muted); font-size:.7rem; }
.mode-launch[data-mode="1"] { border-color:var(--accent) !important; background:var(--accent) !important; color:white; }
.mode-launch[data-mode="1"] b,.mode-launch[data-mode="1"] small { color:white; }

/* Reading view: sticky two-level navigation and spacious paragraphs */
body:has(#viewReading:not(.is-hidden)) .reader-header { display:none; }
body:has(#viewReading:not(.is-hidden)) .reader-main { width:100%; max-width:none; margin:0 auto; padding:0 0 30px; }
.reading-view { min-height:75vh; }
.reading-nav {
  min-height:61px;
  position:sticky;
  z-index:35;
  top:0;
  width:100%;
  padding:7px max(14px,calc((100% - 680px)/2));
  background:rgba(250,248,245,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
  grid-template-columns:minmax(68px,1fr) minmax(0,2fr) minmax(54px,1fr);
}
.reading-title b { color:var(--ink); font:700 .96rem/1.35 var(--serif); }
.reading-title span { color:var(--muted); font:500 .72rem/1.3 "Newsreader",Georgia,serif; }
.reading-controls { gap:5px; }
.theme-toggle {
  width:34px;
  height:34px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  font:600 1.05rem/1 var(--sans);
  cursor:pointer;
}
.theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.round-control { width:32px; height:32px; border-radius:10px; }
.mode-tabs {
  width:min(680px,calc(100% - 32px));
  position:sticky;
  z-index:34;
  top:60px;
  margin:0 auto;
  padding:3px;
  border:0;
  border-radius:12px;
  background:var(--line);
}
.mode-tabs button {
  flex:1;
  padding:7px 6px;
  border:0;
  border-radius:9px !important;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}
.mode-tabs button.is-active {
  border:0;
  background:var(--card);
  color:var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.mode-hint { width:min(680px,calc(100% - 32px)); margin:14px auto 10px; color:var(--muted); text-align:left; font-size:.78rem; }
.review-toolbar,.speech-toolbar {
  width:min(680px,calc(100% - 32px));
  min-height:0;
  margin:12px auto 16px;
  padding:10px 14px;
  flex-wrap:wrap;
  border:1px solid var(--line);
  border-radius:14px !important;
  background:var(--card);
}
.review-toolbar button,.speech-toolbar button {
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:999px !important;
  background:var(--paper);
  color:var(--ink);
  font-size:.76rem;
}
.speech-toolbar { color:var(--muted); }
.passage-content {
  width:min(680px,calc(100% - 32px));
  max-width:none;
  margin:0 auto 32px;
  padding:0;
  font-size:calc(19px * var(--reading-scale,1));
  line-height:2.15;
}
.story-paragraph {
  display:block;
  margin:0 0 25px;
  padding:0;
  border:0;
  animation:fade-up .3s both;
}
.paragraph-number { display:none; }
.paragraph-text p { margin:0; }
.paragraph-zh { color:var(--ink); font:400 1em/2.15 var(--sans); }
.paragraph-en { margin:8px 0 0 !important; padding:0; border:0; color:var(--muted); font:400 .88em/1.9 var(--sans); }
.vocab-token {
  padding:2px 6px;
  border:0;
  border-radius:4px !important;
  background:#e0e7ff;
  color:#312e81;
  font:600 1em/1.4 "Newsreader",Georgia,serif;
}
.vocab-token:hover { background:#c7d2fe; }
.vocab-token.is-blank { border:1px solid #c7d2fe; border-radius:5px !important; background:#eef2ff; color:#7e7079; }
.ending-section {
  width:min(680px,calc(100% - 32px));
  margin:24px auto 12px;
  padding:22px 18px;
  border:1px solid var(--line);
  border-radius:18px !important;
  background:var(--card);
}
.ending-heading { display:flex; justify-content:space-between; gap:14px; }
.ending-heading h2 { margin:4px 0; }
.ending-heading p:not(.eyebrow) { color:var(--muted); font-size:.82rem; }
.ending-choices { gap:8px; }
.ending-choice {
  min-height:68px;
  grid-template-columns:32px minmax(0,1fr) 20px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:14px !important;
  background:var(--paper);
}
.ending-choice:hover,.ending-choice.is-selected { border-color:#c7d2fe; background:var(--accent-soft); }
.ending-letter { background:var(--accent); }
.ending-result { border-radius:14px !important; background:var(--accent-soft); }

/* Vocabulary drawer follows the reference's bottom-sheet treatment. */
.drawer-scrim { background:rgba(28,24,33,.48); }
.drawer-panel {
  width:min(600px,100%);
  height:auto;
  max-height:78vh;
  top:auto;
  right:auto;
  left:50%;
  bottom:0;
  padding:10px 18px 20px;
  overflow:auto;
  border-radius:22px 22px 0 0 !important;
  background:var(--card);
  box-shadow:0 -10px 40px rgba(0,0,0,.22);
  transform:translate(-50%,110%);
}
.word-drawer.is-open .drawer-panel { transform:translate(-50%,0); }
.drawer-topline { min-height:28px; }
.drawer-heading { margin:12px 0; }
.drawer-heading h2 { color:var(--accent-dark); font:600 1.9rem/1.2 "Newsreader",Georgia,serif; }
.level-chip { border-radius:999px; background:var(--accent-soft); color:var(--accent-dark); }
.drawer-definition {
  padding:12px 14px;
  border:1px solid var(--line);
  border-left:1px solid var(--line);
  border-radius:14px !important;
  background:var(--paper);
}
.drawer-example {
  margin-top:12px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
}
.drawer-tags { display:flex; flex-wrap:wrap; gap:6px; border:0; }
.drawer-tags div {
  display:block;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px !important;
  background:var(--paper);
  font-size:.73rem;
}
.drawer-tags b { color:var(--accent-dark); }
.icon-button,.sound-button,.star-word { border-radius:999px !important; }
.star-word { border-color:var(--accent); color:var(--accent-dark); }
.star-word.is-starred { background:var(--accent); color:#fff; }
.reader-footer { margin-top:18px; }

/* Dark mode keeps the same indigo hierarchy. */
body.dark-theme {
  --paper:#211e29;
  --paper-deep:#292533;
  --card:#302c38;
  --ink:#f6f2f7;
  --muted:#c5bdcc;
  --line:#4a4351;
  --accent:#818cf8;
  --accent-dark:#c7d2fe;
  --accent-soft:#37364f;
  --accent-ink:#e0e7ff;
  --warm:#c7d2fe;
  --shadow:0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}
body.dark-theme .reader-header,body.dark-theme .reading-nav { background:rgba(33,30,41,.96); }
body.dark-theme .landing-hero,body.dark-theme .course-hero,body.dark-theme .intro-card,
body.dark-theme .story-card,body.dark-theme .route-card,body.dark-theme .vocab-pill,
body.dark-theme .mode-launch,body.dark-theme .ending-section,body.dark-theme .drawer-panel {
  background:var(--card) !important;
  background-image:none !important;
  color:var(--ink) !important;
}
body.dark-theme .mode-launch[data-mode="1"] { background:var(--accent) !important; }
body.dark-theme .mode-launch[data-mode="1"] b,body.dark-theme .mode-launch[data-mode="1"] small { color:#fff; }
body.dark-theme .mode-tabs { background:#413b49; }
body.dark-theme .mode-tabs button.is-active { background:#fff; color:#2c2028; }
body.dark-theme .paragraph-en { color:#c5bdcc; }
body.dark-theme .vocab-token { background:#37364f; color:#e0e7ff; }
body.dark-theme .drawer-definition,body.dark-theme .drawer-example,body.dark-theme .ending-choice { background:var(--paper); }

@media (max-width:760px) {
  .site-header,.landing-main,.course-main,.site-footer,.reader-footer { width:calc(100% - 32px); }
  .landing-hero,.course-hero,.intro-card { padding:21px 16px; }
  .story-grid,.route-grid { grid-template-columns:1fr; }
  .how-grid { grid-template-columns:1fr; }
  .course-stats { gap:5px; }
  .course-stats span { padding:4px 8px; font-size:.68rem; }
  .reader-header { padding-inline:12px; }
  .reader-brand { font-size:.74rem; }
  .focus-heading { align-items:flex-start; }
  .vocab-pill { padding:7px 11px; }
  .mode-tabs { width:calc(100% - 24px); }
  .mode-tabs button { padding:7px 3px; font-size:.72rem; }
  .reading-nav { padding-inline:12px; grid-template-columns:minmax(62px,auto) minmax(0,1fr) minmax(106px,auto); gap:5px; }
  .back-to-intro { grid-column:1; grid-row:1; }
  .reading-title { grid-column:2; grid-row:1; min-width:0; padding:0; text-align:center; align-items:center; }
  .reading-controls { grid-column:3; grid-row:1; justify-self:end; }
  .reading-title b,.reading-title span { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .reading-title b { font-size:.88rem; }
  .reading-title span { font-size:.66rem; }
  .round-control { width:29px; height:29px; }
  .passage-content { width:calc(100% - 36px); font-size:calc(18px * var(--reading-scale,1)); }
  .ending-section { width:calc(100% - 32px); padding:19px 14px; }
}

@media (max-width:410px) {
  .site-header,.landing-main,.course-main,.site-footer,.reader-footer { width:calc(100% - 24px); }
  .intro-meta { gap:5px; }
  .intro-meta span { padding:4px 7px; font-size:.66rem; }
  .reading-nav { grid-template-columns:58px minmax(0,1fr) 106px; }
  .reader-brand { gap:5px; }
  .reader-brand small { padding:3px 5px; }
  .back-to-intro { font-size:.72rem; }
  .reading-title b { font-size:.78rem; }
  .mode-tabs button { font-size:.67rem; }
  .passage-content { width:calc(100% - 28px); font-size:calc(17px * var(--reading-scale,1)); }
}