.sai-provider-planner { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,72px); margin-top:clamp(72px,9vw,120px); padding:clamp(26px,4vw,50px); border:1px solid var(--lp-line); border-radius:24px; background:radial-gradient(ellipse at 0 0,light-dark(#ffe8c7,#50402b),transparent 70%),var(--lp-paper); }
.sai-planner-copy h2 { margin-top:18px; }.sai-planner-copy > p:not(.sai-lp-eyebrow) { margin-top:22px; color:var(--lp-muted); font-size:14px; }
.sai-planner-inputs { display:grid; gap:24px; margin-top:28px; }.sai-planner-inputs label { display:block; font-size:12px; font-weight:600; margin-bottom:10px; }.sai-planner-inputs input[type=number] { display:block; width:100%; min-height:52px; padding:10px 16px; border:1px solid var(--lp-line); border-radius:10px; color:var(--lp-ink); background:var(--lp-surface); font:600 24px/1.3 Inter,sans-serif; }.sai-planner-inputs input[type=range] { width:100%; margin:8px 0 0; height:32px; accent-color:var(--lp-accent); }.sai-planner-range-label { display:flex; justify-content:space-between; gap:10px; font-size:12px; }.sai-planner-range-label output { font-weight:600; color:var(--lp-accent); }.sai-planner-range-label span { color:var(--lp-muted); }
.sai-planner-days { border:0; padding:0; margin:22px 0 0; min-width:0; }.sai-planner-days legend { font-size:12px; font-weight:600; margin-bottom:12px; }.sai-planner-days > div { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }.sai-planner-days button { min-width:0; min-height:44px; padding:8px 0; border:1px solid var(--lp-line); border-radius:8px; color:var(--lp-muted); background:var(--lp-surface); font:600 10px/1.4 var(--sai-language-font,Inter,sans-serif); cursor:pointer; }.sai-planner-days button[aria-pressed=true] { color:light-dark(#943400,#ffbf87); background:light-dark(#ffdfb9,#614629); border-color:light-dark(#ce8a48,#9e7346); }
.sai-lp .sai-planner-note { color:var(--lp-muted); font-size:11px; line-height:1.8; margin-top:22px; }
.sai-capacity-chart { min-width:0; padding:clamp(20px,3vw,36px); border:1px solid light-dark(#e3c49b,#8a704b); border-radius:18px; background:var(--lp-surface); box-shadow:0 20px 40px -30px #54370c55; }.sai-capacity-chart figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:11px; color:var(--lp-muted); }.sai-capacity-chart figcaption > span:first-child { color:var(--lp-ink); font-weight:600; }
.sai-capacity-total { display:flex; align-items:center; gap:16px; margin-top:26px; }.sai-capacity-total strong { color:var(--lp-accent); font-size:clamp(42px,5vw,68px); line-height:1; letter-spacing:-.06em; font-weight:580; font-variant-numeric:tabular-nums; }.sai-capacity-total > span { font-size:11px; color:var(--lp-muted); }.sai-capacity-chart > p:not(.sai-planner-note,.sai-lp-sr) { margin-top:12px; font-size:11px; color:var(--lp-muted); }
.sai-capacity-plot { position:relative; margin-top:40px; padding-inline-start:34px; }.sai-capacity-axis { position:absolute; inset:0 auto 25px 0; display:flex; flex-direction:column; justify-content:space-between; font-size:9px; color:var(--lp-muted); }.sai-capacity-bars { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; background:repeating-linear-gradient(to top,transparent 0,transparent calc(50% - 1px),var(--lp-line) 50%); }.sai-capacity-day { min-width:0; text-align:center; }.sai-capacity-day svg { display:block; width:100%; height:190px; stroke:none; }.sai-capacity-track { fill:light-dark(#f0e9de,#4b463c); }.sai-capacity-fill { transition:y 280ms ease,height 280ms ease; }.sai-capacity-day > span { display:block; margin-top:9px; font-size:10px; color:var(--lp-muted); }
.sai-capacity-key { display:flex; flex-wrap:wrap; gap:10px 18px; font-size:10px; color:var(--lp-muted); margin-top:22px; }.sai-capacity-key > span { display:flex; align-items:center; gap:7px; }.sai-capacity-key i { width:7px; height:7px; background:#ee8137; border-radius:2px; }.sai-capacity-key > span:last-child i { background:light-dark(#ded4c4,#777063); }.sai-capacity-summary { display:flex; justify-content:space-between; gap:10px; margin-top:28px; padding-top:20px; border-top:1px solid var(--lp-line); font-size:11px; }.sai-capacity-summary > span { color:var(--lp-muted); }.sai-capacity-summary strong { font-weight:600; }
@media(max-width:850px){.sai-provider-planner { grid-template-columns:1fr; }.sai-planner-copy { max-width:560px; }}
@media(max-width:600px){.sai-provider-planner { padding:24px 17px; gap:28px; margin-top:64px; border-radius:18px; }.sai-capacity-chart { padding:22px 16px; }.sai-planner-days > div { gap:4px; }.sai-planner-days button { font-size:9px; }.sai-capacity-bars { gap:4px; }.sai-capacity-day svg { height:160px; }.sai-capacity-day > span { font-size:8px; }.sai-capacity-plot { padding-inline-start:24px; }.sai-capacity-total { gap:12px; }.sai-capacity-total strong { font-size:42px; }.sai-capacity-total > span { font-size:10px; }}

/* A compact hardware/rate form, with the monetary result leading the chart. */
.sai-provider-planner { align-items:start; }
.sai-provider-planner :is(input,select,button,summary):focus-visible { outline:2px solid var(--lp-accent); outline-offset:4px; }
.sai-planner-inputs { gap:20px; }
.sai-planner-inputs select { display:block; width:100%; max-width:100%; min-height:52px; padding:12px 32px 12px 14px; border:1px solid var(--lp-line); border-radius:10px; background:var(--lp-surface); color:var(--lp-ink); font:600 15px/1.4 var(--sai-language-font,Inter,sans-serif); cursor:pointer; }
.sai-planner-hardware-row { display:grid; grid-template-columns:minmax(75px,.6fr) minmax(0,1.4fr); align-items:end; gap:20px; }
.sai-planner-speed { display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:10px; font-size:10px; line-height:1.6; color:var(--lp-muted); }
.sai-planner-speed > span:first-child { color:var(--lp-accent); }
.sai-planner-rates { margin:24px 0 0; padding:0; border:0; min-width:0; }
.sai-planner-rates legend { width:100%; display:flex; justify-content:space-between; gap:8px; font-size:12px; font-weight:600; margin-bottom:12px; }
.sai-planner-rates legend > span { font-size:10px; color:var(--lp-muted); font-weight:400; }
.sai-planner-rate-grid,.sai-planner-tps-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.sai-planner-rate-grid label,.sai-planner-tps-grid label { display:block; margin-bottom:8px; font-size:11px; color:var(--lp-muted); }
.sai-planner-money-field { display:flex; align-items:center; border:1px solid var(--lp-line); border-radius:10px; background:var(--lp-surface); padding-inline-start:14px; color:var(--lp-muted); }
.sai-planner-money-field input { width:100%; min-width:0; min-height:48px; padding:10px; background:transparent; border:0; color:var(--lp-ink); font:600 18px/1.4 var(--sai-language-font,Inter,sans-serif); }
.sai-planner-rates > p { margin-top:9px; color:var(--lp-muted); font-size:10px; line-height:1.6; }
.sai-planner-assumptions { margin-top:22px; border-top:1px solid var(--lp-line); }
.sai-planner-assumptions summary { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding-block:14px; gap:12px; font-size:12px; font-weight:600; cursor:pointer; list-style:none; }
.sai-planner-assumptions summary::-webkit-details-marker { display:none; }
.sai-planner-assumptions summary > span { font-size:20px; color:var(--lp-accent); transition:transform 160ms ease; }
.sai-planner-assumptions[open] summary > span { transform:rotate(45deg); }
.sai-planner-assumptions-body { padding-block:4px 10px; }
.sai-planner-assumptions-body p { margin:0 0 16px; color:var(--lp-muted); font-size:11px; line-height:1.75; }
.sai-planner-assumptions-body p:first-child { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; color:var(--lp-ink); }
.sai-planner-tps-grid { margin-bottom:14px; }
.sai-planner-tps-grid input { width:100%; min-width:0; min-height:44px; padding:10px; border:1px solid var(--lp-line); border-radius:8px; background:var(--lp-surface); color:var(--lp-ink); font:500 16px/1.4 var(--sai-language-font,Inter,sans-serif); }
.sai-planner-assumptions-body > label { display:flex; justify-content:space-between; gap:10px; font-size:12px; font-weight:600; }
.sai-planner-assumptions-body output { color:var(--lp-accent); }
.sai-planner-assumptions-body input[type=range] { width:100%; margin:8px 0 12px; height:32px; accent-color:var(--lp-accent); }
.sai-planner-assumptions-body a { display:inline-flex; gap:12px; align-items:center; min-height:44px; color:var(--lp-accent); font-size:12px; text-underline-offset:3px; }
.sai-capacity-chart { margin:0; }
.sai-capacity-revenue { margin-top:28px; }
.sai-capacity-revenue strong { display:block; max-width:100%; color:var(--lp-accent); font:600 clamp(34px,4.5vw,66px)/1.15 var(--sai-language-font,Inter,sans-serif); letter-spacing:-.05em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.sai-capacity-revenue > span { display:block; margin-top:8px; font-size:12px; color:var(--lp-muted); }
.sai-capacity-chart > .sai-capacity-load { display:inline-flex; align-items:center; gap:7px; color:var(--lp-ink); font-size:10px; margin-top:20px; }
.sai-capacity-load::before { content:''; width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:var(--lp-accent); }
.sai-capacity-chart > .sai-capacity-gross-note { font-size:10px; line-height:1.7; margin-top:8px; }
.sai-capacity-revenue-parts { display:grid; gap:12px; margin-top:24px; padding-block:18px; border-top:1px solid var(--lp-line); border-bottom:1px solid var(--lp-line); }
.sai-capacity-revenue-parts > div { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 12px; font-size:11px; color:var(--lp-muted); }
.sai-capacity-revenue-parts strong { color:var(--lp-ink); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.sai-capacity-schedule-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:28px; font-size:10px; color:var(--lp-muted); }
.sai-capacity-schedule-heading > span:first-child { font-weight:600; color:var(--lp-ink); }
.sai-capacity-schedule-heading strong { color:var(--lp-accent); font-weight:600; }
.sai-capacity-plot { margin-top:24px; padding-inline-start:30px; }
.sai-capacity-axis { inset-inline:0 auto; }
.sai-capacity-summary { flex-wrap:wrap; font-size:10px; gap:8px; margin-top:20px; padding-top:16px; }
.sai-capacity-day svg { height:156px; }
.sai-capacity-chart .sai-planner-note { margin-top:18px; font-size:10px; line-height:1.75; }
@media (max-width:600px) { .sai-provider-planner { padding:24px 16px; }.sai-planner-hardware-row { gap:16px; }.sai-planner-inputs select { font-size:16px; }.sai-capacity-chart { padding:24px 16px; }.sai-capacity-revenue strong { font-size:36px; }.sai-planner-rate-grid { gap:10px; }.sai-planner-days button { font-family:var(--sai-language-font,Inter,sans-serif); }.sai-capacity-bars { gap:4px; }.sai-capacity-plot { padding-inline-start:24px; } }
@media (prefers-reduced-motion:reduce) { .sai-capacity-fill,.sai-planner-assumptions summary > span { transition:none; } }

.sai-capacity-chart figcaption .sai-capacity-model { flex-basis:100%; margin-top:5px; font-size:11px; color:var(--lp-muted); }