/* ===== FORMS: LOGIC PANE ===== */
/* Styles for public/js/form-logic.js (#frmPane-logic). Leans on the shared
   design system in frm-shared.css (.frm-btn / .frm-select / .frm-input) and the
   dashboard tokens in index.css (--card / --border / --accent / --gold /
   --t1..t3 / --r* / --s* / --fz-*), so dark (default) and [data-theme=light]
   both track for free.
   Real inline-SVG icons (frm-icons.js) replace every text-glyph placeholder. */

.frm-logic {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--s6);
  display: grid;
  gap: var(--s5);
}

/* ── header ─────────────────────────────────────────────────────────────── */
.frm-logic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
}
.frm-logic-title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font-size: var(--fz-xl);
  font-weight: var(--fw-bold);
  color: var(--t1);
}
.frm-logic-title .frm-ico {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.frm-logic-sub {
  margin: var(--s2) 0 0;
  font-size: var(--fz-base);
  color: var(--t2);
  max-width: 600px;
  line-height: var(--lh-normal);
}

.frm-logic-empty {
  padding: var(--s8) var(--s5);
  text-align: center;
  color: var(--t3);
  font-size: var(--fz-md);
  border: 1px dashed var(--border2);
  border-radius: var(--r4);
  background: var(--card);
}

/* ── inline link + icon buttons ─────────────────────────────────────────── */
.frm-logic-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 2px 0;
  color: var(--accent);
  font-family: inherit;
  font-size: var(--fz-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  width: fit-content;
}
.frm-logic-link:hover {
  text-decoration: underline;
}
.frm-logic-link .frm-ico {
  width: 13px;
  height: 13px;
}

.frm-logic-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--t3);
  border-radius: var(--r2);
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition:
    color var(--tr-fast),
    border-color var(--tr-fast),
    background var(--tr-fast);
}
.frm-logic-iconbtn .frm-ico {
  width: 15px;
  height: 15px;
}
.frm-logic-iconbtn:hover:not(:disabled) {
  color: var(--t1);
  border-color: var(--border3);
  background: var(--card-hover);
}
.frm-logic-iconbtn:disabled {
  opacity: 0.35;
  cursor: default;
}
.frm-logic-iconbtn.frm-logic-rm:hover:not(:disabled) {
  color: var(--red);
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

/* ── validation banner + broken-logic section ──────────────────────────── */
.frm-logic-invalid {
  background: var(--danger-dim);
  border: 1px solid var(--red);
  border-radius: var(--r3);
  padding: var(--s4);
  color: var(--t1);
  font-size: var(--fz-base);
}
.frm-logic-invalid-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--red);
}
.frm-logic-invalid-head .frm-ico {
  width: 15px;
  height: 15px;
}
.frm-logic-invalid ul {
  margin: var(--s2) 0 0;
  padding-left: var(--s5);
  color: var(--t2);
  line-height: var(--lh-normal);
}

.frm-logic-broken {
  border: 1px solid var(--goldBd);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  border-radius: var(--r3);
  padding: var(--s4);
  display: grid;
  gap: var(--s2);
}
.frm-logic-broken-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.frm-logic-broken-title .frm-ico {
  width: 13px;
  height: 13px;
}

.frm-logic-warn {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fz-sm);
  color: var(--gold);
  flex-wrap: wrap;
  line-height: var(--lh-normal);
}
.frm-logic-warnmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--gold);
}
.frm-logic-warnmark .frm-ico {
  width: 15px;
  height: 15px;
}
.frm-logic-warnbtn {
  color: var(--gold);
}

/* ── question blocks ────────────────────────────────────────────────────── */
.frm-logic-blocks {
  display: grid;
  gap: var(--s3);
}
.frm-logic-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  overflow: hidden;
  transition: border-color var(--tr-base);
}
.frm-logic-block:hover {
  border-color: var(--border2);
}
.frm-logic-block.frm-logic-open {
  border-color: var(--border2);
}

.frm-logic-blockhead {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  user-select: none;
}
.frm-logic-blockhead:hover {
  background: var(--card-hover);
}

.frm-logic-num {
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--s1);
  border-radius: 50%;
  background: var(--chip);
  border: 1px solid var(--border2);
  color: var(--t2);
  font-size: var(--fz-xs);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.frm-logic-typeicon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r2);
  background: var(--accent-dim);
  color: var(--accent);
}
.frm-logic-typeicon .frm-ico {
  width: 15px;
  height: 15px;
}

.frm-logic-qtitle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--t1);
  font-size: var(--fz-md);
  font-weight: var(--fw-semibold);
}

.frm-logic-count {
  flex: 0 0 auto;
  color: var(--t3);
  font-size: var(--fz-sm);
}

.frm-logic-caret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--t3);
}
.frm-logic-caret .frm-ico {
  width: 16px;
  height: 16px;
}

.frm-logic-blockbody {
  border-top: 1px solid var(--border);
  padding: var(--s4);
  display: grid;
  gap: var(--s4);
}

/* ── rule card ──────────────────────────────────────────────────────────── */
.frm-logic-rule {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: var(--s4);
  display: grid;
  gap: var(--s3);
}
.frm-logic-rulebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}
.frm-logic-rulename {
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.frm-logic-ruleactions {
  display: inline-flex;
  gap: var(--s1);
}

.frm-logic-cond,
.frm-logic-then,
.frm-logic-fallback {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.frm-logic-kw {
  flex: 0 0 auto;
  min-width: 40px;
  text-align: right;
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  color: var(--gold);
  letter-spacing: 0.06em;
}
.frm-logic-kw-then {
  color: var(--accent);
}
.frm-logic-kw-else {
  min-width: 0;
  text-align: left;
  color: var(--t2);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}
.frm-logic-goto {
  color: var(--t3);
  font-size: var(--fz-sm);
}
.frm-logic-fallback-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--t3);
}
.frm-logic-fallback-arrow .frm-ico {
  width: 14px;
  height: 14px;
}
.frm-logic-arrow-flip {
  transform: scaleX(-1);
}

/* control sizing — the visual chrome comes from .frm-select / .frm-input */
.frm-logic-condq {
  flex: 1 1 200px;
  min-width: 150px;
}
.frm-logic-condop {
  flex: 0 0 138px;
}
.frm-logic-val {
  flex: 1 1 180px;
  min-width: 130px;
}
.frm-logic-dest {
  flex: 1 1 240px;
  min-width: 180px;
}
/* multi-select listbox — matches the .frm-select surface without the caret */
.frm-logic-val-multi {
  flex: 1 1 220px;
  min-width: 160px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  color: var(--t1);
  padding: var(--s1);
  font-family: inherit;
  font-size: var(--fz-base);
  min-height: 96px;
}
.frm-logic-val-multi:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.frm-logic-val-multi option {
  padding: 4px 6px;
  border-radius: var(--r1);
}

.frm-logic-addrule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border2);
  color: var(--t2);
  border-radius: var(--r2);
  padding: var(--s3);
  font-family: inherit;
  font-size: var(--fz-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition:
    color var(--tr-base),
    border-color var(--tr-base),
    background var(--tr-base);
}
.frm-logic-addrule .frm-ico {
  width: 15px;
  height: 15px;
}
.frm-logic-addrule:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

.frm-logic-fallback {
  padding-top: var(--s3);
  border-top: 1px dashed var(--border);
}

/* ── test-logic drawer ──────────────────────────────────────────────────── */
.frm-logic-test {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r4);
  padding: var(--s5);
  display: grid;
  gap: var(--s4);
}
.frm-logic-test-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: var(--fz-sm);
  color: var(--t2);
  line-height: var(--lh-normal);
}
.frm-logic-test-head .frm-ico {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--accent);
  margin-top: 1px;
}
.frm-logic-test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s4);
}
.frm-logic-test-field {
  display: grid;
  gap: var(--s2);
  min-width: 0;
}
.frm-logic-test-label {
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  color: var(--t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frm-logic-test-actions {
  display: flex;
  gap: var(--s2);
}
.frm-logic-test-note {
  color: var(--t3);
  font-size: var(--fz-sm);
}

.frm-logic-test-result {
  border-top: 1px solid var(--border);
  padding-top: var(--s4);
  display: grid;
  gap: var(--s3);
}
.frm-logic-path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}
.frm-logic-pathchip {
  background: var(--chip);
  border: 1px solid var(--border2);
  color: var(--t1);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
}
.frm-logic-patharrow {
  display: inline-flex;
  align-items: center;
  color: var(--t3);
}
.frm-logic-patharrow .frm-ico {
  width: 13px;
  height: 13px;
}
.frm-logic-endline {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.frm-logic-endbadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: var(--fz-base);
  font-weight: var(--fw-semibold);
  border: 1px solid var(--border2);
  background: var(--chip);
  color: var(--t1);
}
.frm-logic-endbadge .frm-ico {
  width: 14px;
  height: 14px;
}
.frm-logic-qualtag {
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--r1);
  padding: 3px 8px;
  border: 1px solid var(--border2);
  color: var(--t2);
}
.frm-logic-qual-qualified.frm-logic-endbadge,
.frm-logic-qual-qualified.frm-logic-qualtag {
  border-color: var(--green);
  color: var(--green);
}
.frm-logic-qual-qualified.frm-logic-endbadge {
  background: color-mix(in srgb, var(--green) 12%, transparent);
}
.frm-logic-qual-unqualified.frm-logic-endbadge,
.frm-logic-qual-unqualified.frm-logic-qualtag {
  border-color: var(--orange);
  color: var(--orange);
}
.frm-logic-qual-unqualified.frm-logic-endbadge {
  background: color-mix(in srgb, var(--orange) 12%, transparent);
}
.frm-logic-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--t2);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.frm-logic-score .frm-ico {
  width: 13px;
  height: 13px;
  color: var(--t3);
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .frm-logic {
    padding: var(--s4);
  }
  .frm-logic-head {
    flex-direction: column;
  }
  .frm-logic-kw {
    min-width: 0;
    text-align: left;
  }
  .frm-logic-condq,
  .frm-logic-condop,
  .frm-logic-val,
  .frm-logic-dest {
    flex: 1 1 100%;
  }
  /* Prevent grid/flex blowout: the block body + rule are single-column grids
     whose default min-width:auto tracks expand to the widest control's
     content (a long question label / option), overflowing the block's
     overflow:hidden box and clipping the right side on a phone. Cap the tracks
     to the container and let the flex rows shrink. */
  .frm-logic-blockbody,
  .frm-logic-rule {
    grid-template-columns: minmax(0, 1fr);
  }
  .frm-logic-rule,
  .frm-logic-rulebar,
  .frm-logic-cond,
  .frm-logic-then,
  .frm-logic-fallback {
    min-width: 0;
  }
}