/* Calm Surface migration 10 -- Deliverables + Notes panels. Scoped via :is() to
   #deliverables-panel and #notes-panel only (strangler-safe). Calms type, card
   frames, textareas, tables, and buttons (existing teal primaries -> calm accent;
   others -> calm secondary; destructive -> error-tinted). */

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

/* Card frames */
:is(#deliverables-panel, #notes-panel) .bg-white {
  background: var(--color-surface-1);
  border-color: var(--color-border-subtle);
}

/* Tables (if present) */
:is(#deliverables-panel, #notes-panel) thead {
  background: var(--color-surface-sunken);
  color: var(--color-text-strong);
  border-block-end: 1px solid var(--color-border-default);
}
:is(#deliverables-panel, #notes-panel) tbody tr { border-block-end: 1px solid var(--color-border-subtle); }
:is(#deliverables-panel, #notes-panel) tbody tr:hover { background: var(--color-surface-2); }

/* Textareas / inputs -> calm field */
:is(#deliverables-panel, #notes-panel) textarea,
:is(#deliverables-panel, #notes-panel) input[type="text"] {
  background: var(--color-surface-1);
  color: var(--color-text-default);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}
:is(#deliverables-panel, #notes-panel) textarea:focus-visible,
:is(#deliverables-panel, #notes-panel) input[type="text"]:focus-visible { border-color: var(--color-border-focus); }
:is(#deliverables-panel, #notes-panel) textarea::placeholder { color: var(--color-text-subtle); }

/* Buttons: calm secondary base; existing teal primary -> calm accent; delete -> error */
:is(#deliverables-panel, #notes-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: 2rem;
}
:is(#deliverables-panel, #notes-panel) button:hover { background: var(--color-surface-2); }
:is(#deliverables-panel, #notes-panel) button[class*="bg-teal"],
:is(#deliverables-panel, #notes-panel) button[class*="bg-emerald"] {
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent);
  border-color: transparent;
}
:is(#deliverables-panel, #notes-panel) button[class*="bg-teal"]:hover,
:is(#deliverables-panel, #notes-panel) button[class*="bg-emerald"]:hover { background: var(--color-accent-primary-hover); }
:is(#deliverables-panel, #notes-panel) button[data-onclick*="elete"],
:is(#deliverables-panel, #notes-panel) button[class*="bg-rose"],
:is(#deliverables-panel, #notes-panel) button[class*="bg-red"] {
  background: var(--color-semantic-error-tint);
  color: var(--color-semantic-error);
  border-color: transparent;
}

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