/* v15.0.4: customer-facing layout polish, balanced help cards, stronger reward-card affordance. */

/* Header/nav: use the space instead of tiny labels floating in the middle. */
.sq15 .site-header {
  width:min(1280px,calc(100% - 28px));
  gap:18px;
  padding-left:20px;
  padding-right:20px;
}
.sq15 .site-nav { gap:6px; justify-content:center; }
.sq15 .site-nav a {
  padding:10px 13px;
  font-size:14px;
  line-height:1.25;
  font-weight:760;
}

/* Dashboard: compact summaries and centered profile blocks. */
.sq15 #accountSection .dashboard-grid {
  max-width:1040px;
  margin-left:auto;
  margin-right:auto;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.sq15 #accountSection .stat-card {
  min-height:142px;
  padding:18px 16px;
  justify-content:center;
}
.sq15 #accountSection .stat-card > strong,
.sq15 #accountSection .wallet-balance-line { margin-top:7px; }
.sq15 #accountSection .level-stat-card { gap:5px; }
.sq15 #accountSection .level-title-display { margin-top:2px!important; }
.sq15 .xp-panel,
.sq15 .goal-rewards-panel,
.sq15 .redeem-blocker-panel,
.sq15 .sq-growth-hub,
.sq15 .sq-coin-history-panel { max-width:1040px; margin-left:auto; margin-right:auto; }
.sq15 .sq-growth-stats-compact { max-width:840px; margin-left:auto; margin-right:auto; }
.sq15 .sq-achievement-panel { margin-bottom:16px; }
.sq15 .sq-coin-history-panel { margin-top:0; margin-bottom:16px; }

/* Help/How it works: balanced cards rather than one giant block beside short ones. */
.sq15 .how-page .page-heading { max-width:1040px; margin-left:auto; margin-right:auto; text-align:center; }
.sq15 .how-page .page-heading > p { max-width:760px; margin-left:auto; margin-right:auto; }
.sq15 .how-page .hero-actions { justify-content:center; }
.sq15 .how-step-grid-compact {
  max-width:1040px;
  margin-left:auto;
  margin-right:auto;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
}
.sq15 .how-step-grid-compact .how-step-card {
  min-height:232px;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:22px 20px;
}
.sq15 .how-step-grid-compact .how-step-card h2 { min-height:48px; margin-bottom:9px; }
.sq15 .how-step-grid-compact .how-step-card p { margin-top:0; line-height:1.55; }
.sq15 .faq-grid-compact {
  max-width:1040px;
  margin-left:auto;
  margin-right:auto;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.sq15 .faq-grid-compact .panel { min-height:190px; display:flex; flex-direction:column; }
.sq15 .faq-grid-compact .panel .mini-link { margin-top:auto; align-self:flex-start; }

/* Rewards: less dead space and make the entire tile feel interactive. */
.sq15 #rewardsGrid { gap:14px; }
.sq15 #rewardsGrid .reward-card {
  border-color:rgba(148,163,184,.14);
  background:linear-gradient(180deg,rgba(25,32,45,.98),rgba(17,23,34,.98));
  transition:transform 160ms ease,border-color 160ms ease,box-shadow 160ms ease,background 160ms ease;
}
.sq15 #rewardsGrid .reward-card:hover {
  transform:translateY(-4px);
  border-color:rgba(232,179,77,.45);
  background:linear-gradient(180deg,rgba(31,39,53,.99),rgba(19,25,37,.99));
  box-shadow:0 16px 34px rgba(0,0,0,.28),0 0 0 1px rgba(232,179,77,.08);
}
.sq15 #rewardsGrid .reward-card:active { transform:translateY(-1px); }
.sq15 #rewardsGrid .reward-art { height:138px; min-height:138px; padding:12px; transition:transform 160ms ease; }
.sq15 #rewardsGrid .reward-card:hover .reward-art { transform:scale(1.025); }
.sq15 #rewardsGrid .reward-info { gap:6px; padding:11px 11px 13px; }
.sq15 #rewardsGrid .reward-title-row { height:23px; min-height:23px; }
.sq15 #rewardsGrid .reward-info h2 { min-height:38px; line-height:19px; }
.sq15 #rewardsGrid .reward-info h2 a,
.sq15 #rewardsGrid .reward-card:hover .reward-info h2 a { color:inherit; text-decoration:none; }
.sq15 #rewardsGrid .reward-meta { gap:5px; }
.sq15 #rewardsGrid .reward-card-tools { min-height:0; }
.sq15 #rewardsGrid .reward-card-tools:empty { display:none; }

/* Finance: make invalid field combinations visibly unavailable. */
.sq15 #financeRecordForm :is(input,select):disabled { opacity:.48; cursor:not-allowed; }
.sq15 #financeRecordForm label:has(:disabled) { color:rgba(203,213,225,.6); }

@media (max-width:1100px) {
  .sq15 .site-nav a { font-size:13px; padding-inline:10px; }
  .sq15 .how-step-grid-compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sq15 #accountSection .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .sq15 .site-header { width:calc(100% - 16px); padding-left:14px; padding-right:14px; gap:8px; }
  .sq15 .site-nav a { font-size:14px; padding:9px 8px; }
  .sq15 #accountSection .stat-card { min-height:134px; }
  .sq15 .how-page .page-heading { text-align:left; }
  .sq15 .how-page .page-heading > p { margin-left:0; }
  .sq15 .how-page .hero-actions { justify-content:stretch; }
  .sq15 .how-step-grid-compact,
  .sq15 .faq-grid-compact { grid-template-columns:1fr; }
  .sq15 .how-step-grid-compact .how-step-card,
  .sq15 .faq-grid-compact .panel { min-height:0; }
  .sq15 #rewardsGrid .reward-art { height:116px; min-height:116px; }
  .sq15 #rewardsGrid .reward-info { padding:10px 8px 11px; gap:5px; }
}
@media (max-width:420px) {
  .sq15 #accountSection .dashboard-grid { grid-template-columns:1fr!important; }
  .sq15 #accountSection .stat-card { min-height:118px; }
}