/*
 * DSE customer portal components (2026-10-14): request tracker, "Your systems", satisfaction rating,
 * quotes. Loaded only when one of those previews is on. Boosted selectors keep the components'
 * own styling over the older client layers.
 */
html:is(#dse-cx#dse-cx#dse-cx, *) {
    --cx-ink: #17181b; --cx-muted: #62666e; --cx-line: #dedfe3; --cx-line-strong: #c9cbd0;
    --cx-canvas: #f5f5f7; --cx-navy: #101d2e; --cx-navy-hover: #284566; --cx-link: #235f99;
    --cx-focus: #387ac0; --cx-ok: #1f7a4d; --cx-warn: #8a5a00; --cx-alert: #b42318;
    --cx-font: "DSE Inter", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-tracker, .dse-csat, .dse-systems, .dse-quotes) {
    font-family: var(--cx-font) !important; color: var(--cx-ink) !important;
}

/* ---------- request tracker ---------- */
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker {
    margin: 0 0 18px !important; padding: 22px 24px !important; background: #fff !important;
    border: 1px solid var(--cx-line) !important; border-radius: 18px !important; box-shadow: none !important;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-kicker { display: block; font: 600 11px/1.3 var(--cx-font) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-now { display: block; margin: 4px 0 2px; font: 650 24px/1.2 var(--cx-font) !important; letter-spacing: -.02em; color: var(--cx-ink) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-head p { margin: 0 !important; font: 400 15px/1.5 var(--cx-font) !important; color: var(--cx-muted) !important; max-width: 60ch; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker.is-step-3 .dse-tracker-now { color: var(--cx-warn) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker.is-step-4 .dse-tracker-now { color: var(--cx-ok) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-due { text-align: right; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-due span { display: block; font: 500 12px/1.3 var(--cx-font) !important; color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-due strong { font: 600 14px/1.4 var(--cx-font) !important; color: var(--cx-ink) !important; font-variant-numeric: tabular-nums; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-steps {
    list-style: none !important; margin: 22px 0 0 !important; padding: 0 !important;
    display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: none;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-steps li {
    position: relative; margin: 0 !important; padding: 26px 8px 0 0 !important; background: none !important;
    display: flex; flex-direction: column; gap: 3px;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-steps li::before {
    content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 3px; border-radius: 2px; background: var(--cx-line);
}
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-steps li.is-done::before { background: var(--cx-navy); }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-steps li.is-current::before { background: linear-gradient(90deg, var(--cx-navy) 0 50%, var(--cx-line) 50%); }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-dot {
    position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%;
    background: #fff; border: 3px solid var(--cx-line-strong); box-sizing: border-box;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body .is-done .dse-tracker-dot { background: var(--cx-navy); border-color: var(--cx-navy); }
html:is(#dse-cx#dse-cx#dse-cx, *) body .is-current .dse-tracker-dot { border-color: var(--cx-navy); box-shadow: 0 0 0 5px rgba(16, 29, 46, .12); }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-label { font: 600 13px/1.3 var(--cx-font) !important; color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.is-done, .is-current) .dse-tracker-label { color: var(--cx-ink) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-steps time { font: 400 12px/1.3 var(--cx-font) !important; color: var(--cx-muted) !important; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker { padding: 18px !important; }
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-steps { grid-template-columns: 1fr; gap: 0; }
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-steps li { padding: 0 0 14px 30px !important; }
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-steps li::before { left: 7px; right: auto; top: 17px; bottom: 0; width: 3px; height: auto; }
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-steps li.is-current::before { background: var(--cx-line); }
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-steps li:last-child::before { display: none; }
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-tracker-due { text-align: left; }
}

/* ---------- satisfaction rating ---------- */
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat {
    margin: 0 0 18px !important; padding: 22px 24px !important; background: #fff !important;
    border: 1px solid var(--cx-line) !important; border-radius: 18px !important;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat h2 { margin: 0 0 4px !important; font: 650 20px/1.25 var(--cx-font) !important; color: var(--cx-ink) !important; letter-spacing: -.01em; background: none !important; border: 0 !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-head p { margin: 0 0 14px !important; font: 400 14px/1.5 var(--cx-font) !important; color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-option {
    display: flex !important; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px !important; margin: 0 !important;
    background: #fff !important; color: var(--cx-ink) !important; border: 1px solid var(--cx-line-strong) !important;
    border-radius: 12px !important; cursor: pointer; box-shadow: none !important; text-shadow: none !important; width: auto !important; height: auto !important;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-option strong { font: 650 20px/1 var(--cx-font) !important; color: inherit !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-option span { font: 500 12px/1.3 var(--cx-font) !important; color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-option:hover { background: var(--cx-canvas) !important; border-color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-option.is-selected { background: var(--cx-navy) !important; border-color: var(--cx-navy) !important; color: #fff !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-option.is-selected span { color: #c9d2de !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-comment { margin-top: 14px; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-comment summary { cursor: pointer; font: 550 14px/1.4 var(--cx-font) !important; color: var(--cx-link) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-comment label { display: block; margin: 10px 0 4px; font: 550 13px/1.3 var(--cx-font) !important; color: var(--cx-ink) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-comment textarea {
    width: 100% !important; box-sizing: border-box; padding: 10px 12px !important; border: 1px solid var(--cx-line-strong) !important;
    border-radius: 10px !important; background: #fff !important; color: var(--cx-ink) !important; font: 400 14px/1.5 var(--cx-font) !important;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-hint { margin: 6px 0 0 !important; font: 400 12px/1.4 var(--cx-font) !important; color: var(--cx-muted) !important; }

/* ---------- your systems / quotes pages ---------- */
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-systems, .dse-quotes) { display: block; max-width: 1080px; margin: 28px auto 48px !important; padding: 0 16px !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-systems-head, .dse-quotes-head) { margin-bottom: 18px; }
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-systems-kicker, .dse-quotes-kicker) { font: 600 12px/1.3 var(--cx-font) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-systems-head, .dse-quotes-head) h1 { margin: 6px 0 6px !important; font: 650 clamp(30px, 5vw, 44px)/1.08 var(--cx-font) !important; letter-spacing: -.035em; color: var(--cx-ink) !important; background: none !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-systems-summary { margin: 0 !important; font: 400 16px/1.5 var(--cx-font) !important; color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-systems-summary strong { color: var(--cx-ok) !important; font-weight: 650; font-variant-numeric: tabular-nums; }
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-systems-list, .dse-quotes-list) {
    list-style: none !important; margin: 0 !important; padding: 0 !important; background: #fff !important;
    border: 1px solid var(--cx-line) !important; border-radius: 16px !important; overflow: hidden;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-systems-device {
    display: grid; grid-template-columns: 14px 1fr auto; gap: 14px; align-items: center;
    padding: 14px 18px !important; margin: 0 !important; border-top: 1px solid var(--cx-line); background: none !important;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-systems-device:first-child { border-top: 0; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-systems-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cx-line-strong); }
html:is(#dse-cx#dse-cx#dse-cx, *) body .is-online .dse-systems-dot { background: var(--cx-ok); box-shadow: 0 0 0 4px rgba(31, 122, 77, .14); }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-systems-name strong { display: block; font: 600 15px/1.35 var(--cx-font) !important; color: var(--cx-ink) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-systems-name small { font: 400 13px/1.3 var(--cx-font) !important; color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-systems-status { text-align: right; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-systems-status span { display: block; font: 600 13px/1.3 var(--cx-font) !important; color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .is-online .dse-systems-status span { color: var(--cx-ok) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-systems-status time { font: 400 12px/1.3 var(--cx-font) !important; color: var(--cx-muted) !important; font-variant-numeric: tabular-nums; }
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-systems-empty, .dse-quotes-empty) {
    padding: 28px !important; background: #fff !important; border: 1px solid var(--cx-line) !important; border-radius: 16px !important;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-systems-empty, .dse-quotes-empty) h2 { margin: 0 0 6px !important; font: 650 20px/1.3 var(--cx-font) !important; color: var(--cx-ink) !important; background: none !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-systems-empty, .dse-quotes-empty) p { margin: 0 0 14px !important; font: 400 15px/1.5 var(--cx-font) !important; color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-systems-cta, .dse-quotes-cta) {
    display: inline-block; padding: 11px 20px !important; border-radius: 999px !important; background: var(--cx-navy) !important;
    color: #fff !important; font: 600 14px/1 var(--cx-font) !important; text-decoration: none !important;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-systems-cta, .dse-quotes-cta):hover { background: var(--cx-navy-hover) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-systems-note, .dse-quotes-note) { margin: 14px 2px 0 !important; font: 400 14px/1.5 var(--cx-font) !important; color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-systems-note, .dse-quotes-note) a { color: var(--cx-link) !important; }
@media (max-width: 640px) {
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-systems-device { grid-template-columns: 12px 1fr; }
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-systems-status { grid-column: 2; text-align: left; }
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-scale { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-csat-option span { font-size: 11px !important; }
}
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.dse-csat-option, .dse-systems-cta, .dse-quotes-cta):focus-visible { outline: 3px solid rgba(56, 122, 192, .45) !important; outline-offset: 2px; }

/* ---------- quotes list ---------- */
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-item {
    display: flex; justify-content: space-between; gap: 18px; align-items: center;
    padding: 16px 20px !important; margin: 0 !important; border-top: 1px solid var(--cx-line); background: none !important;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-item:first-child { border-top: 0; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-type { font: 600 11px/1.3 var(--cx-font) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-muted) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-main strong { font: 600 16px/1.35 var(--cx-font) !important; color: var(--cx-ink) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-main small { font: 400 13px/1.4 var(--cx-font) !important; color: var(--cx-muted) !important; font-variant-numeric: tabular-nums; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-side { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-total { font: 650 17px/1 var(--cx-font) !important; color: var(--cx-ink) !important; font-variant-numeric: tabular-nums; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-status {
    padding: 5px 10px; border-radius: 999px; background: var(--cx-canvas) !important; color: var(--cx-muted) !important; font: 600 12px/1 var(--cx-font) !important;
}
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.is-issued, .is-viewed, .is-send_failed) .dse-quotes-status { background: #fff4dc !important; color: var(--cx-warn) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body :is(.is-signed, .is-acknowledged) .dse-quotes-status { background: #e6f4ec !important; color: var(--cx-ok) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .is-rejected .dse-quotes-status { background: #fdecea !important; color: var(--cx-alert) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-cta.is-quiet { background: #fff !important; color: var(--cx-ink) !important; border: 1px solid var(--cx-line-strong) !important; }
html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-cta.is-quiet:hover { background: var(--cx-canvas) !important; }
@media (max-width: 640px) {
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-item { flex-direction: column; align-items: stretch; }
    html:is(#dse-cx#dse-cx#dse-cx, *) body .dse-quotes-side { justify-content: space-between; flex-wrap: wrap; }
}