/* Shared training week calendar */
.twc {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    margin: 0 0 14px;
}

.twc--with-settings {
    grid-template-columns: minmax(0, 1fr) auto;
}

.twc__strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(42px, 1fr));
    gap: 8px;
    min-width: 0;
}

.twc__day {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1.5px solid var(--border);
    border-radius: 18px;
    background:
        radial-gradient(circle at 34% 18%, color-mix(in srgb, var(--t-hero-text, var(--card-bg)) 14%, transparent), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 86%, transparent), color-mix(in srgb, var(--card-bg) 72%, var(--bg, transparent)));
    color: var(--text-muted);
    text-decoration: none;
    -webkit-backdrop-filter: blur(14px) saturate(1.26);
    backdrop-filter: blur(14px) saturate(1.26);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--t-hero-text, var(--text)) 18%, transparent),
        inset 0 -14px 24px color-mix(in srgb, var(--primary) 10%, transparent),
        var(--t-row-shadow);
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--t-motion-base, 0.18s), box-shadow var(--t-motion-base, 0.18s), transform 0.05s, background var(--t-motion-base, 0.18s);
}

.twc__day::before,
.twc__settings::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    border-top: 1px solid color-mix(in srgb, var(--t-hero-text, var(--text)) 26%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--t-hero-text, var(--text)) 10%, transparent), transparent 42%);
    pointer-events: none;
}

.twc__day > *,
.twc__settings > * {
    position: relative;
    z-index: 1;
}

button.twc__day {
    border: 1.5px solid var(--border);
    font: inherit;
    cursor: pointer;
}

.twc__day:hover,
.twc__settings:hover {
    border-color: var(--t-row-border-hover);
    box-shadow: var(--t-row-shadow-hover);
}

.twc__day:active,
.twc__settings:active {
    transform: scale(0.98);
}

.twc__day.is-active {
    color: var(--t-cta-fg);
    border-color: var(--t-cta-bg);
    background:
        radial-gradient(circle at 32% 16%, color-mix(in srgb, var(--t-hero-text, var(--t-cta-bg)) 28%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--t-cta-bg) 82%, var(--t-hero-text, var(--card-bg))), var(--t-cta-bg));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--t-hero-text, var(--t-cta-bg)) 36%, transparent),
        inset 0 -14px 24px color-mix(in srgb, var(--t-cta-fg) 12%, transparent),
        var(--t-cta-inset),
        var(--t-cta-glow);
}

.twc__day--partial:not(.is-active) {
    border-color: color-mix(in srgb, var(--t-cta-bg) 42%, var(--border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--t-hero-text, var(--text)) 18%, transparent),
        inset 0 -14px 24px color-mix(in srgb, var(--t-cta-bg) 12%, transparent),
        var(--t-row-shadow);
}

.twc__day--done:not(.is-active) {
    color: color-mix(in srgb, var(--t-cta-bg) 76%, var(--text));
    border-color: color-mix(in srgb, var(--t-cta-bg) 58%, var(--border));
    background:
        radial-gradient(circle at 34% 18%, color-mix(in srgb, var(--t-cta-bg) 18%, transparent), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--t-cta-bg) 14%, var(--card-bg)), color-mix(in srgb, var(--t-cta-bg) 7%, var(--card-bg)));
}

.twc__day.is-active::before {
    border-top-color: color-mix(in srgb, var(--t-hero-text, var(--t-cta-bg)) 58%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--t-hero-text, var(--t-cta-bg)) 18%, transparent), transparent 44%);
}

.twc__wd {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.twc__num {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.05;
}

.twc__count {
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 999px;
    background: var(--t-cta-bg);
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.twc__day--done .twc__count {
    width: 6px;
    height: 6px;
    display: block;
    color: transparent;
    background: var(--t-cta-bg);
    font-size: 0;
    line-height: 0;
    box-shadow: none;
}

.twc__day.is-active .twc__count {
    background: var(--t-cta-fg);
}

.twc__day--done.is-active .twc__count {
    color: transparent;
}

.twc--home .twc__day--done .twc__count {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--t-cta-bg);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.twc--home .twc__day--done.is-active .twc__count {
    background: transparent;
    color: var(--t-cta-fg);
}

.twc--home .twc__markers {
    min-height: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--t-cta-bg);
}

.twc--home .twc__marker {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-style: normal;
}

.twc--home .twc__marker--planned {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.twc--home .twc__marker--done {
    width: 11px;
    height: 11px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.twc--home .twc__day.is-active .twc__markers {
    color: var(--t-cta-fg);
}

.twc--home .twc__marker-legend {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: -2px 0 0;
    color: var(--t-text-muted, var(--text-muted));
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
}

.twc--home .twc__marker-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.twc--home .twc__marker-legend-mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--t-cta-bg);
    font-style: normal;
}

.twc--home .twc__marker-legend-mark--planned {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--t-cta-bg);
}

.twc--home .twc__marker-legend-mark--done {
    width: 11px;
    height: 11px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.twc__count:empty,
.twc__day[data-empty="1"] .twc__count {
    opacity: 0;
}

.twc__settings {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 46px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: 1.5px solid color-mix(in srgb, var(--t-cta-bg) 48%, var(--border));
    background:
        radial-gradient(circle at 34% 18%, color-mix(in srgb, var(--t-hero-text, var(--card-bg)) 15%, transparent), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--t-cta-bg) 18%, var(--card-bg)), color-mix(in srgb, var(--t-cta-bg) 10%, var(--card-bg)));
    color: var(--t-cta-bg);
    text-decoration: none;
    -webkit-backdrop-filter: blur(14px) saturate(1.26);
    backdrop-filter: blur(14px) saturate(1.26);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--t-hero-text, var(--text)) 18%, transparent),
        inset 0 -14px 24px color-mix(in srgb, var(--t-cta-bg) 12%, transparent),
        var(--t-row-shadow);
    transition: border-color var(--t-motion-base, 0.18s), box-shadow var(--t-motion-base, 0.18s), transform 0.05s, background var(--t-motion-base, 0.18s);
}

.twc--tabs {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 380px) {
    .twc,
    .twc__strip {
        gap: 6px;
    }
    .twc__day,
    .twc__settings {
        min-height: 58px;
        border-radius: 16px;
    }
    .twc__settings {
        width: 42px;
    }
}