/* CodeTrain - the skill band: the free CodeTrain skill, shown on / and /solo as section #skill.

   One stylesheet for both pages because the band is the same markup on both, and the two pages
   otherwise carry separate copies of the same base styles (home.css and /solo's inline block).
   Everything here builds on what those copies share: --panel, --line, --ink, --muted, --mint,
   --mono, --radius, .eyebrow, .sub, .btn, .cta-row and .micro. theme-light.css overrides the
   colour variables, so the text, buttons and list follow the theme on their own. The command
   block does not invert, by the rule theme-light.css already states for the demo editor: "Code
   surfaces stay dark-on-light rather than inverting: a code block that matches the page loses
   the thing that makes it read as code." Its light-theme rules at the bottom of this file reuse
   that rule's exact colours, and keep the dark-theme colours for what sits inside the block.

   The command block is `.card`'s recipe (the gradient, the teal-tinted border, --radius), so it
   reads as part of the page rather than a pasted widget. */

.skill-cmd {
  margin-top: 28px;
  max-width: 720px;
  background: linear-gradient(180deg, rgba(23, 29, 38, .72), rgba(19, 24, 31, .55));
  border: 1px solid rgba(57, 170, 170, .14);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Three dots: a terminal's title bar, decoration only (aria-hidden in the markup). */
.skill-cmd-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(57, 170, 170, .10);
}
.skill-cmd-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}

.skill-cmd-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
}
/* The prompt and the command are one line of text, so the "$" never sits alone on a phone.
   Each word of the command is its own nowrap span, so the line wraps only at the spaces: never
   after the "--" of --skill (a break a browser otherwise allows after any hyphen), never inside
   agent-skills. The spans add no characters, so the copy button and a hand selection both get
   the command exactly. Ligatures are off because JetBrains Mono joins "--" into one long dash,
   and a reader typing the command by hand has to see two hyphens. */
.skill-cmd-line {
  flex: 1 1 260px;
  min-width: 0;
}
.skill-cmd-line .prompt {
  color: var(--mint);
  user-select: none;
}
.skill-cmd-line code {
  color: var(--ink);
  font: inherit;
  background: none;
  padding: 0;
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
}
.skill-cmd-line code span { white-space: nowrap; }

.skill-copy {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.skill-copy:hover { border-color: rgba(57, 170, 170, .45); }
.skill-copy:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.skill-copy.is-copied { border-color: var(--mint); color: var(--mint); }
/* The markup ships the button `hidden` and copy.js reveals it, so a reader without JavaScript
   never gets a button that does nothing. `.skill-copy` sets no display of its own, but an
   explicit rule keeps it that way if somebody later adds one. */
.skill-copy[hidden] { display: none; }

.skill-node {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

.skill-facts {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  color: var(--muted);
  font-size: 14.5px;
}
.skill-facts li {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.skill-facts li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  transform: translateY(-2px);
}

/* The copy confirmation for screen readers: present in the accessibility tree, not on screen. */
.skill-band .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root[data-theme="light"] .skill-cmd {
  background: #0f141b;
  border-color: #22303f;
}
:root[data-theme="light"] .skill-cmd-bar { border-bottom-color: #22303f; }
:root[data-theme="light"] .skill-cmd-bar i { background: #2a3746; }
:root[data-theme="light"] .skill-cmd-line .prompt { color: #39aaaa; }
/* theme-light.css gives every `code` a light chip; inside a dark surface that chip is wrong. */
:root[data-theme="light"] .skill-cmd-line code { background: none; color: #e8ecf2; }
:root[data-theme="light"] .skill-copy { color: #e8ecf2; border-color: #22303f; }
:root[data-theme="light"] .skill-copy:hover { border-color: rgba(57, 170, 170, .45); }
:root[data-theme="light"] .skill-copy:focus-visible { outline-color: #39aaaa; }
:root[data-theme="light"] .skill-copy.is-copied { color: #39aaaa; border-color: #39aaaa; }