/* Spor marketing — feature sub-pages.
 * Layered on top of assets/home.css: reuses its component vocabulary
 * (sp-nav, sp-btn, sp-panel, sp-kicker, type scale, sp-trail, sp-q, cw-*,
 * sp-footer) and adds only the few patterns the deeper pages need.
 * Same rules as home.css: OKLCH-only via var(--*) tokens, no raw color,
 * one glacial-teal voice, mono for figures, flat at rest. */

/* ── sub-page hero / section rhythm ───────────────────────── */
.sp-subhero { padding: 60px 0 72px; }
.sp-eyebrow {
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut);
}
.sp-eyebrow a { color: var(--mut); text-decoration: none; }
.sp-eyebrow a:hover { color: var(--accent); }
.sp-section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }

/* ── feature card grids ───────────────────────────────────── */
.sp-fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sp-fgrid.is-2 { grid-template-columns: repeat(2, 1fr); }
.sp-fgrid.is-4 { grid-template-columns: repeat(4, 1fr); }
.sp-fcard { padding: 22px; display: flex; flex-direction: column; gap: 11px; }
.sp-fcard.is-tight { padding: 17px; gap: 7px; }
.sp-fcard-name { font-weight: 650; color: var(--fg); font-size: var(--text-base); }
.sp-fcard-body { color: var(--mut); font-size: var(--text-sm); line-height: 1.55; margin: 0; }

/* ── accent-dotted feature list ───────────────────────────── */
.sp-flist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sp-flist li { position: relative; padding-left: 20px; color: var(--fg); font-size: var(--text-sm); line-height: 1.5; }
.sp-flist li::before {
  content: ""; position: absolute; left: 1px; top: 0.5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ── node-type legend (graph page) ────────────────────────── */
.sp-types {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-2); overflow: hidden;
}
.sp-type { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; background: var(--card); }
.sp-type .sp-dot { margin-top: 5px; }
.sp-type-label { font-family: var(--mono); font-size: var(--text-sm); color: var(--fg); font-weight: 600; }
.sp-type-blurb { display: block; font-size: var(--text-xs); color: var(--mut); margin-top: 2px; line-height: 1.4; }

/* ── definition / edge glossary ───────────────────────────── */
.sp-deflist { display: flex; flex-direction: column; }
.sp-def { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.sp-def:last-child { border-bottom: 0; }
.sp-def-term { font-family: var(--mono); font-size: var(--text-sm); color: var(--accent); flex: 0 0 9em; }
.sp-def-gloss { color: var(--mut); font-size: var(--text-sm); line-height: 1.5; }

/* ── CLI block (integrations page) ────────────────────────── */
.sp-cli { font-family: var(--mono); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg); overflow: hidden; }
.sp-cli-row { display: flex; align-items: baseline; gap: 16px; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); }
.sp-cli-row:last-child { border-bottom: 0; }
.sp-cli-cmd { color: var(--fg); font-size: var(--text-sm); white-space: nowrap; }
.sp-cli-cmd::before { content: "$ "; color: var(--accent); }
.sp-cli-gloss { color: var(--mut); font-size: var(--text-xs); margin-left: auto; text-align: right; line-height: 1.4; }

/* ── scored queue rows (queue page, standalone) ───────────── */
.sp-scored { display: flex; flex-direction: column; }
.sp-scored-row { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
.sp-scored-row:last-child { border-bottom: 0; }
.sp-scored-top { display: flex; align-items: flex-start; gap: 10px; }
.sp-scored-kind { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: var(--text-xs); color: var(--mut); flex: 0 0 auto; padding-top: 3px; }
.sp-scored-name { flex: 1; min-width: 0; color: var(--fg); font-weight: 600; line-height: 1.4; }
.sp-scored-why { font-size: var(--text-sm); color: var(--mut); line-height: 1.45; }
.sp-scored-id { display: flex; align-items: baseline; gap: 9px; }

/* ── two-tier panel internals (integrations page) ─────────── */
.sp-tier { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sp-tier-head { display: flex; align-items: center; gap: 10px; }
.sp-tier-price { margin-left: auto; font-family: var(--mono); font-size: var(--text-xs); color: var(--mut); }
.sp-tier-body { color: var(--mut); font-size: var(--text-base); line-height: 1.55; margin: 0; }

/* ── correction before / after (context page) ─────────────── */
.sp-corr { display: flex; flex-direction: column; gap: 10px; }
.sp-corr-row { display: flex; gap: 13px; align-items: flex-start; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--card); }
.sp-corr-tag { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); flex: 0 0 4.5em; padding-top: 2px; }
.sp-corr-row.is-fix .sp-corr-tag { color: var(--accent); }
.sp-corr-row.is-fix { border-color: var(--accent); background: var(--accent-soft); }
.sp-corr-text { color: var(--fg); font-size: var(--text-sm); line-height: 1.5; }

/* ── "drew from" list (briefing panel) ────────────────────── */
.sp-drew { display: flex; flex-direction: column; gap: 9px; padding: 4px 0; }
.sp-drew .sp-tag { align-self: flex-start; }
.sp-panel-note { padding: 12px 16px; border-top: 1px solid var(--line-soft); color: var(--mut); font-size: var(--text-sm); line-height: 1.5; }

/* ── cross-page "keep exploring" cards ────────────────────── */
.sp-explore { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sp-xcard { display: flex; flex-direction: column; gap: 6px; padding: 18px; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out); }
.sp-xcard:hover { border-color: var(--mut); }
.sp-xtitle { color: var(--fg); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sp-xtitle::after { content: "\2192"; margin-left: auto; color: var(--accent); transition: transform var(--dur-fast) var(--ease-out); }
.sp-xcard:hover .sp-xtitle::after { transform: translateX(3px); }
.sp-xkicker { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.sp-xblurb { color: var(--mut); font-size: var(--text-sm); line-height: 1.5; }

/* a plain prose paragraph inside a copy column */
.sp-copy-body { color: var(--mut); font-size: var(--text-base); line-height: 1.62; margin: 0; max-width: 34em; }

/* ── "across a session" numbered moments (context page) ───── */
.sp-moments { display: flex; flex-direction: column; padding: 4px 18px 14px; }
.sp-moment { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.sp-moment:last-child { border-bottom: 0; }
.sp-moment-num { font-family: var(--mono); font-size: var(--text-sm); color: var(--accent); font-weight: 600; flex: 0 0 auto; padding-top: 1px; }
.sp-moment-b { display: flex; flex-direction: column; gap: 4px; }
.sp-moment-h { font-weight: 600; color: var(--fg); font-size: var(--text-base); }
.sp-moment-body { color: var(--mut); font-size: var(--text-sm); line-height: 1.5; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .sp-fgrid, .sp-fgrid.is-4 { grid-template-columns: 1fr 1fr; }
  .sp-types { grid-template-columns: 1fr; }
  /* once the hero/feature grid is a single column, let it shrink to the
   * viewport instead of expanding to a child's min-content (grid items
   * default to min-width:auto, which otherwise blows the page wider). */
  .sp-hero-grid > * { min-width: 0; }
}
@media (max-width: 680px) {
  .sp-fgrid, .sp-fgrid.is-2, .sp-fgrid.is-4 { grid-template-columns: 1fr; }
  .sp-explore { grid-template-columns: 1fr; }
  .sp-def { flex-direction: column; gap: 3px; }
  .sp-def-term { flex-basis: auto; }
  .sp-cli-row { flex-direction: column; gap: 3px; }
  .sp-cli-gloss { margin-left: 0; text-align: left; }
  .sp-subhero { padding: 44px 0 52px; }

  /* Mono labels and ids default to white-space:nowrap (in home.css); on narrow
   * screens a long id like question-checkout-without-account would force the
   * whole page wider than the viewport. Let them wrap/break here instead. */
  .sp-record-k, .sp-record-v, .sp-trail-id, .sp-tag,
  .cw-host, .cw-app-tool, .cw-task-id, .sp-scored-id, .cw-code,
  .sp-panel-title, .sp-panel-meta, .sp-q-title { white-space: normal; }
  .sp-panel-head { flex-wrap: wrap; }
  .sp-record { grid-template-columns: auto minmax(0, 1fr); }
  .sp-record-v, .sp-trail-body, .cw-task, .sp-scored-row, .sp-q-title { min-width: 0; }
  .cw-code, .sp-cli-cmd, .cw-task-name, .sp-scored-name,
  .sp-trail-title, .cw-app-code { overflow-wrap: anywhere; }
  .cw-widget-head { flex-wrap: wrap; }
}

/* a slightly tighter nav so five product links fit comfortably */
.sp-nav-links { gap: var(--sp-4); }
@media (max-width: 1080px) { .sp-nav-meta { display: none; } }