usmt-dash/web/demo/demo.css

/* ---------- Terminal dock (docked to the bottom of the page) ---------- */
.usmt-term {
    --usmt-term-h: 340px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1900;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.35);
}
/* Page bottom padding for the dock is set in layout.css from its measured height */

.usmt-term-resize { height: 5px; cursor: ns-resize; background: transparent; }
.usmt-term.collapsed .usmt-term-resize { display: none; }

.usmt-term-bar {
    display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px;
    background: #1f2937; color: #d1d5db; border-top: 1px solid #374151; overflow: hidden;
}
.usmt-term-toggle, .usmt-term-tab, .usmt-term-btn {
    background: transparent; border: 1px solid transparent; color: #d1d5db; cursor: pointer;
    font: inherit; font-size: 0.85em; padding: 4px 10px; border-radius: 4px; white-space: nowrap;
}
.usmt-term-toggle { font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.usmt-term-toggle:hover, .usmt-term-tab:hover, .usmt-term-btn:hover { background: rgba(255,255,255,0.08); }
.usmt-term-chevron { width: 11px; height: 11px; flex: 0 0 11px; display: block; transition: transform 0.2s; }
.usmt-term:not(.collapsed) .usmt-term-chevron { transform: rotate(180deg); }
.usmt-term-tabs { display: flex; gap: 2px; min-width: 0; }
.usmt-term-tab { font-family: Consolas, 'Cascadia Mono', 'Courier New', monospace; position: relative; }
.usmt-term-tab.active { background: #012456; border-color: #2b4a7a; color: #fff; }
.usmt-term-tab.unread::after {
    content: ''; position: absolute; top: 4px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #16c60c;
}
.usmt-term-live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72em; font-weight: 700; letter-spacing: 1px; color: #86efac; white-space: nowrap;
}
.usmt-term-live i { width: 7px; height: 7px; border-radius: 50%; background: #16c60c; animation: usmt-pulse 1.6s infinite; }
@keyframes usmt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.usmt-term-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75em; color: #9ca3af; white-space: nowrap; cursor: help; }
.usmt-term-legend-dot { width: 7px; height: 7px; border-radius: 50%; background: #f9f1a5; opacity: 0.8; }
.usmt-term-follow.active { border-color: #4b5563; color: #fff; }

.usmt-term-window { height: var(--usmt-term-h); display: flex; flex-direction: column; background: #012456; }
.usmt-term.collapsed .usmt-term-window { display: none; }
.usmt-term-titlebar {
    height: 32px; flex: 0 0 32px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px;
    background: #0c0c0c; color: #cccccc; font-size: 0.78em; border-bottom: 1px solid #1b1b1b;
}
.usmt-term-wtitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usmt-term-titlebar .usmt-term-legend { font-size: 1em; }
.usmt-term-titlebar .usmt-term-follow { font-size: 1em; padding: 3px 10px; }
.usmt-term-screens { flex: 1; min-height: 0; position: relative; }
.usmt-term-body {
    display: none; position: absolute; inset: 0; overflow: auto; padding: 8px 12px 14px 18px;
    font-family: Consolas, 'Cascadia Mono', 'Courier New', monospace; font-size: 13px; line-height: 1.35;
    color: #cccccc; background: #012456; white-space: pre-wrap; word-break: break-all;
}
.usmt-term-body.active { display: block; }
.usmt-term-line { position: relative; min-height: 1.35em; }
.usmt-term-line.sim::before {
    content: ''; position: absolute; left: -12px; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: #f9f1a5; opacity: 0.8;
}

/* PowerShell ConsoleColor -> Windows Terminal "Campbell Powershell" palette */
.c-Default, .c-Gray { color: #cccccc; }
.c-Prompt   { color: #cccccc; }
.c-Black    { color: #0c0c0c; }
.c-DarkBlue { color: #0037da; }
.c-DarkGreen { color: #13a10e; }
.c-DarkCyan { color: #3a96dd; }
.c-DarkRed  { color: #c50f1f; }
.c-DarkMagenta { color: #b25fc7; }
.c-DarkYellow { color: #c19c00; }
.c-DarkGray { color: #8a8a8a; }
.c-Blue     { color: #3b78ff; }
.c-Green    { color: #16c60c; }
.c-Cyan     { color: #61d6d6; }
.c-Red      { color: #e74856; }
.c-Magenta  { color: #d65fd0; }
.c-Yellow   { color: #f9f1a5; }
.c-White    { color: #f2f2f2; }

/* ---------- Demo pill + about dialog ---------- */
.usmt-demo-pill {
    background: #f59e0b; color: #1f2937; border: none; border-radius: 999px; cursor: pointer;
    font-weight: 800; font-size: 0.72em; letter-spacing: 1.5px; padding: 5px 10px; flex-shrink: 0;
}
.usmt-demo-pill:hover { background: #fbbf24; }

.usmt-demo-modal {
    display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.6);
    align-items: center; justify-content: center; padding: 16px;
}
.usmt-demo-modal.show { display: flex; }
/* The text scrolls inside the card and the buttons stay pinned at the bottom, so the
   "Explore the dashboard" button is always on screen (phones included). dvh follows the
   visible area when a phone's address bar is showing, so the top edge isn't cut off. */
.usmt-demo-card {
    background: var(--bg-card, #fff); color: var(--text-main, #333); max-width: 640px; width: 100%;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    display: flex; flex-direction: column; overflow: hidden; border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45); border-top: 5px solid #f59e0b; line-height: 1.55;
}
.usmt-demo-body { overflow-y: auto; min-height: 0; padding: 22px 28px 4px; }
.usmt-demo-card h2 { margin: 0 0 4px; }
.usmt-demo-card p.usmt-demo-src { font-size: 0.85em; margin-bottom: 14px; color: var(--text-muted, #666); }
.usmt-demo-src a { color: #3498db; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.usmt-demo-src a:hover { text-decoration: underline; }
.usmt-demo-card p { margin: 0 0 12px; font-size: 0.95em; }
.usmt-demo-card code { background: rgba(127,127,127,0.18); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
.usmt-demo-try { color: var(--text-muted, #666); }
.usmt-demo-actions {
    display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; flex-shrink: 0;
    padding: 14px 28px 18px; border-top: 1px solid var(--border-color, #ddd);
}
.usmt-demo-actions button { border: 1px solid var(--border-color, #ddd); background: transparent; color: inherit; padding: 8px 14px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 0.9em; }
.usmt-demo-actions .usmt-demo-close { background: #3498db; border-color: #3498db; color: #fff; font-weight: 600; }
.usmt-demo-actions .usmt-demo-reset { color: #e74c3c; border-color: #e74c3c; margin-right: auto; }

@media (max-width: 700px) {
    .t-long { display: none; }                             /* "Server" / "Worker", shorter titles */
    .usmt-term-bar { gap: 4px; padding: 0 8px; }
    .usmt-term-toggle { padding: 4px 6px; }
    .usmt-term-tabs { flex: 0 1 auto; min-width: 0; }
    .usmt-term-tab { padding: 4px 10px; font-size: 0.8em; }
    .usmt-term { --usmt-term-h: 45vh; }
    .usmt-term-body { font-size: 11.5px; padding: 6px 8px 10px 14px; }
    .usmt-term-titlebar { font-size: 0.7em; }
    .usmt-demo-body { padding: 16px 16px 4px; }
    .usmt-demo-card h2 { font-size: 1.25em; }
    .usmt-demo-actions { padding: 12px 16px 14px; gap: 8px; }
    .usmt-demo-actions button { flex: 1 1 auto; }
    .usmt-demo-actions .usmt-demo-reset { margin-right: 0; }
    .usmt-demo-actions .usmt-demo-close { order: -1; flex-basis: 100%; padding: 11px 14px; }   /* first and full width */
}
@media (max-height: 500px) {
    .usmt-term { --usmt-term-h: 55vh; }                   /* phones in landscape */
}