/**
 * Tabular host — view-mode toggle + gallery/list/table renderers.
 * Used by any surface that opts into the tabular-with-view-modes capability.
 * Reuses the design vocabulary established for the Hub list/table views.
 *
 * Defensive token fallbacks mirror project-workspace.css.
 */

.th-host {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  /* Allow the host to shrink horizontally inside a flex parent — without
     this, the table's intrinsic min-content width refuses to compress and
     squeezes any sibling layout (e.g., the SAR pane's right drawer). */
  min-width: 0;
  width: 100%;
}

/* ── Header (view-mode toggle) ────────────────────────────── */

.th-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  border-bottom: 1px solid var(--s-color-border);
  flex-shrink: 0;
  background: var(--s-color-bg-app);
}

/* Actions cluster — cog + inline panel chrome buttons (popout, close).
   Sits to the right of the view-toggle in the host header. */
.th-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
}
.th-actions__btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  border-radius: var(--s-radius-1);
  padding: 0;
  transition:
    background 0.12s,
    color 0.12s;
}
.th-actions__btn:hover {
  color: var(--s-color-fg-primary);
  background: color-mix(
    in oklch,
    var(--s-color-bg-hover) 60%,
    transparent
  );
}
.th-actions__btn svg {
  width: 13px;
  height: 13px;
}
.th-actions__cog svg {
  width: 12px;
  height: 12px;
}

/* Structure depth toggle (table view) — 2D / 3D pair, segmented. */
.th-actions__depth {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-hair);
  padding: var(--s-space-hair);
  background: var(--s-color-bg-subtle);
  border-radius: var(--s-radius-1);
  margin-right: var(--s-space-tight-3);
}
.th-actions__depth-btn {
  width: auto;
  height: 22px;
  padding: 0 calc(var(--s-space-tight-3) + var(--s-space-twohair));
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  letter-spacing: 0.06em;
  font-weight: var(--s-font-weight-semibold);
  border-radius: var(--s-space-1);
}
.th-actions__depth-btn--active {
  background: var(--s-color-prominent-bg);
  color: var(--s-color-prominent-fg);
}

/* Stereo toggle — sits next to the mode pills. Active state is filled
   like the other active buttons; inactive (opaque off-state) is muted.
   When the mode is 3D, we apply --inactive to indicate that toggling
   stereo is a no-op until the user switches back to 2D. */
.th-actions__stereo-btn {
  width: auto;
  height: 22px;
  padding: 0 calc(var(--s-space-tight-3) + var(--s-space-twohair));
  margin-left: var(--s-space-tight-3);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  letter-spacing: 0.06em;
  font-weight: var(--s-font-weight-semibold);
  border-radius: var(--s-space-1);
  color: var(--s-color-fg-muted);
  background: transparent;
}
.th-actions__stereo-btn--on {
  color: var(--s-color-prominent-fg);
  background: var(--s-color-prominent-bg);
}
.th-actions__stereo-btn--inactive {
  opacity: 0.4;
}

/* Structure cell in table view. */
.th-td--structure {
  /* Width is set inline per-zoom-tier from tabular-host.js
     (tableThumbSize + 12px padding budget). Static fallback for
     surfaces that haven't migrated. */
  width: 62px;
  padding: var(--s-space-twohair);
  /* Center the square thumb vertically within rows whose height grows
     with multi-line content (e.g., wrapped notes). Without this the
     thumb top-aligns and reads as "not square" when the row is tall.
     Caitlin 2026-04-26. */
  vertical-align: middle;
  text-align: center;
}
.th-td__structure {
  /* Width + height are set inline from tabular-host.js per zoom tier.
     aspect-ratio enforces square if either is unset; min-height: 0
     clamps any defensive child floor (e.g. 3Dmol's 120px default).
     Caitlin 2026-04-26. */
  width: 50px;
  height: 50px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: var(--s-space-1);
  overflow: hidden;
}
.th-td__3d-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.08em;
  color: var(--s-color-fg-muted);
  background: color-mix(in oklch, var(--s-color-fg-muted) 8%, transparent);
  border: 1px dashed var(--s-color-border);
  border-radius: var(--s-space-1);
}

/* Cog dropdown — column visibility checklist (Phase 1). Anchored to the
   cog button via fixed positioning; dismisses on outside click or Esc. */
.th-cogmenu {
  position: fixed;
  z-index: 100;
  min-width: 180px;
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-2);
  padding: var(--s-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-twohair);
}
.th-cogmenu__head {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-min);
  letter-spacing: 0.08em;
  font-variant-caps: all-small-caps;
  color: var(--s-color-fg-muted);
  font-weight: var(--s-font-weight-semibold);
  padding: var(--s-space-1) var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border);
  margin-bottom: var(--s-space-1);
}
.th-cogmenu__item {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-tight-3) var(--s-space-2);
  border-radius: var(--s-radius-1);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-primary);
  cursor: pointer;
}
.th-cogmenu__item:hover {
  background: color-mix(
    in oklch,
    var(--s-color-bg-hover) 60%,
    transparent
  );
}
.th-cogmenu__item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* Reset section — separator + button-style menu items (no checkbox).
   Used by both the cog menu and the column-header context menu so the
   reset affordance is identical in both surfaces. Phase 1 (issues 97–98). */
.th-cogmenu__sep {
  height: 1px;
  background: var(--s-color-border);
  margin: var(--s-space-1) 0;
}
.th-cogmenu__item--button {
  /* Mirror checkbox-row metrics so the reset items align with the
     visibility checklist above them (no mid-menu jog). */
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  padding: var(--s-space-tight-3) var(--s-space-2);
}
.th-cogmenu__item--button:hover {
  background: color-mix(
    in oklch,
    var(--s-color-bg-hover) 60%,
    transparent
  );
}
/* Column-header right-click variant — slightly tighter; its only entries
   are reset actions (no head/separator at the top, stripped JS-side). */
.th-cogmenu--colheader {
  min-width: 160px;
}

/* ── Molecule thumbnails ──────────────────────────────────────────── */
/* Drawn by molecule-thumbnail.js (smiles-drawer wrapper). The host owns
   the outer thumb element + size; this rule styles the rendered SVG and
   the text fallback used when SMILES Drawer hasn't loaded or parse fails. */
.mthumb__svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mthumb__fallback {
  font-family: var(--s-font-mono);
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.04em;
  color: color-mix(in oklch, var(--s-color-fg-muted) 70%, transparent);
}
/* Molecule thumbs render directly on the row background — no white
   block (Caitlin 2026-04-25). The row tint from data-tint shows
   through, keeping the thumb visually integrated with its row. */
.th-list__thumb[data-kind="molecule"],
.th-list__thumb[data-kind="molecule-stereo"],
.th-list__thumb[data-kind="molecule-3d-ball"],
.th-card__thumb[data-kind="molecule"],
.th-card__thumb[data-kind="molecule-stereo"],
.th-card__thumb[data-kind="molecule-3d-ball"] {
  background: transparent;
  padding: var(--s-space-twohair);
  position: relative;
}

/* List-view hover-zoom intentionally NOT applied — Caitlin 2026-04-25
   feedback: list-view thumbs are already large at default zoom and the
   pop-up hover got in the way. Magnification belongs in the table view
   where 50px cells genuinely need it; that's handled JS-side via
   .th-hover-preview (escapes the table's overflow:auto via fixed
   positioning). */

/* Table-cell hover preview — fixed-positioned popover mounted into
   document.body, so it escapes the table's overflow:auto clipping and
   sits on top of any panel chrome (Caitlin 2026-04-25). */
.th-hover-preview {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-space-1);
  padding: var(--s-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.th-hover-preview > svg,
.th-hover-preview > div {
  display: block;
}

.th-viewtoggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
  padding: var(--s-space-twohair);
  background: var(--s-color-bg-subtle);
  border-radius: var(--s-radius-2);
}

.th-viewtoggle__btn {
  width: 24px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  border-radius: var(--s-radius-1);
  transition:
    background 0.12s,
    color 0.12s;
}

.th-viewtoggle__btn:hover {
  color: var(--s-color-fg-primary);
}

.th-viewtoggle__btn--active {
  background: var(--s-color-prominent-bg);
  color: var(--s-color-prominent-fg);
}

/* ── Body (view-mode-specific renderer) ───────────────────── */

.th-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background: var(--s-color-bg-app);
}

.th-body > .th-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* ── Footer ───────────────────────────────────────────────── */

/* .th-footer styled via canonical .guide-footer-strip rule in
   page-primitives.css. Caitlin 2026-04-26. */

/* ── Table view ───────────────────────────────────────────── */

.th-table-wrap {
  width: 100%;
}

.th-table {
  width: 100%;
  border-collapse: collapse;
}

.th-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(
    in oklch,
    var(--s-color-fg-muted) 6%,
    var(--s-color-bg-app)
  );
}

.th-th {
  padding: var(--s-space-2) var(--s-space-3);
  text-align: left;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.08em;
  font-variant-caps: all-small-caps;
  color: var(--s-color-fg-muted);
  border-bottom: 1px solid var(--s-color-border);
  white-space: nowrap;
  /* Phase 1 (issues 97–98): position context for the resize grip; cursor
     reveals draggability on hover. Caitlin 2026-04-26: "minimal and
     optimized for revealing draggability on hover" — no persistent
     visual chrome, only cursor + a subtle drop indicator while a drag
     is in flight. */
  position: relative;
  cursor: grab;
  /* Reserve right-edge space for the resize grip so its hit area
     doesn't overlap header content (sort button, label). */
  padding-right: calc(var(--s-space-3) + var(--s-space-twohair));
}
.th-th:active {
  cursor: grabbing;
}
/* The sort button is a click target, not a drag handle — restore its
   own cursor. Drag still starts when the user moves outside the
   button's bounds while clicking the th body. */
.th-th-btn {
  cursor: pointer;
}

/* Drag-rearrange (issue 97) — source th muted while the gesture is live so
   the drop targets read clearly. */
.th-th--dragging {
  opacity: 0.4;
}

/* Drop indicator — a single vertical bar at the insertion edge (pseudo,
   not box-shadow). Matches calm-UI discipline for data-heavy chrome. */
.th-th--drop-before::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--s-space-twohair);
  background: var(--s-color-status-info);
  pointer-events: none;
  z-index: 2;
}
.th-th--drop-after::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--s-space-twohair);
  background: var(--s-color-status-info);
  pointer-events: none;
  z-index: 2;
}

/* Resize grip (issue 98) — invisible at rest; cursor reveals capability on
   hover; a faint vertical wash confirms the hit zone when the user
   actually approaches the edge. Active drag is signaled by the body
   .th-resizing class (locks cursor across the whole document while the
   gesture is live). */
.th-grip {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--s-space-tight-3) + var(--s-space-twohair));
  height: 100%;
  cursor: col-resize;
  /* Sit above any header content so the right-edge hit zone is reliable
     even when a sort button extends to the column edge. */
  z-index: 1;
  background: transparent;
  user-select: none;
  transition: background 0.12s ease;
}
.th-grip:hover {
  background: color-mix(in oklch, var(--s-color-status-info) 35%, transparent);
}
/* While a column is being resized, lock the cursor across the document
   and suppress text selection so the gesture stays clean even if the
   user drags past the table edge. */
body.th-resizing,
body.th-resizing * {
  cursor: col-resize;
  user-select: none;
}

.th-th--end {
  text-align: right;
}

.th-th-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-variant-caps: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-space-twohair);
  white-space: nowrap;
}

.th-th-btn:hover {
  color: var(--s-color-fg-primary);
}
.th-th-btn--active {
  color: var(--s-color-status-info);
}
.th-th-arrow {
  font-size: var(--s-font-size-micro);
  line-height: 1;
}

.th-row {
  cursor: pointer;
  transition: background 0.1s ease;
}
.th-row:hover {
  background: color-mix(in oklch, var(--s-color-status-info) 4%, transparent);
}
.th-row--selected {
  background: color-mix(in oklch, var(--s-color-status-info) 10%, transparent);
}
.th-row--selected:hover {
  background: color-mix(in oklch, var(--s-color-status-info) 14%, transparent);
}

.th-td {
  padding: var(--s-space-2) var(--s-space-3);
  border-bottom: 1px solid var(--s-color-border);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-primary);
  vertical-align: middle;
}

.th-td--end {
  text-align: right;
}

.th-td--num {
  font-family: var(--s-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.th-td--id {
  font-family: var(--s-font-mono);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.04em;
}

.th-td--status {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.06em;
  font-variant-caps: all-small-caps;
}

.th-td--status[data-status="chosen"] {
  color: var(--s-color-status-info);
  font-weight: var(--s-font-weight-semibold);
}
.th-td--status[data-status="retired"] {
  color: var(--s-color-fg-muted);
  text-decoration: line-through;
}
.th-td--status[data-status="exploratory"] {
  color: var(--s-color-status-warning);
}
.th-td--status[data-status="fragment"] {
  color: var(--s-color-fg-muted);
}

/* ── List view ────────────────────────────────────────────── */

.th-list {
  display: flex;
  flex-direction: column;
}

.th-list__row {
  display: grid;
  /* Thumb (fixed) | title group (flexible, allows shrink) | metric tracks (auto-fit, narrow).
     The narrow min-track keeps 4-5 inline metrics on a single row at typical panel widths
     (~400-500px); when the panel narrows further, auto-fit drops tracks before wrapping —
     so the row stays single-line until the panel is genuinely too narrow, at which point
     the metric tracks wrap below the title (thumb spans both rows via grid-row: 1 / -1). */
  grid-template-columns: 56px minmax(80px, 1.4fr) repeat(
      auto-fit,
      minmax(60px, 1fr)
    );
  align-items: center;
  gap: var(--s-space-2) var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  border-bottom: 1px solid var(--s-color-border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    background 0.12s ease,
    padding 0.12s ease;
}
/* Row padding stays uniform across zoom tiers — zoom only affects
   thumb size now (per 2026-04-25 refinement). The row template is
   the same regardless of zoom; only the structure renders larger. */

.th-list__row:last-child {
  border-bottom: none;
}

.th-list__row:hover {
  background: color-mix(in oklch, var(--s-color-status-info) 5%, transparent);
}

.th-list__row--selected {
  background: color-mix(in oklch, var(--s-color-status-info) 10%, transparent);
}

.th-list__thumb {
  width: 56px;
  height: 56px;
  /* Enforce square regardless of inline width / minHeight set by
     child viewers (e.g., 3Dmol). Width is the source of truth via the
     grid track; aspect-ratio derives the matching height; min-height:0
     clamps any defensive child floor. Caitlin 2026-04-26. */
  aspect-ratio: 1 / 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(
    in oklch,
    var(--s-color-fg-muted) 8%,
    var(--s-color-bg-app)
  );
  border-radius: var(--s-space-1);
  flex-shrink: 0;
  overflow: hidden;
  /* If metric tracks wrap to a second row, keep the thumb visually anchored
     to the title row so the row reads as one card, not two stacked items. */
  align-self: start;
}

.th-list__thumb[data-tint="info"] {
  background: color-mix(
    in oklch,
    var(--s-color-status-info) 14%,
    var(--s-color-bg-app)
  );
}
.th-list__thumb[data-tint="warning"] {
  background: color-mix(
    in oklch,
    var(--s-color-status-warning) 14%,
    var(--s-color-bg-app)
  );
}
.th-list__thumb[data-tint="success"] {
  background: color-mix(
    in oklch,
    var(--s-color-status-success) 14%,
    var(--s-color-bg-app)
  );
}

.th-list__thumb-initials {
  font-family: var(--s-font-mono);
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.04em;
  color: color-mix(in oklch, var(--s-color-fg-muted) 70%, transparent);
}

.th-list__group {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-twohair);
  min-width: 0;
}

.th-list__group--end {
  align-items: flex-end;
  text-align: right;
}

.th-list__group--title {
  gap: var(--s-space-twohair);
}

.th-list__title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.th-list__sub {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.th-list__value {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-primary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.th-list__label {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-min);
  letter-spacing: 0.08em;
  font-variant-caps: all-small-caps;
  color: var(--s-color-fg-muted);
}

/* ── Gallery view ─────────────────────────────────────────── */

.th-grid {
  display: grid;
  /* --th-card-min set by the zoom control on the host wrap; defaults to
     220px (the previous fixed value). */
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--th-card-min, 220px), 1fr)
  );
  gap: var(--s-space-2);
  padding: var(--s-space-3);
}

.th-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-border);
  border-left: 2px solid transparent;
  border-radius: var(--s-space-1);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}

.th-card:hover {
  border-color: var(--s-color-status-info);
}

.th-card--selected {
  border-color: var(--s-color-status-info);
  border-left-color: var(--s-color-status-info);
  background: color-mix(
    in oklch,
    var(--s-color-status-info) 4%,
    var(--s-color-bg-app)
  );
}

.th-card__thumb {
  aspect-ratio: 4 / 3;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(
    in oklch,
    var(--s-color-fg-muted) 8%,
    var(--s-color-bg-app)
  );
  overflow: hidden;
}

.th-card__thumb[data-tint="info"] {
  background: color-mix(
    in oklch,
    var(--s-color-status-info) 14%,
    var(--s-color-bg-app)
  );
}
.th-card__thumb[data-tint="warning"] {
  background: color-mix(
    in oklch,
    var(--s-color-status-warning) 14%,
    var(--s-color-bg-app)
  );
}
.th-card__thumb[data-tint="success"] {
  background: color-mix(
    in oklch,
    var(--s-color-status-success) 14%,
    var(--s-color-bg-app)
  );
}

.th-card__initials {
  font-family: var(--s-font-mono);
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-card-initials);
  letter-spacing: 0.04em;
  color: color-mix(in oklch, var(--s-color-fg-muted) 60%, transparent);
}

.th-card__info {
  padding: var(--s-space-2) var(--s-space-3);
  border-top: 1px solid var(--s-color-border);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
}

.th-card__title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  font-family: var(--s-font-mono);
  letter-spacing: 0.04em;
  line-height: var(--s-font-line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.th-card__sub {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.th-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1);
  margin-top: var(--s-space-twohair);
}

.th-card__chip {
  display: inline-flex;
  flex-direction: column;
  gap: var(--s-space-hair);
  padding: var(--s-space-twohair)
    calc(var(--s-space-tight-3) + var(--s-space-twohair));
  background: color-mix(in oklch, var(--s-color-fg-muted) 6%, transparent);
  border-radius: var(--s-space-1);
  min-width: 0;
}

.th-card__chip-label {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-micro);
  letter-spacing: 0.08em;
  font-variant-caps: all-small-caps;
  color: var(--s-color-fg-muted);
}

.th-card__chip-value {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  letter-spacing: 0.02em;
}