/*
|--------------------------------------------------------------------------
| TanksConnected stylesheet owner: tc-tools.css
|--------------------------------------------------------------------------
| Owner for public/tool UI:
| - quick tools calculators
| - Aquarium Cycle Coach / Cycle Coach dev
| - SEO landing embedded public tool panels
|
| Theme-ready rule:
| Components use central --tc-* tokens so future themes only change tokens.
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   1. Shared tool primitives
   ========================================================================== */

.tc-tool-surface,
.tc-quick-card,
.tcc-card,
.tcc-seo-intro,
.tc-public-tool,
.tc-compat-tool,
.tc-water-tool,
.tc-builder-tool {
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-xl);
    background:
        radial-gradient(circle at top left, var(--tc-accent-soft), transparent 24rem),
        linear-gradient(135deg, var(--tc-card-bg-strong), var(--tc-card-bg));
    box-shadow: var(--tc-shadow-card);
}

.tc-tool-kicker,
.tc-quick-kicker,
.tcc-kicker,
.tc-landing-kicker {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--tc-accent);
    font-size: .72rem;
    font-weight: var(--tc-weight-heavy);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.tc-tool-input,
.tc-quick-input-grid input,
.tcc-card input,
.tcc-card select,
.tc-public-input,
.tc-compat-input,
.tc-water-input,
.tc-builder-input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--tc-input-border);
    border-radius: var(--tc-radius-md);
    background: var(--tc-input-bg);
    color: var(--tc-input-text);
    outline: none;
    padding: .58rem .7rem;
}

.tc-tool-input:focus,
.tc-quick-input-grid input:focus,
.tcc-card input:focus,
.tcc-card select:focus,
.tc-public-input:focus,
.tc-compat-input:focus,
.tc-water-input:focus,
.tc-builder-input:focus {
    border-color: var(--tc-border-strong);
    box-shadow: 0 0 0 3px var(--tc-accent-soft);
}

.tc-tool-label,
.tc-quick-input-grid label,
.tcc-card label,
.tc-public-label,
.tc-compat-label,
.tc-water-label,
.tc-builder-label {
    display: grid;
    gap: .35rem;
    color: var(--tc-text-muted);
    font-size: .72rem;
    font-weight: var(--tc-weight-heavy);
    letter-spacing: .065em;
    text-transform: uppercase;
}

.tc-tool-button,
.tc-quick-btn,
.tcc-button,
.tc-qty-btn,
.tc-public-remove,
.tc-compat-remove {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1px solid var(--tc-button-border);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-button-bg);
    color: var(--tc-button-text);
    font-size: .86rem;
    font-weight: var(--tc-weight-heavy);
    text-decoration: none;
    padding: .5rem .85rem;
    cursor: pointer;
}

.tc-tool-button:hover,
.tc-tool-button:focus,
.tc-quick-btn:hover,
.tc-quick-btn:focus,
.tcc-button:hover,
.tcc-button:focus,
.tc-qty-btn:hover,
.tc-qty-btn:focus,
.tc-public-remove:hover,
.tc-public-remove:focus,
.tc-compat-remove:hover,
.tc-compat-remove:focus {
    color: var(--tc-button-text);
    box-shadow: var(--tc-shadow-glow);
}

.tc-quick-btn-ghost,
.tcc-button--ghost {
    border-color: var(--tc-border);
    background: var(--tc-surface-2);
    color: var(--tc-text-soft);
}

.tc-quick-btn-ghost:hover,
.tc-quick-btn-ghost:focus,
.tcc-button--ghost:hover,
.tcc-button--ghost:focus {
    color: var(--tc-heading);
    border-color: var(--tc-border-strong);
    background: var(--tc-accent-soft);
    box-shadow: none;
}

/* ==========================================================================
   2. Quick tools page
   ========================================================================== */

.tc-quick-tools-page {
    display: grid;
    gap: 1rem;
}

.tc-quick-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-xl);
    background:
        radial-gradient(circle at top left, var(--tc-accent-soft), transparent 26rem),
        linear-gradient(135deg, var(--tc-card-bg-strong), var(--tc-card-bg));
    box-shadow: var(--tc-shadow-card);
    padding: clamp(1rem, 2vw, 1.35rem);
}

.tc-quick-hero h1 {
    margin: .25rem 0 0;
    color: var(--tc-heading);
    font-size: clamp(1.3rem, 2.15vw, 1.85rem);
    font-weight: var(--tc-weight-heavy);
    letter-spacing: -.045em;
}

.tc-quick-hero p {
    max-width: 58rem;
    margin: .35rem 0 0;
    color: var(--tc-text-muted);
    line-height: 1.55;
}

.tc-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}

.tc-quick-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: .9rem;
    padding: 1rem;
}

.tc-quick-card-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

.tc-quick-card-head i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background: var(--tc-accent-soft);
    color: var(--tc-accent);
    font-size: 1.15rem;
}

.tc-quick-card-head h2 {
    margin: 0;
    color: var(--tc-heading);
    font-size: .98rem;
    font-weight: var(--tc-weight-heavy);
}

.tc-quick-card-head p {
    margin: .15rem 0 0;
    color: var(--tc-text-muted);
    font-size: .86rem;
    line-height: 1.45;
}

.tc-quick-input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.tc-quick-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.tc-quick-results > div {
    min-width: 0;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background: var(--tc-surface-glass);
    padding: .7rem;
}

.tc-quick-results span {
    display: block;
    color: var(--tc-text-faint);
    font-size: .68rem;
    font-weight: var(--tc-weight-heavy);
    letter-spacing: .065em;
    text-transform: uppercase;
}

.tc-quick-results strong {
    display: block;
    margin-top: .2rem;
    color: var(--tc-heading);
    font-size: .95rem;
    font-weight: var(--tc-weight-heavy);
}

.tc-quick-note {
    margin: 0;
    color: var(--tc-text-faint);
    font-size: .82rem;
    line-height: 1.45;
}

/* ==========================================================================
   3. Cycle Coach page shell
   ========================================================================== */

.tcc-page {
    display: grid;
    gap: 1rem;
}

.tcc-hero,
.tcc-seo-intro {
    padding: clamp(1rem, 2vw, 1.35rem);
}

.tcc-hero {
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-xl);
    background:
        radial-gradient(circle at top left, var(--tc-accent-soft), transparent 26rem),
        linear-gradient(135deg, var(--tc-card-bg-strong), var(--tc-card-bg));
    box-shadow: var(--tc-shadow-card);
}

.tcc-hero h1,
.tcc-seo-intro h2 {
    margin: .25rem 0 0;
    color: var(--tc-heading);
    font-weight: var(--tc-weight-heavy);
    letter-spacing: -.04em;
}

.tcc-hero h1 {
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
}

.tcc-seo-intro h2 {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.tcc-hero p,
.tcc-seo-intro p {
    max-width: 76rem;
    margin: .45rem 0 0;
    color: var(--tc-text-muted);
    line-height: 1.6;
}

.tcc-card {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.35rem);
}

.tcc-progress {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tcc-progress-item {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-surface-2);
    color: var(--tc-text-muted);
    font-size: .76rem;
    font-weight: var(--tc-weight-bold);
    padding: .35rem .65rem;
}

.tcc-progress-item.is-active {
    border-color: var(--tc-border-strong);
    background: var(--tc-accent-soft);
    color: var(--tc-heading);
}

.tcc-step {
    display: grid;
    gap: 1rem;
}

.tcc-step-head h2 {
    margin: .25rem 0 0;
    color: var(--tc-heading);
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    font-weight: var(--tc-weight-heavy);
}

.tcc-step-head p {
    max-width: 68rem;
    margin: .35rem 0 0;
    color: var(--tc-text-muted);
    line-height: 1.55;
}

.tcc-method-grid,
.tcc-form-grid,
.tcc-main-readings {
    display: grid;
    gap: .75rem;
}

.tcc-method-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tcc-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tcc-form-grid--three,
.tcc-main-readings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tcc-method-card,
.tcc-choice-card {
    min-width: 0;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background: var(--tc-card-bg);
    color: var(--tc-text-soft);
    text-align: left;
    padding: .85rem;
    cursor: pointer;
    transition:
        transform var(--tc-transition-fast),
        border-color var(--tc-transition-fast),
        background var(--tc-transition-fast);
}

.tcc-method-card:hover,
.tcc-method-card:focus,
.tcc-choice-card:hover,
.tcc-choice-card:focus,
.tcc-method-card.is-active {
    transform: translateY(-1px);
    border-color: var(--tc-border-strong);
    background: var(--tc-accent-soft);
}

.tcc-method-card strong {
    display: block;
    color: var(--tc-heading);
    font-weight: var(--tc-weight-heavy);
}

.tcc-method-card span {
    display: block;
    margin-top: .25rem;
    color: var(--tc-text-muted);
    font-size: .84rem;
    line-height: 1.45;
}

.tcc-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.tcc-choice-card {
    min-width: 110px;
    text-align: center;
    font-weight: var(--tc-weight-heavy);
}

.tcc-unsure-progress,
.tcc-detected-path,
.tcc-optional-block {
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background: var(--tc-surface-glass);
    color: var(--tc-text-muted);
    padding: .85rem;
}

.tcc-unsure-progress {
    display: grid;
    gap: .65rem;
    border-color: var(--tc-border-strong);
    background:
        linear-gradient(
            135deg,
            rgba(var(--tc-accent-rgb), .16),
            var(--tc-surface-glass)
        );
}

.tcc-unsure-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.tcc-unsure-progress-head .tcc-kicker {
    margin: 0;
}

.tcc-unsure-progress-head strong {
    flex: 0 0 auto;
    color: var(--tc-heading);
    font-size: .78rem;
    font-weight: var(--tc-weight-heavy);
}

.tcc-unsure-progress-track {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-pill);
    background: rgba(2, 6, 23, .62);
}

.tcc-unsure-progress-track span {
    display: block;
    width: 20%;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            var(--tc-accent),
            rgba(var(--tc-accent-rgb), .62)
        );
    box-shadow: 0 0 14px rgba(var(--tc-accent-rgb), .32);
    transition: width .22s ease;
}

.tcc-unsure-panel [data-unsure-question-content].is-changing {
    animation: tccUnsureQuestionIn .24s ease both;
}

@keyframes tccUnsureQuestionIn {
    from {
        opacity: .35;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tcc-unsure-panel [data-unsure-question-content].is-changing {
        animation: none;
    }

    .tcc-unsure-progress-track span {
        transition: none;
    }
}

.tcc-detected-path span {
    display: block;
    color: var(--tc-accent);
    font-size: .68rem;
    font-weight: var(--tc-weight-heavy);
    letter-spacing: .075em;
    text-transform: uppercase;
}

.tcc-detected-path strong {
    display: block;
    margin-top: .2rem;
    color: var(--tc-heading);
    font-size: .95rem;
}

.tcc-detected-path p,
.tcc-optional-block p {
    margin: .25rem 0 0;
    line-height: 1.5;
}

.tcc-optional-block summary {
    color: var(--tc-heading);
    font-weight: var(--tc-weight-heavy);
    cursor: pointer;
}

.tcc-main-readings label {
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background: var(--tc-card-bg);
    padding: .85rem;
}

.tcc-main-readings span {
    display: block;
    color: var(--tc-heading);
    font-size: .95rem;
    font-weight: var(--tc-weight-heavy);
    text-transform: none;
    letter-spacing: 0;
}

.tcc-main-readings small {
    display: block;
    color: var(--tc-text-faint);
    font-size: .72rem;
    font-weight: var(--tc-weight-semibold);
    margin-bottom: .45rem;
}

.tcc-step-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
}

/* ==========================================================================
   4. Public/SEO embedded tool support
   ========================================================================== */

.tc-guide-card,
.tc-guide-subcard,
.tc-common-search-card,
.tc-quicklink,
.tc-public-tool-panel,
.tc-compat-panel,
.tc-water-panel,
.tc-builder-panel {
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-xl);
    background: var(--tc-card-bg);
}

.tc-guide-card {
    background:
        radial-gradient(circle at top left, var(--tc-accent-soft), transparent 28rem),
        linear-gradient(135deg, var(--tc-card-bg-strong), var(--tc-card-bg));
    box-shadow: var(--tc-shadow-card);
}

.tc-guide-title {
    color: var(--tc-heading);
    font-weight: var(--tc-weight-heavy);
    letter-spacing: -.04em;
}

.tc-guide-lead,
.tc-guide-subtext,
.tc-guide-list,
.tc-common-search-list,
.tc-public-help,
.tc-compat-help,
.tc-water-help,
.tc-builder-help,
.tc-public-note,
.tc-water-note,
.tc-builder-note {
    color: var(--tc-text-muted);
}

.tc-guide-divider {
    border-color: var(--tc-border-soft);
    opacity: 1;
}

.tc-public-tool,
.tc-compat-tool,
.tc-water-tool,
.tc-builder-tool {
    padding: clamp(1rem, 2vw, 1.25rem);
}

.tc-public-tool-head,
.tc-compat-tool-head,
.tc-water-tool-head,
.tc-builder-tool-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.tc-public-tool-grid,
.tc-compat-grid,
.tc-water-grid,
.tc-builder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.tc-builder-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tc-public-tool-panel,
.tc-compat-panel,
.tc-water-panel,
.tc-builder-panel {
    padding: 1rem;
}

.tc-public-inline,
.tc-water-row,
.tc-builder-row,
.tc-qty-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    align-items: end;
}

.tc-public-inline {
    grid-template-columns: minmax(0, 1fr) auto;
}

.tc-public-unit {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-md);
    background: var(--tc-surface-glass);
    color: var(--tc-text-muted);
    padding: .55rem .7rem;
}

.tc-public-results,
.tc-compat-results {
    position: relative;
    display: grid;
    gap: .35rem;
    margin-top: .45rem;
}

.tc-public-result-item,
.tc-compat-result-item {
    width: 100%;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-md);
    background: var(--tc-card-bg);
    color: var(--tc-text-soft);
    text-align: left;
    padding: .55rem .7rem;
}

.tc-public-result-item:hover,
.tc-compat-result-item:hover {
    border-color: var(--tc-border-strong);
    background: var(--tc-accent-soft);
}

.tc-public-result-top,
.tc-compat-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.tc-public-result-label {
    color: var(--tc-text-faint);
    font-size: .72rem;
    font-weight: var(--tc-weight-heavy);
    letter-spacing: .065em;
    text-transform: uppercase;
}

.tc-public-status,
.tc-public-score {
    color: var(--tc-heading);
    font-weight: var(--tc-weight-heavy);
}

.tc-public-score {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
}

.tc-public-meter {
    height: 12px;
    overflow: hidden;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-card-bg);
    margin: .85rem 0;
}

.tc-public-meter-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--tc-accent), var(--tc-info));
}

.tc-public-stats,
.tc-water-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.tc-public-stats > div,
.tc-water-result,
.tc-builder-result {
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background: var(--tc-surface-glass);
    padding: .7rem;
}

.tc-public-empty,
.tc-compat-empty,
.tc-public-warning,
.tc-compat-warning,
.tc-water-warning {
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-md);
    background: var(--tc-surface-glass);
    color: var(--tc-text-muted);
    padding: .65rem;
}

.tc-public-warning,
.tc-compat-warning,
.tc-water-warning {
    border-color: rgba(245, 158, 11, .35);
    background: var(--tc-warning-soft);
    color: #fde68a;
}

.tc-compat-good {
    border-color: rgba(34, 197, 94, .35);
    background: var(--tc-success-soft);
    color: #bbf7d0;
}

.tc-public-fish-row,
.tc-compat-fish-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    border-bottom: 1px solid var(--tc-border-soft);
    padding: .55rem 0;
}

.tc-public-cta {
    margin-top: 1rem;
}

/* ==========================================================================
   5. Responsive
   ========================================================================== */

@media (max-width: 1199.98px) {
    .tc-quick-grid,
    .tcc-method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 991.98px) {
    .tc-quick-hero,
    .tc-public-tool-head,
    .tc-compat-tool-head,
    .tc-water-tool-head,
    .tc-builder-tool-head {
        display: grid;
    }

    .tc-public-tool-grid,
    .tc-compat-grid,
    .tc-water-grid,
    .tcc-form-grid--two,
    .tcc-form-grid--three,
    .tcc-main-readings {
        grid-template-columns: 1fr;
    }

    .tcc-step-actions {
        justify-content: stretch;
    }

    .tcc-step-actions .tcc-button {
        flex: 1 1 auto;
    }
}

@media (max-width: 575.98px) {
    .tc-quick-grid,
    .tc-quick-input-grid,
    .tc-quick-results,
    .tc-public-stats,
    .tc-water-result-grid,
    .tc-public-inline,
    .tc-water-row,
    .tc-builder-row,
    .tc-qty-row,
    .tcc-method-grid {
        grid-template-columns: 1fr;
    }

    .tc-quick-hero,
    .tc-quick-card,
    .tcc-card,
    .tcc-hero,
    .tcc-seo-intro,
    .tc-public-tool,
    .tc-compat-tool,
    .tc-water-tool,
    .tc-builder-tool {
        border-radius: var(--tc-radius-lg);
    }

    .tcc-progress {
        display: grid;
    }

    .tcc-choice-row {
        display: grid;
    }
}

/* ==========================================================================
   6. Public SEO tool spacing refinement
   ========================================================================== */

.tc-guide-card {
    padding: clamp(1rem, 2vw, 1.5rem);
}

.tc-guide-inner {
    display: grid;
    gap: 1.15rem;
}

.tc-guide-card .row {
    row-gap: 1rem;
}

.tc-landing-kicker {
    margin-bottom: .55rem;
}

.tc-guide-title,
.tc-guide-lead,
.tc-guide-subtext {
    margin-top: 0;
}

.tc-common-search-card,
.tc-guide-subcard,
.tc-quicklink {
    padding: 1rem;
}

.tc-common-search-card {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.tc-common-search-card h2,
.tc-guide-subcard h2,
.tc-guide-subcard h3,
.tc-public-tool h2,
.tc-compat-tool h2,
.tc-water-tool h2,
.tc-builder-tool h2 {
    margin-top: 0;
    color: var(--tc-heading);
    font-weight: var(--tc-weight-heavy);
}

.tc-common-search-list,
.tc-guide-list {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.tc-common-search-list li,
.tc-guide-list li {
    margin-bottom: .35rem;
}

.tc-public-tool,
.tc-compat-tool,
.tc-water-tool,
.tc-builder-tool {
    margin-top: 1.15rem;
    margin-bottom: 1.15rem;
}

.tc-public-tool-panel,
.tc-compat-panel,
.tc-water-panel,
.tc-builder-panel {
    display: grid;
    align-content: start;
    gap: .8rem;
}

.tc-public-field,
.tc-selected-fish-box,
.tc-public-fish-list,
.tc-public-warnings,
.tc-compat-list,
.tc-compat-warnings {
    display: grid;
    gap: .55rem;
}

.tc-selected-fish-box {
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background: var(--tc-surface-glass);
    padding: .8rem;
}

.tc-public-fish-list,
.tc-compat-list {
    margin-top: .25rem;
}

.tc-public-cta,
.tc-builder-result,
.tc-public-extra {
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background:
        radial-gradient(circle at top left, var(--tc-accent-soft), transparent 18rem),
        var(--tc-surface-glass);
    padding: .9rem;
}

.tc-public-cta h3,
.tc-public-cta strong,
.tc-builder-result strong {
    color: var(--tc-heading);
}

.tc-public-cta p,
.tc-builder-result p,
.tc-public-extra-inner {
    margin-bottom: 0;
    color: var(--tc-text-muted);
    line-height: 1.55;
}

.tc-public-warning + .tc-public-warning,
.tc-compat-warning + .tc-compat-warning {
    margin-top: .45rem;
}

.tc-public-extra {
    margin-top: 1rem;
}

.tc-public-extra summary {
    color: var(--tc-heading);
    font-weight: var(--tc-weight-heavy);
    cursor: pointer;
}

.tc-public-extra-inner {
    margin-top: .75rem;
}

/* Keep embedded Bootstrap buttons visually aligned with the tool module */
.tc-guide-card .btn {
    border-radius: var(--tc-radius-pill);
    font-weight: var(--tc-weight-bold);
}

@media (max-width: 575.98px) {
    .tc-guide-card {
        padding: .85rem;
    }

    .tc-common-search-card,
    .tc-guide-subcard,
    .tc-public-tool-panel,
    .tc-compat-panel,
    .tc-water-panel,
    .tc-builder-panel,
    .tc-public-cta {
        padding: .85rem;
    }
}

/* ==========================================================================
   7. Public tool CTA layout refinement
   ========================================================================== */

.tc-public-cta {
    display: grid;
    grid-template-columns: minmax(130px, .28fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    margin-top: .9rem;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background:
        radial-gradient(circle at top left, var(--tc-accent-soft), transparent 18rem),
        var(--tc-surface-glass);
    padding: .9rem;
}

.tc-public-cta > strong {
    display: block;
    color: var(--tc-heading);
    line-height: 1.25;
}

.tc-public-cta > span,
.tc-public-cta > p {
    margin: 0;
    color: var(--tc-text-soft);
    line-height: 1.5;
}

.tc-public-cta-actions,
.tc-public-cta > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
}

.tc-public-cta .btn {
    white-space: nowrap;
}

  .tc-public-next-step {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: .9rem;
      margin-top: .9rem;
      border: 1px solid var(--tc-border-strong);
      border-radius: var(--tc-radius-lg);
      background:
          radial-gradient(circle at top left, var(--tc-accent-soft), transparent 18rem),
          linear-gradient(135deg, var(--tc-surface-glass), var(--tc-card-bg));
      padding: .95rem;
  }

  .tc-public-next-step[hidden] {
      display: none !important;
  }

  .tc-public-next-step-kicker {
      display: inline-flex;
      width: fit-content;
      margin-bottom: .35rem;
      border: 1px solid var(--tc-border-strong);
      border-radius: var(--tc-radius-pill);
      background: var(--tc-accent-soft);
      color: var(--tc-accent);
      padding: .18rem .5rem;
      font-size: .62rem;
      font-weight: var(--tc-weight-heavy);
      letter-spacing: .08em;
      text-transform: uppercase;
  }

  .tc-public-next-step strong {
      display: block;
      color: var(--tc-heading);
      line-height: 1.25;
  }

  .tc-public-next-step p {
      margin: .35rem 0 0;
      color: var(--tc-text-soft);
      line-height: 1.5;
  }

  .tc-public-next-step-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: .45rem;
  }

  .tc-public-next-step .btn {
      white-space: nowrap;
  }

@media (max-width: 991.98px) {
    .tc-public-cta {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .tc-public-cta-actions,
    .tc-public-cta > div:last-child {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   8. Cycle Coach form control refinement
   ========================================================================== */

.tcc-card select,
.tcc-card input {
    font-weight: var(--tc-weight-semibold);
}

.tcc-card select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--tc-text-muted) 50%),
        linear-gradient(135deg, var(--tc-text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.4rem;
}

.tcc-card option {
    background: var(--tc-panel-bg);
    color: var(--tc-text);
    font-weight: 750;
}

.tcc-card option:checked {
    background: var(--tc-accent);
    color: var(--tc-accent-contrast);
}

.tcc-confidence-step .tcc-form-grid {
    align-items: start;
}

.tcc-confidence-step label,
.tcc-confidence-step select {
    min-width: 0;
}

/* ==========================================================================
   9. Cycle Coach generated UI: select cards, results and test tubes
   ========================================================================== */

.tcc-select-card-group {
    display: grid;
    gap: .5rem;
    margin-top: .55rem;
}

.tcc-select-card {
    width: 100%;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-md);
    background: var(--tc-card-bg);
    color: var(--tc-text-soft);
    text-align: left;
    padding: .6rem .7rem;
    cursor: pointer;
    transition:
        border-color var(--tc-transition-fast),
        background var(--tc-transition-fast),
        transform var(--tc-transition-fast);
}

.tcc-select-card:hover,
.tcc-select-card:focus,
.tcc-select-card.is-active {
    border-color: var(--tc-border-strong);
    background: var(--tc-accent-soft);
    color: var(--tc-heading);
    transform: translateY(-1px);
}

.tcc-select-card strong {
    display: block;
    color: var(--tc-heading);
    font-size: .82rem;
    font-weight: var(--tc-weight-heavy);
}

.tcc-select-card span {
    display: block;
    margin-top: .2rem;
    color: var(--tc-text-muted);
    font-size: .76rem;
    line-height: 1.4;
}

.tcc-collapsed-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background: var(--tc-surface-glass);
    padding: .75rem .85rem;
}

.tcc-collapsed-summary strong {
    display: block;
    color: var(--tc-heading);
    font-weight: var(--tc-weight-heavy);
}

.tcc-collapsed-summary span {
    display: block;
    margin-top: .15rem;
    color: var(--tc-text-muted);
    font-size: .84rem;
}

.tcc-result {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-xl);
    background:
        radial-gradient(circle at top left, var(--tc-accent-soft), transparent 24rem),
        linear-gradient(135deg, var(--tc-card-bg-strong), var(--tc-card-bg));
    box-shadow: var(--tc-shadow-card);
    padding: clamp(1rem, 2vw, 1.25rem);
}

.tcc-result-main,
.tcc-stage-card,
.tcc-result-section,
.tcc-tube-panel,
.tcc-tube-note,
.tcc-supplies-card {
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background: var(--tc-surface-glass);
    padding: .9rem;
}

.tcc-result-main strong,
.tcc-stage-card strong,
.tcc-result-section h3,
.tcc-tube-panel-head span,
.tcc-supplies-head strong {
    display: block;
    color: var(--tc-heading);
    font-weight: var(--tc-weight-heavy);
}

.tcc-result-main p,
.tcc-stage-card p,
.tcc-result-section p,
.tcc-tube-note,
.tcc-supplies-card p,
.tcc-muted {
    color: var(--tc-text-muted);
    line-height: 1.55;
}

.tcc-tube-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.tcc-tube-panel {
    display: grid;
    gap: .85rem;
}

.tcc-tube-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.tcc-tube-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.tcc-tube-card {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: .55rem;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background: var(--tc-surface-2);
    padding: .7rem;
}

.tcc-tube-shine {
    position: absolute;
    top: .35rem;
    left: .45rem;
    width: .55rem;
    height: calc(100% - .7rem);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.36), transparent);
    opacity: .55;
}

.tcc-tube-meta {
    min-width: 0;
    text-align: center;
}

.tcc-tube-meta strong {
    display: block;
    color: var(--tc-heading);
    font-size: .82rem;
    font-weight: var(--tc-weight-heavy);
}

.tcc-tube-meta span {
    display: block;
    margin-top: .2rem;
    color: var(--tc-text-muted);
    font-size: .76rem;
    line-height: 1.3;
}

.tcc-result-section {
    display: grid;
    gap: .55rem;
}

.tcc-result-section ul,
.tcc-supplies-card ul,
.tcc-columns ul {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--tc-text-muted);
}

.tcc-result-section li,
.tcc-supplies-card li,
.tcc-columns li {
    margin-bottom: .35rem;
}

.tcc-result-section li[data-severity="high"] {
    color: #fecaca;
}

.tcc-result-section li[data-severity="medium"] {
    color: #fde68a;
}

.tcc-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.tcc-columns article {
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-lg);
    background: var(--tc-card-bg);
    padding: .85rem;
}

.tcc-columns h3 {
    margin-top: 0;
    color: var(--tc-heading);
    font-size: .98rem;
    font-weight: var(--tc-weight-heavy);
}

.tcc-expected-guidance p {
    margin: 0;
    color: var(--tc-text-muted);
    line-height: 1.55;
}

@media (max-width: 1199.98px) {
    .tcc-tube-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .tcc-tube-grid,
    .tcc-columns {
        grid-template-columns: 1fr;
    }

    .tcc-collapsed-summary {
        display: grid;
    }

    .tcc-tube-card {
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        text-align: left;
    }

    .tcc-tube-meta {
        text-align: left;
    }
}

/* ==========================================================================
   10. Cycle Coach select-card ownership and API tube colour scale
   ========================================================================== */

.tcc-native-select-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}

.tcc-result--danger {
    border-color: rgba(239, 68, 68, .42);
}

.tcc-result--caution {
    border-color: rgba(245, 158, 11, .42);
}

.tcc-result--calm {
    border-color: rgba(34, 197, 94, .32);
}

/* ==========================================================================
   11. Tool module scale refinement
   ========================================================================== */

.tc-quick-tools-page,
.tcc-page,
.tc-guide-card,
.tc-public-tool,
.tc-compat-tool,
.tc-water-tool,
.tc-builder-tool {
    font-size: calc(1rem * var(--tc-tool-scale));
}

.tcc-page {
    gap: .75rem;
}

.tcc-hero,
.tcc-seo-intro,
.tcc-card,
.tc-quick-hero,
.tc-quick-card,
.tc-public-tool,
.tc-compat-tool,
.tc-water-tool,
.tc-builder-tool,
.tc-guide-card {
    padding: clamp(.8rem, 1.35vw, 1.1rem);
}

.tcc-hero h1 {
    font-size: clamp(1.45rem, 2.55vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.tcc-seo-intro h2,
.tcc-step-head h2,
.tc-common-search-card h2,
.tc-guide-subcard h2,
.tc-guide-subcard h3,
.tc-public-tool h2,
.tc-compat-tool h2,
.tc-water-tool h2,
.tc-builder-tool h2 {
    font-size: clamp(1.05rem, 1.45vw, 1.28rem);
    line-height: 1.18;
    letter-spacing: -.02em;
}

.tcc-hero p,
.tcc-seo-intro p,
.tcc-step-head p,
.tc-guide-lead,
.tc-guide-subtext,
.tc-public-help,
.tc-compat-help,
.tc-water-help,
.tc-builder-help {
    font-size: .92em;
    line-height: 1.5;
}

.tcc-kicker,
.tc-tool-kicker,
.tc-quick-kicker,
.tc-landing-kicker,
.tc-tool-label,
.tc-quick-input-grid label,
.tcc-card label,
.tc-public-label,
.tc-compat-label,
.tc-water-label,
.tc-builder-label {
    font-size: .62rem;
    letter-spacing: .055em;
}

.tcc-progress {
    gap: .35rem;
}

.tcc-progress-item {
    min-height: 24px;
    font-size: .64rem;
    padding: .24rem .5rem;
}

.tcc-card {
    gap: .7rem;
}

.tcc-step {
    gap: .75rem;
}

.tcc-supplies-card,
.tcc-detected-path,
.tcc-optional-block,
.tcc-result-main,
.tcc-stage-card,
.tcc-result-section,
.tcc-tube-panel,
.tcc-tube-note,
.tc-public-tool-panel,
.tc-compat-panel,
.tc-water-panel,
.tc-builder-panel {
    padding: .7rem;
}

.tcc-supplies-head strong,
.tcc-method-card strong,
.tcc-detected-path strong,
.tcc-main-readings span,
.tcc-result-main strong,
.tcc-stage-card strong,
.tcc-result-section h3,
.tcc-tube-panel-head span,
.tc-quick-card-head h2,
.tc-public-cta strong {
    font-size: .92rem;
    line-height: 1.2;
}

.tcc-supplies-card p,
.tcc-supplies-card li,
.tcc-detected-path p,
.tcc-method-card span,
.tcc-result-section li,
.tcc-result-section p,
.tcc-stage-card p,
.tcc-tube-note,
.tcc-muted,
.tc-quick-card-head p,
.tc-quick-note,
.tc-public-note,
.tc-water-note,
.tc-builder-note {
    font-size: .82rem;
    line-height: 1.45;
}

.tcc-select-card {
    padding: .46rem .6rem;
}

.tcc-select-card strong {
    font-size: .76rem;
}

.tcc-select-card span {
    font-size: .7rem;
}

.tcc-button,
.tc-tool-button,
.tc-quick-btn,
.tc-qty-btn,
.tc-public-remove,
.tc-compat-remove {
    min-height: 34px;
    font-size: .78rem;
    padding: .38rem .7rem;
}

.tcc-result {
    gap: .55rem;
    padding: .62rem;
}

.tcc-result-hero {
    padding: .52rem .62rem;
}

.tcc-result-hero strong {
    font-size: .92rem;
}

.tcc-confidence-pill {
    min-height: 24px;
    font-size: .58rem;
    padding: .2rem .45rem;
}

.tcc-tube-layout {
    gap: .45rem;
}

.tcc-tube-grid {
    gap: .35rem;
}

.tcc-tube-card {
    padding: .38rem;
    gap: .32rem;
}

.tcc-tube-meta span {
    font-size: .56rem;
}

.tcc-tube-meta strong {
    font-size: .66rem;
}

.tc-public-score {
    font-size: clamp(1.3rem, 3vw, 2rem);
}

.tc-public-stats > div,
.tc-water-result,
.tc-builder-result,
.tc-public-empty,
.tc-compat-empty,
.tc-public-warning,
.tc-compat-warning,
.tc-water-warning {
    padding: .55rem;
}

@media (max-width: 575.98px) {
    .tc-quick-tools-page,
    .tcc-page,
    .tc-guide-card,
    .tc-public-tool,
    .tc-compat-tool,
    .tc-water-tool,
    .tc-builder-tool {
        font-size: .9rem;
    }
}

/* ==========================================================================
   12. Cycle Coach result hero and API popover refinement
   ========================================================================== */

.tcc-result-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.tcc-result-hero > div:first-child {
    min-width: 0;
    display: grid;
    gap: .12rem;
}

.tcc-result-hero .tcc-kicker {
    display: block;
    line-height: 1;
}

.tcc-result-hero strong {
    display: block;
    color: var(--tc-heading);
    font-size: .95rem;
    line-height: 1.18;
    font-weight: var(--tc-weight-bold);
}

.tcc-confidence-pill {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* API colour guide v2: actual markup emitted by dev-page.js */
.tcc-tube-note {
    position: relative;
    overflow: visible;
    padding-right: 11rem;
}

.tcc-api-popover-v2 {
    position: absolute;
    top: .5rem;
    right: .6rem;
    z-index: 80;
    width: auto;
    margin: 0;
    border: 0;
    background: transparent;
    padding: 0;
}

.tcc-api-popover-v2 summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 28px;
    border: 1px solid var(--tc-border-strong);
    border-radius: var(--tc-radius-pill);
    background: rgba(var(--tc-accent-rgb), .14);
    color: var(--tc-heading);
    font-size: .62rem;
    font-weight: var(--tc-weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .28rem .55rem;
    cursor: pointer;
}

.tcc-api-popover-v2 summary::-webkit-details-marker {
    display: none;
}

.tcc-api-popover-v2 summary::before {
    content: "?";
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: rgba(var(--tc-accent-rgb), .22);
    color: var(--tc-accent);
    font-size: .68rem;
    font-weight: var(--tc-weight-heavy);
}

.tcc-api-popover-v2-body {
    display: none;
}

.tcc-api-popover-v2[open] .tcc-api-popover-v2-body {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    display: grid;
    gap: .55rem;
    width: min(460px, calc(100vw - 2rem));
    border: 1px solid var(--tc-border-strong);
    border-radius: var(--tc-radius-lg);
    background:
        radial-gradient(circle at top left, var(--tc-accent-soft), transparent 18rem),
        rgba(2, 6, 23, .96);
    box-shadow: var(--tc-shadow-card);
    padding: .75rem;
}

.tcc-api-popover-v2-body p {
    margin: 0;
    color: var(--tc-text-soft);
    font-size: .72rem;
    line-height: 1.45;
}

.tcc-api-popover-v2-row {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: .55rem;
    align-items: center;
    border-top: 1px solid var(--tc-border-soft);
    padding-top: .42rem;
}

.tcc-api-popover-v2-row strong {
    color: var(--tc-heading);
    font-size: .68rem;
    font-weight: var(--tc-weight-bold);
}

.tcc-api-popover-v2-row > div {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.tcc-api-popover-v2-swatch {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-pill);
    background: rgba(15, 23, 42, .72);
    color: var(--tc-text-soft);
    font-size: .62rem;
    font-weight: var(--tc-weight-semibold);
    padding: .16rem .35rem;
}

.tcc-api-popover-v2-swatch i {
    display: block;
    width: .72rem;
    height: .72rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.tcc-api-popover-v2-swatch em {
    font-style: normal;
}

/* Swatch colours used by renderApiColourGuide() */
.tcc-api-popover-v2-swatch .api-ammonia-0 { background: #e6c933; }
.tcc-api-popover-v2-swatch .api-ammonia-025 { background: #bfca3d; }
.tcc-api-popover-v2-swatch .api-ammonia-05 { background: #8db64b; }
.tcc-api-popover-v2-swatch .api-ammonia-1 { background: #5daa58; }

.tcc-api-popover-v2-swatch .api-nitrite-0 { background: #94d0d0; }
.tcc-api-popover-v2-swatch .api-nitrite-025 { background: #b7a3d2; }
.tcc-api-popover-v2-swatch .api-nitrite-05 { background: #9e78bf; }
.tcc-api-popover-v2-swatch .api-nitrite-1 { background: #8954a5; }

.tcc-api-popover-v2-swatch .api-nitrate-0 { background: #dfc83a; }
.tcc-api-popover-v2-swatch .api-nitrate-5 { background: #dca33b; }
.tcc-api-popover-v2-swatch .api-nitrate-20 { background: #c96733; }
.tcc-api-popover-v2-swatch .api-nitrate-40 { background: #bc473f; }
.tcc-api-popover-v2-swatch .api-nitrate-80 { background: #a83244; }

@media (max-width: 767.98px) {
    .tcc-result-hero {
        display: grid;
    }

    .tcc-tube-note {
        padding-right: .7rem;
    }

    .tcc-api-popover-v2 {
        position: static;
        margin-top: .55rem;
    }

    .tcc-api-popover-v2[open] .tcc-api-popover-v2-body {
        position: static;
        width: 100%;
        margin-top: .55rem;
    }
}

/* ==========================================================================
   13. Cycle Coach progress rail refinement
   ========================================================================== */

.tcc-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
    width: 100%;
    margin-bottom: .65rem;
}

.tcc-progress-item {
    min-width: 0;
    min-height: 30px;
    justify-content: center;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-pill);
    background: rgba(2, 6, 23, .52);
    color: var(--tc-text-muted);
    font-size: .62rem;
    font-weight: var(--tc-weight-bold);
    letter-spacing: .055em;
    text-transform: uppercase;
    padding: .32rem .55rem;
}

.tcc-progress-item.is-complete,
.tcc-progress-item.is-active {
    border-color: var(--tc-border-strong);
    background:
        linear-gradient(135deg, rgba(var(--tc-accent-rgb), .18), rgba(2, 6, 23, .52));
    color: var(--tc-heading);
    box-shadow: inset 0 0 0 1px rgba(var(--tc-accent-rgb), .08);
}

.tcc-progress-item.is-complete::before {
    content: "✓";
    margin-right: .28rem;
    color: var(--tc-accent);
    font-weight: var(--tc-weight-heavy);
}

.tcc-progress-item.is-active {
    background:
        linear-gradient(135deg, rgba(var(--tc-accent-rgb), .22), rgba(15, 23, 42, .58));
}

@media (max-width: 575.98px) {
    .tcc-progress {
        grid-template-columns: 1fr 1fr;
    }

    .tcc-progress-item {
        min-height: 28px;
        font-size: .58rem;
    }
}

/* ==========================================================================
   14. Cycle Coach final test tube shape and API colour lock
   ========================================================================== */

.tcc-tube-shell {
    width: 42px;
    height: 92px;
    margin: 0 auto .4rem;
    display: grid;
    place-items: end center;
}


/* Liquid should sit at the bottom of the tube with a flatter surface, not look like a falling capsule. */
.tcc-tube-glass {
    position: relative;
    width: 30px;
    height: 82px;
    display: flex;
    align-items: flex-end;
    border: 2px solid rgba(191, 219, 254, .34);
    border-top: 0;
    border-radius: 0 0 999px 999px;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.03) 35%,
            rgba(255,255,255,.08) 72%,
            rgba(255,255,255,.02)
        );
    box-shadow:
        inset 0 0 10px rgba(255,255,255,.08),
        0 8px 18px rgba(15,23,42,.18);
    overflow: hidden;
}

.tcc-tube-liquid {
    width: 100%;
}

.tcc-tube-glass::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid rgba(191, 219, 254, .34);
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}


.tcc-tube-liquid {
    position: relative;
    align-self: flex-end;
    min-height: 8%;
    border-radius: 0 0 999px 999px;
    overflow: hidden;
}

.tcc-tube-liquid::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 0;
    height: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,.30);
    opacity: .7;
}


.tcc-tube-card--unknown .tcc-tube-liquid {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(148, 163, 184, .36) 0,
            rgba(148, 163, 184, .36) 6px,
            rgba(51, 65, 85, .42) 6px,
            rgba(51, 65, 85, .42) 12px
        );
}

/* Final API colour lock. These live late so real reading colours beat generic target/status colours. */
.tcc-tube-card--api-ammonia-0 .tcc-tube-liquid {
    background: linear-gradient(180deg, #f5df4d, #e6c933);
}

.tcc-tube-card--api-ammonia-025 .tcc-tube-liquid {
    background: linear-gradient(180deg, #d9df4f, #bfca3d);
}

.tcc-tube-card--api-ammonia-05 .tcc-tube-liquid {
    background: linear-gradient(180deg, #aacb57, #8db64b);
}

.tcc-tube-card--api-ammonia-1 .tcc-tube-liquid {
    background: linear-gradient(180deg, #78bd60, #5daa58);
}

.tcc-tube-card--api-ammonia-2 .tcc-tube-liquid {
    background: linear-gradient(180deg, #37ae7b, #26966e);
}

.tcc-tube-card--api-ammonia-4 .tcc-tube-liquid {
    background: linear-gradient(180deg, #159f8d, #0c7f73);
}

.tcc-tube-card--api-ammonia-8 .tcc-tube-liquid {
    background: linear-gradient(180deg, #087768, #075a50);
}

.tcc-tube-card--api-nitrite-0 .tcc-tube-liquid {
    background: linear-gradient(180deg, #bde8e5, #94d0d0);
}

.tcc-tube-card--api-nitrite-025 .tcc-tube-liquid {
    background: linear-gradient(180deg, #cec0e3, #b7a3d2);
}

.tcc-tube-card--api-nitrite-05 .tcc-tube-liquid {
    background: linear-gradient(180deg, #b894d1, #9e78bf);
}

.tcc-tube-card--api-nitrite-1 .tcc-tube-liquid {
    background: linear-gradient(180deg, #a86fc0, #8954a5);
}

.tcc-tube-card--api-nitrite-2 .tcc-tube-liquid {
    background: linear-gradient(180deg, #c060a5, #a4448d);
}

.tcc-tube-card--api-nitrite-5 .tcc-tube-liquid {
    background: linear-gradient(180deg, #d45a96, #b83c7a);
}

.tcc-tube-card--api-nitrate-0 .tcc-tube-liquid {
    background: linear-gradient(180deg, #efe24e, #dfc83a);
}

.tcc-tube-card--api-nitrate-5 .tcc-tube-liquid {
    background: linear-gradient(180deg, #efc64b, #dca33b);
}

.tcc-tube-card--api-nitrate-10 .tcc-tube-liquid {
    background: linear-gradient(180deg, #e9a34b, #d98236);
}

.tcc-tube-card--api-nitrate-20 .tcc-tube-liquid {
    background: linear-gradient(180deg, #df8046, #c96733);
}

.tcc-tube-card--api-nitrate-40 .tcc-tube-liquid {
    background: linear-gradient(180deg, #d65d52, #bc473f);
}

.tcc-tube-card--api-nitrate-80 .tcc-tube-liquid {
    background: linear-gradient(180deg, #c94257, #a83244);
}

.tcc-tube-card--api-nitrate-160 .tcc-tube-liquid {
    background: linear-gradient(180deg, #9b2541, #741b31);
}

/* Expected nitrate present/rising should look nitrate-ish, not clean-water blue. */
.tcc-tube-card--target-present .tcc-tube-liquid {
    background: linear-gradient(180deg, #df8046, #c96733);
}

.tcc-tube-card--target-controlled .tcc-tube-liquid,
.tcc-tube-card--target-watch .tcc-tube-liquid {
    background: linear-gradient(180deg, #efc64b, #dca33b);
}

/* ==========================================================================
   15. Public tool intro compression
   ========================================================================== */

/*
   Shared public calculator/checker pages use .tc-guide-card and .tc-guide-subcard
   before the real tool. Keep the SEO content, but stop it pushing the tool below
   the first screen.
*/

.tc-card-large.tc-guide-card {
    padding: clamp(1rem, 1.7vw, 1.45rem);
}

.tc-card-large.tc-guide-card h1 {
    max-width: 980px;
    font-size: clamp(1.45rem, 2.15vw, 2.15rem);
    line-height: 1.05;
    letter-spacing: -.025em;
    margin-bottom: .55rem;
}

.tc-card-large.tc-guide-card > p {
    max-width: 1040px;
    margin-bottom: .45rem;
    font-size: .84rem;
    line-height: 1.45;
}

.tc-card-large.tc-guide-card .tc-guide-subcard {
    padding: .75rem .85rem;
    margin-block: .65rem;
}

.tc-card-large.tc-guide-card .tc-guide-subcard h2,
.tc-card-large.tc-guide-card .tc-guide-subcard h3 {
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.18;
    margin-bottom: .35rem;
}

.tc-card-large.tc-guide-card .tc-guide-subcard p,
.tc-card-large.tc-guide-card .tc-guide-subcard li {
    font-size: .8rem;
    line-height: 1.4;
}

.tc-card-large.tc-guide-card .tc-guide-subcard ul {
    margin-block: .45rem 0;
    columns: 2;
    column-gap: 2rem;
}

.tc-card-large.tc-guide-card .tc-guide-actions,
.tc-card-large.tc-guide-card .d-flex.flex-wrap.gap-2 {
    margin-top: .7rem;
}

.tc-card-large.tc-guide-card hr {
    margin-block: .95rem;
}

.tc-card-large.tc-guide-card + .tc-public-tool,
.tc-card-large.tc-guide-card + .tc-compat-tool,
.tc-card-large.tc-guide-card + .tc-water-tool,
.tc-card-large.tc-guide-card + .tc-builder-tool {
    margin-top: .9rem;
}

@media (max-width: 767.98px) {
    .tc-card-large.tc-guide-card .tc-guide-subcard ul {
        columns: 1;
    }

    .tc-card-large.tc-guide-card {
        padding: .9rem;
    }
}