/*
 * physicsLabStyles.css
 * TNT | Gravity Lab — Claude's JS Graphics Challenge
 * Page-specific styles.  Loaded AFTER tnt-base-styles.css so these can override it.
 */

:root {
    --pl-dark:   #080d1c;
    --pl-mid:    #0e1630;
    --pl-accent: #38B2F0;   /* physics blue */
    --pl-amber:  #E69F4D;   /* TNT amber */
    --pl-neon:   #80FFEA;   /* vector teal */
}

/* ── Body ── */
body { background: #f0f2f6; color: #1a1a2e; font-family: 'Inter', sans-serif; }

/* ── Hero ── */
#hero {
    background:
        linear-gradient(145deg, rgba(4, 8, 26, 0.82) 0%, rgba(14, 22, 52, 0.68) 100%),
        url('../gravityOutput.png') bottom / cover no-repeat;
    background-color: var(--pl-dark);
    min-height: 220px;
    padding: 3rem 1rem;
}
.hero-eyebrow  { color: rgba(255, 255, 255, 0.60); }
.hero-title    { color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.60); }
.hero-subtitle { color: rgba(255, 255, 255, 0.76); }

/* ── SPARK bar ── */
.spark-bar {
    background: var(--pl-dark);
    padding: 0.6rem 1.2rem;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
}
.spark-bar a { color: var(--pl-amber); font-weight: 700; font-size: 0.88rem; text-decoration: none; }
.spark-bar a:hover { color: #fff; text-decoration: underline; }
.spark-bar span { color: rgba(255, 255, 255, 0.40); font-size: 0.80rem; }

/* ── App section ── */
#appSection { background: #fff; padding: 2rem 0 3rem; }

/* ── Canvas frame ── */
#canvasFrame {
    border:        2px solid #1a1a2e;
    border-radius: 6px;
    overflow:      hidden;
    background:    var(--pl-dark);
    max-width:     860px;
    margin:        0 auto;
}

#physicsCanvas {
    display:    block;
    width:      100%;
    cursor:     crosshair;
    background: var(--pl-dark);
}

#physicsCanvas.dragging { cursor: grabbing; }

/* ── Stats bar (below canvas) ── */
#statsBar {
    background:    var(--pl-mid);
    color:         rgba(255, 255, 255, 0.50);
    font-family:   'Noto Sans Mono', monospace;
    font-size:     0.73rem;
    padding:       0.3rem 0.9rem;
    letter-spacing: 0.4px;
    border-top:    1px solid rgba(255, 255, 255, 0.07);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* ── Control panel ── */
#controls {
    max-width: 860px;
    margin: 0.8rem auto 0;
    padding: 0 0.5rem;
}

/* Physics buttons */
.pl-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            0.3rem;
    border:         1px solid #adb5bd;
    background:     #f8f9fa;
    color:          #212529;
    font-family:    'Inter', sans-serif;
    font-size:      0.81rem;
    font-weight:    600;
    padding:        0.32rem 0.85rem;
    border-radius:  6px;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
    user-select:    none;
}
.pl-btn:hover { background: #e9ecef; border-color: #6c757d; }
.pl-btn.pl-btn-on {
    background:   var(--pl-dark);
    color:        #fff;
    border-color: var(--pl-accent);
    box-shadow:   0 0 0 1px var(--pl-accent);
}
.pl-btn.pl-btn-danger {
    border-color: #dc3545;
    color:        #dc3545;
}
.pl-btn.pl-btn-danger:hover { background: #dc3545; color: #fff; }

/* Status line below controls */
.pl-status {
    font-size:   0.78rem;
    color:       #6c757d;
    font-style:  italic;
    margin-top:  0.35rem;
    min-height:  1.2em;
}
.pl-status span { color: #495057; font-style: normal; font-weight: 600; }

/* Canvas dimensions badge */
.pl-dims {
    font-size:   0.73rem;
    color:       #adb5bd;
    font-family: 'Noto Sans Mono', monospace;
    margin-top:  0.2rem;
}

/* ── Colour key legend ── */
.speed-legend {
    max-width:     860px;
    margin:        0.5rem auto 0;
    padding:       0 0.5rem;
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    font-size:     0.75rem;
    color:         #6c757d;
}
.speed-gradient {
    height:        10px;
    width:         120px;
    border-radius: 3px;
    background:    linear-gradient(to right, hsl(220,80%,42%), hsl(110,88%,48%), hsl(0,95%,52%));
    flex-shrink:   0;
}