/* Structural blocks the chapters use through ::: directives.
   ---------------------------------------------------------------------------
   Deliberately no accent rail down the left edge of anything. A tinted card with
   a coloured bar on its left is the most over-used device in generated layouts,
   and the manual should not look like every other page. Each block earns its
   separation a different way: the short version is set as an editorial
   standfirst between rules, an objection is set as a real pull-quote, and the
   comparison table is a framed data surface. */

.block {
  margin: var(--space-6) 0;
}

.block__label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.block__body > *:last-child {
  margin-bottom: 0;
}

/* --- the short version, for the reader who is not building it -------------- */

/* A standfirst: rules above and below, larger measure-restricted type, and a
   label that reads as an editorial marker rather than as a UI chip. */
.block--plain {
  margin: var(--space-7) 0;
  padding: var(--space-5) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--border);
}

.block--plain .block__label {
  color: var(--accent);
  margin-bottom: var(--space-4);
}

/* Body copy, not a heading: only the display weights of Poppins are shipped, so
   setting a paragraph in it would silently render at 600 and shout. */
.block--plain .block__body {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink);
}

/* --- the graded sections --------------------------------------------------- */

.block--deep,
.block--basics,
.block--advanced {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.block--deep .block__label,
.block--basics .block__label,
.block--advanced .block__label {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink-muted);
  border: 1px solid var(--border);
}

.block--advanced .block__label {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

/* --- objections, set as pull-quotes ---------------------------------------- */

/* The manual exists partly to answer things people believe that are not true, so
   the objection is quoted properly rather than boxed. The oversized quote mark is
   the only ornament in the design system, and it is here because a reader should
   be able to tell at a glance that these words are somebody else's. */
.block--objection {
  display: block;
  margin: var(--space-7) 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.block--objection .block__label {
  color: var(--ink-faint);
}

.block--objection .block__body {
  position: relative;
  padding-left: var(--space-8);
}

.block--objection .block__body::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.32em;
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
}

/* The quoted objection itself, written as the first paragraph. */
.block--objection .block__body > p:first-child {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--tracking-subheading);
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.block--objection .block__body > *:not(:first-child) {
  font-size: var(--text-base);
  color: var(--ink-muted);
}

.block--objection .block__body > *:nth-child(2) {
  position: relative;
  padding-top: var(--space-4);
}

.block--objection .block__body > *:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  border-top: 2px solid var(--accent);
}

/* --- side by side ---------------------------------------------------------- */

/* Comparison tables carry the argument of the manual, so the Databricks column is
   emphasised structurally rather than by colour alone. */
.block--compare .block__label {
  color: var(--accent);
}

.block--compare .block__body {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.block--compare table {
  width: 100%;
  min-width: 40rem;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.block--compare thead th {
  position: sticky;
  top: 0;
  background: var(--surface-raised);
  text-align: left;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

/* Second column is always Databricks. */
.block--compare thead th:nth-child(2) {
  color: var(--accent);
  background: var(--accent-soft);
}

.block--compare tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.block--compare tbody td:nth-child(2) {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  color: var(--ink);
  font-weight: 500;
}

.block--compare tbody td:first-child {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.block--compare tbody tr:last-child td {
  border-bottom: 0;
}

/* Comparison tables and diagrams carry the argument of the manual and suffer most
   from being squeezed into the prose measure, so on a wide viewport they use the
   space the sidebar layout leaves spare to the right of the text column. */
@media (min-width: 64rem) {
  .manual__content > .block--compare,
  .manual__content > .diagram,
  .manual__content > .block > .block__body > .block--compare {
    width: min(58rem, calc(100vw - var(--sidebar-width) - 11rem));
  }
}

@media (max-width: 60rem) {
  .block--compare table {
    min-width: 34rem;
  }

  .block--plain .block__body {
    font-size: var(--text-body);
  }

  .block--objection .block__body {
    padding-left: var(--space-6);
  }

  .block--objection .block__body::before {
    font-size: 3rem;
  }
}