/* Ticker directory — /directory/ and /directory/<letter>/.

   Written against the same custom-property tokens as static/moat/moat_directory.css
   (--bg, --bg-light, --text, --text-muted, --border, --primary), so both pages
   follow the viewer's light/dark preference without a [data-bs-theme] patch and
   read as the same instrument as the moat hub. No cards: the letter index is a
   hairline grid and the company list is a table, because that is what they are. */

.tdir-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.tdir-crumb {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.tdir-crumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.tdir-crumb a:hover {
  text-decoration: underline;
}

.tdir-crumb span {
  margin: 0 0.4rem;
}

.tdir-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.tdir-header h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 0.5rem;
}

/* The letter page's h1 is the letter itself, large, with the count beside it. */
.tdir-header h1 .tdir-glyph {
  display: inline-block;
  min-width: 1.1em;
  font-size: 3rem;
  line-height: 1;
  vertical-align: -0.1em;
  margin-right: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.tdir-lede {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 64ch;
  margin: 0;
}

.tdir-lede a {
  color: var(--text);
}

/* Prev / next letter, right-aligned in the header. */
.tdir-adjacent {
  display: flex;
  gap: 0.5rem;
}

.tdir-adjacent a,
.tdir-adjacent span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.4rem 0.8rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.tdir-adjacent a:hover {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 8%, var(--bg-light));
}

.tdir-adjacent span {
  color: var(--text-muted);
  border-color: var(--border-muted);
}

/* ── Letter strip (both pages) ────────────────────────────────────────────── */

.tdir-strip {
  margin: 0 0 2rem;
}

.tdir-strip ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tdir-strip a,
.tdir-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.tdir-strip a {
  color: var(--text);
}

.tdir-strip a:hover {
  background: color-mix(in oklch, var(--primary) 10%, var(--bg-light));
  color: var(--primary);
}

.tdir-strip a[aria-current="page"] {
  background: var(--primary);
  color: var(--bg-light);
}

.tdir-strip span {
  color: var(--text-muted);
  opacity: 0.45;
}

/* ── Letter index (index page) ────────────────────────────────────────────── */

/* A hairline grid: 1px dividers between cells so the letters read as one indexed
   sheet rather than 26 identical cards. Each cell draws its own right and bottom
   hairline and pulls 1px into the container, so the container's border covers the
   last column and row and a trailing empty slot stays blank instead of showing a
   filled block. */
.tdir-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  margin: 0 0 3rem;
}

.tdir-index a,
.tdir-index .tdir-index-empty {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 6.5rem;
  padding: 0.875rem 1rem;
  margin: 0 -1px -1px 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-light);
  text-decoration: none;
  transition: background 0.15s ease;
}

.tdir-index a:hover {
  background: color-mix(in oklch, var(--primary) 8%, var(--bg-light));
}

.tdir-index a:hover .tdir-index-letter {
  color: var(--primary);
}

.tdir-index-letter {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  transition: color 0.15s ease;
}

.tdir-index-count {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tdir-index-empty {
  opacity: 0.4;
}

/* ── Section headings ─────────────────────────────────────────────────────── */

.tdir-section-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.tdir-section-lede {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

/* ── Filter (letter page) ─────────────────────────────────────────────────── */

.tdir-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.tdir-filter {
  position: relative;
  flex: 1 1 18rem;
  max-width: 26rem;
}

.tdir-filter i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.tdir-filter input {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  transition: border-color 0.15s ease;
}

.tdir-filter input::placeholder {
  color: var(--text-muted);
}

.tdir-filter input:focus {
  outline: none;
  border-color: var(--primary);
}

.tdir-filter-count {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Company table ────────────────────────────────────────────────────────── */

.tdir-table-wrap {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--bg-light);
}

.tdir-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tdir-table th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0.625rem 1rem;
  text-align: left;
  white-space: nowrap;
}

.tdir-table td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border-muted);
  vertical-align: middle;
}

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

.tdir-table tbody tr:hover td {
  background: color-mix(in oklch, var(--primary) 5%, var(--bg-light));
}

.tdir-rank {
  width: 3.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tdir-ticker {
  white-space: nowrap;
}

.tdir-ticker a {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.tdir-ticker a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.tdir-name a {
  color: var(--text-muted);
  text-decoration: none;
}

.tdir-name a:hover {
  color: var(--text);
  text-decoration: underline;
}

.tdir-industry {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.tdir-cap,
.tdir-table th.tdir-cap {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tdir-moat {
  white-space: nowrap;
  text-align: right;
}

/* A quiet text link: this renders on every row of a 600-row page, so a bordered
   pill 600 times over would out-shout the tickers it points away from. */
.tdir-moat a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.tdir-moat a:hover,
.tdir-table tbody tr:hover .tdir-moat a {
  color: var(--primary);
}

.tdir-moat a:hover {
  text-decoration: underline;
}

/* Filter feedback: rows hidden by the client-side filter, and the empty result. */
.tdir-table tr[hidden] {
  display: none;
}

.tdir-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* ── Footer nav (letter page) ─────────────────────────────────────────────── */

.tdir-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .tdir-industry,
  .tdir-table th.tdir-industry-h {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .tdir-page {
    padding-top: 1.25rem;
  }

  .tdir-header h1 {
    font-size: 1.6rem;
  }

  .tdir-header h1 .tdir-glyph {
    font-size: 2.4rem;
  }

  .tdir-rank {
    display: none;
  }

  .tdir-cap,
  .tdir-table th.tdir-cap {
    display: none;
  }

  .tdir-index {
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  }

  .tdir-index a,
  .tdir-index .tdir-index-empty {
    min-height: 5rem;
    padding: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tdir-strip a,
  .tdir-index a,
  .tdir-index-letter,
  .tdir-adjacent a,
  .tdir-moat a,
  .tdir-filter input {
    transition: none;
  }
}