/* CTO Breakdowns companion skill pages (/skills). Mobile first: most visitors
   arrive from an Instagram DM on a phone. Colours and fonts come from
   odd-site.css so these pages match the 3D shelf's cobalt scene. */
.skills-main {
  box-sizing: border-box;
  max-width: 720px; margin: 0 auto;
  padding: 28px 16px 64px;
  line-height: 1.6;
}
.skills-main *, .skills-main *::before, .skills-main *::after { box-sizing: border-box; }
.skills-site .eyebrow {
  display: inline-block; margin: 0 0 8px;
  font: 700 12px/1.4 var(--odd-body); letter-spacing: .14em; text-transform: uppercase;
}
.skills-main h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 9vw, 52px); line-height: 1.05; letter-spacing: -.02em;
}
.skills-lede { margin: 0 0 12px; font-size: 18px; color: var(--ink); }
.skills-episode, .skills-phone, .skills-crumb, .skills-note { color: var(--muted); font-size: 15px; }
.skills-crumb { margin: 0 0 18px; }
.skills-crumb a { text-decoration: none; }
.skills-crumb a::before { content: "← "; }
.skills-main code {
  font: 500 .92em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.skills-actions { display: grid; gap: 10px; margin: 24px 0 10px; }
.skills-download, .skills-share {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 20px; border-radius: 999px;
  font: 700 16px/1 var(--odd-body); text-decoration: none; cursor: pointer;
}
.skills-site a.skills-download { border: 1px solid; }
.skills-share {
  background: transparent; color: var(--ink);
  border: 1px solid #ffffff59;
}
.skills-share:hover { border-color: var(--accent); color: var(--accent); }
.skills-share[hidden] { display: none; }
.skills-phone { margin: 0 0 28px; }

.skills-card {
  display: block;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 16px; margin: 0 0 16px;
}
.skills-card h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.2; }
.skills-card p { margin: 0 0 12px; }

.skills-command {
  margin: 14px 0; border-radius: 12px; overflow: hidden;
  background: #1b2f55; border: 1px solid var(--line);
}
.skills-command-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line);
  font: 700 13px/1.4 var(--odd-body); letter-spacing: .04em; color: var(--muted);
}
.skills-copy {
  min-width: 76px; min-height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid #ffffff47;
  background: var(--accent); color: #20262c;
  font: 700 14px/1 var(--odd-body); cursor: pointer;
}
.skills-copy[data-copied] { background: #c7f0c2; }
.skills-command pre { margin: 0; padding: 12px 14px; white-space: pre-wrap; word-break: break-all; }
.skills-command code { color: #f5f2ea; font-size: 13.5px; }

.skills-preview summary {
  cursor: pointer; font: 600 18px/1.4 var(--odd-display); color: var(--ink);
}
.skills-preview pre {
  margin: 14px 0 0; max-height: 70vh; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--ink); font-size: 13px;
}

.skills-list { list-style: none; margin: 28px 0 0; padding: 0; }
.skills-site a.skills-item { color: var(--ink); text-decoration: none; }
.skills-site a.skills-item:hover { border-color: var(--accent); }
.skills-item p { color: var(--muted); }
.skills-item-episode { color: var(--accent); font-size: 14px; font-weight: 600; }

.skills-site footer.site .fine { margin: 0; }

@media (min-width: 640px) {
  .skills-main { padding: 48px 24px 80px; }
  .skills-actions { grid-template-columns: max-content max-content; }
  .skills-card { padding: 26px; }
}