.section,
.turn {
    padding: 0.5rem;
    user-select: none;
}

.header {
    pointer-events: all;
    line-height: initial;
    border-radius: 0.5rem;
    font-family: var(--font-bold);
    cursor: pointer;
}

.section-header {
    display: block;
    text-align: center;
    padding: 0.5rem;
    background-color: var(--hover-color);
}

.section-header:active {
    background-color: var(--active-color);
}

.turn-header {
    display: block;
    width: fit-content;
    padding: 0.35rem 0.75rem;
    margin: 0.25rem 0 0.5rem;
    border: 0.5px solid var(--border-color);
}

.turn-header:active {
    background-color: var(--hover-color);
}

.line {
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
}

.line:has(.line-inner.highlight) {
    background-color: var(--active-color);
}

.bullet {
    display: inline;
    padding-left: 0.75rem;
    font-size: 0.75rem;
}

.line-inner {
    width: 100%;
    padding: 0.325rem 0.55rem;
    min-height: var(--font-size);
    cursor: text;
    user-select: text;
    pointer-events: all;
    outline: none;
    overflow-wrap: anywhere;
}

.event {
    display: inline-block;
    margin: 0 0.1rem;
    padding: 0 0.1rem;
    border-radius: 0.25rem;
    background-color: var(--channel-1);
    color: var(--region-text-color);
    font-family: var(--font-bold);
    cursor: pointer;
    user-select: none;
}