/* inflacja.css: styles for the inflation calculator only
   (the shared theme lives in ../wspolne/style.css) */

/* === One module = one question (Wartość pieniądza, Pensja a ceny) === */
.module {
    margin-bottom: 36px;
}

.module-title {
    font-size: 18px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    margin: 0 0 4px;
}

.module-desc {
    color: var(--text-soft);
    font-size: 14px;
    margin: 0 0 14px;
}

/* === "Wartość pieniądza": the form is a question, the answer a big number === */
.question-form {
    font-size: 18px;
    line-height: 2.2;
    margin: 0 0 6px;
}

.question-form select,
.question-form input {
    background: var(--input);
    color: var(--text-strong);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 4px 8px;
    font: inherit;
    font-size: 17px;
}

.question-form input {
    width: 8em;
    text-align: right;
}

.question-examples {
    justify-content: flex-start;
    margin: 4px 0 8px;
}

.answer-value {
    font-size: 34px;
    font-weight: 700;
    color: var(--accent-text);
    margin: 18px 0 0;
}

.answer-label {
    color: var(--text-soft);
    margin: 2px 0 12px;
}

.answer-notes p {
    margin: 6px 0;
    color: var(--text-2);
    line-height: 1.55;
}

@media (max-width: 560px) {
    .question-form { font-size: 16px; }
    .question-form select, .question-form input { font-size: 15px; }
    .answer-value { font-size: 28px; }
}

/* === "Ile co kosztowało" table === */
.inline-select {
    display: inline-block;
    margin: 0 0 12px;
    color: var(--text-soft);
    font-size: 13px;
}

.inline-select select {
    background: var(--input);
    color: var(--text-strong);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 4px 8px;
    font: inherit;
}

/* more / less for the same pay: green = better, orange = worse */
.results-table td.more { color: var(--green); white-space: nowrap; }
.results-table td.less { color: var(--orange); white-space: nowrap; }

/* period buttons above the chart, the city select inside the "Mieszkanie" legend group */
.chart-periods {
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 12px;
}

.legend-select {
    margin: 2px 0 8px;
}

/* "Płaca minimalna rok po roku": a long table that scrolls inside the panel */
.history-scroll {
    max-height: 440px;
    overflow-y: auto;
}

.history-table thead th {
    position: sticky;
    top: 0;
    background: var(--panel);
}

.history-mark {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.chart-periods .muted-inline {
    font-size: 13px;
    margin-right: 2px;
}

.history-table th .param-help {
    margin-left: 4px;
}