/*
 * The shared install panel. Same grammar as the home page demo: our controls
 * above, the depicted UI below, one instruction under it. No band, no grid;
 * this drops into any page.
 */

/* Same system as the home page demo, and for the same reasons — see the
   long note on .start-band in app/pages/home/style.css.
 *
 * No ground of its own. Both pictures are dark objects on whatever the page
 * already is, so the panel never has to guess a background that works in
 * both themes. In dark mode the objects lift above the page instead of
 * dropping below it, because nothing can be blacker than a near-black page
 * and still read as a panel. */
.ip {
  width: 100%;
  --chrome: #070C13;
  --chrome-rule: rgba(255, 255, 255, 0.16);
  --chrome-ink: #f2f7fb;
  --chrome-dim: #8b98a5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ip {
    --chrome: #161F2A;
    --chrome-rule: rgba(255, 255, 255, 0.13);
  }
}
:root[data-theme="dark"] .ip {
  --chrome: #161F2A;
  --chrome-rule: rgba(255, 255, 255, 0.13);
}

/* ---- ours: the controls ---- */

.ip-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: nowrap;
  margin-bottom: var(--space-3);
}

.ip-seg { display: inline-flex; align-items: center; gap: var(--space-5); }

/* The style package puts a border, a ground and a shadow on button, and all
   three have to come off or these read as a control panel. */
.ip-controls .ip-seg .ip-seg-btn {
  appearance: none;
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  height: auto;
  min-height: 0;
  width: auto;
  padding: 0 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 120ms, box-shadow 120ms;
}
.ip-controls .ip-seg .ip-seg-btn:hover { color: var(--ink-soft); background: transparent; }
.ip-controls .ip-seg .ip-seg-btn.is-on {
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.ip-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Platform pills, under the picture. Deliberately quiet: the OS is detected
   already, so nearly nobody has to touch these. Hairline, muted type, and the
   selected one is marked by ink rather than by weight or a filled ground. */
.ip-os {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* The selected platform is in the accent, not in grey. It is the one piece
   of state on this page that changes what gets copied, and a grey-on-grey
   chip said so more quietly than the unselected ones did. The rest stay
   quiet, so the row reads as one selected thing and two alternatives. */
.ip-os .ip-pill {
  height: auto;
  min-height: 0;
  padding: 4px 11px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  box-shadow: none;
}

.ip-os .ip-pill:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.ip-os .ip-pill.is-on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight: var(--weight-medium);
}

@media (prefers-reduced-motion: no-preference) {
  .ip-os .ip-pill { transition: color 120ms ease-out, background-color 120ms ease-out; }
}

.ip-controls .ip-copy {
  /* Pinned, not derived. With line-height left to the font this landed on
     32px by coincidence of JetBrains Mono at 11px, and would have drifted
     apart from the same chip on the home page and the campaign pages the
     first time the face or the size moved. All three are 2rem explicitly. */
  height: 2rem;
  min-height: 2rem;
  min-width: 5.5rem;
  margin-left: 8px;
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: none;
}
.ip-controls .ip-copy:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--bg)); }
.ip-controls .ip-copy.is-copied {
  color: #14724d;
  border-color: rgba(31, 157, 107, 0.5);
  background: rgba(31, 157, 107, 0.1);
}

/* ---- theirs: the agent composer ---- */

/* A hard rectangle holding a rounded field: two shapes at opposite ends of
   the radius scale, so the frame and the thing you type into are told apart
   by shape rather than by two nearly equal fills. */
.ip-agent {
  border: 1px solid var(--chrome-rule);
  border-radius: 0;
  padding: 14px;
  background: var(--chrome);
  box-shadow: none;
}

.ip-pill-box {
  padding: 20px 22px;
  background: var(--chrome);
  border: 1px solid var(--chrome-rule);
  border-radius: 16px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  /* Set back. This is a dozen-odd lines of monospace and at --ink-soft it
     out-shouts the line asking for the decision — the offer should land
     first and the text second. Matched across every agent/terminal picture
     on the site.

     With a literal fallback because --ink-dim is declared only inside the dark
     slabs (home's .start-band, /install's .idp) and nowhere globally, so an
     unqualified var() here computes to `inherit` outside them and the fade
     silently does not happen. */
  color: var(--chrome-ink);
}

/* One line stays one line; the box scrolls. A wrapped command reads as two. */
.ip-text {
  display: block;
  overflow-x: auto;
  white-space: pre;
}

.ip-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 0;
  font-size: var(--text-2xs);
  white-space: nowrap;
  color: var(--chrome-dim);
}

.ip-icon,
.ip-caret { width: 15px; height: 15px; color: var(--chrome-dim); }
.ip-caret { width: 12px; height: 12px; margin-left: -4px; }
.ip-mode { margin-left: 2px; }

/* ---- theirs: the terminal ---- */

.ip-term {
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  background: var(--chrome);
  border: 1px solid var(--chrome-rule);
  box-shadow: none;
}

/* No tonal strip and no name. Three coloured dots and a shell prompt already
   say what this is. */
.ip-term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: none;
  border-bottom: 1px solid var(--chrome-rule);
}

.ip-dot { width: 11px; height: 11px; border-radius: 50%; }
.ip-term-bar .ip-dot:nth-child(1) { background: #FF5F57; }
.ip-term-bar .ip-dot:nth-child(2) { background: #FEBC2E; }
.ip-term-bar .ip-dot:nth-child(3) { background: #28C840; }

.ip-term-name {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #8b98a5;
}

.ip-term-body {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: #c6d3de;
  overflow-x: auto;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}
.ip-term-body .line { white-space: pre; }
.ip-term-body .dim { color: var(--chrome-dim); }
.ip-term-body .c { color: var(--chrome-ink); font-weight: var(--weight-medium); }
.ip-term-body .line.gap { height: 0.75em; }

/* The install command is longer than any column we can give it. Wrapping a
   shell command makes it look broken, so it scrolls and the fade says so.
   Masked on the text, never on the box that holds it. */
.ip-text,
.ip-term-body {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

/* Click anywhere to copy; the chip above reports it. The panel has to say it
   is live before the click, and it does that by lifting off the page rather
   than by changing colour. Recolouring was tried first and was wrong twice
   over: subtle enough to miss, and once it was strong enough to see, the
   thing you are reading changed shade under the cursor. A shadow says
   "pick me up" without touching the depiction at all. */
.ip .is-copyable {
  cursor: pointer;
  box-shadow: 0 0 0 rgba(7, 12, 19, 0);
}

.ip .is-copyable:hover {
  box-shadow: 0 12px 28px -12px rgba(7, 12, 19, 0.55);
  border-color: rgba(255, 255, 255, 0.26);
}

/* A cast shadow barely registers on a dark page, so the edge does more of
   the work there. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ip .is-copyable:hover {
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.30);
  }
}
:root[data-theme="dark"] .ip .is-copyable:hover {
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.30);
}

@media (prefers-reduced-motion: no-preference) {
  .ip .is-copyable { transition: box-shadow 140ms ease-out, border-color 140ms ease-out; }
}

/* ---- theirs: the terminal ---- */

.ip-term {
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  background: var(--chrome);
  border: 1px solid var(--chrome-rule);
  box-shadow: none;
}

/* No tonal strip and no name. Three coloured dots and a shell prompt already
   say what this is. */
.ip-term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: none;
  border-bottom: 1px solid var(--chrome-rule);
}

.ip-dot { width: 11px; height: 11px; border-radius: 50%; }
.ip-term-bar .ip-dot:nth-child(1) { background: #FF5F57; }
.ip-term-bar .ip-dot:nth-child(2) { background: #FEBC2E; }
.ip-term-bar .ip-dot:nth-child(3) { background: #28C840; }

.ip-term-name {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #8b98a5;
}

.ip-term-body {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: #c6d3de;
  overflow-x: auto;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}
.ip-term-body .line { white-space: pre; }
.ip-term-body .dim { color: var(--chrome-dim); }
.ip-term-body .c { color: var(--chrome-ink); font-weight: var(--weight-medium); }
.ip-term-body .line.gap { height: 0.75em; }

/* The install command is longer than any column we can give it. Wrapping a
   shell command makes it look broken, so it scrolls and the fade says so.
   Masked on the text, never on the box that holds it. */
.ip-text,
.ip-term-body {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}


/* ---- the instruction ---- */

/* The click is inside the sentence, and the sentence never changes: the chip
   above reports the copy, so "Copied and paste it…" can never happen. */
.ip-do {
  /* Real air above it: the pills are a setting, this is the instruction, and
     they were reading as one block. */
  margin: var(--space-7) 0 0;
  font-size: var(--text-base);
  color: var(--ink-soft);
}

.ip-do-copy {
  appearance: none;
  font: inherit;
  font-weight: var(--weight-bold);
  height: auto;
  min-height: 0;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--accent);
  text-decoration: underline;
  /* Continuous, and clear of the descenders in "Copy this prompt": ink-skip
     chopped the rule into pieces around the p and the y. */
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
  cursor: pointer;
}
.ip-do-copy:hover { color: color-mix(in srgb, var(--accent) 80%, #000); background: none; }
.ip-do-copy.is-copied { color: #14724d; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ip-do-copy.is-copied,
  :root:not([data-theme="light"]) .ip-controls .ip-copy.is-copied { color: #5fd0a0; }
}
:root[data-theme="dark"] .ip-do-copy.is-copied,
:root[data-theme="dark"] .ip-controls .ip-copy.is-copied { color: #5fd0a0; }

/* Set well below the instruction, not a peer of it: this answers a different
   question, for a reader who cannot act on the sentence above yet. */
.ip-pick {
  margin: var(--space-12) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-dim);
}
.ip-pick a { color: var(--accent); text-decoration: none; }
.ip-pick a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
}

/* The comma sits inside the next anchor, so a hover underline ran through it
   too. inline-block keeps the parent's line off it. */
/* inline-block keeps the hover underline off the comma, but it also collapses
   a trailing space, so the space is a non-breaking one in the content above. */
.ip-pick a + a::before { display: inline-block; }
.ip-pick a + a::before { content: ",\00a0"; color: var(--ink-dim); }

/* ---- phones ---- */

/* The scaffold picker, in the tools group beside copy. Unlike the mode
   select it is shown at every width: mode has a segmented control to fall
   back to, and this has nothing else. Set as the same mono chip as the copy
   button so the two read as one pair of controls. */
.ip-scaffold-select {
  width: auto;
  height: 2rem;
  min-height: 2rem;
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  text-align-last: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
}
.ip-scaffold-select:hover { color: var(--ink); }

.ip-mode-select { display: none; }

@media (max-width: 620px) {
  /* The words stay at every width. This used to swap them for a native
     select, because the row was mode + scaffold + copy and those three did
     not fit a phone. The scaffold picker is gone and so is the select, and
     the rewrite that removed the select left the rule hiding .ip-seg behind
     it — so under 620px the panel had no way to reach terminal mode at all.

     Same as the home page: two words are one tap, and a select with two
     options sends a binary choice through the OS picker, which iOS docks to
     the bottom of the screen and Android opens as a centred modal. */
  .ip-controls .ip-seg .ip-seg-btn {
    padding: 0 0 6px;
    font-size: var(--text-2xs);
  }

  .ip-controls { gap: var(--space-3); flex-wrap: wrap; }
  .ip-agent { padding: 10px; }
  .ip-pill-box { padding: 18px 14px; }
}

/* ─── The composer, as a machine ──────────────────────────────────────
   2026-09-16, rewritten 2026-09-20. This block used to carry a second,
   higher-specificity theme (.ip .ip-agent, .ip .ip-pill-box) that quietly
   won over everything declared for the same elements at the top of this
   file, so editing the rules where they obviously live changed nothing.
   The two sets are merged: the definitions at the top are the definitions.

   What survives from it is the rule it existed to state. The surface you
   paste into is dark wherever it appears, and both modes are the same
   surface, so switching between them never changes the colour of the thing
   you are about to copy. */

/* Selectable, and readable while selected. The global ::selection sets
   color: var(--ink), the page's dark ink, which on these black panels paints
   dark glyphs on a light wash and the text vanishes. Keep the glyph colour
   and tint the wash. Matched to the home page. */
.ip .ip-agent ::selection,
.ip .ip-term ::selection {
  background: rgba(73, 169, 231, 0.42);
  /* An explicit colour, not `inherit`. On ::selection, `inherit` takes the
     PARENT's selection colour, not the element's own text colour — so it
     resolved to the global rule's var(--ink), which is the page's dark ink,
     and selected glyphs went dark on the wash. That is the bug it was
     written to avoid. Selection flattens the dim/bright levels; on a black
     panel that is the right trade. */
  color: #f2f7fb;
}