/* 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}
}

/* the 3 prototype views (21 Oct 2026): framed app windows with sample data */
.aiv-views-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:8px}
.aiv-views-card{margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.aiv-views-frame{background:var(--tb-s1);border:1px solid var(--tb-hair);border-radius:12px;overflow:hidden;
  box-shadow:var(--tb-card-shadow)}
.aiv-views-head{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;background:var(--tb-s2);
  border-bottom:1px solid var(--tb-hair);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:.02em;color:var(--tb-mut)}
.aiv-views-head span:first-child{color:var(--tb-head);font-weight:600}
.aiv-views-body{padding:14px;font-size:14px;color:var(--tb-text);display:flex;flex-direction:column;gap:9px}
.aiv-views-table{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:auto}
.aiv-views-table th{text-align:left;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tb-mut);padding:0 6px 6px 0;border-bottom:1px solid var(--tb-hair)}
.aiv-views-table td{padding:7px 6px 7px 0;border-bottom:1px solid var(--tb-hair);overflow-wrap:anywhere;vertical-align:middle}
.aiv-views-table tr:last-child td{border-bottom:0}
.aiv-views-row{display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0}
.aiv-views-row > :first-child{min-width:0;overflow-wrap:anywhere}
.aiv-views-sub{font-size:12.5px;color:var(--tb-mut)}
.aiv-views-tier{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:999px;background:var(--tb-gold-tint);color:var(--tb-status-dev);white-space:nowrap}
.aiv-views-pill{display:inline-block;font-size:11.5px;font-weight:600;line-height:1.4;padding:2px 9px;border-radius:999px;white-space:nowrap}
.aiv-views-pill.is-ok{background:rgba(46,160,90,.14);color:#2e8b57}
.aiv-views-pill.is-wait{background:rgba(216,160,40,.16);color:#a87412}
.aiv-views-pill.is-draft{background:rgba(120,130,145,.16);color:var(--tb-mut)}
.aiv-views-cap{font-size:14.5px;line-height:1.5;margin:0;color:var(--tb-text)}
.aiv-views-note{font-size:12.5px;margin:4px 0 0;color:var(--tb-mut);font-style:italic}
@media(max-width:780px){.aiv-views-grid{grid-template-columns:1fr}}