/* Assistant Builder (/assistant-builder/); shared pieces in engine.css */
.ab-form{display:flex; flex-direction:column; gap:1rem}
.ab-pad{padding:0 0 1rem}
.ab .panel-body.ab-pad{padding:0 0 1rem}
.ab-purpose{min-height:5.5rem; font-size:1.08rem}
.ab-row{display:flex; flex-wrap:wrap; gap:1rem 1.6rem; padding:0 1.1rem}
.ab-row .field{display:flex; flex-direction:column; gap:.4rem}
.ab-more > summary{cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem}
.ab-more > summary::-webkit-details-marker{display:none}
.ab-more > summary small{font:400 var(--t-sm)/1.3 var(--f-ui); color:var(--ink-3)}
.ab-more > summary::after{content:"+"; margin-left:auto; font:300 1.4rem/1 var(--f-head); color:var(--ink-3)}
.ab-more[open] > summary::after{content:"\2212"}
.ab-fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem 1.2rem; padding:1rem 1.1rem 1.1rem}
@media (max-width:44rem){ .ab-fields{grid-template-columns:minmax(0,1fr)} }
.ab-fields .field{display:flex; flex-direction:column; gap:.35rem; min-width:0}
.ab-wide{grid-column:1 / -1}
.ab-checks{gap:.5rem !important}

/* the card, as people will meet it */
.ab-card{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1rem 1.3rem; align-items:start; padding:1.3rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:0 1px 0 var(--line-2)}
@media (max-width:44rem){ .ab-card{grid-template-columns:auto minmax(0,1fr)} .ab-card-side{grid-column:1 / -1} }
.ab-card-mark{width:3.4rem; height:3.4rem; border-radius:1rem; display:grid; place-items:center; font:400 1.8rem/1 var(--f-head); color:var(--on-accent); background:var(--accent)}
.ab-card-kind{font:500 var(--t-xs)/1.2 var(--f-ui); color:var(--ink-3); margin:0}
.ab-card h2{font:400 1.6rem/1.15 var(--f-head); color:var(--ink); margin:.15rem 0 0}
.ab-card-desc{font:400 1rem/1.5 var(--f-serif); color:var(--ink-2); margin-top:.35rem}
.ab-starters{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem}
.ab-starters li{font:500 var(--t-sm)/1.3 var(--f-ui); color:var(--ink); padding:.5rem .75rem; border:1px solid var(--line); border-radius:999px; background:var(--field)}
.ab-card-side{display:flex; gap:.6rem}
.ab-meter{display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:5rem; padding:.6rem .7rem; border-radius:var(--r-lg); background:var(--bg-2)}
.ab-meter b{font:300 1.6rem/1 var(--f-head); color:var(--ink); font-variant-numeric:tabular-nums}
.ab-meter span{font:500 var(--t-2xs)/1.2 var(--f-ui); color:var(--ink-3); margin-top:.25rem; text-align:center}
.ab-warn{margin-top:1rem}
.ab-warn p + p{margin-top:.4rem}

/* where each part goes */
.ab-steps{counter-reset:ab; display:flex; flex-direction:column; gap:1.3rem; margin-top:.6rem}
.ab-steps > li{counter-increment:ab; position:relative; padding-left:2.6rem}
.ab-steps > li::before{content:counter(ab); position:absolute; left:0; top:0; width:1.8rem; height:1.8rem; border-radius:50%; display:grid; place-items:center; font:600 var(--t-sm)/1 var(--f-ui); color:var(--ink); background:var(--bg-2); border:1px solid var(--line)}
.ab-steps h3{font:600 1.02rem/1.35 var(--f-ui); color:var(--ink); margin:.15rem 0 .2rem}
.ab-steps .hint{margin:0 0 .5rem}
.ab-copy{margin-top:.5rem}
.ab-copy-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.3rem}
.ab-prose{font-family:var(--f-serif); font-size:1rem}
.ab-files li,.ab-settings li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.1rem .7rem; padding:.55rem 0; border-top:1px solid var(--line-2)}
.ab-files li{grid-template-columns:minmax(0,1fr)}
.ab-files b,.ab-settings b{font:600 var(--t-sm)/1.35 var(--f-ui); color:var(--ink)}
.ab-files span{font:400 .95rem/1.45 var(--f-serif); color:var(--ink-2)}
.ab-files small,.ab-settings small{grid-column:-2; font:400 var(--t-sm)/1.45 var(--f-ui); color:var(--ink-3)}
.ab-sw{grid-row:1 / span 2; width:2rem; height:1.15rem; border-radius:999px; background:var(--line); position:relative; margin-top:.1rem}
.ab-sw::after{content:""; position:absolute; top:.15rem; left:.15rem; width:.85rem; height:.85rem; border-radius:50%; background:var(--panel); transition:left .2s}
.ab-settings li[data-on="true"] .ab-sw{background:var(--good)}
.ab-settings li[data-on="true"] .ab-sw::after{left:1rem}

/* what it is made of */
.ab-why{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.2rem 1.6rem; margin-top:.6rem}
.ab-why h4{font:600 var(--t-sm)/1.3 var(--f-ui); color:var(--ink); margin:0 0 .4rem}
.ab-prot li{display:flex; align-items:center; gap:.5rem; padding:.3rem 0; font:500 var(--t-sm)/1.35 var(--f-ui); color:var(--ink-2)}
.ab-prot i{width:1rem; height:1rem; border-radius:50%; border:1.5px solid var(--ink-4); flex:none; position:relative}
.ab-prot li[data-on="true"]{color:var(--ink)}
.ab-prot li[data-on="true"] i{border-color:var(--good); background:var(--good)}
.ab-prot li[data-on="true"] i::after{content:""; position:absolute; left:.28rem; top:.12rem; width:.25rem; height:.48rem; border:solid var(--panel); border-width:0 2px 2px 0; transform:rotate(45deg)}
.ab-jobs li{display:flex; flex-direction:column; padding:.35rem 0; border-top:1px solid var(--line-2); font:400 .98rem/1.4 var(--f-serif)}
.ab-jobs a{color:var(--accent)}
.ab-jobs small{font:400 var(--t-xs)/1.4 var(--f-ui); color:var(--ink-3)}
.ab-why p{font:400 .98rem/1.5 var(--f-serif); color:var(--ink-2); margin:0}

/* tests */
.ab-tests{counter-reset:t; border-top:1px solid var(--line)}
.ab-tests > li{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.4rem 1.2rem; padding:.8rem 0; border-bottom:1px solid var(--line)}
@media (max-width:44rem){ .ab-tests > li{grid-template-columns:minmax(0,1fr)} }
.ab-test-ask{display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; font:500 .98rem/1.45 var(--f-mono); font-size:.86rem; color:var(--ink)}
.ab-test-good{font:400 .98rem/1.45 var(--f-serif); color:var(--ink-2)}
.ab-test-good b{font:600 var(--t-sm)/1 var(--f-ui); color:var(--good)}
.ab-acts{margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line)}