/**
 * Texas Charter Public Styles
 *
 * Styles for public-facing templates and shortcodes.
 *
 * @package TexasCharter
 * @since 1.0.0
 */

:root {
    /*
     * Brand tokens map to Astra's global palette so Customizer changes
     * cascade through all texas-charter blocks/templates by default.
     * Hex fallbacks keep the plugin usable if Astra is inactive.
     *
     * Astra mapping (site palette):
     * 0 primary/navy, 1 accent/yellow, 2 heading, 3 body text,
     * 4 white/surface, 5 subtle surface, 6 dark, 7 border, 8 dark alt
     */
    --tc-color-primary: var(--ast-global-color-0, #0e243c);
    --tc-color-accent: var(--ast-global-color-1, #e0d81e);
    --tc-color-heading: var(--ast-global-color-2, #24415f);
    --tc-color-text: var(--ast-global-color-3, #010101);
    --tc-color-surface: var(--ast-global-color-4, #ffffff);
    --tc-color-surface-alt: var(--ast-global-color-5, #f0f5fa);
    --tc-color-dark: var(--ast-global-color-6, #111111);
    --tc-color-border: var(--ast-global-color-7, #d1d5db);

    --tc-yellow: var(--tc-color-accent);
    --tc-yellow-dark: #c9b000;
    --tc-yellow-dark: color-mix(in srgb, var(--tc-color-accent) 78%, #000);
    --tc-gray-900: var(--tc-color-primary);
    --tc-gray-800: var(--tc-color-heading);
    --tc-gray-700: var(--tc-color-dark);
    --tc-gray-200: var(--tc-color-border);
    --tc-gray-100: var(--tc-color-surface-alt);
}

/* ==========================================================================
   Search Form
   ========================================================================== */

.tc-search-form-wrapper {
    margin: 2em 0;
    padding: 2em;
    background: #f9f9f9;
    border-radius: 8px;
}

.tc-search-form {
    margin-bottom: 2em;
}

.tc-search-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 1em;
    align-items: end;
}

.tc-search-field {
    min-width: 0;
}

.tc-search-field label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: #333;
}

.tc-search-input,
.tc-search-select {
    width: 100%;
    min-height: 48px;
    padding: 0 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    line-height: 1.25;
    background-color: #fff;
    box-sizing: border-box;
}

.tc-search-select {
    padding-right: 2.25rem;
}

.tc-search-button {
    min-height: 48px;
    padding: 0 2em;
    background: var(--tc-yellow);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.tc-search-button:hover {
    background: var(--tc-yellow-dark);
}

.tc-search-loading,
.tc-search-no-results {
    padding: 2em;
    text-align: center;
    color: #666;
}

.tc-search-pagination .page-numbers {
    border: none;
    cursor: pointer;
    font: inherit;
}

.tc-search-pagination .page-numbers.current {
    cursor: default;
}

.tc-search-pagination,
.tc-schedule-pagination,
.tc-table-pagination,
.tc-region-schools-pagination {
    margin-top: 1.5em;
}

/* ==========================================================================
   School Directory & Cards
   ========================================================================== */

.tc-school-directory {
    margin: 2em 0;
}

.tc-directory-header {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 2px solid var(--tc-yellow);
}

.tc-directory-count {
    font-size: 1.1em;
    color: #666;
}

.tc-schools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5em;
    margin: 2em 0;
}

.tc-school-card {
    padding: 1.5em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition:
        box-shadow 0.3s,
        transform 0.3s;
}

.tc-school-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.tc-school-card h3 {
    margin: 0 0 0.75em;
    font-size: 1.3em;
}

.tc-school-card h3 a {
    color: var(--tc-gray-900);
    text-decoration: none;
}

.tc-school-card h3 a:hover {
    text-decoration: underline;
}

.tc-school-card p {
    margin: 0.5em 0;
    font-size: 0.95em;
    color: #666;
}

.tc-school-region,
.tc-school-area {
    font-size: 0.9em;
}

.tc-school-teams {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid #eee;
    font-size: 0.95em;
}

.tc-view-button {
    display: inline-block;
    margin-top: 1em;
    padding: 0.6em 1.2em;
    background: var(--tc-gray-900);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-size: 0.9em;
    transition: background 0.3s;
}

.tc-view-button:hover {
    background: var(--tc-gray-700);
}

.tc-view-button-secondary {
    background: #fff;
    color: var(--tc-gray-900) !important;
    border: 1px solid var(--tc-gray-200);
}

.tc-view-button-secondary:hover {
    background: var(--tc-gray-100);
}

.tc-pagination {
    margin-top: 2em;
    padding: 0.5em 0;
    text-align: center;
}

.tc-pagination .page-numbers {
    display: inline-block;
    margin: 0 0.25em;
    padding: 0.55em 0.9em;
    background: #fff;
    color: var(--tc-gray-900);
    text-decoration: none;
    border: 1px solid var(--tc-gray-200);
    border-radius: 6px;
    font-weight: 600;
    line-height: 1.2;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.tc-pagination .page-numbers.current {
    background: var(--tc-gray-900);
    border-color: var(--tc-gray-900);
    color: #fff;
}

.tc-pagination .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    color: #666;
    cursor: default;
    pointer-events: none;
    padding-left: 0.35em;
    padding-right: 0.35em;
}

.tc-pagination .page-numbers.prev,
.tc-pagination .page-numbers.next {
    min-width: auto;
}

.tc-pagination .page-numbers:hover:not(.current),
.tc-pagination button.page-numbers:hover:not(.current) {
    background: var(--tc-yellow);
    border-color: var(--tc-yellow-dark);
    color: var(--tc-gray-900);
}

.tc-search-pagination .page-numbers,
.tc-schedule-pagination .page-numbers,
.tc-table-pagination .page-numbers,
.tc-region-schools-pagination .page-numbers {
    border: 1px solid var(--tc-gray-200);
    cursor: pointer;
    font: inherit;
}

.tc-search-pagination .page-numbers.current,
.tc-schedule-pagination .page-numbers.current,
.tc-table-pagination .page-numbers.current,
.tc-region-schools-pagination .page-numbers.current {
    cursor: default;
}

/* ==========================================================================
   Schedules
   ========================================================================== */

.tc-schedules-wrapper {
    margin: 2em 0;
}

.tc-schedules-filters {
    margin-bottom: 2em;
    padding: 1.5em;
    background: #f9f9f9;
    border-radius: 8px;
}

.tc-schedules-filters h3,
.tc-schedules-filters__title {
    margin-top: 0;
}

.tc-filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
}

.tc-filter-field label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: #333;
}

.tc-filter-field select {
    width: 100%;
    min-height: 48px;
    padding: 0 2.25rem 0 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 1em;
    line-height: 1.25;
}

.tc-schedule-table {
    margin: 2em 0;
}

.tc-schedule-list {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.tc-schedule-list thead {
    background: var(--tc-gray-900);
    color: #fff;
}

.tc-schedule-list th,
.tc-schedule-list td {
    padding: 1em;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.tc-schedule-list tbody tr:hover {
    background: #f9f9f9;
}

.entry-content table.tc-schedule-list a,
.tc-schedule-list a {
    color: var(--tc-gray-900);
    font-weight: 600;
    text-decoration: none;
}

.entry-content table.tc-schedule-list a:hover,
.entry-content table.tc-schedule-list a:focus-visible,
.tc-schedule-list a:hover,
.tc-schedule-list a:focus-visible {
    text-decoration: underline;
}

.tc-schedule-list a.tc-schedule-datetime {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.tc-schedule-datetime {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.tc-schedule-list a.tc-schedule-datetime:hover {
    text-decoration: none;
}

.tc-schedule-list a.tc-schedule-datetime:hover .tc-schedule-day {
    text-decoration: underline;
}

.tc-schedule-day {
    font-weight: 700;
    line-height: 1.25;
    color: var(--tc-gray-900);
}

.tc-schedule-time {
    font-size: 0.875em;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #4f5a68;
}

.tc-schedule-cell-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
}

.tc-schedule-cell-body a,
.tc-schedule-meta {
    line-height: 1.35;
}

.tc-schedule-meta {
    font-size: 0.875em;
    font-weight: 500;
    color: #4f5a68;
}

.tc-schedule-no-results {
    padding: 3em;
    text-align: center;
    background: #f9f9f9;
    border-radius: 8px;
}

/* ==========================================================================
   Standings
   ========================================================================== */

.tc-standings-wrapper {
    margin: 2em 0;
}

.tc-standings-section {
    margin-bottom: 3em;
    padding: 1.5em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.tc-standings-section h3 {
    margin-top: 0;
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--tc-yellow);
}

.tc-standings-meta {
    margin: 0.5em 0;
    color: #666;
}

.tc-standings-section table a {
    color: var(--tc-gray-900);
    font-weight: 600;
    text-decoration: none;
}

.tc-standings-section table a:hover {
    text-decoration: underline;
}

.tc-standings-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
}

.tc-standings-table thead {
    background: var(--tc-gray-900);
    color: #fff;
}

.tc-standings-table th,
.tc-standings-table td {
    padding: 0.85em 1em;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.tc-standings-table tbody tr:hover {
    background: #f9f9f9;
}

.tc-standings-empty {
    margin: 1em 0 0;
    color: #666;
}

.tc-paginated-table {
    margin-top: 1em;
}

/* ==========================================================================
   Team Roster (Public)
   ========================================================================== */

.tc-team-roster-public {
    margin: 2em 0;
    padding: 2em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.tc-roster-header {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 2px solid var(--tc-yellow);
}

.tc-roster-header h2 {
    margin: 0 0 0.5em;
}

.tc-roster-campus {
    font-size: 1.1em;
    color: #666;
}

.tc-roster-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-top: 1em;
}

.tc-roster-meta span {
    font-size: 0.95em;
}

.tc-roster-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
}

.tc-roster-table thead {
    background: var(--tc-gray-900);
    color: #fff;
}

.tc-roster-table th,
.tc-roster-table td {
    padding: 1em;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.tc-roster-table tbody tr:hover {
    background: #f9f9f9;
}

.tc-jersey-number {
    font-weight: 700;
    color: var(--tc-gray-900);
    width: 100px;
}

.tc-roster-count {
    margin-top: 1em;
    padding: 1em;
    background: #f9f9f9;
    border-radius: 4px;
    text-align: center;
}

.tc-privacy-notice {
    margin-top: 2em;
    padding: 1em;
    background: #fffbcc;
    border-left: 4px solid #ffb900;
    border-radius: 4px;
}

.tc-privacy-notice p {
    margin: 0;
    color: #666;
}

/* ==========================================================================
   Team Profile & Schedule
   ========================================================================== */

.tc-team-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 20px 56px;
}

.tc-team-hero {
    padding: 28px 0 24px;
    border-bottom: 3px solid var(--tc-yellow);
}

.tc-team-hero h1 {
    max-width: 980px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.tc-team-hero-school {
    margin: 14px 0 0;
    color: #4f5a68;
    font-size: 1.05em;
    font-weight: 600;
}

.tc-team-hero-school a {
    color: var(--tc-gray-900);
    font-weight: 700;
    text-decoration: none;
}

.tc-team-hero-school a:hover {
    text-decoration: underline;
}

.tc-team-page .tc-team-summary {
    margin: 28px 0;
}

.tc-team-page .tc-team-featured-games {
    margin: 0 0 28px;
}

.tc-team-page .tc-event-panel + .tc-event-panel {
    margin-top: 18px;
}

.tc-team-page .tc-event-meta-grid a {
    color: var(--tc-gray-900);
    font-weight: 700;
    text-decoration: none;
}

.tc-team-page .tc-event-meta-grid a:hover {
    text-decoration: underline;
}

.tc-team-page .tc-team-schedule--embedded,
.tc-team-page .tc-team-roster-public--embedded {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.tc-team-page .tc-team-schedule--embedded h2,
.tc-team-page .tc-team-roster-public--embedded h2 {
    margin: 0 0 18px;
    font-size: 1.35rem;
    letter-spacing: 0;
}

.tc-team-page .tc-team-schedule-header h2 {
    margin: 0 0 18px;
    font-size: 1.35rem;
    letter-spacing: 0;
}

.tc-team-page .tc-schedule-list,
.tc-team-page .tc-roster-table {
    margin: 0;
}

.tc-team-page .tc-roster-count {
    margin-top: 14px;
    padding: 14px;
    background: var(--tc-gray-100);
    border-radius: 8px;
    text-align: left;
}

.tc-team-page .tc-privacy-notice {
    margin-top: 14px;
    color: #4f5a68;
}

/* Legacy shortcode wrapper */
.tc-team-profile {
    margin: 2em 0;
    padding: 2em;
    background: #fff;
    border: 1px solid var(--tc-gray-200);
    border-radius: 8px;
}

.tc-team-profile-campus {
    font-size: 1.05em;
    color: #666;
}

.tc-team-profile-campus a,
.tc-event-campus-link {
    color: var(--tc-gray-900);
    font-weight: 700;
    text-decoration: none;
}

.tc-team-profile-campus a:hover,
.tc-event-campus-link:hover {
    text-decoration: underline;
}

.tc-team-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 1.5em;
}

.tc-team-summary-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #fff;
}

.tc-team-summary-card strong {
    display: block;
    color: var(--tc-gray-900);
    font-size: 1.45rem;
    line-height: 1.1;
}

.tc-team-summary-card span {
    display: block;
    margin-top: 6px;
    color: #4f5a68;
    font-size: 0.82em;
    font-weight: 700;
    text-transform: uppercase;
}

.tc-team-featured-games {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 2em;
}

.tc-team-featured-game {
    display: block;
    min-width: 0;
    padding: 18px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    color: var(--tc-gray-900);
    text-decoration: none;
    background: var(--tc-gray-100);
}

.tc-team-featured-game:hover {
    border-color: var(--tc-yellow-dark);
    text-decoration: none;
}

.tc-team-featured-game span {
    display: block;
    margin-bottom: 8px;
    color: #4f5a68;
    font-size: 0.78em;
    font-weight: 800;
    text-transform: uppercase;
}

.tc-team-featured-game strong {
    display: block;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.tc-team-featured-game small {
    display: block;
    margin-top: 8px;
    color: #4f5a68;
}

.tc-team-schedule-header h2 {
    margin: 0 0 1em;
}

.tc-schedule-result {
    font-weight: 600;
    color: var(--tc-gray-900);
}

/* ==========================================================================
   League Hub
   ========================================================================== */

.tc-league-hub {
    margin: 2em 0;
}

.tc-league-hub-header {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 2px solid var(--tc-yellow);
}

.tc-league-hub-section {
    margin-bottom: 2em;
    padding: 1.5em;
    background: #fff;
    border: 1px solid var(--tc-gray-200);
    border-radius: 8px;
}

.tc-league-hub-dates,
.tc-league-hub-links {
    margin: 0;
    padding-left: 1.25em;
}

.tc-league-hub-links a {
    color: var(--tc-gray-900);
    text-decoration: none;
}

.tc-league-hub-links a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Landing Page
   ========================================================================== */

.tc-landing {
    background: var(--tc-gray-100);
}

.tc-hero {
    position: relative;
    min-height: 520px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 2.5em;
    padding: 4em 3em;
    background: linear-gradient(
        135deg,
        var(--tc-color-primary) 0%,
        var(--tc-color-heading) 45%,
        var(--tc-color-dark) 100%
    );
    color: var(--tc-color-surface);
    overflow: hidden;
}

.tc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            var(--tc-hero-overlay, color-mix(in srgb, var(--tc-color-primary) 78%, transparent)) 0%,
            color-mix(in srgb, var(--tc-color-primary) 52%, transparent) 45%,
            color-mix(in srgb, var(--tc-color-primary) 20%, transparent) 100%
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--tc-color-primary) 16%, transparent) 0%,
            color-mix(in srgb, var(--tc-color-primary) 42%, transparent) 100%
        );
    z-index: 0;
}

.tc-hero-media {
    position: absolute;
    inset: 0;
    opacity: 0.65;
    z-index: 0;
}

.tc-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.tc-hero-slide.is-active {
    opacity: 1;
}

.tc-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(30%);
}

.tc-hero-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.tc-hero-kicker {
    display: inline-block;
    padding: 0.4em 0.8em;
    border-radius: 999px;
    background: var(
        --tc-hero-kicker-background,
        color-mix(in srgb, var(--tc-color-accent) 20%, transparent)
    );
    color: var(--tc-hero-kicker-color, var(--tc-yellow));
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.2em;
    font-weight: 600;
}

.tc-hero h1 {
    margin: 0.6em 0 0.4em;
    font-size: clamp(2rem, 3vw, 3rem);
    color: var(--tc-hero-title-color, var(--tc-color-surface));
    line-height: 1.08;
    text-wrap: balance;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.tc-hero p {
    font-size: 1.05em;
    color: var(--tc-hero-subtitle-color, var(--tc-color-surface-alt));
    max-width: 48ch;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.tc-hero-actions {
    display: flex;
    gap: 1em;
    margin-top: 1.5em;
    flex-wrap: wrap;
}

.tc-hero-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-top: 2em;
}

.tc-hero-nav a {
    color: var(--tc-hero-nav-link-color, var(--tc-color-surface));
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95em;
    border-bottom: 2px solid transparent;
}

.tc-hero-nav a:hover {
    border-color: var(--tc-yellow);
}

.tc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.75em 1.8em;
    text-decoration: none;
    font-weight: 600;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

.tc-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.tc-button-primary {
    background: var(--tc-hero-primary-button-background, var(--tc-yellow));
    color: var(--tc-hero-primary-button-text, var(--tc-color-text));
    border: 1px solid color-mix(in srgb, var(--tc-color-text) 10%, transparent);
}

.tc-button-ghost {
    background: var(
        --tc-hero-secondary-button-background,
        color-mix(in srgb, var(--tc-color-primary) 18%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--tc-color-surface) 52%, transparent);
    color: var(--tc-hero-secondary-button-text, var(--tc-color-surface));
    backdrop-filter: blur(3px);
}

.tc-button-primary:hover,
.tc-button-primary:focus {
    color: var(--tc-hero-primary-button-text, var(--tc-color-text));
    filter: brightness(1.04);
    background: var(--tc-hero-primary-button-background, var(--tc-yellow));
}

.tc-button-ghost:hover,
.tc-button-ghost:focus {
    color: var(--tc-hero-secondary-button-text, var(--tc-color-surface));
    background: var(
        --tc-hero-secondary-button-background,
        color-mix(in srgb, var(--tc-color-primary) 32%, transparent)
    );
    border-color: color-mix(in srgb, var(--tc-color-surface) 82%, transparent);
    filter: brightness(1.08);
}

.tc-button-secondary {
    background: var(--tc-gray-900);
    color: var(--tc-color-surface);
}

.tc-landing-section {
    padding: 3em;
}

.tc-section-header {
    max-width: 640px;
    margin-bottom: 2em;
}

.tc-section-header h2 {
    margin-bottom: 0.4em;
    color: var(--tc-gray-900);
}

.tc-quick-find-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5em;
}

.tc-quick-find-card {
    background: #f9f9f9;
    padding: 1.5em;
    border-radius: 8px;
    border: none;
    box-shadow: none;
}

.tc-quick-find-card .tc-search-form-wrapper {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.tc-quick-find-actions {
    display: flex;
    gap: 0.75em;
    margin-top: 1.5em;
    flex-wrap: wrap;
}

.tc-news-band {
    background: var(--tc-gray-900);
    color: #fff;
}

.tc-news-band .tc-section-header h2,
.tc-news-band .tc-section-header p {
    color: #fff;
}

.tc-regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5em;
}

.tc-region-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 14px;
    padding: 0;
    border: 1px solid var(--tc-gray-200);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.tc-region-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--tc-yellow) 0%,
        color-mix(in srgb, var(--tc-yellow) 55%, white) 100%
    );
}

.tc-region-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.1);
    border-color: #d9d9d9;
}

.tc-region-card__header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.5rem 0.75rem;
}

.tc-region-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--tc-gray-900);
    color: var(--tc-yellow);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.tc-region-card__title {
    margin: 0;
    padding-top: 0.35rem;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--tc-gray-900);
}

.tc-region-card__description {
    margin: 0;
    padding: 0 1.5rem;
    color: #5f6670;
    line-height: 1.6;
    flex: 1 1 auto;
}

.tc-region-card__cta {
    margin: 1.25rem 1.5rem 1.5rem;
}

.tc-region-card--state .tc-region-card__badge {
    background: linear-gradient(135deg, var(--tc-gray-900) 0%, #2d3748 100%);
}

.tc-region-card--state::before {
    background: linear-gradient(
        90deg,
        var(--tc-yellow) 0%,
        color-mix(in srgb, var(--tc-yellow) 35%, white) 50%,
        var(--tc-yellow) 100%
    );
}

/* Explore button: use dark styling so it's visible on light card background */
.tc-region-card .tc-button-ghost {
    color: var(--tc-gray-900);
    border-color: var(--tc-gray-700);
    align-self: flex-start;
}

.tc-region-card .tc-button-ghost:hover {
    background: var(--tc-gray-900);
    color: #fff;
    border-color: var(--tc-gray-900);
}

.tc-schedules-band {
    background: #fff;
}

/* ==========================================================================
   Portal
   ========================================================================== */

.tc-portal {
    background: #fff;
    border: 1px solid var(--tc-gray-200);
    border-radius: 12px;
    padding: 2.5em;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.05);
}

.tc-portal-guest {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.tc-portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
    border-bottom: 1px solid var(--tc-gray-200);
    padding-bottom: 1.5em;
    margin-bottom: 2em;
}

.tc-portal-actions {
    display: flex;
    gap: 0.75em;
    flex-wrap: wrap;
}

.tc-portal-section {
    margin-top: 2em;
}

.tc-portal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1em;
}

.tc-portal-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1em;
    min-height: 116px;
    padding: 1.15em 1.25em;
    border-radius: 8px;
    border: 1px solid var(--tc-gray-200);
    background: #fff;
    color: var(--tc-gray-900);
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.04);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.tc-portal-card:hover,
.tc-portal-card:focus {
    border-color: var(--tc-yellow);
    box-shadow: 0 16px 28px rgba(17, 24, 39, 0.08);
    color: var(--tc-gray-900);
    transform: translateY(-1px);
}

.tc-portal-card:focus-visible {
    outline: 2px solid var(--tc-gray-900);
    outline-offset: 3px;
}

.tc-portal-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: var(--tc-gray-100);
    color: var(--tc-gray-900);
    font-size: 1.2em;
}

.tc-portal-card-copy {
    display: grid;
    gap: 0.25em;
    min-width: 0;
}

.tc-portal-card-title {
    font-weight: 800;
    line-height: 1.25;
}

.tc-portal-card-text {
    color: #4f5a68;
    font-size: 0.92em;
    line-height: 1.45;
}

.tc-portal-card-arrow {
    margin-left: auto;
    color: #7b8493;
    font-size: 0.9em;
    transition: transform 0.16s ease, color 0.16s ease;
}

.tc-portal-card:hover .tc-portal-card-arrow,
.tc-portal-card:focus .tc-portal-card-arrow {
    color: var(--tc-gray-900);
    transform: translateX(3px);
}

.tc-portal-list {
    display: grid;
    gap: 1em;
}

.tc-portal-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5em;
    padding: 1em 1.25em;
    border-radius: 10px;
    border: 1px solid var(--tc-gray-200);
    background: #fff;
}

.tc-portal-list-item h4 {
    margin: 0 0 0.35em;
}

.tc-portal-table-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 16px;
}

.tc-portal-table-header h2 {
    margin-bottom: 0;
}

.tc-portal-table-count {
    color: #4f5a68;
    font-size: 0.88em;
    font-weight: 700;
    white-space: nowrap;
}

.tc-portal-table-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(130px, 0.75fr)) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: var(--tc-gray-100);
}

.tc-portal-table-filters label {
    display: grid;
    gap: 5px;
    min-width: 0;
    margin: 0;
}

.tc-portal-table-filters span {
    color: #4f5a68;
    font-size: 0.76em;
    font-weight: 800;
    text-transform: uppercase;
}

.tc-portal-table-filters input,
.tc-portal-table-filters select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #cfd6df;
    border-radius: 6px;
    background: #fff;
    color: var(--tc-gray-900);
    box-sizing: border-box;
    line-height: 1.25;
}

.tc-portal-table-filters select {
    padding-right: 2.25rem;
}

.tc-portal-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--tc-gray-200);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.tc-portal-table th,
.tc-portal-table td {
    padding: 0.9em 1em;
    border-bottom: 1px solid var(--tc-gray-200);
    text-align: left;
    vertical-align: middle;
}

.tc-portal-table th {
    background: var(--tc-gray-100);
    color: var(--tc-gray-900);
    font-size: 0.86em;
    font-weight: 800;
    text-transform: uppercase;
}

.tc-portal-table tbody tr:last-child td {
    border-bottom: 0;
}

.tc-portal-table tbody tr:hover {
    background: #fffdf2;
}

.tc-teams-table th:last-child,
.tc-teams-table td:last-child {
    width: 76px;
    text-align: center;
}

.tc-table-actions {
    white-space: nowrap;
}

.tc-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--tc-gray-200);
    background: #fff;
    color: var(--tc-gray-900);
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.tc-icon-action svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.tc-icon-action:hover,
.tc-icon-action:focus {
    background: var(--tc-yellow);
    border-color: var(--tc-yellow);
    color: var(--tc-gray-900);
    transform: translateY(-1px);
}

.tc-icon-action:focus-visible {
    outline: 2px solid var(--tc-gray-900);
    outline-offset: 3px;
}

.tc-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-height: 28px;
    padding: 0.25em 0.65em;
    border-radius: 999px;
    background: var(--tc-gray-100);
    color: var(--tc-gray-900);
    font-size: 0.86em;
    font-weight: 700;
}

.tc-status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8a94a6;
}

.tc-status-pill.is-active::before {
    background: #33a852;
}

.tc-status-pill.is-pending::before {
    background: #d99a00;
}

.tc-announcement-content {
    min-width: 0;
}

.tc-announcement-excerpt {
    margin-bottom: 0;
}

.tc-announcement-details {
    margin-top: 0.75em;
}

.tc-announcement-details summary {
    cursor: pointer;
    color: var(--tc-gray-900);
    font-weight: 700;
    text-decoration: underline;
}

.tc-announcement-details summary:focus {
    outline: 2px solid var(--tc-yellow);
    outline-offset: 3px;
}

.tc-announcement-full {
    margin-top: 0.85em;
    max-width: 72ch;
    color: var(--tc-gray-800);
}

.tc-announcement-full p:last-child {
    margin-bottom: 0;
}

.tc-portal-profile {
    display: grid;
    gap: 1.5em;
}

.tc-profile-summary {
    display: flex;
    align-items: center;
    gap: 1.25em;
    padding: 1.25em;
    border: 1px solid var(--tc-gray-200);
    border-radius: 10px;
    background: var(--tc-gray-100);
}

.tc-profile-avatar,
.tc-profile-avatar img,
.tc-profile-image-control img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}

.tc-profile-avatar,
.tc-profile-image-control img {
    flex: 0 0 auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--tc-gray-200);
}

.tc-profile-avatar img,
.tc-profile-image-control img {
    display: block;
    object-fit: cover;
}

.tc-profile-summary h3 {
    margin: 0 0 0.25em;
}

.tc-profile-summary p {
    margin: 0;
}

.tc-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 0.75em;
}

.tc-profile-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.25em 0.65em;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--tc-gray-200);
    font-size: 0.85em;
    font-weight: 600;
}

.tc-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25em;
}

.tc-profile-panel {
    border: 1px solid var(--tc-gray-200);
    border-radius: 10px;
    padding: 1.5em;
    background: #fff;
}

.tc-profile-panel h3 {
    margin-top: 0;
}

.tc-profile-panel label {
    display: block;
    margin-bottom: 0.35em;
    font-weight: 700;
}

.tc-profile-panel input[type="text"],
.tc-profile-panel input[type="email"],
.tc-profile-panel input[type="tel"],
.tc-profile-panel input[type="password"],
.tc-profile-panel input[type="file"],
.tc-profile-panel select {
    width: 100%;
}

.tc-team-detail {
    display: grid;
    gap: 1.5em;
}

.tc-team-detail-summary {
    display: grid;
    gap: 1em;
    padding: 1.25em;
    border: 1px solid var(--tc-gray-200);
    border-radius: 10px;
    background: var(--tc-gray-100);
}

.tc-team-detail-summary h3 {
    margin: 0 0 0.25em;
}

.tc-team-detail-summary p {
    margin: 0;
}

.tc-team-roster-mini {
    display: grid;
    border: 1px solid var(--tc-gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.tc-team-roster-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.75em 1em;
    background: #fff;
}

.tc-team-roster-mini-row + .tc-team-roster-mini-row {
    border-top: 1px solid var(--tc-gray-200);
}

.tc-roster-people {
    display: grid;
    gap: 0.75em;
}

.tc-roster-person {
    border: 1px solid var(--tc-gray-200);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.tc-roster-person summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 0.75em;
    align-items: center;
    padding: 0.85em 1em;
    cursor: pointer;
    list-style: none;
}

.tc-roster-person summary::-webkit-details-marker {
    display: none;
}

.tc-roster-person summary:focus-visible {
    outline: 2px solid var(--tc-yellow);
    outline-offset: -2px;
}

.tc-roster-avatar,
.tc-roster-avatar img,
.tc-roster-avatar span {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.tc-roster-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--tc-gray-100);
    border: 1px solid var(--tc-gray-200);
    color: var(--tc-gray-900);
    font-size: 0.82em;
    font-weight: 800;
}

.tc-roster-avatar img {
    display: block;
    object-fit: cover;
}

.tc-roster-avatar span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tc-roster-person-name {
    display: grid;
    gap: 0.15em;
    min-width: 0;
}

.tc-roster-person-name strong,
.tc-roster-person-name small {
    overflow-wrap: anywhere;
}

.tc-roster-person-name small {
    color: #4f5a68;
    font-size: 0.85em;
    font-weight: 700;
}

.tc-roster-edit-label {
    color: var(--tc-gray-900);
    font-size: 0.86em;
    font-weight: 800;
    text-decoration: underline;
}

.tc-roster-edit-form {
    display: grid;
    gap: 0.75em;
    padding: 1em;
    border-top: 1px solid var(--tc-gray-200);
    background: var(--tc-gray-100);
}

.tc-roster-edit-form p {
    margin-bottom: 0;
}

.tc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1em;
}

.tc-profile-image-control {
    display: flex;
    align-items: center;
    gap: 1em;
}

.tc-profile-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75em;
}

.tc-roster-actions {
    margin-top: 1.35em;
}

.tc-button.tc-button-link {
    background: transparent;
    color: var(--tc-gray-900);
    border: 0;
    box-shadow: none;
    text-decoration: underline;
    padding-left: 0;
    padding-right: 0;
}

.tc-profile-details {
    display: grid;
    gap: 1em;
    margin: 0;
}

.tc-profile-details div {
    display: grid;
    gap: 0.25em;
}

.tc-profile-details dt {
    font-weight: 700;
}

.tc-profile-details dd {
    margin: 0;
}

.tc-muted {
    color: #666;
}

.tc-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 0.85em;
    border-radius: 999px;
    background: var(--tc-yellow);
    color: var(--tc-gray-900);
    font-weight: 600;
    font-size: 0.8em;
}

@media (max-width: 800px) {
    .tc-portal-grid {
        grid-template-columns: 1fr;
    }

    .tc-portal-table-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-profile-grid,
    .tc-form-grid {
        grid-template-columns: 1fr;
    }

    .tc-profile-summary,
    .tc-profile-image-control {
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .tc-portal {
        padding: 1.25em;
    }

    .tc-portal-header,
    .tc-portal-list-item,
    .tc-profile-summary,
    .tc-profile-image-control {
        flex-direction: column;
    }

    .tc-portal-table-header {
        display: block;
    }

    .tc-portal-table-count {
        display: block;
        margin-top: 4px;
    }

    .tc-portal-table-filters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .tc-hero {
        grid-template-columns: 1fr;
        padding: 3em 2em;
    }
}

@media (max-width: 600px) {
    .tc-landing-section {
        padding: 2em 1.5em;
    }

    .tc-hero {
        padding: 2.5em 1.5em;
    }
}

/* ==========================================================================
   News Scroller
   ========================================================================== */

.tc-news-scroller {
    overflow: hidden;
    background: var(--tc-gray-900);
    color: #fff;
    padding: 1em 0;
    position: relative;
}

.tc-news-track {
    display: flex;
    gap: 3em;
    white-space: nowrap;
}

.tc-news-item {
    flex-shrink: 0;
    font-size: 1.1em;
    font-weight: 600;
}

.tc-news-item a {
    color: #fff;
    text-decoration: none;
}

.tc-news-item a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.tc-loading {
    padding: 3em;
    text-align: center;
}

.tc-loading .spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--tc-yellow);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .tc-search-row {
        grid-template-columns: 1fr;
    }

    .tc-schools-grid {
        grid-template-columns: 1fr;
    }

    .tc-filter-row {
        grid-template-columns: 1fr;
    }

    .tc-roster-meta {
        flex-direction: column;
        gap: 0.5em;
    }
}

/* ==========================================================================
   Mobile tables: stacked cards
   ========================================================================== */

@media (max-width: 768px) {
    .tc-schedule-list,
    .tc-roster-table,
    .tc-standings-table,
    .tc-portal-table {
        width: 100%;
        border: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .tc-schedule-list thead,
    .tc-roster-table thead,
    .tc-standings-table thead,
    .tc-portal-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .tc-schedule-list tbody,
    .tc-roster-table tbody,
    .tc-standings-table tbody,
    .tc-portal-table tbody {
        display: grid;
        gap: 12px;
    }

    .tc-schedule-list tbody tr,
    .tc-roster-table tbody tr,
    .tc-standings-table tbody tr,
    .tc-portal-table tbody tr {
        display: grid;
        gap: 0.25rem;
        padding: 1rem 1.1rem;
        border: 1px solid var(--tc-color-border, #d1d5db);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
    }

    .tc-schedule-list tbody tr:hover,
    .tc-roster-table tbody tr:hover,
    .tc-standings-table tbody tr:hover,
    .tc-portal-table tbody tr:hover {
        background: #fff;
    }

    .entry-content table.tc-schedule-list td,
    .entry-content table.tc-roster-table td,
    .entry-content table.tc-standings-table td,
    .entry-content table.tc-portal-table td,
    table.tc-schedule-list td,
    table.tc-roster-table td,
    table.tc-standings-table td,
    table.tc-portal-table td {
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        align-items: start;
        column-gap: 0.85rem;
        row-gap: 0.15rem;
        padding: 0.45rem 0;
        border: 0;
        box-shadow: none;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .entry-content table.tc-schedule-list td::before,
    .entry-content table.tc-roster-table td::before,
    .entry-content table.tc-standings-table td::before,
    .entry-content table.tc-portal-table td::before,
    table.tc-schedule-list td::before,
    table.tc-roster-table td::before,
    table.tc-standings-table td::before,
    table.tc-portal-table td::before {
        content: attr(data-label);
        align-self: start;
        border: 0;
        box-shadow: none;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #6b7280;
        padding-top: 0.15em;
    }

    .tc-schedule-list td:not([data-label]),
    .tc-roster-table td:not([data-label]),
    .tc-standings-table td:not([data-label]),
    .tc-portal-table td:not([data-label]) {
        display: block;
    }

    .tc-schedule-list td:not([data-label])::before,
    .tc-roster-table td:not([data-label])::before,
    .tc-standings-table td:not([data-label])::before,
    .tc-portal-table td:not([data-label])::before {
        content: none;
    }

    .entry-content table.tc-schedule-list td.tc-schedule-date,
    table.tc-schedule-list td.tc-schedule-date {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        grid-template-columns: none;
        gap: 0.15rem;
        padding: 0 0 0.9rem;
        margin: 0 0 0.15rem;
        border: 0;
        border-bottom: 1px solid #e8edf3;
        font-size: 1em;
        font-weight: 400;
        line-height: 1.3;
    }

    .entry-content table.tc-schedule-list td.tc-schedule-date::before,
    table.tc-schedule-list td.tc-schedule-date::before {
        content: none;
        display: none;
    }

    .tc-schedule-list td.tc-schedule-date .tc-schedule-datetime {
        width: 100%;
        gap: 0.2rem;
    }

    .tc-schedule-list td.tc-schedule-date .tc-schedule-day {
        display: block;
        font-size: 1.08rem;
        font-weight: 700;
        color: var(--tc-gray-900);
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    .tc-schedule-list td.tc-schedule-date .tc-schedule-time {
        display: block;
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: #4f5a68;
    }

    .tc-roster-table td {
        display: block;
        padding: 0;
    }

    .tc-roster-table td::before {
        content: none;
    }

    .tc-portal-table td.tc-table-actions {
        display: flex;
        justify-content: flex-end;
        padding-top: 0.75rem;
        margin-top: 0.25rem;
        border-top: 1px solid #e8edf3;
    }

    .tc-portal-table td.tc-table-actions::before {
        content: none;
    }
}

@media (max-width: 480px) {
    .tc-news-item {
        font-size: 1em;
    }

    .tc-school-card,
    .tc-team-roster-public {
        padding: 1em;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.tc-no-results,
.tc-no-athletes,
.tc-no-standings {
    padding: 3em;
    text-align: center;
    background: #f9f9f9;
    border-radius: 8px;
    color: #666;
}

/* ==========================================================================
   Account
   ========================================================================== */

.tc-account {
    max-width: 1100px;
    margin: 0 auto;
}

.tc-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.tc-account-panel {
    border: 1px solid #d7dde5;
    border-radius: 8px;
    padding: 24px;
    background: #fff;
}

.tc-account-panel label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
}

.tc-account-panel input[type="text"],
.tc-account-panel input[type="email"],
.tc-account-panel input[type="password"] {
    width: 100%;
    max-width: 100%;
}

.tc-notice {
    border-left: 4px solid #2271b1;
    padding: 12px 16px;
    margin: 16px 0;
    background: #fff;
}

.tc-notice-error {
    border-left-color: #d63638;
}

.tc-notice-success {
    border-left-color: #008a20;
}

.tc-notice-warning {
    border-left-color: #dba617;
}

.tc-notice-info {
    border-left-color: #2271b1;
}

.tc-account-help {
    color: #50575e;
    font-size: 0.95em;
}

.tc-password-strength {
    min-height: 1.4em;
    margin: 0 0 12px;
    font-weight: 700;
}

.tc-password-strength.is-short,
.tc-password-strength.is-bad,
.tc-password-strength.is-mismatch {
    color: #d63638;
}

.tc-password-strength.is-good {
    color: #996800;
}

.tc-password-strength.is-strong {
    color: #008a20;
}

.tc-portal-embedded-dashboard .wrap {
    margin: 0;
}

.tc-roster-upload {
    display: grid;
    gap: 1.5em;
}

.tc-roster-upload-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 1.25em;
    align-items: start;
}

.tc-roster-manual {
    margin-top: 1.25em;
}

.tc-roster-team-picker {
    margin: 1.25em 0;
}

.tc-roster-manual-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    gap: 1.25em;
    align-items: start;
}

.tc-roster-manual-card {
    border: 1px solid var(--tc-gray-200);
    border-radius: 8px;
    padding: 1.25em;
}

.tc-roster-manual-card h4 {
    margin: 0 0 1em;
    font-size: 1.15em;
}

.tc-roster-manual .tc-roster-person summary {
    grid-template-columns: minmax(0, 1fr) auto;
}

.tc-roster-upload-lead {
    margin: 0 0 1em;
    color: #4f5a68;
    line-height: 1.5;
}

.tc-roster-columns {
    margin: 0 0 1em;
    padding-left: 1.1em;
    line-height: 1.55;
}

.tc-roster-columns span {
    color: #4f5a68;
    font-weight: 400;
}

.tc-roster-field-help {
    margin: 0.35em 0 0;
    color: #4f5a68;
    font-size: 0.92em;
    line-height: 1.45;
}

.tc-roster-upload-form label {
    display: block;
    margin-bottom: 0.35em;
    font-weight: 700;
}

.tc-roster-upload-form select,
.tc-roster-upload-form input[type="file"] {
    width: 100%;
    max-width: 100%;
}

.tc-roster-field {
    margin: 0 0 1em;
}

.tc-roster-results:not(:empty) {
    margin-top: 1.25em;
}

.tc-roster-preview {
    margin-top: 0;
}

.tc-roster-preview-table-wrap {
    overflow-x: auto;
}

.tc-roster-checklist {
    display: grid;
    gap: 0.75em;
    margin: 1.25em 0;
}

.tc-roster-checklist label {
    display: flex;
    gap: 0.65em;
    align-items: flex-start;
    font-weight: 400;
    line-height: 1.45;
}

.tc-roster-checklist input {
    margin-top: 0.2em;
}

/* ==========================================================================
   Event Detail
   ========================================================================== */

.tc-event-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 20px 56px;
}

.tc-event-hero {
    padding: 28px 0 24px;
    border-bottom: 3px solid var(--tc-yellow);
}

.tc-event-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    color: #4f5a68;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.82em;
}

.tc-event-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 4px;
    background: var(--tc-gray-900);
    color: #fff;
}

.tc-event-status-upcoming {
    background: #1f6f43;
}

.tc-event-status-scheduled {
    background: #58616d;
}

.tc-event-hero h1 {
    max-width: 980px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.tc-event-date {
    margin: 14px 0 0;
    color: #4f5a68;
    font-size: 1.05em;
    font-weight: 600;
}

.tc-event-scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    margin: 28px 0;
}

.tc-event-team,
.tc-event-panel {
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #fff;
}

.tc-event-team {
    display: grid;
    min-height: 220px;
    padding: 24px;
    align-content: start;
}

.tc-event-team-label {
    color: #4f5a68;
    font-size: 0.8em;
    font-weight: 800;
    text-transform: uppercase;
}

.tc-event-team h2 {
    margin: 10px 0 8px;
    font-size: 1.45rem;
    line-height: 1.22;
    letter-spacing: 0;
}

.tc-event-team h2 a {
    color: var(--tc-gray-900);
    text-decoration: none;
}

.tc-event-team h2 a:hover {
    text-decoration: underline;
}

.tc-event-team p {
    margin: 0;
    color: #4f5a68;
}

.tc-event-score {
    align-self: end;
    margin-top: 24px;
    font-size: clamp(3rem, 8vw, 5.5rem);
    line-height: 0.95;
    font-weight: 900;
    color: var(--tc-gray-900);
}

.tc-event-vs {
    display: grid;
    place-items: center;
    min-height: 220px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: var(--tc-gray-100);
    color: var(--tc-gray-900);
    font-weight: 900;
    text-transform: uppercase;
}

.tc-event-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    gap: 18px;
    align-items: start;
}

.tc-event-panel {
    padding: 24px;
}

.tc-event-panel h2 {
    margin: 0 0 18px;
    font-size: 1.35rem;
    letter-spacing: 0;
}

.tc-event-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.tc-event-meta-grid div {
    min-width: 0;
}

.tc-event-meta-grid strong {
    display: block;
    margin-bottom: 4px;
    color: #4f5a68;
    font-size: 0.78em;
    text-transform: uppercase;
}

.tc-event-meta-grid span {
    display: block;
    overflow-wrap: anywhere;
    color: var(--tc-gray-900);
    font-weight: 700;
}

.tc-event-muted {
    margin: 0 0 10px;
    color: #4f5a68;
    font-weight: 700;
}

.tc-event-breakdown {
    margin: 0;
    color: var(--tc-gray-900);
    font-size: 1.05em;
    line-height: 1.55;
    font-weight: 700;
}

.tc-event-notes {
    margin-top: 18px;
}

.tc-event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

/* ==========================================================================
   Campus Detail
   ========================================================================== */

.tc-campus-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 20px 56px;
}

.tc-campus-hero {
    padding: 28px 0 24px;
    border-bottom: 3px solid var(--tc-yellow);
    margin-bottom: 24px;
}

.tc-campus-hero h1 {
    max-width: 920px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.tc-campus-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

.tc-campus-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 18px;
    margin-bottom: 14px;
}

.tc-campus-section-header h2 {
    margin: 0;
}

.tc-campus-season-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.tc-campus-season-filter label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.tc-campus-season-filter select {
    min-width: 11rem;
    max-width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    background: #fff;
    color: var(--tc-gray-900);
}

.tc-campus-team-list,
.tc-campus-event-list {
    display: grid;
    gap: 10px;
}

.tc-campus-team-card,
.tc-campus-event-row {
    display: block;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    color: var(--tc-gray-900);
    text-decoration: none;
    background: #fff;
}

/* Theme card display rules override the native [hidden] behavior. */
.tc-campus-team-list .tc-campus-team-card[hidden],
.tc-campus-event-list .tc-campus-event-row[hidden],
[data-tc-paginated-table] tbody tr[hidden],
.tc-schedule-list tbody tr[hidden],
.tc-roster-table tbody tr[hidden],
.tc-standings-table tbody tr[hidden],
.tc-portal-table tbody tr[hidden] {
    display: none !important;
}

.tc-campus-team-card:hover,
.tc-campus-event-row:hover {
    border-color: var(--tc-yellow-dark);
    text-decoration: none;
}

.tc-campus-team-card strong,
.tc-campus-event-row strong {
    display: block;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.tc-campus-team-card span,
.tc-campus-event-row span,
.tc-campus-event-row small {
    display: block;
    margin-top: 6px;
    color: #4f5a68;
    font-size: 0.9em;
}

.tc-campus-event-row span,
.tc-campus-event-row small {
    font-weight: 700;
}

.tc-campus-details {
    margin-top: 18px;
}

/* ==========================================================================
   Region Detail
   ========================================================================== */

.tc-region-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 20px 56px;
}

.tc-region-hero {
    padding: 28px 0 24px;
    border-bottom: 3px solid var(--tc-yellow);
    margin-bottom: 24px;
}

.tc-region-hero h1 {
    max-width: 920px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.tc-region-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

.tc-region-games-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 18px;
}

.tc-region-games-header h2 {
    margin-bottom: 0;
}

.tc-region-schools-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.tc-region-schools-header h2 {
    margin: 0;
}

.tc-region-schools-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tc-region-schools-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.tc-region-schools-per-page span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
}

.tc-region-schools-per-page select {
    min-height: 40px;
    padding: 0.35rem 2rem 0.35rem 0.75rem;
    border: 1px solid var(--tc-gray-200);
    border-radius: 6px;
    background: #fff;
    font: inherit;
}

.tc-region-schools-count {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
}

.tc-region-schools-filters {
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: var(--tc-gray-100);
}

.tc-region-schools-filters label {
    display: grid;
    gap: 5px;
    margin: 0;
}

.tc-region-schools-filters span {
    color: #4f5a68;
    font-size: 0.76em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tc-region-schools-filters input {
    width: 100%;
    min-height: 40px;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--tc-gray-200);
    border-radius: 6px;
    background: #fff;
    font: inherit;
}

.tc-region-schools-empty {
    margin: 0 0 1rem;
    color: #666;
    font-size: 0.95rem;
}

.tc-region-schools-pagination {
    margin-top: 1.5rem;
}

.tc-region-games-count {
    color: #4f5a68;
    font-size: 0.88em;
    font-weight: 700;
    white-space: nowrap;
}

.tc-region-game-filters {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(130px, 0.6fr)) minmax(130px, 0.7fr) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: var(--tc-gray-100);
}

.tc-region-game-filters label {
    display: grid;
    gap: 5px;
    min-width: 0;
    margin: 0;
}

.tc-region-game-filters span {
    color: #4f5a68;
    font-size: 0.76em;
    font-weight: 800;
    text-transform: uppercase;
}

.tc-region-game-filters input,
.tc-region-game-filters select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #cfd6df;
    border-radius: 6px;
    background: #fff;
    color: var(--tc-gray-900);
    box-sizing: border-box;
    line-height: 1.25;
}

.tc-region-game-filters select {
    padding-right: 2.25rem;
}

.tc-region-filter-reset {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #cfd6df;
    border-radius: 6px;
    background: #fff;
    color: var(--tc-gray-900);
    font-weight: 800;
    cursor: pointer;
}

.tc-region-filter-reset:hover {
    background: var(--tc-gray-200);
}

.tc-region-games-empty {
    margin: 14px 0 0;
    padding: 16px;
    border-radius: 8px;
    background: var(--tc-gray-100);
    color: #4f5a68;
    font-weight: 700;
}

@media (max-width: 900px) {
    .tc-roster-upload-layout,
    .tc-roster-manual-grid {
        grid-template-columns: 1fr;
    }

    .tc-team-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-event-scoreboard,
    .tc-event-content-grid,
    .tc-campus-layout,
    .tc-region-layout {
        grid-template-columns: 1fr;
    }

    .tc-region-game-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-event-vs {
        min-height: 58px;
    }
}

@media (max-width: 768px) {
    .tc-account-grid {
        grid-template-columns: 1fr;
    }

    .tc-event-page,
    .tc-team-page {
        padding: 20px 16px 40px;
    }

    .tc-campus-page {
        padding: 20px 16px 40px;
    }

    .tc-region-page {
        padding: 20px 16px 40px;
    }

    .tc-region-games-header {
        display: block;
    }

    .tc-region-schools-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tc-region-games-count {
        display: block;
        margin-top: 4px;
    }

    .tc-region-game-filters {
        grid-template-columns: 1fr;
    }

    .tc-event-team {
        min-height: 180px;
    }

    .tc-event-meta-grid {
        grid-template-columns: 1fr;
    }

    .tc-team-summary,
    .tc-team-featured-games {
        grid-template-columns: 1fr;
    }
}

/* CSV URL list (academic resource links) */
.tc-csv-url-list {
    margin: 1.5rem 0 2rem;
}

.tc-csv-url-list__header {
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--tc-yellow);
    padding-bottom: 0.75rem;
}

.tc-csv-url-list__title {
    margin: 0 0 0.35rem;
    color: var(--tc-gray-900);
    font-size: 1.5rem;
    line-height: 1.25;
}

.tc-csv-url-list__description {
    margin: 0;
    color: #555;
}

.tc-csv-url-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.tc-csv-url-list__items.is-unstyled .tc-csv-url-list__index {
    display: none;
}

.tc-csv-url-list__items.is-unstyled .tc-csv-url-list__item {
    grid-template-columns: 1fr;
}

.tc-csv-url-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid var(--tc-gray-200);
    border-radius: 4px;
}

.tc-csv-url-list__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    background: var(--tc-gray-100);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tc-gray-800);
}

.tc-csv-url-list__link {
    color: var(--tc-gray-900);
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}

.tc-csv-url-list__link:hover,
.tc-csv-url-list__link:focus-visible {
    color: var(--tc-yellow-dark);
    text-decoration: underline;
    outline: none;
}

.tc-csv-url-list__empty-message,
.tc-csv-url-list__empty {
    padding: 1rem;
    background: var(--tc-gray-100);
    border: 1px dashed var(--tc-gray-200);
    border-radius: 4px;
    color: #555;
}

.tc-csv-url-list--editor .tc-csv-url-list__url {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #666;
    word-break: break-all;
}

.tc-csv-url-list--editor .tc-csv-url-list__status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.tc-csv-url-list--editor .tc-csv-url-list__item {
    grid-template-columns: auto 1fr;
}

@media (max-width: 640px) {
    .tc-csv-url-list__item {
        grid-template-columns: 1fr;
    }
}