/* =====================================================
   rational.monster — Containment Monitoring Interface
   Colors: #050508 #0a0a10 #334155 #22c55e #f59e0b #ef4444 #94a3b8 #e2e8f0 #052e16
   Fonts: Share Tech Mono, Exo 2
   ===================================================== */

/* === Reset & Base === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #050508;
    color: #e2e8f0;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    min-height: 100vh;
    overflow-x: hidden;
}

/* === Background Gradient Layer === */
#bg-gradient {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(5, 46, 22, 0.1), transparent 50%);
    animation: drift 20s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes drift {
    0%   { background-position: 30% 30%; background: radial-gradient(circle at 30% 30%, rgba(5, 46, 22, 0.1), transparent 50%); }
    50%  { background: radial-gradient(circle at 60% 50%, rgba(5, 46, 22, 0.12), transparent 55%); }
    100% { background-position: 70% 70%; background: radial-gradient(circle at 70% 70%, rgba(5, 46, 22, 0.08), transparent 50%); }
}

/* === Hero / Containment Screen === */
#hero {
    position: relative;
    min-height: 100vh;
    border: 1px dashed #334155;
    margin: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

/* Scan-line overlay */
#hero-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.015) 2px,
        rgba(255, 255, 255, 0.015) 4px
    );
    pointer-events: none;
    z-index: 0;
}

/* Corner Brackets */
.corner-bracket {
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: #22c55e;
    border-style: solid;
    z-index: 2;
}

.corner-tl {
    top: 16px;
    left: 16px;
    border-width: 2px 0 0 2px;
}

.corner-tr {
    top: 16px;
    right: 16px;
    border-width: 2px 2px 0 0;
}

.corner-bl {
    bottom: 16px;
    left: 16px;
    border-width: 0 0 2px 2px;
}

.corner-br {
    bottom: 16px;
    right: 16px;
    border-width: 0 2px 2px 0;
}

/* Hero Header bar */
#hero-header {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: #94a3b8;
    z-index: 2;
    white-space: nowrap;
}

#hero-header .separator {
    color: #334155;
}

/* Hero content */
#hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

#domain-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.domain-line-rational {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 400;
    color: #94a3b8;
    letter-spacing: 0.04em;
}

.domain-line-monster {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 400;
    color: #22c55e;
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.3), 0 0 40px rgba(34, 197, 94, 0.1);
    animation: monster-pulse 4s ease-in-out infinite;
    letter-spacing: 0.04em;
}

@keyframes monster-pulse {
    0%, 100% { text-shadow: 0 0 20px rgba(34, 197, 94, 0.3), 0 0 40px rgba(34, 197, 94, 0.1); }
    50%       { text-shadow: 0 0 30px rgba(34, 197, 94, 0.5), 0 0 60px rgba(34, 197, 94, 0.2); }
}

#tagline {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: #94a3b8;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Hero footer dots */
#hero-footer-dots {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    color: #334155;
    letter-spacing: 0.3em;
    white-space: nowrap;
    overflow: hidden;
    width: 90%;
    text-align: center;
    z-index: 2;
}

/* === Status Dots === */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-green {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
    animation: pulse-dot 2s infinite;
}

.dot-amber {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
    animation: pulse-dot 3s infinite;
}

.dot-red {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
    animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* === HUD Panels Grid === */
#panels-grid {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 32px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: 16px;
    grid-template-areas:
        "p001 p001 p001 p001 p002 p002 p002 p002 p003 p003 p003 p003"
        "p004 p004 p004 p005 p005 p005 p005 p005 p006 p006 p006 p006";
}

#pnl-001 { grid-area: p001; }
#pnl-002 { grid-area: p002; }
#pnl-003 { grid-area: p003; }
#pnl-004 { grid-area: p004; }
#pnl-005 { grid-area: p005; }
#pnl-006 { grid-area: p006; }

/* === HUD Panel === */
.hud-panel {
    background: rgba(5, 5, 8, 0.85);
    border: 1px solid #334155;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.hud-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.008) 3px,
        rgba(255, 255, 255, 0.008) 6px
    );
    pointer-events: none;
    z-index: 0;
}

.hud-panel:hover {
    border-color: #22c55e;
}

/* Panel header */
.panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid #334155;
    background: rgba(10, 10, 16, 0.9);
    position: relative;
    z-index: 1;
}

.panel-id {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: #334155;
    letter-spacing: 0.08em;
}

.panel-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: #94a3b8;
    letter-spacing: 0.1em;
    margin-left: 4px;
}

/* Panel body */
.panel-body {
    padding: 16px 14px;
    position: relative;
    z-index: 1;
}

.panel-body p {
    font-size: 0.88rem;
    color: #94a3b8;
    margin-bottom: 12px;
}

.panel-note {
    font-size: 0.78rem;
    color: #334155;
    font-style: italic;
    margin-top: 10px;
    margin-bottom: 0;
}

/* Highlights */
.highlight-green  { color: #22c55e; font-family: 'Share Tech Mono', monospace; }
.highlight-amber  { color: #f59e0b; font-family: 'Share Tech Mono', monospace; }
.highlight-red    { color: #ef4444; font-family: 'Share Tech Mono', monospace; }
.highlight-readout{ color: #e2e8f0; font-family: 'Share Tech Mono', monospace; }
.mono-em          { font-family: 'Share Tech Mono', monospace; font-style: normal; color: #22c55e; }

/* === Data rows (bar graphs) === */
.data-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.data-key {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    color: #94a3b8;
    width: 110px;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.data-bar {
    flex: 1;
    height: 6px;
    background: #0a0a10;
    border: 1px solid #334155;
    overflow: hidden;
    border-radius: 1px;
}

.bar-fill {
    display: block;
    height: 100%;
    background: #22c55e;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
    transition: width 1s ease;
}

.bar-fill.bar-amber {
    background: #f59e0b;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.4);
}

.bar-fill.bar-red {
    background: #ef4444;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
}

.data-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    color: #e2e8f0;
    width: 42px;
    text-align: right;
    flex-shrink: 0;
}

/* === Signal Graph (PNL-002) === */
#signal-graph {
    margin-bottom: 12px;
    border: 1px solid #334155;
    background: #0a0a10;
    overflow: hidden;
}

#signal-canvas {
    display: block;
    width: 100%;
    height: auto;
}

.signal-stats {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.stat-block {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    background: rgba(10, 10, 16, 0.6);
    border: 1px solid #334155;
}

.stat-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    color: #22c55e;
    line-height: 1.2;
}

.stat-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: #94a3b8;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

/* === Observation Log (PNL-003) === */
.log-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.log-entry {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: #94a3b8;
    padding: 3px 6px;
    border-left: 2px solid #334155;
    line-height: 1.5;
}

.log-entry.log-info  { border-left-color: #22c55e; }
.log-entry.log-warn  { border-left-color: #f59e0b; color: #e2e8f0; }
.log-entry.log-alert { border-left-color: #ef4444; color: #ef4444; }

.log-time {
    color: #334155;
    margin-right: 8px;
    display: inline-block;
}

/* === Metric Grid (PNL-004) === */
.metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.metric-cell {
    background: rgba(10, 10, 16, 0.7);
    border: 1px solid #334155;
    padding: 10px 8px;
    text-align: center;
}

.metric-num {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    color: #e2e8f0;
    display: block;
    line-height: 1.2;
}

.metric-num.metric-amber { color: #f59e0b; }
.metric-num.metric-green { color: #22c55e; }
.metric-num.metric-red   { color: #ef4444; }

.metric-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: #94a3b8;
    letter-spacing: 0.08em;
    margin-top: 3px;
    display: block;
}

/* === Resolution Matrix (PNL-005) === */
.resolution-matrix {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 4px 6px;
    margin-top: 12px;
}

.rm-cell {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    padding: 4px 8px;
    border: 1px solid #334155;
    text-align: center;
    color: #94a3b8;
}

.rm-header {
    background: rgba(10, 10, 16, 0.8);
    color: #334155;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
}

.rm-op {
    color: #e2e8f0;
    font-size: 1rem;
    border-color: transparent;
    background: transparent;
}

/* === Frequency Bars (PNL-006) === */
.freq-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 72px;
    margin-bottom: 4px;
    padding: 0 2px;
    border-bottom: 1px solid #334155;
}

.freq-bar {
    flex: 1;
    background: #22c55e;
    opacity: 0.7;
    transition: height 0.3s ease, opacity 0.3s ease;
    min-height: 2px;
}

.freq-bar:nth-child(even) {
    background: #052e16;
    opacity: 1;
    border: 1px solid #22c55e;
}

.freq-label-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: #334155;
    margin-bottom: 10px;
}

/* === Telemetry Footer === */
#telemetry-footer {
    position: relative;
    z-index: 1;
    background: #0a0a10;
    border-top: 1px solid #334155;
    padding: 0;
    overflow: hidden;
}

#telemetry-dots {
    text-align: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: #334155;
    letter-spacing: 0.15em;
    padding: 6px 16px 0;
    overflow: hidden;
    white-space: nowrap;
}

#telemetry-ticker-wrap {
    overflow: hidden;
    padding: 8px 0;
}

#telemetry-ticker {
    display: inline-block;
    white-space: nowrap;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: #22c55e;
    animation: ticker-scroll 60s linear infinite;
    letter-spacing: 0.05em;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* === Telemetry labels (hero) === */
.telemetry-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: #94a3b8;
    letter-spacing: 0.08em;
}

/* === Responsive === */
@media (max-width: 900px) {
    #panels-grid {
        grid-template-areas:
            "p001 p001 p001 p001 p001 p001 p002 p002 p002 p002 p002 p002"
            "p003 p003 p003 p003 p003 p003 p004 p004 p004 p004 p004 p004"
            "p005 p005 p005 p005 p005 p005 p006 p006 p006 p006 p006 p006";
    }
}

@media (max-width: 600px) {
    #panels-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "p001"
            "p002"
            "p003"
            "p004"
            "p005"
            "p006";
    }

    #hero {
        margin: 4px;
    }

    .corner-bracket {
        width: 16px;
        height: 16px;
    }
}