/* ==========================================================================
   roots-textbox — the only front-end stylesheet of the package.

   Figma: Text box 20:478 — Inter 400 18/28 (Body_lg), #3B2A20 at 72%,
   paragraphs separated by one blank line (28px), cap-box to cap-box.

   House rules: every selector naming a package class is written twice in
   one list (`.roots-tb …` + `#top #wrap_all .roots-tb …`); no !important;
   longhand margin/padding only.
   ========================================================================== */

@property --roots-fb { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --roots-tb-tt { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --roots-tb-tb { syntax: "<length>"; inherits: false; initial-value: 0px; }

.roots-tb,
#top #wrap_all .roots-tb {
  --roots-tb-fg: rgb(59 42 32 / 0.72);
  --roots-tb-font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --roots-tb-gap: 28px;
  /* cap-trim metrics — DESIGN constants (Inter v20) */
  --cap-b: 0.7275;
  --desc: 0.1362;
  --cap-b-t: var(--cap-b);
  --desc-t: var(--desc);
  /* the ramp reads the inline token into -now and never re-declares it */
  --roots-tb-mt-now: var(--roots-tb-mt, 0px);
  display: flow-root;
  box-sizing: border-box;
  margin-top: var(--roots-tb-mt-now);
  margin-right: 0;
  margin-bottom: var(--roots-tb-mb, 0px);
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  color: var(--roots-tb-fg);
  font-family: var(--roots-tb-font);
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
  .roots-tb, #top #wrap_all .roots-tb { --roots-fb: 1; }
}

@media (max-width: 1199px) {
  .roots-tb.roots-tb--scale,
  #top #wrap_all .roots-tb.roots-tb--scale { --roots-tb-mt-now: calc(var(--roots-tb-mt, 0px) * 0.75); }
}

@media (max-width: 899px) {
  .roots-tb.roots-tb--scale,
  #top #wrap_all .roots-tb.roots-tb--scale { --roots-tb-mt-now: calc(var(--roots-tb-mt, 0px) * 0.6); }
}

.roots-tb .roots-tb__body,
#top #wrap_all .roots-tb .roots-tb__body {
  display: block;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  background-color: transparent;
  border-top-width: 0;
  border-bottom-width: 0;
}

/* ---- paragraphs: the design's body text; trim lives on the leaf ---- */

.roots-tb .roots-tb__body p,
#top #wrap_all .roots-tb .roots-tb__body p {
  --fs: 18px;
  --lh: 28px;
  --roots-tb-tt: calc(var(--roots-fb) * (var(--lh) - var(--fs) * var(--cap-b-t)) / 2);
  --roots-tb-tb: calc(var(--roots-fb) * ((var(--lh) - var(--fs)) / 2 + var(--fs) * var(--desc-t)));
  display: block;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--roots-tb-gap);
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  color: inherit;
  font-family: inherit;
  font-size: var(--fs);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh);
  letter-spacing: 0;
  text-transform: none;
  text-box-edge: cap alphabetic;
}

.roots-tb .roots-tb__body p:first-child,
#top #wrap_all .roots-tb .roots-tb__body p:first-child {
  text-box-trim: trim-start;
  text-box: trim-start cap alphabetic;
  margin-top: calc(-1 * var(--roots-tb-tt));
}

.roots-tb .roots-tb__body p:last-child,
#top #wrap_all .roots-tb .roots-tb__body p:last-child {
  text-box-trim: trim-end;
  text-box: trim-end cap alphabetic;
  margin-bottom: calc(-1 * var(--roots-tb-tb));
}

.roots-tb .roots-tb__body p:only-child,
#top #wrap_all .roots-tb .roots-tb__body p:only-child {
  text-box-trim: trim-both;
  text-box: trim-both cap alphabetic;
}

/* ---- inline + lists: what the editor can add ---- */

.roots-tb .roots-tb__body strong,
.roots-tb .roots-tb__body b,
#top #wrap_all .roots-tb .roots-tb__body strong,
#top #wrap_all .roots-tb .roots-tb__body b {
  font-weight: 500;
}

.roots-tb .roots-tb__body a,
#top #wrap_all .roots-tb .roots-tb__body a {
  color: inherit;
  text-decoration: underline;
  border-bottom-width: 0;
}

.roots-tb .roots-tb__body ul,
.roots-tb .roots-tb__body ol,
#top #wrap_all .roots-tb .roots-tb__body ul,
#top #wrap_all .roots-tb .roots-tb__body ol {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: var(--roots-tb-gap);
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 28px;
  font-size: 18px;
  line-height: 28px;
}

.roots-tb .roots-tb__body li,
#top #wrap_all .roots-tb .roots-tb__body li {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.roots-tb .roots-tb__body ul:last-child,
.roots-tb .roots-tb__body ol:last-child,
#top #wrap_all .roots-tb .roots-tb__body ul:last-child,
#top #wrap_all .roots-tb .roots-tb__body ol:last-child {
  margin-bottom: 0;
}
