/* ============================================================
   HOTEL EARTH — the other views: pass it on (guest key + quote card),
   reader, outline, listen. Reading comfort beats decoration here.
   ============================================================ */

/* ---------- PASS IT ON ---------- */
#view-pass .section-head { max-width: 40rem; }
#view-pass .section-head h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem); line-height: 1.1; }
html[lang^='zh'] #view-pass .section-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.4; }

/* Quote-card maker */
.quote-pick button { background: transparent; border: 0; border-bottom: 1px solid var(--he-line); border-radius: 0; padding: 1.1em .2em; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.35; color: var(--he-silver); }
html[lang^='zh'] .quote-pick button { font-size: 1.05rem; line-height: 1.6; }
.quote-pick button:hover { border-color: var(--he-hair-strong); color: var(--he-porcelain); transform: none; padding-left: .6em; }
.quote-pick button.is-active { background: transparent; border-bottom-color: var(--he-love); color: var(--he-porcelain); padding-left: .6em; }
#quoteCanvas { border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 0 1px var(--he-hair); }
.control-label, .swatch-label { font-size: .62rem; font-weight: 600; letter-spacing: .26em; color: var(--he-faint); }
html[lang^='zh'] .control-label, html[lang^='zh'] .swatch-label { font-size: .8rem; letter-spacing: .16em; }
.chip { border: 1px solid var(--he-line); background: transparent; color: var(--he-silver); font-size: .72rem; letter-spacing: .12em; padding: .6em 1.2em; }
.chip:hover { border-color: var(--he-hair-strong); color: var(--he-porcelain); }
.chip.is-active { background: var(--he-porcelain); border-color: var(--he-porcelain); color: var(--he-ink); font-weight: 600; }
.swatch { border-radius: 50%; border: 1px solid var(--he-hair-strong); box-shadow: none; }
.swatch.is-active { border-color: var(--he-porcelain); box-shadow: 0 0 0 3px var(--he-ink), 0 0 0 4px var(--he-porcelain); transform: none; }
.share-chip { background: transparent; border-color: var(--he-line); }
.share-chip:hover { border-color: var(--he-porcelain); color: var(--he-porcelain); }

/* ---------- READER ---------- */
.reader__toc { background: var(--he-ink-2); border-right-color: var(--he-line-soft); }
.reader__toc h2 { letter-spacing: .28em; font-size: .64rem; }
.toc-list button { border-radius: 0; border-left: 1px solid transparent; padding-left: 1em; }
.toc-list button:hover { background: transparent; color: var(--he-porcelain); }
.toc-list button.is-active { background: transparent; color: var(--he-porcelain); border-left-color: var(--he-love); font-weight: 500; }
.reader__progress { background: var(--he-dawn); height: 2px; }
.reader__content p, .reader__content li { color: var(--he-porcelain); }
.reader__content p, .reader__content li { color: #E6E0E8; }
.reader--paper .reader__content p, .reader--paper .reader__content li { color: var(--he-porcelain); }
.reader__content h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); }
.reader__content h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; letter-spacing: 0; margin-top: var(--space-12); }
html[lang^='zh'] .reader__content h3 { font-size: 1.4rem; }
.reader__content blockquote { border-left: 0; border-radius: 0; background: none; box-shadow: none; padding: var(--space-2) 0 var(--space-2) var(--space-8); position: relative; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); }
.reader__content blockquote::before, .reader__content blockquote::after { content: none; }
.reader__content blockquote > *:first-child::before { content: none; }
.reader__content blockquote { background-image: linear-gradient(180deg, var(--he-fear), var(--he-violet), var(--he-love)); background-size: 2px 100%; background-repeat: no-repeat; background-position: left top; }
.reader__content blockquote em { color: inherit; font-style: italic; }
.reader__nav button { color: var(--he-porcelain); font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; }
.reader__nav button span { letter-spacing: .24em; font-family: var(--font-body); font-size: .62rem; font-weight: 600; }
.reader__pass-line { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }

/* chapter plate */
.cplate { border-bottom-color: var(--he-line-soft); }
.cplate__eyebrow { color: var(--he-silver); letter-spacing: .34em; }
.cplate__icon { color: var(--he-porcelain); opacity: .92; }
.cplate__icon .gold { stroke: var(--he-love); } .cplate__icon .goldfill { fill: var(--he-love); }
.cplate__title { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.7rem); font-weight: 500; line-height: 1.08; }
html[lang^='zh'] .cplate__title { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); line-height: 1.35; }
.cplate__rule { gap: 0; }
.cplate__dia { display: none; }
.cplate__ln { width: 60px; background: linear-gradient(90deg, transparent, var(--he-fear), var(--he-violet)); }
.cplate__ln--r { background: linear-gradient(90deg, var(--he-violet), var(--he-love), transparent); }
.cplate__quote { color: var(--he-silver); font-family: var(--font-display); font-size: 1.5rem; }
html[lang^='zh'] .cplate__quote { font-size: 1.15rem; }

/* golden-words card, dedication, formula */
.jinju { border: 1px solid var(--he-line); background: radial-gradient(120% 80% at 50% 0%, var(--he-glow-violet), transparent 60%), var(--he-panel); box-shadow: none; }
.jinju::after { height: 2px; background: var(--he-dawn); }
.jinju__lbl { color: var(--he-porcelain); letter-spacing: .34em; font-size: .9rem; font-family: var(--font-body); }
.jinju__ln { background: var(--he-hair-strong); }
.jinju__idx { font-style: italic; font-weight: 400; background: var(--he-dawn-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jinju__phrase { font-weight: 500; }
.jinju__brand { color: var(--he-silver); }
.dedication, .chapter-formula { background: var(--he-panel); border-color: var(--he-line); }
.formula { background: var(--he-panel-2); border-color: var(--he-line); }
.curve--gold, .nw-line { stroke: var(--he-love); }
.curve--teal { stroke: var(--he-fear-soft); }

/* finish nudge */
.finish-nudge { background: rgba(7, 6, 11, .72); }
.finish-nudge__card { background: var(--he-panel); border-color: var(--he-line); overflow: hidden; }
.finish-nudge__card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--he-dawn); }
.finish-nudge__card h3 { font-size: 2rem; font-weight: 500; }

/* ---------- OUTLINE ---------- */
.outline .section-head { text-align: center; margin-inline: auto; }
.outline-list { gap: 0; border-top: 1px solid var(--he-line); }
.outline-row { background: transparent; border: 0; border-bottom: 1px solid var(--he-line); border-radius: 0; padding: 1.5rem .25rem; }
.outline-row:hover { box-shadow: none; transform: none; background: var(--he-ink-2); }
.outline-row__num { color: var(--he-faint); letter-spacing: .2em; font-size: .68rem; padding-top: .6em; }
.outline-row__title { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; }
html[lang^='zh'] .outline-row__title { font-size: 1.22rem; line-height: 1.5; }
.outline-row:hover .outline-row__arrow { color: var(--he-love); }
.outline-foot__dl { color: var(--he-porcelain); border-bottom: 1px solid var(--he-hair-strong); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; padding-bottom: .4em; }

/* ---------- LISTEN ---------- */
.listen__head h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); font-weight: 500; }
.aplayer { background: var(--he-panel); border-color: var(--he-line); border-radius: 999px; padding: .6rem 1.2rem .6rem .6rem; }
.aplayer__play { background: var(--he-porcelain); color: var(--he-ink); }
.aplayer__play:hover { background: var(--he-porcelain); box-shadow: 0 6px 24px var(--he-glow-love); }
.aplayer__bar { height: 3px; background: var(--he-line); }
.aplayer__fill { background: var(--he-dawn); }
.aplayer__rate:hover { color: var(--he-porcelain); border-color: var(--he-porcelain); }
.reader__audio .aplayer__label small { color: var(--he-silver); }
.listen__list { gap: 0; border-top: 1px solid var(--he-line); }
.listen__item { border-radius: 0; border-bottom: 1px solid var(--he-line); padding: 1rem .4rem; }
.listen__item:hover { background: var(--he-ink-2); }
.listen__item.is-active { background: transparent; }
.listen__item.is-active .listen__title { color: var(--he-porcelain); }
.listen__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
html[lang^='zh'] .listen__title { font-size: 1.05rem; }
.listen__item.is-active .listen__num, .listen__item.is-playing .listen__num { color: var(--he-love); }
.listen__eq i { background: var(--he-love); }

/* ---------- Highlights ---------- */
.hl-fab { color: var(--he-ink) !important; background: var(--he-porcelain) !important; }


/* outline rows carry their chapter's line icon */
.outline-row__icon { order: 3; flex: 0 0 auto; width: 40px; height: 40px; opacity: .75; align-self: center; }
.outline-row__icon svg { width: 100%; height: 100%; display: block; }
.outline-row__arrow { order: 4; }
@media (max-width: 540px) { .outline-row__icon { display: none; } }
/* the reader toolbar */
.reader__bar { gap: var(--space-2); justify-content: flex-start; margin-bottom: var(--space-6); }
.reader__bar .btn { font-size: .62rem; min-height: 40px; }
html[lang^='zh'] .reader__bar .btn { font-size: .82rem; }
/* zeros must read as zeros: lining figures wherever numbers carry meaning */
.formula, .jinju__idx, .lbl--inf, .he-desk__no, .he-tab__no { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
/* highlight colours are owned here (highlights.js writes only an id), so Night and Paper both resolve */
mark.hl[data-c='rose'], .hl-item__bar[data-c='rose'], .hl-swatch[data-color='rose'] { --hl-color: rgba(232,87,143,.26); --hl-color-strong: rgba(232,87,143,.46); --hl-flash: rgba(232,87,143,.72); --hl-chip: #E8578F; }
mark.hl[data-c='violet'], .hl-item__bar[data-c='violet'], .hl-swatch[data-color='violet'] { --hl-color: rgba(138,91,184,.28); --hl-color-strong: rgba(138,91,184,.48); --hl-flash: rgba(138,91,184,.74); --hl-chip: #8A5BB8; }
mark.hl[data-c='fear'], .hl-item__bar[data-c='fear'], .hl-swatch[data-color='fear'] { --hl-color: rgba(91,111,208,.28); --hl-color-strong: rgba(91,111,208,.48); --hl-flash: rgba(91,111,208,.74); --hl-chip: #5B6FD0; }
mark.hl[data-c='silver'], .hl-item__bar[data-c='silver'], .hl-swatch[data-color='silver'] { --hl-color: rgba(185,178,190,.24); --hl-color-strong: rgba(185,178,190,.42); --hl-flash: rgba(185,178,190,.7); --hl-chip: #B9B2BE; }
mark.hl { background: var(--hl-color); color: inherit; } mark.hl:hover { background: var(--hl-color-strong); }
.hl-item__bar { background: var(--hl-color-strong); }
.hl-toolbar .hl-swatch { width: 26px; height: 26px; background: var(--hl-chip); border-color: rgba(243,239,242,.25); }
@keyframes hlFlash { 0%, 100% { background: var(--hl-color); } 30% { background: var(--hl-flash); } }
.hl-toolbar, .hl-panel { background: var(--he-panel); color: var(--he-porcelain); border-color: var(--he-line); }