@charset "UTF-8";
/* ---------------------------------------------------------------------------
   Codon Optimization Calculator — block-specific styles.

   Internals only. The card shell + design tokens come from the shared
   interactive-card.css (`.bsb-icard`, enqueued as a dependency). Everything
   here is scoped under #bsb-codon and uses the shared --orange/--text/... CSS
   custom properties so the card matches the other calculators. No emoji —
   risk/verdict are conveyed with colour + text.
   --------------------------------------------------------------------------- */
#bsb-codon {
  /* ── tabs ── */
  /* ── input ── */
  /* ── results ── */
  /* ── rare-codon map ── */
  /* ── rare-codon table ── */
  /* ── troubleshooting ── */
}
#bsb-codon .bsb-codon-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--rule);
}
#bsb-codon .bsb-codon-tab {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
#bsb-codon .bsb-codon-tab:hover {
  color: var(--text);
}
#bsb-codon .bsb-codon-tab.active {
  color: var(--orange-dark);
  border-bottom-color: var(--orange);
}
#bsb-codon .bsb-codon-panel {
  display: none;
}
#bsb-codon .bsb-codon-panel.active {
  display: block;
}
#bsb-codon .bsb-codon-intro {
  font-size: 14px;
  color: var(--body-text);
  line-height: 1.55;
  margin: 0 0 14px;
}
#bsb-codon .bsb-codon-textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface);
}
#bsb-codon .bsb-codon-textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--tint);
}
#bsb-codon .bsb-codon-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
#bsb-codon .bsb-codon-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
#bsb-codon .bsb-codon-btn--primary {
  background: var(--orange);
  color: #fff;
}
#bsb-codon .bsb-codon-btn--primary:hover {
  background: var(--orange-hover);
}
#bsb-codon .bsb-codon-btn--ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
#bsb-codon .bsb-codon-btn--ghost:hover {
  color: var(--text);
  border-color: var(--muted);
}
#bsb-codon .bsb-codon-error {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
}
#bsb-codon .bsb-codon-error.visible {
  display: block;
}
#bsb-codon .bsb-codon-results {
  display: none;
  margin-top: 20px;
}
#bsb-codon .bsb-codon-results.visible {
  display: block;
}
#bsb-codon .bsb-codon-score-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--light-bg);
}
#bsb-codon .bsb-codon-score-box.is-high {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}
#bsb-codon .bsb-codon-score-box.is-mid {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}
#bsb-codon .bsb-codon-score-box.is-good {
  background: var(--success-bg);
  border-color: var(--success-border);
}
#bsb-codon .bsb-codon-score-num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  flex: 0 0 auto;
}
#bsb-codon .bsb-codon-score-detail {
  flex: 1 1 auto;
}
#bsb-codon .bsb-codon-score-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
#bsb-codon .bsb-codon-score-verdict {
  font-size: 13px;
  color: var(--body-text);
  line-height: 1.5;
  margin: 4px 0;
}
#bsb-codon .bsb-codon-score-meta {
  font-size: 11px;
  color: var(--faint);
}
#bsb-codon .bsb-codon-warning {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: var(--radius-sm);
  border: 1px solid var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
}
#bsb-codon .bsb-codon-warning.visible {
  display: block;
}
#bsb-codon .bsb-codon-warning strong {
  display: block;
  margin-bottom: 4px;
}
#bsb-codon .bsb-codon-recommendation {
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--body-text);
  background: var(--tint);
  border: 1px solid var(--tint-border);
  border-radius: var(--radius-sm);
}
#bsb-codon .bsb-codon-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 8px;
}
#bsb-codon .bsb-codon-map-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
#bsb-codon .bsb-codon-map-count {
  font-size: 12px;
  font-weight: 600;
}
#bsb-codon .bsb-codon-map-count.has-rare {
  color: var(--danger-text);
}
#bsb-codon .bsb-codon-map-count.no-rare {
  color: var(--success-text);
}
#bsb-codon .bsb-codon-seq-vis {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 2;
  word-break: break-all;
  padding: 12px;
  background: var(--light-bg);
  border-radius: var(--radius-sm);
}
#bsb-codon .bsb-codon-cell {
  padding: 1px 1px;
  border-radius: 2px;
}
#bsb-codon .bsb-codon-cell.is-high {
  background: var(--danger-border);
  color: #fff;
  font-weight: 700;
  cursor: help;
}
#bsb-codon .bsb-codon-cell.is-med {
  background: var(--warning-border);
  color: var(--text);
  font-weight: 600;
  cursor: help;
}
#bsb-codon .bsb-codon-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
}
#bsb-codon .bsb-codon-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#bsb-codon .bsb-codon-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}
#bsb-codon .bsb-codon-swatch.is-high {
  background: var(--danger-border);
}
#bsb-codon .bsb-codon-swatch.is-med {
  background: var(--warning-border);
}
#bsb-codon .bsb-codon-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 16px;
}
#bsb-codon .bsb-codon-rc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
#bsb-codon .bsb-codon-rc-table th,
#bsb-codon .bsb-codon-rc-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
#bsb-codon .bsb-codon-rc-table th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
#bsb-codon .bsb-codon-mono {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--text);
}
#bsb-codon .bsb-codon-nterm {
  color: var(--danger-text);
}
#bsb-codon .bsb-codon-repl {
  display: inline-block;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--light-bg);
  border: 1px solid var(--border);
}
#bsb-codon .bsb-codon-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
#bsb-codon .bsb-codon-badge.is-high {
  background: var(--danger-bg);
  color: var(--danger-text);
}
#bsb-codon .bsb-codon-badge.is-med {
  background: var(--warning-bg);
  color: var(--warning-text);
}
#bsb-codon .bsb-codon-table-note {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}
#bsb-codon .bsb-codon-no-rare {
  margin-top: 16px;
  padding: 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}
#bsb-codon .bsb-codon-action-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange-dark);
  cursor: pointer;
}
#bsb-codon .bsb-codon-action-link:hover {
  text-decoration: underline;
}
#bsb-codon .bsb-codon-ts-intro {
  font-size: 14px;
  color: var(--body-text);
  line-height: 1.55;
  margin: 0 0 14px;
}
#bsb-codon .bsb-codon-ts-symptoms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#bsb-codon .bsb-codon-ts-btn {
  appearance: none;
  text-align: left;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, background 0.15s;
}
#bsb-codon .bsb-codon-ts-btn:hover {
  border-color: var(--orange);
}
#bsb-codon .bsb-codon-ts-btn.active {
  border-color: var(--orange);
  background: var(--tint);
}
#bsb-codon .bsb-codon-ts-result {
  display: none;
  margin-top: 16px;
}
#bsb-codon .bsb-codon-ts-result.active {
  display: block;
}
#bsb-codon .bsb-codon-ts-tag {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--orange-dark);
  margin-bottom: 10px;
}
#bsb-codon .bsb-codon-ts-block {
  margin-bottom: 12px;
}
#bsb-codon .bsb-codon-ts-block-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
#bsb-codon .bsb-codon-ts-block p {
  font-size: 13px;
  color: var(--body-text);
  line-height: 1.55;
  margin: 0;
}
#bsb-codon .bsb-codon-ts-clear {
  appearance: none;
  cursor: pointer;
  margin-top: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
#bsb-codon .bsb-codon-ts-clear:hover {
  color: var(--text);
  border-color: var(--muted);
}