/* Polymer jig instructions. Loaded on page 2058 / the Instructions template.
   Scoped to .g80-instr so it cannot leak onto product or shop pages.

   Structure comes from whitespace and the numbered rail, not from rules.
   There is deliberately no hairline between steps, between kit rows, or in the
   FAQ: stacked separators read as a form, and the page is a document someone
   follows with a rotary tool in one hand. The one line that survives is the
   track behind the step nav, which is chrome rather than content. */

/* Tokens are shared with the page header, which the template renders outside
   .g80-instr, so the title and the body line up on the same measure. */
.g80-instr,
.g80-instr-header {
  --instr-measure: 820px;
  --instr-nav: 190px;
  --instr-nav-gap: 40px;
  --instr-text: 42rem;

  --instr-ink: #1a1a1a;
  --instr-body: #3a3a3a;
  --instr-muted: #767676;
  --instr-accent: #9f0712;
  --instr-panel: #f7f7f7;
  --instr-hairline: #ededed;
}

.g80-instr {
  max-width: var(--instr-measure);
  margin-inline: auto;
  color: var(--instr-body);
  font-size: 17px;
  line-height: 1.75;
}

.g80-instr :where(p, ul, ol, figure, h2, h3) {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.g80-instr) {
    scroll-behavior: smooth;
  }
}

/* Page header. Deliberately stacked rather than the site-wide title-left,
   blurb-right row: at this measure the blurb column is too narrow to read, and
   a lede under the title is what makes the column feel like a document.
   .g80-instr-header is the layout box; .g80-instr-hero is the panel, so the
   wide-screen offset that lines the title up with the body column does not
   drag the background out over the nav with it. */
.g80-instr-header {
  max-width: var(--instr-measure);
  margin: 0 auto 56px;
}

.g80-instr-hero {
  position: relative;
  background: var(--instr-ink);
  border-radius: 12px;
  padding: 56px 48px 52px;
}

/* Brand accent rather than a rule: it opens the block instead of dividing it. */
.g80-instr-hero::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 26px;
  background: var(--instr-accent);
}

/* Specific enough to beat Shoptimizer's .entry-title, which is what actually
   sizes this heading. The Tailwind size utilities on it never applied. */
.g80-instr-hero .g80-instr-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-transform: none;
  text-wrap: balance;
}

.g80-instr-lede {
  max-width: 56ch;
  margin: 24px 0 0;
  font-size: 17.5px;
  line-height: 1.7;
  color: #b0b0b0;
}

/* Step nav. Narrow screens get a row of chips above the content; from 1100px
   it becomes a rail pinned beside the steps. There is no sticky site header on
   this theme, so it can sit high. */
.g80-instr-nav__label {
  display: none;
}

.g80-instr-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 72px;
  padding: 0;
  list-style: none;
}

.g80-instr-toc a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 13px;
  line-height: 1.2;
  color: #555555;
  text-decoration: none;
  background: #fbfbfb;
  border: 1px solid var(--instr-hairline);
  border-radius: 999px;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.g80-instr-toc a:hover,
.g80-instr-toc a:focus-visible {
  color: #111111;
  background: #ffffff;
  border-color: #c9c9c9;
}

.g80-instr-toc__num {
  font-weight: 700;
  color: var(--instr-accent);
  font-variant-numeric: tabular-nums;
}

/* In the box / you supply. The two lists are one panel rather than two columns
   floating in whitespace: they are a single parts inventory, and the callout
   directly below is contained, so uncontained lists above it read as unfinished.
   A tint rather than a border keeps it a block of colour instead of a box, and
   it sits a shade lighter than the callout so the two do not merge. */
.g80-instr-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 48px;
  margin: 0 0 64px;
  /* 32px all round so the headings inside land on the same x as the callout
     below, whose 3px rule plus 29px padding comes to the same inset. */
  padding: 32px;
  background: #fafafa;
  border-radius: 12px;
}

.g80-instr-lists__heading,
.g80-instr-faq__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--instr-accent);
  margin: 0 0 20px;
}

.g80-instr-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* A grid rather than a flex row so a wrapping part name hangs under itself
   instead of running back under the quantity. */
.g80-instr-list li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--instr-ink);
}

.g80-instr-list li + li {
  margin-top: 13px;
}

/* Quantity recedes: ten rows of "1x" should not compete with the part name. */
.g80-instr-qty {
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--instr-muted);
  font-variant-numeric: tabular-nums;
}

/* Safety. Same callout language as the shipping fee panel. */
.g80-instr-note {
  background: var(--instr-panel);
  border-left: 3px solid var(--instr-accent);
  border-radius: 0 4px 4px 0;
  padding: 22px 26px 22px 29px;
  margin: 0 0 80px;
}

.g80-instr-note__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--instr-accent);
  margin-bottom: 8px;
}

.g80-instr-note p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--instr-ink);
}

.g80-instr-note--tight {
  margin: 4px 0 0;
}

/* Steps. The number reads at title size, immediately before the title, so a
   section announces itself as "02. Mount the receiver" rather than hanging a
   small label off in a margin. */
.g80-instr-step {
  margin: 0;
  padding: 0;
  scroll-margin-top: 40px;
}

.g80-instr-step + .g80-instr-step {
  margin-top: 80px;
}

.g80-instr-step__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.g80-instr-step__num {
  flex: 0 0 auto;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--instr-accent);
  font-variant-numeric: tabular-nums;
}

.g80-instr-step__num::after {
  content: ".";
}

.g80-instr-step__title {
  font-size: 27px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--instr-ink);
  margin: 0;
}

.g80-instr-step__body {
  margin-top: 22px;
  max-width: var(--instr-text);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.g80-instr-step__body p,
.g80-instr-step__body li {
  font-size: 17px;
  line-height: 1.75;
  color: var(--instr-body);
}

.g80-instr-step__body ol,
.g80-instr-step__body ul {
  /* Sized so the marker's left edge lands on the step's prose, not inside it. */
  padding-left: 1.2em;
  font-variant-numeric: tabular-nums;
}

.g80-instr-step__body li + li {
  margin-top: 12px;
}

.g80-instr-step__body li::marker {
  color: var(--instr-accent);
  font-weight: 700;
}

.g80-instr-figure {
  margin: 2px 0 0;
}

.g80-instr-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.g80-instr-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--instr-muted);
}

.g80-instr-end {
  margin-top: 88px;
}

.g80-instr-end p {
  max-width: var(--instr-text);
  font-size: 17px;
  line-height: 1.75;
  color: var(--instr-body);
}

/* FAQ. Same accordion as the product pages: same class names, same single-open
   behaviour, driven by the same js/product-faq.js. The rules are restated here
   rather than shared with css/product.css because that file also carries
   `.product p { margin-bottom: 1em }`, which cannot be loaded off a product
   page, and because this stylesheet is mirrored into the page body verbatim.
   Keep the two in step if the product accordion is restyled. */
.g80-instr-faq {
  margin-top: 88px;
  scroll-margin-top: 40px;
}

.g80-instr-faq .g80-product-faq-accordion {
  max-width: var(--instr-text);
  margin: 0;
}

.g80-instr-faq .g80-product-faq-item {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 10px;
}

.g80-instr-faq .g80-product-faq-question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 15px 40px 15px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--instr-ink);
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.g80-instr-faq .g80-product-faq-question:hover {
  color: var(--instr-accent);
}

.g80-instr-faq .g80-product-faq-question::after {
  content: "+";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--instr-accent);
  transition: transform 0.3s;
}

.g80-instr-faq .g80-product-faq-item.active .g80-product-faq-question::after {
  content: "−";
}

.g80-instr-faq .g80-product-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease-out,
    padding 0.3s ease-out;
  padding: 0 15px;
}

.g80-instr-faq .g80-product-faq-item.active .g80-product-faq-answer {
  max-height: 500px;
  padding: 0 15px 15px;
  transition:
    max-height 0.3s ease-in,
    padding 0.3s ease-in;
}

.g80-instr-faq .g80-product-faq-answer p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--instr-body);
}

.g80-instr-faq .g80-product-faq-answer p + p {
  margin-top: 12px;
}

/* Pinned step rail. Needs the room for a 190px nav plus the gap, so it only
   turns on once the container can give the content column its full measure
   back. Below this the chips above the content are the nav. */
@media screen and (min-width: 1100px) {
  .g80-instr {
    display: flex;
    align-items: flex-start;
    gap: var(--instr-nav-gap);
    max-width: calc(
      var(--instr-nav) + var(--instr-nav-gap) + var(--instr-measure)
    );
  }

  .g80-instr-header {
    max-width: calc(
      var(--instr-nav) + var(--instr-nav-gap) + var(--instr-measure)
    );
    padding-left: calc(var(--instr-nav) + var(--instr-nav-gap));
    margin-bottom: 64px;
  }

  .g80-instr-nav {
    flex: 0 0 var(--instr-nav);
    position: sticky;
    top: 40px;
  }

  .g80-instr-body {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--instr-measure);
  }

  .g80-instr-nav__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--instr-muted);
    margin: 0 0 14px 14px;
  }

  .g80-instr-toc {
    display: block;
    margin: 0;
  }

  /* The track is the one line left on the page. It reads as a progress
     indicator rather than a divider, which is why it survived. */
  .g80-instr-toc a {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0 8px 14px;
    border: none;
    border-radius: 0;
    border-left: 2px solid var(--instr-hairline);
    background: none;
    white-space: normal;
    font-size: 13px;
    line-height: 1.4;
    color: var(--instr-muted);
  }

  .g80-instr-toc a:hover,
  .g80-instr-toc a:focus-visible {
    background: none;
    color: var(--instr-ink);
    border-left-color: #c9c9c9;
  }

  .g80-instr-toc .is-current a {
    color: var(--instr-ink);
    font-weight: 600;
    border-left-color: var(--instr-accent);
  }

}

@media (max-width: 767px) {
  .g80-instr {
    font-size: 16px;
  }

  .g80-instr-toc {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 48px;
  }

  .g80-instr-toc::-webkit-scrollbar {
    display: none;
  }

  .g80-instr-lists {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 48px;
    padding: 24px 22px;
  }

  .g80-instr-note {
    padding: 18px 20px 18px 19px;
    margin-bottom: 56px;
  }

  .g80-instr-step + .g80-instr-step {
    margin-top: 56px;
  }

  .g80-instr-step__num,
  .g80-instr-step__title {
    font-size: 22px;
  }

  .g80-instr-step__body {
    margin-top: 18px;
    gap: 18px;
  }

  .g80-instr-step__body p,
  .g80-instr-step__body li {
    font-size: 16px;
  }

  .g80-instr-end {
    margin-top: 56px;
  }

  .g80-instr-faq {
    margin-top: 56px;
  }

  .g80-instr-faq .g80-product-faq-question,
  .g80-instr-faq .g80-product-faq-answer p {
    font-size: 16px;
  }

  .g80-instr-header {
    margin-bottom: 40px;
  }

  .g80-instr-hero {
    padding: 34px 26px 32px;
    border-radius: 10px;
  }

  .g80-instr-hero::before {
    margin-bottom: 20px;
  }

  .g80-instr-lede {
    margin-top: 18px;
    font-size: 16px;
  }
}

@media print {
  .g80-instr-nav {
    display: none;
  }

  .g80-instr-hero {
    background: none;
    padding: 0;
  }

  .g80-instr-hero .g80-instr-title {
    color: #000000;
  }

  .g80-instr-lede {
    color: #333333;
  }

  .g80-instr-step {
    break-inside: avoid;
  }

  .g80-instr-step + .g80-instr-step {
    margin-top: 48px;
  }

  /* Print has no accordion: every answer is open. */
  .g80-instr-faq .g80-product-faq-answer {
    max-height: none;
    overflow: visible;
    padding: 0 15px 15px;
  }

  .g80-instr-faq .g80-product-faq-question::after {
    display: none;
  }

  .g80-instr-faq .g80-product-faq-item {
    break-inside: avoid;
  }
}