.ctsfw-rl {
--navy: #001846;
--maroon: #7b1824;
--eggshell: #f6f4ee;
--ink: #111827;
--white: #ffffff; --bg: var(--white); --fg: var(--navy);
--muted: #475569;
--border: #e5e7eb; --accent: var(--maroon); --title: var(--navy); --icon: var(--navy); --action: var(--accent); --title-size-sm: clamp(16px, 1.4vw, 19px);
--title-size-event: clamp(16px, 1.6vw, 22px); --title-size-md: clamp(18px, 2.0vw, 26px);
--title-size-lg: clamp(20px, 2.6vw, 30px); --title-size: var(--title-size-md);
font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--fg);
border: 0px solid var(--border);
border-radius: 0;
padding: 16px;
} .ctsfw-rl--sz-sm {
--title-size: var(--title-size-sm);
}
.ctsfw-rl--sz-event {
--title-size: var(--title-size-event);
}
.ctsfw-rl--sz-md {
--title-size: var(--title-size-md);
}
.ctsfw-rl--sz-lg {
--title-size: var(--title-size-lg);
} .ctsfw-rl--dark {
--bg: var(--navy);
--fg: var(--eggshell); --muted: #cbd5e1;
--border: rgba(255, 255, 255, .12);
--accent-blue: #8ec5ff; --accent: var(--eggshell); --title: var(--accent-blue); --icon: var(--eggshell);
--action: var(--accent);
}
.ctsfw-rl *:focus-visible {
outline: 2px solid var(--action);
outline-offset: 2px;
} .ctsfw-rl__controls {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
align-items: center;
margin-bottom: 8px;
}
.ctsfw-rl__select,
.ctsfw-rl__search {
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
padding: 8px 10px;
}
.ctsfw-rl__search {
min-width: 220px;
}
.ctsfw-rl__count {
margin-left: auto;
font-size: 14px;
color: var(--muted);
} .ctsfw-rl__list {
list-style: none;
margin: 0;
padding: 0;
}
.ctsfw-rl__item {
display: grid; grid-template-columns: calc(var(--title-size) * 1.9) 1fr;
gap: 16px;
align-items: start; padding: 20px 0;
border-top: 1px solid var(--border);
}
.ctsfw-rl__item:first-child {
border-top: 0;
} .ctsfw-rl__icon {
line-height: 2rem; align-self: start; font-size: calc(var(--title-size) * 1.5); color: var(--icon);
}
.ctsfw-rl__icon-link {
display: inline-flex;
line-height: 0;
color: inherit;
text-decoration: none;
}
.ctsfw-rl__icon-link:hover {
opacity: .9;
}
.ctsfw-rl__svg {
display: block;
width: 1em !important;
height: 1em !important;
} .ctsfw-rl__title {
display: inline-block;
color: var(--title);
text-decoration: none;
font-weight: 600;
font-size: var(--title-size);
line-height: 1.25;
} .ctsfw-rl__underline {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0% 1px; transition: background-size .18s ease-out;
}
a:hover .ctsfw-rl__underline {
background-size: 100% 1px;
} .ctsfw-rl__actions {
margin-top: 6px;
display: flex;
align-items: center;
gap: 10px;
color: var(--action);
font-size: 18px;
}
.ctsfw-rl__action {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
color: var(--action);
font-weight: 600;
}
.ctsfw-rl__action-icon {
display: inline-flex;
}
.ctsfw-rl__sep {
opacity: .6;
} .ctsfw-rl__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.ctsfw-rl__tag {
font-size: 12px;
line-height: 1;
padding: 6px 8px;
background: rgba(0, 0, 0, .05);
color: var(--fg);
}
.ctsfw-rl--dark .ctsfw-rl__tag {
background: rgba(255, 255, 255, .12);
} .u-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
}
.ctsfw-rl__empty {
color: var(--muted);
padding: 12px 0;
} .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}