/* Experience (Roblox Open Cloud) page, plus the studio Roblox-group forums. Builds on app.css tokens only. */

.rbx-section-h { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 2px; }
.rbx-section-h h3 { font-size: var(--fs-2); color: var(--text-2); }
.rbx-pad { padding: 12px 14px; }
.rbx-num { width: 110px; }
.rbx-tab .row > .grow > input { width: 100%; }

.rbx-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
.rbx-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); min-height: 42px; }
.rbx-setting:nth-last-child(-n+2) { border-bottom: 0; }
.rbx-setting input[type=number] { height: 28px; }
.rbx-link { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; }
.rbx-link input { height: 30px; }

.rbx-scopes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; margin-top: 4px; }
.rbx-scope { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); color: var(--text-2); cursor: help; padding: 2px 0; }

.rbx-logs { max-height: 56vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--bg-2); }
.rbx-logs .logline { grid-template-columns: 120px 52px minmax(0, 1fr); }
.rbx-logs .empty { padding: 28px 16px; }
.rbx-stack { margin-top: 4px; }
.rbx-stack summary { cursor: pointer; color: var(--muted); font-size: var(--fs-1); user-select: none; transition: color var(--dur-1) var(--ease); }
.rbx-stack summary:hover { color: var(--text); }
.rbx-stack pre { margin-top: 4px; max-height: 220px; }

.rbx-editor { min-height: 320px; line-height: 1.55; tab-size: 2; background: var(--bg-2); resize: vertical; font-family: var(--mono); font-size: var(--fs-2); }
.rbx-val { font-family: var(--mono); font-size: var(--fs-2); color: var(--text-2); background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; max-width: 320px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.rbx-snippet { display: block; max-width: 170px; }
.rbx-select-all { user-select: all; }
.btn.rbx-on { background: var(--accent-bg); color: var(--accent-2); border-color: var(--accent-ring); }
.rbx-copy { all: unset; cursor: copy; border-bottom: 1px dashed var(--border-2); transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.rbx-copy:hover, .rbx-copy:focus-visible { color: var(--text); border-bottom-color: var(--accent); }

/* analytics filters */
.rbx-filters:empty { display: none; }
.rbx-chip { gap: 6px; padding-right: 2px; }
.rbx-chip-x { all: unset; cursor: pointer; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; opacity: .7; transition: opacity var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.rbx-chip-x:hover, .rbx-chip-x:focus-visible { opacity: 1; background: var(--accent-bg); }

/* scripts browser */
.rbx-build { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.rbx-tree { max-height: 68vh; overflow: auto; margin: 0 -6px; }
.rbx-tree-row { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--radius-s); cursor: pointer; font-size: var(--fs-2); color: var(--text-2); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.rbx-tree-row:hover, .rbx-tree-row:focus-visible { background: var(--hover); color: var(--text); }
.rbx-tree-row .icon, .rbx-tree-row svg { width: 14px; height: 14px; flex: none; opacity: .8; }
.rbx-tree-row .ellipsis { flex: 1; min-width: 0; }
.rbx-tree-caret { width: 14px; display: grid; place-items: center; transition: transform var(--dur-2) var(--ease); }
.rbx-tree-row.open .rbx-tree-caret { transform: rotate(90deg); }
.rbx-tree-kids { padding-left: 14px; border-left: 1px solid var(--border); margin-left: 12px; }
.rbx-tree-loading { display: flex; align-items: center; gap: 8px; padding: 6px; }

/* settings list in one column (text-capture switches) */
.rbx-settings.one { grid-template-columns: minmax(0, 1fr); }
.rbx-settings.one .rbx-setting { border-bottom: 1px solid var(--border); }
.rbx-settings.one .rbx-setting:last-child { border-bottom: 0; }

/* translation table: one line of language chips per entry */
.rbx-langs { flex-wrap: nowrap; }
.rbx-langs .chip { cursor: default; height: 22px; padding: 0 8px; }

/* icon & thumbnails */
.rbx-media { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.rbx-media-icon { display: flex; gap: var(--sp-4); align-items: flex-start; }
.rbx-icon-img { width: 120px; height: 120px; flex: none; border-radius: var(--radius-l); border: 1px solid var(--border); background: var(--panel-2); object-fit: cover; }
.rbx-media-empty { display: grid; place-items: center; color: var(--faint); font-size: var(--fs-2); background: var(--panel-2); }
.rbx-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.rbx-thumb { margin: 0; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.rbx-thumb > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--panel-2); }
.rbx-thumb > .rbx-media-empty { width: 100%; aspect-ratio: 16 / 9; }
.rbx-thumb figcaption { padding: var(--sp-2) var(--sp-3); min-width: 0; }
.rbx-thumb figcaption .row { row-gap: var(--sp-1); }

/* studio → Roblox group → forums (read-only) */
.forum-layout { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.forum-post { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--sp-1); width: 100%; min-width: 0; padding: var(--cell-y) var(--cell-x); cursor: pointer; border-radius: var(--radius-s); transition: background var(--dur-1) var(--ease); }
.forum-post:hover, .forum-post:focus-visible { background: var(--hover); }
.forum-snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.forum-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.forum-comment { align-items: flex-start; flex-wrap: nowrap; padding: var(--cell-y) 0; }

@media (max-width: 1100px) {
  .rbx-build, .rbx-media, .forum-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rbx-settings, .rbx-scopes { grid-template-columns: minmax(0, 1fr); }
  .rbx-setting:nth-last-child(2) { border-bottom: 1px solid var(--border); }
  .rbx-logs .logline { grid-template-columns: minmax(0, 1fr); }
  .rbx-link { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rbx-media-icon { flex-direction: column; }
  .rbx-thumbs { grid-template-columns: minmax(0, 1fr); }
}

@media (pointer: coarse) {
  .rbx-copy { display: inline-flex; align-items: center; min-height: 40px; }
  .forum-post { min-height: 44px; }
  .rbx-tree-row { min-height: 40px; }
}