/* Base look for the insurance tracker. Each design restyles it by setting the --tr-* variables on
   [data-tracker] or any ancestor, and may add its own rules on the .rh-tr-* classes. */
:root {
  --tr-ink: #16231c; --tr-muted: #5a6760; --tr-surface: #ffffff; --tr-line: #dfe5df; --tr-radius: 14px;
  --tr-in: #2f6b45; --tr-in-bg: #e2f0e6;
  --tr-soon: #8a5a12; --tr-soon-bg: #fbefd5;
  --tr-wait: #2a5d8a; --tr-wait-bg: #e1edf8;
  --tr-pend: #6b6f6c; --tr-pend-bg: #eceeea;
  --tr-accent: #3f5f4a; --tr-accent-ink: #ffffff;
  --tr-font: inherit; --tr-display: inherit;
}
.rh-tr { font-family: var(--tr-font); color: var(--tr-ink); display: grid; gap: 14px; text-align: left; }
.rh-tr *, .rh-tr *::before, .rh-tr *::after { box-sizing: border-box; }
.rh-tr :where(h3, h4, p, ul) { margin: 0; padding: 0; }
.rh-tr :where(ul) { list-style: none; }
.rh-tr :where(button, input, select):focus-visible { outline: 3px solid var(--tr-accent); outline-offset: 2px; }
.rh-tr-title { font-family: var(--tr-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.15; font-weight: 600; }
.rh-tr-asof { margin-top: 4px !important; font-size: .84rem; color: var(--tr-muted); }
.rh-tr-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9rem; color: var(--tr-muted); }
.rh-tr-count { display: inline-flex; align-items: center; gap: 6px; }
.rh-tr-count::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tr-pend); }
.rh-tr-count.rh-st-in::before { background: var(--tr-in); }
.rh-tr-count.rh-st-starting::before { background: var(--tr-soon); }
.rh-tr-count.rh-st-waitlist::before { background: var(--tr-wait); }
.rh-tr-count b { color: var(--tr-ink); font-weight: 650; }

.rh-tr-list { display: grid; gap: 8px; }
.rh-tr-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  padding: 11px 14px; background: var(--tr-surface); border: 1px solid var(--tr-line); border-radius: var(--tr-radius);
  border-left: 4px solid var(--tr-pend);
}
.rh-tr-item.rh-st-in, .rh-tr-item.rh-st-accepted { border-left-color: var(--tr-in); }
.rh-tr-item.rh-st-starting { border-left-color: var(--tr-soon); }
.rh-tr-item.rh-st-waitlist { border-left-color: var(--tr-wait); }
.rh-tr-main { display: grid; gap: 1px; min-width: 0; }
.rh-tr-name { font-weight: 620; }
.rh-tr-sub { font-size: .82rem; color: var(--tr-muted); }
.rh-tr-side { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rh-tr-chip {
  display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 650; white-space: nowrap;
  background: var(--tr-pend-bg); color: var(--tr-pend);
}
.rh-st-in .rh-tr-chip, .rh-st-accepted .rh-tr-chip { background: var(--tr-in-bg); color: var(--tr-in); }
.rh-st-starting .rh-tr-chip { background: var(--tr-soon-bg); color: var(--tr-soon); }
.rh-st-waitlist .rh-tr-chip { background: var(--tr-wait-bg); color: var(--tr-wait); }
.rh-tr-join {
  font: inherit; font-size: .84rem; font-weight: 650; min-height: 36px; padding: 0 14px; cursor: pointer;
  border: 1.5px solid var(--tr-wait); color: var(--tr-wait); background: transparent; border-radius: 999px;
}
.rh-tr-join:hover { background: var(--tr-wait-bg); }

.rh-tr-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: start; }
.rh-tr-col { display: grid; gap: 8px; }
.rh-tr-col-title { font-size: .76rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--tr-muted); }

.rh-tr--chips .rh-tr-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-tr--chips .rh-tr-item { padding: 7px 8px 7px 14px; border-radius: 999px; border-left-width: 1px; gap: 8px; }
.rh-tr--chips .rh-tr-item.rh-st-in, .rh-tr--chips .rh-tr-item.rh-st-accepted { border-color: var(--tr-in); }
.rh-tr--chips .rh-tr-sub { display: none; }

.rh-tr-wait { display: grid; gap: 10px; padding: 16px; background: var(--tr-wait-bg); border-radius: var(--tr-radius); }
.rh-tr-wait[hidden] { display: none; }
.rh-tr-wait-title { font-family: var(--tr-display); font-size: 1.1rem; font-weight: 600; }
.rh-tr-wait-lede, .rh-tr-fine { font-size: .88rem; color: var(--tr-muted); line-height: 1.5; }
.rh-tr-wait-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rh-tr-field { display: grid; gap: 4px; }
.rh-tr-field label { font-size: .78rem; font-weight: 600; color: var(--tr-muted); }
.rh-tr-field :is(input, select) {
  font: inherit; font-size: .95rem; width: 100%; min-height: 44px; padding: 8px 12px; color: var(--tr-ink);
  border: 1.5px solid var(--tr-line); border-radius: 12px; background: var(--tr-surface);
}
.rh-tr-submit { font: inherit; font-weight: 650; min-height: 46px; border: 0; border-radius: 999px; background: var(--tr-wait); color: #fff; cursor: pointer; }
.rh-tr-done { font-size: .9rem; font-weight: 600; padding: 10px 12px; border-radius: 10px; background: var(--tr-surface); }
.rh-tr-note { font-size: .84rem; color: var(--tr-muted); line-height: 1.5; }
@media (max-width: 520px) { .rh-tr-wait-fields { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rh-tr * { transition: none !important; } }