/**
 * PlaidCars — [pc_data] shortcode styling (FE-CR-F).
 *
 * The backend (CR-OPS-F) renders the live data shortcodes; this file
 * makes those fragments read as native UAE plate-grammar inside
 * editorial content (posts/guides), styles the "last seen" freshness
 * stamp, and keeps them responsive with no layout shift. Loaded only on
 * singular content whose body contains a [pc_data ...] shortcode (see
 * pc_data_enqueue_styles() in functions.php).
 *
 * ---------------------------------------------------------------------
 * CLASS CONTRACT (frontend ⇄ backend) — the shortcode should emit one of:
 *
 *   Inline value chip:
 *     <span class="pc-data pc-data--inline">
 *       <span class="pc-data__label">MEDIAN ASKING</span>
 *       <span class="pc-data__value">142,000</span>
 *       <span class="pc-data__unit">AED</span>
 *       <span class="pc-data__stamp">as of 3 days ago</span>
 *     </span>
 *
 *   Block table (range / comparison / inventory counts):
 *     <div class="pc-data pc-data--block">
 *       <table class="pc-data-table"> … </table>
 *       <p class="pc-data__stamp">Live data · last seen 2 days ago</p>
 *     </div>
 *
 *   Empty / no-signal state:
 *     <span class="pc-data pc-data--empty">Not enough data yet</span>
 *
 * Reuses the uae-system.css / plaidcars-cars.css tokens; all var() calls
 * carry literal fallbacks so the fragment styles even if those sheets
 * are not present on a given editorial template.
 * ---------------------------------------------------------------------
 */

.pc-data {
  font-variant-numeric: tabular-nums;
  color: var(--pc-ink, #1A1A1A);
}

/* Inline value chip — plate grammar (white rect, thin border, red tab). */
.pc-data--inline {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--pc-line-strong, #D5D5D5);
  border-radius: var(--pc-chip-radius, 5px);
  background: var(--pc-surface, #fff);
  line-height: 1.3;
  vertical-align: baseline;
}
.pc-data__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--pc-red, #990000);
}
.pc-data__value {
  font-size: 16px;
  font-weight: 600;
  color: var(--pc-ink, #1A1A1A);
}
.pc-data__unit {
  font-size: 11px;
  color: var(--pc-muted, #777);
}

/* Freshness stamp — quiet, never competes with the value. */
.pc-data__stamp {
  font-size: 11px;
  font-style: italic;
  color: var(--pc-faint, #999);
  margin: 4px 0 0;
}
.pc-data--inline .pc-data__stamp {
  margin: 0 0 0 2px;
  font-style: normal;
}

/* Block fragment + native data table. */
.pc-data--block {
  display: block;
  margin: 18px 0;
  max-width: 100%;
}
.pc-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.pc-data-table th,
.pc-data-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--pc-line, #E5E5E5);
}
.pc-data-table thead th {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pc-muted, #777);
  font-weight: 700;
}
.pc-data-table td {
  font-weight: 600;
  color: var(--pc-ink, #1A1A1A);
}
.pc-data-table tbody th {
  font-weight: 600;
  color: var(--pc-muted, #777);
}

/* No-signal state. */
.pc-data--empty {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--pc-faint, #999);
  border: 1px dashed var(--pc-line-strong, #D5D5D5);
  border-radius: var(--pc-chip-radius, 5px);
}

/* Narrow screens: let a wide data table scroll instead of breaking layout.
   The reserved min-height avoids CLS while async data resolves. */
@media (max-width: 540px) {
  .pc-data--block {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pc-data-table {
    min-width: 320px;
  }
}