/* Work capture widget (S5) -- calm quick-add input + live preview + hint.
 *
 * Shared by the Work module's own personal surfaces (My Day header, Projects
 * header). Every rule is scoped under [data-module="work"] .wk-cap so nothing
 * bleeds onto other modules; colours come ONLY from platform design tokens and
 * the module's --wk-* palette (both defined for dark default + light), so both
 * themes are covered without per-theme overrides here. ASCII only.
 */

[data-module="work"] .wk-cap {
  display: block;
  margin: 0 0 14px 0;
}

[data-module="work"] .wk-cap-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--input-bg, var(--panel-2));
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

[data-module="work"] .wk-cap-input::placeholder {
  color: var(--text-tertiary);
}

[data-module="work"] .wk-cap-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Live parsed preview -- only shown once the parser returns a result. */
[data-module="work"] .wk-cap-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

[data-module="work"] .wk-cap-preview:empty {
  margin-top: 0;
}

[data-module="work"] .wk-cap-ptext {
  color: var(--text-primary);
  font-weight: 500;
}

[data-module="work"] .wk-cap-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

[data-module="work"] .wk-cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 11.5px;
  line-height: 1.6;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  background: var(--panel-2);
  white-space: nowrap;
}

[data-module="work"] .wk-cap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--wk-overhead);
}

/* Destination chips carry a quiet tint so the target reads at a glance. */
[data-module="work"] .wk-cap-chip.inbox {
  color: var(--wk-captured);
  border-color: var(--wk-captured-line);
  background: var(--wk-captured-soft);
}

[data-module="work"] .wk-cap-chip.project {
  color: var(--text-primary);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

[data-module="work"] .wk-cap-chip.bucket {
  color: var(--wk-overhead);
  border-color: var(--wk-overhead-line);
  background: var(--wk-overhead-soft);
}

[data-module="work"] .wk-cap-chip.unmatched {
  color: var(--wk-overdue);
  border-color: var(--wk-overdue-soft);
  background: var(--wk-overdue-soft);
}

[data-module="work"] .wk-cap-chip.due {
  color: var(--wk-due);
  border-color: var(--wk-due-soft);
  background: var(--wk-due-soft);
}

[data-module="work"] .wk-cap-chip.est {
  color: var(--text-secondary);
}

[data-module="work"] .wk-cap-chip.pri-high {
  color: var(--wk-overdue);
  border-color: var(--wk-overdue-soft);
  background: var(--wk-overdue-soft);
  font-weight: 600;
}

[data-module="work"] .wk-cap-chip.pri-low {
  color: var(--text-tertiary);
}

/* Calm hint line under the input. */
[data-module="work"] .wk-cap-hint {
  margin: 6px 0 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* Global 'n' quick-capture overlay -- a body-level surface hosting the shared
 * .wk-cap widget. The overlay root carries data-module="work" so the .wk-cap*
 * rules above still apply despite the body mount. Backdrop dim + z-index reuse
 * the platform overlay's --overlay-bg token / 9000 stack (see .strata-overlay
 * in platform/styles.css) so both themes are covered and lint stays clean. */
.wk-gcap-overlay[data-module="work"] {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--overlay-bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

[data-module="work"] .wk-gcap-card {
  width: min(560px, 92vw);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
  padding: 18px 18px 16px;
}

[data-module="work"] .wk-gcap-title {
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 10px;
}