/*
 * Plan Builder — Step 3 "Suggest Skills" styles (Increment 4)
 * Sibling to plan-builder-modal.css (which owns the shared pbm- shell). Mock-faithful:
 * chips, the IEP-driven fold, the browse accordion, the hover tip, and the temporary
 * suggest-modal inputs. Reuses the green palette + Montserrat from the mock.
 */

/* ── Suggest-modal inputs ─────────────────────────────────────────── */
.pbm-ss-label {
  font-size: 12.5px; font-weight: 700; color: #1A2718; margin: 14px 0 7px;
}
.pbm-ss-label:first-child { margin-top: 2px; }
.pbm-ss-opt { font-weight: 500; color: #929d92; }
.pbm-goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pbm-goal-opt {
  font: inherit; font-size: 13px; font-weight: 600; text-align: left;
  padding: 10px 12px; border: 1.5px solid #E6EAE6; border-radius: 10px;
  background: #fff; color: #1A2718; cursor: pointer; transition: .12s;
}
.pbm-goal-opt:hover { border-color: #bcd3bc; }
.pbm-goal-opt.pbm-on { border-color: #44A148; background: rgba(68,161,72,.10); }
.pbm-iep {
  width: 100%; font: inherit; font-size: 13px; color: #1A2718;
  border: 1.5px solid #E6EAE6; border-radius: 10px; padding: 11px 12px;
  min-height: 130px; resize: vertical; line-height: 1.5; background: #fff;
}
.pbm-iep:focus { outline: none; border-color: #44A148; box-shadow: 0 0 0 3px rgba(68,161,72,.10); }
.pbm-suggest-btn {
  margin-top: 12px; font: inherit; font-weight: 700; font-size: 13.5px;
  border: none; border-radius: 10px; padding: 11px 20px; cursor: pointer;
  background: linear-gradient(to bottom, #6DBB70, #43A047); color: #fff;
}
.pbm-suggest-btn:disabled { opacity: .7; cursor: default; }
.pbm-ss-picker { margin-top: 18px; }

/* ── Recommended tier ─────────────────────────────────────────────── */
.pbm-rec-h {
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #2D6A2F; margin: 2px 0 10px; display: flex; align-items: center; gap: 7px;
}
.pbm-selpill {
  font-size: 11px; font-weight: 700; color: #2D6A2F; background: #EAF5EA;
  border-radius: 20px; padding: 2px 9px; text-transform: none; letter-spacing: normal;
}
.pbm-rec-h .pbm-selpill { margin-left: auto; }
.pbm-selall {
  font: inherit; font-size: 11px; font-weight: 800; color: #2D6A2F; background: #EAF5EA;
  border: none; border-radius: 20px; padding: 3px 11px; cursor: pointer;
  text-transform: none; letter-spacing: normal;
}
.pbm-selall:hover { background: #d8edd8; }
.pbm-selall:disabled { opacity: .5; cursor: default; }
.pbm-rec-empty {
  font-size: 12.5px; color: #5b6b5c; background: #EFF2EF; border-radius: 10px;
  padding: 12px; text-align: center;
}

/* ── Chips ────────────────────────────────────────────────────────── */
.pbm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pbm-chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid #E6EAE6;
  border-radius: 30px; padding: 7px 13px; cursor: pointer; background: #fff;
  font-size: 13px; font-weight: 600; transition: .12s; color: #1A2718;
}
.pbm-chip:hover { border-color: #bcd3bc; }
.pbm-chip .pbm-cn { font-size: 11px; color: #929d92; font-weight: 600; }
.pbm-chip.pbm-sel { border-color: #44A148; background: rgba(68,161,72,.10); }
.pbm-chip.pbm-sel::before { content: "✓"; color: #44A148; font-weight: 800; font-size: 12px; }

/* ── IEP-driven fold (low-relevance defaults, never deleted) ──────── */
.pbm-recfold-h {
  font-size: 12px; font-weight: 700; color: #5b6b5c; margin: 13px 0 0;
  display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
}
.pbm-recfold-h:hover { color: #1A2718; }
.pbm-rfchev { font-size: 10px; color: #b6c0b6; }
.pbm-rfsub { font-weight: 500; color: #929d92; font-size: 11px; }
.pbm-chips.pbm-folded { margin-top: 11px; opacity: .78; }

/* ── Browse accordion ─────────────────────────────────────────────── */
.pbm-browse-h {
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: #5b6b5c; margin: 16px 0 0; display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.pbm-browse-h:hover { color: #1A2718; }
.pbm-bsub { font-weight: 500; text-transform: none; letter-spacing: normal; color: #929d92; font-size: 11px; }
.pbm-bchev { margin-left: auto; font-size: 10px; color: #b6c0b6; }
.pbm-browse-body { display: none; margin-top: 12px; }
.pbm-browse-body.pbm-open { display: block; }
.pbm-pil { margin-bottom: 8px; border: 1px solid #E6EAE6; border-radius: 10px; overflow: hidden; }
.pbm-pil-h {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer;
  font-weight: 600; font-size: 13px; color: #5b6b5c; user-select: none;
}
.pbm-pil-h:hover { background: #EFF2EF; }
.pbm-pilsw { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.pbm-pil-h .pbm-pc { margin-left: auto; font-size: 11.5px; color: #929d92; }
.pbm-pchev2 { font-size: 10px; color: #b6c0b6; }
.pbm-pil-body { display: none; flex-wrap: wrap; gap: 7px; padding: 10px 12px; border-top: 1px solid #EFF2EF; }
.pbm-pil.pbm-open .pbm-pil-body { display: flex; }

/* ── Hover description tooltip ─────────────────────────────────────── */
#pbm-tip {
  position: absolute; z-index: 10010; max-width: 260px; background: #1f2937; color: #fff;
  font-size: 12.5px; line-height: 1.45; font-weight: 500; padding: 9px 11px;
  border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .1s;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#pbm-tip.pbm-show { opacity: 1; }
#pbm-tip::after {
  content: ""; position: absolute; top: 100%; left: var(--pbm-ax, 50%);
  transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1f2937;
}