/* Manual-install guide page (/install/<family>). Loaded only here; reuses the site's
   hero/band shell and adds the download CTA plus the three steps. */

/* The download CTA is the page's one action, sized up for a hero. It is white with
   a hairline border, the same surface as every store badge on the site, because a
   download button is a download button wherever it appears: the gold fill is the
   site's buy action and should not be spent here. It carries the browser's own mark,
   so "Download for Chrome" is recognisable before it is read. */
.install-dl {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); background: var(--surface-1); border: 1px solid var(--line-3);
  box-shadow: var(--shadow-sm);
  padding: 12px 24px 12px 16px; border-radius: 999px; font-size: 15.5px;
  font-weight: 700; letter-spacing: -.01em; text-decoration: none;
  white-space: nowrap; cursor: pointer;
}
.install-dl:hover {
  text-decoration: none; border-color: var(--ink-3); background: var(--surface-2);
}
/* The browser mark is the thing scanned first, so it is read at a glance rather
   than squinted at: sized to the button's cap height, not to the text. */
.install-dl .bmark { width: 34px; height: 34px; flex: none; }

/* Three steps: a real ordered list (semantics, and it survives copy/paste) with a
   ringed number so the sequence scans at a glance. */
.install-steps {
  list-style: none; margin: 0; padding: 0;
  counter-reset: step; display: grid; gap: 16px;
  /* minmax(0, ...), not the default `auto`: an auto track is at least as wide as its
     widest item's min-content, so the one nowrap command line (.addr-cmd) stretched
     the whole list past 320px and put a horizontal scrollbar on the page. */
  grid-template-columns: minmax(0, 1fr);
}
.install-steps li {
  counter-increment: step; position: relative; padding-left: 42px;
  color: var(--ink-2); line-height: 1.5;
}
/* A step is one or two lines: what to open, then what to do there. */
.step-line { display: block; }
.step-line + .step-line { margin-top: 7px; }
.install-steps strong { color: var(--ink); font-weight: 700; }
/* The step-1 download is the same action as the hero button, so it reads as a link
   rather than a second competing control. */
.step-dl { font-weight: 700; cursor: pointer; }
.install-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-3);
}

/* An address the reader has to type (chrome://extensions, about:debugging, a Terminal
   command). It reads as a link because it behaves like one hop, but a page cannot
   navigate to those schemes, so clicking copies instead and says so. */
.addr {
  /* width/margin are explicit because the site's bare `button` is a full-width
     block CTA; this one is a word inside a sentence. */
  display: inline-flex; align-items: center; gap: 6px; vertical-align: baseline;
  width: auto; margin: 0 1px; padding: 2px 8px; border-radius: 7px;
  font: inherit; font-size: .94em; font-weight: 600; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-3);
  cursor: pointer; position: relative; text-align: left;
}
.addr:hover { border-color: var(--amber); color: var(--ink); }
.addr-ico { flex: none; opacity: .55; }
/* A shell command is not a word in a sentence: it is 36 characters, and inline it
   wrapped mid-word at 320px, which is unreadable and untypeable. So it takes its
   own line, set in mono, and scrolls sideways rather than ever breaking. The copy
   button is still the intended way to take it, which is why it stays one control. */
.addr-cmd {
  display: flex; width: 100%; box-sizing: border-box; margin: 7px 0 0; padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; font-weight: 500; letter-spacing: -.01em;
}
/* The command never breaks: it scrolls under the copy button, which is the intended
   way to take it anyway. The scrollbar is hidden because it is a permanent grey bar
   on a two-line box (and only appears at all on the narrowest screens). */
.addr-cmd .addr-txt {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  scrollbar-width: none;
}
.addr-cmd .addr-txt::-webkit-scrollbar { display: none; }
.addr-cmd .addr-done { left: auto; right: 8px; transform: none; }
.addr:hover .addr-ico { opacity: 1; }
/* The confirmation replaces nothing: it floats above, so the line never reflows. */
.addr-done {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  padding: 3px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
  color: var(--on-amber); background: var(--amber); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.addr.is-copied .addr-done { opacity: 1; }
.addr.is-copied { border-color: var(--amber); }

/* p.* , not .* : the band's own `.band > p` sets the margin this overrides. */
p.install-note { margin-top: 10px; }
.install-other { margin-top: 30px; }

/* Full site width, like the download page: the hero has no second column, so collapse
   it to one full-width column (the bare two-column .hero stranded the copy at half
   width). The steps then run left to right as a three-across strip, which is how a
   numbered sequence is read; the earlier two-column flow put 1-3 down and 4-5 to the
   right, so the eye had to find the order. */
@media (min-width: 900px) {
  .hero-install { grid-template-columns: minmax(0, 1fr); }
  /* .hero .sub is capped at 44ch for the landing's two-column hero. This hero is
     one full-width column, so the cap would strand the line at half the width. */
  .hero-install .sub { max-width: none; }
  .install-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 34px; }
  .install-steps li { padding-left: 0; padding-top: 40px; }
  .install-steps li::before { top: 0; }
}