/* ThinkaBell Inline Style Utilities
   ================================
   Common inline styles extracted into reusable classes.
   This reduces inline style attributes and improves maintainability.
   ================================ */

/* ── Button minimum height (accessibility: 44px touch target) ── */
.tb-min-h-44 { min-height: 44px; }

/* ── Text body styles ── */
.tb-text-body {
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.7;
  margin: 0 0 1rem;
}

.tb-text-body--loose {
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.7;
  margin: 0 0 .75rem;
}

/* ── Heading styles ── */
.tb-heading-sm {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 .75rem;
}

.tb-heading-md {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.tb-heading-lg {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin-bottom: .5rem;
}

/* ── Link styles ── */
.tb-link-accent {
  color: var(--amber-dark);
  text-decoration: none;
}

.tb-link-accent:hover {
  text-decoration: underline;
}

/* ── Card styles ── */
.tb-card--plain {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.tb-card--accent {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.tb-card--hover {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: inherit;
  display: block;
  padding: 1.25rem;
  text-decoration: none;
  transition: box-shadow .2s;
}

.tb-card--hover:hover {
  box-shadow: var(--shadow-md);
}

/* ── Container styles ── */
.tb-container {
  margin: 1.5rem auto 0;
  max-width: 72rem;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.tb-container--narrow {
  margin: 3rem auto 0;
  max-width: 900px;
  padding: 0 1rem;
}

.tb-container--wide {
  margin: 2rem auto;
  max-width: 900px;
  padding: 0 1rem;
}

/* ── Grid layouts ── */
.tb-grid-2 {
  align-items: center;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: 72rem;
}

.tb-grid-auto {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ── Text utilities ── */
.tb-text-slate { color: var(--slate); }
.tb-text-ink { color: var(--ink); }
.tb-text-accent { color: var(--amber-dark); }
.tb-text-moss { color: var(--moss); font-size: .9rem; line-height: 1.6; margin: 0; }
.tb-text-meta { color: var(--slate); font-size: .85rem; margin: .5rem 0 0; }

.tb-link-accent {
  color: var(--amber-dark);
  text-decoration: none;
}

.tb-link-accent:hover {
  text-decoration: underline;
}

/* ── List utilities ── */
.tb-list-body {
  color: var(--slate);
  font-size: var(--text-base);
  line-height: 1.8;
  padding-left: 1.25rem;
}

.tb-list--compact {
  color: var(--slate);
  font-size: var(--text-base);
  line-height: 1.8;
  margin: 0;
  padding-left: 1.25rem;
}

/* ── Spacing utilities ── */
.tb-mb-1 { margin-bottom: 1rem; }
.tb-mb-1-5 { margin-bottom: 1.5rem; }
.tb-mb-2 { margin-bottom: 2rem; }
.tb-mt-1 { margin-top: 1rem; }
.tb-mt-1-5 { margin-top: 1.5rem; }
.tb-mt-2 { margin-top: 2rem; }
.tb-mx-auto { margin-left: auto; margin-right: auto; }

/* ── Visibility utilities ── */
.tb-hidden {
  display: none !important;
}

/* ── Flex utilities ── */
.tb-flex-row {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tb-flex-center {
  align-items: center;
  display: flex;
  gap: 1rem;
}

/* ── Form utilities ── */
.tb-label {
  color: var(--ink);
  display: block;
  margin-bottom: .25rem;
}

.tb-help-text {
  color: var(--slate);
  font-size: .9rem;
  line-height: 1.6;
  margin: 0;
}

/* ── Misc utilities ── */
.tb-text-center { text-align: center; }

.tb-block {
  color: var(--ink);
  display: block;
  margin-bottom: .25rem;
}

.tb-cursor-pointer {
  cursor: pointer;
  font-weight: 600;
}

/* ── Additional heading variants ── */
.tb-heading-md {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.tb-heading-lg {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin-bottom: .5rem;
}

/* ── Card variants ── */
.tb-card--plain {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.tb-card--accent {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.tb-card--hover {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: inherit;
  display: block;
  padding: 1.25rem;
  text-decoration: none;
  transition: box-shadow .2s;
}

.tb-card--hover:hover {
  box-shadow: var(--shadow-md);
}

/* ── Container variants ── */
.tb-container {
  margin: 1.5rem auto 0;
  max-width: 72rem;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.tb-container--narrow {
  margin: 3rem auto 0;
  max-width: 900px;
  padding: 0 1rem;
}

.tb-container--wide {
  margin: 2rem auto;
  max-width: 900px;
  padding: 0 1rem;
}

.tb-container--sm {
  margin: 0 auto;
  max-width: 640px;
  padding: 0 1rem;
}

/* ── Extracted utilities ── */
.tb-pb-border { padding:.75rem 1rem;border-bottom:1px solid var(--border) }


/* ── Extracted utilities ── */
.tb-heading-xs { font-size:1.1rem;margin-bottom:.5rem; }


/* ── Extracted utilities ── */
.tb-text-body--tight { line-height:1.8;color:var(--slate);margin-bottom:1.5rem; }


/* ── Extracted utilities ── */
.tb-card--bordered { margin-bottom:1rem;padding:1rem;border:1px solid var(--border);border-radius:8px }


/* ── Extracted utilities ── */
.tb-text-body--base { line-height:1.8;color:var(--slate);margin-bottom:1rem; }


/* ── Extracted utilities ── */
.tb-mb-3 { margin-bottom:.75rem; }


/* ── Extracted utilities ── */
.tb-pill-btn { display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .85rem;background:var(--moss-light);border:1px solid var(--border);border-radius:999px;font-size:.9rem;color:var(--ink);line-height:1.4; }


/* ── Extracted utilities ── */
.tb-text-accent-sm { font-size:.95rem;margin:0 0 .3rem;color:var(--amber-dark); }


/* ── Extracted utilities ── */
.tb-text-muted-sm { font-size:.8rem;color:var(--slate);margin-bottom:.5rem; }


/* ── Extracted utilities ── */
.tb-code-block { font-family:var(--font-mono);font-size:.8rem;color:var(--ink);background:var(--paper);padding:.75rem;border-radius:var(--radius-sm);white-space:pre-wrap;margin:0; }


/* ── Extracted utilities ── */
.tb-pb-border-heavy { padding:.75rem 1rem;text-align:left;border-bottom:2px solid var(--border) }


/* ── Extracted utilities ── */
.tb-subheading-amber { font-size:1.1rem;border-bottom:1px solid var(--border);padding-bottom:.25rem;margin-top:1.25rem;color:var(--amber-dark) }


/* ── Extracted utilities ── */
.tb-section-label { font-size:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);border-left:3px solid var(--amber);padding-left:.75rem;margin:1.25rem 0 .75rem }


/* ── Extracted utilities ── */
.tb-label-muted { font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate);margin:1.5rem 0 .75rem;font-weight:500 }


/* ── Extracted utilities ── */
.tb-container--auto { max-width:48rem;margin:0 auto; }


/* ── Extracted utilities ── */
.tb-card--elevated { background:var(--white);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;box-shadow:var(--shadow-sm); }


/* ── Extracted utilities ── */
.tb-textarea-base { width:100%;padding:.6rem 1rem;border:1px solid var(--border);border-radius:var(--radius-md);font:inherit;font-size:.9rem;resize:vertical; }


/* ── Extracted utilities ── */
.tb-grid-tight { max-width:48rem;margin:0 auto;display:grid;gap:1.25rem; }


/* ── Extracted utilities ── */
.tb-link-muted { font-size:.8rem;color:var(--amber-dark);text-decoration:underline }


/* ── Extracted utilities ── */
.tb-flex-center--tight { display:flex;align-items:center;gap:.5rem; }


/* ── Extracted utilities ── */
.tb-container--center { max-width:48rem;margin:2.5rem auto;padding:0 1rem; }