/* The Room, the five doors and the phone tab bar.
   Prefix r- for the Room, door- for the rail groups, tabbar- for the phone bar.
   Colours and type come from theme.css tokens, the same as every tool. */

/* ---------------------------------------------------------------- the rail */
.door-group { margin-top: 10px; }
.door-group-name {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 4px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.8); font-weight: 600;
}
.door-group .tool-link { padding-left: 14px; }
.door-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px; }
.door-sub .tool-link { padding: 7px 10px 7px 44px; font-size: 13.5px; }
.door-sub .tool-link > svg { display: none; }
.door-count {
  margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.18); color: var(--accent-soft);
}
.app.collapsed .door-group-name, .app.collapsed .door-sub, .app.collapsed .door-count { display: none; }

/* ------------------------------------------------------------ phone tab bar */
.tabbar { display: none; }
@media (max-width: 860px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(var(--accent-rgb), 0.16); background: var(--bg);
  }
  .tabbar-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 50px; border: 0; background: none; color: rgba(var(--ink-rgb), 0.5);
    font: inherit; font-size: 11px; font-weight: 500; cursor: pointer;
  }
  .tabbar-tab[aria-current="true"] { color: var(--accent-soft); }
  .tabbar-tab > svg { width: 22px; height: 22px; }
  /* Room for the bar under every page. */
  .app .tool-view, .app main.chat { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------------ the Room */
.r-wrap { display: flex; gap: 20px; align-items: flex-start; max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; }
.r-main { flex: 999 1 520px; min-width: 0; max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
.r-side { flex: 1 1 280px; max-width: 320px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
@media (max-width: 1000px) { .r-side { display: none; } }

.r-card { background: var(--bg-raised); border: 1px solid rgba(var(--accent-rgb), 0.18); border-radius: 14px; }
.r-eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--accent-rgb), 0.8); font-weight: 600; margin: 0; }

.r-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.r-top h2 { margin: 2px 0 0; font-family: var(--display); font-weight: var(--display-weight); font-size: 26px; letter-spacing: -0.01em; }
.r-top p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

.r-chips { display: none; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.r-chips::-webkit-scrollbar { display: none; }
.r-chip {
  flex: none; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.2); background: none; color: rgba(var(--ink-rgb), 0.65);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.r-chip[aria-current="true"] { background: rgba(var(--accent-rgb), 0.16); color: var(--accent-soft); border-color: rgba(var(--accent-rgb), 0.4); }
@media (max-width: 860px) { .r-chips { display: flex; } }

/* avatar */
.r-av {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; flex: none; background: rgba(var(--ink-rgb), 0.1); color: var(--ink); overflow: hidden;
}
.r-av--duke, .r-av--admin { background: var(--accent); color: var(--accent-ink); }
.r-av--sm { width: 30px; height: 30px; font-size: 12px; }
.r-av img { width: 100%; height: 100%; object-fit: cover; }

/* composer */
.r-compose { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.r-compose-open {
  flex: 1; text-align: left; background: var(--bg-input); border: 1px solid rgba(var(--accent-rgb), 0.14); border-radius: 999px;
  min-height: 44px; padding: 0 18px; color: rgba(var(--ink-rgb), 0.5); font: inherit; cursor: text;
}
.r-compose-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.r-compose-form input, .r-compose-form textarea {
  width: 100%; box-sizing: border-box; background: var(--bg-input); border: 1px solid rgba(var(--accent-rgb), 0.16); border-radius: 10px;
  color: var(--ink); font: inherit; padding: 10px 12px; outline: none;
}
.r-compose-form input:focus, .r-compose-form textarea:focus, .r-reply input:focus { border-color: rgba(var(--accent-rgb), 0.5); }
.r-compose-form input { font-weight: 600; }
.r-compose-form textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.r-compose-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.r-compose-foot .r-fine { flex: 1; }
.r-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.r-photo { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), 0.2); background: var(--bg-input); }
.r-photo img { width: 100%; height: 100%; object-fit: cover; }
.r-photo-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.6); color: #fff; font-size: 14px; cursor: pointer; }
.r-photo--busy { opacity: 0.5; }

.r-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 0; font: inherit; font-weight: 600; cursor: pointer; background: var(--accent-fill); color: var(--accent-ink);
}
.r-btn:hover { background: var(--accent-fill-hover); }
.r-btn[disabled] { opacity: 0.5; cursor: default; }
.r-btn--line { background: transparent; color: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), 0.4); }
.r-btn--line:hover { background: rgba(var(--accent-rgb), 0.1); }
.r-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.r-act {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: rgba(var(--ink-rgb), 0.62);
  font: inherit; font-size: 14px; min-height: 44px; padding: 0 8px; cursor: pointer; border-radius: 8px; text-decoration: none;
}
.r-act:hover { color: var(--ink); background: rgba(var(--ink-rgb), 0.05); }
.r-act > svg { width: 18px; height: 18px; }
.r-act[aria-pressed="true"] { color: var(--accent-soft); }
.r-act[aria-pressed="true"] svg { fill: rgba(var(--accent-rgb), 0.25); }
.r-fine { font-size: 13px; color: var(--muted); margin: 0; }
.r-fine--err { color: var(--loss); }

/* new posts pill */
.r-new {
  position: sticky; top: 8px; z-index: 5; align-self: center; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0;
  background: var(--accent-fill); color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* posts */
.r-feed { display: flex; flex-direction: column; gap: 14px; }
.r-post { overflow: hidden; }
.r-post--pinned { border-color: rgba(var(--accent-rgb), 0.42); }
.r-post-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 10px; }
.r-post-who { flex: 1; min-width: 0; }
.r-post-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.r-post-name a { color: inherit; text-decoration: none; }
.r-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; background: rgba(var(--accent-rgb), 0.18); color: var(--accent-soft); }
.r-pill--lvl { background: rgba(var(--ink-rgb), 0.08); color: rgba(var(--ink-rgb), 0.7); }
.r-post-when { font-size: 13px; color: var(--muted); }
.r-post-when a { color: inherit; text-decoration: none; }
.r-post-title { margin: 0; padding: 0 18px 6px; font-family: var(--display); font-weight: var(--display-weight); font-size: 21px; line-height: 1.25; }
.r-post-title a { color: inherit; text-decoration: none; }
.r-post-body { margin: 0; padding: 0 18px 14px; color: rgba(var(--ink-rgb), 0.85); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.r-post-body--clamp { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.r-more { background: none; border: 0; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; padding: 0 18px 12px; cursor: pointer; text-align: left; }
.r-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; padding: 0 18px 14px; }
.r-media--one { grid-template-columns: minmax(0, 1fr); }
.r-media a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), 0.16); background: var(--bg-input); }
.r-media img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.r-media .r-file { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: var(--ink); font-size: 14px; }
.r-post-foot { display: flex; align-items: center; gap: 4px; padding: 4px 10px 8px; border-top: 1px solid rgba(var(--accent-rgb), 0.12); flex-wrap: wrap; }
.r-post-foot .r-grow { flex: 1; }
.r-menu { position: relative; }
.r-menu-list { position: absolute; right: 0; top: 100%; z-index: 6; min-width: 160px; padding: 6px; border-radius: 10px; background: var(--bg-raised); border: 1px solid rgba(var(--accent-rgb), 0.2); box-shadow: 0 12px 32px rgba(0,0,0,0.5); display: flex; flex-direction: column; }
.r-menu-list button { text-align: left; background: none; border: 0; color: var(--ink); font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 7px; cursor: pointer; }
.r-menu-list button:hover { background: rgba(var(--ink-rgb), 0.06); }
.r-removed { color: var(--muted); font-style: italic; }

/* plays card */
.r-plays { margin: 0 18px 14px; background: var(--bg-deep); border: 1px solid rgba(var(--accent-rgb), 0.16); border-radius: 12px; overflow: hidden; }
.r-plays-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; }
.r-plays-head .r-eyebrow { min-width: 0; }
.r-plays-head a { white-space: nowrap; }
.r-plays-head a { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.r-play { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-top: 1px solid rgba(var(--accent-rgb), 0.12); font-size: 14px; }
.r-play-race { font-weight: 600; color: var(--accent-soft); }
.r-play-bet { font-weight: 600; }
.r-play-note { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
.r-play-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.r-play--pass { color: var(--muted); }
.r-plays-edit { display: flex; flex-direction: column; gap: 8px; }
.r-plays-row { display: grid; grid-template-columns: 64px 1fr 1fr 84px 36px; gap: 6px; }
.r-plays-row input { padding: 8px 10px; font-weight: 400; }
@media (max-width: 600px) { .r-plays-row { grid-template-columns: 56px 1fr 72px 32px; } .r-plays-row .r-plays-note { grid-column: 1 / -1; } }

/* thread */
.r-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: 14px; min-height: 44px; }
.r-back:hover { color: var(--ink); }
.r-comments { display: flex; flex-direction: column; }
.r-comment { display: flex; gap: 10px; padding: 12px 18px; border-top: 1px solid rgba(var(--accent-rgb), 0.1); }
.r-comment--reply { padding-left: 58px; border-top: 0; padding-top: 0; }
.r-comment-body { flex: 1; min-width: 0; }
.r-comment-who { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.r-comment-who .r-post-when { font-weight: 400; }
.r-comment-text { margin: 2px 0 0; font-size: 14px; color: rgba(var(--ink-rgb), 0.85); white-space: pre-wrap; overflow-wrap: anywhere; }
.r-comment-acts { display: flex; gap: 4px; align-items: center; margin-left: -8px; }
.r-comment-acts .r-act { min-height: 32px; font-size: 13px; }
.r-reply { display: flex; align-items: center; gap: 8px; padding: 10px 14px 14px; }
.r-reply--inline { padding: 6px 0 4px; }
.r-reply input { flex: 1; min-width: 0; min-height: 44px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), 0.18); background: var(--bg-input); color: var(--ink); padding: 0 16px; font: inherit; font-size: 14px; outline: none; }
.r-send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent-fill); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.r-send[disabled] { opacity: 0.5; }
.r-send svg { width: 20px; height: 20px; }

/* side column */
.r-side-card { padding: 16px 18px; }
.r-side-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(var(--accent-rgb), 0.1); font-size: 14px; }
.r-side-row:first-of-type { border-top: 0; }
.r-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.r-quick a { padding: 12px; border-radius: 10px; background: var(--bg-input); border: 1px solid rgba(var(--accent-rgb), 0.14); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.r-quick a:hover { border-color: rgba(var(--accent-rgb), 0.4); }
.r-online { display: flex; margin-top: 10px; }
.r-online .r-av { width: 32px; height: 32px; font-size: 12px; border: 2px solid var(--bg-raised); }
.r-online .r-av + .r-av { margin-left: -8px; }

/* tools grid door */
.r-tools { max-width: 900px; margin: 0 auto; padding: 0 16px 40px; display: flex; flex-direction: column; gap: 18px; }
.r-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.r-tile { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; min-height: 112px; border-radius: 14px; background: var(--bg-raised); border: 1px solid rgba(var(--accent-rgb), 0.18); color: var(--ink); text-align: left; font: inherit; cursor: pointer; text-decoration: none; }
.r-tile:hover { border-color: rgba(var(--accent-rgb), 0.45); }
.r-tile > svg { width: 24px; height: 24px; color: var(--accent); }
.r-tile strong { font-weight: 600; font-size: 15px; line-height: 1.2; }
.r-tile small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.r-tile--locked { opacity: 0.55; }
.r-tile--soon { opacity: 0.45; cursor: default; }

.r-empty { padding: 28px 18px; text-align: center; color: var(--muted); }
.r-loading { padding: 24px; text-align: center; color: var(--muted); }

/* ------------------------------------------------- matched to GHL (12 Oct) */
.door-icon { width: 20px; text-align: center; font-size: 14px; flex: none; }
.door-sub .door-group-name { padding: 10px 14px 2px 44px; }
.door-sub .tool-link > .door-icon { display: inline-block; }
.door-sub .tool-link { padding-left: 24px; }

/* avatar with the level badge, as GHL draws it */
.r-av { position: relative; overflow: visible; }
.r-av-lvl {
  position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-raised); box-sizing: border-box; line-height: 1;
}
.r-av--sm .r-av-lvl { min-width: 15px; height: 15px; font-size: 9px; right: -5px; bottom: -5px; }
.r-av img { border-radius: 50%; }

/* the card, GHL order: who, posted in, time; title; body; likes row; bar; inline comment */
.r-post { cursor: pointer; }
.r-post:hover { border-color: rgba(var(--accent-rgb), 0.36); }
.r-posted-in { font-size: 13px; color: var(--muted); }
.r-posted-in a { color: var(--accent); text-decoration: none; font-weight: 600; }
.r-post-head .r-post-when { margin-left: auto; align-self: flex-start; }
.r-likes-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px 8px; font-size: 13px; color: var(--muted); }
.r-likes-row .r-thumb { display: inline-flex; align-items: center; gap: 5px; }
.r-likes-row .r-thumb svg { width: 15px; height: 15px; color: var(--accent); }
.r-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(var(--accent-rgb), 0.12); }
.r-bar .r-act { justify-content: center; min-height: 44px; border-radius: 0; }
.r-inline { display: flex; align-items: center; gap: 10px; padding: 10px 14px 14px; }
.r-inline .r-reply { flex: 1; padding: 0; }
.r-view-more { display: block; margin-left: auto; background: none; border: 0; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; padding: 0 18px 8px; cursor: pointer; }

/* selections, the way Duke writes them */
.r-sel { margin: 0 18px 12px; display: flex; flex-direction: column; gap: 10px; }
.r-sel-race { background: var(--bg-deep); border: 1px solid rgba(var(--accent-rgb), 0.16); border-radius: 12px; padding: 12px 14px; }
.r-sel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.r-sel-head strong { font-family: var(--display); font-size: 19px; font-weight: var(--display-weight); color: var(--accent-soft); }
.r-sel-head span { font-size: 13px; color: var(--muted); }
.r-sel-horse { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 5px 0; font-size: 14px; line-height: 1.45; }
.r-sel-horse .r-sel-num { font-weight: 700; color: var(--accent-soft); font-variant-numeric: tabular-nums; }
.r-sel-horse .r-sel-name { font-weight: 700; text-transform: uppercase; }
.r-sel-ticket { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(var(--accent-rgb), 0.25); white-space: pre-wrap; font-size: 14px; font-weight: 600; color: var(--ink); }
.r-sel-ticket-label { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--accent-rgb), 0.8); margin-bottom: 4px; font-weight: 600; }

/* selections editor */
.r-sel-edit { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb), 0.25); background: var(--bg-deep); }
.r-sel-edit .r-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.r-sel-edit input, .r-sel-edit textarea { width: 100%; box-sizing: border-box; background: var(--bg-input); border: 1px solid rgba(var(--accent-rgb), 0.16); border-radius: 8px; color: var(--ink); font: inherit; padding: 8px 10px; outline: none; font-weight: 400; }
.r-sel-edit input:focus, .r-sel-edit textarea:focus { border-color: rgba(var(--accent-rgb), 0.5); }
.r-sel-edit label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--accent-rgb), 0.8); font-weight: 600; display: block; margin-bottom: 3px; }
.r-sel-edit-race { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid rgba(var(--accent-rgb), 0.16); }
.r-sel-edit-horse { display: grid; grid-template-columns: 56px 1fr 32px; gap: 6px; }
.r-sel-edit-horse .r-sel-notes { grid-column: 1 / -1; }
.r-sel-edit textarea { min-height: 64px; resize: vertical; }
.r-sel-edit .r-sel-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.r-sel-edit .r-sel-actions .r-grow { flex: 1; }
.r-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.5); color: #fff; font-size: 14px; cursor: pointer; }

/* composer additions */
.r-compose-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.r-compose-form select { background: var(--bg-input); border: 1px solid rgba(var(--accent-rgb), 0.16); border-radius: 10px; color: var(--ink); font: inherit; padding: 10px 12px; min-height: 44px; }
.r-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; min-height: 44px; }
.r-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }

/* the post panel over the feed */
.r-modal-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.6); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow: hidden; }
.r-modal { width: 100%; max-width: 720px; max-height: calc(100vh - 48px); background: var(--bg-raised); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.r-modal-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.12); }
.r-modal-top .r-grow { flex: 1; }
.r-modal-body { flex: 1; overflow-y: auto; min-height: 0; }
.r-modal-body .r-post { border: 0; border-radius: 0; cursor: default; }
.r-modal-body .r-post:hover { border-color: transparent; }
.r-modal-foot { border-top: 1px solid rgba(var(--accent-rgb), 0.16); background: var(--bg-raised); }
.r-modal-foot .r-reply { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
.r-no-comments { padding: 28px 18px; text-align: center; color: var(--muted); font-size: 14px; }
.r-no-comments strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.r-comments-off { padding: 14px 18px; text-align: center; color: var(--muted); font-size: 13px; }
@media (max-width: 860px) {
  .r-modal-scrim { padding: 0; }
  .r-modal { max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .r-modal-top { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
}
body.r-modal-open { overflow: hidden; }

/* right column: the group card and the board, as GHL */
.r-group { overflow: hidden; }
.r-group-cover { height: 110px; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.05)); display: flex; align-items: flex-end; padding: 12px 16px; }
.r-group-cover .r-pill { background: rgba(0,0,0,0.5); color: var(--accent-soft); }
.r-group-body { padding: 14px 18px 16px; }
.r-group-body h3 { margin: 0 0 4px; font-family: var(--display); font-weight: var(--display-weight); font-size: 20px; }
.r-group-body p { margin: 0; font-size: 14px; color: var(--muted); }
.r-group-links { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.r-group-links a { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.r-group-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(var(--accent-rgb), 0.12); margin-top: 14px; padding-top: 12px; text-align: center; }
.r-group-stats strong { display: block; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.r-group-stats span { font-size: 12px; color: var(--muted); }
.r-lb-head { display: flex; justify-content: space-between; align-items: baseline; }
.r-lb-head a { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.r-lb-row { display: grid; grid-template-columns: 28px 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; font-size: 14px; }
.r-lb-row + .r-lb-row { border-top: 1px solid rgba(var(--accent-rgb), 0.08); }
.r-lb-rank { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: rgba(var(--ink-rgb), 0.08); color: var(--muted); }
.r-lb-rank--1 { background: var(--accent); color: var(--accent-ink); }
.r-lb-rank--2 { background: rgba(var(--ink-rgb), 0.35); color: var(--bg); }
.r-lb-rank--3 { background: rgba(196, 120, 80, 0.8); color: #fff; }
.r-lb-pts { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-soft); }

/* leaderboard page */
.r-lb-page { display: flex; flex-direction: column; gap: 14px; }
.r-lb-me { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 20px; }
.r-lb-me-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.r-lb-me-card .r-av { width: 96px; height: 96px; font-size: 32px; }
.r-lb-me-card .r-av .r-av-lvl { min-width: 30px; height: 30px; font-size: 14px; right: -2px; bottom: -2px; }
.r-lb-me-card strong { font-size: 18px; font-weight: 600; }
.r-lb-level-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), 0.5); color: var(--accent-soft); font-size: 13px; font-weight: 600; }
.r-lb-ladder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.r-lb-step { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 5px 0; }
.r-lb-step .r-lb-rank { width: 30px; height: 30px; font-size: 13px; }
.r-lb-step--locked .r-lb-rank { background: rgba(var(--ink-rgb), 0.05); }
.r-lb-step strong { display: block; font-size: 14px; font-weight: 600; }
.r-lb-step span { font-size: 12px; color: var(--muted); }
.r-lb-tabs { display: flex; gap: 8px; padding: 14px 18px 4px; }
.r-lb-tabs .r-chip { min-height: 32px; }
.r-lb-list { padding: 6px 18px 12px; }
@media (max-width: 700px) { .r-lb-me { grid-template-columns: 1fr; } .r-lb-ladder { grid-template-columns: 1fr; } }