/* dev.warsawdynamics.com: the hub rules of the Rollins mock, after the idp-theme webjar's theme.css. */

[x-cloak] { display: none !important; }

.rollins-navbar { border-bottom: 1px solid var(--color-divider); }

.rollins-logo { width: 36px; height: 36px; flex: none; object-fit: contain; }

.wordmark-lg .rollins-logo { width: 64px; height: 64px; }

.rollins-entry { display: flex; align-items: baseline; gap: var(--space-2); }

.rollins-entry > .badge { flex: none; min-width: 4.5rem; text-align: center; }

/* the public hub: no side nav, a narrower column */
.rollins-hub { min-height: 100vh; display: flex; flex-direction: column; }

.rollins-hub-main { width: 100%; max-width: 60rem; margin: 0 auto; padding: var(--space-6) var(--space-4) 7rem; }

.rollins-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-4); }

.rollins-hub-card { color: inherit; text-decoration: none; }

.rollins-hub-card:hover { border-color: var(--color-border-strong); }

.rollins-day { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-divider); }

.rollins-day-date { display: flex; flex-direction: column; font-weight: 500; }

.rollins-day-entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

@media (max-width: 700px) {
  .rollins-roadmap { grid-template-columns: minmax(0, 1fr); }
  .rollins-day { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* the hub's release notes: filters over a long history */
.rollins-notes-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }

.rollins-notes-tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.rollins-notes-search { width: 16rem; }

.rollins-day-date { gap: 2px; }

.rollins-day-head { text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--color-fg-subtle); }

.rollins-note-item { white-space: nowrap; }

/* hub: a project's page */
.rollins-hub-main.is-wide { max-width: 76rem; }

.rollins-rm-sections { display: flex; flex-direction: column; gap: var(--space-4); }

.rollins-rm-head { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-subtle); margin: 0; }

.rollins-rm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.rollins-rm-list > li { padding: 4px 0; border-bottom: 1px solid var(--color-divider); }

.rollins-rm-row { display: flex; align-items: baseline; gap: var(--space-2); color: inherit; text-decoration: none; }

.rollins-rm-row:hover .rollins-rm-title { text-decoration: underline; }

.rollins-rm-title { flex: 1; min-width: 0; font-weight: 500; }

.rollins-rm-date { font-size: 0.75rem; color: var(--color-fg-subtle); white-space: nowrap; }

.rollins-rm-blurb { display: block; padding-left: 1rem; font-size: 0.8125rem; color: var(--color-fg-secondary); }

.rollins-hub-split { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }

.rollins-hub-aside { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); font-size: 0.875rem; }

@media (max-width: 800px) {
  .rollins-hub-split, .rollins-strip { grid-template-columns: minmax(0, 1fr); }
  .rollins-hub-aside { position: static; }
}

.rollins-rm-more { border-bottom: 0 !important; }

.rollins-rm-more .btn { padding-left: 0; }

.rollins-type-icon { flex: none; align-self: flex-start; margin-top: 3px; display: inline-flex; }

.rollins-type-icon .rollins-issue-icon { margin-right: 0; }

/* hub: a project as a social feed (a profile header, then posts) */
.rollins-feed-page { max-width: 60rem; margin: 0 auto; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-raised); }

.rollins-profile-banner { height: 9rem; background: linear-gradient(120deg, var(--color-info-fg), var(--color-success-fg)); opacity: 0.55; }

.rollins-profile-body { padding: 0 var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: 2px; }

.rollins-profile-avatar { width: 88px; height: 88px; margin-top: -44px; position: relative; z-index: 1; border-radius: 50%; border: 4px solid var(--color-surface-raised); background: var(--color-surface); object-fit: contain; padding: 10px; }

.rollins-profile-name { font-size: 1.25rem; font-weight: 700; margin-top: var(--space-2); }

.rollins-profile-handle { font-size: 0.8125rem; color: var(--color-fg-subtle); }

.rollins-profile-bio { margin: var(--space-2) 0; }

.rollins-profile-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 0.875rem; color: var(--color-fg-secondary); }

.rollins-profile-stats strong { color: var(--color-fg); }

.rollins-profile-tabs { padding: 0 var(--space-2); }

.rollins-feed { display: flex; flex-direction: column; }

.rollins-feed-pad { padding: var(--space-4); }

.rollins-post { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }

.rollins-post:hover { background: var(--color-row-hover); }

.rollins-post-pin { font-size: 0.75rem; font-weight: 600; color: var(--color-fg-subtle); margin: 0 0 var(--space-1) 3.25rem; }

.rollins-post-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); }

.rollins-post-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface); object-fit: contain; padding: 6px; border: 1px solid var(--color-border); }

.rollins-post-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.rollins-post-head { display: flex; gap: var(--space-1); font-size: 0.9375rem; }

.rollins-post-text { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }

.rollins-post-text .rollins-issue-icon { align-self: center; }

.rollins-post-verb { font-weight: 600; }

.rollins-post-verb.is-shipped { color: var(--color-success-fg); }

.rollins-post-verb.is-started { color: var(--color-info-fg); }

.rollins-post-verb.is-planned { color: var(--color-fg-secondary); }

.rollins-post-card { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; font-size: 0.875rem; }

.rollins-post-card:hover { border-color: var(--color-border-strong); }

.rollins-post-card-head { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--color-fg-subtle); }

.rollins-post-notes { margin: var(--space-1) 0 0; padding-left: 1.1rem; font-size: 0.875rem; color: var(--color-fg-secondary); }

.rollins-feed-more { margin: var(--space-3); }

/* images and videos on roadmap items and release notes */
.rollins-media { display: flex; flex-wrap: wrap; gap: var(--space-2); position: relative; }

.rollins-media-item { position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-md); overflow: hidden; line-height: 0; }

.rollins-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rollins-media.is-thumb { margin-top: var(--space-1); }

.rollins-media.is-thumb .rollins-media-item { width: 8rem; aspect-ratio: 16 / 9; }

.rollins-media.is-gallery .rollins-media-item { width: calc(50% - var(--space-1)); aspect-ratio: 16 / 9; }

.rollins-media.is-gallery .rollins-media-item:only-child { width: 100%; }

.rollins-media.is-card .rollins-media-item { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }

.rollins-media-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); pointer-events: none; }

.rollins-media.is-thumb .rollins-media-play { font-size: 0.875rem; }

.rollins-media-more { position: absolute; right: var(--space-2); bottom: var(--space-2); padding: 0 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.75rem; }

.rollins-media-hint { margin-left: 4px; font-size: 0.75rem; color: var(--color-fg-subtle); }

.rollins-hub-card { overflow: hidden; }

.rollins-lightbox { --bs-modal-width: min(60rem, 92vw); }

.rollins-lightbox-img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }

.rollins-feed-back { max-width: 60rem; margin: 0 auto; width: 100%; }

/* hub main page: the apps as filter chips, the apps tab */
.rollins-app-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }

.rollins-app-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--color-border); border-radius: 999px; background: none; color: inherit; font-size: 0.8125rem; cursor: pointer; }

.rollins-app-chip img { width: 14px; height: 14px; object-fit: contain; }

.rollins-app-chip[aria-pressed="true"] { border-color: var(--color-fg); background: var(--color-row-hover); font-weight: 600; }

.rollins-app-list { display: flex; flex-direction: column; }

.rollins-app-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); color: inherit; text-decoration: none; }

.rollins-app-row:hover { background: var(--color-row-hover); }

.rollins-post-name { color: inherit; font-weight: 700; text-decoration: none; }

.rollins-post-name:hover { text-decoration: underline; }

.rollins-media-chip { display: inline-block; padding: 1px var(--space-2); margin: 2px 0; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); font-size: 0.75rem; color: var(--color-fg-secondary); }

.rollins-issue-icon { flex: none; vertical-align: -2px; }
.rollins-hub-404 { padding: var(--space-6) 0; }