/*==================================================
=   DASHBOARD SHARED COMPONENTS
=
=   Single source of truth for the "content card" UI
=   pattern reused across About / API / Blog / Profile /
=   History pages: card container, kicker pill, section
=   head/title, prose text, bullet feature list, the
=   dot-grid page hero, hero tag pills and the two hero
=   stat-card shapes (numbered mini-stat, label/value
=   hero-stat-box).
=
=   Loaded once from base-dashboard.html. Page stylesheets
=   must NOT redeclare these — only page-specific deltas
=   (a different font-size, an extra layout tweak) belong
=   in the page's own CSS, on top of what's defined here.
==================================================*/

/* ---- card ---- */
.card-block,
.api-card,
.legal-section{
  background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: 21px;
  padding: 23px;
  box-shadow:
    0 20px 48px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
}

:root[data-theme="light"] .card-block,
:root[data-theme="light"] .api-card,
:root[data-theme="light"] .legal-hero,
:root[data-theme="light"] .legal-toc,
:root[data-theme="light"] .legal-section{
  background: #fff;
  border-color: rgba(15,23,42,0.08);
  box-shadow:
    0 11px 28px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---- kicker pill ---- */
.section-kicker,
.about-kicker{
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(165,189,255,0.18);
  border: 1px solid rgba(124,92,255,0.22);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 12px;
}

/* ---- section head / title (base only — pages set their own font-size) ---- */
.section-head{
  margin-bottom: 16px;
}

.section-title{
  margin: 0;
  font-weight: 900;
  color: var(--text);
}

:root[data-theme="light"] .section-title{
  color: #0f172a;
}

.section-desc{
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
}

:root[data-theme="light"] .section-desc{
  color: #64748b;
}

/* ---- prose text ---- */
.prose{
  display: grid;
  gap: 12px;
}

.prose p{
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

:root[data-theme="light"] .prose p{
  color: #64748b;
}

/* ---- bullet feature list ---- */
.feature-list{
  display: grid;
  gap: 14px;
}

.feature-item{
  display: grid;
  grid-template-columns: 11px 1fr;
  gap: 12px;
  align-items: start;
}

.feature-dot{
  width: 11px;
  height: 11px;
  border-radius: 999px;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 5px rgba(124,92,255,0.12);
}

.feature-title{
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 5px;
}

.feature-desc{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.95;
}

:root[data-theme="light"] .feature-title{
  color: #0f172a;
}

:root[data-theme="light"] .feature-desc{
  color: #64748b;
}

/* ---- page hero (About / API / Blog first section) ---- */
.about-hero,
.api-hero{
  --hero-dot: rgba(165,189,255,.35);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 20px;
  align-items: stretch;
  /* every page-hero reads as the same height regardless of copy length.
     480px covered About's tallest natural content at full width, but its
     title wraps to more lines in the ~1201-1219px range (just above the
     1200px single-column breakpoint) and grows past 480px on its own —
     520px covers that worst case too so it can never grow taller than
     the shared min-height and break the match again. */
  min-height: 520px;
}

.about-hero::before,
.api-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--hero-dot) 1px, transparent 1.3px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}

.about-hero-content,
.about-hero > .about-hero-stats,
.api-hero-main,
.api-hero > .api-hero-stats{
  position: relative;
  z-index: 1;
}

:root[data-theme="light"] .about-hero,
:root[data-theme="light"] .api-hero{
  --hero-dot: rgba(59,90,180,.35);
}

.about-hero-title,
.api-hero-title{
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  color: var(--text);
}

:root[data-theme="light"] .about-hero-title,
:root[data-theme="light"] .api-hero-title{
  color: #0f172a;
}

.about-hero-text,
.api-hero-text{
  color: var(--muted);
  font-size: 13px;
}

:root[data-theme="light"] .about-hero-text,
:root[data-theme="light"] .api-hero-text{
  color: #64748b;
}

.about-hero-stats,
.api-hero-stats{
  display: grid;
  gap: 12px;
}

/* ---- hero tag pills ---- */
.about-tags,
.api-tags{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.about-tag,
.api-tag{
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

:root[data-theme="light"] .about-tag{
  background: #fff;
  border-color: rgba(15,23,42,0.08);
  box-shadow: none;
}

:root[data-theme="light"] .api-tag{
  background: #fff;
  border-color: rgba(15,23,42,0.08);
  box-shadow:
    0 9px 21px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ---- numbered stat card (About/Blog hero: number, title, description) ---- */
.mini-stat{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 16px;
  min-height: 117px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.mini-stat-num{
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 11px;
}

.mini-stat-title{
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 7px;
}

.mini-stat-desc{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.95;
}

:root[data-theme="light"] .mini-stat{
  background: #fff;
  border-color: rgba(15,23,42,0.08);
  box-shadow:
    0 9px 21px rgba(15,23,42,0.04),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

:root[data-theme="light"] .mini-stat-title{
  color: #0f172a;
}

:root[data-theme="light"] .mini-stat-desc{
  color: #64748b;
}

/* note: .hero-stat-box is NOT shared here — About/Blog's mini-stat above
   covers the numbered-card shape, but API's hero-stat-box grew a per-stat
   accent bar (--stat-accent, .is-status/.is-version/.is-format) and
   History's grew its own overflow-wrap handling, so the two pages now own
   genuinely different variants of it in their own stylesheets. */

/* ---- generic 2-col content grid ---- */
.about-grid,
.api-grid{
  display: grid;
  gap: 20px;
}

.about-grid-2,
.api-grid-2{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ---- responsive ---- */
@media (max-width: 1200px){
  .about-hero,
  .api-hero{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px){
  .card-block,
  .api-card{
    padding: 20px 16px;
    border-radius: 18px;
  }

  .about-hero-title,
  .api-hero-title{
    font-size: 25px;
  }

  .about-grid-2{
    grid-template-columns: 1fr;
  }
}