/* ==========================================================================
   Scryglass site — Debug probes (2r), the capability page at
   /product/debugging.
   Depends on tokens.css, site.css and components.css, in that order.

   Every measurement here is transcribed from the artboard. Sections are
   full-bleed inside the 1240px page card and carry their own vertical
   padding; the 44px horizontal gutter is --page-gutter throughout.

   The page shares its vocabulary with the product page but not its
   stylesheet: marketing.css is owned elsewhere, so the blocks below are
   named for this page and live here. Where the two describe the same thing
   — a numbered section, a mono strip — the values match on purpose.
   ========================================================================== */

/* A named UI affordance or a quoted question inside prose: emphasised by
   colour, not by italics, as everywhere else on the site. */
.debugging .em-ui {
  font-style: normal;
  color: var(--text-primary);
}

/* --- Breadcrumb -------------------------------------------------------------
   The page's only wayfinding: it is not in the nav, so the trail back up to
   Product is the link that puts it in the hierarchy.                        */

.crumbs {
  display: flex;
  gap: 6px;
  padding: 34px var(--page-gutter) 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}

.crumbs__link {
  color: var(--text-dim);
}

.crumbs__sep {
  color: var(--dash-alt);
}

.crumbs__current {
  color: #928EA0; /* --text-muted, as drawn: the current crumb is the brightest
                     of the three */
}

/* --- Hero ------------------------------------------------------------------ */

.dbg-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px var(--page-gutter) 64px;
  border-bottom: 1px solid var(--hairline);
}

/* Wider tracking than the shared eyebrow, as the artboard draws it. */
.dbg-hero .eyebrow {
  letter-spacing: .18em;
}

.dbg-hero__title {
  max-width: 900px;
  font-size: 52px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.03em;
  text-wrap: pretty;
}

.dbg-hero__lead {
  max-width: 700px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- The two lead claims ----------------------------------------------------
   Equal weight by construction: two columns of the same width, the same type
   scale and the same eyebrow colour. Only the background step differs, and
   that is the alternation the rest of the page continues.                   */

.dbg-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--hairline);
}

.dbg-split__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 56px var(--page-gutter);
}

.dbg-split__col:first-child {
  border-right: 1px solid var(--hairline);
}

.dbg-split__col--panel {
  background: var(--bg-panel);
}

.dbg-split__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.dbg-split__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* --- The five numbered sections --------------------------------------------
   01 and 03 and 05 on the page background, 02 and 04 on the panel step.     */

.dbg-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 64px var(--page-gutter);
  border-bottom: 1px solid var(--hairline);
}

.dbg-section--panel {
  background: var(--bg-panel);
}

.dbg-section__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 820px;
}

.dbg-section__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--accent-pink);
}

.dbg-section__title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.dbg-section__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* --- Bench-survival reference table -----------------------------------------
   A definition list, not a table: three failure modes and what the app does
   about each. Ruled top and bottom so the block reads as a reference rather
   than as more prose.                                                       */

.dbg-table {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.dbg-table__row {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
}

.dbg-table__row:last-child {
  border-bottom: 1px solid var(--hairline);
}

.dbg-table__term {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
}

.dbg-table__desc {
  color: var(--text-muted);
}

/* --- Stats strip ------------------------------------------------------------
   Three mono cells. The first two carry a cyan link out to the supported
   hardware list, which lives in production and not in the design source.   */

.dbg-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
}

.dbg-stats__cell {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 38px var(--page-gutter);
}

.dbg-stats__cell:not(:last-child) {
  border-right: 1px solid var(--hairline);
}

.dbg-stats__label {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--text-faint);
}

.dbg-stats__value {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
}

.dbg-stats__link {
  font-size: 12px;
  color: var(--accent-cyan);
}

/* --- Closing band ----------------------------------------------------------
   No border underneath: the shared footer draws its own top hairline, and
   the artboard shows one line here, not two.                               */

.dbg-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 56px var(--page-gutter);
  background: var(--bg-panel);
}

.dbg-close__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dbg-close__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.dbg-close__body {
  font-size: 16px;
  color: var(--text-muted);
}

.dbg-close__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
}

.dbg-close__compare {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-cyan);
}

.dbg-close__cta {
  padding: 16px 26px;
  font-size: 14px;
}

/* --- Back up to Product -----------------------------------------------------
   The artboard folds this link into the footer row. Here the footer is the
   shared one, so the link keeps the footer's type and colour and sits in its
   own row directly above it.                                               */

.dbg-back {
  display: flex;
  padding: 24px var(--page-gutter);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-ghost);
}

/* ==========================================================================
   Responsive
   See the breakpoint table at the foot of site.css. Nothing below this line
   matches at 1240px or wider.
   ========================================================================== */

/* Display type: the upper bound is the artboard value and the middle term
   still resolves to it at 1239px, so there is no step at the boundary. */
@media (max-width: 1239px) {
  .dbg-hero__title { font-size: clamp(30px, 4.21vw, 52px); }
}

/* The two lead claims stack before the copy columns get narrower than the
   reading measure. The rule that divided them becomes the rule between them,
   and the panel step keeps marking the second one. */
@media (max-width: 900px) {
  .crumbs { padding: 28px var(--page-gutter) 0; }

  .dbg-hero {
    gap: 16px;
    padding: 24px var(--page-gutter) 48px;
  }

  .dbg-split { grid-template-columns: 1fr; }

  .dbg-split__col { padding: 40px var(--page-gutter); }

  .dbg-split__col:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .dbg-split__title { font-size: 26px; }

  .dbg-section {
    gap: 14px;
    padding: 48px var(--page-gutter);
  }

  .dbg-section__title { font-size: 28px; }

  .dbg-stats { grid-template-columns: 1fr; }

  .dbg-stats__cell { padding: 30px var(--page-gutter); }

  .dbg-stats__cell:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .dbg-close {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 40px var(--page-gutter);
  }

  .dbg-close__title { font-size: 25px; }

  .dbg-close__actions { flex-wrap: wrap; }
}

@media (max-width: 620px) {
  .dbg-hero__lead { font-size: 16px; }

  .dbg-split__body,
  .dbg-section__body { font-size: 15px; }

  .dbg-section__title { font-size: 25px; }

  /* 230px of mono term plus a description is more than a phone has. The two
     halves stack, and the rules that separated the rows still separate
     them. */
  .dbg-table__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .dbg-close__cta {
    flex: 1 1 auto;
    text-align: center;
  }
}