/* Calm Surface migration 9 -- re-skin the Locations + Citations panels (shared renderer). Scoped to :is(#location-panel, #citations-panel)
   only (strangler-safe). Rich composite: branch tables (sticky first column), service-
   area + certification matrices, province chips, per-row actions. Calms the structural
   chrome (type, tables, card frames, buttons) and PRESERVES meaningful colour --
   PASS/FAIL cert cells, status chips -- which out-specify the element-level rules here. */

:is(#location-panel, #citations-panel) {
  font-family: var(--font-family-sans);
  color: var(--color-text-default);
  font-feature-settings: var(--font-feature-tabular);
}
:is(#location-panel, #citations-panel) h1, :is(#location-panel, #citations-panel) h2, :is(#location-panel, #citations-panel) h3 {
  color: var(--color-text-strong);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-tight);
}

/* Tables (inner, not the shared #dynamic-table) */
:is(#location-panel, #citations-panel) table { border-color: var(--color-border-subtle); }
:is(#location-panel, #citations-panel) thead {
  background: var(--color-surface-sunken);
  color: var(--color-text-strong);
  border-block-end: 1px solid var(--color-border-default);
}
:is(#location-panel, #citations-panel) thead th { font-weight: var(--font-weight-semibold); }
:is(#location-panel, #citations-panel) tbody tr { border-block-end: 1px solid var(--color-border-subtle); }
:is(#location-panel, #citations-panel) tbody tr:hover { background: var(--color-surface-2); }

/* Card frames + the sticky branch-name cell (keep it opaque so it covers scroll) */
:is(#location-panel, #citations-panel) .bg-white {
  background: var(--color-surface-1);
  border-color: var(--color-border-subtle);
}

/* Buttons -> consistent calm secondary; destructive -> error-tinted. Per-row
   controls use the 24px AA floor, not the 44px primary-touch target (density). */
:is(#location-panel, #citations-panel) 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: 1.9rem;
}
:is(#location-panel, #citations-panel) button:hover { background: var(--color-surface-2); }
:is(#location-panel, #citations-panel) button[data-onclick*="elete"],
:is(#location-panel, #citations-panel) button[data-onclick*="emove"] {
  background: var(--color-semantic-error-tint);
  color: var(--color-semantic-error);
  border-color: transparent;
}

:is(#location-panel, #citations-panel) :focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}