/* Записи экрана (Pages/Recordings.razor) — сетка строки сессии поверх общей базы .orion-row (app.css).
   Узко — время с длительностью, ниже устройство и asid; средне — две строки; широко — одна. */

.recording-session {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
        "start  stats  play"
        "device device device"
        "asid   asid   asid";
}

.recording-session__start { grid-area: start; }
.recording-session__stats { grid-area: stats; }

.recording-session__device {
    grid-area: device;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.recording-session__asid {
    grid-area: asid;
    font-size: 0.75rem;
}

.recording-session__play {
    grid-area: play;
    font-size: 2rem !important;
    width: 2rem !important;
    height: 2rem !important;
}

@container orion-rows (min-width: 520px) {
    .recording-session {
        column-gap: 20px;
        grid-template-areas:
            "start  stats play"
            "device asid  play";
    }
}

@container orion-rows (min-width: 860px) {
    .recording-session {
        grid-template-columns: minmax(140px, 0.9fr) minmax(130px, 0.9fr) minmax(0, 1.5fr) minmax(0, 1.2fr) auto;
        grid-template-areas: "start stats device asid play";
    }
}