/* The Net Press — Stake App Review
   Page-scoped styles, adapted from the 1win review template. Reuses
   tokens from ../styles.css (colors, radius, shadow, fonts) so this page
   matches the rest of the site in both light and dark mode without
   touching the shared stylesheet. Accent colors below evoke Stake's own
   dark-navy/neon-green brand identity for the CTA buttons only. */

:root{
  --win-green: #1a2c38;
  --win-green-dark: #101c25;
  --win-green-text: #00e701;
  --win-amber: #b3670e;
  --win-amber-soft: #fbf1e3;
}
:root[data-theme="dark"]{
  --win-amber-soft: #2a2013;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --win-amber-soft: #2a2013;
  }
}

/* Disclosure strip */
.promo-banner{
  background:var(--text);
  color:var(--bg);
  text-align:center;
  font-size:.76rem;
  letter-spacing:.02em;
  padding:8px 16px;
}
.promo-banner strong{color:inherit}

/* This page's content needs full-width tables/grids, so relax the
   shared .article-body max-width and cap only prose paragraphs. */
.article-body{max-width:none}
.article-body p{max-width:70ch}
.article-body ul, .article-body ol{max-width:70ch}

/* The shared drop-cap rule (.article-body p:first-of-type::first-letter)
   is scoped per parent, so every boxed component with a single <p> (promo
   code, disclosure, verdict panel...) was picking up its own giant drop
   cap. Disable it globally on this page and re-enable it only on the
   true opening paragraph via .lede. */
.article-body p:first-of-type::first-letter{
  all:unset; float:none; padding:0; font:inherit; color:inherit;
}
.article-body p.lede:first-of-type::first-letter{
  font-family:var(--font-serif);
  font-size:3.2rem;
  font-weight:700;
  float:left;
  line-height:.85;
  padding:6px 8px 0 0;
  color:var(--accent);
}

/* Verdict box */
.verdict-box{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:28px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 28px;
  margin:22px 0;
}
.verdict-score{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-right:28px;
  border-right:1px solid var(--border);
  min-width:120px;
}
.verdict-score .num{
  font-family:var(--font-serif);
  font-size:2.6rem;
  font-weight:700;
  color:var(--accent);
  line-height:1;
}
.verdict-score .of5{font-size:1rem; color:var(--text-muted); font-weight:400}
.verdict-score .label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted);
  margin-top:8px; text-align:center;
}

.stars{
  position:relative;
  display:inline-block;
  font-size:1.1rem;
  line-height:1;
  font-family:Georgia, serif;
  letter-spacing:2px;
  color:var(--border);
}
.stars::before{content:"★★★★★"}
.stars .fill{
  position:absolute; top:0; left:0; overflow:hidden;
  white-space:nowrap; color:#f5a623;
}
.stars .fill::before{content:"★★★★★"}

.rating-bars{display:flex; flex-direction:column; gap:11px}
.rating-bar{display:grid; grid-template-columns:150px 1fr 34px; align-items:center; gap:12px; font-size:.86rem}
.rating-bar .track{
  height:8px; border-radius:999px; background:var(--accent-soft); overflow:hidden;
}
.rating-bar .fill{display:block; height:100%; background:var(--accent); border-radius:999px}
.rating-bar .val{color:var(--text-muted); font-weight:600; text-align:right}

/* Quick facts + data tables */
.data-table{width:100%; border-collapse:collapse; margin:18px 0; font-size:.92rem}
.data-table caption{text-align:left; font-size:.78rem; color:var(--text-muted); margin-bottom:8px}
.data-table th, .data-table td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--border);
}
.data-table thead th{
  background:var(--accent-soft); color:var(--accent-dark);
  font-size:.76rem; text-transform:uppercase; letter-spacing:.06em;
  border-bottom:none;
}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--accent-soft)}
.table-scroll{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border)}
.table-scroll .data-table{margin:0; border:none}
.table-scroll .data-table th:first-child, .table-scroll .data-table td:first-child{padding-left:16px}

.quick-facts{list-style:none; margin:0; padding:0; font-size:.88rem}
.quick-facts li{
  display:flex; justify-content:space-between; gap:10px;
  padding:9px 0; border-top:1px dashed var(--border);
}
.quick-facts li:first-child{border-top:none}
.quick-facts .k{color:var(--text-muted)}
.quick-facts .v{font-weight:600; text-align:right}

/* CTA buttons — dark navy + neon-green text, evoking Stake's own UI */
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin:22px 0}
.btn-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--win-green); color:var(--win-green-text);
  padding:14px 22px; border-radius:12px;
  text-decoration:none; font-weight:700; font-size:.95rem;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.5);
  border:1px solid #2a3f4d;
}
.btn-cta:hover{background:var(--win-green-dark)}
.btn-cta .icon{font-size:1.2rem}
.btn-cta small{display:block; font-weight:400; font-size:.72rem; opacity:.8; color:#c9d3d8}
.btn-cta--ghost{
  background:transparent; color:var(--accent); border:1px solid var(--accent);
  box-shadow:none;
}
.btn-cta--ghost:hover{background:var(--accent-soft)}
.cta-note{font-size:.76rem; color:var(--text-muted); margin-top:-10px; margin-bottom:22px}

/* Table of contents */
.toc{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; margin:22px 0; box-shadow:var(--shadow);
}
.toc h2{font-family:var(--font-serif); font-size:1.05rem; margin:0 0 12px}
.toc ol{margin:0; padding-left:1.2em; columns:2; column-gap:24px; font-size:.86rem}
.toc li{margin-bottom:8px; break-inside:avoid}
.toc a{color:var(--text); text-decoration:none}
.toc a:hover{color:var(--accent)}
aside .widget .toc{margin:0; padding:0; border:none; box-shadow:none}
aside .widget .toc ol{columns:1}

/* Section anchors offset for sticky header */
.article-body h2, .article-body h3{scroll-margin-top:90px}
.article-body h2{
  font-family:var(--font-serif); font-size:1.5rem; margin:40px 0 14px;
  padding-bottom:8px; border-bottom:2px solid var(--text);
}
.article-body h3{font-family:var(--font-serif); font-size:1.18rem; margin:26px 0 10px}

/* Screenshot gallery */
.screenshot-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:20px 0 28px;
}
.screenshot-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
.screenshot-card__media{
  aspect-ratio:9/16; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); font-size:2.6rem; color:var(--accent); opacity:.6;
}
.screenshot-card figcaption{padding:12px 14px; font-size:.82rem; color:var(--text-muted)}
.screenshot-card figcaption strong{display:block; color:var(--text); font-size:.86rem; margin-bottom:2px}

/* Pros & cons */
.pros-cons{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:20px 0}
.pc-col{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow);
}
.pc-col h3{margin:0 0 14px; font-family:var(--font-serif); font-size:1.05rem}
.pc-col ul{list-style:none; margin:0; padding:0; font-size:.9rem}
.pc-col li{display:flex; gap:10px; padding:8px 0; border-top:1px dashed var(--border)}
.pc-col li:first-child{border-top:none}
.pc-col--pros h3{color:#0e9f6e}
.pc-col--pros li::before{content:"✓"; color:#0e9f6e; font-weight:700}
.pc-col--cons h3{color:#c0392b}
.pc-col--cons li::before{content:"✕"; color:#c0392b; font-weight:700}

/* Promo code chip */
.promo-code{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--accent-soft); border:1px dashed var(--accent);
  border-radius:12px; padding:16px 18px; margin:18px 0;
}
.promo-code .chip{
  font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight:700; letter-spacing:.05em; background:var(--surface);
  border:1px solid var(--accent); color:var(--accent-dark);
  padding:8px 14px; border-radius:8px; font-size:.95rem;
}
.promo-code p{margin:0; font-size:.84rem; color:var(--text-muted)}

/* Disclosure / responsible gambling boxes */
.rg-box{
  background:var(--win-amber-soft); border:1px solid var(--win-amber);
  border-radius:var(--radius); padding:18px 20px; margin:26px 0;
  font-size:.88rem; color:var(--text);
}
.rg-box h3{margin:0 0 8px; font-size:.95rem; color:var(--win-amber)}
.rg-box p{margin:0 0 8px}
.rg-box p:last-child{margin-bottom:0}
.rg-box a{color:var(--accent); font-weight:600}

.disclosure-box{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:16px 18px; margin:22px 0; font-size:.84rem; color:var(--text-muted);
}
.disclosure-box strong{color:var(--text)}

/* FAQ accordion (native <details>, no JS) */
.faq-list{display:flex; flex-direction:column; gap:10px; margin:18px 0}
.faq-item{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:16px 20px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-weight:600; font-size:.95rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+"; font-size:1.3rem; color:var(--accent); font-weight:400;
  flex-shrink:0; transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 20px 18px; color:var(--text-muted); font-size:.92rem; max-width:70ch}

/* Verdict CTA panel near end of article */
.verdict-panel{
  background:linear-gradient(135deg, var(--accent-soft), var(--surface));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; margin:30px 0; text-align:center; box-shadow:var(--shadow);
}
.verdict-panel h2{border:none; margin:0 0 10px; padding:0}
.verdict-panel p{max-width:60ch; margin:0 auto 18px; color:var(--text-muted)}
.verdict-panel .cta-row{justify-content:center}

/* Sidebar widget tweaks */
.widget .rg-box{margin:0}
.widget-icon-logo{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.widget-icon-logo img{width:34px; height:34px; border-radius:8px}
.widget-icon-logo span{font-family:var(--font-serif); font-weight:700; font-size:1.05rem}

/* Responsive */
@media (max-width:980px){
  .screenshot-grid{grid-template-columns:repeat(2, 1fr)}
  .pros-cons{grid-template-columns:1fr}
}
@media (max-width:760px){
  .verdict-box{grid-template-columns:1fr}
  .verdict-score{border-right:none; border-bottom:1px solid var(--border); padding-right:0; padding-bottom:16px}
  .rating-bar{grid-template-columns:110px 1fr 30px; gap:8px}
  .toc ol{columns:1}
  .screenshot-grid{grid-template-columns:repeat(2, 1fr)}
  .cta-row{flex-direction:column}
  .btn-cta{justify-content:center}
}