/*
 * impeccable.style — shared styles for sub-pages and the site-wide header
 *
 * Imported by all generated pages under /skills, /anti-patterns, /tutorials,
 * and by the hand-authored pages (index, cheatsheet, gallery, privacy) via
 * a direct <link> tag so they all share the same header + prose typography.
 */

@import "./tokens.css";

/* ============================================
   SKIP LINK (a11y)
   ============================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================
   BASE
   ============================================ */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================
   SHARED SITE HEADER
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 14px clamp(var(--spacing-md), 4vw, var(--spacing-2xl));
  background: color-mix(in oklch, var(--color-paper) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--color-mist);
}

/* Kill any inherited text-decoration from page-level `a` rules. */
.site-header a,
.site-header a:hover {
  text-decoration: none;
  text-decoration-thickness: 0;
}

.site-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-header-brand:hover {
  color: var(--color-accent);
}

.site-header-brand-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
}

.site-header-brand-name {
  display: inline-block;
}

.site-header-right {
  display: flex;
  align-items: center;
  gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
  min-width: 0;
}

.site-header-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  min-width: 0;
}

.site-header-nav a {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--color-charcoal);
  padding: 4px 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-header-nav a:hover {
  color: var(--color-accent);
}

.site-header-nav a[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
}

.site-header-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* GitHub star pill — subtle, inviting nudge without shouting */
.site-header-github {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 99px;
  background: var(--color-cream);
  border: 1px solid var(--color-mist);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-charcoal);
  flex-shrink: 0;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.site-header-github svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.site-header-github:hover {
  background: var(--color-paper);
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.site-header-github-star {
  color: #f59e0b;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

@media (max-width: 820px) {
  .site-header {
    padding: 12px var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .site-header-brand {
    font-size: 1.0625rem;
  }

  .site-header-brand-logo {
    width: 22px;
    height: 22px;
  }

  .site-header-right {
    gap: var(--spacing-sm);
  }

  .site-header-nav {
    font-size: 0.8125rem;
    gap: var(--spacing-sm);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* fade the right edge so users see there's more to scroll */
    mask-image: linear-gradient(to right, black 0%, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 24px), transparent 100%);
  }

  .site-header-nav::-webkit-scrollbar {
    display: none;
  }

  .site-header-nav a[data-nav="home"] {
    /* Brand already acts as home link on mobile */
    display: none;
  }

  .site-header-github {
    padding: 4px 8px;
  }

  .site-header-github-label {
    display: none;
  }
}

@media (max-width: 480px) {
  .site-header-brand-name {
    /* Logo alone on narrow screens */
    display: none;
  }
}

/* ============================================
   SUB-PAGE LAYOUT SHELL
   ============================================ */

main#main {
  display: block;
}

.sub-page-content {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) 6rem;
}

.skill-detail {
  /* No max-width on the article itself. The editorial body sections
     (header, editorial wrapper, skill source, references) each cap
     themselves at 720px for readable line length, while the hero is
     allowed to break out on wide viewports. */
  width: 100%;
}

.sub-page-header {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.sub-page-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
}

.sub-page-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: var(--spacing-md);
}

.sub-page-lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-charcoal);
  max-width: 62ch;
}

/* ============================================
   DOCS-BROWSER LAYOUT (used by /skills)
   ============================================ */

:root {
  --site-header-height: 62px;
  --skills-sidebar-width: 200px;
}

.skills-layout-page main#main {
  /* Reset: the docs layout provides its own max-width container. */
  max-width: none;
  margin: 0;
  padding: 0;
}

.skills-layout {
  display: grid;
  grid-template-columns: var(--skills-sidebar-width) minmax(0, 1fr);
  gap: clamp(var(--spacing-lg), 4vw, var(--spacing-2xl));
  /*
   * Match horizontal padding to .site-header so the sidebar content lines
   * up with the brand logo in the nav bar above. Intentionally no max-width
   * so the docs-browser feels wall-to-wall on wide screens.
   */
  padding: 0 clamp(var(--spacing-md), 4vw, var(--spacing-2xl));
  align-items: start;
}

/* ============================================
   SIDEBAR
   ============================================ */

.skills-sidebar {
  position: sticky;
  top: var(--site-header-height);
  align-self: start;
  max-height: calc(100vh - var(--site-header-height));
  overflow-y: auto;
  padding: var(--spacing-lg) 0 var(--spacing-2xl);
  border-right: 1px solid var(--color-mist);
  scrollbar-width: thin;
  scrollbar-color: var(--color-mist) transparent;
}

.skills-sidebar::-webkit-scrollbar {
  width: 6px;
}

.skills-sidebar::-webkit-scrollbar-thumb {
  background: var(--color-mist);
  border-radius: 3px;
}

.skills-sidebar-inner {
  padding-right: var(--spacing-md);
}

/* Label at the top of the sidebar — hidden visually, kept for a11y tree. */
.skills-sidebar-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.skills-sidebar-group {
  margin-bottom: 1.5rem;
}

.skills-sidebar-group:last-child {
  margin-bottom: 0;
}

.skills-sidebar-divider {
  border: none;
  height: 1px;
  background: var(--color-mist);
  margin: 0 0 1.5rem 0;
  width: 100%;
}

.skills-sidebar-group-title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ash);
  margin-bottom: 6px;
  padding: 0;
}

.skills-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.skills-sidebar-list li {
  margin: 0;
}

.skills-sidebar-list a {
  display: block;
  /* No left padding: text starts at the column edge so it lines up with
     the header logo. The 2px active accent lives 2px to the left via a
     negative margin, sitting in the layout's horizontal padding gutter. */
  padding: 4px 0;
  margin-left: -2px;
  border-left: 2px solid transparent;
  padding-left: 2px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-charcoal);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.skills-sidebar-list a:hover {
  color: var(--color-accent);
}

.skills-sidebar-list a[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
  border-left-color: var(--color-accent);
}

/* ============================================
   OVERVIEW MAIN CONTENT
   ============================================ */

.skills-main {
  min-width: 0;
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(4rem, 8vw, 6rem);
}

.skills-overview-content {
  max-width: 720px;
}

.skills-overview-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.skills-overview-header .sub-page-lede a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
  font-family: var(--font-mono);
  font-weight: 500;
}

.skills-overview-howto {
  padding: var(--spacing-lg) var(--spacing-lg);
  background: var(--color-cream);
  border: 1px solid var(--color-mist);
  border-radius: 10px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.skills-overview-howto-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--spacing-sm);
}

.skills-overview-howto p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  max-width: 60ch;
}

.skills-overview-howto a {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  transition: color var(--duration-fast) var(--ease-out);
}

.skills-overview-howto a:hover {
  color: var(--color-accent);
}

.skills-overview-categories {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.skills-overview-category {
  padding-bottom: clamp(2rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--color-mist);
}

.skills-overview-category:last-child {
  border-bottom: none;
}

.skills-overview-category-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: 6px;
}

.skills-overview-category-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  font-style: italic;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.skills-overview-category-count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ash);
}

.skills-overview-category-desc {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  max-width: 58ch;
  margin-bottom: var(--spacing-md);
}

.skills-overview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skills-overview-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-mist);
  border-radius: 99px;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.skills-overview-chip:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-cream);
}

/* ============================================
   ANTI-PATTERNS INDEX
   ============================================ */

.anti-patterns-sidebar-list a {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.anti-patterns-sidebar-count {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-ash);
  font-variant-numeric: tabular-nums;
}

.anti-patterns-content {
  max-width: 820px;
}

.anti-patterns-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.anti-patterns-header .sub-page-lede code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--color-ink);
  background: var(--color-cream);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--color-mist);
}

.anti-patterns-header .sub-page-lede a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9375em;
}

.anti-patterns-legend {
  padding: var(--spacing-lg);
  background: var(--color-cream);
  border: 1px solid var(--color-mist);
  border-radius: 10px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 720px;
}

.anti-patterns-legend-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--spacing-sm);
}

.anti-patterns-legend p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-charcoal);
}

.anti-patterns-legend a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: 500;
}

.anti-patterns-legend a:hover {
  color: var(--color-accent);
}

.anti-patterns-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 4.5rem);
}

.anti-patterns-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-mist);
  margin-bottom: var(--spacing-lg);
}

.anti-patterns-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  font-style: italic;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.anti-patterns-section-count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ash);
}

.rule-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-md);
}

.rule-card {
  padding: var(--spacing-md);
  background: var(--color-paper);
  border: 1px solid var(--color-mist);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.rule-card:hover {
  border-color: var(--color-ash);
}

.rule-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: 2px;
}

.rule-card-id {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-ash);
  background: transparent;
  padding: 0;
  border: none;
}

.rule-card-category {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 99px;
}

.rule-card-category[data-category="slop"] {
  color: var(--color-accent);
  background: var(--color-accent-dim);
}

.rule-card-category[data-category="quality"] {
  color: var(--color-charcoal);
  background: var(--color-mist);
}

.rule-card-name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.35;
}

.rule-card-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-charcoal);
  flex: 1;
}

.rule-card-skill-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-charcoal);
  text-decoration: none;
  align-self: flex-start;
  padding-top: 4px;
  transition: color var(--duration-fast) var(--ease-out);
}

.rule-card-skill-link:hover {
  color: var(--color-accent);
}

.rule-card-skill-link::after {
  content: " →";
}

/* ============================================
   TUTORIALS INDEX
   ============================================ */

.tutorials-content {
  max-width: 720px;
}

.tutorial-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.tutorial-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-paper);
  border: 1px solid var(--color-mist);
  border-radius: 10px;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.tutorial-card:hover {
  border-color: var(--color-ink);
}

.tutorial-card-number {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-ash);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tutorial-card:hover .tutorial-card-number {
  color: var(--color-accent);
}

.tutorial-card-body {
  min-width: 0;
}

.tutorial-card-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.2;
  margin-bottom: 4px;
}

.tutorial-card-tagline {
  font-size: 0.9375rem;
  color: var(--color-charcoal);
  line-height: 1.5;
}

.tutorial-card-arrow {
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: var(--color-ash);
  transition: color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.tutorial-card:hover .tutorial-card-arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* ============================================
   TUTORIAL EMBEDS (live overlays, screenshots)
   ============================================ */

.tutorial-embed {
  margin: var(--spacing-lg) 0 var(--spacing-xl);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-mist);
  box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.12);
  max-width: none;
}

.tutorial-embed-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-mist);
}

.tutorial-embed-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tutorial-embed-dot.red { background: #ff5f56; }
.tutorial-embed-dot.yellow { background: #ffbd2e; }
.tutorial-embed-dot.green { background: #27c93f; }

.tutorial-embed-title {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ash);
}

.tutorial-embed-iframe {
  display: block;
  width: 100%;
  height: 520px;
  border: none;
  background: white;
}

.tutorial-embed-caption {
  font-size: 0.8125rem;
  color: var(--color-ash);
  margin-top: var(--spacing-sm);
  font-style: italic;
  max-width: 60ch;
}

/* ============================================
   TUTORIAL DETAIL
   ============================================ */

.tutorial-detail {
  max-width: 680px;
}

.tutorial-detail-header {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.tutorial-detail-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: var(--spacing-md);
}

.tutorial-detail-tagline {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.55;
  color: var(--color-charcoal);
  max-width: 60ch;
}

.tutorial-detail-body {
  max-width: 65ch;
}

/* ============================================
   MOBILE: collapse sidebar into inline block
   ============================================ */

@media (max-width: 920px) {
  .skills-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .skills-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--color-mist);
    padding: var(--spacing-md) 0 var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .skills-sidebar-inner {
    padding-right: 0;
  }

  .skills-sidebar-group {
    margin-bottom: var(--spacing-md);
  }
}

/* ============================================
   SKILL DETAIL — BEFORE/AFTER DEMO
   ============================================ */

/* Ported from main.css for use on sub-pages. The split-compare effect
   is initialized by js/effects/split-compare.js loaded on demand. */

.split-comparison {
  position: relative;
  width: 100%;
  /* 500px visible + 64px buffer (32px per side) = 564px total.
     box-sizing: border-box is inherited, so children sit in 500px. */
  max-width: 564px;
  /* 32px padding is an invisible hover buffer so the divider does not
     immediately snap back when the pointer grazes the visible box
     edge. Negative top/bottom margins collapse the padding out of
     layout flow so the demo keeps its rhythm in the page. */
  padding: 32px;
  margin: -32px 0 calc(clamp(2rem, 4vw, 3rem) - 32px);
}

.split-container {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: 12px;
  overflow: hidden;
  /* Match the page background so the 32px padding area is invisible.
     The border + border-radius define the visible box; individual
     demo content provides its own colors on top. */
  background: var(--color-paper);
  border: 1px solid var(--color-mist);
  cursor: ew-resize;
  user-select: none;
}

.split-before,
.split-after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-before {
  z-index: 1;
}

.split-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No padding: demos that fill the container (overdrive) need full
     bleed, and demos with smaller content (polish, bolder) already
     center themselves via flex. */
}

.split-after {
  clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
  z-index: 2;
  background: var(--color-paper);
}

.split-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--color-accent);
  transform: translateX(-50%) skewX(-10deg);
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.split-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ash);
}

.split-label-item[data-point="before"] {
  color: var(--color-ash);
}

.split-label-item[data-point="after"] {
  color: var(--color-accent);
}

.skill-demo-caption {
  font-size: 0.8125rem;
  color: var(--color-ash);
  margin-top: 12px;
  font-style: italic;
  max-width: 500px;
}

.skill-demo-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ash);
  margin-bottom: var(--spacing-sm);
}

/* ============================================
   SKILL DETAIL
   ============================================ */

/* Editorial hero: on wide viewports, text header on the left and the
   before/after demo floats to the right as a hero module and is allowed
   to break out of the 720px body cap. On narrow viewports everything
   stacks within the 720px column. */
.skill-detail-hero {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* Stacked spacing between header and demo on narrow viewports; cancelled
   when the hero switches to two columns at >=1280px. */
.skill-detail-hero--has-demo .skill-demo {
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

@media (min-width: 1280px) {
  .skill-detail-hero--has-demo {
    /* Wider editorial hero at large viewports. Fixed 564px demo column
       (500px visible + 64px hover buffer) keeps the split-container at
       its designed 500x360 landscape aspect ratio. Text column takes
       whatever's left, clamped by the hero's own max-width. */
    max-width: 1200px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 564px;
    gap: clamp(var(--spacing-xl), 4vw, var(--spacing-2xl));
    align-items: center;
  }

  .skill-detail-hero--has-demo .skill-detail-header {
    margin-bottom: 0;
  }

  .skill-detail-hero--has-demo .skill-demo {
    align-self: center;
    margin-top: 0;
  }
}

/* Body sections stay at a readable line length regardless of the hero
   width above them. */
.skill-detail-editorial,
.skill-source-card,
.skill-references {
  max-width: 720px;
}

.skill-detail-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ash);
  margin-bottom: var(--spacing-sm);
}

.skill-detail-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.skill-detail-eyebrow a:hover {
  color: var(--color-accent);
}

.skill-detail-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: var(--spacing-md);
  white-space: nowrap;
}

.skill-detail-title-slash {
  color: var(--color-accent);
  font-weight: 300;
}

.skill-detail-tagline {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 400;
  color: var(--color-charcoal);
  line-height: 1.55;
  max-width: 60ch;
  margin-bottom: var(--spacing-md);
}

.skill-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--spacing-sm);
}

.skill-meta-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--color-cream);
  border: 1px solid var(--color-mist);
  color: var(--color-charcoal);
}

.skill-meta-category[data-category="create"] {
  background: var(--cat-create-bg);
  border-color: var(--cat-create-border);
  color: var(--cat-create-text);
}

.skill-meta-category[data-category="evaluate"] {
  background: var(--cat-evaluate-bg);
  border-color: var(--cat-evaluate-border);
  color: var(--cat-evaluate-text);
}

.skill-meta-category[data-category="refine"] {
  background: var(--cat-refine-bg);
  border-color: var(--cat-refine-border);
  color: var(--cat-refine-text);
}

.skill-meta-category[data-category="simplify"] {
  background: var(--cat-simplify-bg);
  border-color: var(--cat-simplify-border);
  color: var(--cat-simplify-text);
}

.skill-meta-category[data-category="harden"] {
  background: var(--cat-harden-bg);
  border-color: var(--cat-harden-border);
  color: var(--cat-harden-text);
}

.skill-meta-category[data-category="system"] {
  background: var(--cat-system-bg);
  border-color: var(--cat-system-border);
  color: var(--cat-system-text);
}

.skill-meta-args {
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.skill-detail-editorial {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* "The skill itself" card: visually contains the auto-rendered SKILL.md
   body so it reads as a distinct reference block, not a continuation of
   the editorial section above. */
.skill-source-card {
  background: var(--color-paper);
  border: 1px solid var(--color-mist);
  border-radius: 12px;
  padding: clamp(var(--spacing-md), 3vw, var(--spacing-xl));
  margin-top: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 1px 0 oklch(90% 0 0);
}

.skill-source-card-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-mist);
}

.skill-source-card-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  padding: 3px 8px;
  background: var(--color-accent-dim);
  border-radius: 4px;
  flex-shrink: 0;
}

.skill-source-card-subtitle {
  font-size: 0.8125rem;
  color: var(--color-ash);
  font-style: italic;
}

.skill-source-card-body {
  max-width: none;
}

.skill-source-card-body > :first-child {
  margin-top: 0;
}

.skill-source-card-body > :last-child {
  margin-bottom: 0;
}

.skill-references {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--color-mist);
}

.skill-references-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--spacing-md);
}

.skill-reference {
  border-top: 1px solid var(--color-mist);
}

.skill-reference:last-child {
  border-bottom: 1px solid var(--color-mist);
}

.skill-reference > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  transition: color var(--duration-fast) var(--ease-out);
}

.skill-reference > summary::-webkit-details-marker {
  display: none;
}

.skill-reference > summary::before {
  content: "+";
  flex-shrink: 0;
  width: 18px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-accent);
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-out);
}

.skill-reference[open] > summary::before {
  transform: rotate(45deg);
}

.skill-reference > summary:hover {
  color: var(--color-accent);
}

.skill-reference-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ash);
  flex-shrink: 0;
}

.skill-reference-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--color-ink);
}

.skill-reference-body {
  padding: var(--spacing-sm) 0 var(--spacing-md) 34px;
  max-width: 62ch;
}

/* ============================================
   PROSE — rendered markdown bodies
   ============================================ */

.prose {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  max-width: 65ch;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  color: var(--color-ink);
  font-weight: 600;
  line-height: 1.25;
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.prose h1 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 500; font-style: italic; }
.prose h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-style: italic; margin-top: 2.2em; }
.prose h3 { font-size: 1.125rem; margin-top: 1.8em; }
.prose h4 { font-size: 1rem; }

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose p {
  margin-top: 0;
  margin-bottom: 1.1em;
}

.prose ul,
.prose ol {
  margin: 0 0 1.2em 0;
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: 0.4em;
}

.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-accent-dim);
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.prose a:hover {
  text-decoration-color: var(--color-accent);
}

.prose strong {
  color: var(--color-ink);
  font-weight: 600;
}

.prose em {
  font-style: italic;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-cream);
  border: 1px solid var(--color-mist);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-ink);
}

.prose .code-block-wrap {
  position: relative;
  margin: 1.25em 0;
}

.prose .code-block-wrap .code-block {
  margin: 0;
}

.prose .code-block {
  padding: var(--spacing-md);
  background: oklch(12% 0.005 350);
  color: oklch(92% 0.005 350);
  border-radius: 10px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  border: 1px solid oklch(20% 0.005 350);
}

.code-block-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  background: oklch(20% 0.005 350);
  border: 1px solid oklch(30% 0.005 350);
  color: oklch(78% 0.005 350);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.code-block-wrap:hover .code-block-copy,
.code-block-copy:focus-visible {
  opacity: 1;
}

.code-block-copy::before {
  content: "Copy";
}

.code-block-copy:hover {
  background: oklch(30% 0.005 350);
  color: oklch(92% 0.005 350);
  border-color: oklch(40% 0.005 350);
}

.code-block-copy.is-copied {
  opacity: 1;
  background: var(--color-accent);
  color: var(--color-paper);
  border-color: var(--color-accent);
}

.code-block-copy.is-copied::before {
  content: "Copied";
}

.prose .code-block code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.prose blockquote {
  margin: 1.5em 0;
  padding: 0 0 0 var(--spacing-md);
  border-left: 3px solid var(--color-mist);
  color: var(--color-ash);
  font-style: italic;
}

.prose hr {
  border: none;
  height: 1px;
  background: var(--color-mist);
  margin: 2.5em 0;
}