/* ---------------------------------------------------------------------------
 * debug-server / debug page
 * Compact, dark, console-style layout. Mobile-friendly down to ~360px.
 * ------------------------------------------------------------------------ */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
}

body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: #1a1d21;
    color: #d8dde3;
    display: flex;
    flex-direction: column;
}

header {
    padding: 0.5rem 1rem;
    background: #11141a;
    border-bottom: 1px solid #2a2f37;
    position: sticky;
    top: 0;
    z-index: 1;
}
header h1 {
    margin: 0 0 0.4rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #9aa4b1;
    letter-spacing: 0.02em;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.85rem;
}
.controls label   { color: #9aa4b1; }
.controls select,
.controls button {
    background:    #2a2f37;
    color:         #d8dde3;
    border:        1px solid #3a4150;
    border-radius: 4px;
    padding:       0.25rem 0.5rem;
    font-size:     0.85rem;
    cursor:        pointer;
    font-family:   inherit;
}
.controls button:hover { background: #3a4150; }
.controls .toggle {
    cursor: pointer;
    user-select: none;
}

.status {
    margin-left: auto;
    font-size:   0.8rem;
    color:       #6c7686;
    white-space: nowrap;
}
.status.ok    { color: #6cc18b; }
.status.err   { color: #e07a7a; }
.status.pause { color: #d8b25b; }

main#log {
    flex: 1;
    overflow-y:   auto;
    padding:      0.5rem 1rem;
    font-family:  ui-monospace, "Consolas", "Menlo", monospace;
    font-size:    0.82rem;
}

/* One event row */
.evt {
    display:               grid;
    grid-template-columns: 7em 14em 4em 1fr;
    gap:                   0.6rem;
    padding:               0.25rem 0.4rem;
    border-bottom:         1px solid #232830;
    align-items:           start;
}
.evt time { color: #6c7686; }
.evt .dev { color: #9aa4b1; overflow-wrap: anywhere; }
.evt .lvl {
    text-transform: uppercase;
    font-weight:    600;
    font-size:      0.7rem;
    padding:        0.05rem 0.4rem;
    border-radius:  3px;
    text-align:     center;
    align-self:     start;
}
.evt--info  .lvl { background: #20313f; color: #6db3d8; }
.evt--warn  .lvl { background: #3a2f1a; color: #e0bb6a; }
.evt--error .lvl { background: #401e1e; color: #e07a7a; }

.evt--warn  { background: rgba(224,187,106,0.04); }
.evt--error { background: rgba(224,122,122,0.06); }

.evt .html {
    word-break: break-word;
    white-space: pre-wrap;
    overflow-x: auto;
}
.evt .html pre {
    margin: 0;
    white-space: pre-wrap;
}

@media (max-width: 700px) {
    .evt {
        grid-template-columns: 6em 4em 1fr;
        row-gap: 0.15rem;
    }
    .evt .dev   { grid-column: 1 / -1; font-size: 0.75rem; }
    .evt time   { grid-row: 2; }
    .evt .lvl   { grid-row: 2; }
    .evt .html  { grid-row: 2; grid-column: 3; }
}