/* ═══════════════════════════════════════════════════════════════════════
   wkt-capture-chrome.css  v1
   ONE look for every "add this to the template" popup in the Template
   Builder.

   The builder deliberately authors each item in the app's REAL popup
   (capture mode) rather than a mini-form — see work-templates.js. The cost
   of that is three popups from three different files, each with its own
   chrome, so + Stage / + Work Stream / + Deliverable / + Task looked like
   four different products:

     work stream   .gp-popup       1240px, 20px radius, NO backdrop scrim,
                                   grey square-pill tabs, blue footer button
     deliverable   .ep-deliv-modal 1140px, 16px radius, GREEN gradient header,
                                   folder tabs, green gradient footer button
     task/m'stone  .tp-popup       94vw,   14px radius, ORANGE tab strip,
                                   commit button up in the HEADER, green
     stage         (no popup at all — typed straight into the row)

   This file leaves every popup's FIELDS exactly where they are — each one
   still carries its own information, tabs and AI — and normalizes only the
   shell: scrim, panel geometry, header band, tab strip, footer, buttons.

   Scope: `.wkc-capture`, set on the overlay by whichever module opened it
   (project-detail.js / engagement-profile.js / work.js) only while it is
   capturing for a template. Nothing here can reach a live record popup.

   `.wkc-*` is also the skeleton the stage popup is built from directly, so
   the canonical numbers below are written once and the three record popups
   are mapped onto them.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The canonical spec ──────────────────────────────────────────────── */
.wkc-capture {
  --wkc-w: 1180px;
  --wkc-h: 90vh;
  --wkc-r: 18px;
  --wkc-scrim: rgba(15, 23, 42, .55);
  --wkc-shadow: 0 30px 70px -12px rgba(15, 23, 42, .38), 0 0 0 1px rgba(15, 23, 42, .06);
  --wkc-line: #eef2f7;
  --wkc-band: #f8fafc;
  --wkc-ink: #0f172a;
  --wkc-muted: #64748b;
  --wkc-primary: #2563eb;
  --wkc-primary-hi: #1d4ed8;
}

/* ── Backdrop ────────────────────────────────────────────────────────
   The work-stream popup opened over a fully transparent overlay, so it was
   the one that never dimmed what it covered. All four dim identically. */
.wkc-capture {
  background: var(--wkc-scrim) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ═══════════════ 1. PANEL — same box, whichever popup it is ═══════════ */
.wkc-capture .gp-popup,
.wkc-capture .ep-deliv-modal,
.wkc-capture .tp-popup,
.wkc-capture .wkc-panel {
  width: var(--wkc-w) !important;
  max-width: 94vw !important;
  height: var(--wkc-h) !important;
  max-height: 90vh !important;
  border-radius: var(--wkc-r) !important;
  box-shadow: var(--wkc-shadow) !important;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

/* A popup with one field is not made better by being 1180px wide. Same
   chrome, sized to what it holds. */
.wkc-capture .wkc-panel--sm {
  width: 580px !important;
  max-width: 94vw !important;
  height: auto !important;
  max-height: 88vh !important;
}

/* ═══════════════ 2. HEADER BAND ══════════════════════════════════════ */
.wkc-capture .gp-topbar,
.wkc-capture .ep-deliv-modal-head,
.wkc-capture .tp-header,
.wkc-capture .wkc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 20px !important;
  background: #fff !important;      /* kills the deliverable's green gradient */
  background-image: none !important;
  border-bottom: 1px solid var(--wkc-line) !important;
  flex-shrink: 0;
}

/* One title type scale — was 16px / 14px green / 18px across the three. */
.wkc-capture .gp-topbar-title,
.wkc-capture .ep-deliv-modal-title,
.wkc-capture .tp-header-title,
.wkc-capture .wkc-head-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--wkc-ink) !important;
}
.wkc-capture .gp-topbar-subtitle,
.wkc-capture .wkc-head-sub {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--wkc-muted);
}
/* The deliverable header icon was emerald; the work-stream one a blue
   gradient tile. One tile, one colour. */
.wkc-capture .gp-topbar-icon,
.wkc-capture .wkc-head-icon {
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wkc-capture .gp-topbar-icon svg,
.wkc-capture .wkc-head-icon svg {
  width: 19px; height: 19px; color: #fff; stroke: #fff; fill: none; stroke-width: 2;
}
.wkc-capture .ep-deliv-modal-title svg { color: var(--wkc-primary) !important; }

.wkc-capture .wkc-head-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

/* Close button — same 30px ghost square in all four. */
.wkc-capture .ep-deliv-modal-close,
.wkc-capture .tp-hdr-close,
.wkc-capture .wkc-head-close {
  width: 30px; height: 30px; flex: 0 0 auto;
  border: none; background: transparent; color: var(--wkc-muted);
  border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.wkc-capture .ep-deliv-modal-close:hover,
.wkc-capture .tp-hdr-close:hover,
.wkc-capture .wkc-head-close:hover { background: #f1f5f9; color: var(--wkc-ink); }
.wkc-capture .wkc-head-close svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }

/* The "Editing" pill is noise here: a capture popup is ALWAYS in edit mode,
   so an amber badge saying so on three of the four popups (and pulsing on
   one) was the loudest thing in the header and told nobody anything. */
.wkc-capture #tpEditBanner,
.wkc-capture #pdpEditBanner,
.wkc-capture #gdEditBanner,
.wkc-capture .ep-deliv-modal-editing { display: none !important; }

/* ═══════════════ 3. TAB STRIP ════════════════════════════════════════
   Placement differs by popup (the task popup's pills live inside its left
   column, the other two run full width) and moving that DOM would be a
   rebuild of three files. The look is what read as "different product":
   one neutral band, one pill shape, one active colour. */
.wkc-capture .gp-tabs,
.wkc-capture .ep-deliv-modal-tabs,
.wkc-capture .tp-pill-bar {
  gap: 6px !important;
  padding: 9px 20px !important;
  background: var(--wkc-band) !important;
  background-image: none !important;   /* kills the task popup's orange gradient */
  border-bottom: 1px solid var(--wkc-line) !important;
  border-radius: 0 !important;
  flex-shrink: 0;
}
/* The task strip is inset in a column, so it keeps its own gutter. */
.wkc-capture .tp-pill-bar {
  margin: 0 0 18px !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  border-bottom: 1px solid var(--wkc-line) !important;
}

.wkc-capture .gp-tab,
.wkc-capture .ep-deliv-modal .ep-deliv-modal-tab,
.wkc-capture .tp-pill {
  flex: 0 0 auto !important;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 !important;
  padding: 8px 15px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--wkc-muted) !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none !important;
}
.wkc-capture .gp-tab:hover,
.wkc-capture .ep-deliv-modal-tab:hover,
.wkc-capture .tp-pill:hover {
  background: #eef2f7 !important;
  color: var(--wkc-ink) !important;
}
.wkc-capture .gp-tab.is-active,
.wkc-capture .ep-deliv-modal .ep-deliv-modal-tab.is-active,
.wkc-capture .tp-pill.is-active {
  background: #fff !important;
  color: var(--wkc-primary) !important;
  font-weight: 700 !important;
  border-color: rgba(37, 99, 235, .22) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .07) !important;
}
.wkc-capture .gp-tab-badge,
.wkc-capture .ep-deliv-modal-tab-badge,
.wkc-capture .tp-pill-badge {
  min-width: 17px; height: 17px; padding: 0 6px;
  border-radius: 999px;
  background: #e2e8f0 !important;
  color: var(--wkc-muted) !important;
  font-size: 10px !important; font-weight: 800 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.wkc-capture .gp-tab.is-active .gp-tab-badge,
.wkc-capture .ep-deliv-modal-tab.is-active .ep-deliv-modal-tab-badge,
.wkc-capture .tp-pill.is-active .tp-pill-badge {
  background: #dbeafe !important; color: var(--wkc-primary) !important;
}
.wkc-capture .ep-deliv-modal-tab-badge--ghost {
  background: #f1f5f9 !important; color: #94a3b8 !important; font-weight: 700 !important;
}

/* ═══════════════ 4. BODY ═════════════════════════════════════════════ */
.wkc-capture .wkc-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wkc-capture .wkc-field { display: flex; flex-direction: column; gap: 6px; }
.wkc-capture .wkc-field-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wkc-muted);
}
.wkc-capture .wkc-input,
.wkc-capture .wkc-select {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #e2e8f0; border-radius: 10px;
  font: 600 14px/1.3 inherit; color: var(--wkc-ink);
  background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.wkc-capture .wkc-input::placeholder { color: #94a3b8; font-weight: 500; }
.wkc-capture .wkc-input:focus,
.wkc-capture .wkc-select:focus {
  border-color: var(--wkc-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.wkc-capture .wkc-field-hint {
  font-size: 11.5px; font-weight: 500; line-height: 1.45; color: var(--wkc-muted);
}
/* Committed with a required field empty. Flashes rather than toasts — the
   field is right there and a toast over a 580px popup covers it. */
.wkc-capture .wkc-input--err {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .14) !important;
}

/* ═══════════════ 5. FOOTER ═══════════════════════════════════════════
   Every capture popup commits from the SAME place: bottom-right. The task
   popup used to commit from a green button up in its header, which is why
   people hunted for "Add to template" on that one. */
.wkc-capture .ep-deliv-modal-foot,
.wkc-capture #gdCreateFoot,
.wkc-capture .wkc-foot {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 13px 20px !important;
  background: #fff !important;
  border-top: 1px solid var(--wkc-line) !important;
  border-radius: 0 0 var(--wkc-r) var(--wkc-r) !important;
  flex-shrink: 0;
}
.wkc-capture .ep-deliv-modal-foot-right { display: flex; gap: 10px; }
.wkc-capture .wkc-foot-note,
.wkc-capture #gdCaptureNote {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: var(--wkc-muted);
}

/* One primary button. Was blue-flat / green-gradient / green-flat. */
.wkc-capture .wkc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 18px;
  border: 1px solid #e2e8f0; border-radius: 10px;
  background: #fff; color: #475569;
  font: 700 13px/1 inherit; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.wkc-capture .wkc-btn:hover { background: #f8fafc; border-color: #cbd5e1; }

.wkc-capture .wkc-btn--primary,
.wkc-capture .ep-deliv-btn--primary,
.wkc-capture #gdCaptureCommit,
.wkc-capture #tpCaptureCommit {
  height: 38px !important;
  padding: 0 20px !important;
  border: none !important;
  border-radius: 10px !important;
  background: var(--wkc-primary) !important;
  background-image: none !important;
  color: #fff !important;
  font: 700 13px/1 inherit !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .3) !important;
}
.wkc-capture .wkc-btn--primary:hover,
.wkc-capture .ep-deliv-btn--primary:hover,
.wkc-capture #gdCaptureCommit:hover,
.wkc-capture #tpCaptureCommit:hover {
  background: var(--wkc-primary-hi) !important;
  background-image: none !important;
}

.wkc-capture .wkc-btn--ghost,
.wkc-capture #gdCaptureCancel,
.wkc-capture #tpCaptureCancel {
  height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #475569 !important;
  font: 700 13px/1 inherit !important;
  cursor: pointer;
}
.wkc-capture .wkc-btn--ghost:hover,
.wkc-capture #gdCaptureCancel:hover,
.wkc-capture #tpCaptureCancel:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; }

.wkc-capture .wkc-btn--danger,
.wkc-capture #gdCaptureDrop {
  height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid #fecaca !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #b91c1c !important;
  font: 700 13px/1 inherit !important;
  cursor: pointer;
}
.wkc-capture .wkc-btn--danger:hover,
.wkc-capture #gdCaptureDrop:hover { background: #fef2f2 !important; border-color: #f87171 !important; }

/* The task popup's other header buttons stay for what they do (⋯ menu, AI,
   mark complete); only the COMMIT moves down into #tpCaptureFoot, built by
   work.js. Belt and braces in case a render pass re-shows it. */
.wkc-capture #tpCreateBtn { display: none !important; }

/* ═══════════════ 6. THE STAGE POPUP'S OWN OVERLAY ════════════════════
   The three record popups arrive with an overlay already; the stage popup
   is built from scratch, so it needs one. Above the template editor
   (.wkt-detail, z 2000000) and its pickers (2000300), same as the popups
   the other three tiers open. */
.wkc-overlay {
  position: fixed; inset: 0; z-index: 2000400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility 0s .2s;
}
.wkc-overlay.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .2s ease, visibility 0s 0s;
}
.wkc-overlay .wkc-panel {
  transform: translateY(10px) scale(.97);
  transition: transform .24s cubic-bezier(.16, .84, .44, 1);
}
.wkc-overlay.is-open .wkc-panel { transform: translateY(0) scale(1); }

/* ── Narrow screens: all four go edge to edge, together ── */
@media (max-width: 720px) {
  .wkc-capture .gp-popup,
  .wkc-capture .ep-deliv-modal,
  .wkc-capture .tp-popup,
  .wkc-capture .wkc-panel {
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important; max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .wkc-capture .wkc-panel--sm { height: auto !important; max-height: 100vh !important; }
  .wkc-overlay { padding: 0; }
  .wkc-capture .ep-deliv-modal-foot,
  .wkc-capture #gdCreateFoot,
  .wkc-capture .wkc-foot { border-radius: 0 !important; }
}