/*
 * /sensor — RAXE Sensor page styles
 * Depends on: tokens.css, base.css, components/*
 */

/* ── Responsive card grids ── */
.sen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.sen-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 760px) {
  .sen-grid-2 { grid-template-columns: 1fr; }
}

/* ── Say/do gap panel: gateway claim vs kernel reality ── */
.saydo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.saydo-col { background: var(--surface-overlay); padding: var(--space-6); }
.saydo-col-head {
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.saydo-claim .saydo-col-head   { color: var(--cyan); }
.saydo-reality .saydo-col-head { color: var(--magenta); }
.saydo-line {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  color: #c8d6e5; line-height: 1.65; word-break: break-word;
}
.saydo-note { font-size: var(--fs-label); color: var(--text-dim); margin-top: var(--space-3); }
.saydo-foot {
  grid-column: 1 / -1;
  background: var(--surface-raised);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-muted);
  display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center;
}
.saydo-foot .verify { color: #34d399; }
@media (max-width: 760px) {
  .saydo { grid-template-columns: 1fr; }
}

/* ── "Illustrative sample" tag ── */
.sample-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9px; font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--amber); border: 1px solid var(--border-amber);
  background: rgba(245,158,11,0.07);
  padding: 3px 10px; border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

/* ── Roadmap badge (amber, distinct from validated green) ── */
.badge-roadmap {
  background: rgba(245,158,11,0.10);
  color: var(--amber);
  border-color: var(--border-amber);
}

/* ── Form-factor tag ([host] / [sdk]) ── */
.sen-ff-tag {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  color: var(--cyan); background: rgba(56,189,248,0.08);
  padding: 2px 8px; border-radius: var(--radius-md);
  border: 1px solid rgba(56,189,248,0.2);
}

/* ── Footnote line for absolute claims / table notes ── */
.sen-footnote {
  font-size: var(--fs-label); color: var(--text-dim);
  margin-top: var(--space-4);
}
.sen-footnote a { color: var(--text-muted); text-decoration: underline; }
.sen-footnote a:hover { color: var(--text-brand); }

/* ── Stage pill in the final CTA ── */
.sen-stage {
  margin-bottom: var(--space-6);
  display: inline-flex;
}