/*
 * Displayritarnas komponentstilar. Motsvarar instruments.js, ren rendering
 * utan lägen/tillstånd. Extraherat ur docs/design/timer-2026-09-25/v2/instruments.css,
 * som utöver detta även innehåller mockupens sid- och tillståndslayout (den delen hör
 * till kontrollvyn/publikskärmens egna ärenden, se retea-se/timer#10 och #11).
 */

.engraving {
    font: 500 10px "Consolas", monospace;
    letter-spacing: .2em;
    color: #9ca99a;
    margin-bottom: 12px;
}

/* Taktisk */
.tactical-unit {
    position: relative;
    width: 85%;
    padding: 2.8cqw 4cqw;
    background: linear-gradient(130deg, #2c352b, #222a23);
    border: 1px solid #505b48;
    border-radius: 4px;
    box-shadow: 0 8px 25px #0004, inset 0 1px #ffffff0e;
}

.tactical-digits {
    font: 500 13cqw/1.15 "Consolas", "Courier New", monospace;
    letter-spacing: -.04em;
    color: #dbe6c5;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.instrument-foot {
    display: flex;
    justify-content: space-between;
    font: 9px "Consolas", monospace;
    color: #a6b195;
    letter-spacing: .12em;
    margin-top: 8px;
}

.screw {
    width: 7px;
    height: 7px;
    border: 1px solid #788071;
    border-radius: 50%;
    position: absolute;
    background: linear-gradient(45deg, #1110 43%, #20271e 44% 56%, #1110 57%);
    box-shadow: 0 1px 2px #0008;
}

.screw.tl { top: 9px; left: 9px; }
.screw.tr { top: 9px; right: 9px; }
.screw.bl { bottom: 9px; left: 9px; }
.screw.br { bottom: 9px; right: 9px; }

/* 7-segment / LCD */
.segment-case {
    padding: 2cqw 3cqw 2.4cqw;
    border: 2px solid #30363a;
    border-radius: 10px;
    background: linear-gradient(#151719, #080a0b);
    box-shadow: inset 0 1px #ffffff18, 0 8px 18px #0004;
    width: 85%;
}

.segment-row {
    display: flex;
    height: 17cqw;
    gap: 1cqw;
    align-items: center;
    justify-content: center;
}

.segment-digit { height: 100%; width: auto; min-width: 0; }
.colon { height: 100%; width: auto; fill: #fb5748; }
.segment-case .lit { fill: #ff6251; filter: drop-shadow(0 0 1px #ff392860); }
.segment-case .unlit { fill: #301c1c; }
.overtime-plus { font-size: 5cqw; align-self: center; color: #ff766b; }

.lcd-case {
    background: linear-gradient(110deg, #b6bda0, #a4ae92);
    border: solid #414842;
    border-width: 8px;
    border-radius: 6px;
    box-shadow: inset 2px 4px 9px #27301c50, 0 5px 12px #0005;
}

.lcd-case .engraving { color: #34422b; }
.lcd-case .lit, .lcd-case .colon { fill: #243323; filter: none; }
.lcd-case .unlit { fill: #536345; opacity: .12; }
.lcd-case .overtime-plus { color: #243323; }

/* LED */
.led-case {
    width: 91%;
    padding: 3cqw;
    background: #090d0f;
    border: 2px solid #303639;
    border-radius: 5px;
    box-shadow: inset 0 1px #ffffff10, 0 6px 18px #0005;
}

.matrix-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2cqw;
    height: 16cqw;
}

.matrix-row svg { height: 100%; width: auto; min-width: 0; }
.matrix-row .lit { fill: #ffbc52; filter: drop-shadow(0 0 .5px #ff8300); }
.matrix-row .unlit { fill: #232421; }

/* Split-flap */
.flap-case {
    height: 22cqw;
    width: 92%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1cqw;
    background: #080b0c;
    padding: 1.5cqw;
    border: 1px solid #373c3d;
    border-radius: 7px;
    box-shadow: 0 8px 18px #0005;
}

.flap-digit {
    display: block;
    position: relative;
    width: 19%;
    height: 100%;
    font-family: "Arial Narrow", "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 17cqw;
    line-height: 1;
    perspective: 600px;
    filter: drop-shadow(0 2px 1px #000);
}

.half {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background: #252a2c;
    color: #f4f1e4;
    border-radius: 3px;
}

.half b {
    position: absolute;
    left: 0;
    width: 100%;
    height: 200%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.upper { top: 0; background: linear-gradient(#282d2f, #1e2325); border-bottom: 1px solid #000; }
.lower { bottom: 0; background: linear-gradient(#303638, #272c2e); border-top: 1px solid #53595a; }
.upper b { top: 0; }
.lower b { bottom: 0; }

.flap-digit i {
    height: 4px;
    background: #88877b;
    position: absolute;
    left: -2px;
    right: -2px;
    top: calc(50% - 2px);
    z-index: 2;
    clip-path: polygon(0 0, 5% 0, 5% 100%, 0 100%, 0 0, 95% 0, 100% 0, 100% 100%, 95% 100%, 95% 0);
}

.flap-colon { font-size: 8cqw; color: #b8b8ad; }

.changed .upper {
    transform-origin: bottom;
    animation: flip .22s ease-out;
}

@keyframes flip {
    from { transform: rotateX(-65deg); filter: brightness(.55); }
    to { transform: rotateX(0); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
    .changed .upper { animation: none; }
}

/* Nixie */
.nixie-unit {
    width: 94%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nixie-row {
    height: 24cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3cqw;
    max-width: 100%;
}

.nixie-row img { height: 100%; width: auto; min-width: 0; object-fit: contain; }
.nixie-colon { font: 5cqw Georgia, serif; color: #fba24e; text-shadow: 0 0 7px #fc6504; align-self: center; }

.nixie-base {
    height: 1.8cqw;
    width: 97%;
    background: linear-gradient(#43301e, #21170f);
    border-top: 1px solid #745335;
    border-radius: 3px;
    box-shadow: 0 6px 14px #0008;
}

/* Stationsklocka */
.station-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1cqw;
}

.station-face { height: 25cqw; width: 25cqw; filter: drop-shadow(0 5px 6px #0005); }

.station-countdown {
    font-size: 3.6cqw;
    line-height: 1;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.plain-sample { font-size: 40px; letter-spacing: -2px; }