/* AICC engine styles — fully scoped under .aicc-root. No bare element selectors.
   Brand colours come only from theme custom properties (--aicc-accent, --aicc-accent-2,
   --aicc-text, --aicc-bg, --aicc-surface, --aicc-font), applied inline by aicc.js from
   the client config. Alpha variants are derived with color-mix; only theme-neutral
   black/white scrims are written literally. No client-specific values in this file.

   Borders are the brand cyan (--aicc-accent-2); the indigo accent (--aicc-accent) is
   reserved for active/action states: selected complexity tint, checked checkbox fill,
   the Recommended pill, and the CTA. Minimum text size is 1rem (accessibility floor);
   question labels and headings scale up proportionally. */

/* ── Root ─────────────────────────────────────────────────────────────────── */

.aicc-root {
  background:  var(--aicc-bg);
  color:       var(--aicc-text);
  font-family: var(--aicc-font);
  box-sizing:  border-box;
}

.aicc-root *,
.aicc-root *::before,
.aicc-root *::after {
  box-sizing: inherit;
}

/* ── Questionnaire ────────────────────────────────────────────────────────── */

/* Three short inputs share the top row; complexity and models span full width. */
.aicc-root .aicc-form {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "workflow   volume     currency"
    "complexity complexity complexity"
    "models     models     models";
  gap:           1.5rem;
  margin-bottom: 2rem;
  padding:       1.5rem;
  border:        1px solid var(--aicc-accent-2);
  border-radius: 10px;
  background:    none;
}

.aicc-root #aicc-workflow-field { grid-area: workflow; }
.aicc-root #aicc-volume-field   { grid-area: volume; }
.aicc-root #aicc-currency-field { grid-area: currency; }
.aicc-root #aicc-size-field     { grid-area: complexity; }
.aicc-root #aicc-models-field   { grid-area: models; }

/* Bottom-align the three top-row controls so their boxes line up even when the
   labels wrap to a different number of lines (and they self-correct at any width). */
.aicc-root #aicc-workflow-field > :last-child,
.aicc-root #aicc-volume-field   > :last-child,
.aicc-root #aicc-currency-field > :last-child {
  margin-top: auto;
}

.aicc-root .aicc-field {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;          /* >= 0.5rem between a question label and its control */
}

.aicc-root .aicc-label {
  font-size:      1.125rem;         /* question text */
  font-weight:    600;
  letter-spacing: 0.01em;
  color:          var(--aicc-text);
}

/* ── Boxes (select, number input) ─────────────────────────────────────────── */

.aicc-root .aicc-box {
  background:    transparent;
  color:         var(--aicc-text);
  border:        1px solid var(--aicc-accent-2);
  border-radius: 6px;
  padding:       0.625rem 0.875rem;
  font-size:     1rem;
  font-family:   var(--aicc-font);
  width:         100%;
  appearance:    none;
  -webkit-appearance: none;
  outline:       none;
}

.aicc-root .aicc-select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.875rem center;
  padding-right:       2.25rem;
}

.aicc-root .aicc-box:focus {
  border-color: var(--aicc-accent-2);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--aicc-accent-2) 35%, transparent);
}

/* Number field: native spinner replaced with an on-brand chevron stepper that
   matches the select chevron (same thin white glyph). */
.aicc-root .aicc-number { position: relative; }

.aicc-root .aicc-number .aicc-box { padding-right: 2.75rem; }

.aicc-root input.aicc-input::-webkit-outer-spin-button,
.aicc-root input.aicc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.aicc-root input.aicc-input[type="number"] {
  -moz-appearance: textfield;
}

.aicc-root .aicc-stepper {
  position:       absolute;
  top:            1px;
  right:          1px;
  bottom:         1px;
  width:          2.25rem;
  display:        flex;
  flex-direction: column;
}

.aicc-root .aicc-step {
  flex:                1 1 50%;
  border:              0;
  background-color:    transparent;
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     11px 7px;
  border-radius:       5px;
  cursor:              pointer;
  padding:             0;
  transition:          background-color 0.15s;
}

.aicc-root .aicc-step:hover {
  background-color: color-mix(in srgb, var(--aicc-text) 10%, transparent);
}

.aicc-root .aicc-step[data-step="up"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 7l5-5 5 5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.aicc-root .aicc-step[data-step="down"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.aicc-root .aicc-microcopy {
  font-size:   1rem;
  font-weight: 300;
  color:       var(--aicc-text);
  margin:      0;
  line-height: 1.4;
}

/* ── Complexity control ───────────────────────────────────────────────────── */

.aicc-root .aicc-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap:     0.625rem;
}

.aicc-root .aicc-tier {
  display:        block;
  cursor:         pointer;
  border:         1px solid var(--aicc-accent-2);
  border-radius:  8px;
  padding:        0.75rem 0.875rem;
  background:     transparent;
  transition:     background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.aicc-root .aicc-tier:hover {
  background: color-mix(in srgb, var(--aicc-accent-2) 9%, transparent);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--aicc-accent-2) 55%, transparent);
  transform:  translateY(-2px);
}

.aicc-root .aicc-tier--selected {
  background: color-mix(in srgb, var(--aicc-accent) 16%, transparent);
}

.aicc-root .aicc-tier-radio {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.aicc-root .aicc-tier:has(.aicc-tier-radio:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aicc-accent) 40%, transparent);
}

.aicc-root .aicc-tier-label {
  display:     block;
  font-size:   1.0625rem;
  font-weight: 600;
  color:       var(--aicc-text);
}

.aicc-root .aicc-tier-helper {
  margin:       0.5rem 0 0;
  padding:      0;
  list-style:   none;
}

.aicc-root .aicc-tier-helper li {
  position:    relative;
  padding-left: 0.95rem;
  font-size:   0.9rem;
  font-weight: 300;
  line-height: 1.5;
  color:       color-mix(in srgb, var(--aicc-text) 65%, transparent);
}

.aicc-root .aicc-tier-helper li::before {
  content:  "";
  position: absolute;
  left:     0;
  top:      0.55em;
  width:    0.3rem;
  height:   0.3rem;
  border-radius: 50%;
  background: var(--aicc-accent-2);
}

/* ── Model checkboxes ─────────────────────────────────────────────────────── */

.aicc-root .aicc-checks {
  display:        flex;
  flex-direction: column;
  gap:            0.625rem;
}

/* Higher specificity than .aicc-check so the master control keeps its weight. */
.aicc-root .aicc-check.aicc-check--all {
  font-weight:    600;
  padding-bottom: 0.625rem;
  margin-bottom:  0.125rem;
  border-bottom:  1px solid color-mix(in srgb, var(--aicc-text) 12%, transparent);
}

.aicc-root .aicc-check-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);   /* each provider family on its own row */
  gap:                   0.625rem;
}

.aicc-root .aicc-check {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  cursor:      pointer;
  font-size:   0.9rem;
  font-weight: 300;
  color:       color-mix(in srgb, var(--aicc-text) 85%, transparent);
  user-select: none;
}

.aicc-root .aicc-check-input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.aicc-root .aicc-check-box {
  position:      relative;
  flex:          0 0 auto;
  width:         1.15rem;
  height:        1.15rem;
  border:        1px solid var(--aicc-accent-2);
  border-radius: 4px;
  background:    transparent;
  transition:    background 0.15s, border-color 0.15s;
}

/* Checked/indeterminate keep the indigo fill; the border stays cyan. */
.aicc-root .aicc-check-input:checked + .aicc-check-box,
.aicc-root .aicc-check-input:indeterminate + .aicc-check-box {
  background: var(--aicc-accent);
}

.aicc-root .aicc-check-input:checked + .aicc-check-box::after {
  content:      "";
  position:     absolute;
  left:         0.38rem;
  top:          0.14rem;
  width:        0.3rem;
  height:       0.6rem;
  border:       solid #fff;
  border-width: 0 2px 2px 0;
  transform:    rotate(45deg);
}

.aicc-root .aicc-check-input:indeterminate + .aicc-check-box::after {
  content:    "";
  position:   absolute;
  left:       0.24rem;
  right:      0.24rem;
  top:        50%;
  height:     2px;
  transform:  translateY(-50%);
  background: #fff;
}

.aicc-root .aicc-check-input:focus-visible + .aicc-check-box {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aicc-accent-2) 40%, transparent);
}

/* ── Results region ───────────────────────────────────────────────────────── */

.aicc-root .aicc-results:empty {
  display: none;
}

.aicc-root .aicc-heading {
  font-family:    var(--aicc-font-heading);
  font-size:      1.1875rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          color-mix(in srgb, var(--aicc-text) 60%, transparent);
  margin:         0 0 1.5rem;
}

/* ── Result cards ─────────────────────────────────────────────────────────── */

.aicc-root .aicc-cards {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  grid-auto-rows:        1fr;            /* every card matches the tallest in the view */
  gap:                   0.875rem;
  margin-bottom:         1.25rem;
}

.aicc-root .aicc-card {
  display:        flex;
  flex-direction: column;
  background:     transparent;
  border:         1px solid var(--aicc-accent-2);
  border-radius:  8px;
  padding:        1rem 1.125rem;
}

.aicc-root .aicc-pill-row {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.375rem;
  margin-bottom: 0.5rem;             /* >= 0.5rem between the pill row and the model name */
}

.aicc-root .aicc-pill {
  font-size:      0.625rem;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding:        0.15rem 0.7rem;
  border-radius:  999px;
  white-space:    nowrap;
}

.aicc-root .aicc-pill--low {
  background: var(--aicc-accent-2);
  color:      #06121a;
}

.aicc-root .aicc-pill--rec {
  background: var(--aicc-accent);
  color:      #fff;
}

.aicc-root .aicc-card-desc {
  font-size:   0.9rem;
  font-weight: 300;
  line-height: 1.45;
  color:       color-mix(in srgb, var(--aicc-text) 78%, transparent);
  margin:      0 0 0.625rem;
}

.aicc-root .aicc-card-name {
  font-size:      1.13rem;
  font-weight:    300;
  letter-spacing: 0.02em;
  color:          var(--aicc-accent-2);
  margin-bottom:  0.375rem;
}

.aicc-root .aicc-card-range {
  font-size:     1.375rem;
  font-weight:   600;
  color:         var(--aicc-text);
  margin-bottom: 0.25rem;
  line-height:   1.3;
}

.aicc-root .aicc-card-pertask {
  font-size: 1rem;
  color:     color-mix(in srgb, var(--aicc-text) 60%, transparent);
}

/* A newly selected card fades (and gently rises) in. */
@keyframes aicc-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.aicc-root .aicc-card--entering {
  animation: aicc-card-in 320ms ease-out;
}

/* ── Below-cards copy ─────────────────────────────────────────────────────── */

.aicc-root .aicc-footnote,
.aicc-root .aicc-stamp,
.aicc-root .aicc-disclaimer {
  font-size:   1rem;
  font-weight: 300;
  line-height: 1.5;
  margin:      0 0 0.75rem;
}

.aicc-root .aicc-footnote {
  color: var(--aicc-text);
}

.aicc-root .aicc-stamp,
.aicc-root .aicc-disclaimer {
  color: var(--aicc-text);
}

/* ── Assumptions panel ────────────────────────────────────────────────────── */

.aicc-root .aicc-assumptions {
  margin-bottom: 1rem;
}

.aicc-root .aicc-assumptions-btn {
  background:    transparent;
  border:        1px solid color-mix(in srgb, var(--aicc-text) 25%, transparent);
  border-radius: 4px;
  color:         color-mix(in srgb, var(--aicc-text) 70%, transparent);
  cursor:        pointer;
  font-size:     1rem;
  font-family:   var(--aicc-font);
  padding:       0.4rem 0.8rem;
  outline:       none;
}

.aicc-root .aicc-assumptions-btn:hover {
  border-color: color-mix(in srgb, var(--aicc-text) 45%, transparent);
  color:        var(--aicc-text);
}

.aicc-root .aicc-assumptions-btn:focus-visible {
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--aicc-accent-2) 40%, transparent);
  border-color: var(--aicc-accent-2);
}

/* Height + opacity transition via the grid-rows technique (no fixed height needed).
   The transition is read from the state being entered: closing uses the base rule
   (ease-out), opening uses the --open rule (ease-in). */
.aicc-root .aicc-assumptions-body {
  display:               grid;
  grid-template-rows:    0fr;
  opacity:               0;
  transition:            grid-template-rows 500ms ease-out, opacity 500ms ease-out;
}

.aicc-root .aicc-assumptions-body--open {
  grid-template-rows: 1fr;
  opacity:            1;
  transition:         grid-template-rows 500ms ease-in, opacity 500ms ease-in;
}

/* Padding lives on the inner permanently (clipped while collapsed) so it animates
   with the height instead of snapping in on open — that snap caused the jitter. */
.aicc-root .aicc-assumptions-inner {
  overflow:    hidden;
  min-height:  0;
  padding-top: 0.875rem;
}

.aicc-root .aicc-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.9rem;
  margin-bottom:   0.75rem;
}

.aicc-root .aicc-table th {
  text-align:    left;
  font-weight:   600;
  color:         var(--aicc-text);
  padding:       0.25rem 0.5rem 0.25rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--aicc-text) 12%, transparent);
}

.aicc-root .aicc-table td {
  padding:       0.3rem 0.5rem 0.3rem 0;
  font-weight:   300;
  color:         color-mix(in srgb, var(--aicc-text) 75%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--aicc-text) 8%, transparent);
}

.aicc-root .aicc-note {
  font-size:   0.9rem;
  font-weight: 300;
  color:       var(--aicc-text);
  margin:      0 0 0.75rem;
  line-height: 1.4;
}

/* ── CTA (stays indigo) ───────────────────────────────────────────────────── */

.aicc-root .aicc-cta {
  display:         inline-block;
  background:      var(--aicc-accent);
  color:           #fff;
  text-decoration: none;
  border-radius:   6px;
  padding:         0.625rem 1.25rem;
  font-size:       1rem;
  font-weight:     600;
  font-family:     var(--aicc-font);
  margin-top:      0.5rem;
  transition:      opacity 0.15s;
}

.aicc-root .aicc-cta:hover {
  opacity: 0.85;
}

.aicc-root .aicc-cta:focus-visible {
  outline:    none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aicc-accent) 45%, transparent);
}

/* ── Failure state ────────────────────────────────────────────────────────── */

.aicc-root .aicc-error {
  color:     color-mix(in srgb, var(--aicc-text) 70%, transparent);
  font-size: 1rem;
  margin:    0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .aicc-root .aicc-form {
    padding:               1.125rem;
    grid-template-columns: 1fr;
    grid-template-areas:
      "workflow"
      "complexity"
      "volume"
      "currency"
      "models";
  }
  .aicc-root .aicc-tiers { grid-template-columns: 1fr; }
  .aicc-root .aicc-check-grid { grid-template-columns: 1fr; }
  .aicc-root .aicc-cards { grid-template-columns: 1fr; }
}

/* ── Motion ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .aicc-root .aicc-tier,
  .aicc-root .aicc-assumptions-btn,
  .aicc-root .aicc-check-box,
  .aicc-root .aicc-cta,
  .aicc-root .aicc-step,
  .aicc-root .aicc-assumptions-body,
  .aicc-root .aicc-assumptions-body--open {
    transition: none;
  }
  .aicc-root .aicc-tier:hover {
    transform: none;
  }
  .aicc-root .aicc-card--entering {
    animation: none;
  }
}