.tr-join-wrap{
  --tr-forest:#163B26; --tr-deep:#0B1E13; --tr-gold:#B5872C; --tr-light:#E6F5E3;
  --tr-offwhite:#F5F5F5; --tr-cream:#F1ECE4;
  --tr-ink:#163B26; --tr-soft:rgba(22,59,38,.62); --tr-line:rgba(22,59,38,.18);
  --tr-error:#DC2626; --tr-error-lt:#FEF2F2;
  color:var(--tr-ink);
}

/* The lookup form (and the error-with-form state) reads like a small
   centered login card, so it alone gets the narrow fixed width. The
   results state (welcome message + class grid) is left unconstrained so
   it fills its real parent container's width -- whatever that width
   actually is on the live theme -- rather than guessing a pixel value
   that can drift out of alignment with the rest of the page's padding. */
.tr-join-wrap--form{ max-width:520px;margin:0 auto; }

.tr-join-title{ font-size:22px;font-weight:700;color:var(--tr-forest);margin:0 0 6px; }
.tr-join-sub{ color:var(--tr-soft);font-size:14px;margin:0 0 22px; }

.tr-join-alert{ background:var(--tr-error-lt);border:1px solid var(--tr-error);color:#8A1F2C;padding:14px 18px;border-radius:5px;margin-bottom:18px;font-weight:600;font-size:14px; }

.tr-join-form{ display:flex;flex-direction:column;gap:16px; }
.tr-join-field label{ display:block;font-weight:700;font-size:14px;color:var(--tr-ink);margin-bottom:6px; }
.tr-join-field input[type=text]{
  width:100%;padding:12px 14px;border:1.5px solid var(--tr-line);border-radius:5px;font-size:15px;color:var(--tr-ink);background:#fff;font-family:inherit;box-sizing:border-box;
}
.tr-join-field input:focus{ outline:none;border-color:var(--tr-gold);box-shadow:0 0 0 3px rgba(181,135,44,.25); }

.tr-join-submit{
  background:var(--tr-forest);color:#fff;border:none;border-radius:5px;padding:13px 20px;font-size:15px;font-weight:700;cursor:pointer;transition:background-color .15s ease;
}
.tr-join-submit:hover{ background:var(--tr-deep); }

.tr-join-hint{ font-size:13px;color:var(--tr-soft);margin:16px 0 0;text-align:center; }
.tr-join-hint a{ color:var(--tr-gold);font-weight:600;text-decoration:none; }
.tr-join-hint a:hover{ text-decoration:underline; }

.tr-join-cards{ display:flex;flex-direction:column; }
@media (min-width:1024px){
  .tr-join-cards{ display:grid;grid-template-columns:repeat(3, 1fr);gap:16px;align-items:start; }
  .tr-join-cards .tr-join-card{ margin-bottom:0; }
}

.tr-join-card{ background:#fff;border:1.5px solid var(--tr-line);border-radius:8px;padding:18px 20px;margin-bottom:14px; }
.tr-join-card__top{ display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px; }
.tr-join-card__programme{ font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tr-gold); }
.tr-join-card__badge{ font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:var(--tr-light);color:var(--tr-forest);padding:3px 8px;border-radius:4px; }
.tr-join-card__label{ font-size:17px;font-weight:700;color:var(--tr-forest);margin:0 0 4px; }
.tr-join-card__meta{ margin:0 0 14px; }
.tr-join-card__meta-row{ font-size:13px;color:var(--tr-soft);margin:0 0 3px; }
.tr-join-card__meta-label{ font-weight:700;color:var(--tr-ink); }
.tr-join-card__btn{
  display:inline-block;background:var(--tr-forest);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:11px 18px;border-radius:5px;transition:background-color .15s ease;
}
.tr-join-card__btn:hover{ background:var(--tr-deep);color:#fff; }

.tr-join-note{ font-size:12.5px;font-weight:600;color:var(--tr-forest);background:rgba(22,59,38,.07);border-radius:5px;padding:7px 11px;margin:0 0 12px; }

.tr-join-history{ margin-top:16px;padding-top:14px;border-top:1px solid var(--tr-line); }
.tr-join-history__label{ font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tr-soft);margin:0 0 8px; }
/* Plain divs, not a ul/li list, specifically so a theme's own list reset
   (e.g. ".entry-content ul{padding-left:20px}") can never outrank these
   and knock the badge out of alignment the way the old <ul>/<li> markup
   could. The .tr-join-wrap prefix on the row/date rules below is there
   purely for extra specificity margin against that same class of bug. */
.tr-join-history__list{ margin:0;padding:0;display:flex;flex-direction:column;gap:6px; }
.tr-join-wrap .tr-join-history__row{ display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:0;padding:0; }
.tr-join-wrap .tr-join-history__date{ color:var(--tr-ink); }
.tr-join-badge{ font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:4px;flex-shrink:0; }
.tr-join-badge--attended{ background:var(--tr-light);color:var(--tr-forest); }
.tr-join-badge--missed{ background:var(--tr-error-lt);color:#8A1F2C; }

.tr-join-again{ text-align:center;margin-top:8px;font-size:13px; }
.tr-join-again a{ color:var(--tr-soft);text-decoration:underline; }

@media (max-width:600px){
  .tr-join-wrap{ padding:0 20px; }
}