/* Shared component skin. Loaded after studio.css so the terminal language wins. */

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 106, 61, 0.08), transparent 28rem),
    var(--bg);
  color: var(--t1);
  font-family: var(--font-sans);
  font-size: var(--fs-3);
  line-height: 1.5;
  font-feature-settings: "ss01";
}

h1, h2, h3, .hero h1, .section-head h2 {
  font-family: var(--font-sans);
  letter-spacing: -0.03em;
}

.btn {
  border-radius: var(--r-control);
  font-weight: 500;
  transition: background var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease), transform var(--motion-fast) var(--ease);
}

.btn:hover {
  border-color: var(--bd2);
}

.btn-primary,
.btn-primary:hover {
  color: var(--on-sig);
  box-shadow: none;
}

.eyebrow {
  border-color: #4a2416;
  background: var(--sig-soft);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.studio {
  font-size: var(--fs-2);
  font-family: var(--font-sans);
  color: var(--t1);
}

.bq-btn,
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  padding: 0 13px;
  border-radius: var(--r-control);
  border: 1px solid var(--bd2);
  background: var(--s2);
  color: var(--t1);
  font: 500 13px/1 var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}

.bq-btn:hover:not(:disabled),
.s-btn:hover:not(:disabled) {
  background: var(--s3);
}

.bq-btn:active:not(:disabled),
.s-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.bq-btn-signal,
.s-btn-primary {
  background: var(--sig);
  border-color: var(--sig);
  color: var(--on-sig) !important;
}

.bq-btn-signal:hover:not(:disabled),
.s-btn-primary:hover:not(:disabled) {
  background: var(--sig-hover);
  border-color: var(--sig-hover);
}

.bq-btn-danger,
.s-btn.bq-btn-danger,
.s-btn.cn-danger {
  background: transparent;
  border-color: #43201f;
  color: var(--neg) !important;
}

.s-btn-stop {
  border-color: #43201f;
  color: var(--neg);
  background: transparent;
}

.bq-btn-sm,
.s-btn-sm {
  height: 27px;
  min-height: 27px;
  padding: 0 10px;
  font-size: 12px;
}

.bq-btn-lg,
.s-btn-lg {
  height: 44px;
  min-height: 44px;
  padding: 0 20px;
  font-size: 14.5px;
  border-radius: var(--r-control);
}

.bq-btn-block,
.s-btn-block { width: 100%; }

.bq-btn:disabled,
.s-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.bq-chip,
.s-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font: 500 11.5px/20px var(--font-mono);
  white-space: nowrap;
}

.bq-dot,
.s-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: none;
}

.bq-chip-pos,
.s-chip-good { background: var(--pos-soft); color: var(--pos); border-color: #173a2a; }
.bq-chip-warn,
.s-chip-mid { background: var(--warn-soft); color: var(--warn); border-color: #3d2f14; }
.bq-chip-neg,
.s-chip-low { background: var(--neg-soft); color: var(--neg); border-color: #43201f; }
.bq-chip-info { background: var(--info-soft); color: var(--info); border-color: #22305a; }
.bq-chip-sig { background: var(--sig-soft); color: var(--sig); border-color: #4a2416; }
.bq-chip-neutral { background: var(--s2); color: var(--t2); border-color: var(--bd2); }

.s-tag-good { background: var(--pos-soft); color: var(--pos); }
.s-tag-mid { background: var(--warn-soft); color: var(--warn); }
.s-tag-low { background: var(--neg-soft); color: var(--neg); }

.bq-card,
.s-card {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  box-shadow: var(--e1);
}

.bq-section h1 { font-size: var(--fs-6); letter-spacing: -0.03em; }
.bq-section p { color: var(--t2); }
.bq-eyebrow,
.st-eyebrow {
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
}

.bq-stat strong,
.pf-tile strong,
.s-ring-label strong,
.lib-stats strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.bq-table .bq-th,
.pf-th {
  color: var(--t3);
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bq-tabs,
.s-seg {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--r-control);
  padding: 3px;
}

.bq-tabs button,
.s-seg button {
  border-radius: var(--r-tag);
  font: 500 12px/1 var(--font-sans);
}

.s-seg button.active,
.bq-tab.active {
  background: var(--s3);
  color: var(--t1);
}

.bq-empty h2,
.st-empty h2 { color: var(--t1); font-size: var(--fs-5); }
.bq-empty p,
.st-empty p { color: var(--t2); max-width: 46ch; }

.bq-skel { display: grid; gap: var(--sp-3); padding: var(--sp-2) 0 var(--sp-5); }
.bq-skel-line,
.bq-skel-card {
  background: linear-gradient(90deg, var(--s1) 0%, var(--s2) 45%, var(--s1) 100%);
  background-size: 200% 100%;
  animation: bq-shimmer 1.4s var(--ease) infinite;
  border-radius: var(--r-control);
  border: 1px solid var(--bd);
}
.bq-skel-kicker { width: 88px; height: 10px; }
.bq-skel-h { width: min(280px, 60%); height: 28px; }
.bq-skel-p { width: min(460px, 80%); height: 14px; }
.bq-skel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.bq-skel-card { height: 92px; border-radius: var(--r-card); }
@keyframes bq-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.bq-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 12px 14px;
  border-radius: var(--r-card);
  border: 1px solid var(--bd2);
  background: var(--s1);
  color: var(--t2);
  font-size: 13.5px;
  line-height: 1.45;
}
.bq-banner b, .bq-banner strong { color: var(--t1); }
.bq-banner-info { background: var(--info-soft); border-color: #22305a; }
.bq-banner-pos { background: var(--pos-soft); border-color: #173a2a; }
.bq-banner-warn { background: var(--warn-soft); border-color: #3d2f14; }
.bq-banner-neg { background: var(--neg-soft); border-color: #43201f; }
.bq-banner-sig { background: var(--sig-soft); border-color: #4a2416; }

.bq-modal-back {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(10, 11, 13, 0.72);
}
.bq-modal {
  width: min(440px, 100%);
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: var(--r-card);
  box-shadow: var(--e2);
  color: var(--t1);
}
.bq-modal-head, .bq-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 14px 16px;
}
.bq-modal-head { border-bottom: 1px solid var(--bd); }
.bq-modal-foot { border-top: 1px solid var(--bd); justify-content: flex-end; }
.bq-modal-head h2 { font-size: var(--fs-4); }
.bq-modal-body { padding: 16px; color: var(--t2); }
.bq-icon-x {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--t2);
  font-size: 18px;
}

.bq-toast,
.toast.studio-toast {
  background: var(--s2);
  color: var(--t1);
  border: 1px solid var(--bd2);
  border-radius: var(--r-card);
  box-shadow: var(--e2);
  font: 500 13px/1.4 var(--font-sans);
}
.bq-toast-neg { border-color: #43201f; }
.bq-toast-pos { border-color: #173a2a; }
.bq-toast-warn { border-color: #3d2f14; }

.bq-drop,
.lab-drop {
  border-radius: var(--r-card);
  border: 1px dashed var(--bd2);
  background: var(--s1);
}
.bq-drop:hover,
.lab-drop:hover,
.lab-drop.is-over {
  border-color: var(--sig);
  background: var(--sig-soft);
}

.bq-chart-canvas { min-height: 160px; }
.s-logo svg,
.s-logo-img,
.briq-logo-img {
  display: block;
  height: 28px;
  width: auto;
}
.st-auth-logo .s-logo svg,
.st-auth-logo .s-logo-img { height: 32px; }
.briq-lockup--header img.briq-logo-img,
.brand-mark.briq-lockup img.briq-logo-img { height: 28px; }

.st-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  width: 100%;
  padding-top: 8px;
  font: 500 12px/1 var(--font-sans);
  color: var(--t3);
}
.st-legal a:hover { color: var(--t1); }
.st-rail-foot { flex-wrap: wrap; }

.site-footer { background: var(--s1); }
.site-footer-links a { color: var(--t2); }

.trust-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--t2);
  font: 500 12.5px/1.4 var(--font-sans);
}

@media (max-width: 720px) {
  .bq-skel-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bq-skel-line,
  .bq-skel-card { animation: none; }
  .sig,
  .ring { animation: none; }
}