/* Integrations extend the existing light and dark Pipedash surfaces. */
.integrations-page { max-width: 920px; margin: 0 auto; color: var(--text-primary); }
.integrations-page [hidden], .integration-panel [hidden] { display: none !important; }
.integration-back { display: inline-block; margin-bottom: 16px; color: var(--text-secondary); font-size: .82rem; text-decoration: none; }
.integration-back:hover { color: var(--primary); text-decoration: underline; }
.integration-intro { max-width: 70ch; color: var(--text-secondary); font-size: .93rem; line-height: 1.65; margin: 12px 0 28px; }
.integration-section { padding: 26px 0; border-top: 1px solid var(--separator, var(--border)); }
.integration-section h2 { margin: 0 0 10px; font-size: 1.2rem; letter-spacing: -.015em; }
.integration-section h3 { margin: 24px 0 8px; font-size: .98rem; }
.integration-hint, .integration-workflow { max-width: 72ch; margin: 8px 0 16px; color: var(--text-secondary); font-size: .85rem; line-height: 1.65; }
.integration-workflow { color: var(--text-primary); }
.integration-create { display: flex; align-items: flex-end; gap: 12px; margin: 22px 0; }
.integration-field { flex: 1; max-width: 400px; min-width: 0; }
.integration-field label, .integration-secret label { display: block; margin-bottom: 7px; font-size: .82rem; font-weight: 550; }
.integration-field input { width: 100%; }
.integration-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.integration-connection { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--separator, var(--border)); }
.integration-connection > div { min-width: 0; }
.integration-connection h3 { margin: 0 0 5px; font-size: .9rem; overflow-wrap: anywhere; }
.integration-connection > button { flex-shrink: 0; }
.integration-meta { margin: 4px 0; font-size: .76rem; color: var(--text-secondary); line-height: 1.6; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.integration-secret { margin: 20px 0; padding: 20px; border: 1px solid var(--separator, var(--border)); border-radius: 12px; background: var(--page-bg); }
.integration-secret h3 { margin-top: 0; }
.integration-code { box-sizing: border-box; display: block; width: 100%; max-width: 100%; min-width: 0; margin: 12px 0; padding: 14px; border: 1px solid var(--separator, var(--border)); border-radius: 8px; background: var(--page-bg); color: var(--text-primary); font: .8rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.integration-code code { color: inherit; background: none; font: inherit; padding: 0; }
.integration-message { margin: 8px 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.integration-message:empty { display: none; }
.integration-error { color: #b91c1c; font-size: .84rem; line-height: 1.6; overflow-wrap: anywhere; }
.integration-empty { color: var(--text-secondary); font-size: .84rem; line-height: 1.65; margin: 12px 0; }
.integration-panel { color: var(--text-primary); }
.integration-suggestions { margin-bottom: 24px; padding: 15px 0; border-block: 1px solid var(--separator, var(--border)); }
.integration-panel-heading { font-size: .9rem; font-weight: 600; margin: 0; line-height: 1.5; }
summary.integration-panel-heading { cursor: pointer; padding: 3px 0; }
.integration-suggestions[open] .integration-panel-heading { margin-bottom: 14px; }
.integration-count { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 5px; background: var(--primary-tint); color: var(--text-primary); font-size: .76rem; }
.integration-panel-controls { display: flex; justify-content: flex-end; margin: 6px 0; }
.integration-record { padding: 16px 0; border-top: 1px solid var(--separator, var(--border)); }
.integration-record h4 { margin: 0 0 5px; font-size: .93rem; line-height: 1.5; overflow-wrap: anywhere; }
.integration-record-text { margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-primary); font-size: .85rem; line-height: 1.65; }
.integration-source { color: var(--primary); font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.integration-meetings { margin-top: 24px; }
.integrations-page .btn-primary, .integration-panel .btn-primary { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }
.integrations-page .btn-primary:hover, .integration-panel .btn-primary:hover { background: #1d4ed8 !important; }
.integrations-page button:disabled, .integration-panel button:disabled { opacity: .55; cursor: not-allowed; }
.integrations-page :is(button, input, textarea, a):focus-visible, .integration-panel :is(button, summary, a):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
html.theme-dark .integration-error { color: #fca5a5; }
html.theme-dark .integration-source { color: #93c5fd; }
@media (max-width: 540px) {
  .integration-create, .integration-connection { align-items: stretch; flex-direction: column; gap: 10px; }
  .integration-field { max-width: none; }
  .integration-secret { padding: 16px; }
  .integration-actions .btn { flex: 1 1 auto; }
  .integration-code { font-size: .74rem; }
}