/* 20-components.css — buttons, controls, pills, notices, skeleton. */

.ts-btn{
  font-family:var(--tb-sans);
  font-size:14.5px;
  font-weight:500;
  border-radius:var(--tb-r-ctrl);
  letter-spacing:0;
}
/* Voxel sets button text from the Kit's "Text" size, which is 26 px — far too
   large for a 44 px control. */
.ts-btn.ts-btn-2{font-weight:700;}
.ts-btn.ts-btn-1{
  background:var(--tb-surface);
  border-color:var(--tb-border-strong);
  color:var(--tb-body);
}
.ts-btn.ts-btn-1:hover{border-color:var(--tb-ink);color:var(--tb-ink);}
.ts-btn-large{height:52px;font-size:15px;}
.ts-icon-btn{border-radius:var(--tb-r-pill);--ts-icon-color:var(--tb-muted);}
.ts-icon-btn:hover{--ts-icon-color:var(--tb-action);}
.elementor-button{border-radius:var(--tb-r-ctrl);font-family:var(--tb-sans);}

/* Touch targets ≥ 44 px (CLAUDE_1.md §6). */
.ts-btn,.elementor-button,.ts-icon-btn{min-height:44px;}

.tb-pill{
  display:inline-flex;align-items:center;height:26px;padding:0 11px;
  border-radius:var(--tb-r-pill);background:#F1EBE4;
  font-size:11.5px;font-weight:600;color:var(--tb-muted);
}
.tb-pill.is-ok{background:var(--tb-ok-bg);color:var(--tb-ok-ink);}
.tb-pill.is-bad{background:var(--tb-bad-bg);color:var(--tb-bad-ink);}

/* Notices. Colour is never the only carrier: each has a mark and a word. */
.tb-note-box{
  display:flex;gap:13px;padding:15px 16px;border-radius:var(--tb-r-img);
  margin-bottom:12px;border:1px solid;
}
.tb-note-box > .tb-note-mark{
  width:20px;height:20px;border-radius:var(--tb-r-pill);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#FFF;font-size:12px;font-weight:700;
}
.tb-note-box b{display:block;font-size:14px;font-weight:600;}
.tb-note-box span{display:block;font-size:13px;color:var(--tb-muted);margin-top:3px;}
.tb-note-ok{background:#EEF8F2;border-color:rgba(9,124,86,.25);}
.tb-note-ok > .tb-note-mark{background:var(--tb-ok);}
.tb-note-warn{background:var(--tb-warn-bg);border-color:rgba(224,123,57,.3);}
.tb-note-warn > .tb-note-mark{background:var(--tb-accent-line);}
.tb-note-bad{background:var(--tb-bad-bg);border-color:rgba(186,53,53,.25);}
.tb-note-bad > .tb-note-mark{background:var(--tb-bad);}

/* Skeleton in the shape of what is coming — not a spinner, which makes the
   page jump the moment content lands. */
.tb-skel{background:#F0EBE5;border-radius:6px;animation:tb-skel 1.4s ease-in-out infinite;}
@keyframes tb-skel{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.tb-skel{animation:none}}