/* ═══════════════════════════════════════════
   BASE — Layout utilities, typography helpers
═══════════════════════════════════════════ */

/* Focus ring — accessibility */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Screen-reader only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Layout Wrappers */
.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--sp-8);
}

.section      { padding-block: var(--sp-24); }
.section-sm   { padding-block: var(--sp-16); }
.section-divider { border: none; height: 1px; background-color: var(--bg-border); margin: 0; }

/* Section Labels */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--green-dim);
  background-color: var(--green-dim);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--sp-5);
}

/* Typography */
.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--text);
}

.title-accent {
  color: var(--green);
  background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-sub {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-top: var(--sp-4);
  max-width: 560px;
}

.text-center { text-align: center; }
.text-center .section-sub,
.text-center .section-title { margin-inline: auto; }
.text-center .section-header { text-align: center; display: flex; flex-direction: column; align-items: center; }

.section-header  { margin-bottom: var(--sp-12); }

/* Colors */
.text-up   { color: var(--up); }
.text-dn   { color: var(--dn); }
.text-warn { color: var(--warn); }

/* Loading */
.loading-state {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-muted);
  font-size: .875rem;
  padding: var(--sp-5) 0;
}

/* Scrollbar */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--bg-subtle); }
::-webkit-scrollbar-thumb  { background: var(--bg-border); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }