/* Styles for the question reference pages.
   Loaded after styles.css, so the site tokens (--bg, --fg, --accent, the
   JetBrains Mono stack) are already defined and reused here rather than
   redeclared. Nothing in this file affects the marketing pages. */

.q-page {
  /* One width for everything on the page. Prose, code blocks and test cards all
     share this measure so the left and right edges line up down the whole page. */
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px 96px;

  /* Secondary text sits a touch lighter here than the site's own --muted
     (#9a9aa2), which read dim against these cards. A small lift, still clearly
     short of white. Scoped to the column, so the shared footer and the home
     page keep the site's original tone. */
  --muted: #b2b2ba;
}

/* Breadcrumb. Kept as real links so the trail is crawlable and matches the
   BreadcrumbList in the page's structured data. */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 28px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.crumb span[aria-hidden] { opacity: 0.45; }

.q-page h1 {
  /* Sized so "Implement debounce in JavaScript" sits on a single line at this
     column width. JetBrains Mono has no narrow characters, so the ceiling here
     is lower than a proportional face would need. */
  font-size: clamp(1.4rem, 3.4vw, 1.95rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 20px 0 0;
  text-wrap: balance;
}

/* Titles like "Implement Function.prototype.call" contain tokens longer than a
   narrow viewport, and a monospace face gives them no thin characters to help.
   Without this the heading pushes the whole page sideways on a phone. */
.q-page h1,
.q-page h2,
.q-page h3,
.q-page :not(pre) > code,
.crumb,
.q-row .qt {
  overflow-wrap: break-word;
}


/* The direct answer. First thing after the H1 on purpose: it is what a
   featured snippet and an AI answer engine lift, and what a reader in a hurry
   needs. Kept under about 50 words. */
/* The card treatment itself comes from .feature-row in styles.css, the same
   component the home page uses. Only the per-block layout lives here. */
.answer {
  margin: 22px 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
}
.answer p { margin: 0; color: #e4e6ea; font-size: 1.02rem; }
.answer p + p { margin-top: 10px; }

.q-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
.tag {
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  background: var(--bg-alt);
}
.tag.level { color: var(--accent); border-color: rgba(91, 140, 255, 0.35); }

.q-page h2 {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 52px 0 0;
  scroll-margin-top: 20px;
}
.q-page h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 30px 0 0;
}
.q-page p { margin: 14px 0 0; color: #d7d7db; }
.q-page ul, .q-page ol { margin: 14px 0 0; padding-left: 22px; color: #d7d7db; }
.q-page li { margin: 8px 0 0; }
.q-page li::marker { color: var(--muted); }
.q-page a { color: var(--accent); }
.q-page a:hover { color: var(--accent-hover); }
.q-page strong { color: var(--fg); }

/* Code. The solution has to be real, selectable text in the HTML so that
   crawlers and answer engines can read it. Highlighting is added afterwards by
   script and is purely visual. */
pre {
  margin: 16px 0 0;
  padding: 20px 24px;
  overflow-x: auto;
  font-size: 0.83rem;
  line-height: 1.65;
  tab-size: 2;
}

/* A code block that is not inside a card gets the card treatment itself, so
   every framed block on the page has the same corner radius and edge. */
pre:not(.feature-row) {
  background: #0e0e11;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
pre code { font-family: var(--font-mono); color: #e6e6ea; white-space: pre; }
:not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  color: #cfd6e6;
}

.tok-com  { color: #6b7280; font-style: italic; }  /* comment */
.tok-str  { color: #9ece6a; }                       /* string */
.tok-num  { color: #ff9e64; }                       /* number */
.tok-lit  { color: #e0af68; }                       /* true, false, null, undefined */
.tok-this { color: #f7768e; }                       /* this, super */
.tok-dec  { color: #7aa2f7; }                       /* const, let, function, class */
.tok-key  { color: #bb9af7; }                       /* return, if, await, new */
.tok-cls  { color: #2ac3de; }                       /* Array, Promise, TypeError */
.tok-fn   { color: #7dcfff; }                       /* a name being called */
.tok-prop { color: #b4c2e0; }                       /* .property */
.tok-brk  { color: #9aa5ce; }                       /* brackets and braces */
.tok-op   { color: #89ddff; }                       /* operators and punctuation */

/* Test cases. This is the part no article about debouncing has, so it gets a
   deliberate frame rather than being folded into the prose. */
.tests { margin: 18px 0 0; padding: 0; overflow: hidden; }
.tests-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  font-size: 0.76rem;
  color: var(--muted);
}
.tests-head .lvl { color: var(--accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.test { border-top: 1px solid var(--border); padding: 14px 18px 16px; }
.test:first-of-type { border-top: none; }
.test-name { display: flex; gap: 10px; align-items: baseline; font-size: 0.85rem; color: var(--fg); }
.test-name .ok { color: #5fcf95; font-weight: 700; }
.test pre {
  /* No border here: the card already draws one, and a second box inside it is
     what made the code blocks look like they had different widths. */
  margin-top: 10px;
  background: #0b0b0e;
  border: none;
  border-radius: 6px;
  padding: 12px 14px;
}

.note {
  margin: 18px 0 0;
  padding: 20px 24px;
  font-size: 0.93rem;
  color: #d7d7db;
}
.note strong { color: var(--fg); }
.note p { margin: 0; color: #d7d7db; font-size: 0.93rem; }

/* FAQ. Real details/summary so it works without script, and the same
   questions appear in the FAQPage structured data. */
.faq { margin: 18px 0 0; padding: 0; overflow: hidden; }
.faq details { border-top: 1px solid var(--border); }
.faq details:first-child { border-top: none; }
.faq summary {
  cursor: pointer;
  padding: 14px 18px;
  font-size: 0.93rem;
  color: var(--fg);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-size: 1.1rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { background: var(--bg-alt); }
.faq .faq-body { padding: 0 20px 16px; }
.faq .faq-body p { margin: 0; font-size: 0.93rem; color: #d7d7db; line-height: 1.6; }

/* The call to action sits at the end, after the question is fully answered.
   Interrupting the answer with a download banner is what makes these pages
   feel like marketing instead of a reference. */
.q-cta { margin: 56px 0 0; text-align: center; }
.q-cta h2 { margin: 0; font-size: 1.15rem; }
.q-cta p {
  margin: 10px auto 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: 0.93rem;
  text-wrap: balance;
}
.q-cta .btn { margin-top: 18px; }
.q-cta .req { display: block; margin-top: 12px; font-size: 0.74rem; color: #8b8b94; }

.see-all { margin: 34px 0 0; font-size: 0.9rem; }

/* Hub index listing. The list card carries no padding of its own, so each
   row's divider runs the full width of the card rather than stopping short. */
.q-list { margin: 26px 0 0; padding: 0; overflow: hidden; }

.q-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  text-decoration: none;
}
.q-row:first-child { border-top: none; }
.q-row:hover { background: var(--bg-alt); }

/* Title and count share the top line; the grey line sits under both. */
.q-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.q-row .qt { color: var(--fg); font-size: 0.95rem; font-weight: 700; line-height: 1.35; }
.q-row .qs { flex: none; color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.q-row .qd { color: var(--muted); font-size: 0.8rem; line-height: 1.45; }

.q-page .feature-row.q-list,
.q-page .feature-row.tests,
.q-page .feature-row.faq {
  /* Higher specificity than the responsive rule below on purpose: these three
     are containers whose children carry the padding, so giving the card padding
     too double-insets everything and pulls the dividers off the edge. */
  padding: 0;
}

/* Small viewports. A monospace face has no narrow characters, so page padding
   plus card padding eats a punishing share of a phone screen: at 360px the text
   inside a card was down to 29 characters. Claw that back by shrinking the
   gutters and the type together, in two steps. */
@media (max-width: 700px) {
  .q-page { padding: 0 16px 64px; }
  .q-page h2 { margin-top: 40px; font-size: 1.18rem; }
  .q-page h1 { margin-top: 16px; }
  .q-page .feature-row { padding: 22px 20px; }
  .q-page pre.feature-row { padding: 16px 16px; }
  .answer { font-size: 0.98rem; }
  pre { font-size: 0.78rem; padding: 16px 16px; }
  .tests-head, .test { padding-left: 16px; padding-right: 16px; }
  .faq summary { padding: 13px 16px; }
  .faq .faq-body { padding: 0 16px 14px; }
  .q-row { padding: 15px 20px; }
}

@media (max-width: 460px) {
  .q-page { padding: 0 10px 56px; font-size: 0.9rem; }
  .q-page .feature-row { padding: 18px 14px; border-radius: 14px; }
  .q-page pre.feature-row { padding: 12px 12px; }
  .q-row { padding: 14px 16px; }
  .q-page h1 { font-size: 1.32rem; }
  .q-page h2 { font-size: 1.05rem; margin-top: 34px; }
  .q-page h3 { font-size: 0.94rem; }
  .q-page p, .q-page li { font-size: 0.87rem; }
  .answer, .answer p { font-size: 0.9rem; }
  pre { font-size: 0.7rem; padding: 12px 12px; line-height: 1.6; }
  .tests-head, .test { padding-left: 12px; padding-right: 12px; }
  .test pre { padding: 10px 10px; }
  .faq summary { padding: 12px 14px; font-size: 0.87rem; }
  .faq .faq-body { padding: 0 14px 12px; }
  .faq .faq-body p { font-size: 0.85rem; }
  .q-row { padding: 12px 14px; }
  .q-row .qt { font-size: 0.87rem; }
  .q-cta p { font-size: 0.85rem; }
  .crumb { font-size: 0.72rem; padding-top: 20px; }
}