/**
 * Retire Calc Embed Module styles (spec v3.1.1)
 *
 * Loaded two ways: inlined into the bare embed document, and enqueued on
 * full calculator pages where the snippet panel renders. The engine has no
 * CSS custom properties, so --rtce-accent is introduced here with the
 * engine's hardcoded defaults as fallback.
 */

/* ---------------- Embed document ---------------- */

body.rtce-embed-body {
    margin: 0;
    padding: 0 0 8px 0;
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Title shares the card's max-width so heading and card align at any frame
   width; the wrapper's own duplicate title heading is hidden below. */
.rtce-embed-title {
    max-width: 720px;
    margin: 0.75rem auto 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
}

body.rtce-embed-body .retire-calc-wrapper {
    margin: 0.75rem auto 0.5rem auto;
    box-shadow: none;
}

body.rtce-embed-body .retire-calc-title {
    display: none;
}

/* Accent mapping in embed context: primary button, hover, emphasized output. */
body[data-rtce-embed] .retire-calc-submit {
    background: var(--rtce-accent, #0565B6);
}

body[data-rtce-embed] .retire-calc-submit:hover {
    background: var(--rtce-accent, #00306F);
    filter: brightness(0.92);
}

body[data-rtce-embed] .retire-calc-output-emphasis .retire-calc-output-value {
    color: var(--rtce-accent, #0565B6);
}

/* In-frame handoff link, sits under the result area. */
.rtce-embed-handoff {
    margin: 0.75rem 0 0.25rem 0;
    text-align: center;
    font-size: 0.9rem;
}

.rtce-embed-handoff a {
    color: var(--rtce-accent, #0565B6);
    text-decoration: underline;
}

/* ---------------- Dark theme (?theme=dark) ---------------- */

body.rtce-embed-dark {
    background: #111418;
}

body.rtce-embed-dark .rtce-embed-title {
    color: #e8eaed;
}

body.rtce-embed-dark .retire-calc-wrapper {
    background: #1b2026;
    border-color: #2c333c;
    color: #e8eaed;
}

body.rtce-embed-dark .retire-calc-wrapper h2,
body.rtce-embed-dark .retire-calc-wrapper h3,
body.rtce-embed-dark .retire-calc-wrapper h4,
body.rtce-embed-dark .retire-calc-wrapper legend,
body.rtce-embed-dark .retire-calc-wrapper label,
body.rtce-embed-dark .retire-calc-output-label,
body.rtce-embed-dark .retire-calc-results-title {
    color: #e8eaed;
}

body.rtce-embed-dark .retire-calc-description,
body.rtce-embed-dark .retire-calc-section-desc,
body.rtce-embed-dark .retire-calc-help,
body.rtce-embed-dark .retire-calc-disclaimer,
body.rtce-embed-dark .retire-calc-output-help {
    color: #a7b0ba;
}

body.rtce-embed-dark .retire-calc-wrapper input[type="number"],
body.rtce-embed-dark .retire-calc-wrapper input[type="text"],
body.rtce-embed-dark .retire-calc-wrapper input[type="date"],
body.rtce-embed-dark .retire-calc-wrapper select,
body.rtce-embed-dark .retire-calc-wrapper textarea {
    background: #232a32;
    border-color: #3a434d;
    color: #e8eaed;
}

body.rtce-embed-dark .retire-calc-section,
body.rtce-embed-dark .retire-calc-results,
body.rtce-embed-dark .retire-calc-output,
body.rtce-embed-dark .retire-calc-sponsor-card {
    background: #232a32;
    border-color: #3a434d;
}

body.rtce-embed-dark .retire-calc-output-value,
body.rtce-embed-dark .retire-calc-sponsor-name {
    color: #e8eaed;
}

body.rtce-embed-dark .retire-calc-reset {
    background: #2c333c;
    border-color: #3a434d;
    color: #cbd2d9;
}

/* ---------------- Snippet panel (full calculator pages) ---------------- */

.rtce-embed-panel {
    border-top: 1px solid #e4e7eb;
    padding-top: 0.75rem;
    margin-top: 1.25rem;
}

.rtce-embed-panel-summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: #394453;
    user-select: none;
}

.rtce-embed-panel-summary:hover {
    color: #00306F;
}

.rtce-embed-panel-body {
    margin-top: 0.75rem;
}

/* Code box: block full-width, no soft wrap, click selects all (JS). Do not
   rely on textarea cols/rows for sizing. */
.rtce-embed-code {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 170px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre;
    overflow: auto;
    background: #F8FAFC;
    border: 1px solid #e4e7eb;
    border-radius: 6px;
    padding: 0.75rem;
    color: #1a1a1a;
}

.rtce-embed-code:focus {
    outline: none;
    border-color: var(--rtce-accent, #0565B6);
}

/* iOS zooms the page when focusing inputs under 16px. */
@media (max-width: 480px) {
    .rtce-embed-code {
        font-size: 16px;
    }
}

.rtce-embed-copy {
    margin-top: 0.5rem;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--rtce-accent, #0565B6);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.rtce-embed-copy:hover {
    background: var(--rtce-accent, #00306F);
    filter: brightness(0.92);
}

.rtce-embed-license {
    margin: 0.9rem 0 0 0;
    padding: 0.4rem 0;
    line-height: 1.5;
    font-size: 0.8rem;
    color: #394453;
}