/* Overnight size card. Namespaced .sg-* so it cannot collide with style.css,
 * theme-v4.css or the other card modules. An oversized carried position is
 * carried by its multiple in bold as well as by colour. */
.size-guard-card { display: flex; flex-direction: column; gap: 6px; border-left: 4px solid #334155; }
.size-guard-card.sg-over { border-left-color: #f87171; }
.sg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sg-head .label { flex: 0 0 auto; }
.sg-meta { flex: 1 1 auto; text-align: right; font-size: 10px; color: var(--text-dimmer);
  font-variant-numeric: tabular-nums; }
.sg-line { font-size: 12px; color: var(--text); line-height: 1.45; }
.sg-line b { font-weight: 700; }
.sg-scroll { overflow-x: auto; }
table.sg-table { width: 100%; min-width: 380px; border-collapse: collapse; font-size: 11px;
  font-variant-numeric: tabular-nums; }
table.sg-table th, table.sg-table td { text-align: left; padding: 3px 8px 3px 0; vertical-align: top;
  border-bottom: 1px solid var(--border); }
table.sg-table thead th { font-weight: 500; color: var(--text-dimmer); white-space: nowrap; }
table.sg-table tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
table.sg-table td { color: var(--text); }
tr.sg-row-over .sg-mult { color: #f87171; font-weight: 800; }
.sg-sub { display: block; font-size: 10px; font-weight: 400; color: var(--text-dimmer); }
.sg-foot { font-size: 10px; color: var(--text-dimmer); line-height: 1.45; margin: 4px 0 0; }
.sg-empty { font-size: 12px; color: var(--text-dimmer); }
@media (max-width: 480px) {
  .sg-meta { text-align: left; flex-basis: 100%; }
  table.sg-table { min-width: 0; }
  table.sg-table th, table.sg-table td { padding: 3px 5px 3px 0; }
  table.sg-table thead th { white-space: normal; }
}