/* WeddingMapper data-viewer mockup: plain, readable, no decoration. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #000;
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.top, main { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.top { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid #ccc; font-size: 14px; }
.top a { color: #000; }
a { color: #0645ad; }
h1 { font-size: 24px; margin: 20px 0 8px; }
h2 { font-size: 19px; margin: 28px 0 8px; }
h3 { font-size: 16px; margin: 16px 0 6px; }
.counts { font-weight: 600; margin: 20px 0 4px; }
.sub { margin: 0 0 16px; color: #333; }
.na { color: #555; }

/* Cards: one fact per line, never wrapping at phone width. */
.card { border: 1px solid #ccc; border-radius: 3px; padding: 10px; margin: 0 0 12px; }
.card .l {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card h2.l { font-size: 17px; font-weight: 600; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 5px 8px 5px 0; border-bottom: 1px solid #e3e3e3; }
th[scope="row"] { width: 42%; font-weight: 600; }
.grid th { font-weight: 600; border-bottom: 1px solid #999; }
.grid td { font-size: 14px; }
.scroll { overflow-x: auto; }
ul { padding-left: 20px; margin: 6px 0; }
section { margin-bottom: 8px; }