/* =========================================================================
   ScanBridge — Installation guide page
   Documentation layout built on top of styles.css (shared base/background)
   ========================================================================= */

/* ---------- Doc hero ---------- */
.doc-hero {
  position: relative;
  padding: 70px 0 40px;
}
.doc-hero-inner { max-width: 820px; }
.doc-hero h1 {
  margin: 18px 0 16px;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--text-hi);
}
.doc-hero p.lead {
  font-size: 1.12rem;
  color: var(--text);
  margin: 0;
  max-width: 680px;
}
.doc-hero .eyebrow { margin-bottom: 4px; }

/* ---------- Doc layout: sticky TOC + content ---------- */
.doc-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding: 24px 0 110px;
}

.doc-toc {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  align-self: start;
  max-height: calc(100vh - var(--nav-h) - 48px);
  overflow-y: auto;
  padding-right: 8px;
}
.doc-toc h2 {
  margin: 0 0 14px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--grad-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.doc-toc ul { list-style: none; margin: 0; padding: 0; }
.doc-toc li { margin: 0; }
.doc-toc a {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--text-mid);
  font-size: 0.9rem;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.doc-toc a:hover { color: var(--text-hi); background: rgba(150, 180, 255, 0.05); }
.doc-toc a.active {
  color: var(--cyan-2);
  border-left-color: var(--cyan);
  background: rgba(34, 211, 238, 0.07);
}

/* ---------- Doc content ---------- */
.doc-content { min-width: 0; max-width: 820px; }
.doc-section { scroll-margin-top: calc(var(--nav-h) + 24px); margin-bottom: 56px; }
.doc-section:last-child { margin-bottom: 0; }

.doc-section > h2 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text-hi);
  padding-top: 8px;
}
.doc-section > h3 {
  margin: 32px 0 12px;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--text-hi);
}
.doc-section > h4 {
  margin: 24px 0 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-hi);
}
.doc-section p { margin: 0 0 16px; color: var(--text); }
.doc-section p a { font-weight: 500; }
.doc-section ul, .doc-section ol { margin: 0 0 16px; padding-left: 22px; color: var(--text); }
.doc-section li { margin: 0 0 7px; }
.doc-section strong { color: var(--text-hi); }
.doc-lead { font-size: 1.06rem; color: var(--text-mid) !important; }

code.inline {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.86em;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.22);
  color: var(--cyan-2);
  padding: 1px 7px;
  border-radius: 6px;
  white-space: nowrap;
}

/* ---------- Callouts ---------- */
.callout {
  position: relative;
  display: flex;
  gap: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 0 0 22px;
  backdrop-filter: blur(12px);
}
.callout svg { flex-shrink: 0; color: var(--cyan-2); margin-top: 2px; }
.callout p { margin: 0; font-size: 0.95rem; color: var(--text); }
.callout p:not(:last-child) { margin-bottom: 8px; }
.callout.warn { border-left-color: var(--magenta); }
.callout.warn svg { color: var(--magenta); }

/* ---------- Code blocks with copy button ---------- */
.code {
  position: relative;
  background: linear-gradient(160deg, rgba(10, 14, 37, 0.85), rgba(6, 8, 22, 0.7));
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-md);
  margin: 0 0 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, 0.025);
}
.code-lang {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(150, 180, 255, 0.05);
  border: 1px solid var(--glass-brd);
  color: var(--text-mid);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.copy-btn:hover { color: var(--cyan-2); border-color: rgba(34, 211, 238, 0.4); background: rgba(34, 211, 238, 0.08); }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn.copied { color: var(--cyan-2); border-color: rgba(34, 211, 238, 0.5); }
.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.86rem;
  line-height: 1.7;
  color: #c9d6f5;
  tab-size: 2;
}
.code pre code { font-family: inherit; white-space: pre; }
.code .tok-key { color: var(--magenta); }
.code .tok-str { color: var(--cyan-2); }
.code .tok-com { color: var(--text-dim); font-style: italic; }
.code .tok-fn  { color: #ffd479; }
.code .tok-tag { color: #82aaff; }

/* ---------- Framework tabs ---------- */
.tabs { margin: 0 0 22px; }
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 4px;
}
.tab-btn {
  background: rgba(150, 180, 255, 0.04);
  border: 1px solid var(--glass-brd);
  color: var(--text-mid);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.tab-btn:hover { color: var(--text-hi); border-color: var(--glass-brd2); }
.tab-btn.active {
  color: #04060f;
  background: var(--grad-neon);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.35);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tabIn 320ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes tabIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab-panel > p:first-child { margin-top: 0; }

/* ---------- Options / definition cards ---------- */
.opt {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin: 0 0 18px;
  backdrop-filter: blur(12px);
}
.opt-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.opt-head code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95rem;
  font-weight: 600;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.25);
  color: var(--cyan-2);
  padding: 3px 10px;
  border-radius: 7px;
}
.opt-meta {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
}
.opt p { margin: 0 0 12px; font-size: 0.95rem; }
.opt p:last-child { margin-bottom: 0; }
.opt .code { margin-bottom: 0; margin-top: 14px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-brd);
  color: var(--text);
  padding: 3px 11px;
  border-radius: 999px;
}
.pill.default { border-color: rgba(34, 211, 238, 0.4); color: var(--cyan-2); background: rgba(34, 211, 238, 0.08); }

/* ---------- Back-to-top / footer cta in doc ---------- */
.doc-footer-note {
  margin-top: 12px;
  padding: 26px 28px;
  background: linear-gradient(135deg, rgba(13, 20, 52, 0.8), rgba(8, 12, 30, 0.6));
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  backdrop-filter: blur(12px);
}
.doc-footer-note strong { color: var(--text-hi); display: block; font-size: 1.1rem; margin-bottom: 4px; }
.doc-footer-note span { color: var(--text-mid); font-size: 0.95rem; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .doc-layout { grid-template-columns: 1fr; gap: 0; }
  .doc-toc {
    position: relative;
    top: 0;
    max-height: none;
    overflow: visible;
    margin-bottom: 32px;
    padding: 16px 18px;
    background: var(--glass);
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px);
  }
  .doc-toc ul { columns: 2; column-gap: 12px; }
}

@media (max-width: 600px) {
  .doc-hero { padding: 44px 0 24px; }
  .doc-layout { padding-bottom: 72px; }
  .doc-toc ul { columns: 1; }
  .opt { padding: 20px; }
  .doc-footer-note { padding: 22px 20px; }

  /* Inline code does not wrap, which is right on a desk and wrong on a phone:
     one snippet in the troubleshooting list measured 404px inside a 390px
     screen and dragged the whole page out to 455, so every section on the page
     sat too wide. Wrapping it is the smallest fix that keeps the snippet
     readable. Block code keeps `pre`, because it already scrolls on its own. */
  code.inline {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Two of the nine sections belong to the menu only. In the horizontal bar the
   seven that are there already need 1076px of the 1120 it is given, and these
   two would add 130 more. In the menu there is a column and no such limit, and
   the menu has to carry every section, because after the reader scrolls past
   the table of contents it is the only list left. */
@media (min-width: 1121px) {
  .nav-links .only-menu { display: none; }
}

/* Touch targets, the same rule as the home page and asking the same second
   question: a window shorter than 620px, wider than it is tall and under 950px
   wide is a phone on its side, and the width only query above never sees one.
   The wordmark measured 20px tall, which is not a target for a finger. */
@media (max-width: 600px),
       (orientation: landscape) and (max-height: 620px) and (max-width: 950px) {
  a.brand { display: inline-block; padding: 9px 0; }
}