/* Billing-formula editor — shared by the Billing page and the command centre. */
.fx{ border:1px solid var(--bd); border-radius:var(--r-sm); padding:12px 14px; margin:10px 0; background:var(--s2) }
.fx.custom{ border-color:rgba(108,121,246,.45) }
.fx.invalid{ border-color:rgba(240,106,106,.6) }
.fx-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap }
.fx-head b{ font-size:14px } .fx-head .src{ font-size:11px; color:var(--mut) } .fx-head .src.custom{ color:var(--accent) }
.fx-key{ font-size:11px; color:var(--mut) }
.fx-help{ color:var(--mut); font-size:12.5px; margin:4px 0 8px; line-height:1.5 }
.fx textarea{ width:100%; font-family:var(--mono); font-size:13px; line-height:1.5; min-height:64px; resize:vertical;
  background:var(--s1); color:var(--tx); border:1px solid var(--bd2); border-radius:8px; padding:8px 10px }
.fx textarea:focus{ outline:none; border-color:var(--accent) }
.fx textarea[readonly]{ opacity:.85 }
/* plain-language form reads as prose; the compact form keeps the mono face */
.fx textarea.plain{ font-family:var(--sans); font-size:14px; line-height:1.6; min-height:72px }
.fx-inputs .chip.ins{ cursor:pointer; font-family:var(--sans); font-size:12px; border:1px solid var(--bd2); background:var(--s1); color:var(--tx); padding:3px 9px; border-radius:999px }
.fx-inputs .chip.ins:hover{ border-color:var(--accent); color:var(--accent) }
.fx-tools{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:2px 0 8px }
.fx-tools .btn-mini{ min-height:30px; padding:0 10px; font-family:var(--sans); font-size:13px }
.fx-tools select.app-input{ width:auto; height:30px; padding:0 8px; font-size:12.5px }
@media (max-width:640px){ .fx-tools select.app-input{ flex:1 1 100% } }
.fx-inputs{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; align-items:center }
.fx-inputs .chip{ font-family:var(--mono); font-size:11.5px; cursor:help }
.fx-lbl{ color:var(--mut); font-size:12px; margin:0 4px }
.fx-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px }
.fx-row .app-input{ width:auto }
@media (max-width:640px){
  .fx{ padding:12px }
  .fx-row>span[style]{ display:none }               /* the flex spacer */
  .fx-row .app-input{ width:100%!important; flex:1 1 100% }
  .fx-row .btn-ghost,.fx-row .btn-primary{ flex:1 1 calc(50% - 8px); justify-content:center }
  .fx-head .src{ width:100% }
}
.fx-out{ font-family:var(--mono); font-size:12.5px; color:var(--mut); margin-top:6px; min-height:18px; white-space:pre-wrap }
.fx-out.ok{ color:var(--green) } .fx-out.err{ color:var(--red) } .fx-out.warn{ color:var(--amber) }
.fx-group{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fnt); font-weight:700; margin:18px 2px 4px }
.fx-hint{ color:var(--mut); font-size:13px; margin:8px 2px }
.fx-notice{ color:var(--amber); font-size:13px; margin:8px 2px }
.fx-legend{ color:var(--mut); font-size:12px; line-height:1.6; margin:12px 2px 2px }
.fx-legend code{ color:var(--tx) }
.fx-sub{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fnt); font-weight:600; margin:0 0 8px }
.delta.pos{ color:var(--red) } .delta.neg{ color:var(--green) }
.ref-grid{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px }
.ref-grid code{ font-family:var(--mono); color:var(--tx) }