/* P9 homepage (compact cards) and the /casinos/ directory (compact table).
 *
 * Loaded by the homepage and the directory after site.css; spends tokens.css
 * only (no colour or type literals). Ported from the owner-picked mockups
 * H-B and D-A (data/research/p9-seo-20261017/mockups). */

.p9-pill {
  display: inline-flex; align-items: center; padding: 0.2rem 0.7rem;
  border: 1.5px dashed var(--brand-line); border-radius: var(--r-pill);
  background: var(--paper); font: 600 var(--t-xs)/1.4 var(--ui);
  letter-spacing: var(--tr-slight); color: var(--brand-ink); white-space: nowrap; word-spacing: 0.14em;
}
.p9-low { display: flex; flex-direction: column; gap: 0.05rem; }
.p9-low strong { font: 700 var(--t-base)/1.25 var(--ui); color: var(--ink); }
.p9-low strong.p9-norm { font-weight: 600; font-size: var(--t-sm); }
.p9-low span { font: 400 var(--t-xs)/1.35 var(--body); color: var(--ink-3); }
.p9-nm { font: 400 var(--t-sm)/1.35 var(--body); color: var(--ink-3); }
.p9-dscore { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.p9-dscore b { font: 700 var(--t-base)/1 var(--ui); }
.p9-dscore .score-of { font-weight: 500; color: var(--ink-3); font-size: var(--t-xs); }

/* --- Homepage: compact cards ------------------------------------------- */
.p9-all { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: var(--s-6); }
.p9-all span { color: var(--ink-2); font-size: var(--t-sm); }
.p9-cc { gap: 0; }
.p9-cc-score { display: flex; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.p9-cc-score .p9-dscore b { font: 700 var(--t-xl)/1 var(--ui); }
.p9-cc-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--rule);
}
.p9-cc-facts dt {
  font: 600 var(--t-2xs)/1.3 var(--ui); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.2rem; word-spacing: 0.14em;
}
.p9-cc-facts dd { font: 600 var(--t-sm)/1.35 var(--ui); color: var(--ink); }
.p9-cc .take { margin-top: 0.85rem; }

/* --- Directory: compact table ------------------------------------------ */
.p9-h1 { font-size: var(--t-hero); }
.p9-dir .crumb { margin-bottom: var(--s-4); }
.p9-tablewrap {
  margin-top: var(--s-4); background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-3); overflow-x: auto;
}
.p9-dt { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.p9-dt th, .p9-dt td { padding: 0.75rem 0.85rem; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.p9-dt thead th {
  border-top: 0; background: var(--ground-2); font: 600 var(--t-2xs)/1.3 var(--ui);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-2); word-spacing: 0.14em;
}
.p9-dt thead th[aria-sort="ascending"] { color: var(--brand-ink); }
.p9-dt thead th[aria-sort="ascending"]::after { content: " ↑"; }
.p9-dt tbody th { font-weight: 400; }
.p9-dt tr[hidden] { display: none; }
.p9-dop { display: flex; gap: 0.7rem; align-items: center; }
.p9-dop .tile { width: 38px; height: 38px; flex: none; font-size: var(--t-xs); }
.p9-dop > span { display: flex; flex-direction: column; }
.p9-dop a { font: 600 var(--t-base)/1.2 var(--display); color: var(--ink); text-decoration: none; }
.p9-dop a:hover { text-decoration: underline; }
.p9-dop > span > span { font-size: var(--t-xs); color: var(--ink-3); }
.p9-dgo { text-align: right; vertical-align: middle; }
.p9-dgo .btn { padding: 0.4rem 0.8rem; font-size: var(--t-xs); }
.p9-group-row th {
  background: var(--ground); font: 600 var(--t-xs)/1.4 var(--ui);
  color: var(--ink-2); letter-spacing: var(--tr-slight); word-spacing: 0.14em;
}
.p9-states-check { display: block; margin-top: 0.15rem; font: 600 var(--t-xs)/1.35 var(--ui); color: var(--ink-2); }
.p9-states-check[hidden] { display: none; }
.p9-dir .filters-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }

@media (max-width: 1120px) {
  .p9-dir .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone: each row becomes a two-column block; no horizontal page scroll. */
@media (max-width: 700px) {
  .p9-dir .filters-grid { grid-template-columns: minmax(0, 1fr); }
  .p9-dt thead { display: none; }
  .p9-dt, .p9-dt tbody, .p9-dt tr, .p9-dt th, .p9-dt td { display: block; }
  .p9-dt tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.55rem 0.9rem; padding: 0.9rem; border-top: 1px solid var(--rule);
  }
  .p9-dt tbody tr:first-child { border-top: 0; }
  .p9-dt tr[hidden] { display: none; }
  .p9-dt th, .p9-dt td { padding: 0; border: 0; min-width: 0; }
  .p9-dt tbody th { grid-column: 1 / -1; }
  .p9-dt td[data-l]::before {
    content: attr(data-l); display: block; font: 600 var(--t-2xs)/1.3 var(--ui);
    letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3);
    margin-bottom: 0.15rem; word-spacing: 0.14em;
  }
  .p9-dt td[data-l="Overall"] { grid-column: 1 / -1; }
  .p9-dt td[data-l="Overall"]::before { display: none; }
  .p9-dt .p9-dgo { grid-column: 1 / -1; text-align: left; }
  .p9-group-row { display: block; }
  .p9-group-row th { padding: 0.7rem 0.9rem; }
  .p9-cc-facts { grid-template-columns: 1fr 1fr; }
}