/* Study guide only. The shared look (fonts, colours, masthead, navigation, document text, buttons and the
   button row, footer) is in /site.css; no button rule belongs here (checkSharedLookMatchesApp). */
.doc .meta{font-family:var(--font-mono); font-size:12px; color:var(--paper-dim); margin:-4px 0 14px;}
.tip, .diff{border-radius:var(--radius); padding:12px 14px; margin:16px 0; font-size:14.5px;}
.tip{background:var(--cyan-dim); border-left:3px solid var(--cyan);}
.diff{background:var(--amber-dim); border-left:3px solid var(--amber);}
.diff b.tag{display:block; margin-bottom:2px; font-family:var(--font-display); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--amber);}
.docs{font-size:14px; color:var(--paper-dim); margin:12px 0 0;}
.docs a{display:inline-block; margin-right:12px; white-space:nowrap;}
.practice-line{margin:0 0 18px; color:var(--paper-dim);}
/* Each domain page's Practise link is a small filled button (/site.css); this is only its space above. */
.practise{margin:10px 0 0;}
.doc th.num, .doc td.num{text-align:right; white-space:nowrap;}
.doc table.kv th{width:28%;}
/* The overview's comparison table: numeric headers may wrap, so the two text columns keep their width. */
.doc table[data-compare] th.num{white-space:normal;}
/* On a phone, tables with several text columns become one card per row, each cell under its column's
   name (data-label), so nothing needs scrolling sideways. The first cell is the row's title. */
@media (max-width:640px){
  .doc td code{overflow-wrap:anywhere;}
  .doc table.cards, .doc table.cards tbody, .doc table.cards tr, .doc table.cards td{display:block; width:100%;}
  .doc table.cards tr:first-child{display:none;}
  .doc table.cards tr{border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel); margin:0 0 10px; overflow:hidden;}
  .doc table.cards td{border:none; border-top:1px solid var(--line); padding:8px 12px;}
  .doc table.cards td:first-child{border-top:none; background:var(--panel-2); font-family:var(--font-display); font-weight:600;}
  .doc table.cards td:not(:first-child)::before{content:attr(data-label); display:block; margin-bottom:2px; font-family:var(--font-display); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--paper-dim);}
}