/* apps/gex_app/static/css/public_gex.css */
.pgx { max-width: 960px; padding-top: 1.5rem; padding-bottom: 3rem; }
.pgx h1 { font-size: 1.9rem; margin-bottom: .25rem; }
.pgx h2 { font-size: 1.25rem; margin-top: 2rem; }
.pgx-crumbs { font-size: .85rem; opacity: .75; margin-bottom: .75rem; }
.pgx-asof, .pgx-lead { opacity: .8; }
/* landing.css styles every <section> as a full-width landing band (60px padding,
   alternating background, top border, ::after rule) — that was the empty dark
   block under the level tiles. Our sections are plain content blocks. */
main.pgx section { padding: 0; background: transparent; border-top: 0; }
main.pgx section::after { content: none; }
main.pgx section.pgx-cta { padding: 1.25rem; border-top: 1px solid var(--border-color, #30363d); }
.pgx-stale { margin-left: .5rem; padding: 0 .4rem; border-radius: 4px; background: rgba(255, 193, 7, .2); }
.pgx-levels dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin: 1rem 0; }
.pgx-levels dl > div { border: 1px solid var(--border-color, #30363d); border-radius: 8px; padding: .6rem .8rem; }
.pgx-levels dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.pgx-levels dd { font-size: 1.3rem; font-weight: 600; line-height: 1.2; margin: 0; }
.pgx-levels dd .pgx-note { display: block; margin-top: .15rem; font-size: .8rem; font-weight: 400; line-height: 1.3; opacity: .75; }
.pgx-positive { color: #28a745; }
.pgx-negative { color: #dc3545; }
.pgx table { width: 100%; border-collapse: collapse; }
.pgx th, .pgx td { padding: .4rem .6rem; border-bottom: 1px solid var(--border-color, #30363d); text-align: right; white-space: nowrap; }
.pgx th:first-child, .pgx td:first-child { text-align: left; }
.pgx-cta { margin-top: 2rem; padding: 1.25rem; border-radius: 10px; border: 1px solid var(--border-color, #30363d); }
.pgx-related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.pgx-about { margin-top: 2rem; }
.pgx-faq details { border-top: 1px solid var(--border-color, #30363d); padding: .6rem 0; }
.pgx-faq summary { cursor: pointer; font-weight: 600; }
.pgx-faq p { margin: .5rem 0 0; }
.pgx-disclaimer { margin-top: 2rem; font-size: .8rem; opacity: .65; }
.pgx-chart { margin: 1.5rem 0; }
.pgx-chart img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border-color, #30363d); }
.pgx-chart figcaption { margin-top: .4rem; font-size: .8rem; opacity: .7; }
.pgx-heatmap-grid ul { list-style: none; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pgx-heatmap-grid img { width: 100%; height: auto; border-radius: 6px; display: block; }
.pgx-heatmap-grid span { display: block; margin-top: .35rem; font-size: .9rem; }