/* Related lists and membership feedback from prototype/src/operations.css. */
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-tabs,.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-actions {display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-tabs {margin:18px 0}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-tabs [aria-pressed=true] {border-color:var(--accent);box-shadow:none;color:#000}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-panel {min-width:0;margin:20px 0;padding:24px;border:1px solid var(--line);background:var(--panel);box-shadow:4px 4px 0 var(--color-ui-shadow)}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-panel h2 {margin:0 0 18px;font-size:1.5rem}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-panel p {line-height:1.55}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-panel input,.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-panel select {width:100%;min-width:0;min-height:44px;font-size:1rem;padding:11px 12px;background:var(--input);color:var(--text);border:1px solid var(--line)}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-records {list-style:none;margin:16px 0 0;padding:0}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-records>li {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:0}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-records>li:nth-child(odd) {background:#102319}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-records>li>div:first-child {min-width:0}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-records p {margin:5px 0}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-records small {display:block;margin-top:5px;color:var(--muted);font-size:.875rem;overflow-wrap:anywhere}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-record-title {font-weight:700;font-size:1.2rem}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-records .btn {min-height:40px}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-section-heading .ops-tabs {margin:0}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-muted {color:var(--muted)}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-empty {padding:24px 0}
@media(max-width:850px) {
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-records>li {align-items:flex-start;flex-wrap:wrap}
}
@media(max-width:480px) {
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-panel {padding:18px}
}
.realms-app .ops-account-page {padding-top:0}
.realms-app .ops-account-page .dir-heading {margin-bottom:20px}
.realms-app .ops-account-page .ops-notice {font-size:.875rem;margin:16px 0 30px}
.realms-app .ops-account-page .ops-panel {box-shadow:none}
.realms-app .ops-my-realms-page .ops-tabs {gap:8px;margin:0;padding-bottom:18px;border-bottom:0}
.realms-app .ops-my-realms-page .ops-tabs .btn {min-width:98px;box-shadow:none}
.realms-app .ops-my-realms-page .ops-tabs [aria-pressed=false] {background:transparent;color:var(--text);border-color:transparent}
.realms-app .ops-my-realms-page .ops-tabs [aria-pressed=false]:hover {border-color:var(--line);background:var(--panel)}
.realms-app .ops-my-realms-page .ops-tabs [aria-pressed=true] {background:var(--accent);border-color:var(--accent);color:#000;box-shadow:none}
.realms-app .ops-my-realms-page .ops-realm-list {margin:0 0 34px;padding:0;border:0;background:transparent}
.realms-app .ops-my-realms-page .ops-records {margin:0}
.realms-app .ops-my-realms-page .ops-records>li {padding:30px 20px;gap:24px;border-bottom:0}
.realms-app .ops-my-realms-page .ops-realm-thumbnail {width:88px;height:88px;object-fit:cover;flex:0 0 auto;align-self:flex-start}
.realms-app .ops-my-realms-page .ops-realm-summary {flex:1;min-width:0}
.realms-app .ops-my-realms-page .ops-realm-owner {margin-left:6px;color:var(--muted);font-size:.875rem;overflow-wrap:anywhere}
.realms-app .ops-my-realms-page .ops-record-title {display:block;font-family:var(--heading);font-size:1.375rem;line-height:1.3;overflow-wrap:anywhere}
.realms-app .ops-my-realms-page .ops-records p {max-width:68ch;margin:6px 0 0;color:var(--muted);font-size:.875rem;font-weight:400;line-height:1.5}
.realms-app .ops-my-realms-page .ops-realm-summary .realm-chip-group {margin-top:12px}
.realms-app .ops-my-realms-page .ops-records .ops-actions {flex-shrink:0}
.realms-app .ops-my-realms-page .ops-realm-membership-feedback:empty { display:none; }
.realms-app .ops-my-realms-page .ops-empty {padding:32px 0;border-bottom:0}
@media(max-width:480px) {
.realms-app .ops-account-page {padding-top:0}
.realms-app .ops-account-page .ops-notice {gap:8px;margin-bottom:24px}
.realms-app .ops-my-realms-page .ops-tabs {gap:4px}
.realms-app .ops-my-realms-page .ops-tabs .btn {min-width:0;flex:1}
.realms-app .ops-my-realms-page .ops-records>li {padding:24px 20px}
.realms-app .ops-my-realms-page .ops-records>li {gap:16px}
.realms-app .ops-my-realms-page .ops-realm-thumbnail {width:56px;height:56px}
.realms-app .ops-my-realms-page .ops-realm-summary {flex-basis:calc(100% - 72px)}
}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-realm-join {flex:0 0 auto;margin-top:12px}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-realm-join .ops-actions {min-height:48px;align-items:center;justify-content:flex-end}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-realm-joined {display:inline-flex;align-items:center;font-weight:700;gap:8px;color:var(--text)}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-realm-joined::before {content:"\2713";color:var(--accent)}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-realm-membership-feedback {box-sizing:border-box;block-size:7rem;overflow:auto;scrollbar-gutter:stable;padding:4px;margin:0 0 14px}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-realm-membership-feedback p {margin:0 0 10px;line-height:1.5;overflow-wrap:anywhere}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-realm-membership-feedback [role="alert"] {padding:6px 12px;background:color-mix(in srgb,var(--danger) 7%,transparent)}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-realm-membership-feedback [role="alert"] strong {color:var(--danger)}
@media(max-width:640px) {
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-realm-join {width:100%}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-realm-join .ops-actions {justify-content:flex-start}
.realms-app :is(.ops-my-realms-page,.realm-detail-view) .ops-realm-membership-feedback {block-size:9rem}
}
.realms-app .ops-my-realms-page .dir-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:0 0 var(--page-flow-gap); }
.realms-app .ops-my-realms-page .dir-heading h1 { font-size:var(--page-title-size); margin:0; }
.realms-app .ops-my-realms-page .dir-heading p { margin:10px 0 0; color:var(--muted); font-size:1rem; }
.realms-app .ops-my-realms-page .dir-heading .btn { flex-shrink:0; }
.realms-app .ops-my-realms-page .dir-heading .btn .game-icon { width:24px; height:24px; filter:brightness(0) invert(1); }
.realms-app .ops-my-realms-page html[data-theme=light] .dir-heading .game-icon { filter:none; }
@media (max-width:600px) {
.realms-app .ops-my-realms-page .dir-heading { flex-direction:column; align-items:flex-start; gap:18px; }
.realms-app .ops-my-realms-page .dir-heading h1 { font-size:var(--page-title-size); }
.realms-app .ops-my-realms-page .dir-heading>.btn { width:100%; }
}
@container directory (max-width:52rem) {
.realms-app .ops-my-realms-page .dir-heading { flex-wrap:wrap; }
}

.realms-app :is(.ops-my-realms-page,.realm-detail-view) { --danger:#ffb4af; }