/*
 * iWrite Adaptive Visual Theme - live calibration bridge
 * Makes the calibration controls visibly affect the same visual tokens used by the site.
 * Loaded after the legacy/shared theme so hard-coded dark surfaces no longer hide feedback.
 */

:root {
    --iw-av-rgb-page: 5 8 12;
    --iw-av-rgb-surface: 13 17 23;
    --iw-av-rgb-surface-soft: 8 12 18;
    --iw-av-rgb-surface-strong: 10 14 20;
    --iw-av-calibration-brightness: 1;
    --iw-av-dialog-overlay-a: .24;
}

/* Rebind the shared glass system to BOTH opacity and actual tonal RGB values. */
html[data-iw-visual-ready="true"] {
    --er-page-glass:
        radial-gradient(circle at 12% 0, rgba(214,166,70,.045), transparent 34%),
        linear-gradient(
            145deg,
            rgb(var(--iw-av-rgb-surface) / var(--iw-av-surface-a)),
            rgb(var(--iw-av-rgb-surface-soft) / var(--iw-av-surface-soft-a))
        );
    --er-page-glass-strong:
        radial-gradient(circle at 12% 0, rgba(214,166,70,.055), transparent 34%),
        linear-gradient(
            145deg,
            rgb(var(--iw-av-rgb-surface-strong) / var(--iw-av-surface-strong-a)),
            rgb(var(--iw-av-rgb-surface) / var(--iw-av-surface-a))
        );
    --er-home-card-bg:
        radial-gradient(circle at 10% 0, rgba(214,166,70,.045), transparent 36%),
        linear-gradient(
            145deg,
            rgb(var(--iw-av-rgb-surface) / var(--iw-av-card-a)),
            rgb(var(--iw-av-rgb-surface-soft) / var(--iw-av-surface-soft-a))
        );
    --er-home-card-bg-strong:
        radial-gradient(circle at 12% 0, rgba(214,166,70,.06), transparent 34%),
        linear-gradient(
            145deg,
            rgb(var(--iw-av-rgb-surface-strong) / var(--iw-av-card-strong-a)),
            rgb(var(--iw-av-rgb-surface) / var(--iw-av-card-a))
        );
}

html[data-iw-visual-ready="true"] body.iwrite-body {
    background-color: rgb(var(--iw-av-rgb-page)) !important;
}

/* Header is one of the strongest visual references during calibration. */
html[data-iw-visual-ready="true"] body.iwrite-body #iwriteHeader {
    background:
        radial-gradient(ellipse at 9% -60%, rgb(205 164 74 / calc(var(--iw-av-gold-a) * .55)), transparent 34%),
        radial-gradient(ellipse at 82% -110%, rgba(75,108,154,.10), transparent 40%),
        linear-gradient(
            180deg,
            rgb(var(--iw-av-rgb-surface-strong) / var(--iw-av-surface-strong-a)),
            rgb(var(--iw-av-rgb-surface-soft) / var(--iw-av-surface-a))
        ) !important;
}

/* Book workspace surfaces are explicitly rebound because several older rules use !important. */
html[data-iw-visual-ready="true"] body.iwrite-body:has(.nb-play) .nb-top,
html[data-iw-visual-ready="true"] body.iwrite-body:has(.nb-play) .nb-advisor-shell {
    background:
        radial-gradient(circle at 8% 0, rgba(201,164,95,.055), transparent 34%),
        linear-gradient(
            145deg,
            rgb(var(--iw-av-rgb-surface) / var(--iw-av-surface-a)),
            rgb(var(--iw-av-rgb-surface-soft) / var(--iw-av-surface-soft-a))
        ) !important;
}

html[data-iw-visual-ready="true"] body.iwrite-body:has(.nb-play) :where(
    .nb-advisor-form textarea,
    .nb-top select,
    .nb-version-btn,
    .nb-version-toggle
) {
    background: rgb(var(--iw-av-rgb-surface-soft) / var(--iw-av-surface-a)) !important;
}

/*
 * Calibration must expose the page behind it. The previous 70% black veil + 9px blur
 * made correct changes practically invisible while the user was moving the slider.
 */
.iw-visual-overlay {
    background: rgb(0 0 0 / var(--iw-av-dialog-overlay-a)) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
    backdrop-filter: blur(1.5px) !important;
}

/* The dialog itself follows the selected tone, so feedback is visible even on pages with no background image. */
html[data-iw-visual-ready="true"] .iw-visual-dialog {
    background:
        radial-gradient(circle at 12% 0, rgba(218,177,88,.07), transparent 33%),
        linear-gradient(
            155deg,
            rgb(var(--iw-av-rgb-surface-strong) / .985),
            rgb(var(--iw-av-rgb-surface-soft) / .995)
        ) !important;
    box-shadow:
        0 32px 100px rgb(0 0 0 / var(--iw-av-shadow-a)),
        0 0 34px rgba(218,177,88,.07) !important;
}

html[data-iw-visual-ready="true"] .iw-visual-section {
    background: rgb(var(--iw-av-rgb-surface) / .34) !important;
}

html[data-iw-visual-ready="true"] .iw-visual-mode {
    background: rgb(var(--iw-av-rgb-surface) / .28) !important;
}

html[data-iw-visual-ready="true"] .iw-visual-mode[aria-pressed="true"] {
    background:
        linear-gradient(180deg, rgba(218,177,88,.12), rgb(var(--iw-av-rgb-surface) / .40)) !important;
}

/* The five black swatches now react to the SAME score as the site. */
.iw-visual-calibration span {
    filter: brightness(var(--iw-av-calibration-brightness));
    transition: filter .12s linear, border-color .12s linear;
}

/* A dedicated preview makes the live effect unambiguous and testable. */
.iw-visual-live-preview {
    overflow: hidden;
    border: 1px solid rgba(218,177,88,.30);
    border-radius: 14px;
    background:
        radial-gradient(circle at 12% -10%, rgba(218,177,88,.10), transparent 36%),
        linear-gradient(
            145deg,
            rgb(var(--iw-av-rgb-surface) / var(--iw-av-card-a)),
            rgb(var(--iw-av-rgb-surface-soft) / var(--iw-av-surface-soft-a))
        );
    box-shadow: 0 16px 42px rgb(0 0 0 / var(--iw-av-shadow-a));
}

.iw-visual-live-preview__head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,.065);
}

.iw-visual-live-preview__head strong {
    color: var(--iw-av-text);
    font-size:.78rem;
}

.iw-visual-live-preview__badge {
    display:inline-flex;
    align-items:center;
    min-height:22px;
    padding:0 8px;
    border:1px solid rgba(218,177,88,.34);
    border-radius:999px;
    background:rgba(218,177,88,.07);
    color:var(--iw-av-gold);
    font-size:.60rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.iw-visual-live-preview__body {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(170px,.72fr);
    gap:12px;
    padding:14px;
}

.iw-visual-live-preview__copy {
    padding:12px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:10px;
    background:rgb(var(--iw-av-rgb-surface-soft) / var(--iw-av-surface-a));
}

.iw-visual-live-preview__copy b {
    display:block;
    margin-bottom:5px;
    color:var(--iw-av-text);
    font-size:.82rem;
}

.iw-visual-live-preview__copy span {
    color:var(--iw-av-muted);
    font-size:.69rem;
    line-height:1.45;
}

.iw-visual-live-preview__gold {
    display:grid;
    place-items:center;
    min-height:68px;
    border:1px solid rgba(218,177,88,.38);
    border-radius:10px;
    background:linear-gradient(145deg,rgba(218,177,88,.14),rgb(var(--iw-av-rgb-surface) / .46));
    color:var(--iw-av-gold);
    font-size:.70rem;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

@media(max-width:680px) {
    .iw-visual-live-preview__body { grid-template-columns:1fr; }
}

@media(forced-colors:active) {
    .iw-visual-overlay { background:Canvas !important; backdrop-filter:none !important; }
    .iw-visual-calibration span { filter:none !important; }
}