/* display/forar.css — LED «Førar»-skjerm.
   Full breidde: fører øvst, fører-info, bil, bil-info, og to kommentarboksar
   nederst. Person-/bil-ikon markerer kven som er kven. Skriftstorleikar i vw
   så alt skalerer med skjermbreidda og ingenting blir klipt. */

:root{
    --orange:#ff6b00;
    --gold:#f5c451;
    --text:#f4f6fa;
    --muted:#cfd6e0;
    --sep:#5c6675;
    --panel:rgba(18,22,29,.82);
}

*{margin:0;padding:0;box-sizing:border-box}

body{
    font-family:'Inter',sans-serif;
    width:100vw;height:100vh;overflow:hidden;
    color:var(--text);
    background:
        radial-gradient(120% 90% at 88% 6%, rgba(255,107,0,.16), transparent 44%),
        linear-gradient(180deg,#0c1016,#070a0e 60%);
}

.wrap{
    height:100%;
    display:flex;flex-direction:column;
    padding:3vw 4vw 3.4vw;
}
.wrap[hidden]{display:none}

/* ---- Fører / bil-overskrifter (full breidde) ---- */
.head{display:flex;align-items:center;gap:1.6vw;min-width:0}
.head.bil{margin-top:1.8vw}
.head.forer{color:var(--orange)}
.head.bil{color:#fff}
.head .ic{flex:none;width:4.8vw;height:4.8vw;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.headline{font-size:6vw;font-weight:900;line-height:1;letter-spacing:-.01em;color:inherit;overflow-wrap:break-word}

.subline{font-size:2.3vw;font-weight:800;color:var(--muted);margin:.9vw 0 0 6.4vw}
.subline .sep{color:var(--sep);margin:0 .5vw}

/* ---- Dei to kommentarboksane (fyller resten av høgda) ---- */
.boxes{
    flex:1;min-height:0;
    display:grid;grid-template-columns:1fr 1fr;gap:2.2vw;
    padding-top:2.4vw;
}
.box{
    background:var(--panel);
    border-radius:1.4vw;border-top:.5vw solid var(--orange);
    padding:1.8vw 2vw;
    display:flex;gap:1.4vw;align-items:flex-start;
    overflow:hidden;
}
.box .ic{flex:none;width:3.4vw;height:3.4vw;margin-top:.3vw;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.box.forer .ic{color:var(--orange)}
.box.bil .ic{color:#fff}
.box .ct{font-size:2.6vw;font-weight:800;line-height:1.26;color:#eef2f8}
.box .ct em{color:var(--gold);font-style:normal}
.box.empty{display:none}

/* ---- Ventar / ingen aktiv førar ---- */
.idle{
    position:fixed;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:1.4vw;
}
.idle .mark{
    width:9vw;height:9vw;border-radius:2vw;background:var(--orange);
    display:flex;align-items:center;justify-content:center;
    font-size:5.4vw;font-weight:900;color:#fff;
}
.idle .txt{font-size:3vw;font-weight:800;color:var(--muted)}
.idle[hidden]{display:none}