/* ── Design tokens — v18 dark terminal theme (see DESIGN-INTEGRATION.md) ──────── */
:root {
  /* Palette */
  --tdb-bg:       #0A0E14;
  --tdb-fg:       #C5D4E6;
  --tdb-accent:   #50FA7B;
  --tdb-accent-d: #3DBE63;
  --tdb-muted:    #6B7F99;
  --tdb-card-bg:  #121821;
  --tdb-border:   #1F2A3A;
  --tdb-radius:   0.75rem;
  --tdb-shadow:   0 2px 10px rgba(0,0,0,.3);
  --tdb-shadow-h: 0 6px 22px rgba(0,0,0,.45);
  /* Typography */
  --tdb-font-body: 'Space Grotesk', system-ui, sans-serif;
  --tdb-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Extended v18 palette */
  --tdb-bg-2:         #0F1419;
  --tdb-panel-2:      #161E29;
  --tdb-border-bright:#2D3E55;
  --tdb-text-faint:   #3D4F66;
  --tdb-accent-dim:   #2A6B3D;
  --tdb-cyan:         #5DD9FF;
  --tdb-amber:        #F4A623;
  --tdb-warn:         #FFB454;
  --tdb-error:        #FF5D6E;
  --tdb-folder:       #2986cc;  /* joke-card edge / folder tab + Submit button */
  --tdb-folder-bright:#4ba3e3;  /* hover variant */

  /* Bootstrap overrides — applied at :root so BS components are dark by default */
  --bs-body-bg:              #0A0E14;
  --bs-body-color:           #C5D4E6;
  --bs-emphasis-color:       #C5D4E6;
  --bs-emphasis-color-rgb:   197,212,230;
  --bs-secondary-color:      rgba(197,212,230,.65);
  --bs-secondary-color-rgb:  197,212,230;
  --bs-tertiary-color:       rgba(197,212,230,.4);
  --bs-border-color:         #1F2A3A;
  --bs-table-bg:             transparent;
  --bs-table-color:          #C5D4E6;
  --bs-table-border-color:   #1F2A3A;
}

/* The dark-mode toggle is pending a design decision (v18 is dark-only). For now
   this mirrors :root so toggling never regresses to the old comedy-zine palette. */
body.dark-mode {
  --tdb-bg:      #0A0E14;
  --tdb-fg:      #C5D4E6;
  --tdb-card-bg: #121821;
  --tdb-border:  #1F2A3A;
  --tdb-muted:   #6B7F99;
  --tdb-shadow:  0 2px 10px rgba(0,0,0,.3);
  --tdb-shadow-h:0 6px 22px rgba(0,0,0,.45);
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  background-color: var(--tdb-bg);
  color: var(--tdb-fg);
  font-family: var(--tdb-font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color .2s, color .2s;
}

main { flex: 1; }

h1, h2, h3, h4, h5 { font-family: var(--tdb-font-body); }

a { color: var(--tdb-accent-d); }
a:hover { color: var(--tdb-accent); }

/* ── Background layers (v18 atmosphere; circuit SVG still TODO) ─ */
body::before { /* subtle scanlines */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(0deg,
    transparent 0px, transparent 2px,
    rgba(80,250,123,.008) 2px, rgba(80,250,123,.008) 4px);
}
body::after { /* faint grid, fading toward the edges */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(45,62,85,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,62,85,.10) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, black 0%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 20%, black 0%, transparent 75%);
}
body > * { position: relative; z-index: 2; }

/* circuit-board trace layer (extracted from v18 mockup to /img/circuit.svg).
   Dimmed toward the center via a horizontal mask so it reads behind content. */
.tdb-circuit {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .4;
  background-image: url('/img/circuit.svg');
  background-repeat: repeat; background-position: center top; background-size: 600px 600px;
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 15%, rgba(0,0,0,.22) 35%,
    rgba(0,0,0,.18) 50%, rgba(0,0,0,.22) 65%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.85) 100%);
          mask-image: linear-gradient(to right,
    rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 15%, rgba(0,0,0,.22) 35%,
    rgba(0,0,0,.18) 50%, rgba(0,0,0,.22) 65%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.85) 100%);
}

/* ── Header ────────────────────────────────────────────────── */
.tdb-header {
  border-bottom: 1px solid var(--tdb-border);
  background: linear-gradient(180deg, rgba(80,250,123,.04) 0%, transparent 100%), var(--tdb-bg-2);
}
.tdb-header-inner, .tdb-searchbar-inner, .tdb-nav-inner, .tdb-footer-inner, main.tdb-main {
  max-width: 1440px; margin: 0 auto; padding-left: 32px; padding-right: 32px;
}
.tdb-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding-top: 12px; padding-bottom: 12px;
}
.tdb-brand { text-decoration: none; display: inline-flex; align-items: center; gap: 14px; line-height: 1; }
.tdb-logo { width: 62px; height: auto; display: block; filter: drop-shadow(0 0 8px rgba(80,250,123,.35)); }
.tdb-brand-text { display: flex; flex-direction: column; }
.tdb-brand .name {
  font-family: var(--tdb-font-mono); font-size: 2rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--tdb-fg);
}
.tdb-brand .name .accent { color: var(--tdb-accent); }
.tdb-brand .name .blink {
  display: inline-block; background: var(--tdb-accent);
  width: 12px; height: 1.45rem; margin-left: 6px; vertical-align: baseline;
  animation: tdb-blink 1.1s steps(2, start) infinite;
}
@keyframes tdb-blink { to { visibility: hidden; } }
.tdb-brand .sub {
  font-family: var(--tdb-font-mono); font-size: .68rem; color: var(--tdb-muted);
  letter-spacing: .14em; text-transform: uppercase; margin-top: 6px;
}

/* Home page only: brand items 50% larger */
.page-home .tdb-brand { gap: 21px; }
.page-home .tdb-logo { width: 93px; }
.page-home .tdb-brand .name { font-size: 3rem; }
.page-home .tdb-brand .name .blink { width: 18px; height: 2.175rem; margin-left: 9px; }
.page-home .tdb-brand .sub { font-size: 1.02rem; margin-top: 9px; }
.tdb-submit-btn {
  background: transparent; color: var(--tdb-folder); border: 2px solid var(--tdb-folder);
  font-family: var(--tdb-font-mono); font-weight: 700; font-size: .8rem;
  padding: 10px 18px; border-radius: 8px; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; transition: all .15s;
}
.tdb-submit-btn:hover { background: rgba(41,134,204,.12); border-color: var(--tdb-folder-bright); color: var(--tdb-folder-bright); }
.tdb-submit-btn .plus { font-size: 1.1rem; line-height: 1; }

/* ── Search bar ────────────────────────────────────────────── */
.tdb-searchbar { border-bottom: 1px solid var(--tdb-border); background: var(--tdb-bg-2); }
.tdb-searchbar-inner { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding-top: 6px; padding-bottom: 6px; }
.tdb-search-field {
  flex: 0 1 30%; display: flex; align-items: center; gap: 12px;
  background: var(--tdb-bg); border: 1px solid var(--tdb-border-bright);
  border-radius: 8px; padding: 5px 16px; transition: border-color .15s, flex-basis .7s ease;
}
.tdb-searchbar-inner:focus-within .tdb-search-field { flex-basis: 100%; }
.tdb-search-field:hover { border-color: var(--tdb-accent-dim); }
.tdb-search-field .icon { color: var(--tdb-accent); font-size: 1.1rem; }
.tdb-search-field input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--tdb-fg); font-family: var(--tdb-font-body); font-size: .9rem;
}
.tdb-search-field input::placeholder { color: var(--tdb-muted); }
.tdb-search-field .shortcut {
  font-family: var(--tdb-font-mono); font-size: .68rem; color: var(--tdb-text-faint);
  border: 1px solid var(--tdb-border); padding: 2px 6px; border-radius: 3px;
}
.tdb-search-btn {
  background: var(--tdb-accent); color: var(--tdb-bg); border: none;
  font-family: var(--tdb-font-mono); font-weight: 700; font-size: .8rem;
  padding: 6px 24px; border-radius: 8px; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer;
  box-shadow: 0 0 16px rgba(80,250,123,.3); transition: all .15s;
}
.tdb-search-btn:hover { box-shadow: 0 0 22px rgba(80,250,123,.5); transform: translateY(-1px); }

/* ── Nav tabs ──────────────────────────────────────────────── */
.tdb-nav { border-bottom: 1px solid var(--tdb-border); background: var(--tdb-bg); }
.tdb-nav-inner { display: flex; align-items: stretch; }
.tdb-nav .tab {
  font-family: var(--tdb-font-mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tdb-muted); padding: 13px 20px;
  text-decoration: none; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 8px; transition: color .15s;
}
.tdb-nav .tab:hover { color: var(--tdb-fg); }
.tdb-nav .tab.active {
  color: var(--tdb-accent); border-bottom-color: var(--tdb-accent);
  background: linear-gradient(180deg, transparent 0%, rgba(80,250,123,.05) 100%);
}

/* ── Footer ────────────────────────────────────────────────── */
.tdb-footer { border-top: 1px solid var(--tdb-border); background: var(--tdb-bg-2); }
.tdb-footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--tdb-font-mono); font-size: .7rem; color: var(--tdb-text-faint);
  letter-spacing: .08em; padding-top: 20px; padding-bottom: 20px;
}
.tdb-footer-inner .ok { color: var(--tdb-accent); display: inline-flex; align-items: center; gap: 6px; }
.tdb-footer-inner .ok::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tdb-accent); box-shadow: 0 0 6px var(--tdb-accent);
}

/* ── Joke card ─────────────────────────────────────────────── */
.joke-card {
  background: var(--tdb-card-bg);
  border: 3px solid var(--tdb-folder);   /* card edge */
  border-radius: 4px 4px 8px 8px;
  box-shadow: var(--tdb-shadow);
  padding: 1.25rem 1.4rem 1rem;
  margin-top: 12px;                   /* room for the folder tab */
  margin-bottom: 1.25rem;
  transition: box-shadow .2s, transform .15s;
  position: relative;
  display: flex; flex-direction: column;
}
/* manila folder tab on the top-left edge */
.joke-card::before {
  content: ''; position: absolute; top: -12px; left: 18px;
  width: 95px; height: 13px; background: var(--tdb-folder);
  border-radius: 4px 4px 0 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}
.joke-card:hover { box-shadow: var(--tdb-shadow-h); }
.joke-card.highlighted { border-left: 3px solid var(--tdb-amber); }

@keyframes highlight-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(244,166,35,.6); }
  70%  { box-shadow: 0 0 0 16px rgba(244,166,35,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,166,35,0); }
}
.joke-card.highlighted.just-loaded { animation: highlight-pulse 1.2s ease-out forwards; }

.joke-body {
  display: block; white-space: pre-wrap; font-size: 1.02rem; line-height: 1.6;
  margin-bottom: 1rem; flex: 1 1 auto;
  color: inherit; text-decoration: none; cursor: pointer;
}
.joke-body::before { content: '> '; color: var(--tdb-accent); font-family: var(--tdb-font-mono); font-weight: 700; }
.joke-body:hover { text-decoration: underline; text-decoration-color: var(--tdb-accent); text-underline-offset: 3px; }

/* ── Collection label ──────────────────────────────────────── */
.collection-label {
  font-family: var(--tdb-font-mono); font-size: .7rem; font-weight: 700;
  background: var(--tdb-accent-d); color: var(--tdb-bg) !important;
  border-radius: 3px; padding: .15rem .55rem;
  white-space: nowrap; text-decoration: none;
}
.collection-label:hover { background: var(--tdb-accent); }

/* ── Tag chips — JetBrains Mono per v18 design (tag font TBD §20 resolved) ── */
.tag-chip {
  font-family: var(--tdb-font-mono); font-size: .68rem;
  background: rgba(0,0,0,.5); color: var(--tdb-accent);
  border: 1px solid var(--tdb-border-bright); border-radius: 3px;
  padding: .12rem .5rem; cursor: pointer; text-decoration: none;
  display: inline-block; transition: background .15s, border-color .15s;
}
.tag-chip::before { content: '#'; color: var(--tdb-text-faint); }
.tag-chip.no-hash::before { content: none; }
.tag-chip:hover { background: rgba(80,250,123,.12); border-color: var(--tdb-accent); color: var(--tdb-accent); }
.tag-chip .tag-remove-btn {
  background: none; border: none; padding: 0; margin: 0;
  font-size: .9rem; line-height: 1; cursor: pointer;
  color: inherit; opacity: .5;
}
.tag-chip .tag-remove-btn:hover { opacity: 1; color: #dc3545; }

/* ── Star rating display ───────────────────────────────────── */
.stars-display { display: inline-flex; gap: 1px; color: var(--tdb-amber); font-size: 1rem; line-height: 1; }
.stars-display .star-half  { position: relative; display: inline-block; }
.stars-display .star-half::before { content: '☆'; color: var(--tdb-border-bright); }
.stars-display .star-half::after  {
  content: '★'; position: absolute; left: 0; width: 50%;
  overflow: hidden; display: inline-block; color: var(--tdb-amber);
}
.stars-display .star-empty::before { content: '☆'; color: var(--tdb-border-bright); }
.rating-count { font-size: .8rem; color: var(--tdb-muted); }

/* ── Star rating input ─────────────────────────────────────── */
.star-input, .seed-star-input { display: inline-flex; gap: 2px; cursor: pointer; }
.star-input .star-btn, .seed-star-input .star-btn {
  background: none; border: none; padding: 0;
  font-size: 1.2rem; color: var(--tdb-border);
  cursor: pointer; transition: color .1s; line-height: 1;
}
.star-input .star-btn.active,  .star-input .star-btn.hover,
.seed-star-input .star-btn.active, .seed-star-input .star-btn.hover { color: var(--tdb-amber); }
.seed-star-input .star-btn { font-size: 1.1rem; }

/* ── Tag area (two-col flex) ───────────────────────────────── */
.tag-area { display: flex; align-items: flex-start; gap: .4rem; margin-top: .5rem; }
.tag-chips-wrap { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1; min-width: 0; }
.tag-add-btn {
  background: none; border: 1px solid var(--tdb-accent); border-radius: 50%;
  width: 1.5rem; height: 1.5rem; font-size: .9rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; color: var(--tdb-accent);
  transition: background-color .15s, border-color .15s, color .15s;
}
.tag-add-btn:hover { background: var(--tdb-accent); border-color: var(--tdb-accent); color: var(--tdb-bg); }

/* ── Share menu (bottom-right of tag area) ─────────────────── */
.share-wrap { position: relative; flex-shrink: 0; align-self: center; }
.share-btn {
  background: none; border: none; padding: 0; color: inherit;
  font-size: .95rem; line-height: 1;
  opacity: .6; cursor: pointer; transition: opacity .15s, transform .15s;
}
.share-btn:hover, .share-wrap.open .share-btn { opacity: 1; transform: scale(1.12); }

.share-menu {
  display: none; position: absolute; right: 0; bottom: calc(100% + .4rem);
  flex-direction: column; min-width: 150px; z-index: 200;
  background: var(--tdb-card-bg); border: 1px solid var(--tdb-border);
  border-radius: .5rem; box-shadow: var(--tdb-shadow-h); overflow: hidden;
}
.share-wrap.open .share-menu { display: flex; }
.share-menu-item {
  background: none; border: none; text-align: left; white-space: nowrap;
  padding: .5rem .8rem; font-size: .85rem; color: var(--tdb-fg); cursor: pointer;
}
.share-menu-item:hover { background: rgba(80,250,123,.12); color: var(--tdb-accent); }

.tag-add-panel {
  margin-top: .4rem; padding: .6rem;
  border: 1px solid var(--tdb-border); border-radius: .5rem;
  background: var(--tdb-card-bg); position: relative;
}
.tag-add-panel input {
  border: 1px solid var(--tdb-border); border-radius: .35rem;
  padding: .3rem .6rem; font-size: .85rem; width: 100%;
  background: var(--tdb-bg); color: var(--tdb-fg);
}
.tag-suggestions {
  position: absolute; z-index: 200; background: var(--tdb-card-bg);
  border: 1px solid var(--tdb-border); border-radius: .5rem;
  max-height: 180px; overflow-y: auto;
  box-shadow: var(--tdb-shadow-h); min-width: 160px;
}
.tag-suggestion-item { padding: .4rem .75rem; cursor: pointer; font-size: .85rem; }
.tag-suggestion-item:hover { background: rgba(244,166,35,.12); }

/* ── Flag ──────────────────────────────────────────────────── */
.flag-btn { background: none; border: none; color: var(--tdb-muted); font-size: .8rem; cursor: pointer; padding: 0; }
.flag-btn:hover { color: #dc3545; }

/* ── Search ────────────────────────────────────────────────── */
.search-box-wrap { max-width: 600px; margin: 0 auto 1.5rem; }
.filter-panel {
  background: var(--tdb-card-bg); border: 1px solid var(--tdb-border);
  border-radius: var(--tdb-radius); padding: 1rem; margin-bottom: 1.5rem;
}
.min-rating-star { font-size: 1.4rem; color: var(--tdb-border); cursor: pointer; transition: color .1s; }
.min-rating-star.active { color: var(--tdb-amber); }
.has-any-toggle { display: inline-flex; border: 1px solid var(--tdb-border-bright); border-radius: .4rem; overflow: hidden; font-size: .8rem; }
.has-any-toggle button { background: none; border: none; padding: .2rem .6rem; cursor: pointer; color: var(--tdb-muted); }
.has-any-toggle button.active { background: var(--tdb-accent); color: var(--tdb-bg); }
.selected-tag-chip {
  font-family: var(--tdb-font-mono); font-size: .68rem;
  background: rgba(0,0,0,.5); color: var(--tdb-accent);
  border: 1px solid var(--tdb-border-bright); border-radius: 3px; padding: .12rem .5rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.selected-tag-chip::before { content: '#'; color: var(--tdb-text-faint); }
.selected-tag-chip .remove-tag { cursor: pointer; opacity: .7; }
.selected-tag-chip .remove-tag:hover { opacity: 1; color: var(--tdb-error); }

/* ── Browse layout (v18 sidebar + content) ─────────────────── */
.tdb-browse { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; }
@media (max-width: 800px) { .tdb-browse { grid-template-columns: 1fr; gap: 20px; } }

/* Keep <main> at full width on the browse page so the sidebar holds its left
   position when results are sparse. In the flex-column body, main's auto cross-axis
   margins otherwise shrink-wrap it to its content and center it (same behavior the
   submit-form rule below works around). */
body:has(.tdb-browse) main.tdb-main { width: 100%; }

.tdb-sidebar { font-family: var(--tdb-font-mono); }
.tdb-side-section { margin-bottom: 28px; }
.tdb-side-section h3 {
  font-size: .62rem; color: var(--tdb-text-faint); letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 8px;
  padding: 6px 10px 8px; border-bottom: 1px solid var(--tdb-border);
  background: var(--tdb-bg-2); border-radius: 4px 4px 0 0;
}
.tdb-tag-item, .tdb-coll-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 10px; font-size: .78rem; color: var(--tdb-muted);
  text-decoration: none; border-radius: 4px; margin-bottom: 2px;
  background: var(--tdb-bg-2); transition: color .12s, background .12s;
}
.tdb-tag-item:hover, .tdb-coll-item:hover { color: var(--tdb-fg); background: var(--tdb-panel-2); }
.tdb-tag-item.active, .tdb-coll-item.active { color: var(--tdb-accent); background: #142621; }
.tdb-tag-item .name::before { content: '#'; color: var(--tdb-text-faint); margin-right: 1px; }
.tdb-tag-item.active .name::before { color: var(--tdb-accent); }
.tdb-tag-item .num, .tdb-coll-item .num { font-size: .62rem; color: var(--tdb-muted); font-variant-numeric: tabular-nums; }
.tdb-tag-item.active .num { color: var(--tdb-accent); }
.tdb-side-empty { font-size: .72rem; color: var(--tdb-text-faint); padding: 6px 10px; font-style: italic; }

/* Sidebar tag search */
.tdb-tagsearch { position: relative; }
.tdb-tagsearch-field {
  display: flex; align-items: center; gap: 6px;
  background: var(--tdb-panel-2); border: 1px solid var(--tdb-border-bright);
  border-radius: 6px; padding: 0 8px;
}
.tdb-tagsearch-field:focus-within { border-color: var(--tdb-accent-dim); }
.tdb-tagsearch-field .icon { color: var(--tdb-accent); font-size: 1rem; }
.tdb-tagsearch-input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--tdb-fg); font-family: var(--tdb-font-mono); font-size: .78rem; padding: 7px 0;
}
.tdb-tagsearch-input::placeholder { color: var(--tdb-text-faint); }
.tdb-tagsearch-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px;
  background: var(--tdb-panel-2); border: 1px solid var(--tdb-border-bright);
  border-radius: 6px; box-shadow: var(--tdb-shadow); max-height: 240px; overflow-y: auto;
}
.tdb-tagsearch-item {
  padding: 7px 10px; font-size: .78rem; color: var(--tdb-muted); cursor: pointer;
}
.tdb-tagsearch-item::before { content: '#'; color: var(--tdb-text-faint); margin-right: 1px; }
.tdb-tagsearch-item:hover { color: var(--tdb-accent); background: #142621; }

/* Removable active-filter chips in the content head */
.tdb-active-filter {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--tdb-accent); background: #142621; border: 1px solid var(--tdb-accent-dim);
  border-radius: 4px; padding: 2px 7px; margin: 0 2px; text-decoration: none;
  text-transform: none; letter-spacing: 0;
}
.tdb-active-filter:hover { color: var(--tdb-accent); border-color: var(--tdb-accent); }
.tdb-active-filter .x { font-size: .9rem; line-height: 1; color: var(--tdb-text-faint); }
.tdb-active-filter:hover .x { color: var(--tdb-accent); }

.tdb-content { min-width: 0; }
.tdb-content-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.tdb-content-head .filter-label {
  font-family: var(--tdb-font-mono); font-size: .8rem; color: var(--tdb-muted);
  letter-spacing: .03em; text-transform: uppercase;
}
.tdb-content-head .filter-label .prefix { color: var(--tdb-text-faint); margin-right: 4px; }
.tdb-content-head .filter-label .result-count { color: var(--tdb-muted); }
.tdb-head-controls { display: flex; align-items: center; gap: 12px; }
.tdb-match-toggle {
  font-family: var(--tdb-font-mono); font-size: .82rem; font-weight: 600; color: var(--tdb-muted);
  text-decoration: none; border: 1px solid var(--tdb-border-bright);
  border-radius: 7px; padding: 9px 16px; letter-spacing: .03em;
}
.tdb-match-toggle:hover { color: var(--tdb-fg); border-color: var(--tdb-accent-dim); }
.tdb-match-toggle strong { color: var(--tdb-accent); }
.tdb-sort-pill {
  background: var(--tdb-panel); border: 1px solid var(--tdb-border-bright);
  color: var(--tdb-fg); font-family: var(--tdb-font-mono); font-size: .82rem; font-weight: 600;
  padding: 9px 16px; border-radius: 7px; cursor: pointer; letter-spacing: .03em;
}
.tdb-sort-pill .lbl { color: var(--tdb-text-faint); }
.tdb-sort-pill::after { color: var(--tdb-accent); }
.tdb-sort-menu {
  background: var(--tdb-card-bg); border: 1px solid var(--tdb-border-bright);
  font-family: var(--tdb-font-mono); font-size: .75rem;
  box-shadow: var(--tdb-shadow);
}
.tdb-sort-menu .dropdown-item { color: var(--tdb-muted); }
.tdb-sort-menu .dropdown-item:hover { background: var(--tdb-panel-2); color: var(--tdb-fg); }
.tdb-sort-menu .dropdown-item.active { background: rgba(80,250,123,.10); color: var(--tdb-accent); }

.tdb-joke-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .tdb-joke-grid { grid-template-columns: 1fr; } }

.tdb-empty { text-align: center; padding: 48px 0; }

/* Filter chips / controls and pagination are now JS-driven anchors (no href). */
.tdb-active-filter[data-remove-term], .tdb-active-filter[data-remove-tag],
.tdb-active-filter[data-remove-collection], .tdb-match-toggle[data-match-toggle],
.tdb-sort-menu .dropdown-item[data-sort], .tdb-pagination .pg[data-page],
.tag-chip[data-tag-id] { cursor: pointer; }

.tdb-pagination {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px; padding: 28px 0 8px; font-family: var(--tdb-font-mono);
}
.tdb-pagination .pg {
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tdb-border); border-radius: 5px; padding: 0 10px;
  font-size: .72rem; color: var(--tdb-muted); text-decoration: none; background: transparent;
}
.tdb-pagination .pg:hover { color: var(--tdb-fg); border-color: var(--tdb-border-bright); }
.tdb-pagination .pg.active { background: var(--tdb-accent); color: var(--tdb-bg); border-color: var(--tdb-accent); font-weight: 700; }
.tdb-pagination .pg.disabled { opacity: .4; pointer-events: none; }
.tdb-pagination .info { margin-left: 12px; font-size: .68rem; color: var(--tdb-muted); letter-spacing: .06em; }

/* Generic accent button (Random page, etc.) */
.tdb-btn {
  background: var(--tdb-accent); color: var(--tdb-bg); border: none;
  font-family: var(--tdb-font-mono); font-weight: 700; font-size: .75rem;
  padding: 9px 18px; border-radius: 8px; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 0 14px rgba(80,250,123,.25); transition: all .15s;
}
.tdb-btn:hover { box-shadow: 0 0 20px rgba(80,250,123,.45); transform: translateY(-1px); color: var(--tdb-bg); }
.tdb-btn:disabled { opacity: .6; cursor: default; box-shadow: none; transform: none; }
.shuffle-icon { width: 2em; height: 2em; flex: none; vertical-align: middle; }

.tdb-btn-ghost {
  background: transparent; color: var(--tdb-muted);
  border: 1px solid var(--tdb-border-bright);
  font-family: var(--tdb-font-mono); font-weight: 700; font-size: .72rem;
  padding: 8px 14px; border-radius: 8px; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
}
.tdb-btn-ghost:hover { color: var(--tdb-fg); border-color: var(--tdb-accent-dim); }

/* ── Detail / Collection / Submit surfaces ─────────────────── */
.tdb-single { max-width: 640px; margin: 0 auto; }
.tdb-stack  { max-width: 760px; margin: 0 auto; }
.tdb-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.tdb-page-head h1 { font-size: 1.5rem; margin: 0; }

.tdb-coll-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .tdb-coll-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tdb-coll-grid { grid-template-columns: 1fr; } }
.tdb-coll-card {
  display: block; text-decoration: none; background: var(--tdb-card-bg);
  border: 1px solid var(--tdb-border-bright); border-radius: 8px; padding: 20px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tdb-coll-card:hover { border-color: var(--tdb-accent-dim); transform: translateY(-2px); box-shadow: var(--tdb-shadow-h); }
.tdb-coll-card .name  { font-size: 1.1rem; font-weight: 700; color: var(--tdb-fg); margin: 10px 0 4px; }
.tdb-coll-card .count { font-family: var(--tdb-font-mono); font-size: .72rem; color: var(--tdb-text-faint); }

.tdb-tags-total { font-family: var(--tdb-font-mono); font-size: .72rem; color: var(--tdb-text-faint); }
.tdb-tags-cols { column-count: 3; column-gap: 32px; }
@media (max-width: 900px) { .tdb-tags-cols { column-count: 2; } }
@media (max-width: 640px) { .tdb-tags-cols { column-count: 1; } }
.tdb-tag-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  break-inside: avoid; text-decoration: none; margin-bottom: 12px;
  background: var(--tdb-card-bg); border: 1px solid var(--tdb-border-bright);
  border-radius: 8px; padding: 12px 16px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tdb-tag-row:hover { border-color: var(--tdb-accent-dim); transform: translateY(-2px); box-shadow: var(--tdb-shadow-h); }
.tdb-tag-row .tag-chip { font-size: 1.05rem; padding: .1rem .45rem; }
.tdb-tag-row:hover .tag-chip { background: rgba(80,250,123,.12); border-color: var(--tdb-accent); color: var(--tdb-accent); }
.tdb-tag-row .count { font-family: var(--tdb-font-mono); font-size: .72rem; color: var(--tdb-text-faint); white-space: nowrap; }

.tdb-form-panel {
  max-width: 640px; margin: 0 auto; background: var(--tdb-card-bg);
  border: 1px solid var(--tdb-border-bright); border-radius: 10px; padding: 28px 30px;
}
/* Submit page: size the content area itself to 80% of the page and let the
   panel fill it. main has margin:0 auto and is a flex item, so a definite
   width (not just max-width) is required — otherwise the flex auto-margins
   collapse it to its content width. Scoped via :has() on the submit form. */
body:has(#submitForm) main.tdb-main { width: 80%; max-width: 80%; }
body:has(#submitForm) .tdb-form-panel { max-width: 100%; }
.tdb-form-panel .form-label {
  font-family: var(--tdb-font-mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tdb-muted);
}

/* ── Admin ─────────────────────────────────────────────────── */
.tdb-admin-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--tdb-border);
  background: linear-gradient(180deg, rgba(80,250,123,.04) 0%, transparent 100%), var(--tdb-bg-2);
}
.tdb-admin-brand {
  font-family: var(--tdb-font-mono); font-weight: 800; font-size: 1.25rem;
  color: var(--tdb-fg); text-decoration: none; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 10px;
}
.tdb-admin-logo { width: 32px; height: auto; display: block; filter: drop-shadow(0 0 6px rgba(80,250,123,.3)); }
.tdb-admin-brand .accent { color: var(--tdb-accent); }
.tdb-admin-brand .tag {
  font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em;
  color: var(--tdb-bg); background: var(--tdb-accent); padding: 2px 7px; border-radius: 3px;
  vertical-align: middle;
}
.tdb-admin-user { display: flex; align-items: center; gap: 14px; font-family: var(--tdb-font-mono); font-size: .72rem; color: var(--tdb-muted); }

.admin-sidebar {
  position: sticky; top: 1rem;
  background: var(--tdb-bg-2); border: 1px solid var(--tdb-border);
  border-radius: 8px; padding: .5rem 0; min-width: 200px;
}
.admin-sidebar .nav-group-label {
  font-family: var(--tdb-font-mono); font-size: .6rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tdb-text-faint); padding: .6rem 1rem .25rem;
}
.admin-sidebar .nav-link {
  font-family: var(--tdb-font-mono); color: var(--tdb-muted) !important; padding: .4rem 1rem;
  font-size: .8rem; border-radius: 0; display: block; border-left: 2px solid transparent;
}
.admin-sidebar .nav-link:hover { background: var(--tdb-panel-2); color: var(--tdb-fg) !important; }
.admin-sidebar .nav-link.active {
  background: rgba(80,250,123,.08); color: var(--tdb-accent) !important; border-left-color: var(--tdb-accent);
}

.metric-card {
  background: var(--tdb-bg-2); border: 1px solid var(--tdb-border-bright);
  border-radius: 8px; padding: 1rem 1.25rem; text-align: center;
}
.metric-card .metric-value { font-family: var(--tdb-font-mono); font-size: 2rem; font-weight: 700; color: var(--tdb-accent); }
.metric-card .metric-label { font-family: var(--tdb-font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tdb-muted); }

.admin-table th {
  white-space: nowrap; font-family: var(--tdb-font-mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tdb-text-faint);
}
.admin-table th a { color: inherit; text-decoration: none; }
.admin-table th a:hover { color: var(--tdb-accent); }
.admin-table td.body-col { max-width: 420px; word-break: break-word; }

/* ── Pagination ────────────────────────────────────────────── */
.page-link { color: var(--tdb-accent-d); }
.page-item.active .page-link { background-color: var(--tdb-accent); border-color: var(--tdb-accent); color: #fff; }
body.dark-mode .page-link {
  background-color: var(--tdb-card-bg);
  border-color: var(--tdb-border);
  color: var(--tdb-accent-d);
}
body.dark-mode .page-link:hover {
  background-color: rgba(244,166,35,.12);
  border-color: var(--tdb-border);
  color: var(--tdb-accent);
}
body.dark-mode .page-item.disabled .page-link {
  background-color: var(--tdb-card-bg);
  border-color: var(--tdb-border);
  color: var(--tdb-muted);
}
body.dark-mode .page-item.active .page-link {
  background-color: var(--tdb-accent);
  border-color: var(--tdb-accent);
  color: #fff;
}

/* ── Misc ──────────────────────────────────────────────────── */
mark { background: rgba(244,166,35,.35); border-radius: 2px; padding: 0 2px; }
.text-accent { color: var(--tdb-accent) !important; }
.deleted-badge { font-size: .75rem; background: #dc3545; color: #fff; border-radius: .3rem; padding: .1rem .5rem; }

/* ── Responsive / mobile ───────────────────────────────────── */
/* The page chrome (header, search, nav, footer) was authored for desktop only —
   fixed 32px gutters, a 2rem/3rem brand, a 30%-wide right-aligned search field,
   and a single-row 5-tab nav. On phones that overflows and reads as "broken".
   These breakpoints tighten the gutters, shrink the brand, make search full
   width, and let the nav wrap. (Content grids already have their own queries.) */
@media (max-width: 768px) {
  .tdb-header-inner, .tdb-searchbar-inner, .tdb-nav-inner, .tdb-footer-inner, main.tdb-main {
    padding-left: 16px; padding-right: 16px;
  }
  /* Search fills the row instead of sitting at 30% on the right */
  .tdb-searchbar-inner { gap: 10px; }
  .tdb-search-field { flex: 1 1 auto; }
}

@media (max-width: 640px) {
  /* Header: shrink the brand so it shares one row with the Submit button;
     wrap as a last resort so it can never force a horizontal page scroll. */
  .tdb-header-inner { gap: 12px; flex-wrap: wrap; }
  .tdb-brand { gap: 10px; min-width: 0; }
  .tdb-logo { width: 44px; }
  .tdb-brand .name { font-size: 1.4rem; }
  .tdb-brand .name .blink { width: 9px; height: 1rem; margin-left: 4px; }
  .tdb-brand .sub { font-size: .58rem; letter-spacing: .1em; margin-top: 4px; }

  /* Home page must match the standard header on mobile — the desktop home
     enlargement (3rem/93px) pushes the Submit button onto a second row. Pin
     every brand dimension to the same values as the base mobile rules above so
     the header (and the button's placement) is identical across all pages. */
  .page-home .tdb-brand { gap: 10px; }
  .page-home .tdb-logo { width: 44px; }
  .page-home .tdb-brand .name { font-size: 1.4rem; }
  .page-home .tdb-brand .name .blink { width: 9px; height: 1rem; margin-left: 4px; }
  .page-home .tdb-brand .sub { font-size: .58rem; letter-spacing: .1em; margin-top: 4px; }

  /* Submit button: trim padding/type so it doesn't crowd the brand */
  .tdb-submit-btn { padding: 8px 12px; font-size: .7rem; }

  /* Nav: let the five tabs wrap to a second row instead of overflowing */
  .tdb-nav-inner { flex-wrap: wrap; }
  .tdb-nav .tab { padding: 11px 14px; font-size: .68rem; }

  /* Footer: stack its two lines */
  .tdb-footer-inner { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Submit page: the desktop 80% main width leaves the form too narrow on a
     phone — let it fill the screen and tighten the panel padding. */
  body:has(#submitForm) main.tdb-main { width: 100%; max-width: 100%; }
  .tdb-form-panel { padding: 20px 16px; }

  /* Tag-add suggestions: the on-screen keyboard covers everything below the
     input, hiding the match list. Float it ABOVE the textbox instead, and
     reverse it with column-reverse so the best match — still first in the DOM,
     so Tab/Enter autocomplete is unaffected — renders at the bottom of the
     list, right against the input. Applies to the joke-card add-tag affordance
     and the Submit page's tag field (#submitTagSuggestions). */
  .tag-add-panel .tag-suggestions,
  #submitTagSuggestions {
    top: auto; bottom: 100%; left: 0; right: 0; margin-bottom: 4px;
    display: flex; flex-direction: column-reverse;
  }
}

/* ── Accessibility ─────────────────────────────────────────── */
/* Visible keyboard focus for all interactive elements (custom + native). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--tdb-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.tdb-nav .tab:focus-visible { outline-offset: -2px; }

/* Respect reduced-motion: kill the blink, pulse, hover lifts, and smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .tdb-brand .name .blink { animation: none; visibility: visible; }
  .joke-card:hover, .tdb-coll-card:hover, .tdb-btn:hover, .tdb-search-btn:hover { transform: none; }
}