/* ---------------------------------------------------------------------------
   Node console theme — shared by /explorer and /status.

   These two pages report the live state of the single node serving them, so
   they are deliberately not redirected to the canonical host and read as an
   operator console rather than a marketing page: a dark surface, tabular data,
   monospace identifiers. The dark treatment is intentional; what was not
   intentional was each page carrying its own copy of it, with a second amber
   that drifted from the brand accent. Both now load this file.

   Scoped under `.node-console` rather than `:root` so it composes with, and
   never overrides, the site stylesheet's light-theme tokens.
   --------------------------------------------------------------------------- */

.node-console {
    --nc-bg: #0f1115;
    --nc-panel: #171a21;
    --nc-panel-2: #1e222b;
    --nc-line: #2a2f3a;
    --nc-text: #e8eaf0;
    --nc-muted: #9aa3b2;
    /* Same amber as the site's theme-color and favicon. */
    --nc-accent: #e9a93a;
    --nc-ok: #3fb37f;
    --nc-warn: #e0b04d;
    --nc-err: #e06666;

    margin: 0;
    background: var(--nc-bg);
    color: var(--nc-text);
    font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.node-console *,
.node-console *::before,
.node-console *::after {
    box-sizing: border-box;
}

.node-console a {
    color: var(--nc-accent);
    text-decoration: none;
}

.node-console a:hover {
    text-decoration: underline;
}

.node-console header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--nc-line);
    background: var(--nc-panel);
}

.node-console .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
    color: var(--nc-text);
}

.node-console .brand img {
    width: 32px;
    height: 32px;
}

.node-console .brand-suffix {
    color: var(--nc-muted);
    font-weight: 500;
}

.node-console nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.node-console nav a {
    color: var(--nc-muted);
    font-size: 14px;
}

.node-console nav a[aria-current="page"] {
    color: var(--nc-text);
    font-weight: 600;
}

.node-console main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 80px;
}

.node-console h1 {
    font-size: 24px;
    margin: 8px 0 4px;
}

.node-console .sub {
    color: var(--nc-muted);
    margin: 0 0 24px;
}

.node-console .search {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
}

.node-console .search input {
    flex: 1;
    padding: 13px 15px;
    border-radius: 10px;
    border: 1px solid var(--nc-line);
    background: var(--nc-panel-2);
    color: var(--nc-text);
    font-size: 15px;
}

.node-console .search button {
    padding: 13px 20px;
    border-radius: 10px;
    border: 0;
    background: var(--nc-accent);
    color: #1a1205;
    font-weight: 700;
    cursor: pointer;
}

.node-console .stats,
.node-console .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.node-console .stat,
.node-console .card,
.node-console .panel {
    background: var(--nc-panel);
    border: 1px solid var(--nc-line);
    border-radius: 12px;
}

.node-console .stat,
.node-console .card {
    padding: 16px;
}

.node-console .panel {
    padding: 18px;
    margin-bottom: 22px;
}

.node-console .stat .k,
.node-console .card .k {
    color: var(--nc-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.node-console .stat .v,
.node-console .card .v {
    font-size: 20px;
    font-weight: 700;
    margin-top: 6px;
    word-break: break-all;
    font-variant-numeric: tabular-nums;
}

.node-console .card .v {
    font-size: 16px;
}

.node-console .panel h2 {
    font-size: 16px;
    margin: 0 0 12px;
}

/* Wide tables scroll inside the panel rather than the page. */
.node-console .panel {
    overflow-x: auto;
}

.node-console table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.node-console th,
.node-console td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--nc-line);
    vertical-align: top;
}

.node-console th {
    color: var(--nc-muted);
    font-weight: 600;
}

.node-console .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-all;
}

.node-console .banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--nc-line);
    background: var(--nc-panel);
    margin-bottom: 24px;
    font-weight: 600;
}

.node-console .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--nc-muted);
    flex: 0 0 auto;
}

.node-console .dot.ok { background: var(--nc-ok); }
.node-console .dot.warn { background: var(--nc-warn); }
.node-console .dot.err { background: var(--nc-err); }

.node-console .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.node-console .pill.ok,
.node-console .pill.active,
.node-console .pill.committed {
    background: rgba(63, 179, 127, 0.15);
    color: var(--nc-ok);
}

.node-console .pill.warn {
    background: rgba(224, 176, 77, 0.15);
    color: var(--nc-warn);
}

.node-console .pill.err,
.node-console .pill.burned {
    background: rgba(224, 102, 102, 0.15);
    color: var(--nc-err);
}

.node-console .result { min-height: 20px; }
.node-console .msg,
.node-console .muted { color: var(--nc-muted); }
.node-console .err { color: var(--nc-err); }

.node-console footer {
    border-top: 1px solid var(--nc-line);
    color: var(--nc-muted);
    font-size: 13px;
    padding: 20px 24px;
    text-align: center;
}