/* Exam and money guides: small additions on top of site.css. */

/* The article column is a grid item. Without min-width:0, a wide table's min-content width
   stretches the whole article past the phone viewport. */
.article-layout>.prose{min-width:0}

/* .prose strong is ink-coloured, which disappears on the dark key-points box. */
.keypoints strong{color:#fff}

/* Tables with 3+ columns (class="stack", labels added at build time) become labelled cards on phones. */
@media (max-width:640px){
  .prose table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .prose table.stack,.prose table.stack tbody,.prose table.stack tr,.prose table.stack td{display:block;width:100%}
  .prose table.stack tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .prose table.stack tr:last-child{border-bottom:0}
  .prose table.stack td{padding:0;border:0}
  .prose table.stack td:first-child{font-weight:600;color:var(--ink);margin-bottom:4px}
  .prose table.stack td+td{margin-top:8px}
  .prose table.stack td[data-label]::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .prose table.stack td:first-child::before{display:none}
}