/**
 * SSLA Client Update Wizard — Client Update Tool Band D visual language.
 *
 * Mobile-first "quiz" pattern ported from Glenn's own Keep Metrics
 * prototype (_prototypes/keep-metrics/assets/style.css's .quiz-* rules) —
 * see includes/class-ssla-client-update-wizard.php's docblock for the
 * provenance note. Own token set (does not reach into any Launch admin/
 * overlay CSS) so this survives being embedded on an arbitrary front-end
 * page with unknown surrounding theme CSS.
 *
 * @package SimpleSuite_Launch
 * @since   3.66.67
 */

.ssla-cu-wizard,
.ssla-cu-notice {
    --ssla-cu-navy: #1B2A4A;
    --ssla-cu-steel: #3D5A80;
    --ssla-cu-green: #1E7145;
    --ssla-cu-red: #B3261E;
    --ssla-cu-grey: #6B7280;
    --ssla-cu-ink: #1F2530;
    --ssla-cu-border: #E4E8EE;
    --ssla-cu-accent: #70996F;
    --ssla-cu-page: #F6F7F9;
    --ssla-cu-card: #FFFFFF;

    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--ssla-cu-ink);
    max-width: 560px;
    margin: 0 auto;
    padding: 6vh 20px 8vh;
}
.ssla-cu-wizard *,
.ssla-cu-notice * { box-sizing: border-box; }

.ssla-cu-card {
    width: 100%;
    text-align: center;
    animation: ssla-cu-pop .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes ssla-cu-pop {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.ssla-cu-qmark {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 16px;
    background: linear-gradient(155deg, var(--ssla-cu-steel), var(--ssla-cu-navy));
    color: #fff;
    font-family: Georgia, serif;
    font-weight: 800;
    font-size: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 26px -8px rgba(27,42,74,.45);
}

.ssla-cu-progress {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ssla-cu-accent);
    margin-bottom: 6px;
}

.ssla-cu-client {
    font-size: 12px;
    color: var(--ssla-cu-grey);
    margin-bottom: 8px;
}

.ssla-cu-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ssla-cu-navy);
    margin: 0 0 14px;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.ssla-cu-hint {
    font-size: 13.5px;
    color: var(--ssla-cu-grey);
    line-height: 1.55;
    max-width: 420px;
    margin: 0 auto 20px;
}

.ssla-cu-body { margin-bottom: 8px; }

.ssla-cu-mini-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ssla-cu-grey);
    margin: 14px 0 6px;
    text-align: left;
}

.ssla-cu-input {
    width: 100%;
    max-width: 360px;
    border: none;
    border-bottom: 3px solid var(--ssla-cu-border);
    background: transparent;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: var(--ssla-cu-navy);
    padding: 6px 4px 10px;
    font-family: inherit;
    transition: border-color .15s;
}
.ssla-cu-input:focus { outline: none; border-bottom-color: var(--ssla-cu-accent); }
.ssla-cu-input::placeholder { color: #C7CEDA; }

.ssla-cu-input-row {
    text-align: left;
    font-size: 17px;
    max-width: 100%;
    margin-bottom: 4px;
}

.ssla-cu-textarea {
    text-align: left;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 100%;
    min-height: 90px;
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--ssla-cu-border);
    border-radius: 4px;
    padding: 10px 12px;
    resize: vertical;
}
/* A wizard_group screen (2026-09-02, e.g. ASK Reminders + Product of the
 * week + Clinical moment stacked on one screen) shares vertical space
 * across several textareas — give each a smaller floor so 3 fit without
 * the FIRST one's grow-to-fill pushing the others off-screen. */
.ssla-cu-input-row.ssla-cu-textarea {
    min-height: 64px;
    max-height: 30vh;
}
.ssla-cu-textarea:focus { outline: none; border-color: var(--ssla-cu-accent); }

.ssla-cu-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    gap: 12px;
}
.ssla-cu-nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ssla-cu-back {
    background: none;
    border: none;
    color: var(--ssla-cu-grey);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 4px;
}
.ssla-cu-back:hover { color: var(--ssla-cu-navy); }

.ssla-cu-next {
    background: var(--ssla-cu-navy);
    color: #fff;
    border: none;
    padding: 13px 26px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 999px;
    letter-spacing: .01em;
    transition: transform .12s, background .15s;
    box-shadow: 0 10px 20px -8px rgba(27,42,74,.5);
}
.ssla-cu-next:hover { background: #26385e; transform: translateY(-1px); }
.ssla-cu-next:disabled { opacity: .6; cursor: default; transform: none; }
.ssla-cu-submit { background: var(--ssla-cu-accent); box-shadow: 0 10px 20px -8px rgba(112,153,111,.6); }
.ssla-cu-submit:hover { background: #5c8459; }

.ssla-cu-status { color: var(--ssla-cu-red); font-size: 13px; margin-top: 12px; min-height: 16px; }

/* review screen */
.ssla-cu-review-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 4px 0 8px;
    text-align: left;
}
@media (max-width: 480px) { .ssla-cu-review-grid { grid-template-columns: 1fr; } }
.ssla-cu-review-cell {
    background: #fff;
    border: 1px solid var(--ssla-cu-border);
    padding: 12px 14px;
    box-shadow: 0 3px 12px -6px rgba(27,42,74,.12);
}
.ssla-cu-review-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ssla-cu-grey);
    font-weight: 700;
}
.ssla-cu-review-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--ssla-cu-navy);
    margin-top: 4px;
    word-break: break-word;
}

/* result screen */
.ssla-cu-result-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--ssla-cu-border);
    border: 1px solid var(--ssla-cu-border);
    margin: 10px 0 20px;
    text-align: left;
}
.ssla-cu-result-row {
    background: #fff;
    padding: 10px 14px;
    font-size: 13.5px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.ssla-cu-result-mark { font-weight: 800; flex: 0 0 auto; }
.ssla-cu-result-ok .ssla-cu-result-mark { color: var(--ssla-cu-green); }
.ssla-cu-result-fail .ssla-cu-result-mark { color: var(--ssla-cu-red); }
.ssla-cu-result-label { flex: 1; min-width: 0; }
.ssla-cu-result-reason { font-size: 11.5px; color: var(--ssla-cu-red); flex-basis: 100%; }

/* notice / picker screens (no JS needed) */
.ssla-cu-notice {
    max-width: 480px;
    margin: 8vh auto;
    padding: 30px 26px;
    text-align: center;
    background: var(--ssla-cu-card);
    border: 1px solid var(--ssla-cu-border);
    box-shadow: 0 8px 24px -8px rgba(27,42,74,.1);
}
.ssla-cu-notice p { font-size: 14px; line-height: 1.6; color: var(--ssla-cu-ink); margin: 0 0 10px; }
.ssla-cu-btn {
    display: inline-block;
    background: var(--ssla-cu-navy);
    color: #fff !important;
    text-decoration: none;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 999px;
}
.ssla-cu-btn:hover { background: #26385e; }
.ssla-cu-picker-list { list-style: none; margin: 14px 0 0; padding: 0; text-align: left; }
.ssla-cu-picker-list li { border-bottom: 1px solid var(--ssla-cu-border); }
.ssla-cu-picker-list li:last-child { border-bottom: none; }
.ssla-cu-picker-list a {
    display: block;
    padding: 12px 4px;
    color: var(--ssla-cu-navy);
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
}

/* ── Escape hatch ─────────────────────────────────────────────────────
 * 2026-09-02 — small chevron-only icon button, shown on every wizard
 * screen state (question/review, notice, picker). These wizard pages
 * (posts 34041 `/huddle/`, 34091 `/monthly/`) get switched to ss-theme's
 * new Chromeless page template, which strips the normal site header/nav a
 * visitor would otherwise use to leave — this is the deliberate
 * replacement, fixed-position so it stays reachable regardless of wizard
 * scroll position.
 *
 * Literal hex colors, not var(--ssla-cu-navy) etc. — this element is a
 * SIBLING of .ssla-cu-wizard/.ssla-cu-notice (PHP prints it BEFORE those
 * wrapper divs, not inside them), so it sits outside the scope those
 * custom properties are declared on. Using the token here previously
 * resolved to nothing on :hover, making the background disappear against
 * white text (2026-09-02 live-review bug report) — literal values sidestep
 * the scoping issue entirely rather than re-declaring the token twice. */
.ssla-cu-escape {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #1B2A4A;
    color: #fff !important;
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
}
.ssla-cu-escape:hover { background: #26385e; }
.ssla-cu-picker-list a:hover { color: var(--ssla-cu-steel); }

/* ── Brand mark ───────────────────────────────────────────────────────
 * 2026-09-02 — ASK System logo above the "?" badge on every screen,
 * matching the Keep Metrics prototype's own `.app-brand` header. */
.ssla-cu-brand { margin-bottom: 18px; }
.ssla-cu-brand img { height: 40px; width: auto; }

/* ── Month picker ─────────────────────────────────────────────────────
 * 2026-09-02 — native <input type="month"> for any field flagged
 * wizard_widget:'month' (currently Monthly Numbers' Reporting Month).
 * Matches the plain big-underlined-text look of .ssla-cu-input rather
 * than the browser's own default month-input chrome. */
.ssla-cu-input-month {
    -webkit-appearance: none;
    appearance: none;
}
.ssla-cu-input-row.ssla-cu-input-month { text-align: left; font-size: 17px; padding: 6px 4px 8px; }

/* ── Single-screen repeater list (Add-Ons etc.) ──────────────────────
 * 2026-09-02, Glenn live review: "all the add-on can be on one page" —
 * matches the Keep Metrics prototype's own quiz-addon-row pattern
 * (assets/style.css's .quiz-addon-*), ported here under the ssla-cu-
 * prefix used throughout this file's own token set. */
.ssla-cu-addon-list { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ssla-cu-addon-row { display: flex; gap: 10px; align-items: center; }
.ssla-cu-addon-name {
    flex: 1;
    min-width: 0;
    border: none;
    border-bottom: 2px solid var(--ssla-cu-border);
    background: transparent;
    font-size: 15px;
    padding: 6px 2px;
    font-family: inherit;
    color: var(--ssla-cu-ink);
}
.ssla-cu-addon-amt {
    flex: 0 0 110px;
    width: 110px;
    border: none;
    border-bottom: 2px solid var(--ssla-cu-border);
    background: transparent;
    font-size: 15px;
    padding: 6px 2px;
    font-family: inherit;
    color: var(--ssla-cu-ink);
    text-align: right;
}
.ssla-cu-addon-name:focus,
.ssla-cu-addon-amt:focus { outline: none; border-bottom-color: var(--ssla-cu-accent); }

/* v3.67.27 — a row with a textarea (ECG team lead reports) stacks its
 * inputs full-width in a light card; a row caption labels a preset row
 * (ECG agenda headings). See the JS repeater_all branch. */
.ssla-cu-addon-row--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--ssla-cu-border);
}
.ssla-cu-addon-row--stacked .ssla-cu-input { width: 100%; box-sizing: border-box; font-size: 15px; }
.ssla-cu-addon-caption {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ssla-cu-grey);
    margin: 6px 0 -4px;
}

.ssla-cu-addon-add {
    align-self: flex-start;
    margin-top: 4px;
    background: none;
    border: none;
    color: var(--ssla-cu-accent);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 2px;
}
.ssla-cu-addon-add:hover { text-decoration: underline; }

/* ── LNCH-0071 — "review yesterday" list ──────────────────────────────
 * Same row/input shell as the Add-Ons list above (.ssla-cu-addon-row/
 * -amt, reused directly for the editable amount), but the leading cell
 * here is a fixed provider-name LABEL, never an editable field — this
 * screen confirms/adjusts an existing number per provider, it doesn't
 * collect new named rows. */
.ssla-cu-review-list { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ssla-cu-review-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.ssla-cu-review-row-name { flex: 1; min-width: 0; font-size: 15px; color: var(--ssla-cu-ink); }