/* ---- /connect: the homepage's parts. The stage bezel (flat, as on /tools) holds a React Bits Rubber Segment over
   the clients and one screen: the Claude replay (chat.css) beside the connector steps, or a command band and the
   config file. Then prompt cards (React Bits Spotlight Card, the /tools card) and the rule-card tiles. Tokens and
   spacing come from styles.css; the hero, cards and badges from tools.css. */

.chero .lede { margin-top: var(--s-4); }
.cstage { padding-top: var(--s-6); }

/* rail: the client switch, the client's one line, and Pause (kept in place for the terminal clients, so the rail
   never changes size; it only acts on the replay) */
.crail { flex-wrap: nowrap; }
.cseg { grid-template-columns: repeat(6, minmax(0, 1fr)); flex: none; }
.cseg .seg-item { height: 2.25rem; padding: 0 var(--s-3); gap: var(--s-2); }
.cseg .seg-item svg { width: 0.9375rem; height: 0.9375rem; }
.ccap { white-space: normal; }
.cstage[data-cview='cli'] [data-toggle] { visibility: hidden; }
.cstage[data-cview='cli'] .live { background: var(--ink-4); box-shadow: none; }

/* one screen, one height for every client, so switching never moves the page */
.cscreen { height: 34rem; }
.cscreen::after { z-index: 1; }
.cpane { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; height: 100%; }
html.js .cpane:not([data-on]) { display: none; }
@media (prefers-reduced-motion: no-preference) { html.js .cpane[data-on] .csteps, html.js .cpane[data-on] .cterm > :not(.ccmd) { animation: c-in 260ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both; } }
@keyframes c-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* the pane names its client for readers of the page without scripts and for screen readers; the switch says it */
.cpane-h { margin: 0; }
html.js .cpane-h { display: none; }
.cview { position: relative; min-width: 0; min-height: 0; }

/* the Claude window fills the view; its type is held between 13 and 15px whatever the view's width */
.cchat { position: relative; height: 100%; margin: 0; opacity: 1; visibility: visible; transition: none; }
.cchat .chat { font-size: clamp(0.8125rem, 1.75cqw, 0.9375rem); }
@container (max-width: 640px) { .cchat .chat { font-size: clamp(0.8125rem, 3.8cqw, 0.9375rem); } }

/* the steps: an Osmo CSS-only numbered list, each number in the stage's key badge */
.csteps { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-5) var(--s-6); border-left: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; }
.csteps-title { margin: 0; font: 600 1.375rem/1.15 var(--font-mono); letter-spacing: -0.03em; color: var(--ink); }
.csteps-list { display: flex; flex-direction: column; gap: var(--s-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.csteps-list li { position: relative; counter-increment: step; padding-left: calc(1.5rem + var(--s-3)); font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.csteps-list li::before { content: counter(step); position: absolute; left: 0; top: 0.125rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 4px; background: var(--ink); color: var(--bg); font: 600 0.75rem var(--font-mono); }
.csteps-list b { font-weight: 500; color: var(--ink); }
.csteps code, .cnote code, .clabel code { padding: 0.0625rem 0.375rem; border-radius: 4px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 0.8125em var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
/* the connector URL: the command band, full bleed across the steps column with hairlines, as on the installer */
.curl { margin: var(--s-3) calc(-1 * var(--s-6)) 0 calc(-1 * (var(--s-6) + 1.5rem + var(--s-3))); padding-left: var(--s-6); }
.curl .cmd { -webkit-mask-image: none; mask-image: none; text-overflow: ellipsis; }
.cnote { margin: auto 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--ink-3); }

/* a terminal client: the command band (types in), then the file it can go in */
.cterm { display: flex; flex-direction: column; gap: var(--s-3); height: 100%; padding: var(--s-5) var(--s-6); }
.clabel { margin: 0; font: 500 0.75rem var(--font-mono); color: var(--ink-3); }
.cterm .clabel + .cfile, .cterm .clabel:first-child { margin-top: calc(-1 * var(--s-1)); }
.ccmd { margin-inline: calc(-1 * var(--s-6)); padding-left: var(--s-6); flex: none; }
.cacts { flex: none; display: flex; gap: var(--s-2); }
.cterm .ccmd + .clabel, .cterm .cfile + .clabel { margin-top: var(--s-3); }
.cfile { position: relative; flex: none; min-height: 0; border-radius: 10px; background: #090c0a; box-shadow: inset 0 0 0 1px var(--line-strong); }
.cfile-code { margin: 0; padding: var(--s-4) 7rem var(--s-4) var(--s-4); overflow: auto; font: 400 0.8125rem/1.7 var(--font-mono); font-feature-settings: "liga" 0; color: var(--ink-2); white-space: pre; scrollbar-width: thin; }
.cfile-code[data-copy-fallback] { white-space: pre-wrap; }
.cfile .copy { position: absolute; top: var(--s-2); right: var(--s-2); }

@media (max-width: 1023px) {
  .crail { flex-wrap: wrap; }
  .cseg { width: 100%; }
  .cscreen { height: auto; }
  .cpane { grid-template-columns: minmax(0, 1fr); height: auto; }
  .csteps { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
  .cnote { margin-top: 0; }
  /* Claude: the steps (and the URL to copy) first, the replay under them */
  .cpane-chat .csteps { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
  .cpane-chat .cview { height: 30rem; }
  .cterm { height: auto; }
  .cfile-code { height: auto; }
}
@media (max-width: 767px) {
  .cseg { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  .cseg .seg-item { height: 2.75rem; justify-content: flex-start; padding: 0 var(--s-4); }
  .crail .ccap { order: 3; flex: 1 1 0; min-height: 2.6em; }
  .crail [data-toggle] { order: 4; }
  .csteps, .cterm { padding: var(--s-4); }
  .csteps-title { font-size: 1.25rem; }
  .curl { margin: var(--s-3) calc(-1 * var(--s-4)) 0 calc(-1 * (var(--s-4) + 1.5rem + var(--s-3))); padding-left: var(--s-4); }
  .curl .cmd { font-size: 0.75rem; }
  .ccmd { margin-inline: calc(-1 * var(--s-4)); padding-left: var(--s-4); }
  .cpane-chat .cview { height: 28rem; }
  .cfile-code { padding-right: var(--s-4); padding-top: 3.5rem; font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* without scripts: no switch to work, so every client's pane is on the page, one after another, named */
html:not(.js) .crail { display: none; }
html:not(.js) .cscreen { height: auto; }
html:not(.js) .cpane { height: auto; }
html:not(.js) .cpane + .cpane { border-top: 1px solid var(--line-strong); }
html:not(.js) .cpane-chat .cview { height: 34rem; }
html:not(.js) .cpane-h { grid-column: 1 / -1; padding: var(--s-4) var(--s-6) 0; font: 600 1rem var(--font-mono); color: var(--ink); }
html:not(.js) .cpane-chat .cpane-h { padding-bottom: var(--s-4); }

/* ---- first prompts: heading and cards on the homepage's 4 / 8 columns */
.cprompts { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--col-gap); row-gap: var(--s-6); align-items: start; }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pcard { gap: var(--s-4); justify-content: space-between; }
.pcard-q { margin: 0; font: 400 1.0625rem/1.5 var(--font-sans); color: var(--ink); text-wrap: pretty; }
.pcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pcard-k { font: 500 0.75rem var(--font-mono); color: var(--ink-3); }
.pcard-tool { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 var(--s-3); border-radius: 8px; background: #151b17; box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 0.8125rem var(--font-mono); font-feature-settings: "liga" 0; color: var(--ink); transition: color 160ms var(--ease-smooth), box-shadow 160ms var(--ease-smooth); }
@media (hover: hover) { .pcard-tool:hover { color: var(--pop-up); box-shadow: inset 0 0 0 1px #3a4c41; } }
.pcard-meta .copy { margin-left: auto; }
@media (max-width: 1279px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 991px) { .cprompts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px), (pointer: coarse) { .pcard-tool { height: 2.75rem; } .pcard-meta .copy { height: 2.75rem; } }

/* ---- what it can't do: the safety layout, three tiles in one card */
.ccant .xmore { margin-top: var(--s-4); }
.ccant-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ccant-cards > div:nth-child(n+3) { border-top: 0; }
.ccant-cards > div + div { border-left: 1px solid var(--line); }
@media (max-width: 1279px) {
  .ccant-cards { grid-template-columns: minmax(0, 1fr); }
  .ccant-cards > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
.ccant { padding-bottom: var(--section); }