Spaces:

Elfsong
/

Paper_Espresso

Running

Paper_Espresso / src /styles /tailwind.css
elfsong
Claude Fable 5.1
fix: equal-height cards, white background, and a Lifecycle view that opens
e7988f9 10 days ago
29 kB
/* Build with npm run build:css. Keep Preflight out of Streamlit's native UI. */
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme) prefix(tw);
@import "tailwindcss/utilities.css" layer(utilities) prefix(tw) source(none);
@source "../streamlit_app.py";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Songti SC", "Noto Serif CJK SC", serif;
}

/* ------------------------------------------------------------------ */
/* Design tokens: a warm, paper-and-espresso palette.                  */
/* ------------------------------------------------------------------ */
:root {
  --pe-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --pe-font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Songti SC", "Noto Serif CJK SC", serif;
  --pe-bg: #ffffff;
  --pe-surface: #ffffff;
  --pe-surface-2: #f1ece4;
  --pe-border: #e6dfd3;
  --pe-border-strong: #d3c8b8;
  --pe-ink: #1f1a16;
  --pe-ink-2: #4a4038;
  --pe-ink-3: #7a6e64;
  --pe-ink-4: #a3978b;
  --pe-accent: #6f4e37;
  --pe-accent-strong: #4e3423;
  --pe-accent-soft: #eadfd2;
  --pe-accent-softer: #f7f1ea;
  --pe-crema: #b45309;
  --pe-crema-soft: #fdf0d5;
  --pe-good: #15803d;
  --pe-good-soft: #effaf3;
  --pe-good-border: #cdebd8;
  --pe-bad: #be123c;
  --pe-bad-soft: #fff1f3;
  --pe-bad-border: #f7d2da;
  --pe-radius: 14px;
  --pe-radius-sm: 10px;
  --pe-shadow-sm: 0 1px 2px rgb(31 26 22 / .05), 0 1px 1px rgb(31 26 22 / .03);
  --pe-shadow-md: 0 12px 32px rgb(31 26 22 / .09), 0 2px 6px rgb(31 26 22 / .04);
  --pe-ring: 0 0 0 3px rgb(111 78 55 / .16);
}

/* ------------------------------------------------------------------ */
/* App shell                                                           */
/* ------------------------------------------------------------------ */
[data-testid="stAppViewContainer"] {
  background: var(--pe-bg);
  color: var(--pe-ink);
  font-family: var(--pe-font-sans);
  -webkit-font-smoothing: antialiased;
}
/* The transparent Streamlit toolbar overlaps our header; let clicks pass through. */
[data-testid="stHeader"], [data-testid="stToolbar"] { pointer-events: none; background: transparent; }
[data-testid="stHeader"] :is(button, a) { pointer-events: auto; }
.stMainBlockContainer { max-width: 1400px; padding: 1.4rem 2.5rem 5rem; }
.stDeployButton, [data-testid="stAppDeployButton"], footer, #MainMenu,
[data-testid="stSidebar"], [data-testid="collapsedControl"],
[data-testid="stSidebarCollapsedControl"] { display: none; }
[data-testid="stMarkdownContainer"] :is(h1, h2, h3, h4) { color: var(--pe-ink); letter-spacing: -.01em; }
/* Our HTML blocks have no trailing <p> margin, so undo Streamlit's -1rem markdown pull-up. */
[data-testid="stMarkdownContainer"]:has(> :is(.paper-brand, .view-heading, .filter-head, .panel-head, .panel-hint, .results-line,
  .card-meta, .card-authors, .card-links, .trending-panel, .summary-title, .summary-authors, .summary-chips, .paper-links,
  .legend-dots, .empty-icon, .eyebrow, .chip-row, .phase-table-wrap)) { margin-bottom: 0; }
[data-testid="stMarkdownContainer"] a { color: var(--pe-accent); text-decoration-color: var(--pe-accent-soft); text-underline-offset: 2px; }
[data-testid="stMarkdownContainer"] a:hover { color: var(--pe-accent-strong); }
[data-testid="stCaptionContainer"], [data-testid="stCaptionContainer"] p { color: var(--pe-ink-3); line-height: 1.6; }
[data-testid="stAppViewContainer"] :is(button, a, input):focus-visible { outline: 2px solid var(--pe-accent); outline-offset: 3px; }

.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pe-accent);
}
.eyebrow.good { color: var(--pe-good); }
.eyebrow.bad { color: var(--pe-bad); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }

/* ------------------------------------------------------------------ */
/* Header: brand, navigation, language                                  */
/* ------------------------------------------------------------------ */
.st-key-app_header {
  border-bottom: 1px solid var(--pe-border);
  padding-bottom: .85rem;
  margin-bottom: 1.1rem;
}
.st-key-app_header [data-testid="stMarkdownContainer"] { margin-bottom: 0; }
.paper-brand { display: flex; align-items: center; gap: .75rem; min-height: 44px; }
.paper-brand-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #7a573f 0%, #4e3423 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  box-shadow: var(--pe-shadow-sm);
}
.paper-brand-name {
  font-family: var(--pe-font-serif);
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--pe-ink); line-height: 1.15; white-space: nowrap;
}
.paper-brand-tagline { font-size: .74rem; color: var(--pe-ink-3); margin-top: .15rem; letter-spacing: .01em; }

/* Segmented navigation */
.st-key-mode_select [data-testid="stButtonGroup"] { width: 100%; }
.st-key-mode_select [data-baseweb="button-group"] {
  display: inline-flex; flex-wrap: nowrap;
  gap: 2px; padding: 3px;
  background: var(--pe-surface-2);
  border: 1px solid var(--pe-border);
  border-radius: 999px;
  margin: 0 auto;
}
.st-key-mode_select button[kind="segmented_control"],
.st-key-mode_select button[kind="segmented_controlActive"] {
  border: 0 !important;
  border-radius: 999px !important;
  min-height: 34px;
  padding: .25rem 1.05rem;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}
.st-key-mode_select button[kind="segmented_control"] p { color: var(--pe-ink-3); font-weight: 500; font-size: .875rem; }
.st-key-mode_select button[kind="segmented_control"]:hover { background: rgb(255 255 255 / .6); }
.st-key-mode_select button[kind="segmented_control"]:hover p { color: var(--pe-ink); }
.st-key-mode_select button[kind="segmented_controlActive"] { background: var(--pe-surface); box-shadow: var(--pe-shadow-sm); }
.st-key-mode_select button[kind="segmented_controlActive"] p { color: var(--pe-accent-strong); font-weight: 600; font-size: .875rem; }
.st-key-mode_select button span[data-testid="stIconMaterial"] { color: inherit; font-size: 1.05rem; }

.st-key-lang_toggle { display: flex; justify-content: flex-end; }
.st-key-lang_toggle [data-testid="stCheckbox"] { white-space: nowrap; }
.st-key-lang_toggle [data-testid="stCheckbox"] p { font-size: .875rem; font-weight: 500; color: var(--pe-ink-2); }

/* ------------------------------------------------------------------ */
/* View heading + period navigation                                     */
/* ------------------------------------------------------------------ */
.view-heading { margin: .1rem 0 .25rem; }
[data-testid="stMarkdownContainer"] .view-title {
  font-family: var(--pe-font-serif);
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  font-weight: 700; letter-spacing: -.015em; line-height: 1.15;
  color: var(--pe-ink); margin: 0; padding: 0;
}
.view-description { color: var(--pe-ink-3); font-size: .92rem; margin: .4rem 0 0; }
.st-key-period_prev button, .st-key-period_next button { min-width: 40px; padding-left: 0; padding-right: 0; }
.st-key-period_nav [data-testid="stHorizontalBlock"] { flex-direction: row !important; flex-wrap: nowrap !important; gap: .5rem !important; }
.st-key-period_nav [data-testid="stColumn"] { min-width: 0 !important; }
.st-key-period_nav [data-testid="stColumn"]:nth-child(1),
.st-key-period_nav [data-testid="stColumn"]:nth-child(3) { flex: 0 0 44px !important; width: 44px !important; }
.st-key-period_nav [data-testid="stColumn"]:nth-child(2) { flex: 1 1 auto !important; width: auto !important; }

/* ------------------------------------------------------------------ */
/* Native widgets                                                       */
/* ------------------------------------------------------------------ */
[data-testid="stWidgetLabel"] p { color: var(--pe-ink-3); font-size: .78rem; font-weight: 600; }
[data-testid="stSelectbox"] [data-baseweb="select"] > div,
[data-testid="stMultiSelect"] [data-baseweb="select"] > div,
[data-testid="stDateInput"] [data-baseweb="input"],
[data-testid="stTextInput"] [data-baseweb="input"] {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius-sm);
  min-height: 40px;
  box-shadow: var(--pe-shadow-sm);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
[data-testid="stSelectbox"] [data-baseweb="select"] > div:hover,
[data-testid="stMultiSelect"] [data-baseweb="select"] > div:hover,
[data-testid="stDateInput"] [data-baseweb="input"]:hover { border-color: var(--pe-border-strong); }
[data-testid="stSelectbox"] [data-baseweb="select"] > div:focus-within,
[data-testid="stMultiSelect"] [data-baseweb="select"] > div:focus-within,
[data-testid="stDateInput"] [data-baseweb="input"]:focus-within {
  border-color: var(--pe-accent);
  box-shadow: var(--pe-ring);
}
[data-testid="stSelectbox"] [data-baseweb="select"] > div > div { font-weight: 500; color: var(--pe-ink); }
[data-testid="stDateInput"] input { font-weight: 500; color: var(--pe-ink); text-align: center; }

[data-testid="stBaseButton-secondary"] {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius-sm);
  color: var(--pe-ink-2);
  box-shadow: var(--pe-shadow-sm);
  min-height: 40px;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
[data-testid="stBaseButton-secondary"]:hover:not(:disabled) {
  border-color: var(--pe-border-strong);
  background: var(--pe-accent-softer);
  color: var(--pe-accent-strong);
}
[data-testid="stBaseButton-secondary"]:disabled { opacity: .45; }
[data-testid="stBaseButton-primary"] {
  background: var(--pe-accent); border-color: var(--pe-accent);
  border-radius: var(--pe-radius-sm); min-height: 40px;
}
[data-testid="stBaseButton-primary"]:hover:not(:disabled) { background: var(--pe-accent-strong); border-color: var(--pe-accent-strong); }
[data-testid="stBaseButton-tertiary"] { color: var(--pe-accent); border-radius: var(--pe-radius-sm); }
[data-testid="stBaseButton-tertiary"]:hover:not(:disabled) { color: var(--pe-accent-strong); background: var(--pe-accent-softer); }

[data-testid="stMetric"] {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  padding: .85rem 1.1rem .75rem;
  box-shadow: var(--pe-shadow-sm);
}
[data-testid="stMetricLabel"] p { color: var(--pe-ink-3); font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
[data-testid="stMetricValue"], [data-testid="stMetricValue"] > div {
  font-family: var(--pe-font-serif);
  color: var(--pe-ink); font-size: 1.65rem; font-weight: 700; letter-spacing: -.01em;
}

[data-testid="stExpander"] details {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: 12px;
  box-shadow: var(--pe-shadow-sm);
}
[data-testid="stExpander"] summary { padding: .7rem 1rem; }
[data-testid="stExpander"] summary p { color: var(--pe-ink-2); font-weight: 600; font-size: .9rem; }
[data-testid="stExpander"] summary:hover p { color: var(--pe-accent-strong); }

[data-testid="stDataFrame"] { border-radius: 12px; overflow: hidden; }
[data-testid="stAlert"] { border-radius: 12px; }

/* Topic filter pills */
[data-testid="stButtonGroup"] button[kind="pills"],
[data-testid="stButtonGroup"] button[kind="pillsActive"] {
  border-radius: 999px;
  min-height: 32px;
  padding: .25rem .8rem;
  border: 1px solid var(--pe-border);
  background: var(--pe-surface);
  box-shadow: none;
  transition: border-color 120ms ease, background 120ms ease;
}
[data-testid="stButtonGroup"] button[kind="pills"] p { font-size: .8rem; font-weight: 500; color: var(--pe-ink-2); }
[data-testid="stButtonGroup"] button[kind="pills"]:hover { border-color: var(--pe-accent); background: var(--pe-accent-softer); }
[data-testid="stButtonGroup"] button[kind="pills"]:hover p { color: var(--pe-accent-strong); }
[data-testid="stButtonGroup"] button[kind="pillsActive"] { background: var(--pe-accent); border-color: var(--pe-accent); }
[data-testid="stButtonGroup"] button[kind="pillsActive"] p { font-size: .8rem; font-weight: 600; color: #fff; }
[data-testid="stButtonGroup"] button[kind="pillsActive"]:hover { background: var(--pe-accent-strong); border-color: var(--pe-accent-strong); }

/* ------------------------------------------------------------------ */
/* Chips                                                                */
/* ------------------------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center;
  border-radius: 999px;
  padding: .22rem .62rem;
  font-size: .72rem; font-weight: 600; line-height: 1.3;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.chip-topic { background: var(--pe-accent-softer); color: var(--pe-accent-strong); border: 1px solid var(--pe-accent-soft); }
.chip-keyword { background: var(--pe-crema-soft); color: var(--pe-crema); }
.chip-more { background: var(--pe-surface-2); color: var(--pe-ink-3); }
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ------------------------------------------------------------------ */
/* Trending / insights panel                                            */
/* ------------------------------------------------------------------ */
.trending-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf8 100%);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  padding: 1.15rem 1.4rem 1.2rem 1.6rem;
  box-shadow: var(--pe-shadow-sm);
  margin-bottom: 1.1rem;
}
.trending-panel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--pe-accent) 0%, var(--pe-crema) 100%);
}
.trending-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.trending-date { font-size: .78rem; color: var(--pe-ink-4); }
.trending-summary { color: var(--pe-ink-2); font-size: .95rem; line-height: 1.75; margin: 0; }
.trending-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.trending-chips + .trending-chips { margin-top: .5rem; }

/* ------------------------------------------------------------------ */
/* Topic filter + results line                                          */
/* ------------------------------------------------------------------ */
div[class*="st-key-filter_block_"] { gap: .45rem !important; margin-top: .25rem; }
.filter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.filter-hint { font-size: .78rem; color: var(--pe-ink-4); }
div[class*="st-key-filter_block_"] [data-testid="stExpander"] details { background: transparent; box-shadow: none; border-style: dashed; }
div[class*="st-key-filter_block_"] [data-testid="stExpander"] summary { padding: .45rem .9rem; }
div[class*="st-key-filter_block_"] [data-testid="stExpander"] summary p { font-size: .82rem; font-weight: 500; color: var(--pe-ink-3); }
div[class*="st-key-results_"] { margin: .35rem 0 .2rem; min-height: 2rem; }
.results-line { color: var(--pe-ink-3); font-size: .86rem; line-height: 1.5; }
.results-line strong { color: var(--pe-ink); font-weight: 600; }
.results-line .results-topics { color: var(--pe-accent-strong); font-weight: 500; }
div[class*="st-key-clear_"] button { min-height: 32px; padding: .2rem .6rem; }
div[class*="st-key-clear_"] button p { font-size: .8rem; }

/* Hidden chart whose only job is to pre-fetch the chart JavaScript bundle */
/* Keep it inside the viewport: the chart code is only fetched once the element is on screen. */
[data-testid="stLayoutWrapper"]:has(> .st-key-chart_warmup) { position: absolute; width: 0; height: 0; margin: 0 !important; overflow: visible; }
.st-key-chart_warmup {
  position: fixed; top: 0; left: 0; width: 2px; height: 2px; overflow: hidden;
  opacity: 0; pointer-events: none; margin: 0 !important; z-index: -1;
}

/* ------------------------------------------------------------------ */
/* Lifecycle phase tables (plain HTML keeps the page light)             */
/* ------------------------------------------------------------------ */
.phase-table-wrap {
  max-height: 420px; overflow: auto; margin-top: .5rem;
  border: 1px solid var(--pe-border); border-radius: 10px; background: var(--pe-surface);
}
.phase-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.phase-table th, .phase-table td {
  padding: .45rem .8rem; text-align: left; border-bottom: 1px solid var(--pe-border); white-space: nowrap;
}
.phase-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--pe-surface-2); color: var(--pe-ink-3);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.phase-table td.col-topic { white-space: normal; color: var(--pe-ink); font-weight: 500; width: 55%; }
.phase-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.phase-table .col-month { color: var(--pe-ink-3); }
.phase-table .trend-up { color: var(--pe-good); }
.phase-table .trend-down { color: var(--pe-bad); }
.phase-table .trend-flat { color: var(--pe-ink-4); }
.phase-table tbody tr:last-child td { border-bottom: 0; }
.phase-table tbody tr:hover td { background: var(--pe-accent-softer); }

/* ------------------------------------------------------------------ */
/* Paper cards                                                          */
/* ------------------------------------------------------------------ */
/* Make every card in a row the same height: stretch the wrapper chain
   column > vertical block > layout wrapper > card, then pin the footer
   to the bottom with margin-top:auto. */
[data-testid="stLayoutWrapper"]:has(> div[class*="st-key-paper_card_"]) {
  flex: 1 1 auto !important;
  display: flex;
  flex-direction: column;
}
div[class*="st-key-paper_card_"] {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border) !important;
  border-radius: var(--pe-radius);
  padding: .95rem 1.1rem .85rem !important;
  gap: .35rem !important;
  flex: 1 1 auto !important;
  height: auto;
  box-shadow: var(--pe-shadow-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
div[class*="st-key-paper_card_"]:hover {
  border-color: var(--pe-border-strong) !important;
  box-shadow: var(--pe-shadow-md);
  transform: translateY(-1px);
}
div[class*="st-key-paper_card_"] [data-testid="stMarkdownContainer"] { margin-bottom: 0; }
.card-thumb {
  aspect-ratio: 1200 / 648;
  overflow: hidden;
  margin: 0 0 .7rem;
  border-radius: calc(var(--pe-radius) - 4px);
  border: 1px solid var(--pe-border);
  background: var(--pe-surface-2);
}
.card-thumb img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform 220ms ease;
}
div[class*="st-key-paper_card_"]:hover .card-thumb img { transform: scale(1.015); }
.card-meta { display: flex; align-items: center; gap: .55rem; font-size: .74rem; color: var(--pe-ink-4); }
.card-meta .card-date { margin-left: auto; white-space: nowrap; }
.card-rank { font-weight: 700; color: var(--pe-ink-3); font-variant-numeric: tabular-nums; }
.card-upvotes {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .12rem .5rem; border-radius: 999px;
  background: var(--pe-crema-soft); color: var(--pe-crema);
  font-weight: 700; font-size: .72rem; font-variant-numeric: tabular-nums;
}
div[class*="st-key-paper_card_"] [data-testid="stButton"] button {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-height: 0;
  text-align: left;
  justify-content: flex-start;
  box-shadow: none !important;
  cursor: pointer;
}
div[class*="st-key-paper_card_"] [data-testid="stButton"] button p {
  color: var(--pe-ink);
  font-size: .98rem; font-weight: 600; line-height: 1.4;
  text-align: left;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 120ms ease;
}
div[class*="st-key-paper_card_"] [data-testid="stButton"] button:hover p {
  color: var(--pe-accent);
  text-decoration: underline; text-decoration-color: var(--pe-accent-soft); text-underline-offset: 3px;
}
.card-authors {
  color: var(--pe-ink-3); font-size: .78rem; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-tldr {
  color: var(--pe-ink-2); font-size: .84rem; line-height: 1.6;
  margin: .35rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-topics { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
div[class*="st-key-paper_foot_"] {
  margin-top: auto;
  padding-top: .55rem;
  border-top: 1px solid var(--pe-border);
  gap: .5rem !important;
}
div[class*="st-key-paper_foot_"] [data-testid="stButton"] button {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  min-height: 30px; padding: .15rem .55rem !important; border-radius: 8px;
  color: var(--pe-accent); width: auto;
}
div[class*="st-key-paper_foot_"] [data-testid="stButton"] button p { font-size: .78rem; font-weight: 600; color: var(--pe-accent); display: block; -webkit-line-clamp: unset; }
div[class*="st-key-paper_foot_"] [data-testid="stButton"] button:hover { background: var(--pe-accent-softer) !important; }
div[class*="st-key-paper_foot_"] [data-testid="stButton"] button:hover p { color: var(--pe-accent-strong); text-decoration: none; }
.card-links { display: flex; align-items: center; gap: .1rem; }
.card-links a {
  font-size: .74rem; font-weight: 600; color: var(--pe-ink-3);
  text-decoration: none; padding: .2rem .45rem; border-radius: 6px;
}
.card-links a:hover { background: var(--pe-accent-softer); color: var(--pe-accent-strong); }
.card-links a + a::before { content: "·"; color: var(--pe-border-strong); margin-right: .5rem; }

/* ------------------------------------------------------------------ */
/* Empty state                                                          */
/* ------------------------------------------------------------------ */
.st-key-empty_state {
  background: var(--pe-surface);
  border: 1px dashed var(--pe-border-strong);
  border-radius: var(--pe-radius);
  padding: 2rem 1.5rem !important;
  align-items: center;
  text-align: center;
}
.st-key-empty_state [data-testid="stMarkdownContainer"] { text-align: center; }
.empty-icon { font-size: 2.4rem; line-height: 1; margin-bottom: .6rem; }
.empty-title { font-family: var(--pe-font-serif); font-size: 1.3rem; font-weight: 700; color: var(--pe-ink); margin: 0; }
.empty-body { color: var(--pe-ink-3); font-size: .9rem; margin: .4rem 0 0; }

/* ------------------------------------------------------------------ */
/* Summary dialog                                                       */
/* ------------------------------------------------------------------ */
[data-testid="stDialog"] [role="dialog"] { border-radius: 18px; background: var(--pe-surface); }
[data-testid="stDialog"] [role="dialog"] > div:first-child { color: var(--pe-ink-3); font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
[data-testid="stMarkdownContainer"] .summary-title {
  font-family: var(--pe-font-serif);
  font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
  color: var(--pe-ink); margin: 0 0 .5rem; padding: 0;
}
.summary-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .9rem; color: var(--pe-ink-3); font-size: .82rem; }
.summary-authors { color: var(--pe-ink-2); font-size: .86rem; line-height: 1.6; }
.summary-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.paper-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.paper-links a {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--pe-border); background: var(--pe-surface);
  border-radius: 9px; padding: .4rem .8rem;
  font-size: .8rem; font-weight: 600; color: var(--pe-ink-2); text-decoration: none;
  box-shadow: var(--pe-shadow-sm);
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.paper-links a:hover { border-color: var(--pe-accent); color: var(--pe-accent-strong); background: var(--pe-accent-softer); }
.st-key-summary_tldr {
  background: var(--pe-accent-softer);
  border: 1px solid var(--pe-accent-soft);
  border-radius: 12px;
  padding: .9rem 1.1rem !important;
  gap: .35rem !important;
}
.st-key-summary_tldr [data-testid="stMarkdownContainer"] p { font-size: .96rem; line-height: 1.7; color: var(--pe-ink); margin-bottom: 0; }
.st-key-summary_analysis { gap: .35rem !important; }
.st-key-summary_analysis [data-testid="stMarkdownContainer"] p { font-size: .92rem; line-height: 1.75; color: var(--pe-ink-2); }
.st-key-summary_pros, .st-key-summary_cons { border-radius: 12px; padding: .9rem 1rem !important; gap: .35rem !important; height: 100%; }
.st-key-summary_pros { background: var(--pe-good-soft); border: 1px solid var(--pe-good-border); }
.st-key-summary_cons { background: var(--pe-bad-soft); border: 1px solid var(--pe-bad-border); }
.st-key-summary_pros [data-testid="stMarkdownContainer"] ul,
.st-key-summary_cons [data-testid="stMarkdownContainer"] ul { padding-left: 1.1rem; margin: 0; }
.st-key-summary_pros [data-testid="stMarkdownContainer"] li,
.st-key-summary_cons [data-testid="stMarkdownContainer"] li { font-size: .86rem; line-height: 1.65; color: var(--pe-ink-2); margin-bottom: .3rem; }
.st-key-summary_pros [data-testid="stMarkdownContainer"] li::marker { color: var(--pe-good); }
.st-key-summary_cons [data-testid="stMarkdownContainer"] li::marker { color: var(--pe-bad); }
[data-testid="stDialog"] [data-testid="stMarkdownContainer"] { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Monthly / lifecycle panels                                           */
/* ------------------------------------------------------------------ */
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin: .25rem 0 .1rem; }
.panel-hint { font-size: .8rem; color: var(--pe-ink-4); }
.st-key-lifecycle_figure {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  padding: 1rem 1rem .5rem !important;
  box-shadow: var(--pe-shadow-sm);
}
.st-key-lifecycle_figure [data-testid="stImage"] img { border-radius: 8px; }
.phase-note { color: var(--pe-ink-3); font-size: .84rem; margin: 0; }
.legend-dots { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .78rem; color: var(--pe-ink-3); }
.legend-dots span::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 999px; margin-right: .35rem; background: var(--dot, var(--pe-ink-4)); }

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 960px) {
  .st-key-app_header { padding-bottom: .75rem; }
  .st-key-app_header [data-testid="stHorizontalBlock"] { flex-wrap: wrap; gap: .75rem; }
  .st-key-app_header [data-testid="stColumn"] { min-width: 0 !important; }
  .st-key-app_header [data-testid="stColumn"]:nth-child(1) { flex: 1 1 60% !important; width: auto !important; }
  .st-key-app_header [data-testid="stColumn"]:nth-child(3) { flex: 0 0 auto !important; width: auto !important; }
  .st-key-app_header [data-testid="stColumn"]:nth-child(2) { flex: 1 1 100% !important; width: 100% !important; order: 3; }
  .st-key-mode_select [data-baseweb="button-group"] { width: 100%; display: flex; }
  .st-key-mode_select button[kind="segmented_control"],
  .st-key-mode_select button[kind="segmented_controlActive"] { flex: 1 1 0; justify-content: center; padding: .25rem .5rem; }
}
@media (max-width: 760px) {
  .stMainBlockContainer { padding: 1rem 1rem 3rem; }
  .trending-panel { padding: 1rem 1rem 1rem 1.2rem; }
  .view-description { font-size: .88rem; }
  .st-key-period_nav { margin-top: .25rem; }
  [data-testid="stDialog"] [role="dialog"] { width: calc(100vw - 1.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  div[class*="st-key-paper_card_"], [data-testid="stBaseButton-secondary"], [data-testid="stButtonGroup"] button { transition: none; }
  div[class*="st-key-paper_card_"]:hover { transform: none; }
  .card-thumb img { transition: none; }
  div[class*="st-key-paper_card_"]:hover .card-thumb img { transform: none; }
}