/* rw-formula-field.css — global styles for the Forge token-field formula editor.
   Global (not component-scoped) because the chips inside the field are created by rw-formula-field.js,
   so Blazor's per-component scope attribute never reaches them. Uses the app's --rw-* theme tokens. */

:root {
  --rwff-ctl-h: 40px;                                  /* shared control height (matches gsb inputs) */
  --rwff-chip-bg: linear-gradient(180deg, #2F4239, #243329);
  --rwff-chip-border: #A37F35;
  --rwff-chip-fg: #F2EAD3;
}

/* ── the field ── */
.rwff { position: relative; }
.rwff-field {
  min-height: var(--rwff-ctl-h); width: 100%;
  background: var(--rw-bg-bark); border: 1px solid var(--rw-border); border-radius: var(--rw-radius-sm);
  padding: 0 4.8rem 0 .65rem; color: #B8AF93;
  font-family: var(--rw-font-mono); font-size: 13px; line-height: calc(var(--rwff-ctl-h) - 2px);
  outline: none; transition: border-color var(--rw-transition), box-shadow var(--rw-transition);
}
.rwff-field:focus { border-color: var(--rw-gold); box-shadow: 0 0 0 2px rgba(196,160,64,.1); }
.rwff-field:empty::before { content: attr(data-placeholder); color: var(--rw-sage-dark); }

/* ── variable chips (JS-created) ── */
.rwff-chip {
  display: inline-block; padding: 1px 9px; margin: 0 1px;
  background: var(--rwff-chip-bg); border: 1px solid var(--rwff-chip-border); border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 11.5px; line-height: 16px;
  color: var(--rwff-chip-fg); vertical-align: middle; user-select: none;
}
.rwff-chip.is-bad {
  background: linear-gradient(180deg, #3A2222, #2A1818); border-color: #9C3838; color: #c96;
  text-decoration: line-through;
}

/* ── live result badge ── */
.rwff-result {
  position: absolute; top: 50%; right: 9px; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--rw-font-mono); font-size: 12px; color: var(--rw-gold-light);
  background: rgba(196,160,64,.1); border: 1px solid var(--rw-border-gold); border-radius: 999px; padding: 1px 9px;
  transition: background var(--rw-transition), color var(--rw-transition);
}
.rwff-result.is-bad { color: var(--rw-text-faint); background: transparent; border-color: var(--rw-border); }
.rwff-result .op { opacity: .55; }
@keyframes rwff-pulse { 0% { box-shadow: 0 0 0 0 rgba(196,160,64,.45); } 100% { box-shadow: 0 0 0 7px rgba(196,160,64,0); } }
.rwff-result.pulse { animation: rwff-pulse .5s ease-out; }

/* ── insert trigger ── */
.rwff-trigger {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: none; border: none; padding: 0; margin-top: 2px;
  font-family: var(--rw-font-sc); font-variant: small-caps; letter-spacing: .1em; font-size: 11px;
  color: #A37F35; transition: color var(--rw-transition);
}
.rwff-trigger:hover { color: var(--rw-gold); }
.rwff-trigger:focus-visible { outline: 2px solid var(--rw-gold); outline-offset: 3px; border-radius: 3px; }
.rwff-trigger .rwff-glyph, .rwff-modal__title .rwff-glyph {
  display: inline-grid; place-items: center; width: 15px; height: 15px; border: 1px solid currentColor;
  border-radius: 4px; font-family: var(--rw-font-body); font-style: normal; font-weight: 700; font-size: 11px; line-height: 1;
}

/* ── inserter modal ── */
.rwff-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; }
.rwff-modal__scrim { position: absolute; inset: 0; background: rgba(4,9,8,.5); backdrop-filter: blur(2px);
  opacity: 0; animation: rwff-fade 170ms cubic-bezier(.16,.84,.44,1) forwards; }
.rwff-modal__panel {
  position: relative; width: min(480px, 100%); max-height: 80vh; overflow: auto;
  background: #13211B; border: 1px solid rgba(196,160,64,.28); border-radius: 11px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(196,160,64,.05);
  opacity: 0; transform: translateY(10px) scale(.96);
  animation: rwff-pop 170ms cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes rwff-fade { to { opacity: 1; } }
@keyframes rwff-pop { to { opacity: 1; transform: translateY(0) scale(1); } }
.rwff-modal__head { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem .7rem;
  border-bottom: 1px solid var(--rw-border); position: sticky; top: 0; background: #13211B; }
.rwff-modal__title { display: inline-flex; align-items: center; gap: .4rem; flex: 1;
  font-family: var(--rw-font-sc); font-variant: small-caps; letter-spacing: .1em; font-size: .86rem; color: var(--rw-gold-light); }
.rwff-modal__x { background: none; border: none; color: var(--rw-text-faint); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: .1rem .3rem; border-radius: 4px; transition: all var(--rw-transition); }
.rwff-modal__x:hover { color: var(--rw-blood-bright); background: rgba(139,37,0,.1); }
.rwff-modal__search { margin: .7rem 1rem .2rem; width: calc(100% - 2rem);
  background: var(--rw-bg-bark); border: 1px solid var(--rw-border); color: var(--rw-text);
  font-family: var(--rw-font-body); font-size: .88rem; padding: .5rem .7rem; border-radius: 6px; outline: none; }
.rwff-modal__search:focus { border-color: var(--rw-gold); box-shadow: 0 0 0 2px rgba(196,160,64,.1); }
.rwff-modal__body { padding: .6rem 1rem 1rem; display: flex; flex-direction: column; gap: .7rem; }
.rwff-modal__group-label { font-family: var(--rw-font-sc); font-variant: small-caps; letter-spacing: .14em; font-size: 10px; color: #A37F35; display: block; margin-bottom: .35rem; }
.rwff-modal__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rwff-modal__empty { color: var(--rw-text-faint); font-style: italic; font-size: .85rem; padding: .4rem 0; }
.rwff-ins { border-radius: 999px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; background: transparent; transition: all .12s; }
.rwff-ins:hover { transform: translateY(-1px); }
.rwff-ins:focus-visible { outline: 2px solid var(--rw-gold); outline-offset: 2px; }
.rwff-ins--var { border: 1px solid #6B8A6E; color: #F2EAD3; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; }
.rwff-ins--var:hover { border-color: var(--rw-gold); background: rgba(212,162,76,.07); }
.rwff-ins--fn { border: 1px dashed #A37F35; color: var(--rw-gold); font-family: var(--rw-font-mono); font-size: 11.5px; }
.rwff-ins--fn:hover { border-style: solid; background: rgba(212,162,76,.05); }

@media (prefers-reduced-motion: reduce) {
  .rwff-modal__scrim, .rwff-modal__panel { animation: none; opacity: 1; transform: none; }
  .rwff-result.pulse { animation: none; }
}