/* StageCurve - page-specific styles, built on theme.css tokens.
   Deliberately mirrors BayesGWL.css so both in-browser apps read as one
   family; the .sc-* prefix keeps them independent of each other. */

.sc-app {
  padding: 56px 24px 96px;
}

.sc-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding: 14px 18px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(16, 48, 77, 0.06);
  position: sticky;
  top: 76px;
  z-index: 10;
}

.sc-steps a {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-900);
  background: var(--slate-100);
}

.sc-steps a:hover {
  background: var(--teal-400);
  color: var(--navy-950);
}

.sc-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(16, 48, 77, 0.06);
  margin-bottom: 28px;
  scroll-margin-top: 130px;
}

.sc-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--navy-900);
}

.sc-card h3 {
  margin: 24px 0 8px;
  font-size: 15px;
  color: var(--navy-900);
}

.sc-hint {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--slate-500);
}

ul.sc-hint {
  padding-left: 20px;
}

ul.sc-hint li {
  margin-bottom: 6px;
}

/* Input requirements the user has to meet before anything else works -
   loud enough not to be scrolled past. */
.sc-callout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 22px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--slate-50);
  border: 1px solid rgba(16, 48, 77, 0.12);
  border-left: 4px solid var(--teal-400);
  font-size: 14px;
  color: var(--slate-500);
}

.sc-callout strong {
  color: var(--navy-900);
}

.sc-callout code {
  background: var(--slate-100);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 13px;
  color: var(--navy-900);
}

.sc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.sc-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-500);
}

.sc-row input[type="number"],
.sc-row input[type="text"],
.sc-row select {
  padding: 8px 10px;
  border: 1px solid rgba(16, 48, 77, 0.14);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--navy-900);
  background: var(--slate-50);
  width: 130px;
}

.sc-row select.sc-select-wide {
  width: auto;
  min-width: 260px;
}

.sc-slider-label input[type="range"] {
  width: 260px;
}

/* theme.css styles .btn-ghost for the dark hero band (white text on a
   translucent white fill), which renders invisible on these white cards.
   Restyle it for a light background wherever it appears inside the app. */
.sc-card .btn-ghost {
  background: #fff;
  color: var(--navy-900);
  border-color: rgba(16, 48, 77, 0.25);
}

.sc-card .btn-ghost:hover {
  background: var(--slate-100);
  color: var(--navy-900);
}

.sc-card .btn-ghost:disabled,
.sc-card .btn-primary:disabled,
.sc-card .btn-soft:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sc-slider-row .sc-slider-label {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sc-slider-row output {
  min-width: 90px;
  text-align: right;
  font-weight: 700;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}

.sc-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--navy-900);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.sc-file input[type="file"] {
  max-width: 190px;
}

.sc-count,
.sc-status {
  font-size: 13px;
  color: var(--slate-500);
  font-weight: 600;
}

.sc-status.is-error {
  color: #d33;
}

.sc-table-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid rgba(16, 48, 77, 0.1);
  border-radius: 10px;
}

.sc-table {
  width: 100%;
  border-collapse: collapse;
}

.sc-table th,
.sc-table td {
  padding: 6px 10px;
  font-size: 13.5px;
  text-align: left;
  border-bottom: 1px solid var(--slate-100);
  white-space: nowrap;
}

.sc-table td {
  font-variant-numeric: tabular-nums;
}

.sc-table th {
  position: sticky;
  top: 0;
  background: var(--slate-100);
  color: var(--navy-900);
}

/* Key-value read-out of derived DEM/grid properties. */
.sc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.sc-stat {
  background: var(--slate-50);
  border: 1px solid rgba(16, 48, 77, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
}

.sc-stat dt {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.sc-stat dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}

/* No container border here: each Plotly chart draws its own mirrored axis
   frame (see axisFrame() in charts.js), so a container border would sit
   away from the actual plot area. */
.sc-plot {
  width: 100%;
  height: 480px;
  border-radius: 10px;
  background: #fff;
}

.sc-plot--short {
  height: 300px;
}

/* Load-time check plot for one surface - big enough to read the shape of a
   pit or a mine layout, small enough that two sit above the fold together. */
.sc-plot--preview {
  height: 380px;
  margin-bottom: 8px;
}

.sc-plot--tall {
  height: 560px;
}

.sc-summary {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--navy-900);
  background: var(--slate-100);
  padding: 10px 14px;
  border-radius: 8px;
  min-height: 20px;
}

.sc-summary strong {
  font-variant-numeric: tabular-nums;
}

.sc-note {
  font-size: 13px;
  color: var(--slate-500);
  margin: -6px 0 16px;
}

.sc-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--slate-100);
  overflow: hidden;
  margin-bottom: 16px;
}

.sc-progress-bar {
  height: 100%;
  width: 0;
  background: var(--teal-400);
  transition: width 0.2s ease;
}

@media (max-width: 760px) {
  .sc-steps {
    position: static;
  }

  .sc-card {
    padding: 22px;
  }

  .sc-slider-label input[type="range"] {
    width: 100%;
  }
}