/* ==== Article with a tool in it ========================================== */

.kelo-article { padding: 2.5rem 0 1rem; }
.kelo-article__lead { font-size: 1.08rem; color: var(--body); }

.kelo-worked {
    margin: 1.6rem 0;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--paper-warm);
}

.kelo-worked figcaption { font-weight: 600; color: var(--ink); margin-bottom: 0.7rem; }
.kelo-worked table { border-collapse: collapse; margin-bottom: 0.8rem; }
.kelo-worked th, .kelo-worked td {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--line-soft);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.kelo-worked thead th { background: var(--sand); }
.kelo-worked tbody th { text-align: left; color: var(--soft); font-weight: 500; }
.kelo-worked p { margin: 0; font-size: 0.95rem; }

.kelo-tool {
    margin: 2rem 0 2.5rem;
    padding: 1.6rem 1.7rem 1.8rem;
    border: 1px solid var(--pine-pale);
    border-radius: var(--r-lg);
    background: var(--pine-wash);
}

.kelo-tool h2 { margin: 0 0 0.3rem; }
.kelo-tool__note { margin: 0 0 1.3rem; font-size: 0.88rem; color: var(--soft); }
.kelo-tool__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.kelo-tool__panel {
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--paper);
}

.kelo-tool__panel h3 { margin: 0 0 0.9rem; font-size: 1rem; }
.kelo-tool__panel label { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--soft); }

.kelo-tool__panel input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.kelo-tool__panel input:focus { outline: 2px solid var(--pine-pale); outline-offset: 1px; border-color: var(--pine); }

.kelo-tool__out { margin-top: 1rem; min-height: 5.2rem; }

.kelo-tool__big {
    margin: 0 0 0.3rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--pine);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.kelo-tool__verdict { margin: 0 0 0.3rem; font-size: 1.1rem; font-weight: 600; color: var(--soft); }
.kelo-tool__verdict.is-ok { color: var(--pine); }
.kelo-tool__verdict.is-bad { color: #A11F1F; }
.kelo-tool__sub { margin: 0 0 0.2rem; font-size: 0.86rem; color: var(--soft); word-break: break-word; }

.kelo-article__cta {
    margin: 2.5rem 0 1rem;
    padding: 1.5rem 1.7rem;
    border-left: 3px solid var(--pine);
    background: var(--paper-warm);
}

.kelo-article__cta h2 { margin-top: 0; }
.kelo-article__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0; }

@media (max-width: 720px) {
    .kelo-tool__grid { grid-template-columns: 1fr; }
    .kelo-tool { padding: 1.2rem 1rem 1.4rem; }
}