/* The workspace responds to available width, including the application sidebar. */
#integrations-workspace { container: integrations / inline-size; min-width: 0; color: oklch(25% .025 215); }
#integrations-workspace .text-slate-500,
#integrations-workspace .text-slate-600 { color: oklch(40% .025 215); }
#integrations-workspace .text-emerald-600 { color: oklch(33% .07 155); }
#integrations-workspace .text-rose-600 { color: oklch(36% .12 25); }
#integrations-workspace button,
#integrations-workspace select,
#integrations-workspace input:not([type=checkbox]),
#integrations-workspace summary { min-height: 44px; }
#integrations-workspace button { white-space: normal; }
#integrations-workspace button:disabled { opacity: .65; cursor: not-allowed; }
#integrations-workspace :is(button,a,input,select,summary,[tabindex]):focus-visible { outline: 3px solid oklch(35% .08 215); outline-offset: 3px; }
#integrations-workspace :is(input,select) { max-width: 100%; min-width: 0; }
#integrations-workspace :is(h1,h2,h3,p,dd,code) { overflow-wrap: anywhere; }
#integrations-workspace .integration-nav { background: transparent; border-radius: 0; }
#integrations-workspace .integration-nav button { border-radius: 6px; gap: 8px; }
#integrations-workspace .integration-nav button:not([aria-selected=true]) { color: oklch(35% .025 215) !important; }
#integrations-workspace header .mb-2 { color: oklch(35% .06 205); }
#integrations-workspace .integration-nav .material-icons { font-size: 20px; }
#integrations-workspace .provider-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: 1px; }
#integrations-workspace .provider-options button { border-top: 1px solid oklch(87% .012 215); }
#integrations-workspace summary { padding: 10px 12px; cursor: pointer; }
.connection-selector { display: none; margin-bottom: 16px; }
.connection-selector select { display: block; width: 100%; border: 1px solid oklch(75% .015 215); border-radius: 6px; padding: 8px 12px; margin-top: 6px; background: oklch(99% .003 215); }
.resource-row { display: grid; grid-template-columns: minmax(110px,.8fr) minmax(0,1.4fr) auto; gap: 18px; align-items: center; padding: 18px 12px; }
.resource-meta { font-size: .8125rem; line-height: 1.65; color: oklch(40% .025 215); margin-top: 4px; }
.resource-status { font-size: .875rem; }
.resource-status[data-state=healthy] { color: oklch(33% .065 155); }
.resource-status:is([data-state=failed],[data-state=needs_review],[data-state=degraded]) { color: oklch(35% .09 35); }
.resource-retry { border: 1px solid oklch(73% .015 215); border-radius: 6px; padding: 8px 12px; font-size: .875rem; background: oklch(99% .003 215); }
.resource-retry:hover { background: oklch(94% .02 205); }
.resource-code-toggle { font-size: .8125rem; }
.sync-notice { border: 1px solid oklch(76% .03 205); background: oklch(94% .02 205); padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; }

/* ── Cinematic hero: deep navy stage with a live beacon ── */
.fl-hero { position: relative; overflow: hidden; border-radius: 1.25rem; color: #fff;
  background: linear-gradient(135deg, #0A1628 0%, #1B2A4A 58%, #123a4d 100%);
  box-shadow: 0 18px 45px -20px rgba(10,22,40,.65); }
.fl-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 320px at 88% -10%, rgba(0,212,255,.28), transparent 65%),
              radial-gradient(600px 260px at 5% 115%, rgba(16,185,129,.2), transparent 60%); }
.fl-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 78%); }
.fl-hero > * { position: relative; z-index: 1; }
.fl-beacon { position: relative; width: .7rem; height: .7rem; border-radius: 999px;
  background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.7); }
.fl-beacon.is-warn { background: #fbbf24; box-shadow: 0 0 0 0 rgba(251,191,36,.7); }
.fl-beacon::after { content: ""; position: absolute; inset: -4px; border-radius: 999px;
  border: 2px solid currentColor; opacity: 0; color: inherit;
  animation: fl-ring 2.1s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes fl-ring { 0% { transform: scale(.55); opacity: .85; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
.fl-fear { transition: transform .2s ease, background-color .2s ease; }
.fl-fear:hover { transform: translateY(-2px); background-color: rgba(255,255,255,.07); }
.fl-countdown { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.fl-pulse-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.fl-pulse-bar > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #00D4FF, #34d399); animation: fl-flow 2.6s ease-in-out infinite; }
@keyframes fl-flow { 0%,100% { width: 22%; opacity: .65; } 50% { width: 74%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fl-beacon::after, .fl-pulse-bar > i { animation: none; }
  .fl-fear { transition: none; }
}
#integrations-workspace [role=dialog] { overflow-y: auto; overscroll-behavior: contain; }
#integrations-workspace [role=dialog] > :is(form,div) { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
#integrations-workspace [role=dialog] .justify-end { flex-wrap: wrap; }
@container integrations (min-width: 851px) {
  #integrations-workspace #panel-connections .grid.overflow-hidden { grid-template-columns: 14rem minmax(0,1fr); }
}
@container integrations (max-width: 850px) {
  #panel-connections .grid.overflow-hidden { grid-template-columns: minmax(0,1fr); }
  .connection-list { display: none; }
  .connection-selector { display: block; }
  .resource-row { grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; }
  .resource-row > div:nth-child(2) { grid-column: 1; }
  .resource-row > button { grid-column: 2; grid-row: 1 / 3; }
}
@container integrations (max-width: 480px) {
  #integrations-workspace .integration-nav button { padding-inline: 10px; font-size: .8125rem; }
  #integrations-workspace .integration-nav .material-icons { display: none; }
  #panel-connections .min-h-\[30rem\] { padding: 16px; }
  #panel-connections article > .flex { flex-wrap: wrap; }
  .resource-row { padding-inline: 8px; }
}