/* install.css — the brandcurl Plugin page. Install-first: the @brandcurl
   moment, a per-client tabbed installer with credential-safe configs, the four
   tools as verbs, and a skills generator. Rides the docs token + terminal
   system (docs.css is linked first); this file owns the install layout. */

.ix { max-width: 1280px; margin: 0 auto; padding: 0 32px 140px; position: relative; z-index: 1; }

/* demo, installer panels, generator, code blocks: dark panes in both themes */
:root[data-theme="light"] .ix-demo, :root[data-theme="light"] .ix-panel,
:root[data-theme="light"] .ix-gen, :root[data-theme="light"] .ix-codewrap {
  --dx-ink: #e8efe9;
  --dx-ink-2: #b7c2ba;
  --dx-mut: #8b968e;
  --dx-dim: #79877f;
  --dx-faint: #717f77;
  --dx-line: rgba(255, 255, 255, 0.075);
  --dx-line-2: rgba(255, 255, 255, 0.12);
  --dx-green-soft: #7fdcab;
  --dx-amber: #fbbf24;
  --dx-purple: #c084fc;
  --dx-cyan: #67e8f9;
  --dx-pink: #ff5ca8;
}

/* The site header (.bc-head / .bc-pill / .bc-navlink …) comes from
   bc-chrome.css — shared with the landing, do not redefine it here. */
.ix-sec { padding: 64px 0 0; }
.ix-sec-eyebrow { color: var(--dx-green-soft); font-size: 12.5px; letter-spacing: 0.02em; }
.ix-sec-title { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.03em; margin: 10px 0 0; line-height: 1.08; }
.ix-sec-title .g { color: var(--dx-green); }
.ix-sec-sub { color: var(--dx-mut); font-size: 14.5px; line-height: 1.7; margin: 14px 0 0; max-width: 64ch; }

/* ── horizontal section: client list (icons + text) left, terminal right ── */
.ix-2col { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 30px; }
.ix-2col-left { position: sticky; top: 88px; }
.ix-clientlist { display: flex; flex-direction: column; gap: 3px; margin-top: 24px; }
.ix-clientrow {
  display: flex; align-items: center; gap: 11px; text-align: left; width: 100%;
  padding: 10px 13px; border-radius: 11px; border: 1px solid transparent;
  color: var(--dx-mut); font-size: 13.5px; background: none;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.ix-clientrow:hover { background: rgba(255,255,255,0.04); color: var(--dx-ink); }
.ix-clientrow.is-on { background: color-mix(in srgb, var(--dx-green) 9%, transparent); border-color: color-mix(in srgb, var(--dx-green) 30%, transparent); color: var(--dx-ink); }
.ix-clientrow img { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; object-fit: cover; background: rgba(255,255,255,0.04); }
.ix-clientrow .nm { flex: 1; }
.ix-clientrow .ar { color: var(--dx-faint); font-size: 12px; opacity: 0; transition: opacity 0.13s; }
.ix-clientrow.is-on .ar, .ix-clientrow:hover .ar { opacity: 1; color: var(--dx-green-soft); }
.ix-2col-right { min-width: 0; }
.ix-2col-right .ix-panel { margin-top: 0; }
.ix-2col-right.ix-gen { margin-top: 0; }
@media (max-width: 900px) {
  .ix-2col { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ix-2col-left { position: static; }
  .ix-clientlist { flex-direction: row; flex-wrap: wrap; }
  .ix-clientrow { width: auto; border: 1px solid var(--dx-line); border-radius: 999px; padding: 8px 14px; }
  .ix-clientrow .ar { display: none; }
}

/* ── hero ── */
.ix-hero { padding-top: 60px; display: grid; grid-template-columns: 1fr; gap: 40px; }
.ix-hero-title { font-size: clamp(34px, 6vw, 62px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin: 14px 0 0; }
.ix-hero-title .g { color: var(--dx-green); }
.ix-hero-sub { color: var(--dx-mut); font-size: 16px; line-height: 1.7; margin: 20px 0 0; max-width: 54ch; }
.ix-hero-sub code { color: var(--dx-green-soft); background: color-mix(in srgb, var(--dx-green) 8%, transparent); border: 1px solid color-mix(in srgb, var(--dx-green) 16%, transparent); border-radius: 5px; padding: 1px 6px; }

/* the @mention composer + payoff card */
.ix-demo { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--dx-line-2); border-radius: 16px; overflow: hidden; background: #060806; box-shadow: 0 40px 100px rgba(0,0,0,0.55); }
.ix-composer { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--dx-line); background: rgba(255,255,255,0.015); }
.ix-composer .caret { color: var(--dx-green); font-weight: 800; }
.ix-at { color: #04180b; background: var(--dx-green-hi); border-radius: 7px; padding: 3px 8px; font-size: 13px; font-weight: 700; }
.ix-composer .typed { color: var(--dx-ink); font-size: 15px; }
.ix-composer .cursor-blink { width: 8px; height: 18px; background: var(--dx-green); margin-left: 2px; animation: ix-blink 1.1s steps(1) infinite; }
@keyframes ix-blink { 50% { opacity: 0; } }
.ix-composer .send { margin-left: auto; color: var(--dx-dim); font-size: 12px; border: 1px solid var(--dx-line); border-radius: 6px; padding: 4px 9px; }

.ix-card { padding: 22px 22px 24px; }
.ix-card-head { display: flex; align-items: center; gap: 13px; }
.ix-card-logo { width: 46px; height: 46px; border-radius: 12px; background: #fff center/70% no-repeat; flex-shrink: 0; box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.ix-card-name { font-size: 19px; font-weight: 700; color: var(--dx-ink); }
.ix-card-dom { font-size: 12.5px; color: var(--dx-dim); }
.ix-card-badge { margin-left: auto; font-size: 11px; color: var(--dx-green); border: 1px solid color-mix(in srgb, var(--dx-green) 30%, transparent); background: color-mix(in srgb, var(--dx-green) 8%, transparent); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.ix-swatches { display: flex; gap: 6px; margin-top: 18px; border-radius: 11px; overflow: hidden; }
.ix-sw { flex: 1; height: 62px; display: flex; align-items: flex-end; padding: 7px 9px; font-size: 10px; letter-spacing: 0.03em; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.ix-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ix-chip { font-size: 12px; color: var(--dx-ink-2); background: rgba(255,255,255,0.04); border: 1px solid var(--dx-line); border-radius: 7px; padding: 5px 11px; display: inline-flex; align-items: center; gap: 7px; }
.ix-chip .k { color: var(--dx-dim); }
.ix-card-note { margin-top: 16px; color: var(--dx-mut); font-size: 12.5px; line-height: 1.6; }

/* CTA buttons */
.ix-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }
.ix-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; border-radius: 10px; padding: 11px 18px; white-space: nowrap; transition: filter 0.15s, background 0.15s, border-color 0.15s; border: 1px solid transparent; }
.ix-btn-primary { color: #04180b; background: var(--dx-green-hi); box-shadow: 0 0 26px color-mix(in srgb, var(--dx-green-hi) 25%, transparent); }
.ix-btn-primary:hover { filter: brightness(1.08); color: #04180b; }
.ix-btn-ghost { color: var(--dx-ink); background: rgba(255,255,255,0.05); border-color: var(--dx-line-2); }
.ix-btn-ghost:hover { background: rgba(255,255,255,0.09); color: var(--dx-ink); }
.ix-btn .ico { font-weight: 800; }
.ix-cta-note { color: var(--dx-dim); font-size: 12.5px; }

/* trust strip */
.ix-trust { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 20px 0; border-top: 1px solid var(--dx-line); border-bottom: 1px solid var(--dx-line); }
.ix-trust .lbl { color: var(--dx-dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.ix-trust .who { display: inline-flex; align-items: center; gap: 8px; color: var(--dx-ink-2); font-size: 13px; }
.ix-trust-ico { width: 17px; height: 17px; border-radius: 5px; flex-shrink: 0; object-fit: cover; background: rgba(255,255,255,0.04); }
.ix-tab-ico { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; object-fit: cover; background: rgba(255,255,255,0.04); }

/* ── installer panel ── */
.ix-panel { border: 1px solid var(--dx-line-2); border-radius: 14px; overflow: hidden; background: #060806; }
.ix-panel-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--dx-line); }
.ix-panel-head .name { font-size: 15px; font-weight: 700; color: var(--dx-ink); }
.ix-panel-head .blurb { font-size: 12.5px; color: var(--dx-mut); }
.ix-panel-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ix-step-lbl { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dx-dim); display: flex; align-items: center; gap: 8px; }
.ix-step-lbl .n { width: 18px; height: 18px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--dx-green) 35%, transparent); color: var(--dx-green-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.ix-note { color: var(--dx-mut); font-size: 12.5px; line-height: 1.6; }
.ix-note code { color: var(--dx-green-soft); background: color-mix(in srgb, var(--dx-green) 7%, transparent); border-radius: 4px; padding: 1px 5px; }

/* reuse dx-term for config blocks; add a compact copy row */
.ix-codewrap { border: 1px solid var(--dx-line); border-radius: 11px; overflow: hidden; background: #05070500; background-color: #060806; }
.ix-codewrap .ix-code-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--dx-line); }
.ix-codewrap .file { font-size: 11.5px; color: var(--dx-mut); }
.ix-codewrap pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-size: 12.5px; line-height: 1.7; }
.ix-codewrap pre code { white-space: pre; color: var(--dx-ink-2); }

/* ── tools / verbs ── */
.ix-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 26px; }
.ix-tool { border: 1px solid var(--dx-line); border-radius: 14px; background: var(--dx-panel); padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s, transform 0.15s; }
.ix-tool:hover { border-color: color-mix(in srgb, var(--dx-green) 30%, transparent); transform: translateY(-2px); }
.ix-tool .sig { font-size: 14px; color: var(--dx-ink); font-weight: 700; }
.ix-tool .sig .arg { color: var(--dx-cyan); font-weight: 500; }
.ix-tool .desc { font-size: 12.5px; color: var(--dx-mut); line-height: 1.6; flex: 1; }
.ix-try { display: flex; align-items: flex-start; gap: 8px; background: color-mix(in srgb, var(--dx-green) 5%, transparent); border: 1px solid color-mix(in srgb, var(--dx-green) 16%, transparent); border-radius: 9px; padding: 9px 11px; cursor: pointer; transition: background 0.15s; }
.ix-try:hover { background: color-mix(in srgb, var(--dx-green) 10%, transparent); }
.ix-try .p { color: var(--dx-green-soft); font-size: 11.5px; line-height: 1.5; flex: 1; }
.ix-try .c { color: var(--dx-dim); font-size: 11px; flex-shrink: 0; margin-top: 2px; }

/* ── skills generator ── */
.ix-gen { border: 1px solid var(--dx-line-2); border-radius: 16px; overflow: hidden; background: #060806; margin-top: 26px; }
.ix-gen-pick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.ix-gen-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--dx-line); border-radius: 999px; color: var(--dx-mut); background: transparent; font-size: 11.5px; transition: color 0.13s, border-color 0.13s, background 0.13s; }
.ix-gen-pill:hover { color: var(--dx-ink); border-color: var(--dx-line-2); background: rgba(255,255,255,0.04); }
.ix-gen-pill.is-on { color: var(--dx-ink); border-color: color-mix(in srgb, var(--dx-green) 35%, transparent); background: color-mix(in srgb, var(--dx-green) 10%, transparent); }
.ix-gen-pill img { width: 16px; height: 16px; }
.ix-gen-file { padding: 0; position: relative; }
.ix-gen-file::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 44px; background: linear-gradient(transparent, #060806); opacity: 1; pointer-events: none; transition: opacity 0.15s; }
.ix-gen-file.at-end::after { opacity: 0; }
.ix-gen-filebar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--dx-line); background: rgba(255,255,255,0.015); }
.ix-gen-path { font-size: 12.5px; color: var(--dx-green-soft); }
.ix-gen-actions { margin-left: auto; display: flex; gap: 8px; }
.ix-gen pre { margin: 0; padding: 18px 20px; overflow: auto; font-size: 12.5px; line-height: 1.72; max-height: 520px; scrollbar-width: thin; scrollbar-color: var(--dx-faint) transparent; }
.ix-gen pre::-webkit-scrollbar { width: 8px; }
.ix-gen pre::-webkit-scrollbar-thumb { background: var(--dx-faint); border-radius: 8px; }
.ix-gen pre code { white-space: pre; color: var(--dx-ink-2); }
.ix-mini-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dx-mut); background: rgba(255,255,255,0.04); border: 1px solid var(--dx-line); border-radius: 7px; padding: 5px 11px; transition: color 0.15s, border-color 0.15s; }
.ix-mini-btn:hover { color: var(--dx-green-soft); border-color: color-mix(in srgb, var(--dx-green) 30%, transparent); }
.ix-mini-btn.ok { color: var(--dx-green); border-color: color-mix(in srgb, var(--dx-green) 40%, transparent); }

/* footer — the landing's terminal sign-off, not a stray caption */
.ix-foot {
  margin-top: 96px; padding: 26px 0 10px; border-top: 1px solid var(--dx-line-2);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  color: var(--dx-mut); font-size: 12.5px;
}
.ix-foot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--dx-mut); }
.ix-foot-prompt { color: var(--dx-green); font-weight: 800; }
.ix-foot-brand b { color: var(--dx-ink); font-weight: 700; }
.ix-foot a { color: var(--dx-mut); }
.ix-foot a:hover { color: var(--dx-ink); }
.ix-foot-links { display: flex; gap: 18px; }

@media (min-width: 900px) {
  .ix-hero { grid-template-columns: 1.05fr 1fr; align-items: center; }
  .ix-demo { align-self: stretch; }
}
@media (max-width: 560px) {
  .ix-sw { font-size: 0; }
}

/* headline green: use the theme's contrast-safe text green on paper */
:root[data-theme="light"] .ix-hero-title .g,
:root[data-theme="light"] .ix-sec-title .g { color: var(--dx-green-soft); }

@media (prefers-reduced-motion: reduce) {
  .ix * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}