/* ==========================================================================
   CPS Tester — Page-specific layout (home, archive, blog, misc)
   ========================================================================== */

/* ---------- Tool pages & home: structure ---------- */
.tool-page{padding-top:var(--space-5);}
@media (min-width:768px){.tool-page{padding-top:var(--space-6);}}
.tool-page > * + *{margin-top:var(--space-4);}
.tool-page > .quicklinks{margin-bottom:var(--space-5);}

.page-head{text-align:center;max-width:860px;margin-inline:auto;padding-block:var(--space-2) var(--space-1);}
.page-head h1{font-size:var(--fs-display);font-weight:800;}
.page-head__intro{margin-top:var(--space-3);color:var(--text-secondary);font-size:var(--fs-base);}
@media (min-width:768px){.page-head__intro{font-size:var(--fs-lg);}}

/* Trending strip */
.trending{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);
  background:var(--surface-raised);
  border:1px solid var(--surface-border);
  min-width:0;
}
.trending__label{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  font-family:var(--font-heading);font-weight:800;font-size:var(--fs-sm);
  letter-spacing:0.05em;text-transform:uppercase;color:var(--color-accent-400);
}
.trending__label svg{width:16px;height:16px;}
.trending__row{
  display:flex;gap:var(--space-2);
  overflow-x:auto;min-width:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.trending__row::-webkit-scrollbar{display:none;}
.trending__chip{
  flex-shrink:0;white-space:nowrap;
  padding:6px 12px;border-radius:var(--radius-sm);
  background:var(--surface-card);
  font-size:var(--fs-xs);font-weight:600;color:var(--text-secondary);
}
.trending__chip:hover{background:var(--surface-card-hover);color:var(--text-primary);}

.tool-note{font-size:var(--fs-xs);color:var(--text-muted);text-align:center;max-width:760px;margin-inline:auto;}

/* Article column + sticky sidebar */
.content-grid{
  display:grid;
  gap:var(--space-6);
  grid-template-columns:minmax(0,1fr);
  margin-top:var(--space-8);
  align-items:start;
}
@media (min-width:1100px){
  .content-grid{grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-8);}
  .content-side{position:sticky;top:calc(var(--header-height) + 16px);}
}
.content{
  background:var(--surface-raised);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
}
@media (min-width:768px){.content{padding:var(--space-8);}}
.content > section + section{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--surface-border);}
.content > section:first-child h2{margin-top:0;}
.content-side .side-card + .side-card{margin-top:var(--space-4);}
.content-side .side-card__title{text-align:left;}
.toc__list{list-style:none;counter-reset:toc;display:flex;flex-direction:column;}
.toc__list li{counter-increment:toc;}
.toc__list a{
  display:flex;gap:10px;padding:8px 2px;
  border-bottom:1px dashed var(--surface-border);
  font-size:var(--fs-sm);color:var(--text-secondary);
}
.toc__list a::before{content:counter(toc) ".";color:var(--color-accent-400);font-weight:700;flex-shrink:0;}
.toc__list a:hover{color:var(--text-primary);}
.toc__list li:last-child a{border-bottom:0;}

/* Tool link grid (related tools, popular tools) */
.tool-links{display:grid;gap:var(--space-3);grid-template-columns:minmax(0,1fr);}
@media (min-width:640px){.tool-links{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1280px){.tool-links--wide{grid-template-columns:repeat(3,minmax(0,1fr));}}
.tool-link{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  text-decoration:none !important;
  transition:background var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);
  min-width:0;
}
.tool-link:hover{background:var(--surface-card-hover);transform:translateY(-2px);}
.tool-link__icon{
  width:40px;height:40px;flex-shrink:0;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-purple);color:#fff;
}
.tool-link:nth-child(4n+2) .tool-link__icon{background:var(--grad-orange);color:var(--text-on-accent);}
.tool-link:nth-child(4n+3) .tool-link__icon{background:var(--grad-green);}
.tool-link:nth-child(4n+4) .tool-link__icon{background:var(--grad-pink);}
.tool-link__icon svg{width:20px;height:20px;}
.tool-link strong{display:block;color:var(--text-primary);font-family:var(--font-heading);font-size:var(--fs-base);text-transform:uppercase;letter-spacing:0.02em;}
.tool-link small{display:block;color:var(--text-muted);font-size:var(--fs-xs);line-height:1.4;margin-top:2px;}

/* Ad slots: space is reserved up front, so a late ad never shifts layout. */
.ad-slot{
  position:relative;
  min-height:110px;
  margin-block:var(--space-5);
  text-align:center;
  overflow:hidden;
}
.ad-slot__label{display:block;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
.ad-slot--sidebar{min-height:250px;}

/* Page sections outside the article (home extras, archives) */
.band{margin-top:var(--space-10);}
.band__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-5);}
.band__head h2{text-transform:uppercase;}
.band__sub{
  margin:var(--space-6) 0 var(--space-3);
  font-size:var(--fs-sm);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-accent-400);
}
.band__sub:first-of-type{margin-top:0;}
.tool-layout__main{min-width:0;}

/* Old hero pieces still used by a couple of widgets */
.hero__stat-value{font-family:var(--font-heading);font-size:var(--fs-2xl);font-weight:700;}
.hero__stat-label{font-size:var(--fs-xs);color:var(--text-muted);}


/* ---------- Leaderboard ---------- */
.lb{max-width:760px;margin-inline:auto;min-width:0;}
.lb__modes{
  display:flex;gap:var(--space-2);
  overflow-x:auto;
  padding-bottom:var(--space-2);
  margin-bottom:var(--space-4);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.lb__modes::-webkit-scrollbar{display:none;}
.lb-pill,.lb-seg{
  flex-shrink:0;
  padding:9px 16px;
  border-radius:var(--radius-pill);
  border:1px solid var(--surface-border-strong);
  background:var(--surface-card);
  color:var(--text-secondary);
  font-size:var(--fs-sm);
  font-weight:600;
  min-height:40px;
  transition:all var(--duration-fast) var(--ease-out);
}
.lb-pill:hover,.lb-seg:hover{color:var(--text-primary);border-color:var(--color-brand-400);}
.lb-pill.is-active,.lb-seg.is-active{background:var(--brand-gradient);border-color:transparent;color:#fff;}
.lb__filters{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;margin-bottom:var(--space-5);}
.lb__durations,.lb__ranges{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.lb__ranges{margin-left:auto;padding:4px;border-radius:var(--radius-pill);background:var(--surface-raised);border:1px solid var(--surface-border);}
.lb-seg{border-color:transparent;background:transparent;padding:7px 14px;min-height:36px;}
.lb__you{
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md);
  background:var(--brand-gradient-soft);
  border:1px solid rgba(var(--color-brand-500-rgb),0.3);
  font-size:var(--fs-sm);
  margin-bottom:var(--space-4);
}
.lb__list{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;}
.lb-row{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  min-width:0;
}
.lb-row.is-you{border-color:var(--color-brand-400);background:var(--brand-gradient-soft);}
.lb-row[data-rank="1"]{border-color:rgba(251,191,36,0.55);}
.lb-row[data-rank="2"]{border-color:rgba(203,213,225,0.45);}
.lb-row[data-rank="3"]{border-color:rgba(217,119,6,0.5);}
.lb-row__rank{flex:0 0 2.5rem;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-sm);color:var(--text-muted);}
.lb-row[data-rank="1"] .lb-row__rank,.lb-row[data-rank="2"] .lb-row__rank,.lb-row[data-rank="3"] .lb-row__rank{font-size:var(--fs-lg);}
.lb-row__who{flex:1;min-width:0;display:flex;flex-direction:column;}
.lb-row__name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-row__you{margin-left:8px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--brand-gradient);color:#fff;font-size:10px;font-weight:700;vertical-align:middle;}
.lb-row__meta{font-size:var(--fs-xs);color:var(--text-muted);}
.lb-row__score{flex-shrink:0;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-lg);text-align:right;font-variant-numeric:tabular-nums;}
.lb-row__score small{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);}
.lb-row--skeleton{min-height:62px;}
.lb-skel{height:16px;}
.lb-skel--a{flex:0 0 2.5rem;}
.lb-skel--b{flex:1;}
.lb__cta{display:flex;justify-content:center;margin-top:var(--space-6);}
.lb__note{margin-top:var(--space-5);font-size:var(--fs-xs);color:var(--text-muted);text-align:center;}
.lb-error{padding:var(--space-6);text-align:center;color:#fca5a5;}
.lb-emptywrap{list-style:none;}
.lb-empty{text-align:center;padding:var(--space-8) var(--space-4);}
.lb-empty__title{font-family:var(--font-heading);font-size:var(--fs-lg);margin-bottom:var(--space-2);}
.lb-empty .btn{margin-top:var(--space-5);}
.lb-mini{max-width:760px;margin-inline:auto;}
.lb-mini__head{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-end;justify-content:space-between;margin-bottom:var(--space-5);}
.lb-mini__head h3{margin-top:4px;}

/* "Add my score" box inside result panels */
.lb-submit{margin-top:var(--space-5);padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface-raised);border:1px solid var(--surface-border);text-align:center;}
.lb-submit__title{font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--space-3);}
.lb-submit__form{display:flex;gap:var(--space-2);max-width:360px;margin-inline:auto;}
.lb-submit__form input{flex:1;min-width:0;padding:10px 14px;border-radius:var(--radius-pill);background:var(--surface-card);border:1px solid var(--surface-border-strong);color:var(--text-primary);}
.lb-submit__form input:focus{border-color:var(--color-brand-400);}
.lb-submit__msg{margin-top:var(--space-3);font-size:var(--fs-sm);font-weight:600;}
.lb-submit__msg.is-success{color:var(--color-success-400);}
.lb-submit__msg.is-success a{text-decoration:underline;text-underline-offset:3px;}
.lb-submit__msg.is-error{color:#fca5a5;}
.lb-submit__note{margin-top:var(--space-3);font-size:11px;color:var(--text-muted);}

.lb-pill,.lb-seg{white-space:nowrap;}
@media (max-width:479px){
  .lb-submit__form{flex-direction:column;}
  .lb__modes{
    margin-inline:calc(var(--space-5) * -1);padding-inline:var(--space-5);
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .lb__durations{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;}
  .lb__durations::-webkit-scrollbar{display:none;}
  .lb__durations .lb-pill{padding:6px 14px;min-height:34px;}
  .lb-seg{font-size:var(--fs-xs);padding-inline:6px;}
  .lb-row{padding:var(--space-3);gap:var(--space-2);}
  .lb-row__rank{flex-basis:2.1rem;}
  .lb-row__score{font-size:var(--fs-base);}
  .lb__ranges{width:100%;justify-content:space-between;}
  .lb-seg{flex:1;padding-inline:8px;}
}

/* ---------- Featured ticker ---------- */
.ticker{
  position:relative;
  overflow:hidden;
  border-block:1px solid var(--surface-border);
  background:var(--surface-raised);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker__track{
  display:flex;
  width:max-content;
  animation:ticker-scroll 32s linear infinite;
}
.ticker:hover .ticker__track{animation-play-state:paused;}
.ticker__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:var(--space-4) var(--space-6);
  font-weight:600;
  font-size:var(--fs-sm);
  color:var(--text-secondary);
  white-space:nowrap;
  border-right:1px solid var(--surface-border);
  flex-shrink:0;
}
.ticker__item:hover{color:var(--text-primary);}
.ticker__icon{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  background:var(--brand-gradient-soft);
  color:var(--color-brand-300);
  flex-shrink:0;
}
.ticker__icon svg{width:15px;height:15px;}
@keyframes ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .ticker__track{animation:none;}
  .ticker{overflow-x:auto;}
}

/* ---------- Category tiles ---------- */
.category-tile{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding:var(--space-6);
}
.category-tile__icon{
  width:52px;height:52px;
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-gradient-soft);
  color:var(--color-brand-300);
}
.category-tile__icon svg{width:26px;height:26px;}
.category-tile__count{font-size:var(--fs-xs);color:var(--text-muted);}

/* ---------- Level up section ---------- */
.levelup-panel{
  display:grid;
  gap:var(--space-8);
  align-items:center;
}
@media (min-width:1024px){.levelup-panel{grid-template-columns:1fr 1fr;}}
.level-track{display:flex;flex-direction:column;gap:var(--space-2);}
.level-track__row{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  border:1px solid var(--surface-border);
}
.level-track__num{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-raised);
  font-family:var(--font-heading);font-weight:700;font-size:var(--fs-xs);
  flex-shrink:0;
}
.level-track__name{font-weight:600;flex:1;}
.level-track__target{font-size:var(--fs-xs);color:var(--text-muted);}

/* ---------- Daily challenge ---------- */
.daily-card{
  background:var(--brand-gradient);
  border-radius:var(--radius-xl);
  padding:var(--space-8);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.daily-card__date{font-size:var(--fs-xs);opacity:0.85;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.daily-card__goal{font-family:var(--font-heading);font-size:var(--fs-2xl);font-weight:700;margin-block:var(--space-3) var(--space-5);}
.daily-card__status{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);opacity:0.9;margin-bottom:var(--space-6);}
.daily-card__status svg,.daily-banner__status svg{width:16px;height:16px;}

/* Banner used at the top of the standalone /daily-challenge/ page —
   same gradient treatment as the homepage teaser card, with generous
   margin below so it never sits flush against the test panel. */
.daily-banner{
  background:var(--brand-gradient);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  color:#fff;
  text-align:center;
  margin-bottom:var(--space-6);
}
.daily-banner__goal{font-family:var(--font-heading);font-size:var(--fs-xl);font-weight:700;}
.daily-banner__status{
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  margin-top:var(--space-3);
  font-size:var(--fs-sm);
  opacity:0.9;
}

/* ---------- FAQ page layout ---------- */
.faq-page .faq-list{max-width:760px;margin-inline:auto;}

/* ---------- Blog ---------- */
.article-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr;}
@media (min-width:768px){.article-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1200px){.article-grid{grid-template-columns:repeat(3,1fr);}}
.article-card{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:0;}
.article-card__media{aspect-ratio:16/9;background:var(--brand-gradient-soft);display:flex;align-items:center;justify-content:center;color:var(--color-brand-300);}
.article-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1;}
.article-card__title{font-size:var(--fs-lg);font-weight:600;}
.article-card__excerpt{color:var(--text-secondary);font-size:var(--fs-sm);flex:1;}
.article-card__meta{font-size:var(--fs-xs);color:var(--text-muted);}

.article-featured{
  display:grid;
  gap:var(--space-6);
  padding:var(--space-6);
}
@media (min-width:768px){.article-featured{grid-template-columns:1.1fr 1fr;align-items:center;padding:var(--space-8);}}

.article-header{max-width:760px;margin-inline:auto;text-align:center;margin-bottom:var(--space-10);}
.article-body{max-width:760px;margin-inline:auto;}
.article-cta{
  max-width:760px;
  margin:var(--space-10) auto 0;
  padding:var(--space-6);
  text-align:center;
}

/* ---------- Search ---------- */
.search-form{display:flex;gap:var(--space-2);max-width:560px;margin-inline:auto;}
.search-form input[type="search"]{
  flex:1;
  padding:14px 18px;
  border-radius:var(--radius-pill);
  background:var(--surface-card);
  border:1px solid var(--surface-border-strong);
  color:var(--text-primary);
}
.search-form input[type="search"]:focus{border-color:var(--color-brand-400);}

/* ---------- Contact form ---------- */
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-5);}
.form-field label{font-size:var(--fs-sm);font-weight:600;}
.form-field input,.form-field textarea,.form-field select{
  padding:12px 16px;
  border-radius:var(--radius-sm);
  background:var(--surface-card);
  border:1px solid var(--surface-border-strong);
  color:var(--text-primary);
  width:100%;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--color-brand-400);}
.form-field textarea{resize:vertical;min-height:140px;}
.form-note{font-size:var(--fs-xs);color:var(--text-muted);}
.form-message{padding:var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-5);font-size:var(--fs-sm);}
.form-message--success{background:rgba(34,197,94,0.12);color:var(--color-success-400);border:1px solid rgba(34,197,94,0.3);}
.form-message--error{background:rgba(239,68,68,0.12);color:#fca5a5;border:1px solid rgba(239,68,68,0.3);}

/* ---------- 404 ---------- */
.error-404{text-align:center;padding-block:var(--space-20);}
.error-404__code{font-family:var(--font-heading);font-size:clamp(4.5rem,3rem + 8vw,7.5rem);font-weight:800;line-height:1;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
.error-404__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-8);}

/* ---------- Achievement grid ---------- */
.achievement-card{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5);}
.achievement-card[data-locked="true"]{opacity:0.45;}
.achievement-card__icon{
  width:44px;height:44px;flex-shrink:0;
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-gradient-soft);
  color:var(--color-brand-300);
  font-size:20px;
}
.achievement-card__title{font-weight:700;font-size:var(--fs-sm);}
.achievement-card__desc{font-size:var(--fs-xs);color:var(--text-muted);margin-top:2px;}

/* ---------- Filter bar (tests archive) ---------- */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-8);
  padding:var(--space-4);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  border:1px solid var(--surface-border);
}
.filter-group{display:flex;gap:var(--space-2);flex-wrap:wrap;}
.filter-chip{
  padding:8px 14px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-xs);
  font-weight:600;
  background:var(--surface-raised);
  border:1px solid var(--surface-border);
  color:var(--text-secondary);
}
.filter-chip[aria-pressed="true"]{background:var(--brand-gradient);border-color:transparent;color:#fff;}

/* ---------- Challenge (challenge/{id}) ---------- */
.challenge-intro{text-align:center;max-width:520px;margin-inline:auto var(--space-8);}
.challenge-target{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  padding:var(--space-4) var(--space-8);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  border:1px solid var(--surface-border-strong);
  margin-bottom:var(--space-6);
}
.challenge-target__value{font-family:var(--font-heading);font-size:var(--fs-3xl);font-weight:800;color:var(--color-brand-300);}