/* Sprint116 - calculator line/surface final patch
   Scope: fixes remaining line/border/surface mismatches in DSR and real-estate development feasibility calculators.
   No layout engine change. No repeated DOM loops. */
:root,
html[data-theme="light"]{
  --j116-bg:#f6f8fc;
  --j116-surface:#ffffff;
  --j116-surface-2:#f1f5f9;
  --j116-surface-3:#eaf0f7;
  --j116-text:#0b1220;
  --j116-muted:#64748b;
  --j116-muted-2:#94a3b8;
  --j116-line:#d8e0ec;
  --j116-line-strong:#b8c6d8;
  --j116-primary:#1e5bff;
  --j116-primary-2:#0f4bdc;
  --j116-accent:#14b8a6;
  --j116-card-shadow:0 14px 36px rgba(15,23,42,.08);
}
html[data-theme="dark"],
html.dark{
  --j116-bg:#07111f;
  --j116-surface:#0f1b2d;
  --j116-surface-2:#14243a;
  --j116-surface-3:#1b2d49;
  --j116-text:#f8fafc;
  --j116-muted:#cbd5e1;
  --j116-muted-2:#94a3b8;
  --j116-line:#334155;
  --j116-line-strong:#475569;
  --j116-primary:#4f83ff;
  --j116-primary-2:#2563eb;
  --j116-accent:#2dd4bf;
  --j116-card-shadow:0 18px 48px rgba(0,0,0,.34);
}

/* 1) Progress / connector lines: the unresolved "line" issue in DSR and policy style calculators. */
.progress-tracker,
.loan-progress,
.step-tracker,
.stepper,
.mobile-step-nav,
.tabs{
  background:var(--j116-surface)!important;
  border:1px solid var(--j116-line)!important;
  color:var(--j116-text)!important;
  box-shadow:none!important;
}
.progress-line,
.step-line,
.step-connector,
.progress-tracker::before,
.progress-tracker::after,
.stepper::before,
.stepper::after{
  background:linear-gradient(90deg,var(--j116-line),var(--j116-line-strong),var(--j116-line))!important;
  border-color:var(--j116-line)!important;
  color:var(--j116-line)!important;
  opacity:1!important;
}
.progress-step,
.step-pill,
.mobile-step-nav button,
.tabs .tab{
  background:var(--j116-surface-2)!important;
  color:var(--j116-text)!important;
  border:1px solid var(--j116-line)!important;
  box-shadow:none!important;
}
.progress-step.is-active,
.progress-step.active,
.step-pill.is-active,
.step-pill.active,
.mobile-step-nav button.active,
.tabs .tab.on,
.tabs .tab.active{
  background:linear-gradient(135deg,var(--j116-primary),var(--j116-primary-2))!important;
  color:#fff!important;
  border-color:transparent!important;
}

/* 2) Development feasibility and DSR detail surfaces. Light mode should be bright but not broken; dark mode should never keep white islands. */
#workspace,
.calculator-workspace,
.form-section,
.result-panel,
.result,
.result-card,
.result-box,
.summary-card,
.input-quality-card,
.desktop-compact-summary,
.desktop-compact-summary>div,
.standard-card,
.scenario-section,
.scenario-grid,
.input-group,
.advanced-fields,
.field,
.group-field-grid,
.policy-result,
.consulting-result-card,
.m113-card,
.m113-result,
.m113-detail,
.m113-field,
.m113-group,
.m113-kpi,
.m113-unit-cell,
.unit-guide-card,
.unit-guide-row,
.unit-result-card,
.unit-category-card,
.njob-card,
.njob-result-card,
.dev-feasibility-card,
.feasibility-card,
.project-feasibility-card{
  color:var(--j116-text)!important;
  border-color:var(--j116-line)!important;
}
html[data-theme="light"] #workspace,
html[data-theme="light"] .calculator-workspace,
html[data-theme="light"] .form-section,
html[data-theme="light"] .result-panel,
html[data-theme="light"] .result-card,
html[data-theme="light"] .result-box,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .input-quality-card,
html[data-theme="light"] .desktop-compact-summary>div,
html[data-theme="light"] .standard-card,
html[data-theme="light"] .scenario-section,
html[data-theme="light"] .input-group,
html[data-theme="light"] .advanced-fields,
html[data-theme="light"] .field,
html[data-theme="light"] .policy-result,
html[data-theme="light"] .consulting-result-card,
html[data-theme="light"] .m113-card,
html[data-theme="light"] .m113-result,
html[data-theme="light"] .m113-detail,
html[data-theme="light"] .m113-field,
html[data-theme="light"] .m113-group,
html[data-theme="light"] .m113-kpi,
html[data-theme="light"] .m113-unit-cell,
html[data-theme="light"] .unit-guide-card,
html[data-theme="light"] .unit-result-card,
html[data-theme="light"] .njob-card,
html[data-theme="light"] .njob-result-card,
html[data-theme="light"] .dev-feasibility-card,
html[data-theme="light"] .feasibility-card,
html[data-theme="light"] .project-feasibility-card{
  background:var(--j116-surface)!important;
  box-shadow:var(--j116-card-shadow)!important;
}
html[data-theme="dark"] #workspace,
html.dark #workspace,
html[data-theme="dark"] .calculator-workspace,
html.dark .calculator-workspace,
html[data-theme="dark"] .form-section,
html.dark .form-section,
html[data-theme="dark"] .result-panel,
html.dark .result-panel,
html[data-theme="dark"] .result-card,
html.dark .result-card,
html[data-theme="dark"] .result-box,
html.dark .result-box,
html[data-theme="dark"] .summary-card,
html.dark .summary-card,
html[data-theme="dark"] .input-quality-card,
html.dark .input-quality-card,
html[data-theme="dark"] .desktop-compact-summary>div,
html.dark .desktop-compact-summary>div,
html[data-theme="dark"] .standard-card,
html.dark .standard-card,
html[data-theme="dark"] .scenario-section,
html.dark .scenario-section,
html[data-theme="dark"] .input-group,
html.dark .input-group,
html[data-theme="dark"] .advanced-fields,
html.dark .advanced-fields,
html[data-theme="dark"] .field,
html.dark .field,
html[data-theme="dark"] .policy-result,
html.dark .policy-result,
html[data-theme="dark"] .consulting-result-card,
html.dark .consulting-result-card,
html[data-theme="dark"] .m113-card,
html.dark .m113-card,
html[data-theme="dark"] .m113-result,
html.dark .m113-result,
html[data-theme="dark"] .m113-detail,
html.dark .m113-detail,
html[data-theme="dark"] .m113-field,
html.dark .m113-field,
html[data-theme="dark"] .m113-group,
html.dark .m113-group,
html[data-theme="dark"] .m113-kpi,
html.dark .m113-kpi,
html[data-theme="dark"] .m113-unit-cell,
html.dark .m113-unit-cell,
html[data-theme="dark"] .unit-guide-card,
html.dark .unit-guide-card,
html[data-theme="dark"] .unit-result-card,
html.dark .unit-result-card,
html[data-theme="dark"] .njob-card,
html.dark .njob-card,
html[data-theme="dark"] .njob-result-card,
html.dark .njob-result-card,
html[data-theme="dark"] .dev-feasibility-card,
html.dark .dev-feasibility-card,
html[data-theme="dark"] .feasibility-card,
html.dark .feasibility-card,
html[data-theme="dark"] .project-feasibility-card,
html.dark .project-feasibility-card{
  background:var(--j116-surface)!important;
  box-shadow:var(--j116-card-shadow)!important;
}

/* 3) Inner metric boxes and horizontal separators that stayed too bright/dim. */
.policy-number-box>div,
.metric,
.analysis-item,
.check,
.prep-row,
.m113-mini,
.m113-breakdown,
.m113-unit-result,
.m113-unit-cell,
.unit-line,
.calc-line,
.kpi-line,
.result-line,
.divider,
hr{
  background:var(--j116-surface-2)!important;
  color:var(--j116-text)!important;
  border-color:var(--j116-line)!important;
}
.m113-mini+ .m113-mini,
.metric+ .metric,
.analysis-item+ .analysis-item,
.policy-number-box>div+div,
.unit-line+ .unit-line,
.result-line+ .result-line{
  border-top-color:var(--j116-line)!important;
}

/* 4) Text contrast inside the corrected line/surface areas. */
#workspace h1,#workspace h2,#workspace h3,#workspace h4,
.form-section h3,
.result-panel h3,
.scenario-section h3,
.input-group-head strong,
.advanced-fields summary strong,
.metric strong,
.analysis-item strong,
.check strong,
.m113-title,
.m113-card h3,
.m113-result h3,
.m113-detail h3{
  color:var(--j116-text)!important;
}
#workspace p,#workspace small,#workspace span,
.form-section p,
.result-panel p,
.result-panel small,
.input-group-head span,
.advanced-fields summary span,
.metric span,
.analysis-item span,
.check span,
.m113-sub,
.m113-detail-body,
.prep-row small{
  color:var(--j116-muted)!important;
}

/* 5) Inputs / suffix / placeholder. */
.input-unit-wrap,
.m113-input-wrap,
input,
select,
textarea{
  background:var(--j116-surface-3)!important;
  color:var(--j116-text)!important;
  border-color:var(--j116-line)!important;
}
input::placeholder,
textarea::placeholder{
  color:var(--j116-muted-2)!important;
  opacity:.92!important;
}
.unit-suffix,
.m113-unit{
  color:var(--j116-text)!important;
  background:transparent!important;
  border-color:var(--j116-line)!important;
}

/* 6) Scenario buttons: light mode should not become dark unless selected; dark mode stays dark but readable. */
html[data-theme="light"] .scenario,
html[data-theme="light"] .scenario-card,
html[data-theme="light"] .m113-scenario{
  background:#ffffff!important;
  color:var(--j116-text)!important;
  border-color:var(--j116-line)!important;
}
html[data-theme="dark"] .scenario,
html.dark .scenario,
html[data-theme="dark"] .scenario-card,
html.dark .scenario-card,
html[data-theme="dark"] .m113-scenario,
html.dark .m113-scenario{
  background:var(--j116-surface-2)!important;
  color:var(--j116-text)!important;
  border-color:var(--j116-line)!important;
}
.scenario.active,
.scenario.selected,
.scenario.is-active,
.scenario-card.active,
.scenario-card.selected,
.scenario-card.is-active,
.m113-scenario.is-active{
  background:linear-gradient(135deg,var(--j116-primary),var(--j116-primary-2))!important;
  color:#fff!important;
  border-color:transparent!important;
}
.scenario.active *,.scenario.selected *,.scenario.is-active *,
.scenario-card.active *,.scenario-card.selected *,.scenario-card.is-active *,
.m113-scenario.is-active *{
  color:#fff!important;
}

/* 7) Extra focus for the two reported tools. */
body[data-jg-tool="dev-feasibility"] .progress-tracker,
body[data-jg-tool="dev-feasibility"] .scenario-section,
body[data-jg-tool="dev-feasibility"] .result-panel,
body[data-jg-tool="dev-feasibility"] .form-section,
body[data-jg-tool="dsr"] .progress-tracker,
body[data-jg-tool="dsr"] .scenario-section,
body[data-jg-tool="dsr"] .result-panel,
body[data-jg-tool="dsr"] .form-section{
  border-color:var(--j116-line)!important;
}
body[data-jg-tool="dev-feasibility"] .progress-line,
body[data-jg-tool="dsr"] .progress-line{
  min-width:32px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--j116-line),var(--j116-primary),var(--j116-line))!important;
}

@media(max-width:820px){
  .progress-tracker{gap:10px!important;overflow-x:auto!important;white-space:nowrap!important;padding:10px 12px!important;}
  .progress-line{min-width:26px!important;flex:0 0 26px!important;}
  .scenario-section,.form-section,.result-panel,.m113-card,.m113-result{max-width:100%!important;overflow:hidden!important;}
}