/* ==========================
Tool Hero Band — teal
Shared across all tool pages
============================= */
.tool-hero {
    background-color: var(--color-teal);
    width: 100%;
    border-bottom: 1px solid var(--color-teal-border);
}
 
.tool-hero h1 {
    margin-bottom: 12px;
}
 
.tool-hero .subtitle {
    max-width: 680px;
    margin-bottom: 24px;
}
 
/* Subtitle + Article link in a row */
.tool-hero-subtitle-row {
    display: flex;
    align-items: center;
    gap: 100px;
    flex-wrap: wrap;
}

.tool-hero-subtitle-row .subtitle {
    flex: 1 1 400px;
    margin-bottom: 0;
}

.tool-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 4px;
}

.tool-article-card-inner {
    padding: 20px 24px;
}

.tool-article-card-inner h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.tool-article-card-inner p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 14px;
}
/* Download buttons */
.tool-hero-actions button {
    margin: 0;
}
 
/* ==========================
Work Band — white
Table + chart section, shared across all tool pages
============================= */
.tool-work-band {
    background-color: var(--color-white);
    width: 100%;
}
 
.tool-work-band .home-section-inner {
    padding-bottom: 60px;
}
 
/* ==========================
Table + Chart Layout
Shared across all tool pages
============================= */
.main-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-height: 600px;
    gap: 0;
    align-items: flex-start;
}
 
.table-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 350px;
    min-width: 200px;
    max-width: 100%;
    height: 100%;
    align-self: stretch;
}
 
.flex-gap {
    flex: 0 0 20px;
}
 
/* ==========================
Legend Band — teal-light
Shared across all tool pages
============================= */
.tool-legend-band {
    background-color: var(--color-teal-light);
    width: 100%;
    border-top: 1px solid var(--color-teal-border);
    border-bottom: 1px solid var(--color-teal-border);
}
 
.tool-legend-band .legend-box {
    margin-top: 0;
}
 
/* ==========================
References Band — white
Shared across all tool pages
============================= */
.tool-references-band {
    background-color: var(--color-white);
    width: 100%;
}
 
.tool-references-band .references {
    margin-top: 0;
    margin-bottom: 0;
}
 
/* ==========================
Responsive — Tablet
============================= */
@media (max-width: 1024px) {
 
    .main-container {
        flex-direction: column;
        height: auto;
        min-height: unset;
    }
 
    .table-panel {
        max-width: 100%;
        width: 100%;
        height: auto;
        max-height: none;
    }
 
    .flex-gap {
        display: none;
    }
 
    .tool-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}