/*
 * Unified calculator workspace.
 * JavaScript only switches server-rendered panels; calculations remain on the server.
 */

body.cw-page,
[data-calculator-workspace] {
  --cws-page: var(--cpw-bg, var(--cv1-bg, #f4f6f8));
  --cws-surface: var(--cpw-panel, var(--cv1-surface, #ffffff));
  --cws-surface-soft: var(--cpw-panel-soft, var(--cv1-surface-subtle, #f8fafc));
  --cws-surface-raised: var(--cpw-panel-raised, var(--cv1-surface-raised, #eef3f8));
  --cws-input: var(--cpw-input, var(--cv1-surface-subtle, #f8fafc));
  --cws-line: var(--cpw-line, var(--cv1-line, #dfe5ec));
  --cws-line-strong: var(--cpw-line-strong, var(--cv1-line-strong, #cbd4df));
  --cws-text: var(--cpw-text, var(--cv1-ink, #172033));
  --cws-muted: var(--cpw-muted, var(--cv1-muted, #667085));
  --cws-faint: var(--cpw-faint, var(--cv1-faint, #8792a2));
  --cws-brand: var(--cpw-blue, var(--cv1-brand, #315ee7));
  --cws-brand-ink: var(--cpw-blue, var(--cv1-brand, #315ee7));
  --cws-brand-hover: var(--cpw-blue-hover, var(--cv1-brand-dark, #244cc5));
  --cws-brand-soft: var(--cpw-brand-soft, var(--cv1-brand-soft, #edf3ff));
  --cws-brand-line: var(--cpw-brand-line, #c9d8f5);
  --cws-positive: var(--cpw-green, var(--cv1-positive, #18765b));
  --cws-positive-soft: var(--cpw-success-soft, var(--cv1-positive-soft, #ecf8f3));
  --cws-positive-line: var(--cpw-success-line, #b8e1d1);
  --cws-danger: var(--cpw-red, var(--cv1-critical, #b43b45));
  --cws-danger-soft: var(--cpw-danger-soft, var(--cv1-critical-soft, #fff1f2));
  --cws-danger-line: var(--cpw-danger-line, #edc0c0);
  --cws-focus: var(--cpw-focus-ring, rgba(49, 94, 231, .18));
  --cws-shadow: var(--cv1-shadow-sm, 0 1px 2px rgba(18, 31, 53, .04));
  color: var(--cws-text);
  color-scheme: light;
}

html[data-theme="dark"] body.cw-page,
html[data-theme="dark"] [data-calculator-workspace] {
  --cws-page: #07111d;
  --cws-surface: #0f1b29;
  --cws-surface-soft: #132337;
  --cws-surface-raised: #17283c;
  --cws-input: #132337;
  --cws-line: #263a50;
  --cws-line-strong: #38506a;
  --cws-text: #f2f6fb;
  --cws-muted: #a7b4c6;
  --cws-faint: #8192a8;
  --cws-brand: #315ee7;
  --cws-brand-ink: #82a9ff;
  --cws-brand-hover: #244cc5;
  --cws-brand-soft: #1b3760;
  --cws-brand-line: #31517a;
  --cws-positive: #55d1aa;
  --cws-positive-soft: #143d36;
  --cws-positive-line: #286050;
  --cws-danger: #ed8f96;
  --cws-danger-soft: #442a31;
  --cws-danger-line: #71414a;
  --cws-focus: rgba(130, 169, 255, .28);
  --cws-shadow: 0 1px 2px rgba(0, 6, 13, .28);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) body.cw-page,
  html:not([data-theme="light"]):not([data-theme="dark"]) [data-calculator-workspace],
  html[data-theme="auto"] body.cw-page,
  html[data-theme="auto"] [data-calculator-workspace] {
    --cws-page: #07111d;
    --cws-surface: #0f1b29;
    --cws-surface-soft: #132337;
    --cws-surface-raised: #17283c;
    --cws-input: #132337;
    --cws-line: #263a50;
    --cws-line-strong: #38506a;
    --cws-text: #f2f6fb;
    --cws-muted: #a7b4c6;
    --cws-faint: #8192a8;
    --cws-brand: #315ee7;
    --cws-brand-ink: #82a9ff;
    --cws-brand-hover: #244cc5;
    --cws-brand-soft: #1b3760;
    --cws-brand-line: #31517a;
    --cws-positive: #55d1aa;
    --cws-positive-soft: #143d36;
    --cws-positive-line: #286050;
    --cws-danger: #ed8f96;
    --cws-danger-soft: #442a31;
    --cws-danger-line: #71414a;
    --cws-focus: rgba(130, 169, 255, .28);
    --cws-shadow: 0 1px 2px rgba(0, 6, 13, .28);
    color-scheme: dark;
  }
}

body.cw-page {
  color: var(--cws-text);
  background: var(--cws-page);
}

[data-calculator-workspace] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.cw-page .pf-header {
  color: var(--cws-text);
  background: var(--cws-surface);
  border-color: var(--cws-line);
}

body.cw-page .pf-main,
body.cw-page .pf-footer {
  color: var(--cws-text);
}

body.cw-page .pf-footer {
  border-color: var(--cws-line);
}

body.cw-page .pf-navigation,
body.cw-page .pf-login,
body.cw-page .pf-breadcrumbs,
body.cw-page .pf-footer p,
body.cw-page .pf-footer nav,
body.cw-page .pf-footer small {
  color: var(--cws-muted);
}

[data-calculator-workspace] *,
[data-calculator-workspace] *::before,
[data-calculator-workspace] *::after {
  box-sizing: border-box;
}

[data-calculator-workspace] [hidden] {
  display: none !important;
}

.cw-shell {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.cw-hero {
  display: grid;
  min-width: 0;
  padding: 20px 22px;
  color: var(--cws-text);
  background: var(--cws-surface);
  border: 1px solid var(--cws-line);
  border-radius: 16px;
  box-shadow: var(--cws-shadow);
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  align-items: center;
  gap: 28px;
}

.cw-hero h1 {
  max-width: 780px;
  margin: 5px 0 8px;
  color: var(--cws-text);
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.04;
  letter-spacing: -.043em;
}

.cw-hero p {
  max-width: 780px;
  margin: 0;
  color: var(--cws-muted);
  font-size: 13px;
  line-height: 1.55;
}

.cw-hero aside {
  display: grid;
  min-width: 0;
  padding: 14px 15px;
  color: var(--cws-muted);
  background: var(--cws-surface-soft);
  border: 1px solid var(--cws-line);
  border-radius: 12px;
  gap: 4px;
  font-size: 12px;
  line-height: 1.45;
}

.cw-hero aside strong {
  color: var(--cws-text);
  font-size: 13px;
}

.cw-kicker,
.cw-card > header > span {
  color: var(--cws-brand-ink);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.calculator-workspace__tabs,
[data-workspace-tabs],
.cw-mode-tabs,
.calculator-workspace__debt-tabs,
[data-debt-tool-tabs],
.cw-debt-tabs,
body.cw-page .cw-debt-tabs {
  display: flex;
  max-width: 100%;
  margin: 0;
  overflow-x: auto;
  gap: 6px;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

.calculator-workspace__tabs,
[data-workspace-tabs],
.cw-mode-tabs {
  padding: 6px;
  background: var(--cws-surface-soft);
  border: 1px solid var(--cws-line);
  border-radius: 14px;
}

[data-workspace-tab],
[data-debt-tool-tab] {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--cws-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

[data-workspace-tab] {
  min-width: 132px;
  padding: 0 18px;
}

[data-workspace-tab]:hover,
[data-debt-tool-tab]:hover {
  color: var(--cws-text);
  border-color: var(--cws-line-strong);
}

[data-workspace-tab][aria-selected="true"],
[data-debt-tool-tab][aria-selected="true"],
[data-workspace-tab].is-active,
[data-debt-tool-tab].is-active {
  color: var(--cws-brand-ink);
  background: var(--cws-surface);
  border-color: var(--cws-brand-line);
  box-shadow: var(--cws-shadow);
}

[data-workspace-tab]:focus-visible,
[data-debt-tool-tab]:focus-visible,
[data-calculator-workspace] input:focus-visible,
[data-calculator-workspace] select:focus-visible,
[data-calculator-workspace] textarea:focus-visible,
[data-calculator-workspace] button:focus-visible,
[data-calculator-workspace] a:focus-visible,
[data-workspace-panel]:focus-visible,
[data-debt-tool-panel]:focus-visible {
  outline: 3px solid var(--cws-focus);
  outline-offset: 2px;
}

.calculator-workspace__panels,
[data-workspace-panels] {
  margin-top: 12px;
}

[data-workspace-panel],
[data-debt-tool-panel],
.cw-mode-panel,
.cw-debt-panel {
  min-width: 0;
  max-width: 100%;
}

.cw-mode-panel {
  display: grid;
  gap: 10px;
}

.cw-section-heading {
  display: grid;
  min-width: 0;
  padding: 8px 2px 5px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 410px);
  align-items: end;
  gap: 20px;
}

.cw-section-heading h2 {
  margin: 4px 0 0;
  color: var(--cws-text);
  font-size: clamp(22px, 2.4vw, 29px);
  line-height: 1.12;
  letter-spacing: -.03em;
}

.cw-section-heading > p {
  margin: 0;
  color: var(--cws-muted);
  font-size: 12px;
  line-height: 1.5;
}

.calculator-workspace__debt-tabs,
[data-debt-tool-tabs],
.cw-debt-tabs {
  margin: 0 0 10px;
  padding: 5px 5px 8px;
  border-bottom: 1px solid var(--cws-line);
}

[data-debt-tool-tab] {
  min-height: 40px;
  padding: 0 13px;
  font-size: 12px;
}

.calculator-workspace__layout,
[data-calculator-layout],
.cw-workbench,
[data-workspace-panel] > .pf-calculator-grid,
[data-debt-tool-panel] > .pf-calculator-grid {
  display: grid;
  min-width: 0;
  padding: 1px;
  overflow: hidden;
  background: var(--cws-line);
  border: 1px solid var(--cws-line);
  border-radius: 16px;
  grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 1px;
}

.calculator-workspace__form,
.calculator-workspace__result,
[data-calculator-form-panel],
[data-calculator-result-panel],
.cw-card,
[data-workspace-panel] > .pf-calculator-grid > .pf-calculator-card,
[data-workspace-panel] > .pf-calculator-grid > .pf-result-card,
[data-debt-tool-panel] > .pf-calculator-grid > .pf-calculator-card,
[data-debt-tool-panel] > .pf-calculator-grid > .pf-result-card {
  min-width: 0;
  min-height: 0;
  padding: 21px;
  color: var(--cws-text);
  background: var(--cws-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.calculator-workspace__form,
[data-calculator-form-panel],
.cw-form-card,
[data-workspace-panel] > .pf-calculator-grid > .pf-calculator-card,
[data-debt-tool-panel] > .pf-calculator-grid > .pf-calculator-card {
  order: 1;
}

.calculator-workspace__result,
[data-calculator-result-panel],
.cw-result-card,
[data-workspace-panel] > .pf-calculator-grid > .pf-result-card,
[data-debt-tool-panel] > .pf-calculator-grid > .pf-result-card {
  order: 2;
}

.cw-card > header {
  display: grid;
  min-width: 0;
  margin-bottom: 16px;
  gap: 4px;
}

.cw-card > header h3 {
  margin: 0;
  color: var(--cws-text);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.cw-form {
  display: grid;
  min-width: 0;
  gap: 13px;
}

.cw-form label {
  display: grid;
  min-width: 0;
  gap: 7px;
  color: var(--cws-muted);
  font-size: 12px;
  font-weight: 680;
}

.cw-field-row {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cw-input-suffix {
  display: grid;
  min-width: 0;
  min-height: 48px;
  color: var(--cws-text);
  background: var(--cws-input);
  border: 1px solid var(--cws-line);
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.cw-input-suffix:focus-within {
  border-color: var(--cws-brand);
  box-shadow: 0 0 0 3px var(--cws-focus);
}

.cw-input-suffix input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 5px 0 13px;
  color: var(--cws-text);
  background: transparent;
  border: 0;
  outline: 0;
  caret-color: var(--cws-brand);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.cw-input-suffix > span {
  padding: 0 12px 0 8px;
  color: var(--cws-faint);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.cw-form > label > input,
.cw-form > label > select,
.cw-form fieldset label > input,
.cw-form fieldset label > select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  color: var(--cws-text);
  background: var(--cws-input);
  border: 1px solid var(--cws-line);
  border-radius: 10px;
  outline: 0;
  font-size: 14px;
}

.cw-form > label > input:focus,
.cw-form > label > select:focus,
.cw-form fieldset label > input:focus,
.cw-form fieldset label > select:focus {
  border-color: var(--cws-brand);
  box-shadow: 0 0 0 3px var(--cws-focus);
}

.cw-form > .cv1-button,
.cw-form-card > .cv1-button {
  width: 100%;
  min-height: 48px;
  margin-top: 1px;
  border-radius: 10px;
}

.cw-optional-fields {
  display: grid;
  min-width: 0;
  padding: 13px;
  background: var(--cws-surface-soft);
  border: 1px solid var(--cws-line);
  border-radius: 11px;
  gap: 11px;
}

.cw-optional-fields > p {
  display: grid;
  margin: 0;
  gap: 2px;
}

.cw-optional-fields > p strong {
  color: var(--cws-text);
  font-size: 12px;
}

.cw-optional-fields > p span {
  color: var(--cws-muted);
  font-size: 11px;
  line-height: 1.45;
}

.cw-alert {
  margin: 0 0 13px;
  padding: 11px 12px;
  border: 1px solid var(--cws-line);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
}

.cw-alert--error {
  color: var(--cws-danger);
  background: var(--cws-danger-soft);
  border-color: var(--cws-danger-line);
}

.cw-primary-metric {
  display: grid;
  margin: 2px 0 18px;
  gap: 3px;
}

.cw-primary-metric > span {
  color: var(--cws-muted);
  font-size: 12px;
}

.cw-primary-metric > strong {
  color: var(--cws-text);
  font-size: clamp(28px, 4vw, 39px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}

.cw-metrics,
.cw-guidance,
.cw-pdn-summary {
  display: grid;
  min-width: 0;
  margin-bottom: 17px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cw-pdn-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cw-metrics > div,
.cw-guidance > div,
.cw-pdn-summary > div {
  display: grid;
  min-width: 0;
  padding: 12px;
  color: var(--cws-text);
  background: var(--cws-surface-soft);
  border: 1px solid var(--cws-line);
  border-radius: 10px;
  gap: 4px;
}

.cw-metrics span,
.cw-guidance span,
.cw-pdn-summary span {
  color: var(--cws-muted);
  font-size: 11px;
  line-height: 1.35;
}

.cw-metrics strong,
.cw-guidance strong,
.cw-pdn-summary strong {
  color: var(--cws-text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.cw-result-card > h4 {
  margin: 17px 0 8px;
  color: var(--cws-text);
  font-size: 12px;
}

.cw-action-note {
  display: grid;
  min-width: 0;
  margin: 10px 0 16px;
  padding: 12px;
  background: var(--cws-surface-raised);
  border: 1px solid var(--cws-brand-line);
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.cw-action-note p {
  display: grid;
  margin: 0;
  gap: 2px;
}

.cw-action-note strong {
  color: var(--cws-text);
  font-size: 12px;
}

.cw-action-note span {
  color: var(--cws-muted);
  font-size: 11px;
}

.cw-action-note button,
.cw-secondary-button {
  min-height: 38px;
  padding: 0 12px;
  color: var(--cws-brand-ink);
  background: var(--cws-surface);
  border: 1px solid var(--cws-brand-line);
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.cw-empty {
  display: grid;
  min-height: 128px;
  padding: 18px;
  color: var(--cws-muted);
  background: var(--cws-surface-soft);
  border: 1px dashed var(--cws-line-strong);
  border-radius: 11px;
  place-content: center start;
  gap: 4px;
}

.cw-empty strong {
  color: var(--cws-text);
  font-size: 14px;
}

.cw-empty p {
  max-width: 440px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.cw-support-tools {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cw-support-tool {
  min-width: 0;
  overflow: hidden;
  background: var(--cws-surface);
  border: 1px solid var(--cws-line);
  border-radius: 12px;
}

.cw-support-tool > summary {
  display: flex;
  min-height: 58px;
  padding: 10px 14px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cw-support-tool > summary > span:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.cw-support-tool > summary strong {
  color: var(--cws-text);
  font-size: 13px;
}

.cw-support-tool > summary small {
  color: var(--cws-muted);
  font-size: 11px;
  line-height: 1.4;
}

.cw-support-tool > summary > span:last-child {
  color: var(--cws-brand-ink);
  font-size: 18px;
  line-height: 1;
  transition: transform .16s ease;
}

.cw-support-tool[open] > summary {
  border-bottom: 1px solid var(--cws-line);
}

.cw-support-tool[open] > summary > span:last-child {
  transform: rotate(45deg);
}

.cw-support-body {
  display: grid;
  min-width: 0;
  padding: 14px;
  gap: 13px;
}

.cw-inline-result {
  display: grid;
  min-width: 0;
  padding: 13px;
  color: var(--cws-muted);
  background: var(--cws-surface-soft);
  border: 1px solid var(--cws-line);
  border-radius: 10px;
  gap: 3px;
  font-size: 11px;
}

.cw-inline-result > strong {
  color: var(--cws-text);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

.cw-inline-result > .cw-guidance,
.cw-inline-result > .cw-pdn-summary {
  margin: 8px 0 0;
}

.cw-scenario-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.cw-scenario-grid > article {
  display: grid;
  min-width: 0;
  padding: 13px;
  background: var(--cws-surface-soft);
  border: 1px solid var(--cws-line);
  border-radius: 10px;
  align-content: start;
  gap: 5px;
}

.cw-scenario-grid h4 {
  margin: 0;
  color: var(--cws-text);
  font-size: 12px;
}

.cw-scenario-grid article > strong {
  color: var(--cws-text);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.cw-scenario-grid article > span {
  color: var(--cws-muted);
  font-size: 11px;
}

.cw-debt-list {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.cw-debt-list fieldset {
  position: relative;
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 13px;
  background: var(--cws-surface-soft);
  border: 1px solid var(--cws-line);
  border-radius: 11px;
  gap: 10px;
}

.cw-debt-list legend {
  padding: 0 5px;
  color: var(--cws-text);
  font-size: 12px;
  font-weight: 720;
}

.cw-debt-list [data-remove-debt] {
  position: absolute;
  top: 8px;
  right: 9px;
  min-height: 30px;
  padding: 0 9px;
  color: var(--cws-muted);
  background: var(--cws-surface);
  border: 1px solid var(--cws-line);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}

.cw-secondary-button {
  width: 100%;
}

.cw-disclaimer {
  margin: 0;
  padding: 12px 14px;
  color: var(--cws-muted);
  background: var(--cws-surface-soft);
  border: 1px solid var(--cws-line);
  border-radius: 11px;
  font-size: 11px;
  line-height: 1.5;
}

body.cw-page .pf-conversion {
  color: var(--cws-text);
  background: var(--cws-surface-raised);
  border-color: var(--cws-brand-line);
}

body.cw-page .pf-conversion p,
body.cw-page .pf-conversion-action small {
  color: var(--cws-muted);
}

[data-calculator-workspace] .pf-result-card.is-placeholder {
  min-height: 0;
  padding-block: 32px;
}

[data-calculator-workspace] .pf-section-heading {
  margin-bottom: 16px;
}

[data-calculator-workspace] .pf-section-heading h2,
[data-calculator-workspace] .pf-result-card h2,
[data-calculator-workspace] .pf-result-card h3 {
  color: var(--cws-text);
}

[data-calculator-workspace] .pf-form {
  gap: 13px;
}

[data-calculator-workspace] .pf-form-row {
  gap: 10px;
}

[data-calculator-workspace] .pf-form label,
[data-calculator-workspace] fieldset label {
  color: var(--cws-muted);
}

[data-calculator-workspace] .pf-input-suffix,
[data-calculator-workspace] .pf-form input,
[data-calculator-workspace] .pf-form select,
[data-calculator-workspace] .pf-form textarea {
  max-width: 100%;
  color: var(--cws-text);
  background: var(--cws-input);
  border-color: var(--cws-line);
}

[data-calculator-workspace] .pf-input-suffix:focus-within {
  border-color: var(--cws-brand);
  box-shadow: 0 0 0 3px var(--cws-focus);
}

[data-calculator-workspace] .pf-input-suffix input {
  color: var(--cws-text);
  background: transparent;
  caret-color: var(--cws-brand);
}

[data-calculator-workspace] .pf-input-suffix > span,
[data-calculator-workspace] .pf-form-note,
[data-calculator-workspace] .pf-disclaimer,
[data-calculator-workspace] .pf-primary-metric span,
[data-calculator-workspace] .pf-metric-grid span,
[data-calculator-workspace] .pf-scenarios span,
[data-calculator-workspace] .pf-scenarios small {
  color: var(--cws-muted);
}

[data-calculator-workspace] .cv1-button-primary {
  color: #ffffff;
  background: var(--cws-brand);
  border-color: var(--cws-brand);
}

[data-calculator-workspace] .cv1-button-primary:hover {
  background: var(--cws-brand-hover);
  border-color: var(--cws-brand-hover);
}

[data-calculator-workspace] .pf-metric-grid > div,
[data-calculator-workspace] .pf-scenarios > div,
[data-calculator-workspace] .pf-zero-note {
  color: var(--cws-text);
  background: var(--cws-surface-soft);
  border-color: var(--cws-line);
}

[data-calculator-workspace] .pf-scenarios > div.is-met {
  color: var(--cws-text);
  background: var(--cws-positive-soft);
  border-color: var(--cws-positive-line);
}

[data-calculator-workspace] .cv1-alert-error {
  color: var(--cws-danger);
  background: var(--cws-danger-soft);
  border-color: var(--cws-danger-line);
}

[data-calculator-workspace] .pf-schedule,
[data-calculator-workspace] .pf-total-line {
  border-color: var(--cws-line);
}

[data-calculator-workspace] .pf-schedule-scroll {
  max-width: 100%;
  overflow-x: auto;
}

[data-calculator-workspace] #debt-list {
  display: grid;
  min-width: 0;
  gap: 10px;
}

[data-calculator-workspace] fieldset[data-debt-row] {
  min-width: 0;
  margin: 0;
  padding: 13px;
  color: var(--cws-text);
  background: var(--cws-surface-soft);
  border: 1px solid var(--cws-line);
  border-radius: 11px;
}

[data-calculator-workspace] [data-remove-debt] {
  min-height: 36px;
  color: var(--cws-muted);
  background: var(--cws-surface);
  border-color: var(--cws-line);
}

[data-calculator-workspace] [data-remove-debt]:disabled {
  cursor: not-allowed;
  opacity: .52;
}

[data-calculator-workspace] :where(p, h1, h2, h3, strong, span, small, td, th) {
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .cw-hero,
  .cw-section-heading,
  .calculator-workspace__layout,
  [data-calculator-layout],
  .cw-workbench,
  [data-workspace-panel] > .pf-calculator-grid,
  [data-debt-tool-panel] > .pf-calculator-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .cw-hero,
  .cw-section-heading {
    gap: 12px;
  }

  .calculator-workspace__form,
  .calculator-workspace__result,
  [data-calculator-form-panel],
  [data-calculator-result-panel],
  .cw-form-card,
  .cw-result-card,
  [data-workspace-panel] > .pf-calculator-grid > .pf-calculator-card,
  [data-workspace-panel] > .pf-calculator-grid > .pf-result-card,
  [data-debt-tool-panel] > .pf-calculator-grid > .pf-calculator-card,
  [data-debt-tool-panel] > .pf-calculator-grid > .pf-result-card {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .calculator-workspace__tabs,
  [data-workspace-tabs],
  .cw-mode-tabs {
    margin-inline: -4px;
    padding: 5px;
    border-radius: 12px;
  }

  [data-workspace-tab] {
    min-width: 116px;
    padding-inline: 14px;
  }

  .calculator-workspace__debt-tabs,
  [data-debt-tool-tabs],
  .cw-debt-tabs {
    margin-inline: -2px;
  }

  .calculator-workspace__layout,
  [data-calculator-layout],
  .cw-workbench,
  [data-workspace-panel] > .pf-calculator-grid,
  [data-debt-tool-panel] > .pf-calculator-grid {
    border-radius: 13px;
  }

  .calculator-workspace__form,
  .calculator-workspace__result,
  [data-calculator-form-panel],
  [data-calculator-result-panel],
  .cw-card,
  [data-workspace-panel] > .pf-calculator-grid > .pf-calculator-card,
  [data-workspace-panel] > .pf-calculator-grid > .pf-result-card,
  [data-debt-tool-panel] > .pf-calculator-grid > .pf-calculator-card,
  [data-debt-tool-panel] > .pf-calculator-grid > .pf-result-card {
    padding: 15px;
  }

  .cw-hero {
    padding: 16px;
  }

  .cw-hero h1 {
    font-size: 30px;
  }

  .cw-field-row,
  .cw-metrics,
  .cw-guidance,
  .cw-pdn-summary,
  .cw-scenario-grid,
  .cw-support-tools,
  .cw-action-note {
    grid-template-columns: minmax(0, 1fr);
  }

  .cw-action-note button {
    width: 100%;
  }

  [data-calculator-workspace] .pf-form-row,
  [data-calculator-workspace] .pf-metric-grid,
  [data-calculator-workspace] .pf-metric-grid-three,
  [data-calculator-workspace] .pf-scenarios {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-calculator-workspace] *,
  [data-calculator-workspace] *::before,
  [data-calculator-workspace] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  [data-workspace-tabs],
  [data-debt-tool-tabs],
  .calculator-workspace__tabs,
  .calculator-workspace__debt-tabs {
    display: none !important;
  }

  .calculator-workspace__layout,
  [data-calculator-layout],
  .cw-workbench,
  [data-workspace-panel] > .pf-calculator-grid,
  [data-debt-tool-panel] > .pf-calculator-grid {
    display: block;
    border-color: #999999;
  }
}