/* Visual polish pass, 2026-10 (baseline: docs/ui-audit/2026-10, PR #440).

   Loaded after every other product stylesheet, so a fix here wins without
   touching the layout files the UX threads are changing. Values only come
   from the shared design system (vl-design.css): one primary colour, one
   button shape, a visible keyboard focus on every control. Visual only: no
   selector here hides, moves or adds a control. */

/* 1. Keyboard focus on every control, not only buttons and links. */
.mx-next :is(input, select, textarea, summary, [role="tab"], [role="menuitem"]):focus-visible,
.mx-modal :is(button, a, input, select, textarea, summary):focus-visible,
#agent-chat-mount :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--vl-focus, #58a6ff);
  outline-offset: 2px;
}

/* 2. One primary colour. "Send and start" and the decision confirm were the
   only green fills in the product (audit 01 §13); they are the main action of
   their area, so they take the shared primary. */
#agent-chat-mount.mx-task-draft-open .send-btn[data-draft-send="true"],
.task-ai-echo__btn--primary {
  background: var(--vl-primary, #1f6feb);
  border-color: var(--vl-primary, #1f6feb);
  color: var(--vl-on-primary, #fff);
}
#agent-chat-mount.mx-task-draft-open .send-btn[data-draft-send="true"]:hover:not(:disabled),
.task-ai-echo__btn--primary:hover:not(:disabled) {
  background: var(--vl-primary-hover, #1a62d6);
  border-color: var(--vl-primary-hover, #1a62d6);
}

/* 3. Dialogs. components.css paints every `button[type=submit]` in a modal as a
   secondary button at a higher specificity than `.mx-btn--primary`, so the
   main action of every dialog ("Create Task Line", "Use this folder", ...)
   looked like Cancel (audit 01 §14-15). The submit keeps primary unless it is
   explicitly ghost or danger; modal buttons use the product button radius. */
html[data-theme] .mx-modal .mx-modal__foot button.mx-btn--primary[type="submit"],
.mx-modal .mx-modal__foot button.mx-btn--primary[type="submit"] {
  background: var(--vl-primary, #1f6feb) !important;
  border-color: var(--vl-primary, #1f6feb) !important;
  color: var(--vl-on-primary, #fff) !important;
}
html[data-theme] .mx-modal .mx-modal__foot button.mx-btn--primary[type="submit"]:hover:not(:disabled),
.mx-modal .mx-modal__foot button.mx-btn--primary[type="submit"]:hover:not(:disabled) {
  background: var(--vl-primary-hover, #1a62d6) !important;
  border-color: var(--vl-primary-hover, #1a62d6) !important;
}
html[data-theme] .mx-modal .mx-modal__foot button:disabled,
.mx-modal .mx-modal__foot button:disabled { opacity: .45; cursor: not-allowed; }
html[data-theme] .mx-modal .mx-btn,
html[data-theme] .mx-modal button[type="submit"],
html[data-theme] .mx-modal button[data-overlay-close]:not(.mx-close),
.mx-modal .mx-btn,
.mx-modal button[type="submit"],
.mx-modal button[data-overlay-close]:not(.mx-close) {
  min-height: var(--vl-control-md, 34px);
  border-radius: var(--vl-radius-md, 6px);
}

/* 4. "Remove this Workspace" rendered as unstyled 15px body text that read as a
   heading (audit 01 §13): the legacy light theme's element rule outranked its
   class. It is a low-emphasis destructive action: tertiary, danger on hover. */
html[data-theme] .mx-next .task-tree__remove-workspace {
  display: inline-flex;
  width: auto;
  min-height: var(--vl-control-sm, 28px);
  margin: 4px 0 0 4px;
  padding: 0 var(--vl-space-2, 8px);
  border: 1px solid transparent;
  border-radius: var(--vl-radius-md, 6px);
  background: transparent;
  color: var(--vl-text-faint, #848d97);
  font: var(--vl-weight-medium, 500) var(--vl-text-xs, 11px) / var(--vl-leading-xs, 16px) var(--vl-font-sans);
}
html[data-theme] .mx-next .task-tree__remove-workspace:hover {
  border-color: color-mix(in srgb, var(--vl-danger, #f85149) 45%, transparent);
  color: var(--vl-danger, #f85149);
}

/* 5. Icons: the notification bell is an SVG from the same stroke set as the
   rest of the chrome instead of a colour emoji. */
.mx-icon-btn svg { width: 15px; height: 15px; display: block; }