/* Article polish for /learn/.
   Visual only. The generated pages inherit their shell from a real page, so this layer raises the
   two elements a technical article lives on: the formula block and the data table. */

/* ---- Formula blocks -------------------------------------------------------------------------
   These carry notation, not prose, and are deliberately never translated. Giving them a container
   says so: a reader should be able to tell at a glance what is explanation and what is definition. */
main pre{
  margin:20px 0;
  padding:16px 18px;
  overflow-x:auto;
  border:1px solid rgba(163,255,18,.16);
  border-left:3px solid rgba(163,255,18,.55);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(163,255,18,.045), rgba(255,255,255,.012));
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
main pre code{
  display:block;
  padding:0;
  border:0;
  background:none;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:13.5px;
  line-height:1.75;
  white-space:pre;
  color:#d7e6cd;
  letter-spacing:0;
}

/* ---- Data tables ---------------------------------------------------------------------------- */
main table{
  width:100%;
  margin:22px 0;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  font-variant-numeric:tabular-nums;
}
main thead th{
  padding:11px 14px;
  background:rgba(255,255,255,.035);
  border-bottom:1px solid rgba(255,255,255,.09);
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#8b968c;
  text-align:left;
  white-space:nowrap;
}
main tbody td{
  padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  vertical-align:top;
}
main tbody tr:last-child td{border-bottom:0}
main tbody tr:hover td{background:rgba(163,255,18,.035)}
main tbody td:first-child{font-weight:650;color:#eaf2e6;white-space:nowrap}
main table code{font-size:12.5px;white-space:nowrap}

/* A table wider than the column scrolls inside itself; the page never scrolls sideways. */
main table{display:block;overflow-x:auto;max-width:100%}
@media (min-width:720px){main table{display:table}}