/* Hammond Rock Finance Calculator — frontend styles.
   All selectors are scoped with .hrfc- so theme styles don't leak in. */

.hrfc-root {
    --hrfc-bg: #ffffff;
    --hrfc-fg: #1a1a1a;
    --hrfc-muted: #6b7280;
    --hrfc-border: #e5e7eb;
    --hrfc-input-bg: #f9fafb;
    --hrfc-output-bg: #f3f4f6;
    --hrfc-primary: #0057A0;
    --hrfc-primary-contrast: #ffffff;
    --hrfc-accent: #FF8A00;
    --hrfc-radius: 8px;

    color: var(--hrfc-fg);
    background: var(--hrfc-bg);
    border: 1px solid var(--hrfc-border);
    border-radius: var(--hrfc-radius);
    padding: clamp(16px, 3vw, 28px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: clamp(16px, 3vw, 28px);
    font-family: inherit;
    box-sizing: border-box;
}
.hrfc-root *,
.hrfc-root *::before,
.hrfc-root *::after { box-sizing: border-box; }

@media (prefers-color-scheme: dark) {
    .hrfc-root:not([data-mode="light"]) {
        --hrfc-bg: #111827;
        --hrfc-fg: #f3f4f6;
        --hrfc-muted: #9ca3af;
        --hrfc-border: #1f2937;
        --hrfc-input-bg: #1f2937;
        --hrfc-output-bg: #0b1220;
    }
}
.hrfc-root[data-mode="dark"] {
    --hrfc-bg: #111827;
    --hrfc-fg: #f3f4f6;
    --hrfc-muted: #9ca3af;
    --hrfc-border: #1f2937;
    --hrfc-input-bg: #1f2937;
    --hrfc-output-bg: #0b1220;
}

@media (max-width: 899px) {
    .hrfc-root { grid-template-columns: minmax(0, 1fr); }
}

.hrfc-form { display: grid; gap: clamp(14px, 2.2vw, 22px); min-width: 0; }
.hrfc-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

/* Segmented control -------------------------------------------------------- */
.hrfc-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--hrfc-input-bg);
    border: 1px solid var(--hrfc-border);
    border-radius: var(--hrfc-radius);
    padding: 4px;
}
.hrfc-seg {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    border-radius: calc(var(--hrfc-radius) - 2px);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.hrfc-seg:hover { background: rgba(0,0,0,.04); }
.hrfc-root[data-mode="dark"] .hrfc-seg:hover,
.hrfc-root:not([data-mode="light"]) .hrfc-seg:hover { background: rgba(255,255,255,.04); }
.hrfc-seg.is-active {
    background: var(--hrfc-primary);
    color: var(--hrfc-primary-contrast);
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.hrfc-seg:focus-visible {
    outline: 2px solid var(--hrfc-accent);
    outline-offset: 2px;
}

/* Amount ------------------------------------------------------------------- */
.hrfc-amount-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.hrfc-step {
    width: 44px; min-width: 44px; height: 44px;
    border: 1px solid var(--hrfc-border);
    background: var(--hrfc-input-bg);
    border-radius: var(--hrfc-radius);
    font-size: 1.4rem;
    color: inherit;
    cursor: pointer;
}
.hrfc-step:focus-visible { outline: 2px solid var(--hrfc-accent); outline-offset: 2px; }
.hrfc-amount-wrap {
    flex: 1 1 auto;
    display: flex; align-items: center;
    border: 1px solid var(--hrfc-border);
    background: var(--hrfc-input-bg);
    border-radius: var(--hrfc-radius);
    padding: 0 12px;
}
.hrfc-amount-symbol { margin-right: 6px; color: var(--hrfc-muted); font-weight: 600; }
.hrfc-amount {
    flex: 1 1 auto;
    min-width: 0;
    border: 0; background: transparent;
    color: inherit; font: inherit;
    font-size: 1.25rem; font-weight: 600;
    padding: 10px 0;
    -moz-appearance: textfield;
}
.hrfc-amount::-webkit-outer-spin-button,
.hrfc-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hrfc-amount:focus { outline: none; }
.hrfc-amount-wrap:focus-within { box-shadow: 0 0 0 2px var(--hrfc-primary); }

.hrfc-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.hrfc-chip {
    border: 1px solid var(--hrfc-border);
    background: var(--hrfc-input-bg);
    color: inherit; font: inherit;
    padding: 8px 12px; min-height: 36px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
}
.hrfc-chip.is-active {
    background: var(--hrfc-primary); color: var(--hrfc-primary-contrast);
    border-color: var(--hrfc-primary);
}
.hrfc-chip:focus-visible { outline: 2px solid var(--hrfc-accent); outline-offset: 2px; }
.hrfc-range-note { margin: 6px 0 0; font-size: 0.85rem; color: var(--hrfc-muted); min-height: 1.2em; }

/* Output ------------------------------------------------------------------- */
.hrfc-output {
    background: var(--hrfc-output-bg);
    border: 1px solid var(--hrfc-border);
    border-radius: var(--hrfc-radius);
    padding: clamp(16px, 2.5vw, 24px);
    display: flex; flex-direction: column; gap: 14px;
    min-width: 0;
}
.hrfc-monthly { display: flex; flex-direction: column; align-items: flex-start; }
.hrfc-monthly-label { font-size: 0.85rem; color: var(--hrfc-muted); }
.hrfc-monthly-value {
    font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 700;
    color: var(--hrfc-primary); line-height: 1.1;
}
.hrfc-monthly-sub { font-size: 0.85rem; color: var(--hrfc-muted); }

.hrfc-bar {
    display: flex; width: 100%; height: 10px;
    border-radius: 999px; overflow: hidden; background: var(--hrfc-border);
}
.hrfc-bar-principal { background: var(--hrfc-primary); height: 100%; }
.hrfc-bar-interest  { background: var(--hrfc-accent);  height: 100%; }
.hrfc-bar-legend { display: flex; gap: 14px; font-size: 0.82rem; color: var(--hrfc-muted); }
.hrfc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.hrfc-dot--principal { background: var(--hrfc-primary); }
.hrfc-dot--interest  { background: var(--hrfc-accent); }

.hrfc-breakdown { margin: 0; display: grid; gap: 6px; }
.hrfc-breakdown > div { display: flex; justify-content: space-between; font-size: 0.95rem; }
.hrfc-breakdown dt { color: var(--hrfc-muted); margin: 0; }
.hrfc-breakdown dd { margin: 0; font-weight: 600; }

.hrfc-round-notice {
    font-size: 0.82rem; color: var(--hrfc-muted);
    border-left: 3px solid var(--hrfc-accent);
    padding: 6px 10px; margin: 0;
    background: rgba(255,138,0,0.08);
    border-radius: 4px;
}

.hrfc-cta {
    margin-top: 4px;
    background: var(--hrfc-primary);
    color: var(--hrfc-primary-contrast);
    border: 0;
    border-radius: var(--hrfc-radius);
    padding: 14px 18px;
    min-height: 48px;
    font: inherit; font-weight: 700; font-size: 1rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .1s ease, filter .15s ease;
}
.hrfc-cta:hover { filter: brightness(1.05); }
.hrfc-cta:active { transform: translateY(1px); }
.hrfc-cta:focus-visible { outline: 2px solid var(--hrfc-accent); outline-offset: 2px; }

.hrfc-disclaimer { font-size: 0.8rem; color: var(--hrfc-muted); line-height: 1.4; }
.hrfc-disclaimer p { margin: 0 0 6px; }
.hrfc-disclaimer a { color: inherit; text-decoration: underline; }