/* ═══ REGISTER & CREATE ═══ prefix rg- ═══
   Every colour comes from il-design.css. styles.css animates `all` on links and
   buttons, including their geometry, so each one here names only the colours
   it animates. */
.rg-shell { max-width: 1080px; margin: 0 auto;
  padding: calc(var(--nav-h, 67px) + 26px) 16px calc(40px + var(--bn-h, 0px)); }
.rg-shell a, .rg-shell button, .rg-shell summary {
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s, border-color .16s, color .16s !important;
}
.rg-shell [hidden] { display: none !important; }

.rg-hero { margin: 0 0 16px; padding: clamp(18px, 4vw, 30px); border-radius: var(--r-lg, 20px);
  border: 1px solid var(--line, rgba(201,162,39,.16));
  background: radial-gradient(90% 150% at 0% 0%, rgba(201,162,39,.18), transparent 62%), var(--s-1, #0E0D0A); }
.rg-kicker { margin: 0 0 4px; color: var(--g-300, #D9B948); font-size: .7rem; font-weight: 900;
  letter-spacing: .13em; text-transform: uppercase; }
.rg-hero h1 { margin: 0 0 6px; color: var(--ink-hi, #fff); font-family: 'Cinzel', serif;
  font-size: clamp(1.45rem, 4.4vw, 2.2rem); line-height: 1.2; }
.rg-lead { margin: 0 0 14px; max-width: 62ch; color: var(--ink-mid, rgba(255,255,255,.62)); font-size: .9rem; line-height: 1.55; }

.rg-search { position: relative; display: block; max-width: 560px; }
.rg-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); z-index: 1;
  color: var(--g-300, #D9B948); pointer-events: none; }
/* !important on the padding and radius: the site-wide input rules in il-design.css
   would otherwise put the words underneath the magnifying glass. */
.rg-search input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 16px 0 44px !important;
  border-radius: var(--r-pill, 999px) !important; border: 1px solid var(--line-hot, rgba(201,162,39,.42));
  background: var(--s-0, #080806); color: var(--ink-hi, #fff); font: inherit; font-size: 16px; outline: 0;
  transition: border-color .16s !important; }
.rg-search input:focus { border-color: var(--g-200, #E6CE74); }
.rg-search input::placeholder { color: var(--ink-low, rgba(255,255,255,.42)); }
/* The browser draws this blue on a dark page. */
.rg-search input::-webkit-search-cancel-button { -webkit-appearance: none; width: 16px; height: 16px; cursor: pointer;
  background: var(--g-300, #D9B948);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; }

.rg-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.rg-try span { color: var(--ink-low, rgba(255,255,255,.42)); font-size: .75rem; }
.rg-try button { min-height: 32px; padding: 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, rgba(201,162,39,.16)); background: none;
  color: var(--ink-mid, rgba(255,255,255,.62)); font: inherit; font-size: .75rem; font-weight: 600; }
.rg-try button:hover, .rg-try button:active { border-color: var(--line-hot, rgba(201,162,39,.42)); color: var(--ink-hi, #fff); }

/* ── What the member already has ── */
.rg-mine { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rg-mine::-webkit-scrollbar { display: none; }
.rg-mine > span { flex: 0 0 auto; color: var(--g-300, #D9B948); font-size: .67rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase; }
.rg-mine a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; max-width: 220px;
  padding: 0 12px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line-hot, rgba(201,162,39,.42)); background: rgba(201,162,39,.1);
  color: var(--g-100, #F2E3A8); font-size: .78rem; font-weight: 700; }
.rg-mine a b { overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.rg-mine a svg { flex: 0 0 auto; }
.rg-mine a:hover, .rg-mine a:active { background: rgba(201,162,39,.2); }

/* ── Sections ── */
.rg-sec { margin: 0 0 24px; scroll-margin-top: calc(var(--nav-h, 67px) + 12px); }
.rg-sec h2 { margin: 0 0 3px; color: var(--ink-hi, #fff); font-family: 'Cinzel', serif; font-size: 1.15rem; }
.rg-sec > p { margin: 0 0 12px; color: var(--ink-mid, rgba(255,255,255,.62)); font-size: .82rem; line-height: 1.5; }

/* ── The twelve groups ── */
.rg-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.rg-grp { min-width: 0; border-radius: 14px; overflow: hidden; scroll-margin-top: calc(var(--nav-h, 67px) + 12px);
  border: 1px solid var(--line, rgba(201,162,39,.16)); background: var(--s-1, #0E0D0A); }
.rg-grp[open] { border-color: var(--line-hot, rgba(201,162,39,.42)); }
.rg-grp > summary { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 12px; cursor: pointer; list-style: none; }
.rg-grp > summary::-webkit-details-marker { display: none; }
.rg-grp > summary:hover, .rg-grp > summary:active { background: rgba(201,162,39,.08); }
.rg-grp > summary:focus-visible { outline: 2px solid var(--g-300, #D9B948); outline-offset: -2px; }
.rg-grp-ic { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 11px; background: rgba(201,162,39,.13); color: var(--g-300, #D9B948); }
.rg-grp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rg-grp-t b { color: var(--ink-hi, #fff); font-size: .92rem; font-weight: 800; line-height: 1.28; }
.rg-grp-t small { color: var(--ink-mid, rgba(255,255,255,.62)); font-size: .74rem; line-height: 1.38; }
.rg-grp-ch { flex: 0 0 auto; display: flex; color: var(--ink-low, rgba(255,255,255,.42)); }
.rg-grp[open] .rg-grp-ch { transform: rotate(90deg); color: var(--g-300, #D9B948); }
.rg-grp .rg-rows { border-top: 1px solid var(--line, rgba(201,162,39,.16)); border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }

/* ── A row is one door ── */
.rg-rows { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line, rgba(201,162,39,.16)); background: var(--s-1, #0E0D0A); }
.rg-row { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 56px; padding: 8px 12px;
  color: inherit; text-decoration: none; }
.rg-row:hover, .rg-row:active { background: rgba(201,162,39,.09); }
.rg-line + .rg-line { border-top: 1px solid var(--line-soft, rgba(255,255,255,.07)); }
.rg-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rg-row-t b { color: var(--ink, rgba(255,255,255,.88)); font-size: .88rem; font-weight: 700; line-height: 1.3; }
.rg-row-t small { color: var(--ink-mid, rgba(255,255,255,.62)); font-size: .73rem; line-height: 1.35; }
.rg-row-ch { flex: 0 0 auto; display: flex; color: var(--ink-low, rgba(255,255,255,.42)); }
.rg-tag { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .02em; }
.rg-tag-on { background: rgba(46,204,113,.16); color: #5fe39a; }
.rg-tag-soon { background: rgba(255,255,255,.08); color: var(--ink-mid, rgba(255,255,255,.62)); }
.rg-line { display: flex; flex-direction: column; }
.rg-add { align-self: flex-start; display: inline-flex; align-items: center; min-height: 36px; margin: -6px 0 6px 12px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line, rgba(201,162,39,.16)); color: var(--g-200, #E6CE74);
  font-size: .73rem; font-weight: 700; text-decoration: none; }
.rg-add:hover, .rg-add:active { border-color: var(--line-hot, rgba(201,162,39,.42)); background: rgba(201,162,39,.09); }

/* ── Listings ── */
.rg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rg-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 104px; padding: 12px; border-radius: 14px;
  border: 1px solid var(--line, rgba(201,162,39,.16)); background: var(--s-1, #0E0D0A); color: inherit; text-decoration: none; }
.rg-tile:hover, .rg-tile:active { border-color: var(--line-hot, rgba(201,162,39,.42)); background: var(--s-3, #1C1913); }
.rg-tile-ic { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: rgba(201,162,39,.13); color: var(--g-300, #D9B948); }
.rg-tile b { color: var(--ink, rgba(255,255,255,.88)); font-size: .84rem; font-weight: 800; line-height: 1.26; overflow-wrap: anywhere; }
.rg-tile small { color: var(--ink-mid, rgba(255,255,255,.62)); font-size: .71rem; line-height: 1.32; }

/* ── Results ── */
.rg-results { margin: 0 0 24px; }
.rg-count { margin: 0 2px 8px; color: var(--ink-mid, rgba(255,255,255,.62)); font-size: .78rem; font-weight: 600; }
.rg-results .rg-rows { max-width: 720px; }
.rg-results .rg-rows:empty { display: none; }
.rg-empty { max-width: 720px; padding: 18px; border-radius: 14px; border: 1px solid var(--line, rgba(201,162,39,.16)); background: var(--s-1, #0E0D0A); }
.rg-empty p { margin: 0 0 12px; color: var(--ink, rgba(255,255,255,.88)); font-size: .88rem; line-height: 1.5; }
.rg-empty-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-go { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 5px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-hot, rgba(201,162,39,.42)); background: none; color: var(--g-200, #E6CE74);
  font: inherit; font-size: .84rem; font-weight: 800; text-decoration: none; text-align: center; }
.rg-go:hover, .rg-go:active { background: rgba(201,162,39,.1); }
.rg-go.primary { background: linear-gradient(160deg, var(--g-200, #E6CE74), var(--g-500, #AC8A1E)); border-color: transparent; color: #14120A; }

.rg-foot { margin: 0; color: var(--ink-mid, rgba(255,255,255,.62)); font-size: .82rem; line-height: 1.5; }
.rg-foot a { color: var(--g-200, #E6CE74); font-weight: 700; }

@media (max-width: 760px) {
  .rg-groups { grid-template-columns: 1fr; }
  .rg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}