/* ================================================================
   Computer Care – AI Readiness Widget  v1.0.0
   ================================================================ */

.air-shell { background: #12102a; border-radius: 16px; padding: 22px 20px 24px; font-family: sans-serif; color: #fff; max-width: 1100px; margin: 0 auto; }
.air-eyebrow { font-size: 9.5px; font-weight: 700; color: #a09cb8; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.air-step-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.air-step-sub { font-size: 11.5px; color: #a09cb8; line-height: 1.5; margin-bottom: 14px; }

/* Step progress pips */
.air-steps { display: flex; gap: 6px; margin-bottom: 20px; }
.air-step-pip { height: 3px; flex: 1; border-radius: 2px; background: #3a3560; transition: background .3s; }
.air-step-pip.air-done   { background: #6b4b95; }
.air-step-pip.air-active { background: #89bd23; }

/* Staff row */
.air-staff-row { display: flex; align-items: center; gap: 14px; background: #1d193c; border-radius: 10px; padding: 12px 16px; border: 1.5px solid #3a3560; flex-wrap: wrap; margin-bottom: 18px; }
.air-staff-label { font-size: 10px; font-weight: 700; color: #a09cb8; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; }
.air-staff-slider { flex: 1; min-width: 100px; accent-color: #6b4b95; }
.air-staff-val { font-size: 17px; font-weight: 800; color: #fff; min-width: 72px; text-align: center; background: #12102a; border-radius: 8px; padding: 4px 10px; border: 1.5px solid #3a3560; }
.air-staff-val span { font-size: 10px; font-weight: 400; color: #a09cb8; display: block; }

/* Use case grid */
.air-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 8px; margin-bottom: 6px; }
.air-btn { background: #1d193c; border: 1.5px solid #3a3560; border-radius: 10px; padding: 11px 13px; cursor: pointer; text-align: left; transition: all .2s; display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.air-btn:hover  { border-color: #6b4b95; background: #1e1640; }
.air-btn.air-sel { border-color: #6b4b95; background: #1e1640; }
.air-btn-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.air-btn-body { flex: 1; }
.air-btn-name   { font-size: 12px; font-weight: 700; color: #e8e6f0; display: block; line-height: 1.35; }
.air-btn-hint   { font-size: 10.5px; color: #a09cb8; margin-top: 2px; display: block; line-height: 1.4; }
.air-btn-saving { font-size: 10.5px; font-weight: 700; color: #6b4b95; margin-top: 3px; display: block; }
.air-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #3a3560; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; margin-top: 2px; transition: all .2s; }
.air-btn.air-sel .air-check { background: #6b4b95; border-color: #6b4b95; color: #fff; }

/* Readiness gate buttons */
.air-gate-pair { display: flex; gap: 8px; margin-bottom: 8px; }
.air-gate-btn { flex: 1; border: 1.5px solid #3a3560; border-radius: 10px; padding: 10px 13px; cursor: pointer; font-size: 12px; font-weight: 700; transition: all .2s; background: #1d193c; color: #a09cb8; text-align: center; }
.air-gate-btn:hover          { border-color: #6b4b95; }
.air-gate-btn.air-gate-yes   { background: #101e08; border-color: #89bd23; color: #89bd23; }
.air-gate-btn.air-gate-no    { background: #1e1010; border-color: #c0392b; color: #ff6060; }

/* Score block */
.air-score-block { display: flex; align-items: center; gap: 12px; background: #1d193c; border-radius: 12px; padding: 16px 18px; border: 1.5px solid #3a3560; margin-bottom: 14px; flex-wrap: wrap; }
.air-score-ring { width: 72px; height: 72px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; border: 3px solid; }
.air-score-num  { font-size: 22px; font-weight: 800; line-height: 1; }
.air-score-lbl  { font-size: 8.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-top: 2px; }
.air-score-text { flex: 1; min-width: 160px; }
.air-score-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.air-score-desc  { font-size: 11.5px; color: #a09cb8; line-height: 1.55; }
.air-saving-pill { background: #12102a; border-radius: 10px; padding: 10px 14px; border: 1.5px solid #3a3560; text-align: center; min-width: 130px; }
.air-saving-lbl  { font-size: 9px; font-weight: 700; color: #a09cb8; text-transform: uppercase; letter-spacing: .7px; }
.air-saving-val  { font-size: 21px; font-weight: 800; color: #6b4b95; margin: 2px 0; }
.air-saving-sub  { font-size: 10px; color: #a09cb8; }

/* Use case result cards */
.air-usecase-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 14px; }
.air-uc-card   { background: #1d193c; border-radius: 10px; padding: 12px 14px; border: 1.5px solid #3a3560; }
.air-uc-icon   { font-size: 18px; margin-bottom: 6px; display: block; }
.air-uc-name   { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.air-uc-saving { font-size: 17px; font-weight: 800; color: #6b4b95; margin-bottom: 3px; }
.air-uc-desc   { font-size: 10.5px; color: #a09cb8; line-height: 1.5; }

/* Risk cards */
.air-risks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.air-risk-card      { border-radius: 10px; padding: 13px 15px; border: 1.5px solid; }
.air-risk-card.air-risk-high { border-color: #7a2020; background: #1e1010; }
.air-risk-card.air-risk-warn { border-color: #7a4a00; background: #1e1400; }
.air-risk-top   { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.air-risk-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.air-risk-high .air-risk-dot   { background: #ff4444; }
.air-risk-warn .air-risk-dot   { background: #f3963c; }
.air-risk-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }
.air-risk-high .air-risk-label { color: #ff6060; }
.air-risk-warn .air-risk-label { color: #f3963c; }
.air-risk-title { font-size: 12.5px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.air-risk-what  { font-size: 11px; color: #a09cb8; line-height: 1.5; margin-bottom: 6px; }
.air-risk-fix   { font-size: 11px; color: #89bd23; line-height: 1.5; padding-top: 6px; border-top: 1px solid #2a2650; }

/* Action plan */
.air-plan-section  { background: #1d193c; border-radius: 12px; border: 1.5px solid #6b4b95; overflow: hidden; margin-bottom: 14px; }
.air-plan-header   { padding: 13px 16px 11px; background: #6b4b9518; border-bottom: 1px solid #6b4b9544; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.air-plan-title    { font-size: 13px; font-weight: 700; color: #fff; }
.air-plan-sub      { font-size: 11px; color: #a09cb8; margin-top: 2px; }
.air-plan-count    { font-size: 12px; font-weight: 700; color: #6b4b95; background: #6b4b9522; border-radius: 20px; padding: 3px 10px; }
.air-plan-items    { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }

.air-plan-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1.5px solid #3a3560; background: #12102a; transition: all .2s; }
.air-plan-item.air-plan-confirmed { border-color: #89bd23; background: #101e08; }
.air-plan-item.air-plan-custom    { border-color: #6b4b9566; }

.air-plan-item-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #3a3560; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; transition: all .2s; margin-top: 1px; }
.air-plan-confirmed .air-plan-item-check { background: #89bd23; border-color: #89bd23; color: #12102a; }

.air-plan-item-body  { flex: 1; }
.air-plan-item-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; }
.air-plan-suggested .air-plan-item-label { color: #f3963c; }
.air-plan-custom    .air-plan-item-label { color: #6b4b95; }
.air-plan-confirmed .air-plan-item-label { color: #89bd23; }
.air-plan-item-text { font-size: 12px; color: #e8e6f0; line-height: 1.4; }
.air-plan-item-fix  { font-size: 10.5px; color: #a09cb8; margin-top: 3px; line-height: 1.4; }

.air-plan-remove { background: none; border: none; color: #3a3560; cursor: pointer; font-size: 14px; padding: 0 2px; flex-shrink: 0; line-height: 1; transition: color .2s; }
.air-plan-remove:hover { color: #ff6060; }

.air-plan-add       { padding: 10px 14px 14px; border-top: 1px solid #3a3560; }
.air-plan-add-label { font-size: 10px; font-weight: 700; color: #a09cb8; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 6px; }
.air-plan-add-row   { display: flex; gap: 8px; margin-top: 8px; }
.air-plan-input     { flex: 1; background: #12102a; border: 1.5px solid #3a3560; border-radius: 8px; padding: 8px 12px; font-size: 12px; color: #fff; outline: none; transition: border-color .2s; }
.air-plan-input:focus { border-color: #6b4b95; }
.air-plan-input::placeholder { color: #4a4870; }
.air-plan-add-btn   { background: #6b4b95; border: none; border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; }
.air-plan-add-btn:hover { opacity: .85; }

.air-plan-copy { width: 100%; padding: 10px; background: #12102a; border: 1.5px dashed #3a3560; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: #a09cb8; cursor: pointer; transition: all .2s; }
.air-plan-copy:hover         { border-color: #6b4b95; color: #6b4b95; }
.air-plan-copy.air-copied    { border-color: #89bd23; color: #89bd23; border-style: solid; }

/* CTA */
.air-cta       { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: #1d193c; border-radius: 10px; padding: 12px 16px; border: 1.5px solid #6b4b95; }
.air-cta-title { font-size: 13px; font-weight: 700; color: #fff; }
.air-cta-text p { font-size: 11.5px; color: #a09cb8; margin-top: 3px; }
.air-cta-btn   { border: none; border-radius: 8px; padding: 9px 18px; font-size: 12px; font-weight: 700; cursor: pointer; background: #6b4b95; color: #fff; white-space: nowrap; }
.air-cta-btn:hover { opacity: .85; }

/* Nav */
.air-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.air-nav-btn { border: 1.5px solid #3a3560; border-radius: 8px; padding: 8px 18px; font-size: 12px; font-weight: 700; cursor: pointer; background: transparent; color: #a09cb8; transition: all .2s; }
.air-nav-btn:hover          { border-color: #6b4b95; color: #fff; }
.air-nav-btn.air-primary    { background: #6b4b95; border-color: #6b4b95; color: #fff; }
.air-nav-btn.air-primary:hover { opacity: .85; }
.air-nav-btn:disabled       { opacity: .35; cursor: not-allowed; }
.air-nav-hint               { font-size: 10.5px; color: #a09cb8; }
.air-empty-hint             { font-size: 11px; color: #a09cb8; margin-top: 8px; font-style: italic; }

/* ── Responsive ── */
@media (max-width: 700px) {
    .air-shell         { padding: 14px 12px 18px; border-radius: 12px; }
    .air-grid          { grid-template-columns: 1fr; }
    .air-usecase-cards { grid-template-columns: 1fr; }
    .air-score-block   { flex-direction: column; align-items: flex-start; }
    .air-cta           { flex-direction: column; align-items: flex-start; }
    .air-cta-btn       { width: 100%; text-align: center; }
    .air-plan-add-row  { flex-direction: column; }
    .air-plan-add-btn  { width: 100%; }
    .air-plan-copy     { margin-top: 8px; }
}