/* The reference pages' tables and rule text (kanji lists, band plan, navigation
   lights, alphabet charts). Styled to sit inside assets/app.css's dark page, and
   to stay readable on a phone. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.ref-table th,
.ref-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  vertical-align: middle;
}

.ref-table thead th {
  position: sticky;
  top: 0;
  background: #17171d;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  z-index: 1;
}

.ref-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.ref-table .num {
  color: rgba(255, 255, 255, 0.45);
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 1%;
  white-space: nowrap;
}

.ref-table .kanji-cell {
  font-size: 1.9rem;
  line-height: 1.1;
  width: 1%;
  white-space: nowrap;
}

.ref-table .gloss {
  color: rgba(255, 255, 255, 0.55);
}

.ref-table ruby rt {
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 640px) {
  .ref-table { font-size: 0.85rem; }
  .ref-table th, .ref-table td { padding: 8px 10px; }
  .ref-table .kanji-cell { font-size: 1.6rem; }
}

/* The kanji lists keep their own class name for the character column. */
.ref-table .kanji-cell,
.ref-table .glyph {
  font-size: 1.9rem;
  line-height: 1.1;
  width: 1%;
  white-space: nowrap;
}

.ref-table .muted { color: rgba(255, 255, 255, 0.55); }

/* Rule text (COLREGs Part C). */
.rules .rule {
  margin-bottom: 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.rules .rule:last-child { border-bottom: none; }

.rules h3 {
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.rules .rule-cite {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
  margin-bottom: 14px;
}

.rules .rule-note {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  padding-left: 12px;
  margin-bottom: 14px;
}

.rules .rule-para {
  margin-bottom: 10px;
  line-height: 1.65;
}

.rules .rule-para.indent { padding-left: 24px; }

.rules .para-label {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  margin-right: 6px;
}

@media (max-width: 640px) {
  .ref-table .kanji-cell, .ref-table .glyph { font-size: 1.6rem; }
}