/* Shared by guide.html (export the reports) and install.html (install the app).
   Lifted out of guide.html when the second page appeared, so the two cannot
   drift apart visually. */
  :root {
    --ground:   #F6F8F6;
    --surface:  #FFFFFF;
    --ink:      #0F1F19;
    --muted:    #66756E;
    --hair:     #DDE4E0;
    --accent:   #047857;
    --accent-2: #DCEFE7;
    --warn-ink: #7C3E06;
    --warn-bg:  #FDF3E3;
    --warn-line:#E4B778;
    --shadow:   0 1px 2px rgba(15,31,25,.05), 0 8px 24px -12px rgba(15,31,25,.18);
    --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
    --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:   #0C1310;
      --surface:  #141D19;
      --ink:      #E7EDEA;
      --muted:    #93A39B;
      --hair:     #26332D;
      --accent:   #34D399;
      --accent-2: #103124;
      --warn-ink: #F0C489;
      --warn-bg:  #2A1E0C;
      --warn-line:#6B4A18;
      --shadow:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"] {
    --ground:   #0C1310;
    --surface:  #141D19;
    --ink:      #E7EDEA;
    --muted:    #93A39B;
    --hair:     #26332D;
    --accent:   #34D399;
    --accent-2: #103124;
    --warn-ink: #F0C489;
    --warn-bg:  #2A1E0C;
    --warn-line:#6B4A18;
    --shadow:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }

  * { box-sizing: border-box; }
  body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

  /* The page had no navigation at all: a seller who arrived here from a search
     or a support reply could read the whole guide and never find the rest of
     the site. Same bar as videos.html, same order, so the two setup pages feel
     like one place. */
  nav { border-bottom: 1px solid var(--hair); background: var(--surface); }
  nav .wrap { display: flex; align-items: center; gap: 22px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
  .brand {
    display: flex; align-items: center; gap: 10px; font-weight: 600;
    margin-right: auto; color: var(--ink); text-decoration: none;
  }
  .brand svg { display: block; }
  .nl { color: var(--muted); text-decoration: none; font-size: .9rem; }
  .nl:hover { color: var(--ink); }
  .btn {
    display: inline-flex; align-items: center; gap: 8px; border-radius: 9px;
    border: 1px solid transparent; font: inherit; font-weight: 500;
    text-decoration: none; padding: 8px 15px; font-size: .875rem;
  }
  .btn-primary { background: var(--accent); color: #fff; }

  /* ---- masthead ---------------------------------------------------- */
  header.top { padding: 72px 0 44px; border-bottom: 1px solid var(--hair); }
  .eyebrow {
    font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent); margin: 0 0 18px;
  }
  h1 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.02;
    letter-spacing: -.022em; margin: 0; text-wrap: balance;
  }
  .standfirst {
    margin: 20px 0 0; max-width: 60ch; font-size: 1.075rem; color: var(--muted);
  }
  .files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
  .file-chip {
    display: inline-flex; align-items: baseline; gap: 9px;
    border: 1px solid var(--hair); background: var(--surface);
    border-radius: 999px; padding: 7px 15px 7px 13px; font-size: .875rem;
  }
  .file-chip b { font-weight: 600; }
  .file-chip code {
    font-family: var(--mono); font-size: .78rem; color: var(--accent);
    background: var(--accent-2); border-radius: 4px; padding: 1px 6px;
  }

  /* ---- report tracks ------------------------------------------------ */
  section.track { padding: 60px 0 12px; }
  .track-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  .track-num {
    font-family: var(--mono); font-size: .78rem; letter-spacing: .12em;
    color: var(--muted); text-transform: uppercase;
  }
  h2 {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.05rem); letter-spacing: -.018em;
    margin: 0; line-height: 1.15;
  }
  .track-sub { margin: 10px 0 0; color: var(--muted); max-width: 62ch; }

  ol.steps { list-style: none; margin: 34px 0 0; padding: 0;
             display: flex; flex-direction: column; gap: 22px; }
  li.step {
    background: var(--surface); border: 1px solid var(--hair);
    border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  }
  .step-body { padding: 24px 26px; display: flex; gap: 16px; align-items: flex-start; }
  .dot {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-2); color: var(--accent);
    font-family: var(--mono); font-size: .82rem; font-weight: 500;
    display: grid; place-items: center; margin-top: 1px;
  }
  .step-body h3 {
    font-family: var(--body); font-weight: 600; font-size: 1.02rem;
    margin: 2px 0 0; line-height: 1.4; text-wrap: balance;
  }
  .step-body p { margin: 9px 0 0; color: var(--muted); font-size: .925rem; }
  .path {
    font-family: var(--mono); font-size: .8rem; background: var(--ground);
    border: 1px solid var(--hair); border-radius: 5px; padding: 1px 6px;
  }
  .shot {
    border-left: 1px solid var(--hair); background: var(--ground);
    padding: 18px; display: grid; place-items: center; min-width: 0;
  }
  .shot img {
    display: block; max-width: 100%; height: auto; border-radius: 7px;
    border: 1px solid var(--hair); background: #fff; cursor: zoom-in;
  }

  /* A landscape screenshot of Seller Central is 1200-1800px wide. Squeezed into
     the 5fr half of a step it rendered at about 45% and the labels a seller is
     meant to be looking for were unreadable. These steps stack instead, so the
     shot gets the full 1030px, and anything still too small can be opened at
     its real size. */
  li.step.wide { grid-template-columns: 1fr; }
  li.step.wide .shot { border-left: none; border-top: 1px solid var(--hair); padding: 22px; }
  li.step.wide .shot img { width: 100%; }

  .zoom-hint {
    display: block; margin-top: 9px; text-align: center;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted);
  }

  dialog.lightbox {
    border: none; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh;
  }
  dialog.lightbox::backdrop { background: rgba(8, 18, 14, .82); }
  dialog.lightbox img {
    display: block; max-width: 96vw; max-height: 88vh; width: auto; height: auto;
    border-radius: 8px; background: #fff; cursor: zoom-out;
  }
  dialog.lightbox p {
    margin: 10px 0 0; text-align: center; color: #fff; font-size: .85rem; opacity: .85;
  }

  /* ---- the rule that matters ---------------------------------------- */
  .rule-band {
    margin: 66px 0 8px; background: var(--warn-bg);
    border: 1px solid var(--warn-line); border-radius: 16px;
    padding: 34px 34px 32px;
  }
  .rule-band .eyebrow { color: var(--warn-ink); }
  .rule-band h2 { color: var(--warn-ink); }
  .rule-band > p { color: var(--warn-ink); max-width: 68ch; margin: 14px 0 0; }
  .cmp { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: 26px; }
  .cmp div {
    background: var(--surface); border: 1px solid var(--hair);
    border-radius: 10px; padding: 16px 18px;
  }
  .cmp .lbl {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 7px;
  }
  .cmp .rng { font-size: 1.02rem; font-weight: 600; margin: 0; color: var(--ink); }
  .cmp .why { color: var(--muted); font-size: .875rem; margin: 6px 0 0; }

  /* ---- closing ------------------------------------------------------- */
  section.finish { padding: 62px 0 88px; }
  .finish ol { margin: 22px 0 0; padding-left: 22px; color: var(--muted); }
  .finish li { margin-bottom: 9px; }
  .finish li strong { color: var(--ink); font-weight: 600; }
  footer {
    border-top: 1px solid var(--hair); padding: 26px 0 60px;
    color: var(--muted); font-size: .85rem;
  }
  footer .links {
    display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 22px;
    padding-top: 18px; border-top: 1px solid var(--hair);
  }
  footer .links a { color: var(--muted); text-decoration: none; }
  footer .links a:hover { color: var(--ink); text-decoration: underline; }

  @media (max-width: 800px) {
    li.step { grid-template-columns: 1fr; }
    .shot { border-left: none; border-top: 1px solid var(--hair); }
    .cmp { grid-template-columns: 1fr; }
    header.top { padding-top: 48px; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }
  @media print {
    body { background: #fff; }
    li.step, .rule-band { break-inside: avoid; box-shadow: none; }
  }