/* Sweeppea CLI docs — shared stylesheet.
   Extracted from index.html so the skill page cannot drift from the home
   page's palette and typography. Edit here, not in a <style> block. */

/* ---- theme tokens ----
     Palette shared with mcpdocs.sweeppea.com: GitHub-dark for dark mode,
     Night Owl Light for light mode. Light is the default; dark kicks in via
     prefers-color-scheme and can be forced with data-theme. ---- */
  :root {
    color-scheme: light;
    --bg:        #fbfbfb;
    --bg-raised: #ffffff;
    --bg-inset:  #f0f0f0;
    --fg:        #403f53;
    --fg-dim:    #6a6a7a;
    --fg-faint:  #989fb1;
    --accent:    #2a9a8f;
    --accent-hi: #1f7d74;
    --blue:      #4876d6;
    --green:     #2a9a8f;
    --line:      #e0e0e0;
    --line-soft: #ededed;
    --shadow:    0 8px 32px rgba(0,0,0,.08);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg:        #0d1117;
      --bg-raised: #161b22;
      --bg-inset:  #21262d;
      --fg:        #c9d1d9;
      --fg-dim:    #8b949e;
      --fg-faint:  #484f58;
      --accent:    #56a363;
      --accent-hi: #7ec78c;
      --blue:      #7a9bb8;
      --green:     #56a363;
      --line:      #30363d;
      --line-soft: #21262d;
      --shadow:    0 8px 32px rgba(0,0,0,.40);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg:        #0d1117;
    --bg-raised: #161b22;
    --bg-inset:  #21262d;
    --fg:        #c9d1d9;
    --fg-dim:    #8b949e;
    --fg-faint:  #484f58;
    --accent:    #56a363;
    --accent-hi: #7ec78c;
    --blue:      #7a9bb8;
    --green:     #56a363;
    --line:      #30363d;
    --line-soft: #21262d;
    --shadow:    0 8px 32px rgba(0,0,0,.40);
  }

  :root {
    --mono: 'JetBrains Mono', 'Fira Code', 'Consolas', ui-monospace, Menlo, monospace;
    --measure: 68ch;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color .3s ease, color .3s ease;
  }
  a { color: var(--accent); text-decoration: none; }
  a:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
  code { color: var(--accent); }

  .wrap { width: 100%; max-width: 940px; margin: 0 auto; padding: 0 24px; }

  /* ---- top bar ---- */
  header.bar {
    position: sticky; top: 0; z-index: 10;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line-soft);
  }
  .bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 54px; }
  .brand { display: flex; align-items: baseline; gap: 8px; font-weight: 700; letter-spacing: .01em; color: var(--fg); }
  .brand .mark { color: var(--accent); font-weight: 800; }
  .brand .dim { color: var(--fg-dim); font-weight: 400; }
  .brand:hover { text-decoration: none; }
  .bar .right { display: flex; align-items: center; gap: 20px; }
  .bar nav { display: flex; gap: 20px; font-size: 13px; }
  .bar nav a { color: var(--fg-dim); white-space: nowrap; }
  .bar nav a:hover { color: var(--accent); text-decoration: none; }
  @media (max-width: 760px) { .bar nav a:not(:last-child) { display: none; } }
  .toggle {
    display: inline-grid; place-items: center; width: 32px; height: 32px;
    background: transparent; border: 1px solid var(--line); border-radius: 7px;
    color: var(--fg-dim); cursor: pointer; font-size: 15px; line-height: 1;
    transition: border-color .15s, color .15s;
  }
  .toggle:hover { color: var(--accent); border-color: var(--accent); }

  /* ---- hero ---- */
  .hero { padding: 68px 0 40px; }
  .eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
  h1 { font-size: clamp(30px, 5.4vw, 48px); line-height: 1.12; font-weight: 800; letter-spacing: -.015em; margin: 0 0 16px; text-wrap: balance; }
  h1 .accent { color: var(--accent); }
  .lede { font-size: clamp(15px, 2.1vw, 18px); color: var(--fg-dim); max-width: var(--measure); margin: 0 0 30px; }
  .lede b { color: var(--fg); font-weight: 600; }

  /* ---- terminal window ---- */
  .term {
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: 11px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .term .titlebar {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
    background: var(--bg-inset);
  }
  .dot { width: 11px; height: 11px; border-radius: 50%; }
  .dot.r { background: #c76560; } .dot.y { background: #b89b42; } .dot.g { background: var(--green); }
  .term .titlebar .name { margin-left: 8px; font-size: 12px; color: var(--fg-faint); letter-spacing: .04em; }
  .term .body { padding: 20px 22px; font-size: 14px; line-height: 1.75; overflow-x: auto; }
  .term pre { margin: 0; font: inherit; white-space: pre; }
  .prompt { color: var(--accent); font-weight: 600; }
  .cmd { color: var(--fg); }
  .out { color: var(--fg-dim); }
  .ok { color: var(--green); }
  .comment { color: var(--fg-faint); }
  .cursor {
    display: inline-block; width: 9px; height: 1.05em; vertical-align: -0.18em;
    background: var(--accent); margin-left: 3px; animation: blink 1.1s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

  /* ---- sections ---- */
  section { padding: 46px 0; border-top: 1px solid var(--line-soft); }
  .sec-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 22px; }
  .sec-head .hash { color: var(--accent); font-weight: 700; }
  h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
  .sec-sub { color: var(--fg-dim); max-width: var(--measure); margin: -10px 0 26px; font-size: 14px; }

  .code {
    background: var(--bg-raised); border: 1px solid var(--line);
    border-radius: 9px; padding: 16px 18px; overflow-x: auto;
    font-size: 13.5px; line-height: 1.85;
  }
  .code pre { margin: 0; font: inherit; white-space: pre; }

  .two { display: grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 620px) { .two { grid-template-columns: 1fr 1fr; } }

  .note {
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 9px; padding: 20px 22px;
  }
  .note .tag { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
  .note p { margin: 0 0 12px; color: var(--fg-dim); max-width: var(--measure); }
  .note p:last-child { margin-bottom: 0; }
  .note strong { color: var(--fg); font-weight: 600; }
  ol.steps { margin: 6px 0 0; padding-left: 22px; color: var(--fg-dim); }
  ol.steps li { margin: 6px 0; }

  .cmds { display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .cmds { grid-template-columns: 1fr 1fr; } }
  .card {
    background: var(--bg-raised); border: 1px solid var(--line-soft);
    border-radius: 9px; padding: 16px 18px; transition: border-color .15s, transform .15s, box-shadow .15s;
  }
  .card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
  .card h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
  .card h3 .p { color: var(--accent); }
  .card h3 .n { color: var(--fg); }
  .card p { margin: 0 0 12px; font-size: 13px; color: var(--fg-dim); }
  .subs { display: flex; flex-wrap: wrap; gap: 6px; }
  .subs span { font-size: 11.5px; color: var(--fg-dim); background: var(--bg-inset); border: 1px solid var(--line-soft); border-radius: 5px; padding: 2px 7px; }
  .card.admin::after { content: "admin only"; float: right; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
  .card.optin::after { content: "module opt-in"; float: right; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }

  /* ---- free-standing cards ----
     Everywhere above, a card is a grid item and the grid's `gap` is what keeps
     it off its neighbour. On /skill/ the cards are direct children of the
     section instead, one per activation method, and nothing supplies that gap:
     they render flush, sharing a border. The `section >` scope is deliberate —
     a card inside .cmds must not pick up a margin, or it would add to the gap
     the grid already provides. */
  section > h3 { font-size: 15px; font-weight: 700; letter-spacing: .01em; margin: 34px 0 14px; }
  section > .card + .card,
  section > .card + .two,
  section > .cmds + .two,
  section > .two + .card { margin-top: 14px; }
  section > .card > .code { margin: 12px 0; }
  section > .card > :last-child { margin-bottom: 0; }

  /* ---- ecosystem cross-links ---- */
  .eco { display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 720px) { .eco { grid-template-columns: repeat(3, 1fr); } }
  .eco-card {
    display: block; background: var(--bg-raised); border: 1px solid var(--line);
    border-radius: 9px; padding: 16px 18px; color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s;
  }
  .eco-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
  .eco-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--fg); }
  .eco-card h3 .p { color: var(--accent); margin-right: 4px; }
  .eco-card p { margin: 0 0 12px; font-size: 13px; color: var(--fg-dim); }
  .eco-host { font-size: 11.5px; color: var(--accent); letter-spacing: .02em; }
  .eco-card.current { border-color: var(--accent); }
  .eco-card.current .eco-host::after { content: " · you are here"; color: var(--fg-faint); }

  .platforms { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 4px; }
  .platforms span { font-size: 12.5px; color: var(--fg-dim); }
  .platforms span::before { content: "▸ "; color: var(--accent); }

  footer { border-top: 1px solid var(--line-soft); padding: 34px 0 60px; color: var(--fg-faint); font-size: 12.5px; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; justify-content: space-between; }
  footer nav { display: flex; gap: 22px; }
  footer a { color: var(--fg-dim); }

  .kb { color: var(--accent); }