/* the society :: panel chrome.
   drake's visual language is cheap industrial hardware: stamped steel, exposed
   fasteners, stencilled part numbers, hazard tape on anything that can hurt you.
   the panels below are built from gradients and pseudo-elements only, so there
   are no image assets to fetch and nothing resembling official RSI/CIG art. */

.panel {
    position: relative;
    background:
        linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 55%, var(--ground-2) 100%);
    border: var(--bezel) solid var(--panel-edge);
    border-radius: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 178, 36, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.8),
        0 2px 10px rgba(0, 0, 0, 0.7);
    min-height: 0;
    min-width: 0;
}

/* corner brackets. drawn with two gradients per corner so they read as machined
   cutouts rather than a drawn border. */
.panel::before,
.panel::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    opacity: 0.75;
}

.panel::before {
    top: 3px;
    left: 3px;
    border-top: 2px solid var(--amber-mid);
    border-left: 2px solid var(--amber-mid);
}

.panel::after {
    bottom: 3px;
    right: 3px;
    border-bottom: 2px solid var(--amber-mid);
    border-right: 2px solid var(--amber-mid);
}

/* rivets. a repeating-radial-gradient along the panel head costs one element and
   scales to any width, which beats placing sixteen absolutely-positioned dots. */
.panel-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: 7px 12px 6px 26px;
    background:
        repeating-radial-gradient(
            circle at 13px 50%,
            var(--rivet-hi) 0 1.6px,
            var(--rivet) 1.6px 3px,
            transparent 3px 3px
        ),
        linear-gradient(180deg, #1A1409 0%, #0E0B06 100%);
    background-repeat: no-repeat, repeat;
    border-bottom: 1px solid var(--panel-edge);
    font-family: var(--font-stencil);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--amber);
    text-shadow: 0 0 6px rgba(255, 178, 36, 0.35);
}

/* the stamped part number that makes a panel look like inventory rather than UI. */
.panel-head .stamp {
    margin-left: auto;
    font-family: var(--font-chrome);
    font-weight: 400;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--amber-mid);
    opacity: 0.85;
    text-shadow: none;
}

.panel-body {
    padding: var(--gap);
    min-height: 0;
    min-width: 0;
}

/* ── controls ─────────────────────────────────────────────────────────────── */

.btn {
    font-family: var(--font-chrome);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
    background: linear-gradient(180deg, #191308 0%, #0B0805 100%);
    border: 1px solid var(--amber-dim);
    border-radius: 2px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 90ms linear, border-color 90ms linear, color 90ms linear;
    min-height: 34px;
}

.btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #241A0B 0%, #130D07 100%);
    border-color: var(--amber-mid);
    color: var(--amber-bright);
}

.btn:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.btn:disabled {
    color: var(--amber-dim);
    border-color: var(--amber-ghost);
    cursor: not-allowed;
}

/* hazard striping marks the controls that destroy something. it is the only
   place diagonal tape appears, so it never becomes decoration. */
.btn-danger {
    color: var(--alert);
    border-color: var(--alert-dim);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 42, 58, 0.14) 0 6px,
            transparent 6px 12px
        ),
        linear-gradient(180deg, #1A0507 0%, #0B0203 100%);
}

.btn-danger:hover:not(:disabled) {
    color: #FF6B76;
    border-color: var(--alert);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 42, 58, 0.26) 0 6px,
            transparent 6px 12px
        ),
        linear-gradient(180deg, #240609 0%, #110304 100%);
}

/* ── status lamps ─────────────────────────────────────────────────────────── */

.lamp {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber-ghost);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.9);
    flex: none;
}

.lamp[data-state="up"] {
    background: var(--good);
    box-shadow: 0 0 7px rgba(79, 224, 139, 0.85);
}

.lamp[data-state="warn"] {
    background: var(--amber);
    box-shadow: 0 0 7px rgba(255, 178, 36, 0.85);
}

.lamp[data-state="down"] {
    background: var(--alert);
    box-shadow: 0 0 7px rgba(255, 42, 58, 0.9);
}