/* explorer.css
   Scoped helpers for the Explorer tabs (Risk, etc.).
   Uses existing palette variables from styles.css (e.g., --slate-100..900, --font-serif).
*/

:root{
  /* Additional variables if needed, otherwise use styles.css variables */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/*
  Explorer class checklist (for every new component class):
  1) Mobile-first layout that does not overflow at 320px.
  2) Dark-mode support when setting background/border colors.
  3) Keyboard-focus visibility for interactive controls.
  4) Long-content safety in grid/flex contexts (min-width:0 + overflow-wrap:anywhere).
  5) Forced-colors fallback when hard-coding non-semantic colors.
*/



/* --- Typography / Wrapping Quality (progressive enhancement) --- */
@supports (text-wrap: pretty){
  .explorer-text,
  .explorer-section-desc,
  .explorer-chart-desc,
  .explorer-details-content,
  .explorer-callout-text{
    text-wrap: pretty;
  }
}
@supports (text-wrap: balance){
  .explorer-title,
  .explorer-section-title,
  .explorer-chart-title{
    text-wrap: balance;
  }
}

/* --- Motion / Rendering Safety --- */

@media (prefers-reduced-motion: reduce){
  .explorer-section{
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

.explorer-section{
  display:flex;
  flex-direction:column;
  gap:1.5rem;            /* gap-6 */
  margin-bottom:4rem;    /* mb-16 */
  opacity:0;
  animation:explorerFadeIn .6s ease-in-out forwards;
  will-change:opacity, transform;
}

.explorer-section.delay-1{ animation-delay:.1s; }
.explorer-section.delay-2{ animation-delay:.2s; }
.explorer-section.delay-3{ animation-delay:.3s; }
.explorer-section.delay-4{ animation-delay:.4s; }
.explorer-section.delay-5{ animation-delay:.5s; }

@keyframes explorerFadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* --- Layout & Grid Systems --- */

.explorer-kpi-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;            /* gap-8 */
  margin-bottom:4rem;  /* mb-16 */
}
@media (min-width:768px){
  .explorer-kpi-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1024px){
  .explorer-kpi-grid{ grid-template-columns:repeat(4, 1fr); }
}

.explorer-chart-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;            /* gap-12 */
  margin-bottom:3rem;  /* mb-12 */
}
@media (min-width:1024px){
  .explorer-chart-grid{ grid-template-columns:repeat(2, 1fr); }
}

.explorer-grid-cols-1{
  display:grid;
  grid-template-columns:1fr;
  gap:4rem;            /* gap-16 */
  margin-bottom:4rem;  /* mb-16 */
}

/* Prevent grid/flex children from overflowing (Plotly/SVG/tooltips) */
.explorer-kpi-grid > *,
.explorer-chart-grid > *,
.explorer-grid-cols-1 > *{
  min-width:0;
}

/* --- Banner & Headers --- */

.explorer-banner{
  margin-bottom:3rem;              /* mb-12 */
  border-left:4px solid var(--slate-200);
  padding-left:1.5rem;             /* pl-6 */
  padding-top:.5rem;
  padding-bottom:.5rem;
  transition:border-color .5s;
}


.explorer-banner--neutral{
  border-left-color: var(--slate-500);
}

.explorer-title{
  font-size:1.875rem;              /* text-3xl */
  line-height:2.25rem;
  font-family:var(--font-serif);
  color:var(--slate-800);
  display:flex;
  align-items:center;
  gap:.75rem;                      /* gap-3 */
  margin-bottom:.5rem;             /* mb-2 */
}

.explorer-text{
  color:var(--slate-600);
  max-width:48rem;                 /* max-w-3xl */
  line-height:1.625;               /* leading-relaxed */
  overflow-wrap:anywhere;          /* robust for long tokens */
}

.explorer-metadata{
  font-size:.75rem;                /* text-xs */
  font-family:var(--font-mono);
  margin-top:.75rem;               /* mt-3 */
  color:var(--slate-400);
}

/* --- Badges --- */

.explorer-badge-container{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;                       /* gap-2 */
  margin-bottom:.75rem;            /* mb-3 */
}

.explorer-badge{
  padding:.25rem .75rem;           /* px-3 py-1 */
  font-size:.75rem;                /* text-xs */
  font-weight:700;                 /* font-bold */
  text-transform:uppercase;
  letter-spacing:.05em;            /* tracking-wider */
  border-radius:9999px;            /* rounded-full */
  background-color:var(--slate-100);
  color:var(--slate-500);
}

.explorer-badge--secondary{ font-weight:600; } /* font-semibold */

/* --- KPI Cards --- */

.explorer-accent-card,
.explorer-kpi-card,
.explorer-control-card,
.explorer-signal-card{
  border-left-width:2px;
  border-left-style:solid;
  padding-left:1rem;               /* pl-4 */
}

.explorer-kpi-card--blue{ border-left-color:#3b82f6; }    /* blue-500 */
.explorer-kpi-card--purple{ border-left-color:#a855f7; }  /* purple-500 */
.explorer-kpi-card--amber{ border-left-color:#f59e0b; }   /* amber-500 */
.explorer-kpi-card--emerald{ border-left-color:#10b981; } /* emerald-500 */

.explorer-label,
.explorer-kpi-label,
.explorer-control-label{
  font-size:.75rem;                /* text-xs */
  font-weight:700;
  color:var(--slate-400);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.explorer-kpi-label,
.explorer-control-label{
  margin-bottom:.25rem;            /* mb-1 */
  display:block;
}

.explorer-readout-label{
  display:block;
  font-size:10px;       /* text-[10px] */
  font-weight:700;
  color:var(--slate-400);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:0.25rem;
}

.explorer-kpi-value{
  font-size:2.25rem;               /* text-4xl */
  line-height:2.5rem;
  font-weight:300;                 /* font-light */
  color:var(--slate-800);
  margin:0;
}

.explorer-kpi-sub{
  font-size:.75rem;                /* text-xs */
  color:var(--slate-500);
  margin-top:.25rem;               /* mt-1 */
}

/* --- Chart Containers --- */

.explorer-chart-container{
  width:100%;
  height:26rem;                    /* h-[26rem] */
  position:relative;
  min-width:0;
}
@media (min-width:640px){
  .explorer-chart-container{ height:30rem; }  /* sm */
}
@media (min-width:1024px){
  .explorer-chart-container{ height:32rem; }  /* lg */
}

.explorer-chart-header{ margin-bottom:.75rem; } /* mb-3 */

.explorer-section-head{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.explorer-section-head--with-divider{
  border-bottom:1px solid var(--slate-200);
  padding-bottom:.75rem;
}

.explorer-chart-title{
  font-size:1.125rem;              /* text-lg */
  font-weight:500;                 /* font-medium */
  color:var(--slate-800);
  margin:0;
}

.explorer-chart-desc{
  font-size:.875rem;               /* text-sm */
  color:var(--slate-500);
  margin-top:.25rem;               /* mt-1 */
  overflow-wrap:anywhere;
}

/* --- Details & Summary --- */

.explorer-details{
  margin-top:.75rem;               /* mt-3 */
  width:100%;
}

.explorer-summary{
  cursor:pointer;
  font-size:.75rem;                /* text-xs */
  color:var(--slate-400);
  font-style:italic;
  list-style:none;
  display:flex;
  align-items:center;
  gap:.25rem;                      /* gap-1 */
  transition:color .2s;
}
.explorer-summary::-webkit-details-marker{ display:none; }
.explorer-summary:hover{ color:var(--slate-600); }
.explorer-summary:focus-visible{
  outline:2px solid var(--slate-300);
  outline-offset:2px;
  border-radius:4px;
}

.explorer-summary-icon{
  width:.75rem; height:.75rem;
  transition:transform .2s;
}
.explorer-summary-icon-md{ width:1.25rem; height:1.25rem; }

.explorer-details[open] .explorer-summary-icon{ transform:rotate(180deg); }

.explorer-details-content{
  margin-top:.5rem;                /* mt-2 */
  font-size:.75rem;                /* text-xs */
  color:var(--slate-500);
  border-left:2px solid var(--slate-200);
  padding-left:.75rem;             /* pl-3 */
  width:100%;
  text-align:left;
  overflow-wrap:anywhere;
}

/* --- Callouts & Guides --- */

.explorer-callout{
  padding:1.5rem;                  /* p-6 */
  border-left:4px solid var(--slate-200);
  background-color:var(--slate-50);
  margin-bottom:1rem;
}

.explorer-callout-text{
  font-size:.875rem;
  line-height:1.65;

  font-family:Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight:400;
  font-style:italic;

  color:#475569;                   /* slate-600 equivalent */

  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  font-kerning:normal;
  font-variant-ligatures:common-ligatures;

  overflow-wrap:anywhere;          /* robust for long unbroken tokens */
  hyphens:auto;
}

.explorer-guide-details{
  border-top:1px solid var(--slate-200);
  padding-top:1rem;                /* pt-4 */
  margin-top:1rem;
}

.explorer-guide-summary{
  cursor:pointer;
  font-weight:500;                 /* font-medium */
  color:var(--slate-600);
  display:flex;
  justify-content:space-between;
  align-items:center;
  user-select:none;
  transition:color .2s;
}
.explorer-guide-summary:hover{ color:var(--slate-900); }
.explorer-guide-summary:focus-visible{
  outline:2px solid var(--slate-300);
  outline-offset:2px;
  border-radius:4px;
}

.explorer-guide-content{
  margin-top:2rem;                 /* mt-8 */
  display:flex;
  flex-direction:column;
  gap:3rem;                        /* space-y-12 */
  font-size:.875rem;               /* text-sm */
  color:var(--slate-600);
  line-height:1.625;               /* leading-relaxed */
  max-width:56rem;                 /* max-w-4xl */
}

.explorer-guide-item-title{
  font-size:1rem;                  /* text-base */
  font-weight:700;
  color:var(--slate-800);
  margin-bottom:.5rem;             /* mb-2 */
}

.explorer-guide-item-body{
  display:flex;
  flex-direction:column;
  gap:1rem;                        /* space-y-4 */
  padding-left:1rem;               /* pl-4 */
  border-left:2px solid var(--slate-100);
}

.explorer-guide-highlight{
  color:var(--slate-900);
  font-weight:700;
}

.explorer-list{
  list-style-type:disc;
  padding-left:1.25rem;            /* pl-5 */
  margin-top:.5rem;                /* mt-2 */
  font-size:.75rem;                /* text-xs */
  line-height:1.25rem;
}
.explorer-list li{ margin-bottom:.25rem; }

/* --- Tables --- */

.explorer-table-container{
  height:auto;
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--slate-100);
  border-bottom:1px solid var(--slate-100);
  padding-top:1.5rem;              /* py-6 */
  padding-bottom:1.5rem;
}

.explorer-table-wrapper{
  padding:.5rem;                   /* p-2 */
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  width:100%;
}

/* --- Dividers --- */

.explorer-divider{
  border:0;
  border-top:1px solid var(--slate-200);
  margin-top:1rem;                 /* mt-4 */
  margin-bottom:1rem;
}

.explorer-divider--large{
  margin-top:3rem;                 /* my-12 */
  margin-bottom:3rem;
}

/* --- Utility Helpers (explorer-only) --- */

.explorer-section-title{
  font-size:1.5rem;                /* text-2xl */
  font-family:var(--font-serif);
  color:var(--slate-800);
  margin-bottom:.5rem;             /* mb-2 */
}
.explorer-section-title--mb-large{ margin-bottom:1rem; } /* mb-4 */

.explorer-section-desc{
  font-size:.875rem;               /* text-sm */
  color:var(--slate-500);
  max-width:48rem;                 /* max-w-3xl */
  overflow-wrap:anywhere;
}

/* --- Specific Text Colors --- */
.explorer-text-green{ color:#16a34a; }
.explorer-text-red{ color:#dc2626; }
.explorer-text-amber{ color:#d97706; }
.explorer-text-purple{ color:#9333ea; }
.explorer-text-slate{ color:#334155; } /* slate-700 */


.explorer-font-medium{ font-weight:500; }
.explorer-font-bold{ font-weight:700; }


/* --- Accessibility: higher contrast & forced colors --- */
@media (prefers-contrast: more){
  .explorer-text,
  .explorer-section-desc,
  .explorer-chart-desc,
  .explorer-kpi-sub,
  .explorer-details-content,
  .explorer-callout-text{
    color:var(--slate-700);
  }
  .explorer-metadata{ color:var(--slate-500); }
  .explorer-summary{ color:var(--slate-600); }
  .explorer-summary:hover{ color:var(--slate-800); }
  .explorer-banner,
  .explorer-callout,
  .explorer-details-content{
    border-color:var(--slate-300);
  }
  .explorer-divider{ border-top-color:var(--slate-300); }
}

@media (forced-colors: active){
  .explorer-banner,
  .explorer-callout,
  .explorer-details-content,
  .explorer-divider,
  .explorer-guide-details,
  .explorer-table-container{
    forced-color-adjust:auto;
    border-color:CanvasText;
  }
  .explorer-badge{
    background:Canvas;
    color:CanvasText;
    border:1px solid CanvasText;
  }
  .explorer-kpi-card{ border-left-color:CanvasText; }
  .explorer-text,
  .explorer-section-desc,
  .explorer-chart-desc,
  .explorer-kpi-value,
  .explorer-callout-text{
    color:CanvasText !important;
  }
  .explorer-title,
  .explorer-section-title,
  .explorer-chart-title{
    color:CanvasText !important;
  }
}

/* --- Guide Grid --- */
.explorer-guide-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;           /* gap-8 */
  font-size: 0.875rem; /* text-sm */
  color: var(--slate-600);
  line-height: 1.625;
}
@media (min-width: 768px) {
  .explorer-guide-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* --- Forms --- */
.explorer-select {
  background-color: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 0.25rem;          /* rounded */
  padding: 0.25rem 0.75rem;        /* px-3 py-1 */
  font-size: 0.75rem;              /* text-xs */
  color: var(--slate-600);
  transition: box-shadow 0.15s ease-in-out;
}
.explorer-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px #3b82f6;   /* ring-2 ring-blue-500 */
}
/* --- Variable Selection Controls (Explorer Main) --- */
.explorer-control-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;           /* gap-6 */
  margin-bottom: 2rem;   /* mb-8 */
}
@media (min-width: 768px) {
  .explorer-control-grid { grid-template-columns: repeat(2, 1fr); }
}

.explorer-control-card {
  padding-top: 0.25rem;  /* py-1 */
  padding-bottom: 0.25rem;
}

.explorer-control-card--blue { border-left-color: #3b82f6; }   /* blue-500 */
.explorer-control-card--orange { border-left-color: #f97316; } /* orange-500 */
.explorer-control-card--slate { border-left-color: var(--slate-300); }

.explorer-control-value {
  font-size: 1.125rem;   /* text-lg */
  font-weight: 300;      /* font-light */
  color: var(--slate-800);
  line-height: 1.25;
  word-break: break-word;
}
.explorer-control-value:not(.is-empty) {
  cursor: pointer;
}

.explorer-control-value:not(.is-empty):hover {
  color: #1d4ed8;
}

.explorer-control-value:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 0.125rem;
}

.explorer-axis-values {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.explorer-control-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.75rem;
}

.explorer-clear-btn {
  font-size: 0.75rem;
  color: #ef4444;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  opacity: 0.85;
}

.explorer-clear-btn:hover {
  color: #b91c1c;
  opacity: 1;
}

/* --- Readout / Mini KPI Grid --- */
.explorer-readout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;             /* gap-4 */
  margin-bottom: 1.5rem; /* mb-6 */
  border-bottom: 1px solid var(--slate-100);
  padding-bottom: 1rem;  /* pb-4 */
}
@media (min-width: 768px) {
  .explorer-readout-grid { grid-template-columns: repeat(4, 1fr); }
}

.explorer-readout-value {
  font-size: 1.25rem;    /* text-xl */
  font-weight: 300;      /* font-light */
  font-family: var(--font-mono);
  color: var(--slate-800);
}

/* --- Toolbar --- */
.explorer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;             /* gap-4 */
  margin-bottom: 1rem;   /* mb-4 */
  border-bottom: 1px solid var(--slate-200);
  padding-bottom: 0.75rem; /* pb-3 */
  font-size: 0.875rem;   /* text-sm */
  color: var(--slate-600);
}

/* --- Small Chart Container --- */
.explorer-chart-container--sm {
  height: 14rem;
}

/* --- Inputs & Controls (Additions) --- */

.explorer-btn-select {
  font-size: 0.875rem; /* text-sm */
  font-weight: 600;    /* font-semibold */
  color: var(--slate-700);
  display: flex;
  align-items: center;
  gap: 0.25rem;        /* gap-1 */
  transition: color 0.15s;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.explorer-btn-select:hover { color: #2563eb; } /* blue-600 */
.explorer-btn-select:focus { outline: none; }

.explorer-btn-action {
  font-size: 0.75rem; /* text-xs */
  font-weight: 700;
  color: #2563eb;     /* blue-600 */
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.15s;
  cursor: pointer;
  background: none;
  border: none;
}
.explorer-btn-action:hover { color: #1e40af; } /* blue-800 */

.explorer-focus-ring:focus-visible,
.explorer-btn-select:focus-visible,
.explorer-btn-action:focus-visible{
  outline:2px solid #3b82f6;
  outline-offset:2px;
  border-radius:.25rem;
}

.explorer-input-lg {
  width: 5rem; /* w-20 */
  border: none;
  padding: 0;
  font-size: 1.125rem; /* text-lg */
  font-weight: 300;    /* font-light */
  color: var(--slate-800);
  background-color: transparent;
}
.explorer-input-lg:focus {
  outline: none;
  box-shadow: none;
}
.explorer-input-lg::placeholder { color: var(--slate-300); }

/* --- Split Chart Layout --- */

.explorer-chart-split {
  display: flex;
  flex-direction: column;
  height: auto;
  border: 1px solid var(--slate-200);
  border-radius: 0.5rem; /* rounded-lg */
  overflow: hidden;
}
@media (min-width: 768px) {
  .explorer-chart-split {
    flex-direction: row;
    height: 600px;
  }
}

.explorer-chart-split-main {
  flex: 1;
  position: relative;
  border-bottom: 1px solid var(--slate-200);
  height: 400px;
}
@media (min-width: 768px) {
  .explorer-chart-split-main {
    border-bottom: none;
    border-right: 1px solid var(--slate-200);
    height: auto;
  }
}

.explorer-chart-split-side {
  height: 400px;
  flex-shrink: 0;
  background-color: var(--slate-50);
}
@media (min-width: 768px) {
  .explorer-chart-split-side {
    height: 100%;
    width: 12rem; /* w-48 */
  }
}

/* --- Agents Tab (Additions) --- */

.explorer-stats-grid-5 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem; /* gap-3 */
  margin-bottom: 1.5rem; /* mb-6 */
  align-items: stretch;
}
@media (min-width: 640px) {
  .explorer-stats-grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.explorer-stats-grid-5 > * { min-width: 0; }

.explorer-stat-item {
  padding: 0.75rem; /* p-3 */
  text-align: center;
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: var(--slate-200);
  min-width: 0;
  overflow-wrap: anywhere;
}

.explorer-chart-container--auto {
  width: 100%;
  height: auto;
  min-height: 12rem;
  position: relative;
  min-width: 0;
}

/* Callout Variants */
.explorer-callout--info {
  background-color: #eff6ff; /* blue-50 */
  border-left-color: #60a5fa; /* blue-400 */
}
@media (forced-colors: active){
  .explorer-callout--info{
    background: Canvas;
    border-left-color: CanvasText;
  }
}

/* Signal Cards (Traffic Lights) */
.explorer-signal-card {
  border-left-width: 4px;
  padding-left: 1.25rem; /* pl-5 */
  padding-top: 0.75rem; /* py-3 */
  padding-bottom: 0.75rem;
}

.explorer-signal-card--blue { border-left-color: #3b82f6; } /* blue-500 */
.explorer-signal-card--amber { border-left-color: #f59e0b; } /* amber-500 */

/* Info Cards (within details) */
.explorer-info-card {
  border: 1px solid var(--slate-100);
  border-radius: 0.5rem; /* rounded-lg */
  background-color: var(--slate-50);
  padding: 1rem; /* p-4 */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Badge Color Modifiers */
.explorer-badge--emerald {
  background-color: #d1fae5; /* emerald-100 */
  color: #047857; /* emerald-700 */
}
.explorer-badge--red {
  background-color: #fee2e2; /* red-100 */
  color: #b91c1c; /* red-700 */
}
.explorer-badge--slate {
  background-color: var(--slate-100);
  color: var(--slate-700);
}

/* Specific text colors used in Agents tab */
.explorer-text-emerald { color: #047857; } /* emerald-700 */