/* aiv.css: styles that only the AIV Engine page needs. Loaded after site.css,
   enhance.css and tb-theme.css. Everything else on the page reuses site classes. */

:root{--tb-status-dev:#D8B36A}
html.tb-light{--tb-status-dev:#8A6B1F}

/* status pill: the .pill look plus a small dot in the "in development" colour */
.status-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 12px 5px 10px;
  background:var(--tb-gold-tint);color:var(--tb-status-dev)}
.status-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tb-status-dev);flex:0 0 auto}

/* classifier layout */
.aiv-classifier{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start}
.aiv-q{margin:0 0 18px}
.aiv-qtext{font-size:16.5px;line-height:1.45;margin:0 0 10px;color:var(--tb-text)}
.aiv-qtext b{color:var(--tb-teal);margin-right:4px}
.aiv-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:360px}
.aiv-opts .opt{justify-content:center;text-align:center;font-weight:600}
.aiv-q.is-off{opacity:.45}
.aiv-q.is-off .opt{cursor:default}

/* result panel */
.aiv-result{background:var(--tb-s1);border:1px solid var(--tb-hair);border-radius:12px;padding:26px;
  box-shadow:var(--tb-card-shadow)}
.aiv-result h3{font-size:24px;margin:10px 0 8px;color:var(--tb-head)}
.aiv-result > p{font-size:15.5px;line-height:1.55}
.aiv-result .form{margin-top:18px;padding:22px}
.aiv-result .aiv-thanks{margin-top:18px;font-weight:600;color:var(--tb-teal)}
.aiv-thanks{font-weight:600;color:var(--tb-teal)}

/* the 2 pilot cards, stacking on narrow screens */
.aiv-pilots{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.aiv-pilots .card h3{font-size:19px;line-height:1.3}

@media(max-width:820px){
  .aiv-classifier,.aiv-pilots{grid-template-columns:1fr}
}
@media(max-width:560px){
  .aiv-opts{max-width:none}
  .aiv-result{padding:20px}
}