/* ═══════════════════════════════════════════════════════════════════════
   OPERATORS LIBRARY — 8 · DE-TEMPLATE OVERRIDE LAYER
   Loaded LAST. Does not change layout, sections, nav, or flow.
   Kills the "boxed SaaS template" skin: cards → typography blocks,
   swipe files → dense archive list. Toolkit & inline tool cards are
   intentionally NOT touched — they keep the original card design.
   Delete this one file (and its line in layout.tsx) to fully revert.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero: remove radial glow, keep structure. Open air, more top space. */
.hero,
html.preload-dark .hero {
  background: var(--bg);
  padding-top: clamp(84px, 11vw, 150px);
}

/* ─────────────────────────────────────────────────────────────
   1 · CALLOUTS (.box) — from card to marked passage
   Semantic meaning carried by a single 2px rule + colored label.
   ───────────────────────────────────────────────────────────── */
.box,
.box-key, .box-insight, .box-tip, .box-info, .box-warning, .box-community {
  background: transparent;
  border: none;
  border-left: 2px solid var(--box-accent);
  border-radius: 0;
  box-shadow: none;
  padding: 4px 0 4px 22px;
  margin: 36px 0;
}
.box-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Quiet asides lose their tinted pill backgrounds */
.pacing-note,
.mistake,
.why {
  background: transparent;
  border: none;
  border-left: 2px solid var(--border3);
  border-radius: 0;
  padding: 2px 0 2px 18px;
  margin: 28px 0;
}
.mistake { border-left-color: var(--red); }
.why     { border-left-color: var(--accent); }

/* ─────────────────────────────────────────────────────────────
   2 · STEPS — numbered text blocks, no enclosure
   ───────────────────────────────────────────────────────────── */
.step {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 18px 0;
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.step:last-of-type { border-bottom: none; }
.step:hover { border-color: var(--border); box-shadow: none; }
.sn {
  background: transparent !important;
  border: none !important;
  color: var(--text3) !important;
  font-family: var(--font-mono);
  font-weight: 500;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────
   3 · FRAMEWORKS — heading-led passage, not a panel
   ───────────────────────────────────────────────────────────── */
.framework {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 44px 0;
}
.framework-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border2);
}

/* ─────────────────────────────────────────────────────────────
   4 · SWIPE FILES — curated archive list, not a content grid
   ───────────────────────────────────────────────────────────── */
.swipe-grid {
  display: block;
  margin: 8px 0 48px;
}
.swipe-card {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 18px;
  min-height: 0;
  padding: 16px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
.swipe-card:hover {
  transform: none;
  box-shadow: none;
  border-bottom-color: var(--border3);
}
.swipe-card:hover .swipe-card-title { color: var(--accent); }
.swipe-card-top { margin-bottom: 0; order: 3; margin-left: auto; flex: none; }
.swipe-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.swipe-card-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  transition: color 0.15s ease;
}
.swipe-card-tag {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text3);
}
.swipe-card-arrow { display: none; }
.swipe-card-footer {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  gap: 14px;
  flex: none;
  order: 2;
}
.swipe-card-source { font-size: 13px; }
.swipe-card-cta { font-size: 13px; font-weight: 600; }
@media (max-width: 640px) {
  .swipe-card { flex-direction: column; align-items: flex-start; gap: 6px; }
  .swipe-card-top { margin-left: 0; order: 0; }
  .swipe-card-footer { order: 3; }
}

/* Inspo board — assets on a table: image dominates, chrome removed */
.inspo-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 8px;
}
.inspo-card-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.inspo-expand-btn {
  border-radius: 0;
}

/* ─────────────────────────────────────────────────────────────
   6 · PILLS & TAGS — inline emphasis, not UI chips
   ───────────────────────────────────────────────────────────── */
.brand-tag {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--accent);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   7 · SPACING RHYTHM — break the even, predictable grid feel
   Section openers get generous air; lists stay dense.
   ───────────────────────────────────────────────────────────── */
.module-content h2 { margin-top: clamp(56px, 7vw, 88px); }
.module-content h3 { margin-top: 40px; }
.module-content h2 + p { margin-top: 14px; }