/* Azure SQL cost and waste calculator. Site palette, standalone page. */

/* These tool pages have no hero image, so the site's fixed header overlay has
   nothing to sit on and would float over the content. Pin it in the flow. */
.cc-page .page-header { position: relative; background: #003469; }
.cc-page .page-header__top {
  position: static;
  padding: 1.6rem 0;
  background: #003469;
}

.cc-intro { padding: clamp(5.2rem, 5vw, 8rem) 0; background: linear-gradient(112deg, #003e73 0%, #000e3c 100%); color: #fff; }
.cc-intro h1 {
  color: #fff;
  max-width: 20ch;
  font-size: var(--font-size--xxxl);
  line-height: .98;
  text-wrap: balance;
}
.cc-intro .cb__kicker { color: #00abb6; }
.cc-lead { max-width: 64rem; margin-bottom: 1.6rem; color: rgba(255,255,255,.9); font-size: var(--font-size); line-height: 1.35; }
.cc-note { max-width: 64rem; margin: 0; color: rgba(255,255,255,.7); font-size: var(--font-size--xs); line-height: 1.4; }

.cc-tool { padding: clamp(5.2rem, 5vw, 8rem) 0; background: #f3f6f9; }
.cc-layout { display: grid; gap: clamp(2.4rem, 4vw, 4rem); align-items: start; }

.cc-subhead { margin: 0 0 1.6rem; font-size: var(--font-size--xl); line-height: 1.1; }
.cc-form .cc-subhead { font-size: var(--font-size--m); margin-bottom: 1.2rem; }
.cc-form .cc-subhead--rows { margin-bottom: .4rem; }
.cc-rows-note { margin: 0 0 1.2rem; color: #42536a; font-size: var(--font-size--xs); line-height: 1.4; }
.cc-form .cc-subhead:not(:first-child) { margin-top: 2.4rem; }

.cc-form {
  padding: clamp(2.4rem, 3vw, 3.2rem);
  border-radius: 1.6rem;
  background: #fff;
  box-shadow: 0 1.2rem 3.2rem rgba(0,52,105,.08);
}
.cc-field { display: grid; gap: .6rem; margin-bottom: 1.6rem; }
.cc-field > span { font-weight: 700; color: #003469; }
.cc-field small { color: #42536a; font-size: var(--font-size--xs); }
.cc-field input,
.cc-field select {
  padding: 1.2rem 1.4rem;
  border: 1px solid #dce5ed;
  border-radius: 1.2rem;
  background: #fff;
  color: #1e1e1e;
  font-family: inherit;
  font-size: var(--font-size--s);
}
.cc-field input:focus-visible,
.cc-field select:focus-visible { outline: none; border-color: #00abb6; box-shadow: 0 0 0 3px rgba(0,171,182,.3); }
.cc-pair { display: grid; gap: 1.8rem; }

.cc-output {
  padding: clamp(2.4rem, 3vw, 3.2rem);
  border-radius: 1.6rem;
  background: #000e3c;
  color: #fff;
}
.cc-output .cb__kicker { color: #f99f3f; }
.cc-output .cc-subhead { color: #fff; margin-top: 3rem; }
.cc-empty { color: rgba(255,255,255,.75); }

.cc-total {
  margin: .4rem 0 .2rem;
  font-family: "PT Sans Narrow", Verdana, sans-serif;
  font-size: clamp(3.6rem, 4vw, 5.2rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cc-range {
  margin: .4rem 0 .2rem;
  color: #f99f3f;
  font-family: "PT Sans Narrow", Verdana, sans-serif;
  font-size: clamp(3rem, 3.4vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cc-sub { margin: 0; color: rgba(255,255,255,.72); font-size: var(--font-size--s); }
.cc-saving { margin-top: 2.8rem; padding-top: 2.4rem; border-top: 1px solid rgba(255,255,255,.16); }

.cc-levers { margin: 0; padding: 0; list-style: none; }

.cc-next { margin-top: 3rem; padding-top: 2.4rem; border-top: 1px solid rgba(255,255,255,.16); }
.cc-next h3 { color: #fff; margin: 0 0 1rem; font-size: var(--font-size--m); }
.cc-next p { color: rgba(255,255,255,.8); }
.cc-enquiry { display: grid; gap: 1.4rem; margin-top: 1.8rem; }
.cc-enquiry label { display: grid; gap: .6rem; font-weight: 700; color: #fff; }
.cc-enquiry input {
  padding: 1.2rem 1.4rem; border: 1px solid rgba(255,255,255,.25); border-radius: 1.2rem;
  background: rgba(255,255,255,.06); color: #fff;
  font-family: inherit; font-size: var(--font-size--s);
}
.cc-enquiry input:focus-visible { outline: none; border-color: #f99f3f; box-shadow: 0 0 0 3px rgba(249,159,63,.3); }
.cc-enquiry .button { background: #f99f3f !important; color: #000e3c !important; }
.cc-enquiry .form-note { color: rgba(255,255,255,.6); }
.cc-enquiry .form-note a { color: rgba(255,255,255,.85); }
.cc-label-text small { font-weight: 400; color: rgba(255,255,255,.6); }
.hp { position: absolute; left: -9999px; }

.cc-method { padding: clamp(5.2rem, 5vw, 8rem) 0; }
.cc-method-list { margin: 0; padding: 0; list-style: none; max-width: 76rem; }
.cc-method-list li { padding: 1.2rem 0; border-top: 1px solid #dce5ed; color: #42536a; }
.cc-method-list strong { color: #003469; }
.cc-method-detail { max-width: 76rem; margin-top: 1.2rem; }
.cc-method-detail > summary { cursor: pointer; font-weight: 700; color: #003469; padding: .6rem 0; }
.cc-method-detail[open] > summary { margin-bottom: .4rem; }
.cc-method-detail .cc-method-list li:first-child { border-top: 0; }
.cc-method-list a { color: #003469; }

@media (min-width: 769px) {
  .cc-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .cc-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.cc-perserver { margin: .4rem 0 0; color: rgba(255,255,255,.55); font-size: var(--font-size--xs); }
.cc-good { margin: .6rem 0 0; color: #fff; font-size: var(--font-size--m); line-height: 1.4; }
.cc-sub--monthly { margin-bottom: .8rem; color: #fff; font-weight: 700; }

.cc-scope {
  max-width: 64rem;
  margin: 0 0 1.6rem;
  padding: 1.2rem 1.6rem;
  border-left: 3px solid #00abb6;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size: var(--font-size--s);
  line-height: 1.4;
}
.cc-scope strong { color: #fff; }

.cc-waiting__title {
  margin: .4rem 0 1rem;
  font-family: "PT Sans Narrow", Verdana, sans-serif;
  font-size: var(--font-size--m);
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}
.cc-waiting__text { margin: 0; max-width: 46rem; color: rgba(255,255,255,.72); }

/* Stacked bar: annual spend split by what each change recovers */
.cc-chart { margin: 0 0 2.4rem; }
.cc-chart figcaption { margin-bottom: 1.2rem; color: rgba(255,255,255,.72); font-size: var(--font-size--s); }
.cc-bar {
  display: flex;
  height: 3.2rem;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #33456b;
}
.cc-bar__seg { display: block; height: 100%; min-width: 2px; transition: width .3s ease; }
.cc-bar__seg--kept { background: #33456b; }
@media (prefers-reduced-motion: reduce) { .cc-bar__seg { transition: none; } }

.cc-enquiry .cc-label-text small,
.cc-field small { font-size: var(--font-size--xs); }

/* Server-count sliders */
.cc-sliders { display: grid; gap: 1.8rem; }
.cc-slider__label { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; }
.cc-slider__label output {
  min-width: 3.2rem;
  padding: .2rem 1rem;
  border-radius: 1.2rem;
  background: #003469;
  color: #fff;
  font-family: "PT Sans Narrow", Verdana, sans-serif;
  font-size: var(--font-size--s);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.cc-slider input[type="range"] {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: #00abb6;
  cursor: pointer;
}
.cc-slider input[type="range"]:focus-visible { outline: 2px solid #00abb6; outline-offset: 4px; }

/* Component breakdown under the headline figure */
.cc-breakdown { margin: 1.6rem 0 0; padding: 0; list-style: none; max-width: 40rem; }
.cc-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  padding: .7rem 0;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
  font-size: var(--font-size--xs);
}
.cc-breakdown li span:last-child { color: rgba(255,255,255,.9); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tag for savings that need validation before they count */
.cc-check-tag {
  display: inline-block;
  margin-left: .6rem;
  padding: .1rem .7rem;
  border-radius: 1.2rem;
  background: rgba(249,159,63,.16);
  color: #f99f3f;
  font-size: var(--font-size--xxs);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Compact checklist rows: question on the left, answer on the right */
.cc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 1.6rem 0;
  border-top: 1px solid #dce5ed;
}
.cc-row:last-of-type { border-bottom: 1px solid #dce5ed; margin-bottom: 1.6rem; }
.cc-row[hidden] { display: none; }
.cc-row--sub { padding-left: 1.6rem; border-top-style: dashed; }
.cc-row__text { display: grid; gap: .4rem; min-width: 0; }
.cc-row__text > span { font-weight: 700; color: #003469; line-height: 1.25; }

/* Below tablet the pills go under the question and share the full width. */
@media (max-width: 640px) {
  .cc-row { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .cc-row .cc-seg { width: 100%; }
  .cc-row .cc-seg label { flex: 1; }
  .cc-row .cc-seg span { text-align: center; white-space: normal; padding-left: .8rem; padding-right: .8rem; }
}

/* Segmented button groups replace the dropdowns: one tap, and the current
   answer is visible without opening anything. */
.cc-seg {
  display: inline-flex;
  border: 1px solid #dce5ed;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #fff;
}
.cc-seg--wide { display: flex; width: 100%; }
.cc-seg--wide label { flex: 1; }
.cc-seg--wide span { text-align: center; }
.cc-seg label { position: relative; display: block; margin: 0; }
.cc-seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.cc-seg span {
  display: block;
  padding: .9rem 1.5rem;
  color: #42536a;
  font-size: var(--font-size--xs);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cc-seg label + label span { border-left: 1px solid #dce5ed; }
.cc-seg label:hover span { background: #f3f6f9; }
.cc-seg input:checked + span { background: #003469; color: #fff; }
.cc-seg input:focus-visible + span { outline: 2px solid #00abb6; outline-offset: -3px; }
/* "Done" reads as progress banked, so it gets the positive accent. */
.cc-row .cc-seg label.is-done input:checked + span { background: #00abb6; }
@media (prefers-reduced-motion: reduce) { .cc-seg span { transition: none; } }

/* Savings list: doubles as the chart key, opens for the reasoning */
.cc-levers li + li { border-top: 1px solid rgba(255,255,255,.12); }
.cc-lever { display: block; }
.cc-lever summary,
.cc-lever--kept {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  padding: 1.1rem 0;
  list-style: none;
  cursor: pointer;
}
.cc-lever--kept { cursor: default; }
.cc-lever summary::-webkit-details-marker { display: none; }
.cc-lever summary:hover .cc-lever__label { color: #fff; }
.cc-lever summary:focus-visible { outline: 2px solid #f99f3f; outline-offset: 2px; }
.cc-lever__dot { width: 1.1rem; height: 1.1rem; border-radius: .4rem; }
.cc-lever__label { color: rgba(255,255,255,.85); font-size: var(--font-size--s); }
.cc-lever--kept .cc-lever__label { color: rgba(255,255,255,.6); }
.cc-lever__amount {
  color: #f99f3f;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cc-lever--kept .cc-lever__amount { color: rgba(255,255,255,.6); font-weight: 400; }
.cc-lever summary .cc-lever__label::after {
  content: "";
  display: inline-block;
  width: .6rem;
  height: .6rem;
  margin-left: .8rem;
  border-right: 2px solid rgba(255,255,255,.45);
  border-bottom: 2px solid rgba(255,255,255,.45);
  transform: translateY(-.2rem) rotate(45deg);
  transition: transform .15s ease;
}
.cc-lever[open] summary .cc-lever__label::after { transform: translateY(.1rem) rotate(-135deg); }
.cc-lever__body { display: grid; gap: .8rem; padding: 0 0 1.4rem 2.3rem; }
.cc-lever__note { color: rgba(255,255,255,.78); font-size: var(--font-size--xs); line-height: 1.45; }
.cc-lever__tech { color: rgba(255,255,255,.5); font-size: var(--font-size--xs); }
.cc-lever__caveat { color: rgba(255,255,255,.5); font-size: var(--font-size--xs); font-style: italic; }
.cc-lever--none { display: block; padding: 1.4rem 0; }
.cc-lever--none strong { display: block; margin-bottom: .6rem; color: #00abb6; }
.cc-lever--none span { color: rgba(255,255,255,.75); font-size: var(--font-size--xs); }
@media (prefers-reduced-motion: reduce) { .cc-lever summary .cc-lever__label::after { transition: none; } }