/* spd-2401-carfax.bts.css -- Behind the Scenes surface (SPD-2400)

   Pairs with spd-2401-carfax.bts.js. Its own file because this is a separate
   surface with no rules in common with the rail panel - a change here should
   not re-emit the panel's stylesheet, which is the same reason the Work Order
   stylesheet is six parts.

   Every selector is .cfx-, tokens only, no literal colour but #fff on a solid
   fill. The container itself (.cfx-surface) is defined in spd-2401-carfax.css.

   ONE ADDITION TO THE DESIGN SYSTEM: a monospace stack. The Work Order
   stylesheet has no mono token because nothing in the WO view needs one; this
   surface shows a pipe-delimited file, VINs, field names and regex sources,
   all of which have to be read character by character. Scoped to this file so
   it cannot leak into the shared parts. -------------------------------- */

.cfx-surface{
  --cfx-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}
.cfx-bts-wrap{display:flex;flex-direction:column;gap:26px;max-width:1180px;}

/* ---------- lead ---------- */
.cfx-lead{display:flex;gap:12px;align-items:flex-start;background:var(--green-15);border:1px solid var(--green-15);border-radius:8px;padding:16px 18px;}
.cfx-lead iconify-icon{font-size:22px;color:var(--green);flex-shrink:0;margin-top:2px;}
.cfx-lead .t{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px;}
.cfx-lead .s{font-size:13px;color:var(--text);line-height:1.6;opacity:.85;}

/* ---------- section shell ---------- */
.cfx-sect-h{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;}
.cfx-sect-n{font-size:11px;font-weight:700;color:var(--text-disabled);letter-spacing:.5px;}
.cfx-sect-t{margin:0;font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.cfx-sect-sub{font-size:12.5px;color:var(--text-secondary);margin-bottom:12px;}
.cfx-card{background:var(--paper);border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.cfx-card.pad{padding:16px 18px;}

/* ---------- 1. pipeline ---------- */
.cfx-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;}
.cfx-step{text-align:left;background:var(--paper);border:1px solid var(--border);border-radius:8px;padding:11px 12px;min-width:0;}
/* the two steps that decide what a shop publishes are outlined in amber even
   when closed - they are the reason this surface exists */
.cfx-step.key{border-color:var(--amber-15);}
.cfx-step.on{background:var(--blue-16);border-color:var(--blue-24);}
.cfx-step:hover:not(.on){border-color:var(--border-2);}
.cfx-step-top{display:flex;align-items:center;gap:7px;margin-bottom:6px;}
.cfx-step-n{width:20px;height:20px;border-radius:50%;background:var(--fill);color:var(--text-secondary);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cfx-step.on .cfx-step-n{background:var(--blue);color:#fff;}
.cfx-step .st{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.3;}
.cfx-step .ss{font-size:11px;color:var(--text-secondary);margin-top:4px;line-height:1.4;}
.cfx-stepdetail{margin-top:10px;padding:14px 16px;}
.cfx-stepdetail .t{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:6px;}
.cfx-stepdetail .d{font-size:13px;color:var(--text-secondary);line-height:1.65;}

/* ---------- 2. sandbox ---------- */
.cfx-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.cfx-fstep{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:5px 11px;border-radius:14px;background:transparent;border:1px solid var(--border);color:var(--text-disabled);}
.cfx-fstep.on.sec{background:var(--secondary-15);border-color:var(--secondary);color:var(--secondary);}
.cfx-fstep.on.red{background:var(--red-15);border-color:var(--red);color:var(--red);}
.cfx-fstep.on.green{background:var(--green-15);border-color:var(--green);color:var(--green);}
.cfx-arrow{color:var(--text-disabled);display:flex;font-size:13px;}
.cfx-flownote{font-size:11.5px;color:var(--text-secondary);font-style:italic;margin-left:6px;}
.cfx-ta{width:100%;background:var(--bg);border:1px solid var(--border-2);border-radius:8px;color:var(--text);font-family:inherit;font-size:13.5px;padding:11px 12px;outline:none;resize:vertical;line-height:1.5;box-sizing:border-box;}
.cfx-ta:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
.cfx-presets{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px;}
.cfx-preset{background:transparent;border:1px solid var(--border-2);color:var(--text-secondary);border-radius:15px;padding:5px 12px;font-size:11.5px;font-weight:600;}
.cfx-preset:hover{border-color:var(--blue);color:var(--text);}
.cfx-preset.on{background:var(--blue-16);border-color:var(--blue-24);color:var(--blue);}
.cfx-eval{background:var(--paper);border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.cfx-eval-top{padding:12px 14px;border-bottom:1px solid var(--border);}
.cfx-eval-bot{padding:12px 14px;}
.cfx-lbl{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-disabled);margin-bottom:6px;}
.cfx-norm{font-family:var(--cfx-mono);font-size:12.5px;line-height:1.7;color:var(--text-secondary);word-break:break-word;}
.cfx-norm .empty{color:var(--text-disabled);font-style:italic;}
.cfx-norm mark{font-weight:700;padding:1px 2px;border-radius:3px;background:var(--red-15);color:var(--red);}
.cfx-norm mark.ok{background:var(--green-15);color:var(--green);}
.cfx-verdict{display:flex;align-items:center;gap:8px;}
.cfx-verdict iconify-icon{font-size:18px;}
.cfx-verdict .vt{font-size:13.5px;font-weight:700;}
.cfx-verdict.deny,.cfx-verdict.deny iconify-icon{color:var(--red);}
.cfx-verdict.allow,.cfx-verdict.allow iconify-icon{color:var(--green);}
.cfx-pats{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.cfx-pat{font-family:var(--cfx-mono);font-size:11.5px;border-radius:5px;padding:3px 8px;background:var(--fill);color:var(--text-secondary);border:1px solid transparent;}
.cfx-pat.hit{background:var(--red-15);color:var(--red);border-color:var(--red-15);}
.cfx-pat.ok{background:var(--green-15);color:var(--green);border-color:var(--green-15);}
.cfx-evalnote{font-size:11.5px;color:var(--text-secondary);margin-top:10px;line-height:1.5;}
.cfx-evalnote b{color:var(--text);}
.cfx-maps{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;}
.cfx-maps .phrase{font-size:13.5px;font-weight:700;color:var(--text);}
/* the preset notes are the point of three of the presets, so they are called
   out in amber rather than set as another grey paragraph */
.cfx-prnote{display:flex;gap:8px;align-items:flex-start;padding:11px 14px;background:var(--amber-15);border-top:1px solid var(--border);}
.cfx-prnote iconify-icon{font-size:15px;color:var(--amber);flex-shrink:0;margin-top:1px;}
.cfx-prnote span{font-size:12px;color:var(--text);line-height:1.5;}

/* disclosures for the full rulesets */
.cfx-discs{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
.cfx-disc{background:var(--paper);border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.cfx-disc-h{width:100%;display:flex;align-items:center;gap:9px;background:transparent;border:none;padding:11px 14px;text-align:left;}
.cfx-disc-h:hover{background:var(--hover);}
.cfx-disc-h iconify-icon{font-size:16px;color:var(--text-secondary);transition:transform .15s ease;}
.cfx-disc.open .cfx-disc-h iconify-icon{transform:rotate(180deg);}
.cfx-disc-h .dt{font-size:12.5px;font-weight:700;color:var(--text);}
.cfx-disc-h .dc{margin-left:auto;}
.cfx-disc-b{display:none;padding:12px 14px 14px;border-top:1px solid var(--border);}
.cfx-disc.open .cfx-disc-b{display:block;}
.cfx-disc-note{font-size:11.5px;color:var(--text-secondary);margin-top:12px;line-height:1.55;}
.cfx-disc-note code{font-family:var(--cfx-mono);}
.cfx-rules{width:100%;border-collapse:collapse;}
.cfx-rules td{border-bottom:1px solid var(--border);vertical-align:top;}
.cfx-rules td.src{font-family:var(--cfx-mono);font-size:11.5px;color:var(--text-secondary);padding:6px 10px 6px 0;width:48%;}
.cfx-rules td.ph{font-size:12.5px;color:var(--text);padding:6px 0;}

/* ---------- 3. before / after ---------- */
.cfx-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start;}
.cfx-panehead{padding:11px 14px;border-bottom:1px solid var(--border);background:var(--panel);}
.cfx-panehead .ph{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);}
.cfx-panehead.green .ph{color:var(--green);}
.cfx-panesub{padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text-secondary);line-height:1.6;}
.cfx-panesub .mono{font-family:var(--cfx-mono);font-size:11.5px;}
.cfx-woline{padding:10px 14px;border-bottom:1px solid var(--border);}
.cfx-woline:last-child{border-bottom:none;}
.cfx-woline.blocked{opacity:.55;}
.cfx-woline .nm{font-size:12.5px;color:var(--text);line-height:1.4;}
.cfx-woline.blocked .nm{text-decoration:line-through;text-decoration-color:var(--red);}
.cfx-woline .meta{display:flex;align-items:center;gap:8px;margin-top:5px;}
.cfx-woline .hrs{font-size:11px;color:var(--text-secondary);}
.cfx-woline .tag{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;}
.cfx-woline .tag iconify-icon{font-size:12px;}
.cfx-woline .tag.no{color:var(--red);}
.cfx-woline .tag.yes{color:var(--green);}
.cfx-pubrow{padding:12px 14px;border-bottom:1px solid var(--border);}
.cfx-pubrow .p{font-size:13px;font-weight:700;color:var(--text);}
.cfx-pubrow .f{font-size:11px;color:var(--text-disabled);margin-top:5px;line-height:1.45;}
.cfx-tally{padding:12px 14px;background:var(--panel);}
.cfx-tally .row{display:flex;align-items:baseline;gap:8px;}
.cfx-tally .big{font-size:22px;font-weight:700;color:var(--text);}
.cfx-tally .of{font-size:12px;color:var(--text-secondary);}
.cfx-tally .note{font-size:11.5px;color:var(--text-secondary);margin-top:8px;line-height:1.55;}

/* ---------- 4. the file ---------- */
.cfx-filehead{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--panel);}
.cfx-filehead iconify-icon{font-size:16px;color:var(--text-secondary);}
.cfx-filehead .fn{font-family:var(--cfx-mono);font-size:12.5px;color:var(--text);word-break:break-all;}
.cfx-filehead .fc{margin-left:auto;flex-shrink:0;}
.cfx-filebody{overflow-x:auto;background:var(--bg);}
.cfx-filebody::-webkit-scrollbar{height:7px;}
.cfx-filebody::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:4px;}
.cfx-pre{margin:0;padding:12px 14px;font-family:var(--cfx-mono);font-size:11.5px;line-height:1.9;color:var(--text-secondary);white-space:pre;}
.cfx-annots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:10px;}
.cfx-annot{background:var(--paper);border:1px solid var(--border);border-radius:7px;padding:11px 13px;}
.cfx-annot .fld{font-family:var(--cfx-mono);font-size:11px;color:var(--blue);margin-bottom:6px;word-break:break-word;}
.cfx-annot .txt{font-size:12px;color:var(--text-secondary);line-height:1.55;}
.cfx-annot .txt .mono{font-family:var(--cfx-mono);}
.cfx-annot .txt .dim{opacity:.8;}

/* ---------- 5. reality check ---------- */
.cfx-stat{display:flex;align-items:baseline;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);}
.cfx-stat:last-child{border-bottom:none;background:var(--panel);}
.cfx-stat .l{font-size:13px;color:var(--text-secondary);flex:1;min-width:0;}
.cfx-stat .v{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;}
.cfx-stat .n{font-size:12px;font-weight:700;color:var(--text-secondary);width:38px;text-align:right;}
.cfx-stat.dim .l,.cfx-stat.dim .v{color:var(--text-disabled);}
.cfx-statnote{font-size:13px;color:var(--text-secondary);line-height:1.65;margin-top:12px;}

/* ---------- 6. dry run ---------- */
.cfx-dryrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.cfx-drybtn{display:inline-flex;align-items:center;gap:7px;background:var(--blue);border:1px solid var(--blue);color:#fff;border-radius:7px;padding:9px 15px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.cfx-drybtn:hover{filter:brightness(1.05);}
.cfx-drybtn iconify-icon{font-size:15px;}
.cfx-drybtn .cfx-flag{color:#fff;opacity:.9;}
.cfx-dryhint{font-size:12.5px;color:var(--text-secondary);}
.cfx-dryout{margin-top:14px;border:1px solid var(--border);border-radius:7px;overflow:hidden;}
.cfx-dryout-h{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--green-15);border-bottom:1px solid var(--border);}
.cfx-dryout-h iconify-icon{font-size:15px;color:var(--green);}
.cfx-dryout-h .t{font-size:12.5px;font-weight:700;color:var(--text);}
.cfx-dryout-b{padding:12px 14px;font-size:12.5px;color:var(--text-secondary);line-height:1.65;}
.cfx-dryout-b .mono{font-family:var(--cfx-mono);color:var(--text);}

/* ---------- footer ---------- */
.cfx-foot{display:flex;gap:9px;align-items:flex-start;padding:13px 16px;background:var(--panel);border:1px solid var(--border);border-radius:8px;}
.cfx-foot iconify-icon{font-size:16px;color:var(--text-secondary);flex-shrink:0;margin-top:1px;}
.cfx-foot .txt{font-size:12px;color:var(--text-secondary);line-height:1.6;}

/* chip tones this surface needs that the panel did not */
.cfx-chip.green{background:var(--green-15);color:var(--green);}
.cfx-chip.sec{background:var(--secondary-15);color:var(--secondary);}