/* reference.css — styles used only by the reference pages on tools.bdtech.app.

   These pages exist to be the best answer to a question, and to be linked to
   because of it. That makes them a different object from a product page: dense,
   scannable, and read on a phone by someone mid-task. The one thing that must
   not happen is a wide table forcing the whole page to scroll sideways, so
   every table scrolls inside its own box. */

.table-wrap {
  overflow-x: auto;
  margin-block: 1.25rem;
  -webkit-overflow-scrolling: touch;
}

table.sizes {
  border-collapse: collapse;
  inline-size: 100%;
  min-inline-size: 34rem;      /* below this the columns stop being readable */
  font-size: 0.95rem;
}

table.sizes th,
table.sizes td {
  text-align: start;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-block-end: 1px solid var(--rule, #e3e3e8);
  vertical-align: top;
}

table.sizes thead th {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6e6e76);
  font-weight: 600;
}

table.sizes td.disp { font-weight: 600; white-space: nowrap; }
table.sizes td.dev  { color: var(--muted, #6e6e76); }
table.sizes code    { font-size: 0.92em; white-space: nowrap; }

/* The whole point of the page: which two sizes are actually required. */
.req {
  display: inline-block;
  margin-inline-start: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #1d1d1f;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

.callout {
  border: 1px solid var(--rule, #e3e3e8);
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
  background: #fff;
}

.callout h2 { margin-block-start: 0; }

.pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-block: 1rem 0.75rem;
}

.pair span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.fine {
  font-size: 0.9rem;
  color: var(--muted, #6e6e76);
}

/* Hebrew and Arabic are not used on this site today, but the shared stylesheet
   is RTL-aware and these rules use logical properties so they stay correct if
   a locale is added. Pixel dimensions themselves always read left-to-right. */
:lang(he) table.sizes code,
:lang(ar) table.sizes code { direction: ltr; unicode-bidi: embed; }

/* ── Added for the text-direction reference ────────────────────────────────
   This page is about bidi, so it is the one page on the site where the demo
   markup must be allowed to misbehave on purpose: the first box inherits an
   RTL direction it should not have, because showing the failure is the point.
   Everything else here keeps its own direction regardless of the page locale. */

.demo-pair {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-block: 1.25rem;
}

.demo {
  border: 1px solid var(--rule, #e3e3e8);
  border-radius: 12px;
  padding: 0.9rem 1.1rem 1.1rem;
  background: #fff;
}

.demo-label {
  display: block;
  direction: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #6e6e76);
  margin-block-end: 0.5rem;
}

.demo p { margin: 0; }

/* The label is chrome and follows the page; the sample must follow its own
   `dir` attribute, which is the whole demonstration. */
.demo[dir="rtl"] .demo-label { direction: rtl; }

/* Code points, ranges and the abbreviations beside them are read left to right
   in every locale — a range reversed by the page direction is unreadable. */
table.sizes code,
.sizes .dev {
  direction: ltr;
  unicode-bidi: isolate;
}

.sizes .dev {
  display: inline-block;
  margin-inline-start: 0.4rem;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  color: var(--muted, #6e6e76);
}

.note-list code,
.lede code,
p code {
  direction: ltr;
  unicode-bidi: isolate;
}