/* content.css — small custom layer for the ported content pages.
   Loaded AFTER tailwind.min.css. Everything else uses existing Tailwind
   utilities; this file only covers what utilities can't express cleanly:
   code blocks, the compatibility-matrix cell tones, and a couple of helpers. */

:root {
  --bsx-blue: #0073ff;
  --bsx-violet: #a855f7;
  --bsx-green: #2ad168;
  --bsx-yellow: #f8bb54;
  --bsx-red: #ef5944;
}

html { scroll-behavior: smooth; }

/* ---- Mono kicker label (section eyebrow) ---- */
.kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---- Code / terminal blocks ---- */
.code-block {
  background: #0b0f18;
  color: #e6edf3;
  border: 1px solid #1f2733;
  border-radius: 0.375rem;
  padding: 1.25rem 1.25rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre;
}
.code-block .c-comment { color: #6b7a90; }
.code-block .c-key { color: var(--bsx-violet); }
.code-block code { font: inherit; color: inherit; }

/* Row grids (arbitrary grid-template-columns aren't in the prebuilt Tailwind) */
.tl-row, .msg-row { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .tl-row  { grid-template-columns: 120px 180px 1fr; }
  .msg-row { grid-template-columns: 60px 240px 1fr; }
}

/* Inline command chips */
.cmd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--bsx-violet);
}

/* ---- Compatibility matrix ---- */
table.matrix { border-collapse: collapse; width: 100%; min-width: 760px; }
table.matrix th,
table.matrix td {
  border: 1px solid #eef1f5;
  padding: 0.55rem 0.4rem;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
table.matrix thead th,
table.matrix tbody th {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1f2937;
  background: #f9fafb;
}
table.matrix tbody th { text-align: left; white-space: nowrap; }
table.matrix .tag { color: var(--bsx-violet); font-size: 9px; letter-spacing: 0.12em; }
table.matrix td.self { background: #f3f4f6; }
/* swap-type tones: A muted (common), H + V saturated (rare) */
.mx-a { color: rgba(168, 85, 247, 0.7); }
.mx-h { color: var(--bsx-blue); font-weight: 600; }
.mx-v { color: var(--bsx-green); font-weight: 600; }
/* hover cross-highlight: row band + column band (pure CSS, no JS) */
table.matrix { overflow: hidden; }            /* clips the tall column overlay */
table.matrix td { position: relative; }
table.matrix tr:hover td { background: rgba(168, 85, 247, 0.05); }
table.matrix tr:hover th[scope="row"] { color: var(--bsx-violet); }
table.matrix td:hover::after {                 /* vertical band down the hovered column */
  content: ""; position: absolute; left: 0; top: -9999px;
  width: 100%; height: 19999px; z-index: -1; pointer-events: none;
  background: rgba(168, 85, 247, 0.05);
}

/* ---- Desktop-page hero: on wide screens, size the copy to its content and
   give the mockup the remaining width (mirrors the homepage hero behaviour). ---- */
@media (min-width: 1536px) {
  .dt-hero { flex-wrap: nowrap; }
  .dt-hero > .dt-hero-copy { width: auto; max-width: 42rem; flex: 0 1 auto; }
  .dt-hero > .dt-hero-mock { width: auto; flex: 1 1 0%; min-width: 0; }
}