/**
 * Shared styles for the Marketing Calculator Suite (Wave 5).
 *
 * The per-tool accent is injected as --calc-accent / --calc-accent-dark /
 * --calc-accent-tint by calc-page.php. Composes the shared tools.css
 * primitives (.tool-form-card, .primary-btn, .ghost-btn, .tool-info).
 */

:root {
    --calc-accent: #0ea5e9;
    --calc-accent-dark: #0284c7;
    --calc-accent-tint: #e0f2fe;
}

.page-hero h1 .calc-hero-mark {
    width: 1em; height: 1em; vertical-align: -0.12em;
    margin-right: 0.4rem; color: var(--calc-accent);
}

.calc-intro { margin: 0 0 16px; color: #475569; font-size: 0.95rem; line-height: 1.5; }

#calc-app { display: block; }

/* ---- Currency selector ---- */
.calc-currency {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
}
.calc-currency label { font-weight: 600; font-size: 0.88rem; color: #334155; }
.calc-currency-sel {
    font: inherit; font-size: 0.9rem; padding: 7px 10px;
    border: 1px solid #d7dbe0; border-radius: 8px; background: #fff; color: #1f2937; cursor: pointer;
}
.calc-currency-sel:focus { outline: 2px solid var(--calc-accent); border-color: var(--calc-accent); }

/* ---- Input grid ---- */
.calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.calc-field { display: flex; flex-direction: column; }
.calc-field-label { font-weight: 600; font-size: 0.88rem; color: #334155; margin-bottom: 5px; }
.calc-input-box {
    display: flex; align-items: center;
    border: 1px solid #d7dbe0; border-radius: 8px; background: #fff;
    overflow: hidden;
}
.calc-input-box:focus-within { outline: 2px solid var(--calc-accent); border-color: var(--calc-accent); }
.calc-affix {
    padding: 0 4px 0 12px; color: #64748b; font-size: 0.95rem; font-weight: 600;
    white-space: nowrap; user-select: none;
}
.calc-suffix { padding: 0 12px 0 4px; }
.calc-input {
    flex: 1 1 auto; width: 100%; box-sizing: border-box;
    font: inherit; font-size: 1rem; padding: 10px 12px;
    border: 0; background: transparent; color: #1f2937; min-width: 0;
}
.has-prefix .calc-input { padding-left: 4px; }
.has-suffix .calc-input { padding-right: 4px; }
.calc-input:focus { outline: none; }
.calc-field-hint { margin-top: 5px; font-size: 0.8rem; color: #94a3b8; }

/* Native select styled like the number inputs (it sits in the same box). */
.calc-select { cursor: pointer; }

/* ---- Advanced options ---- */
.calc-adv-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px; cursor: pointer; user-select: none;
    font-size: 0.9rem; font-weight: 600; color: var(--calc-accent-dark);
}
.calc-adv-checkbox { width: 16px; height: 16px; accent-color: var(--calc-accent); cursor: pointer; }
.calc-adv-grid { margin-top: 12px; }
/* [hidden] must beat .calc-grid{display:grid} / .calc-field{display:flex}
 * (equal specificity, so the attribute selector + class is needed). */
.calc-grid[hidden], .calc-field[hidden], .calc-currency[hidden] { display: none; }

/* ---- Result ---- */
.calc-result {
    margin-top: 20px;
    border: 1px solid var(--calc-accent-tint);
    background: linear-gradient(180deg, var(--calc-accent-tint), #fff 70%);
    border-radius: 14px;
    padding: 20px 22px;
}
.calc-primary-label { font-size: 0.9rem; font-weight: 600; color: #475569; }
.calc-primary-value {
    font-size: 2.4rem; font-weight: 750; line-height: 1.1; margin-top: 4px;
    color: var(--calc-accent-dark); font-variant-numeric: tabular-nums; word-break: break-word;
}
.calc-breakdown {
    display: grid; grid-template-columns: 1fr auto; gap: 8px 16px;
    margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #e7eaf0;
}
.calc-breakdown dt { margin: 0; color: #475569; font-size: 0.92rem; }
.calc-breakdown dd {
    margin: 0; text-align: right; font-weight: 650; color: #1f2937;
    font-variant-numeric: tabular-nums;
}
.calc-breakdown dd.calc-verdict { font-weight: 700; }
.calc-verdict.tone-good { color: #15803d; }
.calc-verdict.tone-warn { color: #b45309; }
.calc-verdict.tone-bad  { color: #b91c1c; }

/* ---- Actions ---- */
.calc-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.calc-copy-btn { background: var(--calc-accent); border-color: var(--calc-accent); }
.calc-copy-btn:hover { background: var(--calc-accent-dark); border-color: var(--calc-accent-dark); color: #fff; }

/* ---- Hub backlink ---- */
.calc-hub-link { margin: 14px 2px 0; font-size: 0.9rem; }
.calc-hub-link a { color: var(--calc-accent-dark); font-weight: 600; text-decoration: none; }
.calc-hub-link a:hover { text-decoration: underline; color: var(--calc-accent-dark); }

/* ---- Responsive ---- */
@media (max-width: 560px) {
    .calc-grid { grid-template-columns: 1fr; }
    .calc-primary-value { font-size: 2rem; }
    .calc-actions .primary-btn, .calc-actions .ghost-btn { width: 100%; }
}