/* 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,
#integrations-workspace .text-slate-400 { 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 .fl-hero :is(button,a):focus-visible { outline-color: oklch(88% .07 215); }
#integrations-workspace :is(.bg-rose-500,.bg-rose-600).text-white { background-color: oklch(38% .13 25); }
#integrations-workspace .bg-amber-600.text-white { background-color: oklch(39% .08 75); }
#integrations-workspace .bg-emerald-600.text-white { background-color: oklch(33% .07 155); }
#integrations-workspace :is(input,select) { max-width: 100%; min-width: 0; }
#integrations-workspace :is(h1,h2,h3,p,dd,code,strong,button) { overflow-wrap: anywhere; }
#integrations-workspace :is(article,form,dl,.fl-hero > div) { min-width: 0; }
[dir=ltr] .integration-logical-chevron { transform: rotate(180deg); }
#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.is-unknown { background: oklch(75% .02 215); box-shadow: none; }
.fl-beacon.is-unknown::after { animation: none; }
.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); transform-origin: left; }
.fl-pulse-bar.is-running > i { animation: fl-flow 2.6s ease-in-out infinite; }
@keyframes fl-flow { 0%,100% { transform: scaleX(.22); opacity: .65; } 50% { transform: scaleX(.74); opacity: 1; } }

/* ── The wound: the one problem that matters, opened like a scene ── */
.fl-wound { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  animation: fl-wound-in .45s cubic-bezier(.16,1,.3,1) both; }
.fl-wound--critical { border-color: rgba(251,113,133,.5); background: linear-gradient(100deg, rgba(251,113,133,.16), rgba(251,113,133,.04)); }
.fl-wound--warn { border-color: rgba(251,191,36,.42); background: linear-gradient(100deg, rgba(251,191,36,.14), rgba(251,191,36,.03)); }
@keyframes fl-wound-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fl-rescue { transition: color .18s ease; }
.fl-rescue-btn { box-shadow: 0 10px 24px -14px rgba(0,0,0,.75); }
.fl-rescue-btn:active { transform: translateY(1px); }

/* ── Story card (overview): the wound or the all-clear ── */
.fl-story { border-radius: .75rem; }
.fl-story--wound { border-color: oklch(88% .03 25); background: oklch(98.5% .008 25); }
.fl-story--clear { border-color: oklch(88% .03 155); background: oklch(98.5% .008 155); }

/* ── Tone dots: status without color alone (shape + dot) ── */
.fl-tone-dot { width: .5rem; height: .5rem; border-radius: 2px; flex: none; transform: rotate(45deg); }
.fl-tone-emerald { background: oklch(55% .12 155); }
.fl-tone-rose { background: oklch(58% .15 25); }
.fl-tone-amber { background: oklch(60% .13 75); }
.fl-tone-cyan { background: oklch(60% .11 215); }
.fl-tone-slate { background: oklch(60% .02 215); }

/* ── Warm empty states that teach, not just "nothing here" ── */
.fl-empty { border: 1px dashed oklch(88% .012 215); border-radius: .75rem; background: oklch(99.5% .002 215); }
.fl-empty.material-icons { font-variation-settings: 'wght' 300; }
@media (prefers-reduced-motion: reduce) {
  .fl-beacon::after, .fl-pulse-bar > i, .fl-wound { animation: none; }
  .fl-fear, .fl-rescue { 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-list[data-empty=true] { display: block; }
  .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 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; }
  #integrations-workspace .fl-hero dl { grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; }
  #integrations-workspace .fl-hero dl > div { padding-inline: 8px; }
  #integrations-workspace .fl-hero .fl-countdown { overflow-wrap: anywhere; }
  #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; }
}