.rio-session-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--rio-s3);
}
.rio-session {
background: var(--rio-surface);
border: 1px solid var(--rio-border);
border-radius: var(--rio-radius);
padding: var(--rio-s4);
position: relative;
}
.rio-session--current {
border-inline-start: 3px solid var(--rio-accent);
padding-inline-start: calc(var(--rio-s4) - 2px);
}
.rio-session__header {
display: flex;
align-items: baseline;
gap: var(--rio-s2);
margin-bottom: var(--rio-s3);
}
.rio-session__marker {
font-size: var(--rio-fs-base);
color: var(--rio-text-subtle);
}
.rio-session--current .rio-session__marker {
color: var(--rio-accent);
}
.rio-session__title {
font-weight: var(--rio-fw-semibold);
color: var(--rio-text-strong);
}
.rio-session__trust {
margin-inline-start: auto;
font-size: var(--rio-fs-xs);
font-weight: var(--rio-fw-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--rio-text-muted);
padding: 2px 8px;
border-radius: 12px;
background: var(--rio-surface-3);
}
.rio-session__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--rio-s2) var(--rio-s4);
margin: 0 0 var(--rio-s3);
}
.rio-session__meta > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.rio-session__meta dt {
font-size: var(--rio-fs-xs);
font-weight: var(--rio-fw-bold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--rio-text-muted);
margin: 0;
}
.rio-session__meta dd {
margin: 0;
font-family: var(--rio-font-mono);
font-size: var(--rio-fs-sm);
color: var(--rio-text);
}
.rio-session__actions {
display: flex;
align-items: center;
gap: var(--rio-s2);
padding-top: var(--rio-s2);
border-top: 1px solid var(--rio-border-soft);
}