/* ══════════════════════════════════════════════════════════════
   GOAL BUILDER DRAWER — goal-specific styles.
   Reuses .wk-pbd-* from program-builder-drawer.css for the
   scaffolding; adds .wk-gld-* for goal-only bits (priority pills,
   category chip grid, confidence pills, review card).
   ══════════════════════════════════════════════════════════════ */

/* Stack the drawer above the Work tab and the wdp/task popups
   (55000–60000), but DELIBERATELY one notch BELOW the program (.wk-pbd-overlay)
   and work-stream (.wk-pjd-overlay) builders at 65000 — those are spawned FROM
   this drawer (via "+ Create new project / work stream"), so they must render
   in front of it, not behind. Still below the materials browser (70000). */
.wk-gld-overlay { z-index: 64000 !important; }

/* The Projects-tab "New Project" popup (.pb-overlay) normally sits at 8000.
   When it's spawned from inside this drawer (goal builder locks the body with
   .wk-pbd-locked) it must clear the goal drawer (64000) so it opens IN FRONT,
   not behind. Below the materials browser (70000); its own sub-modals
   (company quick-add etc.) live far higher and still stack above it. */
body.wk-pbd-locked .pb-overlay { z-index: 66000 !important; }

/* The canonical project popup is the engagement profile (.gp-overlay, normally
   z-index 12000). When "+ Create new project" opens it from inside the goal
   builder it must clear the goal drawer (64000) so it lands IN FRONT, not
   behind. Below the materials browser (70000); its body-portaled typeaheads
   (z-index 200000) still float above it. */
body.wk-pbd-locked .gp-overlay { z-index: 66000 !important; }

/* The work-stream DETAIL popup (.gd-overlay, project-detail.js — normally
   z-index 12000) opens when you click a work-stream card inside the engagement
   profile, which itself was opened from this goal builder. It must clear BOTH
   the goal drawer (64000) AND the engagement profile (66000) so it lands IN
   FRONT, not behind (otherwise it reads as a blank/transparent popup). Still
   below the materials browser (70000) and body-portaled typeaheads (200000). */
body.wk-pbd-locked .gd-overlay { z-index: 66500 !important; }

/* ── GOAL IDENTITY ────────────────────────────────────────────
   The goal builder reuses the program/project (.wk-pbd-*) shell, so when a
   child builder stacks on top the two cards can look identical. Give the goal
   drawer an unmistakable green identity: a thick green top rail, a green
   eyebrow, and a faint green header wash. Green is already the goal accent
   (steps, category) — this amplifies it rather than inventing a new style. */
.wk-gld-drawer {
  border-top: 5px solid #16a34a;
  box-shadow: 0 24px 70px rgba(16, 163, 74, 0.18), 0 8px 24px rgba(0, 0, 0, 0.18);
}
.wk-gld-drawer .wk-pbd-head {
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.07), rgba(22, 163, 74, 0));
}
.wk-gld-drawer .wk-pbd-eyebrow {
  color: #16a34a;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.wk-gld-drawer .wk-pbd-name-pill {
  border-color: rgba(22, 163, 74, 0.35);
  color: #15803d;
}

/* Whole-project link chips are GREEN; specific work-stream chips keep the
   default indigo. The colour itself tells you which altitude you linked at,
   so the two pickers never read as the same thing. */
.wk-gld-drawer .wk-pbd-tag--program {
  background: #ecfdf5;
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.35);
}
.wk-gld-drawer .wk-pbd-tag--program .wk-pbd-tag-x { color: #15803d; }
.wk-gld-drawer .wk-pbd-tag--program .wk-pbd-tag-x:hover { background: rgba(22, 163, 74, 0.18); color: #052e16; }

/* A work stream already covered by a linked project is shown for context but
   not separately selectable — it's redundant with the project link. */
.wk-gld-drawer .wk-pbd-combo-item.is-covered {
  cursor: default;
  opacity: 0.7;
}
.wk-gld-drawer .wk-pbd-combo-item.is-covered:hover { background: transparent; }
.wk-gld-drawer .wk-pbd-combo-item.is-covered .wk-pbd-combo-sub {
  color: #15803d;
  font-style: italic;
}

/* Body of the goal builder is a single scrollable column. */
.wk-gld-body--paged { overflow-y: auto; overflow-x: visible; padding: 24px 28px 32px; }

/* Sub-popups inside the drawer (combo panels) need to clear the
   sticky tab strip and section header. The drawer's stacking context
   makes these relative to the drawer itself. */
.wk-gld-drawer .wk-pbd-combo-panel { z-index: 200; }

/* ══════════════════════════════════════════════════════════
   BASICS — wider textarea, category chip grid, priority pills
   ══════════════════════════════════════════════════════════ */
.wk-gld-textarea {
  resize: vertical;
  min-height: 70px;
  font: inherit; font-size: 13.5px; line-height: 1.5;
}

/* Category chips — 3-column grid */
.wk-gld-chips-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.wk-gld-chips-2 {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.wk-gld-chip { min-height: 56px; }

/* Priority pills — single row, color-coded */
.wk-gld-pri-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.wk-gld-pri {
  padding: 9px 10px;
  border-radius: 9px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all .15s;
}
.wk-gld-pri:hover { border-color: #cbd5e1; color: #0f172a; transform: translateY(-1px); }
.wk-gld-pri--critical.is-active { background: #fee2e2; color: #dc2626; border-color: #fecaca; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.wk-gld-pri--high.is-active     { background: #ffedd5; color: #ea580c; border-color: #fed7aa; box-shadow: 0 0 0 3px rgba(234,88,12,.12); }
.wk-gld-pri--medium.is-active   { background: #e0f2fe; color: #0284c7; border-color: #bae6fd; box-shadow: 0 0 0 3px rgba(2,132,199,.12); }
.wk-gld-pri--low.is-active      { background: #f1f5f9; color: #475569; border-color: #cbd5e1; box-shadow: 0 0 0 3px rgba(71,85,105,.10); }

/* Status pills (edit mode only) */
.wk-gld-status {
  display: inline-flex; gap: 6px; padding: 3px;
  background: #f1f5f9; border-radius: 10px;
}
.wk-gld-status-btn {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 7px;
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: #64748b;
  transition: all .15s;
}
.wk-gld-status-btn:hover { color: #0f172a; }
.wk-gld-status-btn--active.is-active   { background: #fff; color: #2563eb; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.wk-gld-status-btn--achieved.is-active { background: #fff; color: #16a34a; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.wk-gld-status-btn--paused.is-active   { background: #fff; color: #d97706; box-shadow: 0 1px 3px rgba(15,23,42,.08); }

/* ══════════════════════════════════════════════════════════
   MEASUREMENT — confidence chip styling matches category chips
   ══════════════════════════════════════════════════════════ */
.wk-gld-conf { min-height: 56px; }
.wk-gld-conf.is-active { box-shadow: 0 0 0 3px rgba(79,70,229,.12); }

/* ══════════════════════════════════════════════════════════
   LINKAGE — multi-select tag pill area expands to fit its tags.
   ══════════════════════════════════════════════════════════ */
.wk-gld-multi {
  align-items: flex-start;
  min-height: 48px;
  padding: 8px 38px 8px 10px;
}
.wk-gld-multi .wk-pbd-combo-input--bare { padding: 8px 4px; }

/* ══════════════════════════════════════════════════════════
   REVIEW — read-only summary card
   ══════════════════════════════════════════════════════════ */
.wk-gld-review-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.wk-gld-review-head { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed #f1f5f9; }
.wk-gld-review-title { font: 700 17px/1.3 Inter, system-ui, sans-serif; color: #0f172a; }
.wk-gld-review-desc  { margin-top: 6px; font-size: 13px; color: #64748b; line-height: 1.5; }

.wk-gld-review-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
}
.wk-gld-review-row { display: flex; flex-direction: column; gap: 4px; }
.wk-gld-review-row--wide { grid-column: 1 / -1; }
.wk-gld-review-lbl {
  text-transform: uppercase; letter-spacing: .06em;
  font: 700 10.5px/1 Inter, system-ui, sans-serif;
  color: #94a3b8;
}
.wk-gld-review-val { font: 500 13.5px/1.4 Inter, system-ui, sans-serif; color: #0f172a; word-break: break-word; }
.wk-gld-review-meta { color: #64748b; font-weight: 500; margin-left: 4px; }
.wk-gld-review-empty { color: #cbd5e1; font-style: italic; }

.wk-gld-review-pri {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .04em;
}
.wk-gld-review-pri--critical { background: #fee2e2; color: #dc2626; }
.wk-gld-review-pri--high     { background: #ffedd5; color: #ea580c; }
.wk-gld-review-pri--medium   { background: #e0f2fe; color: #0284c7; }
.wk-gld-review-pri--low      { background: #f1f5f9; color: #475569; }

.wk-gld-review-hint {
  margin-top: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 12.5px; color: #475569;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════
   REQUIRED LABEL — small pill next to "Goal title" so users
   know what's mandatory without an asterisk that reads as error.
   ══════════════════════════════════════════════════════════ */
.wk-gld-req {
  display: inline-flex; align-items: center;
  margin-left: 8px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(79,70,229,.08); color: var(--wt-theme-primary, #4f46e5);
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}

/* ══════════════════════════════════════════════════════════
   OWNER COMBO — avatar slot to the left of the input
   ══════════════════════════════════════════════════════════ */
.wk-gld-owner-combo { display: flex; align-items: stretch; }
.wk-gld-owner-slot {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px 0 8px;
  flex-shrink: 0;
}
.wk-gld-owner-slot.is-empty { display: none; }
.wk-gld-owner-combo .wk-gld-owner-input { padding-left: 12px; }
.wk-gld-owner-combo:not(:has(.wk-gld-owner-slot.is-empty)) .wk-gld-owner-input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.wk-gld-owner-combo:has(.wk-gld-owner-slot:not(.is-empty)) {
  position: relative;
}
.wk-gld-owner-combo:has(.wk-gld-owner-slot:not(.is-empty)) .wk-gld-owner-slot {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  padding: 0 0 0 10px;
}
.wk-gld-owner-combo:has(.wk-gld-owner-slot:not(.is-empty)) .wk-gld-owner-input {
  padding-left: 46px;
}

.wk-gld-owner-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: #fff; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  background: #cbd5e1; flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15,23,42,.10);
  overflow: hidden;
}
.wk-gld-owner-av--img { padding: 0; }
.wk-gld-owner-av--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-gld-owner-av--none { background: #e2e8f0; color: #94a3b8; font-weight: 700; }

/* Combo dropdown rows: avatar + name + sub */
.wk-gld-owner-item {
  display: flex !important; align-items: center; gap: 10px !important;
  padding: 8px 10px !important;
}
.wk-gld-owner-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wk-gld-owner-text .wk-pbd-combo-main { line-height: 1.25; }
.wk-gld-owner-text .wk-pbd-combo-sub  { line-height: 1.25; margin-top: 2px; font-size: 11px; color: #94a3b8; }
.wk-gld-owner-item--none .wk-gld-owner-av--none { background: #f1f5f9; color: #cbd5e1; }

/* ══════════════════════════════════════════════════════════
   REVIEW — owner cell with avatar
   ══════════════════════════════════════════════════════════ */
.wk-gld-review-owner {
  display: inline-flex; align-items: center; gap: 10px;
}
.wk-gld-review-owner .wk-gld-owner-av { width: 24px; height: 24px; font-size: 9.5px; }

.wk-gld-review-success {
  margin-top: 10px; padding: 10px 12px;
  background: #ecfdf5; border-radius: 9px;
  font-size: 12.5px; color: #065f46; line-height: 1.5;
  border-left: 3px solid #10b981;
}
.wk-gld-review-success-lbl {
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 10.5px; color: #047857; margin-right: 6px;
}

/* ══════════════════════════════════════════════════════════
   FOOTER POLISH — pill the hint so it doesn't read as an error
   when the goal is valid.
   ══════════════════════════════════════════════════════════ */
.wk-gld-drawer .wk-pbd-foot-hint {
  font-size: 12px; color: #64748b;
  margin-right: 8px;
}