/* Calm Surface migration 3 -- re-skin the Keywords table ONLY.
   Reuses the data-active-tab hook from migration 2: every rule is under
   #table-wrapper[data-active-tab="keywords_live"], so no other table tab is
   touched. Intent chips (INTENT_COLOR spans) are intentionally LEFT ALONE --
   their colour is meaningful data encoding, not chrome. */

#table-wrapper[data-active-tab="keywords_live"] {
  font-family: var(--font-family-sans);
  border-color: var(--color-border-subtle);
  border-radius: var(--radius-md);
}
#table-wrapper[data-active-tab="keywords_live"] #dynamic-table {
  color: var(--color-text-default);
  font-feature-settings: var(--font-feature-tabular);
}

/* Header + rows */
#table-wrapper[data-active-tab="keywords_live"] thead {
  background: var(--color-surface-sunken);
  color: var(--color-text-strong);
  border-block-end: 1px solid var(--color-border-default);
}
#table-wrapper[data-active-tab="keywords_live"] thead th { font-weight: var(--font-weight-semibold); }
#table-wrapper[data-active-tab="keywords_live"] tbody tr { border-block-end: 1px solid var(--color-border-subtle); }
#table-wrapper[data-active-tab="keywords_live"] tbody tr:hover { background: var(--color-surface-2); }
#table-wrapper[data-active-tab="keywords_live"] tbody td { color: var(--color-text-default); }

/* Row action buttons -> consistent calm secondary by default */
#table-wrapper[data-active-tab="keywords_live"] td button {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  color: var(--color-text-default);
  min-height: 2rem;
}
#table-wrapper[data-active-tab="keywords_live"] td button:hover { background: var(--color-surface-2); }

/* The one primary action on a keyword row: Optimize with AI -> accent.
   Destructive Delete -> error-tinted, not a loud fill. (Targeted by data-onclick
   so the semantics drive the emphasis, not button order.) */
#table-wrapper[data-active-tab="keywords_live"] td button[data-onclick^="keywordOptimize"] {
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent);
  border-color: transparent;
}
#table-wrapper[data-active-tab="keywords_live"] td button[data-onclick^="keywordOptimize"]:hover {
  background: var(--color-accent-primary-hover);
}
#table-wrapper[data-active-tab="keywords_live"] td button[data-onclick^="keywordDelete"] {
  background: var(--color-semantic-error-tint);
  color: var(--color-semantic-error);
  border-color: transparent;
}

#table-wrapper[data-active-tab="keywords_live"] :focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}