/* The live panel (theme.md section 4, "Sign"). From docs/design/sketches/dfw.html. */
@layer components {
  .sign { container-type: inline-size; background: var(--sign); color: var(--sign-ink); margin: 8px -20px 0; padding: 18px 20px 16px; }
  @media (min-width: 800px) { .sign { margin: 8px 0 0; padding: 22px 26px 18px; } }
  .sign-table { width: 100%; }
  .sign-table th, .sign-table td { text-align: left; vertical-align: middle; padding: 5px 0; }
  .sign-table thead th { font-weight: 400; font-size: .9rem; color: var(--sign-muted); border-bottom: 2px solid var(--sign-ink); padding-bottom: 6px; }
  .sign-table thead th + th { text-align: right; }
  .sign-table tr.group th { font-weight: 400; font-size: .85rem; color: var(--sign-muted); padding: 16px 0 2px; border-bottom: 1px solid var(--sign-rule); }
  .sign-table tr.group:first-child th { padding-top: 10px; }
  .sign-table tbody th { font-weight: 400; width: 40%; }
  .sign-table tbody th .cp { font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; }
  .sign-table td.lane { text-align: right; white-space: nowrap; width: 30%; line-height: 1.1; }
  .sign-table .num { font-weight: 800; font-size: clamp(1.55rem, 5.2vw, 2.1rem); letter-spacing: -.02em; }
  .sign-table .unit { font-size: .9rem; margin-left: .3em; color: var(--sign-muted); }
  .sign-table .closed, .sign-table .none { font-size: .95rem; color: var(--sign-muted); }
  /* Long names ("Checkpoint 10") in a phone-wide panel: smaller code, narrower name column. */
  @container (max-width: 480px) {
    .sign-table tbody th { width: 34%; }
    .sign-table tbody th .cp { font-size: 1.1rem; }
    .sign-table td.lane { width: 33%; }
  }
  .sign-table .none { opacity: .55; }
  .sign-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sign-rule); font-size: .92rem; color: var(--sign-muted); }
  .sign-foot b { color: var(--sign-ink); font-weight: 700; }
  .sign > p:only-child { font-size: 1.05rem; max-width: 62ch; }
}
