/* Show Control — documentation/show_control.md. Brushed-aluminum board,
   LED windows, hardware buttons. Targets ~16:9 to 4:3 displays. */

@font-face {
    font-family: 'DSEG14';
    src: url('/badges/fonts/DSEG14.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'LED';
    src: url('/badges/fonts/LED.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Helvetic';
    src: url('/badges/fonts/Helvetic.woff2') format('woff2');
    font-display: swap;
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #191919 url('assets/bk_aluminum.jpg') center / cover no-repeat;
    font-family: 'Helvetic', system-ui, sans-serif;
    color: #cfd6dd;
}

/* board: 4% margin, left/right halves with 2% gutter, 7vh bottom strip */

#panel {
    position: absolute;
    inset: 4vh 4vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 7vh;
    grid-template-areas:
        "left right"
        "bottom bottom";
    column-gap: 2vw;
    row-gap: 1.5vh;
}

.frame {
    border: 2px solid #6a6f75;
    border-radius: 3% / 5%;
    overflow: hidden;
}

/* ---- left ---- */

#left {
    grid-area: left;
    display: grid;
    grid-template-rows: 30fr 10fr 53fr;
    gap: 1.5vh;
    min-height: 0;
}

/* S1: 4 project strips */

#s1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8vw;
    padding: 1vh 0.8vw;
}

.strip {
    min-width: 0;
}

.stripinner {
    height: 100%;
    display: grid;
    grid-template-rows: 1.5fr 1fr 1fr 1fr;
    gap: 0.8vh;
}

.strip.empty {
    opacity: 0.25;
    pointer-events: none;
}

.nasa {
    background: url('assets/nasa_128_off.jpg') center / 100% 100% no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
}

.strip.on .nasa {
    background-image: url('assets/nasa_128_on.jpg');
}

.nasalabel {
    font-family: 'Helvetic', sans-serif;
    font-weight: 700;
    font-size: clamp(9px, 1.05vw, 16px);
    letter-spacing: 0.05em;
    color: #16181c;
    text-align: center;
    padding: 0 4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.strip.on .nasalabel {
    color: #0d0d05;
}

.led {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-family: 'DSEG14', monospace;
    font-size: clamp(12px, 1.6vw, 26px);
}

.led.green {
    background: url('assets/LED_128_green.jpg') center / 100% 100%;
}

.led.green span {
    color: #8cff9a;
    text-shadow: 0 0 6px #0a5, 0 0 12px #063;
}

.led.blue {
    background: url('assets/LED_128_blue.jpg') center / 100% 100%;
}

.led.blue span {
    color: #9fd2ff;
    text-shadow: 0 0 6px #17a, 0 0 12px #048;
}

.led.red {
    background: url('assets/LED_128_red.jpg') center / 100% 100%;
}

.led.red span {
    color: #ff9a8c;
    text-shadow: 0 0 6px #a21, 0 0 12px #600;
}

/* S2: group buttons */

#s2 {
    display: grid;
    grid-template-columns: 2fr repeat(6, 1fr);
    gap: 0.6vw;
    padding: 0.8vh 0.8vw;
}

.gbtn {
    border: 0;
    border-radius: 6px;
    background: url('assets/nasa_128_off.jpg') center / 100% 100%;
    font-family: 'Helvetic', sans-serif;
    font-weight: 700;
    font-size: clamp(10px, 1.1vw, 17px);
    color: #16181c;
    cursor: pointer;
}

.gbtn.on {
    background-image: url('assets/nasa_128_on.jpg');
    color: #0d0d05;
}

.gbtn:disabled {
    opacity: 0.25;
    cursor: default;
}

/* S3: device list */

#s3 {
    background: url('assets/blue_panel.png') center / 100% 100%;
    padding: 1.2vh 1vw;
    min-height: 0;
}

#devlist {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #147 transparent;
}

.devline {
    display: flex;
    gap: 1vw;
    padding: 0.5vh 0.6vw;
    font-family: 'LED', monospace;
    font-size: clamp(11px, 1.35vw, 20px);
    color: #9fd2ff;
    text-shadow: 0 0 5px #17a, 0 0 10px #048;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
}

.devline .dmac {
    opacity: 0.8;
}

.devline .dname {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.devline .dloc {
    text-align: right;
}

.devline.off {
    opacity: 0.4;
}

.devline.sel {
    background: #9fd2ff;
    color: #04203a;
    text-shadow: none;
}

/* ---- right ---- */

#right {
    grid-area: right;
    display: grid;
    grid-template-rows: auto 50fr 43fr;
    gap: 1.5vh;
    min-height: 0;
}

#lights {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5vw;
}

#lights img {
    width: clamp(30px, 4.4vw, 60px);
}

#lights .lgap {
    width: 1.2vw;
}

#preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #101014;
    min-height: 0;
}

#badge_canvas {
    max-width: 96%;
    max-height: 94%;
    border-radius: 4px;
}

/* command builder */

#builder {
    display: grid;
    grid-template-columns: 38fr 62fr;
    padding: 1vh 0.8vw;
    gap: 0.8vw;
    min-height: 0;
}

#params {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    gap: 0.7vh;
}

.param {
    display: flex;
    align-items: center;
    gap: 0.6vw;
    min-height: 0;
}

.pled {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.7vw;
    background: url('assets/LED_128_blue.jpg') center / 100% 100%;
    border-radius: 5px;
    font-family: 'LED', monospace;
    font-size: clamp(11px, 1.2vw, 18px);
    color: #9fd2ff;
    text-shadow: 0 0 5px #17a, 0 0 10px #048;
    letter-spacing: 0.08em;
}

.psel {
    height: 72%;
    cursor: pointer;
}

#options {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.8vw;
    min-height: 0;
}

#optlist {
    background: url('assets/LED_128_blue.jpg') center / 100% 100%;
    border-radius: 6px;
    padding: 0.8vh 0.8vw;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #147 transparent;
}

.optline {
    font-family: 'LED', monospace;
    font-size: clamp(12px, 1.4vw, 20px);
    color: #9fd2ff;
    text-shadow: 0 0 5px #17a, 0 0 10px #048;
    padding: 0.4vh 0.2vw;
    letter-spacing: 0.06em;
    cursor: pointer;
    white-space: nowrap;
}

#knobcol {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2vh;
}

#knob {
    width: clamp(48px, 5.5vw, 96px);
    cursor: grab;
    touch-action: none;
}

#knob:active {
    cursor: grabbing;
}

#setbtn {
    width: clamp(40px, 4.5vw, 80px);
    cursor: pointer;
}

#setbtn.armed {
    filter: drop-shadow(0 0 8px #4c8dff);
}

/* ---- bottom strip ---- */

#bottom {
    grid-area: bottom;
    display: flex;
    align-items: center;
    gap: 1vw;
}

#bottom img {
    height: 100%;
    cursor: pointer;
}

#bottom img:active {
    filter: brightness(1.35);
}

#debug {
    flex: 1;
    height: 100%;
    background: url('assets/LED_128_black.jpg') center / 100% 100%;
    padding: 0.4vh 0.8vw;
    font-family: 'LED', monospace;
    font-size: clamp(9px, 1.0vw, 14px);
    line-height: 1.25;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#debug .out {
    color: #7fe0ff;
    text-shadow: 0 0 4px #059;
}

#debug .in {
    color: #8cff9a;
    text-shadow: 0 0 4px #063;
}

#debug .err {
    color: #ff9a8c;
    text-shadow: 0 0 4px #600;
}

#debug .sys {
    color: #d9c66a;
    text-shadow: 0 0 4px #650;
}