/* tables.css — generator panels (match Skazka theme) */

:root {
  /* Uses your global vars from styles.css; fallback here for safety */
  --sb-panel: var(--sb-panel, #12131a);
  --sb-panel2: var(--sb-panel2, #171922);
  --sb-border: var(--sb-border, #2a2d36);
  --sb-text: var(--sb-text, #e6dccb);
  --sb-dim: var(--sb-dim, #b9b09e);
  --sb-gold: var(--sb-gold, #c2a13a);
  --sb-gold-strong: var(--sb-gold-strong, #e1b84d);
  --sb-radius: var(--sb-radius, 14px);
}

/* === Panel === */
.tb-panel {
  position: relative;
  display: grid;
  gap: 12px;
  padding: clamp(12px, 2vw, 18px);
  margin: 18px 0;
  font-size: 1.1rem;
  color: var(--sb-text);
  background: linear-gradient(180deg, var(--sb-panel), var(--sb-panel2));
  border: 1px solid var(--sb-border);
  box-shadow:
    0 12px 24px rgb(0 0 0 / 45%),
    inset 0 1px 0 rgb(255 255 255 / 2%);
}

.tb-title {
  margin: 0 0 10px;
  font-weight: 900;
  color: var(--sb-gold-strong);
  letter-spacing: 0.3px;
}

/* === Controls grid === */
.tb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  align-items: end;
}

.tb-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* Inputs/selects/buttons */
.tb-input,
.tb-select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--sb-text);
  outline: none;
  background: #0f1117;
  border: 1px solid var(--sb-border);
  border-radius: 10px;
}

.tb-input:focus,
.tb-select:focus {
  background: #10131a;
  border-color: var(--sb-gold-strong);
  box-shadow: 0 0 0 2px rgb(226 184 77 / 25%);
}

.tb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.tb-btn {
  padding: 10px 14px;
  margin-top: 4px;
  font-weight: 700;
  color: #0b0a07;
  text-shadow: 0 1px 0 rgb(255 255 255 / 15%);
  cursor: pointer;
  background: linear-gradient(180deg, var(--sb-gold-strong), var(--sb-gold));
  border: 1px solid color-mix(in oklab, var(--sb-gold) 70%, black);
  border-radius: 10px;
  transition:
    transform 0.06s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.tb-btn:hover {
  box-shadow:
    0 0 0 2px rgb(226 184 77 / 25%),
    0 10px 24px rgb(226 184 77 / 25%);
  filter: brightness(1.05);
}

.tb-btn:active {
  transform: translateY(1px);
}

.tb-ghost-btn {
  padding: 10px 14px;
  color: var(--sb-gold-strong);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--sb-gold);
  border-radius: 10px;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.tb-ghost-btn:hover {
  background: rgb(226 184 77 / 8%);
  box-shadow: inset 0 0 0 1px rgb(226 184 77 / 18%);
}

/* === Result wrappers === */
.tb-result {
  display: block;
  padding: 10px 12px;
  margin-top: 10px;
  line-height: 1.55;
  color: var(--sb-text);
  white-space: pre-wrap;
  background: rgb(0 0 0 / 14%);
  border: 1px dashed var(--sb-border);
  border-radius: 10px;
}

/* Traps: render multi-line nicely */
#trapResult {
  white-space: normal;
}

#trapResult .tb-line {
  margin: 2px 0;
}

#trapResult .tb-label {
  margin-right: 4px;
  font-weight: 800;
}

/* Divider image */
.divider-image {
  display: block !important;
  width: min(680px, 60%);
  height: auto;
  margin: 0 auto clamp(8px, 2.4vw, 20px);
}

/* Lists inside results */
#treasureResult,
#quirkResult {
  white-space: normal;
}

.tb-result ul {
  padding: 0;
  margin: 6px 0 0 1.1rem;
}

.tb-result li {
  margin: 2px 0;
}

/* === Key/Value grid === */
.tb-kv {
  display: grid;
  grid-template-columns: minmax(12rem, 22rem) 1fr;
  gap: 6px 12px;
  margin: 2px 0;
}

.tb-kv .k {
  margin-right: 6px;
  font-weight: 800;
}

/* === Tables === */
.tb-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.tb-table thead th {
  font-weight: 900;
  color: var(--sb-gold-strong);
  text-align: left;
}

.tb-table th,
.tb-table td {
  padding: 6px 8px;
  border-bottom: 1px dashed var(--sb-border);
}

.tb-table td {
  vertical-align: top;
}

/* Blueprint detail table: keep cost visible and right-aligned */
#bpDetail .tb-table {
  width: 100%;
  table-layout: fixed;
}

#bpDetail .tb-table col.col-ing {
  width: 60%;
}

#bpDetail .tb-table col.col-qty {
  width: 6ch;
}

#bpDetail .tb-table col.col-unit {
  width: 10ch;
}

#bpDetail .tb-table col.col-badges {
  width: auto;
}

/* shrink-to-content */
#bpDetail .tb-table th.col-cost,
#bpDetail .tb-table td.col-cost {
  padding-right: 1rem;
  text-align: right;
  white-space: nowrap;
}

#bpDetail .tb-table th.col-qty,
#bpDetail .tb-table td.col-qty {
  text-align: center;
}

.tb-table .tb-coins {
  margin-top: 2px;
}

.tb-table .tb-detail-name {
  margin: 0 0 2px;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
}

.tb-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Segments */
.tb-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tb-segbtn[aria-pressed='true'] {
  outline: 2px solid var(--sb-gold-strong);
  filter: saturate(1.2) brightness(2);
}

/* Detail header */
.tb-detail-header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2px;
}

.tb-detail-name {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

/* KV (compact variant) */
.tb-kv {
  display: grid;
  gap: 4px;
}

.tb-kv-row {
  display: contents;
  gap: 8px;
  text-align: right;
  opacity: 70%;
}

.tb-kv-key {
  width: 40%;
  opacity: 80%;
}

.tb-kv-val {
  white-space: pre-wrap;
}

/* Coins */
.tb-coins {
  margin-left: 6px;
  font-size: 12px;
  opacity: 70%;
}

.tb-table tbody tr.is-selected {
  filter: brightness(2);
}

.tb-table td:nth-child(1) {
  width: 44%;
}

.tb-table td:nth-child(2) {
  width: 26%;
}

.tb-table td:nth-child(3),
.tb-table td:nth-child(4) {
  width: 15%;
}

/* === Shop detail === */
#shopDetail {
  padding: 0;
}

.tb-detail {
  display: grid;
  gap: 10px;
  max-width: 56rem;
  margin-inline: auto;
}

#shopDetail.tb-result {
  padding: 14px;
  background: #161721;
  border-radius: 12px;
}

#shopDetail .tb-detail {
  display: grid;
  gap: 12px;
}

#shopDetail .tb-detail-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

#shopDetail .tb-detail-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.tb-detail-desc {
  margin: 2px 0 6px;
  opacity: 90%;
}

#shopDetail .tb-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

#shopDetail .tb-kv {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 6px 16px;
  align-items: baseline;
}

#shopDetail .tb-kv-row {
  display: contents;
}

#shopDetail .tb-kv-key {
  font-weight: 700;
  color: var(--sb-dim);
  opacity: 90%;
}

#shopDetail .tb-kv-val {
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: normal;
}

#shopDetail .tb-kv-val .coins {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
}

#shopDetail .hr {
  height: 1px;
  margin: 2px 0 6px;
  background: linear-gradient(90deg, transparent, var(--sb-border), transparent);
  border: 0;
}

#shopDetail .tb-detail-desc {
  margin-top: 4px;
  line-height: 1.46;
  opacity: 94%;
}

/* ===== SHOP TABLE — 60 / 20 / 20 ===== */
#shopResult {
  display: block;
  max-height: var(--shop-max, 360px);
  padding: 0 !important;
  margin: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#shopResult thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--sb-panel, #12131a);
  border-bottom: 1px solid var(--sb-border);
}

#shopResult .tb-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#shopResult .tb-table thead th,
#shopResult .tb-table td {
  padding: 6px 8px;
  line-height: 1.25;
  vertical-align: top;
  border-bottom: 1px dashed var(--sb-border);
}

#shopResult .tb-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  font-weight: 900;
  color: var(--sb-gold-strong);
  text-align: left;
  background: var(--sb-panel, #12131a);
  border-bottom: 1px solid var(--sb-border);
}

/* Column widths */
#shopResult .tb-table td.col-name {
  width: 60%;
}

#shopResult .tb-table td.col-base {
  width: 20%;
}

#shopResult .tb-table td.col-adjusted {
  width: 20%;
}

/* Price alignment */
#shopResult .tb-table td.col-base,
#shopResult .tb-table td.col-adjusted {
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

#shopResult .tb-table td.col-base .tb-coins,
#shopResult .tb-table td.col-adjusted .tb-coins {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  margin-left: 8px;
  white-space: normal;
}

/* Name + badges on one line */
#shopResult .tb-table .name-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

#shopResult .tb-table .tb-detail-name {
  margin: 0;
  font: inherit;
  font-weight: 700;
  line-height: 1.22;
}

#shopResult .tb-table .tb-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

#shopResult .tb-table tbody tr:last-child td {
  border-bottom: 0;
}

/* === Shop privacy === */
.tb-privacy {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.tb-privacy-label {
  font-size: 0.9rem;
  opacity: 80%;
}

.tb-privacy-status {
  margin-left: 0.5rem;
  opacity: 75%;
}

.tb-privacy-slider {
  width: 72px;
  height: 28px;
  appearance: none;
  background: transparent;
}

/* Track */
.tb-privacy-slider::-webkit-slider-runnable-track {
  height: 28px;
  background: linear-gradient(90deg, #3aa655 0 50%, #3aa655 50% 100%);
  border-radius: 999px;
}

.tb-privacy-slider::-moz-range-track {
  height: 28px;
  background: linear-gradient(90deg, #3aa655 0 50%, #3aa655 50% 100%);
  border-radius: 999px;
}

/* Thumb */
.tb-privacy-slider::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: 1px;
  appearance: none;
  background: #fff;
  border: 2px solid rgb(0 0 0 / 15%);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

.tb-privacy-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  background: #fff;
  border: 2px solid rgb(0 0 0 / 15%);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

.tb-privacy-slider:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* ===========================
   Forge Cheat Sheet
   =========================== */
#forgeSheet.tb-result {
  padding: 8px 10px;
}

#forgeSheet .forge {
  display: grid;
  gap: 10px;
  line-height: 1.46;
}

#forgeSheet .forge-section {
  display: grid;
  gap: 4px;
}

#forgeSheet .forge-h {
  margin: 2px 0 6px !important;
  font-weight: 900;
  color: var(--sb-gold-strong);
  letter-spacing: 0.2px;
}

#forgeSheet .forge-p,
#forgeSheet p {
  margin: 0;
  text-align: left !important;
  text-justify: auto !important;
  opacity: 92%;
}

#forgeSheet .forge-list {
  display: grid !important;
  gap: 4px !important;
  padding: 0 0 0 1rem !important;
  margin: 0 !important;
  list-style: disc outside;
}

#forgeSheet .forge-list>li {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.46;
}

#forgeSheet .forge-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 16px;
  align-items: start;
}

@media (width >=960px) {
  #forgeSheet .forge-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

#forgeSheet .forge-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

#forgeSheet .forge-tool {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: 4px;
  padding-block: 6px;
  padding-inline: 10px;
  background: color-mix(in oklab, var(--sb-panel2) 85%, black);
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

#forgeSheet .forge-tool-title {
  margin: 0;
  font-weight: 800;
  color: var(--sb-gold-strong);
}

#forgeSheet .forge-tool-desc {
  margin: 0;
  font-size: 0.92rem;
  text-align: left;
  opacity: 88%;
}

#forgeSheet .forge-table {
  width: 100%;
  border-collapse: collapse;
}

#forgeSheet .forge-table thead th {
  font-weight: 900;
}

#forgeSheet .forge-table th,
#forgeSheet .forge-table td {
  padding: 4px 6px;
}

#forgeSheet .forge-table td:first-child,
#forgeSheet .forge-table th:first-child {
  white-space: nowrap;
}

#forgeSheet .forge-table td:nth-child(2),
#forgeSheet .forge-table th:nth-child(2),
#forgeSheet .forge-table td:nth-child(3),
#forgeSheet .forge-table th:nth-child(3) {
  text-align: right;
}

#forgeSheet .hr {
  height: 1px;
  margin: 4px 0;
  background: linear-gradient(90deg, transparent, var(--sb-border), transparent);
  border: 0;
}

#forgeSheet .forge-gen {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px;
  background: color-mix(in oklab, var(--sb-panel2) 85%, black);
  border: 1px solid var(--sb-border);
  border-radius: 12px;
}

#forgeSheet .forge-gen-title {
  font-weight: 900;
  color: var(--sb-gold-strong);
  letter-spacing: 0.2px;
}

#forgeSheet .forge-gen-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#forgeSheet .forge-chip {
  padding: 6px 10px;
  font-weight: 700;
  color: var(--sb-gold-strong);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--sb-gold);
  border-radius: 999px;
}

#forgeSheet .forge-chip:hover {
  background: rgb(226 184 77 / 8%);
  box-shadow: inset 0 0 0 1px rgb(226 184 77 / 18%);
}

#forgeSheet .forge-gen-out {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}

#forgeSheet .forge-pill {
  padding: 4px 8px;
  font-size: 0.92rem;
  border: 1px dashed var(--sb-border);
  border-radius: 999px;
  opacity: 95%;
}

/* Options dropdown */
#preset-list {
  z-index: 20;
  box-shadow: 0 6px 18px rgb(0 0 0 / 35%);
}

#preset-list .tb-option:hover,
#preset-list .tb-option:focus {
  outline: none;
  filter: brightness(1.1);
}

/* NPC — role */
.tb-badge.npc-role {
  color: #fff;
  background: #5b2c83;
  border-color: #e0c8ff;
}

/* NPC — alignment (base + variants) */
.tb-badge.npc-align {
  color: #cfe3ff;
  background: #12151d;
  border-color: #3c6fb8;
}

.tb-badge.npc-align.good {
  color: #fff;
  background: #2c8a5f;
  border-color: #cfe9cf;
}

.tb-badge.npc-align.neutral {
  color: #cfd3da;
  background: #3b4758;
  border-color: #6b707c;
}

.tb-badge.npc-align.evil {
  color: #ffe2e2;
  background: #7e0c23;
  border-color: #d28b99;
}

/* Optional gender variants (if you want them) */
.tb-badge.npc-gender.male {
  color: #fff;
  background: #1f3a93;
  border-color: #8fb2ff;
}

.tb-badge.npc-gender.female {
  color: #fff;
  background: #7a1f6f;
  border-color: #f0b5ff;
}

.tb-badge.npc-race {
  color: #36b761;
  background: #7a1f6f;
  border-color: #068021;
}

/* Humans */
.tb-badge.npc-race.human {
  color: #e6eef8;
  background: #2c3e50;
  border: 1px solid #3b536b;
}

/* Elves */
.tb-badge.npc-race.elf {
  color: #d9f2e3;
  background: #1f5a3c;
  border: 1px solid #2f7a56;
}

/* Dwarves */
.tb-badge.npc-race.dwarf {
  color: #f3e3cf;
  background: #5a3b1f;
  border: 1px solid #7a552f;
}

/* Halflings */
.tb-badge.npc-race.halfling {
  color: #f0e6f7;
  background: #4b2c5e;
  border: 1px solid #6b3f86;
}

/* Gnomes */
.tb-badge.npc-race.gnome {
  color: #e6f0fa;
  background: #2f4a6b;
  border: 1px solid #3f6a9b;
}

/* Half-elf / Half-orc (hyphenated!) */
.tb-badge.npc-race.half-elf {
  color: #d9f2ea;
  background: #244d3f;
  border: 1px solid #31725b;
}

.tb-badge.npc-race.half-orc {
  color: #edf6d9;
  background: #3c4d24;
  border: 1px solid #587231;
}

/* Tieflings */
.tb-badge.npc-race.tiefling {
  color: #f8dee3;
  background: #5a2130;
  border: 1px solid #7a2e43;
}

/* Dragonborn */
.tb-badge.npc-race.dragonborn {
  color: #e4ebfb;
  background: #2a3b6e;
  border: 1px solid #3c57a3;
}

/* (Optional) Kenku, since inns may produce them */
.tb-badge.npc-race.kenku {
  color: #f0f0f0;
  background: #333;
  border: 1px solid #4a4a4a;
}

/* ===========================
   NPC generator (scoped)
   =========================== */
#npc-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 0.6rem;
  align-items: start;
}

@media (width <=680px) {
  #npc-controls {
    grid-template-columns: 1fr;
  }
}

#npc-panel .tb-combobox {
  position: relative;
  display: block;
}

#npc-panel .tb-combobox .tb-input {
  padding-right: 36px;
}

#npc-panel .tb-input {
  display: block;
  width: 100%;
}

#npc-panel .tb-list {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 20;
  display: none;
  max-height: 240px;
  overflow-y: auto;
  background: #111;
  border: 1px solid rgb(255 255 255 / 12%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}

#npc-panel .tb-option {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}

#npc-panel .tb-option:hover,
#npc-panel .tb-option:focus {
  outline: none;
  background: rgb(255 255 255 / 6%);
}

#npc-pretty.tb-result {
  padding: 8px 10px;
  margin: 8px 0 0;
}

#npc-pretty .npc-card {
  margin: 0;
  line-height: 1.28;
}

#npc-pretty .npc-card * {
  box-sizing: border-box;
}

#npc-pretty .npc-card h2,
#npc-pretty .npc-card h2,
#npc-pretty .npc-card h3,
#npc-pretty .npc-card h3,
#npc-pretty .npc-card p,
#npc-pretty .npc-card ul,
#npc-pretty .npc-card li,
#npc-pretty .npc-card blockquote {
  margin: 0;
}

#npc-pretty .npc-header {
  margin-bottom: 0.22rem;
}

#npc-pretty .npc-name {
  font-size: 1.06rem;
  font-weight: 700;
}

#npc-pretty .npc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.12rem;
}

#npc-pretty .npc-card .tb-badge {
  padding: 0.08rem 0.4rem;
  font-size: 0.84em;
}

#npc-pretty .npc-meta {
  margin: 0.12rem 0 0.24rem;
}

#npc-pretty .npc-meta .row {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 0.6rem;
  align-items: baseline;
  padding: 0.03rem 0;
}

#npc-pretty .npc-meta .k {
  font-weight: 700;
}

#npc-pretty .npc-hooks {
  margin: 0.22rem 0 0.18rem;
}

#npc-pretty .npc-hooks h3 {
  margin-bottom: 0.14rem;
  font-size: 0.92rem;
  font-weight: 700;
}

#npc-pretty .npc-hooks .hooks {
  padding-left: 0.9rem;
  list-style: disc;
}

#npc-pretty .npc-hooks .hooks li {
  margin: 0.06rem 0;
  line-height: 1.28;
}

#npc-pretty .npc-opener {
  padding: 0.32rem 0.56rem;
  margin: 0.26rem 0 0;
  background: rgb(255 255 255 / 6%);
  border-left: 2px solid currentcolor;
  border-radius: 0.32rem;
  opacity: 92%;
}

#npc-panel #npc-pretty {
  padding: 8px 10px;
  margin-top: 8px;
  line-height: 1.32;
  white-space: normal;
}

#npc-panel #npc-pretty .npc-card {
  line-height: 1.28;
}

#npc-panel #npc-pretty .npc-card h2,
#npc-panel #npc-pretty .npc-card h2,
#npc-panel #npc-pretty .npc-card h3,
#npc-panel #npc-pretty .npc-card h3,
#npc-panel #npc-pretty .npc-card p,
#npc-panel #npc-pretty .npc-card ul,
#npc-panel #npc-pretty .npc-card li,
#npc-panel #npc-pretty .npc-card blockquote {
  margin: 0;
}

#npc-panel #npc-pretty .npc-header {
  margin-bottom: 0.2rem;
}

#npc-panel #npc-pretty .npc-name {
  font-size: 1.06rem;
  font-weight: 700;
}

#npc-panel #npc-pretty .npc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.12rem;
}

#npc-panel #npc-pretty .npc-card .tb-badge {
  padding: 0.08rem 0.4rem;
  font-size: 0.84em;
}

#npc-panel #npc-pretty .npc-meta {
  margin: 0.1rem 0 0.22rem;
}

#npc-panel #npc-pretty .npc-meta .row {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 0.6rem;
  align-items: baseline;
  padding: 0.02rem 0;
}

#npc-panel #npc-pretty .npc-meta .k {
  font-weight: 700;
}

#npc-panel #npc-pretty .npc-hooks {
  margin: 0.2rem 0 0.16rem;
}

#npc-panel #npc-pretty .npc-hooks h3 {
  margin-bottom: 0.12rem;
  font-size: 0.92rem;
  font-weight: 700;
}

#npc-panel #npc-pretty .npc-hooks .hooks {
  padding-left: 0.9rem;
  list-style: disc;
}

#npc-panel #npc-pretty .npc-hooks .hooks li {
  margin: 0.05rem 0;
  line-height: 1.28;
}

#npc-panel #npc-pretty .npc-opener {
  padding: 0.3rem 0.56rem;
  margin: 0.24rem 0 0;
  background: rgb(255 255 255 / 6%);
  border-left: 2px solid currentcolor;
  border-radius: 0.32rem;
  opacity: 92%;
}

/* Clear button in inputs */
#npc-panel .tb-combobox .tb-clear {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 21;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  color: var(--sb-dim);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 6px;
  transform: translateY(-50%);
}

#npc-panel .tb-combobox .tb-clear:hover,
#npc-panel .tb-combobox .tb-clear:focus-visible {
  color: var(--sb-text);
  outline: none;
  background: rgb(255 255 255 / 8%);
}

@supports (-webkit-touch-callout: none) {
  #npc-panel .tb-combobox .tb-clear {
    line-height: 1;
  }
}

/* ===========================
   Treasure — loot lines & coins
   =========================== */
.tb-result .loot-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  margin: 2px 0 2px 10px;
  line-height: 1.45;
  white-space: normal;
}

.tb-result .loot-line .tb-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  order: 2;
}

.tb-result .loot-line .coins {
  order: 3;
  margin-left: auto;
}

/* Coin chips */
:root {
  --coin-pp: #b8e3ff;
  --coin-gp: var(--sb-gold-strong, #e1b84d);
  --coin-sp: #c9c9d6;
  --coin-cp: #c88a55;
}

.coins {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: 6px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  opacity: 95%;
}

.coin {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  line-height: 1.2;
  letter-spacing: 0.1px;
  background: color-mix(in oklab, var(--sb-panel2) 78%, #000);
  border: 1px solid var(--sb-border);
  border-radius: 999px;
}

.coin-pp {
  color: var(--coin-pp);
  border-color: color-mix(in oklab, var(--coin-pp) 50%, #000);
}

.coin-gp {
  color: var(--coin-gp);
  border-color: color-mix(in oklab, var(--coin-gp) 55%, #000);
}

.coin-sp {
  color: var(--coin-sp);
  border-color: color-mix(in oklab, var(--coin-sp) 45%, #000);
}

.coin-cp {
  color: var(--coin-cp);
  border-color: color-mix(in oklab, var(--coin-cp) 45%, #000);
}

.coins-price .coin {
  opacity: 95%;
}

.coins-sell .coin {
  opacity: 85%;
  filter: saturate(0.9);
}

@media (width <=560px) {
  .tb-result .loot-line .coins {
    margin-top: 2px;
  }
}

/* ===========================
   SHOP — controls layout
   =========================== */
.shop-controls {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) minmax(160px, auto);
  gap: 16px 24px;
  align-items: start;
  margin-bottom: 8px;
}

.shop-controls .col-1,
.shop-controls .col-2 {
  display: grid;
  gap: 10px;
}

.shop-controls .haggle-block {
  display: grid;
  gap: 8px;
}

.shop-controls .col-3 {
  grid-column: 3;
  place-self: end end;
}

.tb-coins-toggle {
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
  place-self: end end;
  align-items: center;
  margin: 0 0 0 auto;
  white-space: nowrap;
}

.tb-coins-toggle input {
  margin: 0;
}

@media (width <=1100px) {
  .shop-controls {
    grid-template-columns: 1fr;
  }

  .shop-controls .col-3 {
    place-self: start start;
    margin-top: 4px;
  }
}

/* ===========================
   BLUEPRINTS — list & detail spacing
   =========================== */
#bpResult.tb-result {
  line-height: 1.35;
  white-space: normal;
}

#bpList {
  max-height: 22rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#bpList .tb-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

#bpList .tb-list-item {
  display: block;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px dashed var(--sb-border);
}

#bpList .tb-list-item:last-child {
  border-bottom: 0;
}

#bpList .tb-list-item[aria-selected='true'] {
  outline: 2px solid var(--sb-gold-strong);
  border-radius: 0.25rem;
}

#bpDetail.tb-result {
  line-height: 1.35;
  white-space: normal;
}

#bpDetail .tb-kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 12px;
}

#bpDetail .tb-table th,
#bpDetail .tb-table td {
  padding: 6px 8px;
}

#bpDetail .tb-table col.col-ing {
  width: 34%;
}

#bpDetail .tb-table col.col-qty {
  width: 6ch;
}

#bpDetail .tb-table col.col-unit {
  width: 10ch;
}

#bpDetail .tb-table col.col-badges {
  width: auto;
}

#bpDetail .tb-table th.col-cost,
#bpDetail .tb-table td.col-cost {
  padding-right: 1rem;
  text-align: right;
  white-space: nowrap;
}

#bpDetail .tb-table th.col-qty,
#bpDetail .tb-table td.col-qty {
  text-align: center;
}

/* Make badges visible in treasure lists */
.tb-list .tb-badges {
  display: inline-flex;
  gap: 6px;
  margin-left: 0.5rem;

  /* space after the name */
  vertical-align: middle;
}

.tb-list .tb-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.9rem;
  color: var(--badge-fg, #ddd);

  /* pick colors you like, or let type-specific classes override */
  background: var(--badge-bg, rgb(255 255 255 / 6%));
  border: 1px solid var(--badge-border, #444);
  border-radius: 999px;
}

/* ============================================================
   BADGES — Unified (final)
   ============================================================ */

/* Base pill */
.tb-badge {
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1.15;
  color: var(--sb-dim);
  text-transform: none;
  background: color-mix(in oklab, var(--sb-panel2) 85%, #000);
  border: 1px solid color-mix(in oklab, var(--sb-border) 80%, #000);
  border-radius: 999px;
}

/* One rule for layout */
.tb-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Rarity (outline) */
.tb-badge.rarity.common {
  color: #cfd3da;
  border-color: #6b707c;
}

.tb-badge.rarity.uncommon {
  color: #4cc98a;
  border-color: #2c8a5f;
}

.tb-badge.rarity.rare {
  color: #5aa8ff;
  border-color: #3c6fb8;
}

.tb-badge.rarity.very.rare,
.tb-badge.rarity.very_rare,
.tb-badge.rarity.very-rare {
  color: #b888ff;
  border-color: #7a58c9;
}

.tb-badge.rarity.legendary {
  color: #ffb24d;
  border-color: #bf7a1f;
}

.tb-badge.rarity.artifact {
  color: #ff6b6b;
  border-color: #b53f3f;
}

.tb-badge.rarity.unique {
  color: #ffd86b;
  border-color: #b38b2c;
}

/* Attunement / Consumable */
.tb-badge.attune.attune-true {
  color: #2e8b57;
  background: #fff;
  border-color: #2e8b57;
}

.tb-badge.attune.attune-false {
  color: #d64545;
  background: #fff;
  border-color: #d64545;
}

.tb-badge.consumable {
  color: #fff;
  background: #2c8a5f;
  border-color: #fff;
}

/* Publication (SRD only shown) */
.tb-badge.pub.pub-srd {
  color: #0f2a5f;
  background: #fff;
  border-color: #0f2a5f;
}

/* Illicit */
.tb-badge.illicit {
  color: #f2b08b;
  border-color: #a8653b;
}

/* Ingredient types (blueprints detail) */
.tb-badge.herb {
  color: #fff;
  background: #2e7d32;
  border-color: #cfe9cf;
}

.tb-badge.packs {
  color: #fff;
  background: #8b4dc0;
  border-color: #e0c8ff;
}

.tb-badge.containers {
  color: #fff;
  background: #290746;
  border-color: #e0c8ff;
}

.tb-badge.goods {
  color: #228bae;
  background: #290746;
  border-color: #e0c8ff;
}

.tb-badge.art {
  color: #20f2d9;
  background: #290746;
  border-color: #e0c8ff;
}

.tb-badge.ammunition {
  color: #20f2d9;
  background: #7e0c23;
  border-color: #ded3ec;
}

.tb-badge.foci.and.symbols {
  color: #20f282;
  background: #7e0c23;
  border-color: #ded3ec;
}

.tb-badge.poisons {
  color: #df113d;
  background: #1be7a0;
  border-color: #ded3ec;
}

.tb-badge.performing {
  color: #df113d;
  background: #cdf30d;
  border-color: #ded3ec;
}

.tb-badge.mounts {
  color: #faf9f9;
  background: #574426;
  border-color: #ded3ec;
}

.tb-badge.gems,
.tb-badge.gem {
  color: #fff;
  background: #5b2c83;
  border-color: #e0c8ff;
}

.tb-badge.alchemical {
  color: #fff;
  background: #22577a;
  border-color: #bfe6ff;
}

/* Core item types (blue slot look) */
.tb-badge.weapon,
.tb-badge.weapons,
.tb-badge.armor,
.tb-badge.shield,
.tb-badge.ring,
.tb-badge.wand,
.tb-badge.staff,
.tb-badge.rod,
.tb-badge.ammo,
.tb-badge.wondrous {
  color: #fff;
  background: #2b6cb0;
  border-color: #fff;
}

/* Other catalog types (neutral solids; tweak if desired) */
.tb-badge.potion {
  color: #fff;
  background: #6b46c1;
  border-color: #fff;
}

.tb-badge.clothing {
  color: #ea14aa;
  background: #eeedf1;
  border-color: #000;
}

.tb-badge.tools {
  color: #371b2e;
  background: #eeedf1;
  border-color: #000;
}

.tb-badge.vehicles {
  color: #3324a5;
  background: #eeedf1;
  border-color: #000;
}

.tb-badge.scrolls {
  color: #fff;
  background: #975a16;
  border-color: #fff;
}

.tb-badge.tool {
  color: #fff;
  background: #2c5282;
  border-color: #fff;
}

.tb-badge.trade_good {
  color: #fff;
  background: #805ad5;
  border-color: #fff;
}

.tb-badge.gear {
  color: #fff;
  background: #2d3748;
  border-color: #fff;
}

.tb-badge.material {
  color: #fff;
  background: #22577a;
  border-color: #fff;
}

.tb-badge.book,
.tb-badge.map,
.tb-badge.container,
.tb-badge.art_object,
.tb-badge.writing {
  color: #c9c9d6;
  background: rgb(255 255 255 / 6%);
  border-color: #6f6f7a;
}

/* Core reagent roles */
.tb-badge.base {
  color: #fff;
  background: #394257;
  border-color: #fff;
}

/* Substances / materials */
.tb-badge.powder {
  color: #d7c2a3;
  background: rgb(120 90 40 / 18%);
  border-color: #8d6a3a;
}

.tb-badge.metal {
  color: #9bd;
  background: rgb(80 100 130 / 22%);
  border-color: #5a7a9a;
}

.tb-badge.mineral {
  color: #cfe3ff;
  background: rgb(30 60 90 / 20%);
  border-color: #466a92;
}

.tb-badge.glass {
  color: #9bd7ff;
  background: rgb(60 120 160 / 20%);
  border-color: #5a9cc6;
}

.tb-badge.resin {
  color: #f6d07a;
  background: rgb(80 60 20 / 22%);
  border-color: #b38b2c;
}

.tb-badge.wax {
  color: #eedc8a;
  background: rgb(80 60 20 / 18%);
  border-color: #b38b2c;
}

.tb-badge.oil {
  color: #cbbdff;
  background: rgb(40 30 70 / 28%);
  border-color: #6b5fb5;
}

.tb-badge.salt {
  color: #cfe3ff;
  background: rgb(30 60 90 / 20%);
  border-color: #466a92;
}

.tb-badge.carbon {
  color: #8e8e97;
  background: rgb(50 50 60 / 22%);
  border-color: #5b5b66;
}

.tb-badge.ash {
  color: #c9c9d6;
  background: rgb(80 80 100 / 18%);
  border-color: #6f6f7a;
}

.tb-badge.earth {
  color: #d5b08a;
  background: rgb(90 70 40 / 18%);
  border-color: #8d6a3a;
}

/* Organic / biological */
.tb-badge.organic {
  color: #a7d7c9;
  background: rgb(20 80 60 / 22%);
  border-color: #2d6b5a;
}

.tb-badge.moss {
  color: #a7d7c9;
  background: rgb(20 80 60 / 20%);
  border-color: #2d6b5a;
}

.tb-badge.lichen {
  color: #cfe8ff;
  background: rgb(40 80 110 / 16%);
  border-color: #5a7ea6;
}

.tb-badge.silk {
  color: #f1f3f5;
  background: rgb(70 90 110 / 16%);
  border-color: #8aa3c0;
}

.tb-badge.avian {
  color: #cfe3ff;
  background: rgb(30 60 90 / 16%);
  border-color: #466a92;
}

.tb-badge.scale {
  color: #ffcc8a;
  background: rgb(120 60 20 / 22%);
  border-color: #a3631d;
}

.tb-badge.chitin {
  color: #ffcc8a;
  background: rgb(120 60 20 / 18%);
  border-color: #a3631d;
}

.tb-badge.horn {
  color: #d7c2a3;
  background: rgb(90 70 40 / 16%);
  border-color: #8d6a3a;
}

.tb-badge.hoof {
  color: #d7c2a3;
  background: rgb(90 70 40 / 16%);
  border-color: #8d6a3a;
}

.tb-badge.monster_part {
  color: #ffcc8a;
  background: rgb(120 60 20 / 25%);
  border-color: #a3631d;
}

/* Magical / planar themes */
.tb-badge.arcane {
  color: #cbbdff;
  background: rgb(40 40 80 / 22%);
  border-color: #6b5fb5;
}

.tb-badge.essence {
  color: #b888ff;
  background: rgb(70 40 120 / 20%);
  border-color: #7a58c9;
}

.tb-badge.ectoplasm {
  color: #cbbdff;
  background: rgb(60 50 100 / 22%);
  border-color: #6b5fb5;
}

.tb-badge.fey {
  color: #ff9bd7;
  background: rgb(120 50 90 / 20%);
  border-color: #a54b7d;
}

.tb-badge.elemental {
  color: #a6e3ff;
  background: rgb(60 100 160 / 16%);
  border-color: #5aa8ff;
}

.tb-badge.air {
  color: #cfe8ff;
  background: rgb(80 120 170 / 16%);
  border-color: #5a9bd6;
}

.tb-badge.fire {
  color: #e07a3a;
  background: rgb(140 60 20 / 22%);
  border-color: #a14a22;
}

.tb-badge.water {
  color: #8dd3ff;
  background: rgb(20 80 110 / 20%);
  border-color: #3d7cab;
}

.tb-badge.earthy {
  color: #d5b08a;
  background: rgb(90 70 40 / 18%);
  border-color: #8d6a3a;
}

.tb-badge.radiant {
  color: #f0c14b;
  background: rgb(180 140 40 / 18%);
  border-color: #b38b2c;
}

.tb-badge.necrotic {
  color: #cba3ff;
  background: rgb(60 40 90 / 26%);
  border-color: #7a58c9;
}

.tb-badge.frost {
  color: #8dd3ff;
  background: rgb(70 130 180 / 20%);
  border-color: #5aa8ff;
}

.tb-badge.lightning {
  color: #b4d3ff;
  background: rgb(60 90 160 / 20%);
  border-color: #6aa0ff;
}

.tb-badge.time {
  color: #f6e0a0;
  background: rgb(120 100 60 / 14%);
  border-color: #b38b2c;
}

/* Scribing helpers (used elsewhere but handy here too) */
.tb-badge.parchment {
  color: #f6e0a0;
  background: rgb(80 70 40 / 22%);
  border-color: #b38b2c;
}

.tb-badge.ink {
  color: #cbbdff;
  background: rgb(40 40 80 / 28%);
  border-color: #6b5fb5;
}

.tb-badge.reagent {
  color: #ffd86b;
  background: rgb(22 66 38 / 22%);
  border-color: #b38b2c;
  box-shadow: inset 0 0 0 1px rgb(255 216 107 / 6%);
}

/* Herb subtypes / toxin — add styles */
.tb-badge.enhancer {
  color: #9fd0ff;
  background: rgb(30 70 120 / 20%);
  border-color: #3c6fb8;
}

.tb-badge.medicinal {
  color: #a7e3b8;
  background: rgb(20 80 60 / 22%);
  border-color: #2d6b5a;
}

.tb-badge.toxin {
  color: #ff9b9b;
  background: rgb(140 30 30 / 18%);
  border-color: #a33;
}

.tb-badge.extra {
  color: #c8d0ff;
  background: rgb(100 120 255 / 15%);
  border: 1px solid rgb(100 120 255 / 35%);
}

/* INN / SERVICES */
.tb-badge.kind {
  color: #e6f0ff;
  background: #1f2a3a;
  border-color: #5a7ab5;
}

.tb-badge.kind.kind-inn {
  background: #2d3f5e;
}

.tb-badge.tone {
  color: #e6f0ff;
  background: #263244;
  border-color: #5a7ab5;
}

.tb-badge.inn-tag {
  color: #dfe7f2;
  background: #303b49;
  border-color: #6f8dbd;
}

.tb-badge.quality {
  color: #e6e6f0;
  background: #2d2f36;
  border-color: #6b6f7a;
}

.tb-badge.quality.quality-low,
.tb-badge.quality.quality-low-quality {
  background: #4a3a28;
}

.tb-badge.quality.quality-standard,
.tb-badge.quality.quality-standard-quality {
  background: #2d3b4a;
}

tb-badge.quality.quality-high,
.tb-badge.quality.quality-high-quality {
  background: #2c5e4a;
}

.tb-badge.model {
  color: #fff;
  background: #000;
  border-color: #5a728c;
}

.tb-badge.model.model-flat {
  color: #fff;
  background: #854f4f;
  border-color: #5a728c;
}

.tb-badge.model.model-per-person {
  color: #fff;
  background: #867a4e;
  border-color: #5a728c;
}

.tb-badge.model.model-per-meal {
  color: #fff;
  background: #7a854c;
  border-color: #5a728c;
}

.tb-badge.model.model-per-night {
  color: #fff;
  background: #56834a;
  border-color: #5a728c;
}

.tb-badge.model.model-per-hour {
  color: #fff;
  background: #39853c;
  border-color: #5a728c;
}

.tb-badge.model.model-per-day {
  color: #fff;
  background: #47817b;
  border-color: #5a728c;
}

.tb-badge.model.model-per-mile {
  color: #fff;
  background: #3e5376;
  border-color: #5a728c;
}

.tb-badge.model.model-per-animal-day {
  color: #fff;
  background: #433d89;
  border-color: #5a728c;
}

.tb-badge.model.model-per-page {
  color: #fff;
  background: #503f76;
  border-color: #5a728c;
}

.tb-badge.model.model-per-letter {
  color: #fff;
  background: #5b2d88;
  border-color: #5a728c;
}

.tb-badge.model.model-per-load {
  color: #fff;
  background: #a93ca0;
  border-color: #5a728c;
}

.tb-badge.illicit.tb-badge-warn {
  color: #fff;
  background: #daac15;
  border-color: #fff;
}

.tb-badge.count {
  color: #cfe3ff;
  background: #1b2230;
  border-color: #3c6fb8;
}

.tb-badge.type {
  color: #cfe3ff;
  background: #1b2230;
  border-color: #3c6fb8;
}

.tb-badge.type.type-inn {
  color: #c5d816;
  background: #1b2230;
  border-color: #3c6fb8;
}

.tb-badge.type.type-personal_services {
  color: #d88e16;
  background: #1b2230;
  border-color: #3c6fb8;
}

.tb-badge.type.type-public_services {
  color: #eb5a0c;
  background: #1b2230;
  border-color: #3c6fb8;
}

.tb-badge.type.type-transport {
  color: #29d00c;
  background: #1b2230;
  border-color: #3c6fb8;
}

.tb-badge.type.type-professional {
  color: #16d88e;
  background: #1b2230;
  border-color: #3c6fb8;
}

.tb-badge.type.type-magical {
  color: #0fc3ae;
  background: #1b2230;
  border-color: #3c6fb8;
}

.tb-badge.type.type-security {
  color: #0f4bc3;
  background: #1b2230;
  border-color: #3c6fb8;
}

.tb-badge.type.type-criminal {
  color: #f2b08b;
  background: #1b2230;
  border-color: #a8653b;
}

.tb-badge.type.type-banking {
  color: #d96fde;
  background: #1b2230;
  border-color: #a8653b;
}

.tb-badge.type.type-bureaucratic {
  color: #da145d;
  background: #1b2230;
  border-color: #a8653b;
}

.tb-badge.yield {
  color: #dbe7ff;
  background: #222a35;
  border: 1px solid #10c7e0;
}

/* ===========================
   Trap layout wrappers
   =========================== */
.trap-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.trap-dcs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  margin-top: 0.5rem;
}

/* ===========================
   Color direction you requested
   =========================== */

/* LETHALITY — red scale, white text & border */
.tb-badge.trap-lethality {
  color: #fff;
  border-color: rgb(255 255 255 / 80%);
}

.tb-badge.trap-lethality.lethality-low {
  background: #f87171;
}

/* red-400 */
.tb-badge.trap-lethality.lethality-medium {
  background: #ef4444;
}

/* red-500 */
.tb-badge.trap-lethality.lethality-deadly {
  background: #b91c1c;
}

.tb-badge.trap-dc {
  color: #fff;
  border-color: transparent;
}

.tb-badge.trap-dc.dcv-8 {
  background: #22c55e;
}

/* green-600 */
.tb-badge.trap-dc.dcv-10 {
  background: #65a30d;
}

/* lime-700  */
.tb-badge.trap-dc.dcv-12 {
  background: #84cc16;
}

/* lime-500  */
.tb-badge.trap-dc.dcv-14 {
  background: #eab308;
}

/* yellow-500 */
.tb-badge.trap-dc.dcv-16 {
  background: #f59e0b;
}

/* amber-500  */
.tb-badge.trap-dc.dcv-18 {
  background: #f97316;
}

/* orange-500 */
.tb-badge.trap-dc.dcv-20 {
  background: #ef4444;
}

/* red-500    */
.tb-badge.trap-dc.dcv-22 {
  background: #dc2626;
}

/* red-600    */
.tb-badge.trap-dc.dcv-24 {
  background: #b91c1c;
}

/* red-700    */
.tb-badge.trap-dc.dcv-26 {
  background: #7f1d1d;
}

.tb-badge.trap-env {
  color: #1e3a8a;
  background: #f3c3ec;
  border-color: #bfdbfe;
}

.tb-badge.trap-area {
  color: #1e3a8a;
  background: #ee67da;
  border-color: #bfdbfe;
}

.tb-badge.trap-utility {
  color: #c3ceee;
  background: #e546cd;
  border-color: #bfdbfe;
}

/* TRAP TYPE — blue scale */
.tb-badge.trap-type {
  color: #075985;
  background: #e0f2fe;
  border-color: #7dd3fc;
}

/* sky-100 */
.tb-badge.trap-type.type-mechanical {
  color: #1e3a8a;
  background: #dbeafe;
  border-color: #bfdbfe;
}

/* blue-100 */
.tb-badge.trap-type.type-magical {
  color: #1e3a8a;
  background: #dbeafe;
  border-color: #bfdbfe;
}

/* DAMAGE TYPE — orange scale (unified for all types) */
.tb-badge.trap-dmg {
  color: #7c2d12;
  background: #fed7aa;
  border-color: #fdba74;
}

/* orange-200/300 */

/* SAVE pills stay neutral; DC bar pills are labeled already */
.tb-badge.trap-save {
  color: #0f172a;
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* Row layout: text left, pills at the end */
.trap-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: baseline;
  margin: 0.15rem 0 0.35rem;
}

.trap-row .row-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* <= change to this */
.trap-row .row-pills {
  display: inline-flex;
  flex: 0 1 40%;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
  margin-left: auto;
}

.trap-footer-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.trap-line {
  margin: 0.25rem 0 0.45rem;
  line-height: 1.45;
}

.trap-line b {
  margin-right: 0.35rem;
}

.trap-line .line-pills {
  display: inline-flex;
  gap: 0.35rem;
  vertical-align: baseline;
}

/* Small screens: stack pills under the text */
@media (width <=720px) {
  .trap-row .row-text {
    flex: 1 0 100%;
    min-width: 0;
  }

  .trap-row .row-pills {
    flex: 1 0 100%;
    justify-content: flex-start;
  }
}

/* encounter badge variants (add to your main stylesheet if desired) */
.tb-badge.enc-zone {
  background: #1e293b;
}

.tb-badge.enc-risk {
  background: #334155;
}

.tb-badge.enc-time {
  background: #475569;
}

.tb-badge.enc-tag {
  background: #6b7280;
}

/* risk severity overrides */
.tb-badge.risk-safe {
  color: #fff;
  background: #16a34a;
}

.tb-badge.risk-low {
  color: #0b0f0f;
  background: #22c55e;
}

.tb-badge.risk-moderate {
  color: #111;
  background: #f59e0b;
}

.tb-badge.risk-high {
  color: #fff;
  background: #ef4444;
}

.tb-badge.risk-deadly {
  color: #fff;
  background: #991b1b;
}

/* ========== Door pills (extend .tb-badge) ========== */

/* challenge */

.tb-badge.door-chal {
  color: #b23f11ff;
  background: #f6e602ff;
  border-color: #b23f11ff;
}

/* Material */
.tb-badge.door-mat {
  color: #f9fafb;
  background: #374151;
  border-color: white;
}

/* optional per-material tints */
.tb-badge.mat-softwood {
  background: #065f46;
}

.tb-badge.mat-reinforced-softwood {
  background: #0f766e;
}

.tb-badge.mat-hardwood {
  background: #166534;
}

.tb-badge.mat-reinforced-hardwood {
  background: #14532d;
}

.tb-badge.mat-iron {
  background: #334155;
}

.tb-badge.mat-steel {
  background: #1f2937;
}

.tb-badge.mat-stone {
  background: #4b5563;
}

.tb-badge.mat-adamantine {
  background: #6b21a8;
}

/* Hardness (HP) */
.tb-badge.door-hp {
  color: #f9fafb;
  background: #1e3a8a;
}

/* Toughness (Break DC) */
.tb-badge.door-breakdc,
.tb-badge.door-lockdc,
.tb-badge.door-pickdc {
  color: #111827;
  background: #7dd3fc;
}

/* tone steps (match your dcToneClass e.g., dcv-8,10,...,26) */
.tb-badge.dcv-8,
.tb-badge.dcv-10 {
  filter: brightness(1.05);
}

.tb-badge.dcv-12,
.tb-badge.dcv-14 {
  filter: brightness(1);
}

.tb-badge.dcv-16,
.tb-badge.dcv-18 {
  filter: brightness(0.95);
}

.tb-badge.dcv-20,
.tb-badge.dcv-22 {
  filter: brightness(0.9);
}

.tb-badge.dcv-24,
.tb-badge.dcv-26 {
  filter: brightness(0.85);
}

/* Lock */
.tb-badge.door-lock {
  color: white;
  background: #075985;
  border-color: white;
}

/* lock types */
.tb-badge.lock-std-door-key {
  background: #3f3f46;
}

.tb-badge.lock-padlock {
  background: #4b5563;
}

.tb-badge.lock-deadbolt {
  background: #334155;
}

.tb-badge.lock-combination {
  background: #4c1d95;
}

.tb-badge.lock-puzzle-lock {
  background: #6d28d9;
}

.tb-badge.lock-arcane-seal {
  background: #7c3aed;
}

.tb-badge.lock-obstruction {
  background: #92400e;
}

.tb-badge.lock-no-lock {
  background: #475569;
}

/* Lock quality */
.tb-badge.door-quality {
  color: #f9fafb;
  background: #52525b;
}

.tb-badge.quality-common {
  background: #6b7280;
}

.tb-badge.quality-sturdy {
  background: #475569;
}

.tb-badge.quality-fine {
  background: #2563eb;
}

.tb-badge.quality-exquisite {
  background: #1d4ed8;
}

.tb-badge.quality-runic {
  background: #7c3aed;
}

/* Locked state + side */
.tb-badge.door-state.state-open {
  color: white;
  background-color: #068021;
  border-color: whitesmoke;
}

.tb-badge.door-state.state-closed-unlocked {
  color: white;
  background-color: greenyellow;
  border-color: whitesmoke;
}

.tb-badge.door-state.state-closed-locked {
  color: white;
  background-color: red;
  border-color: whitesmoke;
}

.tb-badge.door-state.state-ajar {
  color: white;
  background-color: orange;
  border-color: whitesmoke;
}

.tb-badge.door-state.state-obstructed {
  color: orange;
  background-color: red;
  border-color: whitesmoke;
}

.tb-badge.door-lockq {
  color: white;
  background-color: blueviolet;
  border-color: whitesmoke;
}

.tb-badge.door-side {
  color: white;
  background-color: #3562abff;
  border-color: whitesmoke;
}

.tb-badge.door-side {
  color: white;
  background-color: #3562abff;
  border-color: whitesmoke;
}

.tb-badge.door-pick.ok {
  color: white;
  background-color: #3562abff;
  border-color: whitesmoke;
}

.tb-badge.door-hingechip {
  color: white;
  background-color: #3562abff;
  border-color: whitesmoke;
}

.tb-badge.door-hingechip.hinge-noisy .hinge-jammed / .hinge-breaks .tb-badge.door-lockedfrom.side-this-side {
  background: #0f766e;
}

.tb-badge.door-lockedfrom.side-other-side {
  background: #0ea5e9;
}

/* Pickability + Pick DC */
.tb-badge.door-pick.pick-yes {
  color: #fff;
  background: #0d9488;
}

.tb-badge.door-pickdc.pick-impossible {
  color: #10c7e0;
  background: #7e0c23;
}

/* Trap & Damage */
.tb-badge.door-trap.trap-yes {
  color: #fff;
  background: #b45309;
}

/* warn */
.tb-badge.door-trap.trap-no {
  color: #f9fafb;
  background: #475569;
}

.tb-badge.door-damage.dmg-yes {
  color: #fff;
  background: #dc2626;
}

.tb-badge.door-damage.dmg-no {
  color: #fff;
  background: #15803d;
}

/* ========== Vertical layout helpers (optional) ========== */

.door-bracket {
  padding: 0 0.15rem;
  opacity: 70%;
}

/* Vertical door layout */
.door-vertical .door-line {
  margin: 0.3rem 0;
}

.door-vertical .door-line .tb-badge {
  margin-right: 0.25rem;
}

.door-bracket {
  padding: 0 0.15rem;
  opacity: 70%;
}

/* Put the #doorChallenge select below its label inside the .tb-grid */
#doorChallenge {
  /* a little breathing room under the label */
  display: block;
  grid-column: 1 / -1;

  /* start at column 1 and span the row → drops beneath label */
  justify-self: start;

  /* ensures it behaves like a block in case of resets */
  width: min(320px, 100%);

  /* align left within the grid */
  margin-top: 0.25rem;

  /* optional: keep it tidy */
}