/* 次日报纸卡片、报纸抽屉、后续报道提醒（web/js/ui/press/）。
 * 版式来自 docs/writing/mockups/press_page/press.css，沿用 theme.css 的变量。 */

/* ---------------------------------------------------------------- popup after a choice */
.press-modal-root { position: absolute; inset: 0; z-index: 2; }
.press-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(30, 28, 26, 0.28) 0%, rgba(30, 28, 26, 0.55) 100%);
}
.press-modal {
  left: calc((var(--stage-w, 1920px) - 1260px) / 2) !important;
  top: max(16px, calc((var(--stage-h, 1080px) - 860px) / 2)) !important;
  width: 1260px !important;
  perspective: 1600px;
}
.press-modal.press-flip-in > .press-panel { animation: press-flip-in 0.42s ease-out both; transform-origin: 50% 50%; }
@keyframes press-flip-in {
  0% { transform: rotateY(-88deg) scale(0.96); opacity: 0.2; }
  60% { opacity: 1; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}

.press-panel {
  background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 0 10px 34px rgba(30, 28, 26, 0.45);
  padding: 14px 18px 14px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: min(860px, calc(var(--stage-h, 1080px) - 32px));
}
.press-panel.is-compact { box-shadow: none; border: none; padding: 0; background: transparent; max-height: none; }

/* head: stamp + event + the player's decision */
.press-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-title); flex-wrap: wrap; }
.press-head .ink-stamp { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.press-head-title { font-size: 18px; font-weight: 700; }
.press-head-choice { font-family: var(--font-ui); font-size: 13.5px; color: #3D3833; }
.press-head-choice b { color: var(--accent-deep); }
.press-head-choice .hist { font-size: 12px; color: var(--muted); margin-left: 4px; }
.press-head-meta { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.5px; }

/* paper tabs */
.press-tabs { display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--ink); padding-left: 2px; flex: 0 0 auto; }
.press-tab {
  font-family: var(--font-title); font-size: 15px; font-weight: 700; color: #4A433C;
  padding: 6px 14px 5px; border: 1px solid rgba(30, 28, 26, 0.45); border-bottom: none;
  background: linear-gradient(180deg, #EFE7D7 0%, #E4DAC7 100%); border-radius: 2px 2px 0 0;
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; cursor: pointer;
}
.press-tab small { font-family: var(--font-ui); font-size: 11px; font-weight: 400; color: var(--muted); }
.press-tab:hover { color: var(--ink); }
.press-tab.is-active { background: #F3ECDD; color: var(--ink); border-color: var(--ink); margin-bottom: -1px; padding-bottom: 6px; }
.press-tab.is-feature { margin-left: auto; border-style: dashed; }
.press-tab.is-feature.is-active { border-style: solid; }
.press-tab:focus-visible { outline: 2px solid var(--accent, #8A5A2B); outline-offset: 1px; }

/* body: stacked newsprint + side column */
.press-body { display: flex; gap: 14px; align-items: stretch; min-height: 0; overflow: auto; flex: 1 1 auto; }

.newsprint {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 252, 244, 0.55), transparent 60%),
    repeating-linear-gradient(0deg, rgba(60, 45, 25, 0.018) 0 2px, transparent 2px 4px),
    #F3ECDD;
  border: 1px solid rgba(30, 28, 26, 0.55);
  /* the other papers peeking out underneath (2–3 papers stacked) */
  box-shadow:
    4px 4px 0 -1px #EDE4D2, 4px 4px 0 0 rgba(30, 28, 26, 0.35),
    8px 8px 0 -1px #E7DDC9, 8px 8px 0 0 rgba(30, 28, 26, 0.25),
    2px 3px 14px rgba(30, 28, 26, 0.2), inset 0 0 40px rgba(120, 92, 52, 0.08);
  padding: 14px 22px 16px;
  margin: 0 8px 8px 0;
  color: #1B1916;
}
.np-topline {
  display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px;
  color: #4A433C; letter-spacing: 0.5px; padding-bottom: 4px;
}
.np-masthead {
  display: flex; align-items: baseline; justify-content: center; gap: 18px;
  border-top: 3px double #1B1916; border-bottom: 3px double #1B1916; padding: 4px 0 2px;
}
.np-masthead .zh { font-family: var(--font-title); font-weight: 900; font-size: 50px; letter-spacing: 14px; line-height: 1.15; }
.np-masthead .en { font-family: "Times New Roman", serif; font-size: 13px; letter-spacing: 3px; color: #3D3833; }
.np-sub { display: flex; justify-content: space-between; font-size: 11.5px; color: #4A433C; padding: 3px 0 8px; border-bottom: 1px solid #1B1916; }

.np-kicker { font-family: var(--font-title); font-size: 16px; font-weight: 700; margin-top: 10px; color: #2E2A26; }
.np-headline { font-family: var(--font-title); font-weight: 900; font-size: 34px; line-height: 1.22; margin: 8px 0 4px; letter-spacing: 1px; }
.np-kicker + .np-headline { margin-top: 2px; }
.np-headline.np-headline-rule { padding-bottom: 8px; border-bottom: 1px solid rgba(27, 25, 22, 0.55); }
.np-deck { font-family: var(--font-title); font-size: 15.5px; line-height: 1.5; color: #2E2A26; padding-bottom: 8px; border-bottom: 1px solid rgba(27, 25, 22, 0.55); }

.np-grid { display: grid; grid-template-columns: 300px 1fr; gap: 16px; margin-top: 10px; }
.np-grid.no-photo { grid-template-columns: 1fr; }
.np-photo { margin: 0; }
.np-photo img { width: 100%; display: block; filter: grayscale(1) contrast(1.08) sepia(0.12); border: 1px solid #1B1916; }
.np-photo figcaption { font-size: 11.5px; line-height: 1.45; color: #3D3833; margin-top: 4px; }
.np-text { column-count: 2; column-gap: 18px; column-rule: 1px solid rgba(27, 25, 22, 0.25);
  font-family: var(--font-title); font-size: 14px; line-height: 1.68; text-align: justify; }
.np-grid.no-photo .np-text { column-count: 3; }
.np-text.is-short, .np-grid.no-photo .np-text.is-short { column-count: 1; font-size: 15px; }
.np-text p, .np-feature-text p { margin: 0 0 6px; text-indent: 2em; }
.np-text p.dateline { text-indent: 0; }
.np-text .dl { font-weight: 700; margin-right: 0.3em; }

/* feature page */
.np-feature-head { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.np-column-tag { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--paper); background: #1B1916; padding: 2px 8px; letter-spacing: 2px; }
.np-feature-title { font-family: var(--font-title); font-weight: 900; font-size: 32px; line-height: 1.2; }
.np-byline { font-family: var(--font-title); font-size: 14px; color: #3D3833; margin: 4px 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(27, 25, 22, 0.55); }
.np-feature-text { column-count: 3; column-gap: 20px; column-rule: 1px solid rgba(27, 25, 22, 0.25);
  font-family: var(--font-title); font-size: 14px; line-height: 1.72; text-align: justify; }
.np-feature-text p { margin-bottom: 7px; }
.np-feature-text p:first-child { text-indent: 0; }
.np-feature-text p:first-child::first-letter { float: left; font-size: 46px; line-height: 1; font-weight: 900; padding: 4px 6px 0 0; }

/* side column: other papers + foreign wires */
.press-side { flex: 0 0 300px; display: flex; flex-direction: column; gap: 8px; }
.side-label { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 2px; border-bottom: 1px solid rgba(30, 28, 26, 0.3); padding-bottom: 2px; }
.clip {
  background: #F5EFE2; border: 1px solid rgba(30, 28, 26, 0.45); padding: 7px 10px 8px;
  box-shadow: 1px 2px 5px rgba(30, 28, 26, 0.12);
}
.clip[role="button"] { cursor: pointer; }
.clip[role="button"]:hover { border-color: var(--ink); }
.clip:nth-child(odd) { transform: rotate(-0.35deg); }
.clip:nth-child(even) { transform: rotate(0.3deg); }
.clip-paper { display: flex; justify-content: space-between; font-family: var(--font-title); font-size: 13px; font-weight: 700; gap: 6px; }
.clip-paper small { font-family: var(--font-ui); font-weight: 400; font-size: 11px; color: var(--muted); }
.clip-head { font-family: var(--font-title); font-weight: 900; font-size: 16px; line-height: 1.35; margin: 3px 0 3px; }
.clip-text { font-family: var(--font-title); font-size: 12.5px; line-height: 1.58; color: #2E2A26;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.newsprint.is-feature ~ .press-side .clip-text { -webkit-line-clamp: 2; }
/* foreign wire: small boxes in their own frame */
.press-wires { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid rgba(74, 85, 96, 0.45); background: rgba(236, 238, 240, 0.5); }
.clip.wire { background: #ECEEF0; border-style: dashed; padding: 5px 8px 6px; }
.clip.wire .clip-head { font-size: 14px; }
.clip.wire .clip-text { font-size: 12px; }
.clip.wire .clip-paper::before { content: "外电"; font-family: var(--font-ui); font-size: 10.5px; color: var(--paper); background: #4A5560; padding: 0 5px; letter-spacing: 1px; align-self: center; }
.clip.wire .clip-paper { justify-content: flex-start; align-items: center; }
.clip.wire .clip-paper small { margin-left: auto; }

/* foot: settlement in small print + buttons */
.press-foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(30, 28, 26, 0.28); padding-top: 9px; flex: 0 0 auto; }
.press-settle { flex: 1 1 auto; font-size: 12.5px; color: #524B44; line-height: 1.5; }
.press-settle b { color: var(--ink); margin-right: 6px; }
.press-foot .press-btn { font-size: 14px; padding: 7px 14px; }
.press-foot .press-btn.primary { font-weight: 700; color: var(--accent-deep); border-color: var(--accent, #8A5A2B); }
.press-panel.is-compact .press-foot:empty, .press-panel.is-compact .press-foot:has(.press-settle:empty):not(:has(button)) { display: none; }

/* ---------------------------------------------------------------- archive drawer */
.press-archive {
  left: calc((var(--stage-w, 1920px) - 1560px) / 2) !important;
  top: 60px !important;
  width: 1560px !important;
  height: calc(var(--stage-h, 1080px) - 120px) !important;
  z-index: 3;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px 14px;
  box-shadow: 0 10px 34px rgba(30, 28, 26, 0.45);
}
.press-archive-hdr { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(30, 28, 26, 0.3); padding-bottom: 6px; }
.press-archive-title { font-family: var(--font-title); font-weight: 900; font-size: 22px; letter-spacing: 6px; }
.press-archive-count { font-size: 13px; color: var(--muted); margin-left: auto; }
.press-archive-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.press-filter { display: inline-flex; align-items: center; gap: 6px; }
.press-filter > span { color: var(--muted); }
.press-filter-select { font: inherit; font-size: 13px; padding: 3px 6px; background: #F8F3EA; border: 1px solid rgba(30, 28, 26, 0.45); max-width: 320px; }
.press-filter-toggle.active { font-weight: 700; border-color: var(--ink); }
.press-archive-cols { flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; }
.press-archive-list { flex: 0 0 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.press-archive-reader { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding-right: 6px; }
.press-archive-empty { font-size: 14px; line-height: 1.7; color: var(--muted); padding: 16px 6px; }
.press-archive-row {
  text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  background: #F5EFE2; border: 1px solid rgba(30, 28, 26, 0.3); padding: 7px 10px; font: inherit;
}
.press-archive-row:hover { border-color: var(--ink); }
.press-archive-row.is-active { background: #FFFBF2; border-color: var(--ink); box-shadow: inset 3px 0 0 var(--accent-deep); }
.press-archive-row .row-top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.press-archive-row .row-kind { font-weight: 700; color: #4A433C; }
.press-archive-row .row-kind.kind-followup { color: var(--accent-deep); }
.press-archive-row .row-dot { color: var(--red); margin-left: auto; font-size: 10px; }
.press-archive-row .row-head { font-family: var(--font-title); font-weight: 900; font-size: 15px; line-height: 1.35; color: var(--ink); }
.press-archive-row .row-sub { font-size: 12px; color: var(--muted); }
.press-archive-reader .np-masthead .zh { font-size: 40px; letter-spacing: 10px; }
.press-archive-reader .press-side { flex-basis: 260px; }

/* ---------------------------------------------------------------- followup toast */
.press-toast {
  z-index: 4; width: 380px;
  background: #F5EFE2; border: 1px solid var(--ink); box-shadow: 0 6px 18px rgba(30, 28, 26, 0.35);
  padding: 9px 12px 10px; font-family: var(--font-title); cursor: pointer;
  animation: press-toast-in 0.3s ease-out both;
}
@keyframes press-toast-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.press-toast .t1 { font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); letter-spacing: 1px; display: flex; justify-content: space-between; }
.press-toast .t1 b { color: var(--red); }
.press-toast .t2 { font-weight: 900; font-size: 16px; margin: 3px 0 2px; }
.press-toast .t3 { font-size: 12.5px; line-height: 1.55; color: #2E2A26; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------------- top bar 「报纸」 + unread dot */
.topbar-overlay-link.link-press { position: relative; }
.link-press .press-dot {
  display: none; position: absolute; top: 1px; right: -7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 1.5px var(--paper);
}
.link-press.has-unread .press-dot { display: block; }
.link-press.press-pulse { animation: press-pulse 0.9s ease-out 2; }
@keyframes press-pulse { 0% { color: var(--ink); } 40% { color: var(--red); } 100% { color: var(--ink); } }

/* ---------------------------------------------------------------- medium / compact layouts */
html.layout-medium .press-modal { left: calc((var(--stage-w, 1440px) - 1200px) / 2) !important; width: 1200px !important; }
html.layout-medium .np-masthead .zh { font-size: 40px; letter-spacing: 10px; }
html.layout-medium .np-headline { font-size: 28px; }
html.layout-medium .press-archive { left: 24px !important; width: calc(var(--stage-w, 1440px) - 48px) !important; }
html.layout-compact .press-modal-root { position: relative; inset: auto; }
html.layout-compact .press-backdrop { display: none; }
html.layout-compact .press-modal, html.layout-compact .press-archive { width: auto !important; height: auto !important; max-width: 100%; }
html.layout-compact .press-body, html.layout-compact .press-archive-cols { flex-direction: column; }
html.layout-compact .press-side, html.layout-compact .press-archive-list { flex-basis: auto; }
html.layout-compact .np-grid { grid-template-columns: 1fr; }
html.layout-compact .np-text, html.layout-compact .np-feature-text { column-count: 1 !important; }
html.layout-compact .np-masthead .zh { font-size: 32px; letter-spacing: 6px; }
html.layout-compact .press-toast { position: fixed !important; left: auto !important; right: 12px !important; bottom: 12px !important; top: auto !important; width: min(380px, calc(100vw - 24px)) !important; }

/* ---------------------------------------------------------------- end book: 《总理传》/ 宫中口述 / 解密卷宗 */
.end-book-rich.af-mode { overflow: hidden; display: flex; flex-direction: column; }
.af-pager { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.af-viewport {
  flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative;
  background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(30, 28, 26, 0.18) 50%, transparent calc(50% + 1px));
}
.af-viewport.af-turn .af-flow { animation: af-turn 0.32s ease-out; }
@keyframes af-turn { from { opacity: 0.25; } to { opacity: 1; } }
.af-flow {
  height: 100%; column-count: 2; column-gap: 64px; column-fill: auto;
  transition: transform 0.32s ease-out;
  font-family: var(--font-title); font-size: 17px; line-height: 1.9; color: #1E1C1A;
}
.af-flow p { margin: 0 0 10px; text-indent: 2em; text-align: justify; }
.af-flow .af-fixed { color: #2E2A26; }
.af-flow .af-intro { font-style: italic; text-indent: 0; color: #4A433C; font-size: 15.5px; }
.af-flow .af-court { text-indent: 0; }
.af-flow .af-court b { font-weight: 700; }
.af-chapter { font-family: var(--font-title); font-size: 21px; font-weight: 900; margin: 0 0 2px; break-after: avoid; }
.af-byline { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; break-after: avoid; }
.af-dossier { break-inside: avoid; border: 1px dashed #4A5560; background: rgba(236, 238, 240, 0.7); padding: 8px 12px 6px; margin: 0 0 12px; font-size: 15.5px; line-height: 1.75; }
.af-dossier p { text-indent: 0; margin-bottom: 6px; }
.af-dossier-head { display: flex; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 12px; color: #4A5560; }
.af-classification { color: var(--red); border: 1px solid var(--red); padding: 0 6px; font-family: var(--font-ui); font-weight: 700; letter-spacing: 2px; transform: rotate(-2deg); }
.af-dossier-title { font-weight: 700; margin: 4px 0 4px; }
.af-nav { display: flex; align-items: center; justify-content: center; gap: 14px; flex: 0 0 auto; }
.af-page-no { font-size: 13px; color: var(--muted); min-width: 90px; text-align: center; }
button.btn.end-book-export-btn { padding: 8px 12px; font-size: 13px !important; }