/* Intelligence cockpit — light Strands stage + responsive glass weekly brief */
.app[data-active-panel="intelligence-cockpit"] .surface {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  background: #f4f7f8;
}

.app[data-active-panel="intelligence-cockpit"] .float-action {
  display: none;
}

.app[data-active-panel="intelligence-cockpit"] .inner {
  width: 100%;
  height: auto !important;
  min-height: 100%;
  padding: clamp(16px, 1.8vw, 26px) clamp(16px, 2vw, 32px) 34px;
  background:
    radial-gradient(circle at 18% 10%, rgba(101, 222, 224, 0.08), transparent 30%),
    linear-gradient(180deg, #f7f9fa 0%, #f3f6f7 100%);
}

.app[data-active-panel="intelligence-cockpit"] .intelligence-cockpit-view.is-active {
  height: auto !important;
  min-height: calc(100vh - 78px);
  grid-template-rows: auto auto;
  gap: 14px;
}

.app[data-active-panel="intelligence-cockpit"] .cockpit-header {
  min-height: 64px;
  padding: 0 4px;
  grid-template-columns: minmax(300px, 1fr) auto minmax(180px, 1fr);
  color: #15211f;
}

.app[data-active-panel="intelligence-cockpit"] .cockpit-mark {
  border-color: rgba(21, 153, 143, 0.18);
  color: #14968a;
  background: rgba(220, 246, 243, 0.84);
  box-shadow: inset 0 0 20px rgba(44, 185, 173, 0.07);
}

.app[data-active-panel="intelligence-cockpit"] .cockpit-heading h2 button {
  color: #172321;
  letter-spacing: -0.035em;
}

.app[data-active-panel="intelligence-cockpit"] .cockpit-heading h2 button:hover {
  color: #0f867c;
}

.app[data-active-panel="intelligence-cockpit"] .cockpit-heading p {
  color: #7a8884;
}

.app[data-active-panel="intelligence-cockpit"] .cockpit-live {
  border-color: rgba(43, 111, 102, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: #687772;
  box-shadow: 0 8px 24px rgba(49, 87, 80, 0.06);
  backdrop-filter: blur(16px);
}

.app[data-active-panel="intelligence-cockpit"] .intelligence-tabs {
  width: min(760px, 48vw);
  min-height: 46px;
  padding: 4px;
  border-color: rgba(45, 76, 70, 0.09);
  background: rgba(232, 237, 236, 0.80);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
}

.app[data-active-panel="intelligence-cockpit"] .intelligence-tab {
  min-height: 36px;
  padding: 0 14px;
  color: #77827f;
}

.app[data-active-panel="intelligence-cockpit"] .intelligence-tab:hover {
  color: #21312e;
  background: rgba(255, 255, 255, 0.64);
}

.app[data-active-panel="intelligence-cockpit"] .intelligence-tab.is-active {
  color: #162522;
  background: #fff;
  box-shadow: 0 7px 20px rgba(36, 68, 62, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.app[data-active-panel="intelligence-cockpit"] .intelligence-stage {
  min-height: 0;
  border: 1px solid rgba(54, 94, 86, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76) !important;
  box-shadow: 0 22px 62px rgba(40, 71, 65, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.app[data-active-panel="intelligence-cockpit"] .intelligence-stage[data-state="idle"] {
  height: auto !important;
  overflow: visible !important;
}

.app[data-active-panel="intelligence-cockpit"] .intelligence-stage[data-state="viewer"] {
  height: calc(100vh - 150px);
  min-height: 620px;
  overflow: hidden;
}

.app[data-active-panel="intelligence-cockpit"] .radar-idle {
  --cockpit-visual-height: clamp(760px, calc(100vh - 150px), 900px);
  min-height: var(--cockpit-visual-height);
  height: auto !important;
  grid-template-columns: minmax(500px, 1.32fr) minmax(390px, 0.68fr);
  align-items: start;
  gap: clamp(28px, 3.2vw, 62px);
  padding: clamp(24px, 2.4vw, 44px);
  overflow: visible !important;
  color: #16211f;
  background-color: transparent !important;
  background-image: none !important;
  position: relative;
}

.app[data-active-panel="intelligence-cockpit"] .radar-idle::before,
.app[data-active-panel="intelligence-cockpit"] .radar-idle::after {
  display: none !important;
}

.signal-universe {
  --signal-accent: #159d91;
  width: 100%;
  height: var(--cockpit-visual-height);
  min-height: 760px;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  isolation: isolate;
  box-shadow: none;
}

.strands-canvas {
  width: 138%;
  height: 62%;
  position: absolute;
  left: -19%;
  top: 18%;
  z-index: 0;
  display: block;
  opacity: 0.90;
  transform: none;
  filter: saturate(1.06) contrast(1.02);
}

.signal-pager {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 16px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  isolation: isolate;
}

.signal-pager .radar-signal {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 74px;
  padding: 14px 18px !important;
  position: relative !important;
  inset: auto !important;
  z-index: 1;
  transform: scale(0.96) !important;
  transform-origin: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #6f7f7a;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  box-shadow: none !important;
  backdrop-filter: none;
  opacity: 0.42;
  filter: blur(1.7px);
  cursor: pointer;
  transition:
    color 520ms ease,
    opacity 520ms ease,
    filter 520ms ease,
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.signal-pager .radar-signal > span {
  width: 100% !important;
  text-align: center !important;
  position: static !important;
  transform: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  color: inherit;
  font-size: 15px;
  font-weight: 860;
  letter-spacing: 0;
}

.signal-pager .radar-signal > small {
  width: 100%;
  text-align: center;
  color: #87938f;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 650;
}

.signal-pager .radar-signal:hover,
.signal-pager .radar-signal.is-detected {
  background: transparent !important;
  color: #1d302c;
  opacity: 1;
  filter: blur(0);
  transform: scale(1.055) !important;
  box-shadow: none !important;
}

.signal-pager .radar-signal:focus-visible {
  outline: 0;
}

.signal-focus-frame {
  --focus-x: 0px;
  --focus-y: 0px;
  --focus-width: 0px;
  --focus-height: 0px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: var(--focus-width);
  height: var(--focus-height);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--focus-x), var(--focus-y), 0);
  transition:
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
    width 680ms cubic-bezier(0.22, 1, 0.36, 1),
    height 680ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease;
}

.signal-focus-frame.is-ready {
  opacity: 1;
}

.focus-corner {
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid var(--signal-accent, #34d7ff);
  border-radius: 4px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--signal-accent, #34d7ff) 56%, transparent));
  transition: border-color 520ms ease, filter 520ms ease;
}

.focus-corner--top-left {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.focus-corner--top-right {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
}

.focus-corner--bottom-left {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
}

.focus-corner--bottom-right {
  right: 0;
  bottom: 0;
  border-left: 0;
  border-top: 0;
}

.strands-unavailable::before {
  content: "";
  position: absolute;
  inset: 6% -12% 42%;
  z-index: 0;
  background:
    radial-gradient(ellipse at center, rgba(124, 58, 237, 0.16), transparent 62%),
    linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.12), transparent);
  filter: blur(24px);
}

/* Pointer-reactive BorderGlow adapted from the supplied React Bits component. */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: 50;
  --border-radius: 22px;
  --glow-padding: 32px;
  --card-bg: rgba(255, 255, 255, 0.74);
  width: 100%;
  height: var(--cockpit-visual-height);
  min-height: var(--cockpit-visual-height);
  max-width: none;
  justify-self: stretch;
  align-self: stretch;
  position: relative;
  z-index: 3;
  display: grid;
  border: 1px solid rgba(48, 97, 88, 0.15);
  border-radius: var(--border-radius);
  background: var(--card-bg);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  box-shadow: 0 30px 72px rgba(42, 73, 67, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(transparent 0 100%) border-box,
    radial-gradient(at 80% 55%, #a678ff 0, transparent 50%) border-box,
    radial-gradient(at 69% 34%, #ff6ab3 0, transparent 50%) border-box,
    radial-gradient(at 8% 6%, #34d7ff 0, transparent 50%) border-box,
    radial-gradient(at 41% 38%, #57f2d2 0, transparent 50%) border-box,
    radial-gradient(at 86% 85%, #ffb34f 0, transparent 50%) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image: conic-gradient(from var(--cursor-angle) at center, black 25%, transparent 40%, transparent 60%, black 75%);
}

.border-glow-card::after {
  border: 1px solid transparent;
  background:
    radial-gradient(at 80% 55%, rgba(166, 120, 255, 0.25) 0, transparent 50%) padding-box,
    radial-gradient(at 69% 34%, rgba(255, 106, 179, 0.20) 0, transparent 50%) padding-box,
    radial-gradient(at 8% 6%, rgba(52, 215, 255, 0.22) 0, transparent 50%) padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 42%, transparent 67%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 16%, black 84%, transparent 95%);
  mask-composite: subtract, add;
  opacity: calc(0.34 * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: screen;
}

.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;
  mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(66, 206, 218, 0.75),
    inset 0 0 8px rgba(66, 206, 218, 0.32),
    inset 0 0 26px rgba(150, 103, 255, 0.16),
    0 0 8px rgba(66, 206, 218, 0.36),
    0 0 24px rgba(150, 103, 255, 0.18),
    0 0 44px rgba(255, 102, 181, 0.10);
}

.border-glow-inner {
  min-height: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(30px) saturate(126%);
  -webkit-backdrop-filter: blur(30px) saturate(126%);
}

.weekly-glow-card .weekly-intelligence-panel {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.weekly-glow-card .weekly-intelligence-panel::before {
  height: 2px;
  background: linear-gradient(90deg, #28b8aa, #6f8be9 52%, #ef9671);
}

.weekly-glow-card .weekly-intel-head {
  padding: 20px 20px 17px;
  border-color: rgba(48, 98, 88, 0.11);
  background: rgba(255, 255, 255, 0.42);
}

.weekly-glow-card .weekly-intel-week { background: #e9f7f4; color: #11877b; }
.weekly-glow-card .weekly-intel-title h3 { color: #172522; font-size: 17px; }
.weekly-glow-card .weekly-intel-title p { color: #7d8a86; }
.weekly-glow-card .weekly-intel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.weekly-glow-card .weekly-intel-refresh {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #d8e3e0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.76);
  color: #52645f;
  font: inherit;
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
  cursor: pointer;
}
.weekly-glow-card .weekly-intel-archive,
.weekly-glow-card .weekly-intel-source { border-color: #d8e3e0; background: rgba(255, 255, 255, 0.76); color: #52645f; }
.weekly-glow-card .weekly-intel-refresh:hover:not(:disabled),
.weekly-glow-card .weekly-intel-archive:hover,
.weekly-glow-card .weekly-intel-source:hover { border-color: #a7d9d1; background: #eef9f7; color: #0c8277; }
.weekly-glow-card .weekly-intel-refresh:focus-visible {
  outline: 2px solid rgba(32, 151, 137, 0.34);
  outline-offset: 2px;
}
.weekly-glow-card .weekly-intel-refresh:disabled {
  cursor: wait;
  opacity: 0.66;
}
.weekly-glow-card .weekly-intel-scroll { padding: 18px 20px 24px; scrollbar-color: #c4d4d0 transparent; }
.weekly-glow-card .weekly-intel-lead { border-left-color: #27ae9d; color: #2a3d38; font-size: 14px; }
.weekly-glow-card .weekly-intel-section h4 { color: #7c8985; letter-spacing: 0.06em; }
.weekly-glow-card .weekly-intel-row { border-bottom-color: #e8eeec; gap: 12px; }
.weekly-glow-card .weekly-intel-row-title strong { color: #1d2b28; font-size: 13px; }
.weekly-glow-card .weekly-intel-tag { color: #148d80; }
.weekly-glow-card .weekly-intel-type,
.weekly-glow-card .weekly-intel-date { color: #7b8984; }
.weekly-glow-card .weekly-intel-row p,
.weekly-glow-card .weekly-intel-impact p,
.weekly-glow-card .weekly-intel-next p { color: #697873; }
.weekly-glow-card .weekly-intel-impact,
.weekly-glow-card .weekly-intel-next { border-bottom-color: #e8eeec; }
.weekly-glow-card .weekly-intel-impact span,
.weekly-glow-card .weekly-intel-next time { color: #168d80; }
.weekly-glow-card .weekly-intel-details > summary { border-color: #dbe5e2; background: rgba(246, 250, 249, 0.88); color: #455651; }
.weekly-glow-card .weekly-intelligence-loading,
.weekly-glow-card .weekly-intelligence-error { color: #72817c; }
.weekly-glow-card .weekly-intelligence-error button { border-color: #d4e1de; background: #fff; color: #168579; }

.app[data-active-panel="intelligence-cockpit"] .intelligence-viewer-bar {
  border-bottom-color: rgba(45, 90, 82, 0.11);
  background: rgba(249, 251, 251, 0.96);
  color: #23322f;
}

.app[data-active-panel="intelligence-cockpit"] .viewer-source small { color: #7c8985; }
.app[data-active-panel="intelligence-cockpit"] .viewer-actions button { border-color: #dbe4e2; background: #fff; color: #6e7b77; }
.app[data-active-panel="intelligence-cockpit"] .viewer-actions button:hover { border-color: #afd9d2; background: #eef8f6; color: #16877b; }

@media (max-width: 1380px) {
  .app[data-active-panel="intelligence-cockpit"] .radar-idle {
    grid-template-columns: minmax(440px, 1fr) minmax(380px, 0.72fr);
    gap: 30px;
  }
}

@media (max-width: 1120px) {
  .app[data-active-panel="intelligence-cockpit"] .cockpit-header {
    grid-template-columns: 1fr auto;
  }

  .app[data-active-panel="intelligence-cockpit"] .intelligence-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .app[data-active-panel="intelligence-cockpit"] .radar-idle {
    min-height: 0;
    --cockpit-visual-height: clamp(560px, 72vh, 670px);
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }

  .signal-universe {
    height: var(--cockpit-visual-height);
    min-height: 560px;
  }

  .border-glow-card {
    width: min(100%, 640px);
    height: clamp(660px, 82vh, 760px);
    min-height: 660px;
    max-width: 640px;
    justify-self: center;
  }
}

@media (max-width: 720px) {
  .app[data-active-panel="intelligence-cockpit"] .inner {
    padding: 13px 10px 24px;
  }

  .app[data-active-panel="intelligence-cockpit"] .cockpit-header {
    grid-template-columns: 1fr auto;
  }

  .app[data-active-panel="intelligence-cockpit"] .cockpit-heading p {
    display: none;
  }

  .app[data-active-panel="intelligence-cockpit"] .cockpit-live {
    min-width: 38px;
    padding: 0 11px;
    font-size: 0;
  }

  .app[data-active-panel="intelligence-cockpit"] .cockpit-live::after {
    content: "4";
    font-size: 12px;
  }

  .app[data-active-panel="intelligence-cockpit"] .intelligence-tabs {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .app[data-active-panel="intelligence-cockpit"] .intelligence-tabs::-webkit-scrollbar {
    display: none;
  }

  .app[data-active-panel="intelligence-cockpit"] .intelligence-tab {
    min-width: 120px;
  }

  .app[data-active-panel="intelligence-cockpit"] .radar-idle {
    padding: 13px;
  }

  .signal-universe {
    --cockpit-visual-height: 620px;
    height: 620px;
    min-height: 620px;
  }

  .strands-canvas {
    width: 140%;
    height: 54%;
    left: -20%;
    top: 15%;
  }

  .signal-pager {
    left: 15px;
    right: 15px;
    bottom: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .border-glow-card {
    width: 100%;
    height: clamp(620px, 82vh, 710px);
    min-height: 620px;
    border-radius: 16px;
  }

  .weekly-glow-card .weekly-intel-head {
    padding: 17px 16px 14px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .weekly-glow-card .weekly-intel-actions {
    grid-column: 1 / -1;
    justify-self: start;
    flex-wrap: wrap;
  }

  .weekly-glow-card .weekly-intel-scroll {
    padding: 16px;
  }

  .app[data-active-panel="intelligence-cockpit"] .intelligence-stage[data-state="viewer"] {
    min-height: 560px;
    height: 72vh;
  }
}

@media (max-width: 480px) {
  .signal-universe {
    --cockpit-visual-height: 760px;
    height: 760px;
    min-height: 760px;
  }

  .signal-pager {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal-pager .radar-signal,
  .signal-focus-frame,
  .focus-corner,
  .border-glow-card::before,
  .border-glow-card::after,
  .border-glow-card > .edge-light {
    transition: none !important;
  }
}