/* Demo-only styling: the persistent "invented data" strip and a few touches for a phone. Everything else is Coral's own stylesheet. */
/* The strip is the first item of the page's flex column (body is a column of the top bar and the layout), so it takes its own 20 px and covers nothing. */
.demo-banner {
    display: flex; align-items: center; justify-content: center; gap: 0; flex: 0 0 auto; position: static; box-sizing: border-box; width: 100%; padding: 2px 12px; text-align: center;
    background: #0d1117; color: #c9d1d9; border-bottom: 1px solid #30363d;
    font: 600 11px/16px system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0.01em;
    white-space: nowrap; overflow: hidden;
}
.demo-banner-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-tour-btn { flex: 0 0 auto; }

/* The hub's Inbox is a page of the hub server in an iframe, not part of Coral's frontend, and the demo's CSP allows no frames: the tab is not offered. */
#nav-tab-hub-inbox { display: none !important; }

/* Links that do nothing are not drawn as links. */
a.demo-inert-link { text-decoration: none !important; cursor: default; opacity: 0.55; pointer-events: none; }
/* Descenders of the italic status lines were clipped. */
.session-group-item .session-summary, .session-group-item [class*="summary"], .session-group-item [class*="status"] { line-height: 1.35; overflow: visible; padding-bottom: 1px; }
/* Touch targets on a phone: 44 px hit areas for the top-bar buttons and the team icon, with the icon size unchanged. */
@media (max-width: 700px) {
    .top-bar button, .top-bar a, .group-team-btn, .session-group-header button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Cosmetic items from the phone review. */
/* One presence dot per machine on the Servers page: the health card right below already says Health OK, so the second (health) dot beside the name is dropped. */
.cs-title .machine-health-dot { display: none; }
/* Status chips ("Waiting", "Needs input") are 10 px in the stylesheet: 11 px on a desktop, 12 px on a phone. */
.session-status-chip, .session-state-pill, .session-group-item .waiting-badge, .badge.waiting-badge { font-size: 11px !important; }
@media (max-width: 700px) { .session-status-chip, .session-state-pill, .session-group-item .waiting-badge, .badge.waiting-badge, #mobile-session-list .waiting-badge { font-size: 12px !important; } }
/* A dialog's last row (Cancel, Launch) sits clear of the dialog's bottom edge, also at the end of its scroll. */
.modal .modal-actions, .modal .modal-footer { padding-bottom: 12px; }
.modal .modal-content { padding-bottom: 8px; }
.modal .launch-modal-step { padding-bottom: 12px; }   /* the scrolling step that holds the dialog's last row (its Cancel button was cut at the bottom edge) */