/* W2 AI savings calculator — varianten compact en full. Prefix .w2- */

.w2 { min-width: 0; font-variant-numeric: tabular-nums; }

/* Full: invoer links, resultaat rechts (sticky) */
.w2-layout {
    display: grid; gap: 22px 32px; align-items: start;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "s1 res" "s2 res" "s4 res";
}
.w2-step-1 { grid-area: s1; }
.w2-step-2 { grid-area: s2; }
.w2-step-4 { grid-area: s4; }
.w2-result-col { grid-area: res; align-self: stretch; }
.w2-result-card { position: sticky; top: calc(var(--header-height) + 16px); }
@media (max-width: 1023px) {
    .w2-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "s1" "s2" "res" "s4"; }
    .w2-result-card { position: static; }
}

.w2-step { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 26px; min-width: 0; }
.w2-step:focus { outline: none; }
.w2-step-title { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 750; margin: 0 0 16px; }
.w2-step-num { width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.w2-result-card { background: var(--color-surface-blue); border-color: #cfdcf6; }
@media (max-width: 767px) { .w2-step { padding: 20px 16px; border-radius: 18px; } .w2-step-title { font-size: 17.5px; } }

/* Stap 1 */
.w2-search { margin-bottom: 14px; }
.w2-combo { position: relative; min-width: 0; }
.w2-combo-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-md); max-height: 340px; overflow-y: auto; }
.w2-combo-list [role="option"] { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; cursor: pointer; line-height: 1.4; }
.w2-combo-list [role="option"]:hover, .w2-combo-list [role="option"][aria-selected="true"] { background: var(--color-surface-blue); }
.w2-combo-title { font-size: 14.5px; font-weight: 650; color: var(--color-text-primary); }
.w2-combo-meta { font-size: 12.5px; color: var(--color-text-muted); }
.w2-combo-empty { padding: 10px 12px; font-size: 14px; color: var(--color-text-muted); }
.w2-uc { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 16px; padding: 16px 18px; }
.w2-uc-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.w2-uc-title a { color: var(--color-text-primary); }
.w2-uc-meta { margin: 0 0 8px; font-size: 13.5px; color: var(--color-text-muted); }
.w2-uc-bench { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); }
.w2-sk-uc { height: 92px; border-radius: 16px; }

/* Stap 2 */
.w2-grid-numbers { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.w2-grid-ranges { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
@media (max-width: 767px) { .w2-grid-numbers, .w2-grid-ranges { grid-template-columns: minmax(0, 1fr); } }
.w2-field .s-help { margin: 0; }
.w2-input { font-variant-numeric: tabular-nums; }
.w2-range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.w2-range-value { font-weight: 750; font-size: 15px; color: var(--color-primary); min-width: 2.5em; text-align: right; }
.w2-range { width: 100%; accent-color: var(--color-primary); min-height: 32px; margin: 0; cursor: pointer; }

/* Stap 3 */
.w2-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.w2-tile { background: #fff; border-radius: 14px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; border: 1px solid var(--color-border); }
.w2-tile-mid { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.w2-tile-label { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted); }
.w2-tile-mid .w2-tile-label { color: #DCE7FF; }
.w2-tile-pct { font-weight: 600; text-transform: none; letter-spacing: 0; }
.w2-tile-value { font-size: 20px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.w2-tile-mid { padding: 16px; }
.w2-tile-mid .w2-tile-value { font-size: 26px; }
.w2-hours { margin: 14px 0 10px; font-size: 15px; font-weight: 650; color: var(--color-text-primary); }
.w2-formula { margin: 0 0 16px; background: var(--color-text-primary); color: #fff; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; font-weight: 600; overflow-wrap: anywhere; }
.w2-warning { padding: 14px 16px; }
.w2-warning p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); }
.w2-empty { margin: 0; color: var(--color-text-secondary); font-size: 15px; }
.is-stale { opacity: .45; }

/* Stap 4 */
.w2-report-text { margin: 0 0 16px; color: var(--color-text-secondary); font-size: 15.5px; }
.w2-report { gap: 14px; }
.w2-success p { margin: 0 0 14px; font-size: 16px; font-weight: 600; }

/* Mobiele resultaatbalk */
.w2-bar { padding: 0; }
.w2-bar-button { width: 100%; min-height: 56px; border: 0; background: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px var(--gutter); cursor: pointer; text-align: left; }
.w2-bar-label { font-size: 13.5px; font-weight: 650; color: var(--color-text-secondary); }
.w2-bar-value { font-size: 17px; font-weight: 800; color: var(--color-primary); white-space: nowrap; }
@media (min-width: 1024px) { .w2-bar { display: none; } }

/* Compact */
.w2-compact-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 24px; display: grid; gap: 16px; min-width: 0; }
.w2-usecase-compact .w2-uc { padding: 12px 14px; }
.w2-usecase-compact .w2-uc-title { font-size: 15px; }
.w2-usecase-compact .w2-uc-bench { font-size: 13px; }
.w2-grid-compact { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.w2-grid-compact .s-label { font-size: 13.5px; line-height: 1.35; }
.w2-compact-card .w2-grid-ranges { margin-top: 14px; }
@media (max-width: 600px) { .w2-grid-compact { grid-template-columns: minmax(0, 1fr); } }
.w2-more-toggle { margin-top: 12px; border: 0; background: none; padding: 4px 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--color-primary); cursor: pointer; }
.w2-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.w2-more-toggle[aria-expanded="true"] .w2-caret { transform: rotate(-135deg) translateY(-2px); }
.w2-line { margin: 0; background: var(--color-surface-blue); border-radius: 14px; padding: 14px 16px; font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); }
.w2-line-title { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); }
.w2-line-values strong { color: var(--color-text-primary); font-weight: 800; white-space: nowrap; }
.w2-full-link { font-size: 15px; justify-self: start; }
@media (max-width: 767px) { .w2-compact-card { padding: 18px 16px; } }