.mth-material-tabs,
.mth-material-login-required,
.mth-material-empty {
    --mth-material-accent: #087A67;
    --mth-material-ink: #10231B;
    --mth-material-muted: #496158;
    --mth-material-line: rgba(8, 122, 103, 0.22);
    --mth-material-surface: #E9F8F3;
    box-sizing: border-box;
    color: var(--mth-material-ink);
    margin: 2rem auto;
    max-width: var(--wp--style--global--wide-size, 1200px);
}

.mth-material-tablist {
    border-bottom: 1px solid var(--mth-material-line);
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0 0.25rem;
    scrollbar-width: thin;
}

.mth-material-tab {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--mth-material-muted);
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    font-weight: 650;
    margin: 0 0 -1px;
    padding: 0.9rem 1.1rem;
}

.mth-material-tab:hover,
.mth-material-tab:focus-visible {
    color: var(--mth-material-accent);
}

.mth-material-tab:focus-visible {
    outline: 2px solid var(--mth-material-accent);
    outline-offset: -2px;
}

.mth-material-tab.is-active {
    border-bottom-color: var(--mth-material-accent);
    color: var(--mth-material-ink);
}

.mth-material-panel {
    border-bottom: 1px solid var(--mth-material-line);
    padding: clamp(1.5rem, 4vw, 3rem) clamp(0.25rem, 2vw, 1.5rem);
}

.mth-material-panel + .mth-material-panel {
    border-top: 1px solid var(--mth-material-line);
}

.mth-material-tabs.is-enhanced .mth-material-panel + .mth-material-panel {
    border-top: 0;
}

.mth-material-panel:focus {
    outline: 0;
}

.mth-material-panel-header {
    border-left: 4px solid var(--mth-material-accent);
    margin-bottom: 2rem;
    max-width: 850px;
    padding-left: 1.15rem;
}

.mth-material-panel-header h2 {
    font-size: clamp(1.7rem, 4vw, 2.7rem);
    line-height: 1.08;
    margin: 0;
}

.mth-material-subject {
    color: var(--mth-material-accent);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    margin: 0 0 0.55rem;
    text-transform: uppercase;
}

.mth-material-summary {
    color: var(--mth-material-muted);
    font-size: 1.08rem;
    margin: 0.85rem 0 0;
}

.mth-material-content {
    line-height: 1.7;
    max-width: 900px;
}

.mth-material-content > :first-child {
    margin-top: 0;
}

.mth-material-content img {
    height: auto;
    max-width: 100%;
}

.mth-material-content figure {
    margin-left: 0;
    margin-right: 0;
}

.mth-material-content figcaption {
    color: var(--mth-material-muted);
    font-size: 0.9rem;
}

.mth-material-content a {
    color: var(--mth-material-accent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

.mth-material-login-required,
.mth-material-empty {
    background: var(--mth-material-surface);
    border-left: 4px solid var(--mth-material-accent);
    padding: 1rem 1.25rem;
}

.mth-material-login-required p,
.mth-material-empty p {
    margin: 0;
}

.mth-material-login-required p + p {
    margin-top: 0.75rem;
}

.mth-material-login-link {
    color: var(--mth-material-accent);
    font-weight: 700;
}

@media (max-width: 600px) {
    .mth-material-tab {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .mth-material-tab,
    .mth-material-content a {
        transition: color 160ms ease, border-color 160ms ease;
    }
}